haze-ui 1.25.0 → 1.26.0

package/README.md

@@ -10,6 +10,7 @@ English | [简体中文](./README-zh_CN.md)
 ## Features
 
 - Integrated [react use control](https://github.com/wmzy/react-use-control) provides component internal states
+- Built for React 19+ (`ref` as a prop, `ControlOrValue<T>` state protocol) — no React 18 compatibility layer
 - Keep strict, provide lightweight, composable, and easily extendable components
 - Support themes customization
 - Support Tree-shaking
@@ -32,6 +33,46 @@ npm i haze-ui
 pnpm add haze-ui
 ```
 
+### React 19+ by design
+
+The peer range is `react: ^19.0.0` on purpose — haze-ui is built on
+modern React rather than carrying a compatibility layer for 18:
+
+- **`ref` as a prop.** React 19 passes `ref` to function components
+  directly, so components that expose refs accept one prop instead of a
+  `forwardRef` wrapper layer.
+- **A modern-platform baseline.** Floating panels (Popover, DropdownMenu,
+  Tooltip, ContextMenu, Combobox, Datepicker) choose between three tiers
+  by feature detection — native `popover` + CSS anchor positioning,
+  `popover` alone, or a JS fallback — with the newest platform features
+  as the primary path, not an enhancement layered on top.
+- **`ControlOrValue<T>`** — the `Control<T> | T` state protocol — is
+  designed for modern React semantics throughout.
+
+On React 18? Upgrade first. haze-ui ships no React 18 compatibility
+layer, and none is planned.
+
+### Optional peer dependencies
+
+haze-ui's only required runtime dependency is `react-use-control` — the
+engine behind `ControlOrValue<T>`. Two integrations are optional peers,
+installed only when you use the components that need them:
+
+```sh
+npm i react-f0rm              # FormItem (peer range ^1.1.1)
+npm i @tanstack/react-table   # DataTable (peer range ^9.2.4)
+```
+
+Everything else — `Button`, `Input`, `Dialog`, `Select`, … — runs with
+nothing beyond `react` and `react-use-control`. The dist is ESM with
+`preserveModules` and side-effect-free JS, so bundlers (Next.js, Vite,
+webpack, Turbopack, Rollup) tree-shake the unused re-export chains and
+never resolve peers you haven't installed: `import { Button } from
+'haze-ui'` works without `react-f0rm`. Only bundler-less consumers
+(bare Node ESM importing the barrel, which links the module graph
+eagerly) must install both peers; the `haze-ui/form` and
+`haze-ui/components/DataTable` subpaths bypass the barrel entirely.
+
 ### Browser support
 
 Since v1.13, haze-ui colors are generated in **OKLCH**, with interaction
@@ -83,6 +124,27 @@ included); `noCss` lists pure-logic exports with no css of their own.
 Bundler plugins and codemods should read this manifest instead of
 re-deriving file names — the mapping changes in lockstep with the build.
 
+### Server Components (Next.js App Router)
+
+Every JS module in `dist/` starts with the `'use client'` directive,
+injected at build time — the same convention Radix, Base UI and React
+Aria ship. In an App Router project you import haze-ui straight from
+your client components; there is no need for a wrapper module that
+re-exports the library under its own `'use client'` banner:
+
+```jsx
+// any client component — import straight from the package
+import { Button } from 'haze-ui';
+
+export function Actions() {
+  return <Button>Start</Button>;
+}
+```
+
+CSS loading is unchanged from the two modes above — `haze-ui/styles.css`
+in the root layout, or the `haze-ui/css/*` subpaths. A runnable Next.js
+15 project lives in [`examples/nextjs`](./examples/nextjs).
+
 ## ButtonLink: a real anchor with the Button skin
 
 Navigation that must look like a button should still *be* a link —
@@ -183,6 +245,30 @@ function SettingsView() {
 }
 ```
 
+## AI-friendly distribution
+
+**llms.txt** — a markdown overview of the whole library (the `ControlOrValue<T>`
+state protocol, both CSS loading modes, all 101 components grouped with one-line
+purposes, the token system, the floating-overlay tiers, form integration) written
+for AI coding tools and crawlers. It lives at the repo root
+([llms.txt](./llms.txt)) and, on the docs site, at
+<https://wmzy.github.io/haze-ui/llms.txt> (`build:demo` copies it into `dist/`).
+
+**registry.json** — a shadcn/ui-compatible registry shipped as the
+`haze-ui/registry.json` npm artifact (regenerated by `scripts/generate-registry.mjs`
+on every build), also reachable at <https://unpkg.com/haze-ui/registry.json>.
+Consume it with the shadcn CLI:
+
+```sh
+pnpm dlx shadcn@latest add https://unpkg.com/haze-ui/registry.json
+```
+
+To be precise about coverage: it contains only the **agent components** (the
+AI & Chat group plus AsyncSection). Each item is a wrapper file, not vendored
+source — it re-exports the published component and imports its stylesheet, so
+haze-ui stays an npm dependency that keeps updating underneath; treat the
+generated file as your customization layer.
+
 ## react-f0rm Integration
 
 react-f0rm owns form field state, and its headless `useField` hook is
@@ -457,6 +543,12 @@ display, `validate`-only).
 
 ## Accessibility & RTL
 
+Accessibility is a baseline, not an opt-in: every component's test suite
+includes axe checks, and the token sheet ships a global
+`@media (prefers-reduced-motion: reduce)` block that collapses every
+animation duration token to `0ms` — motion-sensitive users get instant
+state changes with no per-component wiring.
+
 haze-ui supports RTL via CSS logical properties wherever a side is
 semantic (the *start/end* of reading flow), not just decorative. Set
 `dir="rtl"` (or `direction: rtl`) on an ancestor and those sides mirror
@@ -573,6 +665,12 @@ import 'haze-ui/css/button.css';
 No — haze-ui is ESM-only (`"type": "module"`). Use a bundler or runtime
 with ESM support (Vite, webpack 5, Next.js, Node ≥ 18, …).
 
+### Does haze-ui support React 18?
+
+No — the peer range is `react@^19.0.0` by design (see
+[React 19+ by design](#react-19-by-design)). Upgrade to React 19 first;
+haze-ui ships no React 18 compatibility layer.
+
 ### How do I detect (or degrade) the relative-color syntax?
 
 Since v1.13, theme interaction states are derived with CSS relative

package/dist/components/Accordion/Accordion.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/Accordion/AccordionItem.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/Accordion/index.js

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

package/dist/components/Affix/Affix.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/Affix/index.js

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

package/dist/components/Alert/Alert.js

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

package/dist/components/Alert/index.js

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

package/dist/components/ApprovalCard/ApprovalCard.js

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

package/dist/components/ApprovalCard/index.js

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

package/dist/components/AspectRatio/AspectRatio.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/AspectRatio/index.js

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

package/dist/components/AsyncSection/AsyncSection.js

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

package/dist/components/AsyncSection/index.js

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

package/dist/components/Avatar/Avatar.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/Avatar/index.js

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

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -1,4 +1,5 @@
 
+"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";

package/dist/components/AvatarGroup/index.js

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

package/dist/components/BackToTop/BackToTop.js

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

package/dist/components/BackToTop/index.js

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

package/dist/components/Badge/Badge.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/Badge/index.js

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

package/dist/components/Banner/Banner.js

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

package/dist/components/Banner/index.js

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

package/dist/components/BottomSheet/BottomSheet.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useFocusScope as t } from "../../utils/focus-scope.js";
 import { Presence as n } from "../../utils/presence.js";

package/dist/components/BottomSheet/index.js

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

package/dist/components/Breadcrumb/Breadcrumb.js

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

package/dist/components/Breadcrumb/BreadcrumbItem.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/Breadcrumb/index.js

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

package/dist/components/Button/Button.js

@@ -1,3 +1,4 @@
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { base as t, sizes as n, squareSizes as r, variants as i } from "./styles.js";
 import { jsx as a } from "react/jsx-runtime";

package/dist/components/Button/ButtonLink.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { base as t, sizes as n, squareSizes as r, variants as i } from "./styles.js";
 /* empty css                     */

package/dist/components/Button/index.js

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

package/dist/components/Button/styles.js

@@ -1,4 +1,5 @@
 
+"use client";
 /* empty css                 */
 //#region src/lib/components/Button/styles.ts
 var e = "haze-styles__base", t = {

package/dist/components/Calendar/Calendar.js

@@ -1,12 +1,14 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { addMonths as n, buildMonthCells as r, formatDate as i, parseCivilDate as a } from "./date.js";
 /* empty css                   */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useState as i } from "react";
-import { useControl as a } from "react-use-control";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/Calendar/Calendar.tsx
-var o = "haze-Calendar__calendarWrapper", s = "haze-Calendar__header", c = "haze-Calendar__headerBtn", l = "haze-Calendar__headerTitle", u = "haze-Calendar__headerTrailing", d = "haze-Calendar__grid", f = "haze-Calendar__rowContents", p = "haze-Calendar__cellContents", m = "haze-Calendar__weekday", h = "haze-Calendar__dayBtn", g = "haze-Calendar__daySelected", _ = "haze-Calendar__dayOutside", v = [
+var u = "haze-Calendar__calendarWrapper", d = "haze-Calendar__header", f = "haze-Calendar__headerBtn", p = "haze-Calendar__headerTitle", m = "haze-Calendar__headerTrailing", h = "haze-Calendar__grid", g = "haze-Calendar__rowContents", _ = "haze-Calendar__cellContents", v = "haze-Calendar__weekday", y = "haze-Calendar__dayBtn", b = "haze-Calendar__daySelected", x = "haze-Calendar__dayOutside", S = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -15,7 +17,7 @@ var o = "haze-Calendar__calendarWrapper", s = "haze-Calendar__header", c = "haze
 	"Fr",
 	"Sa"
 ];
-function y(e, t) {
+function C(e, t) {
 	if (t !== void 0) return t;
 	if (e === void 0) return 0;
 	try {
@@ -25,128 +27,98 @@ function y(e, t) {
 		return 0;
 	}
 }
-function b(e, t) {
-	if (e === void 0) return Array.from({ length: 7 }, (e, n) => v[(t + n) % 7]);
+function w(e, t) {
+	if (e === void 0) return Array.from({ length: 7 }, (e, n) => S[(t + n) % 7]);
 	let n = new Intl.DateTimeFormat(e, { weekday: "short" }), r = Array.from({ length: 7 }, (e, t) => n.format(new Date(2024, 0, 7 + t)));
 	return Array.from({ length: 7 }, (e, n) => r[(t + n) % 7]);
 }
-function x(e, t) {
-	return new Date(e, t + 1, 0).getDate();
-}
-function S(e, t, n) {
-	return `${e}-${String(t + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
-}
-function C({ value: v, min: C, max: w, locale: T, weekStartsOn: E, onSelect: D, className: O, ...k }) {
-	let [A, j] = a(v, ""), M = t("calendar"), N = A ? new Date(A) : /* @__PURE__ */ new Date(), [P, F] = i(N.getFullYear()), [I, L] = i(N.getMonth()), R = y(T, E), z = b(T, R), B = x(P, I), V = new Date(P, I, 1).getDay(), H = x(P, I - 1), U = (V - R + 7) % 7, W = () => {
-		L((e) => e === 0 ? (F((e) => e - 1), 11) : e - 1);
+function T({ value: S, min: T, max: E, locale: D, weekStartsOn: O, onSelect: k, className: A, ...j }) {
+	let [M, N] = l(S, ""), P = t("calendar"), F = M && a(M) || /* @__PURE__ */ new Date(), [I, L] = c(F.getFullYear()), [R, z] = c(F.getMonth()), B = C(D, O), V = w(D, B), H = r(I, R, B), U = () => {
+		let e = n(I, R, -1);
+		L(e.year), z(e.month);
+	}, W = () => {
+		let e = n(I, R, 1);
+		L(e.year), z(e.month);
 	}, G = () => {
-		L((e) => e === 11 ? (F((e) => e + 1), 0) : e + 1);
-	}, K = () => {
 		let e = /* @__PURE__ */ new Date();
-		F(e.getFullYear()), L(e.getMonth());
-	}, q = (e) => !!(C && e < C || w && e > w), J = [];
-	for (let e = U - 1; e >= 0; e--) {
-		let t = I === 0 ? 11 : I - 1, n = I === 0 ? P - 1 : P;
-		J.push({
-			day: H - e,
-			month: t,
-			year: n,
-			outside: !0
-		});
-	}
-	for (let e = 1; e <= B; e++) J.push({
-		day: e,
-		month: I,
-		year: P,
-		outside: !1
-	});
-	let Y = 7 - J.length % 7;
-	if (Y < 7) for (let e = 1; e <= Y; e++) {
-		let t = I === 11 ? 0 : I + 1, n = I === 11 ? P + 1 : P;
-		J.push({
-			day: e,
-			month: t,
-			year: n,
-			outside: !0
-		});
-	}
-	let X = new Intl.DateTimeFormat(T ?? "default", {
+		L(e.getFullYear()), z(e.getMonth());
+	}, K = (e) => !!(T && e < T || E && e > E), q = new Intl.DateTimeFormat(D ?? "default", {
 		month: "long",
 		year: "numeric"
-	}).format(new Date(P, I)), Z = [];
-	for (let e = 0; e < J.length; e += 7) Z.push(J.slice(e, e + 7));
-	return /* @__PURE__ */ r("div", {
-		...k,
-		className: e([o, O]),
-		children: [/* @__PURE__ */ r("div", {
-			className: e([s]),
+	}).format(new Date(I, R)), J = [];
+	for (let e = 0; e < H.length; e += 7) J.push(H.slice(e, e + 7));
+	return /* @__PURE__ */ s("div", {
+		...j,
+		className: e([u, A]),
+		children: [/* @__PURE__ */ s("div", {
+			className: e([d]),
 			children: [
-				/* @__PURE__ */ n("button", {
+				/* @__PURE__ */ o("button", {
 					type: "button",
-					onClick: W,
-					"aria-label": M.previousMonth,
-					className: e([c]),
+					onClick: U,
+					"aria-label": P.previousMonth,
+					className: e([f]),
 					children: "‹"
 				}),
-				/* @__PURE__ */ n("span", {
-					className: e([l]),
-					children: X
+				/* @__PURE__ */ o("span", {
+					className: e([p]),
+					children: q
 				}),
-				/* @__PURE__ */ r("span", {
-					className: e([u]),
-					children: [/* @__PURE__ */ n("button", {
-						type: "button",
-						onClick: K,
-						className: e([c]),
-						children: M.today
-					}), /* @__PURE__ */ n("button", {
+				/* @__PURE__ */ s("span", {
+					className: e([m]),
+					children: [/* @__PURE__ */ o("button", {
 						type: "button",
 						onClick: G,
-						"aria-label": M.nextMonth,
-						className: e([c]),
+						className: e([f]),
+						children: P.today
+					}), /* @__PURE__ */ o("button", {
+						type: "button",
+						onClick: W,
+						"aria-label": P.nextMonth,
+						className: e([f]),
 						children: "›"
 					})]
 				})
 			]
-		}), /* @__PURE__ */ r("div", {
+		}), /* @__PURE__ */ s("div", {
 			role: "grid",
-			"aria-label": X,
-			className: e([d]),
-			children: [/* @__PURE__ */ n("div", {
+			"aria-label": q,
+			className: e([h]),
+			children: [/* @__PURE__ */ o("div", {
 				role: "row",
-				className: e([f]),
-				children: z.map((t, r) => /* @__PURE__ */ n("span", {
+				className: e([g]),
+				children: V.map((t, n) => /* @__PURE__ */ o("span", {
 					role: "columnheader",
-					className: e([m]),
+					className: e([v]),
 					children: t
-				}, r))
-			}), Z.map((t, r) => /* @__PURE__ */ n("div", {
+				}, n))
+			}), J.map((t, n) => /* @__PURE__ */ o("div", {
 				role: "row",
-				className: e([f]),
+				className: e([g]),
 				children: t.map((t) => {
-					let r = S(t.year, t.month, t.day);
-					return /* @__PURE__ */ n("span", {
+					let n = i(t.year, t.month, t.day);
+					return /* @__PURE__ */ o("span", {
 						role: "gridcell",
-						"aria-selected": r === A,
-						className: e([p]),
-						children: /* @__PURE__ */ n("button", {
+						"aria-selected": n === M,
+						className: e([_]),
+						children: /* @__PURE__ */ o("button", {
 							type: "button",
-							disabled: q(r),
+							disabled: K(n),
 							onClick: () => {
-								j(r), D?.(r);
+								N(n), k?.(n);
 							},
 							className: e([
-								h,
-								r === A && g,
-								t.outside && _
+								y,
+								n === M && b,
+								t.outside && x
 							]),
 							children: t.day
 						})
-					}, r);
+					}, n);
 				})
-			}, r))]
+			}, n))]
 		})]
 	});
 }
 //#endregion
-export { C as default };
+export { T as default };

package/dist/components/Calendar/date.js

@@ -0,0 +1,54 @@
+"use client";
+//#region src/lib/components/Calendar/date.ts
+function e(e, t) {
+	return new Date(e, t + 1, 0).getDate();
+}
+function t(e, t, n) {
+	let r = e * 12 + t + n;
+	return {
+		year: Math.floor(r / 12),
+		month: (r % 12 + 12) % 12
+	};
+}
+function n(e, t, n) {
+	return (new Date(e, t, 1).getDay() - n + 7) % 7;
+}
+function r(r, i, a) {
+	let o = [], s = e(r, i), c = n(r, i, a), l = t(r, i, -1), u = e(l.year, l.month);
+	for (let e = c - 1; e >= 0; e--) o.push({
+		day: u - e,
+		month: l.month,
+		year: l.year,
+		outside: !0
+	});
+	for (let e = 1; e <= s; e++) o.push({
+		day: e,
+		month: i,
+		year: r,
+		outside: !1
+	});
+	let d = 7 - o.length % 7;
+	if (d < 7) {
+		let e = t(r, i, 1);
+		for (let t = 1; t <= d; t++) o.push({
+			day: t,
+			month: e.month,
+			year: e.year,
+			outside: !0
+		});
+	}
+	return o;
+}
+function i(e, t, n) {
+	return `${e}-${String(t + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
+}
+function a(t) {
+	let n = /^(\d{4})-(\d{2})-(\d{2})$/.exec(t);
+	if (!n) return null;
+	let r = Number(n[1]), i = Number(n[2]) - 1, a = Number(n[3]);
+	if (i < 0 || i > 11 || a < 1 || a > e(r, i)) return null;
+	let o = new Date(r, i, a);
+	return o.getFullYear() !== r || o.getMonth() !== i || o.getDate() !== a ? null : o;
+}
+//#endregion
+export { t as addMonths, r as buildMonthCells, i as formatDate, e as getDaysInMonth, n as getLeadingDays, a as parseCivilDate };

package/dist/components/Calendar/index.js

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

package/dist/components/Card/Card.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/Card/index.js

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

package/dist/components/Carousel/Carousel.js

@@ -1,4 +1,5 @@
 
+"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";

package/dist/components/Carousel/CarouselSlide.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/Carousel/index.js

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