@mlw-packages/react-components 1.7.5 → 1.7.6

package/dist/index.mjs

@@ -26,9 +26,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// node_modules/picocolors/picocolors.browser.js
+// node_modules/.pnpm/picocolors@1.1.1/node_modules/picocolors/picocolors.browser.js
 var require_picocolors_browser = __commonJS({
-  "node_modules/picocolors/picocolors.browser.js"(exports, module) {
+  "node_modules/.pnpm/picocolors@1.1.1/node_modules/picocolors/picocolors.browser.js"(exports, module) {
     "use strict";
     var x = String;
     var create = function() {
@@ -39,9 +39,9 @@ var require_picocolors_browser = __commonJS({
   }
 });
 
-// node_modules/tailwindcss/lib/util/log.js
+// node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/util/log.js
 var require_log = __commonJS({
-  "node_modules/tailwindcss/lib/util/log.js"(exports) {
+  "node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/util/log.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", {
       value: true
@@ -106,9 +106,9 @@ var require_log = __commonJS({
   }
 });
 
-// node_modules/tailwindcss/lib/public/colors.js
+// node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/public/colors.js
 var require_colors = __commonJS({
-  "node_modules/tailwindcss/lib/public/colors.js"(exports) {
+  "node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/public/colors.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", {
       value: true
@@ -467,9 +467,9 @@ var require_colors = __commonJS({
   }
 });
 
-// node_modules/tailwindcss/colors.js
+// node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/colors.js
 var require_colors2 = __commonJS({
-  "node_modules/tailwindcss/colors.js"(exports, module) {
+  "node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/colors.js"(exports, module) {
     "use strict";
     var colors2 = require_colors();
     module.exports = (colors2.__esModule ? colors2 : { default: colors2 }).default;
@@ -5645,204 +5645,52 @@ AvatarFallbackBase.displayName = AvatarPrimitive.Fallback.displayName;
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { cva as cva2 } from "class-variance-authority";
 import { jsx as jsx32 } from "react/jsx-runtime";
-var tailwindColors = {
-  // Red
-  "red-50": "#fef2f2",
-  "red-100": "#fee2e2",
-  "red-200": "#fecaca",
-  "red-300": "#fca5a5",
-  "red-400": "#f87171",
-  "red-500": "#ef4444",
-  "red-600": "#dc2626",
-  "red-700": "#b91c1c",
-  "red-800": "#991b1b",
-  "red-900": "#7f1d1d",
-  // Orange
-  "orange-50": "#fff7ed",
-  "orange-100": "#ffedd5",
-  "orange-200": "#fed7aa",
-  "orange-300": "#fdba74",
-  "orange-400": "#fb923c",
-  "orange-500": "#f97316",
-  "orange-600": "#ea580c",
-  "orange-700": "#c2410c",
-  "orange-800": "#9a3412",
-  "orange-900": "#7c2d12",
-  // Yellow
-  "yellow-50": "#fefce8",
-  "yellow-100": "#fef3c7",
-  "yellow-200": "#fde68a",
-  "yellow-300": "#fcd34d",
-  "yellow-400": "#fbbf24",
-  "yellow-500": "#f59e0b",
-  "yellow-600": "#d97706",
-  "yellow-700": "#b45309",
-  "yellow-800": "#92400e",
-  "yellow-900": "#78350f",
-  // Green
-  "green-50": "#f0fdf4",
-  "green-100": "#dcfce7",
-  "green-200": "#bbf7d0",
-  "green-300": "#86efac",
-  "green-400": "#4ade80",
-  "green-500": "#22c55e",
-  "green-600": "#16a34a",
-  "green-700": "#15803d",
-  "green-800": "#166534",
-  "green-900": "#14532d",
-  // Blue
-  "blue-50": "#eff6ff",
-  "blue-100": "#dbeafe",
-  "blue-200": "#bfdbfe",
-  "blue-300": "#93c5fd",
-  "blue-400": "#60a5fa",
-  "blue-500": "#3b82f6",
-  "blue-600": "#2563eb",
-  "blue-700": "#1d4ed8",
-  "blue-800": "#1e40af",
-  "blue-900": "#1e3a8a",
-  // Purple
-  "purple-50": "#faf5ff",
-  "purple-100": "#f3e8ff",
-  "purple-200": "#e9d5ff",
-  "purple-300": "#d8b4fe",
-  "purple-400": "#c084fc",
-  "purple-500": "#a855f7",
-  "purple-600": "#9333ea",
-  "purple-700": "#7c3aed",
-  "purple-800": "#6b21a8",
-  "purple-900": "#581c87",
-  // Pink
-  "pink-50": "#fdf2f8",
-  "pink-100": "#fce7f3",
-  "pink-200": "#fbcfe8",
-  "pink-300": "#f9a8d4",
-  "pink-400": "#f472b6",
-  "pink-500": "#ec4899",
-  "pink-600": "#db2777",
-  "pink-700": "#be185d",
-  "pink-800": "#9d174d",
-  "pink-900": "#831843",
-  // Gray
-  "gray-50": "#f9fafb",
-  "gray-100": "#f3f4f6",
-  "gray-200": "#e5e7eb",
-  "gray-300": "#d1d5db",
-  "gray-400": "#9ca3af",
-  "gray-500": "#6b7280",
-  "gray-600": "#4b5563",
-  "gray-700": "#374151",
-  "gray-800": "#1f2937",
-  "gray-900": "#111827",
-  // Indigo
-  "indigo-50": "#eef2ff",
-  "indigo-100": "#e0e7ff",
-  "indigo-200": "#c7d2fe",
-  "indigo-300": "#a5b4fc",
-  "indigo-400": "#818cf8",
-  "indigo-500": "#6366f1",
-  "indigo-600": "#4f46e5",
-  "indigo-700": "#4338ca",
-  "indigo-800": "#3730a3",
-  "indigo-900": "#312e81",
-  // Teal
-  "teal-50": "#f0fdfa",
-  "teal-100": "#ccfbf1",
-  "teal-200": "#99f6e4",
-  "teal-300": "#5eead4",
-  "teal-400": "#2dd4bf",
-  "teal-500": "#14b8a6",
-  "teal-600": "#0d9488",
-  "teal-700": "#0f766e",
-  "teal-800": "#115e59",
-  "teal-900": "#134e4a",
-  // Emerald
-  "emerald-50": "#ecfdf5",
-  "emerald-100": "#d1fae5",
-  "emerald-200": "#a7f3d0",
-  "emerald-300": "#6ee7b7",
-  "emerald-400": "#34d399",
-  "emerald-500": "#10b981",
-  "emerald-600": "#059669",
-  "emerald-700": "#047857",
-  "emerald-800": "#065f46",
-  "emerald-900": "#064e3b",
-  // Cyan
-  "cyan-50": "#ecfeff",
-  "cyan-100": "#cffafe",
-  "cyan-200": "#a5f3fc",
-  "cyan-300": "#67e8f9",
-  "cyan-400": "#22d3ee",
-  "cyan-500": "#06b6d4",
-  "cyan-600": "#0891b2",
-  "cyan-700": "#0e7490",
-  "cyan-800": "#155e75",
-  "cyan-900": "#164e63"
-};
-var getTailwindColor = (color) => {
-  if (color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl")) {
-    return color;
-  }
-  if (tailwindColors[color]) {
-    return tailwindColors[color];
-  }
-  if (!color.includes("-")) {
-    const defaultColor = `${color}-500`;
-    if (tailwindColors[defaultColor]) {
-      return tailwindColors[defaultColor];
-    }
-  }
-  return color;
-};
 var badgeVariants = cva2(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-md border text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      },
-      status: {
-        success: "bg-green-500 border-white dark:border-zinc-900",
-        desactivated: "bg-gray-400 border-white dark:border-zinc-900",
-        destructive: "bg-red-500 border-white dark:border-zinc-900",
-        away: "bg-yellow-400 border-white dark:border-zinc-900",
-        custom: "border-white dark:border-zinc-900"
+      size: {
+        sm: "px-1 py-0.5 text-xs",
+        md: "px-2 py-1 text-xs",
+        lg: "px-3 py-1 text-sm"
       }
     },
     defaultVariants: {
-      variant: "default"
+      size: "md"
     }
   }
 );
 function BadgeBase({
   className,
-  variant,
-  status,
-  statusColor,
+  color,
+  size = "md",
   asChild = false,
   children,
   style,
   ...props
 }) {
   const Comp = asChild ? Slot3 : "span";
-  const isStatus = Boolean(status);
-  const resolvedStatusColor = statusColor ? getTailwindColor(statusColor) : void 0;
-  const customStyle = status === "custom" && resolvedStatusColor ? { ...style, backgroundColor: resolvedStatusColor } : style;
+  const customStyle = style;
+  const colorClasses = {
+    green: "bg-green-50 text-green-500 border-green-200",
+    gray: "bg-gray-50 text-gray-500 border-gray-200",
+    red: "bg-red-50 text-red-500 border-red-200",
+    yellow: "bg-yellow-50 text-yellow-600 border-yellow-200",
+    blue: "bg-blue-50 text-blue-500 border-blue-200",
+    purple: "bg-purple-50 text-purple-500 border-purple-200"
+  };
   return /* @__PURE__ */ jsx32(
     Comp,
     {
       "data-slot": "badge",
       className: cn(
-        badgeVariants({ variant, status: isStatus ? status : void 0 }),
-        isStatus && "absolute bottom-0 right-0 rounded-full p-0 h-4 w-4 flex items-center justify-center border-2",
+        badgeVariants({ size }),
+        color ? colorClasses[color] : void 0,
         className
       ),
       style: customStyle,
       ...props,
-      children: isStatus ? null : children
+      children
     }
   );
 }
@@ -10118,7 +9966,7 @@ function CalendarBase2({
                 head_cell: "text-muted-foreground rounded-md font-semibold text-[clamp(0.575rem,1.2vw,0.75rem)] sm:text-[clamp(0.65rem,1.1vw,0.825rem)] text-center pb-1 uppercase tracking-wider",
                 row: "grid grid-cols-7 gap-1",
                 cell: cn(
-                  "min-w-0 h-9 sm:h-10 md:h-11 p-0 relative flex items-center justify-center",
+                  "min-w-0 h-9 sm:h-10 md:h-10 p-0 relative flex items-center justify-center",
                   "[&:has([aria-selected].day-range-end)]:rounded-r-lg",
                   "[&:has([aria-selected].day-range-start)]:rounded-l-lg",
                   "[&:has([aria-selected].day-outside)]:bg-muted/50",
@@ -10609,8 +10457,6 @@ function DateTimePicker({
   displayFormat,
   hideTime,
   hideSeconds,
-  hideHour,
-  hideMinute,
   fromDate,
   toDate,
   disabled,
@@ -10639,18 +10485,16 @@ function DateTimePicker({
   };
   const getTimeFormat = () => {
     if (hideTime) return "";
-    if (hideHour && hideMinute) return "";
-    if (hideHour) return hideSeconds ? "mm" : "mm:ss";
-    if (hideMinute) return hideSeconds ? "HH" : "HH':00'";
     return hideSeconds ? "HH:mm" : "HH:mm:ss";
   };
   const getDisplayFormat = () => {
-    if (displayFormat) {
-      return displayFormat;
-    }
     const timeFormat = getTimeFormat();
-    if (!timeFormat) return "PPP";
-    return `PPP - ${timeFormat}`;
+    if (displayFormat === true) {
+      if (!timeFormat) return "dd/MM/yyyy";
+      return `dd/MM/yyyy ${timeFormat}`;
+    }
+    if (!timeFormat) return "dd MMMM yyyy";
+    return `dd MMMM yyyy ${timeFormat}`;
   };
   useEffect16(() => {
     if (date) {
@@ -10713,13 +10557,10 @@ function DateTimePicker({
                 defaultMonth: fromDate ?? toDate ?? internalDate,
                 fromDate,
                 toDate,
-                className: cn(
-                  "w-full",
-                  (hideTime || hideHour && hideMinute) && "border-0"
-                )
+                className: cn("w-full", hideTime && "border-0")
               }
             ),
-            !hideTime && !(hideHour && hideMinute) && /* @__PURE__ */ jsx66("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ jsxs46(
+            !hideTime && /* @__PURE__ */ jsx66("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ jsxs46(
               PopoverBase,
               {
                 open: timePickerOpen,
@@ -11531,6 +11372,73 @@ var CodeBlock = ({
   );
 };
 
+// src/components/ui/data/StatusIndicator.tsx
+import { jsx as jsx70, jsxs as jsxs50 } from "react/jsx-runtime";
+function StatusIndicator({
+  color = "green",
+  size = "sm",
+  position = "top-right",
+  show = true,
+  children,
+  className,
+  ...props
+}) {
+  const absolutePositionClasses = {
+    "top-right": "absolute top-0 right-0 translate-x-1/2 -translate-y-1/2",
+    "top-left": "absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+    "bottom-right": "absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2",
+    "bottom-left": "absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2"
+  };
+  const sizeClasses = {
+    xs: "h-2 w-2",
+    sm: "h-2.5 w-2.5",
+    md: "h-3 w-3",
+    lg: "h-4 w-4"
+  };
+  const colorClasses = {
+    green: "bg-green-500",
+    gray: "bg-gray-400",
+    red: "bg-red-500",
+    yellow: "bg-yellow-400",
+    blue: "bg-blue-500",
+    purple: "bg-purple-500",
+    retire: "bg-slate-300/70 ring-1 ring-slate-200"
+  };
+  const dotClass = cn(
+    "rounded-full inline-block",
+    sizeClasses[size],
+    colorClasses[color],
+    "flex-shrink-0"
+  );
+  if (position === "inline") {
+    return /* @__PURE__ */ jsxs50(
+      "span",
+      {
+        className: cn("inline-flex items-center gap-2", className),
+        ...props,
+        children: [
+          show && /* @__PURE__ */ jsx70("span", { className: dotClass, "aria-hidden": !show }),
+          children && /* @__PURE__ */ jsx70("span", { className: "truncate", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs50("div", { className: cn("relative inline-flex", className), ...props, children: [
+    show && /* @__PURE__ */ jsx70(
+      "span",
+      {
+        "aria-hidden": !show,
+        className: cn(
+          "pointer-events-none z-10",
+          absolutePositionClasses[position]
+        ),
+        children: /* @__PURE__ */ jsx70("span", { className: dotClass })
+      }
+    ),
+    /* @__PURE__ */ jsx70("div", { className: "min-w-0", children })
+  ] });
+}
+
 // src/hooks/use-drag.tsx
 import { useState as useState20, useCallback as useCallback12, useRef as useRef8, useEffect as useEffect18 } from "react";
 var useDrag = (options = {}) => {
@@ -11829,6 +11737,7 @@ export {
   SidebarTriggerBase,
   SkeletonBase,
   SlideBase,
+  StatusIndicator,
   SwitchBase,
   TableBase,
   TableBodyBase,

package/package.json

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