@cascivo/react 0.3.4 → 0.3.8

package/README.md

@@ -38,28 +38,32 @@ for `LineChart`, `AreaChart`, `BarChart`, `Sparkline`, and more.
 
 ### Framework setup (Next.js App Router)
 
-In a Server Component file (e.g. `app/layout.tsx`), import the CSS once:
+In a Server Component file (e.g. `app/layout.tsx`), import the themes once:
 
 ```tsx
-import '@cascivo/react/styles.css'
 import '@cascivo/themes/all'
 ```
 
+Component CSS ships **per component** and is pulled in automatically when you
+import a component — a bundler (Vite, webpack/Next.js) includes the styles only
+for the components you actually use and tree-shakes the rest. There is no
+component-CSS import to add or maintain.
+
 Components ship with `'use client'` preserved in the bundle, so they work inside
 RSC without any extra wrapper.
 
-> **Note on the styles path:** the import specifier is `@cascivo/react/styles.css`,
-> which the package's export map points at the dist file `cascivo.css`. Always
-> import the `styles.css` specifier — never reference `cascivo.css` directly.
+> **No bundler? (CDN, import maps, plain `<link>`)** Import the aggregate sheet
+> `@cascivo/react/styles.css` — it contains every component's CSS in one file.
+> With a bundler you don't need it; import it only if you prefer one explicit
+> stylesheet over per-component tree-shaking.
 
 ## Use
 
 ```tsx
-// once, in your entry file — two imports get you a fully themed setup
-import '@cascivo/react/styles.css' // component styles
+// once, in your entry file — themes are the only global import
 import '@cascivo/themes/all' // tokens (once) + base typography + light & dark
 
-// anywhere
+// anywhere — each component brings its own CSS along
 import { Button, Card, CardContent, Toggle } from '@cascivo/react'
 
 export function App() {
@@ -84,7 +88,6 @@ Prefer à-la-carte? Import only the themes you need — each self-imports the to
 (deduped by URL, so light + dark load tokens once):
 
 ```tsx
-import '@cascivo/react/styles.css'
 import '@cascivo/themes/base' // base typography (font/line-height/color)
 import '@cascivo/themes/light'
 import '@cascivo/themes/dark'
@@ -147,7 +150,7 @@ routing break after adding one of these, check that the import resolves to
 
 ## Component index
 
