@mlw-packages/react-components 1.9.1 → 1.9.2

package/README.md

@@ -123,117 +123,6 @@ Use **Controls** para testar props dinamicamente e **Docs** para copiar snippets
 
 ---
 
-### Lista completa de componentes
-
-Abaixo está a lista completa de componentes :
-
-- AlertDialog
-
-- Avatar
-
-- Badge
-
-- BarChart
-
-- Breadcrumb
-
-- Button
-
-- Calendar
-
-- Card
-
-- Carousel
-
-- Chart
-
-- CheckBox
-
-- Collapsible
-
-- Combobox
-
-- ComboboxBase
-
-- Command
-
-- ContextMenu
-
-- DateTimePicker
-
-- DebouncedInput
-
-- DestructiveDialog
-
-- Dialog
-
-- DraggableTooltip
-
-- Drawer
-
-- DropDownMenu
-
-- FileUploader
-
-- Filter
-
-- Home
-
-- HoverCard
-
-- Input
-
-- Input-OTP
-
-- Label
-
-- LineChart
-
-- Loading
-
-- Modal
-
-- ModeToggle
-
-- MultiCombobox
-
-- NavigationMenu
-
-- PieChart
-
-- Popover
-
-- rogress
-
-- RangePicker
-
-- Scrollarea
-
-- Select
-
-- Separator
-
-- Sheet
-
-- Sidebar
-
-- Skeleton
-
-- Slider
-
-- Sonner
-
-- Switch
-
-- Table
-
-- Tabs
-
-- TextArea
-
-- Tooltip
-
----
 
 ## Desenvolvimento local
 

package/dist/index.css

