@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

package/dist/components/layout/AppShell/AppShellSidebar.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ScrollArea } from '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import { getAppShellTheme } from './AppShell.theme.js';
+import { useAppShellContext } from './AppShellContext.js';
+
+const AppShellSidebar = React__default.forwardRef(({ width = "16rem", collapsedOnMobile = true, className, theme: customTheme, style, children, "aria-label": ariaLabel = "Primary", ...props }, ref) => {
+    const theme = getAppShellTheme(customTheme);
+    const ctx = useAppShellContext();
+    return (jsx("aside", { ref: ref, "aria-label": ariaLabel, className: cn(theme.sidebar, collapsedOnMobile && theme.sidebarCollapsed, className), style: { width, ...style }, ...props, children: ctx.scroll === "viewport" ? (jsx(ScrollArea, { type: "hover", size: "thin", className: theme.sidebarScroll, children: children })) : (children) }));
+});
+AppShellSidebar.displayName = "AppShell.Sidebar";
+
+export { AppShellSidebar };

package/dist/components/layout/AppShell/AppShellTopbar.d.ts

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

package/dist/components/layout/AppShell/AppShellTopbar.js

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

package/dist/components/layout/AppShell/index.d.ts

@@ -0,0 +1,3 @@
+export { AppShell } from "./AppShell";
+export type { AppShellProps, AppShellTopbarProps, AppShellSidebarProps, AppShellHeaderProps, AppShellMainProps, AppShellRightPanelProps, AppShellFooterProps, AppShellScroll, AppShellSpan, AppShellContentWidth, AppShellContentPadding, AppShellTheme, AppShellThemeOverrides, } from "./AppShell.types";
+export { appShellTheme, getAppShellTheme } from "./AppShell.theme";

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

@@ -1,96 +1,10 @@
 import { jsxs, jsx } 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/Carousel/CarouselBody.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import { Separator } from '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Drawer/DrawerBody.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/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/Popover/PopoverBody.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/TabsBody.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/Message/MessageBody.js';
-import '@heroicons/react/16/solid';
-import '@heroicons/react/24/outline';
-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 '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarMobileTrigger.js';
-import '../../core/Sidebar/SidebarUserProfile.js';
-import '../../core/Sidebar/SidebarLogo.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/Icon/Icon.js';
-import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 import { formLayoutTheme } from './FormLayout.theme.js';
 import { FormLayoutSection } from './FormLayoutSection.js';
 import { FormLayoutFooter } from './FormLayoutFooter.js';
+import { Separator } from '../../core/Separator/Separator.js';
 
 const isFooter = (child) => React__default.isValidElement(child) && child.type === FormLayoutFooter;
 const FormLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {

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

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

package/dist/components/layout/Grid/Grid.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { gridTheme } from './Grid.theme.js';
+
+const clampCols = (n) => Math.min(12, Math.max(1, Math.round(n)));
+/** Turn a `cols` value into a space-separated literal class string. */
+function resolveCols(cols, theme) {
+    var _a;
+    if (typeof cols === "number") {
+        return (_a = theme.colsRamp[clampCols(cols)]) !== null && _a !== void 0 ? _a : theme.colsRamp[1];
+    }
+    const parts = [];
+    Object.keys(cols).forEach((bp) => {
+        var _a;
+        const n = cols[bp];
+        if (typeof n === "number") {
+            const cls = (_a = theme.cols[bp]) === null || _a === void 0 ? void 0 : _a[clampCols(n)];
+            if (cls)
+                parts.push(cls);
+        }
+    });
+    return parts.join(" ");
+}
+const Grid = React__default.forwardRef(({ cols = 1, gap = 4, flow, align, justify, className, theme: customTheme = {}, ...props }, ref) => {
+    const theme = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        return ({
+            ...gridTheme,
+            ...customTheme,
+            colsRamp: { ...gridTheme.colsRamp, ...customTheme.colsRamp },
+            cols: {
+                base: { ...gridTheme.cols.base, ...(_a = customTheme.cols) === null || _a === void 0 ? void 0 : _a.base },
+                sm: { ...gridTheme.cols.sm, ...(_b = customTheme.cols) === null || _b === void 0 ? void 0 : _b.sm },
+                md: { ...gridTheme.cols.md, ...(_c = customTheme.cols) === null || _c === void 0 ? void 0 : _c.md },
+                lg: { ...gridTheme.cols.lg, ...(_d = customTheme.cols) === null || _d === void 0 ? void 0 : _d.lg },
+                xl: { ...gridTheme.cols.xl, ...(_e = customTheme.cols) === null || _e === void 0 ? void 0 : _e.xl },
+                "2xl": { ...gridTheme.cols["2xl"], ...(_f = customTheme.cols) === null || _f === void 0 ? void 0 : _f["2xl"] },
+            },
+            gaps: { ...gridTheme.gaps, ...customTheme.gaps },
+            flow: { ...gridTheme.flow, ...customTheme.flow },
+            align: { ...gridTheme.align, ...customTheme.align },
+            justify: { ...gridTheme.justify, ...customTheme.justify },
+        });
+    }, [customTheme]);
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, resolveCols(cols, theme), theme.gaps[gap], flow && theme.flow[flow], align && theme.align[align], justify && theme.justify[justify], className), ...props }));
+});
+Grid.displayName = "Grid";
+
+export { Grid };

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

@@ -0,0 +1,2 @@
+import { GridTheme } from "./Grid.types";
+export declare const gridTheme: GridTheme;

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

@@ -0,0 +1,35 @@
+// ⚠️ PURGE-SAFETY: every class below MUST stay a verbatim literal string.
+// Tailwind v4 scans this file's source text to decide which classes to emit —
+// it cannot see runtime-built strings. Do NOT "simplify" these tables into a
+// generated/interpolated form (e.g. `${bp}grid-cols-${n}`): that drops the
+// literals from the scan and silently breaks the grid in production CSS.
+const COLS_BASE = { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4", 5: "grid-cols-5", 6: "grid-cols-6", 7: "grid-cols-7", 8: "grid-cols-8", 9: "grid-cols-9", 10: "grid-cols-10", 11: "grid-cols-11", 12: "grid-cols-12" };
+const COLS_SM = { 1: "sm:grid-cols-1", 2: "sm:grid-cols-2", 3: "sm:grid-cols-3", 4: "sm:grid-cols-4", 5: "sm:grid-cols-5", 6: "sm:grid-cols-6", 7: "sm:grid-cols-7", 8: "sm:grid-cols-8", 9: "sm:grid-cols-9", 10: "sm:grid-cols-10", 11: "sm:grid-cols-11", 12: "sm:grid-cols-12" };
+const COLS_MD = { 1: "md:grid-cols-1", 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4", 5: "md:grid-cols-5", 6: "md:grid-cols-6", 7: "md:grid-cols-7", 8: "md:grid-cols-8", 9: "md:grid-cols-9", 10: "md:grid-cols-10", 11: "md:grid-cols-11", 12: "md:grid-cols-12" };
+const COLS_LG = { 1: "lg:grid-cols-1", 2: "lg:grid-cols-2", 3: "lg:grid-cols-3", 4: "lg:grid-cols-4", 5: "lg:grid-cols-5", 6: "lg:grid-cols-6", 7: "lg:grid-cols-7", 8: "lg:grid-cols-8", 9: "lg:grid-cols-9", 10: "lg:grid-cols-10", 11: "lg:grid-cols-11", 12: "lg:grid-cols-12" };
+const COLS_XL = { 1: "xl:grid-cols-1", 2: "xl:grid-cols-2", 3: "xl:grid-cols-3", 4: "xl:grid-cols-4", 5: "xl:grid-cols-5", 6: "xl:grid-cols-6", 7: "xl:grid-cols-7", 8: "xl:grid-cols-8", 9: "xl:grid-cols-9", 10: "xl:grid-cols-10", 11: "xl:grid-cols-11", 12: "xl:grid-cols-12" };
+const COLS_2XL = { 1: "2xl:grid-cols-1", 2: "2xl:grid-cols-2", 3: "2xl:grid-cols-3", 4: "2xl:grid-cols-4", 5: "2xl:grid-cols-5", 6: "2xl:grid-cols-6", 7: "2xl:grid-cols-7", 8: "2xl:grid-cols-8", 9: "2xl:grid-cols-9", 10: "2xl:grid-cols-10", 11: "2xl:grid-cols-11", 12: "2xl:grid-cols-12" };
+const gridTheme = {
+    baseStyle: "grid",
+    colsRamp: {
+        1: "grid-cols-1",
+        2: "grid-cols-1 sm:grid-cols-2",
+        3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+        5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",
+        6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
+        7: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7",
+        8: "grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8",
+        9: "grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-9",
+        10: "grid-cols-3 sm:grid-cols-5 lg:grid-cols-6 xl:grid-cols-10",
+        11: "grid-cols-3 sm:grid-cols-5 lg:grid-cols-6 xl:grid-cols-11",
+        12: "grid-cols-3 sm:grid-cols-6 lg:grid-cols-6 xl:grid-cols-12",
+    },
+    cols: { base: COLS_BASE, sm: COLS_SM, md: COLS_MD, lg: COLS_LG, xl: COLS_XL, "2xl": COLS_2XL },
+    gaps: { 0: "gap-0", 1: "gap-1", 2: "gap-2", 3: "gap-3", 4: "gap-4", 5: "gap-5", 6: "gap-6", 8: "gap-8", 10: "gap-10", 12: "gap-12" },
+    flow: { row: "grid-flow-row", col: "grid-flow-col", dense: "grid-flow-row-dense" },
+    align: { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" },
+    justify: { start: "justify-start", center: "justify-center", end: "justify-end", between: "justify-between" },
+};
+
+export { gridTheme };

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

@@ -0,0 +1,57 @@
+import { HTMLAttributes } from "react";
+/** Tailwind v4 default breakpoints; "base" = unprefixed (mobile-first). */
+export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
+/** Tailwind spacing scale → gap-0 … gap-12. Use className for exotic values. */
+export type GridGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+export type GridFlow = "row" | "col" | "dense";
+export type GridAlign = "start" | "center" | "end" | "stretch";
+export type GridJustify = "start" | "center" | "end" | "between";
+/** A single column count (mobile-safe auto-ramp) OR an explicit per-breakpoint map. */
+export type GridCols = number | Partial<Record<Breakpoint, number>>;
+export interface GridTheme {
+    baseStyle: string;
+    /** cols={n} → a full responsive class string (mobile-first ramp). */
+    colsRamp: Record<number, string>;
+    /** cols={{ md: 2 }} → per-breakpoint literal class tables. */
+    cols: Record<Breakpoint, Record<number, string>>;
+    gaps: Record<GridGap, string>;
+    flow: Record<GridFlow, string>;
+    align: Record<GridAlign, string>;
+    justify: Record<GridJustify, string>;
+}
+export interface GridThemeOverrides {
+    baseStyle?: string;
+    colsRamp?: Partial<Record<number, string>>;
+    cols?: Partial<Record<Breakpoint, Record<number, string>>>;
+    gaps?: Partial<Record<GridGap, string>>;
+    flow?: Partial<Record<GridFlow, string>>;
+    align?: Partial<Record<GridAlign, string>>;
+    justify?: Partial<Record<GridJustify, string>>;
+}
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Columns: a number (mobile-safe auto-ramp) or a per-breakpoint map.
+     *
+     * A number is NOT a literal column count on every screen — it expands through
+     * a mobile-first responsive ramp, e.g. `cols={3}` renders 1 column on mobile,
+     * 2 from `sm`, and 3 from `lg`. Use a per-breakpoint map
+     * (`cols={{ base: 3 }}` or `{ base: 1, md: 2, lg: 3 }`) for explicit control.
+     * @default 1
+     */
+    cols?: GridCols;
+    /**
+     * Gap between grid cells (Tailwind spacing scale → gap-N).
+     * @default 4
+     */
+    gap?: GridGap;
+    /** Grid auto-flow direction. */
+    flow?: GridFlow;
+    /** align-items within cells. */
+    align?: GridAlign;
+    /** justify-content of tracks. */
+    justify?: GridJustify;
+    /** Custom class name (always wins). */
+    className?: string;
+    /** Component-level theme overrides. */
+    theme?: GridThemeOverrides;
+}

package/dist/components/layout/Grid/index.d.ts

@@ -0,0 +1,3 @@
+export { Grid } from "./Grid";
+export type { GridProps, GridTheme, GridThemeOverrides, GridCols, GridGap, GridFlow, GridAlign, GridJustify, Breakpoint, } from "./Grid.types";
+export { gridTheme } from "./Grid.theme";

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

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

package/dist/components/layout/Section/Section.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { sectionTheme } from './Section.theme.js';
+
+const Section = React__default.forwardRef(({ title, subtitle, actions, gap = 4, className, theme: customTheme = {}, children, ...props }, ref) => {
+    const headingId = React__default.useId();
+    const theme = useMemo(() => ({
+        ...sectionTheme,
+        ...customTheme,
+        bodyGaps: { ...sectionTheme.bodyGaps, ...customTheme.bodyGaps },
+    }), [customTheme]);
+    const hasHeader = Boolean(title || subtitle || actions);
+    return (jsxs("section", { ref: ref, className: cn(theme.baseStyle, className), "aria-labelledby": title ? headingId : undefined, ...props, children: [hasHeader && (jsxs("div", { className: theme.header, children: [jsxs("div", { children: [title && jsx("h2", { id: headingId, className: theme.title, children: title }), subtitle && jsx("p", { className: theme.subtitle, children: subtitle })] }), actions && jsx("div", { className: theme.actions, children: actions })] })), children != null && (jsx("div", { className: cn(hasHeader && theme.bodyGaps[gap]), children: children }))] }));
+});
+Section.displayName = "Section";
+
+export { Section };

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

@@ -0,0 +1,2 @@
+import { SectionTheme } from "./Section.types";
+export declare const sectionTheme: SectionTheme;

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

@@ -0,0 +1,10 @@
+const sectionTheme = {
+    baseStyle: "block",
+    header: "flex items-start justify-between gap-4",
+    title: "text-base font-semibold text-[var(--color-text-primary)]",
+    subtitle: "mt-0.5 text-sm text-[var(--color-text-secondary)]",
+    actions: "flex shrink-0 items-center gap-2",
+    bodyGaps: { 0: "mt-0", 1: "mt-1", 2: "mt-2", 3: "mt-3", 4: "mt-4", 5: "mt-5", 6: "mt-6", 8: "mt-8", 10: "mt-10", 12: "mt-12" },
+};
+
+export { sectionTheme };

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

@@ -0,0 +1,34 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { GridGap } from "../Grid/Grid.types";
+export interface SectionTheme {
+    baseStyle: string;
+    header: string;
+    title: string;
+    subtitle: string;
+    actions: string;
+    /** Spacing (margin-top) between the header and the body. */
+    bodyGaps: Record<GridGap, string>;
+}
+export interface SectionThemeOverrides {
+    baseStyle?: string;
+    header?: string;
+    title?: string;
+    subtitle?: string;
+    actions?: string;
+    bodyGaps?: Partial<Record<GridGap, string>>;
+}
+export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Section heading. */
+    title?: ReactNode;
+    /** Secondary line under the title. */
+    subtitle?: ReactNode;
+    /** Right-aligned actions in the header row. */
+    actions?: ReactNode;
+    /**
+     * Spacing between the header and the body (Tailwind spacing scale → mt-N).
+     * @default 4
+     */
+    gap?: GridGap;
+    className?: string;
+    theme?: SectionThemeOverrides;
+}

package/dist/components/layout/Section/index.d.ts

@@ -0,0 +1,3 @@
+export { Section } from "./Section";
+export type { SectionProps, SectionTheme, SectionThemeOverrides } from "./Section.types";
+export { sectionTheme } from "./Section.theme";

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

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

package/dist/components/layout/Stack/Stack.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { stackTheme } from './Stack.theme.js';
+
+const Stack = React__default.forwardRef(({ direction = "col", gap = 4, align, justify, wrap = false, className, theme: customTheme = {}, ...props }, ref) => {
+    const theme = useMemo(() => ({
+        ...stackTheme,
+        ...customTheme,
+        direction: { ...stackTheme.direction, ...customTheme.direction },
+        gaps: { ...stackTheme.gaps, ...customTheme.gaps },
+        align: { ...stackTheme.align, ...customTheme.align },
+        justify: { ...stackTheme.justify, ...customTheme.justify },
+    }), [customTheme]);
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, theme.direction[direction], theme.gaps[gap], align && theme.align[align], justify && theme.justify[justify], wrap && theme.wrap, className), ...props }));
+});
+Stack.displayName = "Stack";
+
+export { Stack };

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

