@trsys-tech/matrix-library 1.0.1-canary-5 → 1.1.0

package/dist/timepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.es.js","sources":["../src/components/date-picker/TimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { Time } from \"./TimePickerContent\";\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\nimport { MobileTimePicker, MobileTimePickerProps } from \"./MobileTimePicker\";\r\nimport { DesktopTimePicker, DesktopTimePickerProps } from \"./DesktopTimePicker\";\r\n\r\ntype TimePickerProps = DesktopTimePickerProps & {};\r\n\r\nconst TimePicker: React.FC<TimePickerProps> = props => {\r\n  const isMobile = useIsMobile();\r\n\r\n  return isMobile ? <MobileTimePicker {...props} /> : <DesktopTimePicker {...props} />;\r\n};\r\n\r\nexport { TimePicker, DesktopTimePicker, type DesktopTimePickerProps, MobileTimePicker, type MobileTimePickerProps, type TimePickerProps, type Time };\r\n"],"names":["TimePicker","props","useIsMobile","MobileTimePicker","jsx","DesktopTimePicker"],"mappings":";;;;AAWA,MAAMA,IAAwC,CAAAC,MAC3BC,EAAA,sBAEEC,GAAA,EAAkB,GAAGF,GAAO,IAAK,gBAAAG,EAACC,GAAA,EAAmB,GAAGJ,EAAA,CAAO;"}
+{"version":3,"file":"timepicker.es.js","sources":["../src/components/date-picker/TimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { Time } from \"./TimePickerContent\";\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\nimport { MobileTimePicker, MobileTimePickerProps } from \"./MobileTimePicker\";\r\nimport { DesktopTimePicker, DesktopTimePickerProps } from \"./DesktopTimePicker\";\r\n\r\n/**\r\n * Props for the responsive time picker.\r\n *\r\n * Accepts the same public API as the desktop and mobile time pickers.\r\n * The controlled value is a Time object and onTimeChange receives the same shape.\r\n */\r\ntype TimePickerProps = DesktopTimePickerProps & {};\r\n\r\n/**\r\n * Responsive time picker.\r\n *\r\n * Renders the mobile drawer picker on mobile screens and the desktop popover picker\r\n * on larger screens.\r\n *\r\n * @example\r\n * const [meetingTime, setMeetingTime] = React.useState<Time | undefined>({ hour: 9, minute: 30, ampm: \"AM\" });\r\n *\r\n * <TimePicker time={meetingTime} onTimeChange={setMeetingTime} />\r\n *\r\n * @example\r\n * const [twentyFourHourTime, setTwentyFourHourTime] = React.useState<Time | undefined>({ hour: 14, minute: 30 });\r\n *\r\n * <TimePicker time={twentyFourHourTime} onTimeChange={setTwentyFourHourTime} is24HourMode />\r\n */\r\nconst TimePicker: React.FC<TimePickerProps> = props => {\r\n  const isMobile = useIsMobile();\r\n\r\n  return isMobile ? <MobileTimePicker {...props} /> : <DesktopTimePicker {...props} />;\r\n};\r\n\r\nexport { TimePicker, DesktopTimePicker, type DesktopTimePickerProps, MobileTimePicker, type MobileTimePickerProps, type TimePickerProps, type Time };\r\n"],"names":["TimePicker","props","useIsMobile","MobileTimePicker","jsx","DesktopTimePicker"],"mappings":";;;;AAiCA,MAAMA,IAAwC,CAAAC,MAC3BC,EAAA,sBAEEC,GAAA,EAAkB,GAAGF,GAAO,IAAK,gBAAAG,EAACC,GAAA,EAAmB,GAAGJ,EAAA,CAAO;"}

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\ntype Time = { hour: number; minute: number; ampm?: \"AM\" | \"PM\" };\r\n\r\ntype TimePickerContentProps = {\r\n  time: Time | undefined;\r\n  isOpen: boolean;\r\n  is24HourMode?: boolean;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  slotsProps?: {\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\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, 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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"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@trsys-tech/matrix-library",
   "description": "MatrixUI Library",
   "private": false,
-  "version": "1.0.1-canary-5",
+  "version": "1.1.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",