@@ -1049,8 +1049,8 @@ body {
 .max-h-\[300px\] {
   max-height: 300px;
 }
-.max-h-\[65vh\] {
-  max-height: 65vh;
+.max-h-\[95vh\] {
+  max-height: 95vh;
 }
 .max-h-\[calc\(100dvh-2rem\)\] {
   max-height: calc(100dvh - 2rem);
@@ -2716,9 +2716,6 @@ body {
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
-.bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
 .from-background {
   --tw-gradient-from: hsl(var(--background)) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
@@ -2754,13 +2751,6 @@ body {
   --tw-gradient-to: hsl(var(--ring) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.via-background\/80 {
-  --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops:
-    var(--tw-gradient-from),
-    hsl(var(--background) / 0.8) var(--tw-gradient-via-position),
-    var(--tw-gradient-to);
-}
 .via-ring\/10 {
   --tw-gradient-to: hsl(var(--ring) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops:
@@ -2786,9 +2776,6 @@ body {
 .to-ring\/20 {
   --tw-gradient-to: hsl(var(--ring) / 0.2) var(--tw-gradient-to-position);
 }
-.to-transparent {
-  --tw-gradient-to: transparent var(--tw-gradient-to-position);
-}
 .bg-clip-text {
   -webkit-background-clip: text;
   background-clip: text;

package/dist/index.js

@@ -670,7 +670,7 @@ var DialogOverlayBase = React33__namespace.forwardRef(({ className, testid: data
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  border-border",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ",
       className
     ),
     "data-testid": dataTestId,
@@ -1315,15 +1315,27 @@ var toast = {
 };
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React33__namespace.useState(void 0);
+  const [isMobile, setIsMobile] = React33__namespace.useState(
+    void 0
+  );
   React33__namespace.useEffect(() => {
+    const checkIsMobile = () => {
+      const isTouch = window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0;
+      const isSmallScreen = window.innerWidth < MOBILE_BREAKPOINT;
+      return isTouch || isSmallScreen;
+    };
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const touchMql = window.matchMedia("(pointer: coarse)");
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+      setIsMobile(checkIsMobile());
     };
     mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+    touchMql.addEventListener("change", onChange);
+    setIsMobile(checkIsMobile());
+    return () => {
+      mql.removeEventListener("change", onChange);
+      touchMql.removeEventListener("change", onChange);
+    };
   }, []);
   return !!isMobile;
 }
@@ -7764,13 +7776,11 @@ function ScrollColumn({
   } = useScrollColumn({ value, onChange, max, step });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground rounded-md font-semibold text-sm text-center pb-2 uppercase tracking-wider", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-24 sm:w-20"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background via-background/80 to-transparent pointer-events-none z-20" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background via-background/80 to-transparent pointer-events-none z-20" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-20"), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "absolute left-0 right-0 pointer-events-none bg-muted/50 backdrop-blur-sm rounded-md border border-border",
+          className: "absolute left-0 right-0 pointer-events-none bg-muted/50  rounded-md border border-border",
           style: {
             top: `${centerIndex * itemHeight}px`,
             height: `${itemHeight}px`
@@ -8154,7 +8164,7 @@ function DateTimePicker({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage_default, { error }),
-      /* @__PURE__ */ jsxRuntime.jsx(DialogContentBase, { className: "p-0 max-h-[65vh] w-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1", children: renderPickerContent() }) })
+      /* @__PURE__ */ jsxRuntime.jsx(DialogContentBase, { className: "p-0 max-h-[95vh] w-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1", children: renderPickerContent() }) })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(PopoverBase, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         PopoverTriggerBase,

package/dist/index.mjs

@@ -627,7 +627,7 @@ var DialogOverlayBase = React33.forwardRef(({ className, testid: dataTestId = "d
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  border-border",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ",
       className
     ),
     "data-testid": dataTestId,
@@ -1272,15 +1272,27 @@ var toast = {
 };
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React33.useState(void 0);
+  const [isMobile, setIsMobile] = React33.useState(
+    void 0
+  );
   React33.useEffect(() => {
+    const checkIsMobile = () => {
+      const isTouch = window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0;
+      const isSmallScreen = window.innerWidth < MOBILE_BREAKPOINT;
+      return isTouch || isSmallScreen;
+    };
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const touchMql = window.matchMedia("(pointer: coarse)");
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+      setIsMobile(checkIsMobile());
     };
     mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+    touchMql.addEventListener("change", onChange);
+    setIsMobile(checkIsMobile());
+    return () => {
+      mql.removeEventListener("change", onChange);
+      touchMql.removeEventListener("change", onChange);
+    };
   }, []);
   return !!isMobile;
 }
@@ -7721,13 +7733,11 @@ function ScrollColumn({
   } = useScrollColumn({ value, onChange, max, step });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
     /* @__PURE__ */ jsx("span", { className: "text-muted-foreground rounded-md font-semibold text-sm text-center pb-2 uppercase tracking-wider", children: label }),
-    /* @__PURE__ */ jsxs("div", { className: cn("relative w-24 sm:w-20"), children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background via-background/80 to-transparent pointer-events-none z-20" }),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background via-background/80 to-transparent pointer-events-none z-20" }),
+    /* @__PURE__ */ jsxs("div", { className: cn("relative w-20"), children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "absolute left-0 right-0 pointer-events-none bg-muted/50 backdrop-blur-sm rounded-md border border-border",
+          className: "absolute left-0 right-0 pointer-events-none bg-muted/50  rounded-md border border-border",
           style: {
             top: `${centerIndex * itemHeight}px`,
             height: `${itemHeight}px`
@@ -8111,7 +8121,7 @@ function DateTimePicker({
         }
       ),
       /* @__PURE__ */ jsx(ErrorMessage_default, { error }),
-      /* @__PURE__ */ jsx(DialogContentBase, { className: "p-0 max-h-[65vh] w-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto flex-1", children: renderPickerContent() }) })
+      /* @__PURE__ */ jsx(DialogContentBase, { className: "p-0 max-h-[95vh] w-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto flex-1", children: renderPickerContent() }) })
     ] }) : /* @__PURE__ */ jsxs(PopoverBase, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx(
         PopoverTriggerBase,

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.9.1",
+  "version": "1.9.2",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",