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

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

@@ -61,6 +61,8 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     passwordStrengthIndicator?: PasswordStrengthIndicator;
     /** Number of decimal places for currency inputs (default: 2). Only applies when type="currency" */
     currencyDecimalPlaces?: number;
+    /** Whether to show the automatic type-based icon (lock for password, magnifier for search). Default: true */
+    showTypeIcon?: boolean;
     /**
      * Force dark mode styling for the component. Use when placing the component
      * on a dark background while the page is in light mode.

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-base font-medium text-[var(--color-text-primary)] tabular-nums select-none",
+    numberStyle: "min-w-fit text-center text-sm 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-xl text-[var(--color-text-primary)] h-full !p-0',
+    inputStyle: 'text-center text-lg text-[var(--color-text-primary)] h-full !p-0',
     // 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/Mention/Mention.theme.js

@@ -37,13 +37,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-sm font-medium " +
+    suggestionAvatarFallbackStyle: "size-7 rounded-full shrink-0 flex items-center justify-center text-xs 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-base font-medium truncate",
+    suggestionLabelStyle: "text-sm font-medium truncate",
     // Suggestion description text
-    suggestionDescriptionStyle: "text-sm text-[var(--color-text-muted)] truncate " +
+    suggestionDescriptionStyle: "text-xs text-[var(--color-text-muted)] truncate " +
         "dark:text-[var(--color-neutral-500)]",
     // Empty state
     emptyMessageStyle: formsBaseTheme.dropdownStyles.emptyMessage,

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

@@ -29,7 +29,7 @@ const radioTheme = {
         sm: "size-2.5 mt-0.25",
         md: "size-3",
     },
-    descriptionStyle: "text-base text-[var(--color-text-secondary)]/80 mt-0.5",
+    descriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 mt-0",
     sizes: {
         sm: "size-5 mt-0.5",
         md: "size-6",
@@ -37,8 +37,8 @@ const radioTheme = {
     // 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",
+    groupDescriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
+    groupErrorStyle: "text-sm text-[var(--color-danger)] mt-1.5",
     groupItemsStyle: "flex flex-col gap-3",
 };
 

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-[var(--color-border)] focus:outline-none",
     // Dropdown item styling
-    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",
+    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",
     // 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-sm font-medium " +
+    chipOverflowStyle: "inline-flex items-center shrink-0 whitespace-nowrap px-1.5 py-0.5 text-xs font-medium " +
         "text-[var(--color-text-muted)]",
 };
 

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

@@ -1,53 +1,68 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } 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 { Radio } from '../Radio/Radio.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { useOptionalSelectableCardContext } from './SelectableCardContext.js';
+import { selectableCardTheme } from './SelectableCard.theme.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 SelectableCardRoot = React__default.forwardRef(({ value, disabled: cardDisabled, checked: standaloneChecked, onChange: standaloneOnChange, indicator: standaloneIndicator, indicatorPosition: cardIndicatorPosition, size: cardSize, className, children, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
+    var _a;
+    const ctx = useOptionalSelectableCardContext();
+    const isStandalone = ctx === undefined;
     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 theme = isStandalone ? selectableCardTheme : ctx.theme;
+    const isDisabled = cardDisabled || (!isStandalone && ctx.disabled);
+    const isSelected = isStandalone
+        ? (standaloneChecked !== null && standaloneChecked !== void 0 ? standaloneChecked : false)
+        : ctx.type === "single"
+            ? ctx.value === value
+            : Array.isArray(ctx.value) && ctx.value.includes(value);
+    const resolvedIndicator = isStandalone
+        ? (standaloneIndicator !== null && standaloneIndicator !== void 0 ? standaloneIndicator : "radio")
+        : ctx.indicator;
+    const resolvedIndicatorPosition = cardIndicatorPosition !== null && cardIndicatorPosition !== void 0 ? cardIndicatorPosition : (isStandalone ? "end" : ctx.indicatorPosition);
+    const resolvedSize = cardSize !== null && cardSize !== void 0 ? cardSize : (isStandalone ? "md" : ctx.size);
+    const indicatorSize = "sm";
     const handleClick = () => {
         if (isDisabled)
             return;
-        ctx.onChange(value);
+        if (isStandalone) {
+            standaloneOnChange === null || standaloneOnChange === void 0 ? void 0 : standaloneOnChange(!isSelected, value);
+        }
+        else {
+            ctx.onChange(value);
+        }
     };
     const handleKeyDown = (e) => {
         if (isDisabled)
             return;
         if (e.key === " " || e.key === "Enter") {
             e.preventDefault();
-            ctx.onChange(value);
+            handleClick();
         }
     };
-    const inputType = ctx.type === "single" ? "radio" : "checkbox";
+    const inputType = isStandalone
+        ? "checkbox"
+        : ctx.type === "single"
+            ? "radio"
+            : "checkbox";
+    const role = isStandalone
+        ? "checkbox"
+        : ctx.type === "single"
+            ? "radio"
+            : "checkbox";
     const animated = !shouldReduceMotion && !isDisabled;
     const motionProps = animated
-        ? {
-            variants: cardVariants,
-            initial: "idle",
-            whileTap: "tap",
-        }
+        ? { 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 })) }))] }));
+    const indicatorNode = resolvedIndicator !== "none" && (jsx("div", { className: cn(theme.indicator, "pointer-events-none"), "aria-hidden": "true", children: resolvedIndicator === "radio" ? (jsx(Radio, { value: value, checked: isSelected, onChange: () => { }, state: isDisabled ? "disabled" : "default", size: indicatorSize })) : (jsx(Checkbox, { value: value, checked: isSelected, onChange: () => { }, state: isDisabled ? "disabled" : "default", size: indicatorSize })) }));
+    return (jsxs(motion.div, { ref: ref, role: role, "aria-checked": isSelected, "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : 0, "data-selected": isSelected, "data-disabled": isDisabled || undefined, className: cn(theme.card, (_a = theme.cardSizes) === null || _a === void 0 ? void 0 : _a[resolvedSize], isSelected && theme.selectedCard, isDisabled && theme.disabledCard, className), onClick: handleClick, onKeyDown: handleKeyDown, ...motionProps, ...props, children: [jsx("input", { type: inputType, id: inputId, name: isStandalone ? undefined : ctx === null || ctx === void 0 ? void 0 : ctx.name, value: value, checked: isSelected, disabled: isDisabled, onChange: () => { }, className: "sr-only", tabIndex: -1, "aria-hidden": true }), resolvedIndicatorPosition === "start" && indicatorNode, jsx("div", { className: theme.contentWrapper, children: children }), resolvedIndicatorPosition === "end" && indicatorNode] }));
 });
 SelectableCardRoot.displayName = "SelectableCard";
 // ─── Compound Export ─────────────────────────────────────────────────────────

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

@@ -1,38 +1,28 @@
 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
+    // Base layout — no justify-between; indicator position handled by render order
+    "relative flex items-start gap-3 rounded-[var(--radius-base)] cursor-pointer transition-[border-color,background-color,box-shadow,outline] duration-200 " +
+        // Default state
         "border border-[var(--color-border)] bg-[var(--color-surface)] " +
-        // Default state - dark
         "dark:bg-[var(--color-background)] " +
-        // Hover state - light
+        // Hover
         "hover:border-[var(--color-border-secondary)] " +
-        // Hover state - dark
-        "  " +
-        // Focus visible - light
+        // Focus visible
         "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
+    selectedCard: "border-[var(--color-primary)] ring-2 ring-[var(--color-primary)]/10 " +
+        "dark:border-[var(--color-primary)] dark:ring-[var(--color-primary)]/20 " +
         "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",
+        "dark:hover:border-[var(--color-primary)]",
+    disabledCard: "opacity-50 cursor-not-allowed pointer-events-none",
     contentWrapper: "flex-1 min-w-0",
-    indicator: "flex-shrink-0",
+    indicator: "flex-shrink-0 -mt-0.5",
+    cardSizes: {
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-5",
+    },
 };
 
 export { selectableCardTheme };

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

@@ -1,6 +1,8 @@
 import React from "react";
 export type SelectableCardType = "single" | "multiple";
 export type SelectableCardIndicator = "radio" | "checkbox" | "none";
+export type SelectableCardIndicatorPosition = "start" | "end";
+export type SelectableCardSize = "sm" | "md" | "lg";
 export interface SelectableCardTheme {
     group?: string;
     card?: string;
@@ -8,10 +10,13 @@ export interface SelectableCardTheme {
     disabledCard?: string;
     contentWrapper?: string;
     indicator?: string;
+    cardSizes?: Record<SelectableCardSize, string>;
 }
 export interface SelectableCardContextValue {
     type: SelectableCardType;
     indicator: SelectableCardIndicator;
+    indicatorPosition: SelectableCardIndicatorPosition;
+    size: SelectableCardSize;
     value: string | string[];
     onChange: (cardValue: string) => void;
     disabled: boolean;
@@ -20,14 +25,22 @@ export interface SelectableCardContextValue {
 }
 export interface SelectableCardGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     type?: SelectableCardType;
-    value: string | string[];
-    onChange: (value: string | string[]) => void;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[]) => void;
     indicator?: SelectableCardIndicator;
+    indicatorPosition?: SelectableCardIndicatorPosition;
+    size?: SelectableCardSize;
     disabled?: boolean;
     name?: string;
     theme?: Partial<SelectableCardTheme>;
 }
-export interface SelectableCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "value"> {
+export interface SelectableCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "onChange"> {
     value: string;
     disabled?: boolean;
+    checked?: boolean;
+    onChange?: (checked: boolean, value: string) => void;
+    indicator?: SelectableCardIndicator;
+    indicatorPosition?: SelectableCardIndicatorPosition;
+    size?: SelectableCardSize;
 }

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

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

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

@@ -1,12 +1,9 @@
 import { createContext, useContext } from 'react';
 
 const SelectableCardContext = createContext(undefined);
-function useSelectableCardContext() {
-    const context = useContext(SelectableCardContext);
-    if (!context) {
-        throw new Error("SelectableCard must be used within a SelectableCard.Group");
-    }
-    return context;
+// Used by SelectableCard itself — returns undefined when used standalone
+function useOptionalSelectableCardContext() {
+    return useContext(SelectableCardContext);
 }
 
-export { SelectableCardContext, useSelectableCardContext };
+export { SelectableCardContext, useOptionalSelectableCardContext };

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

@@ -1,35 +1,56 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useId, useMemo } from 'react';
+import React__default, { useId, useState, useMemo, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { selectableCardTheme } from './SelectableCard.theme.js';
 import { SelectableCardContext } from './SelectableCardContext.js';
 
-const SelectableCardGroup = React__default.forwardRef(({ type = "single", value, onChange, indicator, disabled = false, name, className, theme: customTheme, children, ...props }, ref) => {
+const SelectableCardGroup = React__default.forwardRef(({ type = "single", value, defaultValue, onChange, indicator, indicatorPosition = "end", size = "md", disabled = false, name, className, theme: customTheme, children, ...props }, ref) => {
     const autoId = useId();
     const groupName = name !== null && name !== void 0 ? name : `selectable-card-${autoId}`;
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(() => {
+        if (defaultValue !== undefined) {
+            if (process.env.NODE_ENV !== "production") {
+                if (type === "single" && Array.isArray(defaultValue)) {
+                    console.warn("[SelectableCard.Group]: defaultValue is an array but type is 'single'. Use a string.");
+                }
+                if (type === "multiple" && typeof defaultValue === "string") {
+                    console.warn("[SelectableCard.Group]: defaultValue is a string but type is 'multiple'. Use an array.");
+                }
+            }
+            return defaultValue;
+        }
+        return type === "single" ? "" : [];
+    });
+    const resolvedValue = value !== undefined ? value : internalValue;
     const resolvedIndicator = indicator !== null && indicator !== void 0 ? indicator : (type === "single" ? "radio" : "checkbox");
     const theme = useMemo(() => ({ ...selectableCardTheme, ...customTheme }), [customTheme]);
-    const handleChange = (cardValue) => {
+    const handleChange = useCallback((cardValue) => {
+        let next;
         if (type === "single") {
-            onChange(cardValue);
+            next = cardValue;
         }
         else {
-            const current = Array.isArray(value) ? value : [];
-            const next = current.includes(cardValue)
+            const current = Array.isArray(resolvedValue) ? resolvedValue : [];
+            next = current.includes(cardValue)
                 ? current.filter((v) => v !== cardValue)
                 : [...current, cardValue];
-            onChange(next);
         }
-    };
+        if (!isControlled)
+            setInternalValue(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [type, resolvedValue, isControlled, onChange]);
     const contextValue = useMemo(() => ({
         type,
         indicator: resolvedIndicator,
-        value,
+        indicatorPosition,
+        size,
+        value: resolvedValue,
         onChange: handleChange,
         disabled,
         name: groupName,
         theme,
-    }), [type, resolvedIndicator, value, disabled, groupName, theme]);
+    }), [type, resolvedIndicator, indicatorPosition, size, resolvedValue, handleChange, disabled, groupName, theme]);
     return (jsx(SelectableCardContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, role: type === "single" ? "radiogroup" : "group", className: cn(theme.group, className), ...props, children: children }) }));
 });
 SelectableCardGroup.displayName = "SelectableCard.Group";

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

@@ -1,3 +1,3 @@
 export { SelectableCard } from "./SelectableCard";
-export type { SelectableCardProps, SelectableCardGroupProps, SelectableCardType, SelectableCardIndicator, SelectableCardTheme, } from "./SelectableCard.types";
+export type { SelectableCardProps, SelectableCardGroupProps, SelectableCardType, SelectableCardIndicator, SelectableCardIndicatorPosition, SelectableCardSize, SelectableCardTheme, } from "./SelectableCard.types";
 export { selectableCardTheme } from "./SelectableCard.theme";

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-base",
+    placeholderStyle: "absolute inset-0 flex items-center justify-center pointer-events-none text-[var(--color-text-placeholder)] text-sm",
     // 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-base font-medium text-[var(--color-text-primary)] mb-2",
+    labelStyle: "block text-sm 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-7 rounded-full bg-transparent overflow-hidden cursor-grab active:cursor-grabbing active:scale-x-110 active:scale-y-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 data-[disabled]:cursor-not-allowed data-[disabled]:hover:scale-100 data-[invalid]:focus-visible:ring-[var(--color-danger)]",
     // Value display
-    valueDisplayStyle: "text-base font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
+    valueDisplayStyle: "text-sm font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
     // Min/max labels
-    minMaxLabelStyle: "text-base font-medium text-[var(--color-text-muted)]",
+    minMaxLabelStyle: "text-sm font-medium text-[var(--color-text-muted)]",
     // Tick marks
     tickStyle: "absolute w-0.5 h-2 bg-[var(--color-border)] -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 cursor-pointer shadow-inner bg-[var(--color-background-tertiary)] 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)] outline outline-[var(--color-border)] transition-colors duration-300",
     thumb: "w-7 h-5 rounded-full bg-transparent overflow-hidden border border-[var(--color-border)]/40 shadow-lg",
-    description: "text-base text-[var(--color-text-muted)] -mt-1.5",
+    description: "text-sm 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-sm font-semibold text-[var(--color-text-muted)] uppercase",
+    wheelHeaderStyle: "text-center py-2 text-xs 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-sm font-semibold rounded " +
+    periodToggleStyle: "px-1.5 py-0.5 text-xs 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/TimePicker/TimePickerContent.js

@@ -6,8 +6,93 @@ import { cn } from '../../../utils/cn.js';
 import { TimePickerContext } from './TimePicker.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
-import { useIsClient } from '../../../hooks/useIsClient.js';
+import '../../core/Accordion/Accordion.js';
+import '../../core/AlertDialog/AlertDialog.js';
+import '../../core/AspectRatio/AspectRatio.js';
+import '../../core/Avatar/Avatar.js';
+import '../../core/AvatarGroup/AvatarGroup.js';
+import '../../core/Badge/Badge.js';
+import '../../core/Breadcrumbs/Breadcrumbs.js';
+import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
 import { Button } from '../../core/Button/Button.js';
+import '../../core/ButtonGroup/ButtonGroup.js';
+import '../../core/ButtonGroup/ButtonGroupSeparator.js';
+import '../../core/ButtonGroup/ButtonGroupText.js';
+import '../../core/Calendar/Calendar.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import '../../core/Card/Card.js';
+import '../../core/CardStack/CardStack.js';
+import '../../core/Carousel/Carousel.js';
+import '../../core/Carousel/CarouselBody.js';
+import '../../core/CommandPalette/CommandPalette.js';
+import '../../core/Separator/Separator.js';
+import '../../core/Drawer/Drawer.js';
+import '../../core/Drawer/DrawerBody.js';
+import '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+import '../../core/Dropdown/DropdownSection.js';
+import '../../core/Dropdown/DropdownSeparator.js';
+import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/Kbd/Kbd.js';
+import '../../core/MenuItem/MenuItem.js';
+import '../../core/Link/Link.js';
+import '../../core/Modal/Modal.js';
+import '../../core/ModalStack/ModalStack.js';
+import '../../core/PageHeading/PageHeading.js';
+import '../../core/Pagination/Pagination.js';
+import '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/Popover/PopoverBody.js';
+import '../../core/Progress/Progress.js';
+import '../../core/Rating/Rating.js';
+import '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import '../../core/Segmented/Segmented.js';
+import '../../core/Skeleton/Skeleton.js';
+import '../../core/SlidingNumber/SlidingNumber.js';
+import '../../core/Tabs/Tabs.js';
+import '../../core/Tabs/TabsList.js';
+import '../../core/Tabs/TabsTrigger.js';
+import '../../core/Tabs/TabsBody.js';
+import '../../core/Tabs/TabsContext.js';
+import '../../core/Tooltip/Tooltip.js';
+import '../../core/Tooltip/Tooltip.animations.js';
+import '../../core/Tree/Tree.js';
+import '../../core/Tag/Tag.js';
+import '../../core/Alert/Alert.js';
+import '../../core/Toast/Toast.js';
+import '../../core/Toast/ToastProvider.js';
+import '@heroicons/react/24/solid';
+import '../../core/Spinner/Spinner.js';
+import '../../core/Message/Message.js';
+import '../../core/Message/TypeWriter.js';
+import '../../core/Message/MessageBody.js';
+import '@heroicons/react/16/solid';
+import '@heroicons/react/24/outline';
+import '../../core/Empty/Empty.js';
+import '../../core/Masonry/Masonry.js';
+import '../../core/DragDrop/DragDrop.js';
+import '../../core/Sortable/Sortable.js';
+import '../../core/NavItem/NavItem.js';
+import '../../core/Sidebar/Sidebar.js';
+import '../../core/Sidebar/SidebarHeader.js';
+import '../../core/Sidebar/SidebarContent.js';
+import '../../core/Sidebar/SidebarFooter.js';
+import '../../core/Sidebar/SidebarNav.js';
+import '../../core/Sidebar/SidebarNavGroup.js';
+import '../../core/Sidebar/SidebarToggle.js';
+import '../../core/Sidebar/SidebarMobileTrigger.js';
+import '../../core/Sidebar/SidebarUserProfile.js';
+import '../../core/Sidebar/SidebarLogo.js';
+import '../../core/Sidebar/SidebarContext.js';
+import '../../core/OfflineIndicator/OfflineIndicator.js';
+import '../../core/ContextMenu/ContextMenu.js';
+import '../../core/ContextMenu/ContextMenu.theme.js';
+import '../../core/Pill/Pill.js';
+import '../../core/Icon/Icon.js';
+import { useIsClient } from '../../../hooks/useIsClient.js';
 
 /**
  * Hook to detect dark mode state from document

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-base text-[var(--color-text-primary)] " +
+    controlBaseStyle: "w-full bg-transparent text-sm 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-base",
+            text: "text-sm",
             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-base",
+            text: "text-sm",
             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-lg",
+            text: "text-base",
             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-sm text-[var(--color-text-muted)] mt-1.5 [.state-disabled_&]:text-[var(--color-text-disabled)] [.state-invalid_&]:text-[var(--color-danger-500)] " +
+    helperText: "text-xs text-[var(--color-text-muted)] mt-1.5 [.state-disabled_&]:text-[var(--color-text-disabled)] [.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-base border border-[var(--color-border)] " +
+            "rounded-[var(--form-radius)] bg-white/90 backdrop-blur-md text-sm 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