@lets-events/react 10.1.1 → 11.0.0

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import * as react from 'react';
 import react__default, { ComponentProps, ElementType, ReactNode } 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, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
-import { CSS } from '@stitches/react';
+import { Colors } from '@lets-events/tokens';
 import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -402,17 +402,17 @@ declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type TextProps = ComponentProps<typeof TextStyle> & {
+type TextProps = Omit<ComponentProps<typeof TextStyle>, "color"> & {
     as?: ElementType;
     asChild?: boolean;
-    css?: CSS;
+    color?: keyof Colors;
 };
-declare function Text({ ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare function Text({ color, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 
 declare const ButtonStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.ButtonProps & react.RefAttributes<HTMLButtonElement>>, {
     color?: "info" | "warning" | "purple" | "white" | "brand" | "error" | "success" | "neutral" | undefined;
     variant?: "text" | "contained" | "outlined" | undefined;
-    typography?: "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | undefined;
+    size?: "medium" | "small" | "large" | "extraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     outlinedBgColor?: "transparent" | "neutral" | undefined;
     radii?: "full" | undefined;
@@ -6506,6 +6506,376 @@ declare const InputStyled: _stitches_react_types_styled_component.StyledComponen
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
+declare const TimePickerButtonStyled: _stitches_react_types_styled_component.StyledComponent<"button", {}, {}, _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 TimePickerProps = {
     selected: string | undefined;
     setSelected: react__default.Dispatch<react__default.SetStateAction<string | undefined>>;
@@ -12980,4 +13350,4 @@ type SectionProps = ComponentProps<typeof SectionStyled> & {
 };
 declare function Section({ children, ...props }: SectionProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, CardContainer, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Grid, type GridProps, GridStyled, Icon, InputStyled, Modal, type ModalProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, maskFormat, maskUnformat, useToast };
+export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, CardContainer, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Grid, type GridProps, GridStyled, Icon, InputStyled, Modal, type ModalProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, maskFormat, maskUnformat, useToast };

package/dist/index.js

@@ -1071,6 +1071,7 @@ __export(index_exports, {
   TextareaField: () => TextareaField,
   TextareaFieldStyle: () => TextareaFieldStyle,
   TimePicker: () => TimePicker,
+  TimePickerButtonStyled: () => TimePickerButtonStyled,
   TimePickerDropdownStyled: () => TimePickerDropdownStyled,
   TimePickerFooterStyled: () => TimePickerFooterStyled,
   TimePickerStyled: () => TimePickerStyled,
@@ -1619,24 +1620,6 @@ var typographyValues = {
     lineHeight: "$labelExtraSmall"
   }
 };
-var typographyButtonValues = {
-  buttonLarge: {
-    fontSize: "$buttonLarge",
-    lineHeight: "$buttonLarge"
-  },
-  buttonMedium: {
-    fontSize: "$buttonMedium",
-    lineHeight: "$buttonMedium"
-  },
-  buttonSmall: {
-    fontSize: "$buttonSmall",
-    lineHeight: "$buttonSmall"
-  },
-  buttonExtraSmall: {
-    fontSize: "$buttonExtraSmall",
-    lineHeight: "$buttonExtraSmall"
-  }
-};
 var typographyLabelValues = {
   labelLarge: {
     fontSize: "$labelLarge",
@@ -1661,7 +1644,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var TextStyle = styled(import_themes.Text, {
   fontFamily: "$default",
   lineHeight: "$base",
-  color: "$gray100",
+  color: "$grey950",
   variants: {
     typography: typographyValues,
     fontWeight: {
@@ -1673,8 +1656,15 @@ var TextStyle = styled(import_themes.Text, {
   }
 });
 function Text(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextStyle, __spreadValues({}, props));
+  var _b = _a, { color } = _b, props = __objRest(_b, ["color"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    TextStyle,
+    __spreadProps(__spreadValues({}, props), {
+      css: __spreadValues({
+        color: color ? "$" + color : "$grey950"
+      }, props.css)
+    })
+  );
 }
 
 // src/components/Button/styledComponents.ts
@@ -1695,7 +1685,7 @@ var ButtonStyled = styled(import_themes2.Button, {
   alignItems: "center",
   justifyContent: "center",
   gap: "$10",
-  padding: "$6 $16",
+  padding: "$6 $12",
   "&:disabled": {
     cursor: "not-allowed",
     transition: "none"
@@ -1895,7 +1885,32 @@ var ButtonStyled = styled(import_themes2.Button, {
         }
       }
     },
-    typography: typographyButtonValues,
+    size: {
+      extraSmall: {
+        height: "$24",
+        fontSize: "$buttonExtraSmall",
+        lineHeight: "$buttonExtraSmall",
+        padding: "0 $12"
+      },
+      small: {
+        height: "30px",
+        fontSize: "$buttonSmall",
+        lineHeight: "$buttonSmall",
+        padding: "0 $14"
+      },
+      medium: {
+        height: "40px",
+        fontSize: "$buttonMedium",
+        lineHeight: "$buttonMedium",
+        padding: "0 $16"
+      },
+      large: {
+        height: "48px",
+        fontSize: "$buttonLarge",
+        lineHeight: "$buttonLarge",
+        padding: "0 $20"
+      }
+    },
     fontWeight: {
       regular: { fontWeight: "$regular" },
       medium: { fontWeight: "$medium" },
@@ -1909,15 +1924,16 @@ var ButtonStyled = styled(import_themes2.Button, {
       }
     },
     radii: {
-      "full": {
+      full: {
         borderRadius: "$full"
       }
     }
   },
   defaultVariants: {
     variant: "contained",
-    typography: "buttonMedium",
-    color: "brand"
+    color: "brand",
+    size: "medium",
+    fontWeight: "medium"
   }
 });
 
@@ -7602,6 +7618,7 @@ var CalendarButtonStyled = styled("button", {
   border: "none",
   maxWidth: "200px",
   padding: "0",
+  cursor: "pointer",
   "> div > div": {
     paddingLeft: "1rem",
     "input": {
@@ -7891,7 +7908,7 @@ function Calendar(_a) {
               onClick: () => {
                 setShowCalendar(false);
               },
-              typography: "buttonMedium",
+              size: "medium",
               fontWeight: "medium",
               children: actionText != null ? actionText : "Aplicar"
             }
@@ -7988,6 +8005,19 @@ var InputStyled = styled("input", {
     MozAppearance: "textfield"
   }
 });
+var TimePickerButtonStyled = styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  maxWidth: "200px",
+  padding: "0",
+  cursor: "pointer",
+  "> div > div": {
+    paddingLeft: "1rem",
+    input: {
+      textAlign: "right"
+    }
+  }
+});
 var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
@@ -8031,16 +8061,22 @@ function TimePicker({
   );
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(TimePickerStyled, { ref: dropdownRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      TextField,
+      TimePickerButtonStyled,
       {
-        value: selected,
-        readOnly: true,
-        type: "text",
-        placeholder: "00:00",
-        typography: "labelSmall",
-        fontWeight: "regular",
+        type: "button",
         onClick: () => setIsOpen((prev) => !prev),
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "clock", size: "xl" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          TextField,
+          {
+            value: selected,
+            readOnly: true,
+            type: "text",
+            placeholder: "00:00",
+            typography: "labelSmall",
+            fontWeight: "regular",
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "clock", size: "xl" }) })
+          }
+        )
       }
     ),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -8180,7 +8216,7 @@ function TimePicker({
                 setSelected(`${hours}:${minutes}`);
                 setIsOpen(false);
               },
-              typography: "buttonMedium",
+              size: "medium",
               fontWeight: "medium",
               children: "Aplicar"
             }
@@ -9315,6 +9351,7 @@ function Section(_a) {
   TextareaField,
   TextareaFieldStyle,
   TimePicker,
+  TimePickerButtonStyled,
   TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerStyled,