@lets-events/react 3.0.0 → 4.0.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@3.0.0 build
+> @lets-events/react@4.0.0 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist\index.mjs 79.13 KB
-ESM ⚡️ Build success in 78ms
-CJS dist\index.js 82.12 KB
-CJS ⚡️ Build success in 77ms
+CJS dist\index.js 99.94 KB
+CJS ⚡️ Build success in 76ms
+ESM dist\index.mjs 96.79 KB
+ESM ⚡️ Build success in 77ms
 DTS Build start
-DTS ⚡️ Build success in 3577ms
-DTS dist\index.d.mts 185.25 KB
-DTS dist\index.d.ts  185.25 KB
+DTS ⚡️ Build success in 3787ms
+DTS dist\index.d.mts 195.46 KB
+DTS dist\index.d.ts  195.46 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 4.0.0
+
+### Major Changes
+
+- 651db6f: new variants
+
 ## 3.0.0
 
 ### Major Changes

package/dist/index.d.mts

@@ -5,12 +5,13 @@ import PropTypes from 'prop-types';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as react from 'react';
-import { ComponentProps, ElementType } from 'react';
+import react__default, { ComponentProps, ElementType } from 'react';
 import * as _radix_ui_themes from '@radix-ui/themes';
 import { TextField as TextField$1, RadioGroup as RadioGroup$1, CheckboxGroup as CheckboxGroup$1, DropdownMenu as DropdownMenu$1 } from '@radix-ui/themes';
 
