@jackbernnie/hiyf 0.1.0

package/dist/components/Kbd.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { KbdGroup, Kbd as Kbd$1 } from './ui/kbd.js';
+
+function Kbd({ keys, children }) {
+  if (keys && keys.length > 0) {
+    return /* @__PURE__ */ jsx(KbdGroup, { children: keys.map((key, i) => /* @__PURE__ */ jsx(Kbd$1, { children: key }, i)) });
+  }
+  return /* @__PURE__ */ jsx(Kbd$1, { children });
+}
+
+export { Kbd };

package/dist/components/Label.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+/**
+ * Label — closed wrapper over shadcn's <Label>.
+ *
+ * shadcn's Label accepts arbitrary `className`, leaving colour and weight up
+ * to callers. This wrapper closes that escape hatch:
+ *   - `muted` is the only expressible colour variant; it renders the label in
+ *     `text-muted-foreground` for secondary / helper contexts (e.g. "optional"
+ *     hints) rather than the default `text-foreground` / medium-weight style.
+ *   - there is NO `className` / `style` prop.
+ *   - need a danger / success tint? Add a `tone` prop here.
+ */
+export interface LabelProps {
+    /** For associating with a form control. */
+    htmlFor?: string;
+    children?: React.ReactNode;
+    /** Renders in muted colour for secondary / helper contexts. */
+    muted?: boolean;
+}
+export declare function Label({ htmlFor, children, muted }: LabelProps): React.JSX.Element;

package/dist/components/Label.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../lib/utils.js';
+import { Label as Label$1 } from './ui/label.js';
+
+function Label({ htmlFor, children, muted }) {
+  return /* @__PURE__ */ jsx(
+    Label$1,
+    {
+      htmlFor,
+      className: cn(muted && "text-muted-foreground font-normal"),
+      children
+    }
+  );
+}
+
+export { Label };

package/dist/components/Menubar.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+/**
+ * Menubar — closed wrapper over shadcn's Menubar primitive family.
+ *
+ * The raw Menubar accepts arbitrary children, className, and any nesting
+ * pattern. This wrapper closes the surface:
+ *   - `menus` is the only way to populate menus; no raw MenubarMenu /
+ *     MenubarItem composition needed from consumer code.
+ *   - Each menu has a `label` and an `items` array. Each item has a `label`,
+ *     optional `onSelect` callback, optional `shortcut` string displayed at
+ *     the right edge, and an optional `separatorBefore` rule.
+ *   - No `className` or `style` escape hatch on any public prop.
+ *   - Need sub-menus or radio groups? Extend the item model here.
+ */
+export interface MenubarItemDef {
+    /** Display text for the menu item. */
+    label: string;
+    /** Called when the item is selected. */
+    onSelect?: () => void;
+    /** Optional keyboard shortcut label displayed at the right of the item. */
+    shortcut?: string;
+    /** Render a separator rule immediately before this item. */
+    separatorBefore?: boolean;
+}
+export interface MenuDef {
+    /** Display text for the top-level menu trigger. */
+    label: string;
+    /** Ordered list of items inside this menu. */
+    items: MenubarItemDef[];
+}
+export interface MenubarProps {
+    /** Ordered list of top-level menus. */
+    menus: MenuDef[];
+}
+export declare function Menubar({ menus }: MenubarProps): React.JSX.Element;

package/dist/components/Menubar.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Menubar as Menubar$1, MenubarMenu, MenubarTrigger, MenubarContent, MenubarSeparator, MenubarItem, MenubarShortcut } from './ui/menubar.js';
+
+function Menubar({ menus }) {
+  return /* @__PURE__ */ jsx(Menubar$1, { children: menus.map((menu, menuIndex) => /* @__PURE__ */ jsxs(MenubarMenu, { children: [
+    /* @__PURE__ */ jsx(MenubarTrigger, { children: menu.label }),
+    /* @__PURE__ */ jsx(MenubarContent, { children: menu.items.map((item, itemIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      item.separatorBefore && /* @__PURE__ */ jsx(MenubarSeparator, {}),
+      /* @__PURE__ */ jsxs(MenubarItem, { onSelect: item.onSelect, children: [
+        item.label,
+        item.shortcut && /* @__PURE__ */ jsx(MenubarShortcut, { children: item.shortcut })
+      ] })
+    ] }, itemIndex)) })
+  ] }, menuIndex)) });
+}
+
+export { Menubar };

