@cascivo/react 0.3.3 → 0.3.7

package/dist/steps/steps.js

@@ -0,0 +1,32 @@
+"use client";
+
+import e from "./steps.module.js";
+import { useSignal as t, useSignals as n } from "@cascivo/core";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region ../components/src/steps/steps.tsx
+function a({ steps: a, activeStep: o, orientation: s = "horizontal", className: c }) {
+	n();
+	let l = t(o ?? 0);
+	return l.value = o ?? l.value, /* @__PURE__ */ r("ol", {
+		className: [e.steps, c].filter(Boolean).join(" "),
+		"data-orientation": s,
+		"aria-label": "Steps",
+		children: a.map((t, n) => {
+			let a = t.state ?? (n < l.value ? "complete" : n === l.value ? "active" : "pending");
+			return /* @__PURE__ */ i("li", {
+				className: e.step,
+				"data-state": a,
+				"aria-current": a === "active" ? "step" : void 0,
+				children: [/* @__PURE__ */ r("div", {
+					className: e.circle,
+					children: a === "complete" ? "✓" : a === "error" ? "✕" : n + 1
+				}), /* @__PURE__ */ r("span", {
+					className: e.label,
+					children: t.label
+				})]
+			}, n);
+		})
+	});
+}
+//#endregion
+export { a as Steps };

package/dist/steps/steps.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+import './steps.css';
+var e = {
+	steps: "_steps_1xps1_2",
+	step: "_step_1xps1_2",
+	circle: "_circle_1xps1_42",
+	label: "_label_1xps1_82"
+};
+//#endregion
+export { e as default };

package/dist/structured-list/structured-list.css

@@ -0,0 +1 @@
+@layer cascivo.component{._list_t5qxi_2{inline-size:100%;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-block-end:1px solid var(--cascivo-color-border);flex-direction:column;display:flex}._headerRow_t5qxi_12{align-items:center;gap:var(--cascivo-space-4);border-block-end:1px solid var(--cascivo-color-border);display:flex}._headerCell_t5qxi_19{padding-block:var(--cascivo-space-3);padding-inline:var(--cascivo-space-4);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text-subtle);text-align:start;flex:1}._body_t5qxi_28{flex-direction:column;display:flex}._row_t5qxi_33{align-items:center;gap:var(--cascivo-space-4);border-block-start:1px solid var(--cascivo-color-border);display:flex}._body_t5qxi_28 ._row_t5qxi_33:first-child{border-block-start:none}._cell_t5qxi_44{padding-block:var(--cascivo-space-3);padding-inline:var(--cascivo-space-4);text-align:start;flex:1}._selectable_t5qxi_52 ._row_t5qxi_33{cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out)}._selectable_t5qxi_52 ._row_t5qxi_33:hover{background-color:var(--cascivo-color-bg-subtle)}._selectable_t5qxi_52 ._row_t5qxi_33:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._selectable_t5qxi_52 ._row_t5qxi_33[data-selected]{background-color:var(--cascivo-color-bg-subtle)}._selectable_t5qxi_52 ._row_t5qxi_33>._cell_t5qxi_44:first-child,._selectable_t5qxi_52 ._headerRow_t5qxi_12>._headerCell_t5qxi_19:first-child{flex:none;inline-size:2.5rem}._indicator_t5qxi_77{border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-full,9999px);block-size:1rem;inline-size:1rem;display:inline-block}._row_t5qxi_33[data-selected] ._indicator_t5qxi_77{border-color:var(--cascivo-color-primary);background-color:var(--cascivo-color-surface);border-width:.3125rem}}@media (forced-colors:active){._selectable_t5qxi_52 ._row_t5qxi_33:focus-visible{outline-offset:-2px;outline:2px solid highlight}._indicator_t5qxi_77{border-color:buttontext}._row_t5qxi_33[data-selected] ._indicator_t5qxi_77{border-color:highlight}}

package/dist/structured-list/structured-list.js

