@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/Textarea/Textarea.mjs

@@ -0,0 +1,151 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
+import { useMessages as n } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as r } from "../../../utils/cx.mjs";
+import { VisuallyHidden as i } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { useFieldControl as a } from "../Field/FieldContext.mjs";
+import o from "./Textarea.module.css.mjs";
+import { useCallback as s, useEffect as c, useId as ee, useLayoutEffect as l, useRef as u, useState as te } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/forms/Textarea/Textarea.tsx
+var p = {
+	sm: o.sm,
+	md: o.md,
+	lg: o.lg
+}, m = {
+	outline: o.outline,
+	filled: o.filled
+}, h = {
+	none: o.radiusNone,
+	xs: o.radiusXs,
+	sm: o.radiusSm,
+	md: o.radiusMd,
+	lg: o.radiusLg,
+	xl: o.radiusXl,
+	"2xl": o.radius2xl
+}, g = {
+	none: o.resizeNone,
+	vertical: o.resizeVertical,
+	both: o.resizeBoth
+}, ne = .9, re = 600, _;
+function v() {
+	return _ === void 0 && (_ = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("field-sizing", "content")), _;
+}
+var ie = typeof window < "u" ? l : c, y = ({ size: l, variant: _ = "outline", radius: y, invalid: ae, value: b, defaultValue: x, onValueChange: S, onChange: C, rows: w = 3, autoResize: T = !1, minRows: E, maxRows: D, resize: O = "vertical", showCount: oe = !1, maxLength: k, fullWidth: se = !0, className: ce, textareaClassName: le, style: A, cols: j, id: M, required: N, disabled: P, readOnly: F, "aria-describedby": I, ref: L, ...R }) => {
+	let z = n(), B = ee(), V = oe && k !== void 0 && k > 0, H = a({
+		id: M,
+		invalid: ae,
+		required: N,
+		disabled: P,
+		readOnly: F,
+		size: l,
+		"aria-describedby": [I, V ? B : void 0].filter(Boolean).join(" ") || void 0
+	}), U = H.size ?? "md", ue = b !== void 0, [W, G] = e({
+		value: b,
+		defaultValue: x ?? "",
+		onChange: S
+	});
+	t(() => H.id ? document.getElementById(H.id) : null, () => G(x ?? ""), b === void 0);
+	let de = (e) => {
+		C?.(e), G(e.target.value);
+	}, K = u(null), fe = s((e) => {
+		K.current = e;
+		let t;
+		return typeof L == "function" ? t = L(e) : L && (L.current = e), () => {
+			K.current = null, typeof L == "function" ? typeof t == "function" ? t() : L(null) : L && (L.current = null);
+		};
+	}, [L]), q = Math.max(1, E ?? w), J = D === void 0 ? void 0 : Math.max(q, D), Y = s(() => {
+		let e = K.current;
+		if (!e) return;
+		e.style.height = "auto";
+		let t = window.getComputedStyle(e), n = parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth);
+		e.style.height = `${e.scrollHeight + n}px`;
+	}, []);
+	ie(() => {
+		T && !v() && Y();
+	}, [
+		T,
+		Y,
+		W,
+		q,
+		J,
+		U
+	]), c(() => {
+		let e = K.current;
+		if (!T || v() || !e || typeof ResizeObserver > "u") return;
+		let t = e.offsetWidth, n = new ResizeObserver(() => {
+			e.offsetWidth !== t && (t = e.offsetWidth, Y());
+		});
+		return n.observe(e), () => {
+			n.disconnect(), e.style.height = "";
+		};
+	}, [T, Y]);
+	let X = W.length, pe = V ? X / k : 0, Z = V && pe >= ne, me = V && X >= k, Q = V ? Math.max(0, k - X) : 0, [he, $] = te("");
+	c(() => {
+		if (!V) return;
+		if (!Z) {
+			$("");
+			return;
+		}
+		let e = window.setTimeout(() => {
+			$(Q === 0 ? z.textarea.limitReached : z.textarea.remaining(Q));
+		}, re);
+		return () => window.clearTimeout(e);
+	}, [
+		V,
+		Z,
+		Q,
+		z
+	]);
+	let ge = { ...T ? {
+		"--textarea-min-rows": q,
+		"--textarea-max-rows": J,
+		"--textarea-cols": j
+	} : null };
+	return /* @__PURE__ */ f("div", {
+		className: r(o.root, se ? o.fullWidth : o.inline, ce),
+		style: A,
+		children: [
+			/* @__PURE__ */ d("textarea", {
+				...R,
+				...H.ariaProps,
+				ref: fe,
+				id: H.id,
+				required: H.required,
+				disabled: H.disabled,
+				readOnly: H.readOnly,
+				maxLength: k,
+				cols: j,
+				rows: T ? q : w,
+				...ue ? { value: W } : { defaultValue: x ?? "" },
+				onChange: de,
+				style: ge,
+				className: r(o.textarea, p[U], m[_], y && h[y], g[T ? "none" : O], T && o.autoResize, T && J !== void 0 && o.hasMaxRows, H.invalid && o.invalid, le)
+			}),
+			V && /* @__PURE__ */ f("div", {
+				id: B,
+				className: r(o.counter, p[U], Z && o.counterNear, me && o.counterAtLimit),
+				children: [/* @__PURE__ */ f("span", {
+					"aria-hidden": "true",
+					children: [
+						X,
+						" / ",
+						k
+					]
+				}), /* @__PURE__ */ f(i, { children: [
+					X,
+					" of ",
+					k,
+					" characters used"
+				] })]
+			}),
+			V && /* @__PURE__ */ d(i, {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: he
+			})
+		]
+	});
+};
+//#endregion
+export { y as Textarea };

package/dist/components/forms/Textarea/Textarea.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_w9tza_3`,t=`_fullWidth_w9tza_17`,n=`_inline_w9tza_27`,r=`_textarea_w9tza_39`,i=`_sm_w9tza_143`,a=`_md_w9tza_157`,o=`_lg_w9tza_167`,s=`_outline_w9tza_183`,c=`_filled_w9tza_189`,l=`_radiusNone_w9tza_219`,u=`_radiusXs_w9tza_225`,d=`_radiusSm_w9tza_231`,f=`_radiusMd_w9tza_237`,p=`_radiusLg_w9tza_243`,m=`_radiusXl_w9tza_249`,h=`_radius2xl_w9tza_255`,g=`_resizeNone_w9tza_265`,_=`_resizeVertical_w9tza_271`,v=`_resizeBoth_w9tza_277`,y=`_autoResize_w9tza_293`,b=`_hasMaxRows_w9tza_311`,x=`_invalid_w9tza_347`,S=`_counter_w9tza_391`,C=`_counterNear_w9tza_429`,w=`_counterAtLimit_w9tza_439`,T={root:e,fullWidth:t,inline:n,textarea:r,sm:i,md:a,lg:o,outline:s,filled:c,radiusNone:l,radiusXs:u,radiusSm:d,radiusMd:f,radiusLg:p,radiusXl:m,radius2xl:h,resizeNone:g,resizeVertical:_,resizeBoth:v,autoResize:y,hasMaxRows:b,invalid:x,counter:S,counterNear:C,counterAtLimit:w};exports.autoResize=y,exports.counter=S,exports.counterAtLimit=w,exports.counterNear=C,exports.default=T,exports.filled=c,exports.fullWidth=t,exports.hasMaxRows=b,exports.inline=n,exports.invalid=x,exports.lg=o,exports.md=a,exports.outline=s,exports.radius2xl=h,exports.radiusLg=p,exports.radiusMd=f,exports.radiusNone=l,exports.radiusSm=d,exports.radiusXl=m,exports.radiusXs=u,exports.resizeBoth=v,exports.resizeNone=g,exports.resizeVertical=_,exports.root=e,exports.sm=i,exports.textarea=r;

package/dist/components/forms/Textarea/Textarea.module.css.mjs

@@ -0,0 +1,30 @@
+//#region src/components/forms/Textarea/Textarea.module.css
+var e = "_root_w9tza_3", t = "_fullWidth_w9tza_17", n = "_inline_w9tza_27", r = "_textarea_w9tza_39", i = "_sm_w9tza_143", a = "_md_w9tza_157", o = "_lg_w9tza_167", s = "_outline_w9tza_183", c = "_filled_w9tza_189", l = "_radiusNone_w9tza_219", u = "_radiusXs_w9tza_225", d = "_radiusSm_w9tza_231", f = "_radiusMd_w9tza_237", p = "_radiusLg_w9tza_243", m = "_radiusXl_w9tza_249", h = "_radius2xl_w9tza_255", g = "_resizeNone_w9tza_265", _ = "_resizeVertical_w9tza_271", v = "_resizeBoth_w9tza_277", y = "_autoResize_w9tza_293", b = "_hasMaxRows_w9tza_311", x = "_invalid_w9tza_347", S = "_counter_w9tza_391", C = "_counterNear_w9tza_429", w = "_counterAtLimit_w9tza_439", T = {
+	root: e,
+	fullWidth: t,
+	inline: n,
+	textarea: r,
+	sm: i,
+	md: a,
+	lg: o,
+	outline: s,
+	filled: c,
+	radiusNone: l,
+	radiusXs: u,
+	radiusSm: d,
+	radiusMd: f,
+	radiusLg: p,
+	radiusXl: m,
+	radius2xl: h,
+	resizeNone: g,
+	resizeVertical: _,
+	resizeBoth: v,
+	autoResize: y,
+	hasMaxRows: b,
+	invalid: x,
+	counter: S,
+	counterNear: C,
+	counterAtLimit: w
+};
+//#endregion
+export { y as autoResize, S as counter, w as counterAtLimit, C as counterNear, T as default, c as filled, t as fullWidth, b as hasMaxRows, n as inline, x as invalid, o as lg, a as md, s as outline, h as radius2xl, p as radiusLg, f as radiusMd, l as radiusNone, d as radiusSm, m as radiusXl, u as radiusXs, v as resizeBoth, g as resizeNone, _ as resizeVertical, e as root, i as sm, r as textarea };

package/dist/components/forms/Textarea/index.d.ts

@@ -0,0 +1 @@
+export * from './Textarea';

package/dist/components/forms/TimePicker/TimePicker.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),i=require("../../primitives/Icon/icons.cjs.js"),ee=require("../Field/FieldContext.cjs.js"),te=require("../Combobox/Combobox.cjs.js"),a=require("./timeUtils.cjs.js"),o=require("./TimePicker.module.css.cjs.js");let s=require("react"),c=require("react/jsx-runtime");var l=`14:30`;function u(e,t,n,r,i){return t.reason===`unparseable`?e.unparseable(t.example):r&&i?e.between(n(r),n(i)):r?e.onOrAfter(n(r)):e.onOrBefore(n(i))}var d=e=>e.replace(/\D/g,``),f=({value:f,defaultValue:p,onValueChange:ne,min:m,max:h,step:g=30,hourCycle:re,locale:_,size:v,name:y,clearable:ie=!1,placeholder:ae,invalid:b,required:x,disabled:S,readOnly:C,placement:w=`bottom-start`,maxHeight:T=`16rem`,fullWidth:E=!0,onInvalidInput:D,invalidMessage:O,formatDescription:oe,showTimesLabel:se,hideTimesLabel:ce,id:le,"aria-label":ue,"aria-labelledby":de,"aria-describedby":fe,className:pe,style:me,ref:k,onBlur:A})=>{let{messages:j,locale:M}=t.useLocale(),N=_??M,P=re??a.getLocaleHourCycle(N),F=(0,s.useMemo)(()=>e=>a.formatTime(e,N,P),[N,P]),I=F(l),L=oe??j.timePicker.format,R=ee.useFieldControl({disabled:S,readOnly:C,size:v,invalid:b,required:x}),he=R.size??`md`,[z,B]=e.useControllableState({value:f,defaultValue:p??null,onChange:ne}),[V,H]=(0,s.useState)(()=>z?F(z):``),[U,W]=(0,s.useState)(null),G=(0,s.useRef)({value:z,format:F});(0,s.useEffect)(()=>{let e=G.current;if(e.value===z&&e.format===F)return;let t=e.value?V===e.format(e.value):V===``;G.current={value:z,format:F},(e.value!==z||t)&&(H(z?F(z):``),e.value!==z&&W(null))},[z,F,V]);let K=e=>{G.current={value:e,format:F},H(e?F(e):``),B(e)},q=(e=V)=>{let t=e.trim();if(!t){W(null),z!==null&&K(null);return}let n=a.parseTimeText(t,N),r=a.parseISOTime(n),i=r!==null&&(m!==void 0&&r<a.parseISOTime(m)||h!==void 0&&r>a.parseISOTime(h));if(!n||i){let e={text:t,reason:n?`out-of-range`:`unparseable`,time:n??void 0,example:I};W(e),G.current={value:null,format:F},B(null),D?.(e);return}W(null),K(n)},J=(0,s.useMemo)(()=>a.timeSlots(g,m,h).map(e=>({value:e,label:F(e)})),[g,m,h,F]),ge=(0,s.useMemo)(()=>new Set(J.map(e=>e.value)),[J]),Y=z?F(z).toLowerCase():``,_e=(0,s.useMemo)(()=>(e,t)=>{let n=t.trim().toLowerCase();if(!n||n===Y||e.label.toLowerCase().includes(n))return!0;let r=d(n);if(r&&r===n.replace(/[:.\s]/g,``)){let t=d(e.value);if(t.startsWith(r)||t.startsWith(`0${r}`))return!0}return a.parseTimeText(n,N)===e.value},[N,Y]),X=(0,s.useId)(),Z=`${X}-format`,Q=`${X}-error`,$=U&&O!==null?typeof O==`function`?O(U):O??u(j.timePicker.invalid,U,F,m,h):null,ve=[fe,Z,$==null?void 0:Q].filter(Boolean).join(` `)||void 0;return(0,c.jsxs)(`div`,{className:n.cx(o.default.root,E&&o.default.fullWidth,pe),style:me,"data-size":he,children:[(0,c.jsx)(te.Combobox,{ref:k,id:le,options:J,value:z&&ge.has(z)?z:null,onValueChange:e=>{e!==null&&(W(null),K(e))},inputValue:V,onInputValueChange:e=>{H(e),e===``&&(W(null),z!==null&&K(null))},allowCustomValue:!0,filter:_e,emptyMessage:null,clearable:ie,showSuggestionsLabel:se??j.timePicker.showTimes,hideSuggestionsLabel:ce??j.timePicker.hideTimes,size:v,invalid:b??(U?!0:void 0),required:x,disabled:S,readOnly:C,placement:w,maxHeight:T,fullWidth:E,placeholder:ae,autoComplete:`off`,"aria-label":ue,"aria-labelledby":de,"aria-describedby":ve,onKeyDown:e=>{e.key===`Enter`&&!e.currentTarget.getAttribute(`aria-activedescendant`)&&q(e.currentTarget.value)},onBlur:e=>{!R.disabled&&!R.readOnly&&q(e.currentTarget.value),A?.(e)}}),(0,c.jsx)(r.VisuallyHidden,{id:Z,children:L(I)}),y!==void 0&&(0,c.jsx)(`input`,{type:`hidden`,name:y,value:z??``,disabled:R.disabled}),(0,c.jsx)(`div`,{"aria-live":`polite`,children:$!=null&&(0,c.jsxs)(`p`,{id:Q,className:o.default.error,children:[(0,c.jsx)(i.ErrorIcon,{size:`sm`,className:o.default.errorIcon}),(0,c.jsx)(`span`,{children:$})]})})]})};exports.TimePicker=f,exports.formatTime=a.formatTime,exports.isISOTime=a.isISOTime,exports.parseTimeText=a.parseTimeText;

package/dist/components/forms/TimePicker/TimePicker.d.ts

@@ -0,0 +1,116 @@
+import { CSSProperties, FocusEvent, ReactNode, Ref } from 'react';
+import { Placement, Size } from '../../../types/common';
+import { HourCycle, ISOTime } from './timeUtils';
+export type { HourCycle, ISOTime } from './timeUtils';
+export { formatTime, isISOTime, parseTimeText } from './timeUtils';
+/** Why typed text was rejected. */
+export type TimeInputErrorReason = "unparseable" | "out-of-range";
+/** Details passed to `onInvalidInput` and a function `invalidMessage`. */
+export interface TimeInputError {
+    /** The text the user typed. */
+    text: string;
+    /** Why it was rejected. */
+    reason: TimeInputErrorReason;
+    /** The parsed time, when the text was a real time outside `min` / `max`. */
+    time?: ISOTime;
+    /** A formatted example time in the field's format, e.g. "2:30 PM". */
+    example: string;
+}
+export interface TimePickerProps {
+    /** Selected time, "HH:mm" (24-hour), or null for none (controlled). */
+    value?: ISOTime | null;
+    /** Initially selected time when uncontrolled. */
+    defaultValue?: ISOTime | null;
+    /**
+     * Called with the new time ("HH:mm") or null when the user picks one from
+     * the list, types one and leaves the field, or clears it. Typed text that
+     * isn't a valid, allowed time sets the value to null.
+     */
+    onValueChange?: (value: ISOTime | null) => void;
+    /** Earliest allowed time, "HH:mm". Also where the list starts. */
+    min?: ISOTime;
+    /** Latest allowed time, "HH:mm". Also where the list ends. */
+    max?: ISOTime;
+    /** Minutes between the times in the list. Any minute can still be typed. @default 30 */
+    step?: number;
+    /** 12-hour (AM/PM) or 24-hour clock. Defaults to the locale's. */
+    hourCycle?: HourCycle;
+    /** BCP 47 locale for formatting and parsing. Defaults to the `LocaleProvider` locale. */
+    locale?: string;
+    /** Field height and type size. Inherits from a surrounding `Field`. @default "md" */
+    size?: Size;
+    /** Name of a hidden input that submits the value ("HH:mm") with a form. */
+    name?: string;
+    /** Shows a clear button while there is text. @default false */
+    clearable?: boolean;
+    /** Placeholder text. Defaults to none: the format is described to screen readers instead. */
+    placeholder?: string;
+    /** Danger styling and `aria-invalid`. Inherits from a surrounding `Field`. */
+    invalid?: boolean;
+    /** Requires a value. Inherits from a surrounding `Field`. */
+    required?: boolean;
+    /** Disables the field. Inherits from a surrounding `Field`. */
+    disabled?: boolean;
+    /** Shows the value without allowing changes. Inherits from a surrounding `Field`. */
+    readOnly?: boolean;
+    /** Preferred side of the list. Flips when there isn't room. @default "bottom-start" */
+    placement?: Placement;
+    /** Maximum list height (CSS length, or px as a number). @default 16rem */
+    maxHeight?: CSSProperties["maxHeight"];
+    /** Stretches the field to fill its container. @default true */
+    fullWidth?: boolean;
+    /**
+     * Called when the user leaves the field with text that isn't a valid,
+     * allowed time. Use it to set your own `Field` error.
+     */
+    onInvalidInput?: (error: TimeInputError) => void;
+    /**
+     * Message shown under the field when typed text is rejected. Pass a
+     * function to word it per reason, or `null` to show none (when you show a
+     * `Field` error from `onInvalidInput` instead).
+     */
+    invalidMessage?: ReactNode | ((error: TimeInputError) => ReactNode);
+    /** Screen-reader description of the expected format. @default (example) => `Example: ${example}` */
+    formatDescription?: (example: string) => string;
+    /** Accessible name of the list button while closed. @default "Show times" */
+    showTimesLabel?: string;
+    /** Accessible name of the list button while open. @default "Hide times" */
+    hideTimesLabel?: string;
+    /** Id for the text input. Inside a `Field`, the Field's id is used. */
+    id?: string;
+    /** Accessible name, when there is no visible label (`Field`). */
+    "aria-label"?: string;
+    /** Ids of elements that name the field. */
+    "aria-labelledby"?: string;
+    /** Ids of elements that describe the field. */
+    "aria-describedby"?: string;
+    /** Class name for the outer root. */
+    className?: string;
+    /** Style for the outer root. */
+    style?: CSSProperties;
+    /** Ref to the text input. */
+    ref?: Ref<HTMLInputElement>;
+    /** Called when the text input loses focus (after the typed text is committed). */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+}
+/**
+ * A time field: type a time in almost any form ("2:30 pm", "1430", "230p",
+ * "14h30", the locale's own format), or pick one from a list of times
+ * `step` minutes apart. Built on `Combobox`, so the list follows the
+ * WAI-ARIA combobox pattern: ArrowDown opens it on the selected time,
+ * arrows move, Enter picks, Escape closes, and typing filters it.
+ *
+ * The value is a 24-hour "HH:mm" string, the same as a native
+ * `<input type="time">`, so it never shifts with time zones. The field
+ * shows it in the locale's clock (12- or 24-hour, override with
+ * `hourCycle`). On blur (or Enter), typed text is parsed and normalized, or
+ * rejected with an inline, announced error. Inside a `Field`, label, hint,
+ * error, required, disabled, and invalid state are wired to the input.
+ *
+ * ```tsx
+ * <Field label="Tip-off">
+ *   <TimePicker name="tipoff" min="08:00" max="22:00" step={15} />
+ * </Field>
+ * ```
+ */
+export declare const TimePicker: ({ value: valueProp, defaultValue, onValueChange, min, max, step, hourCycle: hourCycleProp, locale: localeProp, size, name, clearable, placeholder, invalid, required, disabled, readOnly, placement, maxHeight, fullWidth, onInvalidInput, invalidMessage, formatDescription: formatDescriptionProp, showTimesLabel, hideTimesLabel, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ref, onBlur, }: TimePickerProps) => import("react").JSX.Element;

package/dist/components/forms/TimePicker/TimePicker.mjs

@@ -0,0 +1,161 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useLocale as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { VisuallyHidden as r } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { ErrorIcon as i } from "../../primitives/Icon/icons.mjs";
+import { useFieldControl as ee } from "../Field/FieldContext.mjs";
+import { Combobox as a } from "../Combobox/Combobox.mjs";
+import { formatTime as o, getLocaleHourCycle as te, isISOTime as s, parseISOTime as c, parseTimeText as l, timeSlots as ne } from "./timeUtils.mjs";
+import u from "./TimePicker.module.css.mjs";
+import { useEffect as re, useId as ie, useMemo as d, useRef as ae, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/forms/TimePicker/TimePicker.tsx
+var oe = "14:30";
+function se(e, t, n, r, i) {
+	return t.reason === "unparseable" ? e.unparseable(t.example) : r && i ? e.between(n(r), n(i)) : r ? e.onOrAfter(n(r)) : e.onOrBefore(n(i));
+}
+var h = (e) => e.replace(/\D/g, ""), g = ({ value: s, defaultValue: g, onValueChange: ce, min: _, max: v, step: y = 30, hourCycle: le, locale: ue, size: b, name: x, clearable: de = !1, placeholder: fe, invalid: S, required: C, disabled: w, readOnly: T, placement: pe = "bottom-start", maxHeight: me = "16rem", fullWidth: E = !0, onInvalidInput: he, invalidMessage: D, formatDescription: ge, showTimesLabel: _e, hideTimesLabel: ve, id: ye, "aria-label": be, "aria-labelledby": xe, "aria-describedby": O, className: k, style: A, ref: j, onBlur: M }) => {
+	let { messages: N, locale: Se } = t(), P = ue ?? Se, F = le ?? te(P), I = d(() => (e) => o(e, P, F), [P, F]), L = I(oe), Ce = ge ?? N.timePicker.format, R = ee({
+		disabled: w,
+		readOnly: T,
+		size: b,
+		invalid: S,
+		required: C
+	}), we = R.size ?? "md", [z, B] = e({
+		value: s,
+		defaultValue: g ?? null,
+		onChange: ce
+	}), [V, H] = f(() => z ? I(z) : ""), [U, W] = f(null), G = ae({
+		value: z,
+		format: I
+	});
+	re(() => {
+		let e = G.current;
+		if (e.value === z && e.format === I) return;
+		let t = e.value ? V === e.format(e.value) : V === "";
+		G.current = {
+			value: z,
+			format: I
+		}, (e.value !== z || t) && (H(z ? I(z) : ""), e.value !== z && W(null));
+	}, [
+		z,
+		I,
+		V
+	]);
+	let K = (e) => {
+		G.current = {
+			value: e,
+			format: I
+		}, H(e ? I(e) : ""), B(e);
+	}, q = (e = V) => {
+		let t = e.trim();
+		if (!t) {
+			W(null), z !== null && K(null);
+			return;
+		}
+		let n = l(t, P), r = c(n), i = r !== null && (_ !== void 0 && r < c(_) || v !== void 0 && r > c(v));
+		if (!n || i) {
+			let e = {
+				text: t,
+				reason: n ? "out-of-range" : "unparseable",
+				time: n ?? void 0,
+				example: L
+			};
+			W(e), G.current = {
+				value: null,
+				format: I
+			}, B(null), he?.(e);
+			return;
+		}
+		W(null), K(n);
+	}, J = d(() => ne(y, _, v).map((e) => ({
+		value: e,
+		label: I(e)
+	})), [
+		y,
+		_,
+		v,
+		I
+	]), Te = d(() => new Set(J.map((e) => e.value)), [J]), Y = z ? I(z).toLowerCase() : "", Ee = d(() => (e, t) => {
+		let n = t.trim().toLowerCase();
+		if (!n || n === Y || e.label.toLowerCase().includes(n)) return !0;
+		let r = h(n);
+		if (r && r === n.replace(/[:.\s]/g, "")) {
+			let t = h(e.value);
+			if (t.startsWith(r) || t.startsWith(`0${r}`)) return !0;
+		}
+		return l(n, P) === e.value;
+	}, [P, Y]), X = ie(), Z = `${X}-format`, Q = `${X}-error`, $ = U && D !== null ? typeof D == "function" ? D(U) : D ?? se(N.timePicker.invalid, U, I, _, v) : null, De = [
+		O,
+		Z,
+		$ == null ? void 0 : Q
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ m("div", {
+		className: n(u.root, E && u.fullWidth, k),
+		style: A,
+		"data-size": we,
+		children: [
+			/* @__PURE__ */ p(a, {
+				ref: j,
+				id: ye,
+				options: J,
+				value: z && Te.has(z) ? z : null,
+				onValueChange: (e) => {
+					e !== null && (W(null), K(e));
+				},
+				inputValue: V,
+				onInputValueChange: (e) => {
+					H(e), e === "" && (W(null), z !== null && K(null));
+				},
+				allowCustomValue: !0,
+				filter: Ee,
+				emptyMessage: null,
+				clearable: de,
+				showSuggestionsLabel: _e ?? N.timePicker.showTimes,
+				hideSuggestionsLabel: ve ?? N.timePicker.hideTimes,
+				size: b,
+				invalid: S ?? (U ? !0 : void 0),
+				required: C,
+				disabled: w,
+				readOnly: T,
+				placement: pe,
+				maxHeight: me,
+				fullWidth: E,
+				placeholder: fe,
+				autoComplete: "off",
+				"aria-label": be,
+				"aria-labelledby": xe,
+				"aria-describedby": De,
+				onKeyDown: (e) => {
+					e.key === "Enter" && !e.currentTarget.getAttribute("aria-activedescendant") && q(e.currentTarget.value);
+				},
+				onBlur: (e) => {
+					!R.disabled && !R.readOnly && q(e.currentTarget.value), M?.(e);
+				}
+			}),
+			/* @__PURE__ */ p(r, {
+				id: Z,
+				children: Ce(L)
+			}),
+			x !== void 0 && /* @__PURE__ */ p("input", {
+				type: "hidden",
+				name: x,
+				value: z ?? "",
+				disabled: R.disabled
+			}),
+			/* @__PURE__ */ p("div", {
+				"aria-live": "polite",
+				children: $ != null && /* @__PURE__ */ m("p", {
+					id: Q,
+					className: u.error,
+					children: [/* @__PURE__ */ p(i, {
+						size: "sm",
+						className: u.errorIcon
+					}), /* @__PURE__ */ p("span", { children: $ })]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { g as TimePicker, o as formatTime, s as isISOTime, l as parseTimeText };

package/dist/components/forms/TimePicker/TimePicker.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_100f0_6`,t=`_fullWidth_100f0_12`,n=`_error_100f0_17`,r=`_errorIcon_100f0_30`,i={root:e,fullWidth:t,error:n,errorIcon:r};exports.default=i,exports.error=n,exports.errorIcon=r,exports.fullWidth=t,exports.root=e;

package/dist/components/forms/TimePicker/TimePicker.module.css.mjs

@@ -0,0 +1,9 @@
+//#region src/components/forms/TimePicker/TimePicker.module.css
+var e = "_root_100f0_6", t = "_fullWidth_100f0_12", n = "_error_100f0_17", r = "_errorIcon_100f0_30", i = {
+	root: e,
+	fullWidth: t,
+	error: n,
+	errorIcon: r
+};
+//#endregion
+export { i as default, n as error, r as errorIcon, t as fullWidth, e as root };

package/dist/components/forms/TimePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './TimePicker';

package/dist/components/forms/TimePicker/timeUtils.cjs.js

@@ -0,0 +1 @@
+var e=e=>String(e).padStart(2,`0`);function t(e){if(!e)return null;let t=/^(\d{2}):(\d{2})(?::\d{2}(?:\.\d+)?)?$/.exec(e.trim());if(!t)return null;let n=Number(t[1]),r=Number(t[2]);return n>23||r>59?null:n*60+r}function n(e){return t(e)!==null}function r(t){let n=(Math.round(t)%1440+1440)%1440;return`${e(Math.floor(n/60))}:${e(n%60)}`}function i(e){try{let t=new Intl.DateTimeFormat(e,{hour:`numeric`}).resolvedOptions().hourCycle;return t===`h11`||t===`h12`?12:24}catch{return 24}}var a=new Map;function o(e,t){let n=`${e??``}|${t}`,r=a.get(n);return r||(r=new Intl.DateTimeFormat(e,{hour:`numeric`,minute:`2-digit`,hourCycle:t===12?`h12`:`h23`,timeZone:`UTC`}),a.set(n,r)),r}function s(e,n,r=i(n)){let a=t(e);if(a===null)return e;let s=new Date(Date.UTC(2e3,0,1,Math.floor(a/60),a%60));return o(n,r).format(s)}var c=[1632,1776,2406,2534,3664];function l(e){let t=``;for(let n of e.normalize(`NFKC`)){let e=n.codePointAt(0),r=c.find(t=>e>=t&&e<=t+9);t+=r===void 0?n:String(e-r)}return t.toLowerCase().replace(/\./g,``).trim()}var u=new Map;function d(e){let t=e??``,n=u.get(t);if(n)return n;let r=t=>{try{return l(new Intl.DateTimeFormat(e,{hour:`numeric`,hourCycle:`h12`,timeZone:`UTC`}).formatToParts(new Date(Date.UTC(2e3,0,1,t))).find(e=>e.type===`dayPeriod`)?.value??``)}catch{return``}},i={am:[r(9),`am`].filter(Boolean),pm:[r(21),`pm`].filter(Boolean)};return u.set(t,i),i}function f(e,t){let n=l(e);if(!n)return null;let i=null,{am:a,pm:o}=d(t),s=[...a.map(e=>({m:e,p:`am`})),...o.map(e=>({m:e,p:`pm`}))].sort((e,t)=>t.m.length-e.m.length);for(let{m:e,p:t}of s)if(e&&n.includes(e)){i=t,n=n.replace(e,` `).trim();break}if(!i){let e=/^(.*\d)\s*([ap])$/.exec(n);e&&(i=e[2]===`a`?`am`:`pm`,n=e[1])}let c,u=0,f=/^(\d{1,2})(?:\s*[:h時时시]\s*(\d{1,2})?\s*(?:[:分분]\s*(?:\d{1,2})?)?)?\s*[分분]?$/.exec(n),p=/^(\d{3,4})$/.exec(n);if(f){if(c=Number(f[1]),f[2]!==void 0){if(f[2].length!==2)return null;u=Number(f[2])}}else if(p){let e=p[1].padStart(4,`0`);c=Number(e.slice(0,2)),u=Number(e.slice(2))}else return null;if(u>59)return null;if(i){if(c<1||c>12)return null;c=c%12+(i===`pm`?12:0)}else if(c>23)return null;return r(c*60+u)}function p(e,n,i){let a=Math.max(1,Math.round(e)),o=t(n)??0,s=t(i)??1439,c=[];for(let e=o;e<=s;e+=a)c.push(r(e));return c}exports.formatTime=s,exports.getLocaleHourCycle=i,exports.isISOTime=n,exports.parseISOTime=t,exports.parseTimeText=f,exports.timeSlots=p,exports.toISOTime=r;

