@jackbernnie/hiyf 0.1.0

package/dist/components/Breadcrumb.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+/**
+ * Breadcrumb — closed wrapper over shadcn's composable Breadcrumb parts.
+ *
+ * The raw parts accept arbitrary className and free-form children, letting
+ * callers produce ad-hoc crumb shapes. This wrapper closes that down by
+ * driving the trail from a typed `items` data model:
+ *   - `items` is the only way to populate crumbs; no ad-hoc BreadcrumbItem
+ *     imports needed (or possible) from consumer code.
+ *   - The last item, or any item with `current: true`, renders as a
+ *     non-interactive BreadcrumbPage; all others render as anchor links.
+ *   - Separators are inserted automatically between items.
+ *   - No `className` or `style` escape hatch on the public API.
+ */
+export interface BreadcrumbItemDef {
+    /** Display text for the crumb. */
+    label: string;
+    /**
+     * Href for the crumb link. Omit (or leave undefined) for the current page
+     * crumb — it will render as non-interactive text regardless of `current`.
+     */
+    href?: string;
+    /**
+     * Explicitly marks this crumb as the current page. The last item in the
+     * array is always treated as current even without this flag.
+     */
+    current?: boolean;
+}
+export interface BreadcrumbProps {
+    /** Ordered list of breadcrumb crumbs, left-to-right. */
+    items: BreadcrumbItemDef[];
+}
+export declare function Breadcrumb({ items }: BreadcrumbProps): React.JSX.Element;

package/dist/components/Breadcrumb.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Breadcrumb as Breadcrumb$1, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink, BreadcrumbSeparator } from './ui/breadcrumb.js';
+
+function Breadcrumb({ items }) {
+  return /* @__PURE__ */ jsx(Breadcrumb$1, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const isCurrent = isLast || item.current === true;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(BreadcrumbItem, { children: isCurrent ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { href: item.href, children: item.label }) }),
+      !isLast && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})
+    ] }, index);
+  }) }) });
+}
+
+export { Breadcrumb };

package/dist/components/Button.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+/**
+ * Button — closed wrapper over shadcn's <Button>.
+ *
+ * shadcn's Button accepts an arbitrary `variant` string (default / outline /
+ * secondary / ghost / destructive / link) and a raw `className`. This wrapper
+ * closes both escape hatches:
+ *   - `intent` is named by purpose (primary / secondary / outline / ghost /
+ *     danger), not by appearance. `primary` maps to the default filled style;
+ *     `danger` maps to the destructive treatment.
+ *   - `size` accepts only the three product-sanctioned options (sm / md / lg).
+ *   - there is NO `className` / `style` prop. Every button on screen is one of
+ *     a finite set of correct, on-brand treatments.
+ *   - need a new look? Add an `intent` here — a deliberate, reviewable change
+ *     to the design system — rather than a one-off class.
+ *
+ * Standard behaviour props (onClick, disabled, type, children) pass through.
+ */
+declare const intentToVariant: {
+    readonly primary: "default";
+    readonly secondary: "secondary";
+    readonly outline: "outline";
+    readonly ghost: "ghost";
+    readonly danger: "destructive";
+};
+declare const sizeToVariant: {
+    readonly sm: "sm";
+    readonly md: "default";
+    readonly lg: "lg";
+};
+export type ButtonIntent = keyof typeof intentToVariant;
+export type ButtonSize = keyof typeof sizeToVariant;
+type NativeButtonProps = Omit<React.ComponentPropsWithRef<'button'>, 'className' | 'style'>;
+export interface ButtonProps extends NativeButtonProps {
+    /** Named by purpose, not appearance. */
+    intent?: ButtonIntent;
+    size?: ButtonSize;
+}
+export declare function Button({ intent, size, children, ...rest }: ButtonProps): React.JSX.Element;
+export {};

package/dist/components/Button.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button as Button$1 } from './ui/button.js';
+
+const intentToVariant = {
+  primary: "default",
+  secondary: "secondary",
+  outline: "outline",
+  ghost: "ghost",
+  danger: "destructive"
+};
+const sizeToVariant = {
+  sm: "sm",
+  md: "default",
+  lg: "lg"
+};
+function Button({
+  intent = "primary",
+  size = "md",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      variant: intentToVariant[intent],
+      size: sizeToVariant[size],
+      ...rest,
+      children
+    }
+  );
+}
+
+export { Button };

