@multicomma/arkcn 0.1.0

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

@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { DateInput as DateInputPrimitive } from "@ark-ui/react"
+
+function DateInput({ className, children, ...props }: React.ComponentProps<typeof DateInputPrimitive.Root>) {
+  return (
+    <DateInputPrimitive.Root
+      data-slot="date-input"
+      className={cn("flex w-full flex-col gap-1.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <DateInputControl>
+          <DateInputSegmentGroup />
+          <DateInputHiddenInput />
+        </DateInputControl>
+      )}
+    </DateInputPrimitive.Root>
+  )
+}
+
+function DateInputContext({ ...props }: React.ComponentProps<typeof DateInputPrimitive.Context>) {
+  return <DateInputPrimitive.Context {...props} />
+}
+
+function DateInputLabel({ className, ...props }: React.ComponentProps<typeof DateInputPrimitive.Label>) {
+  return (
+    <DateInputPrimitive.Label
+      data-slot="date-input-label"
+      className={cn("text-sm font-medium select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function DateInputControl({ className, ...props }: React.ComponentProps<typeof DateInputPrimitive.Control>) {
+  return (
+    <DateInputPrimitive.Control
+      data-slot="date-input-control"
+      className={cn(
+        "flex h-8 w-fit items-center rounded-lg border border-input bg-transparent px-2.5 text-sm 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 data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DateInputSegmentGroup({
+  className,
+  children,
+  index = 0,
+  ...props
+}: React.ComponentProps<typeof DateInputPrimitive.SegmentGroup>) {
+  return (
+    <DateInputPrimitive.SegmentGroup
+      data-slot="date-input-segment-group"
+      index={index}
+      className={cn("flex items-center", className)}
+      {...props}
+    >
+      {children ?? (
+        <DateInputPrimitive.Context>
+          {(api) => api.getSegments({ index }).map((segment, i) => <DateInputSegment key={i} segment={segment} />)}
+        </DateInputPrimitive.Context>
+      )}
+    </DateInputPrimitive.SegmentGroup>
+  )
+}
+
+function DateInputSegment({ className, ...props }: React.ComponentProps<typeof DateInputPrimitive.Segment>) {
+  return (
+    <DateInputPrimitive.Segment
+      data-slot="date-input-segment"
+      className={cn(
+        "rounded-sm px-0.5 tabular-nums outline-none data-editable:focus:bg-primary data-editable:focus:text-primary-foreground data-placeholder-shown:text-muted-foreground data-[type=literal]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DateInputSegmentContext({ ...props }: React.ComponentProps<typeof DateInputPrimitive.SegmentContext>) {
+  return <DateInputPrimitive.SegmentContext {...props} />
+}
+
+function DateInputHiddenInput({ ...props }: React.ComponentProps<typeof DateInputPrimitive.HiddenInput>) {
+  return <DateInputPrimitive.HiddenInput {...props} />
+}
+
+export {
+  DateInput,
+  DateInputContext,
+  DateInputControl,
+  DateInputHiddenInput,
+  DateInputLabel,
+  DateInputSegment,
+  DateInputSegmentContext,
+  DateInputSegmentGroup,
+}

package/src/components/ui/dialog.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Dialog as DialogPrimitive, Portal as PortalPrimitive } from "@ark-ui/react"
+
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof PortalPrimitive>) {
+  return <PortalPrimitive {...props} />
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.CloseTrigger>) {
+  return <DialogPrimitive.CloseTrigger data-slot="dialog-close" {...props} />
+}
+
+function DialogContext({ ...props }: React.ComponentProps<typeof DialogPrimitive.Context>) {
+  return <DialogPrimitive.Context {...props} />
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogPositioner({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Positioner>) {
+  return (
+    <DialogPrimitive.Positioner
+      data-slot="dialog-positioner"
+      className={cn("fixed inset-0 z-50 flex items-center justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPositioner>
+        <DialogPrimitive.Content
+          data-slot="dialog-content"
+          className={cn(
+            "relative grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm 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}
+        >
+          {children}
+          {showCloseButton && (
+            <DialogPrimitive.CloseTrigger data-slot="dialog-close" asChild>
+              <Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+                <XIcon />
+                <span className="sr-only">Close</span>
+              </Button>
+            </DialogPrimitive.CloseTrigger>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPositioner>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.CloseTrigger asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.CloseTrigger>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("font-heading text-base leading-none font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogContext,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogPositioner,
+  DialogTitle,
+  DialogTrigger,
+}

package/src/components/ui/direction.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+type Direction = "ltr" | "rtl"
+
+/**
+ * Ark UI has no global direction provider; each Ark component accepts a `dir`
+ * prop and its `LocaleProvider` derives direction from a locale. This mirrors
+ * Radix's `DirectionProvider`: a plain React context you can read with
+ * `useDirection` and forward to Ark components as `dir`.
+ */
+const DirectionContext = React.createContext<Direction | undefined>(undefined)
+
+function DirectionProvider({
+  dir,
+  direction,
+  children,
+}: {
+  dir?: Direction
+  direction?: Direction
+  children?: React.ReactNode
+}) {
+  return <DirectionContext.Provider value={direction ?? dir}>{children}</DirectionContext.Provider>
+}
+
+function useDirection(localDir?: Direction): Direction {
+  const globalDir = React.useContext(DirectionContext)
+  return localDir ?? globalDir ?? "ltr"
+}
+
+export { DirectionProvider, useDirection }

package/src/components/ui/drawer.tsx

@@ -0,0 +1,200 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Drawer as DrawerPrimitive, Portal as PortalPrimitive } from "@ark-ui/react"
+
+type DrawerDirection = "top" | "bottom" | "left" | "right"
+
+const swipeDirectionByDirection = {
+  bottom: "down",
+  top: "up",
+  left: "start",
+  right: "end",
+} as const
+
+function Drawer({
+  direction = "bottom",
+  swipeDirection,
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root> & {
+  /** Edge the drawer slides in from. Maps to Ark's `swipeDirection`. */
+  direction?: DrawerDirection
+}) {
+  return (
+    <DrawerPrimitive.Root
+      swipeDirection={swipeDirection ?? swipeDirectionByDirection[direction]}
+      lazyMount={lazyMount}
+      unmountOnExit={unmountOnExit}
+      {...props}
+    />
+  )
+}
+
+function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({ ...props }: React.ComponentProps<typeof PortalPrimitive>) {
+  return <PortalPrimitive {...props} />
+}
+
+function DrawerContext({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Context>) {
+  return <DrawerPrimitive.Context {...props} />
+}
+
+function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.CloseTrigger>) {
+  return <DrawerPrimitive.CloseTrigger data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Backdrop>) {
+  return (
+    <DrawerPrimitive.Backdrop
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerPositioner({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Positioner>) {
+  return (
+    <DrawerPrimitive.Positioner
+      data-slot="drawer-positioner"
+      className={cn("fixed inset-0 z-50", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerGrabber({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Grabber>) {
+  return (
+    <DrawerPrimitive.Grabber
+      data-slot="drawer-grabber"
+      className={cn(
+        "mx-auto mt-4 hidden shrink-0 cursor-grab touch-none group-data-[swipe-direction=down]/drawer-content:block",
+        className
+      )}
+      {...props}
+    >
+      <DrawerPrimitive.GrabberIndicator
+        data-slot="drawer-grabber-indicator"
+        className="block h-1 w-25 rounded-full bg-muted"
+      />
+    </DrawerPrimitive.Grabber>
+  )
+}
+
+function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPositioner>
+        <DrawerPrimitive.Content
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content absolute flex h-auto flex-col bg-popover text-sm text-popover-foreground outline-hidden transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=left]:sm:max-w-sm data-[swipe-direction=right]:sm:max-w-sm data-open:animate-in data-[swipe-direction=down]:data-open:slide-in-from-bottom-full data-[swipe-direction=left]:data-open:slide-in-from-left-full data-[swipe-direction=right]:data-open:slide-in-from-right-full data-[swipe-direction=up]:data-open:slide-in-from-top-full data-closed:animate-out data-[swipe-direction=down]:data-closed:slide-out-to-bottom-full data-[swipe-direction=left]:data-closed:slide-out-to-left-full data-[swipe-direction=right]:data-closed:slide-out-to-right-full data-[swipe-direction=up]:data-closed:slide-out-to-top-full",
+            className
+          )}
+          {...props}
+        >
+          <DrawerGrabber />
+          {children}
+        </DrawerPrimitive.Content>
+      </DrawerPositioner>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-0.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="drawer-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+}
+
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("font-heading text-base font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerSwipeArea({ ...props }: React.ComponentProps<typeof DrawerPrimitive.SwipeArea>) {
+  return <DrawerPrimitive.SwipeArea data-slot="drawer-swipe-area" {...props} />
+}
+
+/** Wrap page content in a stack so nested drawers push it back (`Drawer` parts inside read the stack). */
+function DrawerStack({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Stack>) {
+  return <DrawerPrimitive.Stack data-slot="drawer-stack" {...props} />
+}
+
+/** The layer that scales and shifts back when a drawer opens over it. */
+function DrawerIndent({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Indent>) {
+  return (
+    <DrawerPrimitive.Indent
+      data-slot="drawer-indent"
+      className={cn("origin-center transition-transform duration-300 ease-out", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerIndentBackground({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.IndentBackground>) {
+  return (
+    <DrawerPrimitive.IndentBackground
+      data-slot="drawer-indent-background"
+      className={cn("fixed inset-0 bg-black", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerContext,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerGrabber,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerPositioner,
+  DrawerSwipeArea,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerIndent,
+  DrawerIndentBackground,
+  DrawerStack,
+}