@orion-ds/react 4.9.2 → 4.9.3

package/dist/components/FilterBar/FilterBar.module.css.mjs

@@ -0,0 +1,55 @@
+const r = "_filterBar_ldmr2_8", o = "_compact_ldmr2_19", e = "_searchWrapper_ldmr2_28", c = "_searchIcon_ldmr2_34", t = "_searchInput_ldmr2_41", _ = "_filters_ldmr2_69", n = "_filterWrapper_ldmr2_75", l = "_filterTrigger_ldmr2_79", d = "_filterActive_ldmr2_100", p = "_chevron_ldmr2_106", s = "_chevronOpen_ldmr2_110", i = "_dropdown_ldmr2_118", m = "_dropdownItem_ldmr2_133", a = "_dropdownItemSelected_ldmr2_154", h = "_checkbox_ldmr2_159", w = "_optionCount_ldmr2_177", f = "_dropdownFooter_ldmr2_183", v = "_dropdownCancel_ldmr2_192", I = "_dropdownApply_ldmr2_193", u = "_activeFilters_ldmr2_227", A = "_chip_ldmr2_237", b = "_chipLabel_ldmr2_250", g = "_chipRemove_ldmr2_257", C = "_clearAll_ldmr2_276", F = "_count_ldmr2_296", W = {
+  filterBar: r,
+  compact: o,
+  searchWrapper: e,
+  searchIcon: c,
+  searchInput: t,
+  filters: _,
+  filterWrapper: n,
+  filterTrigger: l,
+  filterActive: d,
+  chevron: p,
+  chevronOpen: s,
+  dropdown: i,
+  dropdownItem: m,
+  dropdownItemSelected: a,
+  checkbox: h,
+  optionCount: w,
+  dropdownFooter: f,
+  dropdownCancel: v,
+  dropdownApply: I,
+  activeFilters: u,
+  chip: A,
+  chipLabel: b,
+  chipRemove: g,
+  clearAll: C,
+  count: F
+};
+export {
+  u as activeFilters,
+  h as checkbox,
+  p as chevron,
+  s as chevronOpen,
+  A as chip,
+  b as chipLabel,
+  g as chipRemove,
+  C as clearAll,
+  o as compact,
+  F as count,
+  W as default,
+  i as dropdown,
+  I as dropdownApply,
+  v as dropdownCancel,
+  f as dropdownFooter,
+  m as dropdownItem,
+  a as dropdownItemSelected,
+  d as filterActive,
+  r as filterBar,
+  l as filterTrigger,
+  n as filterWrapper,
+  _ as filters,
+  w as optionCount,
+  c as searchIcon,
+  t as searchInput,
+  e as searchWrapper
+};

package/dist/components/FilterBar/FilterBar.types.d.ts

