@flikk/ui 1.0.0-beta.11 → 1.0.0-beta.13

package/dist/utils/index.d.ts

@@ -14,3 +14,4 @@ export * from "./formValidation";
 export { calculateVelocity, clampScroll, detectScrollDirection, isReducedMotion, lerp, calculateScrollProgress, normalizeWheelDelta, isScrollable, getMaxScroll, throttle, } from './smoothScrollUtils';
 export { PerformanceMonitor, usePerformanceMonitor } from './performanceMonitor';
 export { type SemanticColor, semanticBgColors, semanticTextColors, semanticSpinnerColors, } from './colorUtils';
+export { generatePalette, generateThemeCSS, type PaletteStep, type GeneratedPalette, type GeneratePaletteOptions, } from './paletteGenerator';

package/dist/utils/paletteGenerator.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Palette Generator Utility
+ *
+ * Converts a hex color to an 11-step OKLCH palette using
+ * Tailwind-matched lightness/chroma curves. The hue is extracted
+ * from the input color and applied across all steps.
+ */
+export interface PaletteStep {
+    /** Tailwind step number: 50, 100, 200 ... 950 */
+    step: number;
+    /** OKLCH CSS string, e.g. "oklch(0.9778 0.0108 270)" */
+    oklch: string;
+    /** Approximate sRGB hex for preview swatches */
+    hex: string;
+}
+export interface GeneratedPalette {
+    /** Semantic name, e.g. "primary" */
+    name: string;
+    /** Extracted OKLCH hue (degrees) */
+    hue: number;
+    /** 11 palette steps from 50 to 950 */
+    steps: PaletteStep[];
+    /** Auto-calculated contrast color (hex) for text on the base step */
+    contrast: 'light' | 'dark';
+}
+export interface GeneratePaletteOptions {
+    /** Scales chroma up/down. Default 1.0 */
+    vibrancy?: number;
+}
+/**
+ * Generate an 11-step OKLCH palette from a single hex color.
+ * Extracts the hue from the input and applies Tailwind-matched
+ * lightness and chroma curves.
+ */
+export declare function generatePalette(hex: string, name?: string, options?: GeneratePaletteOptions): GeneratedPalette | null;
+/**
+ * Generate a complete CSS variable block for all semantic colors.
+ *
+ * @param palettes - Map of semantic name → hex color
+ * @param options - Generation options (vibrancy)
+ * @returns Object with `theme` (for @theme block) and `root` (for :root block) CSS strings
+ */
+export declare function generateThemeCSS(palettes: Record<string, string>, options?: GeneratePaletteOptions): {
+    theme: string;
+    root: string;
+} | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.13",
   "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",

package/src/styles/theme.css

@@ -81,7 +81,7 @@
 
   /* text color */
   --color-text-primary: var(--color-neutral-950);
-  --color-text-secondary: var(--color-neutral-800);
+  --color-text-secondary: var(--color-neutral-700);
   --color-text-placeholder: var(--color-neutral-400);
   --color-text-muted: var(--color-neutral-500);
   --color-text-disabled: var(--color-neutral-400);
@@ -112,7 +112,7 @@
   --color-neutral-950: oklch(14.5% 0 0);
 
   /* Font family variables */
-  --font-family-base: "Geist", sans-serif;
+  --font-family-base: var(--font-sans);
   --font-cursive: "Birthstone", cursive;
   --font-weight-light: 300;
   --font-weight-normal: 400;
@@ -136,7 +136,6 @@
   --form-py-md: 0.625rem; /* 0.625rem 10px = py-2 in Tailwind */
   --form-py-lg: 0.75rem; /* 0.75rem 12px = py-3 in Tailwind */
 
-
   /* ============================================
      BORDER RADIUS SYSTEM
      Change --radius-base to adjust the entire UI.
@@ -200,7 +199,6 @@
   --button-icon-size-md: var(--form-min-h-md);
   --button-icon-size-lg: var(--form-min-h-lg);
 
-
   /* Badge variables */
   --badge-radius: var(--form-radius);
 
@@ -218,7 +216,6 @@
   --segmented-py-md: var(--form-py-md);
   --segmented-py-lg: var(--form-py-lg);
 
-
   /* Segmented sliding background */
   --segmented-active-bg: #ffffff;
   --segmented-active-shadow:
@@ -254,7 +251,6 @@
   --avatar-size-lg: 3rem; /* 48px = size-12 in Tailwind */
   --avatar-size-xl: 4rem; /* 64px = size-16 in Tailwind */
 
-
   /* Avatar radius - now defined in radius system above */
 
   /* Carousel Variables */

package/dist/components/core/Accordion/AccordionContent.d.ts

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

package/dist/components/core/Card/CardContent.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CardContentProps } from './Card.types';
-export declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Card/CardContent.js

@@ -1,11 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { cardTheme } from './Card.theme.js';
-
-const CardContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: cn(cardTheme.contentStyle, className), ...props, children: children }));
-});
-CardContent.displayName = 'CardContent';
-
-export { CardContent };

package/dist/components/core/Carousel/CarouselContent.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CarouselContentProps } from './Carousel.types';
-declare const CarouselContent: React.ForwardRefExoticComponent<CarouselContentProps & React.RefAttributes<HTMLDivElement>>;
-export { CarouselContent };

package/dist/components/core/ContextMenu/ContextMenuContent.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { ContextMenuContentProps } from "./ContextMenu.types";
-/**
- * ContextMenuContent - Renders the menu at cursor position with keyboard navigation
- */
-export declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/ContextMenuSubContent.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { ContextMenuSubContentProps } from "./ContextMenu.types";
-/**
- * ContextMenuSubContent - Submenu content positioned to the right of trigger
- */
-export declare const ContextMenuSubContent: React.ForwardRefExoticComponent<ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Drawer/DrawerContent.d.ts

@@ -1,5 +0,0 @@
-import { DrawerContentProps } from "./Drawer.types";
-export declare const DrawerContent: {
-    ({ children, className, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/dist/components/core/Drawer/DrawerContent.js

@@ -1,11 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { cn } from '../../../utils/cn.js';
-import { useDrawerContext } from './Drawer.js';
-
-const DrawerContent = ({ children, className, ...props }) => {
-    const { theme } = useDrawerContext();
-    return (jsx("div", { className: cn(theme.content, className), ...props, children: children }));
-};
-DrawerContent.displayName = "Drawer.Content";
-
-export { DrawerContent };

package/dist/components/core/Loader/Loader.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import { LoaderProps } from './Loader.types';
-/**
- * Loader component - Supports both circular (spinner) and linear (progress bar) variants
- *
- * Features:
- * - Circular variant: Spinning loader for indeterminate loading
- * - Linear variant: Progress bar with determinate (value) or indeterminate modes
- * - Multiple sizes and semantic colors
- * - Optional percentage/label display for linear variant
- * - Full theme customization
- *
- * @example
- * // Circular loader
- * <Loader variant="circular" size="md" />
- *
- * // Linear progress bar (determinate)
- * <Loader variant="linear" value={60} showLabel />
- *
- * // Linear loading bar (indeterminate)
- * <Loader variant="linear" />
- */
-declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
-export { Loader };

package/dist/components/core/Loader/Loader.js

@@ -1,57 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useMemo } from 'react';
-import { loaderTheme } from './Loader.theme.js';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * Loader component - Supports both circular (spinner) and linear (progress bar) variants
- *
- * Features:
- * - Circular variant: Spinning loader for indeterminate loading
- * - Linear variant: Progress bar with determinate (value) or indeterminate modes
- * - Multiple sizes and semantic colors
- * - Optional percentage/label display for linear variant
- * - Full theme customization
- *
- * @example
- * // Circular loader
- * <Loader variant="circular" size="md" />
- *
- * // Linear progress bar (determinate)
- * <Loader variant="linear" value={60} showLabel />
- *
- * // Linear loading bar (indeterminate)
- * <Loader variant="linear" />
- */
-const Loader = React__default.forwardRef(({ variant = 'circular', size = 'md', color = 'primary', value, max = 100, showLabel = false, label, className, theme: customTheme, ...props }, ref) => {
-    var _a, _b;
-    // Merge custom theme with default theme
-    const theme = useMemo(() => customTheme ? { ...loaderTheme, ...customTheme } : loaderTheme, [customTheme]);
-    // Calculate percentage for linear variant
-    const percentage = useMemo(() => {
-        if (value === undefined || value === null)
-            return 0;
-        const pct = Math.min(Math.max((value / max) * 100, 0), 100);
-        return Math.round(pct);
-    }, [value, max]);
-    // Determine if this is indeterminate mode (no value provided)
-    const isIndeterminate = value === undefined || value === null;
-    // Get theme values for current size and color
-    const sizeStyles = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || theme.sizes['md'];
-    const colorStyles = ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b[color]) || theme.colors['primary'];
-    // Render circular variant (spinner)
-    if (variant === 'circular') {
-        return (jsx("div", { ref: ref, className: cn(theme.baseStyle, className), role: "status", "aria-label": "loading", ...props, children: jsx("div", { className: cn(theme.circularStyle, theme.animation, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.circular, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.circular) }) }));
-    }
-    // Render linear variant (progress bar)
-    return (jsxs("div", { ref: ref, className: cn(theme.linearContainerStyle, className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": isIndeterminate ? undefined : value, "aria-label": isIndeterminate ? "loading" : `${percentage}% complete`, ...props, children: [jsx("div", { className: cn(theme.linearTrackStyle, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.linear), children: isIndeterminate ? (
-                // Indeterminate loading animation
-                jsx("div", { className: cn(theme.linearBarStyle, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.linear, "w-1/3 animate-[shimmer_2s_ease-in-out_infinite]"), style: {
-                        backgroundImage: `linear-gradient(90deg, transparent, currentColor, transparent)`,
-                    } })) : (
-                // Determinate progress bar
-                jsx("div", { className: cn(theme.linearBarStyle, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.linear), style: { width: `${percentage}%` } })) }), showLabel && !isIndeterminate && (jsx("span", { className: theme.linearLabelStyle, children: label || `${percentage}%` }))] }));
-});
-Loader.displayName = 'Loader';
-
-export { Loader };

