@kosmeo-ui/react 0.1.1 → 1.0.0

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

@@ -25,6 +25,7 @@ const DropdownArrowButton = ({
       onClick={onClick}
       tabIndex={-1}
       disabled={disabled}
+      aria-label={isOpen ? "Hide options" : "Show options"}
     >
       <FontAwesomeIcon
         icon={faChevronDown}

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

@@ -1,21 +1,26 @@
 /* Generic dropdown arrow toggle — used by Input (dropDown), MultiSelect, etc. */
+/* Spans the field's height and centers the chevron, however tall the field
+   grows (MultiSelect with chips). */
 .k-dropdown-arrow {
   position: absolute;
+  top: 0;
+  bottom: 0;
   right: 0.75rem;
+  display: flex;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   align-items: center;
   justify-content: center;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   transition:
     color 0.2s ease-in-out,
     transform 0.2s ease-in-out;
 }
 
 .k-dropdown-arrow:hover:not(:disabled) {
-  color: var(--primary-color);
+  color: var(--k-primary-color-text);
 }
 
 .k-dropdown-arrow:focus {
@@ -29,17 +34,14 @@
 
 .k-dropdown-arrow-sm {
   font-size: 0.75rem;
-  top: 0.5rem;
 }
 
 .k-dropdown-arrow-md {
   font-size: 0.875rem;
-  top: 0.625rem;
 }
 
 .k-dropdown-arrow-lg {
   font-size: 1rem;
-  top: 0.75rem;
 }
 
 .k-dropdown-arrow-open {

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useId, useState } from "react";
 import "./styles.css";
 
 export interface FileDropZoneProps {
@@ -24,6 +24,7 @@ const FileDropZone = ({
   label = "Drag and drop files here",
 }: FileDropZoneProps) => {
   const [isDragging, setIsDragging] = useState(false);
+  const inputId = useId();
 
   const validateFileType = (file: File): boolean => {
     if (!accept) return true;
@@ -104,14 +105,14 @@ const FileDropZone = ({
     >
       <p>{label}</p>
       <p>or</p>
-      <label htmlFor="file-drop-zone-input" className="k-file-drop-zone-button">
+      <label htmlFor={inputId} className="k-file-drop-zone-button">
         Browse Files
       </label>
       <input
         type="file"
         accept={accept}
         multiple
-        id="file-drop-zone-input"
+        id={inputId}
         onChange={handleFileChange}
         style={{ display: "none" }}
       />

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

@@ -1,43 +1,43 @@
 .k-file-drop-zone {
-  border: 0.125rem dashed var(--border-color);
+  border: 0.125rem dashed var(--k-border-color);
   border-radius: 0.5rem;
   padding: 2rem;
   text-align: center;
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
   transition: all 0.2s ease;
   margin-bottom: 1rem;
   cursor: pointer;
 }
 
 .k-file-drop-zone:hover {
-  border-color: var(--primary-color);
-  background-color: var(--background-color-hover);
+  border-color: var(--k-primary-color);
+  background-color: var(--k-background-color-hover);
 }
 
 .k-file-drop-zone-dragging {
-  border-color: var(--primary-color);
-  background-color: var(--primary-color-light);
+  border-color: var(--k-primary-color);
+  background-color: var(--k-primary-color-background-light);
   border-style: solid;
 }
 
 .k-file-drop-zone p {
   margin: 0.5rem 0;
-  color: var(--text-color);
-  font-size: var(--text-size-sm);
+  color: var(--k-text-color);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-file-drop-zone-button {
   display: inline-block;
   padding: 0.5rem 1rem;
-  background-color: var(--primary-color);
-  color: var(--text-color-light);
+  background-color: var(--k-primary-color);
+  color: var(--k-text-color-light);
   border-radius: 0.5rem;
   cursor: pointer;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   font-weight: 600;
   transition: background-color 0.2s ease;
 }
 
 .k-file-drop-zone-button:hover {
-  background-color: var(--primary-color-hover);
+  background-color: var(--k-primary-color-hover);
 }

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

@@ -4,7 +4,7 @@ import MandatoryAsterisk from "../../forms/requiredAsterisk/index.js";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PropsWithSize, PropsWithVariant } from "../../types.js";
 import IconButton from "../../buttons/iconButton/index.js";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import Button from "../../buttons/button/index.js";
 import Modal from "../../overlays/modal/index.js";
 import "./styles.css";
@@ -101,8 +101,8 @@ const FileUpload = (props: FileUploadProps) => {
     maxSize: string;
   }>({ files: [], maxSize: "" });
 
-  const componentId =
-    props.id || `fileupload-${Math.random().toString(36).substring(2, 9)}`;
+  const generatedId = useId();
+  const componentId = props.id || `fileupload-${generatedId}`;
   const directoryId = `${componentId}-dir`;
 
   // `webkitdirectory` isn't in React's DOM type map; set it imperatively.
@@ -116,8 +116,11 @@ const FileUpload = (props: FileUploadProps) => {
   const formatFileSize = (bytes: number): string => {
     if (bytes === 0) return "0 Bytes";
     const k = 1024;
-    const sizes = ["Bytes", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+    const i = Math.min(
+      Math.floor(Math.log(bytes) / Math.log(k)),
+      sizes.length - 1
+    );
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
   };
 
@@ -134,6 +137,8 @@ const FileUpload = (props: FileUploadProps) => {
           const fileNames = oversizedFiles.map((f) => f.name);
           setOversizedFileInfo({ files: fileNames, maxSize: maxSizeFormatted });
           setShowSizeModal(true);
+          // Rejected files must not stay in the input, or a form would submit them.
+          event.target.value = "";
           return;
         }
       }
@@ -178,13 +183,6 @@ const FileUpload = (props: FileUploadProps) => {
         <div className="k-file-list-header">
           <span>Selected Files ({selectedFiles.length})</span>
           <div className="k-file-list-actions">
-            <Button
-              onClick={() => fileInputRef.current?.click()}
-              variant={variant}
-              size={size}
-            >
-              Change File{selectedFiles.length > 1 ? "s" : ""}
-            </Button>
             <Button onClick={handleClearFiles} variant="danger" size={size}>
               Clear All
             </Button>
@@ -203,6 +201,7 @@ const FileUpload = (props: FileUploadProps) => {
               <IconButton
                 icon={faTrash}
                 onClick={() => handleRemoveFile(index)}
+                aria-label={`Remove ${file.name}`}
                 variant="danger"
                 size={size}
               />
@@ -215,11 +214,12 @@ const FileUpload = (props: FileUploadProps) => {
   return (
     <div className={"k-file-upload-container"}>
       {props.label && (
-        <label className="k-file-upload-label-text">
+        <label htmlFor={componentId} className="k-file-upload-label-text">
           {props.label}
           {required && <MandatoryAsterisk />}
         </label>
       )}
+      {/* Hidden: the buttons below open these, and are the keyboard path. */}
       <input
         type="file"
         accept={props.accept}
@@ -229,6 +229,8 @@ const FileUpload = (props: FileUploadProps) => {
         className="k-file-upload-input"
         id={componentId}
         required={required}
+        aria-label={multiple ? "Upload Files" : "Upload File"}
+        tabIndex={-1}
       />
       {props.allowDirectory && (
         <input
@@ -238,27 +240,35 @@ const FileUpload = (props: FileUploadProps) => {
           ref={directoryInputRef}
           className="k-file-upload-input"
           id={directoryId}
+          aria-label="Upload Folder"
+          tabIndex={-1}
         />
       )}
 
       {fileListPosition === "above" && fileList}
 
-      {selectedFiles.length === 0 && (
+      {/* A custom renderFiles brings its own controls once files are chosen. */}
+      {(selectedFiles.length === 0 || !props.renderFiles) && (
         <div className="k-file-upload-empty-actions">
-          <label
-            htmlFor={componentId}
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
             className={`k-button k-button-${variant} k-button-${size} k-button-center k-file-upload-button`}
           >
-            <FontAwesomeIcon icon={faUpload} /> Upload{" "}
-            {multiple ? "Files" : "File"}
-          </label>
+            <FontAwesomeIcon icon={faUpload} aria-hidden="true" />{" "}
+            {selectedFiles.length === 0
+              ? `Upload ${multiple ? "Files" : "File"}`
+              : `Change File${selectedFiles.length > 1 ? "s" : ""}`}
+          </button>
           {props.allowDirectory && (
-            <label
-              htmlFor={directoryId}
+            <button
+              type="button"
+              onClick={() => directoryInputRef.current?.click()}
               className={`k-button k-button-${variant} k-button-${size} k-button-center k-file-upload-button`}
             >
-              <FontAwesomeIcon icon={faFolderOpen} /> Upload Folder
-            </label>
+              <FontAwesomeIcon icon={faFolderOpen} aria-hidden="true" /> Upload
+              Folder
+            </button>
           )}
         </div>
       )}

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

@@ -26,16 +26,16 @@
   margin-bottom: 0.5rem;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--text-color);
+  color: var(--k-text-color);
   width: 100%;
   text-align: left;
 }
 
 .k-file-list {
   width: 100%;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--k-border-color);
   border-radius: 0.375rem;
-  background-color: var(--light-bg);
+  background-color: var(--k-background-color-light);
 }
 
 .k-file-list-header {
@@ -43,8 +43,8 @@
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-color);
-  background-color: var(--lighter-bg);
+  border-bottom: 1px solid var(--k-border-color);
+  background-color: var(--k-background-color-dark);
   font-weight: 500;
 }
 
@@ -66,7 +66,7 @@
   align-items: center;
   gap: 0.75rem;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--k-border-color);
   transition: background-color 0.2s;
 }
 
@@ -75,7 +75,7 @@
 }
 
 .k-file-list-item:hover {
-  background-color: var(--lighter-bg);
+  background-color: var(--k-background-color-hover);
 }
 
 .k-file-info {
@@ -86,7 +86,7 @@
 }
 
 .k-file-icon {
-  color: var(--secondary-color);
+  color: var(--k-secondary-color);
   flex-shrink: 0;
 }
 
@@ -98,7 +98,7 @@
 }
 
 .k-file-size {
-  color: var(--text-muted);
+  color: var(--k-text-color-secondary);
   font-size: 0.875rem;
   flex-shrink: 0;
 }

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

@@ -1,11 +1,11 @@
 "use client";
 
-import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { faEye, faEyeSlash, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { ReactNode, useCallback, useId, useRef, useState } from "react";
 import DropdownArrowButton from "../dropdownArrowButton/index.js";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import FieldShell from "../../forms/fieldShell/index.js";
 import { PropsWithSize } from "../../types.js";
-import { ReactNode, useState } from "react";
 import "./styles.css";
 
 interface InputProps extends PropsWithSize {
@@ -27,6 +27,8 @@ interface InputProps extends PropsWithSize {
 
   /** **_Optional_** if the field is disabled */
   disabled?: boolean;
+  /** **_Optional_** if the field is read-only: unlike `disabled`, it stays focusable and is submitted */
+  readOnly?: boolean;
   /** **_Optional_** if the field is a dropdown */
   dropDown?: boolean;
   /** **_Optional_** whether or not the drop down options are open */
@@ -73,6 +75,20 @@ interface InputProps extends PropsWithSize {
   onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
   /** **_Optional_** function that is called when the input is clicked */
   onClick?: React.MouseEventHandler<HTMLInputElement>;
+  /** **_Optional_** `combobox` when the input drives a popup list of suggestions */
+  role?: "combobox";
+  /** **_Optional_** with `role="combobox"`, whether its popup is showing */
+  "aria-expanded"?: boolean;
+  /** **_Optional_** with `role="combobox"`, how suggestions relate to what's typed */
+  "aria-autocomplete"?: "list" | "inline" | "both" | "none";
+  /** **_Optional_** accessible name when there's no visible `label` */
+  "aria-label"?: string;
+  /** **_Optional_** id of the element (e.g. a listbox) this input controls */
+  "aria-controls"?: string;
+  /** **_Optional_** id of the option highlighted in the controlled element, while focus stays in the input */
+  "aria-activedescendant"?: string;
+  /** **_Optional_** shows an × button at the end of a non-empty field; clear the value here. Sits at the right edge, so don't combine with `suffix` or `type="password"` */
+  onClear?: () => void;
 }
 
 const Input = (props: InputProps) => {
@@ -86,9 +102,34 @@ const Input = (props: InputProps) => {
     suffix,
   } = props;
   const [showPassword, setShowPassword] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const { ref: forwardedRef } = props;
 
-  const inputId =
-    props.id || `input-${Math.random().toString(36).substring(2, 9)}`;
+  // Keep our own handle on the input (the clear button refocuses it) while
+  // still honouring a caller's `ref`.
+  const setRefs = useCallback(
+    (el: HTMLInputElement | null) => {
+      inputRef.current = el;
+      if (typeof forwardedRef === "function") forwardedRef(el);
+      else if (forwardedRef) forwardedRef.current = el;
+    },
+    [forwardedRef]
+  );
+
+  const showClear =
+    !!props.onClear &&
+    String(props.value ?? "") !== "" &&
+    !disabled &&
+    !props.readOnly;
+
+  const handleClear = () => {
+    props.onClear?.();
+    // The button unmounts once the field is empty; keep focus in the field.
+    inputRef.current?.focus();
+  };
+
+  const generatedId = useId();
+  const inputId = props.id || `input-${generatedId}`;
 
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
@@ -102,6 +143,7 @@ const Input = (props: InputProps) => {
     "k-input",
     `k-input-${size}`,
     type === "password" && "k-input-password",
+    props.onClear && "k-input-clearable",
     hasAddon && "k-input-with-addon",
     prefix !== undefined && "k-input-with-prefix",
     suffix !== undefined && "k-input-with-suffix",
@@ -110,9 +152,11 @@ const Input = (props: InputProps) => {
     .join(" ");
 
   const renderAddon = (content: ReactNode, side: "prefix" | "suffix") => (
+    // Not aria-hidden: addons can be interactive (PhoneInput's country
+    // picker), and text like "$" or "USD" is useful context. Icons hide
+    // themselves.
     <span
       className={`k-input-addon k-input-addon-${side} k-input-addon-${size}`}
-      aria-hidden="true"
     >
       {content}
     </span>
@@ -140,7 +184,7 @@ const Input = (props: InputProps) => {
       >
         {prefix !== undefined && renderAddon(prefix, "prefix")}
         <input
-          ref={props.ref}
+          ref={setRefs}
           id={inputId}
           name={props.name}
           type={inputType}
@@ -152,13 +196,30 @@ const Input = (props: InputProps) => {
           autoFocus={props.autoFocus}
           autoComplete={props.autoComplete}
           disabled={disabled}
+          readOnly={props.readOnly}
           onChange={props.onChange}
           onFocus={props.onFocus}
           onBlur={props.onBlur}
           onClick={props.onClick}
           onKeyDown={props.onKeyDown}
+          role={props.role}
+          aria-expanded={props["aria-expanded"]}
+          aria-autocomplete={props["aria-autocomplete"]}
+          aria-label={props["aria-label"]}
+          aria-controls={props["aria-controls"]}
+          aria-activedescendant={props["aria-activedescendant"]}
           className={inputClasses}
         />
+        {showClear && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="k-input-clear-button"
+            aria-label="Clear"
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </button>
+        )}
         {suffix !== undefined && renderAddon(suffix, "suffix")}
         {props.dropDown && (
           <DropdownArrowButton

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

@@ -6,10 +6,10 @@
 }
 
 .k-input {
-  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:
@@ -18,17 +18,17 @@
 }
 
 .k-input-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.5rem 0.75rem;
 }
 
 .k-input-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.625rem 1rem;
 }
 
 .k-input-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 0.75rem 1.25rem;
 }
 
@@ -37,30 +37,74 @@
 }
 
 .k-input::placeholder {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   opacity: 0.7;
 }
 
 .k-input[type="date"]:empty {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-input: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);
+}
+
+/* No opacity, unlike disabled: a read-only value keeps full text contrast. */
+.k-input[readonly]:not(:disabled) {
+  background-color: var(--k-background-color-dark);
+  color: var(--k-text-color-secondary);
+  cursor: default;
 }
 
 .k-input: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;
 }
 
+.k-input-clearable {
+  padding-right: 2.25rem;
+}
+
+.k-input-clear-button {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--k-text-color-secondary);
+  cursor: pointer;
+  transition: color 0.2s ease-in-out;
+}
+
+.k-input-clear-button:hover {
+  color: var(--k-primary-color-text);
+}
+
+.k-input-clear-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem var(--k-border-shadow-color-active);
+}
+
 .k-password-toggle-button {
   position: absolute;
-  right: 0.75rem;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  /* 24px hit area (WCAG 2.5.8) around the small eye icon. */
+  width: 1.5rem;
+  height: 1.5rem;
   background: none;
   border: none;
   cursor: pointer;
@@ -68,17 +112,17 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   transition: color 0.2s ease-in-out;
 }
 
 .k-password-toggle-button:hover {
-  color: var(--primary-color);
+  color: var(--k-primary-color-text);
 }
 
 .k-password-toggle-button:focus {
   outline: none;
-  box-shadow: 0 0 0 0.125rem var(--border-shadow-color-active);
+  box-shadow: 0 0 0 0.125rem var(--k-border-shadow-color-active);
   border-radius: 50%;
 }
 
@@ -88,7 +132,7 @@
 }
 
 .k-password-toggle-button:disabled:hover {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-input-wrapper-addon {
@@ -112,9 +156,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--background-color-dark);
-  border: 0.0625rem solid var(--border-color);
-  color: var(--text-color-secondary);
+  background-color: var(--k-background-color-dark);
+  border: 0.0625rem solid var(--k-border-color);
+  color: var(--k-text-color-secondary);
   font-weight: 500;
   white-space: nowrap;
   user-select: none;
@@ -133,20 +177,20 @@
 }
 
 .k-input-addon-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.5rem 0.625rem;
 }
 
 .k-input-addon-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.625rem 0.75rem;
 }
 
 .k-input-addon-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 0.75rem 0.875rem;
 }
 
 .k-input-wrapper-addon:focus-within .k-input-addon {
-  border-color: var(--border-color-active);
+  border-color: var(--k-border-color-active);
 }