@luanthnh/cntt-ui 0.1.5

package/components/ui/Badge/index.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Badge } from './index';
+
+const meta: Meta<typeof Badge> = {
+  title: 'UI/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'default',
+        'secondary',
+        'destructive',
+        'outline',
+        'success',
+        'success-solid',
+        'error',
+        'error-solid',
+        'warning',
+        'warning-solid',
+      ],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+    variant: 'default',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary',
+    variant: 'secondary',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline',
+    variant: 'outline',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    children: 'Success',
+    variant: 'success',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    children: 'Error',
+    variant: 'error-solid',
+  },
+};

package/components/ui/Badge/index.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
+        secondary:
+          'bg-primary-50 dark:bg-primary-900/20 text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+        destructive:
+          'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 border-transparent text-white',
+        outline:
+          'bg-primary/10 text-primary inline-flex items-center rounded-full px-2 py-1 text-xs font-medium',
+        success: 'border-green-500 bg-green-50 text-green-500 [a&]:hover:bg-green-50/90',
+        'success-solid': 'border-transparent bg-green-500 text-white [a&]:hover:bg-green-500/90',
+        error: 'border-red-500 bg-red-50 text-red-500 [a&]:hover:bg-red-50/90',
+        'error-solid': 'border-transparent bg-red-500 text-white [a&]:hover:bg-red-500/90',
+        warning: 'border-yellow-500 bg-yellow-50 text-yellow-500 [a&]:hover:bg-yellow-50/90',
+        'warning-solid': 'border-transparent bg-yellow-500 text-white [a&]:hover:bg-yellow-500/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span';
+
+  return (
+    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/components/ui/Breadcrumb/index.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './index';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'UI/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Breadcrumb {...args}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+export const WithEllipsis: Story = {
+  render: (args) => (
+    <Breadcrumb {...args}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};

package/components/ui/Breadcrumb/index.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/components/ui/Button/index.stories.tsx

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Check, Mail, Plus, Search, Settings, User } from 'lucide-react';
+
+import { Button } from './index';
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: 'A customizable button component with multiple variants and sizes',
+    docs: {
+      description: {
+        component:
+          'The Button component supports various variants, sizes, and states to match your design system.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive', 'outline', 'outline-gray', 'secondary', 'ghost', 'link'],
+      description: 'The visual style of the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'default' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'default', 'lg', 'icon-sm', 'icon', 'icon-lg'],
+      description: 'The size of the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the button',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Show a loading spinner',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    asChild: {
+      control: 'boolean',
+      description: 'Render as a different component',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    children: 'Button',
+    variant: 'default',
+    size: 'md',
+    disabled: false,
+    loading: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// Size Variants
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-4">
+        <Button size="sm">Small</Button>
+        <Button size="md">Medium</Button>
+        <Button size="default">Default</Button>
+        <Button size="lg">Large</Button>
+      </div>
+      <div className="border-t pt-4">
+        <h3 className="mb-2 text-sm font-medium">Icon Buttons</h3>
+        <div className="flex items-center gap-4">
+          <Button size="icon-sm" aria-label="Settings">
+            <Settings />
+          </Button>
+          <Button size="icon" aria-label="User">
+            <User />
+          </Button>
+          <Button size="icon-lg" aria-label="Search">
+            <Search />
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Define the variant types
+type ButtonVariant =
+  | 'default'
+  | 'destructive'
+  | 'outline'
+  | 'outline-gray'
+  | 'secondary'
+  | 'ghost'
+  | 'link';
+
+// Variant Showcase
+export const Variants: Story = {
+  render: () => {
+    const variants: ButtonVariant[] = [
+      'default',
+      'destructive',
+      'outline',
+      'outline-gray',
+      'secondary',
+      'ghost',
+      'link',
+    ];
+
+    return (
+      <div className="space-y-6">
+        {variants.map((variant) => (
+          <div key={variant} className="space-y-2">
+            <h3 className="text-sm font-medium capitalize">{variant}</h3>
+            <div className="flex items-center gap-4">
+              <Button variant={variant} size="sm">
+                {variant === 'link' ? 'Link' : 'Button'}
+              </Button>
+              <Button variant={variant} size="md">
+                {variant === 'link' ? 'Link' : 'Button'}
+              </Button>
+              <Button variant={variant} size="icon" aria-label="Action">
+                <Plus />
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+Variants.storyName = 'Variants';
+
+// With Icons
+export const WithIcons: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <Button>
+          <Mail className="mr-2" />
+          Send Email
+        </Button>
+        <Button variant="outline">
+          <Check className="mr-2" />
+          Confirm
+        </Button>
+        <Button variant="ghost">
+          <Settings className="mr-2" />
+          Settings
+        </Button>
+      </div>
+      <div className="flex items-center gap-4">
+        <Button size="sm">
+          <Mail className="mr-2" />
+          Small
+        </Button>
+        <Button size="md">
+          <Mail className="mr-2" />
+          Medium
+        </Button>
+        <Button size="lg">
+          <Mail className="mr-2" />
+          Large
+        </Button>
+      </div>
+      <Button variant="outline">
+        <Check className="mr-2" />
+        Confirm
+      </Button>
+      <Button variant="ghost">
+        <Settings className="mr-2" />
+        Settings
+      </Button>
+    </div>
+  ),
+};
+
+// States
+export const States: Story = {
+  storyName: 'States',
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <Button loading>Loading</Button>
+        <Button disabled>Disabled</Button>
+      </div>
+      <div className="flex items-center gap-4">
+        <Button variant="outline" loading>
+          <Mail className="mr-2" />
+          Sending...
+        </Button>
+        <Button variant="ghost" loading>
+          <Settings className="mr-2 animate-spin" />
+          Processing
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+// Playground
+export const Playground: Story = {
+  storyName: 'Playground',
+  args: {
+    children: 'Click me',
+  },
+};
+Playground.storyName = 'Playground';

package/components/ui/Button/index.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 rounded-md text-base font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
+        outline:
+          'text-primary border-primary hover:bg-primary/10 dark:border-primary dark:text-primary dark:hover:bg-primary/10 border dark:bg-transparent',
+        'outline-gray':
+          'dark:bg-input/30 dark:hover:bg-input/5 dark:hover:text-primary border border-gray-300 text-black hover:bg-gray-500/10 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-700/20',
+        secondary:
+          'bg-primary-100 text-secondary-foreground hover:bg-secondary/80 dark:text-primary dark:bg-white',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        sm: 'h-8 text-sm px-3 rounded-md [&>svg]:size-3.5',
+        md: 'h-10 text-sm px-4 rounded-md [&>svg]:size-4',
+        default: 'h-12 text-base px-5 rounded-lg [&>svg]:size-5',
+        lg: 'h-14 text-base px-6 rounded-lg [&>svg]:size-6',
+        icon: 'size-9 rounded-lg [&>svg]:size-4',
+        'icon-sm': 'size-8 rounded-lg [&>svg]:size-3.5',
+        'icon-lg': 'size-10 rounded-lg [&>svg]:size-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  },
+);
+
+type ButtonProps = React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+  };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      disabled = false,
+      loading = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'button';
+    const isDisabled = disabled || loading;
+
+    // When loading, only show the spinner
+    const content = loading ? (
+      <Loader2
+        className="animate-spin"
+        style={{
+          width: '1em',
+          height: '1em',
+          fontSize: '1em',
+        }}
+        aria-hidden="true"
+      />
+    ) : (
+      children
+    );
+
+    const buttonProps = {
+      'data-slot': 'button',
+      className: cn(
+        buttonVariants({
+          variant,
+          size,
+          className,
+        }),
+      ),
+      disabled: isDisabled,
+      'aria-disabled': isDisabled,
+      ...(isDisabled && { 'aria-busy': loading }),
+      ...props,
+    } as const;
+
+    if (asChild) {
+      return (
+        <Comp ref={ref} {...buttonProps}>
+          <span className="contents">{content}</span>
+        </Comp>
+      );
+    }
+
+    return (
+      <Comp ref={ref} {...buttonProps}>
+        {content}
+      </Comp>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants, type ButtonProps };

package/components/ui/Calendar/index.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Calendar } from './index';
+
+const meta: Meta<typeof Calendar> = {
+  title: 'UI/Calendar',
+  component: Calendar,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+  args: {
+    mode: 'single',
+    selected: new Date(),
+    className: 'rounded-md border',
+  },
+};