@luanthnh/cntt-ui 0.1.8 → 0.1.9

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

@@ -1,64 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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',
-  },
-};