@trsys-tech/matrix-library 0.6.1 → 0.6.3-canary-0

package/dist/drawer.es.js

@@ -7,27 +7,27 @@ import { cn as i } from "./utils.es.js";
 import { Modal as M } from "./modal.es.js";
 import { IconButton as R } from "./iconbutton.es.js";
 import { useIsMobile as E } from "./use-mobile.es.js";
-const w = "Drawer", [A] = D(w), [_, N] = A(w), j = h.forwardRef((t, r) => {
-  const { asChild: c, anchor: n = "right", children: o, open: l, width: d = 240, className: s, onClose: a, __scopeDrawer: f, ...m } = t, p = c ? g : "div", u = E();
-  return /* @__PURE__ */ e(p, { ref: r, className: i("flex", s), ...m, children: /* @__PURE__ */ e(_, { anchor: n, onClose: a, open: l, width: d, isMobile: u, scope: f, children: o }) });
+const w = "Drawer", [A] = D(w), [_, N] = A(w), j = h.forwardRef((o, r) => {
+  const { asChild: c, anchor: n = "right", children: t, open: l, width: d = 240, className: s, onClose: a, __scopeDrawer: f, ...m } = o, p = c ? g : "div", u = E();
+  return /* @__PURE__ */ e(p, { ref: r, className: i("flex", s), ...m, children: /* @__PURE__ */ e(_, { anchor: n, onClose: a, open: l, width: d, isMobile: u, scope: f, children: t }) });
 });
 j.displayName = w;
 const x = "DrawerMain", k = h.forwardRef(
-  ({ asChild: t, children: r, className: c, style: n, __scopeDrawer: o, ...l }, d) => {
-    const s = t ? g : "div", { anchor: a, open: f, width: m, isMobile: p } = N(x, o), u = h.useMemo(() => p ? {} : a === "left" ? { marginInlineStart: f ? m : 0 } : { marginInlineEnd: f ? m : 0 }, [a, f, m, p]);
+  ({ asChild: o, children: r, className: c, style: n, __scopeDrawer: t, ...l }, d) => {
+    const s = o ? g : "div", { anchor: a, open: f, width: m, isMobile: p } = N(x, t), u = h.useMemo(() => p ? {} : a === "left" ? { marginInlineStart: f ? m : 0 } : { marginInlineEnd: f ? m : 0 }, [a, f, m, p]);
     return /* @__PURE__ */ e(s, { ref: d, className: i("flex-grow overflow-hidden", c), style: { ...n, ...u }, ...l, children: r });
   }
 );
 k.displayName = x;
-const y = "DrawerContent", I = h.forwardRef(({ children: t, title: r, __scopeDrawer: c }, n) => {
-  const { anchor: o, open: l, width: d, onClose: s, isMobile: a } = N(y, c);
-  return /* @__PURE__ */ e(v, { children: a ? /* @__PURE__ */ e(M, { title: r, open: l, onOpenChange: s, ref: n, fullScreen: !0, children: t }) : /* @__PURE__ */ e("div", { className: i("hidden md:block overflow-hidden"), style: { width: d }, ref: n, children: /* @__PURE__ */ b(
+const y = "DrawerContent", I = h.forwardRef(({ children: o, title: r, __scopeDrawer: c }, n) => {
+  const { anchor: t, open: l, width: d, onClose: s, isMobile: a } = N(y, c);
+  return /* @__PURE__ */ e(v, { children: a ? /* @__PURE__ */ e(M, { title: r, open: l, onOpenChange: s, ref: n, fullScreen: !0, children: o }) : /* @__PURE__ */ e("div", { className: i("hidden md:block overflow-hidden"), style: { width: d }, ref: n, children: /* @__PURE__ */ b(
     "div",
     {
       className: i(
         "overflow-y-auto flex flex-col h-full top-0 z-[120] bg-background transition-all border-gray-200",
-        l ? "" : o === "left" ? "-translate-x-full rtl:translate-x-full invisible" : "translate-x-full rtl:-translate-x-full invisible",
-        o === "left" ? "border-r" : "border-l"
+        l ? "" : t === "left" ? "-translate-x-full rtl:translate-x-full invisible" : "translate-x-full rtl:-translate-x-full invisible",
+        t === "left" ? "border-r" : "border-l"
       ),
       children: [
         /* @__PURE__ */ b(
@@ -35,15 +35,15 @@ const y = "DrawerContent", I = h.forwardRef(({ children: t, title: r, __scopeDra
           {
             className: i(
               "h-9 flex items-center gap-2 p-2 bg-background w-full sticky top-0 border-b border-gray-200",
-              o === "right" ? "justify-start rtl:justify-end" : "justify-end rtl:justify-start"
+              t === "right" ? "justify-start rtl:justify-end" : "justify-end rtl:justify-start"
             ),
             children: [
-              /* @__PURE__ */ e(R, { onClick: s, className: "w-5 h-5 p-0", children: /* @__PURE__ */ e(C, { className: i("w-5 h-5", o === "right" ? "rtl:-scale-100" : "-scale-100 rtl:scale-100") }) }),
+              /* @__PURE__ */ e(R, { type: "button", onClick: s, className: "w-5 h-5 p-0", children: /* @__PURE__ */ e(C, { className: i("w-5 h-5", t === "right" ? "rtl:-scale-100" : "-scale-100 rtl:scale-100") }) }),
               typeof r == "string" || typeof r == "number" ? /* @__PURE__ */ e("h2", { className: "text-lg font-bold text-text", children: r }) : r
             ]
           }
         ),
-        t
+        o
       ]
     }
   ) }) });

package/dist/drawer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.es.js","sources":["../src/components/drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { ChevronsRight } from \"@trsys-tech/matrix-icons\";\r\nimport { createContextScope, Scope } from \"@radix-ui/react-context\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Modal } from \"../modal/Modal\";\r\nimport { IconButton } from \"../icon-botton/IconButton\";\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\n\r\ntype ScopedProps<P> = P & { __scopeDrawer?: Scope };\r\n\r\nconst DRAWER_NAME = \"Drawer\";\r\n\r\nconst [createDrawerContext] = createContextScope(DRAWER_NAME);\r\n\r\ninterface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  open: boolean;\r\n  onClose?: () => void;\r\n  anchor?: \"left\" | \"right\";\r\n  width?: number;\r\n  children?: React.ReactNode;\r\n  asChild?: boolean;\r\n  mobileBreakpoint?: number;\r\n}\r\n\r\ntype DrawerContextValue = {\r\n  open: boolean;\r\n  onClose?: () => void;\r\n  anchor: \"left\" | \"right\";\r\n  width: number;\r\n  isMobile: boolean;\r\n};\r\n\r\nconst [DrawerProvider, useDrawerProvider] = createDrawerContext<DrawerContextValue>(DRAWER_NAME);\r\n\r\n/**\r\n * Drawer component\r\n * This is the wrapper component for Drawer content and main components\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {boolean} open - Drawer open state\r\n * @param {() => void} onClose - Drawer close handler\r\n * @param {\"left\" | \"right\"} anchor - Drawer anchor position\r\n * @param {number} width - Drawer width\r\n * @param {React.ReactNode} children - Drawer children\r\n * @param {boolean} asChild - Render as child component\r\n * @returns {React.ReactElement}\r\n */\r\nconst Drawer = React.forwardRef<React.ElementRef<\"div\">, ScopedProps<DrawerProps>>((props, ref) => {\r\n  const { asChild, anchor = \"right\", children, open, width = 240, className, onClose, __scopeDrawer, ...restProps } = props;\r\n  const Comp = asChild ? Slot : \"div\";\r\n\r\n  const isMobile = useIsMobile();\r\n\r\n  return (\r\n    <Comp ref={ref} className={cn(\"flex\", className)} {...restProps}>\r\n      <DrawerProvider anchor={anchor} onClose={onClose} open={open} width={width} isMobile={isMobile} scope={__scopeDrawer}>\r\n        {children}\r\n      </DrawerProvider>\r\n    </Comp>\r\n  );\r\n});\r\n\r\nDrawer.displayName = DRAWER_NAME;\r\n\r\ninterface DrawerMainProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  asChild: boolean;\r\n}\r\n\r\nconst DRAWER_MAIN_NAME = \"DrawerMain\";\r\n\r\n/**\r\n * DrawerMain component\r\n * This is the main container for the tree that should be shown always\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {boolean} asChild - Render as child component\r\n * @property {React.ReactNode} children - DrawerMain children\r\n * @property {string} className - DrawerMain class name\r\n * @property {React.CSSProperties} style - DrawerMain style\r\n * @property {ScopedProps<DrawerMainProps>} __scopeDrawer - DrawerMain scope\r\n * @property {React.Ref<HTMLDivElement>} ref - DrawerMain ref\r\n * @property {React.HTMLAttributes<HTMLDivElement>} props - DrawerMain props\r\n * @returns {React.ReactElement}\r\n */\r\nconst DrawerMain = React.forwardRef<HTMLDivElement, ScopedProps<DrawerMainProps>>(\r\n  ({ asChild, children, className, style, __scopeDrawer, ...props }, ref) => {\r\n    const Comp = asChild ? Slot : \"div\";\r\n    const { anchor, open, width, isMobile } = useDrawerProvider(DRAWER_MAIN_NAME, __scopeDrawer);\r\n\r\n    const marginStyle = React.useMemo(() => {\r\n      if (isMobile) {\r\n        return {};\r\n      }\r\n      if (anchor === \"left\") {\r\n        return { marginInlineStart: open ? width : 0 };\r\n      } else {\r\n        return { marginInlineEnd: open ? width : 0 };\r\n      }\r\n    }, [anchor, open, width, isMobile]);\r\n\r\n    return (\r\n      <Comp ref={ref} className={cn(\"flex-grow overflow-hidden\", className)} style={{ ...style, ...marginStyle }} {...props}>\r\n        {children}\r\n      </Comp>\r\n    );\r\n  },\r\n);\r\n\r\nDrawerMain.displayName = DRAWER_MAIN_NAME;\r\n\r\ntype DrawerContentProps = {\r\n  children?: React.ReactNode;\r\n  title: React.ReactNode;\r\n};\r\n\r\nconst DRAWER_CONTENT_NAME = \"DrawerContent\";\r\n\r\n/**\r\n * DrawerContent component\r\n * This is the content container for the tree that should be shown when the drawer is open\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {React.ReactNode} children - DrawerContent children\r\n * @param {React.ReactNode} title - DrawerContent title\r\n * @property {ScopedProps<DrawerContentProps>} __scopeDrawer - DrawerContent scope\r\n * @property {React.Ref<HTMLDivElement>} ref - DrawerContent ref\r\n * @property {React.HTMLAttributes<HTMLDivElement>} props - DrawerContent props\r\n * @returns {React.ReactElement}\r\n */\r\nconst DrawerContent = React.forwardRef<HTMLDivElement, ScopedProps<DrawerContentProps>>(({ children, title, __scopeDrawer }, ref) => {\r\n  const { anchor, open, width, onClose, isMobile } = useDrawerProvider(DRAWER_CONTENT_NAME, __scopeDrawer);\r\n\r\n  return (\r\n    <>\r\n      {isMobile ? (\r\n        <Modal title={title} open={open} onOpenChange={onClose} ref={ref} fullScreen>\r\n          {children}\r\n        </Modal>\r\n      ) : (\r\n        <div className={cn(\"hidden md:block overflow-hidden\")} style={{ width }} ref={ref}>\r\n          <div\r\n            className={cn(\r\n              \"overflow-y-auto flex flex-col h-full top-0 z-[120] bg-background transition-all border-gray-200\",\r\n              open ? \"\" : anchor === \"left\" ? \"-translate-x-full rtl:translate-x-full invisible\" : \"translate-x-full rtl:-translate-x-full invisible\",\r\n              anchor === \"left\" ? \"border-r\" : \"border-l\",\r\n            )}\r\n          >\r\n            <div\r\n              className={cn(\r\n                \"h-9 flex items-center gap-2 p-2 bg-background w-full sticky top-0 border-b border-gray-200\",\r\n                anchor === \"right\" ? \"justify-start rtl:justify-end\" : \"justify-end rtl:justify-start\",\r\n              )}\r\n            >\r\n              <IconButton onClick={onClose} className=\"w-5 h-5 p-0\">\r\n                <ChevronsRight className={cn(\"w-5 h-5\", anchor === \"right\" ? \"rtl:-scale-100\" : \"-scale-100 rtl:scale-100\")} />\r\n              </IconButton>\r\n              {typeof title === \"string\" || typeof title === \"number\" ? <h2 className=\"text-lg font-bold text-text\">{title}</h2> : title}\r\n            </div>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nDrawerContent.displayName = DRAWER_CONTENT_NAME;\r\n\r\nconst Root = Drawer;\r\nconst Main = DrawerMain;\r\nconst Content = DrawerContent;\r\n\r\nexport { Drawer, DrawerMain, DrawerContent, Root, Main, Content };\r\nexport type { DrawerContentProps, DrawerMainProps, DrawerProps };\r\n"],"names":["DRAWER_NAME","createDrawerContext","createContextScope","DrawerProvider","useDrawerProvider","Drawer","React","props","ref","asChild","anchor","children","open","width","className","onClose","__scopeDrawer","restProps","Comp","Slot","isMobile","useIsMobile","jsx","cn","DRAWER_MAIN_NAME","DrawerMain","style","marginStyle","DRAWER_CONTENT_NAME","DrawerContent","title","Fragment","Modal","jsxs","IconButton","ChevronsRight"],"mappings":"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"}
+{"version":3,"file":"drawer.es.js","sources":["../src/components/drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { ChevronsRight } from \"@trsys-tech/matrix-icons\";\r\nimport { createContextScope, Scope } from \"@radix-ui/react-context\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Modal } from \"../modal/Modal\";\r\nimport { IconButton } from \"../icon-botton/IconButton\";\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\n\r\ntype ScopedProps<P> = P & { __scopeDrawer?: Scope };\r\n\r\nconst DRAWER_NAME = \"Drawer\";\r\n\r\nconst [createDrawerContext] = createContextScope(DRAWER_NAME);\r\n\r\ninterface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  open: boolean;\r\n  onClose?: () => void;\r\n  anchor?: \"left\" | \"right\";\r\n  width?: number;\r\n  children?: React.ReactNode;\r\n  asChild?: boolean;\r\n  mobileBreakpoint?: number;\r\n}\r\n\r\ntype DrawerContextValue = {\r\n  open: boolean;\r\n  onClose?: () => void;\r\n  anchor: \"left\" | \"right\";\r\n  width: number;\r\n  isMobile: boolean;\r\n};\r\n\r\nconst [DrawerProvider, useDrawerProvider] = createDrawerContext<DrawerContextValue>(DRAWER_NAME);\r\n\r\n/**\r\n * Drawer component\r\n * This is the wrapper component for Drawer content and main components\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {boolean} open - Drawer open state\r\n * @param {() => void} onClose - Drawer close handler\r\n * @param {\"left\" | \"right\"} anchor - Drawer anchor position\r\n * @param {number} width - Drawer width\r\n * @param {React.ReactNode} children - Drawer children\r\n * @param {boolean} asChild - Render as child component\r\n * @returns {React.ReactElement}\r\n */\r\nconst Drawer = React.forwardRef<React.ElementRef<\"div\">, ScopedProps<DrawerProps>>((props, ref) => {\r\n  const { asChild, anchor = \"right\", children, open, width = 240, className, onClose, __scopeDrawer, ...restProps } = props;\r\n  const Comp = asChild ? Slot : \"div\";\r\n\r\n  const isMobile = useIsMobile();\r\n\r\n  return (\r\n    <Comp ref={ref} className={cn(\"flex\", className)} {...restProps}>\r\n      <DrawerProvider anchor={anchor} onClose={onClose} open={open} width={width} isMobile={isMobile} scope={__scopeDrawer}>\r\n        {children}\r\n      </DrawerProvider>\r\n    </Comp>\r\n  );\r\n});\r\n\r\nDrawer.displayName = DRAWER_NAME;\r\n\r\ninterface DrawerMainProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  asChild: boolean;\r\n}\r\n\r\nconst DRAWER_MAIN_NAME = \"DrawerMain\";\r\n\r\n/**\r\n * DrawerMain component\r\n * This is the main container for the tree that should be shown always\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {boolean} asChild - Render as child component\r\n * @property {React.ReactNode} children - DrawerMain children\r\n * @property {string} className - DrawerMain class name\r\n * @property {React.CSSProperties} style - DrawerMain style\r\n * @property {ScopedProps<DrawerMainProps>} __scopeDrawer - DrawerMain scope\r\n * @property {React.Ref<HTMLDivElement>} ref - DrawerMain ref\r\n * @property {React.HTMLAttributes<HTMLDivElement>} props - DrawerMain props\r\n * @returns {React.ReactElement}\r\n */\r\nconst DrawerMain = React.forwardRef<HTMLDivElement, ScopedProps<DrawerMainProps>>(\r\n  ({ asChild, children, className, style, __scopeDrawer, ...props }, ref) => {\r\n    const Comp = asChild ? Slot : \"div\";\r\n    const { anchor, open, width, isMobile } = useDrawerProvider(DRAWER_MAIN_NAME, __scopeDrawer);\r\n\r\n    const marginStyle = React.useMemo(() => {\r\n      if (isMobile) {\r\n        return {};\r\n      }\r\n      if (anchor === \"left\") {\r\n        return { marginInlineStart: open ? width : 0 };\r\n      } else {\r\n        return { marginInlineEnd: open ? width : 0 };\r\n      }\r\n    }, [anchor, open, width, isMobile]);\r\n\r\n    return (\r\n      <Comp ref={ref} className={cn(\"flex-grow overflow-hidden\", className)} style={{ ...style, ...marginStyle }} {...props}>\r\n        {children}\r\n      </Comp>\r\n    );\r\n  },\r\n);\r\n\r\nDrawerMain.displayName = DRAWER_MAIN_NAME;\r\n\r\ntype DrawerContentProps = {\r\n  children?: React.ReactNode;\r\n  title: React.ReactNode;\r\n};\r\n\r\nconst DRAWER_CONTENT_NAME = \"DrawerContent\";\r\n\r\n/**\r\n * DrawerContent component\r\n * This is the content container for the tree that should be shown when the drawer is open\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {React.ReactNode} children - DrawerContent children\r\n * @param {React.ReactNode} title - DrawerContent title\r\n * @property {ScopedProps<DrawerContentProps>} __scopeDrawer - DrawerContent scope\r\n * @property {React.Ref<HTMLDivElement>} ref - DrawerContent ref\r\n * @property {React.HTMLAttributes<HTMLDivElement>} props - DrawerContent props\r\n * @returns {React.ReactElement}\r\n */\r\nconst DrawerContent = React.forwardRef<HTMLDivElement, ScopedProps<DrawerContentProps>>(({ children, title, __scopeDrawer }, ref) => {\r\n  const { anchor, open, width, onClose, isMobile } = useDrawerProvider(DRAWER_CONTENT_NAME, __scopeDrawer);\r\n\r\n  return (\r\n    <>\r\n      {isMobile ? (\r\n        <Modal title={title} open={open} onOpenChange={onClose} ref={ref} fullScreen>\r\n          {children}\r\n        </Modal>\r\n      ) : (\r\n        <div className={cn(\"hidden md:block overflow-hidden\")} style={{ width }} ref={ref}>\r\n          <div\r\n            className={cn(\r\n              \"overflow-y-auto flex flex-col h-full top-0 z-[120] bg-background transition-all border-gray-200\",\r\n              open ? \"\" : anchor === \"left\" ? \"-translate-x-full rtl:translate-x-full invisible\" : \"translate-x-full rtl:-translate-x-full invisible\",\r\n              anchor === \"left\" ? \"border-r\" : \"border-l\",\r\n            )}\r\n          >\r\n            <div\r\n              className={cn(\r\n                \"h-9 flex items-center gap-2 p-2 bg-background w-full sticky top-0 border-b border-gray-200\",\r\n                anchor === \"right\" ? \"justify-start rtl:justify-end\" : \"justify-end rtl:justify-start\",\r\n              )}\r\n            >\r\n              <IconButton type=\"button\" onClick={onClose} className=\"w-5 h-5 p-0\">\r\n                <ChevronsRight className={cn(\"w-5 h-5\", anchor === \"right\" ? \"rtl:-scale-100\" : \"-scale-100 rtl:scale-100\")} />\r\n              </IconButton>\r\n              {typeof title === \"string\" || typeof title === \"number\" ? <h2 className=\"text-lg font-bold text-text\">{title}</h2> : title}\r\n            </div>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nDrawerContent.displayName = DRAWER_CONTENT_NAME;\r\n\r\nconst Root = Drawer;\r\nconst Main = DrawerMain;\r\nconst Content = DrawerContent;\r\n\r\nexport { Drawer, DrawerMain, DrawerContent, Root, Main, Content };\r\nexport type { DrawerContentProps, DrawerMainProps, DrawerProps };\r\n"],"names":["DRAWER_NAME","createDrawerContext","createContextScope","DrawerProvider","useDrawerProvider","Drawer","React","props","ref","asChild","anchor","children","open","width","className","onClose","__scopeDrawer","restProps","Comp","Slot","isMobile","useIsMobile","jsx","cn","DRAWER_MAIN_NAME","DrawerMain","style","marginStyle","DRAWER_CONTENT_NAME","DrawerContent","title","Fragment","Modal","jsxs","IconButton","ChevronsRight"],"mappings":"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"}

package/dist/mobiledatepicker.es.js

@@ -1,79 +1,80 @@
-import { jsxs as r, Fragment as v, jsx as e } from "react/jsx-runtime";
-import * as c from "react";
-import { VisuallyHidden as M } from "@radix-ui/react-visually-hidden";
-import { Calendar as N } from "@trsys-tech/matrix-icons";
-import { cn as m } from "./utils.es.js";
-import { Calendar as C } from "./calendar.es.js";
+import { jsxs as a, Fragment as M, jsx as e } from "react/jsx-runtime";
+import * as m from "react";
+import { VisuallyHidden as N } from "@radix-ui/react-visually-hidden";
+import { Calendar as C } from "@trsys-tech/matrix-icons";
+import { cn as p } from "./utils.es.js";
+import { Calendar as k } from "./calendar.es.js";
 import { Button as o } from "./button.es.js";
-import { Dialog as k, DialogContent as j, DialogHeader as P, DialogTitle as F, DialogDescription as O } from "./dialog.es.js";
-import { format as i } from "./format.es.js";
-const T = ({
+import { Dialog as j, DialogContent as P, DialogHeader as S, DialogTitle as F, DialogDescription as O } from "./dialog.es.js";
+import { format as d } from "./format.es.js";
+const V = ({
   formatStr: l,
-  selected: a,
-  placeholder: p,
-  className: h,
-  calendarClassName: f,
-  cancelText: u,
-  applyText: b,
-  onSelect: x,
-  disabled: g,
-  ...y
+  selected: s,
+  placeholder: h,
+  className: f,
+  calendarClassName: u,
+  cancelText: b,
+  applyText: x,
+  onSelect: g,
+  disabled: y,
+  ...D
 }) => {
-  const [w, n] = c.useState(!1), [t, s] = c.useState(a), d = () => {
-    n(!1), s(a);
-  }, D = () => {
-    x?.(t), n(!1);
+  const [v, n] = m.useState(!1), t = s ? new Date(s) : void 0, [r, i] = m.useState(t), c = () => {
+    n(!1), i(t);
+  }, w = () => {
+    g?.(r), n(!1);
   };
-  return /* @__PURE__ */ r(v, { children: [
-    /* @__PURE__ */ r(
+  return /* @__PURE__ */ a(M, { children: [
+    /* @__PURE__ */ a(
       o,
       {
+        type: "button",
         variant: "text",
-        className: m(
+        className: p(
           "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
-          h
+          f
         ),
-        "data-placeholder": a ? void 0 : "",
+        "data-placeholder": t ? void 0 : "",
         onClick: () => n(!0),
-        "aria-label": a ? `Selected date: ${i(a, l ?? "yyyy/MM/dd")}` : "Pick a date",
-        disabled: g,
+        "aria-label": t ? `Selected date: ${d(t, l ?? "yyyy/MM/dd")}` : "Pick a date",
+        disabled: y,
         children: [
-          a ? i(a, l ?? "eee, MMM dd") : /* @__PURE__ */ e("span", { children: p ?? "Pick a date" }),
-          /* @__PURE__ */ e(N, { className: "mr-2 h-5 w-5 ms-auto" })
+          t ? d(t, l ?? "eee, MMM dd") : /* @__PURE__ */ e("span", { children: h ?? "Pick a date" }),
+          /* @__PURE__ */ e(C, { className: "mr-2 h-5 w-5 ms-auto" })
         ]
       }
     ),
-    /* @__PURE__ */ e(k, { open: w, onOpenChange: d, children: /* @__PURE__ */ r(j, { className: "h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none", children: [
-      /* @__PURE__ */ r(P, { className: "p-4 border-b border-b-gray-200", children: [
-        /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ r("div", { className: "text-sm font-bold space-y-1 mt-3", children: [
-          /* @__PURE__ */ e("h5", { className: "text-text-300", children: t?.getFullYear() ?? /* @__PURE__ */ e("pre", { children: " " }) }),
-          /* @__PURE__ */ e("h6", { className: "", children: t ? i(t, l ?? "eee, MMM dd") : /* @__PURE__ */ e("pre", { children: " " }) })
+    /* @__PURE__ */ e(j, { open: v, onOpenChange: c, children: /* @__PURE__ */ a(P, { className: "h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none", children: [
+      /* @__PURE__ */ a(S, { className: "p-4 border-b border-b-gray-200", children: [
+        /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "text-sm font-bold space-y-1 mt-3", children: [
+          /* @__PURE__ */ e("h5", { className: "text-text-300", children: r?.getFullYear() ?? /* @__PURE__ */ e("pre", { children: " " }) }),
+          /* @__PURE__ */ e("h6", { className: "", children: r ? d(r, l ?? "eee, MMM dd") : /* @__PURE__ */ e("pre", { children: " " }) })
         ] }) }),
-        /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(O, { children: "Date Picker" }) })
+        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(O, { children: "Date Picker" }) })
       ] }),
-      /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col items-center p-4", children: [
+      /* @__PURE__ */ a("div", { className: "flex-1 flex flex-col items-center p-4", children: [
         /* @__PURE__ */ e(
-          C,
+          k,
           {
-            defaultMonth: a,
+            defaultMonth: t,
             startMonth: new Date(2e3, 0, 1),
             endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 2, 11, 31),
-            ...y,
+            ...D,
             mode: "single",
-            selected: t,
-            onSelect: s,
-            className: m("p-0", f)
+            selected: r,
+            onSelect: i,
+            className: p("p-0", u)
           }
         ),
-        /* @__PURE__ */ r("div", { className: "flex justify-center items-center gap-4 mt-auto w-full", children: [
-          /* @__PURE__ */ e(o, { variant: "text", className: "flex-1 h-10", onClick: d, children: u ?? "Cancel" }),
-          /* @__PURE__ */ e(o, { variant: "primary", className: "flex-1 h-10", onClick: D, children: b ?? "Apply" })
+        /* @__PURE__ */ a("div", { className: "flex justify-center items-center gap-4 mt-auto w-full", children: [
+          /* @__PURE__ */ e(o, { type: "button", variant: "text", className: "flex-1 h-10", onClick: c, children: b ?? "Cancel" }),
+          /* @__PURE__ */ e(o, { type: "button", variant: "primary", className: "flex-1 h-10", onClick: w, children: x ?? "Apply" })
         ] })
       ] })
     ] }) })
   ] });
 };
 export {
-  T as MobileDatePicker
+  V as MobileDatePicker
 };
 //# sourceMappingURL=mobiledatepicker.es.js.map

package/dist/mobiledatepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobiledatepicker.es.js","sources":["../src/components/date-picker/MobileDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsSingle } from \"react-day-picker\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDatePickerProps = PropsBase &\r\n  Omit<PropsSingle, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: Date;\r\n    required?: boolean;\r\n    cancelText?: string;\r\n    applyText?: string;\r\n    onSelect?: (date: Date | undefined) => void;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst MobileDatePicker: React.FC<MobileDatePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  cancelText,\r\n  applyText,\r\n  onSelect,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(selected);\r\n\r\n  const handleCancel = () => {\r\n    setIsOpen(false);\r\n    setSelectedDate(selected);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(selectedDate);\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          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!selected ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={selected ? `Selected date: ${format(selected, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n        disabled={disabled}\r\n      >\r\n        {selected ? format(selected, formatStr ?? \"eee, MMM dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n        <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n      </Button>\r\n      <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n        <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n          <DialogHeader className=\"p-4 border-b border-b-gray-200\">\r\n            <DialogTitle asChild>\r\n              <div className=\"text-sm font-bold space-y-1 mt-3\">\r\n                <h5 className=\"text-text-300\">{selectedDate?.getFullYear() ?? <pre> </pre>}</h5>\r\n                <h6 className=\"\">{selectedDate ? format(selectedDate, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\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=\"flex-1 flex flex-col items-center p-4\">\r\n            <Calendar\r\n              defaultMonth={selected}\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=\"single\"\r\n              selected={selectedDate}\r\n              onSelect={setSelectedDate}\r\n              className={cn(\"p-0\", calendarClassName)}\r\n            />\r\n            <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n              <Button variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n                {cancelText ?? \"Cancel\"}\r\n              </Button>\r\n              <Button variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\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 { MobileDatePicker, type MobileDatePickerProps };\r\n"],"names":["MobileDatePicker","formatStr","selected","placeholder","className","calendarClassName","cancelText","applyText","onSelect","disabled","props","isOpen","setIsOpen","React","selectedDate","setSelectedDate","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}
+{"version":3,"file":"mobiledatepicker.es.js","sources":["../src/components/date-picker/MobileDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsSingle } from \"react-day-picker\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDatePickerProps = PropsBase &\r\n  Omit<PropsSingle, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: Date;\r\n    required?: boolean;\r\n    cancelText?: string;\r\n    applyText?: string;\r\n    onSelect?: (date: Date | undefined) => void;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst MobileDatePicker: React.FC<MobileDatePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  cancelText,\r\n  applyText,\r\n  onSelect,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const validatedSelectedDate = selected ? new Date(selected) : undefined;\r\n  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(validatedSelectedDate);\r\n\r\n  const handleCancel = () => {\r\n    setIsOpen(false);\r\n    setSelectedDate(validatedSelectedDate);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(selectedDate);\r\n    setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Button\r\n        type=\"button\"\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!validatedSelectedDate ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={validatedSelectedDate ? `Selected date: ${format(validatedSelectedDate, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n        disabled={disabled}\r\n      >\r\n        {validatedSelectedDate ? format(validatedSelectedDate, formatStr ?? \"eee, MMM dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n        <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n      </Button>\r\n      <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n        <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n          <DialogHeader className=\"p-4 border-b border-b-gray-200\">\r\n            <DialogTitle asChild>\r\n              <div className=\"text-sm font-bold space-y-1 mt-3\">\r\n                <h5 className=\"text-text-300\">{selectedDate?.getFullYear() ?? <pre> </pre>}</h5>\r\n                <h6 className=\"\">{selectedDate ? format(selectedDate, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\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=\"flex-1 flex flex-col items-center p-4\">\r\n            <Calendar\r\n              defaultMonth={validatedSelectedDate}\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=\"single\"\r\n              selected={selectedDate}\r\n              onSelect={setSelectedDate}\r\n              className={cn(\"p-0\", calendarClassName)}\r\n            />\r\n            <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n              <Button type=\"button\" variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n                {cancelText ?? \"Cancel\"}\r\n              </Button>\r\n              <Button type=\"button\" variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\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 { MobileDatePicker, type MobileDatePickerProps };\r\n"],"names":["MobileDatePicker","formatStr","selected","placeholder","className","calendarClassName","cancelText","applyText","onSelect","disabled","props","isOpen","setIsOpen","React","validatedSelectedDate","selectedDate","setSelectedDate","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}

package/dist/mobiledaterangepicker.es.js

@@ -13,9 +13,9 @@ const K = ({
   placeholder: d,
   className: h,
   calendarClassName: g,
-  onDayClick: x,
-  cancelText: y,
-  applyText: u,
+  onDayClick: y,
+  cancelText: u,
+  applyText: x,
   onSelect: b,
   fromText: M,
   toText: v,
@@ -23,7 +23,7 @@ const K = ({
   ...w
 }) => {
   const [C, s] = f.useState(!1), [e, i] = f.useState(r), D = (a, k, j) => {
-    x?.(a, k, j), !e || !e.from ? i({ from: a, to: void 0 }) : a < e.from ? e.to ? i({ from: a, to: e.to }) : i({ from: a, to: e.from }) : e?.from?.getTime() === a?.getTime() && (e?.from?.getTime() === e?.to?.getTime() || !e.to) ? i(void 0) : e?.from?.getTime() !== e?.to?.getTime() && (e.from?.getTime() === a?.getTime() || e?.to?.getTime() === a?.getTime()) ? i({ from: a, to: a }) : i({ ...e, to: a });
+    y?.(a, k, j), !e || !e.from ? i({ from: a, to: void 0 }) : a < e.from ? e.to ? i({ from: a, to: e.to }) : i({ from: a, to: e.from }) : e?.from?.getTime() === a?.getTime() && (e?.from?.getTime() === e?.to?.getTime() || !e.to) ? i(void 0) : e?.from?.getTime() !== e?.to?.getTime() && (e.from?.getTime() === a?.getTime() || e?.to?.getTime() === a?.getTime()) ? i({ from: a, to: a }) : i({ ...e, to: a });
   }, c = () => {
     s(!1), i(r);
   }, T = () => {
@@ -33,6 +33,7 @@ const K = ({
     /* @__PURE__ */ t(
       m,
       {
+        type: "button",
         variant: "text",
         className: p(
           "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
@@ -89,8 +90,8 @@ const K = ({
           }
         ),
         /* @__PURE__ */ t("div", { className: "flex justify-center items-center gap-4 mt-auto w-full", children: [
-          /* @__PURE__ */ o(m, { variant: "text", className: "flex-1 h-10", onClick: c, children: y ?? "Cancel" }),
-          /* @__PURE__ */ o(m, { variant: "primary", className: "flex-1 h-10", onClick: T, children: u ?? "Apply" })
+          /* @__PURE__ */ o(m, { type: "button", variant: "text", className: "flex-1 h-10", onClick: c, children: u ?? "Cancel" }),
+          /* @__PURE__ */ o(m, { type: "button", variant: "primary", className: "flex-1 h-10", onClick: T, children: x ?? "Apply" })
         ] })
       ] })
     ] }) })

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 } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDateRangePickerProps = PropsBase &\r\n  Omit<PropsRange, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: DateRange;\r\n    required?: boolean;\r\n    cancelText?: string;\r\n    applyText?: string;\r\n    onSelect?: (date: DateRange | undefined) => void;\r\n    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n  };\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  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const [range, setRange] = React.useState<DateRange | undefined>(selected);\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(selected);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(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          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!selected ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={\r\n          selected\r\n            ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n            : placeholder\r\n        }\r\n        disabled={disabled}\r\n      >\r\n        {selected ? (\r\n          <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n            <span>\r\n              {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>{\" \"}\r\n            <span>\r\n              {toText ?? \"To\"}: {selected?.to ? format(selected.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=\"mr-2 h-5 w-4 ms-auto\" />\r\n      </Button>\r\n      <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n        <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n          <DialogHeader>\r\n            <DialogTitle asChild>\r\n              <div className=\"grid grid-cols-2 border-b border-b-gray-200 mt-3\">\r\n                <div className=\"text-sm font-bold space-y-1 border-e border-e-gray-200 p-4\">\r\n                  <h5 className=\"text-text-300 font-medium 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=\"text-sm font-bold space-y-1 p-4 flex flex-col justify-center\">\r\n                  <h5 className=\"text-text-300 font-medium 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=\"flex-1 flex flex-col items-center p-4\">\r\n            <Calendar\r\n              defaultMonth={selected?.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={selected}\r\n              onDayClick={handleDayClick}\r\n              className={cn(\"p-0\", calendarClassName)}\r\n            />\r\n\r\n            <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n              <Button variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n                {cancelText ?? \"Cancel\"}\r\n              </Button>\r\n              <Button variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\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","props","isOpen","setIsOpen","React","range","setRange","handleDayClick","date","modifiers","e","handleCancel","handleApply","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 } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDateRangePickerProps = PropsBase &\r\n  Omit<PropsRange, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: DateRange;\r\n    required?: boolean;\r\n    cancelText?: string;\r\n    applyText?: string;\r\n    onSelect?: (date: DateRange | undefined) => void;\r\n    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n  };\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  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const [range, setRange] = React.useState<DateRange | undefined>(selected);\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(selected);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(range);\r\n    setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Button\r\n        type=\"button\"\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!selected ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={\r\n          selected\r\n            ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n            : placeholder\r\n        }\r\n        disabled={disabled}\r\n      >\r\n        {selected ? (\r\n          <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n            <span>\r\n              {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>{\" \"}\r\n            <span>\r\n              {toText ?? \"To\"}: {selected?.to ? format(selected.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=\"mr-2 h-5 w-4 ms-auto\" />\r\n      </Button>\r\n      <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n        <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n          <DialogHeader>\r\n            <DialogTitle asChild>\r\n              <div className=\"grid grid-cols-2 border-b border-b-gray-200 mt-3\">\r\n                <div className=\"text-sm font-bold space-y-1 border-e border-e-gray-200 p-4\">\r\n                  <h5 className=\"text-text-300 font-medium 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=\"text-sm font-bold space-y-1 p-4 flex flex-col justify-center\">\r\n                  <h5 className=\"text-text-300 font-medium 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=\"flex-1 flex flex-col items-center p-4\">\r\n            <Calendar\r\n              defaultMonth={selected?.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={selected}\r\n              onDayClick={handleDayClick}\r\n              className={cn(\"p-0\", calendarClassName)}\r\n            />\r\n\r\n            <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n              <Button type=\"button\" variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n                {cancelText ?? \"Cancel\"}\r\n              </Button>\r\n              <Button type=\"button\" variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\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","props","isOpen","setIsOpen","React","range","setRange","handleDayClick","date","modifiers","e","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}

package/dist/mobiletimepicker.es.js

@@ -7,24 +7,25 @@ import { TimePickerContent as u } from "./timepickercontent.es.js";
 import { SwipableDrawer as f, SwipableDrawerContent as h, SwipableDrawerHeader as g, SwipableDrawerTitle as w, SwipableDrawerDescription as x } from "./swipabledrawer.es.js";
 const j = ({
   time: e,
-  onTimeChange: i,
-  className: n,
+  onTimeChange: n,
+  className: i,
   slotsProps: l,
   placeholder: d = "Pick a time",
   ...s
 }) => {
-  const [a, o] = p(!1);
-  return /* @__PURE__ */ t(f, { open: a, onOpenChange: o, children: [
+  const [o, a] = p(!1);
+  return /* @__PURE__ */ t(f, { open: o, onOpenChange: a, children: [
     /* @__PURE__ */ r(
       b,
       {
+        type: "button",
         variant: "text",
         className: m(
           "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
-          n
+          i
         ),
         "data-placeholder": e ? void 0 : "",
-        onClick: () => o(!0),
+        onClick: () => a(!0),
         "aria-label": e?.hour ? `Selected time: ${e.hour}:${e.minute} ${e.ampm}` : d,
         ...s,
         children: `${e?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${e?.minute?.toString()?.padStart(2, "0") ?? "--"} ${e?.ampm ?? "--"}`
@@ -35,7 +36,7 @@ const j = ({
         /* @__PURE__ */ r(w, { className: "text-primary text-lg font-bold text-start", children: " " }),
         /* @__PURE__ */ r(x, { children: " " })
       ] }) }),
-      /* @__PURE__ */ r(u, { isOpen: a, onTimeChange: i, time: e, slotsProps: l })
+      /* @__PURE__ */ r(u, { isOpen: o, onTimeChange: n, time: e, slotsProps: l })
     ] })
   ] });
 };

package/dist/mobiletimepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobiletimepicker.es.js","sources":["../src/components/date-picker/MobileTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport {\r\n  SwipableDrawer,\r\n  SwipableDrawerContent,\r\n  SwipableDrawerDescription,\r\n  SwipableDrawerHeader,\r\n  SwipableDrawerTitle,\r\n} from \"../drawer/SwipableDrawer\";\r\n\r\ntype MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst MobileTimePicker: React.FC<MobileTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <SwipableDrawer open={isOpen} onOpenChange={setIsOpen}>\r\n      <Button\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!time ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n        {...restProps}\r\n      >\r\n        {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n      </Button>\r\n      <SwipableDrawerContent>\r\n        <SwipableDrawerHeader className=\"p-0\">\r\n          <VisuallyHidden>\r\n            <SwipableDrawerTitle className=\"text-primary text-lg font-bold text-start\"> </SwipableDrawerTitle>\r\n            <SwipableDrawerDescription> </SwipableDrawerDescription>\r\n          </VisuallyHidden>\r\n        </SwipableDrawerHeader>\r\n        <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </SwipableDrawerContent>\r\n    </SwipableDrawer>\r\n  );\r\n};\r\nexport { MobileTimePicker, type MobileTimePickerProps };\r\n"],"names":["MobileTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","SwipableDrawer","jsx","Button","cn","SwipableDrawerContent","SwipableDrawerHeader","VisuallyHidden","SwipableDrawerTitle","SwipableDrawerDescription","TimePickerContent"],"mappings":";;;;;;;AA0BA,MAAMA,IAAoD,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACE,gBAAAC,EAACC,GAAA,EAAe,MAAMJ,GAAQ,cAAcC,GAC1C,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAX;AAAA,QAAA;AAAA,QAEF,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,SAAS,MAAMO,EAAU,EAAI;AAAA,QAC7B,cAAYP,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEnIc,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAqB,WAAU,OAC9B,UAAA,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAoB,WAAU,6CAA4C,UAAA,KAAC;AAAA,QAC5E,gBAAAN,EAACO,KAA0B,UAAA,IAAA,CAAC;AAAA,MAAA,EAAA,CAC9B,EAAA,CACF;AAAA,MACA,gBAAAP,EAACQ,GAAA,EAAkB,QAAAb,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,EAAA,CAAwB;AAAA,IAAA,EAAA,CACrG;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"mobiletimepicker.es.js","sources":["../src/components/date-picker/MobileTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport {\r\n  SwipableDrawer,\r\n  SwipableDrawerContent,\r\n  SwipableDrawerDescription,\r\n  SwipableDrawerHeader,\r\n  SwipableDrawerTitle,\r\n} from \"../drawer/SwipableDrawer\";\r\n\r\ntype MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst MobileTimePicker: React.FC<MobileTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <SwipableDrawer open={isOpen} onOpenChange={setIsOpen}>\r\n      <Button\r\n        type=\"button\"\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!time ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n        {...restProps}\r\n      >\r\n        {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n      </Button>\r\n      <SwipableDrawerContent>\r\n        <SwipableDrawerHeader className=\"p-0\">\r\n          <VisuallyHidden>\r\n            <SwipableDrawerTitle className=\"text-primary text-lg font-bold text-start\"> </SwipableDrawerTitle>\r\n            <SwipableDrawerDescription> </SwipableDrawerDescription>\r\n          </VisuallyHidden>\r\n        </SwipableDrawerHeader>\r\n        <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </SwipableDrawerContent>\r\n    </SwipableDrawer>\r\n  );\r\n};\r\nexport { MobileTimePicker, type MobileTimePickerProps };\r\n"],"names":["MobileTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","SwipableDrawer","jsx","Button","cn","SwipableDrawerContent","SwipableDrawerHeader","VisuallyHidden","SwipableDrawerTitle","SwipableDrawerDescription","TimePickerContent"],"mappings":";;;;;;;AA0BA,MAAMA,IAAoD,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACE,gBAAAC,EAACC,GAAA,EAAe,MAAMJ,GAAQ,cAAcC,GAC1C,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAX;AAAA,QAAA;AAAA,QAEF,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,SAAS,MAAMO,EAAU,EAAI;AAAA,QAC7B,cAAYP,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEnIc,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAqB,WAAU,OAC9B,UAAA,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAoB,WAAU,6CAA4C,UAAA,KAAC;AAAA,QAC5E,gBAAAN,EAACO,KAA0B,UAAA,IAAA,CAAC;AAAA,MAAA,EAAA,CAC9B,EAAA,CACF;AAAA,MACA,gBAAAP,EAACQ,GAAA,EAAkB,QAAAb,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,EAAA,CAAwB;AAAA,IAAA,EAAA,CACrG;AAAA,EAAA,GACF;AAEJ;"}

package/dist/modal.es.js

@@ -34,7 +34,7 @@ const P = i.forwardRef((e, a) => {
       {
         ref: a,
         className: s(
-          "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 flex flex-col gap-2 w-full max-w-lg p-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 flex flex-col gap-2 w-full max-w-lg p-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
           n ? "w-screen h-screen" : "max-w-lg",
           f
         ),

package/dist/modal.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.es.js","sources":["../src/components/modal/Modal.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { XMark } from \"@trsys-tech/matrix-icons\";\r\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst ModalPortal = DialogPrimitive.Portal;\r\n\r\nconst ModalClose = DialogPrimitive.Close;\r\n\r\nconst ModalOverlay = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n  <DialogPrimitive.Overlay\r\n    ref={ref}\r\n    className={cn(\r\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nModalOverlay.displayName = DialogPrimitive.Overlay.displayName;\r\n\r\nconst ModalHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div className={cn(\"flex flex-row justify-between\", className)} {...props} />\r\n);\r\nModalHeader.displayName = \"DialogHeader\";\r\n\r\nconst ModalFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div className={cn(\"flex flex-row justify-end gap-2\", className)} {...props} />\r\n);\r\nModalFooter.displayName = \"DialogFooter\";\r\ntype ModalFooterProps = React.ComponentProps<typeof ModalFooter>;\r\n\r\nconst ModalTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(\r\n  ({ className, ...props }, ref) => (\r\n    <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)} {...props} />\r\n  ),\r\n);\r\nModalTitle.displayName = DialogPrimitive.Title.displayName;\r\n\r\nconst ModalDescription = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Description>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\r\n>(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />);\r\nModalDescription.displayName = DialogPrimitive.Description.displayName;\r\n\r\ninterface ModalProps extends DialogPrimitive.DialogProps, Omit<DialogPrimitive.DialogContentProps, \"title\"> {\r\n  title: React.ReactNode;\r\n  fullScreen?: boolean;\r\n  slotProps?: {\r\n    title?: DialogPrimitive.DialogTitleProps;\r\n    close?: DialogPrimitive.DialogCloseProps;\r\n    header?: React.ComponentProps<typeof ModalHeader>;\r\n    portal?: DialogPrimitive.DialogPortalProps;\r\n    divider?: React.ComponentProps<\"hr\">;\r\n  };\r\n}\r\n\r\nconst Modal = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, ModalProps>((props, ref) => {\r\n  const { title, className, children, fullScreen, open, onOpenChange, defaultOpen, modal, slotProps, ...restProps } = props;\r\n\r\n  return (\r\n    <DialogPrimitive.Root defaultOpen={defaultOpen} modal={modal} open={open} onOpenChange={onOpenChange}>\r\n      <ModalPortal {...(slotProps?.portal ?? {})}>\r\n        <ModalOverlay />\r\n        <DialogPrimitive.Content\r\n          ref={ref}\r\n          className={cn(\r\n            \"fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 flex flex-col gap-2 w-full max-w-lg p-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\r\n            fullScreen ? \"w-screen h-screen\" : \"max-w-lg\",\r\n            className,\r\n          )}\r\n          {...restProps}\r\n          aria-describedby={undefined}\r\n        >\r\n          <ModalHeader {...(slotProps?.header ?? {})}>\r\n            <ModalTitle {...(slotProps?.title ?? {})}>{title}</ModalTitle>\r\n            <ModalClose\r\n              {...(slotProps?.close ?? {})}\r\n              className={cn(\r\n                \"rounded-sm hover:bg-primary-50 hover:ring-2 hover:ring-primary-50 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground mt-0\",\r\n                slotProps?.close?.className,\r\n              )}\r\n            >\r\n              <XMark className=\"h-5 w-5\" />\r\n              <span className=\"sr-only\">Close</span>\r\n            </ModalClose>\r\n          </ModalHeader>\r\n          {/* Divider: the padding and margin is because of a bug in chrome causes the border to be shown with more height than expected */}\r\n          <hr\r\n            {...(slotProps?.divider ?? {})}\r\n            className={cn(\"w-full border-muted -mt-[1px] pb-2\", fullScreen && \"w-screen -mx-4\", slotProps?.divider?.className)}\r\n          />\r\n          {children}\r\n        </DialogPrimitive.Content>\r\n      </ModalPortal>\r\n    </DialogPrimitive.Root>\r\n  );\r\n});\r\n\r\nexport { Modal, ModalFooter, type ModalProps, type ModalFooterProps };\r\n"],"names":["ModalPortal","DialogPrimitive","ModalClose","ModalOverlay","React","className","props","ref","jsx","cn","ModalHeader","ModalFooter","ModalTitle","ModalDescription","Modal","title","children","fullScreen","open","onOpenChange","defaultOpen","modal","slotProps","restProps","jsxs","XMark"],"mappings":"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"}
+{"version":3,"file":"modal.es.js","sources":["../src/components/modal/Modal.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { XMark } from \"@trsys-tech/matrix-icons\";\r\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst ModalPortal = DialogPrimitive.Portal;\r\n\r\nconst ModalClose = DialogPrimitive.Close;\r\n\r\nconst ModalOverlay = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n  <DialogPrimitive.Overlay\r\n    ref={ref}\r\n    className={cn(\r\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nModalOverlay.displayName = DialogPrimitive.Overlay.displayName;\r\n\r\nconst ModalHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div className={cn(\"flex flex-row justify-between\", className)} {...props} />\r\n);\r\nModalHeader.displayName = \"DialogHeader\";\r\n\r\nconst ModalFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div className={cn(\"flex flex-row justify-end gap-2\", className)} {...props} />\r\n);\r\nModalFooter.displayName = \"DialogFooter\";\r\ntype ModalFooterProps = React.ComponentProps<typeof ModalFooter>;\r\n\r\nconst ModalTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(\r\n  ({ className, ...props }, ref) => (\r\n    <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)} {...props} />\r\n  ),\r\n);\r\nModalTitle.displayName = DialogPrimitive.Title.displayName;\r\n\r\nconst ModalDescription = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Description>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\r\n>(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />);\r\nModalDescription.displayName = DialogPrimitive.Description.displayName;\r\n\r\ninterface ModalProps extends DialogPrimitive.DialogProps, Omit<DialogPrimitive.DialogContentProps, \"title\"> {\r\n  title: React.ReactNode;\r\n  fullScreen?: boolean;\r\n  slotProps?: {\r\n    title?: DialogPrimitive.DialogTitleProps;\r\n    close?: DialogPrimitive.DialogCloseProps;\r\n    header?: React.ComponentProps<typeof ModalHeader>;\r\n    portal?: DialogPrimitive.DialogPortalProps;\r\n    divider?: React.ComponentProps<\"hr\">;\r\n  };\r\n}\r\n\r\nconst Modal = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, ModalProps>((props, ref) => {\r\n  const { title, className, children, fullScreen, open, onOpenChange, defaultOpen, modal, slotProps, ...restProps } = props;\r\n\r\n  return (\r\n    <DialogPrimitive.Root defaultOpen={defaultOpen} modal={modal} open={open} onOpenChange={onOpenChange}>\r\n      <ModalPortal {...(slotProps?.portal ?? {})}>\r\n        <ModalOverlay />\r\n        <DialogPrimitive.Content\r\n          ref={ref}\r\n          className={cn(\r\n            \"fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 flex flex-col gap-2 w-full max-w-lg p-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg\",\r\n            fullScreen ? \"w-screen h-screen\" : \"max-w-lg\",\r\n            className,\r\n          )}\r\n          {...restProps}\r\n          aria-describedby={undefined}\r\n        >\r\n          <ModalHeader {...(slotProps?.header ?? {})}>\r\n            <ModalTitle {...(slotProps?.title ?? {})}>{title}</ModalTitle>\r\n            <ModalClose\r\n              {...(slotProps?.close ?? {})}\r\n              className={cn(\r\n                \"rounded-sm hover:bg-primary-50 hover:ring-2 hover:ring-primary-50 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground mt-0\",\r\n                slotProps?.close?.className,\r\n              )}\r\n            >\r\n              <XMark className=\"h-5 w-5\" />\r\n              <span className=\"sr-only\">Close</span>\r\n            </ModalClose>\r\n          </ModalHeader>\r\n          {/* Divider: the padding and margin is because of a bug in chrome causes the border to be shown with more height than expected */}\r\n          <hr\r\n            {...(slotProps?.divider ?? {})}\r\n            className={cn(\"w-full border-muted -mt-[1px] pb-2\", fullScreen && \"w-screen -mx-4\", slotProps?.divider?.className)}\r\n          />\r\n          {children}\r\n        </DialogPrimitive.Content>\r\n      </ModalPortal>\r\n    </DialogPrimitive.Root>\r\n  );\r\n});\r\n\r\nexport { Modal, ModalFooter, type ModalProps, type ModalFooterProps };\r\n"],"names":["ModalPortal","DialogPrimitive","ModalClose","ModalOverlay","React","className","props","ref","jsx","cn","ModalHeader","ModalFooter","ModalTitle","ModalDescription","Modal","title","children","fullScreen","open","onOpenChange","defaultOpen","modal","slotProps","restProps","jsxs","XMark"],"mappings":"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"}

package/dist/multiselect.es.js

@@ -94,6 +94,7 @@ const B = ae({
     /* @__PURE__ */ r(ce, { asChild: !0, children: /* @__PURE__ */ r(
       oe,
       {
+        type: "button",
         ref: Q,
         variant: "text",
         loading: b,