@fiestaboard/ui 5.3.0 → 5.4.0

package/dist/components/forms/selection-group.js

@@ -0,0 +1,51 @@
+"use client";
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+import { Radio as t } from "@base-ui/react/radio";
+import { RadioGroup as n } from "@base-ui/react/radio-group";
+//#region src/components/forms/selection-group.tsx
+function r({ slot: t, onValueChange: r, onKeyDown: i, className: a, children: o, ...s }) {
+	return /* @__PURE__ */ e(n, {
+		"data-slot": t,
+		className: a,
+		onValueChange: (e) => r?.(e),
+		onKeyDown: (e) => {
+			if (i?.(e), e.defaultPrevented || e.key !== "Home" && e.key !== "End" || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target?.getAttribute("role") !== "radio") return;
+			let t = Array.from(e.currentTarget.querySelectorAll("[role=\"radio\"]")).filter((e) => !e.hasAttribute("disabled") && e.getAttribute("aria-disabled") !== "true"), n = e.key === "Home" ? t[0] : t[t.length - 1];
+			n !== void 0 && (e.preventDefault(), n.focus(), n.click());
+		},
+		...s,
+		children: o
+	});
+}
+function i({ grouped: n, value: r, pressed: i, onPressedChange: a, onClick: o, disabled: s, ref: c, children: l, ...u }) {
+	if (n) return /* @__PURE__ */ e(t.Root, {
+		value: r,
+		render: /* @__PURE__ */ e("button", { type: "button" }),
+		nativeButton: !0,
+		disabled: s,
+		onClick: o,
+		ref: c,
+		...u,
+		children: l
+	});
+	let d = (e) => {
+		o?.(e), !e.defaultPrevented && a?.(!i);
+	};
+	return /* @__PURE__ */ e("button", {
+		type: "button",
+		disabled: s,
+		ref: c,
+		...i === void 0 ? {} : {
+			"aria-pressed": i,
+			...i ? { "data-checked": "" } : { "data-unchecked": "" }
+		},
+		onClick: d,
+		...u,
+		children: l
+	});
+}
+//#endregion
+export { i as SelectableItemRoot, r as SelectionGroupRoot };
+
+//# sourceMappingURL=selection-group.js.map

package/dist/components/forms/selection-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-group.js","names":[],"sources":["../../../src/components/forms/selection-group.tsx"],"mappings":";;;;;;AAuEA,SAAS,EAAmB,EAC1B,SACA,kBACA,cACA,cACA,aACA,GAAG,KACuB;CAwB1B,OACE,kBAAC,GAAD;EACE,aAAW;EACA;EACX,gBAAgB,MAAS,IAAgB,CAAc;EACvD,YA5BmB,MAA+C;GAMpE,IALA,IAAY,CAAK,GACb,EAAM,oBACN,EAAM,QAAQ,UAAU,EAAM,QAAQ,SAEtC,EAAM,UAAU,EAAM,WAAW,EAAM,WAAW,EAAM,YACvD,EAAM,QAA+B,aAAa,MAAM,MAAM,SAAS;GAE5E,IAAM,IAAU,MAAM,KAAK,EAAM,cAAc,iBAA8B,kBAAgB,CAAC,CAAC,CAAC,QAC7F,MAAW,CAAC,EAAO,aAAa,UAAU,KAAK,EAAO,aAAa,eAAe,MAAM,MAC3F,GACM,IAAS,EAAM,QAAQ,SAAS,EAAQ,KAAK,EAAQ,EAAQ,SAAS;GACxE,MAAW,KAAA,MAGf,EAAM,eAAe,GACrB,EAAO,MAAM,GAIb,EAAO,MAAM;EACf;EAQI,GAAI;EAEH;CACkB,CAAA;AAEzB;AA+BA,SAAS,EAAmB,EAC1B,YACA,UACA,YACA,oBACA,YACA,aACA,QACA,aACA,GAAG,KACuB;CAC1B,IAAI,GACF,OAGE,kBAAC,EAAe,MAAhB;EACS;EACP,QAAQ,kBAAC,UAAD,EAAQ,MAAK,SAAU,CAAA;EAC/B,cAAA;EACU;EACD;EACJ;EACL,GAAI;EAEH;CACkB,CAAA;CAIzB,IAAM,KAAe,MAAyC;EAC5D,IAAU,CAAK,GACX,GAAM,oBACV,IAAkB,CAAC,CAAO;CAC5B;CAEA,OACE,kBAAC,UAAD;EACE,MAAK;EACK;EACL;EAIL,GAAK,MAAY,KAAA,IACb,CAAC,IACD;GAAE,gBAAgB;GAAS,GAAI,IAAU,EAAE,gBAAgB,GAAG,IAAI,EAAE,kBAAkB,GAAG;EAAG;EAChG,SAAS;EACT,GAAI;EAEH;CACK,CAAA;AAEZ"}

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

@@ -0,0 +1,81 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { type SelectionGroupBaseProps, type SelectionGroupNameProps } from "./selection-group";
+declare const swatchGroupVariants: (props?: ({
+    wrap?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const swatchVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const swatchFillVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const swatchIndicatorVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SwatchSize = NonNullable<VariantProps<typeof swatchVariants>["size"]>;
+export type SwatchGroupProps = SelectionGroupBaseProps & SelectionGroupNameProps & VariantProps<typeof swatchGroupVariants> & {
+    /** Diameter applied to every swatch in the group; a swatch may override it. */
+    size?: SwatchSize;
+    className?: string;
+    children?: React.ReactNode;
+} & Omit<React.ComponentProps<"div">, "defaultValue" | "onChange">;
+/**
+ * Single-select group of {@link Swatch}es — a real `radiogroup`.
+ *
+ * One tab stop for the whole group; arrow keys move the selection and wrap,
+ * Home/End jump to the ends, and the selection can never be emptied (a board
+ * always has a colour). Swatches inside it take their state from the group's
+ * `value`, so they need a `value` of their own and must NOT be given
+ * `pressed`.
+ *
+ * The group needs its own accessible name ("Board colour") and the type
+ * requires it: swatch labels do not compose into one, and a nameless
+ * radiogroup fails axe.
+ *
+ * A wrapped group keeps Base UI's LINEAR arrow-key order — Up/Down step by
+ * one, not by the column count. Row-aware movement is only correct with a
+ * fixed column count, which a `flex-wrap` palette does not have; a ±1
+ * Up/Down that pretends otherwise is the half-measure `editor/color-picker-
+ * content.tsx` already regretted. Use a fixed-column grid via `className`
+ * only if you are prepared to own that arithmetic.
+ */
+declare function SwatchGroup({ className, size, wrap, children, ...props }: SwatchGroupProps): React.JSX.Element;
+export type SwatchProps = Omit<React.ComponentProps<"button">, "aria-label" | "children" | "color" | "value"> & VariantProps<typeof swatchVariants> & {
+    /**
+     * The colour being picked, as ANY CSS colour — a board-surface token
+     * (`var(--color-board-surface-dark)`), a plugin colour-rule hue, or a
+     * raw hex. It is applied as an inline `background-color`, which is the
+     * only way an arbitrary runtime value can reach the DOM; Tailwind cannot
+     * compile a class for a value it never sees.
+     */
+    color: string;
+    /**
+     * Localized accessible name — e.g. "Black", "Board white". REQUIRED: the
+     * swatch renders no text, so this is its only name. Name the colour, not
+     * its value; "#0d0d0d" is not a name.
+     */
+    label: string;
+    /** Identifies the swatch inside a {@link SwatchGroup}. */
+    value?: string;
+    /**
+     * Standalone toggle state — only outside a group. Pair with
+     * `onPressedChange`. Leave undefined for a swatch that merely opens a
+     * picker: it then gets no `aria-pressed` at all.
+     */
+    pressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+};
+/**
+ * One colour circle. Inside a {@link SwatchGroup} it is a `radio`
+ * (`aria-checked`, roving tabindex, arrow keys). On its own with `pressed`
+ * it is an `aria-pressed` toggle button.
+ *
+ * Fill diameters are 20 / 24 / 32px at `sm` / `md` / `lg`; the button around
+ * them is 28 / 32 / 40px, so every target clears WCAG 2.2 SC 2.5.8's 24×24
+ * minimum. Selection shows as a `--foreground` ring outside the fill plus a
+ * `--primary` check disc over it — never as a change to the fill, which is
+ * the thing being picked.
+ */
+declare function Swatch({ className, size, value, color, label, pressed, onPressedChange, ...props }: SwatchProps): React.JSX.Element;
+export { Swatch, swatchFillVariants, SwatchGroup, swatchGroupVariants, swatchIndicatorVariants, swatchVariants };

package/dist/components/forms/swatch.js

@@ -0,0 +1,91 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { SelectableItemRoot as t, SelectionGroupRoot as n } from "./selection-group.js";
+import { Check as r } from "lucide-react";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { cva as o } from "class-variance-authority";
+//#region src/components/forms/swatch.tsx
+var s = o(["flex items-center gap-2"], {
+	variants: { wrap: {
+		true: "flex-wrap",
+		false: "flex-nowrap"
+	} },
+	defaultVariants: { wrap: !0 }
+}), c = o([
+	"group/swatch inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full",
+	"bg-transparent p-1",
+	"focus-ring transition-[box-shadow,opacity] duration-control",
+	"disabled:pointer-events-none disabled:opacity-50"
+], {
+	variants: { size: {
+		sm: "size-7",
+		md: "size-8",
+		lg: "size-10"
+	} },
+	defaultVariants: { size: "md" }
+}), l = o([
+	"pointer-events-none flex items-center justify-center rounded-full",
+	"border border-input",
+	"ring-offset-2 ring-offset-background transition-[box-shadow] duration-control",
+	"group-data-[checked]/swatch:ring-2 group-data-[checked]/swatch:ring-foreground"
+], {
+	variants: { size: {
+		sm: "size-5",
+		md: "size-6",
+		lg: "size-8"
+	} },
+	defaultVariants: { size: "md" }
+}), u = o([
+	"pointer-events-none flex items-center justify-center rounded-full bg-primary text-primary-foreground",
+	"ring-1 ring-background opacity-0 transition-opacity duration-control",
+	"group-data-[checked]/swatch:opacity-100"
+], {
+	variants: { size: {
+		sm: "size-3 [&_svg]:size-2",
+		md: "size-3.5 [&_svg]:size-2.5",
+		lg: "size-4 [&_svg]:size-3"
+	} },
+	defaultVariants: { size: "md" }
+}), d = i.createContext(null);
+function f({ className: t, size: r, wrap: o, children: c, ...l }) {
+	let u = i.useMemo(() => ({ size: r }), [r]);
+	return /* @__PURE__ */ a(d.Provider, {
+		value: u,
+		children: /* @__PURE__ */ a(n, {
+			slot: "swatch-group",
+			className: e(s({ wrap: o }), t),
+			...l,
+			children: c
+		})
+	});
+}
+function p({ className: n, size: o, value: s, color: f, label: p, pressed: m, onPressedChange: h, ...g }) {
+	let _ = i.useContext(d), v = o ?? _?.size ?? "md";
+	return /* @__PURE__ */ a(t, {
+		grouped: _ !== null,
+		value: s,
+		pressed: m,
+		onPressedChange: h,
+		"aria-label": p,
+		"data-slot": "swatch",
+		"data-size": v,
+		className: e(c({ size: v }), n),
+		...g,
+		children: /* @__PURE__ */ a("span", {
+			"data-slot": "swatch-fill",
+			"aria-hidden": "true",
+			style: { backgroundColor: f },
+			className: l({ size: v }),
+			children: /* @__PURE__ */ a("span", {
+				"data-slot": "swatch-indicator",
+				className: u({ size: v }),
+				children: /* @__PURE__ */ a(r, {})
+			})
+		})
+	});
+}
+//#endregion
+export { p as Swatch, f as SwatchGroup, l as swatchFillVariants, s as swatchGroupVariants, u as swatchIndicatorVariants, c as swatchVariants };
+
+//# sourceMappingURL=swatch.js.map

package/dist/components/forms/swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch.js","names":[],"sources":["../../../src/components/forms/swatch.tsx"],"mappings":";;;;;;;;AAkGA,IAAM,IAAsB,EAC1B,CAIE,yBACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,GACR;AACF,CACF,GAEM,IAAiB,EACrB;CAIE;CAIA;CAGA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EAEJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF,GAEM,IAAqB,EACzB;CACE;CAGA;CAGA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF,GAEM,IAA0B,EAC9B;CAIE;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF,GAQM,IAAqB,EAAM,cAA8C,IAAI;AA+BnF,SAAS,EAAY,EAAE,cAAW,SAAM,SAAM,aAAU,GAAG,KAA2B;CACpF,IAAM,IAAU,EAAM,eAAwC,EAAE,QAAK,IAAI,CAAC,CAAI,CAAC;CAE/E,OACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;EAClC,UAAA,kBAAC,GAAD;GAAoB,MAAK;GAAe,WAAW,EAAG,EAAoB,EAAE,QAAK,CAAC,GAAG,CAAS;GAAG,GAAI;GAClG;EACiB,CAAA;CACO,CAAA;AAEjC;AAwCA,SAAS,EAAO,EAAE,cAAW,SAAM,UAAO,UAAO,UAAO,YAAS,oBAAiB,GAAG,KAAsB;CACzG,IAAM,IAAQ,EAAM,WAAW,CAAkB,GAC3C,IAAe,KAAQ,GAAO,QAAQ;CAE5C,OACE,kBAAC,GAAD;EACE,SAAS,MAAU;EACZ;EACE;EACQ;EACjB,cAAY;EACZ,aAAU;EACV,aAAW;EACX,WAAW,EAAG,EAAe,EAAE,MAAM,EAAa,CAAC,GAAG,CAAS;EAC/D,GAAI;EAEJ,UAAA,kBAAC,QAAD;GACE,aAAU;GAGV,eAAY;GACZ,OAAO,EAAE,iBAAiB,EAAM;GAChC,WAAW,EAAmB,EAAE,MAAM,EAAa,CAAC;GAEpD,UAAA,kBAAC,QAAD;IAAM,aAAU;IAAmB,WAAW,EAAwB,EAAE,MAAM,EAAa,CAAC;IAC1F,UAAA,kBAAC,GAAD,CAAQ,CAAA;GACJ,CAAA;EACF,CAAA;CACY,CAAA;AAExB"}

package/dist/components/forms/timezone-picker.d.ts

@@ -0,0 +1,163 @@
+import * as React from "react";
+/**
+ * Searchable IANA time-zone combobox: a text input that filters ~400 zones and
+ * a portalled listbox of matches.
+ *
+ * WHAT IT IS NOT.
+ * `Select` is a listbox with no text entry — usable at 10 options, unusable at
+ * 400, which is why the consuming app hand-rolled 336 lines of this and
+ * rendered it from three places. `TimePicker` picks an instant *within* a day
+ * (hour + minute + presets); this picks the zone that instant is read in. They
+ * compose — a schedule row is a `TimePicker` next to a `TimezonePicker` — so
+ * they deliberately share a controlled/uncontrolled shape: `value` +
+ * `defaultValue` + `onValueChange`, all optional, resolved with `??` so a
+ * controlled `""` still means "unset" instead of falling through to internal
+ * state.
+ *
+ * VALUE vs TEXT. `value` is the IANA id (`"Europe/Berlin"`), never the display
+ * label — the label is presentation and a consumer may localize it through
+ * `timezones`. The input's *text* is a separate thing the user can type
+ * anything into, so the component reports whether that text currently names a
+ * known zone via {@link TimezonePickerProps.onValidityChange}, which is what
+ * lets a form block "Europe/Berlim" from being saved.
+ *
+ * ACCESSIBILITY CONTRACT (all of it from Base UI's Combobox, none hand-rolled):
+ * the input is `role="combobox"` with `aria-expanded` / `aria-haspopup` /
+ * `aria-controls`; the panel is `role="listbox"` with `role="option"` rows;
+ * ArrowUp/ArrowDown move the highlight as `aria-activedescendant` while DOM
+ * focus stays on the input (the combobox pattern — unlike TimePicker's
+ * roving-tabindex listbox, where focus really moves); Enter commits, Escape
+ * closes, an outside press dismisses. The panel is portalled, so a picker
+ * inside a card or a scroll box with `overflow: hidden` is not clipped, and
+ * the positioner anchors it to the input.
+ *
+ * `aria-invalid` is NOT set from the validity check, deliberately. It would
+ * flip to "invalid" on every keystroke of a zone the user is halfway through
+ * typing, and a live combobox announcing an error mid-word is worse than no
+ * error at all. The unknown-text state is published as `data-unknown-zone` (a
+ * silent styling hook) and as `onValidityChange`; *when* to escalate it to
+ * `aria-invalid` — on blur, on submit — is the form's call, not the kit's.
+ *
+ * Rows are 32px tall (py-1.5 over a 20px line box), clearing WCAG 2.2 SC 2.5.8's
+ * 24×24 minimum target. The offset column is `text-muted-foreground`, which is
+ * text and therefore held to SC 1.4.3's 4.5:1 by the token, not to 3:1.
+ */
+/** A zone as this component consumes it. See {@link listTimezones}. */
+export interface TimezoneOption {
+    /** IANA identifier, e.g. `"Europe/Berlin"`. This is what `value` carries. */
+    id: string;
+    /**
+     * Localized display name shown in the input and the list (the app resolves
+     * i18n). Defaults to the id with underscores turned into spaces, so
+     * `"America/New_York"` reads `"America/New York"` and the visible text stays
+     * the identifier the user probably has in mind.
+     */
+    label?: string;
+    /**
+     * UTC offset as a bare signed string, `"+02:00"`. Derived from the zone for
+     * the current instant when omitted. Pass it explicitly when the rendering
+     * must not move with DST — a Storybook story or a VRT baseline.
+     */
+    offset?: string;
+}
+/** {@link TimezoneOption} after defaults are filled in. */
+type ResolvedZone = Required<TimezoneOption>;
+/**
+ * Every user-visible string the picker renders on its own. All optional with
+ * English defaults, the same shape TimePicker uses — the package never
+ * resolves i18n, the app passes copy in.
+ */
+export interface TimezonePickerLabels {
+    /** Input placeholder while no zone is chosen. Default `"Search time zones"`. */
+    placeholder?: string;
+    /** Shown and announced politely when the query matches nothing. Default `"No matching time zone"`. */
+    empty?: string;
+    /** Accessible name of the results listbox. Default `"Time zones"`. */
+    list?: string;
+}
+/**
+ * The runtime's IANA zone table, each entry carrying its UTC offset at
+ * `referenceDate` (default: now).
+ *
+ * A zone's offset is a function of the date — Europe/Berlin is `+01:00` in
+ * January and `+02:00` in July — so this cannot be a constant. It is cached at
+ * hour granularity: deriving 418 offsets costs ~35 ms of `Intl.DateTimeFormat`
+ * construction, which must not run once per render per picker, and an hourly
+ * key means a DST transition corrects itself without anyone reloading the tab.
+ *
+ * Defensive by design, because `Intl.supportedValuesOf` is absent from thin
+ * ICU builds (and from some jsdom setups): if the zone table cannot be read at
+ * all it degrades to the single resolved local zone, and if that fails too it
+ * returns `[]`. Either way the escape hatch is the same — pass `timezones`.
+ */
+export declare function listTimezones(referenceDate?: Date): ResolvedZone[];
+export interface TimezonePickerProps {
+    /**
+     * Selected IANA id, controlled. `""` means unset. Pair with
+     * {@link TimezonePickerProps.onValueChange}; omit both for the uncontrolled
+     * form seeded by `defaultValue`.
+     */
+    value?: string;
+    /** Initial IANA id (uncontrolled). Default `""` — unset. */
+    defaultValue?: string;
+    /** Fired with the new IANA id when a zone is chosen. One argument, never Base UI's event-details pair. */
+    onValueChange?: (value: string) => void;
+    /**
+     * The zones to offer. Defaults to {@link listTimezones}, i.e. everything this
+     * runtime's ICU build knows about, labelled by id. Pass a list to shorten it
+     * to the zones your product supports, to localize the labels, or to pin the
+     * offsets so a story or a VRT baseline does not move at the next DST change.
+     */
+    timezones?: readonly TimezoneOption[];
+    /**
+     * The instant zone offsets are computed for, when they are derived rather
+     * than supplied. Defaults to now; pass a fixed date to make rendering
+     * deterministic.
+     */
+    referenceDate?: Date;
+    /**
+     * Called when the answer to "does the text in the input name a known zone?"
+     * flips, and once on mount so a form can gate its submit before any typing.
+     *
+     * An EMPTY input reports `true`. Emptiness is required-ness, which the form
+     * already models — it can see `value === ""` — and reporting it as invalid
+     * would make every untouched optional zone field shout on mount. `false`
+     * means the user typed something that is not a zone, which is the typo this
+     * callback exists to catch.
+     */
+    onValidityChange?: (valid: boolean) => void;
+    /**
+     * Maximum number of matches rendered at once. Default `100`: an unfiltered
+     * open would otherwise mount ~400 option rows, and nobody scrolls past the
+     * first screen — they type. `-1` renders every match.
+     */
+    limit?: number;
+    labels?: TimezonePickerLabels;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Submits the selected IANA id under this name when inside a form. */
+    name?: string;
+    /** Forwarded to the input so an external `<Label htmlFor>` can name it. */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /**
+     * Passed straight through. The picker never derives this from the validity
+     * check — see the file header for why mid-word "invalid" is the wrong call.
+     */
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    /** Classes for the input. */
+    className?: string;
+    /** Classes for the popup surface. */
+    contentClassName?: string;
+    /** Open the list on first render (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Controlled open state; pair with `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    ref?: React.Ref<HTMLInputElement>;
+}
+declare function TimezonePicker({ value: valueProp, defaultValue, onValueChange, timezones, referenceDate, onValidityChange, limit, labels, disabled, readOnly, required, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className, contentClassName, defaultOpen, open, onOpenChange, ref, }: TimezonePickerProps): React.JSX.Element;
+export { TimezonePicker };

package/dist/components/forms/timezone-picker.js

@@ -0,0 +1,158 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Globe as t } from "lucide-react";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Combobox as a } from "@base-ui/react/combobox";
+//#region src/components/forms/timezone-picker.tsx
+var o = {
+	placeholder: "Search time zones",
+	empty: "No matching time zone",
+	list: "Time zones"
+}, s = /GMT([+-]\d{2}:\d{2})/;
+function c(e, t) {
+	try {
+		let n = new Intl.DateTimeFormat("en-US", {
+			timeZone: e,
+			timeZoneName: "longOffset"
+		}).formatToParts(t).find((e) => e.type === "timeZoneName")?.value ?? "";
+		return n === "GMT" ? "+00:00" : s.exec(n)?.[1] ?? "";
+	} catch {
+		return "";
+	}
+}
+var l = null;
+function u(e = /* @__PURE__ */ new Date()) {
+	let t = e.toISOString().slice(0, 13);
+	if (l?.key === t) return l.zones;
+	let n = [];
+	try {
+		n = Intl.supportedValuesOf?.("timeZone") ?? [];
+	} catch {
+		n = [];
+	}
+	if (n.length === 0) try {
+		let e = new Intl.DateTimeFormat().resolvedOptions().timeZone;
+		n = e ? [e] : [];
+	} catch {
+		n = [];
+	}
+	let r = n.map((t) => ({
+		id: t,
+		label: d(t),
+		offset: c(t, e)
+	})).filter((e) => e.offset !== "");
+	return l = {
+		key: t,
+		zones: r
+	}, r;
+}
+function d(e) {
+	return e.replace(/_/g, " ");
+}
+function f(e, t) {
+	return e ? e.map((e) => ({
+		id: e.id,
+		label: e.label ?? d(e.id),
+		offset: e.offset ?? c(e.id, t)
+	})) : u(t);
+}
+function p(e) {
+	return `${e.id} ${d(e.id)} ${e.label} ${e.offset} utc${e.offset} gmt${e.offset}`.toLowerCase();
+}
+function m(e, t) {
+	let n = t.trim().toLowerCase().split(/\s+/).filter(Boolean);
+	if (n.length === 0) return !0;
+	let r = p(e);
+	return n.every((e) => r.includes(e));
+}
+function h({ value: s, defaultValue: c = "", onValueChange: l, timezones: u, referenceDate: d, onValidityChange: p, limit: h = 100, labels: g, disabled: _, readOnly: v, required: y, name: b, id: x, "aria-label": S, "aria-labelledby": C, "aria-describedby": w, "aria-invalid": T, className: E, contentClassName: D, defaultOpen: O, open: k, onOpenChange: A, ref: j }) {
+	let M = {
+		...o,
+		...g
+	}, N = n.useMemo(() => f(u, d ?? /* @__PURE__ */ new Date()), [u, d]), [P, F] = n.useState(c), I = s ?? P, L = n.useMemo(() => N.find((e) => e.id === I) ?? null, [N, I]), [R, z] = n.useState(() => L?.label ?? ""), [B, V] = n.useState(I);
+	B !== I && (V(I), z(L?.label ?? ""));
+	let H = n.useMemo(() => {
+		let e = R.trim().toLowerCase();
+		return e === "" || N.some((t) => t.id.toLowerCase() === e || t.label.toLowerCase() === e);
+	}, [R, N]), U = n.useRef(null);
+	return n.useEffect(() => {
+		U.current !== H && (U.current = H, p?.(H));
+	}, [H, p]), /* @__PURE__ */ i(a.Root, {
+		items: N,
+		value: L,
+		onValueChange: (e) => {
+			let t = e?.id ?? "";
+			s === void 0 && F(t), l?.(t);
+		},
+		inputValue: R,
+		onInputValueChange: (e) => z(e),
+		filter: m,
+		limit: h,
+		itemToStringLabel: (e) => e.label,
+		itemToStringValue: (e) => e.id,
+		isItemEqualToValue: (e, t) => e.id === t.id,
+		disabled: _,
+		readOnly: v,
+		required: y,
+		name: b,
+		defaultOpen: O,
+		open: k,
+		onOpenChange: (e) => A?.(e),
+		children: [/* @__PURE__ */ i("div", {
+			"data-slot": "timezone-picker",
+			className: "relative w-full",
+			children: [/* @__PURE__ */ r(t, {
+				"data-slot": "timezone-picker-icon",
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+			}), /* @__PURE__ */ r(a.Input, {
+				ref: j,
+				id: x,
+				"data-slot": "timezone-picker-input",
+				"data-unknown-zone": H ? void 0 : "",
+				placeholder: M.placeholder,
+				"aria-label": S,
+				"aria-labelledby": C,
+				"aria-describedby": w,
+				"aria-invalid": T,
+				className: e("flex h-9 w-full rounded-md border border-input bg-transparent py-1 pl-9 pr-3 text-sm shadow-sm", "transition-[color,background-color,border-color,box-shadow] duration-control", "placeholder:text-muted-foreground hover:border-ring/60", "focus-ring", "aria-invalid:border-destructive", "disabled:cursor-not-allowed disabled:opacity-50", E)
+			})]
+		}), /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ r(a.Positioner, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			className: "z-[var(--z-select)]",
+			children: /* @__PURE__ */ i(a.Popup, {
+				"data-slot": "timezone-picker-popup",
+				className: e("max-h-[min(18rem,var(--available-height))] w-[var(--anchor-width)] min-w-[12rem] overflow-y-auto", "rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden", "origin-[var(--transform-origin)] data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[open]:animate-in data-[open]:fade-in-0", D),
+				children: [/* @__PURE__ */ r(a.Empty, {
+					"data-slot": "timezone-picker-empty",
+					className: "px-2 py-1.5 text-sm text-muted-foreground empty:hidden",
+					children: M.empty
+				}), /* @__PURE__ */ r(a.List, {
+					"data-slot": "timezone-picker-list",
+					"aria-label": M.list,
+					children: (t) => /* @__PURE__ */ i(a.Item, {
+						value: t,
+						"data-slot": "timezone-picker-item",
+						className: e("flex w-full cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none", "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground", "data-[selected]:font-medium"),
+						children: [/* @__PURE__ */ r("span", {
+							"data-slot": "timezone-picker-item-label",
+							className: "truncate",
+							children: t.label
+						}), /* @__PURE__ */ r("span", {
+							"data-slot": "timezone-picker-item-offset",
+							className: "ml-auto shrink-0 text-xs tabular-nums text-muted-foreground",
+							children: t.offset
+						})]
+					}, t.id)
+				})]
+			})
+		}) })]
+	});
+}
+//#endregion
+export { h as TimezonePicker, u as listTimezones };
+
+//# sourceMappingURL=timezone-picker.js.map

package/dist/components/forms/timezone-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone-picker.js","names":[],"sources":["../../../src/components/forms/timezone-picker.tsx"],"mappings":"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"}