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

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

@@ -1,21 +1,56 @@
 import React from "react";
 export interface PageLayoutTheme {
     root: string;
+    shell: string;
+    sidebarLayout: string;
+    topbarLayout: string;
     sidebar: string;
+    sidebarScroll: string;
     sidebarCollapsed: string;
     main: string;
     header: string;
     content: string;
+    contentScroll: string;
+    contentInner: string;
+    contentPadding: Record<PageLayoutContentPadding, string>;
+    contentWidth: Record<PageLayoutContentWidth, string>;
 }
 export interface PageLayoutThemeOverrides {
     root?: string;
+    shell?: string;
+    sidebarLayout?: string;
+    topbarLayout?: string;
     sidebar?: string;
+    sidebarScroll?: string;
     sidebarCollapsed?: string;
     main?: string;
     header?: string;
     content?: string;
+    contentScroll?: string;
+    contentInner?: string;
+    contentPadding?: Partial<Record<PageLayoutContentPadding, string>>;
+    contentWidth?: Partial<Record<PageLayoutContentWidth, string>>;
 }
+export type PageLayoutVariant = "auto" | "sidebar" | "topbar";
+export type PageLayoutContentWidth = "full" | "wide" | "contained";
+export type PageLayoutContentPadding = "none" | "sm" | "md" | "lg";
 export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Layout variant. "auto" uses sidebar layout when a PageLayout.Sidebar child
+     * is present, otherwise it uses the topbar layout.
+     * @default "auto"
+     */
+    variant?: PageLayoutVariant;
+    /**
+     * Maximum content width applied to PageLayout.Content children.
+     * @default "full"
+     */
+    contentWidth?: PageLayoutContentWidth;
+    /**
+     * Responsive padding applied to PageLayout.Content children.
+     * @default "md"
+     */
+    contentPadding?: PageLayoutContentPadding;
     /** Theme overrides for the root container. */
     theme?: PageLayoutThemeOverrides;
 }
@@ -34,6 +69,16 @@ export interface PageLayoutHeaderProps extends React.HTMLAttributes<HTMLElement>
     theme?: PageLayoutThemeOverrides;
 }
 export interface PageLayoutContentProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Maximum content width. Inherits from PageLayout when omitted.
+     * @default "full"
+     */
+    contentWidth?: PageLayoutContentWidth;
+    /**
+     * Responsive padding. Inherits from PageLayout when omitted.
+     * @default "md"
+     */
+    contentPadding?: PageLayoutContentPadding;
     /** Theme overrides for the content area. */
     theme?: PageLayoutThemeOverrides;
 }

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

@@ -1,11 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { pageLayoutTheme } from './PageLayout.theme.js';
+import { ScrollArea } from '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import { getPageLayoutTheme } 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 }));
+const PageLayoutContent = React__default.forwardRef(({ className, theme: customTheme, contentWidth = "full", contentPadding = "md", children, ...props }, ref) => {
+    const theme = getPageLayoutTheme(customTheme);
+    return (jsx("main", { ref: ref, className: cn(theme.content, className), ...props, children: jsx(ScrollArea, { type: "hover", size: "thin", className: theme.contentScroll, children: jsx("div", { className: cn(theme.contentInner, theme.contentWidth[contentWidth], theme.contentPadding[contentPadding]), children: children }) }) }));
 });
 PageLayoutContent.displayName = "PageLayout.Content";
 

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

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { pageLayoutTheme } from './PageLayout.theme.js';
+import { getPageLayoutTheme } 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 }));
+    const theme = getPageLayoutTheme(customTheme);
+    return (jsx("header", { ref: ref, className: cn(theme.header, sticky && "sticky top-0 z-20", className), ...props, children: children }));
 });
 PageLayoutHeader.displayName = "PageLayout.Header";
 

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

@@ -1,11 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { pageLayoutTheme } from './PageLayout.theme.js';
+import { ScrollArea } from '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import { getPageLayoutTheme } 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 }));
+    const theme = getPageLayoutTheme(customTheme);
+    return (jsx("aside", { ref: ref, className: cn(theme.sidebar, collapsedOnMobile && theme.sidebarCollapsed, className), style: { width, ...style }, ...props, children: jsx(ScrollArea, { type: "hover", size: "thin", className: theme.sidebarScroll, children: children }) }));
 });
 PageLayoutSidebar.displayName = "PageLayout.Sidebar";
 

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

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

package/dist/index.js

@@ -96,12 +96,11 @@ export { SidebarContent } from './components/core/Sidebar/SidebarContent.js';
 export { SidebarFooter } from './components/core/Sidebar/SidebarFooter.js';
 export { SidebarNav } from './components/core/Sidebar/SidebarNav.js';
 export { SidebarNavGroup } from './components/core/Sidebar/SidebarNavGroup.js';
-export { SidebarSubmenu } from './components/core/Sidebar/SidebarSubmenu.js';
 export { SidebarToggle } from './components/core/Sidebar/SidebarToggle.js';
 export { SidebarMobileTrigger } from './components/core/Sidebar/SidebarMobileTrigger.js';
 export { SidebarUserProfile } from './components/core/Sidebar/SidebarUserProfile.js';
 export { SidebarLogo } from './components/core/Sidebar/SidebarLogo.js';
-export { useSidebarContext } from './components/core/Sidebar/SidebarContext.js';
+export { SidebarProvider, useSidebarContext } from './components/core/Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './components/core/OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './components/core/OfflineIndicator/OfflineIndicator.theme.js';
 export { ContextMenu } from './components/core/ContextMenu/ContextMenu.js';
@@ -110,6 +109,7 @@ export { Pill } from './components/core/Pill/Pill.js';
 export { pillTheme } from './components/core/Pill/Pill.theme.js';
 export { Icon } from './components/core/Icon/Icon.js';
 export { fileTypes } from './components/core/Icon/data/fileTypes.js';
+export { ImagePlaceholder } from './components/core/ImagePlaceholder/ImagePlaceholder.js';
 export { Table } from './components/data-display/Table/index.js';
 export { KPI } from './components/data-display/KPI/KPI.js';
 export { kpiTheme } from './components/data-display/KPI/KPI.theme.js';