@flikk/ui 1.0.0-beta.7 → 1.0.0-beta.9

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

@@ -5,7 +5,7 @@
 const inputCounterTheme = {
     baseStyle: "flex items-center gap-3 transition-all p-1 border border-[var(--color-border)] rounded-[var(--form-radius)] w-fit",
     buttonWrapperStyle: "flex-shrink-0",
-    numberStyle: "min-w-fit text-center text-sm font-medium text-[var(--color-text-primary)] tabular-nums select-none",
+    numberStyle: "min-w-fit text-center text-base font-medium text-[var(--color-text-primary)] tabular-nums select-none",
 };
 
 export { inputCounterTheme };

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

@@ -10,7 +10,7 @@ const inputOTPTheme = {
     // OTP input container
     containerStyle: 'flex items-center gap-3',
     // Individual input field styles with design tokens
-    inputStyle: 'text-center text-lg text-[var(--color-text-primary)] h-full',
+    inputStyle: 'text-center text-xl text-[var(--color-text-primary)] h-full',
     // Input group wrapper for grouped inputs (overrides default Input styling)
     inputGroupStyle: 'w-10 min-w-10 h-10 min-h-10 sm:w-12 sm:min-w-12 sm:h-12 sm:min-h-12',
     // Separator between input groups

package/dist/components/forms/InputTag/InputTag.js

@@ -480,7 +480,7 @@ suggestions, creatable = true, openOnFocus = true, filterFn = defaultFilterFn, e
                             : placeholder, size: size, state: state, label: label, 
                         // Only pass helperText to Input when NOT in dropdown mode
                         // Otherwise the dropdown positions below the helper text
-                        helperText: hasDropdown ? undefined : displayHelperText, disabled: isInputDisabled, className: inputClassName, "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? "listbox" : undefined, "aria-autocomplete": hasDropdown ? "list" : undefined }), hasDropdown && (jsx(InputTagOptions, { isOpen: isOpen, onClose: handleCloseDropdown, triggerRef: wrapperRef, filteredOptions: filteredOptions, selectedTags: tags, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onSelectOption: handleSelectOption, showSelectedIndicator: showSelectedIndicator, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, theme: theme }))] }), hasDropdown && displayHelperText && (jsx("p", { className: "text-xs text-[var(--color-text-muted)] mt-1.5", children: displayHelperText })), jsx("div", { className: cn(theme.tagsContainerStyle, "empty:hidden", tagsContainerClassName), children: jsx(AnimatePresence, { mode: "popLayout", children: tags.map((tag, index) => {
+                        helperText: hasDropdown ? undefined : displayHelperText, disabled: isInputDisabled, className: inputClassName, "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? "listbox" : undefined, "aria-autocomplete": hasDropdown ? "list" : undefined }), hasDropdown && (jsx(InputTagOptions, { isOpen: isOpen, onClose: handleCloseDropdown, triggerRef: wrapperRef, filteredOptions: filteredOptions, selectedTags: tags, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onSelectOption: handleSelectOption, showSelectedIndicator: showSelectedIndicator, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, theme: theme }))] }), hasDropdown && displayHelperText && (jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-1.5", children: displayHelperText })), jsx("div", { className: cn(theme.tagsContainerStyle, "empty:hidden", tagsContainerClassName), children: jsx(AnimatePresence, { mode: "popLayout", children: tags.map((tag, index) => {
                         return (jsx(Tag, { size: size, onRemove: () => removeTag(index), disabled: disabled, className: tagClassName, children: tag }, `${tag}-${occurrenceMap[index]}`));
                     }) }) })] }));
 });

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

