@rinzai/zen 0.10.3 → 0.13.0

package/dist/filter-bar/index.js

@@ -1,45 +1,46 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { reducedMotion as t } from "../utils/motion.js";
-import n from "../icons/micro/x-mark.js";
-import { Children as r, useEffect as i, useLayoutEffect as a, useRef as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useMessages as t } from "../locale-provider/index.js";
+import { reducedMotion as n } from "../utils/motion.js";
+import r from "../icons/micro/x-mark.js";
+import { Children as i, useEffect as a, useLayoutEffect as o, useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region packages/filter-bar/index.tsx
-var l = typeof window > "u" ? i : a, u = {
+var u = typeof window > "u" ? a : o, d = {
 	duration: 260,
 	easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
-}, d = {
+}, f = {
 	duration: 120,
 	easing: "ease-in"
 };
-function f({ onClear: t, clearLabel: n = "Clear all", "aria-label": i = "Active filters", className: a, children: l, ref: u, ...d }) {
-	let f = r.toArray(l).length, m = o(null);
-	return p(m), f === 0 ? null : /* @__PURE__ */ c("div", {
+function p({ onClear: n, clearLabel: r, "aria-label": a, className: o, children: u, ref: d, ...f }) {
+	let p = t(), h = r ?? p.clearAll, g = a ?? p.activeFilters, _ = i.toArray(u).length, v = s(null);
+	return m(v), _ === 0 ? null : /* @__PURE__ */ l("div", {
 		ref: (e) => {
-			if (m.current = e, typeof u == "function") return u(e);
-			u && (u.current = e);
+			if (v.current = e, typeof d == "function") return d(e);
+			d && (d.current = e);
 		},
 		role: "group",
-		"aria-label": i,
-		className: e("zen__filter-bar relative flex flex-wrap items-center gap-1.5", a),
-		...d,
-		children: [l, f > 1 && t && /* @__PURE__ */ s("button", {
+		"aria-label": g,
+		className: e("zen__filter-bar relative flex flex-wrap items-center gap-1.5", o),
+		...f,
+		children: [u, _ > 1 && n && /* @__PURE__ */ c("button", {
 			type: "button",
-			onClick: t,
-			className: "zen__filter-clear text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 touch-target ml-1 cursor-pointer rounded-md px-1.5 py-1 text-xs outline-hidden focus-visible:ring-2",
-			children: n
+			onClick: n,
+			className: "zen__filter-clear text-muted-foreground hover:text-foreground touch-target focus-ring ms-1 cursor-pointer rounded-md px-1.5 py-1 text-xs outline-hidden",
+			children: h
 		})]
 	});
 }
-function p(e) {
-	let n = o(/* @__PURE__ */ new Map());
-	l(() => {
-		let r = e.current, i = n.current, a = /* @__PURE__ */ new Map();
+function m(e) {
+	let t = s(/* @__PURE__ */ new Map());
+	u(() => {
+		let r = e.current, i = t.current, a = /* @__PURE__ */ new Map();
 		for (let e of r ? [...r.children] : []) e instanceof HTMLElement && !e.dataset.zenLeaving && a.set(e, {
 			left: e.offsetLeft,
 			top: e.offsetTop
 		});
-		if (n.current = a, !r || t()) return;
+		if (t.current = a, !r || n()) return;
 		let o = !1;
 		for (let [e, t] of i) {
 			if (e.isConnected || !(e instanceof HTMLElement)) continue;
@@ -53,12 +54,12 @@ function p(e) {
 			let n = e.animate?.({
 				opacity: [1, 0],
 				scale: [1, .9]
-			}, d);
+			}, f);
 			n ? n.onfinish = n.oncancel = () => e.remove() : e.remove();
 		}
 		let s = {
-			...u,
-			delay: o ? d.duration : 0,
+			...d,
+			delay: o ? f.duration : 0,
 			fill: "backwards"
 		};
 		for (let [e, t] of a) {
@@ -69,22 +70,23 @@ function p(e) {
 			}, {
 				...s,
 				duration: 200,
-				delay: s.delay + u.duration * .6
+				delay: s.delay + d.duration * .6
 			}));
 		}
 	});
 }
-function m({ onRemove: t, removeLabel: r = "Remove filter", className: i, children: a }) {
-	return /* @__PURE__ */ c("span", {
-		className: e("zen__filter-chip bg-primary/12 text-foreground inline-flex items-center gap-1 rounded-full py-1 pr-1 pl-3 text-xs shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)]", i),
-		children: [a, /* @__PURE__ */ s("button", {
+function h({ onRemove: n, removeLabel: i, className: a, children: o }) {
+	let s = t(), u = i ?? s.removeFilter;
+	return /* @__PURE__ */ l("span", {
+		className: e("zen__filter-chip bg-primary/12 text-foreground inline-flex items-center gap-1 rounded-full py-1 ps-3 pe-1 text-xs shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)]", a),
+		children: [o, /* @__PURE__ */ c("button", {
 			type: "button",
-			"aria-label": r,
-			onClick: t,
-			className: "text-muted-foreground hover:text-foreground hover:bg-tint/10 focus-visible:ring-ring/50 touch-target grid size-5 cursor-pointer place-items-center rounded-full outline-hidden focus-visible:ring-2",
-			children: /* @__PURE__ */ s(n, { className: "size-3" })
+			"aria-label": u,
+			onClick: n,
+			className: "text-muted-foreground hover:text-foreground hover:bg-tint/10 touch-target focus-ring grid size-5 cursor-pointer place-items-center rounded-full outline-hidden",
+			children: /* @__PURE__ */ c(r, { className: "size-3" })
 		})]
 	});
 }
 //#endregion
-export { m as FilterChip, f as default };
+export { h as FilterChip, p as default };

package/dist/header/index.d.ts

@@ -8,7 +8,7 @@ import { ComponentProps } from 'react';
  * focused, that moves focus to the page's <main> past the bar's links (WCAG
  * 2.4.1). Change its text with `skipLabel`, or pass null to leave it out.
  */
-export default function Header({ skipLabel, className, children, ...rest }: HeaderProps): import('react').JSX.Element;
+export default function Header({ skipLabel: skipLabelProp, className, children, ...rest }: HeaderProps): import('react').JSX.Element;
 export interface HeaderProps extends ComponentProps<'header'> {
     /** The skip link's text; null for no skip link (e.g. when the page has its own). */
     skipLabel?: string | null;

package/dist/header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/header/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,SAA6B,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAoC1G;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACzD,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/header/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAsCrG;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACzD,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B"}

package/dist/header/index.js

@@ -1,25 +1,27 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
 import { useGraphicsMode as t } from "../utils/graphics.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useMessages as n } from "../locale-provider/index.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region packages/header/index.tsx
-function i({ skipLabel: i = "Skip to content", className: a, children: o, ...s }) {
-	return t(), /* @__PURE__ */ r("header", {
-		className: e("zen__header glow-edge border-tint/5 bg-background/60 sticky top-0 z-40 border-b pt-[env(safe-area-inset-top)] backdrop-blur-xl", "pointer-coarse:bg-background/95 pointer-coarse:backdrop-blur-none", a),
-		...s,
-		children: [i !== null && /* @__PURE__ */ n("a", {
+function a({ skipLabel: a, className: o, children: s, ...c }) {
+	let l = n(), u = a === void 0 ? l.skipToContent : a;
+	return t(), /* @__PURE__ */ i("header", {
+		className: e("zen__header glow-edge border-tint/5 bg-background/60 sticky top-0 z-40 border-b pt-[env(safe-area-inset-top)] backdrop-blur-xl", "pointer-coarse:bg-background/95 pointer-coarse:backdrop-blur-none", o),
+		...c,
+		children: [u !== null && /* @__PURE__ */ r("a", {
 			href: "#main",
 			onClick: (e) => {
 				let t = document.querySelector("main");
 				t && (e.preventDefault(), t.hasAttribute("tabindex") || (t.tabIndex = -1, t.dataset.zenSkipTarget = ""), t.focus());
 			},
-			className: "bg-primary text-primary-foreground focus-visible:ring-glow/50 sr-only rounded-lg px-3 py-2 text-sm font-medium outline-hidden focus:not-sr-only focus:absolute focus:top-2 focus:left-4 focus:z-50 focus-visible:ring-2",
-			children: i
-		}), /* @__PURE__ */ n("div", {
+			className: "bg-primary text-primary-foreground focus-ring sr-only rounded-lg px-3 py-2 text-sm font-medium outline-hidden focus:not-sr-only focus:absolute focus:start-4 focus:top-2 focus:z-50",
+			children: u
+		}), /* @__PURE__ */ r("div", {
 			className: "flex items-center justify-between gap-4 px-4 py-2.5 md:gap-6 md:px-6 md:py-3",
-			children: o
+			children: s
 		})]
 	});
 }
 //#endregion
-export { i as default };
+export { a as default };

package/dist/hover-card/index.d.ts

@@ -0,0 +1,32 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A preview of what a link points to, e.g. a person or an account: a glass
+ * card shown after the pointer rests on the link (`openDelay`), or while it
+ * has keyboard focus, and kept while the pointer or focus is on the card.
+ * Escape hides it. What it shows is extra, out of the tab order: everything in
+ * it should be reachable by following the link too. Put a HoverCardTrigger and
+ * a HoverCardContent inside (it can go in a paragraph).
+ */
+export default function HoverCard({ openDelay, closeDelay, children }: HoverCardProps): import('react').JSX.Element;
+/** What the card previews: a link by default (give it `href`). With `asChild`, your own element (e.g. your router's link). */
+export declare function HoverCardTrigger({ asChild, style, className, onPointerEnter, onPointerLeave, onFocus, onBlur, onKeyDown, children, ...rest }: HoverCardTriggerProps): import('react').JSX.Element;
+/** The card: glass, below the trigger (above it if there's no room), lined up with its start by default. */
+export declare function HoverCardContent(props: HoverCardContentProps): import('react').ReactPortal | null;
+export interface HoverCardProps {
+    /** How long the pointer rests on the trigger before the card shows, in ms. Default 500. */
+    openDelay?: number;
+    /** How long it stays after the pointer leaves, in ms, so the pointer can reach it. Default 200. */
+    closeDelay?: number;
+    children?: ReactNode;
+}
+export interface HoverCardTriggerProps extends ComponentProps<'a'> {
+    /** Put the trigger's props on your own element instead of rendering a link. */
+    asChild?: boolean;
+}
+export interface HoverCardContentProps extends ComponentProps<'div'> {
+    /** Lined up with the trigger's start (default) or end edge, or centred on it. */
+    align?: 'start' | 'end' | 'center';
+    /** Gap from the trigger, in px. */
+    offset?: number;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/hover-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/hover-card/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAsB,MAAM,OAAO,CAAC;AAWrF;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,SAAe,EAAE,UAAgB,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAIhG;AAED,8HAA8H;AAC9H,wBAAgB,gBAAgB,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,SAAS,EACT,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,qBAAqB,+BAsBvB;AAED,4GAA4G;AAC5G,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,sCAK5D;AAiCD,MAAM,WAAW,cAAc;IAC3B,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mGAAmG;IACnG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,GAAG,CAAC;IAC9D,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAChE,iFAAiF;IACjF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/hover-card/index.js

@@ -0,0 +1,84 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useGraphicsMode as t } from "../utils/graphics.js";
+import { Slot as n } from "../utils/slot.js";
+import { anchorFor as r, anchoredStyle as i, useAnchorFallback as a } from "../utils/useAnchoredPopup.js";
+import { POPUP as o } from "../utils/styles.js";
+import { useHydrated as s } from "../utils/useHydrated.js";
+import { useHoverPopup as c } from "../utils/useHoverPopup.js";
+import { createContext as l, useContext as u, useRef as d } from "react";
+import { jsx as f } from "react/jsx-runtime";
+import { createPortal as p } from "react-dom";
+//#region packages/hover-card/index.tsx
+var m = l(null);
+function h(e) {
+	let t = u(m);
+	if (!t) throw Error(`<${e}> must be inside <HoverCard>`);
+	return t;
+}
+function g({ openDelay: e = 500, closeDelay: n = 200, children: r }) {
+	t();
+	let i = c("zen__hover-card", {
+		openDelay: e,
+		closeDelay: n
+	});
+	return /* @__PURE__ */ f(m.Provider, {
+		value: i,
+		children: r
+	});
+}
+function _({ asChild: t, style: i, className: a, onPointerEnter: o, onPointerLeave: s, onFocus: c, onBlur: l, onKeyDown: u, children: d, ...p }) {
+	let m = h("HoverCardTrigger"), g = {
+		...p,
+		...r(m.id),
+		style: {
+			...r(m.id).style,
+			...i
+		},
+		...m.triggerProps({
+			onPointerEnter: o,
+			onPointerLeave: s,
+			onFocus: c,
+			onBlur: l,
+			onKeyDown: u
+		})
+	};
+	return t ? /* @__PURE__ */ f(n, {
+		...g,
+		className: a,
+		children: d
+	}) : /* @__PURE__ */ f("a", {
+		...g,
+		className: e("text-primary focus-ring rounded-sm underline-offset-4 hover:underline", a),
+		children: d
+	});
+}
+function v(e) {
+	return s() ? p(/* @__PURE__ */ f(y, { ...e }), document.body) : null;
+}
+function y({ align: t = "start", offset: n = 8, className: r, style: s, onPointerEnter: c, onPointerLeave: l, onBlur: u, onKeyDown: p, children: m, ...g }) {
+	let _ = h("HoverCardContent"), v = d(null);
+	return a(v), /* @__PURE__ */ f("div", {
+		...g,
+		ref: v,
+		id: _.id,
+		popover: "manual",
+		..._.contentProps({
+			onPointerEnter: c,
+			onPointerLeave: l,
+			onBlur: u,
+			onKeyDown: p
+		}),
+		style: {
+			...i(_.id, {
+				align: t,
+				offset: n
+			}),
+			...s
+		},
+		className: e("zen__popover fixed z-50 w-72 overflow-visible p-4", o, r),
+		children: m
+	});
+}
+//#endregion
+export { v as HoverCardContent, _ as HoverCardTrigger, g as default };

package/dist/icon-picker/index.d.ts

@@ -1,3 +1,4 @@
+import { PopoverTriggerProps } from '../popover';
 import { ReactNode } from 'react';
 /** The chart palette, so a category's colour matches it in charts. */
 export declare const ICON_COLORS: IconColor[];
@@ -7,15 +8,17 @@ export declare const ICON_COLORS: IconColor[];
  * yours (emoji work); colours default to the chart palette. Both are radio
  * groups, so arrow keys move through them.
  */
-export default function IconPicker({ icons, colors, value, onChange, label, className, }: IconPickerProps): import('react').JSX.Element;
+export default function IconPicker({ icons, colors, value: valueProp, defaultValue, onValueChange, label, name: nameProp, className, ...rest }: IconPickerProps): import('react').JSX.Element;
 export interface IconColor {
     /** What's stored, e.g. "blue". */
     value: string;
-    label: string;
+    /** Defaults to the LocaleProvider's name for the chart colours ("Blue"…), else the value. */
+    label?: string;
     /** Any CSS colour. */
     color: string;
 }
-export interface IconPickerProps {
+/** Other props (aria-*, data-*, an id) go on the button. */
+export interface IconPickerProps extends Omit<PopoverTriggerProps, 'value' | 'defaultValue' | 'children'> {
     icons: {
         value: string;
         label: string;
@@ -23,14 +26,22 @@ export interface IconPickerProps {
     }[];
     /** Default: ICON_COLORS, the chart palette. */
     colors?: IconColor[];
-    value: {
+    /** The choice, when you keep it. */
+    value?: {
+        icon: string;
+        color?: string;
+    };
+    /** The first choice, when the picker keeps its own. */
+    defaultValue?: {
         icon: string;
         color?: string;
     };
-    onChange: (value: {
+    onValueChange?: (value: {
         icon: string;
         color?: string;
     }) => void;
+    /** Form field name: the icon is submitted under it, the colour under `${name}-color`. */
+    name?: string;
     /** What it's the icon of, e.g. "Category icon"; the button also says the current choice. */
     label: string;
     className?: string;

package/dist/icon-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/icon-picker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAAS,MAAM,OAAO,CAAC;AAExD,sEAAsE;AACtE,eAAO,MAAM,WAAW,EAAE,SAAS,EASlC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,MAAoB,EACpB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACZ,EAAE,eAAe,+BAgEjB;AAED,MAAM,WAAW,SAAS;IACtB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IAC3D,+CAA+C;IAC/C,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D,4FAA4F;IAC5F,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/icon-picker/index.tsx"],"names":[],"mappings":"AAAA,OAAgB,EAAkC,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAIjG,OAAO,EAAiB,SAAS,EAAS,MAAM,OAAO,CAAC;AAExD,sEAAsE;AACtE,eAAO,MAAM,WAAW,EAAE,SAAS,EASlC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,MAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,YAA2B,EAC3B,aAAa,EACb,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,SAAS,EACT,GAAG,IAAI,EACV,EAAE,eAAe,+BAqEjB;AAED,MAAM,WAAW,SAAS;IACtB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,4DAA4D;AAC5D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IACrG,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IAC3D,+CAA+C;IAC/C,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,uDAAuD;IACvD,YAAY,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClE,yFAAyF;IACzF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/icon-picker/index.js

@@ -1,107 +1,102 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import t, { PopoverContent as n, PopoverTrigger as r } from "../popover/index.js";
-import { useId as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useControllable as t } from "../utils/useControllable.js";
+import { useMessages as n } from "../locale-provider/index.js";
+import r, { PopoverContent as i, PopoverTrigger as a } from "../popover/index.js";
+import { useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region packages/icon-picker/index.tsx
-var s = [
+var l = [
 	{
 		value: "blue",
-		label: "Blue",
 		color: "var(--chart-1)"
 	},
 	{
 		value: "orange",
-		label: "Orange",
 		color: "var(--chart-2)"
 	},
 	{
 		value: "teal",
-		label: "Teal",
 		color: "var(--chart-3)"
 	},
 	{
 		value: "amber",
-		label: "Amber",
 		color: "var(--chart-4)"
 	},
 	{
 		value: "pink",
-		label: "Pink",
 		color: "var(--chart-5)"
 	},
 	{
 		value: "green",
-		label: "Green",
 		color: "var(--chart-6)"
 	},
 	{
 		value: "violet",
-		label: "Violet",
 		color: "var(--chart-7)"
 	},
 	{
 		value: "red",
-		label: "Red",
 		color: "var(--chart-8)"
 	}
 ];
-function c({ icons: c, colors: l = s, value: u, onChange: d, label: f, className: p }) {
-	let m = i(), h = c.find((e) => e.value === u.icon), g = l.find((e) => e.value === u.color), _ = (e) => ({ "--icon-color": e ?? "var(--color-muted-foreground)" });
-	return /* @__PURE__ */ o(t, { children: [/* @__PURE__ */ a(r, {
-		"aria-label": `${f}: ${[h?.label, g?.label].filter(Boolean).join(", ") || "none"}`,
-		style: _(g?.color),
-		className: e("zen__icon-picker focus-visible:ring-ring/50 grid size-10 shrink-0 place-items-center rounded-xl bg-[color-mix(in_oklch,var(--icon-color)_18%,transparent)] text-lg text-(--icon-color) outline-hidden transition-colors focus-visible:ring-2", p),
-		children: h?.icon
-	}), /* @__PURE__ */ o(n, {
-		"aria-label": f,
+function u({ icons: u, colors: d = l, value: f, defaultValue: p = { icon: "" }, onValueChange: m, label: h, name: g, className: _, ...v }) {
+	let [y, b] = t(f, p, m), x = n(), S = (e) => e.label ?? x.colourNames[e.value] ?? e.value, C = o(), w = g ?? C, T = u.find((e) => e.value === y.icon), E = d.find((e) => e.value === y.color), D = (e) => ({ "--icon-color": e ?? "var(--color-muted-foreground)" });
+	return /* @__PURE__ */ c(r, { children: [/* @__PURE__ */ s(a, {
+		...v,
+		"aria-label": `${h}: ${[T?.label, E && S(E)].filter(Boolean).join(", ") || x.none}`,
+		style: D(E?.color),
+		className: e("zen__icon-picker grid size-10 shrink-0 place-items-center rounded-xl bg-[color-mix(in_oklch,var(--icon-color)_18%,transparent)] text-lg text-(--icon-color) outline-hidden transition-colors focus-ring", _),
+		children: T?.icon
+	}), /* @__PURE__ */ c(i, {
+		"aria-label": h,
 		className: "flex w-72 flex-col gap-3 p-3",
-		children: [l.length > 0 && /* @__PURE__ */ o("fieldset", {
+		children: [d.length > 0 && /* @__PURE__ */ c("fieldset", {
 			className: "flex flex-wrap gap-1.5",
-			children: [/* @__PURE__ */ a("legend", {
+			children: [/* @__PURE__ */ s("legend", {
 				className: "text-muted-foreground mb-1.5 text-xs",
-				children: "Colour"
-			}), l.map((e) => /* @__PURE__ */ o("label", {
-				title: e.label,
+				children: x.colour
+			}), d.map((e) => /* @__PURE__ */ c("label", {
+				title: S(e),
 				className: "relative cursor-pointer",
-				children: [/* @__PURE__ */ a("input", {
+				children: [/* @__PURE__ */ s("input", {
 					type: "radio",
-					name: `${m}-color`,
-					"aria-label": e.label,
-					checked: u.color === e.value,
-					onChange: () => d({
-						...u,
+					name: `${w}-color`,
+					"aria-label": S(e),
+					checked: y.color === e.value,
+					onChange: () => b({
+						...y,
 						color: e.value
 					}),
 					className: "peer sr-only"
-				}), /* @__PURE__ */ a("span", {
+				}), /* @__PURE__ */ s("span", {
 					"aria-hidden": !0,
 					style: { background: e.color },
-					className: "ring-offset-background peer-focus-visible:ring-ring/60 peer-checked:ring-foreground/70 block size-6 rounded-full ring-offset-2 transition-shadow peer-checked:ring-2 peer-focus-visible:ring-2"
+					className: "ring-offset-background peer- peer-checked:ring-foreground/70 peer-focus-ring block size-6 rounded-full ring-offset-2 transition-shadow peer-checked:ring-2"
 				})]
 			}, e.value))]
-		}), /* @__PURE__ */ o("fieldset", {
+		}), /* @__PURE__ */ c("fieldset", {
 			className: "grid grid-cols-6 gap-1",
-			style: _(g?.color),
-			children: [/* @__PURE__ */ a("legend", {
+			style: D(E?.color),
+			children: [/* @__PURE__ */ s("legend", {
 				className: "text-muted-foreground mb-1.5 text-xs",
-				children: "Icon"
-			}), c.map((e) => /* @__PURE__ */ o("label", {
+				children: x.icon
+			}), u.map((e) => /* @__PURE__ */ c("label", {
 				title: e.label,
 				className: "cursor-pointer",
-				children: [/* @__PURE__ */ a("input", {
+				children: [/* @__PURE__ */ s("input", {
 					type: "radio",
-					name: `${m}-icon`,
+					name: w,
 					"aria-label": e.label,
-					checked: u.icon === e.value,
-					onChange: () => d({
-						...u,
+					checked: y.icon === e.value,
+					onChange: () => b({
+						...y,
 						icon: e.value
 					}),
 					className: "peer sr-only"
-				}), /* @__PURE__ */ a("span", {
+				}), /* @__PURE__ */ s("span", {
 					"aria-hidden": !0,
-					className: "hover:bg-tint/[0.07] peer-focus-visible:ring-ring/50 grid size-10 place-items-center rounded-lg text-lg transition-colors peer-checked:bg-[color-mix(in_oklch,var(--icon-color)_22%,transparent)] peer-checked:text-(--icon-color) peer-focus-visible:ring-2",
+					className: "hover:bg-tint/[0.07] peer- peer-focus-ring grid size-10 place-items-center rounded-lg text-lg transition-colors peer-checked:bg-[color-mix(in_oklch,var(--icon-color)_22%,transparent)] peer-checked:text-(--icon-color)",
 					children: e.icon
 				})]
 			}, e.value))]
@@ -109,4 +104,4 @@ function c({ icons: c, colors: l = s, value: u, onChange: d, label: f, className
 	})] });
 }
 //#endregion
-export { s as ICON_COLORS, c as default };
+export { l as ICON_COLORS, u as default };

package/dist/icons/micro/plus.d.ts

@@ -0,0 +1,3 @@
+import { default as IconProps } from '../icon.types';
+export default function PlusMicro(props: IconProps): import('react').JSX.Element;
+//# sourceMappingURL=plus.d.ts.map

package/dist/icons/micro/plus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plus.d.ts","sourceRoot":"","sources":["../../../packages/icons/micro/plus.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,SAAS,+BAcjD"}

package/dist/icons/micro/plus.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+//#region packages/icons/micro/plus.tsx
+function t(t) {
+	return /* @__PURE__ */ e("svg", {
+		className: "size-4",
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 16 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		"data-slot": "icon",
+		...t,
+		children: /* @__PURE__ */ e("path", { d: "M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" })
+	});
+}
+//#endregion
+export { t as default };