@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/src/components/skeleton.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Skeleton
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type SkeletonProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Skeleton({ className, ...props }: SkeletonProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "animate-shimmer rounded-md bg-linear-to-r from-muted via-white/15 to-muted bg-size-[400%_100%]",
+        className,
+      )}
+      data-slot="skeleton"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Skeleton };
+export type { SkeletonProps };

package/src/components/slider.tsx

@@ -0,0 +1,66 @@
+import { Slider as SliderPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+import { useMemo } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Slider
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type SliderProps = ComponentProps<typeof SliderPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }: SliderProps): JSX.Element {
+  const _values = useMemo(() => {
+    if (Array.isArray(value)) {
+      return value;
+    }
+
+    return Array.isArray(defaultValue) ? defaultValue : [min, max];
+  }, [value, defaultValue, min, max]);
+
+  return (
+    <SliderPrimitive.Root
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col data-disabled:opacity-50",
+        className,
+      )}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      max={max}
+      min={min}
+      value={value}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5"
+        data-slot="slider-track"
+      >
+        <SliderPrimitive.Range
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          data-slot="slider-range"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          key={index}
+          className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          data-slot="slider-thumb"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Slider };
+export type { SliderProps };

package/src/components/sonner.tsx

@@ -0,0 +1,57 @@
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import type { CSSProperties, JSX } from "react";
+import type { ToasterProps as SonnerToasterProps } from "sonner";
+import { Toaster as Sonner } from "sonner";
+
+/* -----------------------------------------------------------------------------
+ * Component: Sonner
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ToasterProps = SonnerToasterProps;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Toaster({ ...props }: ToasterProps): JSX.Element {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      className="toaster group"
+      icons={{
+        error: <OctagonXIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: <CircleCheckIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+      }}
+      style={
+        {
+          "--border-radius": "var(--radius)",
+          "--normal-bg": "var(--popover)",
+          "--normal-border": "var(--border)",
+          "--normal-text": "var(--popover-foreground)",
+        } as CSSProperties
+      }
+      theme={theme as ToasterProps["theme"]}
+      toastOptions={{
+        classNames: {
+          toast: "rounded-2xl",
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { toast, useSonner } from "sonner";
+export { Toaster };
+export type { ToasterProps };

package/src/components/spinner.tsx

@@ -0,0 +1,66 @@
+import { VisuallyHidden } from "radix-ui";
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Spinner
+ * -------------------------------------------------------------------------- */
+
+const SPINNER_COUNT = 8;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface SpinnerProps extends ComponentProps<"span"> {
+  loading?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Spinner({ children, className, loading = true, ...props }: SpinnerProps): ReactNode {
+  if (!loading) {
+    return children;
+  }
+
+  const spinner = (
+    <span className={cn("relative flex size-4 items-center justify-center opacity-60", className)} {...props}>
+      {Array.from({ length: SPINNER_COUNT }, (_, index) => (
+        <span
+          key={index}
+          className="absolute h-full rotate-(--spinner-rotate) before:block before:h-1/3 before:w-full before:animate-out before:rounded-full before:bg-current before:delay-(--spinner-delay) before:animation-duration-(--spinner-duration) before:fade-out-25 before:repeat-infinite motion-reduce:before:animate-none"
+          style={
+            {
+              "--spinner-delay": `-${((SPINNER_COUNT - index) * 100).toString()}ms`,
+              "--spinner-duration": `${(SPINNER_COUNT * 100).toString()}ms`,
+              "--spinner-rotate": `${((360 / SPINNER_COUNT) * index).toString()}deg`,
+              width: `${(100 / SPINNER_COUNT).toString()}%`,
+            } as CSSProperties
+          }
+        />
+      ))}
+    </span>
+  );
+
+  if (children === undefined) {
+    return spinner;
+  }
+
+  return (
+    <span className="relative">
+      <span aria-hidden className="invisible contents">
+        {children}
+      </span>
+      <VisuallyHidden.Root>{children}</VisuallyHidden.Root>
+      <span className="absolute inset-0 flex items-center justify-center">{spinner}</span>
+    </span>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Spinner };
+export type { SpinnerProps };

package/src/components/switch.tsx

@@ -0,0 +1,44 @@
+import { Switch as SwitchPrimitives } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Switch
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type SwitchProps = ComponentProps<typeof SwitchPrimitives.Root> & {
+  size?: "default" | "sm";
+};
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Switch({ className, size = "default", ...props }: SwitchProps): JSX.Element {
+  return (
+    <SwitchPrimitives.Root
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      data-size={size}
+      data-slot="switch"
+      {...props}
+    >
+      <SwitchPrimitives.Thumb
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+        data-slot="switch-thumb"
+      />
+    </SwitchPrimitives.Root>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Switch };
+export type { SwitchProps };

package/src/components/table.tsx

@@ -0,0 +1,183 @@
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Table
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TableProps = ComponentProps<"table">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Table({ className, ...props }: TableProps): JSX.Element {
+  return (
+    <div className="relative w-full overflow-x-auto" data-slot="table-container">
+      <table className={cn("w-full caption-bottom text-sm", className)} data-slot="table" {...props} />
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TableHeader
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TableHeaderProps = ComponentProps<"thead">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TableHeader({ className, ...props }: TableHeaderProps): JSX.Element {
+  return <thead className={cn("[&_tr]:border-b", className)} data-slot="table-header" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TableBody
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TableBodyProps = ComponentProps<"tbody">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TableBody({ className, ...props }: TableBodyProps): JSX.Element {
+  return <tbody className={cn("[&_tr:last-child]:border-0", className)} data-slot="table-body" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TableFooter
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TableFooterProps = ComponentProps<"tfoot">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TableFooter({ className, ...props }: TableFooterProps): JSX.Element {
+  return (
+    <tfoot
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      data-slot="table-footer"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TableRow
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TableRowProps = ComponentProps<"tr">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TableRow({ className, ...props }: TableRowProps): JSX.Element {
+  return (
+    <tr
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-selected:bg-muted",
+        className,
+      )}
+      data-slot="table-row"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TableHead
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TableHeadProps = ComponentProps<"th">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TableHead({ className, ...props }: TableHeadProps): JSX.Element {
+  return (
+    <th
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      data-slot="table-head"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TableCell
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TableCellProps = ComponentProps<"td">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TableCell({ className, ...props }: TableCellProps): JSX.Element {
+  return (
+    <td
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      data-slot="table-cell"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TableCaption
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TableCaptionProps = ComponentProps<"caption">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TableCaption({ className, ...props }: TableCaptionProps): JSX.Element {
+  return (
+    <caption className={cn("mt-4 text-sm text-muted-foreground", className)} data-slot="table-caption" {...props} />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export type {
+  TableBodyProps,
+  TableCaptionProps,
+  TableCellProps,
+  TableFooterProps,
+  TableHeaderProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+};

package/src/components/tabs.tsx

@@ -0,0 +1,110 @@
+import { Tabs as TabsPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import type { TabsListVariants } from "#/variants/tabs";
+import { tabsListVariants } from "#/variants/tabs";
+
+/* -----------------------------------------------------------------------------
+ * Component: Tabs
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Tabs({ className, orientation = "horizontal", ...props }: TabsProps): JSX.Element {
+  return (
+    <TabsPrimitive.Root
+      className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
+      data-orientation={orientation}
+      data-slot="tabs"
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TabsList
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TabsListProps = ComponentProps<typeof TabsPrimitive.List> & TabsListVariants;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TabsList({ className, variant = "default", ...props }: TabsListProps): JSX.Element {
+  return (
+    <TabsPrimitive.List
+      className={tabsListVariants({ className, variant })}
+      data-slot="tabs-list"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TabsTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TabsTrigger({ className, ...props }: TabsTriggerProps): JSX.Element {
+  return (
+    <TabsPrimitive.Trigger
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className,
+      )}
+      data-slot="tabs-trigger"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TabsContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TabsContent({ className, ...props }: TabsContentProps): JSX.Element {
+  return (
+    <TabsPrimitive.Content
+      className={cn("flex-1 text-sm outline-none", className)}
+      data-slot="tabs-content"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+export type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps };

package/src/components/textarea.tsx

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