themelia-ui 2.0.1 → 3.1.0

package/dist/table-Ds_eO9av.js

@@ -0,0 +1,191 @@
+import "#core.css";
+import { c as e, s as t } from "./typography-DmeR05Er.js";
+import { t as n } from "./cx--CBrhWH0.js";
+import { i as r } from "./observers-CKohiJqU.js";
+import { t as i } from "./scroll-edges-CWjEJktN.js";
+import { ArrowDownIcon as a, ArrowUpDownIcon as o, ArrowUpIcon as s } from "lucide-react";
+import { createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import "#css/table.css";
+var v = {
+	container: "table__container___PFcS5",
+	table: "table__table___xUW2y",
+	row: "table__row___iC9ve",
+	body: "table__body___sX2OJ",
+	empty: "table__empty___VIa8g",
+	header: "table__header___9ER0m",
+	head: "table__head___kqMYr",
+	cell: "table__cell___yQ95q",
+	footer: "table__footer___6GVuX",
+	caption: "table__caption___VOknE",
+	alignStart: "table__alignStart___6mRdR",
+	alignCenter: "table__alignCenter___UrpRS",
+	alignEnd: "table__alignEnd___-ALxj",
+	wrap: "table__wrap___jIIek",
+	headSort: "table__headSort___pOGiz",
+	headSortIcon: "table__headSortIcon___hV30r"
+}, y = { empty: "No results." }, b = {
+	start: v.alignStart,
+	center: v.alignCenter,
+	end: v.alignEnd
+};
+function x(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "bigint";
+}
+var S = c(null), C = c(y), w = {
+	scrollable: !1,
+	start: !1,
+	end: !1
+};
+function T({ className: t, containerClassName: a, strings: o, stickyHeader: s = !1, ...c }) {
+	let u = p(() => ({
+		...y,
+		...o
+	}), [o]), _ = m(null), b = f(), [x, T] = h(!1), [E, D] = h(w), O = l(() => {
+		let e = _.current;
+		if (!e) return;
+		let t = i(e), n = {
+			scrollable: t.overflow || i(e, "vertical").overflow,
+			start: t.start,
+			end: t.end
+		};
+		D((e) => e.scrollable === n.scrollable && e.start === n.start && e.end === n.end ? e : n);
+	}, []);
+	d(() => {
+		let e = _.current;
+		if (!e) return;
+		O(), e.addEventListener("scroll", O, { passive: !0 });
+		let t = r([e, ...e.children], O);
+		return () => {
+			e.removeEventListener("scroll", O), t();
+		};
+	}, [O]);
+	let k = p(() => ({
+		id: b,
+		register: T
+	}), [b]), A = u.scrollRegion ?? c["aria-label"], j = c["aria-labelledby"];
+	return /* @__PURE__ */ g(S.Provider, {
+		value: k,
+		children: /* @__PURE__ */ g(C.Provider, {
+			value: u,
+			children: /* @__PURE__ */ g("div", {
+				ref: _,
+				tabIndex: E.scrollable ? 0 : void 0,
+				role: E.scrollable && (A || j || x) ? "group" : void 0,
+				"aria-label": E.scrollable ? A : void 0,
+				"aria-labelledby": E.scrollable && !A ? j ?? (x ? b : void 0) : void 0,
+				"data-sticky-header": s ? "" : void 0,
+				"data-fade-start": E.start ? "" : void 0,
+				"data-fade-end": E.end ? "" : void 0,
+				className: n("table--container", v.container, a),
+				children: /* @__PURE__ */ g("table", {
+					className: n("table--component", v.table, e({ size: "sm" }), t),
+					...c
+				})
+			})
+		})
+	});
+}
+function E({ className: e, ...t }) {
+	return /* @__PURE__ */ g("thead", {
+		className: n("table--header", v.header, e),
+		...t
+	});
+}
+function D({ className: e, ...t }) {
+	return /* @__PURE__ */ g("tbody", {
+		className: n("table--body", v.body, e),
+		...t
+	});
+}
+function O({ className: t, ...r }) {
+	return /* @__PURE__ */ g("tfoot", {
+		className: n("table--footer", v.footer, e({
+			size: "inherit",
+			weight: "medium"
+		}), t),
+		...r
+	});
+}
+function k({ className: e, ...t }) {
+	return /* @__PURE__ */ g("tr", {
+		className: n("table--row", v.row, e),
+		...t
+	});
+}
+function A({ className: r, children: i, align: c, wrap: l = !1, sortable: u, sortDirection: d = null, onSort: f, ...p }) {
+	let m = x(i) ? /* @__PURE__ */ g(t, {
+		tag: "span",
+		size: "inherit",
+		weight: "medium",
+		type: u && d ? "main" : "secondary",
+		className: "table--head-text",
+		children: i
+	}) : i, h = d === "ascending" ? s : d === "descending" ? a : o;
+	return /* @__PURE__ */ g("th", {
+		"aria-sort": u ? d ?? "none" : void 0,
+		className: n("table--head", v.head, e({
+			size: "inherit",
+			weight: "medium"
+		}), c && b[c], l && v.wrap, r),
+		...p,
+		children: u ? /* @__PURE__ */ _("button", {
+			type: "button",
+			className: n("table--head-sort", v.headSort),
+			"data-active": d ? "" : void 0,
+			onClick: f,
+			children: [m, /* @__PURE__ */ g(h, {
+				"aria-hidden": !0,
+				className: v.headSortIcon
+			})]
+		}) : m
+	});
+}
+function j({ className: e, children: r, align: i, wrap: a = !1, ...o }) {
+	return /* @__PURE__ */ g("td", {
+		className: n("table--cell", v.cell, i && b[i], a && v.wrap, e),
+		...o,
+		children: x(r) ? /* @__PURE__ */ g(t, {
+			tag: "span",
+			size: "inherit",
+			className: "table--cell-text",
+			children: r
+		}) : r
+	});
+}
+function M({ className: e, colSpan: r, children: i, ...a }) {
+	let o = u(C);
+	return /* @__PURE__ */ g("tr", {
+		className: n("table--row", v.row),
+		children: /* @__PURE__ */ g("td", {
+			colSpan: r,
+			className: n("table--empty", v.empty, e),
+			...a,
+			children: /* @__PURE__ */ g(t, {
+				tag: "span",
+				size: "sm",
+				type: "secondary",
+				children: i ?? o.empty
+			})
+		})
+	});
+}
+function N({ className: e, children: r, id: i, ...a }) {
+	let o = u(S), s = o?.register;
+	return d(() => {
+		if (s) return s(!0), () => s(!1);
+	}, [s]), /* @__PURE__ */ g("caption", {
+		id: i ?? o?.id,
+		className: n("table--caption", v.caption, e),
+		...a,
+		children: x(r) ? /* @__PURE__ */ g(t, {
+			tag: "span",
+			size: "inherit",
+			type: "secondary",
+			className: "table--caption-text",
+			children: r
+		}) : r
+	});
+}
+//#endregion
+export { M as a, E as c, j as i, k as l, D as n, O as o, N as r, A as s, T as t, y as u };

package/dist/tailwind.css

@@ -2,151 +2,100 @@
  * themelia-ui → Tailwind CSS v4.
  *
  * GENERATED by scripts/gen-tailwind-bridge.mjs — run `npm run tokens:tailwind`.
- * Edit the tokens, not this file. `verify docs-freshness` fails if the two disagree.
+ * Edit the theme, not this file. `verify docs-freshness` fails if the two disagree.
  *
- * Import it AFTER Tailwind and after the kit's stylesheet:
+ * Import it after Tailwind; the kit's own CSS arrives with its components:
  *
  *   @import "tailwindcss";
- *   @import "themelia-ui/core.css";
  *   @import "themelia-ui/tailwind.css";
  *
- * It is a theme declaration only — no utilities, no rules, nothing to ship at runtime that
- * Tailwind does not already emit. Tailwind drops every key no utility uses.
+ * A theme declaration only: no utilities and no rules. Tailwind drops every key no utility
+ * uses.
  *
- * Two things it does. It makes the kit's contract addressable from Tailwind, so
- * `bg-primary`, `text-muted-foreground`, `rounded-sm` and `p-md` mean what they mean
- * everywhere else in the kit. And it stops Tailwind's own defaults from overwriting the token
- * names the two projects share — both descend from shadcn, so 41 names collide and 23 of them
- * are silently re-pointed without this file. The kit's small radius, six type steps and three
- * font stacks quietly become Tailwind's, and `--text-sm` loses its type-factor fallback so
- * scoped type scaling stops working. The 39 restated names below are the fix.
+ * It makes the theme addressable from Tailwind, so `bg-primary`, `text-muted-foreground`,
+ * `rounded-sm` and `p-padding` mean what they mean in the kit, and `text-sm` follows the type
+ * factor as Text does. And it keeps Tailwind's defaults
+ * off the names both declare: `--radius-sm`, `--shadow-lg`, the type steps and the font stacks
+ * would otherwise take Tailwind's values. A name the kit leaves unset (`initial`) removes
+ * Tailwind's default, so the kit's fallback holds.
  *
- * `inline` is load-bearing, not a style choice. Without it every key resolves once at
- * `:root`, and `bg-primary` inside a `.dark` subtree paints the light colour. The second
- * block is the exception that proves it: literals, which resolve the same everywhere and
- * must stay readable at the element so a theme can move them.
+ * `inline` is load-bearing in the first block: a plain @theme resolves each key once at
+ * `:root`, and `bg-primary` in a dark region would paint the light colour. The second block
+ * restates literals, which must stay readable at the element so a theme can move them.
  */
 @theme inline {
 	/* ── colour ────────────────────────────────────────────────────────────────────
-	 * The key is Tailwind's, the value reads the kit's. Nothing of the kit's is overridden,
-	 * so a consumer re-pointing a token at any scope — including .dark — is followed.
+	 * The key is Tailwind's, the value reads the kit's variable at the element.
 	 */
-	--color-background:                 var(--background);
-	--color-foreground:                 var(--foreground);
-	--color-card:                       var(--card);
-	--color-card-foreground:            var(--card-foreground);
-	--color-popover:                    var(--popover);
-	--color-popover-foreground:         var(--popover-foreground);
-	--color-primary:                    var(--primary);
-	--color-primary-foreground:         var(--primary-foreground);
-	--color-secondary:                  var(--secondary);
-	--color-secondary-foreground:       var(--secondary-foreground);
-	--color-muted:                      var(--muted);
-	--color-muted-foreground:           var(--muted-foreground);
-	--color-accent:                     var(--accent);
-	--color-accent-foreground:          var(--accent-foreground);
-	--color-destructive:                var(--destructive);
-	--color-destructive-foreground:     var(--destructive-foreground);
-	--color-border:                     var(--border);
-	--color-input:                      var(--input);
-	--color-ring:                       var(--ring);
-	--color-chart-1:                    var(--chart-1);
-	--color-chart-2:                    var(--chart-2);
-	--color-chart-3:                    var(--chart-3);
-	--color-chart-4:                    var(--chart-4);
-	--color-chart-5:                    var(--chart-5);
-	--color-sidebar:                    var(--sidebar);
-	--color-sidebar-foreground:         var(--sidebar-foreground);
-	--color-sidebar-primary:            var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent:             var(--sidebar-accent);
-	--color-sidebar-accent-foreground:  var(--sidebar-accent-foreground);
-	--color-sidebar-border:             var(--sidebar-border);
-	--color-sidebar-ring:               var(--sidebar-ring);
-	--color-success:                    var(--success);
-	--color-success-foreground:         var(--success-foreground);
-	--color-info:                       var(--info);
-	--color-info-foreground:            var(--info-foreground);
-	--color-link:                       var(--link-color);
-	--color-primary-accent:             var(--primary-accent);
-	--color-warning:                    var(--warning);
-	--color-warning-foreground:         var(--warning-foreground);
-	--color-warning-accent:             var(--warning-accent);
-	--color-destructive-accent:         var(--destructive-accent);
-	--color-inverse-background:         var(--inverse-background);
-	--color-inverse-foreground:         var(--inverse-foreground);
-	--color-inverse-muted:              var(--inverse-muted);
-	--color-inverse-subtle:             var(--inverse-subtle);
-	--color-inverse-disabled:           var(--inverse-disabled);
-	--color-inverse-surface:            var(--inverse-surface);
-	--color-inverse-surface-strong:     var(--inverse-surface-strong);
-	--color-inverse-border:             var(--inverse-border);
-	--color-inverse-decoration:         var(--inverse-decoration);
+	--color-accent:                    var(--accent);
+	--color-accent-foreground:         var(--accent-foreground);
+	--color-background:                var(--background);
+	--color-border:                    var(--border);
+	--color-card:                      var(--card);
+	--color-card-foreground:           var(--card-foreground);
+	--color-chart-1:                   var(--chart-1);
+	--color-chart-2:                   var(--chart-2);
+	--color-chart-3:                   var(--chart-3);
+	--color-chart-4:                   var(--chart-4);
+	--color-chart-5:                   var(--chart-5);
+	--color-destructive:               var(--destructive);
+	--color-destructive-foreground:    var(--destructive-foreground);
+	--color-foreground:                var(--foreground);
+	--color-info:                      var(--info);
+	--color-info-foreground:           var(--info-foreground);
+	--color-input:                     var(--input);
+	--color-link:                      var(--link);
+	--color-muted:                     var(--muted);
+	--color-muted-foreground:          var(--muted-foreground);
+	--color-overlay-backdrop:          var(--overlay-backdrop);
+	--color-popover:                   var(--popover);
+	--color-popover-foreground:        var(--popover-foreground);
+	--color-primary:                   var(--primary);
+	--color-primary-foreground:        var(--primary-foreground);
+	--color-ring:                      var(--ring);
+	--color-secondary:                 var(--secondary);
+	--color-secondary-foreground:      var(--secondary-foreground);
+	--color-sidebar:                   var(--sidebar);
+	--color-sidebar-accent:            var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border:            var(--sidebar-border);
+	--color-sidebar-foreground:        var(--sidebar-foreground);
+	--color-sidebar-ring:              var(--sidebar-ring);
+	--color-success:                   var(--success);
+	--color-success-foreground:        var(--success-foreground);
+	--color-warning:                   var(--warning);
+	--color-warning-foreground:        var(--warning-foreground);
 
 	/* ── spacing ───────────────────────────────────────────────────────────────────
-	 * Tailwind's namespace is `--spacing-*`, the kit's ladder is `--space-*`. A different name,
-	 * so `p-md` follows a scoped `--density-scale` the way the kit's own padding does.
+	 * The kit's four lengths, which density and scale move.
 	 */
-	--spacing-2xs: var(--space-2xs);
-	--spacing-xs:  var(--space-xs);
-	--spacing-sm:  var(--space-sm);
-	--spacing-md:  var(--space-md);
-	--spacing-lg:  var(--space-lg);
-	--spacing-xl:  var(--space-xl);
-	--spacing-2xl: var(--space-2xl);
+	--spacing-padding:    var(--padding);
+	--spacing-padding-sm: var(--padding-sm);
+	--spacing-gap:        var(--gap);
+	--spacing-gap-sm:     var(--gap-sm);
 
-	/* ── names the kit and Tailwind both use — formulas ────────────────────────────
-	 * These restate the kit's own declared values. `--text-sm: var(--text-sm)` would
-	 * reference itself and resolve to nothing; restating makes the override a no-op and
-	 * takes Tailwind's default — which silently re-points every kit token the two share — out of the way.
-	 * Inlined, each formula reads its inputs at the element.
+	/* ── type ──────────────────────────────────────────────────────────────────────
+	 * Each step times the type factor, as Text sizes it; nothing reaches `:root`.
 	 */
-	--shadow-2xs:    0 1px 2px 0px color-mix(in oklab, var(--shadow-ink) 4%, transparent);
-	--shadow-xs:     0 1px 2px 0px color-mix(in oklab, var(--shadow-ink) 6%, transparent), 0 1px 1px -1px color-mix(in oklab, var(--shadow-ink) 6%, transparent);
-	--shadow-sm:     0 1px 2px 0px color-mix(in oklab, var(--shadow-ink) 6%, transparent), 0 2px 4px -2px color-mix(in oklab, var(--shadow-ink) 10%, transparent);
-	--shadow-md:     0 2px 4px -1px color-mix(in oklab, var(--shadow-ink) 8%, transparent), 0 8px 16px -8px color-mix(in oklab, var(--shadow-ink) 16%, transparent);
-	--shadow-lg:     0 4px 8px -2px color-mix(in oklab, var(--shadow-ink) 10%, transparent), 0 12px 24px -12px color-mix(in oklab, var(--shadow-ink) 18%, transparent);
-	--shadow-xl:     0 8px 16px -4px color-mix(in oklab, var(--shadow-ink) 12%, transparent), 0 20px 40px -20px color-mix(in oklab, var(--shadow-ink) 22%, transparent);
-	--shadow-2xl:    0 16px 32px -8px color-mix(in oklab, var(--shadow-ink) 18%, transparent), 0 32px 64px -28px color-mix(in oklab, var(--shadow-ink) 28%, transparent);
-	--text-xs:       calc(0.75rem * var(--text-scale, var(--scale)));
-	--text-pxs:      calc(0.8125rem * var(--text-scale, var(--scale)));
-	--text-sm:       calc(0.875rem * var(--text-scale, var(--scale)));
-	--text-base:     calc(1rem * var(--text-scale, var(--scale)));
-	--text-lg:       calc(1.125rem * var(--text-scale, var(--scale)));
-	--text-xl:       calc(1.25rem * var(--text-scale, var(--scale)));
-	--text-2xl:      calc(1.5rem * var(--text-scale, var(--scale)));
-	--font-heading:  var(--font-sans);
-	--animate-ping:  ping 1s var(--ease-out) infinite;
-	--animate-pulse: pulse 2s var(--ease-in-out) infinite;
+	--text-2xl:  calc(1.5rem * var(--text-scale));
+	--text-base: calc(1rem * var(--text-scale));
+	--text-lg:   calc(1.125rem * var(--text-scale));
+	--text-pxs:  calc(0.8125rem * var(--text-scale));
+	--text-sm:   calc(0.875rem * var(--text-scale));
+	--text-xl:   calc(1.25rem * var(--text-scale));
+	--text-xs:   calc(0.75rem * var(--text-scale));
 }
 
 @theme {
-	/* ── names the kit and Tailwind both use — literals ────────────────────────────
-	 * Not inline: an inlined literal is frozen into the utility, so a theme or provider that
-	 * re-points one of these would move the kit and not `rounded-sm` or `font-sans`. Here the
-	 * utility reads the variable at the element, and the value Tailwind emits to `:root` is
-	 * the kit's own, so it overrides nothing.
+	/* ── names the kit and Tailwind both use ───────────────────────────────────────
+	 * The kit's own values, so Tailwind's defaults replace nothing.
 	 */
-	--radius-sm:              0.5rem;
-	--radius-pill:            999px;
-	--text-xs--line-height:   calc(1 / 0.75);
-	--text-pxs--line-height:  calc(1.125 / 0.8125);
-	--text-sm--line-height:   calc(1.25 / 0.875);
-	--text-base--line-height: calc(1.5 / 1);
-	--text-lg--line-height:   calc(1.75 / 1.125);
-	--text-xl--line-height:   calc(1.75 / 1.25);
-	--text-2xl--line-height:  calc(2 / 1.5);
-	--font-sans:              'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
-	--font-serif:             Merriweather, ui-serif, serif;
-	--font-mono:              'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-	--leading-none:           1;
-	--leading-tight:          1.25;
-	--leading-snug:           1.375;
-	--leading-normal:         1.5;
-	--leading-relaxed:        1.625;
-	--tracking-tight:         -0.025em;
-	--tracking-widest:        0.1em;
-	--ease-out:               cubic-bezier(0.23, 1, 0.32, 1);
-	--ease-in-out:            cubic-bezier(0.4, 0, 0.2, 1);
-	--animate-spin:           spin 1s linear infinite;
+	--font-heading: initial;
+	--font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+	--font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+	--radius:       1rem;
+	--radius-pill:  999px;
+	--radius-sm:    0.5rem;
+	--shadow:       0 1px 2px 0 oklch(0 0 0 / 6%), 0 1px 1px -1px oklch(0 0 0 / 6%);
+	--shadow-lg:    0 4px 8px -2px oklch(0 0 0 / 10%), 0 12px 24px -12px oklch(0 0 0 / 18%);
 }