@jackbernnie/hiyf 0.1.0

package/dist/components/ContextMenu.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ContextMenu as ContextMenu$1, ContextMenuTrigger, ContextMenuContent, ContextMenuSeparator, ContextMenuItem } from './ui/context-menu.js';
+
+function ContextMenu({ trigger, items }) {
+  return /* @__PURE__ */ jsxs(ContextMenu$1, { children: [
+    /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(ContextMenuContent, { children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      item.separatorBefore && /* @__PURE__ */ jsx(ContextMenuSeparator, {}),
+      /* @__PURE__ */ jsx(
+        ContextMenuItem,
+        {
+          variant: item.tone === "danger" ? "destructive" : "default",
+          onSelect: item.onSelect,
+          children: item.label
+        }
+      )
+    ] }, index)) })
+  ] });
+}
+
+export { ContextMenu };

package/dist/components/Dialog.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface DialogProps {
+    /** Element that opens the dialog (e.g. a Button). */
+    trigger: React.ReactNode;
+    /** Accessible dialog title, rendered in the header. */
+    title: string;
+    /** Optional subtitle rendered below the title. */
+    description?: string;
+    /** Constrains the dialog width; defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Dialog body content. */
+    children?: React.ReactNode;
+    /** Rendered in the dialog footer (e.g. action buttons). */
+    footer?: React.ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when the open state should change. */
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Dialog({ trigger, title, description, size, children, footer, open, onOpenChange, }: DialogProps): React.JSX.Element;

package/dist/components/Dialog.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../lib/utils.js';
+import { Dialog as Dialog$1, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './ui/dialog.js';
+
+const sizeMap = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg"
+};
+function Dialog({
+  trigger,
+  title,
+  description,
+  size = "md",
+  children,
+  footer,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs(Dialog$1, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(DialogContent, { className: cn(sizeMap[size]), children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+        description && /* @__PURE__ */ jsx(DialogDescription, { children: description })
+      ] }),
+      children,
+      footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
+    ] })
+  ] });
+}
+
+export { Dialog };

package/dist/components/Drawer.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/**
+ * Drawer — a closed convenience wrapper over the vaul-backed shadcn Drawer.
+ *
+ * The underlying Drawer exposes className on its content panel and leaves
+ * header composition entirely to callers. This wrapper closes that:
+ *   - Title and description are typed props rendered in a consistent
+ *     DrawerHeader with the system's typographic treatment, rather than
+ *     free-form children.
+ *   - The drag handle and bottom-sheet sizing are baked in by the primitive
+ *     and intentionally not re-exposed here.
+ *   - No `className` or `style` escape hatch on any public prop.
+ */
+export interface DrawerProps {
+    /** Element that opens the drawer (e.g. a Button). */
+    trigger: React.ReactNode;
+    /** Accessible panel title. */
+    title?: string;
+    /** Optional subtitle rendered below the title. */
+    description?: string;
+    /** Panel body content. */
+    children?: React.ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when the open state should change. */
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Drawer({ trigger, title, description, children, open, onOpenChange, }: DrawerProps): React.JSX.Element;

package/dist/components/Drawer.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Drawer as Drawer$1, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from './ui/drawer.js';
+
+function Drawer({
+  trigger,
+  title,
+  description,
+  children,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs(Drawer$1, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(DrawerContent, { children: [
+      (title || description) && /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+        title && /* @__PURE__ */ jsx(DrawerTitle, { children: title }),
+        description && /* @__PURE__ */ jsx(DrawerDescription, { children: description })
+      ] }),
+      children
+    ] })
+  ] });
+}
+
+export { Drawer };

