@trsys-tech/matrix-library 1.1.1 → 1.1.3

package/dist/timepickercontent.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepickercontent.es.js","sources":["../src/components/date-picker/TimePickerContent.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\n/**\r\n * Public value used by the time pickers.\r\n *\r\n * In 12-hour mode, provide hour values from 1-12 and include ampm.\r\n * In 24-hour mode, provide hour values from 0-23 and omit ampm.\r\n */\r\ntype Time = {\r\n  /** Hour segment of the time value. */\r\n  hour: number;\r\n  /** Minute segment of the time value. */\r\n  minute: number;\r\n  /** Optional meridiem used in 12-hour mode. */\r\n  ampm?: \"AM\" | \"PM\";\r\n};\r\n\r\n/**\r\n * Props for the shared time picker content.\r\n *\r\n * This is the scrollable selector used by both the desktop and mobile wrappers.\r\n */\r\ntype TimePickerContentProps = {\r\n  /** Current time value. */\r\n  time: Time | undefined;\r\n  /** Indicates whether the surrounding popover or drawer is open. */\r\n  isOpen: boolean;\r\n  /** Enables 24-hour mode and hides the AM/PM column when true. */\r\n  is24HourMode?: boolean;\r\n  /** Called whenever the user changes the selected time. */\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  /** Props forwarded to the content container. */\r\n  slotsProps?: {\r\n    /** Props forwarded to the main content element. */\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst getNow = (): Time => {\r\n  const now = new Date();\r\n  const hour = now.getHours();\r\n\r\n  return { hour: hour % 12 || 12, minute: now.getMinutes(), ampm: hour < 12 ? \"AM\" : \"PM\" };\r\n};\r\n\r\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\r\n\r\nconst getDefaultTime = (is24HourMode: boolean): Time => {\r\n  return is24HourMode ? { hour: 0, minute: 0 } : getNow();\r\n};\r\n\r\nconst normalizeTime = (time: Time | undefined, is24HourMode: boolean): Time => {\r\n  if (!time) {\r\n    return getDefaultTime(is24HourMode);\r\n  }\r\n\r\n  const minute = clamp(time.minute, 0, 59);\r\n  const hourFromAmpm = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n\r\n  if (is24HourMode) {\r\n    return { hour: clamp(hourFromAmpm, 0, 23), minute };\r\n  }\r\n\r\n  const hour = hourFromAmpm % 12 || 12;\r\n\r\n  return {\r\n    hour,\r\n    minute,\r\n    ampm: time.ampm ?? (hourFromAmpm >= 12 ? \"PM\" : \"AM\"),\r\n  };\r\n};\r\n\r\n/**\r\n * Shared time picker content used by the desktop popover and mobile drawer variants.\r\n * It normalizes values based on 12-hour or 24-hour mode and emits updates as the user picks segments.\r\n */\r\nconst TimePickerContent: React.FC<TimePickerContentProps> = ({ isOpen, time, is24HourMode = false, onTimeChange, slotsProps }) => {\r\n  const [selectedTime, setSelectedTime] = useState<Time>(() => normalizeTime(time, is24HourMode));\r\n  const selectedTimeRef = useRef<Time>(selectedTime);\r\n\r\n  const hourRef = useRef<HTMLDivElement>(null);\r\n  const minuteRef = useRef<HTMLDivElement>(null);\r\n\r\n  const itemHeight = 32;\r\n  const marginBetweenItems = 8;\r\n\r\n  const hourOptions = is24HourMode ? Array.from({ length: 24 }, (_, index) => index) : Array.from({ length: 12 }, (_, index) => index + 1);\r\n\r\n  const scrollToHour = (index: number) => {\r\n    hourRef?.current?.scrollTo({\r\n      top: index * (itemHeight + marginBetweenItems),\r\n      behavior: \"smooth\",\r\n    });\r\n  };\r\n\r\n  const scrollToMinute = (index: number) => {\r\n    minuteRef?.current?.scrollTo({\r\n      top: index * (itemHeight + marginBetweenItems),\r\n      behavior: \"smooth\",\r\n    });\r\n  };\r\n\r\n  const updateSelectedTime = (nextTime: Time) => {\r\n    const normalizedTime = normalizeTime(nextTime, is24HourMode);\r\n    selectedTimeRef.current = normalizedTime;\r\n    setSelectedTime(normalizedTime);\r\n    onTimeChange(normalizedTime);\r\n  };\r\n\r\n  const handleSetHour = (hour: number) => {\r\n    updateSelectedTime({ ...selectedTimeRef.current, hour });\r\n  };\r\n\r\n  const handleSetMinute = (minute: number) => {\r\n    updateSelectedTime({ ...selectedTimeRef.current, minute });\r\n  };\r\n\r\n  const handleSetAMPM = (ampm: \"AM\" | \"PM\") => {\r\n    updateSelectedTime({ ...selectedTimeRef.current, ampm });\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isOpen) {\r\n      const nextTime = normalizeTime(time, is24HourMode);\r\n      selectedTimeRef.current = nextTime;\r\n      setSelectedTime(nextTime);\r\n    }\r\n  }, [isOpen, time, is24HourMode]);\r\n\r\n  useEffect(() => {\r\n    if (!isOpen) {\r\n      return;\r\n    }\r\n\r\n    const timeoutId = window.setTimeout(() => {\r\n      scrollToHour(is24HourMode ? selectedTimeRef.current.hour : selectedTimeRef.current.hour - 1);\r\n      scrollToMinute(selectedTimeRef.current.minute);\r\n    });\r\n\r\n    return () => window.clearTimeout(timeoutId);\r\n  }, [isOpen, is24HourMode]);\r\n\r\n  return (\r\n    <div\r\n      {...(slotsProps?.content ?? {})}\r\n      className={cn(\"mtx-py-2 mtx-px-0 mtx-h-52 mtx-w-full mtx-flex mtx-justify-center mtx-gap-1\", slotsProps?.content?.className)}\r\n    >\r\n      <div className=\"mtx-w-24 mtx-px-2 mtx-h-full mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={hourRef}>\r\n        {hourOptions.map(hour => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n              hour === selectedTime.hour && \"mtx-bg-secondary\",\r\n            )}\r\n            key={hour}\r\n            onClick={() => handleSetHour(hour)}\r\n            type=\"button\"\r\n          >\r\n            {hour.toString().padStart(2, \"0\")}\r\n          </button>\r\n        ))}\r\n      </div>\r\n\r\n      <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={minuteRef}>\r\n        {Array.from({ length: 60 }, (_, i) => i).map(minute => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n              minute === selectedTime.minute && \"mtx-bg-secondary\",\r\n            )}\r\n            key={minute}\r\n            onClick={() => handleSetMinute(minute)}\r\n            type=\"button\"\r\n          >\r\n            {minute.toString().padStart(2, \"0\")}\r\n          </button>\r\n        ))}\r\n      </div>\r\n\r\n      {!is24HourMode && (\r\n        <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\">\r\n          {[\"AM\", \"PM\"].map(ampm => (\r\n            <button\r\n              style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n              className={cn(\r\n                \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n                ampm === selectedTime.ampm && \"mtx-bg-secondary\",\r\n              )}\r\n              key={ampm}\r\n              onClick={() => handleSetAMPM(ampm as \"AM\" | \"PM\")}\r\n              type=\"button\"\r\n            >\r\n              {ampm}\r\n            </button>\r\n          ))}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\nexport { TimePickerContent, type TimePickerContentProps, type Time };\r\n"],"names":["getNow","now","hour","clamp","value","min","max","getDefaultTime","is24HourMode","normalizeTime","time","minute","hourFromAmpm","TimePickerContent","isOpen","onTimeChange","slotsProps","selectedTime","setSelectedTime","useState","selectedTimeRef","useRef","hourRef","minuteRef","itemHeight","marginBetweenItems","hourOptions","_","index","scrollToHour","scrollToMinute","updateSelectedTime","nextTime","normalizedTime","handleSetHour","handleSetMinute","handleSetAMPM","ampm","useEffect","timeoutId","jsxs","cn","jsx","i"],"mappings":"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"}
+{"version":3,"file":"timepickercontent.es.js","sources":["../src/components/date-picker/TimePickerContent.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useMemo, useRef } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\n/**\r\n * Public value used by the time pickers.\r\n *\r\n * In 12-hour mode, provide hour values from 1-12 and include ampm.\r\n * In 24-hour mode, provide hour values from 0-23 and omit ampm.\r\n */\r\ntype Time = {\r\n  /** Hour segment of the time value. */\r\n  hour: number;\r\n  /** Minute segment of the time value. */\r\n  minute: number;\r\n  /** Optional meridiem used in 12-hour mode. */\r\n  ampm?: \"AM\" | \"PM\";\r\n};\r\n\r\n/**\r\n * Props for the shared time picker content.\r\n *\r\n * This is the scrollable selector used by both the desktop and mobile wrappers.\r\n */\r\ntype TimePickerContentProps = {\r\n  /** Current time value. */\r\n  time: Time | undefined;\r\n  /** Indicates whether the surrounding popover or drawer is open. */\r\n  isOpen: boolean;\r\n  /** Enables 24-hour mode and hides the AM/PM column when true. */\r\n  is24HourMode?: boolean;\r\n  /** Called whenever the user changes the selected time. */\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  /** Props forwarded to the content container. */\r\n  slotsProps?: {\r\n    /** Props forwarded to the main content element. */\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst getNow = (): Time => {\r\n  const now = new Date();\r\n  const hour = now.getHours();\r\n\r\n  return { hour: hour % 12 || 12, minute: now.getMinutes(), ampm: hour < 12 ? \"AM\" : \"PM\" };\r\n};\r\n\r\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\r\n\r\nconst getDefaultTime = (is24HourMode: boolean): Time => {\r\n  return is24HourMode ? { hour: 0, minute: 0 } : getNow();\r\n};\r\n\r\nconst normalizeTime = (time: Time | undefined, is24HourMode: boolean): Time => {\r\n  if (!time) {\r\n    return getDefaultTime(is24HourMode);\r\n  }\r\n\r\n  const minute = clamp(time.minute, 0, 59);\r\n  const hourFromAmpm = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n\r\n  if (is24HourMode) {\r\n    return { hour: clamp(hourFromAmpm, 0, 23), minute };\r\n  }\r\n\r\n  const hour = hourFromAmpm % 12 || 12;\r\n\r\n  return {\r\n    hour,\r\n    minute,\r\n    ampm: time.ampm ?? (hourFromAmpm >= 12 ? \"PM\" : \"AM\"),\r\n  };\r\n};\r\n\r\n/**\r\n * Shared time picker content used by the desktop popover and mobile drawer variants.\r\n * It normalizes values based on 12-hour or 24-hour mode and emits updates as the user picks segments.\r\n */\r\nconst TimePickerContent: React.FC<TimePickerContentProps> = ({ isOpen, time, is24HourMode = false, onTimeChange, slotsProps }) => {\r\n  const selectedTime = useMemo(() => normalizeTime(time, is24HourMode), [time, is24HourMode]);\r\n  const selectedTimeRef = useRef<Time>(selectedTime);\r\n\r\n  const hourRef = useRef<HTMLDivElement>(null);\r\n  const minuteRef = useRef<HTMLDivElement>(null);\r\n\r\n  const itemHeight = 32;\r\n  const marginBetweenItems = 8;\r\n\r\n  const hourOptions = is24HourMode ? Array.from({ length: 24 }, (_, index) => index) : Array.from({ length: 12 }, (_, index) => index + 1);\r\n\r\n  const scrollToHour = (index: number) => {\r\n    hourRef?.current?.scrollTo({\r\n      top: index * (itemHeight + marginBetweenItems),\r\n      behavior: \"smooth\",\r\n    });\r\n  };\r\n\r\n  const scrollToMinute = (index: number) => {\r\n    minuteRef?.current?.scrollTo({\r\n      top: index * (itemHeight + marginBetweenItems),\r\n      behavior: \"smooth\",\r\n    });\r\n  };\r\n\r\n  const updateSelectedTime = (nextTime: Time) => {\r\n    const normalizedTime = normalizeTime(nextTime, is24HourMode);\r\n    selectedTimeRef.current = normalizedTime;\r\n    onTimeChange(normalizedTime);\r\n  };\r\n\r\n  const handleSetHour = (hour: number) => {\r\n    updateSelectedTime({ ...selectedTimeRef.current, hour });\r\n  };\r\n\r\n  const handleSetMinute = (minute: number) => {\r\n    updateSelectedTime({ ...selectedTimeRef.current, minute });\r\n  };\r\n\r\n  const handleSetAMPM = (ampm: \"AM\" | \"PM\") => {\r\n    updateSelectedTime({ ...selectedTimeRef.current, ampm });\r\n  };\r\n\r\n  useEffect(() => {\r\n    selectedTimeRef.current = selectedTime;\r\n  }, [selectedTime]);\r\n\r\n  useEffect(() => {\r\n    if (!isOpen) {\r\n      return;\r\n    }\r\n\r\n    const timeoutId = window.setTimeout(() => {\r\n      scrollToHour(is24HourMode ? selectedTimeRef.current.hour : selectedTimeRef.current.hour - 1);\r\n      scrollToMinute(selectedTimeRef.current.minute);\r\n    });\r\n\r\n    return () => window.clearTimeout(timeoutId);\r\n  }, [isOpen, is24HourMode]);\r\n\r\n  return (\r\n    <div\r\n      {...(slotsProps?.content ?? {})}\r\n      className={cn(\"mtx-py-2 mtx-px-0 mtx-h-52 mtx-w-full mtx-flex mtx-justify-center mtx-gap-1\", slotsProps?.content?.className)}\r\n    >\r\n      <div className=\"mtx-w-24 mtx-px-2 mtx-h-full mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={hourRef}>\r\n        {hourOptions.map(hour => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n              hour === selectedTime.hour && \"mtx-bg-secondary\",\r\n            )}\r\n            key={hour}\r\n            onClick={() => handleSetHour(hour)}\r\n            type=\"button\"\r\n          >\r\n            {hour.toString().padStart(2, \"0\")}\r\n          </button>\r\n        ))}\r\n      </div>\r\n\r\n      <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={minuteRef}>\r\n        {Array.from({ length: 60 }, (_, i) => i).map(minute => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n              minute === selectedTime.minute && \"mtx-bg-secondary\",\r\n            )}\r\n            key={minute}\r\n            onClick={() => handleSetMinute(minute)}\r\n            type=\"button\"\r\n          >\r\n            {minute.toString().padStart(2, \"0\")}\r\n          </button>\r\n        ))}\r\n      </div>\r\n\r\n      {!is24HourMode && (\r\n        <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\">\r\n          {[\"AM\", \"PM\"].map(ampm => (\r\n            <button\r\n              style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n              className={cn(\r\n                \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n                ampm === selectedTime.ampm && \"mtx-bg-secondary\",\r\n              )}\r\n              key={ampm}\r\n              onClick={() => handleSetAMPM(ampm as \"AM\" | \"PM\")}\r\n              type=\"button\"\r\n            >\r\n              {ampm}\r\n            </button>\r\n          ))}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\nexport { TimePickerContent, type TimePickerContentProps, type Time };\r\n"],"names":["getNow","now","hour","clamp","value","min","max","getDefaultTime","is24HourMode","normalizeTime","time","minute","hourFromAmpm","TimePickerContent","isOpen","onTimeChange","slotsProps","selectedTime","useMemo","selectedTimeRef","useRef","hourRef","minuteRef","itemHeight","marginBetweenItems","hourOptions","_","index","scrollToHour","scrollToMinute","updateSelectedTime","nextTime","normalizedTime","handleSetHour","handleSetMinute","handleSetAMPM","ampm","useEffect","timeoutId","jsxs","cn","jsx","i"],"mappings":"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"}

