@orion-ds/react 4.2.1 → 4.2.4

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.d.ts

@@ -0,0 +1,64 @@
+/**
+ * FontLoader Component
+ *
+ * Automatically injects Google Fonts into the document head.
+ * This ensures all brand fonts are available without manual HTML setup.
+ *
+ * **Note:** Since v1.1.4, ThemeProvider includes FontLoader automatically.
+ * You don't need to add this component manually unless you've disabled
+ * auto font loading with `disableAutoFontLoading` prop.
+ *
+ * @example
+ * ```tsx
+ * // ThemeProvider loads fonts automatically - no FontLoader needed!
+ * import { ThemeProvider } from '@orion-ds/react';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <YourComponents />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Use standalone only if you need callbacks or custom loading behavior
+ * <FontLoader onLoad={() => console.log('Fonts ready!')} />
+ * ```
+ */
+export interface FontLoaderProps {
+    /**
+     * Callback when fonts are loaded
+     */
+    onLoad?: () => void;
+    /**
+     * Callback when fonts fail to load
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Show loading state while fonts are loading
+     * @default false
+     */
+    showLoadingState?: boolean;
+    /**
+     * Custom loading component
+     */
+    loadingComponent?: React.ReactNode;
+    /**
+     * Children to render (will wait for fonts if showLoadingState is true)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * 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":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAUH,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;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;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/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';
+//# 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,cAAc,CAAC"}

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":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,OAAO,KAAK,EACV,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;AAyH7B,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

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.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FormSection } from './FormSection';
+
+declare const meta: Meta<typeof FormSection>;
+export default meta;
+type Story = StoryObj<typeof FormSection>;
+export declare const Default: Story;
+export declare const WithIcon: Story;
+export declare const CardVariant: Story;
+export declare const InlineVariant: Story;
+export declare const Collapsible: Story;
+export declare const CollapsedByDefault: Story;
+export declare const WithDivider: Story;
+export declare const MultipleGroups: Story;
+//# sourceMappingURL=FormSection.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FormSection/FormSection.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAsBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmFzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAuDzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA8B5B,CAAC"}

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

@@ -0,0 +1,107 @@
+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
+     */
+    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;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;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.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":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAexD,eAAO,MAAM,IAAI,qGA0FhB,CAAC"}

package/dist/components/Icon/Icon.module.css

@@ -0,0 +1 @@
+._icon_3txcc_9{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:currentColor;transition:color var(--transition-fast),opacity var(--transition-fast)}._xs_3txcc_29,._sm_3txcc_34{width:var(--icon-size-sm);height:var(--icon-size-sm)}._md_3txcc_39{width:var(--icon-size-md);height:var(--icon-size-md)}._lg_3txcc_44{width:var(--icon-size-lg);height:var(--icon-size-lg)}._xl_3txcc_49{width:var(--icon-size-xl);height:var(--icon-size-xl)}._current_3txcc_58{color:currentColor}._primary_3txcc_62{color:var(--text-primary)}._secondary_3txcc_66{color:var(--text-secondary)}._tertiary_3txcc_70{color:var(--text-tertiary)}._brand_3txcc_74{color:var(--text-brand)}._success_3txcc_78{color:var(--status-success)}._warning_3txcc_82{color:var(--status-warning)}._error_3txcc_86{color:var(--status-error)}._info_3txcc_90{color:var(--status-info)}._inverse_3txcc_94{color:var(--text-inverse)}._disabled_3txcc_102{opacity:.5;pointer-events:none}

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

