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

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

@@ -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-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 };

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

@@ -0,0 +1,101 @@
+import React from "react";
+/**
+ * Size variants for the TransferList component
+ */
+export type TransferListSize = "sm" | "md" | "lg";
+/**
+ * Individual item in the TransferList
+ */
+export interface TransferListItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display label for the item */
+    label: string;
+    /** Whether the item is disabled and cannot be transferred */
+    disabled?: boolean;
+    /** Allow custom data to be attached to the item */
+    [key: string]: unknown;
+}
+/**
+ * TransferList component props
+ *
+ * Supports both controlled (value + onChange) and uncontrolled (defaultValue) patterns.
+ *
+ * @example
+ * ```tsx
+ * // Controlled
+ * <TransferList
+ *   items={items}
+ *   value={selectedIds}
+ *   onChange={setSelectedIds}
+ *   sourceTitle="Available"
+ *   targetTitle="Selected"
+ * />
+ *
+ * // Uncontrolled
+ * <TransferList
+ *   items={items}
+ *   defaultValue={['item-1', 'item-2']}
+ *   sourceTitle="Available"
+ *   targetTitle="Selected"
+ * />
+ * ```
+ */
+export interface TransferListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** All available items for both lists */
+    items: TransferListItem[];
+    /** IDs of items currently in the target list (controlled mode) */
+    value?: string[];
+    /** Default IDs of items in the target list (uncontrolled mode) */
+    defaultValue?: string[];
+    /** Callback when target list changes */
+    onChange?: (targetIds: string[]) => void;
+    /** Title displayed above the source list */
+    sourceTitle?: string;
+    /** Title displayed above the target list */
+    targetTitle?: string;
+    /** Whether to show search/filter inputs for each list */
+    searchable?: boolean;
+    /** Size variant affecting padding and text size */
+    size?: TransferListSize;
+    /** Custom renderer for each item in both lists */
+    renderItem?: (item: TransferListItem) => React.ReactNode;
+    /** Additional className for the root container */
+    className?: string;
+}
+/**
+ * Theme configuration for the TransferList component
+ */
+export interface TransferListTheme {
+    /** Root container style */
+    baseStyle: string;
+    /** Individual list panel style */
+    panelStyle: string;
+    /** Panel header (title + count) style */
+    headerStyle: string;
+    /** Title text style */
+    titleStyle: string;
+    /** Item count badge style */
+    countStyle: string;
+    /** Search input wrapper style */
+    searchWrapperStyle: string;
+    /** Search input style */
+    searchInputStyle: string;
+    /** Scrollable list container style */
+    listStyle: string;
+    /** Individual item row style */
+    itemStyle: string;
+    /** Disabled item style */
+    itemDisabledStyle: string;
+    /** Actions column (transfer buttons) style */
+    actionsStyle: string;
+    /** Transfer button style */
+    buttonStyle: string;
+    /** Size variants */
+    sizes: Record<TransferListSize, {
+        panel: string;
+        item: string;
+        button: string;
+        searchInput: string;
+    }>;
+}

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

@@ -0,0 +1,3 @@
+export { TransferList } from "./TransferList";
+export type { TransferListProps, TransferListItem, TransferListSize, TransferListTheme, } from "./TransferList.types";
+export { transferListTheme } from "./TransferList.theme";

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

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

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

@@ -11,10 +11,10 @@ export { FormLabel } from "./FormLabel";
 export type { FormLabelProps, FormLabelState, FormLabelTheme, } from "./FormLabel";
 export { formLabelTheme } from "./FormLabel";
 export { Radio } from "./Radio";
-export type { RadioProps, RadioSize, RadioState } from "./Radio";
+export type { RadioProps, RadioSize, RadioState, RadioGroupProps, RadioGroupOrientation, } from "./Radio";
 export { radioTheme } from "./Radio";
 export { Checkbox } from "./Checkbox";
-export type { CheckboxProps, CheckboxSize, CheckboxState } from "./Checkbox";
+export type { CheckboxProps, CheckboxSize, CheckboxState, CheckboxGroupProps, CheckboxGroupOrientation, } from "./Checkbox";
 export { checkboxTheme } from "./Checkbox";
 export { Switch } from "./Switch";
 export type { SwitchProps, SwitchThemeOverrides } from "./Switch";
@@ -60,3 +60,16 @@ export { Combobox } from "./Combobox";
 export type { ComboboxProps, ComboboxOption, ComboboxSize, ComboboxState, ComboboxTheme, ComboboxThemeOverrides, } from "./Combobox";
 export { comboboxTheme } from "./Combobox";
 export * from "./ColorPicker";
+export { SelectableCard } from "./SelectableCard";
+export type { SelectableCardProps, SelectableCardGroupProps, SelectableCardType, SelectableCardIndicator, SelectableCardTheme, } from "./SelectableCard";
+export { selectableCardTheme } from "./SelectableCard";
+export { TransferList } from "./TransferList";
+export type { TransferListProps, TransferListItem, TransferListSize, TransferListTheme, } from "./TransferList";
+export { transferListTheme } from "./TransferList";
+export { Mention } from "./Mention";
+export type { MentionProps, MentionSuggestion, MentionTrigger, MentionSize, MentionTheme, MentionThemeOverrides, } from "./Mention";
+export { mentionTheme } from "./Mention";
+export { CronInput } from "./CronInput";
+export type { CronInputProps, CronInputSize, CronInputMode, CronInputTheme, CronInputThemeOverrides, CronFields, CronPreset, } from "./CronInput";
+export { cronInputTheme } from "./CronInput";
+export { parseCron, fieldsToCron, validateCron, cronToDescription, getNextRuns, formatNextRun, CRON_PRESETS, } from "./CronInput";

package/dist/components/forms/index.js

@@ -58,6 +58,15 @@ export { ColorPickerFormatSelector } from './ColorPicker/ColorPickerFormatSelect
 export { ColorPickerEyeDropper } from './ColorPicker/ColorPickerEyeDropper.js';
 export { ColorPickerPresets } from './ColorPicker/ColorPickerPresets.js';
 export { formatHex, formatHsl, formatRgb, hexToRgb, hslToRgb, hsvToRgb, parseColor, rgbToHex, rgbToHsl, rgbToHsv, validateHex, validateRgb } from './ColorPicker/colorUtils.js';
+export { SelectableCard } from './SelectableCard/SelectableCard.js';
+export { selectableCardTheme } from './SelectableCard/SelectableCard.theme.js';
+export { TransferList } from './TransferList/TransferList.js';
+export { transferListTheme } from './TransferList/TransferList.theme.js';
+export { Mention } from './Mention/Mention.js';
+export { mentionTheme } from './Mention/Mention.theme.js';
+export { CronInput } from './CronInput/CronInput.js';
+export { cronInputTheme } from './CronInput/CronInput.theme.js';
+export { CRON_PRESETS, cronToDescription, fieldsToCron, formatNextRun, getNextRuns, parseCron, validateCron } from './CronInput/CronInput.utils.js';
 export { DatePickerContent } from './DatePicker/DatePickerContent.js';
 export { DatePickerPresets } from './DatePicker/DatePickerPresets.js';
 export { DatePickerTrigger } from './DatePicker/DatePickerTrigger.js';

package/dist/components/layout/FormLayout/FormLayout.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { FormLayoutProps } from "./FormLayout.types";
+export declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<import("./FormLayout.types").FormLayoutHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./FormLayout.types").FormLayoutBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Section: React.ForwardRefExoticComponent<import("./FormLayout.types").FormLayoutSectionProps & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<import("./FormLayout.types").FormLayoutFooterProps & React.RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formLayoutTheme } from './FormLayout.theme.js';
+import { FormLayoutHeader } from './FormLayoutHeader.js';
+import { FormLayoutBody } from './FormLayoutBody.js';
+import { FormLayoutSection } from './FormLayoutSection.js';
+import { FormLayoutFooter } from './FormLayoutFooter.js';
+
+const FormLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...formLayoutTheme, ...customTheme };
+    return (jsx("div", { ref: ref, className: cn(theme.root, className), ...props, children: children }));
+});
+FormLayoutRoot.displayName = "FormLayout";
+const FormLayout = Object.assign(FormLayoutRoot, {
+    Header: FormLayoutHeader,
+    Body: FormLayoutBody,
+    Section: FormLayoutSection,
+    Footer: FormLayoutFooter,
+});
+
+export { FormLayout };

package/dist/components/layout/FormLayout/FormLayout.theme.d.ts

@@ -0,0 +1,2 @@
+import type { FormLayoutTheme } from "./FormLayout.types";
+export declare const formLayoutTheme: FormLayoutTheme;

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

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

package/dist/components/layout/FormLayout/FormLayout.types.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+export interface FormLayoutTheme {
+    root: string;
+    header: string;
+    headerTitle: string;
+    headerSubtitle: string;
+    body: string;
+    section: string;
+    sectionSidebar: string;
+    sectionTitle: string;
+    sectionDescription: string;
+    sectionAction: string;
+    sectionContent: string;
+    footer: string;
+}
+export interface FormLayoutThemeOverrides {
+    root?: string;
+    header?: string;
+    headerTitle?: string;
+    headerSubtitle?: string;
+    body?: string;
+    section?: string;
+    sectionSidebar?: string;
+    sectionTitle?: string;
+    sectionDescription?: string;
+    sectionAction?: string;
+    sectionContent?: string;
+    footer?: string;
+}
+export interface FormLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Theme overrides for the root container. */
+    theme?: FormLayoutThemeOverrides;
+}
+export interface FormLayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Header title text. */
+    title: string;
+    /** Optional subtitle displayed below the title. */
+    subtitle?: string;
+    /** Optional action element rendered on the right side of the header. */
+    action?: React.ReactNode;
+    /** Theme overrides for the header. */
+    theme?: FormLayoutThemeOverrides;
+}
+export interface FormLayoutBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface FormLayoutSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Section title text. */
+    title: string;
+    /** Optional description displayed below the title. */
+    description?: string;
+    /** Optional action element rendered below the description. */
+    action?: React.ReactNode;
+    /** Additional className applied to the content area. */
+    contentClassName?: string;
+    /** Theme overrides for the section. */
+    theme?: FormLayoutThemeOverrides;
+}
+export interface FormLayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Theme overrides for the footer. */
+    theme?: FormLayoutThemeOverrides;
+}

package/dist/components/layout/FormLayout/FormLayoutBody.d.ts

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

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

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formLayoutTheme } from './FormLayout.theme.js';
+import { Separator } from '../../core/Separator/Separator.js';
+
+const FormLayoutBody = React__default.forwardRef(({ className, children, ...props }, ref) => {
+    const childArray = React__default.Children.toArray(children).filter(Boolean);
+    return (jsx("div", { ref: ref, className: cn(formLayoutTheme.body, className), ...props, children: childArray.map((child, index) => (jsxs(React__default.Fragment, { children: [child, index < childArray.length - 1 && jsx(Separator, {})] }, index))) }));
+});
+FormLayoutBody.displayName = "FormLayout.Body";
+
+export { FormLayoutBody };

package/dist/components/layout/FormLayout/FormLayoutFooter.d.ts

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

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

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formLayoutTheme } from './FormLayout.theme.js';
+
+const FormLayoutFooter = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...formLayoutTheme, ...customTheme };
+    return (jsx("div", { ref: ref, className: cn(theme.footer, className), ...props, children: children }));
+});
+FormLayoutFooter.displayName = "FormLayout.Footer";
+
+export { FormLayoutFooter };

package/dist/components/layout/FormLayout/FormLayoutHeader.d.ts

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