@orion-ds/react 4.2.1 → 4.2.4

package/dist/components/Field/Field.module.css

@@ -0,0 +1 @@
+._fieldContainer_aewgj_9{display:flex;flex-direction:column;gap:var(--spacing-2)}._fullWidth_aewgj_15{width:100%}._disabled_aewgj_19{opacity:.6}._label_aewgj_24{display:flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-secondary);font-size:var(--font-size-13);font-weight:var(--font-weight-medium);color:var(--text-primary);line-height:var(--line-height-tight);cursor:pointer}._disabled_aewgj_19 ._label_aewgj_24{cursor:not-allowed}._optional_aewgj_44{font-size:var(--font-size-11);font-weight:var(--font-weight-normal);color:var(--text-tertiary)}._required_aewgj_50{color:var(--status-error);font-weight:var(--font-weight-medium);margin-left:2px}._inputWrapper_aewgj_57{position:relative;display:flex;align-items:center}._input_aewgj_57{width:100%;display:block;font-family:var(--font-secondary);font-size:var(--font-size-16);line-height:var(--line-height-normal);color:var(--text-primary);background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-control);transition:all var(--transition-fast);outline:none}._input_aewgj_57::placeholder{color:var(--text-tertiary)}._input_aewgj_57:hover:not(:disabled):not(:read-only){border-color:var(--border-strong)}._input_aewgj_57:focus{border-color:var(--interactive-primary);box-shadow:0 0 0 3px var(--soft-brand)}._input_aewgj_57:focus-visible{border-color:var(--interactive-primary);box-shadow:0 0 0 3px var(--soft-brand);outline:2px solid var(--interactive-primary);outline-offset:2px}._input_aewgj_57:disabled{opacity:.5;cursor:not-allowed;background:var(--surface-subtle)}._input_aewgj_57:read-only{background:var(--surface-subtle);border-color:var(--border-subtle);cursor:default}._input_aewgj_57:-webkit-autofill,._input_aewgj_57:-webkit-autofill:hover,._input_aewgj_57:-webkit-autofill:focus{-webkit-text-fill-color:var(--text-primary);box-shadow:0 0 0 1000px var(--surface-subtle) inset;transition:background-color 5000s ease-in-out 0s}._error_aewgj_133 ._input_aewgj_57{border-color:var(--status-error)}._error_aewgj_133 ._input_aewgj_57:focus{border-color:var(--status-error);box-shadow:0 0 0 3px var(--soft-error)}._error_aewgj_133 ._input_aewgj_57:focus-visible{border-color:var(--status-error);box-shadow:0 0 0 3px var(--soft-error);outline:2px solid var(--status-error);outline-offset:2px}._leftIcon_aewgj_150,._rightIcon_aewgj_151{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);pointer-events:none}._leftIcon_aewgj_150{left:var(--spacing-3)}._rightIcon_aewgj_151{right:var(--spacing-3)}._rightIconInteractive_aewgj_171{pointer-events:auto}._rightIconInteractive_aewgj_171 button,._rightIconInteractive_aewgj_171 [role=button]{display:flex;align-items:center;justify-content:center;padding:var(--spacing-1);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-tertiary);transition:color var(--transition-fast)}._rightIconInteractive_aewgj_171 button:hover,._rightIconInteractive_aewgj_171 [role=button]:hover{color:var(--text-primary)}._rightIconInteractive_aewgj_171 button:focus-visible,._rightIconInteractive_aewgj_171 [role=button]:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._errorIconInline_aewgj_202{color:var(--status-error);pointer-events:none}._errorIconMessage_aewgj_208{flex-shrink:0}._sm_aewgj_213{height:32px;padding-top:0;padding-bottom:0;padding-left:var(--spacing-3);padding-right:var(--spacing-3);font-size:var(--font-size-12)}._md_aewgj_222{height:40px;padding-top:0;padding-bottom:0;padding-left:var(--spacing-4);padding-right:var(--spacing-4);font-size:var(--font-size-16)}._lg_aewgj_231{height:48px;padding-top:0;padding-bottom:0;padding-left:var(--spacing-4);padding-right:var(--spacing-4);font-size:var(--font-size-18)}._input_aewgj_57._hasLeftIcon_aewgj_241{padding-left:var(--spacing-10)}._input_aewgj_57._hasRightIcon_aewgj_245{padding-right:var(--spacing-10)}._helperText_aewgj_250{margin:0;font-family:var(--font-secondary);font-size:var(--font-size-12);color:var(--text-secondary);line-height:var(--line-height-snug)}._errorMessage_aewgj_259{display:flex;align-items:flex-start;gap:var(--spacing-1);margin:0;font-family:var(--font-secondary);font-size:var(--font-size-12);color:var(--status-error);line-height:var(--line-height-snug)}@media(forced-colors:active){._input_aewgj_57{border:2px solid CanvasText;background:Canvas;color:CanvasText}._input_aewgj_57:focus,._input_aewgj_57:focus-visible{outline:3px solid Highlight;outline-offset:2px}._input_aewgj_57:disabled{border-color:GrayText;color:GrayText}._error_aewgj_133 ._input_aewgj_57{border-color:LinkText}._errorMessage_aewgj_259,._errorIconInline_aewgj_202,._errorIconMessage_aewgj_208,._required_aewgj_50{color:LinkText}._leftIcon_aewgj_150,._rightIcon_aewgj_151{color:CanvasText}}@media(prefers-reduced-motion:reduce){._input_aewgj_57,._rightIconInteractive_aewgj_171 button,._rightIconInteractive_aewgj_171 [role=button]{transition:none}}

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

