@kosmeo-ui/react 0.1.1 → 1.0.0

package/src/components/inputs/switch/styles.css

@@ -15,7 +15,7 @@
 .k-switch-label {
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--text-color);
+  color: var(--k-text-color);
   cursor: pointer;
   user-select: none;
 }
@@ -23,13 +23,13 @@
 .k-switch-track {
   position: relative;
   border-radius: 999px;
-  background-color: var(--border-color);
+  background-color: var(--k-border-color);
   cursor: pointer;
   transition: background-color 0.2s ease-in-out;
 }
 
 .k-switch-track.k-switch-on {
-  background-color: var(--success-color);
+  background-color: var(--k-success-color);
 }
 
 /* Size: md (default) */
@@ -70,7 +70,7 @@
 .k-switch-thumb {
   position: absolute;
   border-radius: 50%;
-  background-color: var(--background-color-light);
+  background-color: var(--k-background-color-light);
   transition: transform 0.2s ease-in-out;
   pointer-events: none;
 }
@@ -101,7 +101,7 @@
 
 .k-switch-disabled + .k-switch-label,
 .k-switch-label:has(~ .k-switch-track.k-switch-disabled) {
-  color: var(--text-color-disabled);
+  color: var(--k-text-color-disabled);
   cursor: not-allowed;
 }
 

package/src/components/inputs/textArea/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import FieldShell from "../../forms/fieldShell/index.js";
+import { useEffect, useId, useRef } from "react";
 import { PropsWithSize } from "../../types.js";
