@impulse-ui-native/theme 3.0.0 → 5.0.0

package/dist/types/flyout-tokens.types.d.mts

@@ -1,10 +1,25 @@
 interface FlyoutHandleTokens {
-    containerHeight: number;
     width: `${number}%`;
     height: number;
     borderRadius: number;
     backgroundColor: string;
 }
+type FlyoutPlacement = "top" | "bottom";
+interface FlyoutPlacementTokens {
+    container: {
+        top?: number;
+        bottom?: number;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+    };
+    handleContainer: {
+        top?: number;
+        bottom?: number;
+        height: number;
+    };
+}
 interface FlyoutTitleTokens {
     paddingVertical: number;
     paddingHorizontal: number;
@@ -16,10 +31,14 @@ interface FlyoutTokens {
     overlayVisibleOpacity: number;
     backgroundColor: string;
     contentPaddingHorizontal: number;
-    borderRadius: number;
     hiddenOpacity: number;
     title: FlyoutTitleTokens;
     handle: FlyoutHandleTokens;
+    placements: Record<FlyoutPlacement, FlyoutPlacementTokens>;
+}
+interface FlyoutTokenState {
+    placement: FlyoutPlacement;
 }
+type ResolvedFlyoutTokens = Omit<FlyoutTokens, "placements"> & FlyoutPlacementTokens;
 
-export type { FlyoutHandleTokens, FlyoutTitleTokens, FlyoutTokens };
+export type { FlyoutHandleTokens, FlyoutPlacement, FlyoutPlacementTokens, FlyoutTitleTokens, FlyoutTokenState, FlyoutTokens, ResolvedFlyoutTokens };

package/dist/types/index.d.mts

@@ -1,7 +1,7 @@
 export { BorderProps } from './border.types.mjs';
 export { ColorProps } from './color.types.mjs';
 export { ChartColorPalette } from './chart.types.mjs';
-export { ComponentSize, ComponentVariant } from './components.types.mjs';
+export { ActionState, ActionVariant, ActionVisualState, AvailabilityState, AvailabilityVisualState, ComponentSize, ComponentVariant, ControlState, ControlVisualState, DisplayVariant, FieldState, FieldVariant, FieldVisualState, SelectionItemState, SelectionItemVisualState, SelectionState, SelectionVariant, SelectionVisualState, VisualStateTokens } from './components.types.mjs';
 export { DimensionProps } from './dimension.types.mjs';
 export { FlexProps } from './flex.types.mjs';
 export { ShadowIntensity, ShadowLevel, ShadowPosition, ShadowProps } from './shadow.types.mjs';
@@ -10,28 +10,32 @@ export { StylePropKey, StyleProps } from './style.types.mjs';
 export { AppTheme, ColorPair, ColorScheme, ComponentsThemes, ComponentsTokens, ExtendedThemeColors, PrimitiveThemeTokens, ThemeColors, ThemeContextData } from './theme-provider.types.mjs';
 export { BorderSize, BorderSizeKey, FontFamily, FontSize, FontWeight, FontWeightItalic, FontWeightKeys, FontWeightNormal, FontWeightValue, LetterSpacingKey, LetterSpacings, LineHeight, NeutralColor, NeutralColorKey, Radii, RadiiBlob, RadiiConditional, RadiiDrawn, RadiusBlobKey, RadiusConditionalKey, RadiusDrawnKey, RadiusKey, Space, SpaceSizesKey, TypographyKey } from './tokens.types.mjs';
 export { TypographyPresetKey, TypographyProps } from './typography.types.mjs';
-export { ButtonSizeTokens, ButtonTokens, ButtonVariantTokens, IconButtonSizeTokens, IconButtonTokens, IconButtonVariantTokens } from './buttons-tokens.types.mjs';
-export { AccordionTokens } from './accordion-tokens.types.mjs';
+export { ActionAppearanceTokens, ButtonSizeTokens, ButtonTokens, ButtonVariantTokens, IconButtonSizeTokens, IconButtonTokens, IconButtonVariantTokens } from './buttons-tokens.types.mjs';
+export { AccordionTokens, AccordionTriggerAppearanceTokens } from './accordion-tokens.types.mjs';
 export { AvatarSizeTokens, AvatarStatus, AvatarTokens, AvatarVariantTokens } from './avatar-tokens.types.mjs';
 export { BadgeColorTokens, BadgeSizeTokens, BadgeTokens, BadgeTone, BadgeVariantTokens } from './badge-tokens.types.mjs';
 export { CardSectionTokens, CardTokens } from './card-tokens.types.mjs';
-export { CheckboxSizeTokens, CheckboxTokens, CheckboxVariantTokens } from './checkbox-tokens.types.mjs';
-export { TagColor, TagColorTokens, TagSizeTokens, TagTokens, TagVariantTokens } from './tag-tokens.types.mjs';
-export { ControlAddonTokens, ControlAddonVariantTokens, ControlContainerSizeTokens, ControlContainerTokens, ControlContainerVariantTokens, ControlErrorTokens, ControlInputSizeTokens, ControlInputTokens, ControlInputVariantTokens, ControlLabelTokens } from './control-tokes.types.mjs';
-export { SelectOptionTokens, SelectTokens } from './select-tokens.types.mjs';
-export { DatePickerFlyoutTokens, DatetimePickerCalendarTokens, DatetimePickerDayTokens, DatetimePickerFlyoutActionsTokens, DatetimePickerFlyoutTokens, DatetimePickerQuickDateOptionsTokens, DatetimePickerTokens, DatetimePickerVisibleDateSelectTokens, DatetimeRangePickerFlyoutTokens } from './datetime-picker-tokens.types.mjs';
-export { DividerTokens, DividerTone } from './divider-tokens.types.mjs';
-export { TimePickerColumnTokens, TimePickerColumnsTokens, TimePickerFlyoutTokens, TimePickerTokens } from './time-picker-token.types.mjs';
-export { FlyoutHandleTokens, FlyoutTitleTokens, FlyoutTokens } from './flyout-tokens.types.mjs';
+export { CheckboxAppearanceTokens, CheckboxSizeTokens, CheckboxTokens, CheckboxVariantTokens } from './checkbox-tokens.types.mjs';
+export { TagAppearanceTokens, TagColor, TagColorTokens, TagSizeTokens, TagTokens, TagVariantTokens } from './tag-tokens.types.mjs';
+export { ControlAddonAppearanceTokens, ControlAddonTokens, ControlAddonVariantTokens, ControlContainerAppearanceTokens, ControlContainerSizeTokens, ControlContainerTokens, ControlContainerVariantTokens, ControlErrorTokens, ControlInputAppearanceTokens, ControlInputSizeTokens, ControlInputTokens, ControlInputVariantTokens, ControlLabelAppearanceTokens, ControlLabelTokens } from './control-tokens.types.mjs';
+export { SelectOptionAppearanceTokens, SelectOptionTokens, SelectTokens } from './select-tokens.types.mjs';
+export { DatePickerFlyoutTokens, DatetimePickerCalendarTokens, DatetimePickerDayAppearanceTokens, DatetimePickerDayState, DatetimePickerDayTokens, DatetimePickerDayVisualState, DatetimePickerFlyoutActionsTokens, DatetimePickerFlyoutTokens, DatetimePickerQuickDateOptionsTokens, DatetimePickerTokens, DatetimePickerVisibleDateSelectTokens, DatetimeRangePickerFlyoutTokens } from './datetime-picker-tokens.types.mjs';
+export { DividerLayoutTokens, DividerTokenInset, DividerTokenOrientation, DividerTokenState, DividerTokens, DividerTone, ResolvedDividerTokens } from './divider-tokens.types.mjs';
+export { TimePickerColumnAppearanceTokens, TimePickerColumnTokens, TimePickerColumnsTokens, TimePickerFlyoutTokens, TimePickerTokens } from './time-picker-token.types.mjs';
+export { FlyoutHandleTokens, FlyoutPlacement, FlyoutPlacementTokens, FlyoutTitleTokens, FlyoutTokenState, FlyoutTokens, ResolvedFlyoutTokens } from './flyout-tokens.types.mjs';
 export { IconTokens } from './icon-tokens.types.mjs';
 export { PressableTokens } from './pressable-tokens.types.mjs';
+export { PaginationAppearanceTokens, PaginationSizeToken, PaginationState, PaginationTokens, PaginationVisualState } from './pagination-tokens.types.mjs';
 export { ProgressColorTokens, ProgressSizeTokens, ProgressTokens, ProgressTone, ProgressVariant } from './progress-tokens.types.mjs';
-export { RadioSizeTokens, RadioTokens, RadioVariantTokens } from './radio-tokens.types.mjs';
+export { RadioAppearanceTokens, RadioSizeTokens, RadioTokens, RadioVariantTokens } from './radio-tokens.types.mjs';
+export { ResolvedSegmentedControlItemTokens, SegmentedControlAppearanceTokens, SegmentedControlItemLayout, SegmentedControlItemLayoutTokens, SegmentedControlItemTokenState, SegmentedControlSizeToken, SegmentedControlSizeTokens, SegmentedControlTokens, SegmentedControlVariantTokens } from './segmented-control-tokens.types.mjs';
 export { SkeletonBoneTokens, SkeletonTextTokens, SkeletonTokens } from './skeleton-tokens.types.mjs';
-export { SliderSizeTokens, SliderTokens, SliderVariant, SliderVariantTokens } from './slider-tokens.types.mjs';
+export { ResolvedSliderTrackTokens, SliderAppearanceTokens, SliderSizeTokens, SliderTokens, SliderTrackLayout, SliderTrackLayoutTokens, SliderTrackTokenState, SliderVariant, SliderVariantTokens } from './slider-tokens.types.mjs';
 export { SpinnerTokens, SpinnerTone } from './spinner-tokens.types.mjs';
 export { StepperNavigationTokens, StepperTokens } from './stepper-tokens.types.mjs';
-export { SwitchSizeTokens, SwitchTokens, SwitchVariantTokens } from './switch-tokens.types.mjs';
-export { TextareaSizeTokens, TextareaTokens } from './textarea-tokens.types.mjs';
+export { SwitchAppearanceTokens, SwitchSizeTokens, SwitchTokens, SwitchVariantTokens } from './switch-tokens.types.mjs';
+export { TextareaAppearanceTokens, TextareaSizeTokens, TextareaTokens } from './textarea-tokens.types.mjs';
 export { DataStateActionsFooterTokens, DataStateContentTokens, DataStateDetailsTokens, DataStateLoadingTokens, DataStateTokens } from './data-state-tokens.types.mjs';
+export { ListTokens } from './list-tokens.types.mjs';
+export { CarouselCounterAppearanceTokens, CarouselIndicatorAppearanceTokens, CarouselTokens } from './carousel-tokens.types.mjs';
 import 'react-native';

package/dist/types/index.js

@@ -17,7 +17,7 @@ export * from "./badge-tokens.types";
 export * from "./card-tokens.types";
 export * from "./checkbox-tokens.types";
 export * from "./tag-tokens.types";
-export * from "./control-tokes.types";
+export * from "./control-tokens.types";
 export * from "./select-tokens.types";
 export * from "./datetime-picker-tokens.types";
 export * from "./divider-tokens.types";
@@ -25,8 +25,10 @@ export * from "./time-picker-token.types";
 export * from "./flyout-tokens.types";
 export * from "./icon-tokens.types";
 export * from "./pressable-tokens.types";
+export * from "./pagination-tokens.types";
 export * from "./progress-tokens.types";
 export * from "./radio-tokens.types";
+export * from "./segmented-control-tokens.types";
 export * from "./skeleton-tokens.types";
 export * from "./slider-tokens.types";
 export * from "./spinner-tokens.types";
@@ -34,4 +36,6 @@ export * from "./stepper-tokens.types";
 export * from "./switch-tokens.types";
 export * from "./textarea-tokens.types";
 export * from "./data-state-tokens.types";
+export * from "./list-tokens.types";
+export * from "./carousel-tokens.types";
 //# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./border.types\";\nexport * from \"./color.types\";\nexport * from \"./chart.types\";\nexport * from \"./components.types\";\nexport * from \"./dimension.types\";\nexport * from \"./flex.types\";\nexport * from \"./shadow.types\";\nexport * from \"./spacing.types\";\nexport * from \"./style.types\";\nexport * from \"./theme-provider.types\";\nexport * from \"./tokens.types\";\nexport * from \"./typography.types\";\nexport * from \"./buttons-tokens.types\";\nexport * from \"./accordion-tokens.types\";\nexport * from \"./avatar-tokens.types\";\nexport * from \"./badge-tokens.types\";\nexport * from \"./card-tokens.types\";\nexport * from \"./checkbox-tokens.types\";\nexport * from \"./tag-tokens.types\";\nexport * from \"./control-tokes.types\";\nexport * from \"./select-tokens.types\";\nexport * from \"./datetime-picker-tokens.types\";\nexport * from \"./divider-tokens.types\";\nexport * from \"./time-picker-token.types\";\nexport * from \"./flyout-tokens.types\";\nexport * from \"./icon-tokens.types\";\nexport * from \"./pressable-tokens.types\";\nexport * from \"./progress-tokens.types\";\nexport * from \"./radio-tokens.types\";\nexport * from \"./skeleton-tokens.types\";\nexport * from \"./slider-tokens.types\";\nexport * from \"./spinner-tokens.types\";\nexport * from \"./stepper-tokens.types\";\nexport * from \"./switch-tokens.types\";\nexport * from \"./textarea-tokens.types\";\nexport * from \"./data-state-tokens.types\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./border.types\";\nexport * from \"./color.types\";\nexport * from \"./chart.types\";\nexport * from \"./components.types\";\nexport * from \"./dimension.types\";\nexport * from \"./flex.types\";\nexport * from \"./shadow.types\";\nexport * from \"./spacing.types\";\nexport * from \"./style.types\";\nexport * from \"./theme-provider.types\";\nexport * from \"./tokens.types\";\nexport * from \"./typography.types\";\nexport * from \"./buttons-tokens.types\";\nexport * from \"./accordion-tokens.types\";\nexport * from \"./avatar-tokens.types\";\nexport * from \"./badge-tokens.types\";\nexport * from \"./card-tokens.types\";\nexport * from \"./checkbox-tokens.types\";\nexport * from \"./tag-tokens.types\";\nexport * from \"./control-tokens.types\";\nexport * from \"./select-tokens.types\";\nexport * from \"./datetime-picker-tokens.types\";\nexport * from \"./divider-tokens.types\";\nexport * from \"./time-picker-token.types\";\nexport * from \"./flyout-tokens.types\";\nexport * from \"./icon-tokens.types\";\nexport * from \"./pressable-tokens.types\";\nexport * from \"./pagination-tokens.types\";\nexport * from \"./progress-tokens.types\";\nexport * from \"./radio-tokens.types\";\nexport * from \"./segmented-control-tokens.types\";\nexport * from \"./skeleton-tokens.types\";\nexport * from \"./slider-tokens.types\";\nexport * from \"./spinner-tokens.types\";\nexport * from \"./stepper-tokens.types\";\nexport * from \"./switch-tokens.types\";\nexport * from \"./textarea-tokens.types\";\nexport * from \"./data-state-tokens.types\";\n\nexport * from \"./list-tokens.types\";\nexport * from \"./carousel-tokens.types\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;","names":[]}

package/dist/types/list-tokens.types.d.mts

@@ -0,0 +1,15 @@
+interface ListTokens {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+    borderRadius: number;
+    item: {
+        gap: number;
+        padding: number;
+    };
+    content: {
+        gap: number;
+    };
+}
+
+export type { ListTokens };

package/dist/types/list-tokens.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=list-tokens.types.js.map

package/dist/types/list-tokens.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/types/pagination-tokens.types.d.mts

@@ -0,0 +1,30 @@
+import { ComponentSize, VisualStateTokens } from './components.types.mjs';
+
+type PaginationVisualState = "default" | "current" | "disabled";
+interface PaginationState {
+    current: boolean;
+    disabled?: boolean;
+}
+interface PaginationAppearanceTokens {
+    backgroundColor: string;
+    borderColor: string;
+    color: string;
+    ellipsisColor: string;
+}
+interface PaginationSizeToken {
+    compactMinWidth: number;
+    controlSize: number;
+    fontSize: number;
+    hitSlop: number;
+    iconSize: number;
+    paddingHorizontal: number;
+}
+interface PaginationTokens {
+    borderRadius: number;
+    borderWidth: number;
+    gap: number;
+    sizes: Record<ComponentSize, PaginationSizeToken>;
+    states: VisualStateTokens<PaginationVisualState, PaginationAppearanceTokens>;
+}
+
+export type { PaginationAppearanceTokens, PaginationSizeToken, PaginationState, PaginationTokens, PaginationVisualState };

package/dist/types/pagination-tokens.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=pagination-tokens.types.js.map

package/dist/types/pagination-tokens.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/types/radio-tokens.types.d.mts

@@ -1,25 +1,21 @@
-import { ComponentSize, ComponentVariant } from './components.types.mjs';
+import { ComponentSize, SelectionVariant, VisualStateTokens, SelectionVisualState } from './components.types.mjs';
 
 type RadioSizeTokens = Record<ComponentSize, {
     size: number;
     indicatorSize: number;
     hitSlop: number;
 }>;
-type RadioVariantTokens = Record<ComponentVariant, {
+interface RadioAppearanceTokens {
     backgroundColor: string;
     borderColor: string;
     color: string;
-}>;
+}
+type RadioVariantTokens = Record<SelectionVariant, VisualStateTokens<SelectionVisualState, RadioAppearanceTokens>>;
 interface RadioTokens {
     borderWidth: number;
     borderRadius: number;
-    uncheckedBackgroundColor: string;
-    uncheckedBorderColor: string;
-    disabledBackgroundColor: string;
-    disabledBorderColor: string;
-    disabledColor: string;
     sizes: RadioSizeTokens;
     variants: RadioVariantTokens;
 }
 
-export type { RadioSizeTokens, RadioTokens, RadioVariantTokens };
+export type { RadioAppearanceTokens, RadioSizeTokens, RadioTokens, RadioVariantTokens };

package/dist/types/segmented-control-tokens.types.d.mts

@@ -0,0 +1,49 @@
+import { ComponentSize, SelectionVariant, VisualStateTokens, SelectionVisualState, SelectionState } from './components.types.mjs';
+
+type SegmentedControlItemLayout = "inline" | "stacked";
+interface SegmentedControlItemLayoutTokens {
+    flexDirection: "column" | "row";
+    gap: number;
+    paddingVertical: number;
+}
+interface SegmentedControlSizeToken {
+    fontSize: number;
+    height: number;
+    hitSlop: number;
+    iconSize: number;
+    layouts: Record<SegmentedControlItemLayout, SegmentedControlItemLayoutTokens>;
+    minItemWidth: number;
+    paddingHorizontal: number;
+}
+type SegmentedControlSizeTokens = Record<ComponentSize, SegmentedControlSizeToken>;
+interface SegmentedControlAppearanceTokens {
+    backgroundColor: string;
+    borderColor: string;
+    color: string;
+}
+interface SegmentedControlVariantTokens {
+    states: VisualStateTokens<SelectionVisualState, SegmentedControlAppearanceTokens>;
+}
+interface SegmentedControlTokens {
+    borderRadius: number;
+    borderWidth: number;
+    itemBorderRadius: number;
+    itemBorderWidth: number;
+    rootBackgroundColor: string;
+    rootBorderColor: string;
+    rootGap: number;
+    rootPadding: number;
+    sizes: SegmentedControlSizeTokens;
+    variants: Record<SelectionVariant, SegmentedControlVariantTokens>;
+}
+interface SegmentedControlItemTokenState extends SelectionState {
+    layout: SegmentedControlItemLayout;
+    size: ComponentSize;
+    variant: SelectionVariant;
+}
+type ResolvedSegmentedControlItemTokens = Omit<SegmentedControlSizeToken, "layouts"> & SegmentedControlItemLayoutTokens & SegmentedControlAppearanceTokens & {
+    borderRadius: number;
+    borderWidth: number;
+};
+
+export type { ResolvedSegmentedControlItemTokens, SegmentedControlAppearanceTokens, SegmentedControlItemLayout, SegmentedControlItemLayoutTokens, SegmentedControlItemTokenState, SegmentedControlSizeToken, SegmentedControlSizeTokens, SegmentedControlTokens, SegmentedControlVariantTokens };

package/dist/types/segmented-control-tokens.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=segmented-control-tokens.types.js.map

package/dist/types/segmented-control-tokens.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/types/select-tokens.types.d.mts

@@ -1,8 +1,12 @@
+import { VisualStateTokens, SelectionItemVisualState } from './components.types.mjs';
+
+interface SelectOptionAppearanceTokens {
+    iconColor: string;
+    iconOpacity: number;
+}
 interface SelectOptionTokens {
     padding: number;
-    selectedIconColor: string;
-    selectedIconVisibleOpacity: number;
-    selectedIconHiddenOpacity: number;
+    states: VisualStateTokens<SelectionItemVisualState, SelectOptionAppearanceTokens>;
 }
 interface SelectTokens {
     flyoutHeight: number;
@@ -11,4 +15,4 @@ interface SelectTokens {
     option: SelectOptionTokens;
 }
 
-export type { SelectOptionTokens, SelectTokens };
+export type { SelectOptionAppearanceTokens, SelectOptionTokens, SelectTokens };

package/dist/types/slider-tokens.types.d.mts

@@ -1,44 +1,52 @@
-import { ComponentSize } from './components.types.mjs';
+import { ComponentSize, SelectionVariant, VisualStateTokens, ControlVisualState } from './components.types.mjs';
 
-type SliderVariant = "filled" | "outlined" | "soft";
+/** @deprecated Use SelectionVariant. */
+type SliderVariant = SelectionVariant;
 type SliderSizeTokens = Record<ComponentSize, {
     trackHeight: number;
     thumbSize: number;
     markSize: number;
-    hitSlop: number;
 }>;
-type SliderVariantTokens = Record<SliderVariant, {
+type SliderTrackLayout = "default" | "valueBubble";
+interface SliderTrackLayoutTokens {
+    reservedVerticalSpace: number;
+}
+interface SliderAppearanceTokens {
+    activeMarkColor: string;
     activeTrackColor: string;
+    inactiveTrackColor: string;
     labelColor: string;
+    markColor: string;
     thumbBackgroundColor: string;
     thumbBorderColor: string;
+    thumbBorderWidth: number;
     thumbHighlightColor: string;
     valueBubbleBackgroundColor: string;
     valueBubbleBorderColor: string;
     valueBubbleColor: string;
-}>;
+}
+type SliderVariantTokens = Record<SelectionVariant, VisualStateTokens<ControlVisualState, SliderAppearanceTokens>>;
 interface SliderTokens {
     trackBorderRadius: number;
     thumbBorderRadius: number;
-    thumbBorderWidth: number;
-    outlinedThumbBorderWidth: number;
-    focusRingWidth: number;
-    focusRingOffset: number;
-    inactiveTrackColor: string;
-    markColor: string;
-    activeMarkColor: string;
-    disabledTrackColor: string;
-    disabledThumbColor: string;
-    disabledTextColor: string;
-    focusRingColor: string;
     valueBubbleBorderRadius: number;
     valueBubbleBorderWidth: number;
     valueBubblePaddingHorizontal: number;
     valueBubblePaddingVertical: number;
     valueBubbleGap: number;
     labelGap: number;
+    layouts: Record<SliderTrackLayout, SliderTrackLayoutTokens>;
     sizes: SliderSizeTokens;
     variants: SliderVariantTokens;
 }
+interface SliderTrackTokenState {
+    disabled: boolean;
+    layout: SliderTrackLayout;
+    size: ComponentSize;
+    variant: SelectionVariant;
+}
+type ResolvedSliderTrackTokens = SliderTrackLayoutTokens & SliderSizeTokens[ComponentSize] & SliderAppearanceTokens & {
+    trackBorderRadius: number;
+};
 
-export type { SliderSizeTokens, SliderTokens, SliderVariant, SliderVariantTokens };
+export type { ResolvedSliderTrackTokens, SliderAppearanceTokens, SliderSizeTokens, SliderTokens, SliderTrackLayout, SliderTrackLayoutTokens, SliderTrackTokenState, SliderVariant, SliderVariantTokens };

package/dist/types/switch-tokens.types.d.mts

@@ -1,4 +1,4 @@
-import { ComponentSize, ComponentVariant } from './components.types.mjs';
+import { ComponentSize, SelectionVariant, VisualStateTokens, AvailabilityVisualState } from './components.types.mjs';
 
 type SwitchSizeTokens = Record<ComponentSize, {
     width: number;
@@ -8,25 +8,23 @@ type SwitchSizeTokens = Record<ComponentSize, {
     loadingIndicatorScale: number;
     hitSlop: number;
 }>;
-type SwitchVariantTokens = Record<ComponentVariant, {
-    backgroundColor: string;
-    borderColor: string;
-    color: string;
-}>;
+interface SwitchAppearanceTokens {
+    activeBackgroundColor: string;
+    activeBorderColor: string;
+    activeThumbColor: string;
+    inactiveBackgroundColor: string;
+    inactiveBorderColor: string;
+    inactiveThumbColor: string;
+}
+type SwitchVariantTokens = Record<SelectionVariant, VisualStateTokens<AvailabilityVisualState, SwitchAppearanceTokens>>;
 interface SwitchTokens {
     animationDuration: number;
     borderWidth: number;
     borderRadius: number;
     thumbBorderRadius: number;
-    uncheckedBackgroundColor: string;
-    uncheckedBorderColor: string;
-    uncheckedThumbColor: string;
-    disabledBackgroundColor: string;
-    disabledBorderColor: string;
-    disabledThumbColor: string;
     loadingIndicatorColor: string;
     sizes: SwitchSizeTokens;
     variants: SwitchVariantTokens;
 }
 
-export type { SwitchSizeTokens, SwitchTokens, SwitchVariantTokens };
+export type { SwitchAppearanceTokens, SwitchSizeTokens, SwitchTokens, SwitchVariantTokens };

package/dist/types/tag-tokens.types.d.mts

@@ -1,4 +1,4 @@
-import { ComponentSize, ComponentVariant } from './components.types.mjs';
+import { ComponentSize, DisplayVariant, VisualStateTokens, AvailabilityVisualState } from './components.types.mjs';
 
 type TagColor = "primary" | "secondary" | "error" | "warning" | "success" | "info";
 type TagSizeTokens = Record<ComponentSize, {
@@ -7,14 +7,12 @@ type TagSizeTokens = Record<ComponentSize, {
     minWidth: number;
     fontSize: number;
 }>;
-type TagVariantTokens = Record<ComponentVariant, {
+interface TagAppearanceTokens {
     backgroundColor: string;
     borderColor: string;
     color: string;
-    disabledBackgroundColor: string;
-    disabledBorderColor: string;
-    disabledColor: string;
-}>;
+}
+type TagVariantTokens = Record<DisplayVariant, VisualStateTokens<AvailabilityVisualState, TagAppearanceTokens>>;
 type TagColorTokens = Record<TagColor, TagVariantTokens>;
 interface TagTokens {
     borderWidth: number;
@@ -26,4 +24,4 @@ interface TagTokens {
     colors: TagColorTokens;
 }
 
-export type { TagColor, TagColorTokens, TagSizeTokens, TagTokens, TagVariantTokens };
+export type { TagAppearanceTokens, TagColor, TagColorTokens, TagSizeTokens, TagTokens, TagVariantTokens };

package/dist/types/textarea-tokens.types.d.mts

@@ -1,17 +1,18 @@
-import { ComponentSize } from './components.types.mjs';
+import { ComponentSize, VisualStateTokens, FieldVisualState } from './components.types.mjs';
 
 type TextareaSizeTokens = Record<ComponentSize, {
     lineHeight: number;
     paddingVertical: number;
 }>;
-interface TextareaTokens {
+interface TextareaAppearanceTokens {
     counterColor: string;
+}
+interface TextareaTokens {
     counterFontSize: number;
-    disabledCounterColor: string;
-    errorCounterColor: string;
     footerGap: number;
     footerMarginTop: number;
     sizes: TextareaSizeTokens;
+    states: VisualStateTokens<FieldVisualState, TextareaAppearanceTokens>;
 }
 
-export type { TextareaSizeTokens, TextareaTokens };
+export type { TextareaAppearanceTokens, TextareaSizeTokens, TextareaTokens };

package/dist/types/theme-provider.types.d.mts

@@ -1,18 +1,22 @@
 import { BadgeTokens } from './badge-tokens.types.mjs';
+import { CarouselTokens } from './carousel-tokens.types.mjs';
 import { CheckboxTokens } from './checkbox-tokens.types.mjs';
+import { ListTokens } from './list-tokens.types.mjs';
 import { RadioTokens } from './radio-tokens.types.mjs';
 import { AccordionTokens } from './accordion-tokens.types.mjs';
 import { AvatarTokens } from './avatar-tokens.types.mjs';
 import { ButtonTokens, IconButtonTokens } from './buttons-tokens.types.mjs';
 import { CardTokens } from './card-tokens.types.mjs';
-import { ControlAddonTokens, ControlContainerTokens, ControlErrorTokens, ControlInputTokens, ControlLabelTokens } from './control-tokes.types.mjs';
+import { ControlAddonTokens, ControlContainerTokens, ControlErrorTokens, ControlInputTokens, ControlLabelTokens } from './control-tokens.types.mjs';
 import { DataStateTokens } from './data-state-tokens.types.mjs';
 import { DatetimePickerTokens } from './datetime-picker-tokens.types.mjs';
 import { DividerTokens } from './divider-tokens.types.mjs';
 import { FlyoutTokens } from './flyout-tokens.types.mjs';
 import { IconTokens } from './icon-tokens.types.mjs';
+import { PaginationTokens } from './pagination-tokens.types.mjs';
 import { PressableTokens } from './pressable-tokens.types.mjs';
 import { ProgressTokens } from './progress-tokens.types.mjs';
+import { SegmentedControlTokens } from './segmented-control-tokens.types.mjs';
 import { SelectTokens } from './select-tokens.types.mjs';
 import { SkeletonTokens } from './skeleton-tokens.types.mjs';
 import { SliderTokens } from './slider-tokens.types.mjs';
@@ -73,6 +77,8 @@ interface ComponentsThemes {
     (theme: PrimitiveThemeTokens): ComponentsTokens;
 }
 interface ComponentsTokens {
+    carousel: CarouselTokens;
+    list: ListTokens;
     accordion: AccordionTokens;
     avatar: AvatarTokens;
     badge: BadgeTokens;
@@ -81,6 +87,7 @@ interface ComponentsTokens {
     checkbox: CheckboxTokens;
     iconButton: IconButtonTokens;
     icon: IconTokens;
+    pagination: PaginationTokens;
     pressable: PressableTokens;
     progress: ProgressTokens;
     radio: RadioTokens;
@@ -91,6 +98,7 @@ interface ComponentsTokens {
     controlInput: ControlInputTokens;
     controlLabel: ControlLabelTokens;
     select: SelectTokens;
+    segmentedControl: SegmentedControlTokens;
     datetimePicker: DatetimePickerTokens;
     divider: DividerTokens;
     timePicker: TimePickerTokens;

package/dist/types/time-picker-token.types.d.mts

@@ -1,3 +1,9 @@
+import { VisualStateTokens, SelectionItemVisualState } from './components.types.mjs';
+
+interface TimePickerColumnAppearanceTokens {
+    color: string;
+    fontWeight: number;
+}
 interface TimePickerColumnTokens {
     width: number;
     height: number;
@@ -8,10 +14,7 @@ interface TimePickerColumnTokens {
     verticalPadding: number;
     initialScrollIndexViewOffset: number;
     fontSize: number;
-    selectedColor: string;
-    color: string;
-    selectedFontWeight: number;
-    fontWeight: number;
+    states: VisualStateTokens<SelectionItemVisualState, TimePickerColumnAppearanceTokens>;
 }
 interface TimePickerFlyoutTokens {
     gap: number;
@@ -31,4 +34,4 @@ interface TimePickerTokens {
     columns: TimePickerColumnsTokens;
 }
 
-export type { TimePickerColumnTokens, TimePickerColumnsTokens, TimePickerFlyoutTokens, TimePickerTokens };
+export type { TimePickerColumnAppearanceTokens, TimePickerColumnTokens, TimePickerColumnsTokens, TimePickerFlyoutTokens, TimePickerTokens };

package/dist/utils/action-state.utils.d.mts

@@ -0,0 +1,5 @@
+import { VisualStateTokens, ActionVisualState, ActionState } from '../types/components.types.mjs';
+
+declare function getActionStateTokens<Tokens>(tokens: VisualStateTokens<ActionVisualState, Tokens>, state: ActionState): Tokens;
+
+export { getActionStateTokens };

package/dist/utils/action-state.utils.js

@@ -0,0 +1,9 @@
+function getActionStateTokens(tokens, state) {
+  const { disabled = false, loading = false } = state;
+  if (disabled) return tokens.disabled;
+  return loading ? tokens.loading : tokens.default;
+}
+export {
+  getActionStateTokens
+};
+//# sourceMappingURL=action-state.utils.js.map

package/dist/utils/action-state.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/action-state.utils.ts"],"sourcesContent":["import type {\n  ActionState,\n  ActionVisualState,\n  VisualStateTokens,\n} from \"../types\";\n\nexport function getActionStateTokens<Tokens>(\n  tokens: VisualStateTokens<ActionVisualState, Tokens>,\n  state: ActionState,\n): Tokens {\n  const { disabled = false, loading = false } = state;\n\n  if (disabled) return tokens.disabled;\n  return loading ? tokens.loading : tokens.default;\n}\n"],"mappings":"AAMO,SAAS,qBACd,QACA,OACQ;AACR,QAAM,EAAE,WAAW,OAAO,UAAU,MAAM,IAAI;AAE9C,MAAI,SAAU,QAAO,OAAO;AAC5B,SAAO,UAAU,OAAO,UAAU,OAAO;AAC3C;","names":[]}

package/dist/utils/availability-state.utils.d.mts

@@ -0,0 +1,5 @@
+import { VisualStateTokens, AvailabilityVisualState, AvailabilityState } from '../types/components.types.mjs';
+
+declare function getAvailabilityStateTokens<Tokens>(tokens: VisualStateTokens<AvailabilityVisualState, Tokens>, state: AvailabilityState): Tokens;
+
+export { getAvailabilityStateTokens };

package/dist/utils/availability-state.utils.js

@@ -0,0 +1,8 @@
+function getAvailabilityStateTokens(tokens, state) {
+  const { disabled = false } = state;
+  return disabled ? tokens.disabled : tokens.default;
+}
+export {
+  getAvailabilityStateTokens
+};
+//# sourceMappingURL=availability-state.utils.js.map

package/dist/utils/availability-state.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/availability-state.utils.ts"],"sourcesContent":["import type {\n  AvailabilityState,\n  AvailabilityVisualState,\n  VisualStateTokens,\n} from \"../types\";\n\nexport function getAvailabilityStateTokens<Tokens>(\n  tokens: VisualStateTokens<AvailabilityVisualState, Tokens>,\n  state: AvailabilityState,\n): Tokens {\n  const { disabled = false } = state;\n\n  return disabled ? tokens.disabled : tokens.default;\n}\n"],"mappings":"AAMO,SAAS,2BACd,QACA,OACQ;AACR,QAAM,EAAE,WAAW,MAAM,IAAI;AAE7B,SAAO,WAAW,OAAO,WAAW,OAAO;AAC7C;","names":[]}

package/dist/utils/control-state.utils.d.mts

@@ -0,0 +1,5 @@
+import { VisualStateTokens, ControlVisualState, ControlState } from '../types/components.types.mjs';
+
+declare function getControlStateTokens<Tokens>(tokens: VisualStateTokens<ControlVisualState, Tokens>, state: ControlState): Tokens;
+
+export { getControlStateTokens };

package/dist/utils/control-state.utils.js

@@ -0,0 +1,9 @@
+function getControlStateTokens(tokens, state) {
+  const { disabled = false, focused = false } = state;
+  if (disabled) return tokens.disabled;
+  return focused ? tokens.focused : tokens.default;
+}
+export {
+  getControlStateTokens
+};
+//# sourceMappingURL=control-state.utils.js.map

package/dist/utils/control-state.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/control-state.utils.ts"],"sourcesContent":["import type {\n  ControlState,\n  ControlVisualState,\n  VisualStateTokens,\n} from \"../types\";\n\nexport function getControlStateTokens<Tokens>(\n  tokens: VisualStateTokens<ControlVisualState, Tokens>,\n  state: ControlState,\n): Tokens {\n  const { disabled = false, focused = false } = state;\n\n  if (disabled) return tokens.disabled;\n  return focused ? tokens.focused : tokens.default;\n}\n"],"mappings":"AAMO,SAAS,sBACd,QACA,OACQ;AACR,QAAM,EAAE,WAAW,OAAO,UAAU,MAAM,IAAI;AAE9C,MAAI,SAAU,QAAO,OAAO;AAC5B,SAAO,UAAU,OAAO,UAAU,OAAO;AAC3C;","names":[]}

package/dist/utils/datetime-picker-state.utils.d.mts

@@ -0,0 +1,6 @@
+import { DatetimePickerDayTokens, DatetimePickerDayState, DatetimePickerDayAppearanceTokens } from '../types/datetime-picker-tokens.types.mjs';
+import '../types/components.types.mjs';
+
+declare function getDatetimePickerDayStateTokens(tokens: DatetimePickerDayTokens["states"], state: DatetimePickerDayState): DatetimePickerDayAppearanceTokens;
+
+export { getDatetimePickerDayStateTokens };