@@ -0,0 +1,60 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Field.types').FieldProps & import('react').RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        type: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Required: Story;
+export declare const WithHelper: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const EmailType: Story;
+export declare const PasswordType: Story;
+export declare const NumberType: Story;
+export declare const SearchType: Story;
+export declare const CompleteForm: Story;
+/**
+ * With Icons - Shows left and right icon support with proper accessibility.
+ */
+export declare const WithIcons: Story;
+/**
+ * Password Toggle - Accessible password visibility toggle using rightIcon.
+ * The button inside rightIcon is keyboard accessible and properly announced.
+ */
+export declare const PasswordToggle: Story;
+/**
+ * Search without Label - Using aria-label for icon-only search input.
+ * When no visible label is provided, aria-label is required for accessibility.
+ */
+export declare const SearchWithoutLabel: Story;
+/**
+ * External Description - Using aria-describedby with external content.
+ * The field can reference additional descriptive text outside the component.
+ */
+export declare const ExternalDescription: Story;
+/**
+ * Accessibility Overview - Demonstrates all accessibility features in one view.
+ */
+export declare const AccessibilityOverview: Story;
+//# sourceMappingURL=Field.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAiBoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAuB5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAyBjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAsHnC,CAAC"}

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

@@ -0,0 +1,190 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Field component props
+ *
+ * @important Field is PROPS-BASED, not a wrapper. It renders its own `<input>`.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Field
+ *   label="Email"
+ *   type="email"
+ *   placeholder="you@example.com"
+ * />
+ * ```
+ *
+ * @example With validation error
+ * ```tsx
+ * <Field
+ *   label="Email"
+ *   type="email"
+ *   value={email}
+ *   onChange={(e) => setEmail(e.target.value)}
+ *   error={emailError}
+ * />
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * import { Mail, Eye } from 'lucide-react';
+ *
+ * <Field
+ *   label="Email"
+ *   type="email"
+ *   leftIcon={<Mail size={18} />}
+ *   placeholder="you@example.com"
+ * />
+ * ```
+ *
+ * @example WRONG - Don't use children
+ * ```tsx
+ * // WRONG - Field doesn't accept children for input
+ * <Field label="Email">
+ *   <input type="email" />  // This won't work!
+ * </Field>
+ *
+ * // CORRECT - Use props
+ * <Field label="Email" type="email" />
+ * ```
+ */
+export interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Input label text displayed above the input.
+     * Required for accessibility unless aria-label is provided.
+     *
+     * @example
+     * ```tsx
+     * <Field label="Email Address" type="email" />
+     * ```
+     */
+    label?: string;
+    /**
+     * Error message - shows error state and displays message below input.
+     * Takes precedence over helperText when both are provided.
+     * Automatically associated with input via aria-describedby.
+     *
+     * @example
+     * ```tsx
+     * <Field
+     *   label="Email"
+     *   type="email"
+     *   error="Please enter a valid email address"
+     * />
+     * ```
+     */
+    error?: string;
+    /**
+     * Helper text displayed below input (when no error).
+     * Provides additional context or instructions.
+     *
+     * @example
+     * ```tsx
+     * <Field
+     *   label="Password"
+     *   type="password"
+     *   helperText="Must be at least 8 characters"
+     * />
+     * ```
+     */
+    helperText?: string;
+    /**
+     * Icon to display on the left side of input.
+     * Use 18px icons (size={18}) for best results.
+     *
+     * @example
+     * ```tsx
+     * import { Mail } from 'lucide-react';
+     * <Field leftIcon={<Mail size={18} />} label="Email" type="email" />
+     * ```
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Icon to display on the right side of input.
+     * Can be an icon or interactive element (e.g., password toggle).
+     *
+     * @example
+     * ```tsx
+     * import { Eye, EyeOff } from 'lucide-react';
+     *
+     * <Field
+     *   label="Password"
+     *   type={showPassword ? 'text' : 'password'}
+     *   rightIcon={
+     *     <button onClick={() => setShowPassword(!showPassword)}>
+     *       {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+     *     </button>
+     *   }
+     * />
+     * ```
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Full width input - expands to fill container.
+     *
+     * @example
+     * ```tsx
+     * <form style={{ maxWidth: '400px' }}>
+     *   <Field label="Name" fullWidth />
+     *   <Field label="Email" type="email" fullWidth />
+     * </form>
+     * ```
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Input size variant.
+     *
+     * @semanticGuide
+     * - `sm`: Dense UIs, tables, compact forms
+     * - `md`: Default - most forms (recommended)
+     * - `lg`: Prominent forms, search inputs
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Shows "(optional)" indicator next to label.
+     * Use when most fields are required but some are optional.
+     *
+     * @example
+     * ```tsx
+     * <Field label="Phone Number" type="tel" optional />
+     * ```
+     *
+     * @default false
+     */
+    optional?: boolean;
+    /**
+     * Accessible label for screen readers when no visible label is provided.
+     * REQUIRED if `label` prop is not provided.
+     *
+     * @example
+     * ```tsx
+     * // Icon-only search input
+     * <Field
+     *   aria-label="Search"
+     *   leftIcon={<Search size={18} />}
+     *   placeholder="Search..."
+     * />
+     * ```
+     */
+    "aria-label"?: string;
+    /**
+     * Additional element IDs that describe this input.
+     * Automatically includes error and helper text IDs when provided.
+     *
+     * @example
+     * ```tsx
+     * <p id="password-requirements">Must be 8+ characters</p>
+     * <Field
+     *   label="Password"
+     *   type="password"
+     *   aria-describedby="password-requirements"
+     * />
+     * ```
+     */
+    "aria-describedby"?: string;
+}
+//# sourceMappingURL=Field.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.types.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;;;OAYG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;;;;;;OAkBG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB;;;;;;;;;;;;;OAaG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;;;;;;OAaG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

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

@@ -0,0 +1,16 @@
+/**
+ * Field Component - Text input with label, validation, and icons.
+ *
+ * @example
+ * ```tsx
+ * import { Field } from '@orion-ds/react';
+ * import { Mail, Eye } from 'lucide-react';
+ *
+ * <Field label="Email" type="email" placeholder="you@example.com" />
+ * <Field label="Password" type="password" error="Required" />
+ * <Field label="Search" icon={<Search size={18} />} />
+ * ```
+ */
+export { Field } from './Field';
+export type { FieldProps } from './Field.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Field/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/FileUploader/FileUploader.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../../../src/components/FileUploader/FileUploader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAeH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAqB9D,eAAO,MAAM,YAAY,8GAoSxB,CAAC"}

package/dist/components/FileUploader/FileUploader.module.css

@@ -0,0 +1 @@
+._fileUploader_elcmy_8{display:flex;flex-direction:column;gap:var(--spacing-3)}._dropzone_elcmy_18{display:flex;align-items:center;justify-content:center;padding:var(--spacing-8);border:2px dashed var(--border-subtle);border-radius:var(--radius-control);background:var(--surface-subtle);cursor:pointer;transition:all var(--mode-hover-duration)}._dropzone_elcmy_18:hover{border-color:var(--border-default);background:var(--surface-layer)}._dropzone_elcmy_18:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._dropzoneDragging_elcmy_40{border-color:var(--interactive-primary);background:var(--surface-layer)}._dropzoneDisabled_elcmy_45{opacity:.5;cursor:not-allowed}._dropzoneDisabled_elcmy_45:hover{border-color:var(--border-subtle);background:var(--surface-subtle)}._dropzoneError_elcmy_55{border-color:var(--text-error)}._input_elcmy_59{display:none}._dropzoneContent_elcmy_63{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-3);text-align:center}._dropzoneIcon_elcmy_71{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-full);background:var(--surface-base);color:var(--text-tertiary)}._dropzonePlaceholder_elcmy_82{font-family:var(--font-secondary);font-size:var(--font-size-14);font-weight:var(--font-weight-medium);color:var(--text-secondary);margin:0}._dropzoneHints_elcmy_90{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-2) var(--spacing-4)}._dropzoneHint_elcmy_90,._helperText_elcmy_107{font-family:var(--font-secondary);font-size:var(--font-size-12);color:var(--text-tertiary)}._helperTextError_elcmy_113{color:var(--text-error)}._fileList_elcmy_121{display:flex;flex-direction:column;gap:var(--spacing-2);list-style:none;margin:0;padding:0}._fileItem_elcmy_130{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-3);background:var(--surface-subtle);border-radius:var(--radius-sm)}._fileIcon_elcmy_139{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--surface-base);color:var(--text-secondary);flex-shrink:0;overflow:hidden}._filePreview_elcmy_152{width:100%;height:100%;object-fit:cover}._fileInfo_elcmy_158{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-0-5)}._fileName_elcmy_166{font-family:var(--font-secondary);font-size:var(--font-size-13);font-weight:var(--font-weight-medium);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._fileSize_elcmy_176{font-family:var(--font-secondary);font-size:var(--font-size-11);color:var(--text-tertiary)}._fileStatus_elcmy_182{display:flex;align-items:center;gap:var(--spacing-2)}._progressBar_elcmy_188{width:60px;height:4px;background:var(--surface-layer);border-radius:var(--radius-full);overflow:hidden}._progressFill_elcmy_196{height:100%;background:var(--interactive-primary);transition:width var(--mode-hover-duration)}._fileStatusIcon_elcmy_202{color:var(--text-tertiary);animation:_spin_elcmy_1 1s linear infinite}._fileStatusSuccess_elcmy_207{color:var(--text-success)}._fileStatusError_elcmy_211{color:var(--text-error)}@keyframes _spin_elcmy_1{to{transform:rotate(360deg)}}._fileRemove_elcmy_221{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:var(--radius-sm);color:var(--text-tertiary);cursor:pointer;transition:all var(--mode-hover-duration);flex-shrink:0}._fileRemove_elcmy_221:hover{background:var(--surface-layer);color:var(--text-error)}._minimal_elcmy_246 ._dropzone_elcmy_18{padding:var(--spacing-4);border-style:solid;border-width:1px}._minimal_elcmy_246 ._dropzoneIcon_elcmy_71{width:32px;height:32px}._card_elcmy_258 ._dropzone_elcmy_18{padding:var(--spacing-6);background:var(--surface-base);border:1px solid var(--border-subtle);box-shadow:var(--mode-shadow-default)}._card_elcmy_258 ._dropzone_elcmy_18:hover{box-shadow:var(--mode-shadow-hover)}._compact_elcmy_273 ._dropzone_elcmy_18{padding:var(--spacing-4)}._compact_elcmy_273 ._dropzoneIcon_elcmy_71{width:32px;height:32px}._compact_elcmy_273 ._dropzonePlaceholder_elcmy_82{font-size:var(--font-size-13)}._compact_elcmy_273 ._dropzoneHints_elcmy_90{display:none}._compact_elcmy_273 ._fileItem_elcmy_130{padding:var(--spacing-1-5) var(--spacing-2)}._compact_elcmy_273 ._fileIcon_elcmy_139{width:28px;height:28px}@media(max-width:480px){._dropzone_elcmy_18{padding:var(--spacing-6)}._dropzoneHints_elcmy_90{flex-direction:column;gap:var(--spacing-1)}._fileItem_elcmy_130{flex-wrap:wrap}._fileStatus_elcmy_182{order:3;width:100%;margin-top:var(--spacing-2)}._progressBar_elcmy_188{flex:1}}

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

@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FileUploader } from './FileUploader';
+
+declare const meta: Meta<typeof FileUploader>;
+export default meta;
+type Story = StoryObj<typeof FileUploader>;
+/**
+ * Default FileUploader
+ */
+export declare const Default: Story;
+/**
+ * Interactive FileUploader with state
+ */
+export declare const Interactive: Story;
+/**
+ * With existing files
+ */
+export declare const WithFiles: Story;
+/**
+ * Images only
+ */
+export declare const ImagesOnly: Story;
+/**
+ * Single file upload
+ */
+export declare const SingleFile: Story;
+/**
+ * Compact variant
+ */
+export declare const Compact: Story;
+/**
+ * Minimal variant
+ */
+export declare const Minimal: Story;
+/**
+ * Card variant
+ */
+export declare const Card: Story;
+/**
+ * With error
+ */
+export declare const WithError: Story;
+/**
+ * Disabled
+ */
+export declare const Disabled: Story;
+/**
+ * Without file list
+ */
+export declare const WithoutFileList: Story;
+/**
+ * File status examples
+ */
+export declare const FileStatuses: Story;
+/**
+ * Large file limit
+ */
+export declare const LargeFileLimit: Story;
+//# sourceMappingURL=FileUploader.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FileUploader/FileUploader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAOnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AA6B3C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAsEzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAoC1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}

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

@@ -0,0 +1,124 @@
+import { 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/components/FileUploader/FileUploader.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.types.d.ts","sourceRoot":"","sources":["../../../src/components/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,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC;;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/components/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/components/FileUploader/index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../../src/components/FilterBar/FilterBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,KAAK,EACV,cAAc,EAGf,MAAM,mBAAmB,CAAC;AA4E3B,eAAO,MAAM,SAAS,2GA0IrB,CAAC"}

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

@@ -0,0 +1 @@
+._filterBar_ldmr2_8{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-control);flex-wrap:wrap}._compact_ldmr2_19{padding:var(--spacing-2) var(--spacing-3);gap:var(--spacing-2)}._searchWrapper_ldmr2_28{position:relative;display:flex;align-items:center}._searchIcon_ldmr2_34{position:absolute;left:var(--spacing-2-5);color:var(--text-tertiary);pointer-events:none}._searchInput_ldmr2_41{padding:var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-8);font-family:var(--font-secondary);font-size:var(--font-size-13);color:var(--text-primary);background:var(--surface-subtle);border:1px solid transparent;border-radius:var(--radius-sm);width:200px;transition:border-color var(--mode-hover-duration),background-color var(--mode-hover-duration)}._searchInput_ldmr2_41:focus{outline:none;background:var(--surface-base);border-color:var(--interactive-primary)}._searchInput_ldmr2_41::placeholder{color:var(--text-tertiary)}._filters_ldmr2_69{display:flex;align-items:center;gap:var(--spacing-2)}._filterWrapper_ldmr2_75{position:relative}._filterTrigger_ldmr2_79{display:inline-flex;align-items:center;gap:var(--spacing-1-5);padding:var(--spacing-2) var(--spacing-3);font-family:var(--font-secondary);font-size:var(--font-size-13);font-weight:var(--font-weight-medium);color:var(--text-secondary);background:var(--surface-subtle);border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--mode-hover-duration)}._filterTrigger_ldmr2_79:hover{color:var(--text-primary);background:var(--surface-layer)}._filterActive_ldmr2_100{color:var(--interactive-primary);background:var(--status-info-bg);border-color:var(--interactive-primary)}._chevron_ldmr2_106{transition:transform var(--mode-hover-duration)}._chevronOpen_ldmr2_110{transform:rotate(180deg)}._dropdown_ldmr2_118{position:absolute;top:calc(100% + var(--spacing-1));left:0;min-width:200px;max-height:300px;overflow-y:auto;background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);padding:var(--spacing-1)}._dropdownItem_ldmr2_133{display:flex;align-items:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-3);font-family:var(--font-secondary);font-size:var(--font-size-13);color:var(--text-primary);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:background-color var(--mode-hover-duration)}._dropdownItem_ldmr2_133:hover{background:var(--surface-subtle)}._dropdownItemSelected_ldmr2_154{background:var(--status-info-bg);color:var(--interactive-primary)}._checkbox_ldmr2_159{width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-moderate);border-radius:var(--radius-sm);font-size:var(--font-size-10);flex-shrink:0}._dropdownItemSelected_ldmr2_154 ._checkbox_ldmr2_159{background:var(--interactive-primary);border-color:var(--interactive-primary);color:var(--interactive-primary-text)}._optionCount_ldmr2_177{margin-left:auto;font-size:var(--font-size-11);color:var(--text-tertiary)}._dropdownFooter_ldmr2_183{display:flex;justify-content:flex-end;gap:var(--spacing-2);padding:var(--spacing-2);border-top:1px solid var(--border-subtle);margin-top:var(--spacing-1)}._dropdownCancel_ldmr2_192,._dropdownApply_ldmr2_193{padding:var(--spacing-1-5) var(--spacing-3);font-family:var(--font-secondary);font-size:var(--font-size-12);font-weight:var(--font-weight-medium);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--mode-hover-duration)}._dropdownCancel_ldmr2_192{color:var(--text-secondary);background:none;border:none}._dropdownCancel_ldmr2_192:hover{color:var(--text-primary)}._dropdownApply_ldmr2_193{color:var(--interactive-primary-text);background:var(--interactive-primary);border:none}._dropdownApply_ldmr2_193:hover{background:var(--interactive-primary-hover)}._activeFilters_ldmr2_227{display:flex;align-items:center;gap:var(--spacing-2);flex-wrap:wrap;padding-left:var(--spacing-2);border-left:1px solid var(--border-subtle);margin-left:var(--spacing-1)}._chip_ldmr2_237{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);font-family:var(--font-secondary);font-size:var(--font-size-12);font-weight:var(--font-weight-medium);color:var(--text-primary);background:var(--surface-subtle);border-radius:var(--radius-full)}._chipLabel_ldmr2_250{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._chipRemove_ldmr2_257{display:flex;align-items:center;justify-content:center;width:16px;height:16px;background:none;border:none;border-radius:var(--radius-full);cursor:pointer;color:var(--text-tertiary);transition:all var(--mode-hover-duration)}._chipRemove_ldmr2_257:hover{background:var(--surface-layer);color:var(--text-primary)}._clearAll_ldmr2_276{font-family:var(--font-secondary);font-size:var(--font-size-12);font-weight:var(--font-weight-medium);color:var(--text-secondary);background:none;border:none;cursor:pointer;text-decoration:underline;transition:color var(--mode-hover-duration)}._clearAll_ldmr2_276:hover{color:var(--text-error)}._count_ldmr2_296{font-family:var(--font-secondary);font-size:var(--font-size-12);color:var(--text-tertiary);margin-left:auto}@media(max-width:768px){._filterBar_ldmr2_8{flex-direction:column;align-items:stretch}._searchWrapper_ldmr2_28,._searchInput_ldmr2_41{width:100%}._filters_ldmr2_69{flex-wrap:wrap}._activeFilters_ldmr2_227{border-left:none;padding-left:0;margin-left:0;padding-top:var(--spacing-2);border-top:1px solid var(--border-subtle)}._count_ldmr2_296{margin-left:0;margin-top:var(--spacing-2)}}

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

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FilterBar } from './FilterBar';
+
+declare const meta: Meta<typeof FilterBar>;
+export default meta;
+type Story = StoryObj<typeof FilterBar>;
+export declare const Default: Story;
+export declare const WithSearch: Story;
+export declare const WithActiveFilters: Story;
+export declare const Compact: Story;
+export declare const ManyFilters: Story;
+export declare const NoCount: Story;
+//# sourceMappingURL=FilterBar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FilterBar/FilterBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAkBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AA0FxC,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}