zaravand-ui 6.0.0 → 7.0.0

package/dist/components/DatePicker/DatePickerWheel.cjs

@@ -0,0 +1 @@
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../lib/utils.cjs`),r=require(`../Button/Button.cjs`),i=require(`../shared/WheelColumn.cjs`),a=require(`../shared/useWheelSize.cjs`),o=require(`./DatePicker.utils.cjs`);let s=require(`react`);s=e.__toESM(s,1);let c=require(`react/jsx-runtime`),l=require(`lucide-react`),u=require(`react-day-picker`);function d({mode:e,dateLib:d,calendarSystem:f,selection:p,minDate:m,maxDate:h,disabledMatchers:g,formatMonth:_,formatDate:v,onSwitchCalendar:y,onConfirm:b,dir:x}){let{messages:S}=t.useZuiConfig(),{itemHeight:C,visibleRows:w}=a.useWheelSize(),T=s.useMemo(()=>new Date,[]),E=s.useCallback(e=>m&&d.isBefore(e,d.startOfDay(m))?d.startOfDay(m):h&&d.isAfter(e,d.startOfDay(h))?d.startOfDay(h):e,[d,h,m]),[D,O]=s.useState(()=>{let e=E(d.startOfDay(p.from??T));return{from:e,to:p.to?E(d.startOfDay(p.to)):e}}),[k,A]=s.useState(`from`),j=D[k],M=o.resolveFormattedDateParts(j,f),N=s.useCallback(e=>g.length>0&&(0,u.dateMatchModifiers)(e,g,d),[d,g]),P=s.useCallback((e,t)=>o.resolveFormattedDateParts(d.endOfMonth(d.newDate(e,t-1,1)),f).day,[f,d]),F=s.useMemo(()=>{let e=o.resolveFormattedDateParts(T,f).year,t=m?o.resolveFormattedDateParts(m,f).year:Math.min(e-100,M.year),n=h?o.resolveFormattedDateParts(h,f).year:Math.max(e+10,M.year);return Array.from({length:Math.max(1,n-t+1)},(e,n)=>({value:t+n,label:d.formatNumber(t+n)}))},[f,d,h,m,M.year,T]),I=s.useMemo(()=>Array.from({length:12},(e,t)=>({value:t+1,label:_(d.newDate(M.year,t,1))})),[d,_,M.year]),L=s.useMemo(()=>Array.from({length:P(M.year,M.month)},(e,t)=>({value:t+1,label:d.formatNumber(t+1),disabled:N(d.newDate(M.year,M.month-1,t+1))})),[d,P,N,M.month,M.year]),R=e=>{let t=e.year??M.year,n=e.month??M.month,r=Math.min(e.day??M.day,P(t,n)),i=E(d.newDate(t,n-1,r));O(e=>k===`from`?{from:i,to:d.isAfter(i,e.to)?i:e.to}:{from:d.isBefore(i,e.from)?i:e.from,to:i})},z=N(D.from)||e===`range`&&N(D.to);return(0,c.jsxs)(`div`,{"data-slot":`date-picker-wheel-panel`,dir:x,className:`zui:flex zui:flex-col zui:gap-3`,children:[(0,c.jsxs)(`div`,{className:`zui:relative zui:flex zui:min-h-[max(calc(var(--zui-spacing)*9.9),44px)] zui:items-center zui:gap-2`,children:[e===`range`?(0,c.jsx)(`div`,{role:`tablist`,className:`zui:flex zui:min-w-0 zui:flex-1 zui:gap-2`,"data-slot":`date-picker-wheel-ends`,children:[`from`,`to`].map(e=>(0,c.jsxs)(`button`,{type:`button`,role:`tab`,"aria-selected":k===e,onClick:()=>A(e),className:n.cn(`zui:flex zui:min-w-0 zui:flex-1 zui:flex-col zui:items-center zui:justify-center zui-radius-md zui:border zui:px-2 zui:text-[max(calc(var(--zui-scale,10px)*1.44),15px)] zui:transition-colors zui:duration-200 zui:h-[max(calc(var(--zui-spacing)*12.6),48px)]`,k===e?`zui:border-[var(--zui-theme-action-primary)] zui:bg-[var(--zui-theme-control-hover-bg)]`:`zui:border-[var(--zui-theme-border-default)] zui:opacity-70`),children:[(0,c.jsx)(`span`,{className:`zui:text-[max(calc(var(--zui-scale,10px)*1.26),13px)] zui:opacity-70`,children:e===`from`?S.datePicker.rangeFrom:S.datePicker.rangeTo}),(0,c.jsx)(`span`,{className:`zui:max-w-full zui:truncate zui:font-semibold`,children:v(D[e])})]},e))}):(0,c.jsx)(`p`,{"data-slot":`date-picker-wheel-preview`,className:`zui:min-w-0 zui:flex-1 zui:truncate zui:px-[max(calc(var(--zui-spacing)*11.7),48px)] zui:text-center zui:font-semibold zui:text-[max(calc(var(--zui-scale,10px)*1.62),16px)]`,children:v(D.from)}),(0,c.jsx)(`button`,{type:`button`,onClick:y,"aria-label":S.datePicker.switchCalendar,className:n.cn(`zui:inline-flex zui:size-[max(calc(var(--zui-spacing)*9.9),44px)] zui:shrink-0 zui:items-center zui:justify-center zui-radius-md zui:border zui:border-[var(--zui-theme-border-default)] zui:text-[var(--zui-color-text)] zui:outline-none zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-theme-action-secondary)]`,e===`single`&&`zui:absolute zui:end-0 zui:top-1/2 zui:-translate-y-1/2`),children:(0,c.jsx)(l.ArrowRightLeft,{className:`zui:size-6`,"aria-hidden":`true`})})]}),(0,c.jsxs)(`div`,{"data-slot":`date-picker-wheel-columns`,className:`zui:relative zui:flex`,children:[(0,c.jsx)(`div`,{"aria-hidden":`true`,"data-slot":`date-picker-wheel-band`,className:`zui:pointer-events-none zui:absolute zui:inset-x-0 zui:top-1/2 zui:-translate-y-1/2 zui:rounded-[calc(var(--zui-scale,10px)*1.2)] zui:bg-[var(--zui-color-muted-surface)]`,style:{height:C-2}}),(0,c.jsx)(i.default,{slot:`date-picker-wheel`,itemHeight:C,visibleRows:w,items:L,value:M.day,onValueChange:e=>e!==M.day&&R({day:e}),ariaLabel:S.datePicker.selectDay},`day-${k}-${f}`),(0,c.jsx)(i.default,{slot:`date-picker-wheel`,itemHeight:C,visibleRows:w,items:I,value:M.month,onValueChange:e=>e!==M.month&&R({month:e}),ariaLabel:S.datePicker.selectMonth},`month-${k}-${f}`),(0,c.jsx)(i.default,{slot:`date-picker-wheel`,itemHeight:C,visibleRows:w,items:F,value:M.year,onValueChange:e=>e!==M.year&&R({year:e}),ariaLabel:S.datePicker.selectYear},`year-${k}-${f}`)]}),(0,c.jsx)(r.default,{label:S.datePicker.confirm,fullWidth:!0,disabled:z,onClick:()=>b(e===`range`?{from:D.from,to:D.to}:{from:D.from})})]})}exports.default=d;

package/dist/components/DatePicker/DatePickerWheel.d.cts

@@ -0,0 +1,30 @@
+import { type DateLib, type Matcher } from "react-day-picker";
+import type { DatePickerCalendarSystem } from "./DatePicker.interface.cjs";
+type DatePickerWheelSelection = {
+    from: Date;
+    to?: Date;
+};
+type DatePickerWheelPanelProps = {
+    mode: "single" | "range";
+    dateLib: DateLib;
+    calendarSystem: DatePickerCalendarSystem;
+    selection: {
+        from?: Date;
+        to?: Date;
+    };
+    minDate?: Date;
+    maxDate?: Date;
+    disabledMatchers: Matcher[];
+    formatMonth: (date: Date) => string;
+    formatDate: (date: Date) => string;
+    onSwitchCalendar: () => void;
+    onConfirm: (selection: DatePickerWheelSelection) => void;
+    dir: "rtl" | "ltr";
+};
+/**
+ * The mobile replacement for typing a date: day, month and year drums, plus (in range mode) a
+ * "from" / "to" switch. Nothing is committed until the confirm button is pressed.
+ */
+declare function DatePickerWheelPanel({ mode, dateLib, calendarSystem, selection, minDate, maxDate, disabledMatchers, formatMonth, formatDate, onSwitchCalendar, onConfirm, dir, }: DatePickerWheelPanelProps): import("react/jsx-runtime").JSX.Element;
+export type { DatePickerWheelSelection };
+export default DatePickerWheelPanel;

package/dist/components/DatePicker/DatePickerWheel.d.ts

@@ -0,0 +1,30 @@
+import { type DateLib, type Matcher } from "react-day-picker";
+import type { DatePickerCalendarSystem } from "./DatePicker.interface.js";
+type DatePickerWheelSelection = {
+    from: Date;
+    to?: Date;
+};
+type DatePickerWheelPanelProps = {
+    mode: "single" | "range";
+    dateLib: DateLib;
+    calendarSystem: DatePickerCalendarSystem;
+    selection: {
+        from?: Date;
+        to?: Date;
+    };
+    minDate?: Date;
+    maxDate?: Date;
+    disabledMatchers: Matcher[];
+    formatMonth: (date: Date) => string;
+    formatDate: (date: Date) => string;
+    onSwitchCalendar: () => void;
+    onConfirm: (selection: DatePickerWheelSelection) => void;
+    dir: "rtl" | "ltr";
+};
+/**
+ * The mobile replacement for typing a date: day, month and year drums, plus (in range mode) a
+ * "from" / "to" switch. Nothing is committed until the confirm button is pressed.
+ */
+declare function DatePickerWheelPanel({ mode, dateLib, calendarSystem, selection, minDate, maxDate, disabledMatchers, formatMonth, formatDate, onSwitchCalendar, onConfirm, dir, }: DatePickerWheelPanelProps): import("react/jsx-runtime").JSX.Element;
+export type { DatePickerWheelSelection };
+export default DatePickerWheelPanel;

package/dist/components/DatePicker/DatePickerWheel.js

@@ -0,0 +1,156 @@
+"use client";
+import { useZuiConfig as e } from "../../config/useZuiConfig.js";
+import { cn as t } from "../../lib/utils.js";
+import n from "../Button/Button.js";
+import r from "../shared/WheelColumn.js";
+import { useWheelSize as i } from "../shared/useWheelSize.js";
+import { resolveFormattedDateParts as a } from "./DatePicker.utils.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ArrowRightLeft as l } from "lucide-react";
+import { dateMatchModifiers as u } from "react-day-picker";
+//#region src/components/DatePicker/DatePickerWheel.tsx
+function d({ mode: d, dateLib: f, calendarSystem: p, selection: m, minDate: h, maxDate: g, disabledMatchers: _, formatMonth: v, formatDate: y, onSwitchCalendar: b, onConfirm: x, dir: S }) {
+	let { messages: C } = e(), { itemHeight: w, visibleRows: T } = i(), E = o.useMemo(() => /* @__PURE__ */ new Date(), []), D = o.useCallback((e) => h && f.isBefore(e, f.startOfDay(h)) ? f.startOfDay(h) : g && f.isAfter(e, f.startOfDay(g)) ? f.startOfDay(g) : e, [
+		f,
+		g,
+		h
+	]), [O, k] = o.useState(() => {
+		let e = D(f.startOfDay(m.from ?? E));
+		return {
+			from: e,
+			to: m.to ? D(f.startOfDay(m.to)) : e
+		};
+	}), [A, j] = o.useState("from"), M = O[A], N = a(M, p), P = o.useCallback((e) => _.length > 0 && u(e, _, f), [f, _]), F = o.useCallback((e, t) => a(f.endOfMonth(f.newDate(e, t - 1, 1)), p).day, [p, f]), I = o.useMemo(() => {
+		let e = a(E, p).year, t = h ? a(h, p).year : Math.min(e - 100, N.year), n = g ? a(g, p).year : Math.max(e + 10, N.year);
+		return Array.from({ length: Math.max(1, n - t + 1) }, (e, n) => ({
+			value: t + n,
+			label: f.formatNumber(t + n)
+		}));
+	}, [
+		p,
+		f,
+		g,
+		h,
+		N.year,
+		E
+	]), L = o.useMemo(() => Array.from({ length: 12 }, (e, t) => ({
+		value: t + 1,
+		label: v(f.newDate(N.year, t, 1))
+	})), [
+		f,
+		v,
+		N.year
+	]), R = o.useMemo(() => Array.from({ length: F(N.year, N.month) }, (e, t) => ({
+		value: t + 1,
+		label: f.formatNumber(t + 1),
+		disabled: P(f.newDate(N.year, N.month - 1, t + 1))
+	})), [
+		f,
+		F,
+		P,
+		N.month,
+		N.year
+	]), z = (e) => {
+		let t = e.year ?? N.year, n = e.month ?? N.month, r = Math.min(e.day ?? N.day, F(t, n)), i = D(f.newDate(t, n - 1, r));
+		k((e) => A === "from" ? {
+			from: i,
+			to: f.isAfter(i, e.to) ? i : e.to
+		} : {
+			from: f.isBefore(i, e.from) ? i : e.from,
+			to: i
+		});
+	}, B = P(O.from) || d === "range" && P(O.to);
+	return /* @__PURE__ */ c("div", {
+		"data-slot": "date-picker-wheel-panel",
+		dir: S,
+		className: "zui:flex zui:flex-col zui:gap-3",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "zui:relative zui:flex zui:min-h-[max(calc(var(--zui-spacing)*9.9),44px)] zui:items-center zui:gap-2",
+				children: [d === "range" ? /* @__PURE__ */ s("div", {
+					role: "tablist",
+					className: "zui:flex zui:min-w-0 zui:flex-1 zui:gap-2",
+					"data-slot": "date-picker-wheel-ends",
+					children: ["from", "to"].map((e) => /* @__PURE__ */ c("button", {
+						type: "button",
+						role: "tab",
+						"aria-selected": A === e,
+						onClick: () => j(e),
+						className: t("zui:flex zui:min-w-0 zui:flex-1 zui:flex-col zui:items-center zui:justify-center zui-radius-md zui:border zui:px-2 zui:text-[max(calc(var(--zui-scale,10px)*1.44),15px)] zui:transition-colors zui:duration-200 zui:h-[max(calc(var(--zui-spacing)*12.6),48px)]", A === e ? "zui:border-[var(--zui-theme-action-primary)] zui:bg-[var(--zui-theme-control-hover-bg)]" : "zui:border-[var(--zui-theme-border-default)] zui:opacity-70"),
+						children: [/* @__PURE__ */ s("span", {
+							className: "zui:text-[max(calc(var(--zui-scale,10px)*1.26),13px)] zui:opacity-70",
+							children: e === "from" ? C.datePicker.rangeFrom : C.datePicker.rangeTo
+						}), /* @__PURE__ */ s("span", {
+							className: "zui:max-w-full zui:truncate zui:font-semibold",
+							children: y(O[e])
+						})]
+					}, e))
+				}) : /* @__PURE__ */ s("p", {
+					"data-slot": "date-picker-wheel-preview",
+					className: "zui:min-w-0 zui:flex-1 zui:truncate zui:px-[max(calc(var(--zui-spacing)*11.7),48px)] zui:text-center zui:font-semibold zui:text-[max(calc(var(--zui-scale,10px)*1.62),16px)]",
+					children: y(O.from)
+				}), /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: b,
+					"aria-label": C.datePicker.switchCalendar,
+					className: t("zui:inline-flex zui:size-[max(calc(var(--zui-spacing)*9.9),44px)] zui:shrink-0 zui:items-center zui:justify-center zui-radius-md zui:border zui:border-[var(--zui-theme-border-default)] zui:text-[var(--zui-color-text)] zui:outline-none zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-theme-action-secondary)]", d === "single" && "zui:absolute zui:end-0 zui:top-1/2 zui:-translate-y-1/2"),
+					children: /* @__PURE__ */ s(l, {
+						className: "zui:size-6",
+						"aria-hidden": "true"
+					})
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				"data-slot": "date-picker-wheel-columns",
+				className: "zui:relative zui:flex",
+				children: [
+					/* @__PURE__ */ s("div", {
+						"aria-hidden": "true",
+						"data-slot": "date-picker-wheel-band",
+						className: "zui:pointer-events-none zui:absolute zui:inset-x-0 zui:top-1/2 zui:-translate-y-1/2 zui:rounded-[calc(var(--zui-scale,10px)*1.2)] zui:bg-[var(--zui-color-muted-surface)]",
+						style: { height: w - 2 }
+					}),
+					/* @__PURE__ */ s(r, {
+						slot: "date-picker-wheel",
+						itemHeight: w,
+						visibleRows: T,
+						items: R,
+						value: N.day,
+						onValueChange: (e) => e !== N.day && z({ day: e }),
+						ariaLabel: C.datePicker.selectDay
+					}, `day-${A}-${p}`),
+					/* @__PURE__ */ s(r, {
+						slot: "date-picker-wheel",
+						itemHeight: w,
+						visibleRows: T,
+						items: L,
+						value: N.month,
+						onValueChange: (e) => e !== N.month && z({ month: e }),
+						ariaLabel: C.datePicker.selectMonth
+					}, `month-${A}-${p}`),
+					/* @__PURE__ */ s(r, {
+						slot: "date-picker-wheel",
+						itemHeight: w,
+						visibleRows: T,
+						items: I,
+						value: N.year,
+						onValueChange: (e) => e !== N.year && z({ year: e }),
+						ariaLabel: C.datePicker.selectYear
+					}, `year-${A}-${p}`)
+				]
+			}),
+			/* @__PURE__ */ s(n, {
+				label: C.datePicker.confirm,
+				fullWidth: !0,
+				disabled: B,
+				onClick: () => x(d === "range" ? {
+					from: O.from,
+					to: O.to
+				} : { from: O.from })
+			})
+		]
+	});
+}
+//#endregion
+export { d as default };

package/dist/components/Dialog/Dialog.cjs

@@ -1 +1 @@
-"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../lib/utils.cjs`),r=require(`./Dialog.variant.cjs`),i=require(`../shared/overlay.cjs`),a=require(`../shared/overlay.utils.cjs`);let o=require(`react`);o=e.__toESM(o,1);let s=require(`react/jsx-runtime`),c=require(`lucide-react`),l=require(`@radix-ui/react-dialog`);l=e.__toESM(l,1);var u=`zui:absolute zui:end-3 zui:top-3 zui:inline-flex zui:size-8 zui:items-center zui:justify-center zui:rounded-md zui:text-[var(--zui-theme-text-muted)] zui:transition zui:hover:bg-[var(--zui-theme-bg-surface)] zui:hover:text-[var(--zui-theme-text-primary)] zui:focus-visible:outline-none zui:focus-visible:ring-[3px] zui:focus-visible:ring-[var(--zui-theme-action-secondary)]`,d=o.forwardRef(function({open:e,defaultOpen:o,onOpenChange:d,modal:f=!0,dir:p,title:m,description:h,content:g,child:_,children:v,trigger:y,triggerLabel:b,triggerAriaLabel:x,closeLabel:S,closeAriaLabel:C,showCloseButton:w=!0,showCloseIcon:T,closeIcon:E=!1,triggerClassName:D,className:O,overlayClassName:k},A){let{messages:j,dir:M}=t.useZuiConfig(),N=p??M,P=b??j.dialog.trigger,F=S??j.common.close,I=g??_??v,L=T??E,R=a.resolveAriaLabel(C,F,j.common.close);return(0,s.jsxs)(l.Root,{open:e,defaultOpen:o,onOpenChange:d,modal:f,children:[(0,s.jsx)(i.OverlayTrigger,{"data-slot":`dialog-trigger`,trigger:y,label:P,ariaLabel:a.resolveAriaLabel(x,P,j.dialog.trigger),className:D}),(0,s.jsx)(l.Portal,{"data-slot":`dialog-portal`,children:(0,s.jsx)(l.Overlay,{"data-slot":`dialog-overlay`,className:n.cn(r.dialogOverlayVariants(),k),children:(0,s.jsxs)(l.Content,{ref:A,"data-slot":`dialog-content`,dir:N,className:n.cn(`zui:relative`,r.dialogContentVariants(),O),children:[L?(0,s.jsx)(l.Close,{"data-slot":`dialog-close`,asChild:!0,children:(0,s.jsx)(`button`,{type:`button`,"aria-label":R,className:u,children:(0,s.jsx)(c.XIcon,{className:`zui:size-4`,"aria-hidden":`true`})})}):null,(0,s.jsx)(i.OverlayHeader,{slotPrefix:`dialog`,title:m,description:h,fallbackTitle:typeof P==`string`?P:j.dialog.fallbackTitle,className:r.dialogHeaderVariants(),titleClassName:r.dialogTitleVariants(),descriptionClassName:r.dialogDescriptionVariants()}),I==null?null:(0,s.jsx)(`div`,{"data-slot":`dialog-body`,className:`zui:text-sm zui:text-[var(--zui-theme-text-primary)]`,children:I}),w?(0,s.jsx)(`div`,{"data-slot":`dialog-footer`,className:r.dialogFooterVariants(),children:(0,s.jsx)(l.Close,{"data-slot":`dialog-close`,asChild:!0,children:(0,s.jsx)(`button`,{type:`button`,"aria-label":R,className:a.overlayFooterCloseButtonClassName,children:F})})}):null]})})})]})});exports.default=d;
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../lib/utils.cjs`),r=require(`../shared/overlay.cjs`),i=require(`../shared/overlay.utils.cjs`),a=require(`./DialogDragHandle.cjs`),o=require(`./Dialog.variant.cjs`);let s=require(`react`);s=e.__toESM(s,1);let c=require(`react/jsx-runtime`),l=require(`lucide-react`),u=require(`@radix-ui/react-dialog`);u=e.__toESM(u,1);var d=`zui:absolute zui:mobile:start-3 zui:desktop:end-3 zui:mobile:top-1.5 zui:desktop:top-3 zui:inline-flex zui:mobile:size-10 zui:desktop:size-8 zui:items-center zui:justify-center zui:rounded-md zui:text-[var(--zui-theme-text-muted)] zui:transition zui:hover:bg-[var(--zui-theme-bg-surface)] zui:hover:text-[var(--zui-theme-text-primary)] zui:focus-visible:outline-none zui:focus-visible:ring-[3px] zui:focus-visible:ring-[var(--zui-theme-action-secondary)]`,f=s.forwardRef(function({open:e,defaultOpen:f,onOpenChange:p,modal:m=!0,dir:h,title:g,description:_,content:v,child:y,children:b,trigger:x,triggerLabel:S,triggerAriaLabel:C,closeLabel:w,closeAriaLabel:T,showCloseButton:E=!0,showCloseIcon:D,closeIcon:O=!1,triggerClassName:k,onOpenAutoFocus:A,className:j,overlayClassName:M},N){let P=s.useRef(null),{messages:F,dir:I}=t.useZuiConfig(),L=h??I,R=S??F.dialog.trigger,z=w??F.common.close,B=v??y??b,V=D??O,H=i.resolveAriaLabel(T,z,F.common.close);return(0,c.jsxs)(u.Root,{open:e,defaultOpen:f,onOpenChange:p,modal:m,children:[(0,c.jsx)(r.OverlayTrigger,{"data-slot":`dialog-trigger`,trigger:x,label:R,ariaLabel:i.resolveAriaLabel(C,R,F.dialog.trigger),className:k}),(0,c.jsx)(u.Portal,{"data-slot":`dialog-portal`,children:(0,c.jsx)(u.Overlay,{"data-slot":`dialog-overlay`,className:n.cn(o.dialogOverlayVariants(),M),children:(0,c.jsxs)(u.Content,{ref:N,"data-slot":`dialog-content`,dir:L,onOpenAutoFocus:A,className:n.cn(`zui:relative`,o.dialogContentVariants(),j),children:[(0,c.jsx)(u.Close,{ref:P,hidden:!0,tabIndex:-1}),(0,c.jsx)(a.default,{onDismiss:()=>P.current?.click()}),V?(0,c.jsx)(u.Close,{"data-slot":`dialog-close`,asChild:!0,children:(0,c.jsx)(`button`,{type:`button`,"aria-label":H,className:d,children:(0,c.jsx)(l.XIcon,{className:`zui:mobile:size-5 zui:desktop:size-4`,"aria-hidden":`true`})})}):null,(0,c.jsx)(r.OverlayHeader,{slotPrefix:`dialog`,title:g,description:_,fallbackTitle:typeof R==`string`?R:F.dialog.fallbackTitle,className:o.dialogHeaderVariants(),titleClassName:o.dialogTitleVariants(),descriptionClassName:o.dialogDescriptionVariants()}),B==null?null:(0,c.jsx)(`div`,{"data-slot":`dialog-body`,className:`zui:text-sm zui:text-[var(--zui-theme-text-primary)]`,children:B}),E?(0,c.jsx)(`div`,{"data-slot":`dialog-footer`,className:o.dialogFooterVariants(),children:(0,c.jsx)(u.Close,{"data-slot":`dialog-close`,asChild:!0,children:(0,c.jsx)(`button`,{type:`button`,"aria-label":H,className:i.overlayFooterCloseButtonClassName,children:z})})}):null]})})})]})});exports.default=f;

package/dist/components/Dialog/Dialog.interface.d.cts

@@ -27,6 +27,11 @@ export interface DialogProps {
     /** @deprecated Use `showCloseIcon`. */
     closeIcon?: boolean;
     triggerClassName?: string;
+    /**
+     * Called when focus moves into the dialog as it opens. Call `event.preventDefault()` to keep
+     * focus where it is (e.g. so a search field inside doesn't pop the keyboard on phones).
+     */
+    onOpenAutoFocus?: (event: Event) => void;
     className?: string;
     overlayClassName?: string;
 }

package/dist/components/Dialog/Dialog.interface.d.ts

@@ -27,6 +27,11 @@ export interface DialogProps {
     /** @deprecated Use `showCloseIcon`. */
     closeIcon?: boolean;
     triggerClassName?: string;
+    /**
+     * Called when focus moves into the dialog as it opens. Call `event.preventDefault()` to keep
+     * focus where it is (e.g. so a search field inside doesn't pop the keyboard on phones).
+     */
+    onOpenAutoFocus?: (event: Event) => void;
     className?: string;
     overlayClassName?: string;
 }

package/dist/components/Dialog/Dialog.js

@@ -1,76 +1,84 @@
 "use client";
 import { useZuiConfig as e } from "../../config/useZuiConfig.js";
 import { cn as t } from "../../lib/utils.js";
-import { dialogContentVariants as n, dialogDescriptionVariants as r, dialogFooterVariants as i, dialogHeaderVariants as a, dialogOverlayVariants as o, dialogTitleVariants as s } from "./Dialog.variant.js";
-import { OverlayHeader as c, OverlayTrigger as l } from "../shared/overlay.js";
-import { overlayFooterCloseButtonClassName as u, resolveAriaLabel as d } from "../shared/overlay.utils.js";
-import * as f from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { XIcon as h } from "lucide-react";
-import * as g from "@radix-ui/react-dialog";
+import { OverlayHeader as n, OverlayTrigger as r } from "../shared/overlay.js";
+import { overlayFooterCloseButtonClassName as i, resolveAriaLabel as a } from "../shared/overlay.utils.js";
+import o from "./DialogDragHandle.js";
+import { dialogContentVariants as s, dialogDescriptionVariants as c, dialogFooterVariants as l, dialogHeaderVariants as u, dialogOverlayVariants as d, dialogTitleVariants as f } from "./Dialog.variant.js";
+import * as p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { XIcon as g } from "lucide-react";
+import * as _ from "@radix-ui/react-dialog";
 //#region src/components/Dialog/Dialog.tsx
-var _ = "zui:absolute zui:end-3 zui:top-3 zui:inline-flex zui:size-8 zui:items-center zui:justify-center zui:rounded-md zui:text-[var(--zui-theme-text-muted)] zui:transition zui:hover:bg-[var(--zui-theme-bg-surface)] zui:hover:text-[var(--zui-theme-text-primary)] zui:focus-visible:outline-none zui:focus-visible:ring-[3px] zui:focus-visible:ring-[var(--zui-theme-action-secondary)]", v = f.forwardRef(function({ open: f, defaultOpen: v, onOpenChange: y, modal: b = !0, dir: x, title: S, description: C, content: w, child: T, children: E, trigger: D, triggerLabel: O, triggerAriaLabel: k, closeLabel: A, closeAriaLabel: j, showCloseButton: M = !0, showCloseIcon: N, closeIcon: P = !1, triggerClassName: F, className: I, overlayClassName: L }, R) {
-	let { messages: z, dir: B } = e(), V = x ?? B, H = O ?? z.dialog.trigger, U = A ?? z.common.close, W = w ?? T ?? E, G = N ?? P, K = d(j, U, z.common.close);
-	return /* @__PURE__ */ m(g.Root, {
-		open: f,
-		defaultOpen: v,
-		onOpenChange: y,
-		modal: b,
-		children: [/* @__PURE__ */ p(l, {
+var v = "zui:absolute zui:mobile:start-3 zui:desktop:end-3 zui:mobile:top-1.5 zui:desktop:top-3 zui:inline-flex zui:mobile:size-10 zui:desktop:size-8 zui:items-center zui:justify-center zui:rounded-md zui:text-[var(--zui-theme-text-muted)] zui:transition zui:hover:bg-[var(--zui-theme-bg-surface)] zui:hover:text-[var(--zui-theme-text-primary)] zui:focus-visible:outline-none zui:focus-visible:ring-[3px] zui:focus-visible:ring-[var(--zui-theme-action-secondary)]", y = p.forwardRef(function({ open: y, defaultOpen: b, onOpenChange: x, modal: S = !0, dir: C, title: w, description: T, content: E, child: D, children: O, trigger: k, triggerLabel: A, triggerAriaLabel: j, closeLabel: M, closeAriaLabel: N, showCloseButton: P = !0, showCloseIcon: F, closeIcon: I = !1, triggerClassName: L, onOpenAutoFocus: R, className: z, overlayClassName: B }, V) {
+	let H = p.useRef(null), { messages: U, dir: W } = e(), G = C ?? W, K = A ?? U.dialog.trigger, q = M ?? U.common.close, J = E ?? D ?? O, Y = F ?? I, X = a(N, q, U.common.close);
+	return /* @__PURE__ */ h(_.Root, {
+		open: y,
+		defaultOpen: b,
+		onOpenChange: x,
+		modal: S,
+		children: [/* @__PURE__ */ m(r, {
 			"data-slot": "dialog-trigger",
-			trigger: D,
-			label: H,
-			ariaLabel: d(k, H, z.dialog.trigger),
-			className: F
-		}), /* @__PURE__ */ p(g.Portal, {
+			trigger: k,
+			label: K,
+			ariaLabel: a(j, K, U.dialog.trigger),
+			className: L
+		}), /* @__PURE__ */ m(_.Portal, {
 			"data-slot": "dialog-portal",
-			children: /* @__PURE__ */ p(g.Overlay, {
+			children: /* @__PURE__ */ m(_.Overlay, {
 				"data-slot": "dialog-overlay",
-				className: t(o(), L),
-				children: /* @__PURE__ */ m(g.Content, {
-					ref: R,
+				className: t(d(), B),
+				children: /* @__PURE__ */ h(_.Content, {
+					ref: V,
 					"data-slot": "dialog-content",
-					dir: V,
-					className: t("zui:relative", n(), I),
+					dir: G,
+					onOpenAutoFocus: R,
+					className: t("zui:relative", s(), z),
 					children: [
-						G ? /* @__PURE__ */ p(g.Close, {
+						/* @__PURE__ */ m(_.Close, {
+							ref: H,
+							hidden: !0,
+							tabIndex: -1
+						}),
+						/* @__PURE__ */ m(o, { onDismiss: () => H.current?.click() }),
+						Y ? /* @__PURE__ */ m(_.Close, {
 							"data-slot": "dialog-close",
 							asChild: !0,
-							children: /* @__PURE__ */ p("button", {
+							children: /* @__PURE__ */ m("button", {
 								type: "button",
-								"aria-label": K,
-								className: _,
-								children: /* @__PURE__ */ p(h, {
-									className: "zui:size-4",
+								"aria-label": X,
+								className: v,
+								children: /* @__PURE__ */ m(g, {
+									className: "zui:mobile:size-5 zui:desktop:size-4",
 									"aria-hidden": "true"
 								})
 							})
 						}) : null,
-						/* @__PURE__ */ p(c, {
+						/* @__PURE__ */ m(n, {
 							slotPrefix: "dialog",
-							title: S,
-							description: C,
-							fallbackTitle: typeof H == "string" ? H : z.dialog.fallbackTitle,
-							className: a(),
-							titleClassName: s(),
-							descriptionClassName: r()
+							title: w,
+							description: T,
+							fallbackTitle: typeof K == "string" ? K : U.dialog.fallbackTitle,
+							className: u(),
+							titleClassName: f(),
+							descriptionClassName: c()
 						}),
-						W == null ? null : /* @__PURE__ */ p("div", {
+						J == null ? null : /* @__PURE__ */ m("div", {
 							"data-slot": "dialog-body",
 							className: "zui:text-sm zui:text-[var(--zui-theme-text-primary)]",
-							children: W
+							children: J
 						}),
-						M ? /* @__PURE__ */ p("div", {
+						P ? /* @__PURE__ */ m("div", {
 							"data-slot": "dialog-footer",
-							className: i(),
-							children: /* @__PURE__ */ p(g.Close, {
+							className: l(),
+							children: /* @__PURE__ */ m(_.Close, {
 								"data-slot": "dialog-close",
 								asChild: !0,
-								children: /* @__PURE__ */ p("button", {
+								children: /* @__PURE__ */ m("button", {
 									type: "button",
-									"aria-label": K,
-									className: u,
-									children: U
+									"aria-label": X,
+									className: i,
+									children: q
 								})
 							})
 						}) : null
@@ -81,4 +89,4 @@ var _ = "zui:absolute zui:end-3 zui:top-3 zui:inline-flex zui:size-8 zui:items-c
 	});
 });
 //#endregion
-export { v as default };
+export { y as default };

package/dist/components/Dialog/Dialog.variant.cjs

@@ -1 +1 @@
-require(`../../_virtual/_rolldown/runtime.cjs`);const e=require(`../shared/responsiveScale.cjs`);let t=require(`class-variance-authority`);var n=(0,t.cva)(`zui:fixed zui:inset-0 zui:z-(--zui-z-dialog-overlay) zui:flex zui:items-center zui:justify-center zui:p-2 zui:bg-[var(--zui-theme-overlay-scrim)] zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0`),r=(0,t.cva)(`zui:z-(--zui-z-dialog) zui:flex zui:h-fit zui:w-full zui:max-h-[calc(100dvh-calc(var(--zui-scale,10px)*1.6))] zui:max-w-[calc(100vw-calc(var(--zui-scale,10px)*1.6))] zui:flex-col zui:gap-4 zui:overflow-auto zui:border zui:border-[var(--zui-theme-border-default)] zui:bg-[var(--zui-color-surface)] ${e.OVERLAY_PANEL_PADDING} zui:text-[var(--zui-theme-text-primary)] zui:shadow-[0_24px_48px_-30px_var(--zui-effect-shadow-ink-55)] zui-radius-lg zui:duration-200 zui:outline-none zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=closed]:zoom-out-95 zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0 zui:data-[state=open]:zoom-in-95 zui:sm:w-fit zui:sm:max-h-[calc(100dvh-calc(var(--zui-scale,10px)*3.2))] zui:sm:max-w-[calc(100vw-calc(var(--zui-scale,10px)*3.2))]`),i=(0,t.cva)(`zui:flex zui:flex-col zui:gap-2 zui:text-center zui:sm:text-start`),a=(0,t.cva)(`zui:mt-auto zui:flex zui:flex-col-reverse zui:gap-2 zui:sm:flex-row zui:sm:justify-start`),o=(0,t.cva)(`zui:text-lg zui:font-semibold zui:tracking-tight zui:text-[var(--zui-theme-text-primary)]`),s=(0,t.cva)(`zui:text-sm zui:leading-6 zui:text-[var(--zui-theme-text-secondary)]`);exports.dialogContentVariants=r,exports.dialogDescriptionVariants=s,exports.dialogFooterVariants=a,exports.dialogHeaderVariants=i,exports.dialogOverlayVariants=n,exports.dialogTitleVariants=o;
+require(`../../_virtual/_rolldown/runtime.cjs`);const e=require(`../shared/responsiveScale.cjs`);let t=require(`class-variance-authority`);var n=(0,t.cva)(`zui:fixed zui:inset-0 zui:z-(--zui-z-dialog-overlay) zui:flex zui:items-end zui:justify-center zui:p-0 zui:desktop:items-center zui:desktop:p-2 zui:bg-[var(--zui-theme-overlay-scrim)] zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0`),r=(0,t.cva)(`zui:z-(--zui-z-dialog) zui:flex zui:h-fit zui:w-full zui:max-h-[90dvh] zui:mobile:short:max-h-[calc(100dvh-var(--zui-spacing)*2)] zui:max-w-full zui:flex-col zui:gap-4 zui:overflow-auto zui:border zui:border-[var(--zui-theme-border-default)] zui:bg-[var(--zui-color-surface)] ${e.OVERLAY_PANEL_PADDING} zui:mobile:pt-0 zui:mobile:pb-[max(calc(var(--zui-spacing)*6),env(safe-area-inset-bottom))] zui:mobile:short:gap-2 zui:mobile:short:pb-[max(calc(var(--zui-spacing)*3),env(safe-area-inset-bottom))] zui:text-[var(--zui-theme-text-primary)] zui:shadow-[0_24px_48px_-30px_var(--zui-effect-shadow-ink-55)] zui:rounded-t-[calc(var(--zui-radius-xs)+calc(var(--zui-scale,10px)*0.4))] zui:mobile:border-b-0 zui:desktop:rounded-[calc(var(--zui-radius-xs)+calc(var(--zui-scale,10px)*0.8))] zui:duration-200 zui:outline-none zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=closed]:slide-out-to-bottom zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0 zui:data-[state=open]:slide-in-from-bottom zui:desktop:data-[state=closed]:slide-out-to-bottom-0 zui:desktop:data-[state=closed]:zoom-out-95 zui:desktop:data-[state=open]:slide-in-from-bottom-0 zui:desktop:data-[state=open]:zoom-in-95 zui:desktop:w-fit zui:desktop:max-h-[calc(100dvh-calc(var(--zui-scale,10px)*3.2))] zui:desktop:max-w-[calc(100vw-calc(var(--zui-scale,10px)*3.2))]`),i=(0,t.cva)(`zui:flex zui:flex-col zui:gap-2 zui:text-center zui:desktop:text-start`),a=(0,t.cva)(`zui:mt-auto zui:flex zui:flex-col-reverse zui:gap-2 zui:desktop:flex-row zui:desktop:justify-start`),o=(0,t.cva)(`zui:text-lg zui:font-semibold zui:tracking-tight zui:text-[var(--zui-theme-text-primary)]`),s=(0,t.cva)(`zui:text-sm zui:leading-6 zui:text-[var(--zui-theme-text-secondary)]`);exports.dialogContentVariants=r,exports.dialogDescriptionVariants=s,exports.dialogFooterVariants=a,exports.dialogHeaderVariants=i,exports.dialogOverlayVariants=n,exports.dialogTitleVariants=o;

package/dist/components/Dialog/Dialog.variant.js

@@ -1,6 +1,6 @@
 import { OVERLAY_PANEL_PADDING as e } from "../shared/responsiveScale.js";
 import { cva as t } from "class-variance-authority";
 //#region src/components/Dialog/Dialog.variant.ts
-var n = t("zui:fixed zui:inset-0 zui:z-(--zui-z-dialog-overlay) zui:flex zui:items-center zui:justify-center zui:p-2 zui:bg-[var(--zui-theme-overlay-scrim)] zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0"), r = t(`zui:z-(--zui-z-dialog) zui:flex zui:h-fit zui:w-full zui:max-h-[calc(100dvh-calc(var(--zui-scale,10px)*1.6))] zui:max-w-[calc(100vw-calc(var(--zui-scale,10px)*1.6))] zui:flex-col zui:gap-4 zui:overflow-auto zui:border zui:border-[var(--zui-theme-border-default)] zui:bg-[var(--zui-color-surface)] ${e} zui:text-[var(--zui-theme-text-primary)] zui:shadow-[0_24px_48px_-30px_var(--zui-effect-shadow-ink-55)] zui-radius-lg zui:duration-200 zui:outline-none zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=closed]:zoom-out-95 zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0 zui:data-[state=open]:zoom-in-95 zui:sm:w-fit zui:sm:max-h-[calc(100dvh-calc(var(--zui-scale,10px)*3.2))] zui:sm:max-w-[calc(100vw-calc(var(--zui-scale,10px)*3.2))]`), i = t("zui:flex zui:flex-col zui:gap-2 zui:text-center zui:sm:text-start"), a = t("zui:mt-auto zui:flex zui:flex-col-reverse zui:gap-2 zui:sm:flex-row zui:sm:justify-start"), o = t("zui:text-lg zui:font-semibold zui:tracking-tight zui:text-[var(--zui-theme-text-primary)]"), s = t("zui:text-sm zui:leading-6 zui:text-[var(--zui-theme-text-secondary)]");
+var n = t("zui:fixed zui:inset-0 zui:z-(--zui-z-dialog-overlay) zui:flex zui:items-end zui:justify-center zui:p-0 zui:desktop:items-center zui:desktop:p-2 zui:bg-[var(--zui-theme-overlay-scrim)] zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0"), r = t(`zui:z-(--zui-z-dialog) zui:flex zui:h-fit zui:w-full zui:max-h-[90dvh] zui:mobile:short:max-h-[calc(100dvh-var(--zui-spacing)*2)] zui:max-w-full zui:flex-col zui:gap-4 zui:overflow-auto zui:border zui:border-[var(--zui-theme-border-default)] zui:bg-[var(--zui-color-surface)] ${e} zui:mobile:pt-0 zui:mobile:pb-[max(calc(var(--zui-spacing)*6),env(safe-area-inset-bottom))] zui:mobile:short:gap-2 zui:mobile:short:pb-[max(calc(var(--zui-spacing)*3),env(safe-area-inset-bottom))] zui:text-[var(--zui-theme-text-primary)] zui:shadow-[0_24px_48px_-30px_var(--zui-effect-shadow-ink-55)] zui:rounded-t-[calc(var(--zui-radius-xs)+calc(var(--zui-scale,10px)*0.4))] zui:mobile:border-b-0 zui:desktop:rounded-[calc(var(--zui-radius-xs)+calc(var(--zui-scale,10px)*0.8))] zui:duration-200 zui:outline-none zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=closed]:slide-out-to-bottom zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0 zui:data-[state=open]:slide-in-from-bottom zui:desktop:data-[state=closed]:slide-out-to-bottom-0 zui:desktop:data-[state=closed]:zoom-out-95 zui:desktop:data-[state=open]:slide-in-from-bottom-0 zui:desktop:data-[state=open]:zoom-in-95 zui:desktop:w-fit zui:desktop:max-h-[calc(100dvh-calc(var(--zui-scale,10px)*3.2))] zui:desktop:max-w-[calc(100vw-calc(var(--zui-scale,10px)*3.2))]`), i = t("zui:flex zui:flex-col zui:gap-2 zui:text-center zui:desktop:text-start"), a = t("zui:mt-auto zui:flex zui:flex-col-reverse zui:gap-2 zui:desktop:flex-row zui:desktop:justify-start"), o = t("zui:text-lg zui:font-semibold zui:tracking-tight zui:text-[var(--zui-theme-text-primary)]"), s = t("zui:text-sm zui:leading-6 zui:text-[var(--zui-theme-text-secondary)]");
 //#endregion
 export { r as dialogContentVariants, s as dialogDescriptionVariants, a as dialogFooterVariants, i as dialogHeaderVariants, n as dialogOverlayVariants, o as dialogTitleVariants };

package/dist/components/Dialog/DialogDragHandle.cjs

@@ -0,0 +1 @@
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`);let t=require(`react`);t=e.__toESM(t,1);let n=require(`react/jsx-runtime`);var r=.3,i=.5,a=40,o=180;function s({onDismiss:e}){let s=t.useRef(null),c=t.useRef(void 0);t.useEffect(()=>()=>window.clearTimeout(c.current),[]);let l=(e,t,n)=>{e.style.transition=`transform ${o}ms ease-out`,e.style.transform=t,window.clearTimeout(c.current),c.current=window.setTimeout(n,o)},u=e=>{if(s.current||e.pointerType===`mouse`&&e.button!==0)return;let t=e.currentTarget.closest(`[data-slot="dialog-content"]`);t&&(window.clearTimeout(c.current),e.currentTarget.setPointerCapture(e.pointerId),t.style.transition=`none`,s.current={pointerId:e.pointerId,startY:e.clientY,startTime:e.timeStamp,offset:0,panel:t})},d=e=>{let t=s.current;!t||t.pointerId!==e.pointerId||(t.offset=Math.max(0,e.clientY-t.startY),t.panel.style.transform=`translateY(${t.offset}px)`)},f=(t,n)=>{let o=s.current;if(!o||o.pointerId!==t.pointerId)return;s.current=null;let{panel:c,offset:u}=o,d=Math.max(1,t.timeStamp-o.startTime),f=u>a&&u/d>i;if(!n&&(u>c.offsetHeight*r||f)){l(c,`translateY(${c.offsetHeight}px)`,()=>{c.style.animation=`none`,e()});return}l(c,`translateY(0)`,()=>{c.style.transition=``,c.style.transform=``})};return(0,n.jsx)(`div`,{"data-slot":`dialog-drag-area`,"aria-hidden":`true`,className:`zui:pointer-events-none zui:sticky zui:top-0 zui:z-10 zui:mb-0.5 zui:flex zui:h-2.5 zui:shrink-0 zui:items-start zui:justify-center zui:desktop:hidden`,children:(0,n.jsx)(`div`,{"data-slot":`dialog-drag-handle`,onPointerDown:u,onPointerMove:d,onPointerUp:e=>f(e,!1),onPointerCancel:e=>f(e,!0),className:`zui:pointer-events-auto zui:flex zui:h-6 zui:w-40 zui:cursor-grab zui:touch-none zui:items-start zui:justify-center zui:pt-[calc(var(--zui-spacing)*0.75)]`,children:(0,n.jsx)(`span`,{className:`zui:h-1 zui:w-24 zui:rounded-full zui:bg-[color-mix(in_srgb,var(--zui-color-text)_35%,transparent)]`})})})}exports.default=s;

package/dist/components/Dialog/DialogDragHandle.d.cts

@@ -0,0 +1,11 @@
+type DialogDragHandleProps = {
+    /** Dismisses the dialog; called once the panel has slid out of view. */
+    onDismiss: () => void;
+};
+/**
+ * The grabber bar at the top of the mobile (bottom-sheet) dialog. Dragging it down moves the
+ * whole panel with the finger; letting go past a threshold (or flicking) dismisses the dialog,
+ * otherwise the panel springs back. Hidden from the desktop layout by the caller's breakpoint.
+ */
+declare function DialogDragHandle({ onDismiss }: DialogDragHandleProps): import("react/jsx-runtime").JSX.Element;
+export default DialogDragHandle;

package/dist/components/Dialog/DialogDragHandle.d.ts

@@ -0,0 +1,11 @@
+type DialogDragHandleProps = {
+    /** Dismisses the dialog; called once the panel has slid out of view. */
+    onDismiss: () => void;
+};
+/**
+ * The grabber bar at the top of the mobile (bottom-sheet) dialog. Dragging it down moves the
+ * whole panel with the finger; letting go past a threshold (or flicking) dismisses the dialog,
+ * otherwise the panel springs back. Hidden from the desktop layout by the caller's breakpoint.
+ */
+declare function DialogDragHandle({ onDismiss }: DialogDragHandleProps): import("react/jsx-runtime").JSX.Element;
+export default DialogDragHandle;

