haze-ui 0.0.0 → 1.0.0

package/README.md

@@ -1,4 +1,4 @@
-# Ripple UI
+# Haze UI
 
 > The React UI Component Library with controllable states.
 
@@ -16,15 +16,15 @@ English | [简体中文](./README-zh_CN.md)
 ### Installation
 
 ```sh
-npm i ripple-ui
+npm i haze-ui
 // or
-pnpm add ripple-ui
+pnpm add haze-ui
 ```
 
 ### Usage
 
 ```jsx
-import { Button } from 'ripple-ui';
+import { Button } from 'haze-ui';
 
 export default function MyComponent() {
   return <Button>Start</Button>;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,28 @@
+/* empty css                 */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+import { useState as n } from "react";
+//#region src/lib/components/Avatar/Avatar.tsx
+var r = "b4666vo", i = {
+	sm: "sag18gw",
+	md: "m7cr8e2",
+	lg: "lmhruty"
+}, a = "imhjc6a";
+function o({ src: o, alt: s, size: c = "md", fallback: l, className: u }) {
+	let [d, f] = n(!1);
+	return /* @__PURE__ */ t("span", {
+		className: e([
+			r,
+			i[c],
+			u
+		]),
+		children: o && !d ? /* @__PURE__ */ t("img", {
+			className: a,
+			src: o,
+			alt: s ?? "",
+			onError: () => f(!0)
+		}) : l ?? /* @__PURE__ */ t("span", { children: s?.charAt(0).toUpperCase() ?? "?" })
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,26 @@
+/* empty css                     */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Children as r } from "react";
+//#region src/lib/components/Breadcrumb/Breadcrumb.tsx
+var i = "n10d0fjb", a = "l727nxp", o = "sjewi7s";
+function s({ separator: s = "/", className: c, children: l }) {
+	let u = r.toArray(l);
+	return /* @__PURE__ */ t("nav", {
+		"aria-label": "Breadcrumb",
+		className: e([i, c]),
+		children: /* @__PURE__ */ t("ol", {
+			className: a,
+			children: u.map((e, r) => /* @__PURE__ */ n("li", {
+				"aria-current": r === u.length - 1 ? "page" : void 0,
+				children: [e, r < u.length - 1 && /* @__PURE__ */ t("span", {
+					className: o,
+					"aria-hidden": "true",
+					children: s
+				})]
+			}, r))
+		})
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,17 @@
+/* empty css                         */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Breadcrumb/BreadcrumbItem.tsx
+var n = "lr0896i", r = "cpuhw6u";
+function i({ href: i, className: a, children: o }) {
+	return i ? /* @__PURE__ */ t("a", {
+		href: i,
+		className: e([n, a]),
+		children: o
+	}) : /* @__PURE__ */ t("span", {
+		className: e([r, a]),
+		children: o
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,69 @@
+/* empty css                   */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
+import { Children as a, useEffect as o, useRef as s } from "react";
+//#region src/lib/components/Carousel/Carousel.tsx
+var c = "w1vgcode", l = "t1gm45fg", u = "nit1xjh", d = "pabcbhr", f = "nc7ezkr", p = "i1o6048a", m = "dhf6lgj", h = "dooaa69";
+function g({ value: g, autoPlay: _ = !1, interval: v = 5e3, className: y, children: b }) {
+	let [x, S] = i(g, 0), C = s(null), w = a.count(b);
+	o(() => {
+		let e = C.current;
+		if (!e) return;
+		let t = e.children[x];
+		t && t.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest",
+			inline: "start"
+		});
+	}, [x]), o(() => {
+		if (!_ || w <= 1) return;
+		let e = setInterval(() => {
+			S((e) => (e + 1) % w);
+		}, v);
+		return () => clearInterval(e);
+	}, [
+		_,
+		v,
+		w,
+		S
+	]);
+	let T = () => S((e) => (e - 1 + w) % w), E = () => S((e) => (e + 1) % w);
+	return /* @__PURE__ */ r("div", {
+		role: "region",
+		"aria-roledescription": "carousel",
+		"aria-label": "Carousel",
+		className: e([c, y]),
+		children: [/* @__PURE__ */ n("div", {
+			ref: C,
+			className: l,
+			children: b
+		}), w > 1 && /* @__PURE__ */ r(t, { children: [
+			/* @__PURE__ */ n("button", {
+				type: "button",
+				onClick: T,
+				"aria-label": "Previous slide",
+				className: e([u, d]),
+				children: "‹"
+			}),
+			/* @__PURE__ */ n("button", {
+				type: "button",
+				onClick: E,
+				"aria-label": "Next slide",
+				className: e([u, f]),
+				children: "›"
+			}),
+			/* @__PURE__ */ n("div", {
+				className: p,
+				children: Array.from({ length: w }, (t, r) => /* @__PURE__ */ n("button", {
+					type: "button",
+					onClick: () => S(r),
+					"aria-label": `Go to slide ${r + 1}`,
+					className: e([m, r === x && h])
+				}, r))
+			})
+		] })]
+	});
+}
+//#endregion
+export { g as default };

package/dist/components/Carousel/CarouselSlide.js

@@ -0,0 +1,15 @@
+/* empty css                        */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Carousel/CarouselSlide.tsx
+var n = "s10j4fk7";
+function r({ className: r, children: i }) {
+	return /* @__PURE__ */ t("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		className: e([n, r]),
+		children: i
+	});
+}
+//#endregion
+export { r as default };

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,50 @@
+import e from "./ComboboxOption.js";
+/* empty css                   */
+import { classnames as t } from "babel-runtime-jsx-plus";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
+import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
+//#region src/lib/components/Combobox/Combobox.tsx
+var l = "w1hbn1o4", u = "i4sk2nn", d = "luqji2p", f = "h1poubj5";
+function p({ value: p, options: m, placeholder: h, className: g }) {
+	let [_, v] = i(p, ""), [y, b] = c(""), [x, S] = c(!1), [C, w] = c(-1), T = o(), E = s(null), D = m.filter((e) => e.label.toLowerCase().includes(y.toLowerCase()));
+	a(() => {
+		w(-1);
+	}, [y]);
+	let O = (e) => {
+		v(e), b(m.find((t) => t.value === e)?.label ?? e), S(!1), E.current?.focus();
+	}, k = (e) => {
+		e.key === "ArrowDown" ? (e.preventDefault(), w((e) => Math.min(e + 1, D.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), w((e) => Math.max(e - 1, 0))) : e.key === "Enter" && C >= 0 && D[C] ? (e.preventDefault(), O(D[C].value)) : e.key === "Escape" && S(!1);
+	};
+	return /* @__PURE__ */ r("div", {
+		className: t([l, g]),
+		children: [/* @__PURE__ */ n("input", {
+			ref: E,
+			role: "combobox",
+			"aria-expanded": x,
+			"aria-controls": T,
+			"aria-autocomplete": "list",
+			className: u,
+			value: y,
+			placeholder: h,
+			onChange: (e) => {
+				b(e.target.value), S(!0);
+			},
+			onFocus: () => S(!0),
+			onKeyDown: k
+		}), /* @__PURE__ */ n("div", {
+			id: T,
+			role: "listbox",
+			className: t([d, !x && f]),
+			children: D.map((t, r) => /* @__PURE__ */ n(e, {
+				value: t.value,
+				highlighted: r === C,
+				selected: t.value === _,
+				onSelect: O,
+				children: t.label
+			}, t.value))
+		})]
+	});
+}
+//#endregion
+export { p as default };

package/dist/components/Combobox/ComboboxOption.js

@@ -0,0 +1,21 @@
+/* empty css                         */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Combobox/ComboboxOption.tsx
+var n = "o1jce0x2", r = "h1rwzud7", i = "s10s5833";
+function a({ value: a, highlighted: o = !1, selected: s = !1, onSelect: c, className: l, children: u }) {
+	return /* @__PURE__ */ t("div", {
+		role: "option",
+		"aria-selected": s,
+		onClick: () => c?.(a),
+		className: e([
+			n,
+			o && r,
+			s && i,
+			l
+		]),
+		children: u
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/Datepicker/Calendar.js

@@ -0,0 +1,105 @@
+/* empty css                   */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useState as r } from "react";
+//#region src/lib/components/Datepicker/Calendar.tsx
+var i = "c1f9h0hb", a = "hrefchg", o = "h144mm7c", s = "hmmnmao", c = "g1f8zgbo", l = "w1onmyfp", u = "d1om8hws", d = "dxg97in", f = "dum096m", p = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+function m(e, t) {
+	return new Date(e, t + 1, 0).getDate();
+}
+function h(e, t, n) {
+	return `${e}-${String(t + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
+}
+function g({ value: g, min: _, max: v, onSelect: y }) {
+	let b = g ? new Date(g) : /* @__PURE__ */ new Date(), [x, S] = r(b.getFullYear()), [C, w] = r(b.getMonth()), T = m(x, C), E = new Date(x, C, 1).getDay(), D = m(x, C - 1), O = () => {
+		w((e) => e === 0 ? (S((e) => e - 1), 11) : e - 1);
+	}, k = () => {
+		w((e) => e === 11 ? (S((e) => e + 1), 0) : e + 1);
+	}, A = (e) => !!(_ && e < _ || v && e > v), j = [];
+	for (let e = E - 1; e >= 0; e--) {
+		let t = C === 0 ? 11 : C - 1, n = C === 0 ? x - 1 : x;
+		j.push({
+			day: D - e,
+			month: t,
+			year: n,
+			outside: !0
+		});
+	}
+	for (let e = 1; e <= T; e++) j.push({
+		day: e,
+		month: C,
+		year: x,
+		outside: !1
+	});
+	let M = 7 - j.length % 7;
+	if (M < 7) for (let e = 1; e <= M; e++) {
+		let t = C === 11 ? 0 : C + 1, n = C === 11 ? x + 1 : x;
+		j.push({
+			day: e,
+			month: t,
+			year: n,
+			outside: !0
+		});
+	}
+	let N = new Date(x, C).toLocaleString("default", {
+		month: "long",
+		year: "numeric"
+	});
+	return /* @__PURE__ */ n("div", {
+		role: "grid",
+		"aria-label": N,
+		className: e([i]),
+		children: [/* @__PURE__ */ n("div", {
+			className: e([a]),
+			children: [
+				/* @__PURE__ */ t("button", {
+					type: "button",
+					onClick: O,
+					"aria-label": "Previous month",
+					className: e([o]),
+					children: "‹"
+				}),
+				/* @__PURE__ */ t("span", {
+					className: e([s]),
+					children: N
+				}),
+				/* @__PURE__ */ t("button", {
+					type: "button",
+					onClick: k,
+					"aria-label": "Next month",
+					className: e([o]),
+					children: "›"
+				})
+			]
+		}), /* @__PURE__ */ n("div", {
+			className: e([c]),
+			children: [p.map((n) => /* @__PURE__ */ t("span", {
+				className: e([l]),
+				children: n
+			}, n)), j.map((n, r) => {
+				let i = h(n.year, n.month, n.day);
+				return /* @__PURE__ */ t("button", {
+					type: "button",
+					disabled: A(i),
+					onClick: () => y(i),
+					className: e([
+						u,
+						i === g && d,
+						n.outside && f
+					]),
+					children: n.day
+				}, r);
+			})]
+		})]
+	});
+}
+//#endregion
+export { g as default };

package/dist/components/Datepicker/Datepicker.js

@@ -0,0 +1,42 @@
+import e from "./Calendar.js";
+/* empty css                     */
+import { classnames as t } from "babel-runtime-jsx-plus";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
+import { useEffect as a, useRef as o, useState as s } from "react";
+//#region src/lib/components/Datepicker/Datepicker.tsx
+var c = "w1m20gol", l = "i1ydf3w1", u = "d1flfxon", d = "hhbkpj1";
+function f({ value: f, min: p, max: m, placeholder: h = "Select date", className: g }) {
+	let [_, v] = i(f, ""), [y, b] = s(!1), x = o(null);
+	return a(() => {
+		if (!y) return;
+		let e = (e) => {
+			x.current && !x.current.contains(e.target) && b(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [y]), /* @__PURE__ */ r("div", {
+		ref: x,
+		className: t([c, g]),
+		children: [/* @__PURE__ */ n("input", {
+			readOnly: !0,
+			className: l,
+			value: _,
+			placeholder: h,
+			onClick: () => b((e) => !e),
+			"aria-haspopup": "dialog",
+			"aria-expanded": y
+		}), /* @__PURE__ */ n("div", {
+			className: t([u, !y && d]),
+			children: /* @__PURE__ */ n(e, {
+				value: _,
+				min: p,
+				max: m,
+				onSelect: (e) => {
+					v(e), b(!1);
+				}
+			})
+		})]
+	});
+}
+//#endregion
+export { f as default };

package/dist/components/Disclosure/Disclosure.js

@@ -0,0 +1,25 @@
+/* empty css                     */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useControl as r } from "react-use-control";
+import { useEffect as i, useRef as a } from "react";
+//#region src/lib/components/Disclosure/Disclosure.tsx
+var o = "d191itnz", s = "s1kaiz9e", c = "cz931n3";
+function l({ open: l, summary: u, className: d, children: f }) {
+	let [p] = r(l, !1), m = a(null);
+	return i(() => {
+		m.current && (m.current.open = p);
+	}, [p]), /* @__PURE__ */ n("details", {
+		ref: m,
+		className: e([o, d]),
+		children: [/* @__PURE__ */ t("summary", {
+			className: s,
+			children: u
+		}), /* @__PURE__ */ t("div", {
+			className: c,
+			children: f
+		})]
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/FileInput/FileInput.js

@@ -0,0 +1,20 @@
+/* empty css                    */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useRef as r } from "react";
+//#region src/lib/components/FileInput/FileInput.tsx
+var i = "h17p0ep7", a = "t1nmk3to";
+function o({ children: o, className: s, ...c }) {
+	let l = r(null);
+	return /* @__PURE__ */ n("label", {
+		className: e([a, s]),
+		children: [/* @__PURE__ */ t("input", {
+			ref: l,
+			type: "file",
+			className: i,
+			...c
+		}), o ?? "Choose file"]
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/Flex/Flex.js

@@ -0,0 +1,20 @@
+/* empty css               */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Flex/Flex.tsx
+var n = "b9t8w6f";
+function r({ direction: r = "row", align: i, justify: a, gap: o, wrap: s = !1, className: c, children: l }) {
+	return /* @__PURE__ */ t("div", {
+		style: {
+			flexDirection: r,
+			alignItems: i,
+			justifyContent: a,
+			gap: typeof o == "number" ? `${o}px` : o,
+			flexWrap: s ? "wrap" : void 0
+		},
+		className: e([n, c]),
+		children: l
+	});
+}
+//#endregion
+export { r as default };

package/dist/components/Icon/Icon.js

@@ -0,0 +1,22 @@
+/* empty css               */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Icon/Icon.tsx
+var n = "b1din3i3", r = {
+	sm: "smrq8s4",
+	md: "mwqgfs4",
+	lg: "l1gcmjlm"
+};
+function i({ size: i = "md", className: a, children: o }) {
+	return /* @__PURE__ */ t("span", {
+		"aria-hidden": "true",
+		className: e([
+			n,
+			r[i],
+			a
+		]),
+		children: o
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/Image/Image.js

@@ -0,0 +1,25 @@
+/* empty css                */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+import { useState as n } from "react";
+//#region src/lib/components/Image/Image.tsx
+var r = "w184eiu0", i = "ifikscv", a = "f1rrks2c";
+function o({ src: o, alt: s, fallback: c, aspectRatio: l, objectFit: u = "cover", className: d }) {
+	let [f, p] = n(!1);
+	return /* @__PURE__ */ t("span", {
+		style: { aspectRatio: l },
+		className: e([r, d]),
+		children: f && c ? /* @__PURE__ */ t("span", {
+			className: a,
+			children: c
+		}) : /* @__PURE__ */ t("img", {
+			className: i,
+			src: o,
+			alt: s,
+			style: { objectFit: u },
+			onError: () => p(!0)
+		})
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/List/List.js

@@ -0,0 +1,21 @@
+/* empty css               */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/List/List.tsx
+var n = "b6y76mu", r = {
+	unordered: "u31hqp2",
+	ordered: "o1ubwy3d",
+	none: "ngsxhlv"
+};
+function i({ variant: i = "unordered", className: a, children: o }) {
+	return /* @__PURE__ */ t(i === "ordered" ? "ol" : "ul", {
+		className: e([
+			n,
+			r[i],
+			a
+		]),
+		children: o
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/List/ListItem.js

@@ -0,0 +1,13 @@
+/* empty css                   */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/List/ListItem.tsx
+var n = "inunl6n";
+function r({ className: r, children: i }) {
+	return /* @__PURE__ */ t("li", {
+		className: e([n, r]),
+		children: i
+	});
+}
+//#endregion
+export { r as default };

package/dist/components/Menu/Menu.js

@@ -0,0 +1,34 @@
+/* empty css               */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useControl as r } from "react-use-control";
+import { useEffect as i, useRef as a } from "react";
+//#region src/lib/components/Menu/Menu.tsx
+var o = "czio6g9", s = "p2k9teu", c = "hn79qla";
+function l({ open: l, trigger: u, className: d, children: f }) {
+	let [p, m] = r(l, !1), h = a(null);
+	return i(() => {
+		if (!p) return;
+		let e = (e) => {
+			h.current && !h.current.contains(e.target) && m(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [p, m]), /* @__PURE__ */ n("div", {
+		ref: h,
+		className: o,
+		children: [/* @__PURE__ */ t("span", {
+			onClick: () => m((e) => !e),
+			children: u
+		}), /* @__PURE__ */ t("div", {
+			role: "menu",
+			className: e([
+				s,
+				!p && c,
+				d
+			]),
+			children: f
+		})]
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/Menu/MenuDivider.js

@@ -0,0 +1,12 @@
+/* empty css                      */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/lib/components/Menu/MenuDivider.tsx
+var t = "d1sgpkj8";
+function n() {
+	return /* @__PURE__ */ e("div", {
+		className: t,
+		role: "separator"
+	});
+}
+//#endregion
+export { n as default };

package/dist/components/Menu/MenuItem.js

@@ -0,0 +1,17 @@
+/* empty css                   */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Menu/MenuItem.tsx
+var n = "iuktz9j";
+function r({ onSelect: r, disabled: i = !1, className: a, children: o }) {
+	return /* @__PURE__ */ t("button", {
+		type: "button",
+		role: "menuitem",
+		disabled: i,
+		onClick: r,
+		className: e([n, a]),
+		children: o
+	});
+}
+//#endregion
+export { r as default };