@luanthnh/cntt-ui 0.1.7 → 0.1.9

package/components/ui/Skeleton/index.tsx

@@ -1,13 +0,0 @@
-import { cn } from '@/lib/utils';
-
-function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn('animate-pulse rounded-md bg-gray-200 dark:bg-gray-700', className)}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };

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

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Slider } from './index';
-
-const meta: Meta<typeof Slider> = {
-  title: 'UI/Slider',
-  component: Slider,
-  tags: ['autodocs'],
-  argTypes: {
-    color: {
-      control: 'select',
-      options: ['default', 'white'],
-    },
-    size: {
-      control: 'select',
-      options: ['default', 'sm'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Slider>;
-
-export const Default: Story = {
-  args: {
-    defaultValue: [50],
-    max: 100,
-    step: 1,
-    className: 'w-[60%]',
-  },
-};
-
-export const Range: Story = {
-  args: {
-    defaultValue: [25, 75],
-    max: 100,
-    step: 1,
-    className: 'w-[60%]',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    defaultValue: [40],
-    size: 'sm',
-    className: 'w-[60%]',
-  },
-};

package/components/ui/Slider/index.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SliderPrimitive from '@radix-ui/react-slider';
-
-import { cn } from '@/lib/utils';
-
-interface Props extends Omit<React.ComponentProps<typeof SliderPrimitive.Root>, 'color'> {
-  color?: 'default' | 'white';
-  size?: 'sm' | 'default';
-}
-
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  color = 'default',
-  size = 'default',
-  ...props
-}: Props) {
-  const _values = React.useMemo(
-    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
-    [value, defaultValue, min, max],
-  );
-
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        'group relative flex w-full cursor-pointer touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-        className,
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className={cn(
-          'bg-muted/60 relative grow overflow-hidden rounded-full transition-all data-[orientation=horizontal]:h-[3px] data-[orientation=horizontal]:w-full group-hover:data-[orientation=horizontal]:h-[6px] data-[orientation=vertical]:h-full data-[orientation=vertical]:w-[3px] group-hover:data-[orientation=vertical]:w-[6px]',
-          {
-            'data-[orientation=horizontal]:h-[2px] group-hover:data-[orientation=horizontal]:h-[4px]':
-              size === 'sm',
-            'data-[orientation=vertical]:w-[2px] group-hover:data-[orientation=vertical]:w-[4px]':
-              size === 'sm',
-          },
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn(
-            'absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
-            {
-              'bg-white': color === 'white',
-              'bg-primary': color === 'default',
-            },
-          )}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className={cn(
-            'ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
-            {
-              'border-white bg-white': color === 'white',
-              'bg-primary border-primary': color === 'default',
-              'size-3': size === 'sm',
-            },
-          )}
-        />
-      ))}
-    </SliderPrimitive.Root>
-  );
-}
-
-export { Slider };

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

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '../Button';
-import { Slot } from './index';
-
-const meta: Meta<typeof Slot> = {
-  title: 'UI/Slot',
-  component: Slot,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Slot>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Slot {...args}>
-      <Button>I am a button rendered via Slot</Button>
-    </Slot>
-  ),
-};
-
-export const WithCustomElement: Story = {
-  render: (args) => (
-    <Slot {...args} className="bg-red-500 p-4 text-white">
-      <div>I am a div rendered via Slot with custom styles</div>
-    </Slot>
-  ),
-};

package/components/ui/Slot/index.tsx

@@ -1,106 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { isMotionComponent, motion, type HTMLMotionProps } from 'motion/react';
-
-import { cn } from '@/lib/utils';
-
-type AnyProps = Record<string, unknown>;
-
-type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<
-  HTMLMotionProps<keyof HTMLElementTagNameMap>,
-  'ref'
-> & {
-  ref?: React.Ref<T>;
-};
-
-type WithAsChild<Base extends object> =
-  | (Base & { asChild: true; children: React.ReactElement })
-  | (Base & { asChild?: false | undefined });
-
-type SlotProps<T extends HTMLElement = HTMLElement> = {
-  children?: React.ReactElement;
-} & DOMMotionProps<T>;
-
-function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
-  return (node) => {
-    refs.forEach((ref) => {
-      if (!ref) return;
-      if (typeof ref === 'function') {
-        ref(node);
-      } else {
-        (ref as React.RefObject<T | null>).current = node;
-      }
-    });
-  };
-}
-
-const motionComponentCache = new Map<React.ElementType, React.ElementType>();
-
-function getMotionComponent(Component: React.ElementType): React.ElementType {
-  if (!motionComponentCache.has(Component)) {
-    motionComponentCache.set(Component, motion.create(Component));
-  }
-  return motionComponentCache.get(Component)!;
-}
-
-function mergeProps<T extends HTMLElement>(
-  childProps: AnyProps,
-  slotProps: DOMMotionProps<T>,
-): AnyProps {
-  const merged: AnyProps = { ...childProps, ...slotProps };
-
-  if (childProps.className || slotProps.className) {
-    merged.className = cn(childProps.className as string, slotProps.className as string);
-  }
-
-  if (childProps.style || slotProps.style) {
-    merged.style = {
-      ...(childProps.style as React.CSSProperties),
-      ...(slotProps.style as React.CSSProperties),
-    };
-  }
-
-  return merged;
-}
-
-function Slot<T extends HTMLElement = HTMLElement>({ children, ...props }: SlotProps<T>) {
-  const isValidElement = React.isValidElement(children);
-  const childType = isValidElement ? children.type : null;
-  const isAlreadyMotion =
-    isValidElement &&
-    childType !== null &&
-    typeof childType === 'object' &&
-    isMotionComponent(childType);
-
-  const Base = React.useMemo(() => {
-    if (!isValidElement || !childType) return null;
-    return isAlreadyMotion
-      ? (childType as React.ElementType)
-      : getMotionComponent(childType as React.ElementType);
-  }, [isValidElement, isAlreadyMotion, childType]);
-
-  const childRef = isValidElement && children ? (children.props as AnyProps).ref : undefined;
-  const childProps =
-    isValidElement && children
-      ? (({ ref: _ref, ...rest }) => rest)(children.props as AnyProps)
-      : {};
-
-  const mergedRef = React.useCallback(
-    (node: T | null) => {
-      mergeRefs(childRef as React.Ref<T>, props.ref)(node);
-    },
-    [childRef, props.ref],
-  );
-
-  if (!isValidElement || !Base || !children) return null;
-
-  const mergedProps = mergeProps(childProps, props);
-
-  return React.createElement(Base, {
-    ...mergedProps,
-    ref: mergedRef,
-  });
-}
-
-export { Slot, type SlotProps, type WithAsChild, type DOMMotionProps, type AnyProps };

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

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { toast } from 'sonner';
-
-import { Button } from '../Button';
-import { Toaster } from './index';
-
-const meta: Meta<typeof Toaster> = {
-  title: 'UI/Sonner',
-  component: Toaster,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Toaster>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="flex flex-col gap-2">
-      <Toaster />
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast('Event has been created', {
-            description: 'Sunday, December 03, 2023 at 9:00 AM',
-            action: {
-              label: 'Undo',
-              onClick: () => console.log('Undo'),
-            },
-          })
-        }
-      >
-        Show Toast
-      </Button>
-    </div>
-  ),
-};