@@ -0,0 +1,69 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Icon.types').IconProps & import('react').RefAttributes<SVGSVGElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        icon: {
+            control: false;
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        strokeWidth: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        decorative: {
+            control: "boolean";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SizeXS: Story;
+export declare const SizeSM: Story;
+export declare const SizeMD: Story;
+export declare const SizeLG: Story;
+export declare const SizeXL: Story;
+export declare const CustomPixelSize: Story;
+export declare const ColorPrimary: Story;
+export declare const ColorSecondary: Story;
+export declare const ColorBrand: Story;
+export declare const ColorSuccess: Story;
+export declare const ColorWarning: Story;
+export declare const ColorError: Story;
+export declare const ColorInfo: Story;
+export declare const Disabled: Story;
+export declare const SemanticIcon: Story;
+export declare const DecorativeIcon: Story;
+export declare const ThinStroke: Story;
+export declare const ThickStroke: Story;
+export declare const AllSizes: Story;
+export declare const StatusIcons: Story;
+export declare const CommonIcons: Story;
+export declare const AllVariants: Story;
+//# sourceMappingURL=Icon.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAiBvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA4IzB,CAAC"}

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

@@ -0,0 +1,95 @@
+import { LucideIcon, LucideProps } from 'lucide-react';
+import { SVGProps } from 'react';
+
+/**
+ * Icon size tokens (mapped to CSS variables)
+ * - xs: 12px (--icon-size-xs) - Badges, compact UI
+ * - sm: 16px (--icon-size-sm) - Inline text, small buttons
+ * - md: 20px (--icon-size-md) - Default for buttons/inputs
+ * - lg: 24px (--icon-size-lg) - Section headers
+ * - xl: 32px (--icon-size-xl) - Large callouts
+ */
+export type IconSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Icon color variants (mapped to semantic tokens)
+ */
+export type IconColor = "current" | "primary" | "secondary" | "tertiary" | "brand" | "success" | "warning" | "error" | "info" | "inverse";
+/**
+ * Icon component props
+ *
+ * @example Decorative icon (hidden from screen readers)
+ * ```tsx
+ * import { Icon } from '@orion/react';
+ * import { Search } from 'lucide-react';
+ *
+ * <Icon icon={Search} size="md" decorative />
+ * ```
+ *
+ * @example Semantic icon (announced to screen readers)
+ * ```tsx
+ * <Icon icon={AlertCircle} size="lg" label="Warning" color="warning" />
+ * ```
+ *
+ * @example Custom size in pixels
+ * ```tsx
+ * <Icon icon={Star} size={18} />
+ * ```
+ */
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Lucide icon component to render
+     * Import directly from lucide-react for tree-shaking
+     *
+     * @example
+     * import { Search } from 'lucide-react';
+     * <Icon icon={Search} />
+     */
+    icon: LucideIcon;
+    /**
+     * Icon size - uses design tokens or custom pixel value
+     * @default 'md'
+     */
+    size?: IconSize | number;
+    /**
+     * Icon color variant - uses semantic tokens
+     * @default 'current'
+     */
+    color?: IconColor;
+    /**
+     * Stroke width (Lucide default: 2)
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * Accessible label for screen readers
+     * Required when decorative=false
+     *
+     * @example
+     * <Icon icon={AlertCircle} label="Error occurred" />
+     */
+    label?: string;
+    /**
+     * Mark icon as decorative (hidden from screen readers)
+     * Use when icon is purely visual and adjacent text provides meaning
+     * @default false
+     *
+     * @example
+     * <Button icon={<Icon icon={Search} decorative />}>Search</Button>
+     */
+    decorative?: boolean;
+    /**
+     * Disabled state (applies muted styling)
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+/**
+ * Props passed to Lucide icon components
+ * Used internally for consistent rendering
+ */
+export type IconRenderProps = LucideProps;
+//# sourceMappingURL=Icon.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.types.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC;;;;;;;GAOG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,SAAS,CAAC;AAEd;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IACrE;;;;;;;OAOG;IACH,IAAI,EAAE,UAAU,CAAC;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC"}

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

@@ -0,0 +1,21 @@
+/**
+ * Icon Component - Render Lucide icons with Orion styling.
+ *
+ * Prefer importing icons directly from lucide-react for better tree-shaking.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@orion-ds/react';
+ * // Or directly: import { Search, Settings } from 'lucide-react';
+ *
+ * <Icon name="search" size="md" />
+ * <Icon name="settings" size="lg" color="brand" />
+ *
+ * // Preferred: Direct import from lucide-react
+ * import { Search } from 'lucide-react';
+ * <Search size={20} />
+ * ```
+ */
+export { Icon } from './Icon';
+export type { IconProps, IconSize, IconColor, IconRenderProps, } from './Icon.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,GAChB,MAAM,cAAc,CAAC"}

package/dist/components/IconGallery/IconGallery.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IconGalleryProps } from './IconGallery.types';
+
+export declare const IconGallery: React.FC<IconGalleryProps>;
+//# sourceMappingURL=IconGallery.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconGallery.d.ts","sourceRoot":"","sources":["../../../src/components/IconGallery/IconGallery.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAuG5D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8HlD,CAAC"}

package/dist/components/IconGallery/IconGallery.module.css

