@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.33

package/dist/components/forms/Mention/Mention.js

@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'motion/react';
 import { mentionTheme } from './Mention.theme.js';
 import { cn } from '../../../utils/cn.js';
+import { composeEventHandlers } from '../../../utils/composeEventHandlers.js';
 import { Avatar } from '../../core/Avatar/Avatar.js';
 import { Tag } from '../../core/Tag/Tag.js';
 import { MenuItem } from '../../core/MenuItem/MenuItem.js';
@@ -77,12 +78,15 @@ const dropdownVariants = {
 // ---------------------------------------------------------------------------
 // Mention component
 // ---------------------------------------------------------------------------
-const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions: suggestionsProp, onSearch: onSearchProp, value: controlledValue, defaultValue = "", onChange, onMentionSelect, onMentionsChange, placeholder, size = "md", maxSuggestions = 8, className, wrapperClassName, dropdownClassName, theme: themeOverrides, state = "default", disabled = false, helperText, required, label, renderSuggestion, emptyMessage = "No results found", loading = false, mentionTagSize = "sm", mentionTagClassName, mentionTagRemovable = true, rows = 3, style: styleProp, elevation, lift, ...props }, ref) => {
+const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions: suggestionsProp, onSearch: onSearchProp, value: controlledValue, defaultValue = "", onChange, onMentionSelect, onMentionsChange, placeholder, size = "md", maxSuggestions = 8, className, wrapperClassName, dropdownClassName, theme: themeOverrides, state = "default", disabled = false, helperText, required, label, renderSuggestion, emptyMessage = "No results found", loading = false, mentionTagSize = "sm", mentionTagClassName, mentionTagRemovable = true, rows = 3, style: styleProp, id: idProp, onInput: onInputProp, onKeyDown: onKeyDownProp, onClick: onClickProp, onFocus: onFocusProp, onBlur: onBlurProp, onPaste: onPasteProp, onSelect: onSelectProp, onCompositionStart: onCompositionStartProp, onCompositionEnd: onCompositionEndProp, elevation, lift, ...props }, ref) => {
     // Relative elevation: the suggestion dropdown lifts above its host surface
     // (overlay base = 5) so a Mention inside a Popover/Modal still reads higher.
     const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     const theme = useMemo(() => ({ ...mentionTheme, ...(themeOverrides || {}) }), [themeOverrides]);
-    const generatedId = useId();
+    const autoId = useId();
+    // `id` is destructured rather than left to `...props`: the spread lands
+    // BEFORE this element's own `id`, so a consumer value would be overwritten.
+    const generatedId = idProp !== null && idProp !== void 0 ? idProp : autoId;
     const listboxId = `${generatedId}-listbox`;
     const isDisabled = state === "disabled" || disabled;
     const isInvalid = state === "invalid";
@@ -583,17 +587,13 @@ const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions
         const text = e.clipboardData.getData("text/plain");
         document.execCommand("insertText", false, text);
     }, []);
