@flikk/ui 1.0.0-beta.15 → 1.0.0-beta.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.17",
   "description": "A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete className override support.",
   "type": "module",
   "main": "dist/index.js",
@@ -56,7 +56,8 @@
     },
     "./tailwind.preset.cjs": "./tailwind.preset.cjs",
     "./shadcn-compat.css": "./src/shadcn-compat.css",
-    "./theme.css": "./src/theme-plugin.css"
+    "./theme.css": "./src/theme-plugin.css",
+    "./bg/*": "./dist/bg/*"
   },
   "files": [
     "dist",
@@ -69,7 +70,8 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c && npm run build:css",
+    "build": "rollup -c && npm run build:css && npm run build:assets",
+    "build:assets": "cp -r public/bg dist/bg",
     "build:css": "tailwindcss -m -i ./src/tailwind-config.css -o ./dist/styles.css",
     "analyze": "ANALYZE=true rollup -c && open stats.html",
     "watch": "rollup -c -w",

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.animations.d.ts

@@ -1,10 +0,0 @@
-import { Variants } from "motion/react";
-/**
- * Staggered bounce animation for dots
- * Each dot animates with a slight delay creating a wave effect
- */
-export declare const dotVariants: Variants;
-/**
- * Container fade in/out animation
- */
-export declare const containerVariants: Variants;

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.animations.js

@@ -1,47 +0,0 @@
-/**
- * Staggered bounce animation for dots
- * Each dot animates with a slight delay creating a wave effect
- */
-const dotVariants = {
-    initial: {
-        y: 0,
-        opacity: 0.5,
-    },
-    animate: (index) => ({
-        y: [0, -2, 0],
-        opacity: [0.5, 1, 0.5],
-        transition: {
-            duration: 0.6,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: index * 0.15,
-        },
-    }),
-};
-/**
- * Container fade in/out animation
- */
-const containerVariants = {
-    hidden: {
-        opacity: 0,
-        scale: 0.95,
-    },
-    visible: {
-        opacity: 1,
-        scale: 1,
-        transition: {
-            duration: 0.2,
-            ease: "easeOut",
-        },
-    },
-    exit: {
-        opacity: 0,
-        scale: 0.95,
-        transition: {
-            duration: 0.15,
-            ease: "easeIn",
-        },
-    },
-};
-
-export { containerVariants, dotVariants };

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-import { ThinkingIndicatorProps } from "./ThinkingIndicator.types";
-/**
- * ThinkingIndicator - Animated "AI is thinking..." state indicator
- *
- * Shows a 3-dot pulse animation to indicate the AI is processing.
- * Respects prefers-reduced-motion for accessibility.
- *
- * @example
- * ```tsx
- * <ThinkingIndicator visible={isLoading} />
- *
- * <ThinkingIndicator
- *   visible={isLoading}
- *   label="Claude is thinking"
- *   size="lg"
- * />
- * ```
- */
-export declare const ThinkingIndicator: React.ForwardRefExoticComponent<ThinkingIndicatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.js

@@ -1,44 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default from 'react';
-import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
-import { thinkingIndicatorTheme } from './ThinkingIndicator.theme.js';
-import { containerVariants, dotVariants } from './ThinkingIndicator.animations.js';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * ThinkingIndicator - Animated "AI is thinking..." state indicator
- *
- * Shows a 3-dot pulse animation to indicate the AI is processing.
- * Respects prefers-reduced-motion for accessibility.
- *
- * @example
- * ```tsx
- * <ThinkingIndicator visible={isLoading} />
- *
- * <ThinkingIndicator
- *   visible={isLoading}
- *   label="Claude is thinking"
- *   size="lg"
- * />
- * ```
- */
-const ThinkingIndicator = React__default.forwardRef(({ visible = true, label = "AI is thinking", showLabel = true, size = "md", icon, className, theme: customTheme = {}, ...props }, ref) => {
-    var _a;
-    const shouldReduceMotion = useReducedMotion();
-    // Merge theme
-    const sizeConfig = {
-        ...thinkingIndicatorTheme.sizes[size],
-        ...(_a = customTheme.sizes) === null || _a === void 0 ? void 0 : _a[size],
-    };
-    const baseStyle = customTheme.baseStyle || thinkingIndicatorTheme.baseStyle;
-    const labelStyle = customTheme.labelStyle || thinkingIndicatorTheme.labelStyle;
-    const dotsContainerStyle = customTheme.dotsContainerStyle ||
-        thinkingIndicatorTheme.dotsContainerStyle;
-    const dotStyle = customTheme.dotStyle || thinkingIndicatorTheme.dotStyle;
-    // Extract conflicting DOM props for motion.div compatibility
-    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
-    return (jsx(AnimatePresence, { mode: "wait", children: visible && (jsxs(motion.div, { ref: ref, className: cn(baseStyle, sizeConfig.container, className), variants: shouldReduceMotion ? undefined : containerVariants, initial: shouldReduceMotion ? { opacity: 0 } : "hidden", animate: shouldReduceMotion ? { opacity: 1 } : "visible", exit: shouldReduceMotion ? { opacity: 0 } : "exit", ...motionSafeProps, children: [icon ? (jsx("span", { className: dotsContainerStyle, children: icon })) : (jsx("span", { className: dotsContainerStyle, children: [0, 1, 2].map((index) => (jsx(motion.span, { className: cn(dotStyle, sizeConfig.dot), variants: shouldReduceMotion ? undefined : dotVariants, initial: "initial", animate: "animate", custom: index, style: shouldReduceMotion ? { opacity: 0.7 } : undefined }, index))) })), showLabel && (jsx("span", { className: cn(labelStyle, sizeConfig.label), children: label }))] })) }));
-});
-ThinkingIndicator.displayName = "ThinkingIndicator";
-
-export { ThinkingIndicator };

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.theme.d.ts

@@ -1,2 +0,0 @@
-import { ThinkingIndicatorTheme } from "./ThinkingIndicator.types";
-export declare const thinkingIndicatorTheme: ThinkingIndicatorTheme;

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.theme.js

@@ -1,20 +0,0 @@
-const thinkingIndicatorTheme = {
-    baseStyle: "inline-flex items-center gap-2",
-    labelStyle: "text-[var(--color-text-muted)] font-medium",
-    dotsContainerStyle: "inline-flex items-center gap-1",
-    dotStyle: "rounded-full bg-[var(--color-text-muted)]",
-    sizes: {
-        sm: {
-            container: "py-1",
-            dot: "size-1",
-            label: "text-sm",
-        },
-        md: {
-            container: "py-1",
-            dot: "size-1.5",
-            label: "text-base",
-        },
-    },
-};
-
-export { thinkingIndicatorTheme };

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.types.d.ts

@@ -1,67 +0,0 @@
-import { ReactNode } from "react";
-/**
- * ThinkingIndicator component props
- */
-export interface ThinkingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Whether the indicator is visible
-     * @default true
-     */
-    visible?: boolean;
-    /**
-     * Custom label text
-     * @default "AI is thinking"
-     */
-    label?: string;
-    /**
-     * Whether to show the label text
-     * @default true
-     */
-    showLabel?: boolean;
-    /**
-     * Size variant
-     * @default "md"
-     */
-    size?: ThinkingIndicatorSize;
-    /**
-     * Custom icon to display instead of dots
-     */
-    icon?: ReactNode;
-    /**
-     * Additional className for the container
-     */
-    className?: string;
-    /**
-     * Theme overrides
-     */
-    theme?: ThinkingIndicatorThemeOverrides;
-}
-/**
- * Size variants
- */
-export type ThinkingIndicatorSize = "sm" | "md";
-/**
- * Theme configuration
- */
-export interface ThinkingIndicatorTheme {
-    baseStyle: string;
-    labelStyle: string;
-    dotsContainerStyle: string;
-    dotStyle: string;
-    sizes: Record<ThinkingIndicatorSize, ThinkingIndicatorSizeConfig>;
-}
-export interface ThinkingIndicatorSizeConfig {
-    container: string;
-    dot: string;
-    label: string;
-}
-/**
- * Theme overrides
- */
-export interface ThinkingIndicatorThemeOverrides {
-    baseStyle?: string;
-    labelStyle?: string;
-    dotsContainerStyle?: string;
-    dotStyle?: string;
-    sizes?: Partial<Record<ThinkingIndicatorSize, Partial<ThinkingIndicatorSizeConfig>>>;
-}

