@kosmeo-ui/react 0.2.0 → 1.0.1

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/styles.css

@@ -4,12 +4,12 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem 1.5rem;
-  color: var(--text-color);
+  color: var(--k-text-color);
 }
 
 .k-pagination-summary {
   margin: 0;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-variant-numeric: tabular-nums;
 }
 
@@ -26,10 +26,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 0.0625rem solid var(--border-color);
+  border: 0.0625rem solid var(--k-border-color);
   border-radius: 0.375rem;
-  background-color: var(--background-color-light);
-  color: var(--text-color);
+  background-color: var(--k-background-color-light);
+  color: var(--k-text-color);
   font-variant-numeric: tabular-nums;
   cursor: pointer;
   transition:
@@ -38,19 +38,19 @@
 }
 
 .k-pagination-button:not(:disabled):hover {
-  background-color: var(--background-color-hover);
+  background-color: var(--k-background-color-hover);
 }
 
 .k-pagination-button:focus-visible {
-  outline: 0.125rem solid var(--border-color-active);
+  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(--primary-color);
-  background-color: var(--primary-color);
-  color: var(--text-color-light);
+  border-color: var(--k-primary-color);
+  background-color: var(--k-primary-color);
+  color: var(--k-text-color-light);
   font-weight: 600;
 }
 
@@ -60,7 +60,7 @@
 }
 
 .k-pagination-gap {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   text-align: center;
 }
 
@@ -68,13 +68,13 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: var(--text-color-secondary);
+  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(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-pagination-sm .k-pagination-button,
@@ -85,7 +85,7 @@
 }
 
 .k-pagination-md {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-pagination-md .k-pagination-button,
@@ -96,7 +96,7 @@
 }
 
 .k-pagination-lg {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-pagination-lg .k-pagination-button,

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

@@ -16,7 +16,7 @@
   letter-spacing: 0.05em;
   /* 50% white: the weakest overlay that keeps small text above 4.5:1 on the
      sidebar's dark background. */
-  color: var(--overlay-light-strong);
+  color: var(--k-overlay-light-strong);
   white-space: nowrap;
   overflow: hidden;
 }