-    const handleFocus = useCallback((e) => {
-        var _a;
+    const handleFocus = useCallback((_e) => {
         setIsFocused(true);
-        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, [props.onFocus]);
-    const handleBlur = useCallback((e) => {
-        var _a;
+    }, []);
+    const handleBlur = useCallback((_e) => {
         setSelectedMentionIndex(null);
         setIsFocused(false);
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, [props.onBlur]);
+    }, []);
     const handleCompositionStart = useCallback(() => {
         composingRef.current = true;
     }, []);
@@ -702,7 +702,9 @@ const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions
     const helperId = `${generatedId}-helper`;
     const labelId = `${generatedId}-label`;
     return (jsxs("div", { className: cn(theme.wrapperStyle, wrapperClassName), children: [label && (jsx(FormLabel, { id: labelId, htmlFor: generatedId, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", required: required, className: "mb-1.5", children: label })), jsx("div", { ref: wrapperRef, className: cn(theme.inputGroupStyle, isInvalid && theme.invalidStyle, isFocused &&
-                    (isInvalid ? theme.invalidFocusStyle : theme.inputGroupFocusStyle)), children: createElement("div", { ...props, key: editorKey, ref: setEditableRef, id: generatedId, contentEditable: !isDisabled, suppressContentEditableWarning: true, onInput: handleInput, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste, onSelect: handleSelect, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd, role: "combobox", "aria-autocomplete": "list", "aria-expanded": isDropdownOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-placeholder": placeholder, "aria-required": required || undefined, "data-placeholder": placeholder, "aria-disabled": isDisabled || undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": helperText ? helperId : undefined, "aria-labelledby": label ? labelId : undefined, className: cn(theme.editableStyle, theme.sizes[size], isContentEmpty &&
+                    (isInvalid ? theme.invalidFocusStyle : theme.inputGroupFocusStyle)), children: createElement("div", { ...props, key: editorKey, ref: setEditableRef, id: generatedId, contentEditable: !isDisabled, suppressContentEditableWarning: true, 
+                    // 🔴 §9: composed, not clobbered — ours first, then the consumer's.
+                    onInput: composeEventHandlers(handleInput, onInputProp), onKeyDown: composeEventHandlers(handleKeyDown, onKeyDownProp), onClick: composeEventHandlers(handleClick, onClickProp), onFocus: composeEventHandlers(handleFocus, onFocusProp), onBlur: composeEventHandlers(handleBlur, onBlurProp), onPaste: composeEventHandlers(handlePaste, onPasteProp), onSelect: composeEventHandlers(handleSelect, onSelectProp), onCompositionStart: composeEventHandlers(handleCompositionStart, onCompositionStartProp), onCompositionEnd: composeEventHandlers(handleCompositionEnd, onCompositionEndProp), role: "combobox", "aria-autocomplete": "list", "aria-expanded": isDropdownOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-placeholder": placeholder, "aria-required": required || undefined, "data-placeholder": placeholder, "aria-disabled": isDisabled || undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": helperText ? helperId : undefined, "aria-labelledby": label ? labelId : undefined, className: cn(theme.editableStyle, theme.sizes[size], isContentEmpty &&
                         "before:content-[attr(data-placeholder)] before:text-[var(--color-text-placeholder)] before:pointer-events-none before:absolute", isDisabled && "cursor-not-allowed opacity-60", className), style: {
                         minHeight: rows ? `${rows * 1.5}em` : undefined,
                         ...styleProp,

package/dist/components/forms/Radio/Radio.theme.js

@@ -5,7 +5,7 @@ const radioTheme = {
     baseStyle: "relative flex items-start gap-3",
     inputContainerStyle: "relative flex-shrink-0 flex items-center justify-center",
     // Input styles with light and dark mode variants
-    inputStyle: "col-start-1 row-start-1 appearance-none rounded-full border-2 transition-all duration-400 " +
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-full border-2 transition-all duration-[var(--motion-duration-slower)] " +
         // Default state - light
         "border-[var(--color-border)] bg-[var(--color-surface)] " +
         // Default state - dark

package/dist/components/forms/RichTextEditor/RichTextEditor.d.ts

@@ -1,21 +1,17 @@
 import React from "react";
-import { RichTextEditorProps } from "./RichTextEditor.types";
-import type { FontFamilyOption } from "./RichTextEditor.types";
+import type { RichTextEditorProps } from "./RichTextEditor.types";
 /**
- * Curated default list of font families shipped with the editor.
- * The `Default` entry clears the inline font-family. The rest are popular
- * Google Fonts chosen for broad weight coverage. Each stack ends in a sensible
- * fallback so text stays readable while the font is loading.
- */
-export declare const DEFAULT_FONT_FAMILY_OPTIONS: FontFamilyOption[];
-/**
- * Lazily injects a Google Fonts `<link rel="stylesheet">` for the given family.
- * Idempotent: each family is requested at most once per page lifetime.
- * SSR-safe (no-ops when `document` is undefined).
+ * RichTextEditor — a semantic authoring surface over `contentEditable`.
+ *
+ * Produces portable HTML (`<h2>`, `<strong>`, `<ul>`, `<a href>`) with no
+ * framework classes, so stored content renders anywhere. Formatting is applied
+ * through `editorCommands.ts` (the only `execCommand` caller) and read back
+ * through `editorState.ts`.
+ *
+ * 🔴 Every write path is sanitized: the `value` prop, paste, drop, and the string
+ * handed to `onChange` — the last regardless of whether `onChange` was passed, so
+ * an uncontrolled editor is not a hole.
  *
- * @example
- * import { loadGoogleFont } from "@flikk/ui";
- * loadGoogleFont("Inter");
+ * 🔴 Per §9, `className`, `ref` and `...rest` target the contentEditable surface.
  */
-export declare const loadGoogleFont: (family: string, weights?: number[]) => void;
 export declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<HTMLDivElement>>;