@codefast/ui 0.0.38 → 0.0.40

package/src/react/select.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import * as React from "react";
+import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Select
+ * -------------------------------------------------------------------------- */
+
+type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;
+const Select = SelectPrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Component: SelectGroup
+ * -------------------------------------------------------------------------- */
+
+type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;
+const SelectGroup = SelectPrimitive.Group;
+
+/* -----------------------------------------------------------------------------
+ * Component: SelectValue
+ * -------------------------------------------------------------------------- */
+
+type SelectValueProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>;
+const SelectValue = SelectPrimitive.Value;
+
+/* -----------------------------------------------------------------------------
+ * Component: SelectTrigger
+ * -------------------------------------------------------------------------- */
+
+type SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;
+type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>;
+
+const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(
+  ({ children, className, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "border-input placeholder:text-muted-foreground flex h-10 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:truncate",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <CaretSortIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  ),
+);
+
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: SelectScrollUpButton
+ * -------------------------------------------------------------------------- */
+
+type SelectScrollUpButtonElement = React.ElementRef<typeof SelectPrimitive.ScrollUpButton>;
+type SelectScrollUpButtonProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>;
+
+const SelectScrollUpButton = React.forwardRef<SelectScrollUpButtonElement, SelectScrollUpButtonProps>(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollUpButton
+      ref={ref}
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpButton>
+  ),
+);
+
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: SelectScrollDownButton
+ * -------------------------------------------------------------------------- */
+
+type SelectScrollDownButtonElement = React.ElementRef<typeof SelectPrimitive.ScrollDownButton>;
+type SelectScrollDownButtonProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>;
+
+const SelectScrollDownButton = React.forwardRef<SelectScrollDownButtonElement, SelectScrollDownButtonProps>(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollDownButton
+      ref={ref}
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownButton>
+  ),
+);
+
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: SelectContent
+ * -------------------------------------------------------------------------- */
+
+type SelectContentElement = React.ElementRef<typeof SelectPrimitive.Content>;
+type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;
+
+const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(
+  ({ children, className, position = "popper", ...props }, ref) => (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  ),
+);
+
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: SelectLabel
+ * -------------------------------------------------------------------------- */
+
+type SelectLabelElement = React.ElementRef<typeof SelectPrimitive.Label>;
+type SelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;
+
+const SelectLabel = React.forwardRef<SelectLabelElement, SelectLabelProps>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
+));
+
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: SelectItem
+ * -------------------------------------------------------------------------- */
+
+type SelectItemElement = React.ElementRef<typeof SelectPrimitive.Item>;
+type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>;
+
+const SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>(({ children, className, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="size-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: SelectSeparator
+ * -------------------------------------------------------------------------- */
+
+type SelectSeparatorElement = React.ElementRef<typeof SelectPrimitive.Separator>;
+type SelectSeparatorProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>;
+
+const SelectSeparator = React.forwardRef<SelectSeparatorElement, SelectSeparatorProps>(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.Separator ref={ref} className={cn("bg-muted -mx-1 my-1 h-px", className)} {...props} />
+  ),
+);
+
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  type SelectProps,
+  type SelectGroupProps,
+  type SelectValueProps,
+  type SelectTriggerProps,
+  type SelectContentProps,
+  type SelectLabelProps,
+  type SelectItemProps,
+  type SelectSeparatorProps,
+  type SelectScrollUpButtonProps,
+  type SelectScrollDownButtonProps,
+};

package/src/react/separator.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Separator
+ * -------------------------------------------------------------------------- */
+
+type SeparatorElement = React.ElementRef<typeof SeparatorPrimitive.Root>;
+type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;
+
+const Separator = React.forwardRef<SeparatorElement, SeparatorProps>(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
+      {...props}
+    />
+  ),
+);
+
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Separator, type SeparatorProps };

