@trsys-tech/matrix-library 1.1.0 → 1.1.1-canary.0

package/dist/mobiledaterangepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobiledaterangepicker.es.js","sources":["../src/components/date-picker/MobileDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsRange, DateRange, DayEventHandler, Matcher } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { DateOnlyRange, DateRangeValue, toCalendarDateRangeFromKeys, toDateOnlyRange } from \"./dateValue\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\n/**\r\n * Props for the mobile-only date-range picker.\r\n *\r\n * Inherits the range calendar props from react-day-picker, but accepts Date\r\n * objects or YYYY-MM-DD strings and emits { from, to } values in YYYY-MM-DD format.\r\n */\r\ntype MobileDateRangePickerProps = Omit<PropsBase, \"disabled\"> &\r\n  Omit<PropsRange, \"mode\" | \"disabled\" | \"selected\" | \"onSelect\"> & {\r\n    /** Display format used in the trigger and dialog header. */\r\n    formatStr?: string;\r\n    /** Placeholder shown when no range is selected. */\r\n    placeholder?: string;\r\n    /** Class name forwarded to the calendar content. */\r\n    calendarClassName?: string;\r\n    /** Current value as Date objects or YYYY-MM-DD strings. */\r\n    selected?: DateRangeValue;\r\n    /** Prevents clearing the selection when true. */\r\n    required?: boolean;\r\n    /** Label for the cancel button. */\r\n    cancelText?: string;\r\n    /** Label for the apply button. */\r\n    applyText?: string;\r\n    /** Called with YYYY-MM-DD range values when the user confirms the selection. */\r\n    onSelect?: (date: DateOnlyRange | undefined) => void;\r\n    /** Label shown before the start date in the trigger. */\r\n    fromText?: string;\r\n    /** Label shown before the end date in the trigger. */\r\n    toText?: string;\r\n    /** Disables the trigger button. */\r\n    disabled?: boolean;\r\n    /** Dates disabled in the calendar. */\r\n    disabledDates?: Matcher | Matcher[];\r\n  };\r\n\r\n/**\r\n * Mobile-only date-range picker rendered in a full-screen dialog.\r\n * Use this component when you want mobile interaction regardless of screen size.\r\n */\r\nconst MobileDateRangePicker: React.FC<MobileDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  onDayClick,\r\n  cancelText,\r\n  applyText,\r\n  onSelect,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  disabledDates,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const selectedFromKey = selected?.from instanceof Date ? selected.from.getTime() : selected?.from;\r\n  const selectedToKey = selected?.to instanceof Date ? selected.to.getTime() : selected?.to;\r\n  const selectedRange = React.useMemo(() => toCalendarDateRangeFromKeys(selectedFromKey, selectedToKey), [selectedFromKey, selectedToKey]);\r\n  const [range, setRange] = React.useState<DateRange | undefined>(selectedRange);\r\n  const hasSelectedRange = Boolean(selectedRange?.from || selectedRange?.to);\r\n\r\n  React.useEffect(() => {\r\n    setRange(selectedRange);\r\n  }, [selectedRange]);\r\n\r\n  const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n    onDayClick?.(date, modifiers, e);\r\n    if (!range || !range.from) {\r\n      setRange({ from: date, to: undefined });\r\n    } else if (date < range.from) {\r\n      if (!range.to) {\r\n        setRange({ from: date, to: range.from });\r\n      } else {\r\n        setRange({ from: date, to: range.to });\r\n      }\r\n    } else if (range?.from?.getTime() === date?.getTime() && (range?.from?.getTime() === range?.to?.getTime() || !range.to)) {\r\n      setRange(undefined);\r\n    } else if (\r\n      range?.from?.getTime() !== range?.to?.getTime() &&\r\n      (range.from?.getTime() === date?.getTime() || range?.to?.getTime() === date?.getTime())\r\n    ) {\r\n      setRange({ from: date, to: date });\r\n    } else {\r\n      setRange({ ...range, to: date });\r\n    }\r\n  };\r\n\r\n  const handleCancel = () => {\r\n    setIsOpen(false);\r\n    setRange(selectedRange);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(toDateOnlyRange(range));\r\n    setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Button\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"mtx-flex mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-ps-3 mtx-pe-1 mtx-py-1.5 mtx-text-xs mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!hasSelectedRange ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={\r\n          hasSelectedRange\r\n            ? `Selected date: ${selectedRange?.from ? format(selectedRange.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selectedRange?.to ? format(selectedRange.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n            : placeholder\r\n        }\r\n        disabled={disabled}\r\n        type=\"button\"\r\n      >\r\n        {hasSelectedRange ? (\r\n          <div className=\"mtx-grid mtx-grid-cols-2 mtx-flex-1 mtx-justify-items-start\">\r\n            <span>\r\n              {fromText ?? \"From\"}: {selectedRange?.from ? format(selectedRange.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>{\" \"}\r\n            <span>\r\n              {toText ?? \"To\"}: {selectedRange?.to ? format(selectedRange.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>\r\n          </div>\r\n        ) : (\r\n          <span>{placeholder ?? \"Pick a Range\"}</span>\r\n        )}\r\n        <CalendarIcon className=\"mtx-mr-2 mtx-h-5 mtx-w-4 mtx-ms-auto\" />\r\n      </Button>\r\n      <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n        <DialogContent className=\"mtx-h-dscreen mtx-w-screen mtx-p-0 mtx-flex mtx-flex-col mtx-gap-0 data-[state=open]:mtx-animate-slide-from-bottom data-[state=closed]:mtx-animate-slide-to-bottom mtx-overflow-auto mtx-max-w-screen-2xl sm:mtx-rounded-none\">\r\n          <DialogHeader>\r\n            <DialogTitle asChild>\r\n              <div className=\"mtx-grid mtx-grid-cols-2 mtx-border-b mtx-border-b-gray-200 mtx-mt-3\">\r\n                <div className=\"mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-border-e mtx-border-e-gray-200 mtx-p-4\">\r\n                  <h5 className=\"mtx-text-text-300 mtx-font-medium mtx-text-xs\">From</h5>\r\n                  <h6 className=\"\">{range?.from ? format(range.from, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n                </div>\r\n                <div className=\"mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-p-4 mtx-flex mtx-flex-col mtx-justify-center\">\r\n                  <h5 className=\"mtx-text-text-300 mtx-font-medium mtx-text-xs\">To</h5>\r\n                  <h6 className=\"\">{range?.to ? format(range.to, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n                </div>\r\n              </div>\r\n            </DialogTitle>\r\n            <VisuallyHidden>\r\n              <DialogDescription>{\"Date Picker\"}</DialogDescription>\r\n            </VisuallyHidden>\r\n          </DialogHeader>\r\n          <div className=\"mtx-flex-1 mtx-flex mtx-flex-col mtx-items-center mtx-p-4\">\r\n            <Calendar\r\n              defaultMonth={range?.from}\r\n              startMonth={new Date(2000, 0, 1)}\r\n              endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n              {...props}\r\n              mode=\"range\"\r\n              selected={range}\r\n              onDayClick={handleDayClick}\r\n              className={cn(\"mtx-p-0\", calendarClassName)}\r\n              disabled={disabledDates}\r\n            />\r\n\r\n            <div className=\"mtx-flex mtx-justify-center mtx-items-center mtx-gap-4 mtx-mt-auto mtx-w-full\">\r\n              <Button variant=\"text\" className=\"mtx-flex-1 mtx-h-10\" onClick={handleCancel} type=\"button\">\r\n                {cancelText ?? \"Cancel\"}\r\n              </Button>\r\n              <Button variant=\"primary\" className=\"mtx-flex-1 mtx-h-10\" onClick={handleApply} type=\"button\">\r\n                {applyText ?? \"Apply\"}\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </DialogContent>\r\n      </Dialog>\r\n    </>\r\n  );\r\n};\r\n\r\nexport { MobileDateRangePicker, type MobileDateRangePickerProps };\r\n"],"names":["MobileDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","onDayClick","cancelText","applyText","onSelect","fromText","toText","disabled","disabledDates","props","isOpen","setIsOpen","React","selectedFromKey","selectedToKey","selectedRange","toCalendarDateRangeFromKeys","range","setRange","hasSelectedRange","handleDayClick","date","modifiers","e","handleCancel","handleApply","toDateOnlyRange","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}
+{"version":3,"file":"mobiledaterangepicker.es.js","sources":["../src/components/date-picker/MobileDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsRange, DateRange, DayEventHandler, Matcher } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { DateOnlyRange, DateRangeValue, toCalendarDateRangeFromKeys, toDateOnlyRange } from \"./dateValue\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\n/**\r\n * Props for the mobile-only date-range picker.\r\n *\r\n * Inherits the range calendar props from react-day-picker, but accepts Date\r\n * objects or YYYY-MM-DD strings and emits { from, to } values in YYYY-MM-DD format.\r\n */\r\ntype MobileDateRangePickerProps = Omit<PropsBase, \"disabled\"> &\r\n  Omit<PropsRange, \"mode\" | \"disabled\" | \"selected\" | \"onSelect\"> & {\r\n    /** Display format used in the trigger and dialog header. */\r\n    formatStr?: string;\r\n    /** Placeholder shown when no range is selected. */\r\n    placeholder?: string;\r\n    /** Class name forwarded to the calendar content. */\r\n    calendarClassName?: string;\r\n    /** Current value as Date objects or YYYY-MM-DD strings. */\r\n    selected?: DateRangeValue;\r\n    /** Prevents clearing the selection when true. */\r\n    required?: boolean;\r\n    /** Label for the cancel button. */\r\n    cancelText?: string;\r\n    /** Label for the apply button. */\r\n    applyText?: string;\r\n    /** Called with YYYY-MM-DD range values when the user confirms the selection. */\r\n    onSelect?: (date: DateOnlyRange | undefined) => void;\r\n    /** Label shown before the start date in the trigger. */\r\n    fromText?: string;\r\n    /** Label shown before the end date in the trigger. */\r\n    toText?: string;\r\n    /** Disables the trigger button. */\r\n    disabled?: boolean;\r\n    /** Dates disabled in the calendar. */\r\n    disabledDates?: Matcher | Matcher[];\r\n    /** Separator between the start and end date in the trigger. default: \": \" */\r\n    labelSeparator?: string;\r\n    /** Separator between the start and end date in the trigger. default: \"\" */\r\n    fromToSeparator?: string;\r\n  };\r\n\r\n/**\r\n * Mobile-only date-range picker rendered in a full-screen dialog.\r\n * Use this component when you want mobile interaction regardless of screen size.\r\n */\r\nconst MobileDateRangePicker: React.FC<MobileDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  onDayClick,\r\n  cancelText,\r\n  applyText,\r\n  onSelect,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  disabledDates,\r\n  labelSeparator = \": \",\r\n  fromToSeparator = \"\",\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const selectedFromKey = selected?.from instanceof Date ? selected.from.getTime() : selected?.from;\r\n  const selectedToKey = selected?.to instanceof Date ? selected.to.getTime() : selected?.to;\r\n  const selectedRange = React.useMemo(() => toCalendarDateRangeFromKeys(selectedFromKey, selectedToKey), [selectedFromKey, selectedToKey]);\r\n  const [range, setRange] = React.useState<DateRange | undefined>(selectedRange);\r\n  const hasSelectedRange = Boolean(selectedRange?.from || selectedRange?.to);\r\n\r\n  const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n    onDayClick?.(date, modifiers, e);\r\n    if (!range || !range.from) {\r\n      setRange({ from: date, to: undefined });\r\n    } else if (date < range.from) {\r\n      if (!range.to) {\r\n        setRange({ from: date, to: range.from });\r\n      } else {\r\n        setRange({ from: date, to: range.to });\r\n      }\r\n    } else if (range?.from?.getTime() === date?.getTime() && (range?.from?.getTime() === range?.to?.getTime() || !range.to)) {\r\n      setRange(undefined);\r\n    } else if (\r\n      range?.from?.getTime() !== range?.to?.getTime() &&\r\n      (range.from?.getTime() === date?.getTime() || range?.to?.getTime() === date?.getTime())\r\n    ) {\r\n      setRange({ from: date, to: date });\r\n    } else {\r\n      setRange({ ...range, to: date });\r\n    }\r\n  };\r\n\r\n  const handleCancel = () => {\r\n    setIsOpen(false);\r\n    setRange(selectedRange);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(toDateOnlyRange(range));\r\n    setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Button\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"mtx-flex mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-ps-3 mtx-pe-1 mtx-py-1.5 mtx-text-xs mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!hasSelectedRange ? \"\" : undefined}\r\n        onClick={() => {\r\n          setRange(selectedRange);\r\n          setIsOpen(true);\r\n        }}\r\n        aria-label={\r\n          hasSelectedRange\r\n            ? `Selected date: ${selectedRange?.from ? format(selectedRange.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selectedRange?.to ? format(selectedRange.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n            : placeholder\r\n        }\r\n        disabled={disabled}\r\n        type=\"button\"\r\n      >\r\n        {hasSelectedRange ? (\r\n          <div className=\"mtx-flex mtx-flex-row mtx-gap-1 mtx-flex-1 mtx-justify-items-start\">\r\n            <span>\r\n              {fromText ?? \"From\"}\r\n              {labelSeparator}\r\n              {selectedRange?.from ? format(selectedRange.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>\r\n            {fromToSeparator}\r\n            <span>\r\n              {toText ?? \"To\"}\r\n              {labelSeparator}\r\n              {selectedRange?.to ? format(selectedRange.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>\r\n          </div>\r\n        ) : (\r\n          <span>{placeholder ?? \"Pick a Range\"}</span>\r\n        )}\r\n        <CalendarIcon className=\"mtx-mr-2 mtx-h-5 mtx-w-4 mtx-ms-auto\" />\r\n      </Button>\r\n      <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n        <DialogContent className=\"mtx-h-dscreen mtx-w-screen mtx-p-0 mtx-flex mtx-flex-col mtx-gap-0 data-[state=open]:mtx-animate-slide-from-bottom data-[state=closed]:mtx-animate-slide-to-bottom mtx-overflow-auto mtx-max-w-screen-2xl sm:mtx-rounded-none\">\r\n          <DialogHeader>\r\n            <DialogTitle asChild>\r\n              <div className=\"mtx-grid mtx-grid-cols-2 mtx-border-b mtx-border-b-gray-200 mtx-mt-3\">\r\n                <div className=\"mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-border-e mtx-border-e-gray-200 mtx-p-4\">\r\n                  <h5 className=\"mtx-text-text-300 mtx-font-medium mtx-text-xs\">From</h5>\r\n                  <h6 className=\"\">{range?.from ? format(range.from, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n                </div>\r\n                <div className=\"mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-p-4 mtx-flex mtx-flex-col mtx-justify-center\">\r\n                  <h5 className=\"mtx-text-text-300 mtx-font-medium mtx-text-xs\">To</h5>\r\n                  <h6 className=\"\">{range?.to ? format(range.to, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n                </div>\r\n              </div>\r\n            </DialogTitle>\r\n            <VisuallyHidden>\r\n              <DialogDescription>{\"Date Picker\"}</DialogDescription>\r\n            </VisuallyHidden>\r\n          </DialogHeader>\r\n          <div className=\"mtx-flex-1 mtx-flex mtx-flex-col mtx-items-center mtx-p-4\">\r\n            <Calendar\r\n              defaultMonth={range?.from}\r\n              startMonth={new Date(2000, 0, 1)}\r\n              endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n              {...props}\r\n              mode=\"range\"\r\n              selected={range}\r\n              onDayClick={handleDayClick}\r\n              className={cn(\"mtx-p-0\", calendarClassName)}\r\n              disabled={disabledDates}\r\n            />\r\n\r\n            <div className=\"mtx-flex mtx-justify-center mtx-items-center mtx-gap-4 mtx-mt-auto mtx-w-full\">\r\n              <Button variant=\"text\" className=\"mtx-flex-1 mtx-h-10\" onClick={handleCancel} type=\"button\">\r\n                {cancelText ?? \"Cancel\"}\r\n              </Button>\r\n              <Button variant=\"primary\" className=\"mtx-flex-1 mtx-h-10\" onClick={handleApply} type=\"button\">\r\n                {applyText ?? \"Apply\"}\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </DialogContent>\r\n      </Dialog>\r\n    </>\r\n  );\r\n};\r\n\r\nexport { MobileDateRangePicker, type MobileDateRangePickerProps };\r\n"],"names":["MobileDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","onDayClick","cancelText","applyText","onSelect","fromText","toText","disabled","disabledDates","labelSeparator","fromToSeparator","props","isOpen","setIsOpen","React","selectedFromKey","selectedToKey","selectedRange","toCalendarDateRangeFromKeys","range","setRange","hasSelectedRange","handleDayClick","date","modifiers","e","handleCancel","handleApply","toDateOnlyRange","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@trsys-tech/matrix-library",
   "description": "MatrixUI Library",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.1.1-canary.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -23,7 +23,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc -p tsconfig.build.json && vite build",
     "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",
@@ -94,37 +94,35 @@
     "react-hook-form": "^7.61.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@eslint/js": "^9.13.0",
-    "@hookform/resolvers": "^5.2.2",
-    "@storybook/addon-essentials": "^8.6.18",
-    "@storybook/addon-interactions": "^8.6.18",
-    "@storybook/addon-onboarding": "^8.6.18",
-    "@storybook/blocks": "^8.6.18",
-    "@storybook/react": "^8.6.18",
-    "@storybook/react-vite": "^8.6.18",
-    "@storybook/test": "^8.6.18",
+    "@chromatic-com/storybook": "^5.2.1",
+    "@eslint/js": "^10.0.1",
+    "@hookform/resolvers": "^5.4.2",
+    "@storybook/addon-a11y": "^10.5.4",
+    "@storybook/addon-docs": "^10.5.4",
+    "@storybook/addon-mcp": "^0.7.0",
+    "@storybook/react-vite": "^10.5.4",
     "@types/node": "^22.8.4",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "ajv": "^8.17.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.13.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint": "^10.8.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "eslint-plugin-storybook": "^10.5.4",
     "globals": "^15.11.0",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "postcss": "^8.4.47",
     "prettier": "3.3.3",
-    "storybook": "^8.6.18",
+    "storybook": "^10.5.4",
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
+    "valibot": "^1.4.2",
     "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-dts": "^5.0.3",
     "zod": "^4.3.6"
   },
   "eslintConfig": {