@common-origin/design-system 1.12.0 → 1.13.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/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,6 @@ export * from './FeatureBlock';
 export * from './Dropdown';
 export * from './NumberInput';
 export * from './PageTitle';
+export * from './PasswordField';
+export * from './Slider';
 export * from './TextField';