@juspay/blend-design-system 0.0.32 → 0.0.33

package/dist/components/Accordion/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Accordion } from './Accordion';
 export { default as AccordionItem } from './AccordionItem';
+export * from './accordion.tokens';
 export * from './types';

package/dist/components/Alert/alert.tokens.d.ts

@@ -18,7 +18,9 @@ import { BreakpointType } from '../../breakpoints/breakPoints';
  * - Background uses an additional style dimension; border/button are variant-only
  */
 export type AlertTokenType = {
+    width: CSSObject['width'];
     maxWidth: CSSObject['maxWidth'];
+    minWidth: CSSObject['minWidth'];
     gap: CSSObject['gap'];
     padding: CSSObject['padding'];
     borderRadius: CSSObject['borderRadius'];

package/dist/components/Alert/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Alert } from './Alert';
+export * from './alert.tokens';
 export * from './types';

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

@@ -30,4 +30,7 @@ export type AlertProps = {
     onClose?: () => void;
     icon?: ReactNode;
     actionPlacement?: AlertActionPlacement;
+    maxWidth?: string;
+    minWidth?: string;
+    width?: string;
 };

package/dist/components/Avatar/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Avatar } from './Avatar';
+export * from './avatar.tokens';
 export * from './types';

package/dist/components/AvatarGroup/index.d.ts

@@ -1,2 +1,3 @@
 export { default as AvatarGroup } from './AvatarGroup';
+export * from './avatarGroup.tokens';
 export * from './types';

package/dist/components/Breadcrumb/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Breadcrumb } from './Breadcrumb';
+export * from './breadcrumb.tokens';
 export * from './types';

package/dist/components/Button/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Button } from './Button';
+export * from './button.tokens';
 export * from './types';

package/dist/components/ButtonV2/ButtonGroupV2/ButtonGroupV2.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ButtonGroupV2Props } from './buttonGroupV2.types';
+declare const ButtonGroupV2: React.ForwardRefExoticComponent<ButtonGroupV2Props & React.RefAttributes<HTMLDivElement>>;
+export default ButtonGroupV2;

package/dist/components/ButtonV2/ButtonGroupV2/buttonGroupV2.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ButtonV2Props } from '../buttonV2.types';
+import { ButtonProps } from '../../Button/types';
+export type ButtonGroupV2ChildProps = ButtonV2Props | ButtonProps;
+export type ButtonGroupV2Props = {
+    stacked?: boolean;
+    gap?: string | number;
+    children: ReactElement<ButtonGroupV2ChildProps> | ReactElement<ButtonGroupV2ChildProps>[];
+};
+export type ButtonGroupPosition = 'left' | 'center' | 'right';

package/dist/components/ButtonV2/ButtonGroupV2/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ButtonGroupV2 } from './ButtonGroupV2';
+export type { ButtonGroupV2Props, ButtonGroupPosition, } from './buttonGroupV2.types';
+export * from './buttonGroupV2.types';

package/dist/components/ButtonV2/ButtonGroupV2/utils.d.ts

@@ -0,0 +1,3 @@
+import { ButtonGroupPosition } from './buttonGroupV2.types';
+export declare function getButtonGroupPosition(index: number, totalCount: number): ButtonGroupPosition | undefined;
+export declare function getButtonGroupGap(stacked: boolean, providedGap?: string | number): string | number;

package/dist/components/ButtonV2/ButtonV2.d.ts

@@ -0,0 +1,24 @@
+import { ButtonV2Size, ButtonV2State, ButtonV2SubType, ButtonV2Type } from './buttonV2.types';
+import { ButtonV2TokensType } from './buttonV2.tokens';
+type RenderButtonContentProps = {
+    isLoading: boolean;
+    isSkeleton: boolean;
+    disabled?: boolean;
+    state: ButtonV2State;
+    buttonType: ButtonV2Type;
+    subType: ButtonV2SubType;
+    size: ButtonV2Size;
+    text?: string;
+    leftSlot?: {
+        slot: React.ReactNode;
+        maxHeight?: string | number;
+    };
+    rightSlot?: {
+        slot: React.ReactNode;
+        maxHeight?: string | number;
+    };
+    tokens: ButtonV2TokensType;
+};
+export declare function renderButtonContent({ isLoading, isSkeleton, disabled, state, buttonType, subType, size, text, leftSlot, rightSlot, tokens, }: RenderButtonContentProps): import("react/jsx-runtime").JSX.Element;
+declare const ButtonV2: import('react').ForwardRefExoticComponent<import('./buttonV2.types').ButtonBaseProps & Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "style" | "className"> & import('react').RefAttributes<HTMLButtonElement>>;
+export default ButtonV2;