-181 components, exported from `@cascivo/react`. Full props, examples, and live demos at [docs.cascivo.com](https://docs.cascivo.com).
+191 components, exported from `@cascivo/react`. Full props, examples, and live demos at [docs.cascivo.com](https://docs.cascivo.com).
 
 ### Inputs
 
@@ -229,6 +232,7 @@ routing break after adding one of these, check that the import resolves to
 - **Kbd** — Displays a keyboard key or shortcut
 - **List** — Styled unordered or ordered list with ListItem
 - **LoginPage** — Authentication login page with email and password form.
+- **LogViewer** — Virtualized monospace console for high-frequency log and stream output
 - **NotificationCenter** — A list of notification alerts with a mark-all-read action.
 - **PageWithBreadcrumb** — A centered content page with a breadcrumb navigation and page header.
 - **Prose** — Wrapper that styles raw descendant HTML — headings, lists, code, quotes, tables
@@ -339,16 +343,25 @@ routing break after adding one of these, check that the import resolves to
 - **Boxplot** — Box-and-whisker plot with five-number summary and outlier dots per series.
 - **BubbleChart** — Bubble chart mapping x, y, and size dimensions; radius is area-proportional via sqrt scale.
 - **Bullet** — Bullet chart with background range bands, measure bar, and target tick.
+- **Calendar** — Calendar heatmap — a week-column grid of day cells colored by value (GitHub-style).
+- **Candlestick** — OHLC financial chart — each period a high–low wick and an open↔close body, coloured up/down.
 - **ComboChart** — Combination bar + line chart on shared or dual y-axes.
+- **Funnel** — Vertical conversion funnel — each stage is a trapezoid narrowing toward the next, with optional conversion labels.
+- **Gauge** — A speedometer gauge — a value arc over a min–max sweep with threshold zones, ticks, and a needle.
 - **Heatmap** — Two-dimensional heatmap with band scales and color-mix cell interpolation.
 - **Histogram** — Frequency histogram using Freedman–Diaconis binning with hover tooltips.
 - **Kpi** — KPI card showing a primary metric with optional delta indicator, icon, and sparkline.
 - **LineChart** — Time-series or numeric line chart with multi-series support, hover tooltip, and legend.
 - **Meter** — Progress meter in bar or gauge variant with threshold coloring.
 - **PieChart** — Pie or donut chart with hover segments and optional legend.
+- **Polar** — A polar coordinate plot — categories around the circle, value as radius. Bars (a rose), or a polar line/area.
 - **Radar** — Radar / spider chart with polar grid rings, spokes, and multi-series polygon overlays.
+- **RadialBar** — Concentric radial bars (a circular gauge family) — each datum is a ring whose sweep is proportional to its value.
+- **Sankey** — Flow diagram — ranked nodes connected by throughput-sized link ribbons.
 - **ScatterChart** — Scatter plot with variable point radius, multi-series, and hover tooltip.
 - **Sparkline** — Compact inline sparkline for embedding trend data in dashboards or KPI cards.
+- **Stream** — Streamgraph — stacked areas on a centered (silhouette) flowing baseline.
+- **Sunburst** — Radial hierarchy — concentric rings where each node is an annular segment sized by value.
 - **Treemap** — Squarified treemap for visualizing part-to-whole hierarchical data.
 
 <!-- COMPONENT_INDEX:END -->

package/dist/accordion/accordion.css

@@ -0,0 +1 @@
+@layer cascivo.component{._accordion_9ch4s_2{border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);flex-direction:column;display:flex;overflow:hidden}._item_9ch4s_10:not(:last-child){border-block-end:1px solid var(--cascivo-color-border)}._heading_9ch4s_16{font-size:inherit;font-weight:inherit;margin:0}._trigger_9ch4s_22{justify-content:space-between;align-items:center;gap:var(--cascivo-space-3);inline-size:100%;padding:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);text-align:start;color:var(--cascivo-color-text);cursor:pointer;background:0 0;border:none;display:flex}._trigger_9ch4s_22:hover{background-color:var(--cascivo-color-bg-subtle)}._trigger_9ch4s_22:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._indicator_9ch4s_48{block-size:.75rem;inline-size:.75rem;transition:rotate var(--cascivo-duration-200) var(--cascivo-ease-out);background-color:currentColor;flex-shrink:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat}._trigger_9ch4s_22[data-state=open] ._indicator_9ch4s_48{rotate:180deg}._content_9ch4s_62{visibility:hidden;color:var(--cascivo-color-text);transition:grid-template-rows var(--cascivo-duration-200) var(--cascivo-ease-out), visibility var(--cascivo-duration-200) var(--cascivo-ease-out);grid-template-rows:0fr;display:grid}._content_9ch4s_62[data-state=open]{visibility:visible;grid-template-rows:1fr}._contentInner_9ch4s_77{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);overflow:hidden}._content_9ch4s_62[data-state=open] ._contentInner_9ch4s_77{padding-inline:var(--cascivo-space-4);padding-block-end:var(--cascivo-space-4)}}@media (forced-colors:active){._accordion_9ch4s_2{border:1px solid buttontext}._trigger_9ch4s_22:focus-visible{outline-offset:2px;outline:2px solid highlight}}

package/dist/accordion/accordion.js

@@ -0,0 +1,95 @@
+"use client";
+
+import e from "./accordion.module.js";
+import { cn as t, useSignal as n, useSignals as r } from "@cascivo/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { createContext as o, useId as s } from "react";
+//#region ../components/src/accordion/accordion.tsx
+var c = o(null), l = o(null);
+function u(e) {
+	return e === void 0 ? [] : Array.isArray(e) ? e : [e];
+}
+function d({ type: r = "single", defaultValue: a, value: o, onValueChange: l, className: d, children: f }) {
+	let p = s(), m = n(u(o ?? a));
+	o !== void 0 && (m.value = u(o));
+	let h = {
+		open: m,
+		baseId: p,
+		toggle: (e) => {
+			let t = m.value, n;
+			n = r === "multiple" ? t.includes(e) ? t.filter((t) => t !== e) : [...t, e] : t.includes(e) ? [] : [e], o === void 0 && (m.value = n), l?.(r === "multiple" ? n : n[0] ?? "");
+		}
+	};
+	return /* @__PURE__ */ i(c.Provider, {
+		value: h,
+		children: /* @__PURE__ */ i("div", {
+			"data-type": r,
+			className: t(e.accordion, d),
+			children: f
+		})
+	});
+}
+function f({ value: n, className: r, children: a, ...o }) {
+	return /* @__PURE__ */ i(l.Provider, {
+		value: { value: n },
+		children: /* @__PURE__ */ i("div", {
+			"data-value": n,
+			className: t(e.item, r),
+			...o,
+			children: a
+		})
+	});
+}
+function p(e) {
+	return /* @__PURE__ */ i(c.Consumer, { children: (t) => /* @__PURE__ */ i(l.Consumer, { children: (n) => t && n ? /* @__PURE__ */ i(m, {
+		store: t,
+		item: n,
+		...e
+	}) : null }) });
+}
+function m({ store: n, item: o, className: s, children: c, ...l }) {
+	r();
+	let u = n.open.value.includes(o.value);
+	return /* @__PURE__ */ i("h3", {
+		className: e.heading,
+		children: /* @__PURE__ */ a("button", {
+			type: "button",
+			id: `${n.baseId}-trigger-${o.value}`,
+			"aria-expanded": u,
+			"aria-controls": `${n.baseId}-content-${o.value}`,
+			"data-state": u ? "open" : "closed",
+			className: t(e.trigger, s),
+			onClick: () => n.toggle(o.value),
+			...l,
+			children: [/* @__PURE__ */ i("span", { children: c }), /* @__PURE__ */ i("span", {
+				className: e.indicator,
+				"aria-hidden": "true"
+			})]
+		})
+	});
+}
+function h(e) {
+	return /* @__PURE__ */ i(c.Consumer, { children: (t) => /* @__PURE__ */ i(l.Consumer, { children: (n) => t && n ? /* @__PURE__ */ i(g, {
+		store: t,
+		item: n,
+		...e
+	}) : null }) });
+}
+function g({ store: n, item: a, className: o, children: s, ...c }) {
+	r();
+	let l = n.open.value.includes(a.value);
+	return /* @__PURE__ */ i("div", {
+		role: "region",
+		id: `${n.baseId}-content-${a.value}`,
+		"aria-labelledby": `${n.baseId}-trigger-${a.value}`,
+		"data-state": l ? "open" : "closed",
+		className: t(e.content, o),
+		...c,
+		children: /* @__PURE__ */ i("div", {
+			className: e.contentInner,
+			children: s
+		})
+	});
+}
+//#endregion
+export { d as Accordion, h as AccordionContent, f as AccordionItem, p as AccordionTrigger };

package/dist/accordion/accordion.module.js

@@ -0,0 +1,14 @@
+"use client";
+
+import './accordion.css';
+var e = {
+	accordion: "_accordion_9ch4s_2",
+	item: "_item_9ch4s_10",
+	heading: "_heading_9ch4s_16",
+	trigger: "_trigger_9ch4s_22",
+	indicator: "_indicator_9ch4s_48",
+	content: "_content_9ch4s_62",
+	contentInner: "_contentInner_9ch4s_77"
+};
+//#endregion
+export { e as default };

package/dist/action-sheet/action-sheet.css

@@ -0,0 +1 @@
+@layer cascivo.component{._overlay_17irl_2{z-index:var(--cascivo-z-overlay,50);padding:var(--cascivo-space-3);opacity:1;transition:opacity var(--cascivo-motion-enter);background-color:#0006;flex-direction:column;justify-content:flex-end;align-items:center;padding-block-end:calc(var(--cascivo-space-3) + env(safe-area-inset-bottom,0px));display:flex;position:fixed;inset:0}._overlay_17irl_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit)}@starting-style{._overlay_17irl_2[data-state=open]{opacity:0}}._sheet_17irl_28{gap:var(--cascivo-space-2);inline-size:100%;max-inline-size:32rem;transition:translate var(--cascivo-motion-enter);flex-direction:column;display:flex;translate:0}._overlay_17irl_2[data-state=closed] ._sheet_17irl_28{transition:translate var(--cascivo-motion-exit);translate:0 100%}@starting-style{._overlay_17irl_2[data-state=open] ._sheet_17irl_28{translate:0 100%}}._group_17irl_50{background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);flex-direction:column;display:flex;overflow:hidden}._heading_17irl_60{padding:var(--cascivo-space-4) var(--cascivo-space-6);text-align:center;border-block-end:1px solid var(--cascivo-color-border)}._title_17irl_66{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);margin:0}._description_17irl_73{margin:var(--cascivo-space-1) 0 0;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._item_17irl_79{min-block-size:3rem;inline-size:100%;padding:var(--cascivo-space-3) var(--cascivo-space-6);font-size:var(--cascivo-text-base);color:var(--cascivo-color-accent);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}._item_17irl_79+._item_17irl_79{border-block-start:1px solid var(--cascivo-color-border)}._item_17irl_79:hover{background-color:var(--cascivo-color-bg-subtle)}._item_17irl_79:focus-visible{box-shadow:var(--cascivo-focus-ring);z-index:1;outline:none;position:relative}._item_17irl_79[aria-disabled=true]{color:var(--cascivo-color-text-muted);cursor:not-allowed}._item_17irl_79[data-destructive]{color:var(--cascivo-color-destructive)}._cancel_17irl_119{font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}@media (prefers-reduced-motion:reduce){._sheet_17irl_28{transition:none}}}

package/dist/action-sheet/action-sheet.js

@@ -0,0 +1,91 @@
+"use client";
+
+import e from "./action-sheet.module.js";
+import { DismissableLayer as t, FocusScope as n, Portal as r, Presence as i, cn as a, useControllableSignal as o, useRovingFocus as s, useSignals as c } from "@cascivo/core";
+import { builtin as l, t as u } from "@cascivo/i18n";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useId as p } from "react";
+//#region ../components/src/action-sheet/action-sheet.tsx
+function m({ open: m, defaultOpen: h, onOpenChange: g, actions: _, title: v, description: y, showCancel: b = !0, labels: x, className: S }) {
+	c();
+	let [C, w] = o({
+		value: m,
+		defaultValue: h ?? !1,
+		onChange: g
+	}), T = s({
+		orientation: "vertical",
+		loop: !0
+	}), E = p(), D = p(), O = x?.cancel ?? u(l.actionSheet.cancel), k = x?.label ?? u(l.actionSheet.label), A = (e) => {
+		e.disabled || (e.onSelect(), w(!1));
+	}, j = _.length;
+	return /* @__PURE__ */ d(r, { children: /* @__PURE__ */ d(i, {
+		present: C,
+		children: /* @__PURE__ */ d("div", {
+			className: e.overlay,
+			children: /* @__PURE__ */ d(t, {
+				onDismiss: () => w(!1),
+				children: /* @__PURE__ */ d(n, {
+					trapped: !0,
+					restoreFocus: !0,
+					autoFocus: !0,
+					children: /* @__PURE__ */ f("div", {
+						role: "menu",
+						"aria-label": v ? void 0 : k,
+						"aria-labelledby": v ? E : void 0,
+						"aria-describedby": y ? D : void 0,
+						className: a(e.sheet, S),
+						children: [/* @__PURE__ */ f("div", {
+							className: e.group,
+							children: [(v || y) && /* @__PURE__ */ f("div", {
+								className: e.heading,
+								role: "presentation",
+								children: [v && /* @__PURE__ */ d("p", {
+									id: E,
+									className: e.title,
+									children: v
+								}), y && /* @__PURE__ */ d("p", {
+									id: D,
+									className: e.description,
+									children: y
+								})]
+							}), _.map((t, n) => {
+								let r = T.getItemProps(n);
+								return /* @__PURE__ */ d("button", {
+									ref: r.ref,
+									type: "button",
+									role: "menuitem",
+									tabIndex: r.tabIndex,
+									"aria-disabled": t.disabled || void 0,
+									"data-destructive": t.destructive ? "" : void 0,
+									className: e.item,
+									onKeyDown: r.onKeyDown,
+									onFocus: r.onFocus,
+									onClick: () => A(t),
+									children: t.label
+								}, n);
+							})]
+						}), b && /* @__PURE__ */ d("div", {
+							className: e.group,
+							children: (() => {
+								let t = T.getItemProps(j);
+								return /* @__PURE__ */ d("button", {
+									ref: t.ref,
+									type: "button",
+									role: "menuitem",
+									tabIndex: t.tabIndex,
+									className: a(e.item, e.cancel),
+									onKeyDown: t.onKeyDown,
+									onFocus: t.onFocus,
+									onClick: () => w(!1),
+									children: O
+								});
+							})()
+						})]
+					})
+				})
+			})
+		})
+	}) });
+}
+//#endregion
+export { m as ActionSheet };

package/dist/action-sheet/action-sheet.module.js

@@ -0,0 +1,15 @@
+"use client";
+
+import './action-sheet.css';
+var e = {
+	overlay: "_overlay_17irl_2",
+	sheet: "_sheet_17irl_28",
+	group: "_group_17irl_50",
+	heading: "_heading_17irl_60",
+	title: "_title_17irl_66",
+	description: "_description_17irl_73",
+	item: "_item_17irl_79",
+	cancel: "_cancel_17irl_119"
+};
+//#endregion
+export { e as default };

package/dist/alert/alert.css

@@ -0,0 +1 @@
+@layer cascivo.component{._alert_1n8hp_2{gap:var(--cascivo-space-3);padding:var(--cascivo-space-4);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);background-color:var(--cascivo-color-surface);font-family:var(--cascivo-font-sans);color:var(--cascivo-color-text);display:flex}._alert_1n8hp_2[data-variant=info]{border-color:color-mix(in oklch, var(--cascivo-color-info) 35%, var(--cascivo-color-border));background:color-mix(in oklch, var(--cascivo-color-info) 5%, var(--cascivo-color-bg));color:var(--cascivo-color-info-content)}._alert_1n8hp_2[data-variant=info] ._icon_1n8hp_18,._alert_1n8hp_2[data-variant=info] ._title_1n8hp_19{color:var(--cascivo-color-info)}._alert_1n8hp_2[data-variant=success]{border-color:color-mix(in oklch, var(--cascivo-color-success) 35%, var(--cascivo-color-border));background:color-mix(in oklch, var(--cascivo-color-success) 5%, var(--cascivo-color-bg));color:var(--cascivo-color-success-content)}._alert_1n8hp_2[data-variant=success] ._icon_1n8hp_18,._alert_1n8hp_2[data-variant=success] ._title_1n8hp_19{color:var(--cascivo-color-success-foreground,var(--cascivo-color-success))}._alert_1n8hp_2[data-variant=warning]{border-color:color-mix(in oklch, var(--cascivo-color-warning) 35%, var(--cascivo-color-border));background:color-mix(in oklch, var(--cascivo-color-warning) 5%, var(--cascivo-color-bg));color:var(--cascivo-color-warning-content)}._alert_1n8hp_2[data-variant=warning] ._icon_1n8hp_18,._alert_1n8hp_2[data-variant=warning] ._title_1n8hp_19{color:var(--cascivo-color-warning-foreground,var(--cascivo-color-warning))}._alert_1n8hp_2[data-variant=destructive]{border-color:color-mix(in oklch, var(--cascivo-color-destructive) 35%, var(--cascivo-color-border));background:color-mix(in oklch, var(--cascivo-color-destructive) 5%, var(--cascivo-color-bg));color:var(--cascivo-color-destructive-content)}._alert_1n8hp_2[data-variant=destructive] ._icon_1n8hp_18,._alert_1n8hp_2[data-variant=destructive] ._title_1n8hp_19{color:var(--cascivo-color-destructive)}._icon_1n8hp_18{flex-shrink:0;align-items:center;margin-block-start:.125rem;line-height:1;display:flex}._alert_1n8hp_2[data-variant=info] ._icon_1n8hp_18{color:var(--cascivo-color-info)}._alert_1n8hp_2[data-variant=success] ._icon_1n8hp_18{color:var(--cascivo-color-success)}._alert_1n8hp_2[data-variant=warning] ._icon_1n8hp_18{color:var(--cascivo-color-warning)}._alert_1n8hp_2[data-variant=destructive] ._icon_1n8hp_18{color:var(--cascivo-color-destructive)}._body_1n8hp_90{gap:var(--cascivo-space-1);flex-direction:column;flex:1;min-inline-size:0;display:flex}._title_1n8hp_19{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);line-height:var(--cascivo-leading-snug)}._content_1n8hp_104{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-normal)}._action_1n8hp_110{padding-block:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);line-height:var(--cascivo-leading-none);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;align-self:flex-start;margin-block-start:var(--cascivo-space-1)}._action_1n8hp_110:hover{background-color:var(--cascivo-color-bg-subtle)}._action_1n8hp_110:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._alert_1n8hp_2[data-variant=info] ._action_1n8hp_110{color:var(--cascivo-color-info)}._alert_1n8hp_2[data-variant=success] ._action_1n8hp_110{color:var(--cascivo-color-success)}._alert_1n8hp_2[data-variant=warning] ._action_1n8hp_110{color:var(--cascivo-color-warning)}._alert_1n8hp_2[data-variant=destructive] ._action_1n8hp_110{color:var(--cascivo-color-destructive)}._dismiss_1n8hp_149{block-size:1.5rem;inline-size:1.5rem;font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}._dismiss_1n8hp_149:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._dismiss_1n8hp_149:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}}@media (forced-colors:active){._alert_1n8hp_2{border:1px solid canvastext}._alert_1n8hp_2[data-variant=info],._alert_1n8hp_2[data-variant=success],._alert_1n8hp_2[data-variant=warning],._alert_1n8hp_2[data-variant=destructive]{border-width:2px}._dismiss_1n8hp_149:focus-visible{outline-offset:2px;outline:2px solid highlight}}@media (prefers-contrast:more){._alert_1n8hp_2,._alert_1n8hp_2[data-variant=info],._alert_1n8hp_2[data-variant=success],._alert_1n8hp_2[data-variant=warning],._alert_1n8hp_2[data-variant=destructive]{border-width:2px}}

package/dist/alert/alert.js

@@ -0,0 +1,55 @@
+"use client";
+
+import e from "./alert.module.js";
+import { cn as t, useSignal as n, useSignals as r } from "@cascivo/core";
+import { builtin as i, t as a } from "@cascivo/i18n";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region ../components/src/alert/alert.tsx
+var c = new Set(["warning", "destructive"]);
+function l({ variant: l = "default", title: u, icon: d, dismissible: f = !1, onDismiss: p, action: m, className: h, children: g, ..._ }) {
+	r();
+	let v = n(!1);
+	return v.value ? null : /* @__PURE__ */ s("div", {
+		role: c.has(l) ? "alert" : "status",
+		"data-variant": l,
+		className: t(e.alert, h),
+		..._,
+		children: [
+			d && /* @__PURE__ */ o("span", {
+				className: e.icon,
+				"aria-hidden": "true",
+				children: d
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e.body,
+				children: [
+					u && /* @__PURE__ */ o("div", {
+						className: e.title,
+						children: u
+					}),
+					g && /* @__PURE__ */ o("div", {
+						className: e.content,
+						children: g
+					}),
+					m && /* @__PURE__ */ o("button", {
+						type: "button",
+						className: e.action,
+						onClick: m.onClick,
+						children: m.label
+					})
+				]
+			}),
+			f && /* @__PURE__ */ o("button", {
+				type: "button",
+				className: e.dismiss,
+				"aria-label": a(i.alert.dismiss),
+				onClick: () => {
+					v.value = !0, p?.();
+				},
+				children: "✕"
+			})
+		]
+	});
+}
+//#endregion
+export { l as Alert };

