mtrl 0.3.7 → 0.3.9

package/dist/components/search/config.d.ts

@@ -0,0 +1,73 @@
+import { SearchConfig } from './types';
+/**
+ * Default configuration for the Search component
+ */
+export declare const defaultConfig: SearchConfig;
+/**
+ * Creates the base configuration for Search component
+ * @param {SearchConfig} config - User provided configuration
+ * @returns {SearchConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: SearchConfig) => SearchConfig;
+/**
+ * Generates element configuration for the Search component
+ * @param {SearchConfig} config - Search configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: SearchConfig) => {
+    tag: string;
+    componentName: string;
+    attrs: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};
+/**
+ * Creates API configuration for the Search component
+ * @param {Object} comp - Component with search features
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    search: {
+        setValue: (v: any, t: any) => any;
+        getValue: () => any;
+        setPlaceholder: (p: any) => any;
+        getPlaceholder: () => any;
+        focus: () => any;
+        blur: () => any;
+        expand: () => any;
+        collapse: () => any;
+        clear: () => any;
+        submit: () => any;
+        setSuggestions: (s: any) => any;
+        showSuggestions: (s: any) => any;
+    };
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+        isDisabled: () => any;
+    };
+    appearance: {
+        setColor: (c: any) => any;
+        getColor: () => any;
+        setSize: (s: any) => any;
+        getSize: () => any;
+    };
+    icons: {
+        setLeadingIcon: (i: any) => any;
+        setTrailingIcon: (i: any) => any;
+        setTrailingIcon2: (i: any) => any;
+        setAvatar: (a: any) => any;
+        showClearButton: (s: any) => any;
+    };
+    events: {
+        on: (e: any, h: any) => any;
+        off: (e: any, h: any) => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};

package/dist/components/search/constants.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Search component variants
+ */
+export declare const SEARCH_VARIANTS: {
+    /** Standard search box */
+    readonly STANDARD: "standard";
+    /** Search in bar layout */
+    readonly BAR: "bar";
+    /** Search in rail layout */
+    readonly RAIL: "rail";
+    /** Search in drawer layout */
+    readonly DRAWER: "drawer";
+    /** Modal search that expands to take focus */
+    readonly MODAL: "modal";
+};
+/**
+ * Search component states
+ */
+export declare const SEARCH_STATES: {
+    /** Search is focused */
+    readonly FOCUSED: "focused";
+    /** Search is expanded (for bar or modal variants) */
+    readonly EXPANDED: "expanded";
+    /** Search is collapsed (for bar or modal variants) */
+    readonly COLLAPSED: "collapsed";
+    /** Search has content */
+    readonly POPULATED: "populated";
+    /** Search is disabled */
+    readonly DISABLED: "disabled";
+    /** Search is showing suggestions */
+    readonly SUGGESTING: "suggesting";
+};
+/**
+ * Search component events
+ */
+export declare const SEARCH_EVENTS: {
+    /** Fired when search input is focused */
+    readonly FOCUS: "focus";
+    /** Fired when search input loses focus */
+    readonly BLUR: "blur";
+    /** Fired when input value changes */
+    readonly INPUT: "input";
+    /** Fired when search is submitted */
+    readonly SUBMIT: "submit";
+    /** Fired when search is cleared */
+    readonly CLEAR: "clear";
+    /** Fired when an icon is clicked */
+    readonly ICON_CLICK: "iconClick";
+};
+/**
+ * Default search icons (standard set)
+ */
+export declare const SEARCH_ICONS: {
+    /** Default search icon */
+    readonly SEARCH: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>";
+    /** Clear/close icon */
+    readonly CLEAR: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>";
+    /** Back arrow icon */
+    readonly BACK: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"/></svg>";
+    /** Settings/options icon */
+    readonly SETTINGS: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>";
+};
+/**
+ * Default configuration values
+ */
+export declare const SEARCH_DEFAULTS: {
+    /** Default variant */
+    readonly VARIANT: "standard";
+    /** Default placeholder text */
+    readonly PLACEHOLDER: "Search";
+    /** Default value */
+    readonly VALUE: "";
+    /** Default leading icon */
+    readonly LEADING_ICON: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>";
+    /** Whether to show clear button by default */
+    readonly SHOW_CLEAR_BUTTON: true;
+    /** Default max width (in pixels) */
+    readonly MAX_WIDTH: 480;
+    /** Default min width (in pixels) */
+    readonly MIN_WIDTH: 240;
+    /** Whether the component is full width by default */
+    readonly FULL_WIDTH: false;
+    /** Whether to show dividers between suggestion groups */
+    readonly SHOW_DIVIDERS: true;
+};
+/**
+ * CSS classes for search component elements
+ */
+export declare const SEARCH_CLASSES: {
+    /** Container element */
+    readonly CONTAINER: "search";
+    /** Variant modifier class prefix */
+    readonly VARIANT_PREFIX: "search--";
+    /** Search input element */
+    readonly INPUT: "search__input";
+    /** Leading icon container */
+    readonly LEADING_ICON: "search__leading-icon";
+    /** Trailing icon container */
+    readonly TRAILING_ICON: "search__trailing-icon";
+    /** Second trailing icon container */
+    readonly TRAILING_ICON2: "search__trailing-icon2";
+    /** Avatar container */
+    readonly AVATAR: "search__avatar";
+    /** Clear button */
+    readonly CLEAR_BUTTON: "search__clear-button";
+    /** Suggestions container */
+    readonly SUGGESTIONS: "search__suggestions";
+    /** Individual suggestion item */
+    readonly SUGGESTION_ITEM: "search__suggestion-item";
+    /** Suggestion divider */
+    readonly SUGGESTION_DIVIDER: "search__suggestion-divider";
+    /** Suggestion icon */
+    readonly SUGGESTION_ICON: "search__suggestion-icon";
+    /** Suggestion text */
+    readonly SUGGESTION_TEXT: "search__suggestion-text";
+    /** Focused state */
+    readonly FOCUSED: "search--focused";
+    /** Expanded state */
+    readonly EXPANDED: "search--expanded";
+    /** Populated state (has value) */
+    readonly POPULATED: "search--populated";
+    /** Disabled state */
+    readonly DISABLED: "search--disabled";
+    /** Full width modifier */
+    readonly FULL_WIDTH: "search--full-width";
+    /** Showing suggestions state */
+    readonly SUGGESTING: "search--suggesting";
+};