package/dist/components/forms/TimePicker/timeUtils.d.ts

@@ -0,0 +1,23 @@
+/** A wall-clock time as "HH:mm", 24-hour (e.g. "14:30"). */
+export type ISOTime = string;
+/** 12-hour (with AM/PM) or 24-hour clock. */
+export type HourCycle = 12 | 24;
+/** Minutes since midnight for "HH:mm" (or "HH:mm:ss"), or null when it isn't a valid time. */
+export declare function parseISOTime(value: string | null | undefined): number | null;
+/** True when `value` is a valid "HH:mm" time. */
+export declare function isISOTime(value: string | null | undefined): value is ISOTime;
+/** "HH:mm" for minutes since midnight (wraps around a day). */
+export declare function toISOTime(minutes: number): ISOTime;
+/** The locale's usual clock: 12-hour ("2:30 PM") or 24-hour ("14:30"). */
+export declare function getLocaleHourCycle(locale?: string): HourCycle;
+/** Formats "HH:mm" for display in the locale ("2:30 PM", "14:30", "오후 2:30"). */
+export declare function formatTime(value: ISOTime, locale?: string, hourCycle?: HourCycle): string;
+/**
+ * Parses what someone typed into "HH:mm", or returns null. Accepts the
+ * locale's own format and the common shorthands: "2:30 PM", "2:30pm",
+ * "2.30 p.m.", "2pm", "230p", "14:30", "1430", "14h30", "9", the locale's
+ * AM/PM words ("오후 2:30", "午後2:30"), and native or full-width digits.
+ */
+export declare function parseTimeText(text: string, locale?: string): ISOTime | null;
+/** The times from `min` to `max` (inclusive), `step` minutes apart. */
+export declare function timeSlots(step: number, min?: ISOTime, max?: ISOTime): ISOTime[];

package/dist/components/forms/TimePicker/timeUtils.mjs

@@ -0,0 +1,117 @@
+//#region src/components/forms/TimePicker/timeUtils.ts
+var e = (e) => String(e).padStart(2, "0");
+function t(e) {
+	if (!e) return null;
+	let t = /^(\d{2}):(\d{2})(?::\d{2}(?:\.\d+)?)?$/.exec(e.trim());
+	if (!t) return null;
+	let n = Number(t[1]), r = Number(t[2]);
+	return n > 23 || r > 59 ? null : n * 60 + r;
+}
+function n(e) {
+	return t(e) !== null;
+}
+function r(t) {
+	let n = (Math.round(t) % 1440 + 1440) % 1440;
+	return `${e(Math.floor(n / 60))}:${e(n % 60)}`;
+}
+function i(e) {
+	try {
+		let t = new Intl.DateTimeFormat(e, { hour: "numeric" }).resolvedOptions().hourCycle;
+		return t === "h11" || t === "h12" ? 12 : 24;
+	} catch {
+		return 24;
+	}
+}
+var a = /* @__PURE__ */ new Map();
+function o(e, t) {
+	let n = `${e ?? ""}|${t}`, r = a.get(n);
+	return r || (r = new Intl.DateTimeFormat(e, {
+		hour: "numeric",
+		minute: "2-digit",
+		hourCycle: t === 12 ? "h12" : "h23",
+		timeZone: "UTC"
+	}), a.set(n, r)), r;
+}
+function s(e, n, r = i(n)) {
+	let a = t(e);
+	if (a === null) return e;
+	let s = new Date(Date.UTC(2e3, 0, 1, Math.floor(a / 60), a % 60));
+	return o(n, r).format(s);
+}
+var c = [
+	1632,
+	1776,
+	2406,
+	2534,
+	3664
+];
+function l(e) {
+	let t = "";
+	for (let n of e.normalize("NFKC")) {
+		let e = n.codePointAt(0), r = c.find((t) => e >= t && e <= t + 9);
+		t += r === void 0 ? n : String(e - r);
+	}
+	return t.toLowerCase().replace(/\./g, "").trim();
+}
+var u = /* @__PURE__ */ new Map();
+function d(e) {
+	let t = e ?? "", n = u.get(t);
+	if (n) return n;
+	let r = (t) => {
+		try {
+			return l(new Intl.DateTimeFormat(e, {
+				hour: "numeric",
+				hourCycle: "h12",
+				timeZone: "UTC"
+			}).formatToParts(new Date(Date.UTC(2e3, 0, 1, t))).find((e) => e.type === "dayPeriod")?.value ?? "");
+		} catch {
+			return "";
+		}
+	}, i = {
+		am: [r(9), "am"].filter(Boolean),
+		pm: [r(21), "pm"].filter(Boolean)
+	};
+	return u.set(t, i), i;
+}
+function f(e, t) {
+	let n = l(e);
+	if (!n) return null;
+	let i = null, { am: a, pm: o } = d(t), s = [...a.map((e) => ({
+		m: e,
+		p: "am"
+	})), ...o.map((e) => ({
+		m: e,
+		p: "pm"
+	}))].sort((e, t) => t.m.length - e.m.length);
+	for (let { m: e, p: t } of s) if (e && n.includes(e)) {
+		i = t, n = n.replace(e, " ").trim();
+		break;
+	}
+	if (!i) {
+		let e = /^(.*\d)\s*([ap])$/.exec(n);
+		e && (i = e[2] === "a" ? "am" : "pm", n = e[1]);
+	}
+	let c, u = 0, f = /^(\d{1,2})(?:\s*[:h時时시]\s*(\d{1,2})?\s*(?:[:分분]\s*(?:\d{1,2})?)?)?\s*[分분]?$/.exec(n), p = /^(\d{3,4})$/.exec(n);
+	if (f) {
+		if (c = Number(f[1]), f[2] !== void 0) {
+			if (f[2].length !== 2) return null;
+			u = Number(f[2]);
+		}
+	} else if (p) {
+		let e = p[1].padStart(4, "0");
+		c = Number(e.slice(0, 2)), u = Number(e.slice(2));
+	} else return null;
+	if (u > 59) return null;
+	if (i) {
+		if (c < 1 || c > 12) return null;
+		c = c % 12 + (i === "pm" ? 12 : 0);
+	} else if (c > 23) return null;
+	return r(c * 60 + u);
+}
+function p(e, n, i) {
+	let a = Math.max(1, Math.round(e)), o = t(n) ?? 0, s = t(i) ?? 1439, c = [];
+	for (let e = o; e <= s; e += a) c.push(r(e));
+	return c;
+}
+//#endregion
+export { s as formatTime, i as getLocaleHourCycle, n as isISOTime, t as parseISOTime, f as parseTimeText, p as timeSlots, r as toISOTime };