package/dist/components/Dialog/DialogDragHandle.js

@@ -0,0 +1,55 @@
+"use client";
+import * as e from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Dialog/DialogDragHandle.tsx
+var n = .3, r = .5, i = 40, a = 180;
+function o({ onDismiss: o }) {
+	let s = e.useRef(null), c = e.useRef(void 0);
+	e.useEffect(() => () => window.clearTimeout(c.current), []);
+	let l = (e, t, n) => {
+		e.style.transition = `transform ${a}ms ease-out`, e.style.transform = t, window.clearTimeout(c.current), c.current = window.setTimeout(n, a);
+	}, u = (e) => {
+		if (s.current || e.pointerType === "mouse" && e.button !== 0) return;
+		let t = e.currentTarget.closest("[data-slot=\"dialog-content\"]");
+		t && (window.clearTimeout(c.current), e.currentTarget.setPointerCapture(e.pointerId), t.style.transition = "none", s.current = {
+			pointerId: e.pointerId,
+			startY: e.clientY,
+			startTime: e.timeStamp,
+			offset: 0,
+			panel: t
+		});
+	}, d = (e) => {
+		let t = s.current;
+		!t || t.pointerId !== e.pointerId || (t.offset = Math.max(0, e.clientY - t.startY), t.panel.style.transform = `translateY(${t.offset}px)`);
+	}, f = (e, t) => {
+		let a = s.current;
+		if (!a || a.pointerId !== e.pointerId) return;
+		s.current = null;
+		let { panel: c, offset: u } = a, d = Math.max(1, e.timeStamp - a.startTime), f = u > i && u / d > r;
+		if (!t && (u > c.offsetHeight * n || f)) {
+			l(c, `translateY(${c.offsetHeight}px)`, () => {
+				c.style.animation = "none", o();
+			});
+			return;
+		}
+		l(c, "translateY(0)", () => {
+			c.style.transition = "", c.style.transform = "";
+		});
+	};
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "dialog-drag-area",
+		"aria-hidden": "true",
+		className: "zui:pointer-events-none zui:sticky zui:top-0 zui:z-10 zui:mb-0.5 zui:flex zui:h-2.5 zui:shrink-0 zui:items-start zui:justify-center zui:desktop:hidden",
+		children: /* @__PURE__ */ t("div", {
+			"data-slot": "dialog-drag-handle",
+			onPointerDown: u,
+			onPointerMove: d,
+			onPointerUp: (e) => f(e, !1),
+			onPointerCancel: (e) => f(e, !0),
+			className: "zui:pointer-events-auto zui:flex zui:h-6 zui:w-40 zui:cursor-grab zui:touch-none zui:items-start zui:justify-center zui:pt-[calc(var(--zui-spacing)*0.75)]",
+			children: /* @__PURE__ */ t("span", { className: "zui:h-1 zui:w-24 zui:rounded-full zui:bg-[color-mix(in_srgb,var(--zui-color-text)_35%,transparent)]" })
+		})
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/Input/Input.cjs

@@ -1 +1 @@
-"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../services/convertToEnglishDigits/convertToEnglishDigits.cjs`),r=require(`../../lib/utils.cjs`),i=require(`../shared/FieldLabel.cjs`),a=require(`../shared/useInvalidState.cjs`),o=require(`../Tooltip/Tooltip.cjs`),s=require(`./Input.formatting.cjs`),ee=require(`./Input.variant.cjs`);let c=require(`react`);c=e.__toESM(c,1);let l=require(`react/jsx-runtime`),u=require(`lucide-react`);function d(e){return e==null?!1:typeof e==`string`||Array.isArray(e)?e.length>0:typeof e==`number`}function f(){let e=new Intl.DateTimeFormat(`en-US-u-ca-persian`,{year:`numeric`}).format(new Date);return Number.parseInt(e,10)}var p=c.forwardRef(function({className:e,wrapperClassName:p,size:te=`default`,type:m=`text`,title:h,required:g=!1,showRequiredMessage:_=!1,characterLimit:ne,placeholder:v,onChange:y,onBlur:b,onFocus:re,onInvalid:x,id:S,name:ie,disabled:C=!1,readOnly:w=!1,autoComplete:T,"aria-label":E,value:D,defaultValue:O,maxLength:k,inputMode:ae,onMouseUp:A,...oe},j){let{messages:M,digits:N,dir:P}=t.useZuiConfig(),[F,I]=c.useState(!1),{isInvalid:L,setIsInvalid:R,handleInvalid:z}=a.useInvalidState(x),[B,V]=c.useState(()=>s.resolveAsciiValue(O,m)),H=c.useId(),U=S??H,W=c.useRef(null),G=c.useMemo(()=>r.mergeRefs(W,j),[j]),K=s.resolveInputTypeStrategy(m),q=m===`search`,J=m===`password`,Y=m===`year`,X=N===`persian`&&!(J&&!F),se=J?F?`text`:`password`:q?`search`:`text`,Z=D!==void 0,Q=Z?d(D):B.length>0,ce=Z?s.resolveDisplayValue(s.resolveAsciiValue(D,m),m,X):void 0,le=O===void 0?void 0:s.resolveDisplayValue(s.resolveAsciiValue(O,m),m,X),$=c.useMemo(()=>{if(!Y)return null;let e=f();return{min:e-100,max:e+50}},[Y]);c.useEffect(()=>{let e=W.current;if(Z||!e)return;let t=s.resolveDisplayValue(B,m,X);e.value!==t&&(e.value=t)},[Z,B,X,m]);let ue=c.useCallback(e=>{let t=e.target,n=s.applyInputChange(m,t.value,t.selectionStart,t.selectionEnd,X);t.value=n.asciiValue,n.asciiSelection&&t.setSelectionRange(...n.asciiSelection),Z||V(n.asciiValue),R(!1),y?.(e),n.displayValue!==null&&(t.value=n.displayValue,n.displaySelection&&t.setSelectionRange(...n.displaySelection))},[Z,y,R,X,m]),de=c.useCallback(e=>{A?.(e);let t=e.currentTarget;if(!K.isFormatted||e.defaultPrevented||e.detail>1||t.value.length===0||t.selectionStart!==t.selectionEnd)return;let n=t.value.length;t.setSelectionRange(n,n)},[A,K.isFormatted]),fe=c.useCallback(e=>{if(Z||V(s.resolveAsciiValue(e.target.value,m)),$){let t=n.convertToEnglishDigits({value:e.target.value});if(t.length===4){let e=Number.parseInt(t,10);(e<$.min||e>$.max)&&R(!0)}}b?.(e)},[Z,b,R,m,$]),pe=c.useCallback(()=>{let e=W.current;if(!e)return;let t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`)?.set;t?t.call(e,``):e.value=``,e.dispatchEvent(new Event(`input`,{bubbles:!0})),e.focus()},[]),me=r.cn(ee.inputVariants({size:te}),K.isCentered?`zui:text-center`:`zui:text-start`,q?`zui-input-search-cancel zui:ps-10 zui:pe-10`:J?`zui:pe-16`:`zui:pe-10`);return(0,l.jsxs)(`div`,{"data-slot":`input-field`,dir:P,className:r.cn(`zui:w-full zui:space-y-1.5 zui:text-start`,p),children:[(0,l.jsx)(i.FieldLabel,{title:h,htmlFor:U,required:g,showRequiredMessage:_}),(0,l.jsxs)(`div`,{className:`zui:relative`,children:[!h&&g&&!_?(0,l.jsx)(i.RequiredMark,{}):null,q?(0,l.jsx)(u.Search,{className:`zui:pointer-events-none zui:absolute zui:start-3 zui:top-1/2 zui:size-4 zui:-translate-y-1/2 zui:text-[var(--zui-color-text)]`,"aria-hidden":`true`}):null,(0,l.jsx)(`input`,{...oe,ref:G,id:U,"data-slot":`input`,type:se,inputMode:K.inputMode??ae,maxLength:K.maxLength??ne??k,required:g,"aria-invalid":L||void 0,"data-has-value":Q,placeholder:v,name:ie,disabled:C,readOnly:w,autoComplete:T,"aria-label":E,onChange:ue,onBlur:fe,onFocus:re,onMouseUp:de,onInvalid:z,value:ce,defaultValue:le,className:r.cn(me,e)}),Q&&!C?(0,l.jsx)(o.default,{text:M.common.clear,position:`top`,disabled:w,trigger:(0,l.jsx)(`button`,{type:`button`,onClick:pe,disabled:w,tabIndex:-1,className:r.cn(`zui:group/clear-input zui:absolute zui:top-1/2 zui:inline-flex zui:-translate-y-1/2 zui:items-center zui:justify-center zui:cursor-pointer zui:border-0 zui:bg-transparent zui:p-0 zui:leading-none zui:text-[var(--zui-color-text)] zui:outline-none zui:transition-opacity zui:duration-200 zui:ease-out zui:hover:opacity-80 zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-50`,J?`zui:end-9`:`zui:end-3`),"aria-label":M.common.clear,children:(0,l.jsx)(u.X,{className:`zui:size-4 zui:text-[var(--zui-color-text)] zui:transition-transform zui:duration-200 zui:ease-out zui:group-hover/clear-input:scale-110`,"aria-hidden":`true`})})}):null,J?(0,l.jsx)(`button`,{type:`button`,onClick:()=>I(e=>!e),className:`zui:absolute zui:end-3 zui:top-1/2 zui:-translate-y-1/2 zui:cursor-pointer zui:text-[var(--zui-color-text)] zui:transition-opacity zui:hover:opacity-80 zui:focus-visible:outline-none`,"aria-label":F?M.input.hidePassword:M.input.showPassword,children:F?(0,l.jsx)(u.EyeOff,{className:`zui:size-4`,"aria-hidden":`true`}):(0,l.jsx)(u.Eye,{className:`zui:size-4`,"aria-hidden":`true`})}):null]})]})});exports.default=p;
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../services/convertToEnglishDigits/convertToEnglishDigits.cjs`),r=require(`../../lib/utils.cjs`),i=require(`../Tooltip/Tooltip.cjs`),a=require(`../shared/FieldClearButton.cjs`),o=require(`../shared/FieldLabel.cjs`),s=require(`../shared/useInvalidState.cjs`),c=require(`./Input.formatting.cjs`),l=require(`./Input.variant.cjs`);let u=require(`react`);u=e.__toESM(u,1);let d=require(`react/jsx-runtime`),f=require(`lucide-react`);function p(e){return e==null?!1:typeof e==`string`||Array.isArray(e)?e.length>0:typeof e==`number`}function ee(){let e=new Intl.DateTimeFormat(`en-US-u-ca-persian`,{year:`numeric`}).format(new Date);return Number.parseInt(e,10)}var m=u.forwardRef(function({className:e,wrapperClassName:m,type:h=`text`,title:g,required:_=!1,showRequiredMessage:v=!1,characterLimit:te,placeholder:ne,onChange:y,onBlur:b,onFocus:re,onInvalid:ie,id:x,name:S,disabled:C=!1,readOnly:w=!1,autoComplete:ae,"aria-label":T,value:E,defaultValue:D,maxLength:O,inputMode:k,onMouseUp:A,...oe},j){let{messages:M,digits:N,dir:P}=t.useZuiConfig(),[F,I]=u.useState(!1),{isInvalid:L,setIsInvalid:R,handleInvalid:z}=s.useInvalidState(ie),[B,V]=u.useState(()=>c.resolveAsciiValue(D,h)),H=u.useId(),U=x??H,W=u.useRef(null),G=u.useMemo(()=>r.mergeRefs(W,j),[j]),K=c.resolveInputTypeStrategy(h),q=h===`search`,J=h===`password`,Y=h===`year`,X=N===`persian`&&!(J&&!F),se=J?F?`text`:`password`:q?`search`:`text`,Z=E!==void 0,Q=Z?p(E):B.length>0,ce=Z?c.resolveDisplayValue(c.resolveAsciiValue(E,h),h,X):void 0,le=D===void 0?void 0:c.resolveDisplayValue(c.resolveAsciiValue(D,h),h,X),$=u.useMemo(()=>{if(!Y)return null;let e=ee();return{min:e-100,max:e+50}},[Y]);u.useEffect(()=>{let e=W.current;if(Z||!e)return;let t=c.resolveDisplayValue(B,h,X);e.value!==t&&(e.value=t)},[Z,B,X,h]);let ue=u.useCallback(e=>{let t=e.target,n=c.applyInputChange(h,t.value,t.selectionStart,t.selectionEnd,X);t.value=n.asciiValue,n.asciiSelection&&t.setSelectionRange(...n.asciiSelection),Z||V(n.asciiValue),R(!1),y?.(e),n.displayValue!==null&&(t.value=n.displayValue,n.displaySelection&&t.setSelectionRange(...n.displaySelection))},[Z,y,R,X,h]),de=u.useCallback(e=>{A?.(e);let t=e.currentTarget;if(!K.isFormatted||e.defaultPrevented||e.detail>1||t.value.length===0||t.selectionStart!==t.selectionEnd)return;let n=t.value.length;t.setSelectionRange(n,n)},[A,K.isFormatted]),fe=u.useCallback(e=>{if(Z||V(c.resolveAsciiValue(e.target.value,h)),$){let t=n.convertToEnglishDigits({value:e.target.value});if(t.length===4){let e=Number.parseInt(t,10);(e<$.min||e>$.max)&&R(!0)}}b?.(e)},[Z,b,R,h,$]),pe=u.useCallback(()=>{let e=W.current;if(!e)return;let t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`)?.set;t?t.call(e,``):e.value=``,e.dispatchEvent(new Event(`input`,{bubbles:!0})),e.focus()},[]),me=r.cn(l.inputVariants(),K.isCentered?`zui:text-center`:`zui:text-start`,q?`zui-input-search-cancel zui:ps-10 zui:pe-10`:J?`zui:pe-16`:`zui:pe-10`);return(0,d.jsxs)(`div`,{"data-slot":`input-field`,dir:P,className:r.cn(`zui:w-full zui:space-y-1.5 zui:text-start`,m),children:[(0,d.jsx)(o.FieldLabel,{title:g,htmlFor:U,required:_,showRequiredMessage:v}),(0,d.jsxs)(`div`,{className:`zui:relative`,children:[!g&&_&&!v?(0,d.jsx)(o.RequiredMark,{}):null,q?(0,d.jsx)(f.Search,{className:`zui:pointer-events-none zui:absolute zui:start-3 zui:top-1/2 zui:size-4 zui:-translate-y-1/2 zui:text-[var(--zui-color-text)]`,"aria-hidden":`true`}):null,(0,d.jsx)(`input`,{...oe,ref:G,id:U,"data-slot":`input`,type:se,inputMode:K.inputMode??k,maxLength:K.maxLength??te??O,required:_,"aria-invalid":L||void 0,"data-has-value":Q,placeholder:ne,name:S,disabled:C,readOnly:w,autoComplete:ae,"aria-label":T,onChange:ue,onBlur:fe,onFocus:re,onMouseUp:de,onInvalid:z,value:ce,defaultValue:le,className:r.cn(me,e)}),Q&&!C?(0,d.jsx)(i.default,{text:M.common.clear,position:`top`,disabled:w,trigger:(0,d.jsx)(`button`,{type:`button`,onClick:pe,disabled:w,tabIndex:-1,className:r.cn(`zui:group/clear-input zui:absolute zui:top-1/2 zui:inline-flex zui:-translate-y-1/2 zui:items-center zui:justify-center zui:cursor-pointer zui:border-0 zui:bg-transparent zui:p-0 zui:leading-none zui:text-[var(--zui-color-text)] zui:outline-none zui:transition-opacity zui:duration-200 zui:ease-out zui:hover:opacity-80 zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-50`,J?`zui:end-9 zui:mobile:end-10`:`zui:end-3`),"aria-label":M.common.clear,children:(0,d.jsx)(f.X,{className:`${a.CLEAR_ICON_CLASS} zui:text-[var(--zui-color-text)] zui:transition-transform zui:duration-200 zui:ease-out zui:group-hover/clear-input:scale-110`,"aria-hidden":`true`})})}):null,J?(0,d.jsx)(`button`,{type:`button`,onClick:()=>I(e=>!e),className:`zui:absolute zui:end-3 zui:top-1/2 zui:-translate-y-1/2 zui:cursor-pointer zui:text-[var(--zui-color-text)] zui:transition-opacity zui:hover:opacity-80 zui:focus-visible:outline-none`,"aria-label":F?M.input.hidePassword:M.input.showPassword,children:F?(0,d.jsx)(f.EyeOff,{className:a.CLEAR_ICON_CLASS,"aria-hidden":`true`}):(0,d.jsx)(f.Eye,{className:a.CLEAR_ICON_CLASS,"aria-hidden":`true`})}):null]})]})});exports.default=m;