@codefast/ui 0.3.16-canary.2 → 0.3.16-canary.3

package/src/components/skeleton.tsx

@@ -0,0 +1,37 @@
+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(
+        "rounded-lg",
+        "bg-gradient-to-r from-muted via-white/15 to-muted bg-[length:400%_100%]",
+        "animate-shimmer motion-reduce:animate-none",
+        className,
+      )}
+      data-slot="skeleton"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Skeleton };
+export type { SkeletonProps };

package/src/components/slider.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { useMemo } from "react";
+
+/* -----------------------------------------------------------------------------
+ * 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 items-center",
+        "touch-none select-none",
+        "data-vertical:h-full data-vertical:min-h-44 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={cn(
+          "relative",
+          "w-full grow overflow-hidden",
+          "rounded-full",
+          "bg-input",
+          "data-horizontal:h-1 data-horizontal:w-full",
+          "data-vertical:h-full data-vertical:w-1",
+        )}
+        data-slot="slider-track"
+      >
+        <SliderPrimitive.Range
+          className={cn("absolute", "bg-primary", "data-horizontal:h-full", "data-vertical:w-full")}
+          data-slot="slider-range"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          key={index}
+          aria-label="Volume"
+          className={cn(
+            "flex size-4 items-center justify-center",
+            "rounded-full border-2 border-primary",
+            "bg-primary shadow-sm outline-hidden",
+            "after:size-full after:rounded-full after:bg-background after:transition-[width,height] after:duration-200 after:ease-spring",
+            "motion-reduce:after:transition-none motion-reduce:after:duration-0",
+            "focus-visible:ring-4 focus-visible:ring-primary/20",
+            "active:not-data-disabled:after:size-1",
+            "dark:focus-visible:ring-primary/40",
+          )}
+          data-slot="slider-thumb"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Slider };
+export type { SliderProps };

package/src/components/sonner.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { cn } from "#/lib/utils";
+import type { CSSProperties, JSX } from "react";
+import type { ToasterProps as SonnerToasterProps } from "sonner";
+
+import { useTheme } from "next-themes";
+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={cn("group", "toaster")}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-border": "var(--border)",
+          "--normal-text": "var(--popover-foreground)",
+        } as CSSProperties
+      }
+      theme={theme as ToasterProps["theme"]}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { toast, useSonner } from "sonner";
+export { Toaster };
+export type { ToasterProps };

package/src/components/spinner.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+
+import { cn } from "#/lib/utils";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+
+/* -----------------------------------------------------------------------------
+ * 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={cn(
+            "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={cn("contents", "invisible")}>
+        {children}
+      </span>
+      <VisuallyHidden>{children}</VisuallyHidden>
+      <span className={cn("absolute flex items-center justify-center", "inset-0")}>{spinner}</span>
+    </span>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Spinner };
+export type { SpinnerProps };

package/src/components/switch.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+/* -----------------------------------------------------------------------------
+ * Component: Switch
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type SwitchProps = ComponentProps<typeof SwitchPrimitives.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Switch({ className, ...props }: SwitchProps): JSX.Element {
+  return (
+    <SwitchPrimitives.Root
+      className={cn(
+        "peer group/switch inline-flex h-5 w-9 shrink-0 items-center p-0.75",
+        "rounded-full border border-transparent shadow-xs outline-hidden",
+        "transition-[background-color,box-shadow] duration-200 ease-snappy",
+        "motion-reduce:transition-none motion-reduce:duration-0",
+        "active:not-disabled:inset-shadow-sm",
+        "focus-visible:ring-3 focus-visible:ring-ring/50",
+        "focus-visible:not-data-checked:border-ring/60",
+        "disabled:opacity-50",
+        "data-checked:bg-primary",
+        "data-checked:focus-visible:ring-primary/20",
+        "dark:data-checked:focus-visible:ring-primary/40",
+        "data-unchecked:bg-input",
+        "dark:data-unchecked:bg-input/80",
+        className,
+      )}
+      data-slot="switch"
+      {...props}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          "block",
+          "size-3.5",
+          "rounded-full",
+          "bg-background shadow-sm",
+          "pointer-events-none",
+          "transition-transform duration-300 ease-spring",
+          "motion-reduce:transition-none motion-reduce:duration-0",
+          "dark:not-data-checked:bg-foreground",
+          "data-checked:translate-x-3.5",
+          "data-unchecked:translate-x-0",
+        )}
+        data-slot="switch-thumb"
+      />
+    </SwitchPrimitives.Root>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Switch };
+export type { SwitchProps };

package/src/components/table.tsx

@@ -0,0 +1,200 @@
+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={cn("relative", "w-full overflow-auto")} data-slot="table-cotainer">
+      <table
+        className={cn("w-full text-sm", "caption-bottom", 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("*:border-b", "*:has-aria-expanded:bg-transparent", 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("*: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(
+        "bg-muted/50 font-medium",
+        "*:border-t *:border-b-0",
+        "*:has-aria-expanded:bg-transparent",
+        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",
+        "motion-reduce:transition-none",
+        "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("p-2", "text-left align-middle font-medium", 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", 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,128 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+/* -----------------------------------------------------------------------------
+ * Component: Tabs
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Tabs({ className, ...props }: TabsProps): JSX.Element {
+  return (
+    <TabsPrimitive.Root
+      className={cn("flex flex-col gap-2", className)}
+      data-slot="tabs"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TabsList
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TabsList({ className, ...props }: TabsListProps): JSX.Element {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        "inline-flex w-fit items-center justify-center gap-1 px-1 py-1",
+        "rounded-xl",
+        "bg-muted text-muted-foreground",
+        className,
+      )}
+      data-slot="tabs-list"
+      {...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(
+        "inline-flex items-center justify-center gap-1.5",
+        "px-2 py-1.5",
+        "rounded-lg",
+        "text-sm font-medium whitespace-nowrap text-muted-foreground",
+        "transition-[color,background-color,box-shadow] duration-150 ease-snappy",
+        "motion-reduce:transition-none motion-reduce:duration-0",
+        "not-dark:outline-hidden",
+        "hover:not-disabled:text-foreground",
+        "focus-visible:ring-3 focus-visible:ring-ring/50",
+        "disabled:opacity-50",
+        "dark:focus-visible:-outline-offset-1 dark:focus-visible:outline-ring",
+        "data-active:bg-background data-active:text-foreground data-active:shadow-sm",
+        "dark:data-active:bg-input/50",
+        "dark:focus-visible:data-active:outline-1",
+        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        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(
+        "mt-2",
+        "rounded-xl ring-ring/50 outline-ring",
+        "focus-visible:ring-4 focus-visible:outline-1",
+        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,49 @@
+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 min-h-16 w-full grow px-3 py-2",
+        "rounded-lg border border-input shadow-xs outline-hidden",
+        "text-base",
+        "transition-[color,box-shadow] duration-150 ease-snappy",
+        "motion-reduce:transition-none motion-reduce:duration-0",
+        "placeholder:text-muted-foreground",
+        "hover:not-disabled:not-focus-visible:border-ring/60",
+        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        "disabled:opacity-50",
+        "aria-invalid:border-destructive",
+        "focus-within:aria-invalid:ring-destructive/20",
+        "hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60",
+        "md:text-sm",
+        "dark:bg-input/30",
+        "dark:focus-within:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      data-slot="textarea"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Textarea };
+export type { TextareaProps };