@@ -35,13 +35,13 @@ const mentionTheme = {
     suggestionAvatarStyle: "size-7 rounded-full object-cover shrink-0 " +
         "bg-[var(--color-background-tertiary)] dark:bg-[var(--color-neutral-700)]",
     // Avatar fallback (initials circle)
-    suggestionAvatarFallbackStyle: "size-7 rounded-full shrink-0 flex items-center justify-center text-xs font-medium " +
+    suggestionAvatarFallbackStyle: "size-7 rounded-full shrink-0 flex items-center justify-center text-sm font-medium " +
         "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +
         "dark:bg-[var(--color-primary-900)] dark:text-[var(--color-primary-300)]",
     // Suggestion label text
-    suggestionLabelStyle: "text-sm font-medium truncate",
+    suggestionLabelStyle: "text-base font-medium truncate",
     // Suggestion description text
-    suggestionDescriptionStyle: "text-xs text-[var(--color-text-muted)] truncate " +
+    suggestionDescriptionStyle: "text-sm text-[var(--color-text-muted)] truncate " +
         "dark:text-[var(--color-neutral-500)]",
     // Empty state
     emptyMessageStyle: formsBaseTheme.dropdownStyles.emptyMessage,

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { RadioProps } from "./Radio.types";
-/**
- * Radio component for selecting one option from a group
- */
-export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>> & {
+    Group: React.ForwardRefExoticComponent<import("./Radio.types").RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+};

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

@@ -1,18 +1,34 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import React__default, { useId } from 'react';
 import { radioTheme } from './Radio.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { cn } from '../../../utils/cn.js';
+import { useRadioGroupContext } from './RadioContext.js';
+import { RadioGroup } from './RadioGroup.js';
 
 /**
  * Radio component for selecting one option from a group
  */
-const Radio = React__default.forwardRef(({ id, name, value, checked, defaultChecked, onChange, label, description, state = "default", size = "md", className, ...restProps }, ref) => {
-    const isControlled = checked !== undefined;
+const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: checkedProp, defaultChecked, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
+    var _a, _b, _c, _d;
+    const autoId = useId();
+    const groupContext = useRadioGroupContext();
+    // Resolve props from group context or individual props
+    const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
+    const name = (_b = (_a = groupContext === null || groupContext === void 0 ? void 0 : groupContext.name) !== null && _a !== void 0 ? _a : nameProp) !== null && _b !== void 0 ? _b : autoId;
+    const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
+    const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
     const isDisabled = state === "disabled";
+    // Determine checked state
+    const isInGroup = groupContext !== undefined;
+    const checked = isInGroup ? groupContext.value === value : checkedProp;
+    const isControlled = checked !== undefined;
     const handleChange = (e) => {
         if (isDisabled)
             return;
+        if (isInGroup) {
+            groupContext.onChange(value);
+        }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
     };
     const inputProps = isControlled
@@ -20,6 +36,7 @@ const Radio = React__default.forwardRef(({ id, name, value, checked, defaultChec
         : { defaultChecked };
     return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx("div", { className: cn(radioTheme.dotStyle, size === "sm" ? "size-2.5 top-0.25" : "size-3") })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })), description && (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description }))] }))] }));
 });
-Radio.displayName = "Radio";
+RadioComponent.displayName = "Radio";
+const Radio = Object.assign(RadioComponent, { Group: RadioGroup });
 
 export { Radio };

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

@@ -29,11 +29,17 @@ const radioTheme = {
         "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
         "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
     dotStyle: "absolute inset-0 m-auto pointer-events-none rounded-full bg-[var(--color-primary)] opacity-0 transition-all duration-400 peer-checked:opacity-100 peer-data-[state=disabled]:saturate-0 peer-data-[state=disabled]:peer-checked:opacity-80",
-    descriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 mt-0.5",
+    descriptionStyle: "text-base text-[var(--color-text-secondary)]/80 mt-0.5",
     sizes: {
         sm: "size-5 mt-0.25",
         md: "size-6",
     },
+    // Group styles
+    groupStyle: "flex flex-col gap-1.5",
+    groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
+    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
+    groupErrorStyle: "text-base text-[var(--color-danger)] mt-1.5",
+    groupItemsStyle: "flex flex-col gap-3",
 };
 
 export { radioTheme };

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;
+    onChange?: (checked: boolean, value: string | number) => void;
     label?: string;
     description?: string;
     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?: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    className?: string;
+}
 /**
  * Radio theme configuration
  */