@@ -26,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:
@@ -37,18 +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(--text-color-light);
+  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-text);
-  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-text);
-  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-text);
-  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-text);
-  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-text);
-  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-text);
-  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-text);
+  color: var(--k-primary-color-text);
 }
 
 .k-tabs-button-active {
-  color: var(--primary-color-text);
-  border-bottom-color: var(--primary-color);
+  color: var(--k-primary-color-text);
+  border-bottom-color: var(--k-primary-color);
 }
 
 .k-tabs-button:disabled {

package/src/components/overlays/modal/index.tsx

@@ -1,10 +1,16 @@
 "use client";
 
-import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import useFocusTrap from "../../../hooks/useFocusTrap.js";
 import Button from "../../buttons/button/index.js";
 import Portal from "../portal/index.js";
 import "./styles.css";
+import React, {
+  PropsWithChildren,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
 
 export type ModalSize = "sm" | "md" | "lg" | "full";
 
@@ -33,6 +39,7 @@ const Modal = (props: ModalProps) => {
   const [isAnimating, setIsAnimating] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
   const pressStartedOnOverlay = useRef(false);
+  const titleId = useId();
 
   useEffect(() => {
     if (props.show) {
@@ -85,8 +92,13 @@ const Modal = (props: ModalProps) => {
           className={`k-modal-content ${isAnimating ? "closing" : ""} ${size}`}
           role="dialog"
           aria-modal="true"
+          aria-labelledby={props.title ? titleId : undefined}
         >
-          {props.title && <div className="k-modal-header">{props.title}</div>}
+          {props.title && (
+            <div id={titleId} className="k-modal-header">
+              {props.title}
+            </div>
+          )}
           <div className="k-modal-body">{props.children}</div>
           <div className="k-modal-footer">
             {props.footerButtons ? (

package/src/components/overlays/modal/styles.css

@@ -1,4 +1,4 @@
-@keyframes fadeIn {
+@keyframes k-fade-in {
   from {
     opacity: 0;
   }
@@ -7,7 +7,7 @@
   }
 }
 
-@keyframes fadeOut {
+@keyframes k-fade-out {
   from {
     opacity: 1;
   }
@@ -16,7 +16,7 @@
   }
 }
 
-@keyframes scaleIn {
+@keyframes k-scale-in {
   from {
     transform: scale(0.95);
   }
@@ -25,7 +25,7 @@
   }
 }
 
-@keyframes scaleOut {
+@keyframes k-scale-out {
   from {
     transform: scale(1);
   }
@@ -37,7 +37,7 @@
 .k-modal-overlay {
   position: fixed;
   inset: 0;
-  background-color: var(--background-color-overlay);
+  background-color: var(--k-background-color-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -45,16 +45,16 @@
   padding: 1rem;
   opacity: 1;
   pointer-events: auto;
-  animation: fadeIn 0.2s ease-out forwards;
+  animation: k-fade-in 0.2s ease-out forwards;
 }
 
 .k-modal-content {
-  background-color: var(--background-color-light);
+  background-color: var(--k-background-color-light);
   border-radius: 0.5rem;
   padding: 1rem;
   box-shadow:
-    0 1.25rem 1.5625rem -0.3125rem var(--shadow-color),
-    0 0.5rem 0.625rem -0.375rem var(--shadow-color);
+    0 1.25rem 1.5625rem -0.3125rem var(--k-shadow-color),
+    0 0.5rem 0.625rem -0.375rem var(--k-shadow-color);
   max-width: 40rem;
   width: 100%;
   display: flex;
@@ -63,7 +63,7 @@
   opacity: 1;
   transform: scale(1);
   pointer-events: auto;
-  animation: scaleIn 0.2s ease-out forwards;
+  animation: k-scale-in 0.2s ease-out forwards;
   max-height: 80vh;
   overflow: hidden;
 }
@@ -88,21 +88,21 @@
 }
 
 .k-modal-overlay.closing {
-  animation: fadeOut 0.2s ease-in forwards;
+  animation: k-fade-out 0.2s ease-in forwards;
   pointer-events: none;
 }
 
 .k-modal-content.closing {
-  animation: scaleOut 0.2s ease-in forwards;
+  animation: k-scale-out 0.2s ease-in forwards;
   pointer-events: none;
 }
 
 .k-modal-header {
   padding-bottom: 0.5rem;
-  border-bottom: 0.0625rem solid var(--border-color);
-  font-size: var(--text-size-xl);
+  border-bottom: 0.0625rem solid var(--k-border-color);
+  font-size: var(--k-text-size-xl);
   font-weight: 700;
-  color: var(--text-color);
+  color: var(--k-text-color);
 }
 
 .k-modal-body {
@@ -110,22 +110,22 @@
   flex-direction: column;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   overflow-y: auto;
   min-height: 0;
   flex: 1;
 }
 
 .k-modal-message {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   font-weight: 600;
-  color: var(--text-color);
+  color: var(--k-text-color);
   margin-bottom: 1rem;
 }
 
 .k-modal-footer {
   padding-top: 0.5rem;
-  border-top: 0.0625rem solid var(--border-color);
+  border-top: 0.0625rem solid var(--k-border-color);
   display: flex;
   justify-content: end;
   gap: 0.5rem;

package/src/hooks/useInfinite.ts

@@ -18,7 +18,7 @@ interface UseInfiniteOptions {
   queryKey: string;
   /** Organization ID to scope cache keys (prevents stale cross-org data) */
   orgId?: string | null;
-  /** Initial limit (default: 10) */
+  /** Initial limit (default: 25, InfiniteScroll's default page size) */
   initialLimit?: number;
   /** Whether or not the query should be enabled */
   enabled?: boolean;
@@ -29,6 +29,8 @@ export interface UseInfiniteReturn<T> {
   hasMore: boolean;
   isLoading: boolean;
   isReloading: boolean;
+  /** The failed request's error, or null; cleared once a load succeeds. */
+  error: Error | null;
   total: number;
   onQueryChange: (queryString: string) => void;
   reload: () => void;
@@ -42,7 +44,7 @@ const useInfinite = <T extends { id: number | string }>(
     endpoint,
     queryKey,
     orgId,
-    initialLimit = 10,
+    initialLimit = 25,
   } = options;
 
   const [queryString, setQueryString] = useState(
@@ -139,9 +141,11 @@ const useInfinite = <T extends { id: number | string }>(
 
   return {
     data: allData,
-    hasMore: query.data?.hasMore ?? true,
+    // After a failure, stop offering pages: reload() retries.
+    hasMore: query.isError ? false : (query.data?.hasMore ?? true),
     isLoading: query.isLoading,
     isReloading: query.isFetching && allData.length > 0,
+    error: query.error,
     total: query.data?.total ?? 0,
     onQueryChange: handleQueryChange,
     reload,