@impulse-ui-native/theme 3.0.0 → 4.0.0

package/dist/types/components.types.d.mts

@@ -1,4 +1,38 @@
 type ComponentSize = "small" | "medium" | "large";
-type ComponentVariant = "filled" | "outlined" | "soft" | "ghost" | "plain";
+type VisualStateTokens<VisualState extends PropertyKey, Tokens> = Record<VisualState, Tokens>;
+type ControlVisualState = "default" | "focused" | "disabled";
+interface ControlState {
+    disabled?: boolean;
+    focused?: boolean;
+}
+type ActionVisualState = "default" | "loading" | "disabled";
+interface ActionState {
+    disabled?: boolean;
+    loading?: boolean;
+}
+type AvailabilityVisualState = "default" | "disabled";
+interface AvailabilityState {
+    disabled?: boolean;
+}
+type FieldVisualState = "default" | "error" | "disabled" | "disabledError";
+interface FieldState {
+    disabled?: boolean;
+    error?: boolean;
+}
+type SelectionVisualState = "unselected" | "selected" | "disabledUnselected" | "disabledSelected";
+interface SelectionState {
+    disabled?: boolean;
+    selected: boolean;
+}
+type SelectionItemVisualState = "default" | "selected";
+interface SelectionItemState {
+    selected: boolean;
+}
+type ActionVariant = "filled" | "outlined" | "soft" | "ghost";
+type DisplayVariant = "filled" | "outlined" | "soft";
+type FieldVariant = "filled" | "outlined";
+type SelectionVariant = "filled" | "outlined" | "soft";
+/** @deprecated Use the variant type for the relevant component family. */
+type ComponentVariant = ActionVariant;
 
-export type { ComponentSize, ComponentVariant };
+export type { ActionState, ActionVariant, ActionVisualState, AvailabilityState, AvailabilityVisualState, ComponentSize, ComponentVariant, ControlState, ControlVisualState, DisplayVariant, FieldState, FieldVariant, FieldVisualState, SelectionItemState, SelectionItemVisualState, SelectionState, SelectionVariant, SelectionVisualState, VisualStateTokens };

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

@@ -0,0 +1,57 @@
+import { FieldVariant, VisualStateTokens, FieldVisualState, ComponentSize } from './components.types.mjs';
+
+interface ControlAddonAppearanceTokens {
+    iconColor: string;
+}
+type ControlAddonVariantTokens = Record<FieldVariant, VisualStateTokens<FieldVisualState, ControlAddonAppearanceTokens>>;
+interface ControlAddonTokens {
+    marginHorizontal: number;
+    hitSlop: number;
+    variants: ControlAddonVariantTokens;
+}
+type ControlContainerSizeTokens = Record<ComponentSize, {
+    height: number;
+    paddingHorizontal: number;
+}>;
+interface ControlContainerAppearanceTokens {
+    backgroundColor: string;
+    borderColor: string;
+    opacity: number;
+}
+type ControlContainerVariantTokens = Record<FieldVariant, VisualStateTokens<FieldVisualState, ControlContainerAppearanceTokens>>;
+interface ControlContainerTokens {
+    borderWidth: number;
+    borderRadius: number;
+    sizes: ControlContainerSizeTokens;
+    variants: ControlContainerVariantTokens;
+}
+interface ControlErrorTokens {
+    marginTop: number;
+    color: string;
+    fontSize: number;
+}
+type ControlInputSizeTokens = Record<ComponentSize, {
+    fontSize: number;
+}>;
+interface ControlInputAppearanceTokens {
+    color: string;
+    placeholderColor: string;
+}
+type ControlInputVariantTokens = Record<FieldVariant, VisualStateTokens<FieldVisualState, ControlInputAppearanceTokens>>;
+interface ControlInputTokens {
+    flex: number;
+    fontFamily: string;
+    paddingHorizontal: number;
+    sizes: ControlInputSizeTokens;
+    variants: ControlInputVariantTokens;
+}
+interface ControlLabelAppearanceTokens {
+    color: string;
+}
+interface ControlLabelTokens {
+    marginBottom: number;
+    fontSize: number;
+    states: VisualStateTokens<FieldVisualState, ControlLabelAppearanceTokens>;
+}
+
+export type { ControlAddonAppearanceTokens, ControlAddonTokens, ControlAddonVariantTokens, ControlContainerAppearanceTokens, ControlContainerSizeTokens, ControlContainerTokens, ControlContainerVariantTokens, ControlErrorTokens, ControlInputAppearanceTokens, ControlInputSizeTokens, ControlInputTokens, ControlInputVariantTokens, ControlLabelAppearanceTokens, ControlLabelTokens };

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

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

