@orion-ds/react 1.1.6 → 1.2.0

package/dist/sections/FileUploader/FileUploader.types.d.ts

@@ -0,0 +1,129 @@
+/**
+ * FileUploader Component Types
+ *
+ * Type definitions for the Orion FileUploader section component.
+ * A drag & drop file upload zone for SaaS applications.
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Uploaded file item
+ */
+export interface UploadedFile {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * File name
+     */
+    name: string;
+    /**
+     * File size in bytes
+     */
+    size: number;
+    /**
+     * MIME type
+     */
+    type: string;
+    /**
+     * Upload progress (0-100)
+     */
+    progress?: number;
+    /**
+     * Upload status
+     */
+    status: 'pending' | 'uploading' | 'completed' | 'error';
+    /**
+     * Error message if status is 'error'
+     */
+    error?: string;
+    /**
+     * Preview URL (for images)
+     */
+    preview?: string;
+    /**
+     * Original File object
+     */
+    file?: File;
+}
+/**
+ * FileUploader section props
+ *
+ * @example
+ * ```tsx
+ * <FileUploader
+ *   accept={['image/*', '.pdf']}
+ *   maxFiles={5}
+ *   maxSize={10 * 1024 * 1024}
+ *   onFilesAdded={(files) => handleUpload(files)}
+ * />
+ * ```
+ */
+export interface FileUploaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Accepted file types (MIME types or extensions)
+     */
+    accept?: string[];
+    /**
+     * Maximum number of files
+     */
+    maxFiles?: number;
+    /**
+     * Maximum file size in bytes
+     */
+    maxSize?: number;
+    /**
+     * Allow multiple files
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Callback when files are added
+     */
+    onFilesAdded?: (files: File[]) => void;
+    /**
+     * Callback when a file is removed
+     */
+    onFileRemove?: (fileId: string) => void;
+    /**
+     * Current uploaded files (controlled)
+     */
+    files?: UploadedFile[];
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Custom dropzone content
+     */
+    dropzoneContent?: ReactNode;
+    /**
+     * Custom placeholder text
+     * @default "Drag and drop files here, or click to browse"
+     */
+    placeholder?: string;
+    /**
+     * Show file list below dropzone
+     * @default true
+     */
+    showFileList?: boolean;
+    /**
+     * Compact mode
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Variant style
+     * @default "default"
+     */
+    variant?: 'default' | 'minimal' | 'card';
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Helper text
+     */
+    helperText?: string;
+}
+//# sourceMappingURL=FileUploader.types.d.ts.map

package/dist/sections/FileUploader/FileUploader.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.types.d.ts","sourceRoot":"","sources":["../../../src/sections/FileUploader/FileUploader.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,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,EAAE,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;IAExD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACzF;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAEzC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/sections/FileUploader/index.d.ts

@@ -0,0 +1,3 @@
+export { FileUploader } from './FileUploader';
+export type { FileUploaderProps, UploadedFile } from './FileUploader.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/sections/FileUploader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sections/FileUploader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/sections/FilterBar/FilterBar.d.ts

@@ -0,0 +1,21 @@
+/**
+ * FilterBar Component
+ *
+ * Horizontal filter controls with chips for SaaS dashboards.
+ * Optimized for Product Mode with efficient filtering interactions.
+ *
+ * @example
+ * ```tsx
+ * <FilterBar
+ *   filters={[
+ *     { key: 'status', label: 'Status', type: 'select', options: statusOptions }
+ *   ]}
+ *   activeFilters={activeFilters}
+ *   onFilterChange={handleFilterChange}
+ *   onFilterRemove={handleFilterRemove}
+ * />
+ * ```
+ */
+import type { FilterBarProps } from './FilterBar.types';
+export declare const FilterBar: import("react").ForwardRefExoticComponent<FilterBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FilterBar.d.ts.map

package/dist/sections/FilterBar/FilterBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../../src/sections/FilterBar/FilterBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAkC,MAAM,mBAAmB,CAAC;AAoExF,eAAO,MAAM,SAAS,2GAiIrB,CAAC"}

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

