feat(ui-kit): add button component and variants, update styles and utils, and optimize global styles and theme plugin

Author: Ohh-889

docs/app/globals.css

@@ -1,26 +1,12 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
+@plugin "tailwindcss-animate";
+@plugin "../plugins/tailwind-plugin";
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+html {
+    overflow-x: hidden;
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+html,body,#app {
+    height: 100%;
 }

docs/app/page.tsx

@@ -1,5 +1,7 @@
 import Image from 'next/image';
 
+import { Button } from '@/components/button';
+
 export default function Home() {
   return (
     <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
@@ -12,6 +14,7 @@ export default function Home() {
           src="/next.svg"
           width={180}
         />
+        <Button className="flex-center">Click me</Button>
         <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
           <li className="mb-2 tracking-[-.01em]">
             Get started by editing{' '}

docs/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "ui": "@/components/ui",
+    "utils": "@/lib/utils"
+  },
+  "iconLibrary": "lucide",
+  "registries": {
+    "@sr": "http://localhost:3001/r/{name}.json"
+  },
+  "rsc": true,
+  "style": "new-york",
+  "tailwind": {
+    "baseColor": "neutral",
+    "config": "",
+    "css": "app/globals.css",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "tsx": true
+}

docs/components/button/Button.tsx

@@ -0,0 +1,64 @@
+import { Slot } from '@radix-ui/react-slot';
+import { Loader2 } from 'lucide-react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { buttonVariants } from './button-variants';
+import type { ButtonProps } from './types';
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const {
+    asChild = false,
+    children,
+    className,
+    color,
+    disabled,
+    fitContent,
+    leading,
+    loading,
+    shadow,
+    shape,
+    size,
+    trailing,
+    variant,
+    ...rest
+  } = props;
+
+  const isDisabled = loading || disabled;
+
+  const Comp = asChild ? Slot : 'button';
+
+  // eslint-disable-next-line sort/object-properties
+  const mergedCls = cn(buttonVariants({ color, fitContent, shadow, size, shape, variant }), className);
+
+  if (asChild) {
+    return (
+      <Comp
+        className={mergedCls}
+        disabled={isDisabled}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Comp>
+    );
+  }
+
+  return (
+    <Comp
+      className={mergedCls}
+      disabled={isDisabled}
+      ref={ref}
+      {...rest}
+    >
+      {loading ? leading || <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : leading}
+      {children}
+      {trailing}
+    </Comp>
+  );
+});
+
+Button.displayName = 'Button';
+
+export default Button;

docs/components/button/ButtonGroup.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { buttonGroupVariants } from './button-group-variants';
+import type { ButtonGroupProps } from './types';
+
+const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>((props, ref) => {
+  const { children, className, orientation, ...rest } = props;
+
+  const mergedCls = cn(buttonGroupVariants({ orientation }), className);
+
+  return (
+    <div
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    >
+      {children}
+    </div>
+  );
+});
+
+ButtonGroup.displayName = 'ButtonGroup';
+
+export default ButtonGroup;

docs/components/button/ButtonIcon.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+
+import { Icon } from '../icon';
+
+import Button from './Button';
+import type { ButtonIconProps } from './types';
+
+const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>((props, ref) => {
+  const {
+    children,
+    color = 'accent',
+    fitContent = true,
+    icon,
+    iconProps,
+    shape = 'square',
+    variant = 'ghost',
+    ...rest
+  } = props;
+
+  return (
+    <Button
+      color={color}
+      fitContent={fitContent}
+      ref={ref}
+      shape={shape}
+      variant={variant}
+      {...rest}
+    >
+      {children || (
+        <Icon
+          icon={String(icon)}
+          {...iconProps}
+        />
+      )}
+    </Button>
+  );
+});
+
+ButtonIcon.displayName = 'ButtonIcon';
+
+export default ButtonIcon;

docs/components/button/button-group-variants.ts

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+export const buttonGroupVariants = tv({
+  base: `*:relative focus-visible:*:z-2 *:not-first:not-last:rounded-none`,
+
+  // eslint-disable-next-line sort/object-properties
+  variants: {
+    orientation: {
+      horizontal: `inline-flex *:not-last:border-r-0 *:first:rounded-r-none *:last:rounded-l-none`,
+      vertical: `flex flex-col *:not-last:border-b-0 *:first:rounded-b-none *:last:rounded-t-none`
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+});