package/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * ButtonGroup — closed wrapper over shadcn's <ButtonGroup>.
+ *
+ * shadcn's ButtonGroup accepts arbitrary `className` and leaves orientation
+ * as an open-ended string. This wrapper closes those escape hatches:
+ *   - `orientation` accepts only the two sanctioned directions
+ *     ('horizontal'|'vertical'); defaults to 'horizontal'.
+ *   - `children` should be HIYF <Button> elements (or other HIYF controls);
+ *     the group stitches them into a joined button strip automatically via CSS.
+ *   - there is NO `className` / `style` prop.
+ */
+export interface ButtonGroupProps {
+    /** Layout direction of the grouped buttons. Defaults to 'horizontal'. */
+    orientation?: 'horizontal' | 'vertical';
+    children: React.ReactNode;
+}
+export declare function ButtonGroup({ orientation, children }: ButtonGroupProps): React.JSX.Element;

package/dist/components/ButtonGroup.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { ButtonGroup as ButtonGroup$1 } from './ui/button-group.js';
+
+function ButtonGroup({ orientation = "horizontal", children }) {
+  return /* @__PURE__ */ jsx(ButtonGroup$1, { orientation, children });
+}
+
+export { ButtonGroup };

package/dist/components/Card.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+/**
+ * Card — a closed composable wrapper over shadcn's Card primitive family.
+ *
+ * shadcn's Card passes `className` through to every sub-part, leaving the
+ * door open to arbitrary one-off styles. This wrapper closes the root:
+ *   - `padding` is enumerated ('sm'|'md'|'lg') via the ui's built-in
+ *     `data-size` mechanism — the only expressible spacing options are
+ *     the ones the design system sanctions.
+ *   - Each sub-part (CardHeader, CardTitle, …) is a thin children-only
+ *     re-export with NO `className` passthrough.
+ *   - Need a new padding step? Add a variant here.
+ *
+ * Composable usage:
+ *   <Card padding="md">
+ *     <CardHeader><CardTitle>…</CardTitle></CardHeader>
+ *     <CardContent>…</CardContent>
+ *   </Card>
+ */
+export interface CardProps {
+    /** Enumerated internal spacing. Maps to the ui primitive's `size` prop. */
+    padding?: 'sm' | 'md' | 'lg';
+    children: React.ReactNode;
+}
+/** Closed card root — no className/style. */
+export declare function Card({ padding, children }: CardProps): React.JSX.Element;
+/** Closed card header — children only, no className. */
+export declare function CardHeader({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Closed card title — children only, no className. */
+export declare function CardTitle({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Closed card description — children only, no className. */
+export declare function CardDescription({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Closed card content area — children only, no className. */
+export declare function CardContent({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Closed card footer — children only, no className. */
+export declare function CardFooter({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/Card.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { Card as Card$1, CardContent as CardContent$1, CardDescription as CardDescription$1, CardFooter as CardFooter$1, CardHeader as CardHeader$1, CardTitle as CardTitle$1 } from './ui/card.js';
+
+function Card({ padding = "md", children }) {
+  const size = padding === "sm" ? "sm" : "default";
+  return /* @__PURE__ */ jsx(Card$1, { size, children });
+}
+function CardHeader({ children }) {
+  return /* @__PURE__ */ jsx(CardHeader$1, { children });
+}
+function CardTitle({ children }) {
+  return /* @__PURE__ */ jsx(CardTitle$1, { children });
+}
+function CardDescription({ children }) {
+  return /* @__PURE__ */ jsx(CardDescription$1, { children });
+}
+function CardContent({ children }) {
+  return /* @__PURE__ */ jsx(CardContent$1, { children });
+}
+function CardFooter({ children }) {
+  return /* @__PURE__ */ jsx(CardFooter$1, { children });
+}
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/Carousel.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+/**
+ * Carousel — a closed wrapper over shadcn's Carousel primitive family.
+ *
+ * shadcn's Carousel exposes a fully composable primitive set where consumers
+ * manually assemble CarouselContent, CarouselItem, CarouselPrevious, and
+ * CarouselNext, passing arbitrary className to each. This wrapper closes it:
+ *   - `items` is an array of React nodes; the carousel structure (content,
+ *     items, prev/next controls) is composed internally.
+ *   - `orientation` is enumerated ('horizontal'|'vertical') — no raw Embla
+ *     options passthrough.
+ *   - NO `className`/`style` escape hatch. Every carousel on screen is one
+ *     of two correct orientations with consistent item sizing and controls.
+ *   - Need custom item sizing or loop behavior? Add enumerated props here.
+ */
+export interface CarouselProps {
+    /** Slide contents. Each element becomes one carousel slide. */
+    items: React.ReactNode[];
+    /**
+     * Scroll axis.
+     * - 'horizontal' → slides scroll left/right (default)
+     * - 'vertical'   → slides scroll up/down
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+/** Closed carousel — no className/style. */
+export declare function Carousel({ items, orientation }: CarouselProps): React.JSX.Element;

package/dist/components/Carousel.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Carousel as Carousel$1, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from './ui/carousel.js';
+
+function Carousel({ items, orientation = "horizontal" }) {
+  return /* @__PURE__ */ jsxs(Carousel$1, { orientation, children: [
+    /* @__PURE__ */ jsx(CarouselContent, { children: items.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { children: item }, index)) }),
+    /* @__PURE__ */ jsx(CarouselPrevious, {}),
+    /* @__PURE__ */ jsx(CarouselNext, {})
+  ] });
+}
+
+export { Carousel };

package/dist/components/Chart.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface ChartProps {
+    /** Chart rendering type. */
+    type: "line" | "bar" | "area";
+    /** Array of row objects; each key corresponds to `index` or a category key. */
+    data: Array<Record<string, string | number>>;
+    /** The key in each data row used as the x-axis label. */
+    index: string;
+    /** The numeric series keys to plot; each becomes one Line/Bar/Area. */
+    categories: string[];
+    /**
+     * Chart height bucket.
+     * @default 'md'
+     */
+    height?: "sm" | "md" | "lg";
+}
+export declare function Chart({ type, data, index, categories, height, }: ChartProps): React.JSX.Element;

package/dist/components/Chart.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LineChart, Line, BarChart, Bar, AreaChart, Area, CartesianGrid, XAxis } from 'recharts';
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from './ui/chart.js';
+
+const CHART_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+];
+const HEIGHT_MAP = {
+  sm: 200,
+  md: 320,
+  lg: 480
+};
+function Chart({
+  type,
+  data,
+  index,
+  categories,
+  height = "md"
+}) {
+  const config = Object.fromEntries(
+    categories.map((cat, i) => [
+      cat,
+      {
+        label: cat,
+        color: CHART_COLORS[i % CHART_COLORS.length]
+      }
+    ])
+  );
+  const pixelHeight = HEIGHT_MAP[height];
+  const commonProps = { data };
+  const grid = /* @__PURE__ */ jsx(CartesianGrid, { vertical: false });
+  const xAxis = /* @__PURE__ */ jsx(XAxis, { dataKey: index, tickLine: false, axisLine: false });
+  const tooltip = /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) });
+  let chart;
+  if (type === "line") {
+    chart = /* @__PURE__ */ jsxs(LineChart, { ...commonProps, children: [
+      grid,
+      xAxis,
+      tooltip,
+      categories.map((cat) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: "monotone",
+          dataKey: cat,
+          stroke: `var(--color-${cat})`,
+          strokeWidth: 2,
+          dot: false
+        },
+        cat
+      ))
+    ] });
+  } else if (type === "bar") {
+    chart = /* @__PURE__ */ jsxs(BarChart, { ...commonProps, children: [
+      grid,
+      xAxis,
+      tooltip,
+      categories.map((cat) => /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: cat,
+          fill: `var(--color-${cat})`,
+          radius: [4, 4, 0, 0]
+        },
+        cat
+      ))
+    ] });
+  } else {
+    chart = /* @__PURE__ */ jsxs(AreaChart, { ...commonProps, children: [
+      grid,
+      xAxis,
+      tooltip,
+      categories.map((cat) => /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: "monotone",
+          dataKey: cat,
+          stroke: `var(--color-${cat})`,
+          fill: `var(--color-${cat})`,
+          fillOpacity: 0.2,
+          strokeWidth: 2
+        },
+        cat
+      ))
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { style: { height: pixelHeight, width: "100%" }, children: /* @__PURE__ */ jsx(ChartContainer, { config, className: "aspect-auto h-full w-full", children: chart }) });
+}
+
+export { Chart };

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/**
+ * Checkbox — closed wrapper over shadcn's <Checkbox>.
+ *
+ * shadcn's Checkbox forwards an arbitrary `className` to Radix's root element,
+ * making it trivial to break the on-brand size, border-radius, or checked
+ * colour. This wrapper closes that hatch completely:
+ *   - the only expressible props are the behavioural ones: checked state,
+ *     change handler, disabled flag, and DOM id.
+ *   - there is NO `className` / `style` prop. Every checkbox on screen is the
+ *     single correct, on-brand treatment.
+ *   - need a larger variant? Add a `size` prop here — a deliberate, reviewable
+ *     change — rather than a one-off class.
+ */
+export interface CheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+    disabled?: boolean;
+    /** For associating with a <Label htmlFor={id}>. */
+    id?: string;
+    name?: string;
+    value?: string;
+    required?: boolean;
+}
+export declare function Checkbox({ ...props }: CheckboxProps): React.JSX.Element;