package/dist/components/NativeSelect.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/**
+ * NativeSelect — closed, options-driven wrapper over shadcn's NativeSelect.
+ *
+ * shadcn's NativeSelect accepts arbitrary `className` on both the wrapper and
+ * the option elements, and requires callers to compose NativeSelectOption
+ * children manually. This wrapper closes both escape hatches:
+ *   - `options` is the only way to populate items; no raw NativeSelectOption
+ *     imports needed (or possible) from consumer code.
+ *   - `size` maps to the primitive's two sanctioned heights ('sm'|'md').
+ *   - `invalid` activates the error ring via `aria-invalid`.
+ *   - there is NO `className` / `style` prop.
+ */
+export interface NativeSelectOption {
+    value: string;
+    label: string;
+}
+export interface NativeSelectProps {
+    options: NativeSelectOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    placeholder?: string;
+    /** Activates the error ring. Prefer pairing with a <Field> error. */
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Controls the trigger height. Defaults to 'md'. */
+    size?: 'sm' | 'md';
+    name?: string;
+    required?: boolean;
+    id?: string;
+}
+export declare function NativeSelect({ options, value, defaultValue, onChange, placeholder, invalid, disabled, size, name, required, id, }: NativeSelectProps): React.JSX.Element;

package/dist/components/NativeSelect.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { NativeSelect as NativeSelect$1, NativeSelectOption } from './ui/native-select.js';
+
+function NativeSelect({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  placeholder,
+  invalid,
+  disabled,
+  size = "md",
+  name,
+  required,
+  id
+}) {
+  return /* @__PURE__ */ jsxs(
+    NativeSelect$1,
+    {
+      size: size === "md" ? "default" : "sm",
+      value,
+      defaultValue,
+      onChange,
+      disabled,
+      "aria-invalid": invalid || void 0,
+      name,
+      required,
+      id,
+      children: [
+        placeholder && /* @__PURE__ */ jsx(NativeSelectOption, { value: "", disabled: true, children: placeholder }),
+        options.map((opt) => /* @__PURE__ */ jsx(NativeSelectOption, { value: opt.value, children: opt.label }, opt.value))
+      ]
+    }
+  );
+}
+
+export { NativeSelect };

package/dist/components/NavigationMenu.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+/**
+ * NavigationMenu — closed wrapper over shadcn's NavigationMenu primitives.
+ *
+ * The raw primitives are free-form composition building blocks that accept
+ * arbitrary className and unrestricted children. This wrapper closes the API:
+ *   - `items` is the single source of truth for top-level nav entries; each
+ *     item has a `label` and optionally an `href` (plain link) or `content`
+ *     (dropdown panel). When `content` is provided, the item renders as a
+ *     trigger + content panel; otherwise it renders as a plain link.
+ *   - No `className` or `style` escape hatch is exposed on any public prop.
+ *   - Need a new pattern (icon, badge, active state)? Add it to NavItem here.
+ */
+export interface NavItem {
+    /** Display text for the top-level navigation entry. */
+    label: string;
+    /**
+     * Optional href for plain link items.
+     * Used only when `content` is not provided.
+     */
+    href?: string;
+    /**
+     * Optional dropdown panel content.
+     * When present, the item renders as a trigger + floating content panel.
+     */
+    content?: React.ReactNode;
+}
+export interface NavigationMenuProps {
+    /** Ordered list of top-level navigation entries. */
+    items: NavItem[];
+}
+export declare function NavigationMenu({ items }: NavigationMenuProps): React.JSX.Element;

package/dist/components/NavigationMenu.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { NavigationMenu as NavigationMenu$1, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from './ui/navigation-menu.js';
+
+function NavigationMenu({ items }) {
+  return /* @__PURE__ */ jsx(NavigationMenu$1, { children: /* @__PURE__ */ jsx(NavigationMenuList, { children: items.map(
+    (item, index) => item.content ? /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
+      /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.label }),
+      /* @__PURE__ */ jsx(NavigationMenuContent, { children: item.content })
+    ] }, index) : /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenuLink, { href: item.href, children: item.label }) }, index)
+  ) }) });
+}
+
+export { NavigationMenu };

package/dist/components/Pagination.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/**
+ * Pagination — closed wrapper over shadcn's Pagination primitives.
+ *
+ * The raw parts accept arbitrary className, free-form hrefs, and any item
+ * arrangement. This wrapper closes that down into a fully computed,
+ * button-driven page control:
+ *   - `page`, `total`, and `onPageChange` are the only data contract; no
+ *     ad-hoc PaginationLink imports needed (or possible) from consumer code.
+ *   - `siblingCount` controls how many page numbers appear on each side of
+ *     the active page before an ellipsis is shown (default: 1).
+ *   - Page buttons fire `onPageChange`; no href routing is assumed.
+ *   - No `className` or `style` escape hatch on the public API.
+ */
+export interface PaginationProps {
+    /** Currently active page (1-indexed). */
+    page: number;
+    /** Total number of pages. */
+    total: number;
+    /** Called with the new page number when a page button is clicked. */
+    onPageChange: (page: number) => void;
+    /**
+     * Number of page number buttons to show on each side of the active page
+     * before an ellipsis is rendered. Defaults to 1.
+     */
+    siblingCount?: number;
+}
+export declare function Pagination({ page, total, onPageChange, siblingCount, }: PaginationProps): React.JSX.Element;

package/dist/components/Pagination.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Pagination as Pagination$1, PaginationContent, PaginationItem, PaginationPrevious, PaginationEllipsis, PaginationLink, PaginationNext } from './ui/pagination.js';
+
+function buildPageRange(page, total, siblingCount) {
+  const range = [];
+  for (let i = Math.max(2, page - siblingCount); i <= Math.min(total - 1, page + siblingCount); i++) {
+    range.push(i);
+  }
+  const showLeftEllipsis = range[0] > 2;
+  const showRightEllipsis = range[range.length - 1] < total - 1;
+  const pages = [1];
+  if (showLeftEllipsis) {
+    pages.push("ellipsis-start");
+  }
+  pages.push(...range);
+  if (showRightEllipsis) {
+    pages.push("ellipsis-end");
+  }
+  if (total > 1) {
+    pages.push(total);
+  }
+  return pages;
+}
+function Pagination({
+  page,
+  total,
+  onPageChange,
+  siblingCount = 1
+}) {
+  const pages = buildPageRange(page, total, siblingCount);
+  return /* @__PURE__ */ jsx(Pagination$1, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+    /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+      PaginationPrevious,
+      {
+        onClick: page > 1 ? () => onPageChange(page - 1) : void 0,
+        "aria-disabled": page <= 1,
+        style: page <= 1 ? { pointerEvents: "none", opacity: 0.5 } : void 0
+      }
+    ) }),
+    pages.map(
+      (p, index) => p === "ellipsis-start" || p === "ellipsis-end" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, p) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationLink,
+        {
+          isActive: p === page,
+          onClick: p !== page ? () => onPageChange(p) : void 0,
+          "aria-label": `Page ${p}`,
+          children: p
+        }
+      ) }, p)
+    ),
+    /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+      PaginationNext,
+      {
+        onClick: page < total ? () => onPageChange(page + 1) : void 0,
+        "aria-disabled": page >= total,
+        style: page >= total ? { pointerEvents: "none", opacity: 0.5 } : void 0
+      }
+    ) })
+  ] }) });
+}
+
+export { Pagination };

package/dist/components/Popover.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/**
+ * Popover — a closed convenience wrapper over the shadcn Popover primitives.
+ *
+ * The underlying PopoverContent accepts arbitrary `className` and leaves
+ * callers free to set any width, shadow, or positioning offset. This wrapper
+ * closes that:
+ *   - `side` and `align` are the only placement controls, constrained to the
+ *     radix enumeration — no raw pixel offsets.
+ *   - Width, padding, shadow, and background are fixed to the system's
+ *     popover token treatment; they cannot be overridden per-instance.
+ *   - No `className` or `style` escape hatch on any public prop.
+ */
+export interface PopoverProps {
+    /** Element that toggles the popover (e.g. a Button). */
+    trigger: React.ReactNode;
+    /** Popover panel content. */
+    children: React.ReactNode;
+    /** Preferred side relative to the trigger; defaults to 'bottom'. */
+    side?: "top" | "right" | "bottom" | "left";
+    /** Alignment along the side axis; defaults to 'center'. */
+    align?: "start" | "center" | "end";
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when the open state should change. */
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Popover({ trigger, children, side, align, open, onOpenChange, }: PopoverProps): React.JSX.Element;

package/dist/components/Popover.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Popover as Popover$1, PopoverTrigger, PopoverContent } from './ui/popover.js';
+
+function Popover({
+  trigger,
+  children,
+  side = "bottom",
+  align = "center",
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs(Popover$1, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverContent, { side, align, children })
+  ] });
+}
+
+export { Popover };