package/dist/components/core/Loader/Loader.theme.d.ts

@@ -1,27 +0,0 @@
-import { LoaderSize, LoaderColor } from "./Loader.types";
-/**
- * Internal theme structure for the Loader component
- */
-interface LoaderTheme {
-    baseStyle: string;
-    circularStyle: string;
-    linearContainerStyle: string;
-    linearTrackStyle: string;
-    linearBarStyle: string;
-    linearLabelStyle: string;
-    sizes: Record<LoaderSize, {
-        circular: string;
-        linear: string;
-    }>;
-    colors: Record<LoaderColor, {
-        circular: string;
-        linear: string;
-    }>;
-    animation: string;
-}
-/**
- * Default theme for the Loader component
- * Uses production-ready CSS variables from global.scss
- */
-export declare const loaderTheme: LoaderTheme;
-export {};

package/dist/components/core/Loader/Loader.theme.js

@@ -1,60 +0,0 @@
-/**
- * Default theme for the Loader component
- * Uses production-ready CSS variables from global.scss
- */
-const loaderTheme = {
-    // Base styles for the loader container
-    baseStyle: "inline-flex items-center justify-center",
-    // Circular variant (spinner) styles
-    circularStyle: "rounded-full",
-    // Linear variant container
-    linearContainerStyle: "w-full flex items-center gap-3",
-    // Linear track (background)
-    linearTrackStyle: "flex-1 h-2 rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
-    // Linear bar (foreground)
-    linearBarStyle: "h-full rounded-full transition-all duration-300 ease-out",
-    // Label text for linear variant
-    linearLabelStyle: "text-base font-medium text-[var(--color-text-secondary)] min-w-[3ch] tabular-nums",
-    // Size variants for both circular and linear
-    sizes: {
-        sm: {
-            circular: "size-4 border-2",
-            linear: "h-1.5",
-        },
-        md: {
-            circular: "size-5 border-[3px]",
-            linear: "h-2",
-        },
-        lg: {
-            circular: "size-6 border-[3px]",
-            linear: "h-3",
-        },
-    },
-    // Color variants using correct CSS variables
-    colors: {
-        primary: {
-            circular: "border-[var(--color-primary)] border-t-transparent",
-            linear: "bg-[var(--color-primary)]",
-        },
-        success: {
-            circular: "border-[var(--color-success)] border-t-transparent",
-            linear: "bg-[var(--color-success)]",
-        },
-        warning: {
-            circular: "border-[var(--color-warning)] border-t-transparent",
-            linear: "bg-[var(--color-warning)]",
-        },
-        danger: {
-            circular: "border-[var(--color-danger)] border-t-transparent",
-            linear: "bg-[var(--color-danger)]",
-        },
-        muted: {
-            circular: "border-[var(--color-text-muted)] border-t-transparent",
-            linear: "bg-[var(--color-text-muted)]",
-        },
-    },
-    // Animation class for circular spinner
-    animation: "animate-[spin_1s_linear_infinite]",
-};
-
-export { loaderTheme };

