@boostdev/design-system-components 0.1.2 → 0.1.3

package/dist/client.cjs

@@ -0,0 +1,2274 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client.ts
+var client_exports = {};
+__export(client_exports, {
+  Accordion: () => Accordion,
+  Alert: () => Alert,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  Breadcrumb: () => Breadcrumb,
+  Button: () => Button,
+  ButtonGroup: () => ButtonGroup,
+  Calendar: () => Calendar,
+  Card: () => Card,
+  Carousel: () => Carousel,
+  Checkbox: () => Checkbox,
+  Combobox: () => Combobox,
+  Command: () => Command,
+  DescriptionList: () => DescriptionList,
+  Dialog: () => Dialog,
+  Drawer: () => Drawer,
+  DropdownMenu: () => DropdownMenu,
+  FileInput: () => FileInput,
+  FormInput: () => FormInput,
+  IconWrapper: () => IconWrapper,
+  Link: () => Link,
+  Loading: () => Loading,
+  NotificationBanner: () => NotificationBanner,
+  NumberInput: () => NumberInput,
+  Pagination: () => Pagination,
+  Popover: () => Popover,
+  Progress: () => Progress,
+  ProgressCircle: () => ProgressCircle,
+  Radio: () => Radio,
+  Rating: () => Rating,
+  SectionHeader: () => SectionHeader,
+  Select: () => Select,
+  Separator: () => Separator,
+  Skeleton: () => Skeleton,
+  SkipLink: () => SkipLink,
+  Slider: () => Slider,
+  Switch: () => Switch,
+  Table: () => Table,
+  Tabs: () => Tabs,
+  Textarea: () => Textarea,
+  ToastProvider: () => ToastProvider,
+  Tooltip: () => Tooltip,
+  Typography: () => Typography,
+  cn: () => import_design_system_foundation44.cn,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(client_exports);
+
+// src/components/ui/Accordion/Accordion.tsx
+var import_react = require("react");
+
+// src/components/ui/Accordion/Accordion.module.css
+var Accordion_default = {};
+
+// src/components/ui/Accordion/Accordion.tsx
+var import_design_system_foundation = require("@boostdev/design-system-foundation");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Accordion({
+  items,
+  allowMultiple = false,
+  defaultOpen = [],
+  className
+}) {
+  const baseId = (0, import_react.useId)();
+  const [openIds, setOpenIds] = (0, import_react.useState)(defaultOpen);
+  const toggle = (id) => {
+    setOpenIds((prev) => {
+      const isOpen = prev.includes(id);
+      if (isOpen) return prev.filter((i) => i !== id);
+      return allowMultiple ? [...prev, id] : [id];
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_design_system_foundation.cn)(Accordion_default.accordion, className), children: items.map((item) => {
+    const isOpen = openIds.includes(item.id);
+    const triggerId = `${baseId}-trigger-${item.id}`;
+    const panelId = `${baseId}-panel-${item.id}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_design_system_foundation.cn)(Accordion_default.item, isOpen ? Accordion_default["--open"] : void 0), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: Accordion_default.heading, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          disabled: item.disabled,
+          className: Accordion_default.trigger,
+          onClick: () => toggle(item.id),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: Accordion_default.triggerLabel, children: item.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: Accordion_default.chevron,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" })
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          hidden: !isOpen,
+          className: Accordion_default.panel,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: Accordion_default.panelContent, children: item.content })
+        }
+      )
+    ] }, item.id);
+  }) });
+}
+
+// src/components/ui/Alert/Alert.module.css
+var Alert_default = {};
+
+// src/components/ui/Alert/Alert.tsx
+var import_design_system_foundation2 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Alert({
+  variant = "info",
+  icon,
+  title,
+  children,
+  onDismiss,
+  className
+}) {
+  const isUrgent = variant === "error" || variant === "warning";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      role: isUrgent ? "alert" : "status",
+      "aria-live": isUrgent ? "assertive" : "polite",
+      "aria-atomic": "true",
+      className: (0, import_design_system_foundation2.cn)(Alert_default.alert, Alert_default[`--variant_${variant}`], className),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: Alert_default.icon, "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: Alert_default.content, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { className: Alert_default.title, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: Alert_default.body, children })
+        ] }),
+        onDismiss && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: Alert_default.dismiss,
+            onClick: onDismiss,
+            "aria-label": "Dismiss alert",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui/Avatar/Avatar.module.css
+var Avatar_default = {};
+
+// src/components/ui/Avatar/Avatar.tsx
+var import_design_system_foundation3 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function getInitials(name) {
+  return name.split(" ").filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase()).join("");
+}
+function Avatar({ src, alt, name, size = "medium", className }) {
+  const sizeClass = Avatar_default[`--size_${size}`];
+  if (src) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_design_system_foundation3.cn)(Avatar_default.avatar, sizeClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, alt: alt ?? name ?? "", className: Avatar_default.image }) });
+  }
+  const initials = name ? getInitials(name) : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      role: "img",
+      "aria-label": name ?? "User avatar",
+      className: (0, import_design_system_foundation3.cn)(Avatar_default.avatar, Avatar_default["--fallback"], sizeClass, className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Avatar_default.initials, "aria-hidden": "true", children: initials })
+    }
+  );
+}
+
+// src/components/ui/Badge/Badge.module.css
+var Badge_default = {};
+
+// src/components/ui/Badge/Badge.tsx
+var import_design_system_foundation4 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Badge({ children, variant = "primary", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_design_system_foundation4.cn)(Badge_default.badge, Badge_default[`--variant_${variant}`], className), children });
+}
+
+// src/components/ui/Breadcrumb/Breadcrumb.module.css
+var Breadcrumb_default = {};
+
+// src/components/ui/Breadcrumb/Breadcrumb.tsx
+var import_design_system_foundation5 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Breadcrumb({ items, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { "aria-label": "Breadcrumb", className: (0, import_design_system_foundation5.cn)(Breadcrumb_default.breadcrumb, className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ol", { className: Breadcrumb_default.list, children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: Breadcrumb_default.item, children: isLast ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-current": "page", className: Breadcrumb_default.current, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: item.href, className: Breadcrumb_default.link, children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: "\u203A" })
+    ] }) }, item.label);
+  }) }) });
+}
+
+// src/components/ui/Calendar/Calendar.tsx
+var import_react2 = require("react");
+
+// src/components/ui/Calendar/Calendar.module.css
+var Calendar_default = {};
+
+// src/components/ui/Calendar/Calendar.tsx
+var import_design_system_foundation6 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isOutOfRange(date, min, max) {
+  if (min && date < min) return true;
+  if (max && date > max) return true;
+  return false;
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function Calendar({ value, defaultValue, min, max, onChange, className }) {
+  const today = /* @__PURE__ */ new Date();
+  const controlled = value !== void 0;
+  const [internal, setInternal] = (0, import_react2.useState)(defaultValue);
+  const selected = controlled ? value : internal;
+  const [viewYear, setViewYear] = (0, import_react2.useState)(selected?.getFullYear() ?? today.getFullYear());
+  const [viewMonth, setViewMonth] = (0, import_react2.useState)(selected?.getMonth() ?? today.getMonth());
+  const [focusedDay, setFocusedDay] = (0, import_react2.useState)();
+  const titleId = (0, import_react2.useId)();
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth);
+  const firstDay = getFirstDayOfMonth(viewYear, viewMonth);
+  const navigate = (delta) => {
+    const d = new Date(viewYear, viewMonth + delta, 1);
+    setViewYear(d.getFullYear());
+    setViewMonth(d.getMonth());
+    setFocusedDay(void 0);
+  };
+  const selectDay = (day) => {
+    const date = new Date(viewYear, viewMonth, day);
+    if (isOutOfRange(date, min, max)) return;
+    if (!controlled) setInternal(date);
+    onChange?.(date);
+  };
+  const handleKeyDown = (e, day) => {
+    const map = {
+      ArrowRight: 1,
+      ArrowLeft: -1,
+      ArrowDown: 7,
+      ArrowUp: -7
+    };
+    if (e.key in map) {
+      e.preventDefault();
+      const current = new Date(viewYear, viewMonth, day);
+      const next = new Date(current);
+      next.setDate(next.getDate() + map[e.key]);
+      setViewYear(next.getFullYear());
+      setViewMonth(next.getMonth());
+      setFocusedDay(next.getDate());
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setFocusedDay(1);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setFocusedDay(daysInMonth);
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      selectDay(day);
+    }
+  };
+  const cells = [
+    ...Array.from({ length: firstDay }, () => null),
+    ...Array.from({ length: daysInMonth }, (_, i) => ({ day: i + 1 }))
+  ];
+  while (cells.length % 7 !== 0) cells.push(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_design_system_foundation6.cn)(Calendar_default.calendar, className), role: "group", "aria-labelledby": titleId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: Calendar_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          className: Calendar_default.navBtn,
+          "aria-label": "Previous month",
+          onClick: () => navigate(-1),
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { id: titleId, className: Calendar_default.monthYear, "aria-live": "polite", children: [
+        MONTHS[viewMonth],
+        " ",
+        viewYear
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          className: Calendar_default.navBtn,
+          "aria-label": "Next month",
+          onClick: () => navigate(1),
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "table",
+      {
+        className: Calendar_default.grid,
+        role: "grid",
+        "aria-labelledby": titleId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: DAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("th", { scope: "col", abbr: d, className: Calendar_default.weekday, children: d }, d)) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tbody", { children: Array.from({ length: cells.length / 7 }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: cells.slice(row * 7, row * 7 + 7).map((cell, col) => {
+            if (!cell) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: Calendar_default.empty, "aria-hidden": "true" }, col);
+            const date = new Date(viewYear, viewMonth, cell.day);
+            const isSelected = selected ? isSameDay(date, selected) : false;
+            const isToday = isSameDay(date, today);
+            const disabled = isOutOfRange(date, min, max);
+            const isFocused = focusedDay === cell.day;
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                className: (0, import_design_system_foundation6.cn)(
+                  Calendar_default.day,
+                  isSelected && Calendar_default.selected,
+                  isToday && !isSelected && Calendar_default.today,
+                  disabled && Calendar_default.disabled
+                ),
+                "aria-label": date.toLocaleDateString("en", { month: "long", day: "numeric", year: "numeric" }),
+                "aria-pressed": isSelected,
+                "aria-current": isToday ? "date" : void 0,
+                "aria-disabled": disabled,
+                disabled,
+                tabIndex: isFocused || !focusedDay && isSelected || !focusedDay && !selected && isToday ? 0 : -1,
+                onClick: () => selectDay(cell.day),
+                onKeyDown: (e) => handleKeyDown(e, cell.day),
+                children: cell.day
+              }
+            ) }, col);
+          }) }, row)) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Carousel/Carousel.tsx
+var import_react3 = require("react");
+
+// src/components/ui/Carousel/Carousel.module.css
+var Carousel_default = {};
+
+// src/components/ui/Carousel/Carousel.tsx
+var import_design_system_foundation7 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Carousel({ items, label, className }) {
+  const trackRef = (0, import_react3.useRef)(null);
+  const listId = (0, import_react3.useId)();
+  const scroll = (direction) => {
+    if (!trackRef.current) return;
+    const { scrollLeft, clientWidth } = trackRef.current;
+    trackRef.current.scrollTo({
+      left: scrollLeft + (direction === "next" ? clientWidth : -clientWidth),
+      behavior: "smooth"
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { "aria-label": label, className: (0, import_design_system_foundation7.cn)(Carousel_default.carousel, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        className: (0, import_design_system_foundation7.cn)(Carousel_default.navBtn, Carousel_default["--prev"]),
+        "aria-label": "Previous",
+        "aria-controls": listId,
+        onClick: () => scroll("prev"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ref: trackRef,
+        id: listId,
+        role: "list",
+        className: Carousel_default.track,
+        children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { role: "listitem", className: Carousel_default.slide, children: item }, i))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        className: (0, import_design_system_foundation7.cn)(Carousel_default.navBtn, Carousel_default["--next"]),
+        "aria-label": "Next",
+        "aria-controls": listId,
+        onClick: () => scroll("next"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+      }
+    )
+  ] });
+}
+
+// src/components/ui/DescriptionList/DescriptionList.module.css
+var DescriptionList_default = {};
+
+// src/components/ui/DescriptionList/DescriptionList.tsx
+var import_design_system_foundation8 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function DescriptionList({ items, layout = "stacked", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("dl", { className: (0, import_design_system_foundation8.cn)(DescriptionList_default.list, DescriptionList_default[`--layout_${layout}`], className), children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: DescriptionList_default.group, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("dt", { className: DescriptionList_default.term, children: item.term }),
+    Array.isArray(item.details) ? item.details.map((d, j) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("dd", { className: DescriptionList_default.details, children: d }, j)) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("dd", { className: DescriptionList_default.details, children: item.details })
+  ] }, i)) });
+}
+
+// src/components/ui/Link/Link.module.css
+var Link_default = {};
+
+// src/components/ui/Link/Link.tsx
+var import_design_system_foundation9 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Link({
+  as,
+  children,
+  variant = "default",
+  external = false,
+  className,
+  ...props
+}) {
+  const Component = as ?? "a";
+  const externalProps = external ? { target: "_blank", rel: "noreferrer noopener" } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    Component,
+    {
+      className: (0, import_design_system_foundation9.cn)(Link_default.link, Link_default[`--variant_${variant}`], className),
+      ...externalProps,
+      ...props,
+      children: [
+        children,
+        external && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: Link_default.externalLabel, children: " (opens in new tab)" })
+      ]
+    }
+  );
+}
+
+// src/components/ui/Loading/Loading.module.css
+var Loading_default = {};
+
+// src/components/ui/Loading/Loading.tsx
+var import_design_system_foundation10 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Loading({ size = "medium", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_design_system_foundation10.cn)(Loading_default.loading, Loading_default[`--size_${size}`], className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: Loading_default.spinner, role: "status", "aria-label": "Loading" }) });
+}
+
+// src/components/ui/NotificationBanner/NotificationBanner.module.css
+var NotificationBanner_default = {};
+
+// src/components/ui/NotificationBanner/NotificationBanner.tsx
+var import_design_system_foundation11 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function NotificationBanner({
+  variant = "info",
+  children,
+  action,
+  onDismiss,
+  className
+}) {
+  const isUrgent = variant === "error" || variant === "warning";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      role: isUrgent ? "alert" : "status",
+      "aria-live": isUrgent ? "assertive" : "polite",
+      "aria-atomic": "true",
+      className: (0, import_design_system_foundation11.cn)(NotificationBanner_default.banner, NotificationBanner_default[`--variant_${variant}`], className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: NotificationBanner_default.content, children }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: NotificationBanner_default.action, children: action }),
+        onDismiss && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            className: NotificationBanner_default.dismiss,
+            onClick: onDismiss,
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui/Pagination/Pagination.module.css
+var Pagination_default = {};
+
+// src/components/ui/Pagination/Pagination.tsx
+var import_design_system_foundation12 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function getPageRange(current, total) {
+  const delta = 1;
+  const range = [];
+  for (let i = 1; i <= total; i++) {
+    if (i === 1 || i === total || i >= current - delta && i <= current + delta) {
+      range.push(i);
+    } else if (range[range.length - 1] !== "...") {
+      range.push("...");
+    }
+  }
+  return range;
+}
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  className
+}) {
+  const pages = getPageRange(currentPage, totalPages);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { "aria-label": "Pagination", className: (0, import_design_system_foundation12.cn)(Pagination_default.pagination, className), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ul", { className: Pagination_default.list, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        className: (0, import_design_system_foundation12.cn)(Pagination_default.button, Pagination_default["--nav"]),
+        onClick: () => onPageChange(currentPage - 1),
+        disabled: currentPage <= 1,
+        "aria-label": "Previous page",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+      }
+    ) }),
+    pages.map(
+      (page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: Pagination_default.ellipsis, "aria-hidden": "true", children: "\u2026" }) }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          type: "button",
+          className: (0, import_design_system_foundation12.cn)(Pagination_default.button, currentPage === page ? Pagination_default["--active"] : void 0),
+          onClick: () => onPageChange(page),
+          "aria-label": `Page ${page}`,
+          "aria-current": currentPage === page ? "page" : void 0,
+          children: page
+        }
+      ) }, page)
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        className: (0, import_design_system_foundation12.cn)(Pagination_default.button, Pagination_default["--nav"]),
+        onClick: () => onPageChange(currentPage + 1),
+        disabled: currentPage >= totalPages,
+        "aria-label": "Next page",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/ui/Progress/Progress.module.css
+var Progress_default = {};
+
+// src/components/ui/Progress/Progress.tsx
+var import_design_system_foundation13 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Progress({
+  value,
+  max = 100,
+  label,
+  showLabel = false,
+  size = "medium",
+  className
+}) {
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_design_system_foundation13.cn)(Progress_default.container, className), children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: Progress_default.labelRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: Progress_default.label, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: Progress_default.value, children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        role: "progressbar",
+        "aria-label": label,
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: (0, import_design_system_foundation13.cn)(Progress_default.track, Progress_default[`--size_${size}`]),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Progress_default.fill, style: { width: `${percentage}%` } })
+      }
+    )
+  ] });
+}
+
+// src/components/ui/ProgressCircle/ProgressCircle.module.css
+var ProgressCircle_default = {};
+
+// src/components/ui/ProgressCircle/ProgressCircle.tsx
+var import_design_system_foundation14 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var SIZE_PX = { small: 40, medium: 64, large: 96 };
+var STROKE_WIDTH = 4;
+function ProgressCircle({
+  value,
+  max = 100,
+  label,
+  showValue = false,
+  size = "medium",
+  className
+}) {
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  const px = SIZE_PX[size];
+  const radius = (px - STROKE_WIDTH * 2) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - percentage / 100 * circumference;
+  const cx = px / 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      className: (0, import_design_system_foundation14.cn)(ProgressCircle_default.wrapper, ProgressCircle_default[`--size_${size}`], className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "svg",
+          {
+            width: px,
+            height: px,
+            viewBox: `0 0 ${px} ${px}`,
+            "aria-hidden": "true",
+            className: ProgressCircle_default.svg,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "circle",
+                {
+                  className: ProgressCircle_default.track,
+                  cx,
+                  cy: cx,
+                  r: radius,
+                  strokeWidth: STROKE_WIDTH,
+                  fill: "none"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "circle",
+                {
+                  className: ProgressCircle_default.fill,
+                  cx,
+                  cy: cx,
+                  r: radius,
+                  strokeWidth: STROKE_WIDTH,
+                  fill: "none",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: offset,
+                  strokeLinecap: "round",
+                  transform: `rotate(-90 ${cx} ${cx})`
+                }
+              )
+            ]
+          }
+        ),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: ProgressCircle_default.value, "aria-hidden": "true", children: [
+          Math.round(percentage),
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/ui/Separator/Separator.module.css
+var Separator_default = {};
+
+// src/components/ui/Separator/Separator.tsx
+var import_design_system_foundation15 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Separator({ orientation = "horizontal", className }) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: (0, import_design_system_foundation15.cn)(Separator_default.separator, Separator_default["--vertical"], className)
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { className: (0, import_design_system_foundation15.cn)(Separator_default.separator, Separator_default["--horizontal"], className) });
+}
+
+// src/components/ui/Skeleton/Skeleton.tsx
+var import_design_system_foundation16 = require("@boostdev/design-system-foundation");
+
+// src/components/ui/Skeleton/Skeleton.module.css
+var Skeleton_default = {};
+
+// src/components/ui/Skeleton/Skeleton.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Skeleton({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { "aria-hidden": "true", className: (0, import_design_system_foundation16.cn)(Skeleton_default.skeleton, className) });
+}
+
+// src/components/ui/SkipLink/SkipLink.module.css
+var SkipLink_default = {};
+
+// src/components/ui/SkipLink/SkipLink.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function SkipLink({ href = "#main", children = "Skip to main content" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("a", { href, className: SkipLink_default.skipLink, children });
+}
+
+// src/components/ui/Table/Table.module.css
+var Table_default = {};
+
+// src/components/ui/Table/Table.tsx
+var import_design_system_foundation17 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Table({
+  columns,
+  rows,
+  caption,
+  sortKey,
+  sortDirection,
+  onSort,
+  className
+}) {
+  const handleSort = (key) => {
+    if (!onSort) return;
+    const nextDirection = sortKey === key && sortDirection === "asc" ? "desc" : "asc";
+    onSort(key, nextDirection);
+  };
+  const getAriaSort = (key) => {
+    if (sortKey !== key) return "none";
+    return sortDirection === "asc" ? "ascending" : "descending";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_design_system_foundation17.cn)(Table_default.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("table", { className: Table_default.table, children: [
+    caption && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("caption", { className: Table_default.caption, children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { className: Table_default.thead, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "th",
+      {
+        scope: "col",
+        "aria-sort": col.sortable ? getAriaSort(col.key) : void 0,
+        className: (0, import_design_system_foundation17.cn)(Table_default.th, col.sortable ? Table_default["--sortable"] : void 0),
+        children: col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: Table_default.sortButton,
+            onClick: () => handleSort(col.key),
+            children: [
+              col.header,
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: (0, import_design_system_foundation17.cn)(
+                    Table_default.sortIcon,
+                    sortKey === col.key ? Table_default["--sort-active"] : void 0,
+                    sortKey === col.key && sortDirection === "desc" ? Table_default["--sort-desc"] : void 0
+                  ),
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" })
+                }
+              )
+            ]
+          }
+        ) : col.header
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tbody", { className: Table_default.tbody, children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: Table_default.tr, children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("td", { className: Table_default.td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)) }, rowIndex)) })
+  ] }) });
+}
+
+// src/components/ui/Tabs/Tabs.tsx
+var import_react4 = require("react");
+
+// src/components/ui/Tabs/Tabs.module.css
+var Tabs_default = {};
+
+// src/components/ui/Tabs/Tabs.tsx
+var import_design_system_foundation18 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Tabs({ tabs, defaultTab, className }) {
+  const baseId = (0, import_react4.useId)();
+  const [activeTab, setActiveTab] = (0, import_react4.useState)(defaultTab ?? tabs[0]?.id);
+  const tabRefs = (0, import_react4.useRef)([]);
+  const enabledIndexes = tabs.map((tab, i) => ({ tab, i })).filter(({ tab }) => !tab.disabled).map(({ i }) => i);
+  const handleKeyDown = (e, index) => {
+    const pos = enabledIndexes.indexOf(index);
+    const focusAt = (i) => {
+      tabRefs.current[i]?.focus();
+      setActiveTab(tabs[i].id);
+    };
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focusAt(enabledIndexes[(pos + 1) % enabledIndexes.length]);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focusAt(enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length]);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focusAt(enabledIndexes[0]);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      focusAt(enabledIndexes[enabledIndexes.length - 1]);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_design_system_foundation18.cn)(Tabs_default.tabs, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "tablist", className: Tabs_default.tabList, children: tabs.map((tab, i) => {
+      const tabId = `${baseId}-tab-${tab.id}`;
+      const panelId = `${baseId}-panel-${tab.id}`;
+      const isActive = activeTab === tab.id;
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[i] = el;
+          },
+          id: tabId,
+          type: "button",
+          role: "tab",
+          "aria-selected": isActive,
+          "aria-controls": panelId,
+          tabIndex: isActive ? 0 : -1,
+          disabled: tab.disabled,
+          className: (0, import_design_system_foundation18.cn)(Tabs_default.tab, isActive ? Tabs_default["--active"] : void 0),
+          onClick: () => setActiveTab(tab.id),
+          onKeyDown: (e) => handleKeyDown(e, i),
+          children: tab.label
+        },
+        tab.id
+      );
+    }) }),
+    tabs.map((tab) => {
+      const tabId = `${baseId}-tab-${tab.id}`;
+      const panelId = `${baseId}-panel-${tab.id}`;
+      const isActive = activeTab === tab.id;
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "div",
+        {
+          id: panelId,
+          role: "tabpanel",
+          "aria-labelledby": tabId,
+          tabIndex: 0,
+          hidden: !isActive,
+          className: Tabs_default.panel,
+          children: tab.content
+        },
+        tab.id
+      );
+    })
+  ] });
+}
+
+// src/components/ui/Tooltip/Tooltip.tsx
+var import_react5 = require("react");
+
+// src/components/ui/Tooltip/Tooltip.module.css
+var Tooltip_default = {};
+
+// src/components/ui/Tooltip/Tooltip.tsx
+var import_design_system_foundation19 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Tooltip({
+  content,
+  placement = "top",
+  children,
+  className
+}) {
+  const tooltipId = (0, import_react5.useId)();
+  const trigger = (0, import_react5.isValidElement)(children) ? (0, import_react5.cloneElement)(children, {
+    "aria-describedby": tooltipId
+  }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: (0, import_design_system_foundation19.cn)(Tooltip_default.wrapper, className), children: [
+    trigger,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "span",
+      {
+        id: tooltipId,
+        role: "tooltip",
+        className: (0, import_design_system_foundation19.cn)(Tooltip_default.tooltip, Tooltip_default[`--placement_${placement}`]),
+        children: content
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Typography/Typography.module.css
+var Typography_default = {};
+
+// src/components/ui/Typography/Typography.tsx
+var import_design_system_foundation20 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var variantToElement = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  body: "p",
+  body_s: "p"
+};
+function Typography({ variant = "body", component, children, className }) {
+  const Component = component || variantToElement[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component, { className: (0, import_design_system_foundation20.cn)(Typography_default.typography, Typography_default[`--${variant}`], className), children });
+}
+
+// src/components/interaction/Button/Button.module.css
+var Button_default = {};
+
+// src/components/interaction/Button/Button.tsx
+var import_design_system_foundation21 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Button({
+  children,
+  className = "",
+  variant = "primary",
+  type = "button",
+  iconStart,
+  iconEnd,
+  size = "medium",
+  hasPulse = false,
+  href,
+  target,
+  rel,
+  disabled,
+  onClick,
+  ...rest
+}) {
+  const classNames = (0, import_design_system_foundation21.cn)(
+    Button_default.button,
+    Button_default[`--${variant}`],
+    Button_default[`--size_${size}`],
+    hasPulse && Button_default["--hasPulse"],
+    className
+  );
+  const allChildren = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    !!iconStart && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: Button_default.prefix, children: iconStart }),
+    children,
+    !!iconEnd && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: Button_default.suffix, children: iconEnd })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { className: classNames, href, target, rel, onClick, ...rest, children: allChildren });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type, className: classNames, disabled, onClick, ...rest, children: allChildren });
+}
+
+// src/components/interaction/Command/Command.tsx
+var import_react6 = require("react");
+
+// src/components/interaction/Command/Command.module.css
+var Command_default = {};
+
+// src/components/interaction/Command/Command.tsx
+var import_design_system_foundation22 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function Command({
+  isOpen,
+  onClose,
+  items,
+  placeholder = "Search commands\u2026",
+  className
+}) {
+  const [query, setQuery] = (0, import_react6.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
+  const dialogRef = (0, import_react6.useRef)(null);
+  const inputRef = (0, import_react6.useRef)(null);
+  const listboxId = (0, import_react6.useId)();
+  const filtered = (0, import_react6.useMemo)(() => {
+    const q = query.toLowerCase().trim();
+    return q ? items.filter(
+      (item) => item.label.toLowerCase().includes(q) || item.description?.toLowerCase().includes(q)
+    ) : items;
+  }, [query, items]);
+  const groups = (0, import_react6.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    filtered.forEach((item) => {
+      const g = item.group ?? "";
+      const list = map.get(g) ?? [];
+      list.push(item);
+      map.set(g, list);
+    });
+    return map;
+  }, [filtered]);
+  (0, import_react6.useEffect)(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isOpen) {
+      dialog.showModal();
+      setQuery("");
+      setActiveIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    } else if (dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+  (0, import_react6.useEffect)(() => {
+    setActiveIndex(0);
+  }, [query]);
+  const handleCancel = (e) => {
+    e.preventDefault();
+    onClose();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      filtered[activeIndex]?.onSelect();
+      onClose();
+    } else if (e.key === "Escape") {
+      onClose();
+    }
+  };
+  const selectItem = (item) => {
+    item.onSelect();
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: (0, import_design_system_foundation22.cn)(Command_default.dialog, className),
+      "aria-label": "Command palette",
+      onCancel: handleCancel,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: Command_default.palette, onKeyDown: handleKeyDown, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: Command_default.searchRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("svg", { "aria-hidden": "true", className: Command_default.searchIcon, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", d: "M21 21l-4.35-4.35" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "search",
+              role: "combobox",
+              "aria-expanded": filtered.length > 0,
+              "aria-controls": listboxId,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": filtered[activeIndex] ? `cmd-${filtered[activeIndex].id}` : void 0,
+              className: Command_default.search,
+              placeholder,
+              value: query,
+              onChange: (e) => setQuery(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("kbd", { className: Command_default.escHint, children: "Esc" })
+        ] }),
+        filtered.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { id: listboxId, role: "listbox", className: Command_default.list, "aria-label": "Commands", children: Array.from(groups.entries()).map(([group, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { role: "presentation", children: [
+          group && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: Command_default.group, role: "presentation", children: group }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { role: "group", "aria-label": group || void 0, className: Command_default.groupList, children: groupItems.map((item) => {
+            const flatIndex = filtered.indexOf(item);
+            const isActive = flatIndex === activeIndex;
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              "li",
+              {
+                id: `cmd-${item.id}`,
+                role: "option",
+                "aria-selected": isActive,
+                className: (0, import_design_system_foundation22.cn)(Command_default.item, isActive && Command_default.itemActive),
+                onPointerDown: (e) => e.preventDefault(),
+                onClick: () => selectItem(item),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Command_default.itemLabel, children: item.label }),
+                  item.description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Command_default.itemDesc, children: item.description }),
+                  item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("kbd", { className: Command_default.shortcut, children: item.shortcut })
+                ]
+              },
+              item.id
+            );
+          }) })
+        ] }, group)) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: Command_default.empty, "aria-live": "polite", children: [
+          "No results for \u201C",
+          query,
+          "\u201D"
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/interaction/Dialog/Dialog.tsx
+var import_react7 = require("react");
+
+// src/components/interaction/Dialog/Dialog.module.css
+var Dialog_default = {};
+
+// src/components/interaction/Dialog/Dialog.tsx
+var import_design_system_foundation23 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Dialog({ children, isVisible = false, className, handleClose }) {
+  const dialogRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isVisible) {
+      dialog.showModal();
+    } else if (dialog.open) {
+      dialog.close();
+    }
+  }, [isVisible]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("dialog", { ref: dialogRef, className: (0, import_design_system_foundation23.cn)(className, Dialog_default.dialog), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("form", { method: "dialog", className: Dialog_default.closeForm, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "button",
+      {
+        type: "submit",
+        className: Dialog_default.closeButton,
+        onClick: handleClose,
+        "aria-label": "Close dialog",
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
+      }
+    ) }),
+    children
+  ] });
+}
+
+// src/components/interaction/Drawer/Drawer.tsx
+var import_react8 = require("react");
+
+// src/components/interaction/Drawer/Drawer.module.css
+var Drawer_default = {};
+
+// src/components/interaction/Drawer/Drawer.tsx
+var import_design_system_foundation24 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Drawer({
+  isOpen,
+  onClose,
+  title,
+  children,
+  side = "right",
+  className
+}) {
+  const dialogRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isOpen) {
+      dialog.showModal();
+    } else if (dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+  const handleClick = (e) => {
+    if (e.target === dialogRef.current) onClose();
+  };
+  const handleCancel = (e) => {
+    e.preventDefault();
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: (0, import_design_system_foundation24.cn)(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
+      "aria-label": title,
+      onClick: handleClick,
+      onCancel: handleCancel,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: Drawer_default.panel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: Drawer_default.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: Drawer_default.title, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "button",
+            {
+              type: "button",
+              className: Drawer_default.closeButton,
+              onClick: onClose,
+              "aria-label": "Close drawer",
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: Drawer_default.body, children })
+      ] })
+    }
+  );
+}
+
+// src/components/interaction/DropdownMenu/DropdownMenu.tsx
+var import_react9 = require("react");
+
+// src/components/interaction/DropdownMenu/DropdownMenu.module.css
+var DropdownMenu_default = {};
+
+// src/components/interaction/DropdownMenu/DropdownMenu.tsx
+var import_design_system_foundation25 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function DropdownMenu({
+  trigger,
+  items,
+  placement = "bottom-start",
+  className
+}) {
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
+  const containerRef = (0, import_react9.useRef)(null);
+  const menuId = (0, import_react9.useId)();
+  const itemRefs = (0, import_react9.useRef)([]);
+  const open = () => {
+    setIsOpen(true);
+  };
+  const close = () => setIsOpen(false);
+  (0, import_react9.useEffect)(() => {
+    if (isOpen) {
+      itemRefs.current[0]?.focus();
+    }
+  }, [isOpen]);
+  (0, import_react9.useEffect)(() => {
+    if (!isOpen) return;
+    const handlePointerDown = (e) => {
+      if (!containerRef.current?.contains(e.target)) close();
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+  const handleItemKeyDown = (e, index) => {
+    const enabledIndexes = items.map((item, i) => ({ item, i })).filter(({ item }) => !item.disabled).map(({ i }) => i);
+    const pos = enabledIndexes.indexOf(index);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      itemRefs.current[enabledIndexes[(pos + 1) % enabledIndexes.length]]?.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      itemRefs.current[enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length]]?.focus();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      itemRefs.current[enabledIndexes[0]]?.focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      itemRefs.current[enabledIndexes[enabledIndexes.length - 1]]?.focus();
+    } else if (e.key === "Tab") {
+      close();
+    }
+  };
+  const triggerEl = (0, import_react9.isValidElement)(trigger) ? (0, import_react9.cloneElement)(trigger, {
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    "aria-controls": menuId,
+    onClick: (e) => {
+      if (isOpen) {
+        close();
+      } else {
+        open();
+      }
+      const existingOnClick = trigger.props.onClick;
+      if (typeof existingOnClick === "function") existingOnClick(e);
+    }
+  }) : trigger;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref: containerRef, className: (0, import_design_system_foundation25.cn)(DropdownMenu_default.wrapper, className), children: [
+    triggerEl,
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "ul",
+      {
+        id: menuId,
+        role: "menu",
+        className: (0, import_design_system_foundation25.cn)(DropdownMenu_default.menu, DropdownMenu_default[`--placement_${placement}`]),
+        children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("li", { role: "presentation", children: [
+          item.separator && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("hr", { className: DropdownMenu_default.separator, role: "separator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            "button",
+            {
+              ref: (el) => {
+                itemRefs.current[index] = el;
+              },
+              type: "button",
+              role: "menuitem",
+              disabled: item.disabled,
+              className: DropdownMenu_default.item,
+              onClick: () => {
+                item.onClick?.();
+                close();
+              },
+              onKeyDown: (e) => handleItemKeyDown(e, index),
+              children: [
+                item.icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: DropdownMenu_default.icon, "aria-hidden": "true", children: item.icon }),
+                item.label
+              ]
+            }
+          )
+        ] }, item.id))
+      }
+    )
+  ] });
+}
+
+// src/components/interaction/Popover/Popover.tsx
+var import_react10 = require("react");
+
+// src/components/interaction/Popover/Popover.module.css
+var Popover_default = {};
+
+// src/components/interaction/Popover/Popover.tsx
+var import_design_system_foundation26 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Popover({
+  children,
+  content,
+  placement = "bottom",
+  className
+}) {
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const containerRef = (0, import_react10.useRef)(null);
+  const panelId = (0, import_react10.useId)();
+  (0, import_react10.useEffect)(() => {
+    if (!isOpen) return;
+    const handlePointerDown = (e) => {
+      if (!containerRef.current?.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+  const trigger = (0, import_react10.isValidElement)(children) ? (0, import_react10.cloneElement)(children, {
+    "aria-expanded": isOpen,
+    "aria-controls": panelId,
+    onClick: (e) => {
+      setIsOpen((prev) => !prev);
+      const existingOnClick = children.props.onClick;
+      if (typeof existingOnClick === "function") existingOnClick(e);
+    }
+  }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { ref: containerRef, className: (0, import_design_system_foundation26.cn)(Popover_default.wrapper, className), children: [
+    trigger,
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "div",
+      {
+        id: panelId,
+        role: "dialog",
+        "aria-modal": "false",
+        className: (0, import_design_system_foundation26.cn)(Popover_default.panel, Popover_default[`--placement_${placement}`]),
+        children: content
+      }
+    )
+  ] });
+}
+
+// src/components/interaction/Rating/Rating.module.css
+var Rating_default = {};
+
+// src/components/interaction/Rating/Rating.tsx
+var import_design_system_foundation27 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function Rating({ value, max = 5, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "div",
+    {
+      className: (0, import_design_system_foundation27.cn)(Rating_default.rating, className),
+      role: "img",
+      "aria-label": `${value} out of ${max} stars`,
+      children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "svg",
+        {
+          "aria-hidden": "true",
+          className: (0, import_design_system_foundation27.cn)(Rating_default.star, i < value && Rating_default["--filled"]),
+          fill: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/components/interaction/Toast/Toast.tsx
+var import_react11 = require("react");
+
+// src/components/interaction/Toast/Toast.module.css
+var Toast_default = {};
+
+// src/components/interaction/Toast/Toast.tsx
+var import_design_system_foundation28 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var ToastContext = (0, import_react11.createContext)(void 0);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = (0, import_react11.useState)([]);
+  const showToast = (0, import_react11.useCallback)((message, variant) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { id, message, variant }]);
+  }, []);
+  const removeToast = (0, import_react11.useCallback)((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  const value = (0, import_react11.useMemo)(() => ({ showToast }), [showToast]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: Toast_default.toastContainer, children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      ToastItem,
+      {
+        toast,
+        onRemove: () => removeToast(toast.id)
+      },
+      toast.id
+    )) })
+  ] });
+}
+function ToastItem({ toast, onRemove }) {
+  (0, import_react11.useEffect)(() => {
+    const timer = setTimeout(onRemove, 5e3);
+    return () => clearTimeout(timer);
+  }, [onRemove]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: (0, import_design_system_foundation28.cn)(Toast_default.toast, Toast_default[`--variant_${toast.variant}`]), children: toast.message });
+}
+function useToast() {
+  const context = (0, import_react11.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+
+// src/components/interaction/form/Checkbox/Checkbox.tsx
+var import_react12 = require("react");
+
+// src/components/interaction/form/Checkbox/Checkbox.module.css
+var Checkbox_default = {};
+
+// src/components/interaction/form/atoms/Message.module.css
+var Message_default = {};
+
+// src/components/interaction/form/atoms/Message.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Message = ({ message, type, inputId }) => {
+  if (!message) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { id: inputId + type, htmlFor: inputId, className: Message_default[type], children: message });
+};
+
+// src/components/interaction/form/atoms/Label.module.css
+var Label_default = {};
+
+// src/components/interaction/form/atoms/Label.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Label = ({ label, id }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: id, className: Label_default.label, children: label });
+};
+
+// src/components/interaction/form/Checkbox/Checkbox.tsx
+var import_design_system_foundation30 = require("@boostdev/design-system-foundation");
+
+// src/components/interaction/form/atoms/InputContainer.module.css
+var InputContainer_default = {};
+
+// src/components/interaction/form/atoms/InputContainer.tsx
+var import_design_system_foundation29 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var InputContainer = ({ children, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_design_system_foundation29.cn)(InputContainer_default.container, className), children });
+};
+
+// src/components/interaction/form/Checkbox/Checkbox.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function Checkbox({ label, name, error, hint, className, ...props }) {
+  const id = name + (0, import_react12.useId)();
+  const hintId = id + "hint";
+  const errorId = id + "error";
+  const describedBy = !!error ? errorId : hintId;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputContainer, { className: (0, import_design_system_foundation30.cn)(Checkbox_default.checkboxGroup, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: Checkbox_default.inputWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "input",
+        {
+          "aria-describedby": describedBy,
+          type: "checkbox",
+          id,
+          name,
+          className: `${Checkbox_default.checkbox} ${error ? Checkbox_default.checkboxError : ""}`,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label, { id, label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Message, { inputId: id, type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Combobox/Combobox.tsx
+var import_react13 = require("react");
+
+// src/components/interaction/form/Combobox/Combobox.module.css
+var Combobox_default = {};
+
+// src/components/interaction/form/Combobox/Combobox.tsx
+var import_design_system_foundation31 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Combobox({
+  label,
+  name,
+  options,
+  placeholder,
+  value,
+  onChange,
+  error,
+  hint,
+  className
+}) {
+  const id = name + (0, import_react13.useId)();
+  const listboxId = id + "listbox";
+  const hintId = id + "hint";
+  const errorId = id + "error";
+  const describedBy = error ? errorId : hintId;
+  const selectedOption = options.find((o) => o.value === value);
+  const [inputValue, setInputValue] = (0, import_react13.useState)(selectedOption?.label ?? "");
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react13.useState)(-1);
+  const containerRef = (0, import_react13.useRef)(null);
+  const inputRef = (0, import_react13.useRef)(null);
+  const filtered = options.filter(
+    (o) => o.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+  const getOptionId = (index) => `${id}-option-${index}`;
+  (0, import_react13.useEffect)(() => {
+    if (!isOpen) return;
+    const handlePointerDown = (e) => {
+      if (!containerRef.current?.contains(e.target)) setIsOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [isOpen]);
+  const selectOption = (option) => {
+    setInputValue(option.label);
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+    onChange?.(option.value);
+  };
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+    setIsOpen(true);
+    setHighlightedIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    const enabledIndexes = filtered.map((opt, i) => ({ opt, i })).filter(({ opt }) => !opt.disabled).map(({ i }) => i);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
+      }
+      const pos = enabledIndexes.indexOf(highlightedIndex);
+      setHighlightedIndex(enabledIndexes[(pos + 1) % enabledIndexes.length] ?? 0);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const pos = enabledIndexes.indexOf(highlightedIndex);
+      setHighlightedIndex(
+        enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length] ?? 0
+      );
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (highlightedIndex >= 0 && filtered[highlightedIndex]) {
+        selectOption(filtered[highlightedIndex]);
+      }
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+      setHighlightedIndex(-1);
+    } else if (e.key === "Tab") {
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(InputContainer, { className: (0, import_design_system_foundation31.cn)(Combobox_default.formGroup, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Label, { id, label }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref: containerRef, className: Combobox_default.inputWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          id,
+          name,
+          type: "text",
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-autocomplete": "list",
+          "aria-controls": listboxId,
+          "aria-activedescendant": highlightedIndex >= 0 ? getOptionId(highlightedIndex) : void 0,
+          "aria-invalid": !!error,
+          "aria-describedby": describedBy,
+          autoComplete: "off",
+          placeholder,
+          value: inputValue,
+          className: (0, import_design_system_foundation31.cn)(Combobox_default.input, error ? Combobox_default.inputError : void 0),
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsOpen(true)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: Combobox_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) }),
+      isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        "ul",
+        {
+          id: listboxId,
+          role: "listbox",
+          "aria-label": String(label),
+          className: Combobox_default.listbox,
+          children: filtered.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "li",
+            {
+              id: getOptionId(index),
+              role: "option",
+              "aria-selected": option.value === value,
+              "aria-disabled": option.disabled,
+              className: (0, import_design_system_foundation31.cn)(
+                Combobox_default.option,
+                index === highlightedIndex ? Combobox_default["--highlighted"] : void 0,
+                option.value === value ? Combobox_default["--selected"] : void 0,
+                option.disabled ? Combobox_default["--disabled"] : void 0
+              ),
+              onPointerDown: (e) => {
+                e.preventDefault();
+                if (!option.disabled) selectOption(option);
+              },
+              children: option.label
+            },
+            option.value
+          ))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, { inputId: id, type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/FileInput/FileInput.tsx
+var import_react14 = require("react");
+
+// src/components/interaction/form/FileInput/FileInput.module.css
+var FileInput_default = {};
+
+// src/components/interaction/form/FileInput/FileInput.tsx
+var import_design_system_foundation32 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function FileInput({
+  label,
+  name,
+  accept,
+  multiple = false,
+  disabled = false,
+  error,
+  hint,
+  onChange,
+  className
+}) {
+  const uid = name + (0, import_react14.useId)();
+  const hintId = uid + "hint";
+  const errorId = uid + "error";
+  const describedBy = error ? errorId : hintId;
+  const inputRef = (0, import_react14.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react14.useState)(false);
+  const [fileNames, setFileNames] = (0, import_react14.useState)([]);
+  const handleFiles = (files) => {
+    if (!files) return;
+    setFileNames(Array.from(files).map((f) => f.name));
+    onChange?.(files);
+  };
+  const handleChange = (e) => handleFiles(e.target.files);
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (disabled) return;
+    handleFiles(e.dataTransfer.files);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (!disabled) setIsDragging(true);
+  };
+  const handleDragLeave = () => setIsDragging(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(InputContainer, { className: (0, import_design_system_foundation32.cn)(FileInput_default.formGroup, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Label, { id: uid, label }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      "label",
+      {
+        htmlFor: uid,
+        className: (0, import_design_system_foundation32.cn)(FileInput_default.dropZone, isDragging && FileInput_default.isDragging, error && FileInput_default.hasError, disabled && FileInput_default.isDisabled),
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { "aria-hidden": "true", className: FileInput_default.icon, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: FileInput_default.prompt, children: fileNames.length > 0 ? fileNames.join(", ") : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("strong", { children: "Click to upload" }),
+            " or drag and drop"
+          ] }) }),
+          accept && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: FileInput_default.acceptHint, children: accept }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              id: uid,
+              type: "file",
+              name,
+              accept,
+              multiple,
+              disabled,
+              "aria-invalid": !!error,
+              "aria-describedby": describedBy,
+              className: FileInput_default.hiddenInput,
+              onChange: handleChange
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { inputId: uid, type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { inputId: uid, type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/FormInput/FormInput.tsx
+var import_react15 = require("react");
+
+// src/components/interaction/form/FormInput/FormInput.module.css
+var FormInput_default = {};
+
+// src/components/interaction/form/FormInput/FormInput.tsx
+var import_design_system_foundation33 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function FormInput({
+  label,
+  name,
+  ariaLabel,
+  error,
+  hint,
+  className,
+  ...props
+}) {
+  const id = name + (0, import_react15.useId)();
+  const hintId = id + "hint";
+  const errorId = id + "error";
+  const describedBy = !!error ? errorId : hintId;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(InputContainer, { className: (0, import_design_system_foundation33.cn)(FormInput_default.formGroup, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label, { id, label }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "input",
+      {
+        "aria-invalid": !!error,
+        "aria-describedby": describedBy,
+        "aria-label": ariaLabel,
+        id,
+        name,
+        className: `${FormInput_default.input} ${error ? FormInput_default.inputError : ""}`,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { inputId: id, type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/NumberInput/NumberInput.tsx
+var import_react16 = require("react");
+
+// src/components/interaction/form/NumberInput/NumberInput.module.css
+var NumberInput_default = {};
+
+// src/components/interaction/form/NumberInput/NumberInput.tsx
+var import_design_system_foundation34 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function NumberInput({
+  label,
+  name,
+  value,
+  defaultValue,
+  min,
+  max,
+  step = 1,
+  disabled = false,
+  error,
+  hint,
+  onChange,
+  className
+}) {
+  const uid = name + (0, import_react16.useId)();
+  const hintId = uid + "hint";
+  const errorId = uid + "error";
+  const describedBy = error ? errorId : hintId;
+  const inputRef = (0, import_react16.useRef)(null);
+  const clamp = (v) => {
+    const withMin = min !== void 0 ? Math.max(min, v) : v;
+    const withMax = max !== void 0 ? Math.min(max, withMin) : withMin;
+    return withMax;
+  };
+  const adjust = (delta) => {
+    if (!inputRef.current) return;
+    const current = parseFloat(inputRef.current.value) || 0;
+    const next = clamp(current + delta);
+    inputRef.current.value = String(next);
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(InputContainer, { className: (0, import_design_system_foundation34.cn)(NumberInput_default.formGroup, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Label, { id: uid, label }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: NumberInput_default.inputRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "button",
+        {
+          type: "button",
+          className: NumberInput_default.stepper,
+          "aria-label": "Decrease",
+          disabled: disabled || min !== void 0 && (value ?? defaultValue ?? 0) <= min,
+          onClick: () => adjust(-step),
+          tabIndex: -1,
+          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          id: uid,
+          type: "number",
+          name,
+          defaultValue,
+          value,
+          min,
+          max,
+          step,
+          disabled,
+          "aria-invalid": !!error,
+          "aria-describedby": describedBy,
+          className: (0, import_design_system_foundation34.cn)(NumberInput_default.input, error ? NumberInput_default.inputError : void 0),
+          onChange: (e) => onChange?.(parseFloat(e.target.value))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "button",
+        {
+          type: "button",
+          className: NumberInput_default.stepper,
+          "aria-label": "Increase",
+          disabled: disabled || max !== void 0 && (value ?? defaultValue ?? 0) >= max,
+          onClick: () => adjust(step),
+          tabIndex: -1,
+          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { inputId: uid, type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { inputId: uid, type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Radio/Radio.tsx
+var import_react17 = require("react");
+
+// src/components/interaction/form/Radio/Radio.module.css
+var Radio_default = {};
+
+// src/components/interaction/form/Radio/Radio.tsx
+var import_design_system_foundation35 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function Radio({ label, name, error, hint, className, ...props }) {
+  const id = name + (0, import_react17.useId)();
+  const hintId = id + "hint";
+  const errorId = id + "error";
+  const describedBy = !!error ? errorId : hintId;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(InputContainer, { className: (0, import_design_system_foundation35.cn)(Radio_default.radioGroup, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: Radio_default.inputWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "input",
+        {
+          "aria-describedby": describedBy,
+          type: "radio",
+          id,
+          name,
+          className: `${Radio_default.radio} ${error ? Radio_default.radioError : ""}`,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label, { id, label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { inputId: id, type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Select/Select.tsx
+var import_react18 = require("react");
+
+// src/components/interaction/form/Select/Select.module.css
+var Select_default = {};
+
+// src/components/interaction/form/Select/Select.tsx
+var import_design_system_foundation36 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function Select({
+  label,
+  name,
+  options,
+  placeholder,
+  error,
+  hint,
+  className,
+  ...props
+}) {
+  const id = name + (0, import_react18.useId)();
+  const hintId = id + "hint";
+  const errorId = id + "error";
+  const describedBy = error ? errorId : hintId;
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(InputContainer, { className: (0, import_design_system_foundation36.cn)(Select_default.formGroup, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { id, label }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: Select_default.selectWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        "select",
+        {
+          id,
+          name,
+          "aria-invalid": !!error,
+          "aria-describedby": describedBy,
+          className: (0, import_design_system_foundation36.cn)(Select_default.select, error ? Select_default.selectError : void 0),
+          ...props,
+          children: [
+            placeholder && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: "", disabled: true, children: placeholder }),
+            options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value, disabled, children: optLabel }, value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { inputId: id, type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Slider/Slider.tsx
+var import_react19 = require("react");
+
+// src/components/interaction/form/Slider/Slider.module.css
+var Slider_default = {};
+
+// src/components/interaction/form/Slider/Slider.tsx
+var import_design_system_foundation37 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function Slider({
+  label,
+  name,
+  min = 0,
+  max = 100,
+  showValue = false,
+  error,
+  hint,
+  className,
+  onChange,
+  ...props
+}) {
+  const id = name + (0, import_react19.useId)();
+  const hintId = id + "hint";
+  const errorId = id + "error";
+  const describedBy = error ? errorId : hintId;
+  const initialValue = Number(props.value ?? props.defaultValue ?? min);
+  const [currentValue, setCurrentValue] = (0, import_react19.useState)(initialValue);
+  const fillPct = (currentValue - min) / (max - min) * 100;
+  const handleChange = (e) => {
+    setCurrentValue(Number(e.target.value));
+    onChange?.(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(InputContainer, { className: (0, import_design_system_foundation37.cn)(Slider_default.formGroup, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: Slider_default.labelRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Label, { id, label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: Slider_default.value, children: currentValue })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "input",
+      {
+        type: "range",
+        id,
+        name,
+        min,
+        max,
+        "aria-describedby": describedBy,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": currentValue,
+        className: (0, import_design_system_foundation37.cn)(Slider_default.slider, error ? Slider_default.sliderError : void 0),
+        style: { "--slider_fill": `${fillPct}%` },
+        onChange: handleChange,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Message, { inputId: id, type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Switch/Switch.tsx
+var import_react20 = require("react");
+
+// src/components/interaction/form/Switch/Switch.module.css
+var Switch_default = {};
+
+// src/components/interaction/form/Switch/Switch.tsx
+var import_design_system_foundation38 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function Switch({
+  label,
+  name,
+  size = "medium",
+  error,
+  hint,
+  className,
+  ...props
+}) {
+  const id = name + (0, import_react20.useId)();
+  const hintId = id + "hint";
+  const errorId = id + "error";
+  const describedBy = error ? errorId : hintId;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(InputContainer, { className: (0, import_design_system_foundation38.cn)(Switch_default.switchGroup, Switch_default[`--size_${size}`], className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: Switch_default.inputWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: Switch_default.trackWrapper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            id,
+            name,
+            "aria-describedby": describedBy,
+            className: (0, import_design_system_foundation38.cn)(Switch_default.switch, error ? Switch_default.switchError : void 0),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: Switch_default.thumb }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Label, { id, label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { inputId: id, type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Textarea/Textarea.tsx
+var import_react21 = require("react");
+
+// src/components/interaction/form/Textarea/Textarea.module.css
+var Textarea_default = {};
+
+// src/components/interaction/form/Textarea/Textarea.tsx
+var import_design_system_foundation39 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function Textarea({
+  label,
+  name,
+  error,
+  hint,
+  className,
+  ...props
+}) {
+  const id = name + (0, import_react21.useId)();
+  const hintId = id + "hint";
+  const errorId = id + "error";
+  const describedBy = error ? errorId : hintId;
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(InputContainer, { className: (0, import_design_system_foundation39.cn)(Textarea_default.formGroup, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { id, label }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "textarea",
+      {
+        id,
+        name,
+        "aria-invalid": !!error,
+        "aria-describedby": describedBy,
+        className: (0, import_design_system_foundation39.cn)(Textarea_default.textarea, error ? Textarea_default.textareaError : void 0),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { inputId: id, type: "hint", message: hint })
+  ] });
+}
+
+// src/components/layout/ButtonGroup/ButtonGroup.module.css
+var ButtonGroup_default = {};
+
+// src/components/layout/ButtonGroup/ButtonGroup.tsx
+var import_design_system_foundation40 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function ButtonGroup({ children, className, variant }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_design_system_foundation40.cn)(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant__${variant}`]), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: ButtonGroup_default.container, children }) });
+}
+
+// src/components/layout/Card/Card.module.css
+var Card_default = {};
+
+// src/components/layout/Card/Card.tsx
+var import_design_system_foundation41 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function Card({
+  children,
+  className,
+  variant = "default",
+  padding = "medium",
+  textAlign = "start",
+  style,
+  onClick
+}) {
+  const classNames = (0, import_design_system_foundation41.cn)(
+    Card_default.card,
+    Card_default[`--${variant}`],
+    Card_default[`--padding-${padding}`],
+    Card_default[`--text-${textAlign}`],
+    onClick && Card_default["--clickable"],
+    className
+  );
+  const Component = onClick ? "button" : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    Component,
+    {
+      className: classNames,
+      onClick,
+      style,
+      ...onClick && { type: "button" },
+      children
+    }
+  );
+}
+
+// src/components/layout/SectionHeader/SectionHeader.module.css
+var SectionHeader_default = {};
+
+// src/components/layout/SectionHeader/SectionHeader.tsx
+var import_design_system_foundation42 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function SectionHeader({
+  title,
+  subtitle,
+  className,
+  alignment = "start",
+  size = "medium",
+  titleAs = "h2"
+}) {
+  const Title = titleAs;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("header", { className: (0, import_design_system_foundation42.cn)(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Title, { className: SectionHeader_default.title, children: title }),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: SectionHeader_default.subtitle, children: subtitle })
+  ] });
+}
+
+// src/components/layout/IconWrapper/IconWrapper.module.css
+var IconWrapper_default = {};
+
+// src/components/layout/IconWrapper/IconWrapper.tsx
+var import_design_system_foundation43 = require("@boostdev/design-system-foundation");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function IconWrapper({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: (0, import_design_system_foundation43.cn)(className, IconWrapper_default.wrapper), children });
+}
+
+// src/index.ts
+var import_design_system_foundation44 = require("@boostdev/design-system-foundation");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  Alert,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  ButtonGroup,
+  Calendar,
+  Card,
+  Carousel,
+  Checkbox,
+  Combobox,
+  Command,
+  DescriptionList,
+  Dialog,
+  Drawer,
+  DropdownMenu,
+  FileInput,
+  FormInput,
+  IconWrapper,
+  Link,
+  Loading,
+  NotificationBanner,
+  NumberInput,
+  Pagination,
+  Popover,
+  Progress,
+  ProgressCircle,
+  Radio,
+  Rating,
+  SectionHeader,
+  Select,
+  Separator,
+  Skeleton,
+  SkipLink,
+  Slider,
+  Switch,
+  Table,
+  Tabs,
+  Textarea,
+  ToastProvider,
+  Tooltip,
+  Typography,
+  cn,
+  useToast
+});