@multicomma/arkcn 0.1.0

package/src/components/ui/hotkeys.tsx

@@ -0,0 +1,340 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+
+/* -------------------------------- parsing -------------------------------- */
+
+const isMac = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.platform)
+
+type Chord = { key: string; mod: boolean; ctrl: boolean; meta: boolean; alt: boolean; shift: boolean }
+
+const keyAliases: Record<string, string> = {
+  esc: "escape",
+  return: "enter",
+  space: " ",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright",
+  plus: "+",
+  del: "delete",
+}
+
+/** "mod+shift+k" → chord; "g d" → sequence of chords. */
+function parseHotkey(hotkey: string): Chord[] {
+  return hotkey
+    .trim()
+    .split(/\s+/)
+    .map((part) => {
+      const tokens = part.split("+").map((t) => t.toLowerCase())
+      // "+" itself is written as "plus"
+      const key = tokens.pop() ?? ""
+      const chord: Chord = {
+        key: keyAliases[key] ?? key,
+        mod: false,
+        ctrl: false,
+        meta: false,
+        alt: false,
+        shift: false,
+      }
+      for (const t of tokens) {
+        if (t === "mod" || t === "cmd" || t === "command") chord.mod = true
+        else if (t === "ctrl" || t === "control") chord.ctrl = true
+        else if (t === "meta" || t === "win" || t === "super") chord.meta = true
+        else if (t === "alt" || t === "option") chord.alt = true
+        else if (t === "shift") chord.shift = true
+      }
+      return chord
+    })
+}
+
+function matchesChord(event: KeyboardEvent, chord: Chord, mac: boolean) {
+  const key = event.key.length === 1 ? event.key.toLowerCase() : event.key.toLowerCase()
+  if (key !== chord.key) return false
+  const wantMeta = chord.meta || (chord.mod && mac)
+  const wantCtrl = chord.ctrl || (chord.mod && !mac)
+  if (event.metaKey !== wantMeta || event.ctrlKey !== wantCtrl || event.altKey !== chord.alt) return false
+  // Punctuation like "?" already implies Shift on most layouts, so only enforce Shift for letters.
+  const letter = /^[a-z0-9]$/.test(chord.key) || chord.key.length > 1
+  if (letter && event.shiftKey !== chord.shift) return false
+  return true
+}
+
+const symbol: Record<string, string> = {
+  mod: "⌘",
+  meta: "⌘",
+  ctrl: "⌃",
+  alt: "⌥",
+  shift: "⇧",
+  enter: "↵",
+  escape: "Esc",
+  backspace: "⌫",
+  delete: "⌦",
+  arrowup: "↑",
+  arrowdown: "↓",
+  arrowleft: "←",
+  arrowright: "→",
+  " ": "Space",
+  tab: "Tab",
+}
+const winSymbol: Record<string, string> = {
+  ...symbol,
+  mod: "Ctrl",
+  meta: "Win",
+  ctrl: "Ctrl",
+  alt: "Alt",
+  shift: "Shift",
+}
+
+/** Platform-aware key labels: "mod+k" → ["⌘", "K"] on Mac, ["Ctrl", "K"] elsewhere. Sequences give one array per chord. */
+function formatHotkey(hotkey: string, mac = isMac()): string[][] {
+  const table = mac ? symbol : winSymbol
+  return parseHotkey(hotkey).map((chord) => {
+    const parts: string[] = []
+    if (chord.ctrl) parts.push(table.ctrl)
+    if (chord.alt) parts.push(table.alt)
+    if (chord.shift) parts.push(table.shift)
+    if (chord.mod) parts.push(table.mod)
+    if (chord.meta && !chord.mod) parts.push(table.meta)
+    parts.push(table[chord.key] ?? (chord.key.length === 1 ? chord.key.toUpperCase() : chord.key))
+    return parts
+  })
+}
+
+/* -------------------------------- registry ------------------------------- */
+
+type HotkeyEntry = {
+  id: string
+  hotkey: string
+  label: string
+  group: string
+  enabled: boolean
+  /** Fire even while typing in an input, textarea, or contenteditable. */
+  allowInInput: boolean
+  handler: (event: KeyboardEvent) => void
+}
+
+type HotkeysContextValue = {
+  entries: HotkeyEntry[]
+  register: (entry: HotkeyEntry) => () => void
+  dialogOpen: boolean
+  setDialogOpen: (open: boolean) => void
+}
+
+const HotkeysContext = React.createContext<HotkeysContextValue | null>(null)
+
+function useHotkeysContext() {
+  const ctx = React.useContext(HotkeysContext)
+  if (!ctx) throw new Error("Hotkeys parts must be used inside <HotkeysProvider>")
+  return ctx
+}
+
+const isEditable = (target: EventTarget | null) => {
+  const el = target as HTMLElement | null
+  if (!el || !("tagName" in el)) return false
+  const tag = el.tagName
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable
+}
+
+/**
+ * One document-level keydown listener for every registered hotkey. Supports chords
+ * ("mod+k"), sequences ("g d", one second between keys), and a built-in "?" that opens
+ * `HotkeysDialog` when one is rendered.
+ */
+function HotkeysProvider({
+  children,
+  dialogHotkey = "?",
+  sequenceTimeout = 1000,
+}: {
+  children: React.ReactNode
+  /** Opens the shortcuts dialog; `null` disables it. */
+  dialogHotkey?: string | null
+  sequenceTimeout?: number
+}) {
+  const [entries, setEntries] = React.useState<HotkeyEntry[]>([])
+  const [dialogOpen, setDialogOpen] = React.useState(false)
+  const entriesRef = React.useRef(entries)
+  entriesRef.current = entries
+  const buffer = React.useRef<{ keys: KeyboardEvent[]; at: number }>({ keys: [], at: 0 })
+
+  const register = React.useCallback((entry: HotkeyEntry) => {
+    setEntries((prev) => [...prev.filter((e) => e.id !== entry.id), entry])
+    return () => setEntries((prev) => prev.filter((e) => e.id !== entry.id))
+  }, [])
+
+  const mac = React.useMemo(isMac, [])
+  React.useEffect(() => {
+    const down = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || event.isComposing) return
+      if (["Shift", "Control", "Alt", "Meta"].includes(event.key)) return
+      const editing = isEditable(event.target)
+      const now = Date.now()
+      const buf = buffer.current
+      if (now - buf.at > sequenceTimeout) buf.keys = []
+      buf.keys.push(event)
+      buf.at = now
+      if (buf.keys.length > 4) buf.keys.shift()
+
+      const candidates = [...entriesRef.current]
+      if (dialogHotkey) {
+        candidates.push({
+          id: "hotkeys:dialog",
+          hotkey: dialogHotkey,
+          label: "Keyboard shortcuts",
+          group: "General",
+          enabled: true,
+          allowInInput: false,
+          handler: () => setDialogOpen((open) => !open),
+        })
+      }
+      let partial = false
+      for (const entry of candidates) {
+        if (!entry.enabled || (editing && !entry.allowInInput)) continue
+        const chords = parseHotkey(entry.hotkey)
+        const tail = buf.keys.slice(-chords.length)
+        if (tail.length === chords.length && chords.every((c, i) => matchesChord(tail[i], c, mac))) {
+          event.preventDefault()
+          buf.keys = []
+          entry.handler(event)
+          return
+        }
+        // Is the buffer a prefix of a longer sequence? Then keep it.
+        if (chords.length > 1 && buf.keys.length < chords.length) {
+          const head = chords.slice(0, buf.keys.length)
+          if (head.every((c, i) => matchesChord(buf.keys[i], c, mac))) partial = true
+        }
+      }
+      if (!partial) buf.keys = []
+    }
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [dialogHotkey, sequenceTimeout, mac])
+
+  const ctx = React.useMemo<HotkeysContextValue>(
+    () => ({ entries, register, dialogOpen, setDialogOpen }),
+    [entries, register, dialogOpen]
+  )
+  return <HotkeysContext.Provider value={ctx}>{children}</HotkeysContext.Provider>
+}
+
+/** Register a hotkey for the lifetime of the component. Listed in `HotkeysDialog` when it has a label. */
+function useHotkey(
+  hotkey: string,
+  handler: (event: KeyboardEvent) => void,
+  options: { label?: string; group?: string; enabled?: boolean; allowInInput?: boolean } = {}
+) {
+  const { register } = useHotkeysContext()
+  const { label = "", group = "General", enabled = true, allowInInput = false } = options
+  const id = React.useId()
+  const handlerRef = React.useRef(handler)
+  handlerRef.current = handler
+  React.useEffect(
+    () =>
+      register({
+        id,
+        hotkey,
+        label,
+        group,
+        enabled,
+        allowInInput,
+        handler: (event) => handlerRef.current(event),
+      }),
+    [register, id, hotkey, label, group, enabled, allowInInput]
+  )
+}
+
+/** Every registered hotkey with a label, grouped, for rendering a cheat sheet. */
+function useHotkeys() {
+  const { entries } = useHotkeysContext()
+  return React.useMemo(() => {
+    const groups = new Map<string, HotkeyEntry[]>()
+    for (const e of entries) {
+      if (!e.label) continue
+      const list = groups.get(e.group) ?? []
+      list.push(e)
+      groups.set(e.group, list)
+    }
+    return Array.from(groups, ([group, hotkeys]) => ({ group, hotkeys }))
+  }, [entries])
+}
+
+/* ---------------------------------- parts -------------------------------- */
+
+/** Renders a hotkey as Kbd caps ("mod+k" → ⌘ K; "g d" → G then D). */
+function HotkeyKbd({ hotkey, className, ...props }: React.ComponentProps<"span"> & { hotkey: string }) {
+  const chords = formatHotkey(hotkey)
+  return (
+    <span data-slot="hotkey-kbd" className={cn("inline-flex items-center gap-1", className)} {...props}>
+      {chords.map((keys, i) => (
+        <React.Fragment key={i}>
+          {i > 0 && <span className="text-xs text-muted-foreground">then</span>}
+          <KbdGroup>
+            {keys.map((k, j) => (
+              <Kbd key={j}>{k}</Kbd>
+            ))}
+          </KbdGroup>
+        </React.Fragment>
+      ))}
+    </span>
+  )
+}
+
+/** The shortcuts cheat sheet. Opens from the provider's `dialogHotkey` ("?" by default) or `useHotkeysDialog()`. */
+function HotkeysDialog({
+  title = "Keyboard shortcuts",
+  description = "Shortcuts work anywhere on the page except while typing.",
+  children,
+  className,
+}: {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+}) {
+  const { dialogOpen, setDialogOpen } = useHotkeysContext()
+  const registered = useHotkeys()
+  const groups = React.useMemo(() => {
+    const self = { id: "hotkeys:dialog", hotkey: "?", label: "Show this dialog" }
+    const general = registered.find((g) => g.group === "General")
+    if (general) return registered.map((g) => (g === general ? { ...g, hotkeys: [...g.hotkeys, self] } : g))
+    return [...registered, { group: "General", hotkeys: [self] }]
+  }, [registered])
+  return (
+    <Dialog open={dialogOpen} onOpenChange={({ open }) => setDialogOpen(open)}>
+      <DialogContent data-slot="hotkeys-dialog" className={cn("sm:max-w-lg", className)}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-5 sm:grid-cols-2">
+          {groups.map(({ group, hotkeys }) => (
+            <div key={group} data-slot="hotkeys-dialog-group" className="flex flex-col gap-1.5">
+              <h4 className="text-xs font-medium text-muted-foreground uppercase">{group}</h4>
+              {hotkeys.map((h) => (
+                <div
+                  key={h.id}
+                  data-slot="hotkeys-dialog-item"
+                  className="flex items-center justify-between gap-3 text-sm"
+                >
+                  <span className="truncate">{h.label}</span>
+                  <HotkeyKbd hotkey={h.hotkey} />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function useHotkeysDialog() {
+  const { dialogOpen, setDialogOpen } = useHotkeysContext()
+  return { open: dialogOpen, setOpen: setDialogOpen }
+}
+
+export { HotkeyKbd, HotkeysDialog, HotkeysProvider, formatHotkey, parseHotkey, useHotkey, useHotkeys, useHotkeysDialog }

package/src/components/ui/hover-card.tsx

@@ -0,0 +1,83 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { HoverCard as HoverCardPrimitive, Portal as PortalPrimitive } from "@ark-ui/react"
+
+function HoverCard({
+  positioning,
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return (
+    <HoverCardPrimitive.Root
+      positioning={{ placement: "bottom", gutter: 4, ...positioning }}
+      lazyMount={lazyMount}
+      unmountOnExit={unmountOnExit}
+      {...props}
+    />
+  )
+}
+
+function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+}
+
+function HoverCardPortal({ ...props }: React.ComponentProps<typeof PortalPrimitive>) {
+  return <PortalPrimitive {...props} />
+}
+
+function HoverCardContext({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Context>) {
+  return <HoverCardPrimitive.Context {...props} />
+}
+
+function HoverCardPositioner({ className, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Positioner>) {
+  return (
+    <HoverCardPrimitive.Positioner
+      data-slot="hover-card-positioner"
+      className={cn("[--z-index:50]", className)}
+      {...props}
+    />
+  )
+}
+
+function HoverCardArrow({ className, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Arrow>) {
+  return (
+    <HoverCardPrimitive.Arrow
+      data-slot="hover-card-arrow"
+      className={cn("[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]", className)}
+      {...props}
+    >
+      <HoverCardPrimitive.ArrowTip
+        data-slot="hover-card-arrow-tip"
+        className="border-t border-l border-foreground/10"
+      />
+    </HoverCardPrimitive.Arrow>
+  )
+}
+
+function HoverCardContent({ className, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPortal>
+      <HoverCardPositioner>
+        <HoverCardPrimitive.Content
+          data-slot="hover-card-content"
+          className={cn(
+            "z-50 w-64 origin-(--transform-origin) 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}
+        />
+      </HoverCardPositioner>
+    </HoverCardPortal>
+  )
+}
+
+export {
+  HoverCard,
+  HoverCardArrow,
+  HoverCardContent,
+  HoverCardContext,
+  HoverCardPortal,
+  HoverCardPositioner,
+  HoverCardTrigger,
+}

package/src/components/ui/image-cropper.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { ImageCropper as ImageCropperPrimitive } from "@ark-ui/react"
+
+const handlePositions = ["n", "e", "s", "w", "ne", "se", "sw", "nw"] as const
+
+function ImageCropper({ className, ...props }: React.ComponentProps<typeof ImageCropperPrimitive.Root>) {
+  return (
+    <ImageCropperPrimitive.Root
+      data-slot="image-cropper"
+      className={cn("flex w-full flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ImageCropperContext({ ...props }: React.ComponentProps<typeof ImageCropperPrimitive.Context>) {
+  return <ImageCropperPrimitive.Context {...props} />
+}
+
+function ImageCropperViewport({ className, ...props }: React.ComponentProps<typeof ImageCropperPrimitive.Viewport>) {
+  return (
+    <ImageCropperPrimitive.Viewport
+      data-slot="image-cropper-viewport"
+      className={cn(
+        "relative h-72 w-full touch-none overflow-hidden rounded-xl border bg-muted select-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ImageCropperImage({ className, ...props }: React.ComponentProps<typeof ImageCropperPrimitive.Image>) {
+  return (
+    <ImageCropperPrimitive.Image data-slot="image-cropper-image" className={cn("max-w-none", className)} {...props} />
+  )
+}
+
+function ImageCropperSelection({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ImageCropperPrimitive.Selection>) {
+  return (
+    <ImageCropperPrimitive.Selection
+      data-slot="image-cropper-selection"
+      className={cn(
+        "shadow-[0_0_0_9999px_rgba(0,0,0,0.45)] outline-1 outline-white/80 data-[shape=circle]:rounded-full",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <ImageCropperGrid axis="horizontal" />
+          <ImageCropperGrid axis="vertical" />
+          {handlePositions.map((position) => (
+            <ImageCropperHandle key={position} position={position} />
+          ))}
+        </>
+      )}
+    </ImageCropperPrimitive.Selection>
+  )
+}
+
+function ImageCropperGrid({ className, ...props }: React.ComponentProps<typeof ImageCropperPrimitive.Grid>) {
+  return (
+    <ImageCropperPrimitive.Grid
+      data-slot="image-cropper-grid"
+      className={cn("stroke-white/50", className)}
+      {...props}
+    />
+  )
+}
+
+function ImageCropperHandle({ className, ...props }: React.ComponentProps<typeof ImageCropperPrimitive.Handle>) {
+  return (
+    <ImageCropperPrimitive.Handle
+      data-slot="image-cropper-handle"
+      className={cn(
+        "after:absolute after:top-1/2 after:left-1/2 after:size-2.5 after:-translate-1/2 after:rounded-full after:border after:border-ring after:bg-white data-[axis=x]:after:h-4 data-[axis=x]:after:w-1 data-[axis=y]:after:h-1 data-[axis=y]:after:w-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ImageCropper,
+  ImageCropperContext,
+  ImageCropperGrid,
+  ImageCropperHandle,
+  ImageCropperImage,
+  ImageCropperSelection,
+  ImageCropperViewport,
+}

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

@@ -0,0 +1,133 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupTriggerVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+})
+
+function InputGroupTrigger({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupTriggerVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupTriggerVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { InputGroup, InputGroupAddon, InputGroupTrigger, InputGroupText, InputGroupInput, InputGroupTextarea }