@kosmeo-ui/react 0.1.1 → 1.0.0

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

@@ -81,6 +81,7 @@ const PhoneInput = (props: PhoneInputProps) => {
 
   useEffect(() => {
     if (value === lastEmittedRef.current) return;
+    lastEmittedRef.current = value;
     if (!value) {
       setDisplay("");
       return;
@@ -89,6 +90,8 @@ const PhoneInput = (props: PhoneInputProps) => {
     if (parsed?.country) {
       setCountry(parsed.country);
       setDisplay(parsed.formatNational());
+    } else if (parsed) {
+      setDisplay(parsed.formatNational());
     } else {
       const formatter = new AsYouType(country);
       setDisplay(formatter.input(value));
@@ -121,14 +124,18 @@ const PhoneInput = (props: PhoneInputProps) => {
     const formatter = new AsYouType(country);
     const formatted = formatter.input(raw);
     const nationalDigits = formatter.getNationalNumber();
+    const nextCountry = formatter.getCountry() ?? country;
+    setCountry(nextCountry);
     setDisplay(formatted);
-    emit(nationalDigits, country);
+    emit(nationalDigits, nextCountry);
   };
 
   const handleCountrySelect = (cc: CountryCode) => {
     setCountry(cc);
     setPickerOpen(false);
-    const digits = display.replace(/\D/g, "");
+    const current = new AsYouType(country);
+    current.input(display);
+    const digits = current.getNationalNumber();
     if (digits) {
       const formatter = new AsYouType(cc);
       const formatted = formatter.input(digits);
@@ -169,10 +176,14 @@ const PhoneInput = (props: PhoneInputProps) => {
         className="k-phone-input-picker-trigger"
         onClick={() => !disabled && setPickerOpen((o) => !o)}
         disabled={disabled}
-        aria-label={`Country: ${countryName(country)}`}
+        // Starts with the visible "+1" so voice-control users can say what
+        // they see (WCAG 2.5.3); the flag is decorative next to the name.
+        aria-label={`+${getCountryCallingCode(country)} ${countryName(country)}, change country`}
         aria-expanded={pickerOpen}
       >
-        <span className="k-phone-input-flag">{flagEmoji(country)}</span>
+        <span className="k-phone-input-flag" aria-hidden="true">
+          {flagEmoji(country)}
+        </span>
         <span className="k-phone-input-dial">
           +{getCountryCallingCode(country)}
         </span>
@@ -188,6 +199,7 @@ const PhoneInput = (props: PhoneInputProps) => {
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder="Search country or code"
+              aria-label="Search country or code"
             />
           </div>
           <ul className="k-phone-input-list" role="listbox">

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

@@ -13,7 +13,7 @@
   padding: 0 0.5rem 0 0;
   margin: 0;
   cursor: pointer;
-  color: var(--text-color);
+  color: var(--k-text-color);
   font: inherit;
 }
 
@@ -29,12 +29,12 @@
 
 .k-phone-input-dial {
   font-variant-numeric: tabular-nums;
-  color: var(--text-color-secondary, var(--text-color));
+  color: var(--k-text-color-secondary, var(--k-text-color));
 }
 
 .k-phone-input-caret {
   font-size: 0.75em;
-  color: var(--text-color-secondary, var(--text-color));
+  color: var(--k-text-color-secondary, var(--k-text-color));
 }
 
 .k-phone-input-panel {
@@ -43,10 +43,10 @@
   left: -0.5rem;
   width: 18rem;
   max-height: 20rem;
-  background-color: var(--background-color);
-  border: 1px solid var(--border-color);
+  background-color: var(--k-background-color);
+  border: 1px solid var(--k-border-color);
   border-radius: 0.5rem;
-  box-shadow: 0 0.375rem 1.25rem var(--shadow-color);
+  box-shadow: 0 0.375rem 1.25rem var(--k-shadow-color);
   z-index: 100;
   display: flex;
   flex-direction: column;
@@ -58,8 +58,8 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--border-color);
-  color: var(--text-color-secondary, var(--text-color));
+  border-bottom: 1px solid var(--k-border-color);
+  color: var(--k-text-color-secondary, var(--k-text-color));
 }
 
 .k-phone-input-search input {
@@ -67,7 +67,7 @@
   border: none;
   outline: none;
   background: transparent;
-  color: var(--text-color);
+  color: var(--k-text-color);
   font: inherit;
 }
 
@@ -88,19 +88,19 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--text-color);
+  color: var(--k-text-color);
   font: inherit;
   text-align: left;
 }
 
 .k-phone-input-option:hover,
 .k-phone-input-option:focus-visible {
-  background-color: var(--hover-color, var(--border-color));
+  background-color: var(--k-background-color-hover);
   outline: none;
 }
 
 .k-phone-input-option.selected {
-  background-color: var(--hover-color, var(--border-color));
+  background-color: var(--k-background-color-hover);
 }
 
 .k-phone-input-name {
@@ -112,7 +112,7 @@
 
 .k-phone-input-empty {
   padding: 0.75rem;
-  color: var(--text-color-secondary, var(--text-color));
+  color: var(--k-text-color-secondary, var(--k-text-color));
   text-align: center;
   font-size: 0.875rem;
 }

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

@@ -22,7 +22,7 @@ const RadioGroup = <T extends string = string>(props: RadioGroupProps<T>) => {
   const { disabled = false, required = false } = props;
 
   return (
-    <OptionsGroup label={props.label} required={required}>
+    <OptionsGroup label={props.label} required={required} role="radiogroup">
       {props.options.map((option, index) => (
         <label key={index} className="k-options-group-option">
           <input
@@ -32,6 +32,7 @@ const RadioGroup = <T extends string = string>(props: RadioGroupProps<T>) => {
             checked={props.value === option.value}
             onChange={() => props.onChange(option.value)}
             disabled={disabled}
+            required={required}
           />
           {option.label}
         </label>

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

@@ -4,10 +4,10 @@ import { useEditor, EditorContent, useEditorState } from "@tiptap/react";
 import MandatoryAsterisk from "../../forms/requiredAsterisk/index.js";
 import IconButton from "../../buttons/iconButton/index.js";
 import Tooltip from "../../feedback/tooltip/index.js";
+import { useState, useEffect, useId } from "react";
 import { Placeholder } from "@tiptap/extensions";
 import { PropsWithSize } from "../../types.js";
 import StarterKit from "@tiptap/starter-kit";
-import { useState, useEffect } from "react";
 import "./styles.css";
 import {
   faUnderline,
@@ -50,8 +50,9 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const [charCount, setCharCount] = useState(0);
   const [isInitialized, setIsInitialized] = useState(false);
 
-  const fieldId =
-    props.id || `richtext-${Math.random().toString(36).substring(2, 9)}`;
+  const generatedId = useId();
+  const fieldId = props.id || `richtext-${generatedId}`;
+  const labelId = `${fieldId}-label`;
 
   const cleanHtml = (html: string): string | undefined => {
     // Remove trailing empty <p></p> tags
@@ -72,6 +73,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   };
 
   const editor = useEditor({
+    // TipTap would create the editor during render outside Next.js but after
+    // mount inside it (warning in dev). Always after mount, so `editor` starts
+    // null everywhere and the null handling below has one code path.
+    immediatelyRender: false,
     extensions: [
       StarterKit,
       Placeholder.configure({
@@ -79,6 +84,15 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       }),
     ],
     content: props.value,
+    editorProps: {
+      attributes: {
+        "aria-multiline": "true",
+        ...(props.required ? { "aria-required": "true" } : {}),
+        ...(props.label
+          ? { "aria-labelledby": labelId }
+          : { "aria-label": props.placeholder ?? "Rich text editor" }),
+      },
+    },
     editable: !disabled,
     autofocus: props.autofocus,
     onUpdate: ({ editor }) => {
@@ -98,17 +112,17 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   const editorState = useEditorState({
     editor,
-    selector: ({ editor }) => {
-      return {
-        isBold: editor.isActive("bold"),
-        isItalic: editor.isActive("italic"),
-        isUnderlined: editor.isActive("underline"),
-        isBulletedList: editor.isActive("bulletList"),
-        isNumberedList: editor.isActive("orderedList"),
-      };
-    },
+    selector: ({ editor }) => ({
+      isBold: editor?.isActive("bold") ?? false,
+      isItalic: editor?.isActive("italic") ?? false,
+      isUnderlined: editor?.isActive("underline") ?? false,
+      isBulletedList: editor?.isActive("bulletList") ?? false,
+      isNumberedList: editor?.isActive("orderedList") ?? false,
+    }),
   });
 
+  const toolbarDisabled = !editor || showHtml || disabled;
+
   useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
@@ -129,12 +143,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       const cleanedNew = cleanHtml(newValue) || "";
 
       if (cleanedCurrent !== cleanedNew) {
-        // Temporarily mark as not initialized to prevent onChange from firing
-        // during external content sync
-        setIsInitialized(false);
-        editor.commands.setContent(newValue);
-        // Re-enable after a short delay to allow content to settle
-        setTimeout(() => setIsInitialized(true), 0);
+        // An outside value isn't an edit, so don't echo it back to onChange.
+        editor.commands.setContent(newValue, { emitUpdate: false });
       }
 
       const textContent = editor.state.doc.textContent;
@@ -146,7 +156,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     <div className={`k-richtext-container k-richtext-container-${size}`}>
       {props.label && (
         <div className="k-richtext-label-wrapper">
-          <label htmlFor={fieldId} className="k-richtext-label">
+          <label id={labelId} className="k-richtext-label">
             {props.label}
             {props.required && <MandatoryAsterisk />}
           </label>
@@ -165,58 +175,69 @@ const RichTextEditor = (props: RichTextEditorProps) => {
           <Tooltip content="Bold" position="top">
             <IconButton
               icon={faBold}
+              aria-label="Bold"
+              aria-pressed={editorState?.isBold}
               size={size}
-              variant={editorState.isBold ? "primary" : "secondary"}
-              onClick={() => editor.chain().focus().toggleBold().run()}
-              disabled={showHtml || disabled}
+              variant={editorState?.isBold ? "primary" : "secondary"}
+              onClick={() => editor?.chain().focus().toggleBold().run()}
+              disabled={toolbarDisabled}
             />
           </Tooltip>
           <Tooltip content="Italic" position="top">
             <IconButton
               icon={faItalic}
+              aria-label="Italic"
+              aria-pressed={editorState?.isItalic}
               size={size}
-              variant={editorState.isItalic ? "primary" : "secondary"}
-              onClick={() => editor.chain().focus().toggleItalic().run()}
-              disabled={showHtml || disabled}
+              variant={editorState?.isItalic ? "primary" : "secondary"}
+              onClick={() => editor?.chain().focus().toggleItalic().run()}
+              disabled={toolbarDisabled}
             />
           </Tooltip>
           <Tooltip content="Underline" position="top">
             <IconButton
               icon={faUnderline}
+              aria-label="Underline"
+              aria-pressed={editorState?.isUnderlined}
               size={size}
-              variant={editorState.isUnderlined ? "primary" : "secondary"}
-              onClick={() => editor.chain().focus().toggleUnderline().run()}
-              disabled={showHtml || disabled}
+              variant={editorState?.isUnderlined ? "primary" : "secondary"}
+              onClick={() => editor?.chain().focus().toggleUnderline().run()}
+              disabled={toolbarDisabled}
             />
           </Tooltip>
           <div className="k-toolbar-separator"></div>
           <Tooltip content="Bullet List" position="top">
             <IconButton
               icon={faListUl}
+              aria-label="Bullet list"
+              aria-pressed={editorState?.isBulletedList}
               size={size}
-              variant={editorState.isBulletedList ? "primary" : "secondary"}
-              onClick={() => editor.chain().focus().toggleBulletList().run()}
-              disabled={showHtml || disabled}
+              variant={editorState?.isBulletedList ? "primary" : "secondary"}
+              onClick={() => editor?.chain().focus().toggleBulletList().run()}
+              disabled={toolbarDisabled}
             />
           </Tooltip>
           <Tooltip content="Numbered List" position="top">
             <IconButton
               icon={faListOl}
+              aria-label="Numbered list"
+              aria-pressed={editorState?.isNumberedList}
               size={size}
-              variant={editorState.isNumberedList ? "primary" : "secondary"}
-              onClick={() => editor.chain().focus().toggleOrderedList().run()}
-              disabled={showHtml || disabled}
+              variant={editorState?.isNumberedList ? "primary" : "secondary"}
+              onClick={() => editor?.chain().focus().toggleOrderedList().run()}
+              disabled={toolbarDisabled}
             />
           </Tooltip>
           <div className="k-toolbar-separator"></div>
           <Tooltip content="Clear Formatting" position="top">
             <IconButton
               icon={faTextSlash}
+              aria-label="Clear formatting"
               size={size}
               variant="secondary"
               onClick={() => {
                 editor
-                  .chain()
+                  ?.chain()
                   .focus()
                   .selectAll()
                   .clearNodes()
@@ -224,7 +245,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
                   .setTextSelection(0)
                   .run();
               }}
-              disabled={showHtml || disabled}
+              disabled={toolbarDisabled}
             />
           </Tooltip>
           <div className="k-toolbar-separator"></div>
@@ -234,10 +255,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
           >
             <IconButton
               icon={faCode}
+              aria-label={showHtml ? "Show editor" : "Show HTML"}
               size={size}
               variant={showHtml ? "primary" : "secondary"}
               onClick={() => setShowHtml(!showHtml)}
-              disabled={disabled}
+              disabled={!editor || disabled}
             />
           </Tooltip>
         </div>

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

@@ -12,13 +12,13 @@
 
 .k-richtext-label {
   display: block;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   font-weight: 500;
-  color: var(--text-color);
+  color: var(--k-text-color);
 }
 
 .k-editor-wrapper .tiptap {
-  color: var(--text-color);
+  color: var(--k-text-color);
   min-width: 100%;
   width: 100%;
   box-sizing: border-box;
@@ -31,12 +31,12 @@
   resize: both;
   overflow-y: auto;
   padding: 0.625rem 1rem;
-  font-size: var(--text-size-md);
-  background-color: var(--background-color-light);
+  font-size: var(--k-text-size-md);
+  background-color: var(--k-background-color-light);
 }
 
 .k-editor-wrapper p.is-editor-empty:first-child::before {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   opacity: 0.7;
   content: attr(data-placeholder);
   float: left;
@@ -46,8 +46,8 @@
 
 .k-editor-wrapper .tiptap: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-editor-wrapper .tiptap p {
   margin: 0 0 0.5rem 0;
@@ -71,26 +71,26 @@
   display: flex;
   gap: 0.25rem;
   padding: 0.5rem;
-  background-color: var(--background-color-dark);
-  border-bottom: 0.0625rem solid var(--border-color);
+  background-color: var(--k-background-color-dark);
+  border-bottom: 0.0625rem solid var(--k-border-color);
   border-radius: 0.375rem 0.375rem 0 0;
 }
 
 .k-editor-wrapper {
   position: relative;
-  border: 0.0625rem solid var(--border-color);
+  border: 0.0625rem solid var(--k-border-color);
   border-radius: 0.375rem;
 }
 
 .k-toolbar-separator {
-  border-left: 1px solid var(--border-color);
+  border-left: 1px solid var(--k-border-color);
   height: 1.5rem;
   margin: 0 0.5rem;
   align-self: center;
 }
 
 .k-html-section {
-  background: var(--background-color-dark);
+  background: var(--k-background-color-dark);
   padding: 1rem;
   border-radius: 0 0 0.375rem 0.375rem;
   overflow: auto;
@@ -100,8 +100,8 @@
   min-width: 100%;
   min-height: 30rem;
   max-height: fit-content;
-  font-size: var(--text-size-md);
-  color: var(--text-color);
+  font-size: var(--k-text-size-md);
+  color: var(--k-text-color);
   white-space: pre-wrap;
 }
 
@@ -110,7 +110,7 @@
   min-height: 25rem;
   max-height: fit-content;
   padding: 0.5rem 0.75rem;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-richtext-container-sm .k-html-section {
@@ -118,7 +118,7 @@
   min-height: 25rem;
   max-height: fit-content;
   padding: 0.75rem;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-richtext-container-sm .k-editor-toolbar {
@@ -135,7 +135,7 @@
   min-height: 35rem;
   max-height: fit-content;
   padding: 0.75rem 1.25rem;
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
 }
 
 .k-richtext-container-lg .k-html-section {
@@ -143,7 +143,7 @@
   min-height: 35rem;
   max-height: fit-content;
   padding: 1.25rem;
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
 }
 
 .k-richtext-container-lg .k-editor-toolbar {
@@ -162,23 +162,23 @@
 }
 
 .k-editor-wrapper-disabled .tiptap {
-  background-color: var(--background-color-light);
+  background-color: var(--k-background-color-light);
   cursor: not-allowed;
 }
 
 .k-editor-wrapper-disabled .k-editor-toolbar {
-  background-color: var(--background-color-light);
+  background-color: var(--k-background-color-light);
 }
 
 .k-editor-wrapper-disabled .k-html-section {
-  background-color: var(--background-color-light);
+  background-color: var(--k-background-color-light);
   cursor: not-allowed;
 }
 
 .k-richtext-char-count {
   font-weight: 500;
-  font-size: var(--text-size-sm);
-  color: var(--text-color-secondary);
+  font-size: var(--k-text-size-sm);
+  color: var(--k-text-color-secondary);
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }