export type Segment = { value: TValue; label: string; /** Non-interactive — click does nothing. */ disabled?: boolean; /** Visual flag — colors the segment in the danger tone (validation hint). */ error?: boolean; }; declare function $$render(): { props: { value: T; /** `NoInfer` ensures `T` narrows from `value` only; inline segments literals type-check against the value's T without widening — no `as const` needed at callsites. */ segments: Segment>[]; /** @default 'tray' */ variant?: "tray" | "outlined"; /** @default 'md' */ size?: "sm" | "md"; /** Stretch segments to fill the parent's inline axis. @default false */ fullWidth?: boolean; /** Equality for object T values. @default reference equality (`===`) */ compare?: (a: T, b: T) => boolean; on?: { change?: (value: T) => void; }; }; exports: {}; bindings: ""; slots: {}; events: {}; }; declare class __sveltets_Render { props(): ReturnType>['props']; events(): ReturnType>['events']; slots(): ReturnType>['slots']; bindings(): ""; exports(): {}; } interface $$IsomorphicComponent { new (options: import('svelte').ComponentConstructorOptions['props']>>): import('svelte').SvelteComponent['props']>, ReturnType<__sveltets_Render['events']>, ReturnType<__sveltets_Render['slots']>> & { $$bindings?: ReturnType<__sveltets_Render['bindings']>; } & ReturnType<__sveltets_Render['exports']>; (internal: unknown, props: ReturnType<__sveltets_Render['props']> & {}): ReturnType<__sveltets_Render['exports']>; z_$$bindings?: ReturnType<__sveltets_Render['bindings']>; } /** * SegmentedControl — radio-style toggle group rendered as connected pills. Two visual variants: * * - **`tray`** (default): inset pill — outer container is a flat tray, active segment lifts as a card with shadow. * - **`outlined`**: button-row — each segment has its own border, active segment is filled with the menu-active background. * * Each segment carries an optional `disabled` flag (non-interactive) and an optional `error` flag (colors the label in the danger tone — useful for marking validation errors across a group picker). * * ### CSS Custom Properties * | Property | Description | Default | * |---|---|---| * | `--sc-kit--segmented-control--height` | Control height | per size (28 / 32 px) | * | `--sc-kit--segmented-control--font-size` | Label font size | per size | * | `--sc-kit--segmented-control--padding-inline` | Per-segment horizontal padding | per size (10 / 12 px) | * | `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | per size — `sm` 4px, `md` 6px | * | `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--secondary` | * | `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` | * | `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` | * | `--sc-kit--segmented-control--color--disabled` | Disabled segment text color | `--sc-kit--color--text--muted` | * | `--sc-kit--segmented-control--color--error` | Error segment text color | `--sc-kit--color--danger` | * | `--sc-kit--segmented-control--background--active` | Active segment background | tray: `--bg--panel`, outlined: `--bg--menu-active` | * | `--sc-kit--segmented-control--tray--background` | Outer tray background (tray variant) | `--sc-kit--color--bg--active` | * | `--sc-kit--segmented-control--tray--padding` | Inner tray padding around segments | `3px` | * | `--sc-kit--segmented-control--tray--shadow--active` | Lift shadow on the active segment (tray variant) | `--sc-kit--shadow--sm` | * | `--sc-kit--segmented-control--outlined--background` | Per-segment background (outlined variant) | `--sc-kit--color--bg--field` | * | `--sc-kit--segmented-control--outlined--border-color` | Per-segment border (outlined variant) | `--sc-kit--color--border--field` | */ declare const Cmp: $$IsomorphicComponent; type Cmp = InstanceType>; export default Cmp;