@@ -0,0 +1,2 @@
+import { StackTheme } from "./Stack.types";
+export declare const stackTheme: StackTheme;

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

@@ -0,0 +1,10 @@
+const stackTheme = {
+    baseStyle: "flex",
+    direction: { row: "flex-row", col: "flex-col" },
+    gaps: { 0: "gap-0", 1: "gap-1", 2: "gap-2", 3: "gap-3", 4: "gap-4", 5: "gap-5", 6: "gap-6", 8: "gap-8", 10: "gap-10", 12: "gap-12" },
+    align: { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" },
+    justify: { start: "justify-start", center: "justify-center", end: "justify-end", between: "justify-between" },
+    wrap: "flex-wrap",
+};
+
+export { stackTheme };

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

@@ -0,0 +1,39 @@
+import { HTMLAttributes } from "react";
+import { GridGap, GridAlign, GridJustify } from "../Grid/Grid.types";
+export type StackDirection = "row" | "col";
+export interface StackTheme {
+    baseStyle: string;
+    direction: Record<StackDirection, string>;
+    gaps: Record<GridGap, string>;
+    align: Record<GridAlign, string>;
+    justify: Record<GridJustify, string>;
+    wrap: string;
+}
+export interface StackThemeOverrides {
+    baseStyle?: string;
+    direction?: Partial<Record<StackDirection, string>>;
+    gaps?: Partial<Record<GridGap, string>>;
+    align?: Partial<Record<GridAlign, string>>;
+    justify?: Partial<Record<GridJustify, string>>;
+    wrap?: string;
+}
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Flex direction.
+     * @default "col"
+     */
+    direction?: StackDirection;
+    /**
+     * Gap between items (Tailwind spacing scale → gap-N).
+     * @default 4
+     */
+    gap?: GridGap;
+    /** align-items. */
+    align?: GridAlign;
+    /** justify-content. */
+    justify?: GridJustify;
+    /** Allow items to wrap. */
+    wrap?: boolean;
+    className?: string;
+    theme?: StackThemeOverrides;
+}

