@clickpalm/react 1.1.2 → 1.2.1

package/dist/index.d.ts

@@ -4,13 +4,14 @@ import * as _stitches_react_types_styled_component from '@stitches/react/types/s
 import * as _stitches_react_types_stitches from '@stitches/react/types/stitches';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as react from 'react';
-import react__default, { ComponentProps, ComponentPropsWithoutRef, ElementType, ReactNode, InputHTMLAttributes, SVGProps, CSSProperties } from 'react';
+import react__default, { ComponentProps, ComponentPropsWithoutRef, ElementType, ReactNode, InputHTMLAttributes, CSSProperties, SVGProps } from 'react';
 import * as _stitches_react_types_util from '@stitches/react/types/util';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as Avatar$1 from '@radix-ui/react-avatar';
 import * as Checkbox$1 from '@radix-ui/react-checkbox';
 import { VariantProps, CSS } from '@stitches/react';
 import * as Progress from '@radix-ui/react-progress';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as CustomSelect from '@radix-ui/react-select';
 import * as OneTimePasswordField from '@radix-ui/react-one-time-password-field';
 
@@ -2534,10 +2535,10 @@ declare const StyledHr: _stitches_react_types_styled_component.StyledComponent<"
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type CustomCSS$4 = CSS<typeof config>;
+type CustomCSS$5 = CSS<typeof config>;
 interface HrProps extends ComponentPropsWithoutRef<'hr'>, VariantProps<typeof StyledHr> {
     as?: ElementType;
-    css?: CustomCSS$4;
+    css?: CustomCSS$5;
     children?: React.ReactNode;
     variant?: 'gray' | 'purple';
 }
@@ -2547,6 +2548,7 @@ interface ModalProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title: string;
+    description?: string;
     children: react__default.ReactNode;
 }
 declare const Modal: react__default.FC<ModalProps>;
@@ -2569,7 +2571,7 @@ interface RadioProps {
     required?: boolean;
     errorMessage?: string;
 }
