- Name
service- Kind
- parameter
- Type
SegmentedService- Requirement
- required
DocsAPI referenceHeadlesssegmented
segmented headless API
The core connector and vanilla mount are always visible. Use the framework choice to inspect native composition, props, outputs, context and hooks for the selected adapter.
@grassroot/ui-headless-core/segmented
Core connector and vanilla API
connectSegmented
functiondeclare function connectSegmented(service: SegmentedService, scope: PartScope, options?: SegmentedConnectOptions): SegmentedApi;serviceSegmentedServicescopePartScopeoptionsSegmentedConnectOptionsreturnSegmentedApi- Name
scope- Kind
- parameter
- Type
PartScope- Requirement
- required
- Name
options- Kind
- parameter
- Type
SegmentedConnectOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
SegmentedApi- Requirement
- n/a
connectToggleGroup
valueexport declare const connectToggleGroup: typeof connectSegmented;serviceSegmentedServicescopePartScopeoptionsSegmentedConnectOptionsreturnSegmentedApi- Name
service- Kind
- parameter
- Type
SegmentedService- Requirement
- required
- Name
scope- Kind
- parameter
- Type
PartScope- Requirement
- required
- Name
options- Kind
- parameter
- Type
SegmentedConnectOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
SegmentedApi- Requirement
- n/a
mountSegmented
functiondeclare function mountSegmented(container: HTMLElement, options: MountSegmentedOptions): SegmentedMount;containerHTMLElementoptionsMountSegmentedOptionsreturnSegmentedMount- Name
container- Kind
- parameter
- Type
HTMLElement- Requirement
- required
- Name
options- Kind
- parameter
- Type
MountSegmentedOptions- Requirement
- required
- Name
return- Kind
- return value
- Type
SegmentedMount- Requirement
- n/a
MountSegmentedOptions
interfaceinterface MountSegmentedOptions extends SegmentedInput { readonly dir?: "ltr" | "rtl"; readonly surface?: "segmented" | "toggle-group"; readonly onValueChange?: (detail: SegmentedValueChangeDetail) => void; readonly renderItem?: (button: HTMLButtonElement, item: SegmentedItem) => void; readonly renderLabel?: (label: HTMLLabelElement) => void;}dir"ltr" | "rtl"onValueChange(detail: SegmentedValueChangeDetail) => voidrenderItem(button: HTMLButtonElement, item: SegmentedItem) => voidrenderLabel(label: HTMLLabelElement) => voidsurface"segmented" | "toggle-group"- Name
dir- Kind
- property
- Type
"ltr" | "rtl"- Requirement
- optional
- Name
onValueChange- Kind
- property
- Type
(detail: SegmentedValueChangeDetail) => void- Requirement
- optional
- Name
renderItem- Kind
- property
- Type
(button: HTMLButtonElement, item: SegmentedItem) => void- Requirement
- optional
- Name
renderLabel- Kind
- property
- Type
(label: HTMLLabelElement) => void- Requirement
- optional
- Name
surface- Kind
- property
- Type
"segmented" | "toggle-group"- Requirement
- optional
mountToggleGroup
functiondeclare function mountToggleGroup(container: HTMLElement, options: MountSegmentedOptions): SegmentedMount;containerHTMLElementoptionsMountSegmentedOptionsreturnSegmentedMount- Name
container- Kind
- parameter
- Type
HTMLElement- Requirement
- required
- Name
options- Kind
- parameter
- Type
MountSegmentedOptions- Requirement
- required
- Name
return- Kind
- return value
- Type
SegmentedMount- Requirement
- n/a
runSegmentedCommand
functionResolves machine commands against the registered item elements.
declare function runSegmentedCommand(command: SegmentedCommand, scope: PartScope, options?: { readonly onValueChange?: (detail: { value: string | readonly string[]; reason: SegmentedChangeReason; }) => void;}): void;commandSegmentedCommandscopePartScopeoptions{
readonly onValueChange?: (detail: {
value: string | readonly string[];
reason: SegmentedChangeReason;
}) => void;
}returnvoid- Name
command- Kind
- parameter
- Type
SegmentedCommand- Requirement
- required
- Name
scope- Kind
- parameter
- Type
PartScope- Requirement
- required
- Name
options- Kind
- parameter
- Type
{ readonly onValueChange?: (detail: { value: string | readonly string[]; reason: SegmentedChangeReason; }) => void; }- Requirement
- optional
- Name
return- Kind
- return value
- Type
void- Requirement
- n/a
segmentedAnatomy
valueexport declare const segmentedAnatomy: { readonly scope: "segmented"; readonly parts: readonly ["root", "item", "indicator", "label"];};partsreadonly ["root", "item", "indicator", "label"]scope"segmented"- Name
parts- Kind
- property
- Type
readonly ["root", "item", "indicator", "label"]- Requirement
- required
- Name
scope- Kind
- property
- Type
"segmented"- Requirement
- required
SegmentedApi
interfaceinterface SegmentedApi { rootProps(): PartProps; itemProps(item: SegmentedItem): PartProps; indicatorProps(item?: SegmentedItem): PartProps; labelProps(): PartProps; readonly value: string | readonly string[] | undefined; readonly focusedValue: string | undefined; readonly type: SegmentedType;}focusedValuestring | undefinedindicatorProps(item?: SegmentedItem) => PartPropsitemProps(item: SegmentedItem) => PartPropslabelProps() => PartPropsrootProps() => PartPropstypeSegmentedTypevaluestring | readonly string[] | undefined- Name
focusedValue- Kind
- property
- Type
string | undefined- Requirement
- required
- Name
indicatorProps- Kind
- method
- Type
(item?: SegmentedItem) => PartProps- Requirement
- required
- Name
itemProps- Kind
- method
- Type
(item: SegmentedItem) => PartProps- Requirement
- required
- Name
labelProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
rootProps- Kind
- method
- Type
() => PartProps- Requirement
- required
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- required
- Name
value- Kind
- property
- Type
string | readonly string[] | undefined- Requirement
- required
type SegmentedChangeReason = "pointer" | "keyboard" | "programmatic";SegmentedCommand
typetype SegmentedCommand = CommandObject & ({ readonly type: "VALUE_CHANGE_REQUEST"; readonly value: SegmentedSelection; readonly reason: SegmentedChangeReason;} | { readonly type: "FOCUS_ITEM"; readonly key: string;});SegmentedConnectOptions
interfaceinterface SegmentedConnectOptions { readonly dir?: "ltr" | "rtl"; readonly scope?: "segmented" | "toggle-group" | (() => "segmented" | "toggle-group");}dir"ltr" | "rtl"scope"segmented" | "toggle-group" | (() => "segmented" | "toggle-group")- Name
dir- Kind
- property
- Type
"ltr" | "rtl"- Requirement
- optional
- Name
scope- Kind
- property
- Type
"segmented" | "toggle-group" | (() => "segmented" | "toggle-group")- Requirement
- optional
SegmentedContext
typetype SegmentedContext = { readonly type: SegmentedType; readonly value: SegmentedSelection | undefined; readonly focusedValue?: string; readonly mode: BindingMode;};focusedValuestringmodeBindingModetypeSegmentedTypevalueSegmentedSelection | undefined- Name
focusedValue- Kind
- property
- Type
string- Requirement
- optional
- Name
mode- Kind
- property
- Type
BindingMode- Requirement
- required
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- required
- Name
value- Kind
- property
- Type
SegmentedSelection | undefined- Requirement
- required
SegmentedEvent
typetype SegmentedEvent = { readonly type: "SELECT"; readonly value: string; readonly reason: SegmentedChangeReason;} | { readonly type: "MOVE"; readonly direction: -1 | 1;} | { readonly type: "HOME";} | { readonly type: "END";} | { readonly type: "FOCUS"; readonly value: string;} | { readonly type: "BLUR";} | { readonly type: "RESET";};SegmentedInput
typetype SegmentedInput = { readonly options: readonly SegmentedItem[]; readonly type?: SegmentedType; /** Controlled committed value. A defined empty array is controlled. */ readonly value?: SegmentedSelection; /** Uncontrolled initial value. */ readonly defaultValue?: SegmentedSelection; readonly disabled?: boolean; readonly readOnly?: boolean; /** Connector hint; the machine receives logical movement only. */ readonly orientation?: SegmentedOrientation; readonly loop?: boolean;};defaultValueSegmentedSelectiondisabledbooleanloopbooleanoptionsreadonly SegmentedItem[]orientationSegmentedOrientationreadOnlybooleantypeSegmentedTypevalueSegmentedSelection- Name
defaultValue- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Uncontrolled initial value.
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
loop- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
options- Kind
- property
- Type
readonly SegmentedItem[]- Requirement
- required
- Description
- —
- Name
orientation- Kind
- property
- Type
SegmentedOrientation- Requirement
- optional
- Description
- Connector hint; the machine receives logical movement only.
- Name
readOnly- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- optional
- Description
- —
- Name
value- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Controlled committed value. A defined empty array is controlled.
SegmentedItem
interfaceinterface SegmentedItem { readonly value: string; readonly disabled?: boolean;}disabledbooleanvaluestring- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
value- Kind
- property
- Type
string- Requirement
- required
segmentedMachine
valueexport declare const segmentedMachine: SegmentedMachine;SegmentedMount
interfaceinterface SegmentedMount { readonly service: SegmentedService; readonly connector: SegmentedApi; readonly root: HTMLElement; destroy(): void;}connectorSegmentedApidestroy() => voidrootHTMLElementserviceSegmentedService- Name
connector- Kind
- property
- Type
SegmentedApi- Requirement
- required
- Name
destroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
root- Kind
- property
- Type
HTMLElement- Requirement
- required
- Name
service- Kind
- property
- Type
SegmentedService- Requirement
- required
SegmentedOrientation
typetype SegmentedOrientation = "horizontal" | "vertical";SegmentedPart
typetype SegmentedPart = (typeof segmentedAnatomy.parts)[number];SegmentedSelection
typetype SegmentedSelection = string | readonly string[];segmentedSelectors
valueexport declare const segmentedSelectors: { type: (snapshot: SegmentedSnapshot) => SegmentedType; value: (snapshot: SegmentedSnapshot) => SegmentedSelection | undefined; focusedValue: (snapshot: SegmentedSnapshot) => string | undefined; isSelected: (snapshot: SegmentedSnapshot, value: string) => boolean;};focusedValue(snapshot: SegmentedSnapshot) => string | undefinedisSelected(snapshot: SegmentedSnapshot, value: string) => booleantype(snapshot: SegmentedSnapshot) => SegmentedTypevalue(snapshot: SegmentedSnapshot) => SegmentedSelection | undefined- Name
focusedValue- Kind
- property
- Type
(snapshot: SegmentedSnapshot) => string | undefined- Requirement
- required
- Name
isSelected- Kind
- property
- Type
(snapshot: SegmentedSnapshot, value: string) => boolean- Requirement
- required
- Name
type- Kind
- property
- Type
(snapshot: SegmentedSnapshot) => SegmentedType- Requirement
- required
- Name
value- Kind
- property
- Type
(snapshot: SegmentedSnapshot) => SegmentedSelection | undefined- Requirement
- required
SegmentedService
typetype SegmentedService = Service<SegmentedInput, SegmentedStateValue, SegmentedContext, SegmentedEvent, SegmentedCommand>;SegmentedSnapshot
typetype SegmentedSnapshot = Snapshot<SegmentedStateValue, SegmentedContext>;SegmentedStateValue
typetype SegmentedStateValue = "ready";SegmentedType
typetype SegmentedType = "single" | "multiple";SegmentedValueChangeDetail
interfaceinterface SegmentedValueChangeDetail { readonly value: string | readonly string[]; readonly reason: import("@grassroot/ui-machines/segmented").SegmentedChangeReason;}reasonimport("@grassroot/ui-machines/segmented").SegmentedChangeReasonvaluestring | readonly string[]- Name
reason- Kind
- property
- Type
import("@grassroot/ui-machines/segmented").SegmentedChangeReason- Requirement
- required
- Name
value- Kind
- property
- Type
string | readonly string[]- Requirement
- required
toggleGroupAnatomy
valueexport declare const toggleGroupAnatomy: { readonly scope: "toggle-group"; readonly parts: readonly ["root", "item", "indicator", "label"];};partsreadonly ["root", "item", "indicator", "label"]scope"toggle-group"- Name
parts- Kind
- property
- Type
readonly ["root", "item", "indicator", "label"]- Requirement
- required
- Name
scope- Kind
- property
- Type
"toggle-group"- Requirement
- required
ToggleGroupCommand
typetype ToggleGroupCommand = SegmentedCommand;ToggleGroupContext
typetype ToggleGroupContext = SegmentedContext;ToggleGroupEvent
typetype ToggleGroupEvent = SegmentedEvent;ToggleGroupInput
typetype ToggleGroupInput = SegmentedInput;ToggleGroupItem
typetype ToggleGroupItem = SegmentedItem;toggleGroupMachine
valueexport declare const toggleGroupMachine: SegmentedMachine;ToggleGroupPart
typetype ToggleGroupPart = (typeof toggleGroupAnatomy.parts)[number];toggleGroupSelectors
valueexport declare const toggleGroupSelectors: { type: (snapshot: SegmentedSnapshot) => SegmentedType; value: (snapshot: SegmentedSnapshot) => SegmentedSelection | undefined; focusedValue: (snapshot: SegmentedSnapshot) => string | undefined; isSelected: (snapshot: SegmentedSnapshot, value: string) => boolean;};focusedValue(snapshot: SegmentedSnapshot) => string | undefinedisSelected(snapshot: SegmentedSnapshot, value: string) => booleantype(snapshot: SegmentedSnapshot) => SegmentedTypevalue(snapshot: SegmentedSnapshot) => SegmentedSelection | undefined- Name
focusedValue- Kind
- property
- Type
(snapshot: SegmentedSnapshot) => string | undefined- Requirement
- required
- Name
isSelected- Kind
- property
- Type
(snapshot: SegmentedSnapshot, value: string) => boolean- Requirement
- required
- Name
type- Kind
- property
- Type
(snapshot: SegmentedSnapshot) => SegmentedType- Requirement
- required
- Name
value- Kind
- property
- Type
(snapshot: SegmentedSnapshot) => SegmentedSelection | undefined- Requirement
- required
ToggleGroupSnapshot
typetype ToggleGroupSnapshot = SegmentedSnapshot;Framework adapters
Each panel keeps its adapter's public vocabulary. React compound exports, Vue composables, standalone Angular declarations, Svelte components, and Solid hooks stay native to their framework.
React imports
import { Indicator, Item, Label, Root, RootProvider, Segmented, SegmentedContextProvider, ToggleGroup } from "@grassroot/ui-headless-react/segmented";Vue imports
<script setup lang="ts">import { Segmented, SegmentedIndicator, SegmentedItem, SegmentedLabel, SegmentedRoot, ToggleGroup, ToggleGroupRoot } from "@grassroot/ui-headless-vue/segmented";</script>Angular imports
import { Component } from "@angular/core";import { GR_SEGMENTED_DECLARATIONS } from "@grassroot/ui-headless-angular/segmented"; @Component({ standalone: true, imports: [GR_SEGMENTED_DECLARATIONS], template: `<!-- compose the segmented parts here -->` })export class Example {}Svelte imports
<script lang="ts"> import { Segmented, SegmentedIndicator, SegmentedItem, SegmentedLabel, SegmentedRoot, ToggleGroup, ToggleGroupRoot } from "@grassroot/ui-headless-svelte/segmented";</script>Solid imports
import { Segmented, SegmentedContextProvider, SegmentedIndicator, SegmentedItem, SegmentedLabel, SegmentedRoot, ToggleGroup, ToggleGroupRoot } from "@grassroot/ui-headless-solid/segmented";@grassroot/ui-headless-react/segmented
React adapter
Indicator
valueexport declare const Indicator: import("react").ForwardRefExoticComponent<SegmentedIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
Item
valueexport declare const Item: import("react").ForwardRefExoticComponent<SegmentedItemProps & import("react").RefAttributes<HTMLButtonElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
Label
valueexport declare const Label: import("react").ForwardRefExoticComponent<SegmentedLabelProps & import("react").RefAttributes<HTMLDivElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
Root
valueexport declare const Root: import("react").ForwardRefExoticComponent<SegmentedRootProps & import("react").RefAttributes<HTMLDivElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
RootProvider
valueexport declare const RootProvider: import("react").ForwardRefExoticComponent<SegmentedRootProviderProps & import("react").RefAttributes<HTMLDivElement>>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
Segmented
valueexport declare const Segmented: { Root: import("react").ForwardRefExoticComponent<SegmentedRootProps & import("react").RefAttributes<HTMLDivElement>>; RootProvider: import("react").ForwardRefExoticComponent<SegmentedRootProviderProps & import("react").RefAttributes<HTMLDivElement>>; Item: import("react").ForwardRefExoticComponent<SegmentedItemProps & import("react").RefAttributes<HTMLButtonElement>>; Label: import("react").ForwardRefExoticComponent<SegmentedLabelProps & import("react").RefAttributes<HTMLDivElement>>; Indicator: import("react").ForwardRefExoticComponent<SegmentedIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;};Indicatorimport("react").ForwardRefExoticComponent<SegmentedIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>Itemimport("react").ForwardRefExoticComponent<SegmentedItemProps & import("react").RefAttributes<HTMLButtonElement>>Labelimport("react").ForwardRefExoticComponent<SegmentedLabelProps & import("react").RefAttributes<HTMLDivElement>>Rootimport("react").ForwardRefExoticComponent<SegmentedRootProps & import("react").RefAttributes<HTMLDivElement>>RootProviderimport("react").ForwardRefExoticComponent<SegmentedRootProviderProps & import("react").RefAttributes<HTMLDivElement>>- Name
Indicator- Kind
- property
- Type
import("react").ForwardRefExoticComponent<SegmentedIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>- Requirement
- required
- Name
Item- Kind
- property
- Type
import("react").ForwardRefExoticComponent<SegmentedItemProps & import("react").RefAttributes<HTMLButtonElement>>- Requirement
- required
- Name
Label- Kind
- property
- Type
import("react").ForwardRefExoticComponent<SegmentedLabelProps & import("react").RefAttributes<HTMLDivElement>>- Requirement
- required
- Name
Root- Kind
- property
- Type
import("react").ForwardRefExoticComponent<SegmentedRootProps & import("react").RefAttributes<HTMLDivElement>>- Requirement
- required
- Name
RootProvider- Kind
- property
- Type
import("react").ForwardRefExoticComponent<SegmentedRootProviderProps & import("react").RefAttributes<HTMLDivElement>>- Requirement
- required
type SegmentedChangeReason = "pointer" | "keyboard" | "programmatic";SegmentedCommand
typetype SegmentedCommand = CommandObject & ({ readonly type: "VALUE_CHANGE_REQUEST"; readonly value: SegmentedSelection; readonly reason: SegmentedChangeReason;} | { readonly type: "FOCUS_ITEM"; readonly key: string;});SegmentedContext
valueexport declare const SegmentedContext: import("react").Context<SegmentedContextValue | null>;propsPreturnReactNode- Name
props- Kind
- parameter
- Type
P- Requirement
- required
- Name
return- Kind
- return value
- Type
ReactNode- Requirement
- n/a
SegmentedContextProvider
functiondeclare function SegmentedContextProvider(props: { value: SegmentedContextValue; children: ReactNode;}): import("react").JSX.Element;props{
value: SegmentedContextValue;
children: ReactNode;
}returnimport("react").JSX.Element- Name
props- Kind
- parameter
- Type
{ value: SegmentedContextValue; children: ReactNode; }- Requirement
- required
- Name
return- Kind
- return value
- Type
import("react").JSX.Element- Requirement
- n/a
SegmentedContextValue
interfaceinterface SegmentedContextValue { readonly service: SegmentedService; readonly connector: SegmentedApi; readonly scope: PartScope; readonly snapshot: SegmentedSnapshot;}connectorSegmentedApiscopePartScopeserviceSegmentedServicesnapshotSegmentedSnapshot- Name
connector- Kind
- property
- Type
SegmentedApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
SegmentedService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
SegmentedSnapshot- Requirement
- required
SegmentedEvent
typetype SegmentedEvent = { readonly type: "SELECT"; readonly value: string; readonly reason: SegmentedChangeReason;} | { readonly type: "MOVE"; readonly direction: -1 | 1;} | { readonly type: "HOME";} | { readonly type: "END";} | { readonly type: "FOCUS"; readonly value: string;} | { readonly type: "BLUR";} | { readonly type: "RESET";};SegmentedIndicatorProps
interfaceinterface SegmentedIndicatorProps extends ComponentPropsWithoutRef<"span"> { readonly asChild?: boolean; readonly item?: SegmentedItem;}asChildbooleanitemSegmentedItem- Name
asChild- Kind
- property
- Type
boolean- Requirement
- optional
- Name
item- Kind
- property
- Type
SegmentedItem- Requirement
- optional
SegmentedInput
typetype SegmentedInput = { readonly options: readonly SegmentedItem[]; readonly type?: SegmentedType; /** Controlled committed value. A defined empty array is controlled. */ readonly value?: SegmentedSelection; /** Uncontrolled initial value. */ readonly defaultValue?: SegmentedSelection; readonly disabled?: boolean; readonly readOnly?: boolean; /** Connector hint; the machine receives logical movement only. */ readonly orientation?: SegmentedOrientation; readonly loop?: boolean;};defaultValueSegmentedSelectiondisabledbooleanloopbooleanoptionsreadonly SegmentedItem[]orientationSegmentedOrientationreadOnlybooleantypeSegmentedTypevalueSegmentedSelection- Name
defaultValue- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Uncontrolled initial value.
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
loop- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
options- Kind
- property
- Type
readonly SegmentedItem[]- Requirement
- required
- Description
- —
- Name
orientation- Kind
- property
- Type
SegmentedOrientation- Requirement
- optional
- Description
- Connector hint; the machine receives logical movement only.
- Name
readOnly- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- optional
- Description
- —
- Name
value- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Controlled committed value. A defined empty array is controlled.
SegmentedItem
interfaceinterface SegmentedItem { readonly value: string; readonly disabled?: boolean;}disabledbooleanvaluestring- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
value- Kind
- property
- Type
string- Requirement
- required
SegmentedItemProps
interfaceinterface SegmentedItemProps extends Omit<ComponentPropsWithoutRef<"button">, "value"> { readonly asChild?: boolean; readonly item?: SegmentedItem; readonly value?: string; readonly disabled?: boolean; readonly children?: ReactNode;}asChildbooleanchildrenReactNodedisabledbooleanitemSegmentedItemvaluestring- Name
asChild- Kind
- property
- Type
boolean- Requirement
- optional
- Name
children- Kind
- property
- Type
ReactNode- Requirement
- optional
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
item- Kind
- property
- Type
SegmentedItem- Requirement
- optional
- Name
value- Kind
- property
- Type
string- Requirement
- optional
SegmentedLabelProps
interfaceinterface SegmentedLabelProps extends ComponentPropsWithoutRef<"div"> { readonly asChild?: boolean;}asChildboolean- Name
asChild- Kind
- property
- Type
boolean- Requirement
- optional
type SegmentedContext = { readonly type: SegmentedType; readonly value: SegmentedSelection | undefined; readonly focusedValue?: string; readonly mode: BindingMode;};focusedValuestringmodeBindingModetypeSegmentedTypevalueSegmentedSelection | undefined- Name
focusedValue- Kind
- property
- Type
string- Requirement
- optional
- Name
mode- Kind
- property
- Type
BindingMode- Requirement
- required
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- required
- Name
value- Kind
- property
- Type
SegmentedSelection | undefined- Requirement
- required
SegmentedRootProps
interfaceinterface SegmentedRootProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue" | "value"> { readonly asChild?: boolean; readonly options: SegmentedInput["options"]; readonly type?: SegmentedInput["type"]; readonly value?: SegmentedInput["value"]; readonly defaultValue?: SegmentedInput["defaultValue"]; readonly disabled?: boolean; readonly readOnly?: boolean; readonly orientation?: SegmentedInput["orientation"]; readonly loop?: boolean; readonly dir?: "ltr" | "rtl"; readonly onValueChange?: (detail: SegmentedValueChangeDetail) => void; readonly children?: ReactNode; /** Internal surface selector used by the ToggleGroup alias. */ readonly surface?: "segmented" | "toggle-group";}asChildbooleanchildrenReactNodedefaultValueSegmentedInput["defaultValue"]dir"ltr" | "rtl"disabledbooleanloopbooleanonValueChange(detail: SegmentedValueChangeDetail) => voidoptionsSegmentedInput["options"]orientationSegmentedInput["orientation"]readOnlybooleansurface"segmented" | "toggle-group"typeSegmentedInput["type"]valueSegmentedInput["value"]- Name
asChild- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
children- Kind
- property
- Type
ReactNode- Requirement
- optional
- Description
- —
- Name
defaultValue- Kind
- property
- Type
SegmentedInput["defaultValue"]- Requirement
- optional
- Description
- —
- Name
dir- Kind
- property
- Type
"ltr" | "rtl"- Requirement
- optional
- Description
- —
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
loop- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
onValueChange- Kind
- property
- Type
(detail: SegmentedValueChangeDetail) => void- Requirement
- optional
- Description
- —
- Name
options- Kind
- property
- Type
SegmentedInput["options"]- Requirement
- required
- Description
- —
- Name
orientation- Kind
- property
- Type
SegmentedInput["orientation"]- Requirement
- optional
- Description
- —
- Name
readOnly- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
surface- Kind
- property
- Type
"segmented" | "toggle-group"- Requirement
- optional
- Description
- Internal surface selector used by the ToggleGroup alias.
- Name
type- Kind
- property
- Type
SegmentedInput["type"]- Requirement
- optional
- Description
- —
- Name
value- Kind
- property
- Type
SegmentedInput["value"]- Requirement
- optional
- Description
- —
SegmentedRootProviderProps
interfaceinterface SegmentedRootProviderProps extends Omit<SegmentedRootProps, "options" | "value" | "defaultValue" | "type"> { readonly value: ReturnType<typeof useSegmented>;}valueReturnType<typeof useSegmented>- Name
value- Kind
- property
- Type
ReturnType<typeof useSegmented>- Requirement
- required
SegmentedSelection
typetype SegmentedSelection = string | readonly string[];SegmentedSnapshot
typetype SegmentedSnapshot = Snapshot<SegmentedStateValue, SegmentedContext>;SegmentedType
typetype SegmentedType = "single" | "multiple";SegmentedValueChangeDetail
interfaceinterface SegmentedValueChangeDetail { readonly value: string | readonly string[]; readonly reason: import("@grassroot/ui-machines/segmented").SegmentedChangeReason;}reasonimport("@grassroot/ui-machines/segmented").SegmentedChangeReasonvaluestring | readonly string[]- Name
reason- Kind
- property
- Type
import("@grassroot/ui-machines/segmented").SegmentedChangeReason- Requirement
- required
- Name
value- Kind
- property
- Type
string | readonly string[]- Requirement
- required
ToggleGroup
valueexport declare const ToggleGroup: { Root: (props: SegmentedRootProps) => import("react").JSX.Element; RootProvider: import("react").ForwardRefExoticComponent<SegmentedRootProviderProps & import("react").RefAttributes<HTMLDivElement>>; Item: import("react").ForwardRefExoticComponent<SegmentedItemProps & import("react").RefAttributes<HTMLButtonElement>>; Label: import("react").ForwardRefExoticComponent<SegmentedLabelProps & import("react").RefAttributes<HTMLDivElement>>; Indicator: import("react").ForwardRefExoticComponent<SegmentedIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;};Indicatorimport("react").ForwardRefExoticComponent<SegmentedIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>Itemimport("react").ForwardRefExoticComponent<SegmentedItemProps & import("react").RefAttributes<HTMLButtonElement>>Labelimport("react").ForwardRefExoticComponent<SegmentedLabelProps & import("react").RefAttributes<HTMLDivElement>>Root(props: SegmentedRootProps) => import("react").JSX.ElementRootProviderimport("react").ForwardRefExoticComponent<SegmentedRootProviderProps & import("react").RefAttributes<HTMLDivElement>>- Name
Indicator- Kind
- property
- Type
import("react").ForwardRefExoticComponent<SegmentedIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>- Requirement
- required
- Name
Item- Kind
- property
- Type
import("react").ForwardRefExoticComponent<SegmentedItemProps & import("react").RefAttributes<HTMLButtonElement>>- Requirement
- required
- Name
Label- Kind
- property
- Type
import("react").ForwardRefExoticComponent<SegmentedLabelProps & import("react").RefAttributes<HTMLDivElement>>- Requirement
- required
- Name
Root- Kind
- property
- Type
(props: SegmentedRootProps) => import("react").JSX.Element- Requirement
- required
- Name
RootProvider- Kind
- property
- Type
import("react").ForwardRefExoticComponent<SegmentedRootProviderProps & import("react").RefAttributes<HTMLDivElement>>- Requirement
- required
useSegmented
functiondeclare function useSegmented(input: SegmentedInput, options?: UseSegmentedOptions): UseSegmentedResult;inputSegmentedInputoptionsUseSegmentedOptionsreturnUseSegmentedResult- Name
input- Kind
- parameter
- Type
SegmentedInput- Requirement
- required
- Name
options- Kind
- parameter
- Type
UseSegmentedOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseSegmentedResult- Requirement
- n/a
useSegmentedContext
functiondeclare function useSegmentedContext(part: string): SegmentedContextValue;partstringreturnSegmentedContextValue- Name
part- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
SegmentedContextValue- Requirement
- n/a
UseSegmentedOptions
interfaceinterface UseSegmentedOptions { readonly dir?: "ltr" | "rtl"; readonly scope?: "segmented" | "toggle-group"; readonly onValueChange?: (detail: SegmentedValueChangeDetail) => void;}dir"ltr" | "rtl"onValueChange(detail: SegmentedValueChangeDetail) => voidscope"segmented" | "toggle-group"- Name
dir- Kind
- property
- Type
"ltr" | "rtl"- Requirement
- optional
- Name
onValueChange- Kind
- property
- Type
(detail: SegmentedValueChangeDetail) => void- Requirement
- optional
- Name
scope- Kind
- property
- Type
"segmented" | "toggle-group"- Requirement
- optional
UseSegmentedResult
interfaceinterface UseSegmentedResult { readonly service: SegmentedService; readonly connector: SegmentedApi; readonly scope: PartScope; readonly snapshot: SegmentedSnapshot;}connectorSegmentedApiscopePartScopeserviceSegmentedServicesnapshotSegmentedSnapshot- Name
connector- Kind
- property
- Type
SegmentedApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
SegmentedService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
SegmentedSnapshot- Requirement
- required
@grassroot/ui-headless-vue/segmented
Vue adapter
provideSegmentedContext
functiondeclare function provideSegmentedContext(value: SegmentedContextValue): void;valueSegmentedContextValuereturnvoid- Name
value- Kind
- parameter
- Type
SegmentedContextValue- Requirement
- required
- Name
return- Kind
- return value
- Type
void- Requirement
- n/a
Segmented
valueexport declare const Segmented: { Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>; required: true; }; type: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>; default: undefined; }; value: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: import("vue").PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: import("vue").PropType<"segmented" | "toggle-group">; default: string; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { valueChange: (_detail: SegmentedValueChangeDetail) => true; }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>; required: true; }; type: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>; default: undefined; }; value: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: import("vue").PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: import("vue").PropType<"segmented" | "toggle-group">; default: string; }; }>> & Readonly<{ onValueChange?: ((_detail: SegmentedValueChangeDetail) => any) | undefined; }>, { asChild: boolean; type: import("@grassroot/ui-machines/segmented").SegmentedType | undefined; value: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; defaultValue: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; disabled: boolean; readOnly: boolean; orientation: import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined; loop: boolean; dir: "ltr" | "rtl" | undefined; surface: "segmented" | "toggle-group"; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; Item: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; value: { type: StringConstructor; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; value: { type: StringConstructor; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; }>> & Readonly<{}>, { asChild: boolean; item: import("@grassroot/ui-machines/segmented").SegmentedItem; value: string; disabled: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; Label: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; Indicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; }>> & Readonly<{}>, { asChild: boolean; item: import("@grassroot/ui-machines/segmented").SegmentedItem; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;};Indicatorimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
item: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
default: undefined;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
item: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
default: undefined;
};
}>> & Readonly<{}>, {
asChild: boolean;
item: import("@grassroot/ui-machines/segmented").SegmentedItem;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>Itemimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
item: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
default: undefined;
};
value: {
type: StringConstructor;
default: undefined;
};
disabled: {
type: BooleanConstructor;
default: undefined;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
item: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
default: undefined;
};
value: {
type: StringConstructor;
default: undefined;
};
disabled: {
type: BooleanConstructor;
default: undefined;
};
}>> & Readonly<{}>, {
asChild: boolean;
item: import("@grassroot/ui-machines/segmented").SegmentedItem;
value: string;
disabled: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>Labelimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>Rootimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
options: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>;
required: true;
};
type: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>;
default: undefined;
};
value: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>;
default: undefined;
};
defaultValue: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>;
default: undefined;
};
disabled: {
type: BooleanConstructor;
default: undefined;
};
readOnly: {
type: BooleanConstructor;
default: undefined;
};
orientation: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>;
default: undefined;
};
loop: {
type: BooleanConstructor;
default: undefined;
};
dir: {
type: import("vue").PropType<"ltr" | "rtl" | undefined>;
default: undefined;
};
surface: {
type: import("vue").PropType<"segmented" | "toggle-group">;
default: string;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
valueChange: (_detail: SegmentedValueChangeDetail) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
options: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>;
required: true;
};
type: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>;
default: undefined;
};
value: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>;
default: undefined;
};
defaultValue: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>;
default: undefined;
};
disabled: {
type: BooleanConstructor;
default: undefined;
};
readOnly: {
type: BooleanConstructor;
default: undefined;
};
orientation: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>;
default: undefined;
};
loop: {
type: BooleanConstructor;
default: undefined;
};
dir: {
type: import("vue").PropType<"ltr" | "rtl" | undefined>;
default: undefined;
};
surface: {
type: import("vue").PropType<"segmented" | "toggle-group">;
default: string;
};
}>> & Readonly<{
onValueChange?: ((_detail: SegmentedValueChangeDetail) => any) | undefined;
}>, {
asChild: boolean;
type: import("@grassroot/ui-machines/segmented").SegmentedType | undefined;
value: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined;
defaultValue: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined;
disabled: boolean;
readOnly: boolean;
orientation: import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined;
loop: boolean;
dir: "ltr" | "rtl" | undefined;
surface: "segmented" | "toggle-group";
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Name
Indicator- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; }>> & Readonly<{}>, { asChild: boolean; item: import("@grassroot/ui-machines/segmented").SegmentedItem; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
- Name
Item- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; value: { type: StringConstructor; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; value: { type: StringConstructor; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; }>> & Readonly<{}>, { asChild: boolean; item: import("@grassroot/ui-machines/segmented").SegmentedItem; value: string; disabled: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
- Name
Label- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
- Name
Root- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>; required: true; }; type: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>; default: undefined; }; value: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: import("vue").PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: import("vue").PropType<"segmented" | "toggle-group">; default: string; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { valueChange: (_detail: SegmentedValueChangeDetail) => true; }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>; required: true; }; type: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>; default: undefined; }; value: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: import("vue").PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: import("vue").PropType<"segmented" | "toggle-group">; default: string; }; }>> & Readonly<{ onValueChange?: ((_detail: SegmentedValueChangeDetail) => any) | undefined; }>, { asChild: boolean; type: import("@grassroot/ui-machines/segmented").SegmentedType | undefined; value: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; defaultValue: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; disabled: boolean; readOnly: boolean; orientation: import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined; loop: boolean; dir: "ltr" | "rtl" | undefined; surface: "segmented" | "toggle-group"; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
type SegmentedChangeReason = "pointer" | "keyboard" | "programmatic";SegmentedCommand
typetype SegmentedCommand = CommandObject & ({ readonly type: "VALUE_CHANGE_REQUEST"; readonly value: SegmentedSelection; readonly reason: SegmentedChangeReason;} | { readonly type: "FOCUS_ITEM"; readonly key: string;});SegmentedContext
typetype SegmentedContext = { readonly type: SegmentedType; readonly value: SegmentedSelection | undefined; readonly focusedValue?: string; readonly mode: BindingMode;};focusedValuestringmodeBindingModetypeSegmentedTypevalueSegmentedSelection | undefined- Name
focusedValue- Kind
- property
- Type
string- Requirement
- optional
- Name
mode- Kind
- property
- Type
BindingMode- Requirement
- required
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- required
- Name
value- Kind
- property
- Type
SegmentedSelection | undefined- Requirement
- required
SegmentedContextKey
valueexport declare const SegmentedContextKey: InjectionKey<SegmentedContextValue>;SegmentedContextValue
interfaceinterface SegmentedContextValue { readonly service: SegmentedService; readonly connector: SegmentedApi; readonly scope: PartScope; readonly snapshot: ShallowRef<SegmentedSnapshot>;}connectorSegmentedApiscopePartScopeserviceSegmentedServicesnapshotShallowRef<SegmentedSnapshot>- Name
connector- Kind
- property
- Type
SegmentedApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
SegmentedService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
ShallowRef<SegmentedSnapshot>- Requirement
- required
SegmentedEvent
typetype SegmentedEvent = { readonly type: "SELECT"; readonly value: string; readonly reason: SegmentedChangeReason;} | { readonly type: "MOVE"; readonly direction: -1 | 1;} | { readonly type: "HOME";} | { readonly type: "END";} | { readonly type: "FOCUS"; readonly value: string;} | { readonly type: "BLUR";} | { readonly type: "RESET";};SegmentedIndicator
valueexport declare const SegmentedIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: PropType<SegmentedItem$1>; default: undefined; };}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: PropType<SegmentedItem$1>; default: undefined; };}>> & Readonly<{}>, { asChild: boolean; item: SegmentedItem$1;}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;SegmentedInput
typetype SegmentedInput = { readonly options: readonly SegmentedItem[]; readonly type?: SegmentedType; /** Controlled committed value. A defined empty array is controlled. */ readonly value?: SegmentedSelection; /** Uncontrolled initial value. */ readonly defaultValue?: SegmentedSelection; readonly disabled?: boolean; readonly readOnly?: boolean; /** Connector hint; the machine receives logical movement only. */ readonly orientation?: SegmentedOrientation; readonly loop?: boolean;};defaultValueSegmentedSelectiondisabledbooleanloopbooleanoptionsreadonly SegmentedItem[]orientationSegmentedOrientationreadOnlybooleantypeSegmentedTypevalueSegmentedSelection- Name
defaultValue- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Uncontrolled initial value.
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
loop- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
options- Kind
- property
- Type
readonly SegmentedItem[]- Requirement
- required
- Description
- —
- Name
orientation- Kind
- property
- Type
SegmentedOrientation- Requirement
- optional
- Description
- Connector hint; the machine receives logical movement only.
- Name
readOnly- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- optional
- Description
- —
- Name
value- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Controlled committed value. A defined empty array is controlled.
SegmentedItem
valueexport declare const SegmentedItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: PropType<SegmentedItem$1>; default: undefined; }; value: { type: StringConstructor; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; };}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: PropType<SegmentedItem$1>; default: undefined; }; value: { type: StringConstructor; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; };}>> & Readonly<{}>, { asChild: boolean; item: SegmentedItem$1; value: string; disabled: boolean;}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;SegmentedLabel
valueexport declare const SegmentedLabel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; };}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; };}>> & Readonly<{}>, { asChild: boolean;}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;SegmentedMachineItem
interfaceinterface SegmentedItem { readonly value: string; readonly disabled?: boolean;}disabledbooleanvaluestring- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
value- Kind
- property
- Type
string- Requirement
- required
SegmentedRoot
valueexport declare const SegmentedRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: PropType<SegmentedInput["options"]>; required: true; }; type: { type: PropType<SegmentedInput["type"]>; default: undefined; }; value: { type: PropType<SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: PropType<SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: PropType<SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: PropType<"segmented" | "toggle-group">; default: string; };}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { valueChange: (_detail: SegmentedValueChangeDetail) => true;}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: PropType<SegmentedInput["options"]>; required: true; }; type: { type: PropType<SegmentedInput["type"]>; default: undefined; }; value: { type: PropType<SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: PropType<SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: PropType<SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: PropType<"segmented" | "toggle-group">; default: string; };}>> & Readonly<{ onValueChange?: ((_detail: SegmentedValueChangeDetail) => any) | undefined;}>, { asChild: boolean; type: import("@grassroot/ui-machines/segmented").SegmentedType | undefined; value: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; defaultValue: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; disabled: boolean; readOnly: boolean; orientation: import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined; loop: boolean; dir: "ltr" | "rtl" | undefined; surface: "segmented" | "toggle-group";}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;SegmentedSelection
typetype SegmentedSelection = string | readonly string[];SegmentedSnapshot
typetype SegmentedSnapshot = Snapshot<SegmentedStateValue, SegmentedContext>;SegmentedType
typetype SegmentedType = "single" | "multiple";SegmentedValueChangeDetail
interfaceinterface SegmentedValueChangeDetail { readonly value: string | readonly string[]; readonly reason: import("@grassroot/ui-machines/segmented").SegmentedChangeReason;}reasonimport("@grassroot/ui-machines/segmented").SegmentedChangeReasonvaluestring | readonly string[]- Name
reason- Kind
- property
- Type
import("@grassroot/ui-machines/segmented").SegmentedChangeReason- Requirement
- required
- Name
value- Kind
- property
- Type
string | readonly string[]- Requirement
- required
ToggleGroup
valueexport declare const ToggleGroup: { Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>; required: true; }; type: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>; default: undefined; }; value: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: import("vue").PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: import("vue").PropType<"segmented" | "toggle-group">; default: string; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { valueChange: (_detail: SegmentedValueChangeDetail) => true; }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>; required: true; }; type: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>; default: undefined; }; value: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: import("vue").PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: import("vue").PropType<"segmented" | "toggle-group">; default: string; }; }>> & Readonly<{ onValueChange?: ((_detail: SegmentedValueChangeDetail) => any) | undefined; }>, { asChild: boolean; type: import("@grassroot/ui-machines/segmented").SegmentedType | undefined; value: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; defaultValue: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; disabled: boolean; readOnly: boolean; orientation: import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined; loop: boolean; dir: "ltr" | "rtl" | undefined; surface: "segmented" | "toggle-group"; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; Item: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; value: { type: StringConstructor; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; value: { type: StringConstructor; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; }>> & Readonly<{}>, { asChild: boolean; item: import("@grassroot/ui-machines/segmented").SegmentedItem; value: string; disabled: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; Label: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; Indicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; }>> & Readonly<{}>, { asChild: boolean; item: import("@grassroot/ui-machines/segmented").SegmentedItem; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;};Indicatorimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
item: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
default: undefined;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
item: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
default: undefined;
};
}>> & Readonly<{}>, {
asChild: boolean;
item: import("@grassroot/ui-machines/segmented").SegmentedItem;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>Itemimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
item: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
default: undefined;
};
value: {
type: StringConstructor;
default: undefined;
};
disabled: {
type: BooleanConstructor;
default: undefined;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
item: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
default: undefined;
};
value: {
type: StringConstructor;
default: undefined;
};
disabled: {
type: BooleanConstructor;
default: undefined;
};
}>> & Readonly<{}>, {
asChild: boolean;
item: import("@grassroot/ui-machines/segmented").SegmentedItem;
value: string;
disabled: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>Labelimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>Rootimport("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
options: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>;
required: true;
};
type: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>;
default: undefined;
};
value: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>;
default: undefined;
};
defaultValue: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>;
default: undefined;
};
disabled: {
type: BooleanConstructor;
default: undefined;
};
readOnly: {
type: BooleanConstructor;
default: undefined;
};
orientation: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>;
default: undefined;
};
loop: {
type: BooleanConstructor;
default: undefined;
};
dir: {
type: import("vue").PropType<"ltr" | "rtl" | undefined>;
default: undefined;
};
surface: {
type: import("vue").PropType<"segmented" | "toggle-group">;
default: string;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
valueChange: (_detail: SegmentedValueChangeDetail) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
options: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>;
required: true;
};
type: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>;
default: undefined;
};
value: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>;
default: undefined;
};
defaultValue: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>;
default: undefined;
};
disabled: {
type: BooleanConstructor;
default: undefined;
};
readOnly: {
type: BooleanConstructor;
default: undefined;
};
orientation: {
type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>;
default: undefined;
};
loop: {
type: BooleanConstructor;
default: undefined;
};
dir: {
type: import("vue").PropType<"ltr" | "rtl" | undefined>;
default: undefined;
};
surface: {
type: import("vue").PropType<"segmented" | "toggle-group">;
default: string;
};
}>> & Readonly<{
onValueChange?: ((_detail: SegmentedValueChangeDetail) => any) | undefined;
}>, {
asChild: boolean;
type: import("@grassroot/ui-machines/segmented").SegmentedType | undefined;
value: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined;
defaultValue: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined;
disabled: boolean;
readOnly: boolean;
orientation: import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined;
loop: boolean;
dir: "ltr" | "rtl" | undefined;
surface: "segmented" | "toggle-group";
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Name
Indicator- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; }>> & Readonly<{}>, { asChild: boolean; item: import("@grassroot/ui-machines/segmented").SegmentedItem; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
- Name
Item- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; value: { type: StringConstructor; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; item: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>; default: undefined; }; value: { type: StringConstructor; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; }>> & Readonly<{}>, { asChild: boolean; item: import("@grassroot/ui-machines/segmented").SegmentedItem; value: string; disabled: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
- Name
Label- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { asChild: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
- Name
Root- Kind
- property
- Type
import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>; required: true; }; type: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>; default: undefined; }; value: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: import("vue").PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: import("vue").PropType<"segmented" | "toggle-group">; default: string; }; }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { valueChange: (_detail: SegmentedValueChangeDetail) => true; }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>; required: true; }; type: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>; default: undefined; }; value: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: import("vue").PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: import("vue").PropType<"segmented" | "toggle-group">; default: string; }; }>> & Readonly<{ onValueChange?: ((_detail: SegmentedValueChangeDetail) => any) | undefined; }>, { asChild: boolean; type: import("@grassroot/ui-machines/segmented").SegmentedType | undefined; value: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; defaultValue: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; disabled: boolean; readOnly: boolean; orientation: import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined; loop: boolean; dir: "ltr" | "rtl" | undefined; surface: "segmented" | "toggle-group"; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>- Requirement
- required
ToggleGroupRoot
valueexport declare const ToggleGroupRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: PropType<SegmentedInput["options"]>; required: true; }; type: { type: PropType<SegmentedInput["type"]>; default: undefined; }; value: { type: PropType<SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: PropType<SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: PropType<SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: PropType<"segmented" | "toggle-group">; default: string; };}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any;}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { valueChange: (_detail: SegmentedValueChangeDetail) => true;}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ asChild: { type: BooleanConstructor; default: boolean; }; options: { type: PropType<SegmentedInput["options"]>; required: true; }; type: { type: PropType<SegmentedInput["type"]>; default: undefined; }; value: { type: PropType<SegmentedInput["value"]>; default: undefined; }; defaultValue: { type: PropType<SegmentedInput["defaultValue"]>; default: undefined; }; disabled: { type: BooleanConstructor; default: undefined; }; readOnly: { type: BooleanConstructor; default: undefined; }; orientation: { type: PropType<SegmentedInput["orientation"]>; default: undefined; }; loop: { type: BooleanConstructor; default: undefined; }; dir: { type: PropType<"ltr" | "rtl" | undefined>; default: undefined; }; surface: { type: PropType<"segmented" | "toggle-group">; default: string; };}>> & Readonly<{ onValueChange?: ((_detail: SegmentedValueChangeDetail) => any) | undefined;}>, { asChild: boolean; type: import("@grassroot/ui-machines/segmented").SegmentedType | undefined; value: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; defaultValue: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined; disabled: boolean; readOnly: boolean; orientation: import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined; loop: boolean; dir: "ltr" | "rtl" | undefined; surface: "segmented" | "toggle-group";}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;useSegmented
functiondeclare function useSegmented(input: () => SegmentedInput, options?: UseSegmentedOptions): UseSegmentedResult;input() => SegmentedInputoptionsUseSegmentedOptionsreturnUseSegmentedResult- Name
input- Kind
- parameter
- Type
() => SegmentedInput- Requirement
- required
- Name
options- Kind
- parameter
- Type
UseSegmentedOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseSegmentedResult- Requirement
- n/a
useSegmentedContext
functiondeclare function useSegmentedContext(part: string): SegmentedContextValue;partstringreturnSegmentedContextValue- Name
part- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
SegmentedContextValue- Requirement
- n/a
UseSegmentedOptions
interfaceinterface UseSegmentedOptions { readonly dir?: "ltr" | "rtl"; readonly scope?: "segmented" | "toggle-group"; readonly onValueChange?: (detail: SegmentedValueChangeDetail) => void;}dir"ltr" | "rtl"onValueChange(detail: SegmentedValueChangeDetail) => voidscope"segmented" | "toggle-group"- Name
dir- Kind
- property
- Type
"ltr" | "rtl"- Requirement
- optional
- Name
onValueChange- Kind
- property
- Type
(detail: SegmentedValueChangeDetail) => void- Requirement
- optional
- Name
scope- Kind
- property
- Type
"segmented" | "toggle-group"- Requirement
- optional
UseSegmentedResult
interfaceinterface UseSegmentedResult { readonly service: SegmentedService; readonly connector: SegmentedApi; readonly scope: PartScope; readonly snapshot: ShallowRef<SegmentedSnapshot>;}connectorSegmentedApiscopePartScopeserviceSegmentedServicesnapshotShallowRef<SegmentedSnapshot>- Name
connector- Kind
- property
- Type
SegmentedApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
SegmentedService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
ShallowRef<SegmentedSnapshot>- Requirement
- required
@grassroot/ui-headless-angular/segmented
Angular adapter
createSegmentedStore
functionexport declare function createSegmentedStore(initial: SegmentedInput, options?: CreateSegmentedStoreOptions): SegmentedStore;initialSegmentedInputoptionsCreateSegmentedStoreOptionsreturnSegmentedStore- Name
initial- Kind
- parameter
- Type
SegmentedInput- Requirement
- required
- Name
options- Kind
- parameter
- Type
CreateSegmentedStoreOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
SegmentedStore- Requirement
- n/a
CreateSegmentedStoreOptions
interfaceexport interface CreateSegmentedStoreOptions { readonly dir?: "ltr" | "rtl"; readonly scope?: "segmented" | "toggle-group" | (() => "segmented" | "toggle-group"); readonly onValueChange?: (detail: SegmentedValueChangeDetail) => void; readonly onCommit?: () => void;}dir"ltr" | "rtl"onCommit() => voidonValueChange(detail: SegmentedValueChangeDetail) => voidscope"segmented" | "toggle-group" | (() => "segmented" | "toggle-group")- Name
dir- Kind
- property
- Type
"ltr" | "rtl"- Requirement
- optional
- Name
onCommit- Kind
- property
- Type
() => void- Requirement
- optional
- Name
onValueChange- Kind
- property
- Type
(detail: SegmentedValueChangeDetail) => void- Requirement
- optional
- Name
scope- Kind
- property
- Type
"segmented" | "toggle-group" | (() => "segmented" | "toggle-group")- Requirement
- optional
export declare const GR_SEGMENTED_DECLARATIONS: readonly [typeof GrSegmentedRoot, typeof GrSegmentedItem, typeof GrSegmentedLabel, typeof GrSegmentedIndicator];GrSegmentedIndicator
classexport declare class GrSegmentedIndicator implements OnDestroy { private readonly store; private readonly element; private readonly listeners; private readonly consumer; constructor(); ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<GrSegmentedIndicator, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<GrSegmentedIndicator, "[grSegmentedIndicator]", never, {}, {}, never, never, true, never>;}consumeranyelementanylistenersanyngOnDestroy() => voidɵdiri0.ɵɵDirectiveDeclaration<GrSegmentedIndicator, "[grSegmentedIndicator]", never, {}, {}, never, never, true, never>ɵfaci0.ɵɵFactoryDeclaration<GrSegmentedIndicator, never>storeany- Name
consumer- Kind
- property
- Type
any- Requirement
- required
- Name
element- Kind
- property
- Type
any- Requirement
- required
- Name
listeners- Kind
- property
- Type
any- Requirement
- required
- Name
ngOnDestroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
ɵdir- Kind
- property
- Type
i0.ɵɵDirectiveDeclaration<GrSegmentedIndicator, "[grSegmentedIndicator]", never, {}, {}, never, never, true, never>- Requirement
- required
- Name
ɵfac- Kind
- property
- Type
i0.ɵɵFactoryDeclaration<GrSegmentedIndicator, never>- Requirement
- required
- Name
store- Kind
- property
- Type
any- Requirement
- required
GrSegmentedItem
classexport declare class GrSegmentedItem implements OnDestroy { readonly value: import("@angular/core").InputSignal<string>; readonly disabled: import("@angular/core").InputSignal<boolean | undefined>; private readonly store; private readonly element; private readonly listeners; private readonly consumer; private registered; constructor(); ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<GrSegmentedItem, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<GrSegmentedItem, "[grSegmentedItem]", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;}consumeranydisabledimport("@angular/core").InputSignal<boolean | undefined>elementanylistenersanyngOnDestroy() => voidɵdiri0.ɵɵDirectiveDeclaration<GrSegmentedItem, "[grSegmentedItem]", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>ɵfaci0.ɵɵFactoryDeclaration<GrSegmentedItem, never>registeredanystoreanyvalueimport("@angular/core").InputSignal<string>- Name
consumer- Kind
- property
- Type
any- Requirement
- required
- Name
disabled- Kind
- property
- Type
import("@angular/core").InputSignal<boolean | undefined>- Requirement
- required
- Name
element- Kind
- property
- Type
any- Requirement
- required
- Name
listeners- Kind
- property
- Type
any- Requirement
- required
- Name
ngOnDestroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
ɵdir- Kind
- property
- Type
i0.ɵɵDirectiveDeclaration<GrSegmentedItem, "[grSegmentedItem]", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>- Requirement
- required
- Name
ɵfac- Kind
- property
- Type
i0.ɵɵFactoryDeclaration<GrSegmentedItem, never>- Requirement
- required
- Name
registered- Kind
- property
- Type
any- Requirement
- required
- Name
store- Kind
- property
- Type
any- Requirement
- required
- Name
value- Kind
- property
- Type
import("@angular/core").InputSignal<string>- Requirement
- required
GrSegmentedLabel
classexport declare class GrSegmentedLabel implements OnDestroy { private readonly store; private readonly element; private readonly listeners; private readonly consumer; constructor(); ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<GrSegmentedLabel, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<GrSegmentedLabel, "[grSegmentedLabel]", never, {}, {}, never, never, true, never>;}consumeranyelementanylistenersanyngOnDestroy() => voidɵdiri0.ɵɵDirectiveDeclaration<GrSegmentedLabel, "[grSegmentedLabel]", never, {}, {}, never, never, true, never>ɵfaci0.ɵɵFactoryDeclaration<GrSegmentedLabel, never>storeany- Name
consumer- Kind
- property
- Type
any- Requirement
- required
- Name
element- Kind
- property
- Type
any- Requirement
- required
- Name
listeners- Kind
- property
- Type
any- Requirement
- required
- Name
ngOnDestroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
ɵdir- Kind
- property
- Type
i0.ɵɵDirectiveDeclaration<GrSegmentedLabel, "[grSegmentedLabel]", never, {}, {}, never, never, true, never>- Requirement
- required
- Name
ɵfac- Kind
- property
- Type
i0.ɵɵFactoryDeclaration<GrSegmentedLabel, never>- Requirement
- required
- Name
store- Kind
- property
- Type
any- Requirement
- required
GrSegmentedRoot
classexport declare class GrSegmentedRoot implements OnDestroy { readonly options: import("@angular/core").InputSignal<readonly import("@grassroot/ui-machines/segmented").SegmentedItem[]>; readonly type: import("@angular/core").InputSignal<import("@grassroot/ui-machines/segmented").SegmentedType | undefined>; readonly value: import("@angular/core").InputSignal<import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined>; readonly defaultValue: import("@angular/core").InputSignal<import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined>; readonly disabled: import("@angular/core").InputSignal<boolean | undefined>; readonly readOnly: import("@angular/core").InputSignal<boolean | undefined>; readonly orientation: import("@angular/core").InputSignal<import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined>; readonly loop: import("@angular/core").InputSignal<boolean | undefined>; readonly dir: import("@angular/core").InputSignal<"rtl" | "ltr" | undefined>; readonly surface: import("@angular/core").InputSignal<"segmented" | "toggle-group">; readonly valueChange: import("@angular/core").OutputEmitterRef<SegmentedValueChangeDetail>; private readonly element; readonly store: SegmentedStore; private readonly listeners; private last; constructor(); ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<GrSegmentedRoot, never>; static ɵcmp: i0.ɵɵComponentDeclaration<GrSegmentedRoot, "gr-segmented-root", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;}defaultValueimport("@angular/core").InputSignal<import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined>dirimport("@angular/core").InputSignal<"rtl" | "ltr" | undefined>disabledimport("@angular/core").InputSignal<boolean | undefined>elementanylastanylistenersanyloopimport("@angular/core").InputSignal<boolean | undefined>ngOnDestroy() => voidoptionsimport("@angular/core").InputSignal<readonly import("@grassroot/ui-machines/segmented").SegmentedItem[]>orientationimport("@angular/core").InputSignal<import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined>ɵcmpi0.ɵɵComponentDeclaration<GrSegmentedRoot, "gr-segmented-root", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>ɵfaci0.ɵɵFactoryDeclaration<GrSegmentedRoot, never>readOnlyimport("@angular/core").InputSignal<boolean | undefined>storeSegmentedStore- Name
defaultValue- Kind
- property
- Type
import("@angular/core").InputSignal<import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined>- Requirement
- required
- Name
dir- Kind
- property
- Type
import("@angular/core").InputSignal<"rtl" | "ltr" | undefined>- Requirement
- required
- Name
disabled- Kind
- property
- Type
import("@angular/core").InputSignal<boolean | undefined>- Requirement
- required
- Name
element- Kind
- property
- Type
any- Requirement
- required
- Name
last- Kind
- property
- Type
any- Requirement
- required
- Name
listeners- Kind
- property
- Type
any- Requirement
- required
- Name
loop- Kind
- property
- Type
import("@angular/core").InputSignal<boolean | undefined>- Requirement
- required
- Name
ngOnDestroy- Kind
- method
- Type
() => void- Requirement
- required
- Name
options- Kind
- property
- Type
import("@angular/core").InputSignal<readonly import("@grassroot/ui-machines/segmented").SegmentedItem[]>- Requirement
- required
- Name
orientation- Kind
- property
- Type
import("@angular/core").InputSignal<import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined>- Requirement
- required
- Name
ɵcmp- Kind
- property
- Type
i0.ɵɵComponentDeclaration<GrSegmentedRoot, "gr-segmented-root", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>- Requirement
- required
- Name
ɵfac- Kind
- property
- Type
i0.ɵɵFactoryDeclaration<GrSegmentedRoot, never>- Requirement
- required
- Name
readOnly- Kind
- property
- Type
import("@angular/core").InputSignal<boolean | undefined>- Requirement
- required
- Name
store- Kind
- property
- Type
SegmentedStore- Requirement
- required
- Name
surface- Kind
- property
- Type
import("@angular/core").InputSignal<"segmented" | "toggle-group">- Requirement
- required
- Name
type- Kind
- property
- Type
import("@angular/core").InputSignal<import("@grassroot/ui-machines/segmented").SegmentedType | undefined>- Requirement
- required
- Name
value- Kind
- property
- Type
import("@angular/core").InputSignal<import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined>- Requirement
- required
- Name
valueChange- Kind
- property
- Type
import("@angular/core").OutputEmitterRef<SegmentedValueChangeDetail>- Requirement
- required
GrToggleGroupRoot
classexport declare class GrToggleGroupRoot extends GrSegmentedRoot {}SEGMENTED_STORE
valueexport declare const SEGMENTED_STORE: InjectionToken<SegmentedStore>;type SegmentedChangeReason = "pointer" | "keyboard" | "programmatic";SegmentedCommand
typetype SegmentedCommand = CommandObject & ({ readonly type: "VALUE_CHANGE_REQUEST"; readonly value: SegmentedSelection; readonly reason: SegmentedChangeReason;} | { readonly type: "FOCUS_ITEM"; readonly key: string;});SegmentedContext
typetype SegmentedContext = { readonly type: SegmentedType; readonly value: SegmentedSelection | undefined; readonly focusedValue?: string; readonly mode: BindingMode;};focusedValuestringmodeBindingModetypeSegmentedTypevalueSegmentedSelection | undefined- Name
focusedValue- Kind
- property
- Type
string- Requirement
- optional
- Name
mode- Kind
- property
- Type
BindingMode- Requirement
- required
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- required
- Name
value- Kind
- property
- Type
SegmentedSelection | undefined- Requirement
- required
SegmentedEvent
typetype SegmentedEvent = { readonly type: "SELECT"; readonly value: string; readonly reason: SegmentedChangeReason;} | { readonly type: "MOVE"; readonly direction: -1 | 1;} | { readonly type: "HOME";} | { readonly type: "END";} | { readonly type: "FOCUS"; readonly value: string;} | { readonly type: "BLUR";} | { readonly type: "RESET";};SegmentedInput
typetype SegmentedInput = { readonly options: readonly SegmentedItem[]; readonly type?: SegmentedType; /** Controlled committed value. A defined empty array is controlled. */ readonly value?: SegmentedSelection; /** Uncontrolled initial value. */ readonly defaultValue?: SegmentedSelection; readonly disabled?: boolean; readonly readOnly?: boolean; /** Connector hint; the machine receives logical movement only. */ readonly orientation?: SegmentedOrientation; readonly loop?: boolean;};defaultValueSegmentedSelectiondisabledbooleanloopbooleanoptionsreadonly SegmentedItem[]orientationSegmentedOrientationreadOnlybooleantypeSegmentedTypevalueSegmentedSelection- Name
defaultValue- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Uncontrolled initial value.
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
loop- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
options- Kind
- property
- Type
readonly SegmentedItem[]- Requirement
- required
- Description
- —
- Name
orientation- Kind
- property
- Type
SegmentedOrientation- Requirement
- optional
- Description
- Connector hint; the machine receives logical movement only.
- Name
readOnly- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- optional
- Description
- —
- Name
value- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Controlled committed value. A defined empty array is controlled.
SegmentedMachineItem
interfaceinterface SegmentedItem { readonly value: string; readonly disabled?: boolean;}disabledbooleanvaluestring- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
value- Kind
- property
- Type
string- Requirement
- required
SegmentedSelection
typetype SegmentedSelection = string | readonly string[];SegmentedSnapshot
typetype SegmentedSnapshot = Snapshot<SegmentedStateValue, SegmentedContext>;SegmentedStore
interfaceexport interface SegmentedStore { readonly service: SegmentedService; readonly connector: SegmentedApi; readonly scope: PartScope; readonly version: WritableSignal<number>; start(): void; stop(): void; sync(input: SegmentedInput): void;}connectorSegmentedApiscopePartScopeserviceSegmentedServicestart() => voidstop() => voidsync(input: SegmentedInput) => voidversionWritableSignal<number>- Name
connector- Kind
- property
- Type
SegmentedApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
SegmentedService- Requirement
- required
- Name
start- Kind
- method
- Type
() => void- Requirement
- required
- Name
stop- Kind
- method
- Type
() => void- Requirement
- required
- Name
sync- Kind
- method
- Type
(input: SegmentedInput) => void- Requirement
- required
- Name
version- Kind
- property
- Type
WritableSignal<number>- Requirement
- required
SegmentedType
typetype SegmentedType = "single" | "multiple";SegmentedValueChangeDetail
interfaceexport interface SegmentedValueChangeDetail { readonly value: string | readonly string[]; readonly reason: import("@grassroot/ui-machines/segmented").SegmentedChangeReason;}reasonimport("@grassroot/ui-machines/segmented").SegmentedChangeReasonvaluestring | readonly string[]- Name
reason- Kind
- property
- Type
import("@grassroot/ui-machines/segmented").SegmentedChangeReason- Requirement
- required
- Name
value- Kind
- property
- Type
string | readonly string[]- Requirement
- required
@grassroot/ui-headless-svelte/segmented
Svelte adapter
createSegmented
functionexport declare function createSegmented(input: () => SegmentedInput, options?: UseSegmentedOptions): UseSegmentedResult;input() => SegmentedInputoptionsUseSegmentedOptionsreturnUseSegmentedResult- Name
input- Kind
- parameter
- Type
() => SegmentedInput- Requirement
- required
- Name
options- Kind
- parameter
- Type
UseSegmentedOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseSegmentedResult- Requirement
- n/a
provideSegmentedContext
functionexport declare function provideSegmentedContext(value: SegmentedContextValue): void;valueSegmentedContextValuereturnvoid- Name
value- Kind
- parameter
- Type
SegmentedContextValue- Requirement
- required
- Name
return- Kind
- return value
- Type
void- Requirement
- n/a
Segmented
valueexport declare const Segmented: { Root: import("svelte/legacy").LegacyComponentType; Item: import("svelte/legacy").LegacyComponentType; Label: import("svelte/legacy").LegacyComponentType; Indicator: import("svelte/legacy").LegacyComponentType;};Indicatorimport("svelte/legacy").LegacyComponentTypeItemimport("svelte/legacy").LegacyComponentTypeLabelimport("svelte/legacy").LegacyComponentTypeRootimport("svelte/legacy").LegacyComponentType- Name
Indicator- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
- Name
Item- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
- Name
Label- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
- Name
Root- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
type SegmentedChangeReason = "pointer" | "keyboard" | "programmatic";SegmentedCommand
typetype SegmentedCommand = CommandObject & ({ readonly type: "VALUE_CHANGE_REQUEST"; readonly value: SegmentedSelection; readonly reason: SegmentedChangeReason;} | { readonly type: "FOCUS_ITEM"; readonly key: string;});SegmentedContext
typetype SegmentedContext = { readonly type: SegmentedType; readonly value: SegmentedSelection | undefined; readonly focusedValue?: string; readonly mode: BindingMode;};focusedValuestringmodeBindingModetypeSegmentedTypevalueSegmentedSelection | undefined- Name
focusedValue- Kind
- property
- Type
string- Requirement
- optional
- Name
mode- Kind
- property
- Type
BindingMode- Requirement
- required
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- required
- Name
value- Kind
- property
- Type
SegmentedSelection | undefined- Requirement
- required
SegmentedEvent
typetype SegmentedEvent = { readonly type: "SELECT"; readonly value: string; readonly reason: SegmentedChangeReason;} | { readonly type: "MOVE"; readonly direction: -1 | 1;} | { readonly type: "HOME";} | { readonly type: "END";} | { readonly type: "FOCUS"; readonly value: string;} | { readonly type: "BLUR";} | { readonly type: "RESET";};SegmentedIndicator
valueexport declare const SegmentedIndicator: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
SegmentedInput
typetype SegmentedInput = { readonly options: readonly SegmentedItem[]; readonly type?: SegmentedType; /** Controlled committed value. A defined empty array is controlled. */ readonly value?: SegmentedSelection; /** Uncontrolled initial value. */ readonly defaultValue?: SegmentedSelection; readonly disabled?: boolean; readonly readOnly?: boolean; /** Connector hint; the machine receives logical movement only. */ readonly orientation?: SegmentedOrientation; readonly loop?: boolean;};defaultValueSegmentedSelectiondisabledbooleanloopbooleanoptionsreadonly SegmentedItem[]orientationSegmentedOrientationreadOnlybooleantypeSegmentedTypevalueSegmentedSelection- Name
defaultValue- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Uncontrolled initial value.
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
loop- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
options- Kind
- property
- Type
readonly SegmentedItem[]- Requirement
- required
- Description
- —
- Name
orientation- Kind
- property
- Type
SegmentedOrientation- Requirement
- optional
- Description
- Connector hint; the machine receives logical movement only.
- Name
readOnly- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- optional
- Description
- —
- Name
value- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Controlled committed value. A defined empty array is controlled.
SegmentedItem
valueexport declare const SegmentedItem: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
SegmentedLabel
valueexport declare const SegmentedLabel: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
SegmentedMachineItem
interfaceinterface SegmentedItem { readonly value: string; readonly disabled?: boolean;}disabledbooleanvaluestring- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
value- Kind
- property
- Type
string- Requirement
- required
SegmentedRoot
valueexport declare const SegmentedRoot: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
SegmentedSelection
typetype SegmentedSelection = string | readonly string[];SegmentedSnapshot
typetype SegmentedSnapshot = Snapshot<SegmentedStateValue, SegmentedContext>;SegmentedType
typetype SegmentedType = "single" | "multiple";SegmentedValueChangeDetail
interfaceexport interface SegmentedValueChangeDetail { readonly value: string | readonly string[]; readonly reason: import("@grassroot/ui-machines/segmented").SegmentedChangeReason;}reasonimport("@grassroot/ui-machines/segmented").SegmentedChangeReasonvaluestring | readonly string[]- Name
reason- Kind
- property
- Type
import("@grassroot/ui-machines/segmented").SegmentedChangeReason- Requirement
- required
- Name
value- Kind
- property
- Type
string | readonly string[]- Requirement
- required
ToggleGroup
valueexport declare const ToggleGroup: { Root: import("svelte/legacy").LegacyComponentType; Item: import("svelte/legacy").LegacyComponentType; Label: import("svelte/legacy").LegacyComponentType; Indicator: import("svelte/legacy").LegacyComponentType;};Indicatorimport("svelte/legacy").LegacyComponentTypeItemimport("svelte/legacy").LegacyComponentTypeLabelimport("svelte/legacy").LegacyComponentTypeRootimport("svelte/legacy").LegacyComponentType- Name
Indicator- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
- Name
Item- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
- Name
Label- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
- Name
Root- Kind
- property
- Type
import("svelte/legacy").LegacyComponentType- Requirement
- required
ToggleGroupRoot
valueexport declare const ToggleGroupRoot: LegacyComponentType;argsParameters<Component<Record<string, any>>>returnReturnType<Component<Record<string, any>, Record<string, any>>>- Name
args- Kind
- parameter
- Type
Parameters<Component<Record<string, any>>>- Requirement
- optional
- Name
return- Kind
- return value
- Type
ReturnType<Component<Record<string, any>, Record<string, any>>>- Requirement
- n/a
useSegmentedContext
functionexport declare function useSegmentedContext(part: string): SegmentedContextValue;partstringreturnSegmentedContextValue- Name
part- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
SegmentedContextValue- Requirement
- n/a
UseSegmentedOptions
interfaceexport interface UseSegmentedOptions { readonly dir?: "ltr" | "rtl"; readonly scope?: "segmented" | "toggle-group"; readonly onValueChange?: (detail: SegmentedValueChangeDetail) => void;}dir"ltr" | "rtl"onValueChange(detail: SegmentedValueChangeDetail) => voidscope"segmented" | "toggle-group"- Name
dir- Kind
- property
- Type
"ltr" | "rtl"- Requirement
- optional
- Name
onValueChange- Kind
- property
- Type
(detail: SegmentedValueChangeDetail) => void- Requirement
- optional
- Name
scope- Kind
- property
- Type
"segmented" | "toggle-group"- Requirement
- optional
UseSegmentedResult
interfaceexport interface UseSegmentedResult { readonly service: SegmentedService; readonly connector: SegmentedApi; readonly scope: ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>; readonly version: () => number;}connectorSegmentedApiscopeReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>serviceSegmentedServiceversion() => number- Name
connector- Kind
- property
- Type
SegmentedApi- Requirement
- required
- Name
scope- Kind
- property
- Type
ReturnType<typeof import("@grassroot/ui-headless-core").createPartScope>- Requirement
- required
- Name
service- Kind
- property
- Type
SegmentedService- Requirement
- required
- Name
version- Kind
- property
- Type
() => number- Requirement
- required
@grassroot/ui-headless-solid/segmented
Solid adapter
Segmented
valueexport declare const Segmented: { Root: typeof SegmentedRoot; Item: typeof SegmentedItem; Label: typeof SegmentedLabel; Indicator: typeof SegmentedIndicator;};Indicatortypeof SegmentedIndicatorItemtypeof SegmentedItemLabeltypeof SegmentedLabelRoottypeof SegmentedRoot- Name
Indicator- Kind
- property
- Type
typeof SegmentedIndicator- Requirement
- required
- Name
Item- Kind
- property
- Type
typeof SegmentedItem- Requirement
- required
- Name
Label- Kind
- property
- Type
typeof SegmentedLabel- Requirement
- required
- Name
Root- Kind
- property
- Type
typeof SegmentedRoot- Requirement
- required
type SegmentedChangeReason = "pointer" | "keyboard" | "programmatic";SegmentedCommand
typetype SegmentedCommand = CommandObject & ({ readonly type: "VALUE_CHANGE_REQUEST"; readonly value: SegmentedSelection; readonly reason: SegmentedChangeReason;} | { readonly type: "FOCUS_ITEM"; readonly key: string;});SegmentedContext
valueexport declare const SegmentedContext: import("solid-js").Context<SegmentedContextValue | undefined>;SegmentedContextProvider
functionexport declare function SegmentedContextProvider(props: { value: SegmentedContextValue; children: JSX.Element;}): JSX.Element;props{
value: SegmentedContextValue;
children: JSX.Element;
}returnJSX.Element- Name
props- Kind
- parameter
- Type
{ value: SegmentedContextValue; children: JSX.Element; }- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
SegmentedContextValue
interfaceexport interface SegmentedContextValue { readonly service: SegmentedService; readonly connector: SegmentedApi; readonly scope: PartScope; readonly snapshot: Accessor<SegmentedSnapshot>;}connectorSegmentedApiscopePartScopeserviceSegmentedServicesnapshotAccessor<SegmentedSnapshot>- Name
connector- Kind
- property
- Type
SegmentedApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
SegmentedService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
Accessor<SegmentedSnapshot>- Requirement
- required
SegmentedEvent
typetype SegmentedEvent = { readonly type: "SELECT"; readonly value: string; readonly reason: SegmentedChangeReason;} | { readonly type: "MOVE"; readonly direction: -1 | 1;} | { readonly type: "HOME";} | { readonly type: "END";} | { readonly type: "FOCUS"; readonly value: string;} | { readonly type: "BLUR";} | { readonly type: "RESET";};SegmentedIndicator
functionexport declare function SegmentedIndicator(props: SegmentedIndicatorProps): JSX.Element;propsSegmentedIndicatorPropsreturnJSX.Element- Name
props- Kind
- parameter
- Type
SegmentedIndicatorProps- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
SegmentedIndicatorProps
interfaceexport interface SegmentedIndicatorProps extends JSX.HTMLAttributes<HTMLSpanElement> { readonly as?: AsProp; readonly item?: SegmentedItem;}asAsPropitemSegmentedItem- Name
as- Kind
- property
- Type
AsProp- Requirement
- optional
- Name
item- Kind
- property
- Type
SegmentedItem- Requirement
- optional
SegmentedInput
typetype SegmentedInput = { readonly options: readonly SegmentedItem[]; readonly type?: SegmentedType; /** Controlled committed value. A defined empty array is controlled. */ readonly value?: SegmentedSelection; /** Uncontrolled initial value. */ readonly defaultValue?: SegmentedSelection; readonly disabled?: boolean; readonly readOnly?: boolean; /** Connector hint; the machine receives logical movement only. */ readonly orientation?: SegmentedOrientation; readonly loop?: boolean;};defaultValueSegmentedSelectiondisabledbooleanloopbooleanoptionsreadonly SegmentedItem[]orientationSegmentedOrientationreadOnlybooleantypeSegmentedTypevalueSegmentedSelection- Name
defaultValue- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Uncontrolled initial value.
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
loop- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
options- Kind
- property
- Type
readonly SegmentedItem[]- Requirement
- required
- Description
- —
- Name
orientation- Kind
- property
- Type
SegmentedOrientation- Requirement
- optional
- Description
- Connector hint; the machine receives logical movement only.
- Name
readOnly- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- —
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- optional
- Description
- —
- Name
value- Kind
- property
- Type
SegmentedSelection- Requirement
- optional
- Description
- Controlled committed value. A defined empty array is controlled.
SegmentedItem
functionexport declare function SegmentedItem(props: SegmentedItemProps): JSX.Element;propsSegmentedItemPropsreturnJSX.Element- Name
props- Kind
- parameter
- Type
SegmentedItemProps- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
SegmentedItemProps
interfaceexport interface SegmentedItemProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> { readonly as?: AsProp; readonly item?: SegmentedItem; readonly value?: string; readonly disabled?: boolean;}asAsPropdisabledbooleanitemSegmentedItemvaluestring- Name
as- Kind
- property
- Type
AsProp- Requirement
- optional
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
item- Kind
- property
- Type
SegmentedItem- Requirement
- optional
- Name
value- Kind
- property
- Type
string- Requirement
- optional
SegmentedLabel
functionexport declare function SegmentedLabel(props: SegmentedLabelProps): JSX.Element;propsSegmentedLabelPropsreturnJSX.Element- Name
props- Kind
- parameter
- Type
SegmentedLabelProps- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
SegmentedLabelProps
interfaceexport interface SegmentedLabelProps extends JSX.HTMLAttributes<HTMLDivElement> { readonly as?: AsProp;}asAsProp- Name
as- Kind
- property
- Type
AsProp- Requirement
- optional
type SegmentedContext = { readonly type: SegmentedType; readonly value: SegmentedSelection | undefined; readonly focusedValue?: string; readonly mode: BindingMode;};focusedValuestringmodeBindingModetypeSegmentedTypevalueSegmentedSelection | undefined- Name
focusedValue- Kind
- property
- Type
string- Requirement
- optional
- Name
mode- Kind
- property
- Type
BindingMode- Requirement
- required
- Name
type- Kind
- property
- Type
SegmentedType- Requirement
- required
- Name
value- Kind
- property
- Type
SegmentedSelection | undefined- Requirement
- required
SegmentedMachineItem
interfaceinterface SegmentedItem { readonly value: string; readonly disabled?: boolean;}disabledbooleanvaluestring- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
value- Kind
- property
- Type
string- Requirement
- required
SegmentedRoot
functionexport declare function SegmentedRoot(props: SegmentedRootProps): JSX.Element;propsSegmentedRootPropsreturnJSX.Element- Name
props- Kind
- parameter
- Type
SegmentedRootProps- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
SegmentedRootProps
interfaceexport interface SegmentedRootProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "value"> { readonly as?: AsProp; readonly options: SegmentedInput["options"]; readonly type?: SegmentedInput["type"]; readonly value?: SegmentedInput["value"]; readonly defaultValue?: SegmentedInput["defaultValue"]; readonly disabled?: boolean; readonly readOnly?: boolean; readonly orientation?: SegmentedInput["orientation"]; readonly loop?: boolean; readonly dir?: "ltr" | "rtl"; readonly surface?: "segmented" | "toggle-group"; readonly onValueChange?: (detail: SegmentedValueChangeDetail) => void;}asAsPropdefaultValueSegmentedInput["defaultValue"]dir"ltr" | "rtl"disabledbooleanloopbooleanonValueChange(detail: SegmentedValueChangeDetail) => voidoptionsSegmentedInput["options"]orientationSegmentedInput["orientation"]readOnlybooleansurface"segmented" | "toggle-group"typeSegmentedInput["type"]valueSegmentedInput["value"]- Name
as- Kind
- property
- Type
AsProp- Requirement
- optional
- Name
defaultValue- Kind
- property
- Type
SegmentedInput["defaultValue"]- Requirement
- optional
- Name
dir- Kind
- property
- Type
"ltr" | "rtl"- Requirement
- optional
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
loop- Kind
- property
- Type
boolean- Requirement
- optional
- Name
onValueChange- Kind
- property
- Type
(detail: SegmentedValueChangeDetail) => void- Requirement
- optional
- Name
options- Kind
- property
- Type
SegmentedInput["options"]- Requirement
- required
- Name
orientation- Kind
- property
- Type
SegmentedInput["orientation"]- Requirement
- optional
- Name
readOnly- Kind
- property
- Type
boolean- Requirement
- optional
- Name
surface- Kind
- property
- Type
"segmented" | "toggle-group"- Requirement
- optional
- Name
type- Kind
- property
- Type
SegmentedInput["type"]- Requirement
- optional
- Name
value- Kind
- property
- Type
SegmentedInput["value"]- Requirement
- optional
SegmentedSelection
typetype SegmentedSelection = string | readonly string[];SegmentedSnapshot
typetype SegmentedSnapshot = Snapshot<SegmentedStateValue, SegmentedContext>;SegmentedType
typetype SegmentedType = "single" | "multiple";SegmentedValueChangeDetail
interfaceexport interface SegmentedValueChangeDetail { readonly value: string | readonly string[]; readonly reason: import("@grassroot/ui-machines/segmented").SegmentedChangeReason;}reasonimport("@grassroot/ui-machines/segmented").SegmentedChangeReasonvaluestring | readonly string[]- Name
reason- Kind
- property
- Type
import("@grassroot/ui-machines/segmented").SegmentedChangeReason- Requirement
- required
- Name
value- Kind
- property
- Type
string | readonly string[]- Requirement
- required
ToggleGroup
valueexport declare const ToggleGroup: { Root: typeof ToggleGroupRoot; Item: typeof SegmentedItem; Label: typeof SegmentedLabel; Indicator: typeof SegmentedIndicator;};Indicatortypeof SegmentedIndicatorItemtypeof SegmentedItemLabeltypeof SegmentedLabelRoottypeof ToggleGroupRoot- Name
Indicator- Kind
- property
- Type
typeof SegmentedIndicator- Requirement
- required
- Name
Item- Kind
- property
- Type
typeof SegmentedItem- Requirement
- required
- Name
Label- Kind
- property
- Type
typeof SegmentedLabel- Requirement
- required
- Name
Root- Kind
- property
- Type
typeof ToggleGroupRoot- Requirement
- required
ToggleGroupRoot
functionexport declare function ToggleGroupRoot(props: SegmentedRootProps): JSX.Element;propsSegmentedRootPropsreturnJSX.Element- Name
props- Kind
- parameter
- Type
SegmentedRootProps- Requirement
- required
- Name
return- Kind
- return value
- Type
JSX.Element- Requirement
- n/a
useSegmented
functionexport declare function useSegmented(input: Accessor<SegmentedInput>, options?: UseSegmentedOptions): UseSegmentedResult;inputAccessor<SegmentedInput>optionsUseSegmentedOptionsreturnUseSegmentedResult- Name
input- Kind
- parameter
- Type
Accessor<SegmentedInput>- Requirement
- required
- Name
options- Kind
- parameter
- Type
UseSegmentedOptions- Requirement
- optional
- Name
return- Kind
- return value
- Type
UseSegmentedResult- Requirement
- n/a
useSegmentedContext
functionexport declare function useSegmentedContext(part: string): SegmentedContextValue;partstringreturnSegmentedContextValue- Name
part- Kind
- parameter
- Type
string- Requirement
- required
- Name
return- Kind
- return value
- Type
SegmentedContextValue- Requirement
- n/a
UseSegmentedOptions
interfaceexport interface UseSegmentedOptions { readonly dir?: "ltr" | "rtl"; readonly scope?: "segmented" | "toggle-group"; readonly onValueChange?: (detail: SegmentedValueChangeDetail) => void;}dir"ltr" | "rtl"onValueChange(detail: SegmentedValueChangeDetail) => voidscope"segmented" | "toggle-group"- Name
dir- Kind
- property
- Type
"ltr" | "rtl"- Requirement
- optional
- Name
onValueChange- Kind
- property
- Type
(detail: SegmentedValueChangeDetail) => void- Requirement
- optional
- Name
scope- Kind
- property
- Type
"segmented" | "toggle-group"- Requirement
- optional
UseSegmentedResult
interfaceexport interface UseSegmentedResult { readonly service: SegmentedService; readonly connector: SegmentedApi; readonly scope: PartScope; readonly snapshot: Accessor<SegmentedSnapshot>;}connectorSegmentedApiscopePartScopeserviceSegmentedServicesnapshotAccessor<SegmentedSnapshot>- Name
connector- Kind
- property
- Type
SegmentedApi- Requirement
- required
- Name
scope- Kind
- property
- Type
PartScope- Requirement
- required
- Name
service- Kind
- property
- Type
SegmentedService- Requirement
- required
- Name
snapshot- Kind
- property
- Type
Accessor<SegmentedSnapshot>- Requirement
- required