package/dist/components/layout/Stack/index.d.ts

@@ -0,0 +1,3 @@
+export { Stack } from "./Stack";
+export type { StackProps, StackTheme, StackThemeOverrides, StackDirection } from "./Stack.types";
+export { stackTheme } from "./Stack.theme";

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

@@ -1,2 +1,6 @@
 export * from "./FormLayout";
 export * from "./PageLayout";
+export * from "./AppShell";
+export * from "./Grid";
+export * from "./Stack";
+export * from "./Section";

package/dist/components/layout/index.js

@@ -2,3 +2,11 @@ export { FormLayout } from './FormLayout/FormLayout.js';
 export { formLayoutTheme } from './FormLayout/FormLayout.theme.js';
 export { PageLayout } from './PageLayout/PageLayout.js';
 export { pageLayoutTheme } from './PageLayout/PageLayout.theme.js';
+export { AppShell } from './AppShell/AppShell.js';
+export { appShellTheme, getAppShellTheme } from './AppShell/AppShell.theme.js';
+export { Grid } from './Grid/Grid.js';
+export { gridTheme } from './Grid/Grid.theme.js';
+export { Stack } from './Stack/Stack.js';
+export { stackTheme } from './Stack/Stack.theme.js';
+export { Section } from './Section/Section.js';
+export { sectionTheme } from './Section/Section.theme.js';