@@ -0,0 +1,139 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Filter option for select/multi-select filters
+ */
+export interface FilterOption {
+    /**
+     * Option value
+     */
+    value: string;
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Optional count
+     */
+    count?: number;
+}
+/**
+ * Filter definition
+ */
+export interface FilterDefinition {
+    /**
+     * Unique filter key
+     */
+    key: string;
+    /**
+     * Filter label
+     */
+    label: string;
+    /**
+     * Filter type
+     */
+    type: "select" | "multi-select" | "date" | "date-range" | "text";
+    /**
+     * Options for select types
+     */
+    options?: FilterOption[];
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Icon for the filter
+     */
+    icon?: ReactNode;
+}
+/**
+ * Active filter value
+ */
+export interface ActiveFilter {
+    /**
+     * Filter key
+     */
+    key: string;
+    /**
+     * Filter value (or array for multi-select)
+     */
+    value: string | string[] | {
+        start: string;
+        end: string;
+    };
+    /**
+     * Display label for the chip
+     */
+    label: string;
+}
+/**
+ * FilterBar section props
+ *
+ * @example
+ * ```tsx
+ * <FilterBar
+ *   filters={[
+ *     { key: 'status', label: 'Status', type: 'select', options: [...] },
+ *     { key: 'date', label: 'Date', type: 'date-range' }
+ *   ]}
+ *   activeFilters={[
+ *     { key: 'status', value: 'active', label: 'Active' }
+ *   ]}
+ *   onFilterChange={(key, value) => updateFilters(key, value)}
+ *   onFilterRemove={(key) => removeFilter(key)}
+ * />
+ * ```
+ */
+export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Filter definitions
+     */
+    filters: FilterDefinition[];
+    /**
+     * Currently active filters
+     */
+    activeFilters: ActiveFilter[];
+    /**
+     * Filter change handler
+     */
+    onFilterChange: (key: string, value: string | string[] | {
+        start: string;
+        end: string;
+    } | null) => void;
+    /**
+     * Remove filter handler
+     */
+    onFilterRemove: (key: string) => void;
+    /**
+     * Clear all filters handler
+     */
+    onClearAll?: () => void;
+    /**
+     * Enable search input
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Search value (controlled)
+     */
+    searchValue?: string;
+    /**
+     * Search change handler
+     */
+    onSearchChange?: (value: string) => void;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Show filter count
+     * @default true
+     */
+    showCount?: boolean;
+    /**
+     * Compact mode
+     * @default false
+     */
+    compact?: boolean;
+}
+//# sourceMappingURL=FilterBar.types.d.ts.map

package/dist/components/FilterBar/FilterBar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.types.d.ts","sourceRoot":"","sources":["../../../src/components/FilterBar/FilterBar.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,QAAQ,GAAG,cAAc,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;IAEjE;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAE1D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;OAEG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAE5B;;OAEG;IACH,aAAa,EAAE,YAAY,EAAE,CAAC;IAE9B;;OAEG;IACH,cAAc,EAAE,CACd,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAC7D,IAAI,CAAC;IAEV;;OAEG;IACH,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/FilterBar/index.d.ts

@@ -0,0 +1,3 @@
+export { FilterBar } from './FilterBar';
+export type { FilterBarProps, FilterDefinition, FilterOption, ActiveFilter, } from './FilterBar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FilterBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FilterBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EACV,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,MAAM,mBAAmB,CAAC"}

package/dist/components/FontLoader/FontLoader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),s=require("../../utils/fonts.cjs");function m({onLoad:r,onError:i,showLoadingState:h=!1,loadingComponent:u,children:d}){const[g,t]=l.useState(!1),[f,F]=l.useState(!1);return l.useEffect(()=>{if(typeof document>"u"||f)return;const c=document.head;if(c.querySelector('link[href*="fonts.googleapis.com"]')){F(!0),t(!0),r?.();return}try{s.FONT_PRECONNECT_URLS.forEach((a,y)=>{const n=document.createElement("link");n.rel="preconnect",n.href=a,y===1&&(n.crossOrigin="anonymous"),n.setAttribute("data-orion-fonts","preconnect"),c.appendChild(n)});const e=document.createElement("link");e.rel="stylesheet",e.href=s.GOOGLE_FONTS_URL,e.setAttribute("data-orion-fonts","stylesheet"),e.onload=async()=>{try{await s.waitForFonts([...s.ALL_FONTS]),t(!0),r?.()}catch{t(!0),r?.()}},e.onerror=()=>{const a=new Error("Failed to load Google Fonts");console.error("[Orion] Failed to load fonts from Google Fonts"),i?.(a),t(!0)},c.appendChild(e),F(!0)}catch(e){console.error("[Orion] Error injecting font links:",e),i?.(e instanceof Error?e:new Error("Font injection failed")),t(!0)}},[f,r,i]),h&&!g?u?o.jsx(o.Fragment,{children:u}):null:d?o.jsx(o.Fragment,{children:d}):null}m.displayName="FontLoader";exports.FontLoader=m;

package/dist/components/FontLoader/FontLoader.d.ts

