@mlw-packages/react-components 1.7.24 → 1.7.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +0 -3
  2. package/dist/index.d.mts +3 -2
  3. package/dist/index.d.ts +3 -2
  4. package/dist/index.js +40 -48
  5. package/dist/index.mjs +41 -49
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -5585,9 +5585,6 @@ body {
5585
5585
  .dark\:hover\:bg-emerald-400\/20:hover:is(.dark *) {
5586
5586
  background-color: rgb(52 211 153 / 0.2);
5587
5587
  }
5588
- .dark\:hover\:bg-input\/50:hover:is(.dark *) {
5589
- background-color: hsl(var(--input) / 0.5);
5590
- }
5591
5588
  .dark\:hover\:bg-orange-400\/20:hover:is(.dark *) {
5592
5589
  background-color: rgb(251 146 60 / 0.2);
5593
5590
  }
package/dist/index.d.mts CHANGED
@@ -792,7 +792,8 @@ type BannerProps = {
792
792
  interface DateTimePickerProps extends ErrorMessageProps {
793
793
  label?: string;
794
794
  date: Date | undefined;
795
- onChange: (date: Date | undefined) => void;
795
+ onChange?: (date: Date | undefined) => void;
796
+ onConfirm?: (date: Date | undefined) => void;
796
797
  displayFormat?: boolean;
797
798
  hideTime?: boolean;
798
799
  hideSeconds?: boolean;
@@ -802,7 +803,7 @@ interface DateTimePickerProps extends ErrorMessageProps {
802
803
  className?: string;
803
804
  error?: string;
804
805
  }
805
- declare function DateTimePicker({ label, date, onChange, displayFormat, hideTime, hideSeconds, fromDate, toDate, disabled, className, error, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
806
+ declare function DateTimePicker({ label, date, onChange, onConfirm, displayFormat, hideTime, hideSeconds, fromDate, toDate, disabled, className, error, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
806
807
 
807
808
  interface RangePickerProps extends ErrorMessageProps {
808
809
  value?: DateRange;
package/dist/index.d.ts CHANGED
@@ -792,7 +792,8 @@ type BannerProps = {
792
792
  interface DateTimePickerProps extends ErrorMessageProps {
793
793
  label?: string;
794
794
  date: Date | undefined;
795
- onChange: (date: Date | undefined) => void;
795
+ onChange?: (date: Date | undefined) => void;
796
+ onConfirm?: (date: Date | undefined) => void;
796
797
  displayFormat?: boolean;
797
798
  hideTime?: boolean;
798
799
  hideSeconds?: boolean;
@@ -802,7 +803,7 @@ interface DateTimePickerProps extends ErrorMessageProps {
802
803
  className?: string;
803
804
  error?: string;
804
805
  }
805
- declare function DateTimePicker({ label, date, onChange, displayFormat, hideTime, hideSeconds, fromDate, toDate, disabled, className, error, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
806
+ declare function DateTimePicker({ label, date, onChange, onConfirm, displayFormat, hideTime, hideSeconds, fromDate, toDate, disabled, className, error, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
806
807
 
807
808
  interface RangePickerProps extends ErrorMessageProps {
808
809
  value?: DateRange;
package/dist/index.js CHANGED
@@ -7864,6 +7864,7 @@ function DateTimePicker({
7864
7864
  label,
7865
7865
  date,
7866
7866
  onChange,
7867
+ onConfirm,
7867
7868
  displayFormat,
7868
7869
  hideTime,
7869
7870
  hideSeconds,
@@ -7880,18 +7881,18 @@ function DateTimePicker({
7880
7881
  if (!newDay) return;
7881
7882
  if (!internalDate) {
7882
7883
  setInternalDate(newDay);
7883
- onChange(newDay);
7884
+ onChange?.(newDay);
7884
7885
  return;
7885
7886
  }
7886
7887
  const diff = newDay.getTime() - internalDate.getTime();
7887
7888
  const diffInDays = diff / (1e3 * 60 * 60 * 24);
7888
7889
  const newDateFull = (0, import_date_fns.add)(internalDate, { days: Math.ceil(diffInDays) });
7889
7890
  setInternalDate(newDateFull);
7890
- onChange(newDateFull);
7891
+ onChange?.(newDateFull);
7891
7892
  };
7892
7893
  const handleTimeChange = (newDate) => {
7893
7894
  setInternalDate(newDate);
7894
- onChange(newDate);
7895
+ onChange?.(newDate);
7895
7896
  };
7896
7897
  const getTimeFormat = () => {
7897
7898
  if (hideTime) return "";
@@ -7918,10 +7919,11 @@ function DateTimePicker({
7918
7919
  disabled,
7919
7920
  asChild: true,
7920
7921
  className: cn(error && "border-red-500"),
7921
- children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
7922
+ children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
7922
7923
  ButtonBase,
7923
7924
  {
7924
7925
  variant: "outline",
7926
+ disabled,
7925
7927
  className: cn(
7926
7928
  "w-full justify-start text-left min-w-0 overflow-hidden",
7927
7929
  !date && "text-muted-foreground"
@@ -7943,7 +7945,7 @@ function DateTimePicker({
7943
7945
  className: "-mr-3",
7944
7946
  onClick: () => {
7945
7947
  setInternalDate(void 0);
7946
- onChange(void 0);
7948
+ onChange?.(void 0);
7947
7949
  setOpen(false);
7948
7950
  }
7949
7951
  }
@@ -7951,7 +7953,7 @@ function DateTimePicker({
7951
7953
  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react43.CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
7952
7954
  ]
7953
7955
  }
7954
- ) })
7956
+ )
7955
7957
  }
7956
7958
  ),
7957
7959
  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ErrorMessage_default, { error }),
@@ -8055,7 +8057,7 @@ function DateTimePicker({
8055
8057
  className: "no-active-animation rounded-none bg-emerald-600 hover:bg-emerald-700",
8056
8058
  onClick: () => {
8057
8059
  setOpen(false);
8058
- onChange(internalDate);
8060
+ onConfirm?.(internalDate);
8059
8061
  },
8060
8062
  children: "Confirmar"
8061
8063
  }
@@ -8088,7 +8090,6 @@ function RangePicker({
8088
8090
  }) {
8089
8091
  const [open, setOpen] = React40.useState(false);
8090
8092
  const [range, setRange] = React40.useState(value);
8091
- const controls = (0, import_framer_motion13.useAnimation)();
8092
8093
  React40.useEffect(() => {
8093
8094
  setRange(value);
8094
8095
  }, [value]);
@@ -8101,46 +8102,37 @@ function RangePicker({
8101
8102
  onChange?.(void 0);
8102
8103
  };
8103
8104
  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(PopoverBase, { open, onOpenChange: setOpen, children: [
8104
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PopoverTriggerBase, { asChild: true, className: cn(error && "border-red-500"), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
8105
- import_framer_motion13.motion.div,
8105
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PopoverTriggerBase, { asChild: true, className: cn(error && "border-red-500"), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
8106
+ ButtonBase,
8106
8107
  {
8107
- whileTap: { scale: 0.97 },
8108
- whileHover: { scale: open ? 1.03 : 1.01 },
8109
- transition: { type: "spring", stiffness: 300, damping: 20 },
8110
- children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
8111
- ButtonBase,
8112
- {
8113
- variant: "outline",
8114
- className: cn(
8115
- "w-full justify-start text-left min-w-0 overflow-hidden",
8116
- !range && "text-muted-foreground"
8117
- ),
8118
- children: [
8119
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
8120
- import_framer_motion13.motion.span,
8121
- {
8122
- className: cn(
8123
- "truncate flex-1",
8124
- !range && "text-muted-foreground"
8125
- ),
8126
- transition: { duration: 0.2 },
8127
- animate: controls,
8128
- children: range?.from && range?.to ? `${(0, import_date_fns2.format)(range.from, "P", {
8129
- locale: dateFnsLocale
8130
- })} - ${(0, import_date_fns2.format)(range.to, "P", { locale: dateFnsLocale })}` : label
8131
- }
8132
- ),
8133
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
8134
- import_framer_motion13.motion.span,
8135
- {
8136
- animate: open ? { rotate: 8, scale: 1.15 } : { rotate: 0, scale: 1 },
8137
- transition: { type: "spring", stiffness: 300, damping: 18 },
8138
- children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react44.CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
8139
- }
8140
- )
8141
- ]
8142
- }
8143
- )
8108
+ variant: "outline",
8109
+ className: cn(
8110
+ "w-full justify-start text-left min-w-0 overflow-hidden",
8111
+ !range && "text-muted-foreground"
8112
+ ),
8113
+ children: [
8114
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
8115
+ "span",
8116
+ {
8117
+ className: cn("truncate flex-1", !range && "text-muted-foreground"),
8118
+ children: range?.from && range?.to ? `${(0, import_date_fns2.format)(range.from, "P", {
8119
+ locale: dateFnsLocale
8120
+ })} - ${(0, import_date_fns2.format)(range.to, "P", { locale: dateFnsLocale })}` : label
8121
+ }
8122
+ ),
8123
+ range && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
8124
+ ClearButton,
8125
+ {
8126
+ className: "-mr-3",
8127
+ onClick: () => {
8128
+ setRange(void 0);
8129
+ onChange?.(void 0);
8130
+ setOpen(false);
8131
+ }
8132
+ }
8133
+ ),
8134
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react44.CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
8135
+ ]
8144
8136
  }
8145
8137
  ) }),
8146
8138
  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ErrorMessage_default, { error }),
@@ -13504,7 +13496,7 @@ function MultiSelectTriggerBase({
13504
13496
  "aria-disabled": disabled || void 0,
13505
13497
  disabled,
13506
13498
  className: cn(
13507
- "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
13499
+ "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
13508
13500
  error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input focus:ring-1 focus:ring-ring",
13509
13501
  className
13510
13502
  ),
package/dist/index.mjs CHANGED
@@ -7548,6 +7548,7 @@ function DateTimePicker({
7548
7548
  label,
7549
7549
  date,
7550
7550
  onChange,
7551
+ onConfirm,
7551
7552
  displayFormat,
7552
7553
  hideTime,
7553
7554
  hideSeconds,
@@ -7564,18 +7565,18 @@ function DateTimePicker({
7564
7565
  if (!newDay) return;
7565
7566
  if (!internalDate) {
7566
7567
  setInternalDate(newDay);
7567
- onChange(newDay);
7568
+ onChange?.(newDay);
7568
7569
  return;
7569
7570
  }
7570
7571
  const diff = newDay.getTime() - internalDate.getTime();
7571
7572
  const diffInDays = diff / (1e3 * 60 * 60 * 24);
7572
7573
  const newDateFull = add(internalDate, { days: Math.ceil(diffInDays) });
7573
7574
  setInternalDate(newDateFull);
7574
- onChange(newDateFull);
7575
+ onChange?.(newDateFull);
7575
7576
  };
7576
7577
  const handleTimeChange = (newDate) => {
7577
7578
  setInternalDate(newDate);
7578
- onChange(newDate);
7579
+ onChange?.(newDate);
7579
7580
  };
7580
7581
  const getTimeFormat = () => {
7581
7582
  if (hideTime) return "";
@@ -7602,10 +7603,11 @@ function DateTimePicker({
7602
7603
  disabled,
7603
7604
  asChild: true,
7604
7605
  className: cn(error && "border-red-500"),
7605
- children: /* @__PURE__ */ jsx59("div", { children: /* @__PURE__ */ jsxs40(
7606
+ children: /* @__PURE__ */ jsxs40(
7606
7607
  ButtonBase,
7607
7608
  {
7608
7609
  variant: "outline",
7610
+ disabled,
7609
7611
  className: cn(
7610
7612
  "w-full justify-start text-left min-w-0 overflow-hidden",
7611
7613
  !date && "text-muted-foreground"
@@ -7627,7 +7629,7 @@ function DateTimePicker({
7627
7629
  className: "-mr-3",
7628
7630
  onClick: () => {
7629
7631
  setInternalDate(void 0);
7630
- onChange(void 0);
7632
+ onChange?.(void 0);
7631
7633
  setOpen(false);
7632
7634
  }
7633
7635
  }
@@ -7635,7 +7637,7 @@ function DateTimePicker({
7635
7637
  /* @__PURE__ */ jsx59(CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
7636
7638
  ]
7637
7639
  }
7638
- ) })
7640
+ )
7639
7641
  }
7640
7642
  ),
7641
7643
  /* @__PURE__ */ jsx59(ErrorMessage_default, { error }),
@@ -7739,7 +7741,7 @@ function DateTimePicker({
7739
7741
  className: "no-active-animation rounded-none bg-emerald-600 hover:bg-emerald-700",
7740
7742
  onClick: () => {
7741
7743
  setOpen(false);
7742
- onChange(internalDate);
7744
+ onConfirm?.(internalDate);
7743
7745
  },
7744
7746
  children: "Confirmar"
7745
7747
  }
@@ -7764,7 +7766,7 @@ import {
7764
7766
  CaretRightIcon as CaretRightIcon6,
7765
7767
  CalendarBlankIcon as CalendarBlankIcon2
7766
7768
  } from "@phosphor-icons/react";
7767
- import { motion as motion12, AnimatePresence as AnimatePresence9, useAnimation } from "framer-motion";
7769
+ import { motion as motion12, AnimatePresence as AnimatePresence9 } from "framer-motion";
7768
7770
  import { CalendarDotIcon } from "@phosphor-icons/react/dist/ssr";
7769
7771
  import { jsx as jsx60, jsxs as jsxs41 } from "react/jsx-runtime";
7770
7772
  var dateFnsLocale = ptBR2?.default ?? ptBR2;
@@ -7778,7 +7780,6 @@ function RangePicker({
7778
7780
  }) {
7779
7781
  const [open, setOpen] = React40.useState(false);
7780
7782
  const [range, setRange] = React40.useState(value);
7781
- const controls = useAnimation();
7782
7783
  React40.useEffect(() => {
7783
7784
  setRange(value);
7784
7785
  }, [value]);
@@ -7791,46 +7792,37 @@ function RangePicker({
7791
7792
  onChange?.(void 0);
7792
7793
  };
7793
7794
  return /* @__PURE__ */ jsxs41(PopoverBase, { open, onOpenChange: setOpen, children: [
7794
- /* @__PURE__ */ jsx60(PopoverTriggerBase, { asChild: true, className: cn(error && "border-red-500"), children: /* @__PURE__ */ jsx60(
7795
- motion12.div,
7795
+ /* @__PURE__ */ jsx60(PopoverTriggerBase, { asChild: true, className: cn(error && "border-red-500"), children: /* @__PURE__ */ jsxs41(
7796
+ ButtonBase,
7796
7797
  {
7797
- whileTap: { scale: 0.97 },
7798
- whileHover: { scale: open ? 1.03 : 1.01 },
7799
- transition: { type: "spring", stiffness: 300, damping: 20 },
7800
- children: /* @__PURE__ */ jsxs41(
7801
- ButtonBase,
7802
- {
7803
- variant: "outline",
7804
- className: cn(
7805
- "w-full justify-start text-left min-w-0 overflow-hidden",
7806
- !range && "text-muted-foreground"
7807
- ),
7808
- children: [
7809
- /* @__PURE__ */ jsx60(
7810
- motion12.span,
7811
- {
7812
- className: cn(
7813
- "truncate flex-1",
7814
- !range && "text-muted-foreground"
7815
- ),
7816
- transition: { duration: 0.2 },
7817
- animate: controls,
7818
- children: range?.from && range?.to ? `${format2(range.from, "P", {
7819
- locale: dateFnsLocale
7820
- })} - ${format2(range.to, "P", { locale: dateFnsLocale })}` : label
7821
- }
7822
- ),
7823
- /* @__PURE__ */ jsx60(
7824
- motion12.span,
7825
- {
7826
- animate: open ? { rotate: 8, scale: 1.15 } : { rotate: 0, scale: 1 },
7827
- transition: { type: "spring", stiffness: 300, damping: 18 },
7828
- children: /* @__PURE__ */ jsx60(CalendarBlankIcon2, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
7829
- }
7830
- )
7831
- ]
7832
- }
7833
- )
7798
+ variant: "outline",
7799
+ className: cn(
7800
+ "w-full justify-start text-left min-w-0 overflow-hidden",
7801
+ !range && "text-muted-foreground"
7802
+ ),
7803
+ children: [
7804
+ /* @__PURE__ */ jsx60(
7805
+ "span",
7806
+ {
7807
+ className: cn("truncate flex-1", !range && "text-muted-foreground"),
7808
+ children: range?.from && range?.to ? `${format2(range.from, "P", {
7809
+ locale: dateFnsLocale
7810
+ })} - ${format2(range.to, "P", { locale: dateFnsLocale })}` : label
7811
+ }
7812
+ ),
7813
+ range && /* @__PURE__ */ jsx60(
7814
+ ClearButton,
7815
+ {
7816
+ className: "-mr-3",
7817
+ onClick: () => {
7818
+ setRange(void 0);
7819
+ onChange?.(void 0);
7820
+ setOpen(false);
7821
+ }
7822
+ }
7823
+ ),
7824
+ /* @__PURE__ */ jsx60(CalendarBlankIcon2, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
7825
+ ]
7834
7826
  }
7835
7827
  ) }),
7836
7828
  /* @__PURE__ */ jsx60(ErrorMessage_default, { error }),
@@ -13323,7 +13315,7 @@ function MultiSelectTriggerBase({
13323
13315
  "aria-disabled": disabled || void 0,
13324
13316
  disabled,
13325
13317
  className: cn(
13326
- "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
13318
+ "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
13327
13319
  error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input focus:ring-1 focus:ring-ring",
13328
13320
  className
13329
13321
  ),
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "1.7.24",
6
+ "version": "1.7.25",
7
7
  "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
8
8
  "repository": {
9
9
  "type": "git",