@luanthnh/cntt-ui 0.1.7 → 0.1.9

package/components/ui/Tabs/index.tsx

@@ -1,78 +0,0 @@
-import { cn } from '@/lib/utils';
-import {
-  TabsContent as TabsContentPrimitive,
-  TabsContents as TabsContentsPrimitive,
-  TabsHighlightItem as TabsHighlightItemPrimitive,
-  TabsHighlight as TabsHighlightPrimitive,
-  TabsList as TabsListPrimitive,
-  Tabs as TabsPrimitive,
-  TabsTrigger as TabsTriggerPrimitive,
-  type TabsContentProps as TabsContentPrimitiveProps,
-  type TabsContentsProps as TabsContentsPrimitiveProps,
-  type TabsListProps as TabsListPrimitiveProps,
-  type TabsProps as TabsPrimitiveProps,
-  type TabsTriggerProps as TabsTriggerPrimitiveProps,
-} from '@/components/primitives/tabs';
-
-type TabsProps = TabsPrimitiveProps;
-
-function Tabs({ className, ...props }: TabsProps) {
-  return <TabsPrimitive className={cn('flex flex-col gap-2', className)} {...props} />;
-}
-
-type TabsListProps = TabsListPrimitiveProps;
-
-function TabsList({ className, ...props }: TabsListProps) {
-  return (
-    <TabsHighlightPrimitive className="bg-background dark:bg-primary-900/30 dark:border-primary-700/40 absolute inset-0 z-0 rounded-md border border-transparent shadow-sm">
-      <TabsListPrimitive
-        className={cn(
-          'bg-muted text-muted-foreground inline-flex h-10 w-fit items-center justify-center rounded-lg p-[3px]',
-          className,
-        )}
-        {...props}
-      />
-    </TabsHighlightPrimitive>
-  );
-}
-
-type TabsTriggerProps = TabsTriggerPrimitiveProps;
-
-function TabsTrigger({ className, ...props }: TabsTriggerProps) {
-  return (
-    <TabsHighlightItemPrimitive value={props.value} className="h-full flex-1">
-      <TabsTriggerPrimitive
-        className={cn(
-          "data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] w-full flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-          className,
-        )}
-        {...props}
-      />
-    </TabsHighlightItemPrimitive>
-  );
-}
-
-type TabsContentsProps = TabsContentsPrimitiveProps;
-
-function TabsContents(props: TabsContentsProps) {
-  return <TabsContentsPrimitive {...props} />;
-}
-
-type TabsContentProps = TabsContentPrimitiveProps;
-
-function TabsContent({ className, ...props }: TabsContentProps) {
-  return <TabsContentPrimitive className={cn('flex-1 outline-none', className)} {...props} />;
-}
-
-export {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContents,
-  TabsContent,
-  type TabsProps,
-  type TabsListProps,
-  type TabsTriggerProps,
-  type TabsContentsProps,
-  type TabsContentProps,
-};

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

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Text } from './index';
-
-const meta: Meta<typeof Text> = {
-  title: 'UI/Text',
-  component: Text,
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['h1', 'h2', 'h3', 'h4', 'cap1', 'cap2', 10, 12, 14, 16, 18, 20, 24, 32, 40, 56, 72],
-    },
-    weight: {
-      control: 'select',
-      options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Text>;
-
-export const Paragraph: Story = {
-  args: {
-    children: 'This is a standard paragraph text.',
-    size: 16,
-  },
-};
-
-export const Titles: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <Text size="h1">Heading 1</Text>
-      <Text size="h2">Heading 2</Text>
-      <Text size="h3">Heading 3</Text>
-      <Text size="h4">Heading 4</Text>
-      <Text size={20}>Heading 5</Text>
-      <Text size={18}>Heading 6</Text>
-    </div>
-  ),
-};
-
-export const Weights: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <Text weight={400}>Normal Weight</Text>
-      <Text weight={500}>Medium Weight</Text>
-      <Text weight={600}>Semibold Weight</Text>
-      <Text weight={700}>Bold Weight</Text>
-    </div>
-  ),
-};

package/components/ui/Text/index.tsx

