@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.4

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/index.d.ts

@@ -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-base font-semibold text-[var(--color-text-primary)]",
+    headerSubtitle: "text-base 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-base font-semibold text-[var(--color-text-primary)]",
+    sectionDescription: "text-sm 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>>;

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

@@ -0,0 +1,12 @@
+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/FormLayout/FormLayoutSection.d.ts

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

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

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formLayoutTheme } from './FormLayout.theme.js';
+
+const FormLayoutSection = React__default.forwardRef(({ title, description, action, className, contentClassName, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...formLayoutTheme, ...customTheme };
+    return (jsxs("section", { ref: ref, className: cn(theme.section, className), ...props, children: [jsxs("div", { className: theme.sectionSidebar, children: [jsx("div", { className: theme.sectionTitle, children: title }), description && (jsx("div", { className: theme.sectionDescription, children: description })), action && jsx("div", { className: theme.sectionAction, children: action })] }), jsx("div", { className: cn(theme.sectionContent, contentClassName), children: children })] }));
+});
+FormLayoutSection.displayName = "FormLayout.Section";
+
+export { FormLayoutSection };

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

@@ -0,0 +1,3 @@
+export { FormLayout } from "./FormLayout";
+export type { FormLayoutProps, FormLayoutHeaderProps, FormLayoutBodyProps, FormLayoutSectionProps, FormLayoutFooterProps, FormLayoutTheme, FormLayoutThemeOverrides, } from "./FormLayout.types";
+export { formLayoutTheme } from "./FormLayout.theme";

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageLayoutTheme } from './PageLayout.theme.js';
+
+const PageLayoutSidebar = React__default.forwardRef(({ width = "16rem", collapsedOnMobile = true, className, theme: customTheme, style, children, ...props }, ref) => {
+    const theme = { ...pageLayoutTheme, ...customTheme };
+    return (jsx("aside", { ref: ref, className: cn(theme.sidebar, collapsedOnMobile && theme.sidebarCollapsed, className), style: { width, ...style }, ...props, children: children }));
+});
+PageLayoutSidebar.displayName = "PageLayout.Sidebar";
+
+export { PageLayoutSidebar };

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

@@ -0,0 +1,3 @@
+export { PageLayout } from "./PageLayout";
+export type { PageLayoutProps, PageLayoutSidebarProps, PageLayoutHeaderProps, PageLayoutContentProps, PageLayoutTheme, PageLayoutThemeOverrides, } from "./PageLayout.types";
+export { pageLayoutTheme } from "./PageLayout.theme";

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

@@ -0,0 +1,2 @@
+export * from "./FormLayout";
+export * from "./PageLayout";

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./components/core";
+export * from "./components/data-display";
 export * from "./components/forms";
 export * from "./components/charts";
+export * from "./components/layout";
 export * from "./components/effects";
 export { cn } from "./utils/cn";
 export { debounce } from "./utils/debounce";