@skiddph/prui 0.8.0 → 0.9.1

package/dist/core/index.d.ts

@@ -11,7 +11,7 @@ export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, selectPr
 export { Switch, switchPropsMeta, type SwitchProps } from './switch';
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsPropsMeta, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps, } from './tabs';
 export { Badge, badgePropsMeta, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardPropsMeta, Avatar, avatarPropsMeta, type BadgeProps, type BadgeVariant, type AvatarProps, } from './card';
-export { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, dialogPropsMeta, type DialogProps, type DialogContentProps, } from './dialog';
+export { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, dialogPropsMeta, dialogBodyPropsMeta, type DialogProps, type DialogContentProps, type DialogBodyProps, } from './dialog';
 export { Dropdown, dropdownPropsMeta, type DropdownProps, type DropdownItem, } from './dropdown';
 export { ScrollArea, scrollAreaPropsMeta, type ScrollAreaProps } from './scroll-area';
 export { Modal, confirmModal, modalPropsMeta, confirmModalPropsMeta, type ModalProps, type ModalSize, type ConfirmModalOptions, type ConfirmModalType, } from './modal';
@@ -32,5 +32,6 @@ export { Breadcrumb, BreadcrumbItem, BreadcrumbEllipsis, breadcrumbPropsMeta, ty
 export { TreeView, treeViewPropsMeta, type TreeViewProps, type TreeViewItem } from './tree-view';
 export { Timeline, timelinePropsMeta, type TimelineProps, type TimelineItemData, type TimelineVariant } from './timeline';
 export { Calendar, calendarPropsMeta, toDateKey, fromDateKey, type CalendarProps } from './calendar';
-export { DatePicker, DateRangePicker, datePickerPropsMeta, dateRangePickerPropsMeta, type DatePickerProps, type DateRangePickerProps, type DateRange } from './date-picker';
+export { DatePicker, DateRangePicker, datePickerPropsMeta, dateRangePickerPropsMeta, type DatePickerProps, type DateRangePickerProps, type DateRange, type MaxRange } from './date-picker';
+export { TimePicker, TimeRangePicker, TimePanel, timePickerPropsMeta, timeRangePickerPropsMeta, type TimePickerProps, type TimeRangePickerProps, type TimeRange } from './time-picker';
 export { FileUpload, fileUploadPropsMeta, type FileUploadProps } from './file-upload';

package/dist/core/modal.js

@@ -1,79 +1,86 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import * as o from "react";
-import { createRoot as X } from "react-dom/client";
-import { X as q } from "lucide-react";
-import { cn as G } from "./cn.js";
-import { useReducedMotion as B, useOverlay as F, Portal as H } from "./overlay.js";
-import { getPruiDictionary as J } from "../i18n.js";
-const O = {
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import * as r from "react";
+import { createRoot as q } from "react-dom/client";
+import { X as G } from "lucide-react";
+import { cn as H } from "./cn.js";
+import { useReducedMotion as F, useOverlay as O, Portal as J } from "./overlay.js";
+import { getPruiDictionary as K } from "../i18n.js";
+const Y = {
   xs: { width: "320px", minWidth: "280px" },
   sm: { width: "448px", minWidth: "320px" },
   md: { width: "640px", minWidth: "384px" },
   lg: { width: "896px", minWidth: "512px" },
   xl: { width: "1152px", minWidth: "640px" }
-}, K = {
+}, Q = {
   xs: "24px 32px",
   sm: "24px 32px",
   md: "32px 40px",
   lg: "32px 40px",
   xl: "40px 48px"
-}, Q = o.forwardRef(function({
-  open: r,
-  onClose: n,
+}, U = r.forwardRef(function({
+  open: t,
+  onClose: a,
   children: W,
-  disableDefaultClose: p = !1,
+  disableDefaultClose: m = !1,
   closeOnOverlayClick: M = !0,
-  size: y,
-  xs: S,
-  sm: T,
+  size: w,
+  xs: R,
+  sm: S,
   md: N,
-  lg: m,
+  lg: f,
   xl: b,
-  maxWidth: R,
-  padding: z,
-  noPadding: w = !1,
-  showCloseButton: k = !0,
-  ariaLabel: f,
-  className: h,
+  maxWidth: z,
+  padding: P,
+  noPadding: k = !1,
+  showCloseButton: C = !0,
+  ariaLabel: h,
+  className: v,
   style: s,
-  initialFocus: P = "first"
+  initialFocus: j = "first"
 }, l) {
-  const v = y ?? (S ? "xs" : T ? "sm" : m ? "lg" : b ? "xl" : "md"), [x, i] = o.useState(r), [d, u] = o.useState(!1), [g, L] = o.useState(!1), A = o.useRef(null), C = B(), E = () => {
-    C || (L(!0), setTimeout(() => L(!1), 500));
+  const x = w ?? (R ? "xs" : S ? "sm" : f ? "lg" : b ? "xl" : "md"), [g, i] = r.useState(t), [u, c] = r.useState(!1), [y, E] = r.useState(!1), V = r.useRef(null), T = F(), d = r.useRef(null), I = () => {
+    T || (E(!0), d.current != null && window.clearTimeout(d.current), d.current = window.setTimeout(() => {
+      d.current = null, E(!1);
+    }, 500));
   };
-  o.useEffect(() => {
-    if (r) {
-      if (i(!0), C) {
-        u(!0);
+  r.useEffect(
+    () => () => {
+      d.current != null && window.clearTimeout(d.current);
+    },
+    []
+  ), r.useEffect(() => {
+    if (t) {
+      if (i(!0), T) {
+        c(!0);
         return;
       }
-      const t = setTimeout(() => {
-        u(!0);
+      const o = setTimeout(() => {
+        c(!0);
       }, 10);
-      return () => clearTimeout(t);
+      return () => clearTimeout(o);
     }
-    u(!1), C && i(!1);
-  }, [r, C]);
-  const { ref: V } = F({
-    open: r,
+    c(!1), T && i(!1);
+  }, [t, T]);
+  const { ref: D } = O({
+    open: t,
     onEscape: () => {
-      if (p)
-        return E(), !1;
-      n();
+      if (m)
+        return I(), !1;
+      a();
     },
-    initialFocus: P
+    initialFocus: j
   });
-  if (!x && !d) return null;
-  const I = (t) => {
-    if (t.target === t.currentTarget) {
-      if (p || !M) {
-        E();
+  if (!g && !u) return null;
+  const B = (o) => {
+    if (o.target === o.currentTarget) {
+      if (m || !M) {
+        I();
         return;
       }
-      n();
+      a();
     }
-  }, j = O[v], D = w ? "0" : z ?? K[v];
-  return /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e("div", { ref: V, children: /* @__PURE__ */ e(
+  }, L = Y[x], X = k ? "0" : P ?? Q[x];
+  return /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e("div", { ref: D, children: /* @__PURE__ */ e(
     "div",
     {
       className: "prui-modal-overlay fixed inset-0 z-[var(--prui-z-modal)] flex justify-center overflow-y-auto p-4",
@@ -82,55 +89,55 @@ const O = {
         paddingTop: "10vh",
         backgroundColor: "var(--prui-scrim)",
         backdropFilter: "blur(4px)",
-        opacity: d ? 1 : 0,
+        opacity: u ? 1 : 0,
         transition: "opacity var(--prui-duration-slow) var(--prui-ease-out)"
       },
-      onClick: I,
-      onMouseDown: (t) => {
-        t.target === t.currentTarget && I(t);
+      onClick: B,
+      onMouseDown: (o) => {
+        o.target === o.currentTarget && B(o);
       },
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ n(
         "div",
         {
-          ref: (t) => {
-            A.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
+          ref: (o) => {
+            V.current = o, typeof l == "function" ? l(o) : l && (l.current = o);
           },
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": f,
-          className: G(
+          "aria-label": h,
+          className: H(
             "prui-modal-content relative h-fit m-auto w-full",
-            g && "prui-modal-shake",
-            h
+            y && "prui-modal-shake",
+            v
           ),
           style: {
-            width: j.width,
-            minWidth: j.minWidth,
-            maxWidth: R ?? j.width,
-            padding: D,
+            width: L.width,
+            minWidth: L.minWidth,
+            maxWidth: z ?? L.width,
+            padding: X,
             backgroundColor: "var(--prui-surface)",
             border: "1px solid var(--prui-line)",
             borderRadius: "var(--prui-radius-3)",
             boxShadow: "var(--prui-shadow-modal)",
             color: "var(--prui-fg)",
-            transform: d ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)",
-            opacity: d ? 1 : 0,
+            transform: u ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)",
+            opacity: u ? 1 : 0,
             transition: "transform var(--prui-duration-slow) var(--prui-ease-out), opacity var(--prui-duration-slow) var(--prui-ease-out)",
             ...s
           },
           onTransitionEnd: () => {
-            r || i(!1);
+            t || i(!1);
           },
           children: [
             W,
-            k && !p ? /* @__PURE__ */ e(
+            C && !m ? /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: n,
+                onClick: a,
                 "aria-label": "Close modal",
                 className: "absolute right-4 top-4 flex h-10 w-10 cursor-pointer items-center justify-center rounded-[var(--prui-radius)] text-[var(--prui-dim)] transition-all hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)]",
-                children: /* @__PURE__ */ e(q, { className: "h-4 w-4", "aria-hidden": !0 })
+                children: /* @__PURE__ */ e(G, { className: "h-4 w-4", "aria-hidden": !0 })
               }
             ) : null
           ]
@@ -139,32 +146,32 @@ const O = {
     }
   ) }) });
 });
-Q.displayName = "Modal";
-const Y = {
+U.displayName = "Modal";
+const A = {
   success: "var(--prui-ok)",
   warning: "var(--prui-warn)",
   danger: "var(--prui-danger)",
   error: "var(--prui-danger)",
   info: "var(--prui-brand)",
   default: "var(--prui-brand)"
-}, U = ({ type: c }) => {
-  const r = Y[c ?? "default"];
-  switch (c) {
+}, Z = ({ type: p }) => {
+  const t = A[p ?? "default"];
+  switch (p) {
     case "success":
-      return /* @__PURE__ */ a("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: r }, "aria-hidden": !0, children: [
+      return /* @__PURE__ */ n("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: t }, "aria-hidden": !0, children: [
         /* @__PURE__ */ e("path", { d: "M9 12l2 2 4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
         /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" })
       ] });
     case "warning":
-      return /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: r }, "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.694-.833-2.464 0L4.34 16.5c-.77.833.192 2.5 1.732 2.5z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+      return /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: t }, "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.694-.833-2.464 0L4.34 16.5c-.77.833.192 2.5 1.732 2.5z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
     case "danger":
     case "error":
-      return /* @__PURE__ */ a("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: r }, "aria-hidden": !0, children: [
+      return /* @__PURE__ */ n("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: t }, "aria-hidden": !0, children: [
         /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
         /* @__PURE__ */ e("path", { d: "M15 9l-6 6m0-6l6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ] });
     case "info":
-      return /* @__PURE__ */ a("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: r }, "aria-hidden": !0, children: [
+      return /* @__PURE__ */ n("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: t }, "aria-hidden": !0, children: [
         /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
         /* @__PURE__ */ e("path", { d: "M12 8v4m0 4h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ] });
@@ -172,39 +179,39 @@ const Y = {
       return null;
   }
 };
-function oe(c) {
-  const r = J(), { title: n, message: W, confirmText: p = r.confirm, cancelText: M = r.cancel, type: y, size: S = "sm" } = c, T = Y[y ?? "default"];
+function ne(p) {
+  const t = K(), { title: a, message: W, confirmText: m = t.confirm, cancelText: M = t.cancel, type: w, size: R = "sm" } = p, S = A[w ?? "default"];
   return new Promise((N) => {
-    const m = document.createElement("div");
-    document.body.appendChild(m);
-    const b = X(m), R = () => {
+    const f = document.createElement("div");
+    document.body.appendChild(f);
+    const b = q(f), z = () => {
       setTimeout(() => {
-        b.unmount(), m.remove();
+        b.unmount(), f.remove();
       }, 320);
-    }, z = () => {
-      const [w, k] = o.useState(!1), [f, h] = o.useState(!1), [s, P] = o.useState(!1), l = o.useRef(null), v = o.useRef(null), x = B();
-      o.useEffect(() => {
-        if (x) {
-          k(!0), h(!0);
+    }, P = () => {
+      const [k, C] = r.useState(!1), [h, v] = r.useState(!1), [s, j] = r.useState(!1), l = r.useRef(null), x = r.useRef(null), g = F();
+      r.useEffect(() => {
+        if (g) {
+          C(!0), v(!0);
           return;
         }
-        const g = setTimeout(() => {
-          k(!0), h(!0);
+        const y = setTimeout(() => {
+          C(!0), v(!0);
         }, 10);
-        return () => clearTimeout(g);
-      }, [x]);
-      const i = (g) => {
-        P(!0), h(!1), setTimeout(() => {
-          R(), N(g);
-        }, x ? 0 : 300);
-      }, { ref: d } = F({
-        open: w && !s,
+        return () => clearTimeout(y);
+      }, [g]);
+      const i = (y) => {
+        j(!0), v(!1), setTimeout(() => {
+          z(), N(y);
+        }, g ? 0 : 300);
+      }, { ref: u } = O({
+        open: k && !s,
         onEscape: () => (s || i(!1), !1),
-        initialFocus: v
+        initialFocus: x
       });
-      if (!w) return null;
-      const u = O[S];
-      return /* @__PURE__ */ e("div", { ref: d, children: /* @__PURE__ */ e(
+      if (!k) return null;
+      const c = Y[R];
+      return /* @__PURE__ */ e("div", { ref: u, children: /* @__PURE__ */ e(
         "div",
         {
           className: "prui-modal-overlay fixed inset-0 z-[var(--prui-z-confirm)] flex justify-center overflow-y-auto p-4",
@@ -213,37 +220,37 @@ function oe(c) {
             paddingTop: "12vh",
             backgroundColor: "var(--prui-scrim)",
             backdropFilter: "blur(4px)",
-            opacity: f ? 1 : 0,
+            opacity: h ? 1 : 0,
             transition: "opacity var(--prui-duration-slow) var(--prui-ease-out)"
           },
-          children: /* @__PURE__ */ a(
+          children: /* @__PURE__ */ n(
             "div",
             {
               role: "alertdialog",
               "aria-modal": "true",
-              "aria-label": n,
+              "aria-label": a,
               className: "prui-modal-content relative m-auto w-full",
               style: {
-                width: u.width,
-                minWidth: u.minWidth,
+                width: c.width,
+                minWidth: c.minWidth,
                 backgroundColor: "var(--prui-surface)",
                 border: "1px solid var(--prui-line)",
                 borderRadius: "var(--prui-radius-3)",
                 boxShadow: "var(--prui-shadow-modal)",
                 color: "var(--prui-fg)",
-                transform: f ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)",
-                opacity: f ? 1 : 0,
+                transform: h ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)",
+                opacity: h ? 1 : 0,
                 transition: "transform var(--prui-duration-slow) var(--prui-ease-out), opacity var(--prui-duration-slow) var(--prui-ease-out)"
               },
               children: [
-                /* @__PURE__ */ a("div", { className: "flex items-start gap-3 p-4 pb-2", children: [
-                  /* @__PURE__ */ e(U, { type: y }),
-                  /* @__PURE__ */ a("div", { className: "min-w-0", children: [
-                    /* @__PURE__ */ e("h2", { className: "m-0 text-lg font-semibold leading-normal", style: { color: "var(--prui-fg)" }, children: n }),
+                /* @__PURE__ */ n("div", { className: "flex items-start gap-3 p-4 pb-2", children: [
+                  /* @__PURE__ */ e(Z, { type: w }),
+                  /* @__PURE__ */ n("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ e("h2", { className: "m-0 text-lg font-semibold leading-normal", style: { color: "var(--prui-fg)" }, children: a }),
                     /* @__PURE__ */ e("p", { className: "mt-2 text-sm leading-normal", style: { color: "var(--prui-dim)" }, children: W })
                   ] })
                 ] }),
-                /* @__PURE__ */ a("div", { className: "flex items-center justify-end gap-3 px-4 pb-4", children: [
+                /* @__PURE__ */ n("div", { className: "flex items-center justify-end gap-3 px-4 pb-4", children: [
                   /* @__PURE__ */ e(
                     "button",
                     {
@@ -260,12 +267,12 @@ function oe(c) {
                     "button",
                     {
                       type: "button",
-                      ref: v,
+                      ref: x,
                       disabled: s,
                       onClick: () => i(!0),
                       className: "cursor-pointer rounded-[var(--prui-radius)] border border-transparent px-4 py-2 text-sm font-medium text-white transition-all disabled:opacity-60",
-                      style: { backgroundColor: T },
-                      children: p
+                      style: { backgroundColor: S },
+                      children: m
                     }
                   )
                 ] })
@@ -275,10 +282,10 @@ function oe(c) {
         }
       ) });
     };
-    b.render(/* @__PURE__ */ e(z, {}));
+    b.render(/* @__PURE__ */ e(P, {}));
   });
 }
-const ae = {
+const ie = {
   name: "Modal",
   props: [
     { name: "open", type: "boolean", default: null, control: "boolean" },
@@ -292,7 +299,7 @@ const ae = {
     { name: "maxWidth", type: "string (CSS)", default: "per-size", control: "text" },
     { name: "initialFocus", type: 'ref | "first" | "container" | false', default: '"first"', control: "none" }
   ]
-}, ie = {
+}, ae = {
   name: "confirmModal",
   props: [
     { name: "title", type: "string", default: null, control: "text" },
@@ -303,8 +310,8 @@ const ae = {
   ]
 };
 export {
-  Q as Modal,
-  oe as confirmModal,
-  ie as confirmModalPropsMeta,
-  ae as modalPropsMeta
+  U as Modal,
+  ne as confirmModal,
+  ae as confirmModalPropsMeta,
+  ie as modalPropsMeta
 };