@mlw-packages/react-components 1.7.5 → 1.7.6

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.
package/dist/index.js CHANGED
@@ -32,9 +32,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
32
32
  ));
33
33
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
34
34
 
35
- // node_modules/picocolors/picocolors.browser.js
35
+ // node_modules/.pnpm/picocolors@1.1.1/node_modules/picocolors/picocolors.browser.js
36
36
  var require_picocolors_browser = __commonJS({
37
- "node_modules/picocolors/picocolors.browser.js"(exports, module2) {
37
+ "node_modules/.pnpm/picocolors@1.1.1/node_modules/picocolors/picocolors.browser.js"(exports, module2) {
38
38
  "use strict";
39
39
  var x = String;
40
40
  var create = function() {
@@ -45,9 +45,9 @@ var require_picocolors_browser = __commonJS({
45
45
  }
46
46
  });
47
47
 
48
- // node_modules/tailwindcss/lib/util/log.js
48
+ // node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/util/log.js
49
49
  var require_log = __commonJS({
50
- "node_modules/tailwindcss/lib/util/log.js"(exports) {
50
+ "node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/util/log.js"(exports) {
51
51
  "use strict";
52
52
  Object.defineProperty(exports, "__esModule", {
53
53
  value: true
@@ -112,9 +112,9 @@ var require_log = __commonJS({
112
112
  }
113
113
  });
114
114
 
115
- // node_modules/tailwindcss/lib/public/colors.js
115
+ // node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/public/colors.js
116
116
  var require_colors = __commonJS({
117
- "node_modules/tailwindcss/lib/public/colors.js"(exports) {
117
+ "node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/public/colors.js"(exports) {
118
118
  "use strict";
119
119
  Object.defineProperty(exports, "__esModule", {
120
120
  value: true
@@ -473,9 +473,9 @@ var require_colors = __commonJS({
473
473
  }
474
474
  });
475
475
 
476
- // node_modules/tailwindcss/colors.js
476
+ // node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/colors.js
477
477
  var require_colors2 = __commonJS({
478
- "node_modules/tailwindcss/colors.js"(exports, module2) {
478
+ "node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/colors.js"(exports, module2) {
479
479
  "use strict";
480
480
  var colors2 = require_colors();
481
481
  module2.exports = (colors2.__esModule ? colors2 : { default: colors2 }).default;
@@ -706,6 +706,7 @@ __export(index_exports, {
706
706
  SidebarTriggerBase: () => SidebarTriggerBase,
707
707
  SkeletonBase: () => SkeletonBase,
708
708
  SlideBase: () => SlideBase,
709
+ StatusIndicator: () => StatusIndicator,
709
710
  SwitchBase: () => SwitchBase,
710
711
  TableBase: () => TableBase,
711
712
  TableBodyBase: () => TableBodyBase,
@@ -5891,204 +5892,52 @@ AvatarFallbackBase.displayName = AvatarPrimitive.Fallback.displayName;
5891
5892
  var import_react_slot3 = require("@radix-ui/react-slot");
5892
5893
  var import_class_variance_authority2 = require("class-variance-authority");
5893
5894
  var import_jsx_runtime32 = require("react/jsx-runtime");
5894
- var tailwindColors = {
5895
- // Red
5896
- "red-50": "#fef2f2",
5897
- "red-100": "#fee2e2",
5898
- "red-200": "#fecaca",
5899
- "red-300": "#fca5a5",
5900
- "red-400": "#f87171",
5901
- "red-500": "#ef4444",
5902
- "red-600": "#dc2626",
5903
- "red-700": "#b91c1c",
5904
- "red-800": "#991b1b",
5905
- "red-900": "#7f1d1d",
5906
- // Orange
5907
- "orange-50": "#fff7ed",
5908
- "orange-100": "#ffedd5",
5909
- "orange-200": "#fed7aa",
5910
- "orange-300": "#fdba74",
5911
- "orange-400": "#fb923c",
5912
- "orange-500": "#f97316",
5913
- "orange-600": "#ea580c",
5914
- "orange-700": "#c2410c",
5915
- "orange-800": "#9a3412",
5916
- "orange-900": "#7c2d12",
5917
- // Yellow
5918
- "yellow-50": "#fefce8",
5919
- "yellow-100": "#fef3c7",
5920
- "yellow-200": "#fde68a",
5921
- "yellow-300": "#fcd34d",
5922
- "yellow-400": "#fbbf24",
5923
- "yellow-500": "#f59e0b",
5924
- "yellow-600": "#d97706",
5925
- "yellow-700": "#b45309",
5926
- "yellow-800": "#92400e",
5927
- "yellow-900": "#78350f",
5928
- // Green
5929
- "green-50": "#f0fdf4",
5930
- "green-100": "#dcfce7",
5931
- "green-200": "#bbf7d0",
5932
- "green-300": "#86efac",
5933
- "green-400": "#4ade80",
5934
- "green-500": "#22c55e",
5935
- "green-600": "#16a34a",
5936
- "green-700": "#15803d",
5937
- "green-800": "#166534",
5938
- "green-900": "#14532d",
5939
- // Blue
5940
- "blue-50": "#eff6ff",
5941
- "blue-100": "#dbeafe",
5942
- "blue-200": "#bfdbfe",
5943
- "blue-300": "#93c5fd",
5944
- "blue-400": "#60a5fa",
5945
- "blue-500": "#3b82f6",
5946
- "blue-600": "#2563eb",
5947
- "blue-700": "#1d4ed8",
5948
- "blue-800": "#1e40af",
5949
- "blue-900": "#1e3a8a",
5950
- // Purple
5951
- "purple-50": "#faf5ff",
5952
- "purple-100": "#f3e8ff",
5953
- "purple-200": "#e9d5ff",
5954
- "purple-300": "#d8b4fe",
5955
- "purple-400": "#c084fc",
5956
- "purple-500": "#a855f7",
5957
- "purple-600": "#9333ea",
5958
- "purple-700": "#7c3aed",
5959
- "purple-800": "#6b21a8",
5960
- "purple-900": "#581c87",
5961
- // Pink
5962
- "pink-50": "#fdf2f8",
5963
- "pink-100": "#fce7f3",
5964
- "pink-200": "#fbcfe8",
5965
- "pink-300": "#f9a8d4",
5966
- "pink-400": "#f472b6",
5967
- "pink-500": "#ec4899",
5968
- "pink-600": "#db2777",
5969
- "pink-700": "#be185d",
5970
- "pink-800": "#9d174d",
5971
- "pink-900": "#831843",
5972
- // Gray
5973
- "gray-50": "#f9fafb",
5974
- "gray-100": "#f3f4f6",
5975
- "gray-200": "#e5e7eb",
5976
- "gray-300": "#d1d5db",
5977
- "gray-400": "#9ca3af",
5978
- "gray-500": "#6b7280",
5979
- "gray-600": "#4b5563",
5980
- "gray-700": "#374151",
5981
- "gray-800": "#1f2937",
5982
- "gray-900": "#111827",
5983
- // Indigo
5984
- "indigo-50": "#eef2ff",
5985
- "indigo-100": "#e0e7ff",
5986
- "indigo-200": "#c7d2fe",
5987
- "indigo-300": "#a5b4fc",
5988
- "indigo-400": "#818cf8",
5989
- "indigo-500": "#6366f1",
5990
- "indigo-600": "#4f46e5",
5991
- "indigo-700": "#4338ca",
5992
- "indigo-800": "#3730a3",
5993
- "indigo-900": "#312e81",
5994
- // Teal
5995
- "teal-50": "#f0fdfa",
5996
- "teal-100": "#ccfbf1",
5997
- "teal-200": "#99f6e4",
5998
- "teal-300": "#5eead4",
5999
- "teal-400": "#2dd4bf",
6000
- "teal-500": "#14b8a6",
6001
- "teal-600": "#0d9488",
6002
- "teal-700": "#0f766e",
6003
- "teal-800": "#115e59",
6004
- "teal-900": "#134e4a",
6005
- // Emerald
6006
- "emerald-50": "#ecfdf5",
6007
- "emerald-100": "#d1fae5",
6008
- "emerald-200": "#a7f3d0",
6009
- "emerald-300": "#6ee7b7",
6010
- "emerald-400": "#34d399",
6011
- "emerald-500": "#10b981",
6012
- "emerald-600": "#059669",
6013
- "emerald-700": "#047857",
6014
- "emerald-800": "#065f46",
6015
- "emerald-900": "#064e3b",
6016
- // Cyan
6017
- "cyan-50": "#ecfeff",
6018
- "cyan-100": "#cffafe",
6019
- "cyan-200": "#a5f3fc",
6020
- "cyan-300": "#67e8f9",
6021
- "cyan-400": "#22d3ee",
6022
- "cyan-500": "#06b6d4",
6023
- "cyan-600": "#0891b2",
6024
- "cyan-700": "#0e7490",
6025
- "cyan-800": "#155e75",
6026
- "cyan-900": "#164e63"
6027
- };
6028
- var getTailwindColor = (color) => {
6029
- if (color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl")) {
6030
- return color;
6031
- }
6032
- if (tailwindColors[color]) {
6033
- return tailwindColors[color];
6034
- }
6035
- if (!color.includes("-")) {
6036
- const defaultColor = `${color}-500`;
6037
- if (tailwindColors[defaultColor]) {
6038
- return tailwindColors[defaultColor];
6039
- }
6040
- }
6041
- return color;
6042
- };
6043
5895
  var badgeVariants = (0, import_class_variance_authority2.cva)(
6044
- "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",
5896
+ "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",
6045
5897
  {
6046
5898
  variants: {
6047
- variant: {
6048
- default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
6049
- secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
6050
- 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",
6051
- outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
6052
- },
6053
- status: {
6054
- success: "bg-green-500 border-white dark:border-zinc-900",
6055
- desactivated: "bg-gray-400 border-white dark:border-zinc-900",
6056
- destructive: "bg-red-500 border-white dark:border-zinc-900",
6057
- away: "bg-yellow-400 border-white dark:border-zinc-900",
6058
- custom: "border-white dark:border-zinc-900"
5899
+ size: {
5900
+ sm: "px-1 py-0.5 text-xs",
5901
+ md: "px-2 py-1 text-xs",
5902
+ lg: "px-3 py-1 text-sm"
6059
5903
  }
6060
5904
  },
6061
5905
  defaultVariants: {
6062
- variant: "default"
5906
+ size: "md"
6063
5907
  }
6064
5908
  }
6065
5909
  );
6066
5910
  function BadgeBase({
6067
5911
  className,
6068
- variant,
6069
- status,
6070
- statusColor,
5912
+ color,
5913
+ size = "md",
6071
5914
  asChild = false,
6072
5915
  children,
6073
5916
  style,
6074
5917
  ...props
6075
5918
  }) {
6076
5919
  const Comp = asChild ? import_react_slot3.Slot : "span";
6077
- const isStatus = Boolean(status);
6078
- const resolvedStatusColor = statusColor ? getTailwindColor(statusColor) : void 0;
6079
- const customStyle = status === "custom" && resolvedStatusColor ? { ...style, backgroundColor: resolvedStatusColor } : style;
5920
+ const customStyle = style;
5921
+ const colorClasses = {
5922
+ green: "bg-green-50 text-green-500 border-green-200",
5923
+ gray: "bg-gray-50 text-gray-500 border-gray-200",
5924
+ red: "bg-red-50 text-red-500 border-red-200",
5925
+ yellow: "bg-yellow-50 text-yellow-600 border-yellow-200",
5926
+ blue: "bg-blue-50 text-blue-500 border-blue-200",
5927
+ purple: "bg-purple-50 text-purple-500 border-purple-200"
5928
+ };
6080
5929
  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6081
5930
  Comp,
6082
5931
  {
6083
5932
  "data-slot": "badge",
6084
5933
  className: cn(
6085
- badgeVariants({ variant, status: isStatus ? status : void 0 }),
6086
- isStatus && "absolute bottom-0 right-0 rounded-full p-0 h-4 w-4 flex items-center justify-center border-2",
5934
+ badgeVariants({ size }),
5935
+ color ? colorClasses[color] : void 0,
6087
5936
  className
6088
5937
  ),
6089
5938
  style: customStyle,
6090
5939
  ...props,
6091
- children: isStatus ? null : children
5940
+ children
6092
5941
  }
6093
5942
  );
6094
5943
  }
@@ -10315,7 +10164,7 @@ function CalendarBase2({
10315
10164
  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",
10316
10165
  row: "grid grid-cols-7 gap-1",
10317
10166
  cell: cn(
10318
- "min-w-0 h-9 sm:h-10 md:h-11 p-0 relative flex items-center justify-center",
10167
+ "min-w-0 h-9 sm:h-10 md:h-10 p-0 relative flex items-center justify-center",
10319
10168
  "[&:has([aria-selected].day-range-end)]:rounded-r-lg",
10320
10169
  "[&:has([aria-selected].day-range-start)]:rounded-l-lg",
10321
10170
  "[&:has([aria-selected].day-outside)]:bg-muted/50",
@@ -10806,8 +10655,6 @@ function DateTimePicker({
10806
10655
  displayFormat,
10807
10656
  hideTime,
10808
10657
  hideSeconds,
10809
- hideHour,
10810
- hideMinute,
10811
10658
  fromDate,
10812
10659
  toDate,
10813
10660
  disabled,
@@ -10836,18 +10683,16 @@ function DateTimePicker({
10836
10683
  };
10837
10684
  const getTimeFormat = () => {
10838
10685
  if (hideTime) return "";
10839
- if (hideHour && hideMinute) return "";
10840
- if (hideHour) return hideSeconds ? "mm" : "mm:ss";
10841
- if (hideMinute) return hideSeconds ? "HH" : "HH':00'";
10842
10686
  return hideSeconds ? "HH:mm" : "HH:mm:ss";
10843
10687
  };
10844
10688
  const getDisplayFormat = () => {
10845
- if (displayFormat) {
10846
- return displayFormat;
10847
- }
10848
10689
  const timeFormat = getTimeFormat();
10849
- if (!timeFormat) return "PPP";
10850
- return `PPP - ${timeFormat}`;
10690
+ if (displayFormat === true) {
10691
+ if (!timeFormat) return "dd/MM/yyyy";
10692
+ return `dd/MM/yyyy ${timeFormat}`;
10693
+ }
10694
+ if (!timeFormat) return "dd MMMM yyyy";
10695
+ return `dd MMMM yyyy ${timeFormat}`;
10851
10696
  };
10852
10697
  (0, import_react44.useEffect)(() => {
10853
10698
  if (date) {
@@ -10910,13 +10755,10 @@ function DateTimePicker({
10910
10755
  defaultMonth: fromDate ?? toDate ?? internalDate,
10911
10756
  fromDate,
10912
10757
  toDate,
10913
- className: cn(
10914
- "w-full",
10915
- (hideTime || hideHour && hideMinute) && "border-0"
10916
- )
10758
+ className: cn("w-full", hideTime && "border-0")
10917
10759
  }
10918
10760
  ),
10919
- !hideTime && !(hideHour && hideMinute) && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
10761
+ !hideTime && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
10920
10762
  PopoverBase,
10921
10763
  {
10922
10764
  open: timePickerOpen,
@@ -11711,6 +11553,73 @@ var CodeBlock = ({
11711
11553
  );
11712
11554
  };
11713
11555
 
11556
+ // src/components/ui/data/StatusIndicator.tsx
11557
+ var import_jsx_runtime70 = require("react/jsx-runtime");
11558
+ function StatusIndicator({
11559
+ color = "green",
11560
+ size = "sm",
11561
+ position = "top-right",
11562
+ show = true,
11563
+ children,
11564
+ className,
11565
+ ...props
11566
+ }) {
11567
+ const absolutePositionClasses = {
11568
+ "top-right": "absolute top-0 right-0 translate-x-1/2 -translate-y-1/2",
11569
+ "top-left": "absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2",
11570
+ "bottom-right": "absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2",
11571
+ "bottom-left": "absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2"
11572
+ };
11573
+ const sizeClasses = {
11574
+ xs: "h-2 w-2",
11575
+ sm: "h-2.5 w-2.5",
11576
+ md: "h-3 w-3",
11577
+ lg: "h-4 w-4"
11578
+ };
11579
+ const colorClasses = {
11580
+ green: "bg-green-500",
11581
+ gray: "bg-gray-400",
11582
+ red: "bg-red-500",
11583
+ yellow: "bg-yellow-400",
11584
+ blue: "bg-blue-500",
11585
+ purple: "bg-purple-500",
11586
+ retire: "bg-slate-300/70 ring-1 ring-slate-200"
11587
+ };
11588
+ const dotClass = cn(
11589
+ "rounded-full inline-block",
11590
+ sizeClasses[size],
11591
+ colorClasses[color],
11592
+ "flex-shrink-0"
11593
+ );
11594
+ if (position === "inline") {
11595
+ return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
11596
+ "span",
11597
+ {
11598
+ className: cn("inline-flex items-center gap-2", className),
11599
+ ...props,
11600
+ children: [
11601
+ show && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: dotClass, "aria-hidden": !show }),
11602
+ children && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "truncate", children })
11603
+ ]
11604
+ }
11605
+ );
11606
+ }
11607
+ return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: cn("relative inline-flex", className), ...props, children: [
11608
+ show && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
11609
+ "span",
11610
+ {
11611
+ "aria-hidden": !show,
11612
+ className: cn(
11613
+ "pointer-events-none z-10",
11614
+ absolutePositionClasses[position]
11615
+ ),
11616
+ children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: dotClass })
11617
+ }
11618
+ ),
11619
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "min-w-0", children })
11620
+ ] });
11621
+ }
11622
+
11714
11623
  // src/hooks/use-drag.tsx
11715
11624
  var import_react50 = require("react");
11716
11625
  var useDrag = (options = {}) => {