package/dist/types/datetime-picker-tokens.types.d.mts

@@ -1,16 +1,23 @@
+import { VisualStateTokens } from './components.types.mjs';
+
+type DatetimePickerDayVisualState = "default" | "outsideMonth" | "range" | "selected";
+interface DatetimePickerDayState {
+    currentMonth?: boolean;
+    inRange?: boolean;
+    selected?: boolean;
+}
 interface DatetimePickerCalendarTokens {
     dayNamesMarginBottom: number;
     weeksGap: number;
 }
+interface DatetimePickerDayAppearanceTokens {
+    backgroundColor: string;
+    color: string;
+}
 interface DatetimePickerDayTokens {
     size: number;
     borderRadius: number;
-    color: string;
-    outsideMonthColor: string;
-    selectedBackgroundColor: string;
-    selectedColor: string;
-    rangeBackgroundColor: string;
-    rangeColor: string;
+    states: VisualStateTokens<DatetimePickerDayVisualState, DatetimePickerDayAppearanceTokens>;
 }
 interface DatetimePickerFlyoutActionsTokens {
     gap: number;
@@ -44,4 +51,4 @@ interface DatetimePickerTokens {
     visibleDateSelect: DatetimePickerVisibleDateSelectTokens;
 }
 
-export type { DatePickerFlyoutTokens, DatetimePickerCalendarTokens, DatetimePickerDayTokens, DatetimePickerFlyoutActionsTokens, DatetimePickerFlyoutTokens, DatetimePickerQuickDateOptionsTokens, DatetimePickerTokens, DatetimePickerVisibleDateSelectTokens, DatetimeRangePickerFlyoutTokens };
+export type { DatePickerFlyoutTokens, DatetimePickerCalendarTokens, DatetimePickerDayAppearanceTokens, DatetimePickerDayState, DatetimePickerDayTokens, DatetimePickerDayVisualState, DatetimePickerFlyoutActionsTokens, DatetimePickerFlyoutTokens, DatetimePickerQuickDateOptionsTokens, DatetimePickerTokens, DatetimePickerVisibleDateSelectTokens, DatetimeRangePickerFlyoutTokens };

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,28 @@ 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 { 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 { DividerTokens, DividerTone } from './divider-tokens.types.mjs';
-export { TimePickerColumnTokens, TimePickerColumnsTokens, TimePickerFlyoutTokens, TimePickerTokens } from './time-picker-token.types.mjs';
+export { TimePickerColumnAppearanceTokens, TimePickerColumnTokens, TimePickerColumnsTokens, TimePickerFlyoutTokens, TimePickerTokens } from './time-picker-token.types.mjs';
 export { FlyoutHandleTokens, FlyoutTitleTokens, FlyoutTokens } from './flyout-tokens.types.mjs';
 export { IconTokens } from './icon-tokens.types.mjs';
 export { PressableTokens } from './pressable-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 { SkeletonBoneTokens, SkeletonTextTokens, SkeletonTokens } from './skeleton-tokens.types.mjs';
-export { SliderSizeTokens, SliderTokens, SliderVariant, SliderVariantTokens } from './slider-tokens.types.mjs';
+export { SliderAppearanceTokens, SliderSizeTokens, SliderTokens, 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';
 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";

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 \"./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":[]}

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/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,35 +1,34 @@
-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, {
+interface SliderAppearanceTokens {
+    activeMarkColor: string;
     activeTrackColor: string;
+    focusRingBorderWidth: number;
+    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;
@@ -41,4 +40,4 @@ interface SliderTokens {
     variants: SliderVariantTokens;
 }
 
-export type { SliderSizeTokens, SliderTokens, SliderVariant, SliderVariantTokens };
+export type { SliderAppearanceTokens, SliderSizeTokens, SliderTokens, 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

@@ -5,7 +5,7 @@ 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';

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 };

package/dist/utils/datetime-picker-state.utils.js

@@ -0,0 +1,10 @@
+function getDatetimePickerDayStateTokens(tokens, state) {
+  const { currentMonth = false, inRange = false, selected = false } = state;
+  if (selected) return tokens.selected;
+  if (inRange) return tokens.range;
+  return currentMonth ? tokens.default : tokens.outsideMonth;
+}
+export {
+  getDatetimePickerDayStateTokens
+};
+//# sourceMappingURL=datetime-picker-state.utils.js.map

package/dist/utils/datetime-picker-state.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/datetime-picker-state.utils.ts"],"sourcesContent":["import type {\n  DatetimePickerDayAppearanceTokens,\n  DatetimePickerDayState,\n  DatetimePickerDayTokens,\n} from \"../types\";\n\nexport function getDatetimePickerDayStateTokens(\n  tokens: DatetimePickerDayTokens[\"states\"],\n  state: DatetimePickerDayState,\n): DatetimePickerDayAppearanceTokens {\n  const { currentMonth = false, inRange = false, selected = false } = state;\n\n  if (selected) return tokens.selected;\n  if (inRange) return tokens.range;\n  return currentMonth ? tokens.default : tokens.outsideMonth;\n}\n"],"mappings":"AAMO,SAAS,gCACd,QACA,OACmC;AACnC,QAAM,EAAE,eAAe,OAAO,UAAU,OAAO,WAAW,MAAM,IAAI;AAEpE,MAAI,SAAU,QAAO,OAAO;AAC5B,MAAI,QAAS,QAAO,OAAO;AAC3B,SAAO,eAAe,OAAO,UAAU,OAAO;AAChD;","names":[]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/field-state.utils.ts"],"sourcesContent":["import type { FieldState, FieldVisualState, VisualStateTokens } from \"../types\";\n\nexport function getFieldStateTokens<Tokens>(\n  tokens: VisualStateTokens<FieldVisualState, Tokens>,\n  state: FieldState,\n): Tokens {\n  const { disabled = false, error = false } = state;\n\n  if (disabled) return error ? tokens.disabledError : tokens.disabled;\n  return error ? tokens.error : tokens.default;\n}\n"],"mappings":"AAEO,SAAS,oBACd,QACA,OACQ;AACR,QAAM,EAAE,WAAW,OAAO,QAAQ,MAAM,IAAI;AAE5C,MAAI,SAAU,QAAO,QAAQ,OAAO,gBAAgB,OAAO;AAC3D,SAAO,QAAQ,OAAO,QAAQ,OAAO;AACvC;","names":[]}

package/dist/utils/index.d.mts

@@ -1,4 +1,13 @@
+export { getActionStateTokens } from './action-state.utils.mjs';
+export { getAvailabilityStateTokens } from './availability-state.utils.mjs';
+export { getControlStateTokens } from './control-state.utils.mjs';
+export { getDatetimePickerDayStateTokens } from './datetime-picker-state.utils.mjs';
+export { getFieldStateTokens } from './field-state.utils.mjs';
+export { getSelectionItemStateTokens } from './selection-item-state.utils.mjs';
+export { getSelectionStateTokens } from './selection-state.utils.mjs';
 export { createStyleKey, extractStyleProps, getShadowStyle } from './style.utils.mjs';
+import '../types/components.types.mjs';
+import '../types/datetime-picker-tokens.types.mjs';
 import 'react-native';
 import '../types/shadow.types.mjs';
 import '../types/style.types.mjs';
@@ -11,16 +20,14 @@ import '../types/typography.types.mjs';
 import '../types/tokens.types.mjs';
 import '../types/theme-provider.types.mjs';
 import '../types/badge-tokens.types.mjs';
-import '../types/components.types.mjs';
 import '../types/checkbox-tokens.types.mjs';
 import '../types/radio-tokens.types.mjs';
 import '../types/accordion-tokens.types.mjs';
 import '../types/avatar-tokens.types.mjs';
 import '../types/buttons-tokens.types.mjs';
 import '../types/card-tokens.types.mjs';
-import '../types/control-tokes.types.mjs';
+import '../types/control-tokens.types.mjs';
 import '../types/data-state-tokens.types.mjs';
-import '../types/datetime-picker-tokens.types.mjs';
 import '../types/divider-tokens.types.mjs';
 import '../types/flyout-tokens.types.mjs';
 import '../types/icon-tokens.types.mjs';

package/dist/utils/index.js

@@ -1,2 +1,9 @@
+export * from "./action-state.utils";
+export * from "./availability-state.utils";
+export * from "./control-state.utils";
+export * from "./datetime-picker-state.utils";
+export * from "./field-state.utils";
+export * from "./selection-item-state.utils";
+export * from "./selection-state.utils";
 export * from "./style.utils";
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["export * from \"./style.utils\";\r\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["export * from \"./action-state.utils\";\nexport * from \"./availability-state.utils\";\nexport * from \"./control-state.utils\";\nexport * from \"./datetime-picker-state.utils\";\nexport * from \"./field-state.utils\";\nexport * from \"./selection-item-state.utils\";\nexport * from \"./selection-state.utils\";\nexport * from \"./style.utils\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/utils/selection-item-state.utils.d.mts

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