@common-origin/design-system 1.12.1 → 1.14.0

package/dist/components/molecules/Dropdown/Dropdown.d.ts

@@ -12,6 +12,8 @@ export interface DropdownProps {
     disabled?: boolean;
     className?: string;
     label?: string;
+    helperText?: string;
+    error?: string;
 }
 declare const DropdownOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $isSelected: boolean;

package/dist/components/molecules/PasswordField/PasswordField.d.ts

@@ -0,0 +1,55 @@
+import { InputHTMLAttributes } from 'react';
+/**
+ * Props for the PasswordField component
+ */
+export interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Whether the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Unique identifier for the input
+     * Generated automatically if not provided
+     */
+    id?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Whether to show the password visibility toggle button
+     * @default true
+     */
+    showToggle?: boolean;
+}
+/**
+ * PasswordField component for secure password input with visibility toggle
+ *
+ * @example
+ * ```tsx
+ * <PasswordField
+ *   label="Password"
+ *   helperText="Must be at least 8 characters"
+ *   required
+ * />
+ * ```
+ */
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/molecules/PasswordField/index.d.ts

@@ -0,0 +1,2 @@
+export { PasswordField } from './PasswordField';
+export type { PasswordFieldProps } from './PasswordField';

package/dist/components/molecules/Sheet/Sheet.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the Sheet component
+ */
+export interface SheetProps {
+    /**
+     * Whether the sheet is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback fired when the sheet should close
+     */
+    onClose: () => void;
+    /**
+     * Position of the sheet
+     * @default 'right'
+     */
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Variant of the sheet
+     * - 'sheet': Full height/width edge-to-edge
+     * - 'drawer': Floating with rounded corners and margin
+     * @default 'sheet'
+     */
+    variant?: 'sheet' | 'drawer';
+    /**
+     * Width of the sheet (for left/right positions)
+     * @default '400px'
+     */
+    width?: string;
+    /**
+     * Height of the sheet (for top/bottom positions)
+     * @default '400px'
+     */
+    height?: string;
+    /**
+     * Content to display in the sheet
+     */
+    children?: ReactNode;
+    /**
+     * Whether clicking the overlay should close the sheet
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Whether pressing Escape should close the sheet
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Optional title for the sheet (improves accessibility)
+     */
+    title?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Accessible label for the sheet
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element describing the sheet
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * Sheet component for side panels and drawers
+ *
+ * Provides a sliding panel that appears from any edge of the screen.
+ * Can be used for navigation menus, filters, forms, or additional content.
+ *
+ * @example
+ * ```tsx
+ * // Right-positioned sheet (default)
+ * <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <h2>Sheet Content</h2>
+ *   <p>Your content here</p>
+ * </Sheet>
+ *
+ * // Drawer variant from bottom
+ * <Sheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   position="bottom"
+ *   variant="drawer"
+ *   height="60vh"
+ * >
+ *   <h2>Mobile Menu</h2>
+ * </Sheet>
+ * ```
+ */
+export declare const Sheet: {
+    ({ isOpen, onClose, position, variant, width, height, children, closeOnOverlayClick, closeOnEscape, title, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SheetProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/molecules/Sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { Sheet } from './Sheet';
+export type { SheetProps } from './Sheet';

package/dist/components/molecules/Slider/Slider.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Props for the Slider component
+ */
+export interface SliderProps {
+    /**
+     * Minimum value of the slider
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value of the slider
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step increment for value changes
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Current value for single slider
+     */
+    value?: number;
+    /**
+     * Default value for uncontrolled single slider
+     */
+    defaultValue?: number;
+    /**
+     * Current values for range slider [min, max]
+     */
+    rangeValue?: [number, number];
+    /**
+     * Default values for uncontrolled range slider [min, max]
+     */
+    defaultRangeValue?: [number, number];
+    /**
+     * Callback fired when value changes (single slider)
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Callback fired when range values change (range slider)
+     */
+    onRangeChange?: (values: [number, number]) => void;
+    /**
+     * Whether the slider is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Label for the slider
+     */
+    label?: string;
+    /**
+     * Whether to show value labels
+     * @default true
+     */
+    showValueLabel?: boolean;
+    /**
+     * Custom formatter for value labels
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Accessible name for the slider
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element describing the slider
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * Slider component for single value or range selection
+ *
+ * @example
+ * ```tsx
+ * // Single value slider
+ * <Slider
+ *   label="Volume"
+ *   min={0}
+ *   max={100}
+ *   value={50}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // Range slider
+ * <Slider
+ *   label="Budget Range"
+ *   min={0}
+ *   max={1000}
+ *   rangeValue={[200, 800]}
+ *   onRangeChange={(values) => console.log(values)}
+ * />
+ * ```
+ */
+export declare const Slider: {
+    ({ min, max, step, value: controlledValue, defaultValue, rangeValue: controlledRangeValue, defaultRangeValue, onChange, onRangeChange, disabled, label, showValueLabel, formatValue, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SliderProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/molecules/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from './Slider';
+export type { SliderProps } from './Slider';

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

@@ -8,4 +8,7 @@ export * from './FeatureBlock';
 export * from './Dropdown';
 export * from './NumberInput';
 export * from './PageTitle';
+export * from './PasswordField';
+export * from './Sheet';
+export * from './Slider';
 export * from './TextField';