package/dist/components/ai/ThinkingIndicator/index.d.ts

@@ -1,3 +0,0 @@
-export { ThinkingIndicator } from "./ThinkingIndicator";
-export { thinkingIndicatorTheme } from "./ThinkingIndicator.theme";
-export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, ThinkingIndicatorSizeConfig, } from "./ThinkingIndicator.types";

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

@@ -1,10 +0,0 @@
-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

@@ -1,32 +0,0 @@
-/**
- * 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

@@ -1,28 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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-sm" : "text-base"), children: title })] }), jsxs("span", { className: cn(theme.countStyle, size === "sm" ? "text-sm" : "text-sm"), children: [selectedCount > 0 ? `${selectedCount}/` : "", listItems.length] })] }), searchable && (jsxs("div", { className: theme.searchWrapperStyle, children: [jsx(MagnifyingGlassIcon, { className: cn(searchIconSize, "absolute text-[var(--color-text-placeholder)] pointer-events-none", searchIconPosition) }), jsx("input", { type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search...", className: cn(theme.searchInputStyle, sizeStyles.searchInput), "aria-label": `Search ${title}` })] })), jsxs("div", { className: theme.listStyle, children: [jsx(AnimatePresence, { mode: "popLayout", initial: false, children: filteredItems.map((item) => {
-                                const isSelected = selected.has(item.id);
-                                const isDisabled = item.disabled === true;
-                                const itemContent = (jsxs(Fragment, { children: [jsx("input", { type: "checkbox", checked: isSelected, onChange: () => toggleSelection(item.id, selected, setSelected), disabled: isDisabled, className: cn(checkboxSize, "rounded-[calc(var(--radius-base)*0.5)] border-2 border-[var(--color-border)] accent-[var(--color-primary)] cursor-pointer flex-shrink-0", isDisabled && "cursor-not-allowed"), tabIndex: -1, "aria-hidden": "true" }), jsx("span", { className: "truncate flex-1", children: renderItem ? renderItem(item) : item.label })] }));
-                                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-sm" : size === "lg" ? "py-8 text-base" : "py-6 text-sm"), children: search.trim() ? "No matches found" : "No items" }))] })] }));
-    };
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...restProps, children: [renderPanel(sourceTitle, sourceItems, filteredSourceItems, sourceSelected, setSourceSelected, sourceSearch, setSourceSearch, sourceAllSelected, sourceIndeterminate, sourceTitle), jsxs("div", { className: theme.actionsStyle, children: [jsx("button", { type: "button", onClick: handleMoveAllToTarget, disabled: sourceItems.filter((i) => !i.disabled).length === 0, className: cn(theme.buttonStyle, sizeStyles.button), "aria-label": "Move all to target", children: jsx(ChevronDoubleRightIcon, { className: iconSize }) }), jsx("button", { type: "button", onClick: handleMoveToTarget, disabled: sourceSelected.size === 0, className: cn(theme.buttonStyle, sizeStyles.button), "aria-label": "Move selected to target", children: jsx(ChevronRightIcon, { className: iconSize }) }), jsx("button", { type: "button", onClick: handleMoveToSource, disabled: targetSelected.size === 0, className: cn(theme.buttonStyle, sizeStyles.button), "aria-label": "Move selected to source", children: jsx(ChevronLeftIcon, { className: iconSize }) }), jsx("button", { type: "button", onClick: handleMoveAllToSource, disabled: targetItems.filter((i) => !i.disabled).length === 0, className: cn(theme.buttonStyle, sizeStyles.button), "aria-label": "Move all to source", children: jsx(ChevronDoubleLeftIcon, { className: iconSize }) })] }), renderPanel(targetTitle, targetItems, filteredTargetItems, targetSelected, setTargetSelected, targetSearch, setTargetSearch, targetAllSelected, targetIndeterminate, targetTitle)] }));
-});
-TransferList.displayName = "TransferList";
-
-export { TransferList };

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

@@ -1,6 +0,0 @@
-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

@@ -1,60 +0,0 @@
-/**
- * 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-sm gap-1.5",
-            button: "p-1",
-            searchInput: "px-2 py-1.5 text-sm pl-7",
-        },
-        md: {
-            panel: "w-72 h-80",
-            item: "px-3 py-1.5 text-base gap-2",
-            button: "p-1.5",
-            searchInput: "px-3 py-2 text-base pl-8",
-        },
-        lg: {
-            panel: "w-80 h-96",
-            item: "px-3 py-2 text-lg gap-2.5",
-            button: "p-2",
-            searchInput: "px-3 py-2.5 text-lg pl-9",
-        },
-    },
-};
-
-export { transferListTheme };