@kosmeo-ui/react 0.2.0 → 1.0.0

package/dist/components/data-display/table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/table/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/table/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-display/table/styles.css

@@ -2,8 +2,8 @@
   width: 100%;
   border-collapse: collapse;
   text-align: left;
-  color: var(--text-color);
-  background-color: var(--background-color-light);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color-light);
 }
 
 .k-table th,
@@ -27,25 +27,25 @@
 }
 
 .k-table-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
 }
 
 .k-table-hover tbody tr:hover {
-  background-color: var(--background-color-hover);
+  background-color: var(--k-background-color-hover);
 }
 
 .k-table-bordered {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--k-border-color);
 }
 
 .k-table-bordered th,
 .k-table-bordered td {
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--k-border-color);
 }
 
 .k-table-bordered th:not(:first-child),
 .k-table-bordered td:not(:first-child) {
-  border-left: 1px solid var(--border-color);
+  border-left: 1px solid var(--k-border-color);
 }
 
 /* ===== Clickable rows ===== */
@@ -55,18 +55,18 @@
 
 /* ===== Row selection (caller marks rows with data-selected="true") ===== */
 .k-table tbody tr[data-selected="true"] {
-  background-color: var(--primary-color-background-light);
+  background-color: var(--k-primary-color-background-light);
 }
 
 /* ===== Scrollable wrapper with sticky header ===== */
 .k-table-scroll-container {
   overflow-y: auto;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--k-border-color);
   border-radius: 4px;
 }
 
 .k-table-scroll-container .k-table thead tr {
   position: sticky;
   top: 0;
-  background: var(--background-color-light);
+  background: var(--k-background-color-light);
 }

package/dist/components/data-display/tableFilters/index.d.ts