package/{src/components/search/features/index.ts → dist/components/search/features/index.d.ts}

@@ -1,4 +1,3 @@
-// src/components/search/features/index.ts
 export { withStructure } from './structure';
 export { withStates } from './states';
-export { withSearch } from './search';
+export { withSearch } from './search';

package/dist/components/search/features/search.d.ts

@@ -0,0 +1,7 @@
+import { SearchConfig } from '../types';
+/**
+ * Add main search functionality to component
+ * @param config Search configuration
+ * @returns Component enhancer with search functionality
+ */
+export declare const withSearch: (config: SearchConfig) => (component: any) => any;

package/dist/components/search/features/states.d.ts

@@ -0,0 +1,8 @@
+import { SearchConfig } from '../types';
+/**
+ * Add state management features to search component
+ *
+ * @param config Search configuration
+ * @returns Component enhancer with state management features
+ */
+export declare const withStates: (config: SearchConfig) => (component: any) => any;

package/dist/components/search/features/structure.d.ts

@@ -0,0 +1,7 @@
+import { SearchConfig } from '../types';
+/**
+ * Creates the search component DOM structure
+ * @param config Search configuration
+ * @returns Component enhancer with DOM structure
+ */
+export declare const withStructure: (config: SearchConfig) => (component: any) => any;

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

@@ -0,0 +1,3 @@
+export { default } from './search';
+export type { SearchConfig, SearchComponent, SearchEvent } from './types';
+export { SEARCH_VARIANTS, SEARCH_STATES, SEARCH_EVENTS, SEARCH_ICONS, SEARCH_DEFAULTS, SEARCH_CLASSES } from './constants';

package/dist/components/search/search.d.ts

@@ -0,0 +1,8 @@
+import { SearchConfig, SearchComponent } from './types';
+/**
+ * Creates a new Search component
+ * @param {SearchConfig} config - Search configuration object
+ * @returns {SearchComponent} Search component instance
+ */
+declare const createSearch: (config?: SearchConfig) => SearchComponent;
+export default createSearch;

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