@@ -0,0 +1,13 @@
+import { FontLoaderProps } from './FontLoader.types';
+
+/**
+ * FontLoader - Injects Google Fonts into the document head
+ *
+ * Place this component near the root of your app to ensure
+ * all brand fonts are loaded automatically.
+ */
+export declare function FontLoader({ onLoad, onError, showLoadingState, loadingComponent, children, }: FontLoaderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace FontLoader {
+    var displayName: string;
+}
+//# sourceMappingURL=FontLoader.d.ts.map

package/dist/components/FontLoader/FontLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontLoader.d.ts","sourceRoot":"","sources":["../../../src/components/FontLoader/FontLoader.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,OAAO,EACP,gBAAwB,EACxB,gBAAgB,EAChB,QAAQ,GACT,EAAE,eAAe,kDA6EjB;yBAnFe,UAAU"}

package/dist/components/FontLoader/FontLoader.mjs

@@ -0,0 +1,47 @@
+import { jsx as d, Fragment as u } from "react/jsx-runtime";
+import { useState as m, useEffect as y } from "react";
+import { FONT_PRECONNECT_URLS as E, GOOGLE_FONTS_URL as O, waitForFonts as g, ALL_FONTS as L } from "../../utils/fonts.mjs";
+function k({
+  onLoad: n,
+  onError: o,
+  showLoadingState: p = !1,
+  loadingComponent: c,
+  children: a
+}) {
+  const [F, t] = m(!1), [l, f] = m(!1);
+  return y(() => {
+    if (typeof document > "u" || l) return;
+    const s = document.head;
+    if (s.querySelector(
+      'link[href*="fonts.googleapis.com"]'
+    )) {
+      f(!0), t(!0), n?.();
+      return;
+    }
+    try {
+      E.forEach((i, h) => {
+        const r = document.createElement("link");
+        r.rel = "preconnect", r.href = i, h === 1 && (r.crossOrigin = "anonymous"), r.setAttribute("data-orion-fonts", "preconnect"), s.appendChild(r);
+      });
+      const e = document.createElement("link");
+      e.rel = "stylesheet", e.href = O, e.setAttribute("data-orion-fonts", "stylesheet"), e.onload = async () => {
+        try {
+          await g([...L]), t(!0), n?.();
+        } catch {
+          t(!0), n?.();
+        }
+      }, e.onerror = () => {
+        const i = new Error("Failed to load Google Fonts");
+        console.error("[Orion] Failed to load fonts from Google Fonts"), o?.(i), t(!0);
+      }, s.appendChild(e), f(!0);
+    } catch (e) {
+      console.error("[Orion] Error injecting font links:", e), o?.(
+        e instanceof Error ? e : new Error("Font injection failed")
+      ), t(!0);
+    }
+  }, [l, n, o]), p && !F ? c ? /* @__PURE__ */ d(u, { children: c }) : null : a ? /* @__PURE__ */ d(u, { children: a }) : null;
+}
+k.displayName = "FontLoader";
+export {
+  k as FontLoader
+};

package/dist/components/FontLoader/FontLoader.types.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+export interface FontLoaderProps {
+    /**
+     * Callback fired when fonts are successfully loaded
+     */
+    onLoad?: () => void;
+    /**
+     * Callback fired when fonts fail to load
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Whether to show loading state while fonts are loading
+     * @default false
+     */
+    showLoadingState?: boolean;
+    /**
+     * Custom component to display while loading fonts
+     * Only used if `showLoadingState` is true
+     */
+    loadingComponent?: ReactNode;
+    /**
+     * Children to render after fonts are loaded
+     */
+    children?: ReactNode;
+}
+//# sourceMappingURL=FontLoader.types.d.ts.map

package/dist/components/FontLoader/FontLoader.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontLoader.types.d.ts","sourceRoot":"","sources":["../../../src/components/FontLoader/FontLoader.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist/components/FontLoader/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * FontLoader Component - Loads brand fonts from Google Fonts.
+ *
+ * Note: ThemeProvider automatically includes FontLoader by default.
+ * Only use directly if disabling auto-loading.
+ *
+ * @example
+ * ```tsx
+ * import { FontLoader } from '@orion-ds/react';
+ *
+ * // Usually not needed - ThemeProvider handles this automatically
+ * // Only use if you disabled auto-loading:
+ * <ThemeProvider disableAutoFontLoading>
+ *   <FontLoader />
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export { FontLoader } from './FontLoader';
+export type { FontLoaderProps } from './FontLoader.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FontLoader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FontLoader/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/FormSection/FormSection.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),$=require("lucide-react"),e=require("./FormSection.module.css.cjs"),m=r.forwardRef(({label:t,helpText:d,children:o,columns:l=1,className:s,...n},i)=>{const u=[e.default.group,e.default[`columns-${l}`],s].filter(Boolean).join(" ");return a.jsxs("div",{ref:i,className:u,...n,children:[t&&a.jsx("div",{className:e.default.groupLabel,children:t}),a.jsx("div",{className:e.default.groupFields,children:o}),d&&a.jsx("div",{className:e.default.groupHelp,children:d})]})});m.displayName="FormSection.Group";const j=r.forwardRef(({children:t,align:d="end",className:o,...l},s)=>{const n=[e.default.actions,e.default[`align-${d}`],o].filter(Boolean).join(" ");return a.jsx("div",{ref:s,className:n,...l,children:t})});j.displayName="FormSection.Actions";const N=r.forwardRef(({title:t,description:d,children:o,actions:l,collapsible:s=!1,defaultCollapsed:n=!1,divider:i=!1,variant:u="default",icon:f,disabled:h=!1,className:x,...p},v)=>{const[c,S]=r.useState(n),g=[e.default.formSection,e.default[`variant-${u}`],i&&e.default.divider,h&&e.default.disabled,s&&e.default.collapsible,c&&e.default.collapsed,x].filter(Boolean).join(" "),F=()=>{s&&S(!c)},y=s?"button":"div",R=s?{type:"button",onClick:F,"aria-expanded":!c}:{},C=t||f||s;return a.jsxs("div",{ref:v,className:g,...p,children:[C&&a.jsxs(y,{className:e.default.header,...R,children:[a.jsxs("div",{className:e.default.headerContent,children:[f&&a.jsx("span",{className:e.default.icon,children:f}),(t||d)&&a.jsxs("div",{className:e.default.headerText,children:[t&&a.jsx("h3",{className:e.default.title,children:t}),d&&a.jsx("p",{className:e.default.description,children:d})]})]}),s&&a.jsx($.ChevronDown,{size:20,className:`${e.default.collapseIcon} ${c?e.default.iconCollapsed:""}`})]}),(!s||!c)&&a.jsxs("div",{className:e.default.content,children:[a.jsx("div",{className:e.default.fields,children:o}),l&&a.jsx("div",{className:e.default.actionsWrapper,children:l})]})]})});N.displayName="FormSection";const q=Object.assign(N,{Group:m,Actions:j});exports.FormSection=q;

package/dist/components/FormSection/FormSection.d.ts

@@ -0,0 +1,7 @@
+import { FormSectionProps, FormSectionGroupProps, FormSectionActionsProps } from './FormSection.types';
+
+export declare const FormSection: import('react').ForwardRefExoticComponent<FormSectionProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Group: import('react').ForwardRefExoticComponent<FormSectionGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+    Actions: import('react').ForwardRefExoticComponent<FormSectionActionsProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=FormSection.d.ts.map

package/dist/components/FormSection/FormSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.d.ts","sourceRoot":"","sources":["../../../src/components/FormSection/FormSection.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EACV,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;AAgI7B,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

package/dist/components/FormSection/FormSection.mjs

@@ -0,0 +1,84 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { forwardRef as p, useState as B } from "react";
+import { ChevronDown as H } from "lucide-react";
+import e from "./FormSection.module.css.mjs";
+const h = p(
+  ({ label: o, helpText: n, children: i, columns: r = 1, className: s, ...d }, t) => {
+    const m = [e.group, e[`columns-${r}`], s].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c("div", { ref: t, className: m, ...d, children: [
+      o && /* @__PURE__ */ a("div", { className: e.groupLabel, children: o }),
+      /* @__PURE__ */ a("div", { className: e.groupFields, children: i }),
+      n && /* @__PURE__ */ a("div", { className: e.groupHelp, children: n })
+    ] });
+  }
+);
+h.displayName = "FormSection.Group";
+const f = p(
+  ({ children: o, align: n = "end", className: i, ...r }, s) => {
+    const d = [e.actions, e[`align-${n}`], i].filter(Boolean).join(" ");
+    return /* @__PURE__ */ a("div", { ref: s, className: d, ...r, children: o });
+  }
+);
+f.displayName = "FormSection.Actions";
+const u = p(
+  ({
+    title: o,
+    description: n,
+    children: i,
+    actions: r,
+    collapsible: s = !1,
+    defaultCollapsed: d = !1,
+    divider: t = !1,
+    variant: m = "default",
+    icon: N,
+    disabled: v = !1,
+    className: g,
+    ...S
+  }, F) => {
+    const [l, j] = B(d), y = [
+      e.formSection,
+      e[`variant-${m}`],
+      t && e.divider,
+      v && e.disabled,
+      s && e.collapsible,
+      l && e.collapsed,
+      g
+    ].filter(Boolean).join(" "), C = () => {
+      s && j(!l);
+    }, $ = s ? "button" : "div", x = s ? {
+      type: "button",
+      onClick: C,
+      "aria-expanded": !l
+    } : {};
+    return /* @__PURE__ */ c("div", { ref: F, className: y, ...S, children: [
+      (o || N || s) && /* @__PURE__ */ c($, { className: e.header, ...x, children: [
+        /* @__PURE__ */ c("div", { className: e.headerContent, children: [
+          N && /* @__PURE__ */ a("span", { className: e.icon, children: N }),
+          (o || n) && /* @__PURE__ */ c("div", { className: e.headerText, children: [
+            o && /* @__PURE__ */ a("h3", { className: e.title, children: o }),
+            n && /* @__PURE__ */ a("p", { className: e.description, children: n })
+          ] })
+        ] }),
+        s && /* @__PURE__ */ a(
+          H,
+          {
+            size: 20,
+            className: `${e.collapseIcon} ${l ? e.iconCollapsed : ""}`
+          }
+        )
+      ] }),
+      (!s || !l) && /* @__PURE__ */ c("div", { className: e.content, children: [
+        /* @__PURE__ */ a("div", { className: e.fields, children: i }),
+        r && /* @__PURE__ */ a("div", { className: e.actionsWrapper, children: r })
+      ] })
+    ] });
+  }
+);
+u.displayName = "FormSection";
+const z = Object.assign(u, {
+  Group: h,
+  Actions: f
+});
+export {
+  z as FormSection
+};

package/dist/components/FormSection/FormSection.module.css

@@ -0,0 +1 @@
+._formSection_fr6de_8{display:flex;flex-direction:column}._divider_fr6de_13{border-bottom:1px solid var(--border-subtle);padding-bottom:var(--mode-spacing-block);margin-bottom:var(--mode-spacing-block)}._disabled_fr6de_19{opacity:.6;pointer-events:none}._header_fr6de_28{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-4);width:100%;text-align:left;background:none;border:none;padding:0;margin-bottom:var(--mode-spacing-element)}._collapsible_fr6de_41 ._header_fr6de_28{cursor:pointer;padding:var(--spacing-3);margin:calc(var(--spacing-3) * -1);margin-bottom:var(--spacing-3);border-radius:var(--radius-sm);transition:background-color var(--mode-hover-duration)}._collapsible_fr6de_41 ._header_fr6de_28:hover{background:var(--surface-subtle)}._collapsed_fr6de_54 ._header_fr6de_28{margin-bottom:0}._headerContent_fr6de_58{display:flex;align-items:flex-start;gap:var(--spacing-3)}._headerText_fr6de_64{flex:1;min-width:0}._icon_fr6de_69{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--surface-subtle);border-radius:var(--radius-control);color:var(--interactive-primary);flex-shrink:0}._title_fr6de_81{font-family:var(--font-secondary);font-size:var(--font-size-16);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0;line-height:var(--line-height-tight)}._description_fr6de_90{font-family:var(--font-secondary);font-size:var(--font-size-13);color:var(--text-secondary);margin:var(--spacing-1) 0 0 0;line-height:var(--line-height-relaxed)}._collapseIcon_fr6de_98{color:var(--text-tertiary);flex-shrink:0;transition:transform var(--mode-hover-duration)}._iconCollapsed_fr6de_104{transform:rotate(-90deg)}._content_fr6de_112{display:flex;flex-direction:column;gap:var(--mode-spacing-element)}._fields_fr6de_118{display:flex;flex-direction:column;gap:var(--spacing-4)}._actionsWrapper_fr6de_124{margin-top:var(--spacing-4);padding-top:var(--spacing-4);border-top:1px solid var(--border-subtle)}._group_fr6de_134{display:flex;flex-direction:column;gap:var(--spacing-2)}._groupLabel_fr6de_140{font-family:var(--font-secondary);font-size:var(--font-size-13);font-weight:var(--font-weight-medium);color:var(--text-secondary)}._groupFields_fr6de_147{display:grid;gap:var(--spacing-4)}._columns-1_fr6de_152 ._groupFields_fr6de_147{grid-template-columns:1fr}._columns-2_fr6de_156 ._groupFields_fr6de_147{grid-template-columns:repeat(2,1fr)}._columns-3_fr6de_160 ._groupFields_fr6de_147{grid-template-columns:repeat(3,1fr)}._groupHelp_fr6de_164{font-family:var(--font-secondary);font-size:var(--font-size-12);color:var(--text-tertiary);line-height:var(--line-height-relaxed)}._actions_fr6de_124{display:flex;align-items:center;gap:var(--spacing-3);flex-wrap:wrap}._align-start_fr6de_182{justify-content:flex-start}._align-center_fr6de_186{justify-content:center}._align-end_fr6de_190{justify-content:flex-end}._align-between_fr6de_194{justify-content:space-between}._variant-card_fr6de_202{background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-container);padding:var(--mode-spacing-element)}._variant-card_fr6de_202 ._header_fr6de_28{margin-bottom:var(--spacing-4)}._variant-card_fr6de_202 ._actionsWrapper_fr6de_124{margin-top:var(--spacing-6)}._variant-inline_fr6de_221{display:grid;grid-template-columns:280px 1fr;gap:var(--spacing-8)}._variant-inline_fr6de_221 ._header_fr6de_28{margin-bottom:0;position:sticky;top:var(--spacing-4);align-self:start}._variant-inline_fr6de_221 ._content_fr6de_112{flex:1}._variant-inline_fr6de_221 ._collapseIcon_fr6de_98{display:none}@media(max-width:768px){._variant-inline_fr6de_221{grid-template-columns:1fr;gap:var(--spacing-4)}._variant-inline_fr6de_221 ._header_fr6de_28{position:static}._columns-2_fr6de_156 ._groupFields_fr6de_147,._columns-3_fr6de_160 ._groupFields_fr6de_147{grid-template-columns:1fr}}

package/dist/components/FormSection/FormSection.module.css.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_formSection_fr6de_8",o="_divider_fr6de_13",n="_disabled_fr6de_19",r="_header_fr6de_28",_="_collapsible_fr6de_41",t="_collapsed_fr6de_54",d="_headerContent_fr6de_58",l="_headerText_fr6de_64",c="_icon_fr6de_69",i="_title_fr6de_81",s="_description_fr6de_90",a="_collapseIcon_fr6de_98",p="_iconCollapsed_fr6de_104",f="_content_fr6de_112",u="_fields_fr6de_118",g="_actionsWrapper_fr6de_124",b="_group_fr6de_134",h="_groupLabel_fr6de_140",m="_groupFields_fr6de_147",v="_groupHelp_fr6de_164",C="_actions_fr6de_124",S={formSection:e,divider:o,disabled:n,header:r,collapsible:_,collapsed:t,headerContent:d,headerText:l,icon:c,title:i,description:s,collapseIcon:a,iconCollapsed:p,content:f,fields:u,actionsWrapper:g,group:b,groupLabel:h,groupFields:m,"columns-1":"_columns-1_fr6de_152","columns-2":"_columns-2_fr6de_156","columns-3":"_columns-3_fr6de_160",groupHelp:v,actions:C,"align-start":"_align-start_fr6de_182","align-center":"_align-center_fr6de_186","align-end":"_align-end_fr6de_190","align-between":"_align-between_fr6de_194","variant-card":"_variant-card_fr6de_202","variant-inline":"_variant-inline_fr6de_221"};exports.actions=C;exports.actionsWrapper=g;exports.collapseIcon=a;exports.collapsed=t;exports.collapsible=_;exports.content=f;exports.default=S;exports.description=s;exports.disabled=n;exports.divider=o;exports.fields=u;exports.formSection=e;exports.group=b;exports.groupFields=m;exports.groupHelp=v;exports.groupLabel=h;exports.header=r;exports.headerContent=d;exports.headerText=l;exports.icon=c;exports.iconCollapsed=p;exports.title=i;

package/dist/components/FormSection/FormSection.module.css.mjs

@@ -0,0 +1,56 @@
+const e = "_formSection_fr6de_8", _ = "_divider_fr6de_13", n = "_disabled_fr6de_19", o = "_header_fr6de_28", r = "_collapsible_fr6de_41", d = "_collapsed_fr6de_54", t = "_headerContent_fr6de_58", c = "_headerText_fr6de_64", l = "_icon_fr6de_69", s = "_title_fr6de_81", a = "_description_fr6de_90", i = "_collapseIcon_fr6de_98", f = "_iconCollapsed_fr6de_104", p = "_content_fr6de_112", g = "_fields_fr6de_118", u = "_actionsWrapper_fr6de_124", b = "_group_fr6de_134", h = "_groupLabel_fr6de_140", m = "_groupFields_fr6de_147", v = "_groupHelp_fr6de_164", C = "_actions_fr6de_124", x = {
+  formSection: e,
+  divider: _,
+  disabled: n,
+  header: o,
+  collapsible: r,
+  collapsed: d,
+  headerContent: t,
+  headerText: c,
+  icon: l,
+  title: s,
+  description: a,
+  collapseIcon: i,
+  iconCollapsed: f,
+  content: p,
+  fields: g,
+  actionsWrapper: u,
+  group: b,
+  groupLabel: h,
+  groupFields: m,
+  "columns-1": "_columns-1_fr6de_152",
+  "columns-2": "_columns-2_fr6de_156",
+  "columns-3": "_columns-3_fr6de_160",
+  groupHelp: v,
+  actions: C,
+  "align-start": "_align-start_fr6de_182",
+  "align-center": "_align-center_fr6de_186",
+  "align-end": "_align-end_fr6de_190",
+  "align-between": "_align-between_fr6de_194",
+  "variant-card": "_variant-card_fr6de_202",
+  "variant-inline": "_variant-inline_fr6de_221"
+};
+export {
+  C as actions,
+  u as actionsWrapper,
+  i as collapseIcon,
+  d as collapsed,
+  r as collapsible,
+  p as content,
+  x as default,
+  a as description,
+  n as disabled,
+  _ as divider,
+  g as fields,
+  e as formSection,
+  b as group,
+  m as groupFields,
+  v as groupHelp,
+  h as groupLabel,
+  o as header,
+  t as headerContent,
+  c as headerText,
+  l as icon,
+  f as iconCollapsed,
+  s as title
+};

package/dist/components/FormSection/FormSection.types.d.ts

@@ -0,0 +1,108 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * FormSection visual variant
+ */
+export type FormSectionVariant = "default" | "card" | "inline";
+/**
+ * FormSection section props
+ *
+ * @example
+ * ```tsx
+ * <FormSection
+ *   title="Profile Information"
+ *   description="Update your personal details"
+ * >
+ *   <Field label="Name" type="text" />
+ *   <Field label="Email" type="email" />
+ * </FormSection>
+ * ```
+ */
+export interface FormSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Section title (optional)
+     * If not provided, header is omitted unless collapsible is true
+     */
+    title?: string;
+    /**
+     * Description text below title
+     */
+    description?: string;
+    /**
+     * Form field children
+     */
+    children: ReactNode;
+    /**
+     * Action buttons (save, cancel, etc.)
+     */
+    actions?: ReactNode;
+    /**
+     * Make section collapsible
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Default collapsed state (only when collapsible)
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Show divider below section
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Visual variant
+     * - default: Simple layout with border
+     * - card: Wrapped in card container
+     * - inline: Side-by-side title/fields layout
+     * @default 'default'
+     */
+    variant?: FormSectionVariant;
+    /**
+     * Custom icon for section header
+     */
+    icon?: ReactNode;
+    /**
+     * Disable all fields in section
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * FormSection.Group props for grouping related fields
+ */
+export interface FormSectionGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Group label
+     */
+    label?: string;
+    /**
+     * Help text for the group
+     */
+    helpText?: string;
+    /**
+     * Field children
+     */
+    children: ReactNode;
+    /**
+     * Number of columns for field layout
+     * @default 1
+     */
+    columns?: 1 | 2 | 3;
+}
+/**
+ * FormSection.Actions props for action button group
+ */
+export interface FormSectionActionsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Action button children
+     */
+    children: ReactNode;
+    /**
+     * Alignment of actions
+     * @default 'end'
+     */
+    align?: "start" | "center" | "end" | "between";
+}
+//# sourceMappingURL=FormSection.types.d.ts.map

package/dist/components/FormSection/FormSection.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.types.d.ts","sourceRoot":"","sources":["../../../src/components/FormSection/FormSection.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;CAChD"}

package/dist/components/FormSection/index.d.ts

@@ -0,0 +1,3 @@
+export { FormSection } from './FormSection';
+export type { FormSectionProps, FormSectionVariant, FormSectionGroupProps, FormSectionActionsProps, } from './FormSection.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FormSection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormSection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC"}

package/dist/components/Icon/Icon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react/jsx-runtime"),t=require("react"),n=require("./Icon.module.css.cjs"),S={xs:12,sm:16,md:20,lg:24,xl:32},l=t.forwardRef(({icon:i,size:e="md",color:s="current",strokeWidth:d=2,label:a,decorative:c=!1,disabled:f=!1,className:o,style:u,...m},p)=>{const h=t.useMemo(()=>typeof e=="number"?e:S[e],[e]),g=t.useMemo(()=>{const r=[n.default.icon];return typeof e=="string"&&r.push(n.default[e]),r.push(n.default[s]),f&&r.push(n.default.disabled),o&&r.push(o),r.filter(Boolean).join(" ")},[e,s,f,o]),y=t.useMemo(()=>c?{"aria-hidden":!0,role:"presentation"}:{"aria-label":a,role:"img"},[c,a]),M=t.useMemo(()=>typeof e=="number"?{width:e,height:e,...u}:u,[e,u]);return I.jsx(i,{ref:p,className:g,size:h,strokeWidth:d,style:M,...y,...m})});l.displayName="Icon";exports.Icon=l;

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from './Icon.types';
+
+export declare const Icon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAexD,eAAO,MAAM,IAAI,qGA0FhB,CAAC"}