@luanthnh/cntt-ui 0.1.7 → 0.1.9

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

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './index';
-
-const meta: Meta<typeof Accordion> = {
-  title: 'UI/Accordion',
-  component: Accordion,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Accordion>;
-
-export const Default: Story = {
-  args: {
-    type: 'single',
-    collapsible: true,
-  },
-  render: (args) => (
-    <Accordion {...args} className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It comes with default styles that matches the other components&apos; aesthetic.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It&apos;s animated by default, but you can disable it if you prefer.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};

package/components/ui/Accordion/index.tsx

@@ -1,170 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ChevronDownIcon } from 'lucide-react';
-import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
-import { Accordion as AccordionPrimitive } from 'radix-ui';
-
-import { getStrictContext } from '@/lib/get-strict-context';
-import { cn } from '@/lib/utils';
-import { useControlledState } from '@/hooks/use-controlled-state';
-
-type AccordionContextType = {
-  value: string | string[] | undefined;
-  setValue: (value: string | string[] | undefined) => void;
-};
-
-type AccordionItemContextType = {
-  value: string;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-};
-
-const [AccordionProvider, useAccordion] =
-  getStrictContext<AccordionContextType>('AccordionContext');
-
-const [AccordionItemProvider, useAccordionItem] =
-  getStrictContext<AccordionItemContextType>('AccordionItemContext');
-
-type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>;
-
-function Accordion(props: AccordionProps) {
-  const [value, setValue] = useControlledState<string | string[] | undefined>({
-    value: props?.value,
-    defaultValue: props?.defaultValue,
-    onChange: props?.onValueChange as (value: string | string[] | undefined) => void,
-  });
-
-  return (
-    <AccordionProvider value={{ value, setValue }}>
-      <AccordionPrimitive.Root data-slot="accordion" {...props} onValueChange={setValue} />
-    </AccordionProvider>
-  );
-}
-
-type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>;
-
-function AccordionItem(props: AccordionItemProps) {
-  const { value } = useAccordion();
-  const [isOpen, setIsOpen] = React.useState(value?.includes(props?.value) ?? false);
-
-  React.useEffect(() => {
-    setIsOpen(value?.includes(props?.value) ?? false);
-  }, [value, props?.value]);
-
-  return (
-    <AccordionItemProvider value={{ isOpen, setIsOpen, value: props.value }}>
-      <AccordionPrimitive.Item data-slot="accordion-item" {...props} />
-    </AccordionItemProvider>
-  );
-}
-
-type AccordionHeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;
-
-function AccordionHeader(props: AccordionHeaderProps) {
-  return <AccordionPrimitive.Header data-slot="accordion-header" {...props} />;
-}
-
-type AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger>;
-
-function AccordionTrigger({ children, className, ...props }: AccordionTriggerProps) {
-  return (
-    <AccordionHeader className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          'focus-visible:border-ring focus-visible:ring-ring/50 hover:text-primary dark:bg-card flex w-full flex-1 cursor-pointer items-center justify-between gap-4 rounded-md rounded-b-none border-b border-gray-200 bg-gray-50 p-4 text-left text-base font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 [&[data-state=open]>svg]:rotate-180',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionHeader>
-  );
-}
-
-type AccordionContentProps = Omit<
-  React.ComponentProps<typeof AccordionPrimitive.Content>,
-  'asChild' | 'forceMount'
-> &
-  HTMLMotionProps<'div'> & {
-    keepRendered?: boolean;
-  };
-
-function AccordionContent({
-  keepRendered = false,
-  transition = { type: 'spring', stiffness: 150, damping: 22 },
-  ...props
-}: AccordionContentProps) {
-  const { isOpen } = useAccordionItem();
-
-  return (
-    <AnimatePresence>
-      {keepRendered ? (
-        <AccordionPrimitive.Content asChild forceMount>
-          <motion.div
-            key="accordion-content"
-            data-slot="accordion-content"
-            initial={{ height: 0, opacity: 0, '--mask-stop': '0%' }}
-            animate={
-              isOpen
-                ? { height: 'auto', opacity: 1, '--mask-stop': '100%' }
-                : { height: 0, opacity: 0, '--mask-stop': '0%' }
-            }
-            transition={transition}
-            style={{
-              maskImage: 'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
-              WebkitMaskImage:
-                'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
-              overflow: 'hidden',
-            }}
-            className={cn('bg-white py-3 dark:bg-gray-900', props.className)}
-            {...props}
-          />
-        </AccordionPrimitive.Content>
-      ) : (
-        isOpen && (
-          <AccordionPrimitive.Content asChild forceMount>
-            <motion.div
-              key="accordion-content"
-              data-slot="accordion-content"
-              initial={{ height: 0, opacity: 0, '--mask-stop': '0%' }}
-              animate={{ height: 'auto', opacity: 1, '--mask-stop': '100%' }}
-              exit={{ height: 0, opacity: 0, '--mask-stop': '0%' }}
-              transition={transition}
-              style={{
-                maskImage: 'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
-                WebkitMaskImage:
-                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
-                overflow: 'hidden',
-              }}
-              className={cn('bg-white dark:bg-gray-900', props.className)}
-              {...props}
-            >
-              <div className="p-3">{props.children}</div>
-            </motion.div>
-          </AccordionPrimitive.Content>
-        )
-      )}
-    </AnimatePresence>
-  );
-}
-
-export {
-  Accordion,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionContent,
-  useAccordion,
-  useAccordionItem,
-  type AccordionProps,
-  type AccordionItemProps,
-  type AccordionHeaderProps,
-  type AccordionTriggerProps,
-  type AccordionContentProps,
-  type AccordionContextType,
-  type AccordionItemContextType,
-};

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

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { AlertCircle, Terminal } from 'lucide-react';
-
-import { Alert, AlertDescription, AlertTitle } from './index';
-
-const meta: Meta<typeof Alert> = {
-  title: 'UI/Alert',
-  component: Alert,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'destructive'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Alert>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Alert {...args}>
-      <Terminal className="h-4 w-4" />
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>You can add components to your app using the cli.</AlertDescription>
-    </Alert>
-  ),
-};
-
-export const Destructive: Story = {
-  render: (args) => (
-    <Alert {...args} variant="destructive">
-      <AlertCircle className="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
-    </Alert>
-  ),
-};