package/dist/alert/alert.module.js

@@ -0,0 +1,14 @@
+"use client";
+
+import './alert.css';
+var e = {
+	alert: "_alert_1n8hp_2",
+	icon: "_icon_1n8hp_18",
+	title: "_title_1n8hp_19",
+	body: "_body_1n8hp_90",
+	content: "_content_1n8hp_104",
+	action: "_action_1n8hp_110",
+	dismiss: "_dismiss_1n8hp_149"
+};
+//#endregion
+export { e as default };

package/dist/alert-dialog/alert-dialog.css

@@ -0,0 +1 @@
+@layer cascivo.component{._dialog_1net6_2{opacity:1;width:fit-content;height:fit-content;transition:opacity var(--cascivo-motion-enter), scale var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;background:0 0;border:none;margin:auto;padding:0;position:fixed;inset:0;scale:1}@starting-style{._dialog_1net6_2{opacity:0;scale:.95}}._dialog_1net6_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit), scale var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete;scale:.95}._dialog_1net6_2::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;background-color:#00000080}@starting-style{._dialog_1net6_2::backdrop{opacity:0}}._dialog_1net6_2[data-state=closed]::backdrop{opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._content_1net6_58{width:28rem;max-width:calc(100vw - var(--cascivo-space-8));background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);padding:var(--cascivo-space-6);gap:var(--cascivo-space-2);flex-direction:column;display:flex}._title_1net6_71{font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);margin:0}._description_1net6_78{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);margin:0}._actions_1net6_84{justify-content:flex-end;gap:var(--cascivo-space-2);margin-block-start:var(--cascivo-space-4);display:flex}@media (width<=40rem){._dialog_1net6_2{max-block-size:90dvh;margin:0;inset-block-end:0;inset-inline:0}._content_1net6_58{inline-size:100%;max-width:100%;max-block-size:90dvh;border-start-start-radius:var(--cascivo-radius-overlay);border-start-end-radius:var(--cascivo-radius-overlay);border-end-end-radius:0;border-end-start-radius:0;padding-block-end:env(safe-area-inset-bottom,0);overflow-y:auto}}@media (prefers-reduced-motion:reduce){._dialog_1net6_2,._dialog_1net6_2[data-state=closed]{transition:none}}._cancel_1net6_123,._confirm_1net6_124{padding:var(--cascivo-space-2) var(--cascivo-space-4);border-radius:var(--cascivo-radius-control);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out);border:1px solid #0000}:is(._cancel_1net6_123,._confirm_1net6_124):focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._cancel_1net6_123{background:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text);border-color:var(--cascivo-color-border)}._cancel_1net6_123:hover{background:var(--cascivo-color-bg-muted)}._confirm_1net6_124{background:var(--cascivo-color-accent);color:var(--cascivo-color-on-accent)}._confirm_1net6_124:hover{opacity:.9}[data-variant=destructive] ._confirm_1net6_124{background:var(--cascivo-color-destructive);color:var(--cascivo-color-on-destructive)}}

