@dimasbaguspm/versaur 0.0.0

package/dist/components/loading-indicator/loading-indicator.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./types').LoadingIndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Spinner Variants - All colors
+ */
+export declare const SpinnerVariants: Story;
+/**
+ * Bar Variants - All colors
+ */
+export declare const BarVariants: Story;

package/dist/components/loading-indicator/types.d.ts

@@ -0,0 +1,29 @@
+import { HTMLAttributes } from 'react';
+/**
+ * LoadingIndicatorProps defines the props for the LoadingIndicator component
+ * @property type - Type of loading indicator: spinner (default), bar
+ * @property size - Size of the indicator: sm, md, lg
+ * @property color - Color variant based on Versaur color system
+ * @property ariaLabel - Accessible label for screen readers
+ */
+export interface LoadingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Type of loading indicator: spinner (circular) or bar (linear)
+     * Spinner is recommended for desktop, bar for mobile or progress contexts
+     */
+    type?: 'spinner' | 'bar';
+    /**
+     * Size of the indicator: sm, md, lg
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Color variant based on Versaur color system
+     * Core: primary, secondary, tertiary, ghost, neutral
+     * Semantic: success, info, warning, danger
+     */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger';
+    /**
+     * Accessible label for screen readers
+     */
+    ariaLabel?: string;
+}

package/dist/components/loading-indicator.js

@@ -0,0 +1,4 @@
+import { L as r } from "../loading-indicator-BZMnT5PA.js";
+export {
+  r as LoadingIndicator
+};

package/dist/components/menu/context.d.ts

@@ -0,0 +1,13 @@
+import { MenuSize } from './types';
+export interface MenuContextValue {
+    /** Whether the menu is open (controlled externally) */
+    open: boolean;
+    /** Ref to the trigger button */
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    /** Ref to the menu content */
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    /** Menu size variant */
+    size: MenuSize;
+}
+export declare const MenuContext: import('react').Context<MenuContextValue | null>;
+export declare const useMenuContext: () => MenuContextValue;

package/dist/components/menu/helpers.d.ts

@@ -0,0 +1,8 @@
+export declare const menuVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const menuItemVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,2 @@
+export * from './menu';
+export * from './types';

package/dist/components/menu/menu.atoms.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { MenuTriggerProps, MenuContentProps, MenuItemProps } from './types';
+/**
+ * MenuTrigger: Button to open/close menu
+ */
+export declare const MenuTrigger: React.ForwardRefExoticComponent<MenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * MenuContent: Menu popup, positioned below trigger
+ */
+export declare const MenuContent: React.ForwardRefExoticComponent<MenuContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * MenuItem: Single menu option
+ */
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { MenuRootProps } from './types';
+export declare const Menu: React.FC<MenuRootProps> & {
+    Trigger: React.ForwardRefExoticComponent<import('./types').MenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<import('./types').MenuContentProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<import('./types').MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+};

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

@@ -0,0 +1,22 @@
+/**
+ * Menu stories for Storybook
+ * Group: Menu
+ */
+declare const _default: {
+    title: string;
+    component: import('react').FC<import('./types').MenuRootProps> & {
+        Trigger: import('react').ForwardRefExoticComponent<import('./types').MenuTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+        Content: import('react').ForwardRefExoticComponent<import('./types').MenuContentProps & import('react').RefAttributes<HTMLDivElement>>;
+        Item: import('react').ForwardRefExoticComponent<import('./types').MenuItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { ReactNode, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+export type MenuSize = 'sm' | 'md';
+/**
+ * Props for MenuRoot
+ */
+export interface MenuRootProps {
+    /** Menu children (Trigger, Content, etc) */
+    children: ReactNode;
+    /** open state */
+    isOpen: boolean;
+    /** Callback when open state changes */
+    onOutsideClick: () => void;
+    /** Menu size variant */
+    size?: MenuSize;
+}
+/**
+ * Props for MenuTrigger
+ */
+export interface MenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Trigger content */
+    children: ReactNode;
+}
+/**
+ * Props for MenuContent
+ */
+export interface MenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Menu items */
+    children: ReactNode;
+}
+/**
+ * Props for MenuItem
+ */
+export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Item content */
+    children: ReactNode;
+}

package/dist/components/menu/use-menu.d.ts

