@multicomma/arkcn 0.1.0

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,329 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Menu as DropdownMenuPrimitive, Portal as PortalPrimitive } from "@ark-ui/react"
+import { CheckIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
+
+function DropdownMenu({
+  positioning,
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return (
+    <DropdownMenuPrimitive.Root
+      positioning={{ placement: "bottom-start", gutter: 4, ...positioning }}
+      lazyMount={lazyMount}
+      unmountOnExit={unmountOnExit}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof PortalPrimitive>) {
+  return <PortalPrimitive {...props} />
+}
+
+function DropdownMenuContext({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Context>) {
+  return <DropdownMenuPrimitive.Context {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuPositioner({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Positioner>) {
+  return (
+    <DropdownMenuPrimitive.Positioner
+      data-slot="dropdown-menu-positioner"
+      className={cn("[--z-index:50]", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPortal>
+      <DropdownMenuPositioner>
+        <DropdownMenuPrimitive.Content
+          data-slot="dropdown-menu-content"
+          className={cn(
+            "z-50 max-h-(--available-height) w-(--reference-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden 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}
+        />
+      </DropdownMenuPositioner>
+    </DropdownMenuPortal>
+  )
+}
+
+function DropdownMenuArrow({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Arrow>) {
+  return (
+    <DropdownMenuPrimitive.Arrow
+      data-slot="dropdown-menu-arrow"
+      className={cn("[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]", className)}
+      {...props}
+    >
+      <DropdownMenuPrimitive.ArrowTip
+        data-slot="dropdown-menu-arrow-tip"
+        className="border-t border-l border-foreground/10"
+      />
+    </DropdownMenuPrimitive.Arrow>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroup>) {
+  return <DropdownMenuPrimitive.ItemGroup data-slot="dropdown-menu-group" {...props} />
+}
+
+const itemClassName =
+  "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive"
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  value,
+  ...props
+}: Omit<React.ComponentProps<typeof DropdownMenuPrimitive.Item>, "value"> & {
+  value?: string
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  const id = React.useId()
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      value={value ?? id}
+      className={cn(itemClassName, className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItemText({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.ItemText>) {
+  return <DropdownMenuPrimitive.ItemText data-slot="dropdown-menu-item-text" {...props} />
+}
+
+function DropdownMenuItemIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemIndicator>) {
+  return (
+    <DropdownMenuPrimitive.ItemIndicator
+      data-slot="dropdown-menu-item-indicator"
+      className={cn("pointer-events-none absolute right-2 flex items-center justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+const optionItemClassName =
+  "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked = false,
+  inset,
+  value,
+  ...props
+}: Omit<React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>, "checked" | "value"> & {
+  checked?: boolean
+  value?: string
+  inset?: boolean
+}) {
+  const id = React.useId()
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(optionItemClassName, className)}
+      checked={checked}
+      value={value ?? id}
+      {...props}
+    >
+      <DropdownMenuItemIndicator data-slot="dropdown-menu-checkbox-item-indicator">
+        <CheckIcon />
+      </DropdownMenuItemIndicator>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItemGroup>) {
+  return <DropdownMenuPrimitive.RadioItemGroup data-slot="dropdown-menu-radio-group" {...props} />
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(optionItemClassName, className)}
+      {...props}
+    >
+      <DropdownMenuItemIndicator data-slot="dropdown-menu-radio-item-indicator">
+        <CheckIcon />
+      </DropdownMenuItemIndicator>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroupLabel> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.ItemGroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-highlighted/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.TriggerItem
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.TriggerItem>
+  )
+}
+
+function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPortal>
+      <DropdownMenuPositioner>
+        <DropdownMenuPrimitive.Content
+          data-slot="dropdown-menu-sub-content"
+          className={cn(
+            "z-50 min-w-24 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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}
+        />
+      </DropdownMenuPositioner>
+    </DropdownMenuPortal>
+  )
+}
+
+/** Render-prop access to one item's state (`{ selected, highlighted, disabled, ... }`). */
+function DropdownMenuItemContext({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.ItemContext>) {
+  return <DropdownMenuPrimitive.ItemContext {...props} />
+}
+
+/** Opens the menu from a right-click (context-menu style) instead of a click. */
+function DropdownMenuContextTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.ContextTrigger>) {
+  return <DropdownMenuPrimitive.ContextTrigger data-slot="dropdown-menu-context-trigger" {...props} />
+}
+
+/** Open-state indicator for a trigger; rotates when open. */
+function DropdownMenuIndicator({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Indicator>) {
+  return (
+    <DropdownMenuPrimitive.Indicator
+      data-slot="dropdown-menu-indicator"
+      className={cn("inline-flex transition-transform data-[state=open]:rotate-180 [&_svg]:size-4", className)}
+      {...props}
+    >
+      {children ?? <ChevronDownIcon />}
+    </DropdownMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuArrow,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuContext,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuItemIndicator,
+  DropdownMenuItemText,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuPositioner,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  DropdownMenuItemContext,
+  DropdownMenuContextTrigger,
+  DropdownMenuIndicator,
+}

package/src/components/ui/editable.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Editable as EditablePrimitive } from "@ark-ui/react"
+
+function Editable({ className, ...props }: React.ComponentProps<typeof EditablePrimitive.Root>) {
+  return (
+    <EditablePrimitive.Root data-slot="editable" className={cn("flex w-full flex-col gap-1.5", className)} {...props} />
+  )
+}
+
+function EditableContext({ ...props }: React.ComponentProps<typeof EditablePrimitive.Context>) {
+  return <EditablePrimitive.Context {...props} />
+}
+
+function EditableLabel({ className, ...props }: React.ComponentProps<typeof EditablePrimitive.Label>) {
+  return (
+    <EditablePrimitive.Label
+      data-slot="editable-label"
+      className={cn("text-sm font-medium select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function EditableArea({ className, ...props }: React.ComponentProps<typeof EditablePrimitive.Area>) {
+  return <EditablePrimitive.Area data-slot="editable-area" className={cn("relative w-full", className)} {...props} />
+}
+
+function EditablePreview({ className, ...props }: React.ComponentProps<typeof EditablePrimitive.Preview>) {
+  return (
+    <EditablePrimitive.Preview
+      data-slot="editable-preview"
+      className={cn(
+        "inline-flex h-8 w-full items-center rounded-lg px-2.5 text-sm transition-colors hover:bg-muted data-placeholder-shown:text-muted-foreground data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EditableInput({ className, ...props }: React.ComponentProps<typeof EditablePrimitive.Input>) {
+  return (
+    <EditablePrimitive.Input
+      data-slot="editable-input"
+      className={cn(
+        "h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-invalid:border-destructive dark:bg-input/30",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EditableControl({ className, ...props }: React.ComponentProps<typeof EditablePrimitive.Control>) {
+  return (
+    <EditablePrimitive.Control
+      data-slot="editable-control"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function EditableEditTrigger({ ...props }: React.ComponentProps<typeof EditablePrimitive.EditTrigger>) {
+  return <EditablePrimitive.EditTrigger data-slot="editable-edit-trigger" {...props} />
+}
+
+function EditableSubmitTrigger({ ...props }: React.ComponentProps<typeof EditablePrimitive.SubmitTrigger>) {
+  return <EditablePrimitive.SubmitTrigger data-slot="editable-submit-trigger" {...props} />
+}
+
+function EditableCancelTrigger({ ...props }: React.ComponentProps<typeof EditablePrimitive.CancelTrigger>) {
+  return <EditablePrimitive.CancelTrigger data-slot="editable-cancel-trigger" {...props} />
+}
+
+export {
+  Editable,
+  EditableArea,
+  EditableCancelTrigger,
+  EditableContext,
+  EditableControl,
+  EditableEditTrigger,
+  EditableInput,
+  EditableLabel,
+  EditablePreview,
+  EditableSubmitTrigger,
+}

package/src/components/ui/empty.tsx

@@ -0,0 +1,86 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="empty-header" className={cn("flex max-w-sm flex-col items-center gap-2", className)} {...props} />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("font-heading text-sm font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className)}
+      {...props}
+    />
+  )
+}
+
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia }