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

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

@@ -4,13 +4,36 @@
 const radioTheme = {
     baseStyle: "relative flex items-start gap-3",
     inputContainerStyle: "relative flex-shrink-0 flex items-center justify-center",
-    inputStyle: "peer appearance-none rounded-full border-2 border-[var(--color-border)] bg-white checked:border-[var(--color-primary)] checked:bg-white disabled:border-[var(--color-border)] disabled:bg-[var(--color-background-disabled)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 transition-all duration-400 data-[state=disabled]:outline-0 data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed",
-    dotStyle: "absolute pointer-events-none rounded-full bg-[var(--color-primary)] opacity-0 transition-all duration-400 peer-data-[state=disabled]:saturate-0 peer-data-[state=disabled]:opacity-80",
-    descriptionStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
+    // Input styles with light and dark mode variants
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-full border-2 transition-all duration-400 " +
+        // Default state - light
+        "border-[var(--color-border)] bg-[var(--color-surface)] " +
+        // Default state - dark
+        "dark:bg-[var(--color-background-secondary)] " +
+        // Checked state - light
+        "checked:border-[var(--color-primary)]  " +
+        // Checked state - dark
+        " " +
+        // Checked outline - light
+        "checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 " +
+        // Checked outline - dark
+        "dark:checked:outline-[var(--color-primary-900)] " +
+        // Focus visible - light
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] " +
+        // Focus visible - dark
+        "dark:focus-visible:outline-[var(--color-primary-500)] " +
+        // Disabled state - light
+        "disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 " +
+        "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
+        // Disabled state - dark
+        "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",
     sizes: {
         sm: "size-5 mt-0.25",
-        md: "size-6"
-    }
+        md: "size-6",
+    },
 };
 
 export { radioTheme };

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

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