package/dist/components/core/Loader/Loader.types.d.ts

@@ -1,71 +0,0 @@
-/**
- * Loader component props
- * Supports both circular (spinner) and linear (progress bar) variants
- */
-export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The variant of the loader
-     * @default "circular"
-     */
-    variant?: LoaderVariant;
-    /**
-     * The size of the loader
-     * @default "md"
-     */
-    size?: LoaderSize;
-    /**
-     * The color of the loader
-     * @default "primary"
-     */
-    color?: LoaderColor;
-    /**
-     * Current progress value (0-100)
-     * Only applies to linear variant
-     * If not provided, shows indeterminate loading animation
-     */
-    value?: number;
-    /**
-     * Maximum value for progress
-     * @default 100
-     */
-    max?: number;
-    /**
-     * Show percentage label
-     * Only applies to linear variant with value prop
-     * @default false
-     */
-    showLabel?: boolean;
-    /**
-     * Custom label text (overrides percentage)
-     * Only applies to linear variant
-     */
-    label?: string;
-    /**
-     * Custom CSS class to apply to the loader
-     */
-    className?: string;
-    /**
-     * Theme overrides for the loader
-     */
-    theme?: LoaderThemeOverrides;
-}
-export type LoaderVariant = "circular" | "linear";
-export type LoaderSize = "sm" | "md" | "lg";
-export type LoaderColor = "primary" | "success" | "warning" | "danger" | "muted";
-export interface LoaderThemeOverrides {
-    baseStyle?: string;
-    circularStyle?: string;
-    linearContainerStyle?: string;
-    linearTrackStyle?: string;
-    linearBarStyle?: string;
-    linearLabelStyle?: string;
-    sizes?: Partial<Record<LoaderSize, {
-        circular: string;
-        linear: string;
-    }>>;
-    colors?: Partial<Record<LoaderColor, {
-        circular: string;
-        linear: string;
-    }>>;
-    animation?: string;
-}

package/dist/components/core/Loader/index.d.ts

@@ -1,2 +0,0 @@
-export { Loader } from './Loader';
-export type { LoaderProps, LoaderVariant, LoaderSize, LoaderColor } from './Loader.types';

package/dist/components/core/Message/MessageContent.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The message content
-     */
-    children: React.ReactNode;
-}
-export declare const MessageContent: React.ForwardRefExoticComponent<MessageContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Popover/PopoverContent.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { PopoverContentProps } from "./Popover.types";
-/**
- * PopoverContent component displays the content of the popover
- */
-declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
-export { PopoverContent };

package/dist/components/core/Tabs/TabsContent.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { TabsContentProps } from "./Tabs.types";
-/**
- * TabsContent component displays content panels for tabs with directional fade animations
- */
-export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/forms/ColorPicker/ColorPickerContent.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { ColorPickerContentProps } from './ColorPicker.types';
-/**
- * ColorPickerContent - Popover content wrapper following Dropdown/Select patterns
- * Uses portal rendering and useSelectPortal for positioning
- */
-export declare const ColorPickerContent: React.FC<ColorPickerContentProps>;

package/dist/components/forms/DatePicker/DatePickerContent.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { DatePickerContentProps } from "./DatePicker.types";
-/**
- * DatePicker Content Component - contains the Calendar and optional Presets
- * Uses portal positioning like Select component
- */
-export declare const DatePickerContent: React.FC<DatePickerContentProps>;

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