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

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,91 @@
+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/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/hooks/useSelectPortal.d.ts

@@ -6,6 +6,8 @@ export interface UseSimpleDropdownOptions {
     offset?: number;
     estimatedWidth?: number;
     autoWidth?: boolean;
+    onClose?: () => void;
+    stickyTracking?: boolean;
 }
 export interface SimpleDropdownReturn {
     position: {
@@ -24,5 +26,5 @@ export interface SimpleDropdownReturn {
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
-export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;