-interface IconProps extends Omit<FontAwesomeIconProps, "icon"> {
+interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
+    size?: 'xs' | 'sm' | 'md' | 'xl';
     prefix?: IconPrefix;
 }
 declare const Icon: {
@@ -25,7 +26,7 @@ declare const Icon: {
 };
 
 declare const Text: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.TextProps & react.RefAttributes<HTMLSpanElement>>, {
-    size?: "sm" | "lg" | "md" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -401,7 +402,7 @@ type TextProps = ComponentProps<typeof Text> & {
 };
 
 declare const DisplayText: _stitches_react_types_styled_component.StyledComponent<"p", {
-    size?: "sm" | "lg" | "md" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -2281,7 +2282,7 @@ type LabelProps = ComponentProps<typeof Label> & {
 };
 
 declare const BadgeText: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.TextProps & react.RefAttributes<HTMLSpanElement>>, {
-    size?: 1 | 2 | "1" | "2" | "3" | "4" | 4 | 3 | undefined;
+    size?: 1 | 2 | "1" | "2" | "3" | "4" | "xs" | "sm" | "md" | "xl" | 4 | 3 | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -3405,8 +3406,9 @@ interface TooltipTextProps extends ComponentProps<typeof TooltipText> {
 }
 
 declare const ButtonStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.ButtonProps & react.RefAttributes<HTMLButtonElement>>, {
-    variant?: "purple" | "simple" | "primary" | "secondary" | undefined;
-    size?: "xs" | "sm" | "lg" | "md" | undefined;
+    color?: "purple" | "brand" | "neutral" | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
     radii?: "full" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
@@ -4156,8 +4158,9 @@ declare const ButtonItemStyled: _stitches_react_types_styled_component.StyledCom
     zIndex: "zIndices";
 }, {}>>;
 declare const ButtonGroupStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.FlexProps & react.RefAttributes<HTMLDivElement>>, {
-    variant?: "simple" | "primary" | undefined;
-    size?: "sm" | "lg" | "md" | undefined;
+    color?: "blue" | "green" | "purple" | "red" | "brand" | "neutral" | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -4535,7 +4538,7 @@ declare function ButtonItem({ children, active, ...props }: ButtonItemProps): re
 declare function ButtonGroup({ children, ...props }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
 declare const AvatarStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.AvatarProps & react.RefAttributes<HTMLImageElement>>, {
-    size?: "xs" | "sm" | "lg" | "xl" | "md" | undefined;
+    size?: "xs" | "sm" | "md" | "xl" | "lg" | undefined;
     radii?: "full" | undefined;
     variant?: "without-image" | "with-image" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
@@ -4916,7 +4919,7 @@ type AvatarProps = ComponentProps<typeof AvatarStyled> & {
 declare function Avatar({ asChild, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
 declare const Flex: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.FlexProps & react.RefAttributes<HTMLDivElement>>, {
-    direction?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
+    direction?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
     gap?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
@@ -5295,7 +5298,8 @@ type FlexProps = ComponentProps<typeof Flex> & {
 declare const Box: react.ForwardRefExoticComponent<_radix_ui_themes.BoxProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const TextFieldStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<TextField$1.RootProps & react.RefAttributes<HTMLInputElement>>, {
-    isValid?: boolean | "true" | "false" | undefined;
+    color?: "default" | "error" | undefined;
+    isValid?: boolean | "false" | "true" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -6042,18 +6046,19 @@ type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
     isValid?: boolean;
     name?: string;
 };
-type TextFieldSlotProps = ComponentProps<typeof TextFieldStyled> & {
+type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'color'> & {
     placeholder?: string;
     children?: React.ReactNode;
     position?: 'flex-start' | 'flex-end';
     onClick?: () => void;
+    color?: "error" | "success" | undefined;
 };
-declare function TextField({ children, isValid, name, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare function TextField({ children, isValid, name, color, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
 declare function TextFieldSlot({ children, position, onClick, ...props }: TextFieldSlotProps): react_jsx_runtime.JSX.Element;
 
 declare const RadioGroupStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<RadioGroup$1.RootProps & react.RefAttributes<HTMLDivElement>>, {
-    isValid?: boolean | "true" | "false" | undefined;
-    disabled?: boolean | "true" | "false" | undefined;
+    color?: "blue" | "error" | "success" | undefined;
+    disabled?: boolean | "false" | "true" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -6427,19 +6432,19 @@ declare const RadioGroupStyled: _stitches_react_types_styled_component.StyledCom
 type RadioGroupProps = ComponentProps<typeof RadioGroupStyled> & {
     placeholder?: string;
     children?: React.ReactNode;
-    isValid?: boolean;
+    color?: string;
     disabled?: boolean;
 };
 type RadioItemProps = {
     children?: React.ReactNode;
     value: string;
 };
-declare function RadioGroup({ children, isValid, disabled, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup({ children, disabled, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 declare function RadioItem({ children, ...props }: RadioItemProps): react_jsx_runtime.JSX.Element;
 
 declare const CheckboxGroupStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<CheckboxGroup$1.RootProps & react.RefAttributes<HTMLDivElement>>, {
-    isValid?: boolean | "true" | "false" | undefined;
-    disabled?: boolean | "true" | "false" | undefined;
+    color?: "blue" | "error" | "success" | undefined;
+    disabled?: boolean | "false" | "true" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -6813,7 +6818,7 @@ declare const CheckboxGroupStyled: _stitches_react_types_styled_component.Styled
 type CheckboxGroupProps = ComponentProps<typeof CheckboxGroupStyled> & {
     placeholder?: string;
     children?: React.ReactNode;
-    isValid?: boolean;
+    color?: string;
     disabled?: boolean;
 };
 type CheckboxItemProps = {
@@ -7216,4 +7221,386 @@ type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuItemStyled> & {
 declare function DropdownMenu({ children, placeholder, ...props }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuItem({ children, ...props }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
 
-export { Avatar, type AvatarProps, AvatarStyled, BadgeText, type BadgeTextProps, BodyText, type BodyTextProps, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, ButtonStyled, CaptionText, type CaptionTextProps, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, DisplayText, type DisplayTextProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, Headline, type HeadlineProps, Icon, Label, type LabelProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Subtitle, type SubtitleProps, Text, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, type TextProps, TooltipText, type TooltipTextProps };
+declare const BadgeStyled: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<_radix_ui_themes.BadgeProps & react__default.RefAttributes<HTMLSpanElement>>, {
+    color?: "blue" | "green" | "grey" | "orange" | "pink" | "purple" | "red" | "yellow" | "dark" | "light" | "primary" | "disable" | undefined;
+    size?: "xs" | "sm" | "md" | "xl" | undefined;
+    radii?: "full" | undefined;
+}, {}, _stitches_react_types_css_util.CSS<{}, {
+    colors: {
+        brand50: string;
+        brand100: string;
+        brand200: string;
+        brand300: string;
+        brand400: string;
+        brand500: string;
+        brand600: string;
+        brand700: string;
+        brand800: string;
+        brand900: string;
+        brand950: string;
+        blue50: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        blue800: string;
+        blue900: string;
+        blue950: string;
+        red50: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red400: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        red900: string;
+        red950: string;
+        purple50: string;
+        purple100: string;
+        purple200: string;
+        purple300: string;
+        purple400: string;
+        purple500: string;
+        purple600: string;
+        purple700: string;
+        purple800: string;
+        purple900: string;
+        purple950: string;
+        yellow50: string;
+        yellow100: string;
+        yellow200: string;
+        yellow300: string;
+        yellow400: string;
+        yellow500: string;
+        yellow600: string;
+        yellow700: string;
+        yellow800: string;
+        yellow900: string;
+        yellow950: string;
+        dark50: string;
+        dark100: string;
+        dark200: string;
+        dark300: string;
+        dark400: string;
+        dark500: string;
+        dark600: string;
+        dark700: string;
+        dark800: string;
+        dark900: string;
+        dark950: string;
+        neutral50: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        neutral950: string;
+        green50: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green400: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        green900: string;
+        green950: string;
+        grey50: string;
+        grey100: string;
+        grey200: string;
+        grey300: string;
+        grey400: string;
+        grey500: string;
+        grey600: string;
+        grey700: string;
+        grey800: string;
+        grey900: string;
+        grey950: string;
+        error50: string;
+        error100: string;
+        error200: string;
+        error300: string;
+        error400: string;
+        error500: string;
+        error600: string;
+        error700: string;
+        error800: string;
+        error900: string;
+        error950: string;
+        success50: string;
+        success100: string;
+        success200: string;
+        success300: string;
+        success400: string;
+        success500: string;
+        success600: string;
+        success700: string;
+        success800: string;
+        success900: string;
+        success950: string;
+        warning50: string;
+        warning100: string;
+        warning200: string;
+        warning300: string;
+        warning400: string;
+        warning500: string;
+        warning600: string;
+        warning700: string;
+        warning800: string;
+        warning900: string;
+        warning950: string;
+        info50: string;
+        info100: string;
+        info200: string;
+        info300: string;
+        info400: string;
+        info500: string;
+        info600: string;
+        info700: string;
+        info800: string;
+        info900: string;
+        info950: string;
+    };
+    fontSizes: {
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        13: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+        56: string;
+        64: string;
+        72: string;
+        80: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        full: string;
+    };
+    fonts: {
+        default: string;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    lineHeights: {
+        smaller: string;
+        shorter: string;
+        short: string;
+        base: string;
+        tall: string;
+    };
+    radii: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
+        '11xl': string;
+        '12xl': string;
+        '13xl': string;
+        '14xl': string;
+        full: string;
+    };
+    space: {
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        13: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+        56: string;
+        64: string;
+        72: string;
+        80: string;
+        full: 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 BadgeProps = ComponentProps<typeof BadgeStyled> & {
+    as?: ElementType;
+    icon?: boolean;
+    size: 'md';
+    children: react__default.ReactNode;
+};
+declare function Badge({ asChild, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BadgeText, type BadgeTextProps, BodyText, type BodyTextProps, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, ButtonStyled, CaptionText, type CaptionTextProps, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, DisplayText, type DisplayTextProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, Headline, type HeadlineProps, Icon, Label, type LabelProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Subtitle, type SubtitleProps, Text, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, type TextProps, TooltipText, type TooltipTextProps };