@juspay/blend-design-system 0.0.36-beta.0 → 0.0.36-beta.1

package/README.md

@@ -134,9 +134,9 @@ function App() {
 
 ## 📖 Documentation
 
-- **[Component Documentation](https://juspay.design/)** - Complete component API and examples
-- **[Storybook](https://storybook.juspay.design/)** - Interactive component playground
-- **[Design Guidelines](https://juspay.design/guidelines)** - Design principles and usage guidelines
+- **[Component Documentation](https://blend.juspay.design/)** - Complete component API and examples
+- **[Storybook](https://blend.juspay.design/storybook/)** - Interactive component playground
+- **[Design Guidelines](https://blend.juspay.design/guidelines)** - Design principles and usage guidelines
 
 ## 🛠️ Development
 
@@ -167,10 +167,10 @@ MIT © [Juspay Technologies](https://juspay.in)
 
 ## 🔗 Links
 
-- **Homepage**: [https://juspay.design/](https://juspay.design/)
+- **Homepage**: [https://blend.juspay.design/](https://blend.juspay.design/)
 - **Repository**: [https://github.com/juspay/blend-design-system](https://github.com/juspay/blend-design-system)
 - **Issues**: [https://github.com/juspay/blend-design-system/issues](https://github.com/juspay/blend-design-system/issues)
-- **Storybook**: [https://storybook.juspay.design/](https://storybook.juspay.design/)
+- **Storybook**: [https://blend.juspay.design/storybook/](https://blend.juspay.design/storybook/)
 
 ---
 

package/dist/components/ChatInput/ChatInput.d.ts

@@ -4,6 +4,7 @@ export declare const getDocIcon: (fileType: AttachedFile["type"]) => React.React
 declare const ChatInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
     value?: string;
     slot1?: React.ReactNode;
+    slot2?: React.ReactNode;
     onChange?: (value: string) => void;
     onSend?: (message: string, files: AttachedFile[]) => void;
     onAttachFiles?: (files: File[]) => void;

package/dist/components/ChatInput/MobileChatInput.d.ts

@@ -3,6 +3,7 @@ type MobileChatInputProps = {
     value: string;
     onChange?: (value: string) => void;
     slot1?: React.ReactNode;
+    slot2?: React.ReactNode;
     placeholder?: string;
     attachedFiles?: AttachedFile[];
     handleAttachClick?: () => void;

package/dist/components/ChatInput/chatInput.tokens.d.ts

@@ -70,10 +70,7 @@ export type ChatInputTokensType = Readonly<{
             focus: CSSObject['border'];
         };
         borderRadius: CSSObject['borderRadius'];
-        paddingTop: CSSObject['paddingTop'];
-        paddingRight: CSSObject['paddingRight'];
-        paddingBottom: CSSObject['paddingBottom'];
-        paddingLeft: CSSObject['paddingLeft'];
+        padding: CSSObject['padding'];
         gap: CSSObject['gap'];
         minHeight: CSSObject['minHeight'];
         transition: CSSObject['transition'];
@@ -93,8 +90,10 @@ export type ChatInputTokensType = Readonly<{
         color: CSSObject['color'];
         fontSize: CSSObject['fontSize'];
         lineHeight: CSSObject['lineHeight'];
-        paddingX: CSSObject['padding'];
-        paddingY: CSSObject['padding'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingRight: CSSObject['paddingRight'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
         border: CSSObject['border'];
         borderRadius: CSSObject['borderRadius'];
         placeholder: {
@@ -112,6 +111,7 @@ export type ChatInputTokensType = Readonly<{
         paddingY: CSSObject['padding'];
         maxHeight: CSSObject['maxHeight'];
         overflowY: CSSObject['overflowY'];
+        margin: CSSObject['margin'];
     };
     bottomActions: {
         paddingX: CSSObject['padding'];
@@ -158,6 +158,8 @@ export type ChatInputTokensType = Readonly<{
         scrollContainer: {
             overflowY: CSSObject['overflowY'];
             maxHeightOffset: number;
+            backgroundColor: CSSObject['backgroundColor'];
+            scrollbarColor: string;
         };
         item: {
             backgroundColor: {

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

@@ -15,6 +15,7 @@ export type TopQuery = {
 export type ChatInputProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'value'> & {
     value?: string;
     slot1?: ReactNode;
+    slot2?: ReactNode;
     onChange?: (value: string) => void;
     onSend?: (message: string, files: AttachedFile[]) => void;
     onAttachFiles?: (files: File[]) => void;

package/dist/components/DataTable/TableBody/types.d.ts

@@ -16,6 +16,8 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     enableRowSelection?: boolean;
     rowActions?: RowActionsConfig<T>;
     columnFreeze?: number;
+    /** Measured pixel widths of frozen columns (from header ResizeObserver). Used for sticky left offset. */
+    measuredFrozenWidths?: number[];
     mobileConfig?: MobileDataTableConfig;
     mobileOverflowColumns?: ColumnDefinition<T>[];
     onMobileOverflowClick?: (row: T) => void;

package/dist/components/DataTable/TableHeader/types.d.ts

@@ -55,4 +55,8 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     }>;
     onHeaderChange?: (field: keyof T, newHeader: string) => void;
     getColumnWidth: (column: ColumnDefinition<T>, index: number) => React.CSSProperties;
+    /** Measured pixel widths of frozen columns (from ResizeObserver). Used for sticky left offset. */
+    measuredFrozenWidths?: number[];
+    /** Called when frozen column header cells are measured so left offsets can use content-based widths. */
+    onFrozenWidthsMeasured?: (widths: number[]) => void;
 };

package/dist/components/DataTable/TableHeader/utils.d.ts

@@ -17,7 +17,8 @@ export declare const filterItemsBySearch: (items: Array<{
     value: string;
 }>;
 export declare const getPopoverAlignment: (index: number, totalColumns: number) => "start" | "center" | "end";
-export declare const getFrozenColumnStyles: (index: number, columnFreeze: number, enableRowExpansion: boolean, enableRowSelection: boolean, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, index: number) => React.CSSProperties, backgroundColor: string) => {
+export declare function getFrozenLeftOffset(index: number, _columnFreeze: number, enableRowExpansion: boolean, enableRowSelection: boolean, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, i: number) => React.CSSProperties, measuredFrozenWidths?: number[]): number;
+export declare const getFrozenColumnStyles: (index: number, columnFreeze: number, enableRowExpansion: boolean, enableRowSelection: boolean, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, index: number) => React.CSSProperties, backgroundColor: string, measuredFrozenWidths?: number[]) => {
     padding: string;
 } | {
     borderRight?: string | undefined;
@@ -26,8 +27,9 @@ export declare const getFrozenColumnStyles: (index: number, columnFreeze: number
     zIndex: number;
     backgroundColor: string;
     padding: string;
-    width: string;
     minWidth: string;
     maxWidth: string;
+    width: string;
     boxSizing: "border-box";
+    overflow: string;
 };

package/dist/components/DateRangePicker/CalendarGrid.d.ts

@@ -14,6 +14,7 @@ type CalendarGridProps = {
     resetScrollPosition?: number;
     timezone?: string;
     isSingleDatePicker?: boolean;
+    maxYearOffset?: number;
 };
 declare const CalendarGrid: import('react').ForwardRefExoticComponent<CalendarGridProps & import('react').RefAttributes<HTMLDivElement>>;
 export default CalendarGrid;

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

@@ -282,6 +282,7 @@ export type DateRangePickerProps = {
      * @see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
      */
     timezone?: string;
+    maxYearOffset?: number;
 };
 export type PresetItemProps = {
     preset: DateRangePreset;
@@ -320,6 +321,7 @@ export type DatePickerComponentProps = {
     isDisabled?: boolean;
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
+    maxYearOffset?: number;
 };
 export type MobileDrawerPresetsProps = {
     drawerOpen: boolean;
@@ -346,4 +348,5 @@ export type MobileDrawerPresetsProps = {
     applyDisabledMessage?: string;
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
+    maxYearOffset?: number;
 };

package/dist/components/DateRangePicker/utils.d.ts

@@ -537,7 +537,7 @@ export declare const calculateDayCellProps: (date: Date, selectedRange: DateRang
  * @param endTime Current end time
  * @returns Object with picker data for all columns
  */
-export declare const generatePickerData: (tabType: "start" | "end", selectedRange?: DateRange, startTime?: string, endTime?: string) => {
+export declare const generatePickerData: (tabType: "start" | "end", selectedRange?: DateRange, startTime?: string, endTime?: string, maxYearOffset?: number) => {
     years: {
         items: number[];
         selectedIndex: number;
@@ -568,7 +568,7 @@ export declare const generatePickerData: (tabType: "start" | "end", selectedRang
  * @param setEndDate End date setter function
  * @returns Selection handler function
  */
-export declare const createSelectionHandler: (tabType: "start" | "end", type: "year" | "month" | "date" | "time", dateFormat: string, handleStartTimeChange: (time: string) => void, handleEndTimeChange: (time: string) => void, setSelectedRange: (range: DateRange) => void, setStartDate: (date: string) => void, setEndDate: (date: string) => void, selectedRange?: DateRange) => (index: number) => void;
+export declare const createSelectionHandler: (tabType: "start" | "end", type: "year" | "month" | "date" | "time", dateFormat: string, handleStartTimeChange: (time: string) => void, handleEndTimeChange: (time: string) => void, setSelectedRange: (range: DateRange) => void, setStartDate: (date: string) => void, setEndDate: (date: string) => void, selectedRange?: DateRange, maxYearOffset?: number) => (index: number) => void;
 /**
  * Gets preset display label with custom mappings
  * @param preset The preset to get label for

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

@@ -141,7 +141,7 @@ export type MultiSelectMenuProps = {
     searchPlaceholder?: string;
     enableSelectAll?: boolean;
     selectAllText?: string;
-    onSelectAll?: (selectAll: boolean) => void;
+    onSelectAll?: (selectAll: boolean, filteredItems: MultiSelectMenuGroupType[]) => void;
     maxSelections?: number;
     alignment?: MultiSelectMenuAlignment;
     side?: MultiSelectMenuSide;

package/dist/components/SelectorV2/CheckboxV2/CheckboxV2.d.ts

@@ -0,0 +1,19 @@
+import { SelectorV2Size } from '../../SelectorV2/selectorV2.types';
+declare const CheckboxV2: import('react').ForwardRefExoticComponent<{
+    checked?: boolean | "indeterminate";
+    onCheckedChange?: (checked: boolean | "indeterminate") => void;
+    required?: boolean;
+    error?: boolean;
+    label?: string;
+    subLabel?: string;
+    size?: SelectorV2Size;
+    slot?: {
+        slot: import('react').ReactElement;
+        maxHeight?: import('styled-components').CSSObject["maxHeight"];
+    };
+    maxLength?: {
+        label?: number;
+        subLabel?: number;
+    };
+} & Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "style" | "className" | "slot" | "onChange"> & import('react').RefAttributes<HTMLButtonElement>>;
+export default CheckboxV2;

package/dist/components/SelectorV2/CheckboxV2/StyledCheckboxV2.d.ts

@@ -0,0 +1,11 @@
+import { SelectorV2Size } from '../../SelectorV2/selectorV2.types';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+export declare const StyledCheckboxRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<CheckboxPrimitive.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>, {
+    size: SelectorV2Size;
+    $isDisabled: boolean;
+    $checked: boolean | "indeterminate";
+    $error?: boolean;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<CheckboxPrimitive.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledCheckboxIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<CheckboxPrimitive.CheckboxIndicatorProps & import('react').RefAttributes<HTMLSpanElement>, {
+    size: SelectorV2Size;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<CheckboxPrimitive.CheckboxIndicatorProps & import('react').RefAttributes<HTMLSpanElement>>, keyof import('react').Component<any, {}, any>>;

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.animations.d.ts

@@ -0,0 +1,2 @@
+export declare const checkboxRootAnimations: import('styled-components').RuleSet<object>;
+export declare const checkboxIndicatorAnimations: import('styled-components').RuleSet<object>;

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens';
+export declare const getCheckboxV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveCheckboxV2Tokens;

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveCheckboxV2Tokens } from './checkboxV2.tokens';
+export declare const getCheckboxV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveCheckboxV2Tokens;

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.tokens.d.ts

@@ -0,0 +1,94 @@
+import { Theme } from '../../../context/theme.enum';
+import { CSSObject } from 'styled-components';
+import { CheckboxV2CheckedState } from './checkboxV2.types';
+import { SelectorV2Size, SelectorV2InteractionState } from '../../SelectorV2/selectorV2.types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+export type CheckboxV2TokensType = {
+    gap: CSSObject['gap'];
+    checkbox: {
+        height: {
+            [key in SelectorV2Size]: CSSObject['height'];
+        };
+        width: {
+            [key in SelectorV2Size]: CSSObject['width'];
+        };
+        opacity: CSSObject['opacity'];
+        backgroundColor: {
+            [key in CheckboxV2CheckedState]?: {
+                [key in SelectorV2InteractionState]?: CSSObject['backgroundColor'];
+            };
+        };
+        borderRadius: {
+            [key in SelectorV2Size]: CSSObject['borderRadius'];
+        };
+        border: {
+            [key in CheckboxV2CheckedState]?: {
+                [key in SelectorV2InteractionState]?: CSSObject['border'];
+            };
+        };
+        outline: CSSObject['outline'];
+        outlineOffset: CSSObject['outlineOffset'];
+        boxShadow: CSSObject['boxShadow'];
+        icon: {
+            color: {
+                [key in CheckboxV2CheckedState]?: {
+                    [key in Extract<SelectorV2InteractionState, 'default' | 'disabled'>]?: CSSObject['color'];
+                };
+            };
+            width: {
+                [key in SelectorV2Size]: CSSObject['width'];
+            };
+            height: {
+                [key in SelectorV2Size]: CSSObject['height'];
+            };
+            strokeWidth: {
+                [key in SelectorV2Size]: CSSObject['strokeWidth'];
+            };
+        };
+    };
+    content: {
+        gap: CSSObject['gap'];
+        label: {
+            gap: CSSObject['gap'];
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SelectorV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
+            };
+            slot: {
+                maxHeight: {
+                    [key in SelectorV2Size]: CSSObject['maxHeight'];
+                };
+            };
+        };
+        subLabel: {
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SelectorV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
+            };
+        };
+        required: {
+            color: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveCheckboxV2Tokens = {
+    [key in keyof BreakpointType]: CheckboxV2TokensType;
+};
+export declare const getCheckboxV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveCheckboxV2Tokens;

package/dist/components/SelectorV2/CheckboxV2/checkboxV2.types.d.ts

@@ -0,0 +1,64 @@
+import { ButtonHTMLAttributes, ReactElement } from 'react';
+import { CheckboxV2TokensType } from './checkboxV2.tokens';
+import { CSSObject } from 'styled-components';
+import { SelectorV2Size } from '../../SelectorV2/selectorV2.types';
+export declare enum CheckboxV2CheckedState {
+    CHECKED = "checked",
+    UNCHECKED = "unchecked",
+    INDETERMINATE = "indeterminate"
+}
+export type CheckboxV2Props = {
+    checked?: boolean | 'indeterminate';
+    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+    required?: boolean;
+    error?: boolean;
+    label?: string;
+    subLabel?: string;
+    size?: SelectorV2Size;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject['maxHeight'];
+    };
+    maxLength?: {
+        label?: number;
+        subLabel?: number;
+    };
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'slot' | 'onChange'>;
+export type CheckboxV2RootProps = {
+    tokens: CheckboxV2TokensType;
+    uniqueId: string;
+    name: string;
+    ref: React.RefObject<HTMLButtonElement>;
+    checked: boolean | 'indeterminate';
+    onCheckedChange: (checked: boolean | 'indeterminate') => void;
+    disabled: boolean;
+    required: boolean;
+    size: SelectorV2Size;
+    error: boolean;
+    shouldShake: boolean;
+    ariaAttributes: {
+        'aria-required': boolean;
+        'aria-invalid': boolean;
+        'aria-describedby': string;
+    };
+    restProps: {
+        [key: string]: unknown;
+    };
+};
+export type CheckboxV2ContentProps = {
+    uniqueId: string;
+    disabled: boolean;
+    error: boolean;
+    required: boolean;
+    size: SelectorV2Size;
+    label?: string;
+    subLabel?: string;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject['maxHeight'];
+    };
+    tokens: CheckboxV2TokensType;
+    labelMaxLength?: number;
+    subLabelMaxLength?: number;
+    subLabelId?: string;
+};

package/dist/components/SelectorV2/CheckboxV2/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CheckboxV2 } from './CheckboxV2';
+export * from './checkboxV2.types';
+export * from './checkboxV2.tokens';

package/dist/components/SelectorV2/CheckboxV2/utils.d.ts

@@ -0,0 +1,67 @@
+import { KeyboardEvent } from 'react';
+import { CheckboxV2CheckedState } from './checkboxV2.types';
+import { SelectorV2Size } from '../../SelectorV2/selectorV2.types';
+import { CheckboxV2TokensType } from './checkboxV2.tokens';
+export declare const getCheckboxDataState: (checked: boolean | "indeterminate") => string;
+/**
+ * Gets the icon color based on checkbox state
+ */
+export declare const getCheckboxIconColor: (tokens: CheckboxV2TokensType, currentChecked: boolean | "indeterminate", disabled: boolean) => string;
+/**
+ * Gets the text color based on checkbox state
+ */
+export declare const getCheckboxTextColor: (tokens: CheckboxV2TokensType, disabled: boolean, error: boolean) => string;
+/**
+ * Gets the subtext color based on checkbox state
+ */
+export declare const getCheckboxSubtextColor: (tokens: CheckboxV2TokensType, disabled: boolean, error: boolean) => string;
+/**
+ * Gets the text properties for checkbox labels
+ */
+export declare const getCheckboxTextProps: (tokens: CheckboxV2TokensType, size: SelectorV2Size, disabled: boolean, error: boolean) => {
+    fontSize: string;
+    fontWeight: string;
+    color: string;
+};
+/**
+ * Gets the subtext properties for checkbox
+ */
+export declare const getCheckboxSubtextProps: (tokens: CheckboxV2TokensType, size: SelectorV2Size, disabled: boolean, error: boolean) => {
+    fontSize: string;
+    color: string;
+};
+/**
+ * Gets label styles for checkbox components
+ */
+export declare const getCheckboxLabelStyles: (disabled: boolean) => {
+    cursor: "not-allowed" | "pointer";
+    display: "flex";
+    alignItems: "center";
+    margin: number;
+    padding: number;
+};
+/**
+ * Gets accessibility attributes for checkbox
+ */
+export declare const getAccessibilityAttributes: (uniqueId: string, isIndeterminate: boolean) => {
+    role: string;
+    'aria-checked': string | undefined;
+    'aria-labelledby': string;
+    'aria-describedby': string;
+};
+/**
+ * Generates subtext ID for aria-describedby connection
+ * WCAG 4.1.2: aria-describedby must connect to subtext/error messages
+ */
+export declare const getSubtextId: (uniqueId: string, hasSubtext: boolean) => string | undefined;
+/**
+ * Merges custom aria-describedby with subtext ID
+ * WCAG 4.1.2: Supports multiple IDs space-separated
+ */
+export declare const mergeAriaDescribedBy: (subtextId: string | undefined, customAriaDescribedBy?: string) => string | undefined;
+/**
+ * Handles keyboard interaction for checkbox root.
+ * - On Enter: toggles checked state (indeterminate -> true, otherwise toggles boolean)
+ */
+export declare const handleCheckboxKeyDown: (e: KeyboardEvent<HTMLButtonElement>, checked: boolean | "indeterminate" | undefined, disabled: boolean, onCheckedChange?: (checked: boolean | "indeterminate") => void) => void;
+export declare const getCheckboxState: (checked: boolean | "indeterminate") => CheckboxV2CheckedState;

package/dist/components/{SwitchV2 → SelectorV2/SwitchV2}/SwitchV2.d.ts

@@ -1,12 +1,12 @@
-import { SwitchV2Size } from './switchV2.types';
+import { SelectorV2Size } from '../selectorV2.types';
 declare const SwitchV2: import('react').ForwardRefExoticComponent<{
     checked?: boolean;
-    onChange?: (checked: boolean) => void;
+    onCheckedChange?: (checked: boolean) => void;
     required?: boolean;
     error?: boolean;
     label?: string;
     subLabel?: string;
-    size?: SwitchV2Size;
+    size?: SelectorV2Size;
     slot?: {
         slot: import('react').ReactElement;
         maxHeight?: import('styled-components').CSSObject["maxHeight"];

package/dist/components/{SwitchV2 → SelectorV2/SwitchV2}/switchV2.dark.tokens.d.ts

@@ -1,3 +1,3 @@
-import { FoundationTokenType } from '../../tokens/theme.token';
+import { FoundationTokenType } from '../../../tokens/theme.token';
 import { ResponsiveSwitchV2Tokens } from './switchV2.tokens';
 export declare const getSwitchV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveSwitchV2Tokens;

package/dist/components/{SwitchV2 → SelectorV2/SwitchV2}/switchV2.light.tokens.d.ts

@@ -1,3 +1,3 @@
-import { FoundationTokenType } from '../../tokens/theme.token';
+import { FoundationTokenType } from '../../../tokens/theme.token';
 import { ResponsiveSwitchV2Tokens } from './switchV2.tokens';
 export declare const getSwitchV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveSwitchV2Tokens;

package/dist/components/{SwitchV2 → SelectorV2/SwitchV2}/switchV2.tokens.d.ts

@@ -1,16 +1,17 @@
-import { Theme } from '../../context/theme.enum';
+import { Theme } from '../../../context/theme.enum';
 import { CSSObject } from 'styled-components';
-import { SwitchV2Size, SwitchV2State, SwitchV2Variant } from './switchV2.types';
-import { BreakpointType } from '../../breakpoints/breakPoints';
-import { FoundationTokenType } from '../../tokens/theme.token';
+import { SwitchV2State, SwitchV2Variant } from './switchV2.types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { SelectorV2Size } from '../selectorV2.types';
 export type SwitchV2TokensType = {
     gap: CSSObject['gap'];
     switch: {
         height: {
-            [key in SwitchV2Size]: CSSObject['height'];
+            [key in SelectorV2Size]: CSSObject['height'];
         };
         width: {
-            [key in SwitchV2Size]: CSSObject['width'];
+            [key in SelectorV2Size]: CSSObject['width'];
         };
         backgroundColor: {
             [key in SwitchV2Variant]: {
@@ -21,10 +22,10 @@ export type SwitchV2TokensType = {
             backgroundColor: CSSObject['backgroundColor'];
             border: CSSObject['border'];
             width: {
-                [key in SwitchV2Size]: CSSObject['width'];
+                [key in SelectorV2Size]: CSSObject['width'];
             };
             height: {
-                [key in SwitchV2Size]: CSSObject['height'];
+                [key in SelectorV2Size]: CSSObject['height'];
             };
             outline: CSSObject['outline'];
         };
@@ -37,17 +38,17 @@ export type SwitchV2TokensType = {
                 [key in SwitchV2State]: CSSObject['color'];
             };
             fontSize: {
-                [key in SwitchV2Size]: CSSObject['fontSize'];
+                [key in SelectorV2Size]: CSSObject['fontSize'];
             };
             fontWeight: {
-                [key in SwitchV2Size]: CSSObject['fontWeight'];
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
             };
             lineHeight: {
-                [key in SwitchV2Size]: CSSObject['lineHeight'];
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
             };
             slot: {
                 maxHeight: {
-                    [key in SwitchV2Size]: CSSObject['maxHeight'];
+                    [key in SelectorV2Size]: CSSObject['maxHeight'];
                 };
             };
         };
@@ -56,13 +57,13 @@ export type SwitchV2TokensType = {
                 [key in SwitchV2State]: CSSObject['color'];
             };
             fontSize: {
-                [key in SwitchV2Size]: CSSObject['fontSize'];
+                [key in SelectorV2Size]: CSSObject['fontSize'];
             };
             fontWeight: {
-                [key in SwitchV2Size]: CSSObject['fontWeight'];
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
             };
             lineHeight: {
-                [key in SwitchV2Size]: CSSObject['lineHeight'];
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
             };
         };
         required: {

package/dist/components/{SwitchV2 → SelectorV2/SwitchV2}/switchV2.types.d.ts

@@ -1,17 +1,14 @@
 import { ButtonHTMLAttributes, ReactElement } from 'react';
 import { SwitchV2TokensType } from './switchV2.tokens';
 import { CSSObject } from 'styled-components';
-export declare enum SwitchV2Size {
-    SM = "sm",
-    MD = "md"
-}
+import { SelectorV2Size } from '../selectorV2.types';
 export type SwitchV2State = 'default' | 'hover' | 'disabled' | 'error';
 export type SwitchV2Variant = 'checked' | 'unchecked';
 export type SwitchV2ButtonProps = {
     id: string;
     checked?: boolean;
     disabled: boolean;
-    size: SwitchV2Size;
+    size: SelectorV2Size;
     tokens: SwitchV2TokensType;
     onToggle: () => void;
     buttonProps?: Record<string, unknown>;
@@ -22,7 +19,7 @@ export type SwitchV2ContentProps = {
     disabled: boolean;
     error: boolean;
     required: boolean;
-    size: SwitchV2Size;
+    size: SelectorV2Size;
     label?: string;
     subLabel?: string;
     slot?: {
@@ -36,12 +33,12 @@ export type SwitchV2ContentProps = {
 };
 export type SwitchV2Props = {
     checked?: boolean;
-    onChange?: (checked: boolean) => void;
+    onCheckedChange?: (checked: boolean) => void;
     required?: boolean;
     error?: boolean;
     label?: string;
     subLabel?: string;
-    size?: SwitchV2Size;
+    size?: SelectorV2Size;
     slot?: {
         slot: ReactElement;
         maxHeight?: CSSObject['maxHeight'];

package/dist/components/SelectorV2/selectorV2.types.d.ts

@@ -0,0 +1,12 @@
+export declare enum SelectorV2Size {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare enum SelectorV2InteractionState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    FOCUS = "focus",
+    ERROR = "error",
+    DISABLED = "disabled"
+}