package/dist/components/Checkbox.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Checkbox as Checkbox$1 } from './ui/checkbox.js';
+
+function Checkbox({ ...props }) {
+  return /* @__PURE__ */ jsx(Checkbox$1, { ...props });
+}
+
+export { Checkbox };

package/dist/components/Collapsible.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * Collapsible — closed wrapper over shadcn's Collapsible primitives.
+ *
+ * The raw parts compose freely with arbitrary className and children.
+ * This wrapper closes that down:
+ *   - `trigger` is the clickable element that toggles visibility; it is
+ *     rendered inside the Radix trigger with `asChild` so any interactive
+ *     element (button, text, icon row) works without extra wrapping.
+ *   - `children` is the hidden/shown content.
+ *   - Controlled and uncontrolled modes are both supported via `open` /
+ *     `onOpenChange` / `defaultOpen`, matching the Radix root contract.
+ *   - No `className` or `style` escape hatch on the public API.
+ */
+export interface CollapsibleProps {
+    /** Element that toggles the panel open/closed. */
+    trigger: React.ReactNode;
+    /** Content shown when the panel is open. */
+    children: React.ReactNode;
+    /** Whether the panel is open on first render (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when the open state should change (controlled mode). */
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Collapsible({ trigger, children, defaultOpen, open, onOpenChange, }: CollapsibleProps): React.JSX.Element;

package/dist/components/Collapsible.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Collapsible as Collapsible$1, CollapsibleTrigger, CollapsibleContent } from './ui/collapsible.js';
+
+function Collapsible({
+  trigger,
+  children,
+  defaultOpen,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs(
+    Collapsible$1,
+    {
+      defaultOpen,
+      open,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children })
+      ]
+    }
+  );
+}
+
+export { Collapsible };

