@kosmeo-ui/react 0.1.1 → 1.0.0

package/src/components/layout/sectionHeader/styles.css

@@ -11,13 +11,13 @@
 
 .k-section-header-divider {
   padding-bottom: 1rem;
-  border-bottom: 0.0625rem solid var(--border-color);
+  border-bottom: 0.0625rem solid var(--k-border-color);
   margin-bottom: 1.5rem;
 }
 
 .k-section-header-preface {
   font-size: 0.875rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-section-header-row {
@@ -82,8 +82,7 @@
 
 .k-section-header-subtitle {
   font-size: 0.8125rem;
-  color: var(--text-color);
-  opacity: 0.65;
+  color: var(--k-text-color-secondary);
 }
 
 .k-section-header-badges {

package/src/components/navigation/breadcrumbs/styles.css

@@ -7,12 +7,12 @@
 }
 
 .k-breadcrumb-item {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-breadcrumb-item a {
   text-decoration: none;
-  color: var(--text-color-link);
+  color: var(--k-text-color-link);
 }
 
 .k-breadcrumb-item a:hover {
@@ -20,23 +20,23 @@
 }
 
 .k-breadcrumb-item span {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-breadcrumb-item + .k-breadcrumb-item::before {
   content: "/";
   margin: 0 0.5rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-breadcrumb-item-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-breadcrumb-item-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-breadcrumb-item-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
 }

package/src/components/navigation/pagination/index.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Select from "../../inputs/select/index.js";
+import { PropsWithSize } from "../../types.js";
+import { pageRange } from "./utils.js";
+import { useId } from "react";
+import "./styles.css";
+import {
+  faChevronLeft,
+  faChevronRight,
+} from "@fortawesome/free-solid-svg-icons";
+
+export interface PaginationProps extends PropsWithSize {
+  /** Current page, starting at 1. */
+  page: number;
+  /** Total number of pages. */
+  pageCount: number;
+  onPageChange: (page: number) => void;
+  /** Total item count. With `pageSize`, shows a "51–75 of 240" summary. */
+  total?: number;
+  /** Items per page. Needed for the summary and the page-size picker. */
+  pageSize?: number;
+  /** Page sizes to offer. With `onPageSizeChange`, shows a "Rows per page" picker. */
+  pageSizeOptions?: number[];
+  onPageSizeChange?: (pageSize: number) => void;
+  /** Pages shown either side of the current page before a "…" gap. Defaults to 1. */
+  siblingCount?: number;
+  /** Accessible name for the navigation landmark. Defaults to "Pagination". */
+  "aria-label"?: string;
+}
+
+const Pagination = ({
+  page,
+  pageCount,
+  onPageChange,
+  total,
+  pageSize,
+  pageSizeOptions,
+  onPageSizeChange,
+  siblingCount = 1,
+  size = "md",
+  "aria-label": ariaLabel = "Pagination",
+}: PaginationProps) => {
+  const pageSizeId = useId();
+  const lastPage = Math.max(pageCount, 1);
+  const current = Math.min(Math.max(page, 1), lastPage);
+
+  const goTo = (target: number) => {
+    if (target >= 1 && target <= lastPage && target !== current) {
+      onPageChange(target);
+    }
+  };
+
+  const summary =
+    total !== undefined && pageSize !== undefined
+      ? total === 0
+        ? "No results"
+        : `${(current - 1) * pageSize + 1}–${Math.min(current * pageSize, total)} of ${total.toLocaleString()}`
+      : undefined;
+
+  return (
+    <nav className={`k-pagination k-pagination-${size}`} aria-label={ariaLabel}>
+      {summary && (
+        <p className="k-pagination-summary" aria-live="polite">
+          {summary}
+        </p>
+      )}
+
+      <ul className="k-pagination-pages">
+        <li>
+          <button
+            type="button"
+            className="k-pagination-button"
+            onClick={() => goTo(current - 1)}
+            disabled={current <= 1}
+            aria-label="Previous page"
+          >
+            <FontAwesomeIcon icon={faChevronLeft} aria-hidden="true" />
+          </button>
+        </li>
+        {pageRange(current, lastPage, siblingCount).map((item) =>
+          typeof item === "number" ? (
+            <li key={item}>
+              <button
+                type="button"
+                className={`k-pagination-button${item === current ? " k-pagination-button-current" : ""}`}
+                onClick={() => goTo(item)}
+                aria-label={`Page ${item}`}
+                aria-current={item === current ? "page" : undefined}
+              >
+                {item}
+              </button>
+            </li>
+          ) : (
+            <li key={item} className="k-pagination-gap" aria-hidden="true">
+              …
+            </li>
+          )
+        )}
+        <li>
+          <button
+            type="button"
+            className="k-pagination-button"
+            onClick={() => goTo(current + 1)}
+            disabled={current >= lastPage}
+            aria-label="Next page"
+          >
+            <FontAwesomeIcon icon={faChevronRight} aria-hidden="true" />
+          </button>
+        </li>
+      </ul>
+
+      {pageSizeOptions && onPageSizeChange && (
+        <div className="k-pagination-page-size">
+          <label htmlFor={pageSizeId}>Rows per page</label>
+          {/* Select works in strings. */}
+          <Select
+            id={pageSizeId}
+            size="sm"
+            value={pageSize === undefined ? undefined : String(pageSize)}
+            options={pageSizeOptions.map((n) => ({
+              value: String(n),
+              label: String(n),
+            }))}
+            onChange={(n) => n !== undefined && onPageSizeChange(Number(n))}
+          />
+        </div>
+      )}
+    </nav>
+  );
+};
+
+export default Pagination;

package/src/components/navigation/pagination/styles.css

@@ -0,0 +1,113 @@
+.k-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1.5rem;
+  color: var(--k-text-color);
+}
+
+.k-pagination-summary {
+  margin: 0;
+  color: var(--k-text-color-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.k-pagination-pages {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.k-pagination-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0.0625rem solid var(--k-border-color);
+  border-radius: 0.375rem;
+  background-color: var(--k-background-color-light);
+  color: var(--k-text-color);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
+}
+
+.k-pagination-button:not(:disabled):hover {
+  background-color: var(--k-background-color-hover);
+}
+
+.k-pagination-button:focus-visible {
+  outline: 0.125rem solid var(--k-border-color-active);
+  outline-offset: 0.125rem;
+}
+
+.k-pagination-button-current,
+.k-pagination-button-current:not(:disabled):hover {
+  border-color: var(--k-primary-color);
+  background-color: var(--k-primary-color);
+  color: var(--k-text-color-light);
+  font-weight: 600;
+}
+
+.k-pagination-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.k-pagination-gap {
+  color: var(--k-text-color-secondary);
+  text-align: center;
+}
+
+.k-pagination-page-size {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--k-text-color-secondary);
+  white-space: nowrap;
+}
+
+/* Sizes: every button stays at least 32px, above the 24px target minimum. */
+.k-pagination-sm {
+  font-size: var(--k-text-size-sm);
+}
+
+.k-pagination-sm .k-pagination-button,
+.k-pagination-sm .k-pagination-gap {
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+}
+
+.k-pagination-md {
+  font-size: var(--k-text-size-sm);
+}
+
+.k-pagination-md .k-pagination-button,
+.k-pagination-md .k-pagination-gap {
+  min-width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 0.625rem;
+}
+
+.k-pagination-lg {
+  font-size: var(--k-text-size-md);
+}
+
+.k-pagination-lg .k-pagination-button,
+.k-pagination-lg .k-pagination-gap {
+  min-width: 2.75rem;
+  height: 2.75rem;
+  padding: 0 0.75rem;
+}
+
+.k-pagination-gap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/navigation/pagination/utils.ts

@@ -0,0 +1,32 @@
+export type PageRangeItem = number | "start-gap" | "end-gap";
+
+/**
+ * The page buttons to show: always the first and last page, the current page
+ * with `siblings` neighbours either side, and a gap marker wherever pages are
+ * skipped. The list is the same length on every page, so the control doesn't
+ * jump around as you move through it.
+ */
+export const pageRange = (
+  page: number,
+  pageCount: number,
+  siblings = 1
+): PageRangeItem[] => {
+  const range = (from: number, to: number) =>
+    Array.from({ length: to - from + 1 }, (_, i) => from + i);
+
+  // first + last + current + siblings + two gaps
+  const slots = siblings * 2 + 5;
+  if (pageCount <= slots) return range(1, pageCount);
+
+  const left = Math.max(page - siblings, 1);
+  const right = Math.min(page + siblings, pageCount);
+  const gapBefore = left > 2;
+  const gapAfter = right < pageCount - 1;
+  // Pages shown at the start or end when only one gap is needed.
+  const edge = siblings * 2 + 3;
+
+  if (!gapBefore) return [...range(1, edge), "end-gap", pageCount];
+  if (!gapAfter)
+    return [1, "start-gap", ...range(pageCount - edge + 1, pageCount)];
+  return [1, "start-gap", ...range(left, right), "end-gap", pageCount];
+};

package/src/components/navigation/sidebar/styles.css

@@ -14,7 +14,9 @@
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--overlay-light-medium);
+  /* 50% white: the weakest overlay that keeps small text above 4.5:1 on the
+     sidebar's dark background. */
+  color: var(--k-overlay-light-strong);
   white-space: nowrap;
   overflow: hidden;
 }
@@ -24,7 +26,7 @@
   align-items: center;
   gap: 0.75rem;
   padding: 0.6rem 1.5rem;
-  color: var(--text-color-light);
+  color: var(--k-text-color-light);
   text-decoration: none;
   font-size: 0.875rem;
   transition:
@@ -35,12 +37,18 @@
 }
 
 .k-sidebar-nav-link:hover {
-  background-color: var(--overlay-light-weak);
+  background-color: var(--k-overlay-light-weak);
+}
+
+/* Browser default focus rings can vanish on the dark background. */
+.k-sidebar-nav-link:focus-visible {
+  outline: 2px solid var(--k-text-color-light);
+  outline-offset: -2px;
 }
 
 .k-sidebar-nav-link.active {
-  background-color: var(--overlay-light-medium);
-  color: var(--text-color-light);
+  background-color: var(--k-overlay-light-medium);
+  color: var(--k-text-color-light);
   font-weight: 600;
 }
 

package/src/components/navigation/stepper/styles.css

@@ -38,14 +38,14 @@
   height: 2rem;
   min-width: 2rem;
   border-radius: 50%;
-  border: 0.125rem solid var(--border-color);
+  border: 0.125rem solid var(--k-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 0.875rem;
-  background: var(--background-color);
-  color: var(--text-color);
+  background: var(--k-background-color);
+  color: var(--k-text-color);
   transition:
     background 0.15s ease,
     border-color 0.15s ease,
@@ -60,7 +60,7 @@
 
 .k-stepper-connector {
   position: absolute;
-  background: var(--border-color);
+  background: var(--k-border-color);
 }
 
 .k-stepper-horizontal .k-stepper-connector {
@@ -78,24 +78,24 @@
 }
 
 .k-stepper-step-active .k-stepper-marker {
-  border-color: var(--primary-color);
-  background: var(--primary-color);
-  color: var(--text-color-light);
+  border-color: var(--k-primary-color);
+  background: var(--k-primary-color);
+  color: var(--k-text-color-light);
 }
 
 .k-stepper-step-complete .k-stepper-marker {
-  border-color: var(--success-color);
-  background: var(--success-color);
-  color: var(--text-color-light);
+  border-color: var(--k-success-color);
+  background: var(--k-success-color);
+  color: var(--k-text-color-light);
 }
 
 .k-stepper-step-error .k-stepper-marker {
-  border-color: var(--danger-color);
-  background: var(--danger-color);
-  color: var(--text-color-light);
+  border-color: var(--k-danger-color);
+  background: var(--k-danger-color);
+  color: var(--k-text-color-light);
 }
 
 .k-stepper-step-complete .k-stepper-connector,
 .k-stepper-step-active .k-stepper-connector {
-  background: var(--primary-color);
+  background: var(--k-primary-color);
 }

package/src/components/navigation/tabButton/styles.css

@@ -1,6 +1,6 @@
 .k-tab-button {
-  background: var(--background-color);
-  border: 0.0625rem solid var(--border-color);
+  background: var(--k-background-color);
+  border: 0.0625rem solid var(--k-border-color);
   border-bottom: 0.125rem solid transparent;
   border-radius: 0.375rem 0.375rem 0 0;
   padding: 0.5rem 1rem;
@@ -15,126 +15,126 @@
 /* Size variations */
 .k-tab-button-sm {
   padding: 0.375rem 0.75rem;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-tab-button-md {
   padding: 0.5rem 1rem;
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-tab-button-lg {
   padding: 0.625rem 1.25rem;
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
 }
 
 /* Variant styles - all keep white background, only text and border colors change */
 .k-tab-button-primary {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-primary:hover:not(.k-tab-button-disabled) {
-  color: var(--primary-color);
-  background-color: var(--background-color);
+  color: var(--k-primary-color-text);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-primary.k-tab-button-active {
-  color: var(--primary-color);
-  background-color: var(--background-color);
-  border-bottom-color: var(--primary-color);
-  border-color: var(--primary-color) var(--primary-color) transparent
-    var(--primary-color);
+  color: var(--k-primary-color-text);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-primary-color);
+  border-color: var(--k-primary-color) var(--k-primary-color) transparent
+    var(--k-primary-color);
 }
 
 .k-tab-button-secondary {
-  color: var(--text-color-secondary);
-  background-color: var(--background-color);
+  color: var(--k-text-color-secondary);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-secondary:hover:not(.k-tab-button-disabled) {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-secondary.k-tab-button-active {
-  color: var(--text-color);
-  background-color: var(--background-color);
-  border-bottom-color: var(--secondary-color);
-  border-color: var(--secondary-color) var(--secondary-color) transparent
-    var(--secondary-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-secondary-color);
+  border-color: var(--k-secondary-color) var(--k-secondary-color) transparent
+    var(--k-secondary-color);
 }
 
 .k-tab-button-success {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-success:hover:not(.k-tab-button-disabled) {
-  color: var(--success-color);
-  background-color: var(--background-color);
+  color: var(--k-success-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-success.k-tab-button-active {
-  color: var(--success-color);
-  background-color: var(--background-color);
-  border-bottom-color: var(--success-color);
-  border-color: var(--success-color) var(--success-color) transparent
-    var(--success-color);
+  color: var(--k-success-color);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-success-color);
+  border-color: var(--k-success-color) var(--k-success-color) transparent
+    var(--k-success-color);
 }
 
 .k-tab-button-danger {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-danger:hover:not(.k-tab-button-disabled) {
-  color: var(--danger-color);
-  background-color: var(--background-color);
+  color: var(--k-danger-color-text);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-danger.k-tab-button-active {
-  color: var(--danger-color);
-  background-color: var(--background-color);
-  border-bottom-color: var(--danger-color);
-  border-color: var(--danger-color) var(--danger-color) transparent
-    var(--danger-color);
+  color: var(--k-danger-color-text);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-danger-color);
+  border-color: var(--k-danger-color) var(--k-danger-color) transparent
+    var(--k-danger-color);
 }
 
 .k-tab-button-warning {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-warning:hover:not(.k-tab-button-disabled) {
-  color: var(--warning-color);
-  background-color: var(--background-color);
+  color: var(--k-warning-color-text);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-warning.k-tab-button-active {
-  color: var(--warning-color);
-  background-color: var(--background-color);
-  border-bottom-color: var(--warning-color);
-  border-color: var(--warning-color) var(--warning-color) transparent
-    var(--warning-color);
+  color: var(--k-warning-color-text);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-warning-color);
+  border-color: var(--k-warning-color) var(--k-warning-color) transparent
+    var(--k-warning-color);
 }
 
 .k-tab-button-light {
-  color: var(--text-color-secondary);
-  background-color: var(--background-color);
+  color: var(--k-text-color-secondary);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-light:hover:not(.k-tab-button-disabled) {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-light.k-tab-button-active {
-  color: var(--text-color);
-  background-color: var(--background-color);
-  border-bottom-color: var(--border-color);
-  border-color: var(--border-color) var(--border-color) transparent
-    var(--border-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-border-color);
+  border-color: var(--k-border-color) var(--k-border-color) transparent
+    var(--k-border-color);
 }
 
 /* Disabled state */

package/src/components/navigation/tabs/styles.css

@@ -7,7 +7,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
-  border-bottom: 0.0625rem solid var(--border-color);
+  border-bottom: 0.0625rem solid var(--k-border-color);
   margin-bottom: 1rem;
 }
 
@@ -16,7 +16,7 @@
   background: transparent;
   border: none;
   border-bottom: 0.1875rem solid transparent;
-  color: var(--text-color);
+  color: var(--k-text-color);
   cursor: pointer;
   font-size: 0.9375rem;
   font-weight: 500;
@@ -28,12 +28,12 @@
 }
 
 .k-tabs-button:hover:not(:disabled) {
-  color: var(--primary-color);
+  color: var(--k-primary-color-text);
 }
 
 .k-tabs-button-active {
-  color: var(--primary-color);
-  border-bottom-color: var(--primary-color);
+  color: var(--k-primary-color-text);
+  border-bottom-color: var(--k-primary-color);
 }
 
 .k-tabs-button:disabled {