@lets-events/react 10.1.0 → 10.1.2

package/.turbo/turbo-build.log

@@ -1,20 +1,19 @@
 
 
-> @lets-events/react@10.1.0 build
+> @lets-events/react@10.1.2 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
-CLI Building entry: src/index.tsx
+CLI Building entry: src/index.tsx
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.4.0
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 273.05 KB
-ESM ⚡️ Build success in 364ms
-CJS dist/index.js 281.40 KB
-CJS ⚡️ Build success in 364ms
+ESM dist/index.mjs 275.16 KB
+ESM ⚡️ Build success in 279ms
+CJS dist/index.js 283.61 KB
+CJS ⚡️ Build success in 279ms
 DTS Build start
-DTS ⚡️ Build success in 7135ms
-DTS dist/index.d.mts 338.38 KB
-DTS dist/index.d.ts  338.38 KB
-⠙
+DTS ⚡️ Build success in 5671ms
+DTS dist/index.d.mts 347.67 KB
+DTS dist/index.d.ts  347.67 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 10.1.2
+
+### Patch Changes
+
+- Click area of timerPicker
+
+## 10.1.1
+
+### Patch Changes
+
+- Input of TimerPicker
+
 ## 10.1.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -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.d.ts

@@ -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,
@@ -7602,6 +7603,7 @@ var CalendarButtonStyled = styled("button", {
   border: "none",
   maxWidth: "200px",
   padding: "0",
+  cursor: "pointer",
   "> div > div": {
     paddingLeft: "1rem",
     "input": {
@@ -7974,8 +7976,34 @@ var InputStyled = styled("input", {
     color: "$dark400",
     border: "1px solid $dark200",
     cursor: "not-allowed"
+  },
+  inputMode: "numeric",
+  "&::-webkit-inner-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&::-webkit-outer-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&[type='number']": {
+    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,
   setSelected,
@@ -7983,25 +8011,21 @@ function TimePicker({
 }) {
   const [hours, setHours] = (0, import_react5.useState)("00");
   const [minutes, setMinutes] = (0, import_react5.useState)("00");
+  const [rawHours, setRawHours] = (0, import_react5.useState)("00");
+  const [rawMinutes, setRawMinutes] = (0, import_react5.useState)("00");
   const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
   const dropdownRef = (0, import_react5.useRef)(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
-  const pad = (num) => String(num).padStart(2, "0");
-  const handleInputValue = (0, import_react5.useCallback)(
-    (time) => {
-      setSelected(time);
-      setIsOpen(false);
-    },
-    [setSelected]
-  );
   const handleIncrement = (0, import_react5.useCallback)(
     (type) => {
       if (type === "hours") {
         const next = (parseInt(hours) + 1) % 24;
         setHours(pad(next));
+        setRawHours(pad(next));
       } else {
         const next = (parseInt(minutes) + 1) % 60;
         setMinutes(pad(next));
+        setRawMinutes(pad(next));
       }
     },
     [hours, minutes]
@@ -8011,25 +8035,33 @@ function TimePicker({
       if (type === "hours") {
         const prev = (parseInt(hours) - 1 + 24) % 24;
         setHours(pad(prev));
+        setRawHours(pad(prev));
       } else {
         const prev = (parseInt(minutes) - 1 + 60) % 60;
         setMinutes(pad(prev));
+        setRawMinutes(pad(prev));
       }
     },
     [hours, minutes]
   );
   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)(
@@ -8084,10 +8116,39 @@ function TimePicker({
                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     InputStyled,
                     {
-                      value: unit === "hours" ? hours : minutes,
-                      onChange: (e) => handleInputValue(e.target.value),
+                      inputMode: "numeric",
+                      pattern: "[0-9]*",
                       type: "text",
-                      placeholder: "00"
+                      placeholder: "00",
+                      value: unit === "hours" ? rawHours : rawMinutes,
+                      onChange: (e) => {
+                        const rawValue = e.target.value.replace(/\D/g, "");
+                        if (unit === "hours") {
+                          setRawHours(rawValue);
+                        } else {
+                          setRawMinutes(rawValue);
+                        }
+                      },
+                      onBlur: () => {
+                        let num = 0;
+                        if (unit === "hours") {
+                          num = Math.min(parseInt(rawHours || "0", 10), 23);
+                          const padded = pad(num);
+                          setHours(padded);
+                          setRawHours(padded);
+                        } else {
+                          num = Math.min(parseInt(rawMinutes || "0", 10), 59);
+                          const padded = pad(num);
+                          setMinutes(padded);
+                          setRawMinutes(padded);
+                        }
+                      },
+                      onPaste: (e) => {
+                        const paste = e.clipboardData.getData("Text");
+                        if (!/^\d{1,2}$/.test(paste)) {
+                          e.preventDefault();
+                        }
+                      }
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -8136,7 +8197,10 @@ function TimePicker({
               type: "button",
               variant: "text",
               color: "brand",
-              onClick: () => handleInputValue(`${hours}:${minutes}`),
+              onClick: () => {
+                setSelected(`${hours}:${minutes}`);
+                setIsOpen(false);
+              },
               typography: "buttonMedium",
               fontWeight: "medium",
               children: "Aplicar"
@@ -9272,6 +9336,7 @@ function Section(_a) {
   TextareaField,
   TextareaFieldStyle,
   TimePicker,
+  TimePickerButtonStyled,
   TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerStyled,

package/dist/index.mjs

@@ -7516,6 +7516,7 @@ var CalendarButtonStyled = styled("button", {
   border: "none",
   maxWidth: "200px",
   padding: "0",
+  cursor: "pointer",
   "> div > div": {
     paddingLeft: "1rem",
     "input": {
@@ -7888,8 +7889,34 @@ var InputStyled = styled("input", {
     color: "$dark400",
     border: "1px solid $dark200",
     cursor: "not-allowed"
+  },
+  inputMode: "numeric",
+  "&::-webkit-inner-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&::-webkit-outer-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&[type='number']": {
+    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,
   setSelected,
@@ -7897,25 +7924,21 @@ function TimePicker({
 }) {
   const [hours, setHours] = useState2("00");
   const [minutes, setMinutes] = useState2("00");
+  const [rawHours, setRawHours] = useState2("00");
+  const [rawMinutes, setRawMinutes] = useState2("00");
   const [isOpen, setIsOpen] = useState2(false);
   const dropdownRef = useRef2(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
-  const pad = (num) => String(num).padStart(2, "0");
-  const handleInputValue = useCallback(
-    (time) => {
-      setSelected(time);
-      setIsOpen(false);
-    },
-    [setSelected]
-  );
   const handleIncrement = useCallback(
     (type) => {
       if (type === "hours") {
         const next = (parseInt(hours) + 1) % 24;
         setHours(pad(next));
+        setRawHours(pad(next));
       } else {
         const next = (parseInt(minutes) + 1) % 60;
         setMinutes(pad(next));
+        setRawMinutes(pad(next));
       }
     },
     [hours, minutes]
@@ -7925,25 +7948,33 @@ function TimePicker({
       if (type === "hours") {
         const prev = (parseInt(hours) - 1 + 24) % 24;
         setHours(pad(prev));
+        setRawHours(pad(prev));
       } else {
         const prev = (parseInt(minutes) - 1 + 60) % 60;
         setMinutes(pad(prev));
+        setRawMinutes(pad(prev));
       }
     },
     [hours, minutes]
   );
   return /* @__PURE__ */ jsxs6(TimePickerStyled, { ref: dropdownRef, children: [
     /* @__PURE__ */ jsx15(
-      TextField,
+      TimePickerButtonStyled,
       {
-        value: selected,
-        readOnly: true,
-        type: "text",
-        placeholder: "00:00",
-        typography: "labelSmall",
-        fontWeight: "regular",
+        type: "button",
         onClick: () => setIsOpen((prev) => !prev),
-        children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "clock", size: "xl" }) })
+        children: /* @__PURE__ */ jsx15(
+          TextField,
+          {
+            value: selected,
+            readOnly: true,
+            type: "text",
+            placeholder: "00:00",
+            typography: "labelSmall",
+            fontWeight: "regular",
+            children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "clock", size: "xl" }) })
+          }
+        )
       }
     ),
     isOpen && /* @__PURE__ */ jsxs6(
@@ -7998,10 +8029,39 @@ function TimePicker({
                   /* @__PURE__ */ jsx15(
                     InputStyled,
                     {
-                      value: unit === "hours" ? hours : minutes,
-                      onChange: (e) => handleInputValue(e.target.value),
+                      inputMode: "numeric",
+                      pattern: "[0-9]*",
                       type: "text",
-                      placeholder: "00"
+                      placeholder: "00",
+                      value: unit === "hours" ? rawHours : rawMinutes,
+                      onChange: (e) => {
+                        const rawValue = e.target.value.replace(/\D/g, "");
+                        if (unit === "hours") {
+                          setRawHours(rawValue);
+                        } else {
+                          setRawMinutes(rawValue);
+                        }
+                      },
+                      onBlur: () => {
+                        let num = 0;
+                        if (unit === "hours") {
+                          num = Math.min(parseInt(rawHours || "0", 10), 23);
+                          const padded = pad(num);
+                          setHours(padded);
+                          setRawHours(padded);
+                        } else {
+                          num = Math.min(parseInt(rawMinutes || "0", 10), 59);
+                          const padded = pad(num);
+                          setMinutes(padded);
+                          setRawMinutes(padded);
+                        }
+                      },
+                      onPaste: (e) => {
+                        const paste = e.clipboardData.getData("Text");
+                        if (!/^\d{1,2}$/.test(paste)) {
+                          e.preventDefault();
+                        }
+                      }
                     }
                   ),
                   /* @__PURE__ */ jsx15(
@@ -8050,7 +8110,10 @@ function TimePicker({
               type: "button",
               variant: "text",
               color: "brand",
-              onClick: () => handleInputValue(`${hours}:${minutes}`),
+              onClick: () => {
+                setSelected(`${hours}:${minutes}`);
+                setIsOpen(false);
+              },
               typography: "buttonMedium",
               fontWeight: "medium",
               children: "Aplicar"
@@ -9185,6 +9248,7 @@ export {
   TextareaField,
   TextareaFieldStyle,
   TimePicker,
+  TimePickerButtonStyled,
   TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerStyled,

package/package.json

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

package/src/components/Calendar/styledComponents.ts

@@ -12,6 +12,7 @@ export const CalendarButtonStyled = styled('button', {
     border: 'none',
     maxWidth: '200px',
     padding: '0',
+    cursor: 'pointer',
     '> div > div': {
         paddingLeft: '1rem',
         'input': {

package/src/components/TimePicker.tsx

@@ -81,6 +81,32 @@ export const InputStyled = styled("input", {
     border: "1px solid $dark200",
     cursor: "not-allowed",
   },
+  inputMode: "numeric",
+  "&::-webkit-inner-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0,
+  },
+  "&::-webkit-outer-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0,
+  },
+  "&[type='number']": {
+    MozAppearance: "textfield",
+  },
+});
+
+export const TimePickerButtonStyled = styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  maxWidth: "200px",
+  padding: "0",
+  cursor: "pointer",
+  "> div > div": {
+    paddingLeft: "1rem",
+    input: {
+      textAlign: "right",
+    },
+  },
 });
 
 export type TimePickerProps = {
@@ -88,6 +114,7 @@ export type TimePickerProps = {
   setSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
   position?: "bottom" | "top";
 };
+const pad = (num: number) => String(num).padStart(2, "0");
 
 export function TimePicker({
   selected,
@@ -96,29 +123,23 @@ export function TimePicker({
 }: TimePickerProps) {
   const [hours, setHours] = useState("00");
   const [minutes, setMinutes] = useState("00");
+  const [rawHours, setRawHours] = useState("00");
+  const [rawMinutes, setRawMinutes] = useState("00");
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
 
-  const pad = (num: number) => String(num).padStart(2, "0");
-
-  const handleInputValue = useCallback(
-    (time: string) => {
-      setSelected(time);
-      setIsOpen(false);
-    },
-    [setSelected]
-  );
-
   const handleIncrement = useCallback(
     (type: "hours" | "minutes") => {
       if (type === "hours") {
         const next = (parseInt(hours) + 1) % 24;
         setHours(pad(next));
+        setRawHours(pad(next));
       } else {
         const next = (parseInt(minutes) + 1) % 60;
         setMinutes(pad(next));
+        setRawMinutes(pad(next));
       }
     },
     [hours, minutes]
@@ -128,9 +149,11 @@ export function TimePicker({
       if (type === "hours") {
         const prev = (parseInt(hours) - 1 + 24) % 24;
         setHours(pad(prev));
+        setRawHours(pad(prev));
       } else {
         const prev = (parseInt(minutes) - 1 + 60) % 60;
         setMinutes(pad(prev));
+        setRawMinutes(pad(prev));
       }
     },
     [hours, minutes]
@@ -138,19 +161,23 @@ export function TimePicker({
 
   return (
     <TimePickerStyled ref={dropdownRef}>
-      <TextField
-        value={selected}
-        readOnly
-        type="text"
-        placeholder="00:00"
-        typography="labelSmall"
-        fontWeight="regular"
+      <TimePickerButtonStyled
+        type="button"
         onClick={() => setIsOpen((prev) => !prev)}
       >
-        <TextFieldSlot>
-          <Icon name="clock" size="xl" />
-        </TextFieldSlot>
-      </TextField>
+        <TextField
+          value={selected}
+          readOnly
+          type="text"
+          placeholder="00:00"
+          typography="labelSmall"
+          fontWeight="regular"
+        >
+          <TextFieldSlot>
+            <Icon name="clock" size="xl" />
+          </TextFieldSlot>
+        </TextField>
+      </TimePickerButtonStyled>
 
       {isOpen && (
         <TimePickerDropdownStyled
@@ -189,10 +216,39 @@ export function TimePicker({
                   </svg>
                 </Button>
                 <InputStyled
-                  value={unit === "hours" ? hours : minutes}
-                  onChange={(e) => handleInputValue(e.target.value)}
+                  inputMode="numeric"
+                  pattern="[0-9]*"
                   type="text"
                   placeholder="00"
+                  value={unit === "hours" ? rawHours : rawMinutes}
+                  onChange={(e) => {
+                    const rawValue = e.target.value.replace(/\D/g, "");
+                    if (unit === "hours") {
+                      setRawHours(rawValue);
+                    } else {
+                      setRawMinutes(rawValue);
+                    }
+                  }}
+                  onBlur={() => {
+                    let num = 0;
+                    if (unit === "hours") {
+                      num = Math.min(parseInt(rawHours || "0", 10), 23);
+                      const padded = pad(num);
+                      setHours(padded);
+                      setRawHours(padded);
+                    } else {
+                      num = Math.min(parseInt(rawMinutes || "0", 10), 59);
+                      const padded = pad(num);
+                      setMinutes(padded);
+                      setRawMinutes(padded);
+                    }
+                  }}
+                  onPaste={(e) => {
+                    const paste = e.clipboardData.getData("Text");
+                    if (!/^\d{1,2}$/.test(paste)) {
+                      e.preventDefault();
+                    }
+                  }}
                 />
                 <Button
                   type="button"
@@ -225,7 +281,10 @@ export function TimePicker({
               type="button"
               variant="text"
               color="brand"
-              onClick={() => handleInputValue(`${hours}:${minutes}`)}
+              onClick={() => {
+                setSelected(`${hours}:${minutes}`);
+                setIsOpen(false);
+              }}
               typography="buttonMedium"
               fontWeight="medium"
             >