@kosmeo-ui/react 0.2.0 → 1.0.0

package/src/components/data-display/summaryRow/styles.css

@@ -5,8 +5,8 @@
   padding: 0.5rem 0.75rem;
   font-size: 0.85rem;
   font-weight: 600;
-  background-color: var(--background-color-dark);
-  border: 1px solid var(--border-color);
+  background-color: var(--k-background-color-dark);
+  border: 1px solid var(--k-border-color);
   border-radius: 4px;
 }
 
@@ -17,10 +17,10 @@
 }
 
 .k-summary-row-label {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-weight: 500;
 }
 
 .k-summary-row-value {
-  color: var(--text-color);
+  color: var(--k-text-color);
 }

package/src/components/data-display/table/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import parseDataKey, { cellText } from "../dataTable/utils/parseDataKey.js";
 import type { TableColumn, TableRow } from "../dataTable/types.js";
-import parseDataKey from "../dataTable/utils/parseDataKey.js";
 import { ReactNode } from "react";
 import "./styles.css";
 
@@ -110,7 +110,7 @@ const Table = <TData,>({
                   const content = c.cellElement
                     ? c.cellElement(row, i)
                     : c.dataKey
-                      ? (parseDataKey(c.dataKey, row) as ReactNode)
+                      ? cellText(parseDataKey(c.dataKey, row))
                       : null;
                   return (
                     <td

package/src/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/src/components/data-display/tableFilters/index.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+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";
+import {
+  InfiniteScrollMenuFilter,
+  InfiniteScrollMenuGeneratedFilter,
+} from "../infiniteScroll/types.js";
+
+const TYPING_DEBOUNCE_MS = 400;
+
+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";
+}
+
+const generate = (filters: InfiniteScrollMenuFilter[]) =>
+  filters.map((f, i): InfiniteScrollMenuGeneratedFilter => ({
+    ...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",
+}: TableFiltersProps) => {
+  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: InfiniteScrollMenuGeneratedFilter[]) => {
+      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 (
+    <Col size="sm">
+      <Filters
+        pendingFilters={pendingFilters}
+        handleNewPendingFilters={setPendingFilters}
+        onApply={hasPendingChanges ? handleApply : undefined}
+        rangeApplyInMenu={applyMode === "immediate"}
+      >
+        <Button
+          size="sm"
+          variant="danger"
+          disabled={!hasActiveFilters}
+          onClick={handleReset}
+        >
+          Reset
+        </Button>
+        {applyMode === "manual" && (
+          <Button size="sm" disabled={!hasPendingChanges} onClick={handleApply}>
+            Apply
+          </Button>
+        )}
+      </Filters>
+      <Tags filters={filters} handleNewFilters={handleTagChange} />
+    </Col>
+  );
+};
+
+export default TableFilters;

package/src/components/data-display/tagCard/index.tsx

@@ -20,8 +20,9 @@ const TagCard = (props: TagCardProps) => {
         <h3>{props.title}</h3>
         {props.tags.length ? (
           <ul className="k-tag-card-list">
-            {props.tags.map((t) => (
-              <li key={t}>
+            {/* Tags can repeat and hold no state, so position is part of the key. */}
+            {props.tags.map((t, i) => (
+              <li key={`${i}-${t}`}>
                 <Badge variant={color} size="md" pill>
                   {t}
                 </Badge>

package/src/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/src/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/src/components/feedback/badge/index.tsx

@@ -55,30 +55,49 @@ const Badge = ({
           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 = (
+  const label = (
     <>
       {startIcon && <span className="k-badge-start-icon">{startIcon}</span>}
       <span className="k-badge-content">{children}</span>
-      {onRemove && (
+    </>
+  );
+
+  const removeButton = onRemove && (
+    <button
+      type="button"
+      aria-label="Remove"
+      className="k-badge-remove"
+      onClick={(e) => {
+        e.stopPropagation();
+        onRemove();
+      }}
+    >
+      <FontAwesomeIcon icon={faXmark} />
+    </button>
+  );
+
+  // Clickable and removable: two sibling buttons in a span, since a button
+  // can't contain another.
+  if (onClick && onRemove) {
+    return (
+      <span className={classes} style={inlineStyle}>
         <button
           type="button"
-          aria-label="Remove"
-          className="k-badge-remove"
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove();
-          }}
+          aria-label={ariaLabel}
+          className="k-badge-action"
+          onClick={onClick}
         >
-          <FontAwesomeIcon icon={faXmark} />
+          {label}
         </button>
-      )}
-    </>
-  );
+        {removeButton}
+      </span>
+    );
+  }
 
   if (onClick) {
     return (
@@ -89,14 +108,15 @@ const Badge = ({
         style={inlineStyle}
         onClick={onClick}
       >
-        {content}
+        {label}
       </button>
     );
   }
 
   return (
     <span className={classes} style={inlineStyle}>
-      {content}
+      {label}
+      {removeButton}
     </span>
   );
 };

package/src/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/src/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/src/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/src/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);
 }