package/components/ui/Alert/index.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const alertVariants = cva(
-  'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
-  {
-    variants: {
-      variant: {
-        default: 'bg-card text-card-foreground',
-        destructive:
-          'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Alert, AlertTitle, AlertDescription };

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

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '@/components/ui/Button';
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from './index';
-
-const meta: Meta<typeof AlertDialog> = {
-  title: 'UI/AlertDialog',
-  component: AlertDialog,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof AlertDialog>;
-
-export const Default: Story = {
-  render: (args) => (
-    <AlertDialog {...args}>
-      <AlertDialogTrigger asChild>
-        <Button variant="outline">Show Alert Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your account and remove your
-            data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-};

package/components/ui/AlertDialog/index.tsx

@@ -1,172 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { useLenis } from 'lenis/react';
-
-import { cn } from '@/lib/utils';
-import { useControlledState } from '@/hooks/use-controlled-state';
-import { buttonVariants } from '@/components/ui/Button';
-
-function AlertDialog({
-  open: openProp,
-  defaultOpen = false,
-  onOpenChange,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root> & {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}) {
-  const [open, setOpen] = useControlledState<boolean>({
-    value: openProp,
-    defaultValue: defaultOpen,
-    onChange: onOpenChange,
-  });
-
-  const lenis = useLenis();
-
-  React.useEffect(() => {
-    if (open) {
-      lenis?.stop();
-    } else {
-      lenis?.start();
-    }
-  }, [open, lenis]);
-
-  return (
-    <AlertDialogPrimitive.Root
-      data-slot="alert-dialog"
-      {...props}
-      open={open}
-      onOpenChange={setOpen}
-    />
-  );
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
-}
-
-function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-interface AlertDialogContentProps extends React.ComponentProps<
-  typeof AlertDialogPrimitive.Content
-> {
-  overlayClassname?: string;
-}
-
-function AlertDialogContent({ className, overlayClassname, ...props }: AlertDialogContentProps) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay className={overlayClassname} />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
-          className,
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
-}
-
-function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn('text-lg font-semibold', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: 'outline' }), className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

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

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { AspectRatio } from './index';
-
-const meta: Meta<typeof AspectRatio> = {
-  title: 'UI/AspectRatio',
-  component: AspectRatio,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof AspectRatio>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="w-112.5">
-      <AspectRatio ratio={16 / 9} {...args}>
-        <img
-          src="https://images.unsplash.com/photo-1588345921523-c2dcd57f7dcb?w=800&dpr=2&q=80"
-          alt="Photo by Drew Beamer"
-          className="h-full w-full rounded-md object-cover"
-        />
-      </AspectRatio>
-    </div>
-  ),
-};
-
-export const Square: Story = {
-  render: (args) => (
-    <div className="w-75">
-      <AspectRatio ratio={1 / 1} {...args}>
-        <img
-          src="https://images.unsplash.com/photo-1588345921523-c2dcd57f7dcb?w=800&dpr=2&q=80"
-          alt="Photo by Drew Beamer"
-          className="h-full w-full rounded-md object-cover"
-        />
-      </AspectRatio>
-    </div>
-  ),
-};

package/components/ui/AspectRatio/index.tsx

@@ -1,9 +0,0 @@
-'use client';
-
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
-
-function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
-}
-
-export { AspectRatio };

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

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Avatar, AvatarFallback, AvatarImage } from './index';
-
-const meta: Meta<typeof Avatar> = {
-  title: 'UI/Avatar',
-  component: Avatar,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Avatar>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Avatar {...args}>
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const Fallback: Story = {
-  render: (args) => (
-    <Avatar {...args}>
-      <AvatarImage src="" />
-      <AvatarFallback>JD</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const Large: Story = {
-  render: (args) => (
-    <Avatar {...args} className="size-16">
-      <AvatarImage src="https://github.com/shadcn.png" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  ),
-};

package/components/ui/Avatar/index.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-
-import { cn } from '@/lib/utils';
-
-function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn('aspect-square size-full', className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        'bg-primary-50 dark:bg-primary-900/20 text-primary flex size-full items-center justify-center rounded-full',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Avatar, AvatarImage, AvatarFallback };