@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

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

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

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

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

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

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

@@ -1,91 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import '../../core/Accordion/Accordion.js';
-import '../../core/AlertDialog/AlertDialog.js';
-import '../../core/AspectRatio/AspectRatio.js';
-import '../../core/Avatar/Avatar.js';
-import '../../core/AvatarGroup/AvatarGroup.js';
-import '../../core/Badge/Badge.js';
-import '../../core/Breadcrumbs/Breadcrumbs.js';
-import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
-import '../../core/Button/Button.js';
-import '../../core/ButtonGroup/ButtonGroup.js';
-import '../../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../../core/ButtonGroup/ButtonGroupText.js';
-import '../../core/Calendar/Calendar.js';
-import '../../core/Calendar/CalendarMini/CalendarMini.js';
-import '../../core/Card/Card.js';
-import '../../core/CardStack/CardStack.js';
-import '../../core/Carousel/Carousel.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import { Separator } from '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Dropdown/Dropdown.js';
-import '../../core/Dropdown/DropdownTrigger.js';
-import '../../core/Dropdown/DropdownMenu.js';
-import '../../core/Dropdown/DropdownItem.js';
-import '../../core/Dropdown/DropdownSection.js';
-import '../../core/Dropdown/DropdownSeparator.js';
-import '../../core/Dropdown/Dropdown.theme.js';
-import '../../core/Kbd/Kbd.js';
-import '../../core/MenuItem/MenuItem.js';
-import '../../core/Link/Link.js';
-import '../../core/Loader/Loader.js';
-import '../../core/Modal/Modal.js';
-import '../../core/ModalStack/ModalStack.js';
-import '../../core/PageHeading/PageHeading.js';
-import '../../core/Pagination/Pagination.js';
-import '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import '../../core/Progress/Progress.js';
-import '../../core/Rating/Rating.js';
-import '../../core/ScrollArea/ScrollArea.js';
-import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../../core/Segmented/Segmented.js';
-import '../../core/Skeleton/Skeleton.js';
-import '../../core/SlidingNumber/SlidingNumber.js';
-import '../../core/Tabs/Tabs.js';
-import '../../core/Tabs/TabsList.js';
-import '../../core/Tabs/TabsTrigger.js';
-import '../../core/Tabs/TabsContent.js';
-import '../../core/Tabs/TabsContext.js';
-import '../../core/Tooltip/Tooltip.js';
-import '../../core/Tooltip/Tooltip.animations.js';
-import '../../core/Tree/Tree.js';
-import '../../core/Tag/Tag.js';
-import '../../core/Alert/Alert.js';
-import '../../core/Toast/Toast.js';
-import '../../core/Toast/ToastProvider.js';
-import '@heroicons/react/24/solid';
-import '../../core/Spinner/Spinner.js';
-import '../../core/Message/Message.js';
-import '../../core/Message/TypeWriter.js';
-import '../../core/Empty/Empty.js';
-import '../../core/Masonry/Masonry.js';
-import '../../core/DragDrop/DragDrop.js';
-import '../../core/Sortable/Sortable.js';
-import '../../core/NavItem/NavItem.js';
-import '../../core/Sidebar/Sidebar.js';
-import '../../core/Sidebar/SidebarHeader.js';
-import '../../core/Sidebar/SidebarContent.js';
-import '../../core/Sidebar/SidebarFooter.js';
-import '../../core/Sidebar/SidebarNav.js';
-import '../../core/Sidebar/SidebarNavGroup.js';
-import 'motion/react';
-import '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarContext.js';
-import '../../core/OfflineIndicator/OfflineIndicator.js';
-import '../../core/ContextMenu/ContextMenu.js';
-import '../../core/ContextMenu/ContextMenu.theme.js';
-import '../../core/Pill/Pill.js';
-import '../../core/SocialIcon/SocialIcon.js';
-import { formLayoutTheme } from './FormLayout.theme.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/FormLayoutHeader.d.ts

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

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

@@ -1,12 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { formLayoutTheme } from './FormLayout.theme.js';
-
-const FormLayoutHeader = React__default.forwardRef(({ title, subtitle, action, className, theme: customTheme, ...props }, ref) => {
-    const theme = { ...formLayoutTheme, ...customTheme };
-    return (jsx("div", { ref: ref, className: cn(theme.header, className), ...props, children: jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { children: [jsx("div", { className: theme.headerTitle, children: title }), subtitle && jsx("div", { className: theme.headerSubtitle, children: subtitle })] }), action && jsx("div", { children: action })] }) }));
-});
-FormLayoutHeader.displayName = "FormLayout.Header";
-
-export { FormLayoutHeader };

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

@@ -1,7 +0,0 @@
-import React from "react";
-import type { PageLayoutProps } from "./PageLayout.types";
-export declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>> & {
-    Sidebar: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutSidebarProps & React.RefAttributes<HTMLElement>>;
-    Header: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutHeaderProps & React.RefAttributes<HTMLElement>>;
-    Content: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutContentProps & React.RefAttributes<HTMLElement>>;
-};

package/dist/components/layout/PageLayout/PageLayout.js

