@kosmeo-ui/react 0.1.1 → 0.2.0

package/dist/styles.css

@@ -81,12 +81,14 @@ h6 {
   --primary-color-active: #141f6c;
   --primary-color-background: #3d52db;
   --primary-color-background-light: #f0f2ff;
+  /* Primary as text (links, active tabs) on page and card surfaces. */
+  --primary-color-text: #17257d;
 
-  /* Secondary Colors */
-  --secondary-color: #858585;
-  --secondary-color-hover: #8c8c8c;
-  --secondary-color-active: #808080;
-  --secondary-color-background: #a6a6a6;
+  /* Secondary Colors — dark enough for white text (4.5:1) */
+  --secondary-color: #6b6b6b;
+  --secondary-color-hover: #757575;
+  --secondary-color-active: #616161;
+  --secondary-color-background: #6b6b6b;
 
   /* Light Colors */
   --light-color: #fafafa;
@@ -101,18 +103,22 @@ h6 {
   --warning-color-background: #ffd24d;
   --warning-color-background-light: #fff8e1;
   --warning-color-text: #92400e;
+  /* Text on a warning fill. */
+  --warning-color-contrast: #333;
 
   /* Danger Colors */
   --danger-color: #dc3545;
   --danger-color-hover: #e23243;
   --danger-color-active: #d92638;
-  --danger-color-background: #e46774;
+  --danger-color-background: #c42b3b;
+  /* Danger as text (field errors) on page and card surfaces. */
+  --danger-color-text: #b92535;
 
   /* Success Colors */
   --success-color: #198754;
   --success-color-hover: #1c975d;
   --success-color-active: #188150;
-  --success-color-background: #24c278;
+  --success-color-background: #157347;
   --success-color-background-light: #e8f5e8;
 
   /* Background Colors */
@@ -136,7 +142,7 @@ h6 {
   --text-color: #333;
   --text-color-secondary: #666;
   --text-color-light: white;
-  --text-color-link: #007bff;
+  --text-color-link: #0062cc;
   --text-size-sm: 0.875rem;
   --text-size-md: 1rem;
   --text-size-lg: 1.125rem;
@@ -161,11 +167,12 @@ h6 {
   --primary-color-active: #3d4f99;
   --primary-color-background: #4a5fb5;
   --primary-color-background-light: #1c2240;
+  --primary-color-text: #9aabf2;
 
   /* Secondary Colors */
-  --secondary-color: #8a8f99;
-  --secondary-color-hover: #9aa0aa;
-  --secondary-color-active: #7a7f88;
+  --secondary-color: #646a75;
+  --secondary-color-hover: #6e7480;
+  --secondary-color-active: #5a606a;
   --secondary-color-background: #4a4f5a;
 
   /* Light Colors — surface-toned (used for "light" variant buttons/pills) */
@@ -181,17 +188,19 @@ h6 {
   --warning-color-background: #4d3a00;
   --warning-color-background-light: #2e2200;
   --warning-color-text: #f5c542;
+  --warning-color-contrast: #15181f;
 
   /* Danger Colors */
   --danger-color: #c94250;
   --danger-color-hover: #d35261;
   --danger-color-active: #b53847;
   --danger-color-background: #4a1820;
+  --danger-color-text: #ff8f9a;
 
   /* Success Colors */
-  --success-color: #2a9560;
-  --success-color-hover: #32a66c;
-  --success-color-active: #248355;
+  --success-color: #1f7a4e;
+  --success-color-hover: #238556;
+  --success-color-active: #1b6d45;
   --success-color-background: #133e2c;
   --success-color-background-light: #0d2419;
 
@@ -384,3 +393,17 @@ code {
 .k-flex-wrap {
   flex-wrap: wrap;
 }
+
+/* Visually hidden, still read by screen readers. Global so any component can
+   use it without depending on another component's stylesheet. */
+.k-sr-only {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  padding: 0;
+  margin: -0.0625rem;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kosmeo-ui/react",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "React components themed with CSS variables, light and dark",
   "keywords": [
     "react",

package/src/components/buttons/button/index.tsx

@@ -33,6 +33,8 @@ export interface ButtonProps extends PropsWithSize, PropsWithVariant {
   fullWidth?: boolean;
   /** Accessible label. Required for icon-only buttons. */
   "aria-label"?: string;
+  /** Marks a toggle button as on or off. */
+  "aria-pressed"?: boolean;
   /** ID of element describing this button (for additional context). */
   "aria-describedby"?: string;
   /** ID of element labelling this button. */
@@ -61,6 +63,8 @@ const Button = (props: ButtonProps) => {
       aria-label={props["aria-label"]}
       aria-describedby={props["aria-describedby"]}
       aria-labelledby={props["aria-labelledby"]}
+      aria-busy={isLoading || undefined}
+      aria-pressed={props["aria-pressed"]}
       title={props.title}
       className={`k-button k-button-${variant} k-button-${size} k-button-${align} ${
         shadow ? "k-button-shadow" : ""
@@ -68,11 +72,16 @@ const Button = (props: ButtonProps) => {
       onClick={props.onClick}
     >
       {isLoading ? (
-        <FontAwesomeIcon
-          icon={faCircleNotch}
-          className="k-button-spinner"
-          spin
-        />
+        <>
+          <FontAwesomeIcon
+            icon={faCircleNotch}
+            className="k-button-spinner"
+            spin
+            aria-hidden="true"
+          />
+          {/* Keeps the button's accessible name while the spinner shows. */}
+          <span className="k-sr-only">{props.children}</span>
+        </>
       ) : (
         props.children
       )}

package/src/components/buttons/button/styles.css

@@ -151,7 +151,7 @@
 
 .k-button-warning {
   background-color: var(--warning-color);
-  color: var(--text-color);
+  color: var(--warning-color-contrast);
 }
 .k-button-warning:not(:disabled):hover {
   background-color: var(--warning-color-hover);
@@ -165,7 +165,7 @@
 
 .k-button-link {
   background-color: transparent;
-  color: var(--primary-color);
+  color: var(--primary-color-text);
   padding: 0;
   border-radius: 0;
   font-weight: 500;
@@ -174,12 +174,14 @@
   box-shadow: none;
 }
 .k-button-link:not(:disabled):hover {
-  color: var(--primary-color-hover);
+  color: var(--primary-color-text);
+  /* One text color keeps contrast in both themes; hover shows as a heavier underline. */
+  text-decoration-thickness: 0.125rem;
   background-color: transparent;
   box-shadow: none;
 }
 .k-button-link:active {
-  color: var(--primary-color-active);
+  color: var(--primary-color-text);
   background-color: transparent;
   box-shadow: none;
 }

package/src/components/buttons/rowActions/styles.css

@@ -2,6 +2,13 @@
   display: flex;
 }
 
+/* Never squeeze an action below its natural width: in a narrow table cell a
+   shrunk icon button collapses its icon to 0px (svg max-width: 100%). The
+   column grows to fit instead. */
+.k-row-actions > * {
+  flex-shrink: 0;
+}
+
 .k-row-actions-start {
   justify-content: flex-start;
 }

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

@@ -10,8 +10,7 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--text-color);
-  opacity: 0.65;
+  color: var(--text-color-secondary);
 }
 
 .k-address-block-body {
@@ -30,8 +29,7 @@
 
 .k-address-block-contact {
   font-size: 0.8125rem;
-  color: var(--text-color);
-  opacity: 0.7;
+  color: var(--text-color-secondary);
   margin-top: 0.125rem;
 }
 

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

@@ -4,6 +4,21 @@
   width: 3rem;
 }
 
+/* Even padding, overriding the table's wider first-column inset, so the
+   checkbox stays centered. */
+.k-table th.k-data-table-leading,
+.k-table td.k-data-table-leading {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+/* text-align doesn't move flex items, and Checkbox's container is a
+   full-width flex column, so center flex content on both axes too. */
+.k-data-table-leading > * {
+  justify-content: center;
+  align-items: center;
+}
+
 .k-data-table-spacer {
   padding: 0;
   border: 0;

package/src/components/data-display/infiniteScroll/filters/searchFilter.tsx

@@ -1,9 +1,7 @@
 "use client";
 
 import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import Dropdown from "../../../inputs/dropdown/index.js";
-import Button from "../../../buttons/button/index.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Input from "../../../inputs/input/index.js";
 import "./styles.css";
 import {
@@ -16,68 +14,21 @@ interface InfiniteScrollSearchFilterProps {
   onFilterChange: (filter: InfiniteScrollMenuGeneratedFilter) => void;
 }
 
-const SearchFilter = (props: InfiniteScrollSearchFilterProps) => {
-  const [value, setValue] = useState<string>("");
-  const [prevValue, setPrevValue] = useState<string>("");
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    if (
-      props.filter.value === prevValue ||
-      (props.filter.value === undefined && prevValue === "")
-    )
-      return;
-    setValue(props.filter.value || "");
-    setPrevValue(props.filter.value || "");
-    return;
-  }, [props.filter.value, value, prevValue]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
-
-  const handleSubmit = useCallback(() => {
-    setPrevValue(value);
-    props.onFilterChange({ ...props.filter, value: value });
-    setIsOpen(false);
-  }, [value, props]);
-
-  const handleKeydown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key !== "Enter") return;
-      e.preventDefault();
-      handleSubmit();
-    },
-    [handleSubmit]
-  );
-
-  const allowSubmit = useMemo(() => {
-    return value !== prevValue;
-  }, [value, prevValue]);
-
-  return (
-    <Dropdown
-      label={props.filter.title}
-      icon={faMagnifyingGlass}
-      align="left"
+// Typing updates the pending filter, like the other filters; Apply applies it.
+const SearchFilter = (props: InfiniteScrollSearchFilterProps) => (
+  <div className="k-search-filter">
+    <Input
       size="sm"
-      variant="secondary"
-      isOpen={isOpen}
-      onOpenChange={setIsOpen}
-    >
-      <div className="k-filter-menu">
-        <Input
-          size="sm"
-          value={value}
-          onChange={handleChange}
-          onKeyDown={handleKeydown}
-        />
-        <Button size="sm" disabled={!allowSubmit} onClick={handleSubmit}>
-          Add Filter
-        </Button>
-      </div>
-    </Dropdown>
-  );
-};
+      label={props.filter.title}
+      placeholder="Search…"
+      prefix={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+      value={props.filter.value ?? ""}
+      onChange={(e) =>
+        props.onFilterChange({ ...props.filter, value: e.target.value })
+      }
+      onClear={() => props.onFilterChange({ ...props.filter, value: "" })}
+    />
+  </div>
+);
 
 export default SearchFilter;

package/src/components/data-display/infiniteScroll/filters/styles.css

@@ -26,6 +26,10 @@
   min-width: 15rem;
 }
 
+.k-search-filter {
+  width: 14rem;
+}
+
 .k-range-filter-menu-column {
   display: flex;
   flex-direction: column;

package/src/components/data-display/infiniteScroll/header/deleteButton.tsx

@@ -42,6 +42,7 @@ const DeleteButton = <TData extends object>(
         onClick={handleShowBulkDeleteModal}
         disabled={!props.selectedRows.size && !props.allSelected}
         icon={faTrash}
+        aria-label="Delete selected"
       />
       <ConfirmationModal
         show={showBulkDeleteModal}

package/src/components/data-display/infiniteScroll/header/index.tsx

@@ -47,6 +47,7 @@ const Header = <TData extends object>(props: HeaderProps<TData>) => {
           size="sm"
           variant="secondary"
           onClick={props.onRefetch}
+          aria-label="Refresh"
           icon={faRotate}
         />
         {props.onDownload && (
@@ -54,6 +55,7 @@ const Header = <TData extends object>(props: HeaderProps<TData>) => {
             size="sm"
             variant="secondary"
             onClick={props.onDownload}
+            aria-label="Download"
             icon={faDownload}
           />
         )}
@@ -62,6 +64,7 @@ const Header = <TData extends object>(props: HeaderProps<TData>) => {
             size="sm"
             variant="success"
             onClick={props.onAddNew}
+            aria-label="Add new"
             icon={faPlus}
           />
         )}
@@ -74,6 +77,7 @@ const Header = <TData extends object>(props: HeaderProps<TData>) => {
         {props.optionsDropdown && (
           <Dropdown
             icon={faEllipsisVertical}
+            aria-label="More options"
             size="sm"
             variant="secondary"
             align="left"

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

@@ -32,12 +32,14 @@ const InfiniteScrollTable = <TData extends object>(
             <Checkbox
               checked={props.allSelected}
               onChange={props.onSelectAll}
+              aria-label="Select all rows"
             />
           ),
           cell: (row) => (
             <Checkbox
               checked={props.selectedRows.has(row.index) || props.allSelected}
               onChange={() => props.onRowSelect(row.index)}
+              aria-label={`Select row ${row.index + 1}`}
             />
           ),
         };

package/src/components/data-display/infiniteScroll/tags/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { InfiniteScrollMenuGeneratedFilter } from "../types.js";
-import SearchFilterTag from "./searchFilterTag.js";
 import SelectFilterTag from "./selectFilterTag.js";
 import RangeFilterTag from "./rangeFilterTag.js";
 import ListFilterTag from "./listFilterTag.js";
@@ -13,6 +12,7 @@ interface InfiniteScrollMenuTagsProps {
 }
 
 const Tags = (props: InfiniteScrollMenuTagsProps) => {
+  // SEARCH filters get no tag: their search box already shows the value.
   const filterTags = props.filters.reduce((tags, f) => {
     if (f.type === "SELECT") {
       const selectedFilters = f.options?.filter((o) => o.selected);
@@ -51,16 +51,6 @@ const Tags = (props: InfiniteScrollMenuTagsProps) => {
           />
         );
       }
-    } else if (f.type === "SEARCH") {
-      if (!f.value) return tags;
-      tags.push(
-        <SearchFilterTag
-          key={f.filterId}
-          filter={f}
-          filters={props.filters}
-          handleNewFilters={props.handleNewFilters}
-        />
-      );
     } else if (f.type === "LIST") {
       if (!f.list) return tags;
       tags.push(

package/src/components/data-display/infiniteScroll/tags/listFilterTag.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import IconButton from "../../../buttons/iconButton/index.js";
 import type { TableColumn } from "../../dataTable/types.js";
 import Table from "../../../data-display/table/index.js";
 import { useCallback, useMemo, useState } from "react";
+import Badge from "../../../feedback/badge/index.js";
 import Modal from "../../../overlays/modal/index.js";
 import Input from "../../../inputs/input/index.js";
 import Row from "../../../layout/row/index.js";
 import "./styles.css";
 import {
-  faList,
   faPenToSquare,
   faPlus,
   faXmark,
@@ -111,20 +110,17 @@ const ListFilterTag = (props: InfiniteScrollListFilterTagProps) => {
   );
 
   return (
-    <div className="k-tag-container">
-      <p className="k-tag-title">{props.filter.title}</p>
-      <div className="k-tag-actions">
-        <FontAwesomeIcon icon={faList} />
-        <p className="k-tag-value">{tagValue}</p>
-        <div className="k-lft-buttons">
-          <IconButton
-            icon={faPenToSquare}
-            onClick={() => setShow(!show)}
-            size="sm"
-          />
-          <IconButton icon={faXmark} onClick={handleRemove} size="sm" />
-        </div>
-      </div>
+    <div className="k-lft-buttons">
+      <Badge onRemove={handleRemove}>
+        {props.filter.title}: {tagValue}
+      </Badge>
+      <IconButton
+        icon={faPenToSquare}
+        onClick={() => setShow(!show)}
+        size="sm"
+        variant="light"
+        aria-label={`Edit ${props.filter.title}`}
+      />
       <Modal show={show} onClose={handleClose} title={props.filter.title}>
         <div className="k-lft-modal-body">
           <Input

package/src/components/data-display/infiniteScroll/tags/rangeFilterTag.tsx

@@ -1,16 +1,9 @@
 "use client";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import IconButton from "../../../buttons/iconButton/index.js";
+import Badge from "../../../feedback/badge/index.js";
 import { useCallback, useMemo } from "react";
 import { DateTime } from "luxon";
 import "./styles.css";
-import {
-  faCalendarDays,
-  faFont,
-  faHashtag,
-  faXmark,
-} from "@fortawesome/free-solid-svg-icons";
 import {
   GeneratedRangeFilter,
   InfiniteScrollMenuGeneratedFilter,
@@ -48,12 +41,6 @@ const RangeFilterTag = (props: InfiniteScrollRangeFilterTagProps) => {
     else if (filter.rangeType === "STRING") return value;
   }, [filter, filterValue, filter.rangeType]);
 
-  const iconToUse = useMemo(() => {
-    if (isDate) return faCalendarDays;
-    else if (filter.rangeType === "NUMBER") return faHashtag;
-    else if (filter.rangeType === "STRING") return faFont;
-  }, [filter.rangeType]);
-
   const handleRemove = useCallback(() => {
     const newFilters = props.filters.map((f) => {
       if (f.filterId !== props.filter.filterId) return f;
@@ -63,14 +50,9 @@ const RangeFilterTag = (props: InfiniteScrollRangeFilterTagProps) => {
   }, [props.filters, filterValue]);
 
   return (
-    <div className="k-tag-container">
-      <p className="k-tag-title">{tagTitle}</p>
-      <div className="k-tag-actions">
-        {iconToUse && <FontAwesomeIcon icon={iconToUse} />}
-        <p className="k-tag-value">{tagValue}</p>
-        <IconButton icon={faXmark} onClick={handleRemove} size="sm" />
-      </div>
-    </div>
+    <Badge onRemove={handleRemove}>
+      {tagTitle}: {tagValue}
+    </Badge>
   );
 };
 

package/src/components/data-display/infiniteScroll/tags/selectFilterTag.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { faCheckSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import IconButton from "../../../buttons/iconButton/index.js";
+import Badge from "../../../feedback/badge/index.js";
 import { useCallback } from "react";
 import "../styles.css";
 import {
@@ -32,14 +30,9 @@ const SelectFilterTag = (props: InfiniteScrollSelectFilterTagProps) => {
   }, [props]);
 
   return (
-    <div className="k-tag-container">
-      <p className="k-tag-title">{props.filter.title}</p>
-      <div className="k-tag-actions">
-        <FontAwesomeIcon icon={faCheckSquare} />
-        <p className="k-tag-value">{props.filterOption.name}</p>
-        <IconButton onClick={handleRemove} size="sm" icon={faXmark} />
-      </div>
-    </div>
+    <Badge onRemove={handleRemove}>
+      {props.filter.title}: {props.filterOption.name}
+    </Badge>
   );
 };
 

package/src/components/data-display/infiniteScroll/tags/styles.css

@@ -2,42 +2,14 @@
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
-}
-
-.k-tag-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  background-color: var(--primary-color);
-  border-radius: 0.375rem;
-  color: var(--text-color-light);
-  padding-left: 0.5rem;
-}
-
-.k-tag-title {
-  margin: 0;
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
-}
-
-.k-tag-actions {
-  display: flex;
-  flex-direction: row;
   align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.25rem;
-  margin-top: -0.25rem;
-}
-
-.k-tag-value {
-  margin: 0;
-  font-size: 0.875rem;
 }
 
 .k-lft-buttons {
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 0.25rem;
 }
 
 .k-lft-modal-body {

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

@@ -34,8 +34,7 @@
 
 .k-recovery-code-grid-index {
   font-size: 0.75rem;
-  color: var(--text-color);
-  opacity: 0.55;
+  color: var(--text-color-secondary);
   min-width: 1.5rem;
   text-align: right;
 }

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

@@ -92,5 +92,5 @@
 }
 
 .k-stat-card-interactive:hover .k-stat-card-trailing {
-  color: var(--primary-color);
+  color: var(--primary-color-text);
 }

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

@@ -8,7 +8,18 @@
 
 .k-table th,
 .k-table td {
-  padding: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+/* Keep text clear of the table's outer edges. */
+.k-table th:first-child,
+.k-table td:first-child {
+  padding-left: 1rem;
+}
+
+.k-table th:last-child,
+.k-table td:last-child {
+  padding-right: 1rem;
 }
 
 .k-table th {

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

@@ -21,9 +21,11 @@ const TagCard = (props: TagCardProps) => {
         {props.tags.length ? (
           <ul className="k-tag-card-list">
             {props.tags.map((t) => (
-              <Badge key={t} variant={color} size="md" pill>
-                {t}
-              </Badge>
+              <li key={t}>
+                <Badge variant={color} size="md" pill>
+                  {t}
+                </Badge>
+              </li>
             ))}
           </ul>
         ) : (