package/dist/components/DropdownMenu.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+/**
+ * DropdownMenu — a closed convenience wrapper over the shadcn DropdownMenu primitives.
+ *
+ * The raw primitives are composition primitives that accept arbitrary className,
+ * free-form children, and any nesting pattern. Callers can — and routinely do —
+ * produce menus with inconsistent item shapes, ad-hoc hover colors, and bespoke
+ * separators. This wrapper closes that by driving the menu from a typed item
+ * model:
+ *   - `items` is an array of plain data objects with `label`, `onSelect`,
+ *     `tone`, and `separatorBefore`; no JSX, no className.
+ *   - `tone: 'danger'` maps to the primitive's `variant="destructive"` so
+ *     callers express intent, not appearance.
+ *   - `label` renders a section header above all items when provided.
+ *   - No `className` or `style` escape hatch on any public prop.
+ */
+export interface DropdownMenuItem {
+    /** Display text for the menu item. */
+    label: string;
+    /** Called when the item is selected. */
+    onSelect?: () => void;
+    /**
+     * Intent of the action.
+     * 'danger' renders the item in the destructive style.
+     */
+    tone?: "default" | "danger";
+    /** Render a separator rule immediately before this item. */
+    separatorBefore?: boolean;
+}
+export interface DropdownMenuProps {
+    /** Element that opens the menu (e.g. a Button). */
+    trigger: React.ReactNode;
+    /** Optional group label displayed at the top of the menu. */
+    label?: string;
+    /** Ordered list of menu items. */
+    items: DropdownMenuItem[];
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when the open state should change. */
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function DropdownMenu({ trigger, label, items, open, onOpenChange, }: DropdownMenuProps): React.JSX.Element;

package/dist/components/DropdownMenu.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { DropdownMenu as DropdownMenu$1, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem } from './ui/dropdown-menu.js';
+
+function DropdownMenu({
+  trigger,
+  label,
+  items,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu$1, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+      label && /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }),
+      items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx(
+          DropdownMenuItem,
+          {
+            variant: item.tone === "danger" ? "destructive" : "default",
+            onSelect: item.onSelect,
+            children: item.label
+          }
+        )
+      ] }, index))
+    ] }) })
+  ] });
+}
+
+export { DropdownMenu };

package/dist/components/Empty.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+/**
+ * Empty — a closed empty-state wrapper over shadcn's Empty primitive family.
+ *
+ * shadcn's Empty parts accept arbitrary `className` and free-form children,
+ * letting consumers produce wildly inconsistent empty states. This wrapper
+ * closes it:
+ *   - `title` is the required heading; always renders via EmptyTitle.
+ *   - `description` is optional supporting text; renders via EmptyDescription.
+ *   - `icon` is an optional React node (e.g. an SVG icon) shown in an
+ *     EmptyMedia container with the 'icon' variant for correct sizing/bg.
+ *   - `action` is an optional React node (e.g. a Button) shown below the text.
+ *   - NO `className`/`style` escape hatch. Every empty state on screen uses
+ *     the same on-brand structure and spacing.
+ *   - Need a custom media treatment? Add an enumerated `mediaVariant` prop.
+ */
+export interface EmptyProps {
+    /** Primary heading of the empty state. */
+    title: string;
+    /** Optional supporting description text. */
+    description?: string;
+    /** Optional icon or illustration rendered above the title. */
+    icon?: React.ReactNode;
+    /** Optional action element (e.g. a Button) rendered below the text. */
+    action?: React.ReactNode;
+}
+/** Closed empty state — no className/style. */
+export declare function Empty({ title, description, icon, action }: EmptyProps): React.JSX.Element;

package/dist/components/Empty.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Empty as Empty$1, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from './ui/empty.js';
+
+function Empty({ title, description, icon, action }) {
+  return /* @__PURE__ */ jsxs(Empty$1, { children: [
+    /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+      icon && /* @__PURE__ */ jsx(EmptyMedia, { variant: "icon", children: icon }),
+      /* @__PURE__ */ jsx(EmptyTitle, { children: title }),
+      description && /* @__PURE__ */ jsx(EmptyDescription, { children: description })
+    ] }),
+    action && /* @__PURE__ */ jsx(EmptyContent, { children: action })
+  ] });
+}
+
+export { Empty };

package/dist/components/Field.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+/**
+ * Field — closed form-field wrapper over shadcn's Field primitives.
+ *
+ * shadcn's Field parts (FieldLabel, FieldDescription, FieldError) each accept
+ * arbitrary `className`, and callers must compose them manually. This wrapper
+ * collapses the composition into a single component driven by intent props:
+ *   - `label` renders a FieldLabel linked to the control via `htmlFor`.
+ *   - `hint` renders a FieldDescription below the control.
+ *   - `error` renders a FieldError alert below the control (takes priority
+ *     over `hint` when both are supplied).
+ *   - `children` is the form control (e.g., an HIYF <Input> or <Select>).
+ *   - there is NO `className` / `style` prop.
+ *   - need horizontal orientation or a fieldset group? Use the raw Field
+ *     primitives from the ui layer for those advanced cases, or extend
+ *     this wrapper with an `orientation` prop.
+ */
+export interface FieldProps {
+    /** Label text linked to the control. */
+    label?: string;
+    /** Hint / helper text shown below the control. */
+    hint?: string;
+    /** Error message shown below the control; marks the field invalid. */
+    error?: string;
+    /** The `id` of the control, used to link the label via htmlFor. */
+    htmlFor?: string;
+    /** The form control to render inside the field. */
+    children?: React.ReactNode;
+}
+export declare function Field({ label, hint, error, htmlFor, children }: FieldProps): React.JSX.Element;

