@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/components/forms/Radio/Radio.types.d.ts

@@ -7,21 +7,42 @@ export type RadioState = 'default' | 'disabled';
  * Size variants for the radio component
  */
 export type RadioSize = 'sm' | 'md';
+/**
+ * Orientation for Radio.Group layout
+ */
+export type RadioGroupOrientation = 'vertical' | 'horizontal';
 /**
  * Radio component props
  */
 export interface RadioProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
-    id: string;
-    name: string;
-    value: string;
+    id?: string;
+    name?: string;
+    value: string | number;
     checked?: boolean;
-    onChange?: (checked: boolean, value: string) => void;
-    label?: string;
-    description?: string;
+    onChange?: (checked: boolean, value: string | number) => void;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
     state?: RadioState;
     size?: RadioSize;
     className?: string;
 }
+/**
+ * Radio.Group component props
+ */
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number) => void;
+    name?: string;
+    size?: RadioSize;
+    state?: RadioState;
+    orientation?: RadioGroupOrientation;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    required?: boolean;
+    className?: string;
+}
 /**
  * Radio theme configuration
  */
@@ -30,6 +51,12 @@ export interface RadioTheme {
     inputContainerStyle: string;
     inputStyle: string;
     dotStyle: string;
+    dotSizes: Record<RadioSize, string>;
     descriptionStyle: string;
     sizes: Record<RadioSize, string>;
+    groupStyle?: string;
+    groupHorizontalStyle?: string;
+    groupDescriptionStyle?: string;
+    groupErrorStyle?: string;
+    groupItemsStyle?: string;
 }

package/dist/components/forms/Radio/RadioContext.d.ts

@@ -0,0 +1,14 @@
+import type { RadioSize, RadioState } from "./Radio.types";
+export interface RadioGroupContextValue {
+    name: string;
+    value: string | number | undefined;
+    onChange: (value: string | number) => void;
+    size: RadioSize;
+    state: RadioState;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;
+/**
+ * Returns the group context, or undefined when used outside a Radio.Group.
+ * This allows standalone Radio usage without a Group wrapper.
+ */
+export declare function useRadioGroupContext(): RadioGroupContextValue | undefined;

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const RadioGroupContext = createContext(undefined);
+/**
+ * Returns the group context, or undefined when used outside a Radio.Group.
+ * This allows standalone Radio usage without a Group wrapper.
+ */
+function useRadioGroupContext() {
+    return useContext(RadioGroupContext);
+}
+
+export { RadioGroupContext, useRadioGroupContext };

package/dist/components/forms/Radio/RadioGroup.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { RadioGroupProps } from "./Radio.types";
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

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

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useState, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { radioTheme } from './Radio.theme.js';
+import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
+import { RadioGroupContext } from './RadioContext.js';
+
+const RadioGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state = "default", orientation = "vertical", label, description, error, required, className, children, ...props }, ref) => {
+    const autoId = useId();
+    const groupName = name !== null && name !== void 0 ? name : `radio-group-${autoId}`;
+    const labelId = `${autoId}-label`;
+    const descriptionId = `${autoId}-desc`;
+    const errorId = `${autoId}-error`;
+    // Controlled vs uncontrolled
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const handleChange = (itemValue) => {
+        if (!isControlled) {
+            setInternalValue(itemValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(itemValue);
+    };
+    const contextValue = useMemo(() => ({
+        name: groupName,
+        value: currentValue,
+        onChange: handleChange,
+        size,
+        state,
+    }), [groupName, currentValue, size, state]);
+    const labelState = error ? "invalid" : state === "disabled" ? "disabled" : "default";
+    return (jsx(RadioGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "radiogroup", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, className: cn("border-0 p-0 m-0", radioTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : label), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: radioTheme.groupDescriptionStyle, children: description })) : description), jsx("div", { className: cn(radioTheme.groupItemsStyle, orientation === "horizontal" && radioTheme.groupHorizontalStyle), children: children }), error && (typeof error === 'string' ? (jsx("p", { id: errorId, role: "alert", className: radioTheme.groupErrorStyle, children: error })) : error)] }) }));
+});
+RadioGroup.displayName = "Radio.Group";
+
+export { RadioGroup };

package/dist/components/forms/Radio/index.d.ts

@@ -1,3 +1,3 @@
 export { Radio } from './Radio';
-export type { RadioProps, RadioSize, RadioState } from './Radio.types';
+export type { RadioProps, RadioSize, RadioState, RadioGroupProps, RadioGroupOrientation } from './Radio.types';
 export { radioTheme } from './Radio.theme';

package/dist/components/forms/RichTextEditor/RichTextEditor.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import React__default, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
@@ -73,7 +73,7 @@ const DEFAULT_TOOLBAR = {
         "redo",
     ],
 };
-const RichTextEditor = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", value = "", onChange, placeholder = "Start typing...", id, required, minHeight = 120, maxHeight, toolbar: toolbarProp = DEFAULT_TOOLBAR, theme = {}, ...props }, ref) => {
+const RichTextEditor = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", value = "", onChange, placeholder = "Start typing...", id, required, minHeight = 120, maxHeight, toolbar: toolbarProp = DEFAULT_TOOLBAR, theme = {}, sanitize, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const [showToolbar, setShowToolbar] = useState(false);
     const [toolbarPosition, setToolbarPosition] = useState({ top: 0, left: 0 });
@@ -82,6 +82,15 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
     const [showColorPicker, setShowColorPicker] = useState(false);
     const shouldReduceMotion = useReducedMotion();
     const isClient = useIsClient();
+    // Built-in basic sanitizer: strips <script> tags and on* event handlers
+    const sanitizeHtml = useCallback((html) => {
+        if (sanitize)
+            return sanitize(html);
+        // Basic sanitization — strips script tags and inline event handlers
+        return html
+            .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+            .replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '');
+    }, [sanitize]);
     const editorRef = useRef(null);
     const toolbarRef = useRef(null);
     const fontSizeTriggerRef = useRef(null);
@@ -512,10 +521,10 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
     }, [toolbarConfig.position]);
     useEffect(() => {
         if (editorRef.current && value !== editorRef.current.innerHTML) {
-            editorRef.current.innerHTML = value;
+            editorRef.current.innerHTML = sanitizeHtml(value);
             updateFormattingState();
         }
-    }, [updateFormattingState, value]);
+    }, [updateFormattingState, value, sanitizeHtml]);
     const renderToolbarTool = (tool, index) => {
         var _a, _b;
         const isActive = tool === "bold"
@@ -540,11 +549,11 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
         };
         switch (tool) {
             case "bold":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(BoldIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(BoldIcon, { className: "w-4 h-4" }) }, index));
             case "italic":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(ItalicIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(ItalicIcon, { className: "w-4 h-4" }) }, index));
             case "underline":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(UnderlineIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(UnderlineIcon, { className: "w-4 h-4" }) }, index));
             case "fontSize": {
                 const currentOption = getFontSizeOption(formattingState.fontSize);
                 const dropdownClassName = themeStyles.dropdownStyle;
@@ -558,7 +567,7 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                             event.preventDefault();
                             event.stopPropagation();
                             handleFontSize(option.key);
-                        }, role: "option", "aria-selected": option.key === formattingState.fontSize, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "uppercase text-xs font-medium", children: option.label }), jsxs("span", { className: "text-xs text-[var(--color-text-muted)]", children: [option.px, "px"] })] }) }, option.key))) }));
+                        }, role: "option", "aria-selected": option.key === formattingState.fontSize, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "uppercase text-sm font-medium", children: option.label }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)]", children: [option.px, "px"] })] }) }, option.key))) }));
                 let renderedDropdown = null;
                 if (isFloatingToolbar && isClient) {
                     const triggerWidth = (_a = fontSizeTriggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
@@ -584,13 +593,13 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                         fontSizePortalContentRef.current = null;
                     }
                 }
-                return (jsxs("div", { className: "relative", "data-tool": "fontSize", children: [jsx(Button, { ref: fontSizeTriggerRef, size: "sm", color: "neutral", variant: "ghost", className: cn(themeStyles.toolbarButtonStyle, "px-2 min-w-[3rem] gap-1"), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsxs("div", { className: "relative", "data-tool": "fontSize", children: [jsx(Button, { ref: fontSizeTriggerRef, size: "sm", color: "neutral", variant: "soft", className: cn(themeStyles.toolbarButtonStyle, "px-2 min-w-[3rem] gap-1"), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 focusEditor();
                                 setShowFontSizePicker((previous) => !previous);
                                 setShowColorPicker(false);
-                            }, disabled: isDisabled, "aria-label": "Font size", "aria-expanded": showFontSizePicker, "aria-haspopup": "listbox", children: jsx("span", { className: "text-xs font-medium tracking-wide uppercase", children: currentOption.label }) }), toolbarConfig.position === "floating" ? null : renderedDropdown, toolbarConfig.position === "floating" ? renderedDropdown : null] }, index));
+                            }, disabled: isDisabled, "aria-label": "Font size", "aria-expanded": showFontSizePicker, "aria-haspopup": "listbox", children: jsx("span", { className: "text-sm font-medium tracking-wide uppercase", children: currentOption.label }) }), toolbarConfig.position === "floating" ? null : renderedDropdown, toolbarConfig.position === "floating" ? renderedDropdown : null] }, index));
             }
             case "textColor":
                 {
@@ -629,7 +638,7 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                             colorPortalContentRef.current = null;
                         }
                     }
-                    return (jsxs("div", { className: "relative", "data-tool": "textColor", children: [jsx(Button, { ref: colorTriggerRef, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: (event) => {
+                    return (jsxs("div", { className: "relative", "data-tool": "textColor", children: [jsx(Button, { ref: colorTriggerRef, size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: (event) => {
                                     event.preventDefault();
                                     event.stopPropagation();
                                     focusEditor();
@@ -638,27 +647,27 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                 }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker, children: jsx(PaintBrushIcon, { className: "w-4 h-4" }) }), isFloatingToolbar ? null : renderedColorDropdown, isFloatingToolbar ? renderedColorDropdown : null] }, index));
                 }
             case "alignLeft":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("left");
                     }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomLeftIcon, { className: "w-4 h-4" }) }, index));
             case "alignCenter":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("center");
                     }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3Icon, { className: "w-4 h-4" }) }, index));
             case "alignRight":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("right");
                     }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomRightIcon, { className: "w-4 h-4" }) }, index));
             case "undo":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo", children: jsx(ArrowUturnLeftIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo", children: jsx(ArrowUturnLeftIcon, { className: "w-4 h-4" }) }, index));
             case "redo":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo", children: jsx(ArrowUturnRightIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo", children: jsx(ArrowUturnRightIcon, { className: "w-4 h-4" }) }, index));
             case "separator":
                 return jsx("div", { className: themeStyles.separatorStyle }, index);
             default:

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

@@ -28,11 +28,11 @@ const richTextEditorTheme = {
     // Toolbar styling (RTE-specific)
     toolbarStyle: "flex items-center gap-1 p-2 border-b border-[var(--color-border)] bg-white dark:bg-[var(--color-background-secondary)]",
     // Toolbar button styling
-    toolbarButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-white active:bg-gray-200 transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-tertiary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:hover:bg-[var(--color-primary-50)] border border-transparent data-[pressed=true]:bg-[var(--color-primary-50)] data-[pressed=true]:text-[var(--color-primary-900)] data-[pressed=true]:shadow-inner data-[pressed=true]:border-[var(--color-primary-200)]",
+    toolbarButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-white active:bg-[var(--color-background-tertiary)] transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-tertiary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:hover:bg-[var(--color-primary-50)] border border-transparent data-[pressed=true]:bg-[var(--color-primary-50)] data-[pressed=true]:text-[var(--color-primary-900)] data-[pressed=true]:shadow-inner data-[pressed=true]:border-[var(--color-primary-200)]",
     // Dropdown styling (font size, color picker)
-    dropdownStyle: "fixed z-[1000] min-w-[120px] py-1 bg-white/90 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-slate-200 focus:outline-none",
+    dropdownStyle: "fixed z-[1000] min-w-[120px] py-1 bg-white/90 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-[var(--color-border)] focus:outline-none",
     // Dropdown item styling
-    dropdownItemStyle: "block w-full px-3 py-2 text-left text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
+    dropdownItemStyle: "block w-full px-3 py-2 text-left text-base text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
     // Separator between toolbar sections
     separatorStyle: "w-px h-6 bg-[var(--color-border)] mx-1",
     // Color picker grid layout

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

@@ -48,6 +48,17 @@ export interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivEl
     toolbar?: ToolbarConfig;
     /** Component-level theme overrides */
     theme?: RichTextEditorThemeOverrides;
+    /**
+     * Optional HTML sanitizer function applied before setting innerHTML.
+     * Receives raw HTML string, must return sanitized HTML string.
+     * Recommended: pass DOMPurify.sanitize for robust XSS protection.
+     * If not provided, a basic built-in sanitizer strips script tags and on* event handlers.
+     *
+     * @example
+     * import DOMPurify from 'dompurify';
+     * <RichTextEditor sanitize={DOMPurify.sanitize} />
+     */
+    sanitize?: (html: string) => string;
 }
 export type RichTextEditorSize = 'sm' | 'md' | 'lg';
 export type RichTextEditorState = 'default' | 'disabled' | 'invalid';

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