@@ -0,0 +1 @@
+._gallery_nbesj_7{padding:var(--spacing-8);background:var(--surface-base);min-height:100vh}._header_nbesj_14{margin-bottom:var(--spacing-6);text-align:center}._header_nbesj_14 h1{font-size:var(--font-size-32);font-weight:700;color:var(--text-primary);margin:0 0 var(--spacing-2) 0}._header_nbesj_14 p{font-size:var(--font-size-16);color:var(--text-secondary);margin:0}._searchContainer_nbesj_33{position:relative;max-width:400px;margin:0 auto var(--spacing-6)}._searchIcon_nbesj_39{position:absolute;left:var(--spacing-3);top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none}._searchInput_nbesj_48{width:100%;padding:var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-10);font-size:var(--font-size-16);border:2px solid var(--border-subtle);border-radius:var(--radius-control);background:var(--surface-layer);color:var(--text-primary);transition:border-color var(--transition-fast)}._searchInput_nbesj_48:focus{outline:none;border-color:var(--interactive-primary);background:var(--surface-base)}._searchInput_nbesj_48::placeholder{color:var(--text-tertiary)}._resultCount_nbesj_69{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--font-size-13);color:var(--text-secondary);pointer-events:none}._categories_nbesj_80{display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin-bottom:var(--spacing-6);justify-content:center}._categoryBtn_nbesj_88{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-14);font-weight:500;background:var(--surface-subtle);color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-control);cursor:pointer;transition:all var(--transition-fast)}._categoryBtn_nbesj_88:hover{background:var(--surface-layer);color:var(--text-primary);border-color:var(--border-strong)}._categoryBtn_nbesj_88._active_nbesj_106{background:var(--interactive-primary);color:var(--interactive-primary-text);border-color:var(--interactive-primary)}._iconGrid_nbesj_113{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--spacing-3);max-width:1400px;margin:0 auto var(--spacing-8)}._iconItem_nbesj_121{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-1);padding:var(--spacing-3);background:var(--surface-layer);border:1px solid var(--border-subtle);border-radius:var(--radius-control);cursor:pointer;transition:all var(--transition-fast);position:relative;min-height:80px}._iconItem_nbesj_121:hover{background:var(--surface-base);border-color:var(--interactive-primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}._iconItem_nbesj_121:focus{outline:none;border-color:var(--interactive-primary);box-shadow:0 0 0 3px var(--interactive-primary-subtle)}._iconDisplay_nbesj_149{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--text-primary)}._iconName_nbesj_158{font-size:var(--font-size-11);color:var(--text-secondary);text-align:center;word-break:break-word;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}._copiedBadge_nbesj_172{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--interactive-primary);color:var(--interactive-primary-text);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);font-size:var(--font-size-11);font-weight:600;animation:_fadeInOut_nbesj_1 1.5s ease;z-index:var(--z-dropdown);pointer-events:none}@keyframes _fadeInOut_nbesj_1{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}._noResults_nbesj_208{text-align:center;padding:var(--spacing-8);color:var(--text-secondary)}._noResults_nbesj_208 p{margin:0;font-size:var(--font-size-16)}._usageInfo_nbesj_220{max-width:600px;margin:var(--spacing-8) auto 0;padding:var(--spacing-4);background:var(--surface-layer);border-radius:var(--radius-control);border:1px solid var(--border-subtle)}._usageInfo_nbesj_220 h3{margin:0 0 var(--spacing-3) 0;font-size:var(--font-size-16);color:var(--text-primary)}._codeBlock_nbesj_235{margin:0;padding:var(--spacing-3);background:var(--surface-base);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);overflow-x:auto;font-family:var(--font-mono);font-size:var(--font-size-13);color:var(--text-primary);line-height:1.5}@media(max-width:768px){._gallery_nbesj_7{padding:var(--spacing-4)}._header_nbesj_14 h1{font-size:var(--font-size-24)}._searchContainer_nbesj_33{max-width:100%}._categories_nbesj_80{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:var(--spacing-2);-webkit-overflow-scrolling:touch}._categoryBtn_nbesj_88{flex-shrink:0}._iconGrid_nbesj_113{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--spacing-2)}._iconItem_nbesj_121{min-height:70px;padding:var(--spacing-2)}._iconDisplay_nbesj_149{width:32px;height:32px}._iconName_nbesj_158{font-size:var(--font-size-10)}}@media(max-width:480px){._header_nbesj_14 h1{font-size:var(--font-size-20)}._iconGrid_nbesj_113{grid-template-columns:repeat(3,1fr)}._usageInfo_nbesj_220{padding:var(--spacing-3)}._codeBlock_nbesj_235{font-size:var(--font-size-12);padding:var(--spacing-2)}}

package/dist/components/IconGallery/IconGallery.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IconGallery } from './IconGallery';
+
+declare const meta: Meta<typeof IconGallery>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Browse: Story;
+//# sourceMappingURL=IconGallery.stories.d.ts.map