@@ -1,138 +0,0 @@
-'use client';
-
-import React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-import { Tooltip } from '@/components/ui/Tooltip';
-
-const textVariants = cva('inline-block align-middle', {
-  variants: {
-    size: {
-      h1: 'text-3xl sm:text-4xl md:text-5xl',
-      h2: 'text-2xl sm:text-3xl md:text-4xl',
-      h3: 'text-xl sm:text-2xl md:text-3xl',
-      h4: 'text-lg sm:text-xl md:text-2xl',
-      cap1: 'text-base sm:text-lg',
-      cap2: 'text-sm sm:text-base',
-      10: 'text-[10px] sm:text-xs',
-      12: 'text-xs sm:text-sm',
-      14: 'text-sm sm:text-base',
-      16: 'text-base sm:text-lg',
-      18: 'text-lg sm:text-xl',
-      20: 'text-xl sm:text-2xl',
-      24: 'text-2xl sm:text-3xl',
-      32: 'text-3xl sm:text-4xl',
-      40: 'text-4xl sm:text-5xl',
-      56: 'text-5xl sm:text-6xl',
-      72: 'text-6xl sm:text-7xl',
-    },
-    weight: {
-      100: 'font-thin',
-      200: 'font-extralight',
-      300: 'font-light',
-      400: 'font-normal',
-      500: 'font-medium',
-      600: 'font-semibold',
-      700: 'font-bold',
-      800: 'font-extrabold',
-      900: 'font-black',
-    },
-    height: {
-      14: 'leading-[14px]',
-      16: 'leading-[16px]',
-      18: 'leading-[18px]',
-      20: 'leading-[20px]',
-      24: 'leading-[24px]',
-      28: 'leading-[28px]',
-      32: 'leading-[32px]',
-      40: 'leading-[40px]',
-      48: 'leading-[48px]',
-      64: 'leading-[64px]',
-      80: 'leading-[80px]',
-    },
-    spacing: {
-      '-1': 'tracking-[-0.01em]',
-      '-1.5': 'tracking-[-0.015em]',
-      '-2': 'tracking-[-0.02em]',
-    },
-    color: {
-      default: 'text-foreground',
-      muted: 'text-muted-foreground',
-      primary: 'text-primary',
-      destructive: 'text-destructive',
-      success: 'text-green-600',
-      warning: 'text-yellow-600',
-    },
-    clamp: {
-      1: 'line-clamp-1',
-      2: 'line-clamp-2',
-      3: 'line-clamp-3',
-      4: 'line-clamp-4',
-    },
-  },
-  defaultVariants: {
-    size: 16,
-    weight: 400,
-    color: 'default',
-  },
-});
-
-type ElementProps = Omit<React.HTMLAttributes<HTMLElement>, 'color'>;
-export interface TextProps extends ElementProps, VariantProps<typeof textVariants> {
-  as?: React.ElementType;
-  maxWidth?: string | number;
-  uppercase?: boolean;
-}
-
-export const clamp = (min: string, preferred: string, max: string) =>
-  `clamp(${min}, ${preferred}, ${max})`;
-
-export const Text = React.forwardRef<HTMLElement, TextProps>(
-  (
-    {
-      as: Comp = 'p',
-      size,
-      weight,
-      height,
-      spacing,
-      color,
-      clamp,
-      maxWidth,
-      uppercase,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const isTruncated = maxWidth !== undefined;
-    const styles: React.CSSProperties = {
-      ...(maxWidth && {
-        maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-      }),
-    };
-
-    const content = (
-      <Comp
-        ref={ref}
-        className={cn(
-          textVariants({ size, weight, height, spacing, color, clamp }),
-          uppercase && 'uppercase',
-          className,
-        )}
-        style={styles}
-        {...props}
-      >
-        {children}
-      </Comp>
-    );
-
-    return isTruncated ? <Tooltip label={children}>{children}</Tooltip> : content;
-  },
-);
-
-Text.displayName = 'Text';

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

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Textarea } from './index';
-
-const meta: Meta<typeof Textarea> = {
-  title: 'UI/Textarea',
-  component: Textarea,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Textarea>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Type your message here...',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    placeholder: 'Disabled textarea',
-    disabled: true,
-  },
-};