package/dist/alert-dialog/alert-dialog.js

@@ -0,0 +1,68 @@
+"use client";
+
+import e from "./alert-dialog.module.js";
+import { useSignal as t, useSignalEffect as n } from "@cascivo/core";
+import { builtin as r, t as i } from "@cascivo/i18n";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useRef as s } from "react";
+//#region ../components/src/alert-dialog/alert-dialog.tsx
+function c({ open: c, title: l, description: u, onConfirm: d, onCancel: f, labels: p, variant: m = "default" }) {
+	let h = s(null), g = t(c);
+	g.value = c;
+	let _ = s(null), v = s(f);
+	v.current = f;
+	let y = s(d);
+	return y.current = d, n(() => {
+		let e = h.current;
+		if (e) if (g.value) {
+			try {
+				e.showPopover();
+			} catch {}
+			requestAnimationFrame(() => _.current?.focus());
+		} else try {
+			e.hidePopover();
+		} catch {}
+	}), /* @__PURE__ */ a("div", {
+		ref: h,
+		popover: "manual",
+		role: "alertdialog",
+		"aria-modal": "true",
+		"aria-labelledby": "cascade-alert-dialog-title",
+		"aria-describedby": "cascade-alert-dialog-desc",
+		"data-state": c ? "open" : "closed",
+		"data-variant": m,
+		className: e.dialog,
+		children: /* @__PURE__ */ o("div", {
+			className: e.content,
+			children: [
+				/* @__PURE__ */ a("p", {
+					id: "cascade-alert-dialog-title",
+					className: e.title,
+					children: l
+				}),
+				/* @__PURE__ */ a("p", {
+					id: "cascade-alert-dialog-desc",
+					className: e.description,
+					children: u
+				}),
+				/* @__PURE__ */ o("div", {
+					className: e.actions,
+					children: [/* @__PURE__ */ a("button", {
+						ref: _,
+						type: "button",
+						className: e.cancel,
+						onClick: () => v.current(),
+						children: p?.cancel ?? i(r.alertDialog.cancel)
+					}), /* @__PURE__ */ a("button", {
+						type: "button",
+						className: e.confirm,
+						onClick: () => y.current(),
+						children: p?.confirm ?? i(r.alertDialog.confirm)
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { c as AlertDialog };

package/dist/alert-dialog/alert-dialog.module.js

@@ -0,0 +1,14 @@
+"use client";
+
+import './alert-dialog.css';
+var e = {
+	dialog: "_dialog_1net6_2",
+	content: "_content_1net6_58",
+	title: "_title_1net6_71",
+	description: "_description_1net6_78",
+	actions: "_actions_1net6_84",
+	cancel: "_cancel_1net6_123",
+	confirm: "_confirm_1net6_124"
+};
+//#endregion
+export { e as default };

package/dist/app-shell/app-shell.css

@@ -0,0 +1 @@
+@layer cascivo.component{._shell_11je2_4{box-sizing:border-box;block-size:100dvh;font-family:var(--cascivo-font-sans);color:var(--cascivo-color-foreground);background-color:var(--cascivo-color-background);flex-direction:column;display:flex;overflow:hidden}._header_11je2_16{z-index:var(--cascivo-z-raised);flex:none}._body_11je2_21{flex:auto;min-block-size:0;display:flex;position:relative}._navWrapper_11je2_32{z-index:var(--cascivo-z-overlay);block-size:100%;transition:transform var(--cascivo-motion-emphasis);position:absolute;inset-block:0;inset-inline-start:0;overflow:hidden;transform:translate(-100%)}._navWrapper_11je2_32[data-open=true]{transform:translate(0)}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) ._navWrapper_11je2_32{transform:translate(100%)}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) ._navWrapper_11je2_32[data-open=true]{transform:translate(0)}._navInner_11je2_58{block-size:100%;inline-size:var(--cascivo-shell-panel-inline-size,20rem);display:flex}._navInner_11je2_58>*{flex:auto;min-block-size:0}._scrim_11je2_70{z-index:var(--cascivo-z-dropdown);opacity:0;visibility:hidden;transition:opacity var(--cascivo-motion-emphasis), visibility var(--cascivo-motion-emphasis);background-color:oklch(0% 0 0/.4);position:absolute;inset:0}._scrim_11je2_70[data-open=true]{opacity:1;visibility:visible}._main_11je2_87{flex:auto;min-inline-size:0;overflow-y:auto}._footer_11je2_93{flex:none}@media (width>=64rem){._navWrapper_11je2_32{z-index:auto;inline-size:var(--cascivo-shell-aside-inline-size,18rem);transition:inline-size var(--cascivo-motion-emphasis);position:static;transform:none}._navWrapper_11je2_32[data-open=false]{inline-size:0}._navInner_11je2_58{inline-size:var(--cascivo-shell-aside-inline-size,18rem)}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) ._navWrapper_11je2_32{transform:none}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) ._navWrapper_11je2_32[data-open=true]{transform:none}._scrim_11je2_70{display:none}}}

package/dist/app-shell/app-shell.js

@@ -0,0 +1,80 @@
+"use client";
+
+import e from "./app-shell.module.js";
+import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { cloneElement as c, isValidElement as l, useRef as u } from "react";
+//#region ../components/src/app-shell/app-shell.tsx
+function d({ header: d, nav: f, children: p, footer: m, open: h, defaultOpen: g, onOpenChange: _, className: v }) {
+	i();
+	let y = h !== void 0, b = n(h ?? g ?? !0);
+	y && (b.value = h);
+	let x = u(null), S = u(null);
+	function C(e) {
+		y || (b.value = e), _?.(e);
+	}
+	function w() {
+		typeof document < "u" && (S.current = document.activeElement), C(!b.value);
+	}
+	r(() => {
+		y || g !== void 0 || typeof window > "u" || typeof window.matchMedia != "function" || window.matchMedia("(max-width: 63.999rem)").matches && (b.value = !1);
+	}), r(() => {
+		if (!b.value || typeof document > "u") return;
+		let e = (e) => {
+			e.key === "Escape" && C(!1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}), r(() => {
+		let e = x.current;
+		if (e) if (b.value) e.removeAttribute("inert");
+		else {
+			e.setAttribute("inert", "");
+			let t = S.current;
+			t && e.contains(document.activeElement) && t.focus();
+		}
+	});
+	let T = l(d) && f ? c(d, {
+		onMenuClick: w,
+		menuExpanded: b.value
+	}) : d;
+	return /* @__PURE__ */ s("div", {
+		className: t(e.shell, v),
+		"data-open": b.value,
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: e.header,
+				children: T
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e.body,
+				children: [f && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+					ref: x,
+					className: e.navWrapper,
+					"data-open": b.value,
+					"data-testid": "app-shell-nav",
+					children: /* @__PURE__ */ o("div", {
+						className: e.navInner,
+						children: f
+					})
+				}), /* @__PURE__ */ o("div", {
+					className: e.scrim,
+					"data-open": b.value,
+					"data-testid": "app-shell-scrim",
+					"aria-hidden": "true",
+					onClick: () => C(!1)
+				})] }), /* @__PURE__ */ o("main", {
+					id: "cascade-main",
+					tabIndex: -1,
+					className: e.main,
+					children: p
+				})]
+			}),
+			m && /* @__PURE__ */ o("div", {
+				className: e.footer,
+				children: m
+			})
+		]
+	});
+}
+//#endregion
+export { d as AppShell };

package/dist/app-shell/app-shell.module.js

@@ -0,0 +1,15 @@
+"use client";
+
+import './app-shell.css';
+var e = {
+	shell: "_shell_11je2_4",
+	header: "_header_11je2_16",
+	body: "_body_11je2_21",
+	navWrapper: "_navWrapper_11je2_32",
+	navInner: "_navInner_11je2_58",
+	scrim: "_scrim_11je2_70",
+	main: "_main_11je2_87",
+	footer: "_footer_11je2_93"
+};
+//#endregion
+export { e as default };

package/dist/aspect-ratio/aspect-ratio.css

@@ -0,0 +1 @@
+@layer cascivo.component{._root_5ltw4_2{inline-size:100%;aspect-ratio:var(--cascivo-aspect-ratio,1);position:relative}._inner_5ltw4_8{block-size:100%;inline-size:100%;position:absolute;inset:0}._inner_5ltw4_8>*{object-fit:cover;block-size:100%;inline-size:100%}}

package/dist/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,22 @@
+"use client";
+
+import e from "./aspect-ratio.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/aspect-ratio/aspect-ratio.tsx
+function r({ ratio: r = 16 / 9, className: i, style: a, children: o, ...s }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e.root, i),
+		style: {
+			"--cascivo-aspect-ratio": r,
+			...a
+		},
+		...s,
+		children: /* @__PURE__ */ n("div", {
+			className: e.inner,
+			children: o
+		})
+	});
+}
+//#endregion
+export { r as AspectRatio };