package/dist/tooltip.es.js

@@ -1,15 +1,17 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import * as s from "react";
-import { Root as x, Provider as n, Trigger as l, Portal as p, Content as o, Arrow as f } from "@radix-ui/react-tooltip";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import * as d from "react";
+import { Root as s, Provider as x, Trigger as n, Portal as l, Content as p, Arrow as f } from "@radix-ui/react-tooltip";
 import { cn as c } from "./utils.es.js";
-const y = n, w = x, N = l, g = s.forwardRef(({ className: m, sideOffset: a = 4, children: e, ...r }, i) => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ d(
-  o,
+const w = x, N = s, g = n;
+g.displayName = "TooltipTrigger";
+const T = d.forwardRef(({ className: o, sideOffset: m = 4, children: e, ...r }, a) => /* @__PURE__ */ t(l, { children: /* @__PURE__ */ i(
+  p,
   {
-    ref: i,
-    sideOffset: a,
+    ref: a,
+    sideOffset: m,
     className: c(
       "mtx-z-50 mtx-rounded-sm mtx-bg-primary-900 mtx-px-3 mtx-py-1.5 mtx-text-xs mtx-text-primary-foreground mtx-animate-in mtx-fade-in-0 mtx-zoom-in-95 data-[state=closed]:mtx-animate-out data-[state=closed]:mtx-fade-out-0 data-[state=closed]:mtx-zoom-out-95 data-[side=bottom]:mtx-slide-in-from-top-2 data-[side=left]:mtx-slide-in-from-right-2 data-[side=right]:mtx-slide-in-from-left-2 data-[side=top]:mtx-slide-in-from-bottom-2",
-      m
+      o
     ),
     ...r,
     children: [
@@ -18,11 +20,11 @@ const y = n, w = x, N = l, g = s.forwardRef(({ className: m, sideOffset: a = 4,
     ]
   }
 ) }));
-g.displayName = o.displayName;
+T.displayName = "TooltipContent";
 export {
-  w as Tooltip,
-  g as TooltipContent,
-  y as TooltipProvider,
-  N as TooltipTrigger
+  N as Tooltip,
+  T as TooltipContent,
+  w as TooltipProvider,
+  g as TooltipTrigger
 };
 //# sourceMappingURL=tooltip.es.js.map

package/dist/tooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.es.js","sources":["../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n  Root,\r\n  Provider,\r\n  Trigger,\r\n  Portal,\r\n  Content,\r\n  TooltipContentProps as ContentProps,\r\n  Arrow,\r\n  TooltipProps,\r\n  TooltipProviderProps,\r\n  TooltipTriggerProps,\r\n} from \"@radix-ui/react-tooltip\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst TooltipProvider = Provider;\r\n\r\nconst Tooltip = Root;\r\n\r\nconst TooltipTrigger = Trigger;\r\n\r\nconst TooltipContent = React.forwardRef<React.ElementRef<typeof Content>, ContentProps>(({ className, sideOffset = 4, children, ...props }, ref) => (\r\n  <Portal>\r\n    <Content\r\n      ref={ref}\r\n      sideOffset={sideOffset}\r\n      className={cn(\r\n        \"mtx-z-50 mtx-rounded-sm mtx-bg-primary-900 mtx-px-3 mtx-py-1.5 mtx-text-xs mtx-text-primary-foreground mtx-animate-in mtx-fade-in-0 mtx-zoom-in-95 data-[state=closed]:mtx-animate-out data-[state=closed]:mtx-fade-out-0 data-[state=closed]:mtx-zoom-out-95 data-[side=bottom]:mtx-slide-in-from-top-2 data-[side=left]:mtx-slide-in-from-right-2 data-[side=right]:mtx-slide-in-from-left-2 data-[side=top]:mtx-slide-in-from-bottom-2\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <Arrow data-role=\"arrow\" className=\"mtx-w-2 mtx-h-1.5\" />\r\n    </Content>\r\n  </Portal>\r\n));\r\nTooltipContent.displayName = Content.displayName;\r\ntype TooltipContentProps = ContentProps & { ref: React.Ref<React.ElementRef<typeof Content>> };\r\n\r\nexport {\r\n  Tooltip,\r\n  TooltipTrigger,\r\n  TooltipContent,\r\n  TooltipProvider,\r\n  type TooltipProps,\r\n  type TooltipContentProps,\r\n  type TooltipTriggerProps,\r\n  type TooltipProviderProps,\r\n};\r\n"],"names":["TooltipProvider","Provider","Tooltip","Root","TooltipTrigger","Trigger","TooltipContent","React","className","sideOffset","children","props","ref","Portal","jsxs","Content","cn","jsx","Arrow"],"mappings":";;;;AAkBA,MAAMA,IAAkBC,GAElBC,IAAUC,GAEVC,IAAiBC,GAEjBC,IAAiBC,EAAM,WAA2D,CAAC,EAAE,WAAAC,GAAW,YAAAC,IAAa,GAAG,UAAAC,GAAU,GAAGC,EAAA,GAASC,wBACzIC,GAAA,EACC,UAAA,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,YAAAH;AAAA,IACA,WAAWO;AAAA,MACT;AAAA,MACAR;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,IAEH,UAAA;AAAA,MAAAD;AAAA,MACD,gBAAAO,EAACC,GAAA,EAAM,aAAU,SAAQ,WAAU,oBAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AACzD,GACF,CACD;AACDZ,EAAe,cAAcS,EAAQ;"}
+{"version":3,"file":"tooltip.es.js","sources":["../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n  Root,\r\n  Provider,\r\n  Trigger,\r\n  Portal,\r\n  Content,\r\n  TooltipContentProps as ContentProps,\r\n  Arrow,\r\n  TooltipProps,\r\n  TooltipProviderProps,\r\n  TooltipTriggerProps,\r\n} from \"@radix-ui/react-tooltip\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst TooltipProvider = Provider;\r\n\r\nconst Tooltip = Root;\r\n\r\nconst TooltipTrigger = Trigger;\r\nTooltipTrigger.displayName = \"TooltipTrigger\";\r\n\r\nconst TooltipContent = React.forwardRef<React.ElementRef<typeof Content>, ContentProps>(({ className, sideOffset = 4, children, ...props }, ref) => (\r\n  <Portal>\r\n    <Content\r\n      ref={ref}\r\n      sideOffset={sideOffset}\r\n      className={cn(\r\n        \"mtx-z-50 mtx-rounded-sm mtx-bg-primary-900 mtx-px-3 mtx-py-1.5 mtx-text-xs mtx-text-primary-foreground mtx-animate-in mtx-fade-in-0 mtx-zoom-in-95 data-[state=closed]:mtx-animate-out data-[state=closed]:mtx-fade-out-0 data-[state=closed]:mtx-zoom-out-95 data-[side=bottom]:mtx-slide-in-from-top-2 data-[side=left]:mtx-slide-in-from-right-2 data-[side=right]:mtx-slide-in-from-left-2 data-[side=top]:mtx-slide-in-from-bottom-2\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <Arrow data-role=\"arrow\" className=\"mtx-w-2 mtx-h-1.5\" />\r\n    </Content>\r\n  </Portal>\r\n));\r\nTooltipContent.displayName = \"TooltipContent\";\r\ntype TooltipContentProps = ContentProps & { ref: React.Ref<React.ElementRef<typeof Content>> };\r\n\r\nexport {\r\n  Tooltip,\r\n  TooltipTrigger,\r\n  TooltipContent,\r\n  TooltipProvider,\r\n  type TooltipProps,\r\n  type TooltipContentProps,\r\n  type TooltipTriggerProps,\r\n  type TooltipProviderProps,\r\n};\r\n"],"names":["TooltipProvider","Provider","Tooltip","Root","TooltipTrigger","Trigger","TooltipContent","React","className","sideOffset","children","props","ref","Portal","jsxs","Content","cn","jsx","Arrow"],"mappings":";;;;AAkBA,MAAMA,IAAkBC,GAElBC,IAAUC,GAEVC,IAAiBC;AACvBD,EAAe,cAAc;AAE7B,MAAME,IAAiBC,EAAM,WAA2D,CAAC,EAAE,WAAAC,GAAW,YAAAC,IAAa,GAAG,UAAAC,GAAU,GAAGC,EAAA,GAASC,wBACzIC,GAAA,EACC,UAAA,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,YAAAH;AAAA,IACA,WAAWO;AAAA,MACT;AAAA,MACAR;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,IAEH,UAAA;AAAA,MAAAD;AAAA,MACD,gBAAAO,EAACC,GAAA,EAAM,aAAU,SAAQ,WAAU,oBAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AACzD,GACF,CACD;AACDZ,EAAe,cAAc;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@trsys-tech/matrix-library",
   "description": "MatrixUI Library",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -24,6 +24,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -p tsconfig.build.json && vite build",
+    "test": "npm run build && node --test tests/*.test.mjs",
     "build:styles": "npx tailwindcss -i ./src/index.css -o ./dist/style.css --watch",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "sb": "storybook dev -p 6006",
@@ -129,5 +130,10 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
+  },
+  "allowScripts": {
+    "esbuild@0.28.1": true,
+    "esbuild@0.25.12": true,
+    "fsevents@2.3.3": true
   }
 }