@@ -0,0 +1,199 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useState, useMemo, useCallback } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { ChevronDoubleRightIcon, ChevronRightIcon, ChevronLeftIcon, ChevronDoubleLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { transferListTheme } from './TransferList.theme.js';
+import { getItemVariants } from './TransferList.animations.js';
+
+/**
+ * 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
+ * />
+ * ```
+ */
+const TransferList = React__default.forwardRef(({ items, value: controlledValue, defaultValue = [], onChange, sourceTitle = "Available", targetTitle = "Selected", searchable = false, size = "md", renderItem, className, ...restProps }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    const itemVariants = getItemVariants(shouldReduceMotion);
+    // Controlled vs uncontrolled state for target IDs
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const targetIds = isControlled ? controlledValue : internalValue;
+    // Selection state for checkboxes in each list
+    const [sourceSelected, setSourceSelected] = useState(new Set());
+    const [targetSelected, setTargetSelected] = useState(new Set());
+    // Search/filter state
+    const [sourceSearch, setSourceSearch] = useState("");
+    const [targetSearch, setTargetSearch] = useState("");
+    const theme = transferListTheme;
+    const sizeStyles = theme.sizes[size];
+    // Build a lookup map for items by ID
+    const itemMap = useMemo(() => {
+        const map = new Map();
+        for (const item of items) {
+            map.set(item.id, item);
+        }
+        return map;
+    }, [items]);
+    // Derive target IDs set for fast lookup
+    const targetIdSet = useMemo(() => new Set(targetIds), [targetIds]);
+    // Split items into source and target lists
+    const sourceItems = useMemo(() => items.filter((item) => !targetIdSet.has(item.id)), [items, targetIdSet]);
+    const targetItems = useMemo(() => targetIds
+        .map((id) => itemMap.get(id))
+        .filter((item) => item !== undefined), [targetIds, itemMap]);
+    // Filter items by search query
+    const filteredSourceItems = useMemo(() => {
+        if (!sourceSearch.trim())
+            return sourceItems;
+        const query = sourceSearch.toLowerCase();
+        return sourceItems.filter((item) => item.label.toLowerCase().includes(query));
+    }, [sourceItems, sourceSearch]);
+    const filteredTargetItems = useMemo(() => {
+        if (!targetSearch.trim())
+            return targetItems;
+        const query = targetSearch.toLowerCase();
+        return targetItems.filter((item) => item.label.toLowerCase().includes(query));
+    }, [targetItems, targetSearch]);
+    // Update the target list value
+    const updateValue = useCallback((newTargetIds) => {
+        if (!isControlled) {
+            setInternalValue(newTargetIds);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newTargetIds);
+    }, [isControlled, onChange]);
+    // Transfer selected source items to target
+    const handleMoveToTarget = useCallback(() => {
+        const idsToMove = Array.from(sourceSelected).filter((id) => {
+            const item = itemMap.get(id);
+            return item && !item.disabled;
+        });
+        if (idsToMove.length === 0)
+            return;
+        const newTargetIds = [...targetIds, ...idsToMove];
+        updateValue(newTargetIds);
+        setSourceSelected(new Set());
+    }, [sourceSelected, targetIds, updateValue, itemMap]);
+    // Transfer selected target items back to source
+    const handleMoveToSource = useCallback(() => {
+        const idsToMove = new Set(Array.from(targetSelected).filter((id) => {
+            const item = itemMap.get(id);
+            return item && !item.disabled;
+        }));
+        if (idsToMove.size === 0)
+            return;
+        const newTargetIds = targetIds.filter((id) => !idsToMove.has(id));
+        updateValue(newTargetIds);
+        setTargetSelected(new Set());
+    }, [targetSelected, targetIds, updateValue, itemMap]);
+    // Move all non-disabled source items to target
+    const handleMoveAllToTarget = useCallback(() => {
+        const nonDisabledSourceIds = sourceItems
+            .filter((item) => !item.disabled)
+            .map((item) => item.id);
+        if (nonDisabledSourceIds.length === 0)
+            return;
+        const newTargetIds = [...targetIds, ...nonDisabledSourceIds];
+        updateValue(newTargetIds);
+        setSourceSelected(new Set());
+    }, [sourceItems, targetIds, updateValue]);
+    // Move all non-disabled target items back to source
+    const handleMoveAllToSource = useCallback(() => {
+        const disabledTargetIds = targetItems
+            .filter((item) => item.disabled)
+            .map((item) => item.id);
+        updateValue(disabledTargetIds);
+        setTargetSelected(new Set());
+    }, [targetItems, updateValue]);
+    // Toggle an individual item's selection
+    const toggleSelection = useCallback((id, selected, setSelected) => {
+        const item = itemMap.get(id);
+        if (item === null || item === void 0 ? void 0 : item.disabled)
+            return;
+        const next = new Set(selected);
+        if (next.has(id)) {
+            next.delete(id);
+        }
+        else {
+            next.add(id);
+        }
+        setSelected(next);
+    }, [itemMap]);
+    // Toggle select-all for a given list
+    const toggleSelectAll = useCallback((listItems, selected, setSelected) => {
+        const selectableItems = listItems.filter((item) => !item.disabled);
+        const allSelected = selectableItems.every((item) => selected.has(item.id));
+        if (allSelected) {
+            setSelected(new Set());
+        }
+        else {
+            setSelected(new Set(selectableItems.map((item) => item.id)));
+        }
+    }, []);
+    // Compute select-all checkbox states
+    const sourceSelectableItems = filteredSourceItems.filter((i) => !i.disabled);
+    const targetSelectableItems = filteredTargetItems.filter((i) => !i.disabled);
+    const sourceAllSelected = sourceSelectableItems.length > 0 &&
+        sourceSelectableItems.every((item) => sourceSelected.has(item.id));
+    const sourceIndeterminate = !sourceAllSelected &&
+        sourceSelectableItems.some((item) => sourceSelected.has(item.id));
+    const targetAllSelected = targetSelectableItems.length > 0 &&
+        targetSelectableItems.every((item) => targetSelected.has(item.id));
+    const targetIndeterminate = !targetAllSelected &&
+        targetSelectableItems.some((item) => targetSelected.has(item.id));
+    // Icon size classes per size variant
+    const iconSize = size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-5 h-5" : "w-4 h-4";
+    const searchIconSize = size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-5 h-5" : "w-4 h-4";
+    const searchIconPosition = size === "sm" ? "left-2" : size === "lg" ? "left-3" : "left-2.5";
+    // Checkbox size
+    const checkboxSize = size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-5 h-5" : "w-4 h-4";
+    // Render a single list panel
+    const renderPanel = (title, listItems, filteredItems, selected, setSelected, search, setSearch, allSelected, indeterminate, panelAriaLabel) => {
+        const selectableCount = filteredItems.filter((i) => !i.disabled).length;
+        const selectedCount = Array.from(selected).filter((id) => filteredItems.some((item) => item.id === id)).length;
+        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) => {
+                                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 })] }));
+                                const itemProps = {
+                                    key: item.id,
+                                    role: "option",
+                                    "aria-selected": isSelected,
+                                    "aria-disabled": isDisabled,
+                                    "data-selected": isSelected ? "true" : "false",
+                                    onClick: () => toggleSelection(item.id, selected, setSelected),
+                                    className: cn(theme.itemStyle, sizeStyles.item, isDisabled && theme.itemDisabledStyle),
+                                };
+                                if (itemVariants) {
+                                    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" }))] })] }));
+    };
+    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)] }));
+});
+TransferList.displayName = "TransferList";
+
+export { TransferList };

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

@@ -0,0 +1,6 @@
+import { TransferListTheme } from "./TransferList.types";
+/**
+ * Default theme configuration for the TransferList component.
+ * Uses CSS variables from global.scss for consistent theming.
+ */
+export declare const transferListTheme: TransferListTheme;

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

@@ -0,0 +1,60 @@
+/**
+ * Default theme configuration for the TransferList component.
+ * Uses CSS variables from global.scss for consistent theming.
+ */
+const transferListTheme = {
+    // Root container - horizontal layout with centered actions
+    baseStyle: "flex items-stretch gap-0",
+    // Individual list panel
+    panelStyle: "flex flex-col border border-[var(--color-border)] rounded-[var(--form-radius)] bg-[var(--color-surface)] overflow-hidden",
+    // Panel header with title and count
+    headerStyle: "flex items-center justify-between px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]",
+    // Title text
+    titleStyle: "font-medium text-[var(--color-text-primary)]",
+    // Item count badge
+    countStyle: "text-[var(--color-text-muted)] tabular-nums",
+    // Search input wrapper
+    searchWrapperStyle: "relative flex items-center border-b border-[var(--color-border)]",
+    // Search input
+    searchInputStyle: "w-full bg-transparent text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] focus:outline-none",
+    // Scrollable list container
+    listStyle: "flex-1 overflow-y-auto",
+    // Individual item row
+    itemStyle: "flex items-center gap-2 cursor-pointer transition-colors duration-150 " +
+        "hover:bg-[var(--color-background-secondary)] " +
+        "data-[selected=true]:bg-[var(--color-primary-50)]",
+    // Disabled item overlay
+    itemDisabledStyle: "opacity-50 cursor-not-allowed hover:bg-transparent",
+    // Actions column with transfer buttons
+    actionsStyle: "flex flex-col items-center justify-center gap-1 px-2",
+    // Transfer button
+    buttonStyle: "inline-flex items-center justify-center rounded-[var(--form-radius)] border border-[var(--color-border)] " +
+        "bg-[var(--color-surface)] text-[var(--color-text-secondary)] " +
+        "transition-all duration-150 " +
+        "hover:bg-[var(--color-background-secondary)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-secondary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-1 " +
+        "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-[var(--color-surface)] disabled:hover:text-[var(--color-text-secondary)] disabled:hover:border-[var(--color-border)]",
+    // Size variants
+    sizes: {
+        sm: {
+            panel: "w-56 h-64",
+            item: "px-2 py-1 text-xs gap-1.5",
+            button: "p-1",
+            searchInput: "px-2 py-1.5 text-xs pl-7",
+        },
+        md: {
+            panel: "w-72 h-80",
+            item: "px-3 py-1.5 text-sm gap-2",
+            button: "p-1.5",
+            searchInput: "px-3 py-2 text-sm pl-8",
+        },
+        lg: {
+            panel: "w-80 h-96",
+            item: "px-3 py-2 text-base gap-2.5",
+            button: "p-2",
+            searchInput: "px-3 py-2.5 text-base pl-9",
+        },
+    },
+};
+
+export { transferListTheme };