package/dist/components/Field.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Field as Field$1, FieldLabel, FieldError, FieldDescription } from './ui/field.js';
+
+function Field({ label, hint, error, htmlFor, children }) {
+  return /* @__PURE__ */ jsxs(Field$1, { "data-invalid": !!error || void 0, children: [
+    label && /* @__PURE__ */ jsx(FieldLabel, { htmlFor, children: label }),
+    children,
+    error ? /* @__PURE__ */ jsx(FieldError, { children: error }) : hint ? /* @__PURE__ */ jsx(FieldDescription, { children: hint }) : null
+  ] });
+}
+
+export { Field };

package/dist/components/Grid.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { GridPlacement } from '../utils/grid';
+import type { ResponsiveValue } from '../utils/types';
+import { type BoxProps } from './Box';
+type OmittedGridProps = 'display' | 'gridTemplateColumns' | 'gridTemplateRows' | 'gridTemplateAreas' | 'gridColumn' | 'gridRow' | 'gridAutoFlow' | 'gridAutoRows' | 'gridAutoColumns';
+export interface GridProps extends Omit<BoxProps, OmittedGridProps> {
+    /** `grid-template-columns`, e.g. `"repeat(3, 1fr)"`. */
+    templateColumns?: ResponsiveValue<string>;
+    /** `grid-template-rows`. */
+    templateRows?: ResponsiveValue<string>;
+    /** `grid-template-areas`. */
+    templateAreas?: ResponsiveValue<string>;
+    /** `grid-auto-flow`. */
+    autoFlow?: BoxProps['gridAutoFlow'];
+    /** `grid-auto-rows`. */
+    autoRows?: ResponsiveValue<string>;
+    /** `grid-auto-columns`. */
+    autoColumns?: ResponsiveValue<string>;
+    /** `grid-column` — a line, or `<start> / <end>`. */
+    column?: ResponsiveValue<GridPlacement>;
+    /** `grid-row` — a line, or `<start> / <end>`. */
+    row?: ResponsiveValue<GridPlacement>;
+    /** Render as `inline-grid` instead of `grid`. */
+    inline?: boolean;
+}
+/**
+ * Grid is a Box that lays out its children with CSS grid. It defaults to
+ * `display: grid` and exposes the grid properties under short prop names.
+ * Spacing (`gap`/`rowGap`/`columnGap`) and every other Box prop are inherited.
+ */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/Grid.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Box } from './Box.js';
+
+const Grid = React.forwardRef(function Grid2({
+  templateColumns,
+  templateRows,
+  templateAreas,
+  autoFlow,
+  autoRows,
+  autoColumns,
+  column,
+  row,
+  inline,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      display: inline ? "inline-grid" : "grid",
+      gridTemplateColumns: templateColumns,
+      gridTemplateRows: templateRows,
+      gridTemplateAreas: templateAreas,
+      gridAutoFlow: autoFlow,
+      gridAutoRows: autoRows,
+      gridAutoColumns: autoColumns,
+      gridColumn: column,
+      gridRow: row,
+      ...rest
+    }
+  );
+});
+Grid.displayName = "Grid";
+
+export { Grid };

package/dist/components/GridItem.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { GridLine } from '../utils/grid';
+import type { ResponsiveValue } from '../utils/types';
+import { type BoxProps } from './Box';
+type OmittedGridItemProps = 'gridArea' | 'gridColumn' | 'gridRow' | 'gridColumnStart' | 'gridColumnEnd' | 'gridRowStart' | 'gridRowEnd';
+type Span = ResponsiveValue<number | 'auto'>;
+type Line = ResponsiveValue<GridLine>;
+export interface GridItemProps extends Omit<BoxProps, OmittedGridItemProps> {
+    /** `grid-area`. */
+    area?: ResponsiveValue<string>;
+    /** Number of columns to span, or `"auto"`. */
+    colSpan?: Span;
+    /** `grid-column-start`. */
+    colStart?: Line;
+    /** `grid-column-end`. */
+    colEnd?: Line;
+    /** Number of rows to span, or `"auto"`. */
+    rowSpan?: Span;
+    /** `grid-row-start`. */
+    rowStart?: Line;
+    /** `grid-row-end`. */
+    rowEnd?: Line;
+}
+/**
+ * GridItem positions a single child inside a `Grid`. `colSpan`/`rowSpan` set how
+ * many tracks the item spans; `colStart`/`colEnd`/`rowStart`/`rowEnd` and `area`
+ * place it explicitly. All other Box props are inherited.
+ */
+export declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/GridItem.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Box } from './Box.js';
+
+function spanValue(value) {
+  return value === "auto" ? "auto" : `span ${value} / span ${value}`;
+}
+function mapResponsive(value, fn) {
+  if (value === void 0) return void 0;
+  if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+    const out = {};
+    for (const [key, v] of Object.entries(value)) {
+      if (v !== void 0) out[key] = fn(v);
+    }
+    return out;
+  }
+  return fn(value);
+}
+const GridItem = React.forwardRef(
+  function GridItem2({ area, colSpan, colStart, colEnd, rowSpan, rowStart, rowEnd, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        gridArea: area,
+        gridColumn: mapResponsive(colSpan, spanValue),
+        gridColumnStart: colStart,
+        gridColumnEnd: colEnd,
+        gridRow: mapResponsive(rowSpan, spanValue),
+        gridRowStart: rowStart,
+        gridRowEnd: rowEnd,
+        ...rest
+      }
+    );
+  }
+);
+GridItem.displayName = "GridItem";
+
+export { GridItem };

package/dist/components/HoverCard.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+/**
+ * HoverCard — a closed convenience wrapper over the shadcn HoverCard primitives.
+ *
+ * The underlying HoverCardContent accepts arbitrary `className`, enabling
+ * per-instance overrides to width, shadow, and border radius that would
+ * fragment the visual language. This wrapper closes that:
+ *   - `side` is the only placement control; align is fixed to 'center'
+ *     because hover-cards rarely need asymmetric anchoring.
+ *   - The card's background (bg-popover), shadow (shadow-md), and ring are
+ *     fixed to the system token treatment — no per-instance overrides.
+ *   - No `className` or `style` escape hatch on any public prop.
+ */
+export interface HoverCardProps {
+    /** Element that triggers the hover card on mouse enter. */
+    trigger: React.ReactNode;
+    /** Card content shown on hover. */
+    children: React.ReactNode;
+    /** Preferred side relative to the trigger; defaults to 'bottom'. */
+    side?: "top" | "right" | "bottom" | "left";
+}
+export declare function HoverCard({ trigger, children, side }: HoverCardProps): React.JSX.Element;

package/dist/components/HoverCard.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { HoverCard as HoverCard$1, HoverCardTrigger, HoverCardContent } from './ui/hover-card.js';
+
+function HoverCard({ trigger, children, side = "bottom" }) {
+  return /* @__PURE__ */ jsxs(HoverCard$1, { children: [
+    /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(HoverCardContent, { side, children })
+  ] });
+}
+
+export { HoverCard };

package/dist/components/Input.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+/**
+ * Input — closed wrapper over shadcn's <Input>.
+ *
+ * shadcn's Input accepts arbitrary `className`, which lets callers override any
+ * aspect of the field's appearance. This wrapper closes that hatch:
+ *   - `invalid` is the only expressible state variation; it activates the
+ *     design system's error ring via `aria-invalid` (which the base component
+ *     already styles) rather than an ad-hoc border-red class.
+ *   - there is NO `className` / `style` prop.
+ *   - standard behaviour props (type, placeholder, value, onChange, disabled,
+ *     id) all pass through unchanged.
+ *   - need a visual variant? Add a prop here — not a one-off className.
+ */
+export interface InputProps {
+    /** Activates the error ring. Prefer pairing with a <Label> and error text. */
+    invalid?: boolean;
+    type?: React.HTMLInputTypeAttribute;
+    placeholder?: string;
+    value?: string | number | readonly string[];
+    defaultValue?: string | number | readonly string[];
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    min?: string | number;
+    max?: string | number;
+    step?: string | number;
+}
+export declare function Input({ invalid, ...rest }: InputProps): React.JSX.Element;

package/dist/components/Input.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Input as Input$1 } from './ui/input.js';
+
+function Input({ invalid, ...rest }) {
+  return /* @__PURE__ */ jsx(Input$1, { "aria-invalid": invalid || void 0, ...rest });
+}
+
+export { Input };