package/dist/components/Progress.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Progress — a closed wrapper over shadcn's Progress primitive.
+ *
+ * shadcn's <Progress> accepts arbitrary `className`, letting consumers paint
+ * the indicator any color on a whim. This wrapper closes it:
+ *   - `tone` names the indicator color by INTENT (neutral/success/danger).
+ *   - `value` is constrained to 0–100 (clamped internally).
+ *   - NO `className`/`style` escape hatch. Every progress bar on screen is
+ *     one of a finite, on-brand set of treatments.
+ *   - Need another tone? Add it here — a deliberate, reviewable DS change.
+ */
+declare const indicatorVariants: (props?: ({
+    tone?: "danger" | "success" | "neutral" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ProgressTone = NonNullable<VariantProps<typeof indicatorVariants>['tone']>;
+export interface ProgressProps {
+    /** Current value, 0–100 (clamped). */
+    value: number;
+    /** Named by intent, not appearance. */
+    tone?: ProgressTone;
+}
+export declare function Progress({ value, tone }: ProgressProps): React.JSX.Element;
+export {};

package/dist/components/Progress.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+const indicatorVariants = cva("size-full flex-1 transition-all", {
+  variants: {
+    tone: {
+      neutral: "bg-primary",
+      success: "bg-emerald-500",
+      danger: "bg-destructive"
+    }
+  },
+  defaultVariants: { tone: "neutral" }
+});
+function Progress({ value, tone = "neutral" }) {
+  const clamped = Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "progress",
+      role: "progressbar",
+      "aria-valuenow": clamped,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: "relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: indicatorVariants({ tone }),
+          style: { transform: `translateX(-${100 - clamped}%)` }
+        }
+      )
+    }
+  );
+}
+
+export { Progress };

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+/**
+ * RadioGroup / RadioGroupItem — closed wrappers over shadcn's radio primitives.
+ *
+ * shadcn's RadioGroup accepts an arbitrary `className` on both the root and
+ * each item, making it easy to accidentally break the shared spacing grid,
+ * indicator colour, or focus ring. These wrappers close both escape hatches:
+ *   - `orientation` controls the layout direction (vertical = stacked grid,
+ *     horizontal = flex row) — the only sanctioned layout variants.
+ *   - RadioGroupItem accepts `value`, `id`, and `children` (label text);
+ *     there is NO `className` on either the root or items.
+ *   - need a compact spacing variant? Add a `density` prop to RadioGroup here.
+ */
+export interface RadioGroupProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Controls layout direction. Defaults to 'vertical'. */
+    orientation?: 'horizontal' | 'vertical';
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    children?: React.ReactNode;
+}
+export declare function RadioGroup({ orientation, children, ...props }: RadioGroupProps): React.JSX.Element;
+export interface RadioGroupItemProps {
+    /** The value submitted when this item is selected. */
+    value: string;
+    /** For associating with a <Label htmlFor={id}>. */
+    id?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    required?: boolean;
+}
+export declare function RadioGroupItem({ value, id, disabled, required, children }: RadioGroupItemProps): React.JSX.Element;

package/dist/components/RadioGroup.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../lib/utils.js';
+import { RadioGroup as RadioGroup$1, RadioGroupItem as RadioGroupItem$1 } from './ui/radio-group.js';
+
+function RadioGroup({
+  orientation = "vertical",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroup$1,
+    {
+      className: cn(
+        orientation === "horizontal" ? "flex flex-row flex-wrap gap-4" : "grid gap-3"
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function RadioGroupItem({ value, id, disabled, required, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      RadioGroupItem$1,
+      {
+        value,
+        id,
+        disabled,
+        required
+      }
+    ),
+    children && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: id,
+        className: "text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        children
+      }
+    )
+  ] });
+}
+
+export { RadioGroup, RadioGroupItem };