@@ -0,0 +1,101 @@
+"use client";
+
+import e from "./structured-list.module.js";
+import { cn as t, useControllableSignal as n, useRovingFocus as r, useSignals as i } from "@cascivo/core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useId as s } from "react";
+//#region ../components/src/structured-list/structured-list.tsx
+function c(n) {
+	let { items: r, headers: i, selectable: s = !1, className: c, "aria-label": u } = n;
+	return s ? /* @__PURE__ */ a(l, { ...n }) : /* @__PURE__ */ o("div", {
+		role: "table",
+		"aria-label": u,
+		className: t(e.list, c),
+		children: [i && /* @__PURE__ */ a("div", {
+			role: "row",
+			className: e.headerRow,
+			children: i.map((t, n) => /* @__PURE__ */ a("div", {
+				role: "columnheader",
+				className: e.headerCell,
+				children: t
+			}, n))
+		}), /* @__PURE__ */ a("div", {
+			role: "rowgroup",
+			className: e.body,
+			children: r.map((t) => /* @__PURE__ */ a("div", {
+				role: "row",
+				className: e.row,
+				children: t.cells.map((t, n) => /* @__PURE__ */ a("div", {
+					role: "cell",
+					className: e.cell,
+					children: t
+				}, n))
+			}, t.id))
+		})]
+	});
+}
+function l({ items: c, headers: l, value: u, defaultValue: d, onSelect: f, className: p, "aria-label": m }) {
+	i();
+	let h = s(), [g, _] = n({
+		value: u,
+		defaultValue: d ?? c.find((e) => e.selected)?.id ?? "",
+		onChange: f
+	}), v = r({
+		orientation: "vertical",
+		loop: !1
+	}), y = (e) => {
+		_(e);
+	};
+	return /* @__PURE__ */ o("div", {
+		role: "radiogroup",
+		"aria-label": m,
+		className: t(e.list, e.selectable, p),
+		children: [l && /* @__PURE__ */ o("div", {
+			className: e.headerRow,
+			children: [/* @__PURE__ */ a("div", {
+				className: e.headerCell,
+				"aria-hidden": "true"
+			}), l.map((t, n) => /* @__PURE__ */ a("div", {
+				className: e.headerCell,
+				children: t
+			}, n))]
+		}), /* @__PURE__ */ a("div", {
+			className: e.body,
+			children: c.map((t, n) => {
+				let r = g.value === t.id, { ref: i, ...s } = v.getItemProps(n);
+				return /* @__PURE__ */ o("div", {
+					role: "radio",
+					"aria-checked": r,
+					"aria-labelledby": `${h}-${t.id}-label`,
+					"data-selected": r || void 0,
+					className: e.row,
+					ref: i,
+					...s,
+					onClick: () => y(t.id),
+					onKeyDown: (e) => {
+						s.onKeyDown(e), (e.key === "Enter" || e.key === " ") && (e.preventDefault(), y(t.id));
+					},
+					children: [
+						/* @__PURE__ */ a("div", {
+							className: e.cell,
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ a("span", { className: e.indicator })
+						}),
+						/* @__PURE__ */ a("div", {
+							className: e.cell,
+							id: `${h}-${t.id}-label`,
+							children: t.cells[0]
+						}),
+						t.cells.slice(1).map((t, n) => /* @__PURE__ */ a("div", {
+							role: "cell",
+							className: e.cell,
+							children: t
+						}, n))
+					]
+				}, t.id);
+			})
+		})]
+	});
+}
+//#endregion
+export { c as StructuredList };

package/dist/structured-list/structured-list.module.js

@@ -0,0 +1,15 @@
+"use client";
+
+import './structured-list.css';
+var e = {
+	list: "_list_t5qxi_2",
+	headerRow: "_headerRow_t5qxi_12",
+	headerCell: "_headerCell_t5qxi_19",
+	body: "_body_t5qxi_28",
+	row: "_row_t5qxi_33",
+	cell: "_cell_t5qxi_44",
+	selectable: "_selectable_t5qxi_52",
+	indicator: "_indicator_t5qxi_77"
+};
+//#endregion
+export { e as default };