-declare const Radio: ({ labels, value, onChange, disabled, required, errorMessage }: RadioProps) => react_jsx_runtime.JSX.Element;
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLDivElement>>;
 
 type SpacingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg' | 'xxxlg';
 interface SpacingProps {
@@ -2588,7 +2590,7 @@ interface SwitchProps {
     id?: string;
     errorMessage?: string;
 }
-declare const Switch: ({ label, checked, defaultChecked, onCheckedChange, disabled, required, id, errorMessage }: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface TabsProps {
     defaultValue?: string;
@@ -3050,10 +3052,7 @@ interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, VariantPro
     htmlFor?: string;
     errorMessage?: string;
 }
-declare const TextArea: {
-    ({ label, id, htmlFor, errorMessage, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare const TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
 interface TooltipProps {
     content: ReactNode;
@@ -3090,6 +3089,235 @@ interface MaskedInputProps extends TextInputProps {
 }
 declare const MaskedInput: react__default.ForwardRefExoticComponent<MaskedInputProps & react__default.RefAttributes<HTMLInputElement>>;
 
+interface DropdownProps {
+    children: react__default.ReactNode;
+}
+type DropdownItemProps = ComponentProps<typeof DropdownMenu.Item>;
+declare const Dropdown: {
+    ({ children }: DropdownProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DropdownSeparator: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<DropdownMenu.DropdownMenuSeparatorProps & react__default.RefAttributes<HTMLDivElement>>, {}, {
+    sm: "(min-width: 375px)";
+    md: "(min-width: 768px)";
+    lg: "(min-width: 1024px)";
+}, _stitches_react_types_css_util.CSS<{
+    sm: "(min-width: 375px)";
+    md: "(min-width: 768px)";
+    lg: "(min-width: 1024px)";
+}, {
+    colors: {
+        white: string;
+        black: string;
+        gray_background: string;
+        gray_light: string;
+        gray_mid: string;
+        gray_dark: string;
+        clickpalm_light: string;
+        clickpalm_mid: string;
+        clickpalm_dark: string;
+        clickpalm_superDark: string;
+        ignite_light: string;
+        ignite_dark: string;
+        success: string;
+        success_dark: string;
+        warning: string;
+        warning_dark: string;
+        danger: string;
+        danger_dark: string;
+    };
+    fontSizes: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        bold: string;
+    };
+    fonts: {
+        default: string;
+        code: string;
+    };
+    lineHeights: {
+        regular: string;
+        shorter: string;
+        short: string;
+        base: string;
+        tall: string;
+    };
+    radii: {
+        px: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    space: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        10: string;
+        11: string;
+        12: string;
+        14: string;
+        16: string;
+        19: string;
+        20: string;
+        22: string;
+        40: string;
+        64: string;
+        80: string;
+    };
+}, {
+    height: "space";
+    width: "space";
+    gap: "space";
+    gridGap: "space";
+    columnGap: "space";
+    gridColumnGap: "space";
+    rowGap: "space";
+    gridRowGap: "space";
+    inset: "space";
+    insetBlock: "space";
+    insetBlockEnd: "space";
+    insetBlockStart: "space";
+    insetInline: "space";
+    insetInlineEnd: "space";
+    insetInlineStart: "space";
+    margin: "space";
+    marginTop: "space";
+    marginRight: "space";
+    marginBottom: "space";
+    marginLeft: "space";
+    marginBlock: "space";
+    marginBlockEnd: "space";
+    marginBlockStart: "space";
+    marginInline: "space";
+    marginInlineEnd: "space";
+    marginInlineStart: "space";
+    padding: "space";
+    paddingTop: "space";
+    paddingRight: "space";
+    paddingBottom: "space";
+    paddingLeft: "space";
+    paddingBlock: "space";
+    paddingBlockEnd: "space";
+    paddingBlockStart: "space";
+    paddingInline: "space";
+    paddingInlineEnd: "space";
+    paddingInlineStart: "space";
+    scrollMargin: "space";
+    scrollMarginTop: "space";
+    scrollMarginRight: "space";
+    scrollMarginBottom: "space";
+    scrollMarginLeft: "space";
+    scrollMarginBlock: "space";
+    scrollMarginBlockEnd: "space";
+    scrollMarginBlockStart: "space";
+    scrollMarginInline: "space";
+    scrollMarginInlineEnd: "space";
+    scrollMarginInlineStart: "space";
+    scrollPadding: "space";
+    scrollPaddingTop: "space";
+    scrollPaddingRight: "space";
+    scrollPaddingBottom: "space";
+    scrollPaddingLeft: "space";
+    scrollPaddingBlock: "space";
+    scrollPaddingBlockEnd: "space";
+    scrollPaddingBlockStart: "space";
+    scrollPaddingInline: "space";
+    scrollPaddingInlineEnd: "space";
+    scrollPaddingInlineStart: "space";
+    top: "space";
+    right: "space";
+    bottom: "space";
+    left: "space";
+    fontSize: "fontSizes";
+    background: "colors";
+    backgroundColor: "colors";
+    backgroundImage: "colors";
+    borderImage: "colors";
+    border: "colors";
+    borderBlock: "colors";
+    borderBlockEnd: "colors";
+    borderBlockStart: "colors";
+    borderBottom: "colors";
+    borderBottomColor: "colors";
+    borderColor: "colors";
+    borderInline: "colors";
+    borderInlineEnd: "colors";
+    borderInlineStart: "colors";
+    borderLeft: "colors";
+    borderLeftColor: "colors";
+    borderRight: "colors";
+    borderRightColor: "colors";
+    borderTop: "colors";
+    borderTopColor: "colors";
+    caretColor: "colors";
+    color: "colors";
+    columnRuleColor: "colors";
+    outline: "colors";
+    outlineColor: "colors";
+    fill: "colors";
+    stroke: "colors";
+    textDecorationColor: "colors";
+    fontFamily: "fonts";
+    fontWeight: "fontWeights";
+    lineHeight: "lineHeights";
+    letterSpacing: "letterSpacings";
+    blockSize: "sizes";
+    minBlockSize: "sizes";
+    maxBlockSize: "sizes";
+    inlineSize: "sizes";
+    minInlineSize: "sizes";
+    maxInlineSize: "sizes";
+    minWidth: "sizes";
+    maxWidth: "sizes";
+    minHeight: "sizes";
+    maxHeight: "sizes";
+    flexBasis: "sizes";
+    gridTemplateColumns: "sizes";
+    gridTemplateRows: "sizes";
+    borderWidth: "borderWidths";
+    borderTopWidth: "borderWidths";
+    borderLeftWidth: "borderWidths";
+    borderRightWidth: "borderWidths";
+    borderBottomWidth: "borderWidths";
+    borderStyle: "borderStyles";
+    borderTopStyle: "borderStyles";
+    borderLeftStyle: "borderStyles";
+    borderRightStyle: "borderStyles";
+    borderBottomStyle: "borderStyles";
+    borderRadius: "radii";
+    borderTopLeftRadius: "radii";
+    borderTopRightRadius: "radii";
+    borderBottomRightRadius: "radii";
+    borderBottomLeftRadius: "radii";
+    boxShadow: "shadows";
+    textShadow: "shadows";
+    transition: "transitions";
+    zIndex: "zIndices";
+}, {}>>;
+declare const DropdownItem: react__default.ForwardRefExoticComponent<Omit<DropdownMenu.DropdownMenuItemProps & react__default.RefAttributes<HTMLDivElement>, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
 declare const StyledButton: _stitches_react_types_styled_component.StyledComponent<"button", {
     variant?: "primary" | "secondary" | "tertiary" | undefined;
     size?: "sm" | "md" | "lg" | "xs" | undefined;
@@ -3314,10 +3542,10 @@ declare const StyledButton: _stitches_react_types_styled_component.StyledCompone
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type CustomCSS$3 = CSS<typeof config>;
+type CustomCSS$4 = CSS<typeof config>;
 interface ButtonProps extends ComponentPropsWithoutRef<'button'>, VariantProps<typeof StyledButton> {
     as?: ElementType;
-    css?: CustomCSS$3;
+    css?: CustomCSS$4;
     children?: React.ReactNode;
     variant?: 'primary' | 'secondary' | 'tertiary';
     size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -3326,10 +3554,10 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'>, VariantProps<t
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-type CustomCSS$2 = CSS<typeof config>;
+type CustomCSS$3 = CSS<typeof config>;
 interface BoxProps extends ComponentPropsWithoutRef<'div'>, VariantProps<typeof Box> {
     as?: ElementType;
-    css?: CustomCSS$2;
+    css?: CustomCSS$3;
     variant?: 'gray' | 'white';
     children?: React.ReactNode;
 }
@@ -3338,10 +3566,233 @@ declare const Box: {
     displayName: string;
 };
 
-type CustomCSS$1 = CSS<typeof config>;
-interface ParagraphProps extends ComponentPropsWithoutRef<'p'>, VariantProps<typeof Paragraph> {
+declare const StyledParagraph: _stitches_react_types_styled_component.StyledComponent<"p", {
+    size?: "sm" | "md" | "lg" | "xxs" | "xs" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
+    wheight?: "regular" | "medium" | "bold" | undefined;
+    lineHeight?: "regular" | "shorter" | "short" | "base" | "tall" | undefined;
+}, {
+    sm: "(min-width: 375px)";
+    md: "(min-width: 768px)";
+    lg: "(min-width: 1024px)";
+}, _stitches_react_types_css_util.CSS<{
+    sm: "(min-width: 375px)";
+    md: "(min-width: 768px)";
+    lg: "(min-width: 1024px)";
+}, {
+    colors: {
+        white: string;
+        black: string;
+        gray_background: string;
+        gray_light: string;
+        gray_mid: string;
+        gray_dark: string;
+        clickpalm_light: string;
+        clickpalm_mid: string;
+        clickpalm_dark: string;
+        clickpalm_superDark: string;
+        ignite_light: string;
+        ignite_dark: string;
+        success: string;
+        success_dark: string;
+        warning: string;
+        warning_dark: string;
+        danger: string;
+        danger_dark: string;
+    };
+    fontSizes: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        bold: string;
+    };
+    fonts: {
+        default: string;
+        code: string;
+    };
+    lineHeights: {
+        regular: string;
+        shorter: string;
+        short: string;
+        base: string;
+        tall: string;
+    };
+    radii: {
+        px: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    space: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        10: string;
+        11: string;
+        12: string;
+        14: string;
+        16: string;
+        19: string;
+        20: string;
+        22: string;
+        40: string;
+        64: string;
+        80: string;
+    };
+}, {
+    height: "space";
+    width: "space";
+    gap: "space";
+    gridGap: "space";
+    columnGap: "space";
+    gridColumnGap: "space";
+    rowGap: "space";
+    gridRowGap: "space";
+    inset: "space";
+    insetBlock: "space";
+    insetBlockEnd: "space";
+    insetBlockStart: "space";
+    insetInline: "space";
+    insetInlineEnd: "space";
+    insetInlineStart: "space";
+    margin: "space";
+    marginTop: "space";
+    marginRight: "space";
+    marginBottom: "space";
+    marginLeft: "space";
+    marginBlock: "space";
+    marginBlockEnd: "space";
+    marginBlockStart: "space";
+    marginInline: "space";
+    marginInlineEnd: "space";
+    marginInlineStart: "space";
+    padding: "space";
+    paddingTop: "space";
+    paddingRight: "space";
+    paddingBottom: "space";
+    paddingLeft: "space";
+    paddingBlock: "space";
+    paddingBlockEnd: "space";
+    paddingBlockStart: "space";
+    paddingInline: "space";
+    paddingInlineEnd: "space";
+    paddingInlineStart: "space";
+    scrollMargin: "space";
+    scrollMarginTop: "space";
+    scrollMarginRight: "space";
+    scrollMarginBottom: "space";
+    scrollMarginLeft: "space";
+    scrollMarginBlock: "space";
+    scrollMarginBlockEnd: "space";
+    scrollMarginBlockStart: "space";
+    scrollMarginInline: "space";
+    scrollMarginInlineEnd: "space";
+    scrollMarginInlineStart: "space";
+    scrollPadding: "space";
+    scrollPaddingTop: "space";
+    scrollPaddingRight: "space";
+    scrollPaddingBottom: "space";
+    scrollPaddingLeft: "space";
+    scrollPaddingBlock: "space";
+    scrollPaddingBlockEnd: "space";
+    scrollPaddingBlockStart: "space";
+    scrollPaddingInline: "space";
+    scrollPaddingInlineEnd: "space";
+    scrollPaddingInlineStart: "space";
+    top: "space";
+    right: "space";
+    bottom: "space";
+    left: "space";
+    fontSize: "fontSizes";
+    background: "colors";
+    backgroundColor: "colors";
+    backgroundImage: "colors";
+    borderImage: "colors";
+    border: "colors";
+    borderBlock: "colors";
+    borderBlockEnd: "colors";
+    borderBlockStart: "colors";
+    borderBottom: "colors";
+    borderBottomColor: "colors";
+    borderColor: "colors";
+    borderInline: "colors";
+    borderInlineEnd: "colors";
+    borderInlineStart: "colors";
+    borderLeft: "colors";
+    borderLeftColor: "colors";
+    borderRight: "colors";
+    borderRightColor: "colors";
+    borderTop: "colors";
+    borderTopColor: "colors";
+    caretColor: "colors";
+    color: "colors";
+    columnRuleColor: "colors";
+    outline: "colors";
+    outlineColor: "colors";
+    fill: "colors";
+    stroke: "colors";
+    textDecorationColor: "colors";
+    fontFamily: "fonts";
+    fontWeight: "fontWeights";
+    lineHeight: "lineHeights";
+    letterSpacing: "letterSpacings";
+    blockSize: "sizes";
+    minBlockSize: "sizes";
+    maxBlockSize: "sizes";
+    inlineSize: "sizes";
+    minInlineSize: "sizes";
+    maxInlineSize: "sizes";
+    minWidth: "sizes";
+    maxWidth: "sizes";
+    minHeight: "sizes";
+    maxHeight: "sizes";
+    flexBasis: "sizes";
+    gridTemplateColumns: "sizes";
+    gridTemplateRows: "sizes";
+    borderWidth: "borderWidths";
+    borderTopWidth: "borderWidths";
+    borderLeftWidth: "borderWidths";
+    borderRightWidth: "borderWidths";
+    borderBottomWidth: "borderWidths";
+    borderStyle: "borderStyles";
+    borderTopStyle: "borderStyles";
+    borderLeftStyle: "borderStyles";
+    borderRightStyle: "borderStyles";
+    borderBottomStyle: "borderStyles";
+    borderRadius: "radii";
+    borderTopLeftRadius: "radii";
+    borderTopRightRadius: "radii";
+    borderBottomRightRadius: "radii";
+    borderBottomLeftRadius: "radii";
+    boxShadow: "shadows";
+    textShadow: "shadows";
+    transition: "transitions";
+    zIndex: "zIndices";
+}, {}>>;
+type CustomCSS$2 = CSS<typeof config>;
+interface ParagraphProps extends ComponentPropsWithoutRef<'p'>, VariantProps<typeof StyledParagraph> {
     as?: ElementType;
-    css?: CustomCSS$1;
+    css?: CustomCSS$2;
     size?: "sm" | "md" | "lg" | "xxs" | "xs" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
     wheight?: "regular" | "medium" | "bold";
     lineHeight?: "regular" | "shorter" | "short" | "base" | "tall";
@@ -3572,10 +4023,10 @@ declare const StyledHeading: _stitches_react_types_styled_component.StyledCompon
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type CustomCSS = CSS<typeof config>;
+type CustomCSS$1 = CSS<typeof config>;
 interface HeadingProps extends ComponentPropsWithoutRef<'h2'>, VariantProps<typeof StyledHeading> {
     as?: ElementType;
-    css?: CustomCSS;
+    css?: CustomCSS$1;
     children?: React.ReactNode;
     size?: 'sm' | 'md' | 'lg' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
 }
@@ -3585,16 +4036,17 @@ interface SelectItem {
     value: string;
     label: string;
 }
+type CustomCSS = CSS<typeof config>;
 interface SelectProps extends ComponentProps<typeof CustomSelect.Root> {
     items: SelectItem[];
     placeholder?: string;
     label?: string;
     errorMessage?: string;
+    css?: CustomCSS;
+    className?: string;
+    style?: CSSProperties;
 }
-declare function Select({ value, onValueChange, items, placeholder, label, errorMessage, ...rest }: SelectProps): react_jsx_runtime.JSX.Element;
-declare namespace Select {
-    var displayName: string;
-}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface LabelledValueProps {
     position?: 'vertical' | 'horizontal';
@@ -3676,4 +4128,11 @@ interface CarouselItemProps {
 type PasswordInputProps = Omit<TextInputProps, 'type' | 'suffix'>;
 declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
 
-export { Avatar, AvatarProps, AvatarSize, AvatarStatus, Box, BoxProps, Button, ButtonProps, Calendar, Carousel, CarouselProps, Checkbox, CheckboxProps, Datepicker, Heading, HeadingProps, Hr, HrProps, Icon, IconProps, Input, LabelledValue, LabelledValueProps, Loader, MaskType, MaskedInput, MaskedInputProps, Modal, MultiStep, MultiStepProps, OneTimePassword, OneTimePasswordProps, Paragraph, ParagraphProps, PasswordInput, PasswordInputProps, ProgressBar, ProgressBarProps, Radio, RadioProps, Select, SelectProps, Spacing, Span, StyledHr, Switch, SwitchProps, Tabs, TextArea, TextAreaElement, TextAreaProps, TextInputProps, Toast, Tooltip, TooltipProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme, toast };
+interface AccordionProps {
+    title: string;
+    children: ReactNode;
+    dropdownItems?: ReactNode;
+}
+declare const Accordion: react__default.ForwardRefExoticComponent<AccordionProps & react__default.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, Avatar, AvatarProps, AvatarSize, AvatarStatus, Box, BoxProps, Button, ButtonProps, Calendar, Carousel, CarouselProps, Checkbox, CheckboxProps, Datepicker, Dropdown, DropdownItem, DropdownItemProps, DropdownSeparator, Heading, HeadingProps, Hr, HrProps, Icon, IconProps, Input, LabelledValue, LabelledValueProps, Loader, MaskType, MaskedInput, MaskedInputProps, Modal, MultiStep, MultiStepProps, OneTimePassword, OneTimePasswordProps, Paragraph, ParagraphProps, PasswordInput, PasswordInputProps, ProgressBar, ProgressBarProps, Radio, RadioProps, Select, SelectProps, Spacing, Span, StyledHr, Switch, SwitchProps, Tabs, TextArea, TextAreaElement, TextAreaProps, TextInputProps, Toast, Tooltip, TooltipProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme, toast };