package/dist/components/forms/ToggleGroup/ToggleGroup.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../utils/refs.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../primitives/Icon/Icon.cjs.js"),i=require("./ToggleGroup.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime");var s={solid:i.default.solid,soft:i.default.soft,outline:i.default.outline,ghost:i.default.ghost},c={neutral:i.default.neutral,primary:i.default.primary,accent:i.default.accent,success:i.default.success,warning:i.default.warning,danger:i.default.danger,info:i.default.info},l={sm:i.default.sm,md:i.default.md,lg:i.default.lg},u={none:i.default.radiusNone,xs:i.default.radiusXs,sm:i.default.radiusSm,md:i.default.radiusMd,lg:i.default.radiusLg,xl:i.default.radiusXl,"2xl":i.default.radius2xl,pill:i.default.radiusPill},d={0:i.default.gap0,1:i.default.gap1,2:i.default.gap2,3:i.default.gap3,4:i.default.gap4,5:i.default.gap5,6:i.default.gap6,8:i.default.gap8,10:i.default.gap10,12:i.default.gap12,16:i.default.gap16,20:i.default.gap20,24:i.default.gap24},f=(0,a.createContext)(null),p=`data-toggle-group-item`,m=`data-toggle-group`,h=({pressed:e,onToggle:t,variant:d,tone:p,size:m,radius:h,disabled:g,checkmark:_,fullWidth:v,startIcon:y,endIcon:b,icon:x,children:S,className:C,onClick:w,...T})=>{let E=(0,a.useContext)(f),D=d??E?.variant??`solid`,O=p??E?.tone??`primary`,k=m??E?.size??`md`,A=h??E?.radius,j=!!(g||E?.disabled),M=S==null&&x!=null,N=!M&&(v??E?.fullWidth??!1),P=e&&!M&&(_??E?.checkmark??!1),F=typeof S==`string`||typeof S==`number`?String(S):void 0,I=e=>{w?.(e),!(e.defaultPrevented||j)&&t()};return(0,o.jsx)(`button`,{...T,type:`button`,"aria-pressed":e,disabled:j,"data-state":e?`on`:`off`,className:n.cx(i.default.root,s[D],c[O],l[k],A?u[A]:i.default.radiusDefault,e&&i.default.pressed,M&&i.default.iconOnly,N&&i.default.fullWidth,!j&&i.default.interactive,j&&i.default.disabled,C),onClick:I,children:(0,o.jsxs)(`span`,{className:i.default.content,children:[P&&(0,o.jsx)(`span`,{className:n.cx(i.default.icon,i.default.check),"aria-hidden":`true`,children:(0,o.jsx)(r.Icon,{name:`check`,strokeWidth:3})}),M?(0,o.jsx)(`span`,{className:i.default.icon,"aria-hidden":`true`,children:x}):(0,o.jsxs)(o.Fragment,{children:[y!=null&&(0,o.jsx)(`span`,{className:i.default.icon,"aria-hidden":`true`,children:y}),S!=null&&(0,o.jsx)(`span`,{className:i.default.label,"data-text":F,children:S}),b!=null&&(0,o.jsx)(`span`,{className:i.default.icon,"aria-hidden":`true`,children:b})]})]})})},g=({pressed:t,defaultPressed:n=!1,onPressedChange:r,...i})=>{let[a,s]=e.useControllableState({value:t,defaultValue:n,onChange:r});return(0,o.jsx)(h,{...i,pressed:a,onToggle:()=>s(e=>!e)})},_=({value:e,onFocus:t,tabIndex:n,...r})=>{let i=(0,a.useContext)(f);if(!i)throw Error(`ToggleGroup.Item must be rendered inside a ToggleGroup.`);let s=n=>{t?.(n),i.setTabStop(e)};return(0,o.jsx)(h,{...r,[p]:e,pressed:i.isPressed(e),onToggle:()=>i.toggle(e),onFocus:s,tabIndex:i.rovingFocus?i.tabStop===e?0:-1:n})};function v(e){return Array.from(e.querySelectorAll(`[${p}]`)).filter(t=>!t.disabled&&t.closest(`[${m}]`)===e)}var y=Object.assign(({type:r,value:s,defaultValue:c,onValueChange:l,required:u=!1,attached:h=!1,orientation:g=`horizontal`,gap:_=2,rovingFocus:y=!0,role:b=`group`,size:x,variant:S,tone:C,radius:w,disabled:T,checkmark:E,fullWidth:D,className:O,children:k,onKeyDown:A,ref:j,...M})=>{let N=r===`multiple`,[P,F]=e.useControllableState({value:s,defaultValue:c??(N?[]:null),onChange:l}),I=(0,a.useRef)(null),L=(0,a.useCallback)(e=>{I.current=e,t.assignRef(j,e)},[j]),[R,z]=(0,a.useState)(null),B=(0,a.useMemo)(()=>Array.isArray(P)?P:typeof P==`string`?[P]:[],[P]),V=(0,a.useCallback)(e=>B.includes(e),[B]),H=(0,a.useCallback)(e=>{F(t=>{if(N){let n=Array.isArray(t)?t:[];return n.includes(e)?u&&n.length===1?t:n.filter(t=>t!==e):[...n,e]}return t===e?u?t:null:e})},[N,u,F]);(0,a.useLayoutEffect)(()=>{let e=I.current;if(!y||!e)return;let t=v(e).map(e=>e.getAttribute(p)??``);if(R!==null&&t.includes(R))return;let n=t.find(e=>B.includes(e))??t[0]??null;n!==R&&z(n)});let U=e=>{A?.(e);let t=I.current;if(e.defaultPrevented||!y||!t||e.altKey||e.ctrlKey||e.metaKey)return;let n=v(t),r=n.indexOf(e.target);if(r===-1)return;let i=g===`vertical`,a=getComputedStyle(t).direction===`rtl`,o=i?`ArrowDown`:a?`ArrowLeft`:`ArrowRight`,s=i?`ArrowUp`:a?`ArrowRight`:`ArrowLeft`,c=n.length,l=null;e.key===o?l=(r+1)%c:e.key===s?l=(r-1+c)%c:e.key===`Home`?l=0:e.key===`End`&&(l=c-1),l!==null&&(e.preventDefault(),n[l].focus())},W=(0,a.useMemo)(()=>({size:x,variant:S,tone:C,radius:w,disabled:T,checkmark:E,fullWidth:D,isPressed:V,toggle:H,rovingFocus:y,tabStop:R,setTabStop:z}),[x,S,C,w,T,E,D,V,H,y,R]),G=g===`vertical`;return(0,o.jsx)(`div`,{...M,[m]:``,ref:L,role:b,"aria-orientation":b===`toolbar`?g:void 0,"aria-disabled":T?!0:void 0,"data-orientation":g,className:n.cx(i.default.group,G&&i.default.groupVertical,h?G?i.default.attachedVertical:i.default.attachedHorizontal:d[_],h&&i.default.attached,D&&i.default.groupFullWidth,O),onKeyDown:U,children:(0,o.jsx)(f.Provider,{value:W,children:k})})},{Item:_});exports.ToggleButton=g,exports.ToggleGroup=y,exports.ToggleGroupItem=_;