@@ -1,33 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { pageLayoutTheme } from './PageLayout.theme.js';
-import { PageLayoutSidebar } from './PageLayoutSidebar.js';
-import { PageLayoutHeader } from './PageLayoutHeader.js';
-import { PageLayoutContent } from './PageLayoutContent.js';
-
-const PageLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
-    const theme = { ...pageLayoutTheme, ...customTheme };
-    // Separate Sidebar children from the rest (Header, Content)
-    // so we can wrap non-sidebar children in a vertical main column.
-    const childArray = React__default.Children.toArray(children);
-    const sidebar = [];
-    const main = [];
-    childArray.forEach((child) => {
-        if (React__default.isValidElement(child) && child.type === PageLayoutSidebar) {
-            sidebar.push(child);
-        }
-        else {
-            main.push(child);
-        }
-    });
-    return (jsxs("div", { ref: ref, className: cn(theme.root, className), ...props, children: [sidebar, jsx("div", { className: cn(theme.main), children: main })] }));
-});
-PageLayoutRoot.displayName = "PageLayout";
-const PageLayout = Object.assign(PageLayoutRoot, {
-    Sidebar: PageLayoutSidebar,
-    Header: PageLayoutHeader,
-    Content: PageLayoutContent,
-});
-
-export { PageLayout };

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

@@ -1,2 +0,0 @@
-import type { PageLayoutTheme } from "./PageLayout.types";
-export declare const pageLayoutTheme: PageLayoutTheme;

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

@@ -1,10 +0,0 @@
-const pageLayoutTheme = {
-    root: "flex h-screen overflow-hidden bg-[var(--color-background)]",
-    sidebar: "flex flex-col shrink-0 border-r border-[var(--color-border)] bg-[var(--color-background-secondary)] overflow-y-auto",
-    sidebarCollapsed: "hidden lg:flex",
-    main: "flex flex-col flex-1 min-w-0 overflow-hidden",
-    header: "shrink-0 border-b border-[var(--color-border)] bg-[var(--color-background)]",
-    content: "flex-1 overflow-y-auto",
-};
-
-export { pageLayoutTheme };

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

@@ -1,39 +0,0 @@
-import React from "react";
-export interface PageLayoutTheme {
-    root: string;
-    sidebar: string;
-    sidebarCollapsed: string;
-    main: string;
-    header: string;
-    content: string;
-}
-export interface PageLayoutThemeOverrides {
-    root?: string;
-    sidebar?: string;
-    sidebarCollapsed?: string;
-    main?: string;
-    header?: string;
-    content?: string;
-}
-export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Theme overrides for the root container. */
-    theme?: PageLayoutThemeOverrides;
-}
-export interface PageLayoutSidebarProps extends React.HTMLAttributes<HTMLElement> {
-    /** Width of the sidebar (CSS value). Defaults to "16rem". */
-    width?: string;
-    /** Whether the sidebar is collapsed on mobile. Defaults to true. */
-    collapsedOnMobile?: boolean;
-    /** Theme overrides for the sidebar. */
-    theme?: PageLayoutThemeOverrides;
-}
-export interface PageLayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {
-    /** Whether the header is sticky. Defaults to true. */
-    sticky?: boolean;
-    /** Theme overrides for the header. */
-    theme?: PageLayoutThemeOverrides;
-}
-export interface PageLayoutContentProps extends React.HTMLAttributes<HTMLElement> {
-    /** Theme overrides for the content area. */
-    theme?: PageLayoutThemeOverrides;
-}

package/dist/components/layout/PageLayout/PageLayoutContent.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import type { PageLayoutContentProps } from "./PageLayout.types";
-export declare const PageLayoutContent: React.ForwardRefExoticComponent<PageLayoutContentProps & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/PageLayout/PageLayoutContent.js

@@ -1,12 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { pageLayoutTheme } from './PageLayout.theme.js';
-
-const PageLayoutContent = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
-    const theme = { ...pageLayoutTheme, ...customTheme };
-    return (jsx("main", { ref: ref, className: cn(theme.content, className), ...props, children: children }));
-});
-PageLayoutContent.displayName = "PageLayout.Content";
-
-export { PageLayoutContent };

package/dist/components/layout/PageLayout/PageLayoutHeader.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import type { PageLayoutHeaderProps } from "./PageLayout.types";
-export declare const PageLayoutHeader: React.ForwardRefExoticComponent<PageLayoutHeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/PageLayout/PageLayoutHeader.js

@@ -1,12 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { pageLayoutTheme } from './PageLayout.theme.js';
-
-const PageLayoutHeader = React__default.forwardRef(({ sticky = true, className, theme: customTheme, children, ...props }, ref) => {
-    const theme = { ...pageLayoutTheme, ...customTheme };
-    return (jsx("header", { ref: ref, className: cn(theme.header, sticky && "sticky top-0 z-10", className), ...props, children: children }));
-});
-PageLayoutHeader.displayName = "PageLayout.Header";
-
-export { PageLayoutHeader };

package/dist/components/layout/PageLayout/PageLayoutSidebar.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import type { PageLayoutSidebarProps } from "./PageLayout.types";
-export declare const PageLayoutSidebar: React.ForwardRefExoticComponent<PageLayoutSidebarProps & React.RefAttributes<HTMLElement>>;