@@ -0,0 +1,30 @@
+import { InfiniteScrollMenuFilter } from "../infiniteScroll/types.js";
+export interface TableFiltersProps {
+    /**
+     * The filters to offer, as in InfiniteScroll's `menu.filters`. They're
+     * compared by contents, so an inline array is fine; changing them resets
+     * every filter to the new definitions.
+     */
+    filters: InfiniteScrollMenuFilter[];
+    /**
+     * Called with the applied filters as query params (`filter[status]`,
+     * `filter[mrr_gte]`, …), ready to spread into `usePaginated`'s `params`.
+     * It fires once on mount, with `{}` unless a filter starts with a value.
+     */
+    onChange: (params: Record<string, string>) => void;
+    /**
+     * `"immediate"` (default) applies each change as it's made: searches wait
+     * for a pause in typing, and a range (two bounds in one menu) applies from
+     * the menu's own Apply button. `"manual"` collects changes until Apply is
+     * clicked. Enter in a filter's text box applies in both.
+     */
+    applyMode?: "immediate" | "manual";
+}
+/**
+ * InfiniteScroll's filter bar on its own, for tables that page or load some
+ * other way: search, select, range and list filters with tags and Reset. It
+ * reports the applied filters as query params.
+ */
+declare const TableFilters: ({ filters: definitions, onChange, applyMode, }: TableFiltersProps) => import("react").JSX.Element;
+export default TableFilters;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-display/tableFilters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/tableFilters/index.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,wBAAwB,EAEzB,MAAM,4BAA4B,CAAC;AAIpC,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,OAAO,EAAE,wBAAwB,EAAE,CAAC;IACpC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACpC;AAQD;;;;GAIG;AACH,QAAA,MAAM,YAAY,GAAI,gDAInB,iBAAiB,gCA2FnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/data-display/tableFilters/index.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as pendingChangesUtil from "../infiniteScroll/utils/hasPendingChanges.js";
+import { filterParams } from "../infiniteScroll/utils/generateQueryString.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Filters from "../infiniteScroll/filters/index.js";
+import Button from "../../buttons/button/index.js";
+import Tags from "../infiniteScroll/tags/index.js";
+import Col from "../../layout/col/index.js";
+const TYPING_DEBOUNCE_MS = 400;
+const generate = (filters) => filters.map((f, i) => ({
+    ...f,
+    filterId: `${f.dataKey}-${i}`,
+}));
+/**
+ * InfiniteScroll's filter bar on its own, for tables that page or load some
+ * other way: search, select, range and list filters with tags and Reset. It
+ * reports the applied filters as query params.
+ */
+const TableFilters = ({ filters: definitions, onChange, applyMode = "immediate", }) => {
+    const [filters, setFilters] = useState(() => generate(definitions));
+    const [pendingFilters, setPendingFilters] = useState(filters);
+    // The definitions are plain data, as InfiniteScroll's menu: start over when
+    // their contents change, not each time they're a new array.
+    const definitionsKey = JSON.stringify(definitions);
+    const [prevDefinitionsKey, setPrevDefinitionsKey] = useState(definitionsKey);
+    if (definitionsKey !== prevDefinitionsKey) {
+        const next = generate(definitions);
+        setPrevDefinitionsKey(definitionsKey);
+        setFilters(next);
+        setPendingFilters(next);
+    }
+    // Report only when the params actually change, not on every new array.
+    const params = useMemo(() => filterParams(filters), [filters]);
+    const paramsKey = JSON.stringify(params);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    useEffect(() => {
+        onChangeRef.current(params);
+    }, [paramsKey]);
+    const hasPendingChanges = useMemo(() => pendingChangesUtil.hasFilterChanges(filters, pendingFilters), [filters, pendingFilters]);
+    const hasActiveFilters = pendingChangesUtil.hasActiveFilters(pendingFilters) ||
+        pendingChangesUtil.hasActiveFilters(filters);
+    const handleApply = useCallback(() => setFilters(pendingFilters), [pendingFilters]);
+    useEffect(() => {
+        if (applyMode !== "immediate" || !hasPendingChanges)
+            return;
+        const delay = pendingChangesUtil.hasTypedFilterChanges(filters, pendingFilters)
+            ? TYPING_DEBOUNCE_MS
+            : 0;
+        const timer = setTimeout(handleApply, delay);
+        return () => clearTimeout(timer);
+    }, [applyMode, hasPendingChanges, handleApply, filters, pendingFilters]);
+    // Removing a tag applies at once; the pending copy of that filter follows.
+    const handleTagChange = useCallback((next) => {
+        setPendingFilters((pending) => pending.map((p, i) => (next[i] !== filters[i] ? next[i] : p)));
+        setFilters(next);
+    }, [filters]);
+    const handleReset = useCallback(() => {
+        const cleared = pendingChangesUtil.clearFilters(pendingFilters);
+        setPendingFilters(cleared);
+        setFilters(cleared);
+    }, [pendingFilters]);
+    return (_jsxs(Col, { size: "sm", children: [_jsxs(Filters, { pendingFilters: pendingFilters, handleNewPendingFilters: setPendingFilters, onApply: hasPendingChanges ? handleApply : undefined, rangeApplyInMenu: applyMode === "immediate", children: [_jsx(Button, { size: "sm", variant: "danger", disabled: !hasActiveFilters, onClick: handleReset, children: "Reset" }), applyMode === "manual" && (_jsx(Button, { size: "sm", disabled: !hasPendingChanges, onClick: handleApply, children: "Apply" }))] }), _jsx(Tags, { filters: filters, handleNewFilters: handleTagChange })] }));
+};
+export default TableFilters;
+//# sourceMappingURL=index.js.map

package/dist/components/data-display/tableFilters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/tableFilters/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-display/tagCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/tagCard/index.tsx"],"names":[],"mappings":"AAKA,OAAO,cAAc,CAAC;AAEtB,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,OAAO,GAAI,OAAO,YAAY,gCAwBnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/tagCard/index.tsx"],"names":[],"mappings":"AAKA,OAAO,cAAc,CAAC;AAEtB,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,OAAO,GAAI,OAAO,YAAY,gCAyBnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/data-display/tagCard/index.js

@@ -6,7 +6,7 @@ import Col from "../../layout/col/index.js";
 import "./styles.css";
 const TagCard = (props) => {
     const { color = "primary" } = props;
-    return (_jsx(Card, { children: _jsxs(Col, { size: "sm", children: [_jsx("h3", { children: props.title }), props.tags.length ? (_jsx("ul", { className: "k-tag-card-list", children: props.tags.map((t) => (_jsx("li", { children: _jsx(Badge, { variant: color, size: "md", pill: true, children: t }) }, t))) })) : (props.emptyText && (_jsx("p", { className: "k-tag-card-empty-text", children: props.emptyText })))] }) }));
+    return (_jsx(Card, { children: _jsxs(Col, { size: "sm", children: [_jsx("h3", { children: props.title }), props.tags.length ? (_jsx("ul", { className: "k-tag-card-list", children: props.tags.map((t, i) => (_jsx("li", { children: _jsx(Badge, { variant: color, size: "md", pill: true, children: t }) }, `${i}-${t}`))) })) : (props.emptyText && (_jsx("p", { className: "k-tag-card-empty-text", children: props.emptyText })))] }) }));
 };
 export default TagCard;
 //# sourceMappingURL=index.js.map

package/dist/components/data-display/tagCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/tagCard/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,+BAA+B,CAAC;AAClD,OAAO,IAAI,MAAM,4BAA4B,CAAC;AAC9C,OAAO,GAAG,MAAM,2BAA2B,CAAC;AAC5C,OAAO,cAAc,CAAC;AAStB,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtC,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpC,OAAO,CACL,KAAC,IAAI,cACH,MAAC,GAAG,IAAC,IAAI,EAAC,IAAI,aACZ,uBAAK,KAAK,CAAC,KAAK,GAAM,EACrB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACnB,aAAI,SAAS,EAAC,iBAAiB,YAC5B,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACrB,uBACE,KAAC,KAAK,IAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,kBAClC,CAAC,GACI,IAHD,CAAC,CAIL,CACN,CAAC,GACC,CACN,CAAC,CAAC,CAAC,CACF,KAAK,CAAC,SAAS,IAAI,CACjB,YAAG,SAAS,EAAC,uBAAuB,YAAE,KAAK,CAAC,SAAS,GAAK,CAC3D,CACF,IACG,GACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/tagCard/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,+BAA+B,CAAC;AAClD,OAAO,IAAI,MAAM,4BAA4B,CAAC;AAC9C,OAAO,GAAG,MAAM,2BAA2B,CAAC;AAC5C,OAAO,cAAc,CAAC;AAStB,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtC,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpC,OAAO,CACL,KAAC,IAAI,cACH,MAAC,GAAG,IAAC,IAAI,EAAC,IAAI,aACZ,uBAAK,KAAK,CAAC,KAAK,GAAM,EACrB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACnB,aAAI,SAAS,EAAC,iBAAiB,YAE5B,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,uBACE,KAAC,KAAK,IAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,kBAClC,CAAC,GACI,IAHD,GAAG,CAAC,IAAI,CAAC,EAAE,CAIf,CACN,CAAC,GACC,CACN,CAAC,CAAC,CAAC,CACF,KAAK,CAAC,SAAS,IAAI,CACjB,YAAG,SAAS,EAAC,uBAAuB,YAAE,KAAK,CAAC,SAAS,GAAK,CAC3D,CACF,IACG,GACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/data-display/tagCard/styles.css

@@ -8,7 +8,7 @@
 }
 
 .k-tag-card-empty-text {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-style: italic;
   margin: 0;
 }

package/dist/components/feedback/alert/styles.css

@@ -43,46 +43,46 @@
 }
 
 .k-alert-primary {
-  background-color: var(--primary-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-primary-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-secondary {
-  background-color: var(--secondary-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-secondary-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-light {
-  background-color: var(--light-color-background);
-  color: var(--text-color);
+  background-color: var(--k-light-color-background);
+  color: var(--k-text-color);
 }
 
 .k-alert-danger {
-  background-color: var(--danger-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-danger-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-warning {
-  background-color: var(--warning-color-background);
-  color: var(--text-color);
+  background-color: var(--k-warning-color-background);
+  color: var(--k-text-color);
 }
 
 .k-alert-success {
-  background-color: var(--success-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-success-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.5rem 0.75rem;
 }
 
 .k-alert-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.75rem 1rem;
 }
 
 .k-alert-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 1rem 1.25rem;
 }

package/dist/components/feedback/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/badge/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,gBAAgB;IACjE,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,GAAI,4FAWZ,UAAU,gCA+DZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/badge/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,gBAAgB;IACjE,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,GAAI,4FAWZ,UAAU,gCAmFZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/feedback/badge/index.js

@@ -16,18 +16,24 @@ const Badge = ({ children, size = "md", variant = "primary", pill = true, subtle
         ? {
             backgroundColor: color,
             color: getContrastTextColor(color) === "light"
-                ? "var(--text-color-light)"
-                : "var(--text-color)",
+                ? "var(--k-text-color-light)"
+                : "var(--k-text-color)",
         }
         : undefined;
-    const content = (_jsxs(_Fragment, { children: [startIcon && _jsx("span", { className: "k-badge-start-icon", children: startIcon }), _jsx("span", { className: "k-badge-content", children: children }), onRemove && (_jsx("button", { type: "button", "aria-label": "Remove", className: "k-badge-remove", onClick: (e) => {
-                    e.stopPropagation();
-                    onRemove();
-                }, children: _jsx(FontAwesomeIcon, { icon: faXmark }) }))] }));
+    const label = (_jsxs(_Fragment, { children: [startIcon && _jsx("span", { className: "k-badge-start-icon", children: startIcon }), _jsx("span", { className: "k-badge-content", children: children })] }));
+    const removeButton = onRemove && (_jsx("button", { type: "button", "aria-label": "Remove", className: "k-badge-remove", onClick: (e) => {
+            e.stopPropagation();
+            onRemove();
+        }, children: _jsx(FontAwesomeIcon, { icon: faXmark }) }));
+    // Clickable and removable: two sibling buttons in a span, since a button
+    // can't contain another.
+    if (onClick && onRemove) {
+        return (_jsxs("span", { className: classes, style: inlineStyle, children: [_jsx("button", { type: "button", "aria-label": ariaLabel, className: "k-badge-action", onClick: onClick, children: label }), removeButton] }));
+    }
     if (onClick) {
-        return (_jsx("button", { type: "button", "aria-label": ariaLabel, className: classes, style: inlineStyle, onClick: onClick, children: content }));
+        return (_jsx("button", { type: "button", "aria-label": ariaLabel, className: classes, style: inlineStyle, onClick: onClick, children: label }));
     }
-    return (_jsx("span", { className: classes, style: inlineStyle, children: content }));
+    return (_jsxs("span", { className: classes, style: inlineStyle, children: [label, removeButton] }));
 };
 export default Badge;
 //# sourceMappingURL=index.js.map

package/dist/components/feedback/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/badge/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,cAAc,CAAC;AAqBtB,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,KAAK,EACd,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,GACE,EAAE,EAAE;IACf,IAAI,OAAO,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1D,MAAM,OAAO,GACX,mBAAmB,OAAO,YAAY,IAAI,IAAI,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC;IAEpG,MAAM,WAAW,GACf,OAAO,KAAK,QAAQ,IAAI,KAAK;QAC3B,CAAC,CAAC;YACE,eAAe,EAAE,KAAK;YACtB,KAAK,EACH,oBAAoB,CAAC,KAAK,CAAC,KAAK,OAAO;gBACrC,CAAC,CAAC,yBAAyB;gBAC3B,CAAC,CAAC,mBAAmB;SAC1B;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,OAAO,GAAG,CACd,8BACG,SAAS,IAAI,eAAM,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAQ,EACrE,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,gBACF,QAAQ,EACnB,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,QAAQ,EAAE,CAAC;gBACb,CAAC,YAED,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,GAC3B,CACV,IACA,CACJ,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,OAAO,YAEf,OAAO,GACD,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAM,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,YACzC,OAAO,GACH,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/badge/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,cAAc,CAAC;AAqBtB,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,KAAK,EACd,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,GACE,EAAE,EAAE;IACf,IAAI,OAAO,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1D,MAAM,OAAO,GACX,mBAAmB,OAAO,YAAY,IAAI,IAAI,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC;IAEpG,MAAM,WAAW,GACf,OAAO,KAAK,QAAQ,IAAI,KAAK;QAC3B,CAAC,CAAC;YACE,eAAe,EAAE,KAAK;YACtB,KAAK,EACH,oBAAoB,CAAC,KAAK,CAAC,KAAK,OAAO;gBACrC,CAAC,CAAC,2BAA2B;gBAC7B,CAAC,CAAC,qBAAqB;SAC5B;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,KAAK,GAAG,CACZ,8BACG,SAAS,IAAI,eAAM,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAQ,EACrE,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,IAClD,CACJ,CAAC;IAEF,MAAM,YAAY,GAAG,QAAQ,IAAI,CAC/B,iBACE,IAAI,EAAC,QAAQ,gBACF,QAAQ,EACnB,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,QAAQ,EAAE,CAAC;QACb,CAAC,YAED,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,GAC3B,CACV,CAAC;IAEF,yEAAyE;IACzE,yBAAyB;IACzB,IAAI,OAAO,IAAI,QAAQ,EAAE,CAAC;QACxB,OAAO,CACL,gBAAM,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,aAC1C,iBACE,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,OAAO,YAEf,KAAK,GACC,EACR,YAAY,IACR,CACR,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,OAAO,YAEf,KAAK,GACC,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,gBAAM,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,aACzC,KAAK,EACL,YAAY,IACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/feedback/badge/styles.css

@@ -21,6 +21,18 @@ button.k-badge {
   opacity: 0.85;
 }
 
+.k-badge-action {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
 .k-badge-start-icon {
   display: inline-flex;
   align-items: center;
@@ -67,33 +79,33 @@ button.k-badge {
 
 /* Variants */
 .k-badge-primary {
-  background-color: var(--primary-color);
-  color: var(--text-color-light);
+  background-color: var(--k-primary-color);
+  color: var(--k-text-color-light);
 }
 
 .k-badge-secondary {
-  background-color: var(--secondary-color);
-  color: var(--text-color-light);
+  background-color: var(--k-secondary-color);
+  color: var(--k-text-color-light);
 }
 
 .k-badge-light {
-  background-color: var(--light-color-background);
-  color: var(--text-color);
+  background-color: var(--k-light-color-background);
+  color: var(--k-text-color);
 }
 
 .k-badge-danger {
-  background-color: var(--danger-color);
-  color: var(--text-color-light);
+  background-color: var(--k-danger-color);
+  color: var(--k-text-color-light);
 }
 
 .k-badge-warning {
-  background-color: var(--warning-color);
-  color: var(--warning-color-contrast);
+  background-color: var(--k-warning-color);
+  color: var(--k-warning-color-contrast);
 }
 
 .k-badge-success {
-  background-color: var(--success-color);
-  color: var(--text-color-light);
+  background-color: var(--k-success-color);
+  color: var(--k-text-color-light);
 }
 
 /* Pill shape */
@@ -107,58 +119,44 @@ button.k-badge {
 }
 
 /* Subtle variants - transparent background with colored text */
-/* Subtle text blends the variant color 60/40 with --text-color: the full
+/* Subtle text blends the variant color 60/40 with --k-text-color: the full
    variant color on its own 15% tint falls under 4.5:1 for most variants. */
 .k-badge-subtle.k-badge-primary {
-  background-color: color-mix(
-    in srgb,
-    var(--primary-color) 15%,
-    var(--background-color)
-  );
-  color: color-mix(in srgb, var(--primary-color) 60%, var(--text-color));
+  background-color: color-mix(in srgb, var(--k-primary-color) 15%, transparent);
+  color: color-mix(in srgb, var(--k-primary-color) 60%, var(--k-text-color));
 }
 
 .k-badge-subtle.k-badge-secondary {
   background-color: color-mix(
     in srgb,
-    var(--secondary-color) 15%,
-    var(--background-color)
+    var(--k-secondary-color) 15%,
+    transparent
   );
-  color: color-mix(in srgb, var(--secondary-color) 60%, var(--text-color));
+  color: color-mix(in srgb, var(--k-secondary-color) 60%, var(--k-text-color));
 }
 
 .k-badge-subtle.k-badge-light {
-  background-color: color-mix(
-    in srgb,
-    var(--light-color) 30%,
-    var(--background-color)
-  );
-  color: var(--text-color);
+  background-color: color-mix(in srgb, var(--k-light-color) 30%, transparent);
+  color: var(--k-text-color);
 }
 
 .k-badge-subtle.k-badge-danger {
-  background-color: color-mix(
-    in srgb,
-    var(--danger-color) 15%,
-    var(--background-color)
-  );
-  color: color-mix(in srgb, var(--danger-color) 60%, var(--text-color));
+  background-color: color-mix(in srgb, var(--k-danger-color) 15%, transparent);
+  color: color-mix(in srgb, var(--k-danger-color) 60%, var(--k-text-color));
 }
 
 .k-badge-subtle.k-badge-warning {
-  background-color: color-mix(
-    in srgb,
-    var(--warning-color) 20%,
-    var(--background-color)
-  );
-  color: var(--warning-color-text);
+  background-color: color-mix(in srgb, var(--k-warning-color) 20%, transparent);
+  color: var(--k-warning-color-text);
 }
 
 .k-badge-subtle.k-badge-success {
-  background-color: color-mix(
-    in srgb,
-    var(--success-color) 15%,
-    var(--background-color)
-  );
-  color: color-mix(in srgb, var(--success-color) 60%, var(--text-color));
+  background-color: color-mix(in srgb, var(--k-success-color) 15%, transparent);
+  color: color-mix(in srgb, var(--k-success-color) 60%, var(--k-text-color));
+}
+
+/* The tint is translucent so it reads on any surface (striped rows, cards);
+   the inset outline keeps the edge visible where the tint alone is too faint. */
+.k-badge-subtle {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
 }

package/dist/components/feedback/emptyState/styles.css

@@ -1,6 +1,6 @@
 .k-empty-state-inline {
   font-size: 0.875rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-style: italic;
   padding: 0.5rem 0;
 }
@@ -13,7 +13,7 @@
   gap: 0.75rem;
   padding: 2rem 1rem;
   text-align: center;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-empty-state-icon {

package/dist/components/feedback/loadingOverlay/styles.css

@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
   z-index: 300;
-  background-color: var(--background-color);
+  background-color: var(--k-background-color);
 }
 
 .k-loading-container-fixed {

package/dist/components/feedback/progressBar/styles.css

@@ -9,15 +9,15 @@
   flex: 1;
   min-width: 0;
   height: 1.5625rem;
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
   border-radius: 0.25rem;
   overflow: hidden;
-  box-shadow: inset 0 0.0625rem 0.1875rem var(--shadow-color);
+  box-shadow: inset 0 0.0625rem 0.1875rem var(--k-shadow-color);
 }
 
 .k-progress-bar-fill {
   height: 100%;
-  background-color: var(--success-color);
+  background-color: var(--k-success-color);
   transition: width 0.5s ease-in-out;
 }
 
@@ -25,27 +25,27 @@
   flex-shrink: 0;
   min-width: 2.75rem;
   text-align: right;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
-  color: var(--text-color);
+  color: var(--k-text-color);
 }
 
 .k-progress-bar-fill-primary {
-  background-color: var(--primary-color);
+  background-color: var(--k-primary-color);
 }
 .k-progress-bar-fill-secondary {
-  background-color: var(--secondary-color);
+  background-color: var(--k-secondary-color);
 }
 .k-progress-bar-fill-light {
-  background-color: var(--light-color);
+  background-color: var(--k-light-color);
 }
 .k-progress-bar-fill-warning {
-  background-color: var(--warning-color);
+  background-color: var(--k-warning-color);
 }
 .k-progress-bar-fill-danger {
-  background-color: var(--danger-color);
+  background-color: var(--k-danger-color);
 }
 .k-progress-bar-fill-success {
-  background-color: var(--success-color);
+  background-color: var(--k-success-color);
 }

package/dist/components/feedback/spinner/styles.css

@@ -1,10 +1,13 @@
+/* An empty box, so as a flex item it would shrink to fit a short or narrow
+   container (an oval while a page is still laying out). */
 .k-spinner {
   border-radius: 50%;
   display: inline-block;
-  animation: spin 0.8s linear infinite;
+  flex-shrink: 0;
+  animation: k-spin 0.8s linear infinite;
 }
 
-@keyframes spin {
+@keyframes k-spin {
   0% {
     transform: rotate(0deg);
   }
@@ -16,36 +19,36 @@
 .k-spinner-lg {
   height: 3.75rem;
   width: 3.75rem;
-  border: 0.375rem solid var(--shadow-color);
+  border: 0.375rem solid var(--k-shadow-color);
 }
 
 .k-spinner-md {
   height: 2.5rem;
   width: 2.5rem;
-  border: 0.25rem solid var(--shadow-color);
+  border: 0.25rem solid var(--k-shadow-color);
 }
 
 .k-spinner-sm {
   height: 1.25rem;
   width: 1.25rem;
-  border: 0.125rem solid var(--shadow-color);
+  border: 0.125rem solid var(--k-shadow-color);
 }
 
 .k-spinner-primary {
-  border-left-color: var(--primary-color);
+  border-left-color: var(--k-primary-color);
 }
 .k-spinner-secondary {
-  border-left-color: var(--secondary-color);
+  border-left-color: var(--k-secondary-color);
 }
 .k-spinner-light {
-  border-left-color: var(--light-color);
+  border-left-color: var(--k-light-color);
 }
 .k-spinner-success {
-  border-left-color: var(--success-color);
+  border-left-color: var(--k-success-color);
 }
 .k-spinner-danger {
-  border-left-color: var(--danger-color);
+  border-left-color: var(--k-danger-color);
 }
 .k-spinner-warning {
-  border-left-color: var(--warning-color);
+  border-left-color: var(--k-warning-color);
 }