@@ -0,0 +1,132 @@
+/**
+ * Navigation variants for the search component
+ */
+export type NavVariant = 'rail' | 'drawer' | 'bar' | 'modal' | 'standard';
+/**
+ * Valid event types for search component
+ */
+export type SearchEventType = 'focus' | 'blur' | 'input' | 'submit' | 'clear' | 'iconClick';
+/**
+ * Configuration options for the search component
+ * @interface SearchConfig
+ */
+export interface SearchConfig {
+    /** The variant of the search component (rail, drawer, bar, modal, or standard) */
+    variant?: NavVariant | string;
+    /** Whether the search component is disabled */
+    disabled?: boolean;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Initial value for the search input */
+    value?: string;
+    /** Leading icon HTML or 'none' to remove */
+    leadingIcon?: string;
+    /** Trailing icon HTML (optional) */
+    trailingIcon?: string;
+    /** Second trailing icon HTML (optional) */
+    trailingIcon2?: string;
+    /** Avatar HTML for trailing avatar (optional) */
+    avatar?: string;
+    /** If true, will show the clear button when the input has text */
+    showClearButton?: boolean;
+    /** Callback function when a search is submitted */
+    onSubmit?: (value: string) => void;
+    /** Callback function when the input value changes */
+    onInput?: (value: string) => void;
+    /** Callback function when the clear button is clicked */
+    onClear?: () => void;
+    /** Suggestions to show when the search is focused (array of strings or objects) */
+    suggestions?: string[] | Array<{
+        text: string;
+        value?: string;
+        icon?: string;
+    }>;
+    /** Whether to show dividers between suggestion groups */
+    showDividers?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Maximum width of the search component in pixels */
+    maxWidth?: number;
+    /** Minimum width of the search component in pixels */
+    minWidth?: number;
+    /** Whether the search component is full-width */
+    fullWidth?: boolean;
+    /** Event handlers for search events */
+    on?: {
+        [key in SearchEventType]?: (event: SearchEvent) => void;
+    };
+}
+/**
+ * Search event data
+ * @interface SearchEvent
+ */
+export interface SearchEvent {
+    /** The search component that triggered the event */
+    search: any;
+    /** Current search value */
+    value: string;
+    /** Original DOM event if available */
+    originalEvent: Event | null;
+    /** Function to prevent default behavior */
+    preventDefault: () => void;
+    /** Whether default behavior was prevented */
+    defaultPrevented: boolean;
+}
+/**
+ * Search component public API interface
+ * @interface SearchComponent
+ */
+export interface SearchComponent {
+    /** The root element of the search component */
+    element: HTMLElement;
+    /** Sets the search value */
+    setValue: (value: string, triggerEvent?: boolean) => SearchComponent;
+    /** Gets the search value */
+    getValue: () => string;
+    /** Sets placeholder text */
+    setPlaceholder: (text: string) => SearchComponent;
+    /** Gets placeholder text */
+    getPlaceholder: () => string;
+    /** Sets leading icon */
+    setLeadingIcon: (iconHtml: string) => SearchComponent;
+    /** Sets trailing icon */
+    setTrailingIcon: (iconHtml: string) => SearchComponent;
+    /** Sets second trailing icon */
+    setTrailingIcon2: (iconHtml: string) => SearchComponent;
+    /** Sets avatar */
+    setAvatar: (avatarHtml: string) => SearchComponent;
+    /** Shows or hides clear button */
+    showClearButton: (show: boolean) => SearchComponent;
+    /** Updates suggestions */
+    setSuggestions: (suggestions: string[] | Array<{
+        text: string;
+        value?: string;
+        icon?: string;
+    }>) => SearchComponent;
+    /** Shows or hides suggestions */
+    showSuggestions: (show: boolean) => SearchComponent;
+    /** Focuses the search input */
+    focus: () => SearchComponent;
+    /** Blurs the search input */
+    blur: () => SearchComponent;
+    /** Expands the search bar into view mode (if in bar mode) */
+    expand: () => SearchComponent;
+    /** Collapses the search view back to bar mode */
+    collapse: () => SearchComponent;
+    /** Clears the search input */
+    clear: () => SearchComponent;
+    /** Submits the search */
+    submit: () => SearchComponent;
+    /** Enables the search component */
+    enable: () => SearchComponent;
+    /** Disables the search component */
+    disable: () => SearchComponent;
+    /** Checks if search is disabled */
+    isDisabled: () => boolean;
+    /** Adds event listener */
+    on: (event: SearchEventType, handler: (event: SearchEvent) => void) => SearchComponent;
+    /** Removes event listener */
+    off: (event: SearchEventType, handler: (event: SearchEvent) => void) => SearchComponent;
+    /** Destroys the search component and cleans up resources */
+    destroy: () => void;
+}

package/dist/components/segmented-button/config.d.ts