package/dist/aspect-ratio/aspect-ratio.module.js

@@ -0,0 +1,9 @@
+"use client";
+
+import './aspect-ratio.css';
+var e = {
+	root: "_root_5ltw4_2",
+	inner: "_inner_5ltw4_8"
+};
+//#endregion
+export { e as default };

package/dist/avatar/avatar.css

@@ -0,0 +1 @@
+@layer cascivo.component{._avatar_18xp4_2{border-radius:var(--cascivo-radius-full);background-color:var(--cascivo-color-accent-subtle);color:var(--cascivo-color-text);font-family:var(--cascivo-font-sans);font-weight:var(--cascivo-font-medium);-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:visible}._avatar_18xp4_2[data-size=xs]{block-size:1.5rem;inline-size:1.5rem;font-size:var(--cascivo-text-xs)}._avatar_18xp4_2[data-size=sm]{block-size:2rem;inline-size:2rem;font-size:var(--cascivo-text-xs)}._avatar_18xp4_2[data-size=md]{block-size:2.5rem;inline-size:2.5rem;font-size:var(--cascivo-text-sm)}._avatar_18xp4_2[data-size=lg]{block-size:3rem;inline-size:3rem;font-size:var(--cascivo-text-base)}._avatar_18xp4_2[data-size=xl]{block-size:4rem;inline-size:4rem;font-size:var(--cascivo-text-lg)}._image_18xp4_43{object-fit:cover;border-radius:inherit;block-size:100%;inline-size:100%}._fallback_18xp4_50{text-transform:uppercase;line-height:1}._status_18xp4_55{border-radius:var(--cascivo-radius-full);border:2px solid var(--cascivo-color-surface);block-size:28%;min-block-size:.5rem;inline-size:28%;min-inline-size:.5rem;position:absolute;inset-block-end:0;inset-inline-end:0}._avatar_18xp4_2[data-status=online] ._status_18xp4_55{background-color:var(--cascivo-color-success)}._avatar_18xp4_2[data-status=offline] ._status_18xp4_55{background-color:var(--cascivo-color-text-muted)}._avatar_18xp4_2[data-status=busy] ._status_18xp4_55{background-color:var(--cascivo-color-destructive)}}