package/dist/components/ButtonV2/IconButton.d.ts

@@ -0,0 +1,7 @@
+import { default as ButtonV2 } from './ButtonV2';
+export type IconButtonProps = Omit<React.ComponentProps<typeof ButtonV2>, 'text' | 'leftSlot' | 'rightSlot' | 'subType'> & {
+    icon: React.ReactNode;
+    'aria-label': string;
+};
+declare const IconButton: import('react').ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/dist/components/ButtonV2/LinkButton.d.ts

@@ -0,0 +1,7 @@
+declare const LinkButton: import('react').ForwardRefExoticComponent<import('./buttonV2.types').ButtonBaseProps & {
+    href: string;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
+} & Omit<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, "style" | "className" | "rel" | "children" | "dangerouslySetInnerHTML" | "target" | "href"> & import('react').RefAttributes<HTMLAnchorElement>>;
+export default LinkButton;

package/dist/components/ButtonV2/VisuallyHidden.d.ts

@@ -0,0 +1 @@
+export declare const VisuallyHidden: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/components/ButtonV2/buttonV2.dark.tokens.d.ts

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

package/dist/components/ButtonV2/buttonV2.light.tokens.d.ts

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

package/dist/components/ButtonV2/buttonV2.tokens.d.ts

@@ -0,0 +1,67 @@
+import { CSSObject } from 'styled-components';
+import { ButtonV2Size, ButtonV2State, ButtonV2SubType, ButtonV2Type, PaddingDirection } from './buttonV2.types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+export type ButtonV2TokensType = Readonly<{
+    gap: CSSObject['gap'];
+    backgroundColor: {
+        [key in ButtonV2Type]: {
+            [key in ButtonV2SubType]: {
+                [key in ButtonV2State]: CSSObject['background'];
+            };
+        };
+    };
+    borderRadius: {
+        [key in ButtonV2Size]: {
+            [key in ButtonV2Type]: {
+                [key in ButtonV2SubType]: CSSObject['borderRadius'];
+            };
+        };
+    };
+    padding: {
+        [key in PaddingDirection]: {
+            [key in ButtonV2Size]: {
+                [key in ButtonV2Type]: {
+                    [key in ButtonV2SubType]: CSSObject['padding'];
+                };
+            };
+        };
+    };
+    border: {
+        [key in ButtonV2Type]: {
+            [key in ButtonV2SubType]: {
+                [key in ButtonV2State]: CSSObject['border'];
+            };
+        };
+    };
+    shadow: {
+        [key in ButtonV2Type]: {
+            [key in ButtonV2SubType]: {
+                [key in ButtonV2State]: CSSObject['boxShadow'];
+            };
+        };
+    };
+    text: {
+        color: {
+            [key in ButtonV2Type]: {
+                [key in ButtonV2SubType]: {
+                    [key in ButtonV2State]: CSSObject['color'];
+                };
+            };
+        };
+        fontSize: {
+            [key in ButtonV2Size]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in ButtonV2Size]: CSSObject['fontWeight'];
+        };
+        lineHeight: {
+            [key in ButtonV2Size]: CSSObject['lineHeight'];
+        };
+    };
+}>;
+export type ResponsiveButtonV2Tokens = {
+    [key in keyof BreakpointType]: ButtonV2TokensType;
+};
+export declare const getButtonV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveButtonV2Tokens;

