baseline-ds 0.1.4

package/dist/index.d.ts

@@ -0,0 +1,743 @@
+import React from 'react';
+
+type ButtonShape = 'Rectangle' | 'Pill' | 'Circle';
+type ButtonHierarchy = 'Primary' | 'Secondary' | 'Tertiary';
+interface ButtonProps {
+    label?: string;
+    leadingIcon?: boolean;
+    icon?: React.ReactNode | null;
+    chevron?: boolean;
+    shape?: ButtonShape;
+    hierarchy?: ButtonHierarchy;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const Button: React.FC<ButtonProps>;
+
+type TextFieldSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+type TextFieldState = 'Default' | 'Error' | 'Success' | 'Incomplete' | 'Complete' | 'Read only' | 'Disabled' | 'Loading';
+interface TextFieldProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    size?: TextFieldSize;
+    state?: TextFieldState;
+    hint?: string;
+    showCharacterCount?: boolean;
+    maxLength?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    leadingLabel?: string;
+    trailingLabel?: string;
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    className?: string;
+}
+declare const TextField: React.FC<TextFieldProps>;
+
+type SelectSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+type SelectState = 'Default' | 'Error' | 'Success' | 'Incomplete' | 'Complete' | 'Read only' | 'Disabled' | 'Loading';
+interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface SelectProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    size?: SelectSize;
+    state?: SelectState;
+    hint?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    options: SelectOption[];
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    className?: string;
+}
+declare const Select: React.FC<SelectProps>;
+
+type FieldGroupSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+type FieldGroupState = 'Default' | 'Error' | 'Success' | 'Incomplete' | 'Complete' | 'Read only' | 'Disabled' | 'Loading';
+interface FieldGroupProps {
+    label?: string;
+    hint?: string;
+    size?: FieldGroupSize;
+    state?: FieldGroupState;
+    disabled?: boolean;
+    readOnly?: boolean;
+    selectPlaceholder?: string;
+    selectValue?: string;
+    selectDefaultValue?: string;
+    selectOptions: SelectOption[];
+    onSelectChange?: (value: string) => void;
+    textFieldPlaceholder?: string;
+    textFieldValue?: string;
+    textFieldDefaultValue?: string;
+    onTextFieldChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    className?: string;
+}
+declare const FieldGroup: React.FC<FieldGroupProps>;
+
+type PasswordFieldSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+type PasswordFieldState = 'Default' | 'Error' | 'Success' | 'Incomplete' | 'Complete' | 'Read only' | 'Disabled' | 'Loading';
+interface PasswordFieldProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    size?: PasswordFieldSize;
+    state?: PasswordFieldState;
+    hint?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    validation?: boolean;
+    visibilityToggle?: boolean;
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    className?: string;
+}
+declare const PasswordField: React.FC<PasswordFieldProps>;
+
+type EmailFieldSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+type EmailFieldState = 'Default' | 'Error' | 'Success' | 'Incomplete' | 'Complete' | 'Read only' | 'Disabled' | 'Loading';
+interface EmailFieldProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    size?: EmailFieldSize;
+    state?: EmailFieldState;
+    hint?: string;
+    showCharacterCount?: boolean;
+    maxLength?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    className?: string;
+}
+declare const EmailField: React.FC<EmailFieldProps>;
+
+type NumberFieldSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+type NumberFieldState = 'Default' | 'Error' | 'Success' | 'Incomplete' | 'Complete' | 'Read only' | 'Disabled' | 'Loading';
+interface NumberFieldProps {
+    label?: string;
+    placeholder?: string;
+    value?: number | string;
+    defaultValue?: number | string;
+    size?: NumberFieldSize;
+    state?: NumberFieldState;
+    hint?: string;
+    showCharacterCount?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    leadingLabel?: string;
+    trailingLabel?: string;
+    onChange?: (value: number | string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    className?: string;
+}
+declare const NumberField: React.FC<NumberFieldProps>;
+
+type InputElementInputFieldSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+type InputElementInputFieldState = 'Default' | 'Error' | 'Success' | 'Incomplete' | 'Complete' | 'Read only' | 'Disabled' | 'Loading';
+interface InputElementInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: InputElementInputFieldSize;
+    state?: InputElementInputFieldState;
+    leadingIcon?: boolean;
+    leadingLabel?: boolean;
+    trailingIcon?: boolean;
+    trailingLabel?: boolean;
+    leadingLabelText?: string;
+    trailingLabelText?: string;
+    className?: string;
+}
+declare const InputElementInputField: React.FC<InputElementInputFieldProps>;
+
+type InputElementLabelSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+interface InputElementLabelProps {
+    children: React.ReactNode;
+    size?: InputElementLabelSize;
+    characterCount?: boolean;
+    maxLength?: number;
+    currentLength?: number;
+    htmlFor?: string;
+    className?: string;
+}
+declare const InputElementLabel: React.FC<InputElementLabelProps>;
+
+type InputElementLeadingLabelSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+interface InputElementLeadingLabelProps {
+    leadingLabelText?: string;
+    size?: InputElementLeadingLabelSize;
+    className?: string;
+}
+declare const InputElementLeadingLabel: React.FC<InputElementLeadingLabelProps>;
+
+type InputElementContentTextSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+interface InputElementContentTextProps {
+    size?: InputElementContentTextSize;
+    placeholder?: boolean;
+    secure?: boolean;
+    value?: string;
+    className?: string;
+}
+declare const InputElementContentText: React.FC<InputElementContentTextProps>;
+
+interface InputElementHintProps {
+    children: React.ReactNode;
+    showIcon?: boolean;
+    icon?: React.ReactNode;
+    className?: string;
+}
+declare const InputElementHint: React.FC<InputElementHintProps>;
+
+type InputElementProgressBarState = 'Empty' | 'In Progress' | 'Complete';
+interface InputElementProgressBarProps {
+    state?: InputElementProgressBarState;
+    progress?: number;
+    className?: string;
+}
+declare const InputElementProgressBar: React.FC<InputElementProgressBarProps>;
+
+type InputElementMenuSize = 'XSmall' | 'Small' | 'Medium' | 'Large';
+interface InputElementMenuItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface InputElementMenuProps {
+    items: InputElementMenuItem[];
+    size?: InputElementMenuSize;
+    onSelect?: (item: InputElementMenuItem) => void;
+    className?: string;
+}
+declare const InputElementMenu: React.FC<InputElementMenuProps>;
+
+interface PlaceholderProps {
+    /**
+     * Custom className for the placeholder
+     */
+    className?: string;
+    /**
+     * Custom inline styles
+     */
+    style?: React.CSSProperties;
+}
+declare const Placeholder: React.FC<PlaceholderProps>;
+
+type StepStatus = 'completed' | 'in-progress' | 'not-started';
+interface Step {
+    /**
+     * Unique identifier for the step
+     */
+    id: string | number;
+    /**
+     * Label displayed below the step indicator
+     */
+    label: string;
+    /**
+     * Status of the step - determines visual appearance
+     */
+    status: StepStatus;
+}
+interface ProgressStepsProps {
+    /**
+     * Array of steps to display
+     */
+    steps: Step[];
+    /**
+     * Currently active step index (0-based)
+     */
+    activeStepIndex?: number;
+    /**
+     * Callback when a step is clicked
+     */
+    onStepClick?: (stepIndex: number, step: Step) => void;
+    /**
+     * Whether steps are clickable
+     */
+    clickable?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const ProgressSteps: React.FC<ProgressStepsProps>;
+
+type SwitchState = 'default' | 'disabled';
+interface SwitchProps {
+    /**
+     * Default checked state
+     */
+    defaultChecked?: boolean;
+    /**
+     * State of the switch
+     */
+    state?: SwitchState;
+    /**
+     * Callback when switch is toggled
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Callback when switch receives focus
+     */
+    onFocus?: () => void;
+    /**
+     * Callback when switch loses focus
+     */
+    onBlur?: () => void;
+    /**
+     * Accessible label for the switch (not visually rendered, but used for accessibility)
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element that labels this switch
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const Switch: React.FC<SwitchProps>;
+
+type KnobState = 'default' | 'active' | 'disabled';
+interface KnobProps {
+    /**
+     * State of the knob
+     */
+    state?: KnobState;
+    /**
+     * Whether to show the label above the knob
+     */
+    showLabel?: boolean;
+    /**
+     * Text to display in the label
+     */
+    labelText?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const Knob: React.FC<KnobProps>;
+
+type SliderLayout = 'Simple' | 'Range';
+type SliderState = 'Default' | 'Disabled';
+interface SliderProps {
+    /**
+     * Layout type: Simple (single value) or Range (two values)
+     */
+    layout?: SliderLayout;
+    /**
+     * State of the slider
+     */
+    state?: SliderState;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step value
+     */
+    step?: number;
+    /**
+     * Value for simple slider (uncontrolled)
+     */
+    defaultValue?: number;
+    /**
+     * Values for range slider (uncontrolled) - [minValue, maxValue]
+     */
+    defaultValues?: [number, number];
+    /**
+     * Callback when value changes (simple slider)
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Callback when values change (range slider)
+     */
+    onRangeChange?: (values: [number, number]) => void;
+    /**
+     * Whether to show labels on knobs
+     */
+    showLabels?: boolean;
+    /**
+     * When true, labels only show on active state (dragging, hover, focus).
+     * When false, labels always show when showLabels is true.
+     */
+    labelOnActive?: boolean;
+    /**
+     * Optional left icon/enhancer
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Optional right icon/enhancer
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const Slider: React.FC<SliderProps>;
+
+interface CheckboxProps {
+    /**
+     * Whether the checkbox is checked (controlled)
+     */
+    checked?: boolean;
+    /**
+     * Default checked state (uncontrolled)
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Label text (optional - if not provided, checkbox renders without label)
+     */
+    label?: string;
+    /**
+     * Callback when checkbox state changes
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Callback when checkbox receives focus
+     */
+    onFocus?: () => void;
+    /**
+     * Callback when checkbox loses focus
+     */
+    onBlur?: () => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const Checkbox: React.FC<CheckboxProps>;
+
+interface RadioProps {
+    /**
+     * Value of the radio button
+     */
+    value: string;
+    /**
+     * Name of the radio group (required for grouping)
+     */
+    name: string;
+    /**
+     * Whether the radio is checked (controlled)
+     */
+    checked?: boolean;
+    /**
+     * Default checked state (uncontrolled)
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the radio is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Label text (optional - if not provided, radio renders without label)
+     */
+    label?: string;
+    /**
+     * Callback when radio state changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback when radio receives focus
+     */
+    onFocus?: () => void;
+    /**
+     * Callback when radio loses focus
+     */
+    onBlur?: () => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const Radio: React.FC<RadioProps>;
+
+declare const BRAND_THEMES: {
+    readonly baseline: "baseline";
+    readonly 'baseline-pro': "baseline-pro";
+    readonly offset: "offset";
+};
+type BrandTheme = keyof typeof BRAND_THEMES;
+
+type LogoVariant = 'color' | 'mono-light' | 'mono-dark';
+interface LogoProps {
+    /**
+     * Brand theme - if not provided, will use Storybook context or default to 'baseline'
+     */
+    brand?: BrandTheme;
+    /**
+     * Logo variant: color (default), mono-light, or mono-dark
+     */
+    variant?: LogoVariant;
+    /**
+     * Width of the logo (height will be calculated to maintain aspect ratio)
+     */
+    width?: number | string;
+    /**
+     * Height of the logo (width will be calculated to maintain aspect ratio)
+     * If both width and height are provided, width takes precedence
+     */
+    height?: number | string;
+    /**
+     * Show only the logomark (icon) without the wordmark (text)
+     */
+    logomarkOnly?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const Logo: React.FC<LogoProps>;
+
+type MenuItemState = 'Default' | 'Hover' | 'Active';
+interface MenuItemProps {
+    /**
+     * Menu item label
+     */
+    label: string;
+    /**
+     * Menu item state
+     */
+    state?: MenuItemState;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * URL for navigation (if provided, renders as link)
+     */
+    href?: string;
+}
+declare const MenuItem: React.FC<MenuItemProps>;
+
+interface NavigationItem {
+    /**
+     * Menu item label
+     */
+    label: string;
+    /**
+     * Menu item state
+     */
+    state?: MenuItemState;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * URL for navigation
+     */
+    href?: string;
+}
+interface HeaderNavigationProps {
+    /**
+     * Brand theme for the logo
+     */
+    brand?: BrandTheme;
+    /**
+     * Navigation menu items
+     */
+    items?: NavigationItem[];
+    /**
+     * CTA button label
+     */
+    ctaLabel?: string;
+    /**
+     * CTA button onClick handler
+     */
+    onCtaClick?: () => void;
+    /**
+     * CTA button href (if provided, renders as link)
+     */
+    ctaHref?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const HeaderNavigation: React.FC<HeaderNavigationProps>;
+
+interface HamburgerMenuButtonProps {
+    /**
+     * Whether the menu is open (shows X) or closed (shows hamburger)
+     */
+    isOpen: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+}
+declare const HamburgerMenuButton: React.FC<HamburgerMenuButtonProps>;
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number | string;
+    color?: string;
+    'aria-label'?: string;
+    'aria-hidden'?: boolean;
+}
+
+declare const IconAi: React.FC<IconProps>;
+
+declare const IconAlert: React.FC<IconProps>;
+
+declare const IconArchive: React.FC<IconProps>;
+
+declare const IconArrowLeft: React.FC<IconProps>;
+
+declare const IconArrowRight: React.FC<IconProps>;
+
+declare const IconCalendarTick: React.FC<IconProps>;
+
+declare const IconCamera: React.FC<IconProps>;
+
+declare const IconCart: React.FC<IconProps>;
+
+declare const IconChart: React.FC<IconProps>;
+
+declare const IconChatAlert: React.FC<IconProps>;
+
+declare const IconChat: React.FC<IconProps>;
+
+declare const IconCheck: React.FC<IconProps>;
+
+declare const IconChevronDown: React.FC<IconProps>;
+
+declare const IconChevronLeft: React.FC<IconProps>;
+
+declare const IconChevronRight: React.FC<IconProps>;
+
+declare const IconChevronUp: React.FC<IconProps>;
+
+declare const IconChicken: React.FC<IconProps>;
+
+declare const IconClose: React.FC<IconProps>;
+
+declare const IconCloudLightning: React.FC<IconProps>;
+
+declare const IconCoffee: React.FC<IconProps>;
+
+declare const IconComputer: React.FC<IconProps>;
+
+declare const IconCurrency: React.FC<IconProps>;
+
+declare const IconCursor: React.FC<IconProps>;
+
+declare const IconCut: React.FC<IconProps>;
+
+declare const IconDark: React.FC<IconProps>;
+
+declare const IconDownload: React.FC<IconProps>;
+
+declare const IconError: React.FC<IconProps>;
+
+declare const IconEyeClosed: React.FC<IconProps>;
+
+declare const IconEyeOpen: React.FC<IconProps>;
+
+declare const IconFilter: React.FC<IconProps>;
+
+declare const IconGift: React.FC<IconProps>;
+
+declare const IconHandOk: React.FC<IconProps>;
+
+declare const IconHeart: React.FC<IconProps>;
+
+declare const IconHelp: React.FC<IconProps>;
+
+declare const IconIdentity: React.FC<IconProps>;
+
+declare const IconLaughing: React.FC<IconProps>;
+
+declare const IconLightning: React.FC<IconProps>;
+
+declare const IconLine: React.FC<IconProps>;
+
+declare const IconList: React.FC<IconProps>;
+
+declare const IconLoading: React.FC<IconProps>;
+
+declare const IconMenu: React.FC<IconProps>;
+
+declare const IconMicrophone: React.FC<IconProps>;
+
+declare const IconMinus: React.FC<IconProps>;
+
+declare const IconMoney: React.FC<IconProps>;
+
+declare const IconPhotos: React.FC<IconProps>;
+
+declare const IconPlus: React.FC<IconProps>;
+
+declare const IconReload: React.FC<IconProps>;
+
+declare const IconResize: React.FC<IconProps>;
+
+declare const IconRobot: React.FC<IconProps>;
+
+declare const IconSettings: React.FC<IconProps>;
+
+declare const IconSkull: React.FC<IconProps>;
+
+declare const IconStarCircle: React.FC<IconProps>;
+
+declare const IconSuccess: React.FC<IconProps>;
+
+declare const IconText: React.FC<IconProps>;
+
+declare const IconVideo: React.FC<IconProps>;
+
+declare const IconWarning: React.FC<IconProps>;
+
+declare const IconWatch: React.FC<IconProps>;
+
+export { Button, type ButtonHierarchy, type ButtonProps, type ButtonShape, Checkbox, type CheckboxProps, EmailField, type EmailFieldProps, type EmailFieldSize, type EmailFieldState, FieldGroup, type FieldGroupProps, type FieldGroupSize, type FieldGroupState, HamburgerMenuButton, type HamburgerMenuButtonProps, HeaderNavigation, type HeaderNavigationProps, IconAi, IconAlert, IconArchive, IconArrowLeft, IconArrowRight, IconCalendarTick, IconCamera, IconCart, IconChart, IconChat, IconChatAlert, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconChicken, IconClose, IconCloudLightning, IconCoffee, IconComputer, IconCurrency, IconCursor, IconCut, IconDark, IconDownload, IconError, IconEyeClosed, IconEyeOpen, IconFilter, IconGift, IconHandOk, IconHeart, IconHelp, IconIdentity, IconLaughing, IconLightning, IconLine, IconList, IconLoading, IconMenu, IconMicrophone, IconMinus, IconMoney, IconPhotos, IconPlus, type IconProps, IconReload, IconResize, IconRobot, IconSettings, IconSkull, IconStarCircle, IconSuccess, IconText, IconVideo, IconWarning, IconWatch, InputElementContentText, type InputElementContentTextProps, type InputElementContentTextSize, InputElementHint, type InputElementHintProps, InputElementInputField, type InputElementInputFieldProps, type InputElementInputFieldSize, type InputElementInputFieldState, InputElementLabel, type InputElementLabelProps, type InputElementLabelSize, InputElementLeadingLabel, type InputElementLeadingLabelProps, type InputElementLeadingLabelSize, InputElementMenu, type InputElementMenuItem, type InputElementMenuProps, type InputElementMenuSize, InputElementProgressBar, type InputElementProgressBarProps, type InputElementProgressBarState, Knob, type KnobProps, type KnobState, Logo, type LogoProps, type LogoVariant, MenuItem, type MenuItemProps, type MenuItemState, type NavigationItem, NumberField, type NumberFieldProps, type NumberFieldSize, type NumberFieldState, PasswordField, type PasswordFieldProps, type PasswordFieldSize, type PasswordFieldState, Placeholder, type PlaceholderProps, ProgressSteps, type ProgressStepsProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, type SelectSize, type SelectState, Slider, type SliderLayout, type SliderProps, type SliderState, type Step, type StepStatus, Switch, type SwitchProps, type SwitchState, TextField, type TextFieldProps, type TextFieldSize, type TextFieldState };