@multicomma/arkcn 0.1.0

package/src/components/ui/number-input.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { NumberInput as NumberInputPrimitive } from "@ark-ui/react"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function NumberInput({ className, children, ...props }: React.ComponentProps<typeof NumberInputPrimitive.Root>) {
+  return (
+    <NumberInputPrimitive.Root
+      data-slot="number-input"
+      className={cn("flex w-full flex-col gap-1.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <NumberInputControl>
+          <NumberInputInput />
+          <NumberInputTriggers />
+        </NumberInputControl>
+      )}
+    </NumberInputPrimitive.Root>
+  )
+}
+
+function NumberInputContext({ ...props }: React.ComponentProps<typeof NumberInputPrimitive.Context>) {
+  return <NumberInputPrimitive.Context {...props} />
+}
+
+function NumberInputLabel({ className, ...props }: React.ComponentProps<typeof NumberInputPrimitive.Label>) {
+  return (
+    <NumberInputPrimitive.Label
+      data-slot="number-input-label"
+      className={cn("text-sm font-medium select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function NumberInputControl({ className, ...props }: React.ComponentProps<typeof NumberInputPrimitive.Control>) {
+  return (
+    <NumberInputPrimitive.Control
+      data-slot="number-input-control"
+      className={cn(
+        "flex h-8 w-full min-w-0 items-stretch overflow-hidden rounded-lg border border-input bg-transparent transition-colors has-focus-visible:border-ring has-focus-visible:ring-3 has-focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 dark:bg-input/30 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 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 NumberInputInput({
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof NumberInputPrimitive.Input>, "id">) {
+  return (
+    <NumberInputPrimitive.Input
+      data-slot="number-input-input"
+      className={cn(
+        "min-w-0 flex-1 bg-transparent px-2.5 py-1 text-base outline-none placeholder:text-muted-foreground md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NumberInputTriggers({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="number-input-triggers"
+      className={cn("flex w-6 flex-col border-l border-input", className)}
+      {...props}
+    >
+      <NumberInputIncrementTrigger />
+      <NumberInputDecrementTrigger />
+    </div>
+  )
+}
+
+const triggerClassName =
+  "flex flex-1 items-center justify-center text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3"
+
+function NumberInputIncrementTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NumberInputPrimitive.IncrementTrigger>) {
+  return (
+    <NumberInputPrimitive.IncrementTrigger
+      data-slot="number-input-increment-trigger"
+      className={cn(triggerClassName, "border-b border-input", className)}
+      {...props}
+    >
+      {children ?? <ChevronUpIcon />}
+    </NumberInputPrimitive.IncrementTrigger>
+  )
+}
+
+function NumberInputDecrementTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NumberInputPrimitive.DecrementTrigger>) {
+  return (
+    <NumberInputPrimitive.DecrementTrigger
+      data-slot="number-input-decrement-trigger"
+      className={cn(triggerClassName, className)}
+      {...props}
+    >
+      {children ?? <ChevronDownIcon />}
+    </NumberInputPrimitive.DecrementTrigger>
+  )
+}
+
+function NumberInputScrubber({ className, ...props }: React.ComponentProps<typeof NumberInputPrimitive.Scrubber>) {
+  return (
+    <NumberInputPrimitive.Scrubber
+      data-slot="number-input-scrubber"
+      className={cn("cursor-ew-resize select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function NumberInputValueText({ className, ...props }: React.ComponentProps<typeof NumberInputPrimitive.ValueText>) {
+  return (
+    <NumberInputPrimitive.ValueText
+      data-slot="number-input-value-text"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  NumberInput,
+  NumberInputContext,
+  NumberInputControl,
+  NumberInputDecrementTrigger,
+  NumberInputIncrementTrigger,
+  NumberInputInput,
+  NumberInputLabel,
+  NumberInputScrubber,
+  NumberInputTriggers,
+  NumberInputValueText,
+}

package/src/components/ui/pagination.tsx

@@ -0,0 +1,88 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
+  return <ul data-slot="pagination-content" className={cn("flex items-center gap-0.5", className)} {...props} />
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
+  return (
+    <Button asChild variant={isActive ? "outline" : "ghost"} size={size} className={cn(className)}>
+      <a aria-current={isActive ? "page" : undefined} data-slot="pagination-link" data-active={isActive} {...props} />
+    </Button>
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink aria-label="Go to previous page" size="default" className={cn("pl-1.5!", className)} {...props}>
+      <ChevronLeftIcon data-icon="inline-start" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink aria-label="Go to next page" size="default" className={cn("pr-1.5!", className)} {...props}>
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

package/src/components/ui/password-input.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { PasswordInput as PasswordInputPrimitive } from "@ark-ui/react"
+import { EyeIcon, EyeOffIcon } from "lucide-react"
+
+function PasswordInput({ className, children, ...props }: React.ComponentProps<typeof PasswordInputPrimitive.Root>) {
+  return (
+    <PasswordInputPrimitive.Root
+      data-slot="password-input"
+      className={cn("flex w-full flex-col gap-1.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <PasswordInputControl>
+          <PasswordInputInput />
+          <PasswordInputVisibilityTrigger />
+        </PasswordInputControl>
+      )}
+    </PasswordInputPrimitive.Root>
+  )
+}
+
+function PasswordInputContext({ ...props }: React.ComponentProps<typeof PasswordInputPrimitive.Context>) {
+  return <PasswordInputPrimitive.Context {...props} />
+}
+
+function PasswordInputLabel({ className, ...props }: React.ComponentProps<typeof PasswordInputPrimitive.Label>) {
+  return (
+    <PasswordInputPrimitive.Label
+      data-slot="password-input-label"
+      className={cn("text-sm font-medium select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function PasswordInputControl({ className, ...props }: React.ComponentProps<typeof PasswordInputPrimitive.Control>) {
+  return (
+    <PasswordInputPrimitive.Control
+      data-slot="password-input-control"
+      className={cn(
+        "flex h-8 w-full min-w-0 items-center rounded-lg border border-input bg-transparent pr-1 transition-colors has-focus-visible:border-ring has-focus-visible:ring-3 has-focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 dark:bg-input/30 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 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 PasswordInputInput({
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof PasswordInputPrimitive.Input>, "id">) {
+  return (
+    <PasswordInputPrimitive.Input
+      data-slot="password-input-input"
+      className={cn(
+        "min-w-0 flex-1 bg-transparent px-2.5 py-1 text-base outline-none placeholder:text-muted-foreground md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PasswordInputVisibilityTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof PasswordInputPrimitive.VisibilityTrigger>) {
+  return (
+    <PasswordInputPrimitive.VisibilityTrigger
+      data-slot="password-input-visibility-trigger"
+      className={cn(
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none [&_svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <PasswordInputIndicator fallback={<EyeOffIcon />}>
+          <EyeIcon />
+        </PasswordInputIndicator>
+      )}
+    </PasswordInputPrimitive.VisibilityTrigger>
+  )
+}
+
+function PasswordInputIndicator({ ...props }: React.ComponentProps<typeof PasswordInputPrimitive.Indicator>) {
+  return <PasswordInputPrimitive.Indicator data-slot="password-input-indicator" {...props} />
+}
+
+export {
+  PasswordInput,
+  PasswordInputContext,
+  PasswordInputControl,
+  PasswordInputIndicator,
+  PasswordInputInput,
+  PasswordInputLabel,
+  PasswordInputVisibilityTrigger,
+}

package/src/components/ui/popconfirm.tsx

@@ -0,0 +1,149 @@
+import * as React from "react"
+import { AlertTriangleIcon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+
+/**
+ * Popconfirm — a lightweight inline confirmation on Ark's Popover, for
+ * actions that need a "are you sure?" without a modal dialog. Compose it:
+ * `Popconfirm` > `PopconfirmTrigger` + `PopconfirmContent` > (`PopconfirmHeader` >
+ * `PopconfirmIcon` + `PopconfirmTitle` + `PopconfirmDescription`) + `PopconfirmFooter` >
+ * `PopconfirmCancelTrigger` + `PopconfirmConfirmTrigger`. `PopconfirmConfirmTrigger` closes after `onConfirm`
+ * unless the handler calls `event.preventDefault()`.
+ */
+
+function Popconfirm({ positioning, ...props }: React.ComponentProps<typeof Popover>) {
+  return <Popover data-slot="popconfirm" positioning={{ placement: "top", gutter: 8, ...positioning }} {...props} />
+}
+
+function PopconfirmTrigger({ ...props }: React.ComponentProps<typeof PopoverTrigger>) {
+  return <PopoverTrigger data-slot="popconfirm-trigger" {...props} />
+}
+
+function PopconfirmContent({
+  className,
+  children,
+  showArrow = true,
+  ...props
+}: React.ComponentProps<typeof PopoverContent> & { showArrow?: boolean }) {
+  return (
+    <PopoverContent
+      data-slot="popconfirm-content"
+      role="alertdialog"
+      className={cn("w-72 gap-3 p-3", className)}
+      {...props}
+    >
+      {showArrow && <PopoverArrow />}
+      {children}
+    </PopoverContent>
+  )
+}
+
+function PopconfirmHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popconfirm-header"
+      className={cn(
+        "grid grid-cols-[auto_1fr] gap-x-0 gap-y-0.5 has-[>[data-slot=popconfirm-icon]]:gap-x-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PopconfirmIcon({ className, children, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="popconfirm-icon"
+      className={cn(
+        "row-span-2 mt-0.5 flex size-5 items-center justify-center text-destructive [&_svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children ?? <AlertTriangleIcon />}
+    </span>
+  )
+}
+
+function PopconfirmTitle({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p data-slot="popconfirm-title" className={cn("col-start-2 text-sm/tight font-semibold", className)} {...props} />
+  )
+}
+
+function PopconfirmDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popconfirm-description"
+      className={cn("col-start-2 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function PopconfirmFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="popconfirm-footer" className={cn("flex items-center justify-end gap-2", className)} {...props} />
+  )
+}
+
+function PopconfirmCancelTrigger({
+  variant = "outline",
+  size = "sm",
+  children = "Cancel",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <PopoverClose asChild>
+      <Button data-slot="popconfirm-cancel-trigger" variant={variant} size={size} {...props}>
+        {children}
+      </Button>
+    </PopoverClose>
+  )
+}
+
+function PopconfirmConfirmTrigger({
+  variant = "destructive",
+  size = "sm",
+  onConfirm,
+  onClick,
+  children = "Confirm",
+  ...props
+}: React.ComponentProps<typeof Button> & {
+  /** Runs on click; call `event.preventDefault()` to keep the popconfirm open. */
+  onConfirm?: (event: React.MouseEvent<HTMLButtonElement>) => void
+}) {
+  const [stayOpen, setStayOpen] = React.useState(false)
+  const button = (
+    <Button
+      data-slot="popconfirm-confirm-trigger"
+      variant={variant}
+      size={size}
+      onClick={(event) => {
+        onClick?.(event)
+        onConfirm?.(event)
+        setStayOpen(event.defaultPrevented)
+      }}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+  return stayOpen ? button : <PopoverClose asChild>{button}</PopoverClose>
+}
+
+export {
+  Popconfirm,
+  PopconfirmCancelTrigger,
+  PopconfirmConfirmTrigger,
+  PopconfirmContent,
+  PopconfirmDescription,
+  PopconfirmFooter,
+  PopconfirmHeader,
+  PopconfirmIcon,
+  PopconfirmTitle,
+  PopconfirmTrigger,
+}

package/src/components/ui/popover.tsx

@@ -0,0 +1,126 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+import { Popover as PopoverPrimitive, Portal as PortalPrimitive } from "@ark-ui/react"
+
+function Popover({
+  positioning,
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return (
+    <PopoverPrimitive.Root
+      positioning={{ placement: "bottom", gutter: 4, ...positioning }}
+      lazyMount={lazyMount}
+      unmountOnExit={unmountOnExit}
+      {...props}
+    />
+  )
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverPortal({ ...props }: React.ComponentProps<typeof PortalPrimitive>) {
+  return <PortalPrimitive {...props} />
+}
+
+function PopoverContext({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Context>) {
+  return <PopoverPrimitive.Context {...props} />
+}
+
+function PopoverPositioner({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Positioner>) {
+  return (
+    <PopoverPrimitive.Positioner
+      data-slot="popover-positioner"
+      className={cn("[--z-index:50]", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverContent({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPortal>
+      <PopoverPositioner>
+        <PopoverPrimitive.Content
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm 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-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}
+        />
+      </PopoverPositioner>
+    </PopoverPortal>
+  )
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverArrow({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Arrow>) {
+  return (
+    <PopoverPrimitive.Arrow
+      data-slot="popover-arrow"
+      className={cn("[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]", className)}
+      {...props}
+    >
+      <PopoverPrimitive.ArrowTip data-slot="popover-arrow-tip" className="border-t border-l border-foreground/10" />
+    </PopoverPrimitive.Arrow>
+  )
+}
+
+function PopoverClose({ ...props }: React.ComponentProps<typeof PopoverPrimitive.CloseTrigger>) {
+  return <PopoverPrimitive.CloseTrigger data-slot="popover-close" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="popover-header" className={cn("flex flex-col gap-0.5 text-sm", className)} {...props} />
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Title>) {
+  return <PopoverPrimitive.Title data-slot="popover-title" className={cn("font-medium", className)} {...props} />
+}
+
+function PopoverDescription({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Description>) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+/** Open-state indicator for a trigger; rotates when open. */
+function PopoverIndicator({ className, children, ...props }: React.ComponentProps<typeof PopoverPrimitive.Indicator>) {
+  return (
+    <PopoverPrimitive.Indicator
+      data-slot="popover-indicator"
+      className={cn("inline-flex transition-transform data-[state=open]:rotate-180 [&_svg]:size-4", className)}
+      {...props}
+    >
+      {children ?? <ChevronDownIcon />}
+    </PopoverPrimitive.Indicator>
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverContext,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverTitle,
+  PopoverTrigger,
+  PopoverIndicator,
+}