package/dist/components/ButtonV2/buttonV2.types.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+export declare enum ButtonV2Type {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    DANGER = "danger",
+    SUCCESS = "success"
+}
+export declare enum ButtonV2Size {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare enum ButtonV2SubType {
+    DEFAULT = "default",
+    ICON_ONLY = "iconOnly",
+    INLINE = "inline"
+}
+export declare enum ButtonV2State {
+    DEFAULT = "default",
+    HOVER = "hover",
+    ACTIVE = "active",
+    DISABLED = "disabled"
+}
+export declare enum PaddingDirection {
+    TOP = "top",
+    RIGHT = "right",
+    BOTTOM = "bottom",
+    LEFT = "left"
+}
+export declare const ButtonType: typeof ButtonV2Type;
+export declare const ButtonSize: typeof ButtonV2Size;
+export declare const ButtonSubType: typeof ButtonV2SubType;
+export declare const ButtonState: typeof ButtonV2State;
+export type ButtonSlot = {
+    slot: React.ReactNode;
+    maxHeight?: string | number;
+};
+export type ButtonSkeleton = {
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+};
+export type ButtonBaseProps = {
+    buttonType?: ButtonV2Type;
+    size?: ButtonV2Size;
+    subType?: ButtonV2SubType;
+    text?: string;
+    leftSlot?: ButtonSlot;
+    rightSlot?: ButtonSlot;
+    loading?: boolean;
+    skeleton?: ButtonSkeleton;
+    buttonGroupPosition?: 'center' | 'left' | 'right';
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    state?: ButtonV2State;
+};
+export type ButtonV2Props = ButtonBaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'className'>;
+export type LinkButtonProps = ButtonBaseProps & {
+    href: string;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'children' | 'className' | 'style' | 'dangerouslySetInnerHTML'>;

package/dist/components/ButtonV2/index.d.ts

@@ -0,0 +1,8 @@
+export { default as ButtonV2 } from './ButtonV2';
+export { default as IconButton } from './IconButton';
+export { default as LinkButton } from './LinkButton';
+export { ButtonGroupV2 } from './ButtonGroupV2';
+export type { ButtonV2Props, LinkButtonProps } from './buttonV2.types';
+export type { IconButtonProps } from './IconButton';
+export type { ButtonGroupV2Props, ButtonGroupPosition } from './ButtonGroupV2';
+export * from './buttonV2.types';

package/dist/components/Card/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Card } from './Card';
+export * from './card.tokens';
 export * from './types';

package/dist/components/Charts/CustomTooltip.d.ts

@@ -1,2 +1,4 @@
-import { CustomTooltipProps } from './types';
+import { CustomTooltipProps, NewNestedDataPoint } from './types';
+export declare const findDataPointByLabel: (originalData: NewNestedDataPoint[], label: string | number) => NewNestedDataPoint | undefined;
+export declare const getRelevantData: (originalData: NewNestedDataPoint[], label: string | number, hoveredKey: string) => import('./types').DataPoint | null;
 export declare const CustomTooltip: ({ active, payload, label, hoveredKey, originalData, setHoveredKey, chartType, selectedKeys, xAxis, yAxis, }: CustomTooltipProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Charts/index.d.ts

@@ -8,5 +8,6 @@ export { default as SankeyLink } from './SankeyLink';
 export { default as BlendChart } from './BlendChart';
 export { default as BlendChartContainer } from './BlendChartContainer';
 export { default as BlendChartHeader } from './BlendChartHeader';
+export * from './chart.tokens';
 export * from './types';
 export * from './BlendChart.types';

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

@@ -2,3 +2,15 @@ export declare const DEFAULT_COLORS: {
     key: string;
     color: string;
 }[];
+/**
+ * Gets the color value for a given key from the colors array
+ * Tries to match by key first, then falls back to index-based lookup
+ * @param dataKey - The key to match against color objects
+ * @param colors - Array of color objects or strings
+ * @param index - Fallback index if key match is not found
+ * @returns The color string value
+ */
+export declare const getColorByKey: (dataKey: string, colors: Array<{
+    key: string;
+    color: string;
+} | string>, index: number) => string;

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

@@ -1,2 +1,3 @@
 export { default as ChatInput } from './ChatInput';
+export * from './chatInput.tokens';
 export * from './types';

package/dist/components/DataTable/index.d.ts

@@ -5,6 +5,6 @@ export * from './TableBody/types';
 export * from './TableCell/types';
 export * from './TableFooter/types';
 export * from './DataTableHeader/types';
-export type { TableTokenType } from './dataTable.tokens';
+export * from './dataTable.tokens';
 export { validateColumnData, getColumnTypeConfig } from './columnTypes';
 export type { ColumnFilterOption, SelectData, MultiSelectData, DateData, DateRangeData, TagData, ColumnDataTypeMap, GetColumnDataType, ColumnTypeConfig, AvatarData as DataTableAvatarData, } from './columnTypes';

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

@@ -1,3 +1,4 @@
 export { default as DateRangePicker } from './DateRangePicker';
 export { default as MobileDrawerPresets } from './MobileDrawerPresets';
+export * from './dateRangePicker.tokens';
 export * from './types';

package/dist/components/Directory/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Directory } from './Directory';
+export * from './directory.tokens';
 export * from './types';

package/dist/components/Inputs/AutofillStyles/AutofillStyles.d.ts

@@ -0,0 +1 @@
+export declare const AutofillStyles: import('react').NamedExoticComponent<import('styled-components').ExecutionProps & object>;

package/dist/components/Inputs/DropdownInput/index.d.ts

@@ -1,2 +1,3 @@
 export { default as DropdownInput } from './DropdownInput';
+export * from './dropdownInput.tokens';
 export * from './types';

package/dist/components/Inputs/MultiValueInput/MultiValueInput.d.ts

@@ -1,3 +1,3 @@
 import { MultiValueInputProps } from './types';
-declare const MultiValueInput: ({ value, label, sublabel, helpIconHintText, disabled, required, error, errorMessage, hintText, tags, onTagAdd, onTagRemove, onChange, size, onFocus, onBlur, name, id: providedId, ...rest }: MultiValueInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiValueInput: ({ value, label, sublabel, helpIconHintText, disabled, required, error, errorMessage, hintText, tags, onTagAdd, onTagRemove, onChange, size, onFocus, onBlur, name, id: providedId, leftSlot, rightSlot, ...rest }: MultiValueInputProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiValueInput;

package/dist/components/Inputs/MultiValueInput/index.d.ts

@@ -1,2 +1,3 @@
 export { default as MultiValueInput } from './MultiValueInput';
+export * from './multiValueInput.tokens';
 export * from './types';

package/dist/components/Inputs/MultiValueInput/types.d.ts

@@ -27,4 +27,6 @@ export type MultiValueInputProps = {
     size?: TextInputSize;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange' | 'value' | 'onFocus' | 'onBlur'>;

package/dist/components/Inputs/NumberInput/index.d.ts

@@ -1,2 +1,3 @@
 export { default as NumberInput } from './NumberInput';
+export * from './numberInput.tokens';
 export * from './types';

package/dist/components/Inputs/OTPInput/index.d.ts

@@ -1,2 +1,3 @@
 export { default as OTPInput } from './OTPInput';
+export * from './otpInput.tokens';
 export * from './types';

package/dist/components/Inputs/SearchInput/index.d.ts

@@ -1,2 +1,3 @@
 export { default as SearchInput } from './SearchInput';
+export * from './searchInput.tokens';
 export * from './types';

package/dist/components/Inputs/TextInput/index.d.ts

@@ -1,2 +1,3 @@
 export { default as TextInput } from './TextInput';
+export * from './textInput.tokens';
 export * from './types';

package/dist/components/Inputs/UnitInput/index.d.ts

@@ -1,2 +1,3 @@
 export { default as UnitInput } from './UnitInput';
+export * from './unitInput.tokens';
 export * from './types';

package/dist/components/KeyValuePair/index.d.ts

@@ -1,2 +1,3 @@
 export { default as KeyValuePair } from './KeyValuePair';
+export * from './KeyValuePair.tokens';
 export * from './types';

package/dist/components/Menu/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Menu } from './Menu';
+export * from './menu.tokens';
 export * from './types';

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

@@ -39,6 +39,12 @@ export type MenuProps = {
     collisonBoundaryRef?: Element | null | Array<Element | null>;
     skeleton?: MenuSkeletonProps;
 };
+export type SubMenuVirtualScrollProps = {
+    enableVirtualScrolling?: boolean;
+    virtualItemHeight?: number;
+    virtualOverscan?: number;
+    virtualScrollThreshold?: number;
+};
 export declare enum MenuItemVariant {
     DEFAULT = "default",
     ACTION = "action"
@@ -70,6 +76,10 @@ export type MenuItemType = {
         delayDuration?: number;
         offset?: number;
     };
+    enableSubMenuVirtualScrolling?: boolean;
+    subMenuVirtualItemHeight?: number;
+    subMenuVirtualOverscan?: number;
+    subMenuVirtualScrollThreshold?: number;
 };
 export type MenuGroupType = {
     label?: string;

package/dist/components/Modal/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Modal } from './Modal';
+export * from './modal.tokens';
 export * from './types';

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

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, showClearButton, onClearAllClick, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, showClearButton, onClearAllClick, onOpenChange, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -1,3 +1,4 @@
 export { default as MultiSelect } from './MultiSelect';
 export { default as MultiSelectTrigger } from './MultiSelectTrigger';
+export * from './multiSelect.tokens';
 export * from './types';

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

@@ -94,6 +94,7 @@ export type MultiSelectProps = {
     inline?: boolean;
     onBlur?: () => void;
     onFocus?: () => void;
+    onOpenChange?: (open: boolean) => void;
     error?: boolean;
     errorMessage?: string;
     showActionButtons?: boolean;

package/dist/components/Popover/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Popover } from './Popover';
+export * from './popover.tokens';
 export * from './types';

package/dist/components/Primitives/Block/Block.d.ts

@@ -88,6 +88,7 @@ type StyledBlockProps = StateStyles & {
     textAlign?: CSSObject['textAlign'];
     textTransform?: CSSObject['textTransform'];
     textOverflow?: CSSObject['textOverflow'];
+    userSelect?: CSSObject['userSelect'];
 };
 type SemanticTagType = keyof Pick<JSX.IntrinsicElements, 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'span' | 'nav' | 'hr'>;
 export type BlockProps = StyledBlockProps & Omit<React.HTMLAttributes<HTMLElement>, 'as' | 'color'> & {
@@ -182,6 +183,7 @@ declare const Block: React.ForwardRefExoticComponent<StateStyles & {
     textAlign?: CSSObject["textAlign"];
     textTransform?: CSSObject["textTransform"];
     textOverflow?: CSSObject["textOverflow"];
+    userSelect?: CSSObject["userSelect"];
 } & Omit<React.HTMLAttributes<HTMLElement>, "color" | "as"> & {
     children?: React.ReactNode;
     as?: SemanticTagType;

package/dist/components/Primitives/Group/Group.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { GroupProps } from './types';
+declare const Group: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;
+export default Group;

package/dist/components/Primitives/Group/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Group } from './Group';
+export type { GroupProps, GroupPosition, GroupOrientation } from './types';
+export { getGroupPosition, getGroupGap, getPositionPropName } from './utils';

package/dist/components/Primitives/Group/types.d.ts

@@ -0,0 +1,81 @@
+import { ReactElement } from 'react';
+/**
+ * Position of an element within a group
+ */
+export declare enum GroupPosition {
+    LEFT = "left",
+    CENTER = "center",
+    RIGHT = "right",
+    TOP = "top",
+    MIDDLE = "middle",
+    BOTTOM = "bottom"
+}
+/**
+ * Orientation of the group layout
+ */
+export declare enum GroupOrientation {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+/**
+ * Safe HTML div attributes for restProps
+ */
+type SafeDivAttributes = Omit<React.HTMLAttributes<HTMLDivElement>, 'display'>;
+/**
+ * Props for the Group component
+ */
+export interface GroupProps extends Omit<SafeDivAttributes, 'aria-label'> {
+    /**
+     * Child elements to be grouped
+     */
+    children: ReactElement | ReactElement[];
+    /**
+     * Whether elements should be stacked (no gap, connected borders)
+     * When true, position props are injected into children
+     * @default false
+     */
+    stacked?: boolean;
+    /**
+     * Layout orientation
+     * @default 'horizontal'
+     */
+    orientation?: GroupOrientation;
+    /**
+     * Gap between elements when not stacked
+     * Uses foundation tokens if not provided
+     */
+    gap?: string | number;
+    /**
+     * Alignment of items along the cross axis
+     * @default 'stretch'
+     */
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    /**
+     * Alignment of items along the main axis
+     */
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    /**
+     * Whether items should wrap
+     * @default 'nowrap'
+     */
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /**
+     * ARIA role for the group
+     * @default 'group'
+     */
+    role?: string;
+    /**
+     * Accessible label for the group
+     */
+    'aria-label'?: string;
+    /**
+     * Name of the prop to inject into children for position
+     * Different components may use different prop names:
+     * - ButtonV2: 'buttonGroupPosition'
+     * - Tag: 'splitTagPosition'
+     * - FormField: 'fieldGroupPosition'
+     * @default 'groupPosition'
+     */
+    positionProp?: string;
+}
+export {};

package/dist/components/Primitives/Group/utils.d.ts

@@ -0,0 +1,35 @@
+import { GroupPosition, GroupOrientation } from './types';
+/**
+ * Calculate element position within a group based on index and total count
+ *
+ * @param index - Current element index (0-based)
+ * @param totalCount - Total number of elements in group
+ * @param orientation - Group orientation (horizontal or vertical)
+ * @returns Position enum value or undefined if single element
+ */
+export declare function getGroupPosition(index: number, totalCount: number, orientation?: GroupOrientation): GroupPosition | undefined;
+/**
+ * Get gap value for group based on stacked mode and orientation
+ * Uses foundation tokens if gap is not provided
+ *
+ * @param stacked - Whether group is in stacked mode (no gap)
+ * @param providedGap - User-provided gap value
+ * @param orientation - Group orientation enum
+ * @returns Gap value as string or number
+ */
+export declare function getGroupGap(stacked: boolean, providedGap?: string | number, orientation?: GroupOrientation): string | number;
+/**
+ * Helper to convert position prop name to match component's expected prop
+ * This allows the Group to work with different component APIs
+ *
+ * @example
+ * // For ButtonV2
+ * getPositionPropName('buttonGroupPosition') // 'buttonGroupPosition'
+ *
+ * // For Tag
+ * getPositionPropName('splitTagPosition') // 'splitTagPosition'
+ *
+ * @param propName - Name of the position prop
+ * @returns The same prop name (identity function for type safety)
+ */
+export declare function getPositionPropName(propName?: string): string;

package/dist/components/Primitives/PrimitiveButton/PrimitiveButton.d.ts

@@ -15,6 +15,8 @@ type PrimitiveButtonProps = StateStyles & {
     paddingY?: CSSObject['padding'];
     paddingTop?: CSSObject['padding'];
     paddingBottom?: CSSObject['padding'];
+    paddingLeft?: CSSObject['padding'];
+    paddingRight?: CSSObject['padding'];
     margin?: CSSObject['margin'];
     marginX?: CSSObject['margin'];
     marginY?: CSSObject['margin'];
@@ -79,6 +81,8 @@ declare const PrimitiveButton: React.ForwardRefExoticComponent<StateStyles & {
     paddingY?: CSSObject["padding"];
     paddingTop?: CSSObject["padding"];
     paddingBottom?: CSSObject["padding"];
+    paddingLeft?: CSSObject["padding"];
+    paddingRight?: CSSObject["padding"];
     margin?: CSSObject["margin"];
     marginX?: CSSObject["margin"];
     marginY?: CSSObject["margin"];