package/components/ui/Sonner/index.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import { useTheme } from 'next-themes';
-import { Toaster as Sonner, type ToasterProps } from 'sonner';
-
-import { cn } from '@/lib/utils';
-
-const Toaster = ({ toastOptions, ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps['theme']}
-      className="toaster group"
-      toastOptions={{
-        ...toastOptions,
-        classNames: {
-          toast: cn('sonner-toast', toastOptions?.classNames?.toast),
-          icon: cn('sonner-icon', toastOptions?.classNames?.icon),
-          title: cn('sonner-title', toastOptions?.classNames?.title),
-          description: cn('sonner-description', toastOptions?.classNames?.description),
-          actionButton: cn('sonner-action', toastOptions?.classNames?.actionButton),
-          closeButton: cn('sonner-close', toastOptions?.classNames?.closeButton),
-        },
-      }}
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

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

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Switch } from './index';
-
-const meta: Meta<typeof Switch> = {
-  title: 'UI/Switch',
-  component: Switch,
-  tags: ['autodocs'],
-  argTypes: {
-    disabled: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Switch>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Checked: Story = {
-  args: {
-    defaultChecked: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};

package/components/ui/Switch/index.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-
-import { cn } from '@/lib/utils';
-
-function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
-        )}
-      />
-    </SwitchPrimitive.Root>
-  );
-}
-
-export { Switch };

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

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from './index';
-
-const meta: Meta<typeof Table> = {
-  title: 'UI/Table',
-  component: Table,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-const invoices = [
-  {
-    invoice: 'INV001',
-    paymentStatus: 'Paid',
-    totalAmount: '$250.00',
-    paymentMethod: 'Credit Card',
-  },
-  {
-    invoice: 'INV002',
-    paymentStatus: 'Pending',
-    totalAmount: '$150.00',
-    paymentMethod: 'PayPal',
-  },
-  {
-    invoice: 'INV003',
-    paymentStatus: 'Unpaid',
-    totalAmount: '$350.00',
-    paymentMethod: 'Bank Transfer',
-  },
-];
-
-export const Default: Story = {
-  render: (args) => (
-    <Table {...args}>
-      <TableCaption>A list of your recent invoices.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className="w-25">Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map((invoice) => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className="text-right">$750.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  ),
-};

package/components/ui/Table/index.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
-  return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table
-        data-slot="table"
-        className={cn('w-full caption-bottom text-sm', className)}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn('[&_tr:last-child]:border-0', className)}
-      {...props}
-    />
-  );
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        'dark:bg-card border-t bg-gray-50 font-medium [&>tr]:last:border-b-0',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        'group data-[state=selected]:bg-muted dark:hover:bg-card border-b transition-colors hover:bg-gray-50',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        'text-foreground group-hover:bg-primary-50 dark:group-hover:bg-primary-900/20 h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        'dark:group-hover:bg-card p-2 align-middle whitespace-nowrap group-hover:bg-gray-50 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn('text-muted-foreground mt-4 text-sm', className)}
-      {...props}
-    />
-  );
-}
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

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

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from './index';
-
-const meta: Meta<typeof Tabs> = {
-  title: 'UI/Tabs',
-  component: Tabs,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-export const Default: Story = {
-  render: (args: React.ComponentProps<typeof Tabs>) => (
-    <Tabs {...args} defaultValue="account" className="w-100">
-      <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger value="account">Account</TabsTrigger>
-        <TabsTrigger value="password">Password</TabsTrigger>
-      </TabsList>
-      <TabsContents>
-        <TabsContent value="account">
-          <div className="rounded-md border p-4">
-            <h3 className="text-lg font-medium">Account</h3>
-            <p className="text-muted-foreground text-sm">Make changes to your account here.</p>
-          </div>
-        </TabsContent>
-        <TabsContent value="password">
-          <div className="rounded-md border p-4">
-            <h3 className="text-lg font-medium">Password</h3>
-            <p className="text-muted-foreground text-sm">Change your password here.</p>
-          </div>
-        </TabsContent>
-      </TabsContents>
-    </Tabs>
-  ),
-};