@kosmeo-ui/react 0.2.0 → 1.0.0

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,8 +1,8 @@
 "use client";
 
 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 { ReactNode, useCallback, useRef, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import FieldShell from "../../forms/fieldShell/index.js";
 import { PropsWithSize } from "../../types.js";
@@ -75,6 +75,18 @@ 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;
 }
@@ -116,8 +128,8 @@ const Input = (props: InputProps) => {
     inputRef.current?.focus();
   };
 
-  const inputId =
-    props.id || `input-${Math.random().toString(36).substring(2, 9)}`;
+  const generatedId = useId();
+  const inputId = props.id || `input-${generatedId}`;
 
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
@@ -190,6 +202,12 @@ const Input = (props: InputProps) => {
           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 && (

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,30 @@
 }
 
 .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(--background-color-dark);
-  color: var(--text-color-secondary);
+  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;
 }
@@ -83,18 +83,18 @@
   border: none;
   border-radius: 50%;
   background: none;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   cursor: pointer;
   transition: color 0.2s ease-in-out;
 }
 
 .k-input-clear-button:hover {
-  color: var(--primary-color-text);
+  color: var(--k-primary-color-text);
 }
 
 .k-input-clear-button:focus-visible {
   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);
 }
 
 .k-password-toggle-button {
@@ -112,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-text);
+  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%;
 }
 
@@ -132,7 +132,7 @@
 }
 
 .k-password-toggle-button:disabled:hover {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-input-wrapper-addon {
@@ -156,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;
@@ -177,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);
 }

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

@@ -57,15 +57,30 @@ const LanguageSelect = ({
   required,
   includeNone = true,
 }: LanguageSelectProps) => {
-  const options: LanguageOption[] = includeNone
-    ? [{ value: "", label: "— None —" }, ...SUPPORTED_LANGUAGES]
-    : SUPPORTED_LANGUAGES;
+  // A stored value is shown, never replaced on load (Select would report its
+  // first option for a value it lacks): a bare language ("en") as its first
+  // locale, any other unknown code as itself.
+  const stored = value ?? "";
+  const isSupported = SUPPORTED_LANGUAGES.some((l) => l.value === stored);
+  const locale =
+    stored && !isSupported
+      ? SUPPORTED_LANGUAGES.find((l) =>
+          l.value.toLowerCase().startsWith(`${stored.toLowerCase()}-`)
+        )?.value
+      : undefined;
+  const unknown: LanguageOption[] =
+    stored && !isSupported && !locale ? [{ value: stored, label: stored }] : [];
+  const options: LanguageOption[] = [
+    ...(includeNone ? [{ value: "", label: "— None —" }] : []),
+    ...unknown,
+    ...SUPPORTED_LANGUAGES,
+  ];
 
   return (
     <Select
       label={label}
       id={id}
-      value={value ?? ""}
+      value={locale ?? stored}
       disabled={disabled}
       required={required}
       options={options}