package/dist/components/Combobox.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+/**
+ * Combobox — closed, searchable select wrapper over the ui/combobox primitives.
+ *
+ * ui/combobox composes @base-ui/react's Combobox with styled InputGroup chrome.
+ * The raw parts accept arbitrary className and free-form children. This wrapper
+ * closes that down into a single searchable-select surface:
+ *   - `options` is the only way to populate items (value + label pairs).
+ *   - Controlled and uncontrolled value modes are both supported.
+ *   - `placeholder` / `emptyText` are the only copy customisation points.
+ *   - The trigger input doubles as the search field (base-ui architecture):
+ *     typing filters options live. `searchPlaceholder` maps to the same input.
+ *   - No `className` or `style` escape hatch on the public API.
+ */
+export interface ComboboxOption {
+    value: string;
+    label: string;
+}
+export interface ComboboxProps {
+    /** Flat list of selectable options. */
+    options: ComboboxOption[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Called when the selected value changes. */
+    onValueChange?: (value: string) => void;
+    /** Placeholder shown in the input/trigger (also acts as the search hint). */
+    placeholder?: string;
+    /**
+     * Accepted for API symmetry with Select; maps to `placeholder` on the combo
+     * input since the trigger and search field are the same element in base-ui.
+     */
+    searchPlaceholder?: string;
+    /** Text shown when no options match the current search query. */
+    emptyText?: string;
+}
+export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, }: ComboboxProps): React.JSX.Element;

