@multicomma/arkcn 0.1.0

package/src/components/ui/signature-pad.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { SignaturePad as SignaturePadPrimitive } from "@ark-ui/react"
+import { XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+
+function SignaturePad({ className, ...props }: React.ComponentProps<typeof SignaturePadPrimitive.Root>) {
+  return (
+    <SignaturePadPrimitive.Root
+      data-slot="signature-pad"
+      className={cn("flex w-full flex-col gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function SignaturePadContext({ ...props }: React.ComponentProps<typeof SignaturePadPrimitive.Context>) {
+  return <SignaturePadPrimitive.Context {...props} />
+}
+
+function SignaturePadLabel({ className, ...props }: React.ComponentProps<typeof SignaturePadPrimitive.Label>) {
+  return (
+    <SignaturePadPrimitive.Label
+      data-slot="signature-pad-label"
+      className={cn("text-sm font-medium select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SignaturePadControl({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SignaturePadPrimitive.Control>) {
+  return (
+    <SignaturePadPrimitive.Control
+      data-slot="signature-pad-control"
+      className={cn(
+        "relative h-40 w-full touch-none overflow-hidden rounded-xl border border-input bg-transparent transition-colors has-focus-visible:border-ring has-focus-visible:ring-3 has-focus-visible:ring-ring/50 dark:bg-input/30 data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <SignaturePadSegment />
+          <SignaturePadGuide />
+          <SignaturePadClearTrigger />
+        </>
+      )}
+    </SignaturePadPrimitive.Control>
+  )
+}
+
+function SignaturePadSegment({ className, ...props }: React.ComponentProps<typeof SignaturePadPrimitive.Segment>) {
+  return (
+    <SignaturePadPrimitive.Segment
+      data-slot="signature-pad-segment"
+      className={cn("fill-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SignaturePadGuide({ className, ...props }: React.ComponentProps<typeof SignaturePadPrimitive.Guide>) {
+  return (
+    <SignaturePadPrimitive.Guide
+      data-slot="signature-pad-guide"
+      className={cn("pointer-events-none absolute inset-x-4 bottom-8 border-b border-dashed border-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SignaturePadClearTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SignaturePadPrimitive.ClearTrigger>) {
+  return (
+    <SignaturePadPrimitive.ClearTrigger
+      data-slot="signature-pad-clear-trigger"
+      className={cn("absolute top-2 right-2", className)}
+      asChild
+      {...props}
+    >
+      <Button variant="ghost" size="icon-sm">
+        {children ?? <XIcon />}
+        <span className="sr-only">Clear</span>
+      </Button>
+    </SignaturePadPrimitive.ClearTrigger>
+  )
+}
+
+function SignaturePadHiddenInput({ ...props }: React.ComponentProps<typeof SignaturePadPrimitive.HiddenInput>) {
+  return <SignaturePadPrimitive.HiddenInput {...props} />
+}
+
+export {
+  SignaturePad,
+  SignaturePadClearTrigger,
+  SignaturePadContext,
+  SignaturePadControl,
+  SignaturePadGuide,
+  SignaturePadHiddenInput,
+  SignaturePadLabel,
+  SignaturePadSegment,
+}

package/src/components/ui/skeleton.tsx

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

package/src/components/ui/slider.tsx

@@ -0,0 +1,183 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Slider as SliderPrimitive } from "@ark-ui/react"
+
+function Slider({
+  className,
+  children,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  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(
+        "relative flex w-full touch-none flex-col gap-2 select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SliderControl>
+        <SliderTrack>
+          <SliderRange />
+        </SliderTrack>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderThumb key={index} index={index}>
+            <SliderHiddenInput />
+          </SliderThumb>
+        ))}
+      </SliderControl>
+    </SliderPrimitive.Root>
+  )
+}
+
+function SliderRoot({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      className={cn(
+        "relative flex w-full touch-none flex-col gap-2 select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SliderContext({ ...props }: React.ComponentProps<typeof SliderPrimitive.Context>) {
+  return <SliderPrimitive.Context {...props} />
+}
+
+function SliderLabel({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.Label>) {
+  return <SliderPrimitive.Label data-slot="slider-label" className={cn("text-sm font-medium", className)} {...props} />
+}
+
+function SliderValueText({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.ValueText>) {
+  return (
+    <SliderPrimitive.ValueText
+      data-slot="slider-value-text"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SliderControl({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.Control>) {
+  return (
+    <SliderPrimitive.Control
+      data-slot="slider-control"
+      className={cn("relative flex items-center data-vertical:h-full data-vertical:flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function SliderTrack({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.Track>) {
+  return (
+    <SliderPrimitive.Track
+      data-slot="slider-track"
+      className={cn(
+        "relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SliderRange({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.Range>) {
+  return (
+    <SliderPrimitive.Range
+      data-slot="slider-range"
+      className={cn("absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full", className)}
+      {...props}
+    />
+  )
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function SliderThumb({ className, ...props }: Omit<React.ComponentProps<typeof SliderPrimitive.Thumb>, "id">) {
+  return (
+    <SliderPrimitive.Thumb
+      data-slot="slider-thumb"
+      className={cn(
+        "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden data-dragging:ring-3 data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function SliderHiddenInput({ ...props }: Omit<React.ComponentProps<typeof SliderPrimitive.HiddenInput>, "id">) {
+  return <SliderPrimitive.HiddenInput {...props} />
+}
+
+function SliderMarkerGroup({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.MarkerGroup>) {
+  return (
+    <SliderPrimitive.MarkerGroup
+      data-slot="slider-marker-group"
+      className={cn("relative h-4 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SliderMarker({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.Marker>) {
+  return (
+    <SliderPrimitive.Marker
+      data-slot="slider-marker"
+      className={cn("absolute -translate-x-1/2", className)}
+      {...props}
+    />
+  )
+}
+
+/** Value bubble shown above a thumb while it is dragged. Place it inside `SliderThumb`. */
+function SliderDraggingIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.DraggingIndicator>) {
+  return (
+    <SliderPrimitive.DraggingIndicator
+      data-slot="slider-dragging-indicator"
+      className={cn(
+        "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 rounded-md bg-primary px-1.5 py-0.5 text-xs font-medium text-primary-foreground tabular-nums",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Slider,
+  SliderContext,
+  SliderControl,
+  SliderHiddenInput,
+  SliderLabel,
+  SliderMarker,
+  SliderMarkerGroup,
+  SliderRange,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  SliderValueText,
+  SliderDraggingIndicator,
+}

package/src/components/ui/sonner.tsx

@@ -0,0 +1,37 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

package/src/components/ui/steps.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Steps as StepsPrimitive } from "@ark-ui/react"
+import { CheckIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+
+function Steps({ className, ...props }: React.ComponentProps<typeof StepsPrimitive.Root>) {
+  return (
+    <StepsPrimitive.Root
+      data-slot="steps"
+      className={cn("flex w-full flex-col gap-4 data-vertical:flex-row", className)}
+      {...props}
+    />
+  )
+}
+
+function StepsContext({ ...props }: React.ComponentProps<typeof StepsPrimitive.Context>) {
+  return <StepsPrimitive.Context {...props} />
+}
+
+function StepsList({ className, ...props }: React.ComponentProps<typeof StepsPrimitive.List>) {
+  return (
+    <StepsPrimitive.List
+      data-slot="steps-list"
+      className={cn("flex items-center gap-2 data-vertical:flex-col data-vertical:items-stretch", className)}
+      {...props}
+    />
+  )
+}
+
+function StepsItem({ className, ...props }: React.ComponentProps<typeof StepsPrimitive.Item>) {
+  return (
+    <StepsPrimitive.Item
+      data-slot="steps-item"
+      className={cn(
+        "group/steps-item flex flex-1 items-center gap-2 last:flex-none data-vertical:flex-col data-vertical:items-start",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function StepsItemContext({ ...props }: React.ComponentProps<typeof StepsPrimitive.ItemContext>) {
+  return <StepsPrimitive.ItemContext {...props} />
+}
+
+function StepsTrigger({ className, ...props }: React.ComponentProps<typeof StepsPrimitive.Trigger>) {
+  return (
+    <StepsPrimitive.Trigger
+      data-slot="steps-trigger"
+      className={cn(
+        "flex items-center gap-2 rounded-md text-left text-sm font-medium outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-incomplete:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function StepsIndicator({ className, children, ...props }: React.ComponentProps<typeof StepsPrimitive.Indicator>) {
+  return (
+    <StepsPrimitive.Indicator
+      data-slot="steps-indicator"
+      className={cn(
+        "flex size-7 shrink-0 items-center justify-center rounded-full border border-input text-xs font-medium tabular-nums transition-colors data-complete:border-primary data-complete:bg-primary data-complete:text-primary-foreground data-current:border-primary data-current:bg-primary data-current:text-primary-foreground [&_svg]:size-3.5",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <StepsPrimitive.ItemContext>
+          {({ completed, index }) => (completed ? <CheckIcon /> : index + 1)}
+        </StepsPrimitive.ItemContext>
+      )}
+    </StepsPrimitive.Indicator>
+  )
+}
+
+function StepsSeparator({ className, ...props }: React.ComponentProps<typeof StepsPrimitive.Separator>) {
+  return (
+    <StepsPrimitive.Separator
+      data-slot="steps-separator"
+      className={cn(
+        "h-px flex-1 bg-border transition-colors data-complete:bg-primary data-vertical:ml-3.5 data-vertical:h-6 data-vertical:w-px data-vertical:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function StepsContent({ className, ...props }: React.ComponentProps<typeof StepsPrimitive.Content>) {
+  return <StepsPrimitive.Content data-slot="steps-content" className={cn("text-sm", className)} {...props} />
+}
+
+function StepsCompletedContent({ className, ...props }: React.ComponentProps<typeof StepsPrimitive.CompletedContent>) {
+  return (
+    <StepsPrimitive.CompletedContent
+      data-slot="steps-completed-content"
+      className={cn("text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function StepsProgress({ className, ...props }: React.ComponentProps<typeof StepsPrimitive.Progress>) {
+  return (
+    <StepsPrimitive.Progress
+      data-slot="steps-progress"
+      className={cn("h-1 w-full rounded-full bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+function StepsPrevTrigger({ className, children, ...props }: React.ComponentProps<typeof StepsPrimitive.PrevTrigger>) {
+  return (
+    <StepsPrimitive.PrevTrigger data-slot="steps-prev-trigger" className={cn(className)} asChild {...props}>
+      <Button variant="outline" size="sm">
+        {children}
+      </Button>
+    </StepsPrimitive.PrevTrigger>
+  )
+}
+
+function StepsNextTrigger({ className, children, ...props }: React.ComponentProps<typeof StepsPrimitive.NextTrigger>) {
+  return (
+    <StepsPrimitive.NextTrigger data-slot="steps-next-trigger" className={cn(className)} asChild {...props}>
+      <Button size="sm">{children}</Button>
+    </StepsPrimitive.NextTrigger>
+  )
+}
+
+export {
+  Steps,
+  StepsCompletedContent,
+  StepsContent,
+  StepsContext,
+  StepsIndicator,
+  StepsItem,
+  StepsItemContext,
+  StepsList,
+  StepsNextTrigger,
+  StepsPrevTrigger,
+  StepsProgress,
+  StepsSeparator,
+  StepsTrigger,
+}

package/src/components/ui/swap.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Swap as SwapPrimitive } from "@ark-ui/react"
+
+function Swap({ className, ...props }: React.ComponentProps<typeof SwapPrimitive.Root>) {
+  return (
+    <SwapPrimitive.Root
+      data-slot="swap"
+      className={cn(
+        "relative inline-grid cursor-pointer place-items-center select-none *:col-start-1 *:row-start-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SwapIndicator({ className, ...props }: React.ComponentProps<typeof SwapPrimitive.Indicator>) {
+  return (
+    <SwapPrimitive.Indicator
+      data-slot="swap-indicator"
+      className={cn(
+        "transition-[opacity,transform] duration-200 data-[state=closed]:scale-75 data-[state=closed]:opacity-0 data-[state=open]:scale-100 data-[state=open]:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Swap, SwapIndicator }

package/src/components/ui/switch.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Switch as SwitchPrimitive } from "@ark-ui/react"
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function Switch({
+  className,
+  size = "default",
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, "id"> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className="group/switch peer inline-flex items-center gap-2"
+      {...props}
+    >
+      <SwitchControl className={className}>
+        <SwitchThumb />
+      </SwitchControl>
+      {children && <SwitchLabel>{children}</SwitchLabel>}
+      <SwitchHiddenInput />
+    </SwitchPrimitive.Root>
+  )
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function SwitchRoot({ ...props }: Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, "id">) {
+  return <SwitchPrimitive.Root data-slot="switch" {...props} />
+}
+
+function SwitchContext({ ...props }: React.ComponentProps<typeof SwitchPrimitive.Context>) {
+  return <SwitchPrimitive.Context {...props} />
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function SwitchControl({ className, ...props }: Omit<React.ComponentProps<typeof SwitchPrimitive.Control>, "id">) {
+  return (
+    <SwitchPrimitive.Control
+      data-slot="switch-control"
+      className={cn(
+        "relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-focus-visible/field-label:border-transparent group-has-focus-visible/field-label:ring-0 group-data-[size=default]/switch:h-[18.4px] group-data-[size=default]/switch:w-8 group-data-[size=sm]/switch:h-3.5 group-data-[size=sm]/switch:w-6 after:absolute after:-inset-x-3 after:-inset-y-2 data-focus-visible:border-ring data-focus-visible:ring-3 data-focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 dark:data-invalid:border-destructive/50 dark:data-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
+      )}
+      {...props}
+    />
+  )
+}
+
+function SwitchThumb({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Thumb>) {
+  return (
+    <SwitchPrimitive.Thumb
+      data-slot="switch-thumb"
+      className={cn(
+        "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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SwitchLabel({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Label>) {
+  return (
+    <SwitchPrimitive.Label
+      data-slot="switch-label"
+      className={cn("text-sm leading-none select-none data-disabled:opacity-50", className)}
+      {...props}
+    />
+  )
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function SwitchHiddenInput({ ...props }: Omit<React.ComponentProps<typeof SwitchPrimitive.HiddenInput>, "id">) {
+  return <SwitchPrimitive.HiddenInput {...props} />
+}
+
+export { Switch, SwitchContext, SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb }