@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.10

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/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, ...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;

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

@@ -0,0 +1,12 @@
+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;
+}
+
+export { SelectableCardContext, useSelectableCardContext };

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

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

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

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useId, useMemo } 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 autoId = useId();
+    const groupName = name !== null && name !== void 0 ? name : `selectable-card-${autoId}`;
+    const resolvedIndicator = indicator !== null && indicator !== void 0 ? indicator : (type === "single" ? "radio" : "checkbox");
+    const theme = useMemo(() => ({ ...selectableCardTheme, ...customTheme }), [customTheme]);
+    const handleChange = (cardValue) => {
+        if (type === "single") {
+            onChange(cardValue);
+        }
+        else {
+            const current = Array.isArray(value) ? value : [];
+            const next = current.includes(cardValue)
+                ? current.filter((v) => v !== cardValue)
+                : [...current, cardValue];
+            onChange(next);
+        }
+    };
+    const contextValue = useMemo(() => ({
+        type,
+        indicator: resolvedIndicator,
+        value,
+        onChange: handleChange,
+        disabled,
+        name: groupName,
+        theme,
+    }), [type, resolvedIndicator, value, 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";
+
+export { SelectableCardGroup };

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

@@ -0,0 +1,3 @@
+export { SelectableCard } from "./SelectableCard";
+export type { SelectableCardProps, SelectableCardGroupProps, SelectableCardType, SelectableCardIndicator, 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-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.animations.d.ts

@@ -0,0 +1,10 @@
+import { Variants } from "motion/react";
+/**
+ * Get animation variants for items entering/exiting lists.
+ * Items slide and fade in from the transfer direction.
+ */
+export declare const getItemVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+/**
+ * Get staggered list animation variants for initial render
+ */
+export declare const getListVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;

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

@@ -0,0 +1,32 @@
+/**
+ * Get animation variants for items entering/exiting lists.
+ * Items slide and fade in from the transfer direction.
+ */
+const getItemVariants = (shouldReduceMotion) => (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false)
+    ? undefined
+    : {
+        initial: {
+            opacity: 0,
+            x: 0,
+            height: 0,
+        },
+        animate: {
+            opacity: 1,
+            x: 0,
+            height: "auto",
+            transition: {
+                duration: 0.2,
+                ease: "easeOut",
+            },
+        },
+        exit: {
+            opacity: 0,
+            height: 0,
+            transition: {
+                duration: 0.15,
+                ease: "easeIn",
+            },
+        },
+    };
+
+export { getItemVariants };

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { TransferListProps } from "./TransferList.types";
+/**
+ * TransferList is a dual-list picker for moving items between a source
+ * (available) list and a target (selected) list. Commonly used in
+ * admin/permissions interfaces for assigning roles, features, or users.
+ *
+ * Supports controlled (value + onChange) and uncontrolled (defaultValue)
+ * patterns, optional search filtering, multi-select with checkboxes,
+ * custom item renderers, disabled items, and animated transitions.
+ *
+ * @example
+ * ```tsx
+ * <TransferList
+ *   items={[
+ *     { id: '1', label: 'Read' },
+ *     { id: '2', label: 'Write' },
+ *     { id: '3', label: 'Delete' },
+ *   ]}
+ *   value={selectedPermissions}
+ *   onChange={setSelectedPermissions}
+ *   sourceTitle="Available Permissions"
+ *   targetTitle="Assigned Permissions"
+ *   searchable
+ * />
+ * ```
+ */
+export declare const TransferList: React.ForwardRefExoticComponent<TransferListProps & React.RefAttributes<HTMLDivElement>>;