@kosmeo-ui/react 0.2.0 → 1.0.0

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,11 +50,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const [charCount, setCharCount] = useState(0);
   const [isInitialized, setIsInitialized] = useState(false);
 
-  // Stable across renders: the editor reads labelId once, when it's created.
-  const [generatedId] = useState(
-    () => `richtext-${Math.random().toString(36).substring(2, 9)}`
-  );
-  const fieldId = props.id || generatedId;
+  const generatedId = useId();
+  const fieldId = props.id || `richtext-${generatedId}`;
   const labelId = `${fieldId}-label`;
 
   const cleanHtml = (html: string): string | undefined => {
@@ -76,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({
@@ -86,6 +87,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     editorProps: {
       attributes: {
         "aria-multiline": "true",
+        ...(props.required ? { "aria-required": "true" } : {}),
         ...(props.label
           ? { "aria-labelledby": labelId }
           : { "aria-label": props.placeholder ?? "Rich text editor" }),
@@ -110,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);
@@ -141,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;
@@ -178,33 +176,33 @@ const RichTextEditor = (props: RichTextEditorProps) => {
             <IconButton
               icon={faBold}
               aria-label="Bold"
-              aria-pressed={editorState.isBold}
+              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}
+              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}
+              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>
@@ -212,22 +210,22 @@ const RichTextEditor = (props: RichTextEditorProps) => {
             <IconButton
               icon={faListUl}
               aria-label="Bullet list"
-              aria-pressed={editorState.isBulletedList}
+              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}
+              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>
@@ -239,7 +237,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
               variant="secondary"
               onClick={() => {
                 editor
-                  .chain()
+                  ?.chain()
                   .focus()
                   .selectAll()
                   .clearNodes()
@@ -247,7 +245,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
                   .setTextSelection(0)
                   .run();
               }}
-              disabled={showHtml || disabled}
+              disabled={toolbarDisabled}
             />
           </Tooltip>
           <div className="k-toolbar-separator"></div>
@@ -261,7 +259,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
               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;
 }