@@ -88,6 +88,6 @@ export declare const SelectOptions: React.FC<SelectOptionsExtendedProps>;
  * Select Option Component
  */
 export declare const SelectOption: <T extends any>({ value, isSelected, disabled, className, onSelect, children, }: SelectOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
-export declare const Select: <T extends any>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Select: <T = unknown>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 export { useSelectState };
 export type { UseSelectStateProps, UseSelectStateReturn };

package/dist/components/forms/Select/Select.js

@@ -7,11 +7,10 @@ import { FormLabel } from '../FormLabel/FormLabel.js';
 import { Input } from '../Input/Input.js';
 import '../Input/Input.theme.js';
 import { createDropdownAnimations } from './Select.animations.js';
-import { ChevronUpDownIcon } from '../../../icons/core/ChevronUpDown.js';
+import { ChevronUpDownIcon, PlusIcon, CheckIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { cn } from '../../../utils/cn.js';
 import { isValidTypeaheadChar, findNextMatchingOption, TYPEAHEAD_TIMEOUT_MS } from '../../../utils/typeaheadUtils.js';
-import { PlusIcon, CheckIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { Tag } from '../../core/Tag/Tag.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { useSelectState } from './useSelectState.js';
@@ -124,7 +123,7 @@ const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", ic
         ? focusStateStyle ||
             "outline-2 outline-[var(--color-primary)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
         : "";
-    return (jsx("div", { className: cn(buttonWrapperStyle), children: jsxs("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }) }));
+    return (jsx("div", { className: cn(buttonWrapperStyle), children: jsxs("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen && id ? `${id}-listbox` : undefined, children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }) }));
 };
 /**
  * Select Options Component
@@ -316,7 +315,7 @@ const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, c
                     }),
             }, role: "listbox", tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit", children: [searchable && (jsx("div", { className: `sticky top-0 py-1 bg-[var(--color-background)] z-[10000] border-b border-[var(--color-border)] ${searchInputStyle}`, style: {
                         "--form-radius": "0",
-                    }, children: jsx(Input, { placeholder: "Search...", value: searchValue, onChange: handleSearchChange, type: "search", ref: searchInputRef, className: "w-full block bg-[var(--color-background)] border-none outline-none !min-h-8 py-2 ring-0 shadow-none [&:focus]:outline-none [&:focus]:ring-0 [&:focus]:border-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:border-none", iconStart: jsx(MagnifyingGlassIcon, { strokeWidth: 2, className: "size-4 text-[var(--color-text-muted)] group-focus-within:text-[var(--color-primary)]" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", inputGroupClassName: "!border-none !outline-none !ring-0 !shadow-none flex items-center", style: {
+                    }, children: jsx(Input, { placeholder: "Search...", "aria-label": "Search options", value: searchValue, onChange: handleSearchChange, type: "search", ref: searchInputRef, className: "w-full block bg-[var(--color-background)] border-none outline-none !min-h-8 py-2 ring-0 shadow-none [&:focus]:outline-none [&:focus]:ring-0 [&:focus]:border-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:border-none", iconStart: jsx(MagnifyingGlassIcon, { strokeWidth: 2, className: "size-4 text-[var(--color-text-muted)] group-focus-within:text-[var(--color-primary)]" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", inputGroupClassName: "!border-none !outline-none !ring-0 !shadow-none flex items-center", style: {
                             border: "none",
                             outline: "none",
                             boxShadow: "none",
@@ -435,11 +434,11 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
     // Container style
     const containerStyle = theme.containerStyle || "";
     // Default chevron icon if no iconEnd provided
-    const defaultChevronIcon = jsx(ChevronUpDownIcon, { size: 16, className: "" });
+    const defaultChevronIcon = jsx(ChevronUpDownIcon, { className: "size-4" });
     // Generate a unique ID if not provided
     const generatedId = React__default.useId();
     const selectId = id || generatedId;
-    return (jsx(SelectProvider, { selectState: selectState, size: size, componentState: state, theme: themeOverrides, searchable: searchable, enableTypeahead: enableTypeahead, children: jsxs("div", { ref: ref, className: cn("relative", containerStyle, wrapperClassName), children: [label && (jsx(FormLabel, { htmlFor: selectId, required: required, children: label })), jsx(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn(multiple && selectedValues.length > 0
+    return (jsx(SelectProvider, { selectState: selectState, size: size, componentState: state, theme: themeOverrides, searchable: searchable, enableTypeahead: enableTypeahead, children: jsxs("div", { ref: ref, className: cn("relative", containerStyle, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: selectId, required: required, children: label })) : (label)), jsx(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn(multiple && selectedValues.length > 0
                             ? "flex min-w-0"
                             : "block truncate", (multiple ? selectedValues.length > 0 : selectedOption)
                             ? theme.valueTextStyle
@@ -450,9 +449,10 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
                                 ? isValueSelected(option.value)
                                 : option.value === selectedValue;
                             return (jsx(SelectOption, { value: option.value, isSelected: isSelected, disabled: option.disabled || false, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-2", children: [jsx(PlusIcon, { className: "size-4 shrink-0" }), jsx("span", { className: "block truncate", children: option.label })] })) : multiple ? (jsxs(Fragment, { children: [jsx("span", { className: "block truncate", children: option.label }), isSelected && (jsx("span", { className: theme.checkIconStyle, children: jsx(CheckIcon, { className: "size-4", strokeWidth: 2 }) }))] })) : (jsx("span", { className: "block truncate", children: option.label })) }, option.id));
-                        }) }), helperText && (jsx("p", { className: cn(helperTextStyle, helperTextStateStyle), children: helperText })), name && (jsx("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" }))] }) }));
+                        }) }), helperText && (typeof helperText === 'string' ? (jsx("p", { className: cn(helperTextStyle, helperTextStateStyle), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" }))] }) }));
 };
-const Select = React__default.forwardRef(SelectInner);
-Select.displayName = "Select";
+const SelectForwarded = React__default.forwardRef(SelectInner);
+SelectForwarded.displayName = "Select";
+const Select = SelectForwarded;
 
 export { Select, SelectButton, SelectContext, SelectOption, SelectOptions, SelectProvider, useSelectContext, useSelectState };

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

@@ -60,7 +60,7 @@ const selectTheme = {
     iconPadding: formsBaseTheme.iconStyles.padding,
     // Multi-select chip styles
     chipContainerStyle: "flex flex-nowrap gap-1 items-center min-w-0 overflow-hidden -ml-2",
-    chipOverflowStyle: "inline-flex items-center shrink-0 whitespace-nowrap px-1.5 py-0.5 text-xs font-medium " +
+    chipOverflowStyle: "inline-flex items-center shrink-0 whitespace-nowrap px-1.5 py-0.5 text-sm font-medium " +
         "text-[var(--color-text-muted)]",
 };
 

package/dist/components/forms/Select/Select.types.d.ts

@@ -4,7 +4,7 @@ import type { SelectPlacement } from "../../../hooks/useSelectPortal";
  * Select value option type
  * @template T The type of the option value
  */
-export interface SelectOption<T = any> {
+export interface SelectOption<T = unknown> {
     /** Unique identifier for the option */
     id: string | number;
     /** Display label for the option */
@@ -25,7 +25,7 @@ export interface SelectBaseProps {
  * Select component props
  * @template T The type of the select value
  */
-export interface SelectProps<T = any> extends SelectBaseProps {
+export interface SelectProps<T = unknown> extends SelectBaseProps {
     /** ID for the select component */
     id?: string;
     /** Name for the select component */
@@ -46,10 +46,10 @@ export interface SelectProps<T = any> extends SelectBaseProps {
     required?: boolean;
     /** Array of options to display */
     options: SelectOption<T>[];
-    /** Label text for the select */
-    label?: string;
-    /** Helper text displayed below the select */
-    helperText?: string;
+    /** Label for the select — pass a string for default styling, or a ReactNode for full control */
+    label?: React.ReactNode;
+    /** Helper text below the select — pass a string for default styling, or a ReactNode for full control */
+    helperText?: React.ReactNode;
     /** Enable multi-select mode — value becomes T[] and chips are rendered in trigger */
     multiple?: boolean;
     /** Maximum number of chips to display before showing "+N more" (default: 3) */
@@ -138,7 +138,7 @@ export interface SelectOptionsProps extends SelectBaseProps {
 /**
  * Select option props
  */
-export interface SelectOptionProps<T = any> extends SelectBaseProps {
+export interface SelectOptionProps<T = unknown> extends SelectBaseProps {
     /** Option value */
     value: T;
     /** Whether the option is currently selected */

package/dist/components/forms/SelectableCard/SelectableCard.animations.d.ts

@@ -0,0 +1,2 @@
+import type { Variants } from "motion/react";
+export declare const cardVariants: Variants;

package/dist/components/forms/SelectableCard/SelectableCard.animations.js

@@ -0,0 +1,9 @@
+const cardVariants = {
+    idle: { scale: 1 },
+    tap: {
+        scale: 0.995,
+        transition: { type: "spring", stiffness: 400, damping: 10, duration: 0.1 },
+    },
+};
+
+export { cardVariants };

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { SelectableCardProps } from "./SelectableCard.types";
+export declare const SelectableCard: React.ForwardRefExoticComponent<SelectableCardProps & React.RefAttributes<HTMLDivElement>> & {
+    Group: React.ForwardRefExoticComponent<import("./SelectableCard.types").SelectableCardGroupProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/forms/SelectableCard/SelectableCard.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useId } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useSelectableCardContext } from './SelectableCardContext.js';
+import { SelectableCardGroup } from './SelectableCardGroup.js';
+import { cardVariants } from './SelectableCard.animations.js';
+
+// ─── Radio Indicator ─────────────────────────────────────────────────────────
+const RadioIndicator = ({ checked }) => (jsxs("div", { className: "relative flex-shrink-0 flex items-center justify-center size-5", children: [jsx("div", { className: cn("size-5 rounded-full border-2 transition-colors duration-200", checked
+                ? "border-[var(--color-primary)]"
+                : "border-[var(--color-border)]") }), jsx("div", { className: cn("absolute inset-0 m-auto rounded-full bg-[var(--color-primary)] transition-all duration-200", checked ? "size-2.5 opacity-100" : "size-0 opacity-0") })] }));
+// ─── Checkbox Indicator ──────────────────────────────────────────────────────
+const CheckboxIndicator = ({ checked }) => (jsx("div", { className: cn("flex-shrink-0 flex items-center justify-center size-5 rounded-[4px] border-2 transition-colors duration-200", checked
+        ? "border-[var(--color-primary)] bg-[var(--color-primary)]"
+        : "border-[var(--color-border)] bg-[var(--color-background)]"), children: checked && jsx(CheckIcon, { className: "size-3.5 stroke-white", strokeWidth: 3 }) }));
+// ─── SelectableCard ──────────────────────────────────────────────────────────
+const SelectableCardRoot = React__default.forwardRef(({ value, disabled: cardDisabled, className, children, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
+    const content = children;
+    const ctx = useSelectableCardContext();
+    const inputId = useId();
+    const shouldReduceMotion = useReducedMotion();
+    const isDisabled = cardDisabled || ctx.disabled;
+    const isSelected = ctx.type === "single"
+        ? ctx.value === value
+        : Array.isArray(ctx.value) && ctx.value.includes(value);
+    const handleClick = () => {
+        if (isDisabled)
+            return;
+        ctx.onChange(value);
+    };
+    const handleKeyDown = (e) => {
+        if (isDisabled)
+            return;
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            ctx.onChange(value);
+        }
+    };
+    const inputType = ctx.type === "single" ? "radio" : "checkbox";
+    const animated = !shouldReduceMotion && !isDisabled;
+    const motionProps = animated
+        ? {
+            variants: cardVariants,
+            initial: "idle",
+            whileTap: "tap",
+        }
+        : {};
+    return (jsxs(motion.div, { ref: ref, role: ctx.type === "single" ? "radio" : "checkbox", "aria-checked": isSelected, "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : 0, "data-selected": isSelected, "data-disabled": isDisabled || undefined, className: cn(ctx.theme.card, isSelected && ctx.theme.selectedCard, isDisabled && ctx.theme.disabledCard, className), onClick: handleClick, onKeyDown: handleKeyDown, ...motionProps, ...props, children: [jsx("input", { type: inputType, id: inputId, name: ctx.name, value: value, checked: isSelected, disabled: isDisabled, onChange: () => { }, className: "sr-only", tabIndex: -1, "aria-hidden": true }), jsx("div", { className: ctx.theme.contentWrapper, children: content }), ctx.indicator !== "none" && (jsx("div", { className: ctx.theme.indicator, children: ctx.indicator === "radio" ? (jsx(RadioIndicator, { checked: isSelected })) : (jsx(CheckboxIndicator, { checked: isSelected })) }))] }));
+});
+SelectableCardRoot.displayName = "SelectableCard";
+// ─── Compound Export ─────────────────────────────────────────────────────────
+const SelectableCard = Object.assign(SelectableCardRoot, {
+    Group: SelectableCardGroup,
+});
+
+export { SelectableCard };

package/dist/components/forms/SelectableCard/SelectableCard.theme.d.ts

@@ -0,0 +1,2 @@
+import type { SelectableCardTheme } from "./SelectableCard.types";
+export declare const selectableCardTheme: SelectableCardTheme;

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

@@ -0,0 +1,38 @@
+const selectableCardTheme = {
+    group: "flex flex-col gap-3",
+    card: 
+    // Base layout
+    "relative flex items-center justify-between gap-4 rounded-[var(--radius-base)] p-4 cursor-pointer transition-[border-color,background-color,box-shadow,outline] duration-200 " +
+        // Default state - light
+        "border border-[var(--color-border)] bg-[var(--color-surface)] " +
+        // Default state - dark
+        "dark:bg-[var(--color-background)] " +
+        // Hover state - light
+        "hover:border-[var(--color-border-secondary)] " +
+        // Hover state - dark
+        "  " +
+        // Focus visible - light
+        "focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-[var(--color-primary)] " +
+        // Focus visible - dark
+        "dark:focus-visible:outline-[var(--color-primary)]/50",
+    selectedCard: 
+    // Selected border & ring - light
+    "border-[var(--color-primary)] ring-2 ring-[var(--color-primary)]/10  " +
+        // Selected border & ring - dark
+        "dark:border-[var(--color-primary)] dark:ring-[var(--color-primary)]/20  " +
+        // Selected background gradient - light
+        "bg-[var(--color-primary-50)] " +
+        // Selected background gradient - dark
+        "dark:bg-[var(--color-background-secondary)] " +
+        // Selected hover - light
+        "hover:border-[var(--color-primary)] " +
+        // Selected hover - dark
+        "dark:hover:border-[var(--color-primary)] ",
+    disabledCard: 
+    // Disabled state
+    "opacity-50 cursor-not-allowed pointer-events-none",
+    contentWrapper: "flex-1 min-w-0",
+    indicator: "flex-shrink-0",
+};
+
+export { selectableCardTheme };

package/dist/components/forms/SelectableCard/SelectableCard.types.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+export type SelectableCardType = "single" | "multiple";
+export type SelectableCardIndicator = "radio" | "checkbox" | "none";
+export interface SelectableCardTheme {
+    group?: string;
+    card?: string;
+    selectedCard?: string;
+    disabledCard?: string;
+    contentWrapper?: string;
+    indicator?: string;
+}
+export interface SelectableCardContextValue {
+    type: SelectableCardType;
+    indicator: SelectableCardIndicator;
+    value: string | string[];
+    onChange: (cardValue: string) => void;
+    disabled: boolean;
+    name: string;
+    theme: SelectableCardTheme;
+}
+export interface SelectableCardGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    type?: SelectableCardType;
+    value: string | string[];
+    onChange: (value: string | string[]) => void;
+    indicator?: SelectableCardIndicator;
+    disabled?: boolean;
+    name?: string;
+    theme?: Partial<SelectableCardTheme>;
+}
+export interface SelectableCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "value"> {
+    value: string;
+    disabled?: boolean;
+}

package/dist/components/forms/SelectableCard/SelectableCardContext.d.ts

@@ -0,0 +1,3 @@
+import type { SelectableCardContextValue } from "./SelectableCard.types";
+export declare const SelectableCardContext: import("react").Context<SelectableCardContextValue | undefined>;
+export declare function useSelectableCardContext(): SelectableCardContextValue;