haze-ui 1.24.1 → 1.26.0

package/dist/components/Radio/RadioGroupCore.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { RadioProvider as t } from "./RadioContext.js";
 /* empty css                         */

package/dist/components/Radio/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./Radio.js";
 import t from "./RadioGroupCore.js";
 import n from "./RadioGroup.js";

package/dist/components/Rating/Rating.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./RatingCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";

package/dist/components/Rating/RatingCore.js

@@ -1,48 +1,51 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
 /* empty css                     */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useState as r } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useState as a } from "react";
 //#region src/lib/components/Rating/RatingCore.tsx
-var i = "haze-RatingCore__container", a = "haze-RatingCore__star", o = "haze-RatingCore__starActive";
-function s({ value: s, onChange: c, count: l = 5, allowHalf: u = !1, className: d }) {
-	let [f, p] = r(null), m = (e) => {
-		c(e + 1);
-	}, h = f ?? s;
-	return /* @__PURE__ */ t("div", {
+var o = "haze-RatingCore__container", s = "haze-RatingCore__star", c = "haze-RatingCore__starActive";
+function l({ value: l, onChange: u, count: d = 5, allowHalf: f = !1, className: p }) {
+	let [m, h] = a(null), g = n("rating"), _ = (e) => {
+		u(e + 1);
+	}, v = m ?? l;
+	return /* @__PURE__ */ r("div", {
 		role: "radiogroup",
-		className: e([i, d]),
-		children: Array.from({ length: l }, (r, i) => {
-			let c = h >= i + 1, l = u && h >= i + .5 && h < i + 1;
-			return /* @__PURE__ */ t("span", {
+		className: e([o, p]),
+		children: Array.from({ length: d }, (n, a) => {
+			let o = v >= a + 1, u = f && v >= a + .5 && v < a + 1;
+			return /* @__PURE__ */ r("span", {
 				role: "radio",
-				"aria-checked": s >= i + 1 ? "true" : "false",
-				"aria-label": `${i + 1} star${i > 0 ? "s" : ""}`,
-				onClick: () => m(i),
-				onMouseEnter: () => p(i + 1),
-				onMouseLeave: () => p(null),
-				className: e([a, (c || l) && o]),
-				children: /* @__PURE__ */ n("svg", {
+				"aria-checked": l >= a + 1 ? "true" : "false",
+				"aria-label": t(a > 0 ? g.stars : g.star, { count: a + 1 }),
+				onClick: () => _(a),
+				onMouseEnter: () => h(a + 1),
+				onMouseLeave: () => h(null),
+				className: e([s, (o || u) && c]),
+				children: /* @__PURE__ */ i("svg", {
 					width: "18",
 					height: "18",
 					viewBox: "0 0 24 24",
-					fill: c ? "currentColor" : l ? "url(#half)" : "none",
+					fill: o ? "currentColor" : u ? "url(#half)" : "none",
 					stroke: "currentColor",
 					strokeWidth: "2",
-					children: [l && /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", {
+					children: [u && /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ i("linearGradient", {
 						id: "half",
-						children: [/* @__PURE__ */ t("stop", {
+						children: [/* @__PURE__ */ r("stop", {
 							offset: "50%",
 							stopColor: "currentColor"
-						}), /* @__PURE__ */ t("stop", {
+						}), /* @__PURE__ */ r("stop", {
 							offset: "50%",
 							stopColor: "transparent"
 						})]
-					}) }), /* @__PURE__ */ t("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })]
+					}) }), /* @__PURE__ */ r("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })]
 				})
-			}, i);
+			}, a);
 		})
 	});
 }
 //#endregion
-export { s as default };
+export { l as default };

package/dist/components/Rating/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./RatingCore.js";
 import t from "./Rating.js";
 export { t as Rating, e as RatingCore };

package/dist/components/Resizable/Resizable.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Resizable/index.js

@@ -1,2 +1,3 @@
+"use client";
 import { ResizableGroup as e, ResizableHandle as t, ResizablePanel as n } from "./Resizable.js";
 export { e as ResizableGroup, t as ResizableHandle, n as ResizablePanel };

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/ScrollArea/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./ScrollArea.js";
 export { e as ScrollArea };

package/dist/components/Segmented/Segmented.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./SegmentedCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";

package/dist/components/Segmented/SegmentedCore.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Segmented/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./SegmentedCore.js";
 import t from "./Segmented.js";
 export { t as Segmented, e as SegmentedCore };

package/dist/components/Select/Option.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as e } from "react/jsx-runtime";
 //#region src/lib/components/Select/Option.tsx
 function t({ value: t, children: n, ...r }) {

package/dist/components/Select/Select.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./SelectCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";

package/dist/components/Select/SelectCore.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Select/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./SelectCore.js";
 import t from "./Select.js";
 import n from "./Option.js";

package/dist/components/Sidebar/Sidebar.js

@@ -0,0 +1,113 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import t from "../Tooltip/Tooltip.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+/* empty css                  */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { createContext as a, forwardRef as o, useContext as s, useId as c } from "react";
+import { useControl as l } from "react-use-control";
+//#region src/lib/components/Sidebar/Sidebar.tsx
+var u = a(void 0);
+function d() {
+	let e = s(u);
+	if (!e) throw Error("Sidebar compound components must be used within <Sidebar>");
+	return e;
+}
+var f = "haze-Sidebar__sidebar", p = "haze-Sidebar__nav";
+function m({ collapsed: t, defaultCollapsed: n = !1, className: i, children: a, ...o }) {
+	let [s, d] = l(t, n), m = c();
+	return /* @__PURE__ */ r(u.Provider, {
+		value: {
+			collapsed: s,
+			setCollapsed: d,
+			navId: m
+		},
+		children: r("aside", {
+			"data-state": s ? "collapsed" : "expanded",
+			...o,
+			className: e([f, i]),
+			children: /* @__PURE__ */ r("nav", {
+				id: m,
+				className: e(p),
+				children: a
+			})
+		})
+	});
+}
+var h = "haze-Sidebar__group", g = "haze-Sidebar__groupTitle";
+function _({ title: t, className: n, children: a, ...o }) {
+	let { collapsed: s } = d();
+	return /* @__PURE__ */ i("div", {
+		...o,
+		className: e([h, n]),
+		children: [t && !s && /* @__PURE__ */ r("div", {
+			className: e(g),
+			children: t
+		}), a]
+	});
+}
+var v = "haze-Sidebar__item", y = "haze-Sidebar__itemActive", b = "haze-Sidebar__itemIcon", x = "haze-Sidebar__itemLabel", S = o(function({ icon: n, active: a, href: o = "#", onClick: s, className: c, children: l, "aria-current": u, ...f }, p) {
+	let { collapsed: m } = d(), h = a ?? u === "page", g = /* @__PURE__ */ i("a", {
+		ref: p,
+		href: o,
+		"aria-current": h ? "page" : u,
+		onClick: (e) => {
+			o === "#" && e.preventDefault(), s?.(e);
+		},
+		...f,
+		className: e([
+			v,
+			h && y,
+			c
+		]),
+		children: [n && /* @__PURE__ */ r("span", {
+			"aria-hidden": "true",
+			className: e(b),
+			children: n
+		}), /* @__PURE__ */ r("span", {
+			className: e(x),
+			children: l
+		})]
+	});
+	return m ? /* @__PURE__ */ r(t, {
+		content: l,
+		position: "right",
+		children: g
+	}) : g;
+}), C = "haze-Sidebar__footer";
+function w({ className: t, children: n, ...i }) {
+	return /* @__PURE__ */ r("div", {
+		...i,
+		className: e([C, t]),
+		children: n
+	});
+}
+var T = "haze-Sidebar__toggle", E = "haze-Sidebar__toggleIcon", D = () => /* @__PURE__ */ r("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	className: e(E),
+	children: r("path", { d: "M15 18l-6-6 6-6" })
+});
+function O({ onClick: t, className: i, ...a }) {
+	let { collapsed: o, setCollapsed: s, navId: c } = d(), l = n("sidebar");
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		"aria-label": o ? l.expand : l.collapse,
+		"aria-expanded": !o,
+		"aria-controls": c,
+		onClick: (e) => {
+			s((e) => !e), t?.(e);
+		},
+		...a,
+		className: e([T, i]),
+		children: r(D, {})
+	});
+}
+//#endregion
+export { w as SidebarFooter, _ as SidebarGroup, S as SidebarItem, O as SidebarToggle, m as default };

package/dist/components/Sidebar/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e, { SidebarFooter as t, SidebarGroup as n, SidebarItem as r, SidebarToggle as i } from "./Sidebar.js";
+export { e as Sidebar, t as SidebarFooter, n as SidebarGroup, r as SidebarItem, i as SidebarToggle };

package/dist/components/Skeleton/Skeleton.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Skeleton/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./Skeleton.js";
 export { e as Skeleton };

package/dist/components/Slider/Slider.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./SliderCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";

package/dist/components/Slider/SliderCore.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Slider/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./SliderCore.js";
 import t from "./Slider.js";
 export { t as Slider, e as SliderCore };

package/dist/components/Spinner/Spinner.js

@@ -1,33 +1,36 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                  */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/Spinner/Spinner.tsx
-var r = "haze-Spinner__base", i = {
+var i = "haze-Spinner__base", a = {
 	sm: "haze-Spinner__sm",
 	md: "haze-Spinner__md",
 	lg: "haze-Spinner__lg"
 };
-function a({ size: a = "md", className: o }) {
-	return /* @__PURE__ */ t("span", {
+function o({ size: o = "md", className: s }) {
+	let c = t("spinner");
+	return /* @__PURE__ */ n("span", {
 		role: "status",
-		"aria-label": "Loading",
+		"aria-label": c.loading,
 		className: e([
-			r,
-			i[a],
-			o
+			i,
+			a[o],
+			s
 		]),
-		children: n("svg", {
+		children: r("svg", {
 			viewBox: "0 0 24 24",
 			fill: "none",
 			xmlns: "http://www.w3.org/2000/svg",
-			children: [/* @__PURE__ */ t("circle", {
+			children: [/* @__PURE__ */ n("circle", {
 				cx: "12",
 				cy: "12",
 				r: "10",
 				stroke: "var(--haze-color-border)",
 				strokeWidth: "3"
-			}), /* @__PURE__ */ t("path", {
+			}), /* @__PURE__ */ n("path", {
 				d: "M12 2a10 10 0 0 1 10 10",
 				stroke: "var(--haze-color-primary)",
 				strokeWidth: "3",
@@ -37,4 +40,4 @@ function a({ size: a = "md", className: o }) {
 	});
 }
 //#endregion
-export { a as default };
+export { o as default };

package/dist/components/Spinner/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./Spinner.js";
 export { e as Spinner };

package/dist/components/Stat/Stat.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Stat/index.js

@@ -1,2 +1,3 @@
+"use client";
 import { Stat as e, StatGroup as t } from "./Stat.js";
 export { e as Stat, t as StatGroup };

package/dist/components/StepTimeline/StepTimeline.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                       */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/StepTimeline/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e, { StepTimelineItem as t } from "./StepTimeline.js";
 export { e as StepTimeline, t as StepTimelineItem };

package/dist/components/Stepper/Step.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStepperContext as t } from "./StepperContext.js";
 /* empty css               */

package/dist/components/Stepper/Stepper.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { StepperProvider as t } from "./StepperContext.js";
 /* empty css                  */

package/dist/components/Stepper/StepperContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext as e, useContext as t } from "react";
 //#region src/lib/components/Stepper/StepperContext.ts
 var n = e(void 0), r = n.Provider;

package/dist/components/Stepper/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./Stepper.js";
 import t from "./Step.js";
 export { t as Step, e as Stepper };

package/dist/components/StreamingText/StreamingText.js

@@ -1,34 +1,55 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useEffect as r, useRef as i, useState as a } from "react";
+import { memo as r, useEffect as i, useRef as a, useState as o } from "react";
 //#region src/lib/components/StreamingText/StreamingText.tsx
-var o = "haze-StreamingText__wrapper", s = "haze-StreamingText__cursor";
-function c({ text: c, speed: l = 20, onComplete: u, showCursor: d = !0, className: f }) {
-	let [p, m] = a(""), h = i(!1), [g, _] = a(c);
-	c !== g && (_(c), m(""));
-	let v = p.length >= c.length;
-	return r(() => {
-		if (v) {
-			h.current || (h.current = !0, u?.());
+var s = "haze-StreamingText__wrapper", c = "haze-StreamingText__cursor", l = 512;
+function u(e, t) {
+	let n = e.tail + t;
+	t === "\n" || n.length >= l ? (e.finalized = [...e.finalized, n], e.tail = "") : e.tail = n;
+}
+function d(e) {
+	let t = {
+		finalized: [],
+		tail: ""
+	};
+	for (let n of e) u(t, n);
+	return t;
+}
+var f = r(function({ text: e }) {
+	return /* @__PURE__ */ t("span", { children: e });
+});
+function p({ text: r, speed: l = 20, onComplete: p, showCursor: m = !0, className: h }) {
+	let [g, _] = o(""), v = a(!1), y = a({
+		finalized: [],
+		tail: ""
+	});
+	y.current.tail.length + y.current.finalized.reduce((e, t) => e + t.length, 0) !== g.length && (y.current = d(g));
+	let { finalized: b, tail: x } = y.current, S = x ? [...b, x] : b, [C, w] = o(r);
+	r !== C && (w(r), _(""));
+	let T = g.length >= r.length;
+	return i(() => {
+		if (T) {
+			v.current || (v.current = !0, p?.());
 			return;
 		}
-		h.current = !1;
+		v.current = !1;
 		let e = setTimeout(() => {
-			m(c.slice(0, p.length + 1));
+			u(y.current, r.charAt(g.length)), _(r.slice(0, g.length + 1));
 		}, l);
 		return () => clearTimeout(e);
 	}, [
-		v,
-		p,
-		c,
+		T,
+		g,
+		r,
 		l,
-		u
+		p
 	]), /* @__PURE__ */ n("span", {
-		className: e([o, f]),
-		children: [p, d && !v && /* @__PURE__ */ t("span", { className: e([s]) })]
+		className: e([s, h]),
+		children: [S.map((e, n) => /* @__PURE__ */ t(f, { text: e }, n)), m && !T && /* @__PURE__ */ t("span", { className: e([c]) })]
 	});
 }
 //#endregion
-export { c as default };
+export { p as default };

package/dist/components/StreamingText/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./StreamingText.js";
 export { e as StreamingText };

package/dist/components/SwipeAction/SwipeAction.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                      */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/SwipeAction/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./SwipeAction.js";
 export { e as SwipeAction };

package/dist/components/Switch/Switch.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./SwitchCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";

package/dist/components/Switch/SwitchCore.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Switch/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./SwitchCore.js";
 import t from "./Switch.js";
 export { t as Switch, e as SwitchCore };

package/dist/components/Table/Table.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Table/TableBody.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Table/TableCell.js

@@ -1,3 +1,4 @@
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/lib/components/Table/TableCell.tsx

package/dist/components/Table/TableHead.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Table/TableRow.js

@@ -1,3 +1,4 @@
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/lib/components/Table/TableRow.tsx

package/dist/components/Table/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./Table.js";
 import t from "./TableHead.js";
 import n from "./TableBody.js";

package/dist/components/Tabs/Tab.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useTabsContext as t } from "./TabsContext.js";
 /* empty css              */

package/dist/components/Tabs/TabList.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                  */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Tabs/TabPanel.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useTabsContext as t } from "./TabsContext.js";
 /* empty css                   */

package/dist/components/Tabs/Tabs.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { TabsProvider as t } from "./TabsContext.js";
 /* empty css               */

package/dist/components/Tabs/TabsContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext as e, useContext as t } from "react";
 //#region src/lib/components/Tabs/TabsContext.ts
 var n = e(void 0), r = n.Provider;

package/dist/components/Tabs/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./Tabs.js";
 import t from "./TabList.js";
 import n from "./Tab.js";