@@ -0,0 +1,144 @@
+/**
+ * FilterBar Component Types
+ *
+ * Type definitions for the Orion FilterBar section component.
+ * Horizontal filter controls with chips for SaaS dashboards.
+ */
+import type { 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/sections/FilterBar/FilterBar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.types.d.ts","sourceRoot":"","sources":["../../../src/sections/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,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAExG;;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/sections/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/sections/FilterBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sections/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/sections/FormSection/FormSection.d.ts

@@ -0,0 +1,27 @@
+/**
+ * FormSection Component
+ *
+ * A form section for settings pages and structured form layouts.
+ * Optimized for Product Mode with clear hierarchy and efficient space usage.
+ *
+ * @example
+ * ```tsx
+ * <FormSection
+ *   title="Profile Information"
+ *   description="Update your personal details"
+ *   actions={<Button>Save</Button>}
+ * >
+ *   <FormSection.Group columns={2}>
+ *     <Field label="First Name" type="text" />
+ *     <Field label="Last Name" type="text" />
+ *   </FormSection.Group>
+ *   <Field label="Email" type="email" />
+ * </FormSection>
+ * ```
+ */
+import type { 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/sections/FormSection/FormSection.d.ts.map

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

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

@@ -0,0 +1,112 @@
+/**
+ * FormSection Component Types
+ *
+ * Type definitions for the Orion FormSection section component.
+ * Designed for Product Mode (SaaS dashboards) settings and form layouts.
+ */
+import type { 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/sections/FormSection/FormSection.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.types.d.ts","sourceRoot":"","sources":["../../../src/sections/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/sections/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/sections/FormSection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sections/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/sections/Hero/Hero.d.ts

@@ -16,7 +16,24 @@
  *   size="lg"
  * />
  * ```
+ *
+ * @example Fullscreen with background
+ * ```tsx
+ * <Hero
+ *   layout="fullscreen"
+ *   variant="background"
+ *   backgroundImage="/hero.jpg"
+ *   headline={<>Build <Hero.Highlight>faster</Hero.Highlight></>}
+ *   primaryAction={<Button size="lg">Get Started</Button>}
+ * />
+ * ```
  */
 import type { HeroProps } from './Hero.types';
-export declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & import("react").RefAttributes<HTMLElement>>;
+import { HeroHighlight } from './HeroHighlight';
+declare const HeroBase: import("react").ForwardRefExoticComponent<HeroProps & import("react").RefAttributes<HTMLElement>>;
+type HeroComponent = typeof HeroBase & {
+    Highlight: typeof HeroHighlight;
+};
+export declare const Hero: HeroComponent;
+export {};
 //# sourceMappingURL=Hero.d.ts.map

package/dist/sections/Hero/Hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/sections/Hero/Hero.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK9C,eAAO,MAAM,IAAI,mGAsEhB,CAAC"}
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/sections/Hero/Hero.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AA2BhD,QAAA,MAAM,QAAQ,mGA4Gb,CAAC;AAKF,KAAK,aAAa,GAAG,OAAO,QAAQ,GAAG;IACrC,SAAS,EAAE,OAAO,aAAa,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,IAAI,EAAe,aAAa,CAAC"}

package/dist/sections/Hero/Hero.types.d.ts

@@ -12,6 +12,28 @@ export type HeroAlign = 'left' | 'center';
  * Hero size variants
  */
 export type HeroSize = 'sm' | 'md' | 'lg';
+/**
+ * Hero visual variant
+ * - 'default': Standard hero with optional side media
+ * - 'background': Full-width background image with content overlay
+ */
+export type HeroVariant = 'default' | 'background';
+/**
+ * Hero layout mode
+ * - 'contained': Default with container padding
+ * - 'fullscreen': 100vh height, vertically centered, edge-to-edge width
+ * - 'card': Inset with margins and border radius (floating card style)
+ */
+export type HeroLayout = 'contained' | 'fullscreen' | 'card';
+/**
+ * Props for HeroHighlight compound component
+ */
+export interface HeroHighlightProps {
+    /**
+     * Text content to highlight with brand gradient
+     */
+    children: ReactNode;
+}
 /**
  * Hero component props
  *
@@ -26,6 +48,16 @@ export type HeroSize = 'sm' | 'md' | 'lg';
  *   align="center"
  * />
  * ```
+ *
+ * @example Fullscreen with background
+ * ```tsx
+ * <Hero
+ *   layout="fullscreen"
+ *   variant="background"
+ *   backgroundImage="https://example.com/hero.jpg"
+ *   headline={<>Build <Hero.Highlight>faster</Hero.Highlight></>}
+ * />
+ * ```
  */
 export interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /**
@@ -33,7 +65,8 @@ export interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
      */
     badge?: ReactNode;
     /**
-     * Main headline text or element
+     * Main headline text or element.
+     * Can include <Hero.Highlight> for gradient text.
      */
     headline: ReactNode;
     /**
@@ -57,6 +90,11 @@ export interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
      * @default 'right'
      */
     mediaPosition?: 'left' | 'right' | 'bottom';
+    /**
+     * Show default placeholder image when media is not provided
+     * @default false
+     */
+    showDefaultMedia?: boolean;
     /**
      * Trust indicators (logos, badges, social proof)
      */
@@ -74,8 +112,39 @@ export interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
      * @default 'lg'
      */
     size?: HeroSize;
+    /**
+     * Hero layout mode
+     * - 'contained': Default with container padding
+     * - 'fullscreen': 100vh height, vertically centered, edge-to-edge width
+     * - 'card': Inset with margins and border radius
+     * @default 'contained'
+     */
+    layout?: HeroLayout;
+    /**
+     * Hero visual variant
+     * - 'default': Standard hero with optional side media
+     * - 'background': Full-width background image with content overlay
+     * @default 'default'
+     */
+    variant?: HeroVariant;
+    /**
+     * Background image URL (only applies when variant='background')
+     */
+    backgroundImage?: string;
+    /**
+     * Background overlay opacity (0-1). Only applies when variant='background'.
+     * @default 0.6
+     */
+    backgroundOverlay?: number;
+    /**
+     * Add elevation (shadow) to card layout.
+     * Only applies when layout='card'.
+     * @default false
+     */
+    elevated?: boolean;
     /**
      * Full viewport height
+     * @deprecated Use layout="fullscreen" instead
      * @default false
      */
     fullHeight?: boolean;

package/dist/sections/Hero/Hero.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.types.d.ts","sourceRoot":"","sources":["../../../src/sections/Hero/Hero.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC3E;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAE5C;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"Hero.types.d.ts","sourceRoot":"","sources":["../../../src/sections/Hero/Hero.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,YAAY,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC3E;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAE5C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/sections/Hero/HeroHighlight.d.ts

@@ -0,0 +1,19 @@
+/**
+ * HeroHighlight Component
+ *
+ * A compound component for Hero that applies a brand gradient to text.
+ * Used to highlight key words in headlines.
+ *
+ * @example
+ * ```tsx
+ * <Hero
+ *   headline={<>Build <Hero.Highlight>faster</Hero.Highlight> with Orion</>}
+ * />
+ * ```
+ */
+import type { HeroHighlightProps } from './Hero.types';
+export declare const HeroHighlight: {
+    ({ children }: HeroHighlightProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=HeroHighlight.d.ts.map

package/dist/sections/Hero/HeroHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroHighlight.d.ts","sourceRoot":"","sources":["../../../src/sections/Hero/HeroHighlight.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGvD,eAAO,MAAM,aAAa;mBAAkB,kBAAkB;;CAE7D,CAAC"}

package/dist/sections/Hero/index.d.ts

@@ -2,5 +2,6 @@
  * Hero Component Exports
  */
 export { Hero } from './Hero';
-export type { HeroProps, HeroAlign, HeroSize } from './Hero.types';
+export { HeroHighlight } from './HeroHighlight';
+export type { HeroProps, HeroAlign, HeroSize, HeroVariant, HeroLayout, HeroHighlightProps, } from './Hero.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/sections/Hero/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sections/Hero/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sections/Hero/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,WAAW,EACX,UAAU,EACV,kBAAkB,GACnB,MAAM,cAAc,CAAC"}