@@ -0,0 +1,3 @@
+export declare function useMenuOutsideClick(isOpen: boolean, contentRef: React.RefObject<HTMLDivElement | null>, triggerRef: React.RefObject<HTMLButtonElement | null>, onOutsideClick: () => void): void;
+export declare function useMenuFocusFirstItem(isOpen: boolean, contentRef: React.RefObject<HTMLDivElement | null>): void;
+export declare function useMenuKeyboardNavigation(isOpen: boolean, contentRef: React.RefObject<HTMLDivElement | null>, triggerRef: React.RefObject<HTMLButtonElement | null>, onOutsideClick: () => void): void;

package/dist/components/menu.js

@@ -0,0 +1,4 @@
+import { M as r } from "../menu-BZvilMF7.js";
+export {
+  r as Menu
+};

package/dist/components/modal/helpers.d.ts

@@ -0,0 +1,7 @@
+export declare const modalOverlayVariants: (props?: ({
+    placement?: "center" | "top" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const modalContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    placement?: "center" | "top" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,2 @@
+export { Modal } from './modal';
+export * from './types';

package/dist/components/modal/modal.atoms.d.ts

@@ -0,0 +1,8 @@
+import { ModalHeaderProps, ModalFooterProps, ModalOverlayProps, ModalBodyProps } from './types';
+export declare const ModalHeader: import('react').ForwardRefExoticComponent<ModalHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ModalFooter: import('react').ForwardRefExoticComponent<ModalFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ModalBody: import('react').ForwardRefExoticComponent<ModalBodyProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * ModalOverlay atom: handles overlay rendering, click-to-close, and transitions
+ */
+export declare const ModalOverlay: import('react').ForwardRefExoticComponent<ModalOverlayProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ModalRootProps } from './types';
+export declare const Modal: FC<ModalRootProps> & {
+    Header: import('react').ForwardRefExoticComponent<import('./types').ModalHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+    Body: import('react').ForwardRefExoticComponent<import('./types').ModalBodyProps & import('react').RefAttributes<HTMLDivElement>>;
+    Footer: import('react').ForwardRefExoticComponent<import('./types').ModalFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<import('./types').ModalRootProps> & {
+        Header: React.ForwardRefExoticComponent<import('./types').ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+        Body: React.ForwardRefExoticComponent<import('./types').ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+        Footer: React.ForwardRefExoticComponent<import('./types').ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+    };
+};
+export default _default;
+export declare function Default(): import("react/jsx-runtime").JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Placement: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Modal component prop types
+ */
+export type ModalSize = 'sm' | 'md' | 'lg';
+export type ModalPlacement = 'top' | 'center';
+/**
+ * Modal compound root
+ */
+export interface ModalRootProps {
+    /** Controls whether the modal is open */
+    isOpen: boolean;
+    /** Called when modal requests to close (ESC, overlay click) */
+    onOpenChange?: (open: boolean) => void;
+    /** Modal size variant */
+    size?: ModalSize;
+    /** Modal placement variant */
+    placement?: ModalPlacement;
+    /** Children (Modal compound parts) */
+    children: React.ReactNode;
+    /** Optional: disables closing on overlay click */
+    disableOverlayClose?: boolean;
+    /** Optional: disables closing on ESC key */
+    disableEscClose?: boolean;
+    /** Optional: ARIA label for dialog */
+    'aria-label'?: string;
+    /** Optional: ARIA labelledby for dialog */
+    'aria-labelledby'?: string;
+    /** Optional: ARIA describedby for dialog */
+    'aria-describedby'?: string;
+}
+/**
+ * Props for Modal.Header, Modal.Footer
+ */
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    placement?: string;
+    onOverlayClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}

package/dist/components/modal/use-escape-close.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Calls handler when Escape key is pressed and active is true
+ * @param active - Whether to listen for Escape key
+ * @param handler - Function to call on Escape
+ */
+export declare function useEscapeClose(active: boolean, handler: () => void): void;

package/dist/components/modal/use-focus-trap.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Focuses the first focusable element inside the given ref when active is true
+ * @param ref - The ref to the container element
+ * @param active - Whether to activate the focus trap
+ */
+export declare function useFocusTrap(ref: React.RefObject<HTMLElement | null>, active: boolean): void;

package/dist/components/modal.js

@@ -0,0 +1,4 @@
+import { M as r } from "../modal-BGAtqMl9.js";
+export {
+  r as Modal
+};

package/dist/components/radio-input/context.d.ts

@@ -0,0 +1,11 @@
+import { RadioInputProps } from './types';
+interface RadioInputContextValue {
+    variant: RadioInputProps['variant'];
+    size: RadioInputProps['size'];
+    disabled?: boolean;
+    error?: boolean;
+    name: string;
+}
+export declare const RadioInputContext: import('react').Context<RadioInputContextValue | null>;
+export declare const useRadioInputContext: () => RadioInputContextValue;
+export {};

package/dist/components/radio-input/helpers.d.ts

@@ -0,0 +1,11 @@
+export declare const radioGroupVariants: (props?: ({
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const radioOptionVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | "success" | "info" | "warning" | "danger" | "primary-outline" | "secondary-outline" | "tertiary-outline" | "ghost-outline" | "neutral-outline" | "success-outline" | "info-outline" | "warning-outline" | "danger-outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const radioLabelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/radio-input/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioInput } from './radio-input';
+export type { RadioInputProps, RadioOptionProps } from './types';

package/dist/components/radio-input/radio-input.atoms.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { RadioOptionProps } from './types';
+/**
+ * RadioInput.Option atom component
+ *
+ * Individual radio option that can be used within RadioInput
+ * Features custom styling with ::before pseudo-element for radio dot
+ */
+export declare const RadioOption: React.ForwardRefExoticComponent<RadioOptionProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/radio-input/radio-input.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { RadioInputProps } from './types';
+export declare const RadioInput: React.ForwardRefExoticComponent<RadioInputProps & React.RefAttributes<HTMLDivElement>> & {
+    Option: React.ForwardRefExoticComponent<import('./types').RadioOptionProps & React.RefAttributes<HTMLInputElement>>;
+};

package/dist/components/radio-input/radio-input.stories.d.ts

@@ -0,0 +1,74 @@
+import { StoryObj } from '@storybook/react';
+import { RadioInputProps } from './types';
+/**
+ * RadioInput provides a radio button group with Versaur's design system styling.
+ * Perfect for single-selection scenarios with clear visual hierarchy and accessibility.
+ *
+ * This component follows the compound pattern with RadioInput.Option for flexible composition.
+ */
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<RadioInputProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Option: import('react').ForwardRefExoticComponent<import('./types').RadioOptionProps & import('react').RefAttributes<HTMLInputElement>>;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        direction: {
+            control: "select";
+            options: string[];
+        };
+        disabled: {
+            control: "boolean";
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Default radio input with primary variant
+ */
+export declare const Default: Story;
+/**
+ * Radio input with descriptions for each option
+ */
+export declare const WithDescriptions: Story;
+/**
+ * Horizontal layout radio input
+ */
+export declare const Horizontal: Story;
+/**
+ * Different size variants
+ */
+export declare const Sizes: Story;
+/**
+ * Error state with validation message
+ */
+export declare const WithError: Story;
+/**
+ * Disabled state
+ */
+export declare const Disabled: Story;
+/**
+ * All color variants showcase
+ */
+export declare const ColorVariants: Story;
+/**
+ * Semantic variants for different states
+ */
+export declare const SemanticVariants: Story;

package/dist/components/radio-input/types.d.ts

@@ -0,0 +1,54 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for the RadioInput component
+ */
+export interface RadioInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * Visual style variant supporting Versaur color system
+     * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
+     * Semantic variants: success, info, warning, danger
+     * Each variant supports outline form for flexible design expression
+     */
+    variant?: 'primary' | 'primary-outline' | 'secondary' | 'secondary-outline' | 'tertiary' | 'tertiary-outline' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'success' | 'success-outline' | 'info' | 'info-outline' | 'warning' | 'warning-outline' | 'danger' | 'danger-outline';
+    /**
+     * Size variant for the radio inputs
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Label text to display above the radio group
+     */
+    label?: ReactNode;
+    /**
+     * Helper text to display below the radio group
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message for invalid state
+     */
+    error?: ReactNode;
+    /**
+     * Direction of radio layout
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * The name attribute for the radio group - required for radio functionality
+     */
+    name: string;
+}
+/**
+ * Props for the RadioInput.Option component
+ */
+export interface RadioOptionProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name'> {
+    /**
+     * The option label content
+     */
+    children: ReactNode;
+    /**
+     * Description text below the option label
+     */
+    description?: ReactNode;
+    /**
+     * The value for this radio option
+     */
+    value: string;
+}

package/dist/components/radio-input.js

@@ -0,0 +1,4 @@
+import { R as p } from "../radio-input-BRGoevZY.js";
+export {
+  p as RadioInput
+};

package/dist/components/segment-multiple-input/context.d.ts

@@ -0,0 +1,12 @@
+import { SegmentMultipleInputProps } from './types';
+export interface SegmentMultipleInputContextValue {
+    variant: SegmentMultipleInputProps['variant'];
+    size: SegmentMultipleInputProps['size'];
+    disabled?: boolean;
+    error?: boolean;
+    name: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+export declare const SegmentMultipleInputContext: import('react').Context<SegmentMultipleInputContextValue | null>;
+export declare const useSegmentMultipleInputContext: () => SegmentMultipleInputContextValue;

package/dist/components/segment-multiple-input/helpers.d.ts

@@ -0,0 +1,15 @@
+export declare const segmentGroupVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | "success" | "info" | "warning" | "danger" | "primary-outline" | "secondary-outline" | "tertiary-outline" | "ghost-outline" | "neutral-outline" | "success-outline" | "info-outline" | "warning-outline" | "danger-outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    error?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const segmentOptionVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | "success" | "info" | "warning" | "danger" | "primary-outline" | "secondary-outline" | "tertiary-outline" | "ghost-outline" | "neutral-outline" | "success-outline" | "info-outline" | "warning-outline" | "danger-outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "first" | "last" | "middle" | "single" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Get the selected/checked state classes for segment options
+ * Includes hover state overrides to maintain consistent appearance when selected
+ */
+export declare const getSegmentSelectedClasses: (variant: string | undefined) => string;

package/dist/components/segment-multiple-input/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentMultipleInput } from './segment-multiple-input';
+export type { SegmentMultipleInputProps, SegmentMultipleInputOptionProps, } from './types';

package/dist/components/segment-multiple-input/segment-multiple-input.atoms.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { SegmentMultipleInputOptionProps } from './types';
+/**
+ * SegmentMultipleInput.Option atom component
+ *
+ * Individual segment option that can be used within SegmentMultipleInput
+ * Features tab-like styling with seamless connections between segments
+ * Uses checkbox input pattern for multiple selection
+ */
+export declare const SegmentOption: React.ForwardRefExoticComponent<SegmentMultipleInputOptionProps & {
+    position?: "first" | "middle" | "last" | "single";
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/segment-multiple-input/segment-multiple-input.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { SegmentMultipleInputProps } from './types';
+export declare const SegmentMultipleInput: React.ForwardRefExoticComponent<SegmentMultipleInputProps & React.RefAttributes<HTMLDivElement>> & {
+    Option: React.ForwardRefExoticComponent<import('./types').SegmentMultipleInputOptionProps & {
+        position?: "first" | "middle" | "last" | "single";
+    } & React.RefAttributes<HTMLInputElement>>;
+};

package/dist/components/segment-multiple-input/segment-multiple-input.stories.d.ts

@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SegmentMultipleInput } from './segment-multiple-input';
+/**
+ * SegmentMultipleInput provides a tab-like interface for selecting multiple options.
+ * Perfect for filters, preferences, or any scenario where users need to choose multiple items from a set.
+ *
+ * Features:
+ * - Multiple selection with checkbox behavior
+ * - Users can unselect options by clicking them again
+ * - Tab-like visual design with seamless segment connections
+ * - Full accessibility support with proper ARIA attributes
+ * - Controlled component pattern for React forms
+ */
+declare const meta: Meta<typeof SegmentMultipleInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Default segment multiple input with primary variant.
+ * Users can select multiple options and deselect them by clicking again.
+ */
+export declare const Default: Story;
+/**
+ * Segment multiple input with multiple selections.
+ * Shows how multiple options can be selected simultaneously.
+ */
+export declare const MultipleSelected: Story;
+/**
+ * Segment multiple input in different sizes.
+ * Demonstrates the available size variants.
+ */
+export declare const Sizes: Story;
+/**
+ * Segment multiple input showing core color variants.
+ * Demonstrates the main color options available.
+ */
+export declare const CoreVariants: Story;
+/**
+ * Segment multiple input showing outline variants.
+ * Demonstrates the outline style options.
+ */
+export declare const OutlineVariants: Story;
+/**
+ * Segment multiple input showing semantic variants.
+ * Demonstrates success, info, warning, and danger states.
+ */
+export declare const SemanticVariants: Story;
+/**
+ * Segment multiple input with error state.
+ * Shows how validation errors are displayed.
+ */
+export declare const WithError: Story;
+/**
+ * Segment multiple input in disabled state.
+ * Shows the component when interaction is disabled.
+ */
+export declare const Disabled: Story;
+/**
+ * Segment multiple input with individual disabled options.
+ * Shows how specific options can be disabled while others remain interactive.
+ */
+export declare const PartiallyDisabled: Story;
+/**
+ * Segment multiple input with single option.
+ * Shows how the component adapts to a single option with rounded corners.
+ */
+export declare const SingleOption: Story;