package/dist/components/InputGroup.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+/**
+ * InputGroup — closed wrapper over shadcn's InputGroup family.
+ *
+ * shadcn's InputGroup requires manual composition of InputGroupAddon,
+ * InputGroupInput, etc., each accepting arbitrary `className`. This wrapper
+ * collapses that into a single component:
+ *   - `children` is the primary control (typically an HIYF <Input> or
+ *     any other input element).
+ *   - `prefix` renders an inline-start addon (icon, text, or any node).
+ *   - `suffix` renders an inline-end addon (icon, text, or any node).
+ *   - The addon elements use the primitive's `inline-start` / `inline-end`
+ *     alignment, the only sanctioned inline positions.
+ *   - there is NO `className` / `style` prop.
+ *   - need block-start / block-end addons or an internal button? Extend this
+ *     component with deliberate props — not one-off className overrides.
+ */
+type ControlProps = Omit<React.ComponentPropsWithRef<'input'>, 'className' | 'style' | 'prefix'>;
+export interface InputGroupProps extends ControlProps {
+    /** Optional leading addon rendered before the control (icon, text, …). */
+    prefix?: React.ReactNode;
+    /** Optional trailing addon rendered after the control (icon, text, …). */
+    suffix?: React.ReactNode;
+    /** Error state — drives the destructive ring on the whole group. */
+    invalid?: boolean;
+}
+export declare function InputGroup({ prefix, suffix, invalid, ...inputProps }: InputGroupProps): React.JSX.Element;
+export {};

package/dist/components/InputGroup.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { InputGroup as InputGroup$1, InputGroupAddon, InputGroupInput } from './ui/input-group.js';
+
+function InputGroup({ prefix, suffix, invalid, ...inputProps }) {
+  return /* @__PURE__ */ jsxs(InputGroup$1, { children: [
+    prefix && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: prefix }),
+    /* @__PURE__ */ jsx(InputGroupInput, { "aria-invalid": invalid || void 0, ...inputProps }),
+    suffix && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: suffix })
+  ] });
+}
+
+export { InputGroup };

package/dist/components/InputOTP.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/**
+ * InputOTP — closed wrapper over shadcn's InputOTP family.
+ *
+ * shadcn's InputOTP requires manual composition of InputOTPGroup and
+ * InputOTPSlot children, each accepting arbitrary `className`. This wrapper
+ * collapses the composition into a single component:
+ *   - `length` controls how many digit slots are rendered (default 6);
+ *     all slots live in a single group with no separator.
+ *   - `value` and `onChange` give full controlled-input support.
+ *   - there is NO `className` / `style` prop.
+ *   - need separators between slot groups? Extend this component with a
+ *     `groups` prop — a deliberate, reviewable change.
+ */
+export interface InputOTPProps {
+    /** Number of OTP character slots. Defaults to 6. */
+    length?: number;
+    /** Controlled value string. */
+    value?: string;
+    /** Called with the updated value string on each keystroke. */
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    /** Associates the hidden input with a form. */
+    name?: string;
+}
+export declare function InputOTP({ length, value, onChange, disabled, name, }: InputOTPProps): React.JSX.Element;

package/dist/components/InputOTP.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { InputOTP as InputOTP$1, InputOTPGroup, InputOTPSlot } from './ui/input-otp.js';
+
+function InputOTP({
+  length = 6,
+  value,
+  onChange,
+  disabled,
+  name
+}) {
+  return /* @__PURE__ */ jsx(
+    InputOTP$1,
+    {
+      maxLength: length,
+      value,
+      onChange,
+      disabled,
+      name,
+      children: /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i }, i)) })
+    }
+  );
+}
+
+export { InputOTP };

package/dist/components/Kbd.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/**
+ * Kbd — closed keyboard-shortcut wrapper over shadcn's Kbd primitive.
+ *
+ * shadcn's <Kbd> accepts arbitrary `className` and renders a single key. This
+ * wrapper closes that hatch and adds multi-key support:
+ *   - `keys` renders each string as its own <kbd> chip inside a KbdGroup,
+ *     which automatically spaces them with a gap.
+ *   - `children` can be used as an alternative to `keys` for a single raw key
+ *     or any React node (e.g. an SVG icon representing ⌘).
+ *   - When both are supplied `keys` takes precedence.
+ *   - there is NO `className` / `style` prop.
+ */
+export interface KbdProps {
+    /**
+     * Array of key labels to display. Each string becomes its own chip.
+     * Example: ['⌘', 'K'] renders ⌘ + K as two adjacent chips.
+     */
+    keys?: string[];
+    /**
+     * Alternative to `keys` — renders a single chip containing the given content.
+     * Ignored when `keys` is provided.
+     */
+    children?: React.ReactNode;
+}
+export declare function Kbd({ keys, children }: KbdProps): React.JSX.Element;