package/dist/components/Resizable.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+/**
+ * Resizable — closed wrapper over shadcn's react-resizable-panels primitives.
+ *
+ * The raw primitives accept arbitrary className, unconstrained panel nesting,
+ * and manual handle placement. This wrapper closes the layout:
+ *   - `panels` is the ordered list of panel contents; handles are inserted
+ *     automatically between every adjacent pair of panels.
+ *   - `direction` is enumerated ('horizontal' | 'vertical'); default is
+ *     'horizontal'. Controls both panel arrangement and handle orientation.
+ *   - `defaultSizes` maps percentage sizes to panels by index. When omitted,
+ *     panels share space equally. Values should sum to 100.
+ *   - No `className` or `style` escape hatch is exposed.
+ *   - Need min/max constraints per panel? Add `minSize`/`maxSize` to a panel
+ *     descriptor shape here.
+ */
+export interface ResizableProps {
+    /** Ordered list of panel contents, one entry per resizable panel. */
+    panels: React.ReactNode[];
+    /**
+     * Layout direction for the panel group.
+     * @default 'horizontal'
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Initial percentage sizes for each panel, matching the `panels` array
+     * by index. Values should sum to 100. Omit for equal distribution.
+     */
+    defaultSizes?: number[];
+}
+export declare function Resizable({ panels, direction, defaultSizes, }: ResizableProps): React.JSX.Element;

package/dist/components/Resizable.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ResizablePanelGroup, ResizableHandle, ResizablePanel } from './ui/resizable.js';
+
+function Resizable({
+  panels,
+  direction = "horizontal",
+  defaultSizes
+}) {
+  return /* @__PURE__ */ jsx(ResizablePanelGroup, { orientation: direction, children: panels.map((panel, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    index > 0 && /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+    /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: defaultSizes?.[index], children: panel })
+  ] }, index)) });
+}
+
+export { Resizable };

package/dist/components/ScrollArea.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface ScrollAreaProps {
+    /** Enumerated max-height constraint. Defaults to 'md'. */
+    height?: 'sm' | 'md' | 'lg';
+    children: React.ReactNode;
+}
+/** Closed scroll area — no className/style. */
+export declare function ScrollArea({ height, children }: ScrollAreaProps): React.JSX.Element;

package/dist/components/ScrollArea.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { ScrollArea as ScrollArea$1 } from './ui/scroll-area.js';
+
+const HEIGHT_MAP = {
+  sm: "max-h-40",
+  md: "max-h-72",
+  lg: "max-h-[32rem]"
+};
+function ScrollArea({ height = "md", children }) {
+  return /* @__PURE__ */ jsx(ScrollArea$1, { className: HEIGHT_MAP[height], children });
+}
+
+export { ScrollArea };

package/dist/components/Select.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+/**
+ * Select — closed, convenience wrapper over shadcn's composable Select parts.
+ *
+ * shadcn's Select is a composition of SelectRoot / SelectTrigger / SelectContent /
+ * SelectItem — each accepting arbitrary `className`. This wrapper collapses the
+ * composition into a single component driven by a data `options` array:
+ *   - `options` is the only way to populate items; no child render props or
+ *     ad-hoc SelectItem imports needed (or possible) from consumer code.
+ *   - `size` maps to the trigger's two sanctioned heights (sm / md).
+ *   - `placeholder` sets the empty-state trigger label.
+ *   - there is NO `className` / `style` on the public API. The trigger border,
+ *     content shadow, item hover colour, and checked indicator are all fixed to
+ *     design-system token values.
+ *   - need an option group, separator, or destructive item? Extend `options` to
+ *     accept a richer discriminated-union type here — a deliberate, reviewable
+ *     change — rather than leaking the raw primitives.
+ */
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+export interface SelectProps {
+    options: SelectOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    /** Controls trigger height. Defaults to 'md'. */
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+}
+export declare function Select({ options, value, defaultValue, onValueChange, placeholder, size, disabled, required, name, }: SelectProps): React.JSX.Element;

package/dist/components/Select.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem } from './ui/select.js';
+
+function Select({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  size = "md",
+  disabled,
+  required,
+  name
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      required,
+      name,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { size: size === "md" ? "default" : "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+      ]
+    }
+  );
+}
+
+export { Select };