package/components/ui/Textarea/index.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        'border-primary-100 placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-base dark:border-gray-700',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Textarea };

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

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Bold, Italic, Underline } from 'lucide-react';
-
-import { Toggle } from './index';
-
-const meta: Meta<typeof Toggle> = {
-  title: 'UI/Toggle',
-  component: Toggle,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'outline'],
-    },
-    size: {
-      control: 'select',
-      options: ['default', 'sm', 'lg'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Toggle>;
-
-export const Default: Story = {
-  args: {
-    variant: 'default',
-    size: 'default',
-    children: <Bold className="h-4 w-4" />,
-    'aria-label': 'Toggle bold',
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    variant: 'outline',
-    children: <Italic className="h-4 w-4" />,
-    'aria-label': 'Toggle italic',
-  },
-};
-
-export const WithText: Story = {
-  args: {
-    children: (
-      <>
-        <Underline className="mr-2 h-4 w-4" />
-        Underline
-      </>
-    ),
-    'aria-label': 'Toggle underline',
-  },
-};

package/components/ui/Toggle/index.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const toggleVariants = cva(
-  "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground 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 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] 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-transparent',
-        outline:
-          'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs',
-      },
-      size: {
-        default: 'h-9 min-w-9 px-2',
-        sm: 'h-8 min-w-8 px-1.5',
-        lg: 'h-10 min-w-10 px-2.5',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Toggle, toggleVariants };

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

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Bold, Italic, Underline } from 'lucide-react';
-
-import { ToggleGroup, ToggleGroupItem } from './index';
-
-const meta: Meta<typeof ToggleGroup> = {
-  title: 'UI/ToggleGroup',
-  component: ToggleGroup,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof ToggleGroup>;
-
-export const Default: Story = {
-  args: {
-    type: 'multiple',
-  },
-  render: (args) => (
-    <ToggleGroup {...args}>
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <Underline className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const Outline: Story = {
-  args: {
-    type: 'single',
-    variant: 'outline',
-  },
-  render: (args) => (
-    <ToggleGroup {...args}>
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <Underline className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};

package/components/ui/ToggleGroup/index.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-import { toggleVariants } from '@/components/ui/Toggle';
-
-const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-  size: 'default',
-  variant: 'default',
-});
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      className={cn(
-        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
-        className,
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-}
-
-export { ToggleGroup, ToggleGroupItem };

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

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '../Button';
-import { Tooltip, TooltipProvider } from './index';
-
-const meta: Meta<typeof Tooltip> = {
-  title: 'UI/Tooltip',
-  component: Tooltip,
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <TooltipProvider>
-        <div className="flex items-center justify-center p-12">
-          <Story />
-        </div>
-      </TooltipProvider>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Tooltip>;
-
-export const Default: Story = {
-  args: {
-    label: 'I am a tooltip',
-    children: <Button variant="outline">Hover me</Button>,
-  },
-};

package/components/ui/Tooltip/index.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-
-import { cn } from '@/lib/utils';
-
-export const TooltipProvider = TooltipPrimitive.Provider;
-
-export interface TooltipProps {
-  label: React.ReactNode;
-  children: React.ReactNode;
-  sideOffset?: number;
-  className?: string;
-}
-
-export function Tooltip({ label, children, sideOffset = 4, className }: TooltipProps) {
-  return (
-    <TooltipPrimitive.Root delayDuration={0}>
-      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Content
-          sideOffset={sideOffset}
-          className={cn(
-            'bg-primary-50 dark:bg-primary-900/20 text-primary animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
-            className,
-          )}
-        >
-          {label}
-          <TooltipPrimitive.Arrow className="bg-primary-50 dark:bg-primary-900/20 fill-primary-50 dark:fill-primary-900/20 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-        </TooltipPrimitive.Content>
-      </TooltipPrimitive.Portal>
-    </TooltipPrimitive.Root>
-  );
-}

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

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { VStack } from './index';
-
-const meta: Meta<typeof VStack> = {
-  title: 'UI/Layout/VStack',
-  component: VStack,
-  tags: ['autodocs'],
-  argTypes: {
-    spacing: {
-      control: 'select',
-      options: [0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 'none'],
-    },
-    justify: {
-      control: 'select',
-      options: ['left', 'right', 'center', 'between', 'around', 'evenly'],
-    },
-    align: {
-      control: 'select',
-      options: ['default', 'center', 'start', 'end', 'baseline'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof VStack>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <div className="bg-primary flex h-10 w-20 items-center justify-center rounded text-white">
-          1
-        </div>
-        <div className="bg-primary flex h-10 w-20 items-center justify-center rounded text-white">
-          2
-        </div>
-        <div className="bg-primary flex h-10 w-20 items-center justify-center rounded text-white">
-          3
-        </div>
-      </>
-    ),
-    spacing: 16,
-  },
-};