-import { useEffect, useRef } from "react";
 import "./styles.css";
 
 interface TextAreaProps extends PropsWithSize {
@@ -57,8 +57,8 @@ const TextArea = (props: TextAreaProps) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const internalRef = props.ref || textareaRef;
 
-  const inputId =
-    props.id || `input-${Math.random().toString(36).substring(2, 9)}`;
+  const generatedId = useId();
+  const inputId = props.id || `input-${generatedId}`;
 
   const adjustHeight = () => {
     if (!autoExpand) return;

package/src/components/inputs/textArea/styles.css

@@ -1,8 +1,8 @@
 .k-textarea {
-  background-color: var(--background-color-light);
-  border: 0.0625rem solid var(--border-color);
+  background-color: var(--k-background-color-light);
+  border: 0.0625rem solid var(--k-border-color);
   border-radius: 0.375rem;
-  color: var(--text-color);
+  color: var(--k-text-color);
   width: 100%;
   box-sizing: border-box;
   transition:
@@ -14,34 +14,34 @@
 }
 
 .k-textarea-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.5rem 0.75rem;
 }
 
 .k-textarea-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.625rem 1rem;
 }
 
 .k-textarea-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 0.75rem 1.25rem;
 }
 
 .k-textarea::placeholder {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   opacity: 0.7;
 }
 
 .k-textarea:focus {
   outline: none;
-  border-color: var(--border-color-active);
-  box-shadow: 0 0 0 0.1875rem var(--border-shadow-color-active);
+  border-color: var(--k-border-color-active);
+  box-shadow: 0 0 0 0.1875rem var(--k-border-shadow-color-active);
 }
 
 .k-textarea:disabled {
-  background-color: var(--bg-color-disabled);
-  color: var(--text-color-disabled);
+  background-color: var(--k-background-color-disabled);
+  color: var(--k-text-color-disabled);
   cursor: not-allowed;
   opacity: 0.6;
   resize: none;

package/src/components/inputs/typeahead/index.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import useFloatingPosition from "../../../hooks/useFloatingPosition.js";
+import { useEffect, useId, useRef, useState, ReactNode } from "react";
 import useScrollIntoView from "../../../hooks/useScrollIntoView.js";
 import useListKeyboard from "../../../hooks/useListKeyboard.js";
 import useOutsideClick from "../../../hooks/useOutsideClick.js";
-import { useEffect, useRef, useState, ReactNode } from "react";
 import Portal from "../../overlays/portal/index.js";
 import { PropsWithSize } from "../../types.js";
 import Input from "../input/index.js";
@@ -111,6 +111,8 @@ const Typeahead = <T,>(props: TypeaheadProps<T>) => {
   const isSelectingOption = useRef(false);
   const observerRef = useRef<IntersectionObserver | null>(null);
   const listRef = useRef<HTMLUListElement>(null);
+  const listboxId = `${useId()}-listbox`;
+  const optionId = (index: number) => `${listboxId}-option-${index}`;
   const { anchorRef: inputWrapperRef, position: dropdownPos } =
     useFloatingPosition({ isOpen });
 
@@ -198,6 +200,9 @@ const Typeahead = <T,>(props: TypeaheadProps<T>) => {
     displayCount,
     filteredOptions.length,
     displayedOptions,
+    // The list mounts a render after opening, once it has a position; without
+    // this, nothing else may change then and the observer never attaches.
+    !!dropdownPos,
   ]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -284,62 +289,78 @@ const Typeahead = <T,>(props: TypeaheadProps<T>) => {
   // Reset the refs array before each render
   optionRefs.current = [];
 
-  const dropdownList =
-    isOpen && dropdownPos ? (
-      <ul
-        ref={listRef}
-        className={`k-typeahead-options-list k-typeahead-options-list-portal ${
-          longDropDown
-            ? "k-typeahead-options-list-large"
-            : "k-typeahead-options-list-small"
-        }`}
-        style={{
-          position: "fixed",
-          top: dropdownPos.top,
-          left: dropdownPos.left,
-          width: dropdownPos.width,
-        }}
-      >
-        {displayedOptions.length > 0 ? (
-          <>
-            {displayedOptions.map((option, index) => (
+  const hasOptions = displayedOptions.length > 0;
+  const showList = isOpen && !!dropdownPos;
+  const dropdownList = showList ? (
+    <ul
+      ref={listRef}
+      // With no options the popup only holds a status message.
+      {...(hasOptions
+        ? {
+            id: listboxId,
+            role: "listbox",
+            "aria-label": props.label ?? props.placeholder,
+          }
+        : { role: "presentation" })}
+      className={`k-typeahead-options-list k-typeahead-options-list-portal ${
+        longDropDown
+          ? "k-typeahead-options-list-large"
+          : "k-typeahead-options-list-small"
+      }`}
+      style={{
+        position: "fixed",
+        top: dropdownPos.top,
+        left: dropdownPos.left,
+        width: dropdownPos.width,
+      }}
+    >
+      {hasOptions ? (
+        <>
+          {displayedOptions.map((option, index) => (
+            <li
+              ref={(el) => {
+                optionRefs.current[index] = el;
+              }}
+              key={index}
+              id={optionId(index)}
+              role="option"
+              aria-selected={index === highlightedIndex}
+              className={`k-typeahead-option k-typeahead-option-${size} ${
+                index === highlightedIndex
+                  ? "k-typeahead-option-highlighted"
+                  : ""
+              }`}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                handleOptionClick(option, e);
+              }}
+              onMouseOver={() => setHighlightedIndex(index)}
+            >
+              {getOptionContent(option)}
+            </li>
+          ))}
+          {props.lazyLoad &&
+            displayedOptions.length < filteredOptions.length && (
               <li
-                ref={(el) => {
-                  optionRefs.current[index] = el;
-                }}
-                key={index}
-                className={`k-typeahead-option k-typeahead-option-${size} ${
-                  index === highlightedIndex
-                    ? "k-typeahead-option-highlighted"
-                    : ""
-                }`}
-                onMouseDown={(e) => {
-                  e.preventDefault();
-                  handleOptionClick(option, e);
-                }}
-                onMouseOver={() => setHighlightedIndex(index)}
+                className="k-typeahead-sentinel k-typeahead-loading"
+                aria-hidden="true"
               >
-                {getOptionContent(option)}
+                Loading more...
               </li>
-            ))}
-            {props.lazyLoad &&
-              displayedOptions.length < filteredOptions.length && (
-                <li className="k-typeahead-sentinel k-typeahead-loading">
-                  Loading more...
-                </li>
-              )}
-          </>
-        ) : (
-          <li
-            className={`k-typeahead-no-results-item k-typeahead-option-${size}`}
-          >
-            {props.options.length === 0
-              ? "No options available"
-              : "No matches found"}
-          </li>
-        )}
-      </ul>
-    ) : null;
+            )}
+        </>
+      ) : (
+        <li
+          role="status"
+          className={`k-typeahead-no-results-item k-typeahead-option-${size}`}
+        >
+          {props.options.length === 0
+            ? "No options available"
+            : "No matches found"}
+        </li>
+      )}
+    </ul>
+  ) : null;
 
   return (
     <div className={`k-typeahead-dropdown-container`} ref={dropdownRef}>
@@ -358,6 +379,15 @@ const Typeahead = <T,>(props: TypeaheadProps<T>) => {
           isOpen={isOpen}
           disabled={disabled}
           dropDown={true}
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded={showList}
+          aria-controls={showList && hasOptions ? listboxId : undefined}
+          aria-activedescendant={
+            showList && highlightedIndex > -1
+              ? optionId(highlightedIndex)
+              : undefined
+          }
         />
       </div>
       <Portal>{dropdownList}</Portal>

package/src/components/inputs/typeahead/styles.css

@@ -19,8 +19,8 @@
 
 .k-typeahead-options-list-portal {
   z-index: 10000;
-  background-color: var(--background-color-light);
-  border: 0.0625rem solid var(--border-color);
+  background-color: var(--k-background-color-light);
+  border: 0.0625rem solid var(--k-border-color);
   border-top: none;
   border-radius: 0 0 0.25rem 0.25rem;
   overflow-y: auto;
@@ -28,8 +28,8 @@
   padding: 0;
   margin: 0;
   box-shadow:
-    0 0.25rem 0.375rem -0.0625rem var(--shadow-color),
-    0 0.125rem 0.25rem -0.125rem var(--shadow-color);
+    0 0.25rem 0.375rem -0.0625rem var(--k-shadow-color),
+    0 0.125rem 0.25rem -0.125rem var(--k-shadow-color);
 }
 
 .k-typeahead-options-list-large {
@@ -43,44 +43,44 @@
 .k-typeahead-option {
   cursor: pointer;
   text-align: left;
-  color: var(--text-color);
+  color: var(--k-text-color);
 }
 
 .k-typeahead-option:hover,
 .k-typeahead-option:focus {
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
 }
 
 .k-typeahead-no-results-item {
   text-align: center;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-style: italic;
 }
 
 .k-typeahead-option-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.5rem 0.75rem;
 }
 
 .k-typeahead-option-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.75rem 1rem;
 }
 
 .k-typeahead-option-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 1rem 1.25rem;
 }
 
 .k-typeahead-option-highlighted {
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
   cursor: pointer;
 }
 
 .k-typeahead-loading {
   text-align: center;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-style: italic;
   padding: 0.75rem 1rem;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }

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

@@ -6,15 +6,15 @@
   justify-content: center;
   gap: 1rem;
   padding: 2rem 1rem;
-  background-color: var(--background-color);
+  background-color: var(--k-background-color);
 }
 
 .k-auth-page-card {
   width: 100%;
-  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-radius: 0.75rem;
-  box-shadow: 0 0.3125rem 0.9375rem var(--shadow-color);
+  box-shadow: 0 0.3125rem 0.9375rem var(--k-shadow-color);
   padding: 2rem;
   display: flex;
   flex-direction: column;
@@ -45,7 +45,7 @@
 .k-auth-page-subtitle {
   margin: 0;
   font-size: 0.875rem;
-  color: var(--text-color);
+  color: var(--k-text-color);
   opacity: 0.75;
 }
 
@@ -57,7 +57,7 @@
 
 .k-auth-page-footer {
   font-size: 0.875rem;
-  color: var(--text-color);
+  color: var(--k-text-color);
   opacity: 0.75;
   text-align: center;
 }

package/src/components/layout/borderedSection/index.tsx

@@ -7,6 +7,8 @@ export interface BorderedSectionProps {
   children: ReactNode;
   /** Optional title shown above the body. */
   title?: ReactNode;
+  /** Heading element for the title, to fit the page's heading outline. Defaults to `h3`. Looks the same at every level. */
+  as?: "h2" | "h3" | "h4";
   /** Right-aligned actions in the title row. Implies a title row even when `title` is empty. */
   actions?: ReactNode;
   /** Body layout. `"stack"` (default) stacks children; `"row"` lays them out as a horizontal flex strip. */
@@ -20,6 +22,7 @@ export interface BorderedSectionProps {
 const BorderedSection = ({
   children,
   title,
+  as: Heading = "h3",
   actions,
   layout = "stack",
   gap,
@@ -40,7 +43,7 @@ const BorderedSection = ({
       {showHeader && (
         <div className="k-bordered-section-header">
           {title !== undefined && (
-            <h3 className="k-bordered-section-title">{title}</h3>
+            <Heading className="k-bordered-section-title">{title}</Heading>
           )}
           {actions !== undefined && (
             <div className="k-bordered-section-actions">{actions}</div>

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

@@ -1,9 +1,9 @@
 .k-bordered-section {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--k-border-color);
   border-radius: 6px;
   padding: 1rem;
-  background: var(--background-color-light);
-  box-shadow: 0 1px 3px var(--shadow-color);
+  background: var(--k-background-color-light);
+  box-shadow: 0 1px 3px var(--k-shadow-color);
 }
 
 .k-bordered-section-layout-row {

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

@@ -1,9 +1,9 @@
 /* Card Component Styles */
 .k-card {
-  background: var(--background-color);
+  background: var(--k-background-color);
   border-radius: 0.9375rem;
   transition: all 0.3s ease;
-  border: 0.0625rem solid var(--border-color);
+  border: 0.0625rem solid var(--k-border-color);
 }
 
 .k-card-align-left {
@@ -15,12 +15,12 @@
 }
 
 .k-card-hoverable {
-  box-shadow: 0 0.3125rem 0.9375rem var(--shadow-color);
+  box-shadow: 0 0.3125rem 0.9375rem var(--k-shadow-color);
 }
 
 .k-card-hoverable:hover {
   transform: translateY(-0.3125rem);
-  box-shadow: 0 0.9375rem 1.875rem var(--shadow-color-hover);
+  box-shadow: 0 0.9375rem 1.875rem var(--k-shadow-color-hover);
 }
 
 .k-card-header {
@@ -29,7 +29,7 @@
   gap: 0.5rem;
   padding-bottom: 0.75rem;
   margin-bottom: 1rem;
-  border-bottom: 0.0625rem solid var(--border-color);
+  border-bottom: 0.0625rem solid var(--k-border-color);
 }
 
 .k-card-header-row {
@@ -58,7 +58,7 @@
 
 .k-card-progress-label {
   font-size: 0.8125rem;
-  color: var(--text-color);
+  color: var(--k-text-color);
   opacity: 0.7;
 }
 
@@ -72,12 +72,34 @@
   gap: 0.5rem;
   padding-top: 0.75rem;
   margin-top: 1rem;
-  border-top: 0.0625rem solid var(--border-color);
+  border-top: 0.0625rem solid var(--k-border-color);
 }
 
 /* Padding Variants */
+/* Edge-to-edge content (tables, images): clip it to the rounded corners, and
+   give the header and footer their own padding instead. */
 .k-card-padding-none {
   padding: 0;
+  overflow: hidden;
+}
+
+.k-card-padding-none .k-card-header {
+  padding: 0.75rem 1rem;
+  margin-bottom: 0;
+}
+
+.k-card-padding-none .k-card-footer {
+  padding: 0.75rem 1rem;
+  margin-top: 0;
+}
+
+/* The card already draws the outer edge and the line under the header. */
+.k-card-padding-none .k-card-body > .k-table {
+  border: none;
+}
+
+.k-card-padding-none .k-card-body > .k-table thead th {
+  border-top: none;
 }
 
 .k-card-padding-small {
@@ -94,67 +116,67 @@
 
 /* Color Variants */
 .k-card-primary {
-  border-color: var(--primary-color);
+  border-color: var(--k-primary-color);
 }
 
 .k-card-primary.k-card-hoverable:hover {
-  border-color: var(--primary-color-hover);
+  border-color: var(--k-primary-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--primary-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-primary-color);
 }
 
 .k-card-secondary {
-  border-color: var(--secondary-color);
+  border-color: var(--k-secondary-color);
 }
 
 .k-card-secondary.k-card-hoverable:hover {
-  border-color: var(--secondary-color-hover);
+  border-color: var(--k-secondary-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--secondary-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-secondary-color);
 }
 
 .k-card-light {
-  border-color: var(--light-color);
+  border-color: var(--k-light-color);
 }
 
 .k-card-light.k-card-hoverable:hover {
-  border-color: var(--light-color-hover);
+  border-color: var(--k-light-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--light-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-light-color);
 }
 
 .k-card-danger {
-  border-color: var(--danger-color);
+  border-color: var(--k-danger-color);
 }
 
 .k-card-danger.k-card-hoverable:hover {
-  border-color: var(--danger-color-hover);
+  border-color: var(--k-danger-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--danger-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-danger-color);
 }
 
 .k-card-warning {
-  border-color: var(--warning-color);
+  border-color: var(--k-warning-color);
 }
 
 .k-card-warning.k-card-hoverable:hover {
-  border-color: var(--warning-color-hover);
+  border-color: var(--k-warning-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--warning-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-warning-color);
 }
 
 .k-card-success {
-  border-color: var(--success-color);
+  border-color: var(--k-success-color);
 }
 
 .k-card-success.k-card-hoverable:hover {
-  border-color: var(--success-color-hover);
+  border-color: var(--k-success-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--success-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-success-color);
 }

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

@@ -23,5 +23,5 @@
 .k-col-divider-solid-top {
   margin-top: 0.5rem;
   padding-top: 0.5rem;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--k-border-color);
 }

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

@@ -1,8 +1,11 @@
 .k-page {
+  --k-page-padding: 0px;
+  --k-page-gap: 0px;
   display: flex;
   flex-direction: column;
   width: 100%;
   box-sizing: border-box;
+  gap: var(--k-page-gap);
 }
 
 .k-page-fill {
@@ -11,15 +14,32 @@
 }
 
 .k-page-padded {
-  padding: 1.5rem;
+  --k-page-padding: 1.5rem;
+  padding: var(--k-page-padding);
+}
+
+/* A fill page has a fixed height, so content taller than it spills past the
+   bottom padding and ends flush with the view. A spacer after the content
+   stands in for that padding: it follows the content when it overflows, so
+   the scroll area still ends with the space. Its margin cancels the gap
+   before it; it keeps a real height, as an empty box adds no scroll area. */
+.k-page-fill.k-page-padded {
+  padding-bottom: 0;
+}
+
+.k-page-fill.k-page-padded::after {
+  content: "";
+  flex: none;
+  height: var(--k-page-padding);
+  margin-top: calc(-1 * var(--k-page-gap));
 }
 
 .k-page-gap-sm {
-  gap: 0.75rem;
+  --k-page-gap: 0.75rem;
 }
 
 .k-page-gap-md {
-  gap: 1.5rem;
+  --k-page-gap: 1.5rem;
 }
 
 .k-page-max-narrow {
@@ -45,9 +65,9 @@
 
 @media (max-width: 640px) {
   .k-page-padded {
-    padding: 1rem;
+    --k-page-padding: 1rem;
   }
   .k-page-gap-md {
-    gap: 1rem;
+    --k-page-gap: 1rem;
   }
 }