@juspay/blend-design-system 0.0.1

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

@@ -0,0 +1,3 @@
+import { MultiSelectMenuProps } from './types';
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectMenu;

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

@@ -0,0 +1,10 @@
+import { MultiSelectMenuItemType } from './types';
+declare const MultiSelectMenuItem: {
+    ({ item, onSelect, selected, }: {
+        item: MultiSelectMenuItemType;
+        onSelect: (value: string) => void;
+        selected: string[];
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MultiSelectMenuItem;

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

@@ -0,0 +1,10 @@
+import { MultiSelectMenuItemType } from './types';
+declare const MultiSelectSubMenu: {
+    ({ item, onSelect, selected, }: {
+        item: MultiSelectMenuItemType;
+        onSelect: (value: string) => void;
+        selected: string[];
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MultiSelectSubMenu;

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

@@ -0,0 +1,8 @@
+declare const SelectAllItem: ({ selected, availableValues, onSelectAll, selectAllText, disabled, }: {
+    selected: string[];
+    availableValues: string[];
+    onSelectAll: (selectAll: boolean) => void;
+    selectAllText: string;
+    disabled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SelectAllItem;

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

@@ -0,0 +1,2 @@
+export { default as MultiSelect } from './MultiSelect';
+export * from './types';

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

@@ -0,0 +1,77 @@
+import { CSSObject } from 'styled-components';
+import { MultiSelectMenuSize, MultiSelectSelectionTagType, MultiSelectVariant } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+type TriggerStates = 'open' | 'closed' | 'hover' | 'focus';
+export type SingleSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
+export type MultiSelectTokensType = {
+    trigger: {
+        padding: {
+            [key in MultiSelectMenuSize]: CSSObject['padding'];
+        };
+        borderRadius: {
+            [key in MultiSelectMenuSize]: CSSObject['borderRadius'];
+        };
+        boxShadow: {
+            [key in MultiSelectVariant]: CSSObject['boxShadow'];
+        };
+        backgroundColor: {
+            container: {
+                [key in TriggerStates]: CSSObject['backgroundColor'];
+            };
+        };
+        outline: {
+            [key in MultiSelectVariant]: {
+                [key in TriggerStates]: CSSObject['outline'];
+            };
+        };
+        selectionTag: {
+            container: {
+                [key in MultiSelectSelectionTagType]: {
+                    color: CSSObject['color'];
+                    backgroundColor: CSSObject['backgroundColor'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+            };
+        };
+    };
+    dropdown: {
+        shadow: CSSObject['boxShadow'];
+        backgroundColor: CSSObject['backgroundColor'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingBottom: CSSObject['paddingBottom'];
+        border: CSSObject['border'];
+        outline: CSSObject['outline'];
+        borderRadius: CSSObject['borderRadius'];
+        item: {
+            padding: CSSObject['padding'];
+            margin: CSSObject['margin'];
+            borderRadius: CSSObject['borderRadius'];
+            gap: CSSObject['gap'];
+            backgroundColor: {
+                [key in SingleSelectItemStates]: CSSObject['backgroundColor'];
+            };
+            label: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: {
+                    [key in SingleSelectItemStates]: CSSObject['color'];
+                };
+            };
+            subLabel: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: {
+                    [key in SingleSelectItemStates]: CSSObject['color'];
+                };
+            };
+        };
+        seperator: {
+            color: CSSObject['color'];
+            height: CSSObject['height'];
+            margin: CSSObject['margin'];
+        };
+    };
+};
+export declare const multiSelectTokens: MultiSelectTokensType;
+export declare const getMultiSelectTokens: (foundationToken: FoundationTokenType) => MultiSelectTokensType;
+export {};

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

@@ -0,0 +1,92 @@
+export declare enum MultiSelectVariant {
+    CONTAINER = "container",
+    NO_CONTAINER = "no-container"
+}
+export declare enum MultiSelectMenuAlignment {
+    START = "start",
+    CENTER = "center",
+    END = "end"
+}
+export declare enum MultiSelectMenuSide {
+    TOP = "top",
+    LEFT = "left",
+    RIGHT = "right",
+    BOTTOM = "bottom"
+}
+export declare enum MultiSelectMenuSize {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare enum MultiSelectSelectionTagType {
+    COUNT = "count",
+    TEXT = "text"
+}
+export type MultiSelectMenuItemType = {
+    label: string;
+    value: string;
+    checked?: boolean;
+    subLabel?: string;
+    slot1?: React.ReactNode;
+    slot2?: React.ReactNode;
+    slot3?: React.ReactNode;
+    slot4?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    subMenu?: MultiSelectMenuItemType[];
+};
+export type MultiSelectMenuGroupType = {
+    groupLabel?: string;
+    items: MultiSelectMenuItemType[];
+    showSeparator?: boolean;
+};
+export type MultiSelectProps = {
+    selectedValues: string[];
+    onChange: (selectedValue: string) => void;
+    items: MultiSelectMenuGroupType[];
+    label: string;
+    sublabel?: string;
+    disabled?: boolean;
+    helpIconHintText?: string;
+    name?: string;
+    required?: boolean;
+    variant?: MultiSelectVariant;
+    selectionTagType?: MultiSelectSelectionTagType;
+    slot?: React.ReactNode;
+    hintText?: string;
+    placeholder: string;
+    size?: MultiSelectMenuSize;
+    enableSearch?: boolean;
+    searchPlaceholder?: string;
+    enableSelectAll?: boolean;
+    selectAllText?: string;
+    useDrawerOnMobile?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    alignment?: MultiSelectMenuAlignment;
+    side?: MultiSelectMenuSide;
+    sideOffset?: number;
+    alignOffset?: number;
+};
+export type MultiSelectMenuProps = {
+    items: MultiSelectMenuGroupType[];
+    selected: string[];
+    onSelect: (value: string) => void;
+    trigger: React.ReactNode;
+    minWidth?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    disabled?: boolean;
+    enableSearch?: boolean;
+    searchPlaceholder?: string;
+    enableSelectAll?: boolean;
+    selectAllText?: string;
+    onSelectAll?: (selectAll: boolean) => void;
+    alignment?: MultiSelectMenuAlignment;
+    side?: MultiSelectMenuSide;
+    sideOffset?: number;
+    alignOffset?: number;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+};

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

@@ -0,0 +1,11 @@
+import { MultiSelectMenuGroupType, MultiSelectMenuItemType } from './types';
+export declare const getSelectAllState: (selected: string[], availableValues: string[]) => {
+    allSelected: boolean;
+    someSelected: boolean;
+};
+export declare const map: (groups: MultiSelectMenuGroupType[]) => Record<string, string>;
+export declare const getAllValues: (groups: MultiSelectMenuGroupType[]) => string[];
+export declare const handleSelectAll: (selectAll: boolean, items: MultiSelectMenuGroupType[], selectedValues: string[], onChange: (value: string) => void) => void;
+export declare const filterMenuItem: (item: MultiSelectMenuItemType, lower: string) => MultiSelectMenuItemType | null;
+export declare const getAllAvailableValues: (groups: MultiSelectMenuGroupType[]) => string[];
+export declare const filterMenuGroups: (groups: MultiSelectMenuGroupType[], searchText: string) => MultiSelectMenuGroupType[];

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

@@ -0,0 +1,6 @@
+import { PopoverProps } from './types';
+declare const Popover: {
+    ({ heading, description, trigger, children, showCloseButton, onOpenChange, open, asModal, primaryAction, secondaryAction, sideOffset, side, align, alignOffset, width, minWidth, maxWidth, height, minHeight, maxHeight, zIndex, size, onClose, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Popover;

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

@@ -0,0 +1,6 @@
+import { PopoverProps } from './types';
+declare const PopoverFooter: {
+    ({ primaryAction, secondaryAction, }: Pick<PopoverProps, "primaryAction" | "secondaryAction">): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default PopoverFooter;

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

@@ -0,0 +1,6 @@
+import { PopoverProps } from './types';
+declare const PopoverHeader: {
+    ({ heading, description, showCloseButton, onClose, size, }: Pick<PopoverProps, "heading" | "description" | "showCloseButton" | "size" | "onClose">): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default PopoverHeader;

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

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

package/dist/components/Popover/popover.tokens.d.ts

@@ -0,0 +1,40 @@
+import { CSSObject } from 'styled-components';
+import { PopoverSize } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+export type PopoverTokenType = {
+    background: CSSObject['backgroundColor'];
+    border: CSSObject['border'];
+    shadow: CSSObject['boxShadow'];
+    gap: CSSObject['gap'];
+    zIndex: CSSObject['zIndex'];
+    borderRadius: CSSObject['borderRadius'];
+    headerContainer: {
+        heading: {
+            fontSize: {
+                [key in PopoverSize]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in PopoverSize]: CSSObject['fontWeight'];
+            };
+            color: {
+                [key in PopoverSize]: CSSObject['color'];
+            };
+        };
+        description: {
+            fontSize: {
+                [key in PopoverSize]: CSSObject['fontSize'];
+            };
+            color: {
+                [key in PopoverSize]: CSSObject['color'];
+            };
+            fontWeight: {
+                [key in PopoverSize]: CSSObject['fontWeight'];
+            };
+        };
+    };
+    footer: {
+        justifyContent: CSSObject['justifyContent'];
+        gap: CSSObject['gap'];
+    };
+};
+export declare const getPopoverTokens: (foundationTokens: FoundationTokenType) => PopoverTokenType;

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

@@ -0,0 +1,31 @@
+import { ButtonV2Props } from '../Button';
+export type PopoverActionType = Omit<ButtonV2Props, 'buttonGroupPosition' | 'subType'>;
+export declare enum PopoverSize {
+    SMALL = "small",
+    MEDIUM = "medium"
+}
+export type PopoverProps = {
+    heading?: string;
+    description?: string;
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    showCloseButton?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    asModal?: boolean;
+    primaryAction?: PopoverActionType;
+    secondaryAction?: PopoverActionType;
+    sideOffset?: number;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    alignOffset?: number;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    height?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    zIndex?: number;
+    size?: PopoverSize;
+    onClose?: () => void;
+};

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

@@ -0,0 +1,189 @@
+import { default as React, JSX } from 'react';
+import { CSSObject } from 'styled-components';
+type SpacingValue = string | number;
+type StateStyles = {
+    _hover?: StyledBlockProps;
+    _focus?: StyledBlockProps;
+    _active?: StyledBlockProps;
+    _disabled?: StyledBlockProps;
+    _visited?: StyledBlockProps;
+    _focusVisible?: StyledBlockProps;
+};
+type StyledBlockProps = StateStyles & {
+    color?: CSSObject['color'];
+    position?: CSSObject['position'];
+    inset?: CSSObject['inset'];
+    top?: CSSObject['top'];
+    right?: CSSObject['right'];
+    bottom?: CSSObject['bottom'];
+    left?: CSSObject['left'];
+    zIndex?: CSSObject['zIndex'];
+    pointerEvents?: CSSObject['pointerEvents'];
+    opacity?: CSSObject['opacity'];
+    padding?: SpacingValue;
+    paddingTop?: SpacingValue;
+    paddingBottom?: SpacingValue;
+    paddingLeft?: SpacingValue;
+    paddingRight?: SpacingValue;
+    paddingX?: SpacingValue;
+    paddingY?: SpacingValue;
+    margin?: SpacingValue;
+    marginTop?: SpacingValue;
+    marginBottom?: SpacingValue;
+    marginLeft?: SpacingValue;
+    marginRight?: SpacingValue;
+    marginX?: SpacingValue;
+    marginY?: SpacingValue;
+    display?: CSSObject['display'];
+    flexDirection?: CSSObject['flexDirection'];
+    justifyContent?: CSSObject['justifyContent'];
+    alignItems?: CSSObject['alignItems'];
+    flexWrap?: CSSObject['flexWrap'];
+    flexGrow?: CSSObject['flexGrow'];
+    flexShrink?: CSSObject['flexShrink'];
+    flexBasis?: CSSObject['flexBasis'];
+    gap?: CSSObject['gap'];
+    rowGap?: CSSObject['rowGap'];
+    columnGap?: CSSObject['columnGap'];
+    alignContent?: CSSObject['alignContent'];
+    alignSelf?: CSSObject['alignSelf'];
+    justifySelf?: CSSObject['justifySelf'];
+    borderRadius?: CSSObject['borderRadius'];
+    borderTopLeftRadius?: CSSObject['borderTopLeftRadius'];
+    borderTopRightRadius?: CSSObject['borderTopRightRadius'];
+    borderBottomLeftRadius?: CSSObject['borderBottomLeftRadius'];
+    borderBottomRightRadius?: CSSObject['borderBottomRightRadius'];
+    outline?: CSSObject['outline'];
+    outlineColor?: CSSObject['outlineColor'];
+    outlineWidth?: CSSObject['outlineWidth'];
+    outlineStyle?: CSSObject['outlineStyle'];
+    outlineOffset?: CSSObject['outlineOffset'];
+    width?: CSSObject['width'];
+    height?: CSSObject['height'];
+    minWidth?: CSSObject['minWidth'];
+    minHeight?: CSSObject['minHeight'];
+    maxWidth?: CSSObject['maxWidth'];
+    maxHeight?: CSSObject['maxHeight'];
+    size?: SpacingValue;
+    backgroundColor?: CSSObject['backgroundColor'];
+    backgroundImage?: CSSObject['backgroundImage'];
+    backgroundSize?: CSSObject['backgroundSize'];
+    border?: CSSObject['border'];
+    borderTop?: CSSObject['borderTop'];
+    borderBottom?: CSSObject['borderBottom'];
+    borderLeft?: CSSObject['borderLeft'];
+    borderRight?: CSSObject['borderRight'];
+    boxShadow?: CSSObject['boxShadow'];
+    overflow?: CSSObject['overflow'];
+    overflowX?: CSSObject['overflowX'];
+    overflowY?: CSSObject['overflowY'];
+    whiteSpace?: CSSObject['whiteSpace'];
+    transition?: CSSObject['transition'];
+    contentCentered?: boolean;
+    cursor?: CSSObject['cursor'];
+    fontSize?: CSSObject['fontSize'];
+    fontWeight?: CSSObject['fontWeight'];
+    lineHeight?: CSSObject['lineHeight'];
+    letterSpacing?: CSSObject['letterSpacing'];
+    textAlign?: CSSObject['textAlign'];
+    textTransform?: CSSObject['textTransform'];
+    textOverflow?: CSSObject['textOverflow'];
+};
+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'> & {
+    children?: React.ReactNode;
+    as?: SemanticTagType;
+};
+/**
+ * Block Component
+ * @description
+ * The Block component is a primitive component that renders a styled div element.
+ * It is used to create consistent spacing and layout patterns across the application.
+ *
+ * @todo
+ * - Add support for focus-visible outline
+ */
+declare const Block: React.ForwardRefExoticComponent<StateStyles & {
+    color?: CSSObject["color"];
+    position?: CSSObject["position"];
+    inset?: CSSObject["inset"];
+    top?: CSSObject["top"];
+    right?: CSSObject["right"];
+    bottom?: CSSObject["bottom"];
+    left?: CSSObject["left"];
+    zIndex?: CSSObject["zIndex"];
+    pointerEvents?: CSSObject["pointerEvents"];
+    opacity?: CSSObject["opacity"];
+    padding?: SpacingValue;
+    paddingTop?: SpacingValue;
+    paddingBottom?: SpacingValue;
+    paddingLeft?: SpacingValue;
+    paddingRight?: SpacingValue;
+    paddingX?: SpacingValue;
+    paddingY?: SpacingValue;
+    margin?: SpacingValue;
+    marginTop?: SpacingValue;
+    marginBottom?: SpacingValue;
+    marginLeft?: SpacingValue;
+    marginRight?: SpacingValue;
+    marginX?: SpacingValue;
+    marginY?: SpacingValue;
+    display?: CSSObject["display"];
+    flexDirection?: CSSObject["flexDirection"];
+    justifyContent?: CSSObject["justifyContent"];
+    alignItems?: CSSObject["alignItems"];
+    flexWrap?: CSSObject["flexWrap"];
+    flexGrow?: CSSObject["flexGrow"];
+    flexShrink?: CSSObject["flexShrink"];
+    flexBasis?: CSSObject["flexBasis"];
+    gap?: CSSObject["gap"];
+    rowGap?: CSSObject["rowGap"];
+    columnGap?: CSSObject["columnGap"];
+    alignContent?: CSSObject["alignContent"];
+    alignSelf?: CSSObject["alignSelf"];
+    justifySelf?: CSSObject["justifySelf"];
+    borderRadius?: CSSObject["borderRadius"];
+    borderTopLeftRadius?: CSSObject["borderTopLeftRadius"];
+    borderTopRightRadius?: CSSObject["borderTopRightRadius"];
+    borderBottomLeftRadius?: CSSObject["borderBottomLeftRadius"];
+    borderBottomRightRadius?: CSSObject["borderBottomRightRadius"];
+    outline?: CSSObject["outline"];
+    outlineColor?: CSSObject["outlineColor"];
+    outlineWidth?: CSSObject["outlineWidth"];
+    outlineStyle?: CSSObject["outlineStyle"];
+    outlineOffset?: CSSObject["outlineOffset"];
+    width?: CSSObject["width"];
+    height?: CSSObject["height"];
+    minWidth?: CSSObject["minWidth"];
+    minHeight?: CSSObject["minHeight"];
+    maxWidth?: CSSObject["maxWidth"];
+    maxHeight?: CSSObject["maxHeight"];
+    size?: SpacingValue;
+    backgroundColor?: CSSObject["backgroundColor"];
+    backgroundImage?: CSSObject["backgroundImage"];
+    backgroundSize?: CSSObject["backgroundSize"];
+    border?: CSSObject["border"];
+    borderTop?: CSSObject["borderTop"];
+    borderBottom?: CSSObject["borderBottom"];
+    borderLeft?: CSSObject["borderLeft"];
+    borderRight?: CSSObject["borderRight"];
+    boxShadow?: CSSObject["boxShadow"];
+    overflow?: CSSObject["overflow"];
+    overflowX?: CSSObject["overflowX"];
+    overflowY?: CSSObject["overflowY"];
+    whiteSpace?: CSSObject["whiteSpace"];
+    transition?: CSSObject["transition"];
+    contentCentered?: boolean;
+    cursor?: CSSObject["cursor"];
+    fontSize?: CSSObject["fontSize"];
+    fontWeight?: CSSObject["fontWeight"];
+    lineHeight?: CSSObject["lineHeight"];
+    letterSpacing?: CSSObject["letterSpacing"];
+    textAlign?: CSSObject["textAlign"];
+    textTransform?: CSSObject["textTransform"];
+    textOverflow?: CSSObject["textOverflow"];
+} & Omit<React.HTMLAttributes<HTMLElement>, "color" | "as"> & {
+    children?: React.ReactNode;
+    as?: SemanticTagType;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Block;

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

@@ -0,0 +1,131 @@
+import { default as React } from 'react';
+import { CSSObject } from 'styled-components';
+type StateStyles = {
+    _hover?: PrimitiveButtonProps;
+    _focus?: PrimitiveButtonProps;
+    _active?: PrimitiveButtonProps;
+    _disabled?: PrimitiveButtonProps;
+    _visited?: PrimitiveButtonProps;
+    _focusVisible?: PrimitiveButtonProps;
+    _focusWithin?: PrimitiveButtonProps;
+};
+type PrimitiveButtonProps = StateStyles & {
+    padding?: CSSObject['padding'];
+    paddingX?: CSSObject['padding'];
+    paddingY?: CSSObject['padding'];
+    margin?: CSSObject['margin'];
+    marginX?: CSSObject['margin'];
+    marginY?: CSSObject['margin'];
+    display?: CSSObject['display'];
+    justifyContent?: CSSObject['justifyContent'];
+    alignItems?: CSSObject['alignItems'];
+    gap?: CSSObject['gap'];
+    contentCentered?: boolean;
+    width?: CSSObject['width'];
+    height?: CSSObject['height'];
+    size?: CSSObject['width'] | CSSObject['height'];
+    minWidth?: CSSObject['minWidth'];
+    maxWidth?: CSSObject['maxWidth'];
+    minHeight?: CSSObject['minHeight'];
+    maxHeight?: CSSObject['maxHeight'];
+    flexGrow?: CSSObject['flexGrow'];
+    flexShrink?: CSSObject['flexShrink'];
+    flexBasis?: CSSObject['flexBasis'];
+    position?: CSSObject['position'];
+    top?: CSSObject['top'];
+    right?: CSSObject['right'];
+    bottom?: CSSObject['bottom'];
+    left?: CSSObject['left'];
+    zIndex?: CSSObject['zIndex'];
+    backgroundColor?: CSSObject['backgroundColor'];
+    background?: CSSObject['background'];
+    color?: CSSObject['color'];
+    border?: CSSObject['border'];
+    borderTop?: CSSObject['borderTop'];
+    borderRight?: CSSObject['borderRight'];
+    borderBottom?: CSSObject['borderBottom'];
+    borderLeft?: CSSObject['borderLeft'];
+    borderRadius?: CSSObject['borderRadius'];
+    boxShadow?: CSSObject['boxShadow'];
+    textAlign?: CSSObject['textAlign'];
+    whiteSpace?: CSSObject['whiteSpace'];
+    overflow?: CSSObject['overflow'];
+    overflowX?: CSSObject['overflowX'];
+    overflowY?: CSSObject['overflowY'];
+    cursor?: CSSObject['cursor'];
+    outline?: CSSObject['outline'];
+    outlineOffset?: CSSObject['outlineOffset'];
+    outlineStyle?: CSSObject['outlineStyle'];
+    outlineWidth?: CSSObject['outlineWidth'];
+    outlineColor?: CSSObject['outlineColor'];
+    disabled?: boolean;
+    fontWeight?: CSSObject['fontWeight'];
+    fontSize?: CSSObject['fontSize'];
+    fontFamily?: CSSObject['fontFamily'];
+    textDecoration?: CSSObject['textDecoration'];
+    textUnderlineOffset?: CSSObject['textUnderlineOffset'];
+    textTransform?: CSSObject['textTransform'];
+};
+export type ButtonProps = PrimitiveButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> & {
+    children?: React.ReactNode;
+};
+declare const PrimitiveButton: React.ForwardRefExoticComponent<StateStyles & {
+    padding?: CSSObject["padding"];
+    paddingX?: CSSObject["padding"];
+    paddingY?: CSSObject["padding"];
+    margin?: CSSObject["margin"];
+    marginX?: CSSObject["margin"];
+    marginY?: CSSObject["margin"];
+    display?: CSSObject["display"];
+    justifyContent?: CSSObject["justifyContent"];
+    alignItems?: CSSObject["alignItems"];
+    gap?: CSSObject["gap"];
+    contentCentered?: boolean;
+    width?: CSSObject["width"];
+    height?: CSSObject["height"];
+    size?: CSSObject["width"] | CSSObject["height"];
+    minWidth?: CSSObject["minWidth"];
+    maxWidth?: CSSObject["maxWidth"];
+    minHeight?: CSSObject["minHeight"];
+    maxHeight?: CSSObject["maxHeight"];
+    flexGrow?: CSSObject["flexGrow"];
+    flexShrink?: CSSObject["flexShrink"];
+    flexBasis?: CSSObject["flexBasis"];
+    position?: CSSObject["position"];
+    top?: CSSObject["top"];
+    right?: CSSObject["right"];
+    bottom?: CSSObject["bottom"];
+    left?: CSSObject["left"];
+    zIndex?: CSSObject["zIndex"];
+    backgroundColor?: CSSObject["backgroundColor"];
+    background?: CSSObject["background"];
+    color?: CSSObject["color"];
+    border?: CSSObject["border"];
+    borderTop?: CSSObject["borderTop"];
+    borderRight?: CSSObject["borderRight"];
+    borderBottom?: CSSObject["borderBottom"];
+    borderLeft?: CSSObject["borderLeft"];
+    borderRadius?: CSSObject["borderRadius"];
+    boxShadow?: CSSObject["boxShadow"];
+    textAlign?: CSSObject["textAlign"];
+    whiteSpace?: CSSObject["whiteSpace"];
+    overflow?: CSSObject["overflow"];
+    overflowX?: CSSObject["overflowX"];
+    overflowY?: CSSObject["overflowY"];
+    cursor?: CSSObject["cursor"];
+    outline?: CSSObject["outline"];
+    outlineOffset?: CSSObject["outlineOffset"];
+    outlineStyle?: CSSObject["outlineStyle"];
+    outlineWidth?: CSSObject["outlineWidth"];
+    outlineColor?: CSSObject["outlineColor"];
+    disabled?: boolean;
+    fontWeight?: CSSObject["fontWeight"];
+    fontSize?: CSSObject["fontSize"];
+    fontFamily?: CSSObject["fontFamily"];
+    textDecoration?: CSSObject["textDecoration"];
+    textUnderlineOffset?: CSSObject["textUnderlineOffset"];
+    textTransform?: CSSObject["textTransform"];
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default PrimitiveButton;