@-reddacted-/react-ui 0.3.1 → 0.4.0

package/dist/style/stackCss.js

@@ -0,0 +1,21 @@
+// Flex layout, usable as a bare class (`rui-stack`) or through the Stack component.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+export const stackCss = `
+:where(.rui-stack) {
+  display: flex;
+  flex-direction: var(--rui-stack-direction, column);
+  flex-wrap: var(--rui-stack-wrap, nowrap);
+  gap: var(--rui-stack-gap, 0.75rem);
+  align-items: var(--rui-stack-align, stretch);
+  justify-content: var(--rui-stack-justify, flex-start);
+}
+/* Custom properties inherit: a nested stack must not take its parent's settings. */
+:where(.rui-stack) > * {
+  --rui-stack-direction: initial;
+  --rui-stack-wrap: initial;
+  --rui-stack-gap: initial;
+  --rui-stack-align: initial;
+  --rui-stack-justify: initial;
+}
+`;

package/dist/style/statusCss.d.ts

@@ -0,0 +1,2 @@
+export declare const statusCss = "\n:where(.rui-status) {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--rui-status-gap, 0.75rem);\n  padding: var(--rui-status-padding, 2rem);\n  text-align: center;\n}\n:where(.rui-status-icon) {\n  display: flex;\n  color: var(--color-text-muted);\n  font-size: var(--rui-status-icon-size, 2rem);\n}\n:where(.rui-status-title) {\n  margin: 0;\n  color: var(--color-text);\n  font-size: 0.9375rem;\n  font-weight: 600;\n}\n:where(.rui-status-description) {\n  margin: 0;\n  max-width: 40ch;\n  color: var(--color-text-muted);\n  font-size: 0.875rem;\n}\n:where(.rui-status-action) {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n}\n";
+//# sourceMappingURL=statusCss.d.ts.map

package/dist/style/statusCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusCss.d.ts","sourceRoot":"","sources":["../../src/style/statusCss.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,8tBAiCrB,CAAA"}

package/dist/style/statusCss.js

@@ -0,0 +1,38 @@
+// Status block (loading, empty, error…): `rui-status` with optional `rui-status-icon`,
+// `rui-status-title`, `rui-status-description` and `rui-status-action` children.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+export const statusCss = `
+:where(.rui-status) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--rui-status-gap, 0.75rem);
+  padding: var(--rui-status-padding, 2rem);
+  text-align: center;
+}
+:where(.rui-status-icon) {
+  display: flex;
+  color: var(--color-text-muted);
+  font-size: var(--rui-status-icon-size, 2rem);
+}
+:where(.rui-status-title) {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+:where(.rui-status-description) {
+  margin: 0;
+  max-width: 40ch;
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+:where(.rui-status-action) {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+`;

package/dist/style/tableCss.d.ts

@@ -0,0 +1,2 @@
+export declare const tableCss = "\n:where(.rui-table-wrap) {\n  overflow: auto;\n}\n:where(.rui-table) {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  color: var(--color-text);\n  font-size: 0.875rem;\n}\n:where(.rui-table) :where(th, td) {\n  padding: var(--rui-table-cell-padding, 0.625rem 0.875rem);\n  text-align: left;\n  vertical-align: middle;\n}\n:where(.rui-table) :where(th) {\n  background-color: var(--rui-table-header-bg, var(--color-surface));\n  color: var(--color-text-muted);\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n:where(.rui-table:not([data-borders=\"none\"])) :where(th, td) {\n  border-bottom: 1px solid var(--rui-table-border, var(--color-border));\n}\n:where(.rui-table:not([data-borders=\"none\"])) :where(tbody tr:last-child) > :where(td, th) {\n  border-bottom: none;\n}\n:where(.rui-table[data-borders=\"grid\"]) {\n  border: 1px solid var(--rui-table-border, var(--color-border));\n}\n:where(.rui-table[data-borders=\"grid\"]) :where(th, td) + :where(th, td) {\n  border-left: 1px solid var(--rui-table-border, var(--color-border));\n}\n\n:where(.rui-table[data-sticky-header]) :where(thead th) {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n:where(.rui-table[data-hover]) :where(tbody tr:hover) > :where(td, th) {\n  background-color: color-mix(in srgb, var(--rui-table-accent, var(--color-primary)) 6%, transparent);\n}\n:where(.rui-table) :where(tbody tr[aria-selected]) {\n  cursor: pointer;\n}\n:where(.rui-table) :where(tr[aria-selected=\"true\"]) > :where(td, th) {\n  background-color: color-mix(in srgb, var(--rui-table-accent, var(--color-primary)) 12%, transparent);\n}\n:where(.rui-table) :where(tbody tr:focus-visible) {\n  outline: 2px solid var(--rui-table-accent, var(--color-primary));\n  outline-offset: -2px;\n}\n\n:where(.rui-table) :where(th[aria-sort=\"ascending\"], th[aria-sort=\"descending\"]) {\n  color: var(--color-text);\n}\n:where(.rui-table) :where(th[aria-sort=\"ascending\"])::after {\n  content: \" \u2191\";\n}\n:where(.rui-table) :where(th[aria-sort=\"descending\"])::after {\n  content: \" \u2193\";\n}\n:where(.rui-table-sort) {\n  padding: 0;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n  cursor: pointer;\n}\n:where(.rui-table-sort:focus-visible) {\n  outline: 2px solid var(--rui-table-accent, var(--color-primary));\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n:where(.rui-table-empty) {\n  padding: 2rem 1rem;\n  color: var(--color-text-muted);\n  text-align: center;\n}\n";
+//# sourceMappingURL=tableCss.d.ts.map

package/dist/style/tableCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableCss.d.ts","sourceRoot":"","sources":["../../src/style/tableCss.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,QAAQ,09EAoFpB,CAAA"}

package/dist/style/tableCss.js

@@ -0,0 +1,92 @@
+// Themed native table: `rui-table` on a <table>, inside an optional `rui-table-wrap`
+// (horizontal scroll, and the scroll container a sticky header needs).
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const accent = "var(--rui-table-accent, var(--color-primary))";
+const border = "1px solid var(--rui-table-border, var(--color-border))";
+const cell = ":where(.rui-table) :where(th, td)";
+export const tableCss = `
+:where(.rui-table-wrap) {
+  overflow: auto;
+}
+:where(.rui-table) {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: var(--color-text);
+  font-size: 0.875rem;
+}
+${cell} {
+  padding: var(--rui-table-cell-padding, 0.625rem 0.875rem);
+  text-align: left;
+  vertical-align: middle;
+}
+:where(.rui-table) :where(th) {
+  background-color: var(--rui-table-header-bg, var(--color-surface));
+  color: var(--color-text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+:where(.rui-table:not([data-borders="none"])) :where(th, td) {
+  border-bottom: ${border};
+}
+:where(.rui-table:not([data-borders="none"])) :where(tbody tr:last-child) > :where(td, th) {
+  border-bottom: none;
+}
+:where(.rui-table[data-borders="grid"]) {
+  border: ${border};
+}
+:where(.rui-table[data-borders="grid"]) :where(th, td) + :where(th, td) {
+  border-left: ${border};
+}
+
+:where(.rui-table[data-sticky-header]) :where(thead th) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+:where(.rui-table[data-hover]) :where(tbody tr:hover) > :where(td, th) {
+  background-color: color-mix(in srgb, ${accent} 6%, transparent);
+}
+:where(.rui-table) :where(tbody tr[aria-selected]) {
+  cursor: pointer;
+}
+:where(.rui-table) :where(tr[aria-selected="true"]) > :where(td, th) {
+  background-color: color-mix(in srgb, ${accent} 12%, transparent);
+}
+:where(.rui-table) :where(tbody tr:focus-visible) {
+  outline: 2px solid ${accent};
+  outline-offset: -2px;
+}
+
+:where(.rui-table) :where(th[aria-sort="ascending"], th[aria-sort="descending"]) {
+  color: var(--color-text);
+}
+:where(.rui-table) :where(th[aria-sort="ascending"])::after {
+  content: " ↑";
+}
+:where(.rui-table) :where(th[aria-sort="descending"])::after {
+  content: " ↓";
+}
+:where(.rui-table-sort) {
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+:where(.rui-table-sort:focus-visible) {
+  outline: 2px solid ${accent};
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+:where(.rui-table-empty) {
+  padding: 2rem 1rem;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+`;

package/dist/style/tabsCss.d.ts

@@ -0,0 +1,2 @@
+export declare const tabsCss = "\n:where(.rui-tabs) {\n  display: flex;\n  gap: 0.25rem;\n}\n:where(.rui-tabs[aria-orientation=\"vertical\"]) {\n  flex-direction: column;\n  align-items: stretch;\n}\n:where(.rui-tabs) > :where(a, button, [role=\"tab\"]) {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.875rem;\n  border: none;\n  border-radius: 6px;\n  background-color: transparent;\n  color: var(--color-text-muted);\n  font: inherit;\n  font-size: 0.875rem;\n  font-weight: 500;\n  text-decoration: none;\n  white-space: nowrap;\n  cursor: pointer;\n}\n:where(.rui-tabs) > :where(a, button, [role=\"tab\"]):where(:hover) {\n  color: var(--color-text);\n}\n:where(.rui-tabs) > :where(a, button, [role=\"tab\"]):where(:focus-visible) {\n  outline: 2px solid var(--rui-tabs-color, var(--color-primary));\n  outline-offset: -2px;\n}\n:where(.rui-tabs) > :where(a, button, [role=\"tab\"]):where(:disabled, [aria-disabled=\"true\"]) {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n:where(.rui-tabs:not([data-variant=\"pill\"]):not([aria-orientation=\"vertical\"])) {\n  border-bottom: 1px solid var(--color-border);\n}\n:where(.rui-tabs:not([data-variant=\"pill\"]):not([aria-orientation=\"vertical\"])) > :where(a, button, [role=\"tab\"]) {\n  margin-bottom: -1px;\n  border-bottom: 2px solid transparent;\n  border-radius: 6px 6px 0 0;\n}\n:where(.rui-tabs[aria-orientation=\"vertical\"]:not([data-variant=\"pill\"])) {\n  border-right: 1px solid var(--color-border);\n}\n:where(.rui-tabs[aria-orientation=\"vertical\"]:not([data-variant=\"pill\"])) > :where(a, button, [role=\"tab\"]) {\n  margin-right: -1px;\n  border-right: 2px solid transparent;\n  border-radius: 6px 0 0 6px;\n}\n:where(.rui-tabs:not([data-variant=\"pill\"])) > :where([aria-selected=\"true\"], [aria-current=\"page\"]) {\n  border-color: var(--rui-tabs-color, var(--color-primary));\n  color: var(--color-text);\n}\n\n:where(.rui-tabs[data-variant=\"pill\"]) > :where([aria-selected=\"true\"], [aria-current=\"page\"]) {\n  background-color: color-mix(in srgb, var(--rui-tabs-color, var(--color-primary)) 12%, transparent);\n  color: var(--rui-tabs-color, var(--color-primary));\n}\n";
+//# sourceMappingURL=tabsCss.d.ts.map

package/dist/style/tabsCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabsCss.d.ts","sourceRoot":"","sources":["../../src/style/tabsCss.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,OAAO,0nEA8DnB,CAAA"}

package/dist/style/tabsCss.js

@@ -0,0 +1,72 @@
+// Tabs look, usable as a bare class (`rui-tabs` on the tab list, the project owning state
+// and panels) or through the Tabs component. Tabs are the direct `a` / `button` /
+// `[role=tab]` children; the active one has `aria-selected="true"` or `aria-current="page"`.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const tab = `:where(a, button, [role="tab"])`;
+const active = `:where([aria-selected="true"], [aria-current="page"])`;
+const underline = `:where(.rui-tabs:not([data-variant="pill"]):not([aria-orientation="vertical"]))`;
+const underlineVertical = `:where(.rui-tabs[aria-orientation="vertical"]:not([data-variant="pill"]))`;
+export const tabsCss = `
+:where(.rui-tabs) {
+  display: flex;
+  gap: 0.25rem;
+}
+:where(.rui-tabs[aria-orientation="vertical"]) {
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(.rui-tabs) > ${tab} {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.875rem;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--color-text-muted);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+:where(.rui-tabs) > ${tab}:where(:hover) {
+  color: var(--color-text);
+}
+:where(.rui-tabs) > ${tab}:where(:focus-visible) {
+  outline: 2px solid var(--rui-tabs-color, var(--color-primary));
+  outline-offset: -2px;
+}
+:where(.rui-tabs) > ${tab}:where(:disabled, [aria-disabled="true"]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+${underline} {
+  border-bottom: 1px solid var(--color-border);
+}
+${underline} > ${tab} {
+  margin-bottom: -1px;
+  border-bottom: 2px solid transparent;
+  border-radius: 6px 6px 0 0;
+}
+${underlineVertical} {
+  border-right: 1px solid var(--color-border);
+}
+${underlineVertical} > ${tab} {
+  margin-right: -1px;
+  border-right: 2px solid transparent;
+  border-radius: 6px 0 0 6px;
+}
+:where(.rui-tabs:not([data-variant="pill"])) > ${active} {
+  border-color: var(--rui-tabs-color, var(--color-primary));
+  color: var(--color-text);
+}
+
+:where(.rui-tabs[data-variant="pill"]) > ${active} {
+  background-color: color-mix(in srgb, var(--rui-tabs-color, var(--color-primary)) 12%, transparent);
+  color: var(--rui-tabs-color, var(--color-primary));
+}
+`;

package/dist/style/toLength.d.ts

@@ -0,0 +1,4 @@
+/** Numbers are pixels; strings are any CSS length, kept as is. */
+export declare function toLength(value: string | number): string;
+export declare function toLength(value: string | number | undefined): string | undefined;
+//# sourceMappingURL=toLength.d.ts.map

package/dist/style/toLength.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toLength.d.ts","sourceRoot":"","sources":["../../src/style/toLength.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;AACxD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA"}

package/dist/style/toLength.js

@@ -0,0 +1,3 @@
+export function toLength(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}

package/dist/style/tooltipCss.d.ts

@@ -0,0 +1,2 @@
+export declare const tooltipCss = "\n:where(.rui-tooltip) {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 2100;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: var(--rui-tooltip-max-width, 240px);\n  padding: 0.375rem 0.625rem;\n  border-radius: 6px;\n  background-color: var(--rui-tooltip-bg, var(--color-text));\n  color: var(--rui-tooltip-color, var(--color-bg));\n  font-size: 0.8125rem;\n  line-height: 1.4;\n  overflow-wrap: break-word;\n  pointer-events: none;\n  animation: rui-tooltip-in 120ms ease-out;\n}\n/* Not positioned yet: hidden rather than shown at the corner or at its previous anchor. */\n:where(.rui-tooltip:not([data-placement])) {\n  visibility: hidden;\n  animation: none;\n}\n:where(.rui-tooltip-arrow) {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background-color: inherit;\n  transform: rotate(45deg);\n}\n@media (prefers-reduced-motion: reduce) {\n  :where(.rui-tooltip) {\n    animation: none;\n  }\n}\n@keyframes rui-tooltip-in {\n  from { opacity: 0; }\n}\n";
+//# sourceMappingURL=tooltipCss.d.ts.map

package/dist/style/tooltipCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipCss.d.ts","sourceRoot":"","sources":["../../src/style/tooltipCss.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,s+BAuCtB,CAAA"}

package/dist/style/tooltipCss.js

@@ -0,0 +1,44 @@
+// Tooltip bubble, shared by the Tooltip component and the `data-rui-tooltip` attribute.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+// Above the overlay stack (from 1000) and the toasts (2000): a tooltip can come from a modal.
+export const tooltipCss = `
+:where(.rui-tooltip) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2100;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: var(--rui-tooltip-max-width, 240px);
+  padding: 0.375rem 0.625rem;
+  border-radius: 6px;
+  background-color: var(--rui-tooltip-bg, var(--color-text));
+  color: var(--rui-tooltip-color, var(--color-bg));
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  overflow-wrap: break-word;
+  pointer-events: none;
+  animation: rui-tooltip-in 120ms ease-out;
+}
+/* Not positioned yet: hidden rather than shown at the corner or at its previous anchor. */
+:where(.rui-tooltip:not([data-placement])) {
+  visibility: hidden;
+  animation: none;
+}
+:where(.rui-tooltip-arrow) {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: inherit;
+  transform: rotate(45deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.rui-tooltip) {
+    animation: none;
+  }
+}
+@keyframes rui-tooltip-in {
+  from { opacity: 0; }
+}
+`;

package/dist/style/useStyle.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Injects `css` once into document.head under `data-rui="<id>"`.
+ * Runs before layout (no flash) and is never removed: the CSS is static and light,
+ * keeping it avoids flicker when the component remounts.
+ */
+export declare function useStyle(id: string, css: string): void;
+//# sourceMappingURL=useStyle.d.ts.map

package/dist/style/useStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyle.d.ts","sourceRoot":"","sources":["../../src/style/useStyle.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAQtD"}

package/dist/style/useStyle.js

@@ -0,0 +1,16 @@
+import { useInsertionEffect } from "react";
+/**
+ * Injects `css` once into document.head under `data-rui="<id>"`.
+ * Runs before layout (no flash) and is never removed: the CSS is static and light,
+ * keeping it avoids flicker when the component remounts.
+ */
+export function useStyle(id, css) {
+    useInsertionEffect(() => {
+        if (document.head.querySelector(`style[data-rui="${id}"]`))
+            return;
+        const style = document.createElement("style");
+        style.dataset.rui = id;
+        style.textContent = css;
+        document.head.appendChild(style);
+    }, [id, css]);
+}

package/dist/theme/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAI9D,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,aAAa,EAAE,WAAW,CAAA;IAC1B,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,EAAE,WAAW,CAAA;IACxB,KAAK,EAAE,UAAU,CAAA;IACjB,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC5B,CAAA;AAID,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAOD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAA4B,EAC5B,YAA4B,GAC7B,EAAE,kBAAkB,+BA6DpB;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAmB9D,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,aAAa,EAAE,WAAW,CAAA;IAC1B,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,EAAE,WAAW,CAAA;IACxB,KAAK,EAAE,UAAU,CAAA;IACjB,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC5B,CAAA;AAID,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAOD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAA4B,EAC5B,YAA4B,GAC7B,EAAE,kBAAkB,+BAgFpB;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C"}

package/dist/theme/ThemeProvider.js

@@ -2,6 +2,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { defaultPalette } from "./palette.js";
 import { createHttpThemeStore, createLocalThemeStore } from "./store.js";
+import { useStyle } from "../style/useStyle.js";
+import { inputCss } from "../style/inputCss.js";
+import { loaderCss } from "../style/loaderCss.js";
+import { cardCss } from "../style/cardCss.js";
+import { stackCss } from "../style/stackCss.js";
+import { badgeCss } from "../style/badgeCss.js";
+import { tabsCss } from "../style/tabsCss.js";
+import { tooltipCss } from "../style/tooltipCss.js";
+import { menuCss } from "../style/menuCss.js";
+import { tableCss } from "../style/tableCss.js";
+import { statusCss } from "../style/statusCss.js";
+import { paginationCss } from "../style/paginationCss.js";
+import { breadcrumbCss } from "../style/breadcrumbCss.js";
+import { accordionCss } from "../style/accordionCss.js";
+import { installAttributeTooltips } from "../tooltip/attributeTooltips.js";
 const SELECTION_KEY = "theme-id";
 const ThemeContext = createContext(null);
 function readSelection(key) {
@@ -10,6 +25,23 @@ function readSelection(key) {
     return localStorage.getItem(key);
 }
 export function ThemeProvider({ children, apiUrl, store, basePalette = defaultPalette, selectionKey = SELECTION_KEY, }) {
+    // Class-only styles (`rui-*` put by the project on its own elements) live here:
+    // the provider is always mounted.
+    useStyle("input", inputCss);
+    useStyle("loader", loaderCss);
+    useStyle("card", cardCss);
+    useStyle("stack", stackCss);
+    useStyle("badge", badgeCss);
+    useStyle("tabs", tabsCss);
+    useStyle("tooltip", tooltipCss);
+    useStyle("menu", menuCss);
+    useStyle("table", tableCss);
+    useStyle("status", statusCss);
+    useStyle("pagination", paginationCss);
+    useStyle("breadcrumb", breadcrumbCss);
+    useStyle("accordion", accordionCss);
+    // `data-rui-tooltip` on any element: one set of delegated listeners for the page.
+    useEffect(() => installAttributeTooltips(), []);
     const resolvedStore = useMemo(() => store ?? (apiUrl ? createHttpThemeStore(apiUrl) : createLocalThemeStore()), [store, apiUrl]);
     const [themes, setThemes] = useState([]);
     const [defaultId, setDefaultId] = useState(null);

package/dist/theme/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,eAAO,MAAM,cAAc,EAAE,WAW5B,CAAA"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,eAAO,MAAM,cAAc,EAAE,WAS5B,CAAA"}

package/dist/theme/palette.js

@@ -10,6 +10,4 @@ export const defaultPalette = {
     "--color-primary": "#6366f1",
     "--color-primary-hover": "#4f46e5",
     "--color-on-primary": "#ffffff",
-    "--color-danger": "#dc2626",
-    "--color-danger-soft": "#fee2e2",
 };

package/dist/tooltip/attributeTooltips.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Page-wide delegated listeners: any element with `data-rui-tooltip="text"` (optionally
+ * `data-rui-tooltip-placement`) gets a tooltip, including elements added later.
+ * Returns the uninstall function.
+ */
+export declare function installAttributeTooltips(): () => void;
+//# sourceMappingURL=attributeTooltips.d.ts.map

package/dist/tooltip/attributeTooltips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributeTooltips.d.ts","sourceRoot":"","sources":["../../src/tooltip/attributeTooltips.ts"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,IAAI,CAuDrD"}

package/dist/tooltip/attributeTooltips.js

@@ -0,0 +1,76 @@
+import { TooltipEngine } from "./tooltipEngine.js";
+const SELECTOR = "[data-rui-tooltip]";
+const DELAY = 300;
+function tooltipTarget(target) {
+    return target instanceof Element ? target.closest(SELECTOR) : null;
+}
+function toggleDescribedBy(el, id, add) {
+    const ids = (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(token => token && token !== id);
+    if (add)
+        ids.push(id);
+    if (ids.length > 0)
+        el.setAttribute("aria-describedby", ids.join(" "));
+    else
+        el.removeAttribute("aria-describedby");
+}
+/**
+ * Page-wide delegated listeners: any element with `data-rui-tooltip="text"` (optionally
+ * `data-rui-tooltip-placement`) gets a tooltip, including elements added later.
+ * Returns the uninstall function.
+ */
+export function installAttributeTooltips() {
+    const engine = new TooltipEngine((open, anchor) => toggleDescribedBy(anchor, engine.id, open));
+    const prepare = (el) => {
+        engine.content.textContent = el.dataset.ruiTooltip ?? "";
+        engine.setLook({ placement: el.dataset.ruiTooltipPlacement ?? "top" });
+    };
+    const onPointerOver = (event) => {
+        if (event.pointerType === "touch")
+            return;
+        const el = tooltipTarget(event.target);
+        if (!el || el === engine.anchor)
+            return;
+        engine.scheduleShow(el, DELAY, () => prepare(el));
+    };
+    const onPointerOut = (event) => {
+        if (event.pointerType === "touch")
+            return;
+        const el = tooltipTarget(event.target);
+        if (el && !el.contains(event.relatedTarget))
+            engine.hide();
+    };
+    const onFocusIn = (event) => {
+        const el = tooltipTarget(event.target);
+        if (!el)
+            return;
+        prepare(el);
+        engine.show(el);
+    };
+    const onFocusOut = (event) => {
+        const el = tooltipTarget(event.target);
+        if (el && !el.contains(event.relatedTarget))
+            engine.hide();
+    };
+    const onPointerDown = (event) => {
+        if (event.pointerType !== "touch")
+            return;
+        const el = tooltipTarget(event.target);
+        if (!el)
+            return;
+        prepare(el);
+        engine.showForTouch(el);
+    };
+    document.addEventListener("pointerover", onPointerOver);
+    document.addEventListener("pointerout", onPointerOut);
+    document.addEventListener("focusin", onFocusIn);
+    document.addEventListener("focusout", onFocusOut);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+        document.removeEventListener("pointerover", onPointerOver);
+        document.removeEventListener("pointerout", onPointerOut);
+        document.removeEventListener("focusin", onFocusIn);
+        document.removeEventListener("focusout", onFocusOut);
+        document.removeEventListener("pointerdown", onPointerDown);
+        engine.hide();
+    };
+}

package/dist/tooltip/tooltipEngine.d.ts

@@ -0,0 +1,41 @@
+import type { Placement } from "@floating-ui/dom";
+export type TooltipPlacement = Placement;
+export type TooltipLook = {
+    placement?: TooltipPlacement;
+    /** Background and arrow. `"--color-x"` reads the theme variable; anything else is a raw CSS color. */
+    color?: string;
+    textColor?: string;
+    maxWidth?: string | number;
+};
+/**
+ * One tooltip bubble (a detached DOM element, appended to the body while open) with its
+ * timers, positioning and dismissal. Shared by the Tooltip component and the
+ * `data-rui-tooltip` attribute mode so both behave the same.
+ */
+export declare class TooltipEngine {
+    private readonly onOpenChange?;
+    readonly id: string;
+    readonly bubble: HTMLDivElement;
+    /** Where the content goes: text in attribute mode, a portal for the component. */
+    readonly content: HTMLDivElement;
+    private readonly arrowEl;
+    private placement;
+    private anchorEl;
+    private showTimer;
+    private hideTimer;
+    private stopAutoUpdate;
+    constructor(onOpenChange?: ((open: boolean, anchor: HTMLElement) => void) | undefined);
+    get anchor(): HTMLElement | null;
+    setLook({ placement, color, textColor, maxWidth }: TooltipLook): void;
+    /** Opens on `anchor` after `delay` ms (right away when 0). */
+    scheduleShow(anchor: HTMLElement, delay: number, beforeShow?: () => void): void;
+    /** Opens on a touch, closing by itself shortly after. */
+    showForTouch(anchor: HTMLElement): void;
+    show(anchor: HTMLElement): void;
+    hide(): void;
+    private clearTimers;
+    private readonly onKeyDown;
+    private readonly onPointerDown;
+    private position;
+}
+//# sourceMappingURL=tooltipEngine.d.ts.map

package/dist/tooltip/tooltipEngine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipEngine.d.ts","sourceRoot":"","sources":["../../src/tooltip/tooltipEngine.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAIjD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAA;AAExC,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,sGAAsG;IACtG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAOD;;;;GAIG;AACH,qBAAa,aAAa;IAYZ,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC;IAX1C,QAAQ,CAAC,EAAE,SAA4B;IACvC,QAAQ,CAAC,MAAM,iBAAgC;IAC/C,kFAAkF;IAClF,QAAQ,CAAC,OAAO,iBAAgC;IAChD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAgC;IACxD,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,SAAS,CAA2C;IAC5D,OAAO,CAAC,SAAS,CAA2C;IAC5D,OAAO,CAAC,cAAc,CAA0B;gBAEnB,YAAY,CAAC,GAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,aAAA;IAUxF,IAAI,MAAM,IAAI,WAAW,GAAG,IAAI,CAE/B;IAED,OAAO,CAAC,EAAE,SAAiB,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,WAAW,GAAG,IAAI;IAS7E,8DAA8D;IAC9D,YAAY,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,IAAI;IAW/E,yDAAyD;IACzD,YAAY,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAKvC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAa/B,IAAI,IAAI,IAAI;IAeZ,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAIzB;IAGD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE7B;YAEa,QAAQ;CAyBvB"}