package/src/react/sheet.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { type VariantProps } from "cva";
+import { cn, cva } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Sheet
+ * -------------------------------------------------------------------------- */
+
+const sheetVariants = cva({
+  base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500 animate-ease-in-out fixed z-50 gap-4 p-6 shadow-lg",
+  variants: {
+    side: {
+      top: "data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 border-b",
+      bottom:
+        "data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom inset-x-0 bottom-0 border-t",
+      left: "data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+      right:
+        "data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+    },
+  },
+  defaultVariants: {
+    side: "right",
+  },
+});
+
+type SheetVariantsProps = VariantProps<typeof sheetVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Component: Sheet
+ * -------------------------------------------------------------------------- */
+
+type SheetProps = React.ComponentProps<typeof SheetPrimitive.Root>;
+const Sheet = SheetPrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Component: SheetTrigger
+ * -------------------------------------------------------------------------- */
+
+type SheetTriggerProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger>;
+const SheetTrigger = SheetPrimitive.Trigger;
+
+/* -----------------------------------------------------------------------------
+ * Component: SheetClose
+ * -------------------------------------------------------------------------- */
+
+type SheetCloseProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Close>;
+const SheetClose = SheetPrimitive.Close;
+
+/* -----------------------------------------------------------------------------
+ * Component: SheetContent
+ * -------------------------------------------------------------------------- */
+
+type SheetContentElement = React.ElementRef<typeof SheetPrimitive.Content>;
+type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & SheetVariantsProps;
+
+const SheetContent = React.forwardRef<SheetContentElement, SheetContentProps>(
+  ({ children, side = "right", className, ...props }, ref) => (
+    <SheetPrimitive.Portal>
+      <SheetPrimitive.Overlay className="data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/80" />
+      <SheetPrimitive.Content ref={ref} className={sheetVariants({ side, className })} {...props}>
+        {children}
+        <SheetPrimitive.Close className="data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none">
+          <Cross2Icon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPrimitive.Portal>
+  ),
+);
+
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: SheetHeader
+ * -------------------------------------------------------------------------- */
+
+type SheetHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+
+function SheetHeader({ className, ...props }: SheetHeaderProps): React.JSX.Element {
+  return <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: SheetFooter
+ * -------------------------------------------------------------------------- */
+
+type SheetFooterProps = React.HTMLAttributes<HTMLDivElement>;
+
+function SheetFooter({ className, ...props }: SheetFooterProps): React.JSX.Element {
+  return <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />;
+}
+
+SheetFooter.displayName = "SheetFooter";
+
+/* -----------------------------------------------------------------------------
+ * Component: SheetTitle
+ * -------------------------------------------------------------------------- */
+
+type SheetTitleElement = React.ElementRef<typeof SheetPrimitive.Title>;
+type SheetTitleProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>;
+
+const SheetTitle = React.forwardRef<SheetTitleElement, SheetTitleProps>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title ref={ref} className={cn("text-foreground text-lg font-semibold", className)} {...props} />
+));
+
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: SheetDescription
+ * -------------------------------------------------------------------------- */
+
+type SheetDescriptionElement = React.ElementRef<typeof SheetPrimitive.Description>;
+type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>;
+
+const SheetDescription = React.forwardRef<SheetDescriptionElement, SheetDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <SheetPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  ),
+);
+
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  type SheetProps,
+  type SheetTriggerProps,
+  type SheetCloseProps,
+  type SheetContentProps,
+  type SheetHeaderProps,
+  type SheetFooterProps,
+  type SheetTitleProps,
+  type SheetDescriptionProps,
+};

package/src/react/skeleton.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Skeleton
+ * -------------------------------------------------------------------------- */
+
+type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+
+function Skeleton({ className, ...props }: SkeletonProps): React.JSX.Element {
+  return <div className={cn("bg-primary/10 animate-pulse rounded", className)} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Skeleton, type SkeletonProps };

package/src/react/slider.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Slider
+ * -------------------------------------------------------------------------- */
+
+type SliderElement = React.ElementRef<typeof SliderPrimitive.Root>;
+type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>;
+
+const Slider = React.forwardRef<SliderElement, SliderProps>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
+      <SliderPrimitive.Range className="bg-primary absolute h-full" />
+    </SliderPrimitive.Track>
+
+    {(props.value ?? props.defaultValue ?? []).map((value, index) => (
+      <SliderPrimitive.Thumb
+        // eslint-disable-next-line react/no-array-index-key -- index is stable
+        key={index}
+        className="border-primary/50 bg-background block size-4 rounded-full border shadow transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50"
+        {...(props.tabIndex !== undefined ? { tabIndex: props.tabIndex } : undefined)}
+      />
+    ))}
+  </SliderPrimitive.Root>
+));
+
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Slider, type SliderProps };

package/src/react/spinner.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Spinner
+ * -------------------------------------------------------------------------- */
+
+const spinnerCount = 8;
+
+type SpinnerElement = HTMLSpanElement;
+
+interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+  loading?: boolean;
+}
+
+const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>(
+  ({ children, className, loading = true, ...props }, ref) => {
+    if (!loading) {
+      return children;
+    }
+
+    const spinner = (
+      <span
+        ref={ref}
+        className={cn("relative flex size-4 items-center justify-center opacity-60", className)}
+        {...props}
+      >
+        {Array.from({ length: spinnerCount }, (_, i) => (
+          <span
+            key={i}
+            className="before:fade-out-25 before:animate-out before:animate-repeat-infinite before:animate-delay-[var(--spinner-delay)] before:animate-duration-[var(--spinner-duration)] absolute h-full rotate-[var(--spinner-rotate)] before:block before:h-1/3 before:w-full before:rounded-full before:bg-current"
+            style={
+              {
+                width: `${(100 / spinnerCount).toString()}%`,
+                "--spinner-delay": `-${((spinnerCount - i) * 100).toString()}ms`,
+                "--spinner-rotate": `${((360 / spinnerCount) * i).toString()}deg`,
+                "--spinner-duration": `${(spinnerCount * 100).toString()}ms`,
+              } as React.CSSProperties
+            }
+          />
+        ))}
+      </span>
+    );
+
+    if (children === undefined) {
+      return spinner;
+    }
+
+    return (
+      <span className="relative">
+        <span aria-hidden className="invisible contents">
+          {children}
+        </span>
+        <VisuallyHidden>{children}</VisuallyHidden>
+        <span className="absolute inset-0 flex items-center justify-center">{spinner}</span>
+      </span>
+    );
+  },
+);
+
+Spinner.displayName = "Spinner";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Spinner, type SpinnerProps };

package/src/react/switch.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Switch
+ * -------------------------------------------------------------------------- */
+
+type SwitchElement = React.ElementRef<typeof SwitchPrimitives.Root>;
+type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>;
+
+const Switch = React.forwardRef<SwitchElement, SwitchProps>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-sm transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb className="bg-background pointer-events-none block size-4 rounded-full shadow-lg transition data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0" />
+  </SwitchPrimitives.Root>
+));
+
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Switch, type SwitchProps };