@lets-events/react 12.1.5 → 12.1.6

package/dist/index.d.ts

@@ -7281,6 +7281,376 @@ declare const TimePickerButtonStyled: _stitches_react_types_styled_component.Sty
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
+declare const TimePickerIconButton: _stitches_react_types_styled_component.StyledComponent<typeof 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>>;
@@ -14443,4 +14813,4 @@ declare const useImageUpload: (options: UseImageUploadOptions) => {
     reset: () => void;
 };
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, 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, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, 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, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.js

@@ -2504,6 +2504,7 @@ __export(index_exports, {
   TimePickerDropdownStyled: () => TimePickerDropdownStyled,
   TimePickerFooterStyled: () => TimePickerFooterStyled,
   TimePickerFormField: () => TimePickerFormField,
+  TimePickerIconButton: () => TimePickerIconButton,
   TimePickerStyled: () => TimePickerStyled,
   TimerPickerContentStyled: () => TimerPickerContentStyled,
   ToastItem: () => ToastItem,
@@ -9093,6 +9094,7 @@ init_styles();
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var TimePickerStyled = styled("div", {
   position: "relative",
+  width: "fit-content",
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
@@ -9116,7 +9118,7 @@ var TimePickerDropdownStyled = styled("div", {
   position: "absolute",
   zIndex: 10,
   width: "100%",
-  maxWidth: "8.875rem",
+  maxWidth: "min-content",
   backgroundColor: "$neutral50",
   border: "1px solid $neutral300",
   borderRadius: "$sm",
@@ -9200,6 +9202,9 @@ var TimePickerButtonStyled = styled("button", {
     }
   }
 });
+var TimePickerIconButton = styled(Button, {
+  padding: "0 !important"
+});
 var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
@@ -9281,7 +9286,7 @@ function TimePicker({
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -9353,7 +9358,7 @@ function TimePicker({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -12135,6 +12140,7 @@ init_uploadService();
   TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerFormField,
+  TimePickerIconButton,
   TimePickerStyled,
   TimerPickerContentStyled,
   ToastItem,

package/dist/index.mjs

@@ -6557,6 +6557,7 @@ import { useCallback, useRef as useRef5, useState as useState3 } from "react";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
   position: "relative",
+  width: "fit-content",
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
@@ -6580,7 +6581,7 @@ var TimePickerDropdownStyled = styled("div", {
   position: "absolute",
   zIndex: 10,
   width: "100%",
-  maxWidth: "8.875rem",
+  maxWidth: "min-content",
   backgroundColor: "$neutral50",
   border: "1px solid $neutral300",
   borderRadius: "$sm",
@@ -6664,6 +6665,9 @@ var TimePickerButtonStyled = styled("button", {
     }
   }
 });
+var TimePickerIconButton = styled(Button, {
+  padding: "0 !important"
+});
 var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
@@ -6745,7 +6749,7 @@ function TimePicker({
                 },
                 children: [
                   /* @__PURE__ */ jsx14(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -6817,7 +6821,7 @@ function TimePicker({
                     }
                   ),
                   /* @__PURE__ */ jsx14(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -9556,6 +9560,7 @@ export {
   TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerFormField,
+  TimePickerIconButton,
   TimePickerStyled,
   TimerPickerContentStyled,
   ToastItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.1.5",
+  "version": "12.1.6",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/TimePicker.tsx

@@ -9,6 +9,7 @@ import { useOnClickOutside } from "../hooks/useOnClickOutside";
 
 export const TimePickerStyled = styled("div", {
   position: "relative",
+  width: "fit-content",
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
@@ -33,7 +34,7 @@ export const TimePickerDropdownStyled = styled("div", {
   position: "absolute",
   zIndex: 10,
   width: "100%",
-  maxWidth: "8.875rem",
+  maxWidth: "min-content",
   backgroundColor: "$neutral50",
   border: "1px solid $neutral300",
   borderRadius: "$sm",
@@ -121,7 +122,9 @@ export const TimePickerButtonStyled = styled("button", {
     },
   },
 });
-
+export const TimePickerIconButton = styled(Button, {
+  padding: "0 !important",
+});
 export type TimePickerProps = {
   selected: string | undefined;
   setSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -204,10 +207,10 @@ export function TimePicker({
             position === "top"
               ? { bottom: "110%", left: "0" }
               : position === "top-right"
-              ? { bottom: "110%", right: "0" }
-              : position === "bottom-right"
-              ? { top: "110%", right: "0" }
-              : { top: "110%", left: "0" }
+                ? { bottom: "110%", right: "0" }
+                : position === "bottom-right"
+                  ? { top: "110%", right: "0" }
+                  : { top: "110%", left: "0" }
           }
         >
           <TimerPickerContentStyled>
@@ -220,7 +223,7 @@ export function TimePicker({
                   flexDirection: "column",
                 }}
               >
-                <Button
+                <TimePickerIconButton
                   type="button"
                   variant="text"
                   onClick={() => handleIncrement(unit as "hours" | "minutes")}
@@ -241,7 +244,7 @@ export function TimePicker({
                       fill="#808289"
                     />
                   </svg>
-                </Button>
+                </TimePickerIconButton>
                 <InputStyled
                   inputMode="numeric"
                   pattern="[0-9]*"
@@ -277,7 +280,7 @@ export function TimePicker({
                     }
                   }}
                 />
-                <Button
+                <TimePickerIconButton
                   type="button"
                   variant="text"
                   onClick={() => handleDecrement(unit as "hours" | "minutes")}
@@ -298,7 +301,7 @@ export function TimePicker({
                       fill="#808289"
                     />
                   </svg>
-                </Button>
+                </TimePickerIconButton>
               </Box>
             ))}
             <Text>:</Text>