@@ -0,0 +1,65 @@
+import { SegmentedButtonConfig, SelectionMode } from './types';
+/**
+ * Default configuration values for segmented buttons
+ * @internal
+ */
+export declare const DEFAULT_CONFIG: {
+    mode: "single";
+    ripple: true;
+    density: "default";
+};
+/**
+ * Creates the base configuration for Segmented Button component
+ * @param {SegmentedButtonConfig} config - User provided configuration
+ * @returns {SegmentedButtonConfig} Complete configuration with defaults applied
+ * @internal
+ */
+export declare const createBaseConfig: (config?: SegmentedButtonConfig) => SegmentedButtonConfig;
+/**
+ * Generates element configuration for the Segmented Button container
+ * @param {SegmentedButtonConfig} config - Segmented Button configuration
+ * @returns {Object} Element configuration object for withElement
+ * @internal
+ */
+export declare const getContainerConfig: (config: SegmentedButtonConfig) => {
+    tag: string;
+    componentName: string;
+    attrs: {
+        role: string;
+        'aria-label': string;
+        'data-mode': SelectionMode;
+        'data-density': string;
+    };
+    className: string[];
+    interactive: boolean;
+};
+/**
+ * Gets density-specific sizing and spacing values
+ * @param {string} density - The density level
+ * @returns {Object} CSS variables with sizing values
+ * @internal
+ */
+export declare const getDensityStyles: (density: string) => Record<string, string>;
+/**
+ * Generates configuration for a segment element
+ * @param {Object} segment - Segment configuration
+ * @param {string} prefix - Component prefix
+ * @param {boolean} groupDisabled - Whether the entire group is disabled
+ * @returns {Object} Element configuration for the segment
+ * @internal
+ */
+export declare const getSegmentConfig: (segment: any, prefix: any, groupDisabled?: boolean) => {
+    tag: string;
+    attrs: {
+        type: string;
+        role: string;
+        disabled: boolean;
+        'aria-pressed': string;
+        value: any;
+    };
+    className: any[];
+    forwardEvents: {
+        click: (component: any) => boolean;
+    };
+    interactive: boolean;
+};

package/dist/components/segmented-button/constants.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Selection modes for segmented buttons
+ */
+export declare const SEGMENTED_BUTTON_MODES: {
+    /** Only one segment can be selected at a time */
+    readonly SINGLE: "single";
+    /** Multiple segments can be selected */
+    readonly MULTI: "multi";
+};
+/**
+ * Density levels for segmented buttons
+ */
+export declare const SEGMENTED_BUTTON_DENSITY: {
+    /** Default size with standard spacing */
+    readonly DEFAULT: "default";
+    /** Reduced size and spacing, more compact */
+    readonly COMFORTABLE: "comfortable";
+    /** Minimal size and spacing, most compact */
+    readonly COMPACT: "compact";
+};
+/**
+ * Segmented button events
+ */
+export declare const SEGMENTED_BUTTON_EVENTS: {
+    /** Fired when selection changes */
+    readonly CHANGE: "change";
+};
+/**
+ * Default configuration values
+ */
+export declare const SEGMENTED_BUTTON_DEFAULTS: {
+    /** Default selection mode */
+    readonly MODE: "single";
+    /** Default density level */
+    readonly DENSITY: "default";
+    /** Whether ripple effect is enabled by default */
+    readonly RIPPLE: true;
+    /** Default ripple animation duration in milliseconds */
+    readonly RIPPLE_DURATION: 300;
+    /** Default ripple animation timing function */
+    readonly RIPPLE_TIMING: "cubic-bezier(0.4, 0, 0.2, 1)";
+    /** Default ripple opacity values [start, end] */
+    readonly RIPPLE_OPACITY: readonly ["0.2", "0"];
+};
+export declare const DEFAULT_CHECKMARK_ICON = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <polyline points=\"20 6 9 17 4 12\"></polyline>\n</svg>";
+/**
+ * Default checkmark icon for selected segments
+ */
+export declare const SEGMENTED_BUTTON_ICONS: {
+    /** Default checkmark icon */
+    readonly CHECKMARK: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>";
+};
+/**
+ * CSS classes for segmented button elements
+ */
+export declare const SEGMENTED_BUTTON_CLASSES: {
+    /** Container element */
+    readonly CONTAINER: "segmented-button";
+    /** Individual segment */
+    readonly SEGMENT: "segmented-button__segment";
+    /** Selected segment */
+    readonly SELECTED: "segmented-button__segment--selected";
+    /** Disabled segment */
+    readonly DISABLED: "segmented-button__segment--disabled";
+    /** Segment with icon */
+    readonly HAS_ICON: "segmented-button__segment--has-icon";
+    /** Segment icon container */
+    readonly ICON: "segmented-button__icon";
+    /** Segment label text */
+    readonly LABEL: "segmented-button__label";
+    /** Checkmark icon for selected state */
+    readonly CHECKMARK: "segmented-button__checkmark";
+    /** Ripple effect container */
+    readonly RIPPLE: "segmented-button__ripple";
+    /** Single selection mode */
+    readonly SINGLE_MODE: "segmented-button--single";
+    /** Multiple selection mode */
+    readonly MULTI_MODE: "segmented-button--multi";
+    /** Default density */
+    readonly DEFAULT_DENSITY: "segmented-button--density-default";
+    /** Comfortable density */
+    readonly COMFORTABLE_DENSITY: "segmented-button--density-comfortable";
+    /** Compact density */
+    readonly COMPACT_DENSITY: "segmented-button--density-compact";
+};

package/dist/components/segmented-button/index.d.ts

@@ -0,0 +1,4 @@
+export { default, default as createSegmentedButton } from './segmented-button';
+export { SelectionMode, Density } from './types';
+export type { SegmentedButtonConfig, SegmentedButtonComponent, SegmentConfig, Segment } from './types';
+export { SEGMENTED_BUTTON_MODES, SEGMENTED_BUTTON_DENSITY, SEGMENTED_BUTTON_EVENTS, SEGMENTED_BUTTON_DEFAULTS, SEGMENTED_BUTTON_ICONS, SEGMENTED_BUTTON_CLASSES } from './constants';

package/dist/components/segmented-button/segment.d.ts

@@ -0,0 +1,15 @@
+import { SegmentConfig, Segment } from './types';
+/**
+ * Creates a segment for the segmented button using the button component
+ * @param {SegmentConfig} config - Segment configuration
+ * @param {HTMLElement} container - Container element
+ * @param {string} prefix - Component prefix
+ * @param {boolean} groupDisabled - Whether the entire group is disabled
+ * @param {Object} options - Additional options
+ * @returns {Segment} Segment object
+ * @internal
+ */
+export declare const createSegment: (config: SegmentConfig, container: HTMLElement, prefix: string, groupDisabled?: boolean, options?: {
+    ripple: boolean;
+    rippleConfig: {};
+}) => Segment;

package/dist/components/segmented-button/segmented-button.d.ts

@@ -0,0 +1,49 @@
+import { SegmentedButtonConfig, SegmentedButtonComponent } from './types';
+/**
+ * Creates a new Segmented Button component
+ *
+ * The Segmented Button component provides a group of related buttons that can
+ * be used for selection and filtering. It supports single or multiple selection modes,
+ * configurable density, disabled states, and event handling.
+ *
+ * @param {SegmentedButtonConfig} config - Segmented Button configuration
+ * @returns {SegmentedButtonComponent} Segmented Button component instance
+ *
+ * @example
+ * // Create a segmented button with three segments in single selection mode
+ * const viewToggle = createSegmentedButton({
+ *   segments: [
+ *     { text: 'Day', value: 'day', selected: true },
+ *     { text: 'Week', value: 'week' },
+ *     { text: 'Month', value: 'month' }
+ *   ],
+ *   mode: SelectionMode.SINGLE
+ * });
+ *
+ * // Listen for selection changes
+ * viewToggle.on('change', (event) => {
+ *   console.log('Selected view:', event.value[0]);
+ *   updateCalendarView(event.value[0]);
+ * });
+ *
+ * @example
+ * // Create a compact multi-select segmented button with icons
+ * const filterOptions = createSegmentedButton({
+ *   segments: [
+ *     {
+ *       icon: '<svg>...</svg>',
+ *       text: 'Filter 1',
+ *       value: 'filter1'
+ *     },
+ *     {
+ *       icon: '<svg>...</svg>',
+ *       text: 'Filter 2',
+ *       value: 'filter2'
+ *     }
+ *   ],
+ *   mode: SelectionMode.MULTI,
+ *   density: Density.COMPACT
+ * });
+ */
+declare const createSegmentedButton: (config?: SegmentedButtonConfig) => SegmentedButtonComponent;
+export default createSegmentedButton;