@multicomma/arkcn 0.1.0

package/src/components/ui/field.tsx

@@ -0,0 +1,218 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+  variants: {
+    orientation: {
+      vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+      horizontal:
+        "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      responsive:
+        "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className)}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-focus-visible:border-ring has-[>[data-slot=field]]:has-focus-visible:ring-3 has-[>[data-slot=field]]:has-focus-visible:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm/normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className)}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

package/src/components/ui/file-upload.tsx

@@ -0,0 +1,204 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { FileUpload as FileUploadPrimitive } from "@ark-ui/react"
+import { FileIcon, UploadIcon, XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+
+function FileUpload({ className, ...props }: React.ComponentProps<typeof FileUploadPrimitive.Root>) {
+  return (
+    <FileUploadPrimitive.Root
+      data-slot="file-upload"
+      className={cn("flex w-full flex-col gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function FileUploadContext({ ...props }: React.ComponentProps<typeof FileUploadPrimitive.Context>) {
+  return <FileUploadPrimitive.Context {...props} />
+}
+
+function FileUploadLabel({ className, ...props }: React.ComponentProps<typeof FileUploadPrimitive.Label>) {
+  return (
+    <FileUploadPrimitive.Label
+      data-slot="file-upload-label"
+      className={cn("text-sm font-medium select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function FileUploadDropzone({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof FileUploadPrimitive.Dropzone>) {
+  return (
+    <FileUploadPrimitive.Dropzone
+      data-slot="file-upload-dropzone"
+      className={cn(
+        "flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-input bg-transparent p-6 text-center text-sm text-muted-foreground transition-colors outline-none hover:bg-muted/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-dragging:border-ring data-dragging:bg-muted/50 data-invalid:border-destructive dark:bg-input/30 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-5",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <UploadIcon />
+          <span>Drag your files here or click to browse</span>
+        </>
+      )}
+    </FileUploadPrimitive.Dropzone>
+  )
+}
+
+function FileUploadTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof FileUploadPrimitive.Trigger>) {
+  return (
+    <FileUploadPrimitive.Trigger data-slot="file-upload-trigger" className={cn(className)} asChild {...props}>
+      <Button variant="outline" size="sm">
+        {children}
+      </Button>
+    </FileUploadPrimitive.Trigger>
+  )
+}
+
+function FileUploadClearTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof FileUploadPrimitive.ClearTrigger>) {
+  return (
+    <FileUploadPrimitive.ClearTrigger
+      data-slot="file-upload-clear-trigger"
+      className={cn(className)}
+      asChild
+      {...props}
+    >
+      <Button variant="ghost" size="sm">
+        {children}
+      </Button>
+    </FileUploadPrimitive.ClearTrigger>
+  )
+}
+
+function FileUploadItemGroup({ className, ...props }: React.ComponentProps<typeof FileUploadPrimitive.ItemGroup>) {
+  return (
+    <FileUploadPrimitive.ItemGroup
+      data-slot="file-upload-item-group"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function FileUploadItem({ className, ...props }: React.ComponentProps<typeof FileUploadPrimitive.Item>) {
+  return (
+    <FileUploadPrimitive.Item
+      data-slot="file-upload-item"
+      className={cn("grid grid-cols-[auto_1fr_auto] items-center gap-x-3 rounded-lg border p-2 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FileUploadItemPreview({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof FileUploadPrimitive.ItemPreview>) {
+  return (
+    <FileUploadPrimitive.ItemPreview
+      data-slot="file-upload-item-preview"
+      className={cn(
+        "row-span-2 flex size-10 items-center justify-center overflow-hidden rounded-md bg-muted text-muted-foreground [&_svg]:size-5",
+        className
+      )}
+      {...props}
+    >
+      {children ?? <FileIcon />}
+    </FileUploadPrimitive.ItemPreview>
+  )
+}
+
+function FileUploadItemPreviewImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof FileUploadPrimitive.ItemPreviewImage>) {
+  return (
+    <FileUploadPrimitive.ItemPreviewImage
+      data-slot="file-upload-item-preview-image"
+      className={cn("size-full object-cover", className)}
+      {...props}
+    />
+  )
+}
+
+function FileUploadItemName({ className, ...props }: React.ComponentProps<typeof FileUploadPrimitive.ItemName>) {
+  return (
+    <FileUploadPrimitive.ItemName
+      data-slot="file-upload-item-name"
+      className={cn("truncate font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function FileUploadItemSizeText({
+  className,
+  ...props
+}: React.ComponentProps<typeof FileUploadPrimitive.ItemSizeText>) {
+  return (
+    <FileUploadPrimitive.ItemSizeText
+      data-slot="file-upload-item-size-text"
+      className={cn("col-start-2 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function FileUploadItemDeleteTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof FileUploadPrimitive.ItemDeleteTrigger>) {
+  return (
+    <FileUploadPrimitive.ItemDeleteTrigger
+      data-slot="file-upload-item-delete-trigger"
+      className={cn("row-span-2", className)}
+      asChild
+      {...props}
+    >
+      <Button variant="ghost" size="icon-sm">
+        {children ?? <XIcon />}
+      </Button>
+    </FileUploadPrimitive.ItemDeleteTrigger>
+  )
+}
+
+function FileUploadHiddenInput({ ...props }: React.ComponentProps<typeof FileUploadPrimitive.HiddenInput>) {
+  return <FileUploadPrimitive.HiddenInput {...props} />
+}
+
+export {
+  FileUpload,
+  FileUploadClearTrigger,
+  FileUploadContext,
+  FileUploadDropzone,
+  FileUploadHiddenInput,
+  FileUploadItem,
+  FileUploadItemDeleteTrigger,
+  FileUploadItemGroup,
+  FileUploadItemName,
+  FileUploadItemPreview,
+  FileUploadItemPreviewImage,
+  FileUploadItemSizeText,
+  FileUploadLabel,
+  FileUploadTrigger,
+}

package/src/components/ui/floating-panel.tsx

@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { FloatingPanel as FloatingPanelPrimitive, Portal as PortalPrimitive } from "@ark-ui/react"
+import { Maximize2Icon, Minimize2Icon, MinusIcon, XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+
+function FloatingPanel({
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof FloatingPanelPrimitive.Root>) {
+  return <FloatingPanelPrimitive.Root lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />
+}
+
+function FloatingPanelContext({ ...props }: React.ComponentProps<typeof FloatingPanelPrimitive.Context>) {
+  return <FloatingPanelPrimitive.Context {...props} />
+}
+
+function FloatingPanelTrigger({ ...props }: React.ComponentProps<typeof FloatingPanelPrimitive.Trigger>) {
+  return <FloatingPanelPrimitive.Trigger data-slot="floating-panel-trigger" {...props} />
+}
+
+function FloatingPanelPortal({ ...props }: React.ComponentProps<typeof PortalPrimitive>) {
+  return <PortalPrimitive {...props} />
+}
+
+function FloatingPanelPositioner({
+  className,
+  ...props
+}: React.ComponentProps<typeof FloatingPanelPrimitive.Positioner>) {
+  return (
+    <FloatingPanelPrimitive.Positioner
+      data-slot="floating-panel-positioner"
+      className={cn("[--z-index:50]", className)}
+      {...props}
+    />
+  )
+}
+
+function FloatingPanelContent({ className, ...props }: React.ComponentProps<typeof FloatingPanelPrimitive.Content>) {
+  return (
+    <FloatingPanelPortal>
+      <FloatingPanelPositioner>
+        <FloatingPanelPrimitive.Content
+          data-slot="floating-panel-content"
+          className={cn(
+            "flex flex-col overflow-hidden rounded-xl bg-popover text-sm text-popover-foreground shadow-lg ring-1 ring-foreground/10 outline-hidden data-[stage=minimized]:h-auto data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </FloatingPanelPositioner>
+    </FloatingPanelPortal>
+  )
+}
+
+function FloatingPanelDragTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof FloatingPanelPrimitive.DragTrigger>) {
+  return (
+    <FloatingPanelPrimitive.DragTrigger
+      data-slot="floating-panel-drag-trigger"
+      className={cn("flex-1 cursor-grab select-none data-dragging:cursor-grabbing", className)}
+      {...props}
+    />
+  )
+}
+
+function FloatingPanelHeader({ className, ...props }: React.ComponentProps<typeof FloatingPanelPrimitive.Header>) {
+  return (
+    <FloatingPanelPrimitive.Header
+      data-slot="floating-panel-header"
+      className={cn("flex h-9 items-center gap-1 border-b bg-muted/50 pr-1 pl-3", className)}
+      {...props}
+    />
+  )
+}
+
+function FloatingPanelTitle({ className, ...props }: React.ComponentProps<typeof FloatingPanelPrimitive.Title>) {
+  return (
+    <FloatingPanelPrimitive.Title
+      data-slot="floating-panel-title"
+      className={cn("font-heading text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function FloatingPanelControl({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof FloatingPanelPrimitive.Control>) {
+  return (
+    <FloatingPanelPrimitive.Control
+      data-slot="floating-panel-control"
+      className={cn("flex items-center", className)}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <FloatingPanelStageTrigger stage="minimized">
+            <MinusIcon />
+          </FloatingPanelStageTrigger>
+          <FloatingPanelStageTrigger stage="maximized">
+            <Maximize2Icon />
+          </FloatingPanelStageTrigger>
+          <FloatingPanelStageTrigger stage="default">
+            <Minimize2Icon />
+          </FloatingPanelStageTrigger>
+          <FloatingPanelCloseTrigger />
+        </>
+      )}
+    </FloatingPanelPrimitive.Control>
+  )
+}
+
+function FloatingPanelStageTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof FloatingPanelPrimitive.StageTrigger>) {
+  return (
+    <FloatingPanelPrimitive.StageTrigger
+      data-slot="floating-panel-stage-trigger"
+      className={cn(className)}
+      asChild
+      {...props}
+    >
+      <Button variant="ghost" size="icon-xs">
+        {children}
+      </Button>
+    </FloatingPanelPrimitive.StageTrigger>
+  )
+}
+
+function FloatingPanelCloseTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof FloatingPanelPrimitive.CloseTrigger>) {
+  return (
+    <FloatingPanelPrimitive.CloseTrigger
+      data-slot="floating-panel-close-trigger"
+      className={cn(className)}
+      asChild
+      {...props}
+    >
+      <Button variant="ghost" size="icon-xs">
+        {children ?? <XIcon />}
+        <span className="sr-only">Close</span>
+      </Button>
+    </FloatingPanelPrimitive.CloseTrigger>
+  )
+}
+
+function FloatingPanelBody({ className, ...props }: React.ComponentProps<typeof FloatingPanelPrimitive.Body>) {
+  return (
+    <FloatingPanelPrimitive.Body
+      data-slot="floating-panel-body"
+      className={cn("flex-1 overflow-auto p-3", className)}
+      {...props}
+    />
+  )
+}
+
+function FloatingPanelResizeTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof FloatingPanelPrimitive.ResizeTrigger>) {
+  return (
+    <FloatingPanelPrimitive.ResizeTrigger
+      data-slot="floating-panel-resize-trigger"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  FloatingPanel,
+  FloatingPanelBody,
+  FloatingPanelCloseTrigger,
+  FloatingPanelContent,
+  FloatingPanelContext,
+  FloatingPanelControl,
+  FloatingPanelDragTrigger,
+  FloatingPanelHeader,
+  FloatingPanelPortal,
+  FloatingPanelPositioner,
+  FloatingPanelResizeTrigger,
+  FloatingPanelStageTrigger,
+  FloatingPanelTitle,
+  FloatingPanelTrigger,
+}

package/src/components/ui/floating-toolbar.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+/**
+ * FloatingToolbar — the snackbar-style action bar that floats over a page
+ * (bulk actions on tables, pending edits on grids). Arrow keys move between
+ * its buttons, Home/End jump, and Escape calls `onEscape` unless focus is in a
+ * nested menu. Renders nothing while `open` is false.
+ */
+function FloatingToolbar({
+  open = true,
+  onEscape,
+  className,
+  children,
+  onKeyDown,
+  ...props
+}: React.ComponentProps<"div"> & { open?: boolean; onEscape?: () => void }) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event)
+    if (event.defaultPrevented) return
+    const list = Array.from(ref.current?.querySelectorAll<HTMLButtonElement>("button:not([disabled])") ?? [])
+    const currentIndex = list.findIndex((b) => b === document.activeElement)
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault()
+        list[(currentIndex + 1) % list.length]?.focus()
+        break
+      case "ArrowLeft":
+        event.preventDefault()
+        list[currentIndex <= 0 ? list.length - 1 : currentIndex - 1]?.focus()
+        break
+      case "Home":
+        event.preventDefault()
+        list[0]?.focus()
+        break
+      case "End":
+        event.preventDefault()
+        list[list.length - 1]?.focus()
+        break
+      case "Escape": {
+        const target = event.target as HTMLElement
+        const active = document.activeElement as HTMLElement | null
+        const inMenu = [target, active].some(
+          (el) =>
+            el?.closest('[data-slot="dropdown-menu-trigger"]') || el?.closest('[data-slot="dropdown-menu-content"]')
+        )
+        if (inMenu || !onEscape) return
+        event.preventDefault()
+        onEscape()
+        break
+      }
+    }
+  }
+  if (!open) return null
+  return (
+    <div
+      ref={ref}
+      role="toolbar"
+      data-slot="floating-toolbar"
+      tabIndex={-1}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-xl transition-all delay-100 duration-300 ease-out hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none",
+        className
+      )}
+      {...props}
+    >
+      <div
+        data-slot="floating-toolbar-content"
+        className="flex items-center gap-2 rounded-xl border bg-background/95 p-2 shadow-xl backdrop-blur-lg supports-backdrop-filter:bg-background/60"
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export { FloatingToolbar }