package/dist/components/Combobox.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Combobox as Combobox$1 } from '@base-ui/react';
+import { ComboboxInput, ComboboxContent, ComboboxList, ComboboxEmpty, ComboboxItem } from './ui/combobox.js';
+
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Search\u2026",
+  searchPlaceholder,
+  emptyText = "No results found."
+}) {
+  const handleValueChange = React.useCallback(
+    (val) => {
+      if (val != null) onValueChange?.(val);
+    },
+    [onValueChange]
+  );
+  const inputPlaceholder = searchPlaceholder ?? placeholder;
+  return /* @__PURE__ */ jsxs(
+    Combobox$1.Root,
+    {
+      value: value ?? null,
+      onValueChange: onValueChange ? handleValueChange : void 0,
+      children: [
+        /* @__PURE__ */ jsx(ComboboxInput, { placeholder: inputPlaceholder, showTrigger: true, showClear: false }),
+        /* @__PURE__ */ jsx(ComboboxContent, { children: /* @__PURE__ */ jsxs(ComboboxList, { children: [
+          /* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyText }),
+          options.map((opt) => (
+            // ComboboxItem from ui/combobox already includes the ItemIndicator.
+            /* @__PURE__ */ jsx(ComboboxItem, { value: opt.value, children: opt.label }, opt.value)
+          ))
+        ] }) })
+      ]
+    }
+  );
+}
+
+export { Combobox };

package/dist/components/Command.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+/**
+ * Command — closed command-palette wrapper over the shadcn Command primitives.
+ *
+ * The raw primitives compose freely with arbitrary className, custom item
+ * shapes, and ad-hoc group arrangements. This wrapper closes that down by
+ * driving the palette entirely from a typed `groups` data model:
+ *   - `groups` is the only way to populate items; no ad-hoc CommandGroup /
+ *     CommandItem imports needed (or possible) from consumer code.
+ *   - Each item supports an optional `shortcut` string rendered in the
+ *     design-system's CommandShortcut treatment.
+ *   - `placeholder` customises the search input hint text.
+ *   - CommandEmpty is always present; its copy is not yet configurable —
+ *     add an `emptyText` prop here when that becomes a product need.
+ *   - No `className` or `style` escape hatch on the public API.
+ */
+export interface CommandItemDef {
+    /** Display label for the command item. */
+    label: string;
+    /** Called when the item is selected via click or keyboard. */
+    onSelect?: () => void;
+    /** Optional keyboard shortcut label (e.g. "⌘K"). Rendered inline. */
+    shortcut?: string;
+}
+export interface CommandGroup {
+    /** Optional section heading rendered above the group's items. */
+    heading?: string;
+    /** Ordered list of items in this group. */
+    items: CommandItemDef[];
+}
+export interface CommandProps {
+    /** Ordered list of command groups. A group without a heading is unsectioned. */
+    groups: CommandGroup[];
+    /** Placeholder text in the search input. Defaults to 'Search commands…'. */
+    placeholder?: string;
+}
+export declare function Command({ groups, placeholder, }: CommandProps): React.JSX.Element;

package/dist/components/Command.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Command as Command$1, CommandInput, CommandList, CommandEmpty, CommandSeparator, CommandGroup, CommandItem, CommandShortcut } from './ui/command.js';
+
+function Command({
+  groups,
+  placeholder = "Search commands\u2026"
+}) {
+  return /* @__PURE__ */ jsxs(Command$1, { children: [
+    /* @__PURE__ */ jsx(CommandInput, { placeholder }),
+    /* @__PURE__ */ jsxs(CommandList, { children: [
+      /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+      groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        groupIndex > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
+        /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: group.items.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            onSelect: item.onSelect,
+            children: [
+              item.label,
+              item.shortcut && /* @__PURE__ */ jsx(CommandShortcut, { children: item.shortcut })
+            ]
+          },
+          itemIndex
+        )) })
+      ] }, groupIndex))
+    ] })
+  ] });
+}
+
+export { Command };

package/dist/components/ContextMenu.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+/**
+ * ContextMenu — a closed convenience wrapper over the shadcn ContextMenu primitives.
+ *
+ * The raw primitives are composition primitives that accept arbitrary className,
+ * free-form children, and any nesting pattern. This wrapper closes that by
+ * driving the menu from a typed item model — mirroring DropdownMenu.tsx exactly:
+ *   - `items` is an array of plain data objects with `label`, `onSelect`,
+ *     `tone`, and `separatorBefore`; no JSX, no className.
+ *   - `tone: 'danger'` maps to `variant="destructive"` so callers express
+ *     intent, not appearance.
+ *   - `trigger` is the right-click target area.
+ *   - No `className` or `style` escape hatch on any public prop.
+ */
+export interface ContextMenuItemDef {
+    /** 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 ContextMenuProps {
+    /** Element wrapping the right-clickable area. */
+    trigger: React.ReactNode;
+    /** Ordered list of menu items. */
+    items: ContextMenuItemDef[];
+}
+export declare function ContextMenu({ trigger, items }: ContextMenuProps): React.JSX.Element;