@@ -32,4 +53,9 @@ export interface RadioTheme {
     dotStyle: 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 && (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })), description && (jsx("p", { id: descriptionId, className: radioTheme.groupDescriptionStyle, children: description })), jsx("div", { className: cn(radioTheme.groupItemsStyle, orientation === "horizontal" && radioTheme.groupHorizontalStyle), children: children }), error && (jsx("p", { id: errorId, role: "alert", className: radioTheme.groupErrorStyle, children: 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

@@ -558,7 +558,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;
@@ -590,7 +590,7 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                 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":
                 {

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

@@ -32,7 +32,7 @@ const richTextEditorTheme = {
     // 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",
     // 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/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/Signature/Signature.theme.js

@@ -14,7 +14,7 @@ const signatureTheme = {
     // Canvas element style
     canvasStyle: "block w-full h-full cursor-crosshair touch-none focus:outline-none",
     // Placeholder text style
-    placeholderStyle: "absolute inset-0 flex items-center justify-center pointer-events-none text-[var(--color-text-placeholder)] text-sm",
+    placeholderStyle: "absolute inset-0 flex items-center justify-center pointer-events-none text-[var(--color-text-placeholder)] text-base",
     // Control buttons container style
     controlsStyle: "absolute bottom-2 right-2 flex gap-2 z-10",
     // Size variants - use shared padding system

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

@@ -4,7 +4,7 @@ const sliderTheme = {
     // Wrapper styles
     wrapperStyle: formsBaseTheme.wrapperStyle,
     // Label styles
-    labelStyle: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
+    labelStyle: "block text-base font-medium text-[var(--color-text-primary)] mb-2",
     // Helper text styles
     helperTextStyle: formsBaseTheme.helperText,
     // Root container with layout
@@ -16,9 +16,9 @@ const sliderTheme = {
     // Thumb (draggable handle)
     thumbStyle: "block h-5 w-8 rounded-full border-2 border-[var(--color-primary)] ring-2 ring-white shadow-sm cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:hover:scale-100 data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-background-disabled)] data-[disabled]:border-[var(--color-border)] data-[disabled]:hover:scale-100 data-[invalid]:border-[var(--color-danger)] data-[invalid]:focus-visible:ring-[var(--color-danger)] glass-effect-5",
     // Value display
-    valueDisplayStyle: "text-sm font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
+    valueDisplayStyle: "text-base font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
     // Min/max labels
-    minMaxLabelStyle: "text-sm font-medium text-[var(--color-text-muted)]",
+    minMaxLabelStyle: "text-base font-medium text-[var(--color-text-muted)]",
     // Tick marks
     tickStyle: "absolute w-0.5 h-2 bg-white/60 -translate-x-0.5 pointer-events-none",
 };

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

@@ -5,7 +5,7 @@ const switchTheme = {
     container: "flex w-full justify-between items-center gap-4",
     track: "w-12 h-6 rounded-full transition-colors cursor-pointer shadow-inner bg-[var(--color-border)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)]",
     thumb: "w-7 h-5 rounded-full shadow-md glass-effect !bg-white/80",
-    description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
+    description: "text-base text-[var(--color-text-muted)] -mt-1.5",
 };
 /**
  * Thumb position values for animation

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

@@ -62,7 +62,7 @@ const timePickerTheme = {
     // Individual wheel column - relative positioning for highlight overlay
     wheelColumnStyle: "flex-1 flex flex-col relative",
     // Wheel column header label
-    wheelHeaderStyle: "text-center py-2 text-xs font-semibold text-[var(--color-text-muted)] uppercase",
+    wheelHeaderStyle: "text-center py-2 text-sm font-semibold text-[var(--color-text-muted)] uppercase",
     // Center highlight row - positioned behind selected item
     wheelHighlightStyle: "absolute -mt-4 inset-x-0 bg-[var(--color-border)] pointer-events-none z-0",
     // Wheel item - centered with transition for smooth opacity/color changes
@@ -77,7 +77,7 @@ const timePickerTheme = {
         "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
         "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
     // AM/PM period toggle button
-    periodToggleStyle: "px-1.5 py-0.5 text-xs font-semibold rounded " +
+    periodToggleStyle: "px-1.5 py-0.5 text-sm font-semibold rounded " +
         "bg-[var(--color-background-tertiary)] text-[var(--color-text-primary)] " +
         "hover:bg-[var(--color-background-quaternary)] transition-colors cursor-pointer select-none " +
         "dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +

package/dist/components/forms/TransferList/TransferList.js

@@ -173,7 +173,7 @@ const TransferList = React__default.forwardRef(({ items, value: controlledValue,
         return (jsxs("div", { className: cn(theme.panelStyle, sizeStyles.panel), role: "listbox", "aria-label": panelAriaLabel, "aria-multiselectable": "true", children: [jsxs("div", { className: theme.headerStyle, children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "checkbox", checked: allSelected, ref: (el) => {
                                         if (el)
                                             el.indeterminate = indeterminate;
-                                    }, onChange: () => toggleSelectAll(filteredItems, selected, setSelected), disabled: selectableCount === 0, className: cn(checkboxSize, "rounded-[calc(var(--radius-base)*0.5)] border-2 border-[var(--color-border)] accent-[var(--color-primary)] cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"), "aria-label": `Select all ${title}` }), jsx("span", { className: cn(theme.titleStyle, size === "sm" ? "text-xs" : "text-sm"), children: title })] }), jsxs("span", { className: cn(theme.countStyle, size === "sm" ? "text-xs" : "text-xs"), children: [selectedCount > 0 ? `${selectedCount}/` : "", listItems.length] })] }), searchable && (jsxs("div", { className: theme.searchWrapperStyle, children: [jsx(MagnifyingGlassIcon, { className: cn(searchIconSize, "absolute text-[var(--color-text-placeholder)] pointer-events-none", searchIconPosition) }), jsx("input", { type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search...", className: cn(theme.searchInputStyle, sizeStyles.searchInput), "aria-label": `Search ${title}` })] })), jsxs("div", { className: theme.listStyle, children: [jsx(AnimatePresence, { mode: "popLayout", initial: false, children: filteredItems.map((item) => {
+                                    }, onChange: () => toggleSelectAll(filteredItems, selected, setSelected), disabled: selectableCount === 0, className: cn(checkboxSize, "rounded-[calc(var(--radius-base)*0.5)] border-2 border-[var(--color-border)] accent-[var(--color-primary)] cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"), "aria-label": `Select all ${title}` }), jsx("span", { className: cn(theme.titleStyle, size === "sm" ? "text-sm" : "text-base"), children: title })] }), jsxs("span", { className: cn(theme.countStyle, size === "sm" ? "text-sm" : "text-sm"), children: [selectedCount > 0 ? `${selectedCount}/` : "", listItems.length] })] }), searchable && (jsxs("div", { className: theme.searchWrapperStyle, children: [jsx(MagnifyingGlassIcon, { className: cn(searchIconSize, "absolute text-[var(--color-text-placeholder)] pointer-events-none", searchIconPosition) }), jsx("input", { type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search...", className: cn(theme.searchInputStyle, sizeStyles.searchInput), "aria-label": `Search ${title}` })] })), jsxs("div", { className: theme.listStyle, children: [jsx(AnimatePresence, { mode: "popLayout", initial: false, children: filteredItems.map((item) => {
                                 const isSelected = selected.has(item.id);
                                 const isDisabled = item.disabled === true;
                                 const itemContent = (jsxs(Fragment, { children: [jsx("input", { type: "checkbox", checked: isSelected, onChange: () => toggleSelection(item.id, selected, setSelected), disabled: isDisabled, className: cn(checkboxSize, "rounded-[calc(var(--radius-base)*0.5)] border-2 border-[var(--color-border)] accent-[var(--color-primary)] cursor-pointer flex-shrink-0", isDisabled && "cursor-not-allowed"), tabIndex: -1, "aria-hidden": "true" }), jsx("span", { className: "truncate flex-1", children: renderItem ? renderItem(item) : item.label })] }));
@@ -190,7 +190,7 @@ const TransferList = React__default.forwardRef(({ items, value: controlledValue,
                                     return (jsx(motion.div, { ...itemProps, layout: true, variants: itemVariants, initial: "initial", animate: "animate", exit: "exit", children: itemContent }));
                                 }
                                 return jsx("div", { ...itemProps, children: itemContent });
-                            }) }), filteredItems.length === 0 && (jsx("div", { className: cn("flex items-center justify-center text-[var(--color-text-muted)]", size === "sm" ? "py-4 text-xs" : size === "lg" ? "py-8 text-sm" : "py-6 text-xs"), children: search.trim() ? "No matches found" : "No items" }))] })] }));
+                            }) }), filteredItems.length === 0 && (jsx("div", { className: cn("flex items-center justify-center text-[var(--color-text-muted)]", size === "sm" ? "py-4 text-sm" : size === "lg" ? "py-8 text-base" : "py-6 text-sm"), children: search.trim() ? "No matches found" : "No items" }))] })] }));
     };
     return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...restProps, children: [renderPanel(sourceTitle, sourceItems, filteredSourceItems, sourceSelected, setSourceSelected, sourceSearch, setSourceSearch, sourceAllSelected, sourceIndeterminate, sourceTitle), jsxs("div", { className: theme.actionsStyle, children: [jsx("button", { type: "button", onClick: handleMoveAllToTarget, disabled: sourceItems.filter((i) => !i.disabled).length === 0, className: cn(theme.buttonStyle, sizeStyles.button), "aria-label": "Move all to target", children: jsx(ChevronDoubleRightIcon, { className: iconSize }) }), jsx("button", { type: "button", onClick: handleMoveToTarget, disabled: sourceSelected.size === 0, className: cn(theme.buttonStyle, sizeStyles.button), "aria-label": "Move selected to target", children: jsx(ChevronRightIcon, { className: iconSize }) }), jsx("button", { type: "button", onClick: handleMoveToSource, disabled: targetSelected.size === 0, className: cn(theme.buttonStyle, sizeStyles.button), "aria-label": "Move selected to source", children: jsx(ChevronLeftIcon, { className: iconSize }) }), jsx("button", { type: "button", onClick: handleMoveAllToSource, disabled: targetItems.filter((i) => !i.disabled).length === 0, className: cn(theme.buttonStyle, sizeStyles.button), "aria-label": "Move all to source", children: jsx(ChevronDoubleLeftIcon, { className: iconSize }) })] }), renderPanel(targetTitle, targetItems, filteredTargetItems, targetSelected, setTargetSelected, targetSearch, setTargetSearch, targetAllSelected, targetIndeterminate, targetTitle)] }));
 });

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

@@ -38,21 +38,21 @@ const transferListTheme = {
     sizes: {
         sm: {
             panel: "w-56 h-64",
-            item: "px-2 py-1 text-xs gap-1.5",
+            item: "px-2 py-1 text-sm gap-1.5",
             button: "p-1",
-            searchInput: "px-2 py-1.5 text-xs pl-7",
+            searchInput: "px-2 py-1.5 text-sm pl-7",
         },
         md: {
             panel: "w-72 h-80",
-            item: "px-3 py-1.5 text-sm gap-2",
+            item: "px-3 py-1.5 text-base gap-2",
             button: "p-1.5",
-            searchInput: "px-3 py-2 text-sm pl-8",
+            searchInput: "px-3 py-2 text-base pl-8",
         },
         lg: {
             panel: "w-80 h-96",
-            item: "px-3 py-2 text-base gap-2.5",
+            item: "px-3 py-2 text-lg gap-2.5",
             button: "p-2",
-            searchInput: "px-3 py-2.5 text-base pl-9",
+            searchInput: "px-3 py-2.5 text-lg pl-9",
         },
     },
 };

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

@@ -15,7 +15,7 @@ const formsBaseTheme = {
         "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] " +
         "dark:focus-within:outline-[var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
     // Common base input/control style
-    controlBaseStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] " +
+    controlBaseStyle: "w-full bg-transparent text-base text-[var(--color-text-primary)] " +
         "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
         // Dark mode
         "dark:text-[var(--color-text-primary)] dark:placeholder:text-[var(--color-neutral-500)]",
@@ -23,19 +23,19 @@ const formsBaseTheme = {
     // These tokens can be composed together or used individually for maximum flexibility
     sizes: {
         sm: {
-            text: "text-sm",
+            text: "text-base",
             padding: "py-[var(--form-py-sm)] px-[var(--form-px-sm)]",
             height: "h-[var(--form-min-h-sm)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-sm)*2)]",
         },
         md: {
-            text: "text-sm",
+            text: "text-base",
             padding: "py-[var(--form-py-md)] px-[var(--form-px-md)]",
             height: "h-[var(--form-min-h-md)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-md)*2)]",
         },
         lg: {
-            text: "text-base",
+            text: "text-lg",
             padding: "py-[var(--form-py-lg)] px-[var(--form-px-lg)]",
             height: "h-[var(--form-min-h-lg)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-lg)*2)]",
@@ -72,7 +72,7 @@ const formsBaseTheme = {
         invalid: "",
     },
     // Common helper text style with state variations
-    helperText: "text-xs text-gray-500 mt-1.5 [.state-disabled_&]:text-gray-400 [.state-invalid_&]:text-[var(--color-danger-500)] " +
+    helperText: "text-sm text-gray-500 mt-1.5 [.state-disabled_&]:text-gray-400 [.state-invalid_&]:text-[var(--color-danger-500)] " +
         "dark:text-[var(--color-neutral-400)] dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
     // Common icon styles
     iconStyles: {
@@ -89,7 +89,7 @@ const formsBaseTheme = {
     dropdownStyles: {
         // Container for dropdown panel
         container: "fixed z-[1000] max-h-[var(--select-content-available-height,20rem)] overflow-auto overscroll-contain " +
-            "rounded-[var(--form-radius)] bg-white/90 backdrop-blur-md text-sm border border-[var(--color-border)] " +
+            "rounded-[var(--form-radius)] bg-white/90 backdrop-blur-md text-base border border-[var(--color-border)] " +
             "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none " +
             "dark:bg-[var(--color-neutral-900)]/90 dark:ring-[var(--color-neutral-700)]",
         // Base option style

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

@@ -11,10 +11,10 @@ export { FormLabel } from "./FormLabel";
 export type { FormLabelProps, FormLabelState, FormLabelTheme, } from "./FormLabel";
 export { formLabelTheme } from "./FormLabel";
 export { Radio } from "./Radio";
-export type { RadioProps, RadioSize, RadioState } from "./Radio";
+export type { RadioProps, RadioSize, RadioState, RadioGroupProps, RadioGroupOrientation, } from "./Radio";
 export { radioTheme } from "./Radio";
 export { Checkbox } from "./Checkbox";
-export type { CheckboxProps, CheckboxSize, CheckboxState } from "./Checkbox";
+export type { CheckboxProps, CheckboxSize, CheckboxState, CheckboxGroupProps, CheckboxGroupOrientation, } from "./Checkbox";
 export { checkboxTheme } from "./Checkbox";
 export { Switch } from "./Switch";
 export type { SwitchProps, SwitchThemeOverrides } from "./Switch";

package/dist/components/layout/FormLayout/FormLayout.theme.js

@@ -1,13 +1,13 @@
 const formLayoutTheme = {
     root: "flex flex-col gap-6",
     header: "border-b border-[var(--color-border)] pb-6",
-    headerTitle: "text-base font-semibold text-[var(--color-text-primary)]",
-    headerSubtitle: "text-base text-[var(--color-text-muted)]",
+    headerTitle: "text-lg font-semibold text-[var(--color-text-primary)]",
+    headerSubtitle: "text-lg text-[var(--color-text-muted)]",
     body: "flex flex-col gap-6",
     section: "grid grid-cols-1 md:grid-cols-6 gap-6 md:gap-10",
     sectionSidebar: "col-span-full md:col-span-2",
-    sectionTitle: "text-base font-semibold text-[var(--color-text-primary)]",
-    sectionDescription: "text-sm text-[var(--color-text-muted)] mt-1",
+    sectionTitle: "text-lg font-semibold text-[var(--color-text-primary)]",
+    sectionDescription: "text-base text-[var(--color-text-muted)] mt-1",
     sectionAction: "mt-4",
     sectionContent: "col-span-full md:col-span-4 grid grid-cols-1 sm:grid-cols-2 gap-4",
     footer: "flex flex-col-reverse sm:flex-row sm:justify-between items-center gap-3 border-t border-[var(--color-border)] pt-3",

package/dist/hooks/useSelectPortal.d.ts

@@ -6,6 +6,7 @@ export interface UseSimpleDropdownOptions {
     offset?: number;
     estimatedWidth?: number;
     autoWidth?: boolean;
+    onClose?: () => void;
 }
 export interface SimpleDropdownReturn {
     position: {
@@ -24,5 +25,5 @@ export interface SimpleDropdownReturn {
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
-export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;

package/dist/hooks/useSelectPortal.js

@@ -1,19 +1,11 @@
-import { useRef, useState, useCallback, useLayoutEffect, useMemo } from 'react';
+import { useRef, useState, useCallback, useLayoutEffect } from 'react';
 
-// Simple debounce utility
-const debounce = (func, wait) => {
-    let timeout;
-    return () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(func, wait);
-    };
-};
 /**
  * Fixed dropdown positioning hook
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, }) => {
+const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, onClose, }) => {
     const contentRef = useRef(null);
     const [position, setPosition] = useState({ top: -9999, left: -9999, width: 0 });
     const [cssVariables, setCssVariables] = useState({});
@@ -280,20 +272,53 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
             return;
         calculatePosition();
     }, [isOpen, calculatePosition]);
-    // Debounced position updates for better performance
-    const debouncedCalculatePosition = useMemo(() => debounce(calculatePosition, 16), // ~60fps
-    [calculatePosition]);
-    // Update position on scroll and resize - debounced for performance
+    // rAF-synced scroll handler: skips internal scrolls, detects off-screen trigger
+    const scrollRafRef = useRef(null);
+    const handleScroll = useCallback((e) => {
+        // Skip if scroll originated inside the popover content
+        if (contentRef.current && contentRef.current.contains(e.target)) {
+            return;
+        }
+        // Close if trigger has scrolled off-screen
+        if (triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            const isOffScreen = rect.bottom < 0 || rect.top > window.innerHeight
+                || rect.right < 0 || rect.left > window.innerWidth;
+            if (isOffScreen && onClose) {
+                onClose();
+                return;
+            }
+        }
+        if (scrollRafRef.current)
+            cancelAnimationFrame(scrollRafRef.current);
+        scrollRafRef.current = requestAnimationFrame(() => {
+            scrollRafRef.current = null;
+            calculatePosition();
+        });
+    }, [calculatePosition, onClose, triggerRef]);
+    const handleResize = useCallback(() => {
+        if (scrollRafRef.current)
+            cancelAnimationFrame(scrollRafRef.current);
+        scrollRafRef.current = requestAnimationFrame(() => {
+            scrollRafRef.current = null;
+            calculatePosition();
+        });
+    }, [calculatePosition]);
+    // Update position on scroll and resize - rAF-synced for smooth tracking
     useLayoutEffect(() => {
         if (!isOpen)
             return;
-        window.addEventListener("scroll", debouncedCalculatePosition, { passive: true, capture: true });
-        window.addEventListener("resize", debouncedCalculatePosition, { passive: true });
+        window.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+        window.addEventListener("resize", handleResize, { passive: true });
         return () => {
-            window.removeEventListener("scroll", debouncedCalculatePosition, true);
-            window.removeEventListener("resize", debouncedCalculatePosition);
+            window.removeEventListener("scroll", handleScroll, true);
+            window.removeEventListener("resize", handleResize);
+            if (scrollRafRef.current) {
+                cancelAnimationFrame(scrollRafRef.current);
+                scrollRafRef.current = null;
+            }
         };
-    }, [isOpen, debouncedCalculatePosition]);
+    }, [isOpen, handleScroll, handleResize]);
     // Recalculate when dropdown content resizes (e.g. search filtering)
     useLayoutEffect(() => {
         if (!isOpen)