flikkui 0.1.0-beta.2

package/dist/components/core/Tabs/TabsContent.js

@@ -0,0 +1,29 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { tabsContentTheme } from './Tabs.theme.js';
+import { useTabsContext } from './TabsContext.js';
+
+/**
+ * TabsContent component displays content panels for tabs
+ */
+var TabsContent = React__default.forwardRef(function (_a, ref) {
+    var value = _a.value, _b = _a.forceMount, forceMount = _b === void 0 ? false : _b, children = _a.children, className = _a.className, theme = _a.theme, props = __rest(_a, ["value", "forceMount", "children", "className", "theme"]);
+    var _c = useTabsContext(), selectedValue = _c.value, orientation = _c.orientation;
+    var isSelected = value === selectedValue;
+    var shouldRender = forceMount || isSelected;
+    // Merge theme overrides
+    var mergedTheme = {
+        baseStyle: (theme === null || theme === void 0 ? void 0 : theme.baseStyle) || tabsContentTheme.baseStyle,
+        orientations: __assign(__assign({}, tabsContentTheme.orientations), theme === null || theme === void 0 ? void 0 : theme.orientations),
+    };
+    if (!shouldRender) {
+        return null;
+    }
+    return (React__default.createElement("div", __assign({ ref: ref, role: "tabpanel", "aria-labelledby": "".concat(value, "-tab"), id: "".concat(value, "-content"), tabIndex: 0, hidden: !isSelected && !forceMount, className: cn(mergedTheme.baseStyle, mergedTheme.orientations[orientation], !isSelected && forceMount && "hidden", // Hide when not selected but force mounted
+        className // User overrides take precedence
+        ), "data-state": isSelected ? "active" : "inactive", "data-orientation": orientation }, props), children));
+});
+TabsContent.displayName = "TabsContent";
+
+export { TabsContent };

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { TabsContextValue } from "./Tabs.types";
+/**
+ * Context for sharing state between Tabs container and child components
+ */
+export declare const TabsContext: React.Context<TabsContextValue | null>;
+/**
+ * Hook to consume TabsContext
+ */
+export declare const useTabsContext: () => TabsContextValue;

package/dist/components/core/Tabs/TabsContext.js

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Context for sharing state between Tabs container and child components
+ */
+var TabsContext = createContext(null);
+/**
+ * Hook to consume TabsContext
+ */
+var useTabsContext = function () {
+    var context = useContext(TabsContext);
+    if (!context) {
+        throw new Error("Tabs components must be used within a Tabs component");
+    }
+    return context;
+};
+
+export { TabsContext, useTabsContext };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { TabsListProps } from "./Tabs.types";
+/**
+ * TabsList component displays the tab headers container
+ */
+export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Tabs/TabsList.js

@@ -0,0 +1,24 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { tabsListTheme } from './Tabs.theme.js';
+import { useTabsContext } from './TabsContext.js';
+
+/**
+ * TabsList component displays the tab headers container
+ */
+var TabsList = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, theme = _a.theme, props = __rest(_a, ["children", "className", "theme"]);
+    var _b = useTabsContext(), orientation = _b.orientation, size = _b.size;
+    // Merge theme overrides
+    var mergedTheme = {
+        baseStyle: (theme === null || theme === void 0 ? void 0 : theme.baseStyle) || tabsListTheme.baseStyle,
+        orientations: __assign(__assign({}, tabsListTheme.orientations), theme === null || theme === void 0 ? void 0 : theme.orientations),
+        sizes: __assign(__assign({}, tabsListTheme.sizes), theme === null || theme === void 0 ? void 0 : theme.sizes),
+    };
+    return (React__default.createElement("div", __assign({ ref: ref, role: "tablist", "aria-orientation": orientation, className: cn(mergedTheme.baseStyle, mergedTheme.orientations[orientation], mergedTheme.sizes[size], className // User overrides take precedence
+        ), "data-orientation": orientation, "data-size": size }, props), children));
+});
+TabsList.displayName = "TabsList";
+
+export { TabsList };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { TabsTriggerProps } from "./Tabs.types";
+/**
+ * TabsTrigger component displays individual tab headers
+ */
+export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/core/Tabs/TabsTrigger.js

@@ -0,0 +1,84 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { tabsTriggerTheme } from './Tabs.theme.js';
+import { useTabsContext } from './TabsContext.js';
+
+/**
+ * TabsTrigger component displays individual tab headers
+ */
+var TabsTrigger = React__default.forwardRef(function (_a, ref) {
+    var value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, children = _a.children, className = _a.className, theme = _a.theme, onClick = _a.onClick, onKeyDown = _a.onKeyDown, props = __rest(_a, ["value", "disabled", "children", "className", "theme", "onClick", "onKeyDown"]);
+    var _c = useTabsContext(), selectedValue = _c.value, onValueChange = _c.onValueChange, orientation = _c.orientation, size = _c.size, contextDisabled = _c.disabled;
+    var isSelected = value === selectedValue;
+    var isDisabled = disabled || contextDisabled;
+    var handleClick = function (event) {
+        if (isDisabled)
+            return;
+        onValueChange(value);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    var handleKeyDown = function (event) {
+        var _a, _b;
+        // Handle keyboard navigation for tabs
+        if (!isDisabled) {
+            switch (event.key) {
+                case "ArrowLeft":
+                case "ArrowUp":
+                    event.preventDefault();
+                    // Move to previous tab - focus previous trigger
+                    var prevTrigger = event.currentTarget.previousElementSibling;
+                    if (prevTrigger && prevTrigger.tagName === 'BUTTON' && !prevTrigger.disabled) {
+                        prevTrigger.focus();
+                        prevTrigger.click();
+                    }
+                    break;
+                case "ArrowRight":
+                case "ArrowDown":
+                    event.preventDefault();
+                    // Move to next tab - focus next trigger
+                    var nextTrigger = event.currentTarget.nextElementSibling;
+                    if (nextTrigger && nextTrigger.tagName === 'BUTTON' && !nextTrigger.disabled) {
+                        nextTrigger.focus();
+                        nextTrigger.click();
+                    }
+                    break;
+                case "Home":
+                    event.preventDefault();
+                    // Move to first tab
+                    var firstTrigger = (_a = event.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+                    if (firstTrigger && firstTrigger.tagName === 'BUTTON' && !firstTrigger.disabled) {
+                        firstTrigger.focus();
+                        firstTrigger.click();
+                    }
+                    break;
+                case "End":
+                    event.preventDefault();
+                    // Move to last tab
+                    var lastTrigger = (_b = event.currentTarget.parentElement) === null || _b === void 0 ? void 0 : _b.lastElementChild;
+                    if (lastTrigger && lastTrigger.tagName === 'BUTTON' && !lastTrigger.disabled) {
+                        lastTrigger.focus();
+                        lastTrigger.click();
+                    }
+                    break;
+            }
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    // Merge theme overrides
+    var mergedTheme = {
+        baseStyle: (theme === null || theme === void 0 ? void 0 : theme.baseStyle) || tabsTriggerTheme.baseStyle,
+        orientations: __assign(__assign({}, tabsTriggerTheme.orientations), theme === null || theme === void 0 ? void 0 : theme.orientations),
+        sizes: __assign(__assign({}, tabsTriggerTheme.sizes), theme === null || theme === void 0 ? void 0 : theme.sizes),
+        selectedStyle: (theme === null || theme === void 0 ? void 0 : theme.selectedStyle) || tabsTriggerTheme.selectedStyle,
+        unselectedStyle: (theme === null || theme === void 0 ? void 0 : theme.unselectedStyle) || tabsTriggerTheme.unselectedStyle,
+        disabledStyle: (theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || tabsTriggerTheme.disabledStyle,
+    };
+    return (React__default.createElement("button", __assign({ ref: ref, type: "button", role: "tab", "aria-selected": isSelected, "aria-controls": "".concat(value, "-content"), id: "".concat(value, "-tab"), tabIndex: isSelected ? 0 : -1, disabled: isDisabled, className: cn(mergedTheme.baseStyle, mergedTheme.orientations[orientation], mergedTheme.sizes[size], isSelected
+            ? mergedTheme.selectedStyle
+            : mergedTheme.unselectedStyle, isDisabled && mergedTheme.disabledStyle, className // User overrides take precedence
+        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-value": value, "data-state": isSelected ? "active" : "inactive", "data-disabled": isDisabled, "data-orientation": orientation }, props), children));
+});
+TabsTrigger.displayName = "TabsTrigger";
+
+export { TabsTrigger };

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

@@ -0,0 +1,9 @@
+import { Tabs } from './Tabs';
+import { TabsContext, useTabsContext } from './TabsContext';
+export { Tabs } from './Tabs';
+export { TabsList } from './TabsList';
+export { TabsTrigger } from './TabsTrigger';
+export { TabsContent } from './TabsContent';
+export { TabsContext, useTabsContext };
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps, TabsSize, TabsOrientation, TabsContextValue, TabsThemeOverrides, TabsListThemeOverrides, TabsTriggerThemeOverrides, TabsContentThemeOverrides } from './Tabs.types';
+export default Tabs;

package/dist/components/core/Tabs/index.js

@@ -0,0 +1,9 @@
+import { Tabs } from './Tabs.js';
+export { TabsContext, useTabsContext } from './TabsContext.js';
+export { TabsList } from './TabsList.js';
+export { TabsTrigger } from './TabsTrigger.js';
+export { TabsContent } from './TabsContent.js';
+
+
+
+export { Tabs, Tabs as default };

package/dist/components/core/Tabs/test-tabs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const TabsExample: () => React.JSX.Element;
+export declare const VerticalTabsExample: () => React.JSX.Element;

package/dist/components/core/Tooltip/Tooltip.animations.d.ts

@@ -0,0 +1,32 @@
+import { Variants } from 'motion/react';
+import { TooltipPlacement } from './Tooltip.types';
+/**
+ * Base animation variants for the tooltip
+ */
+export declare const baseTooltipVariants: Variants;
+/**
+ * Get animation variants based on tooltip placement
+ * @param placement - Tooltip placement (top, right, bottom, left)
+ * @returns Animation variants for the specified placement
+ */
+export declare const getTooltipVariants: (placement: TooltipPlacement) => Variants;
+/**
+ * Spring animation configuration options
+ */
+export declare const tooltipSpringConfig: {
+    light: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+    medium: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+    bouncy: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+};

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TooltipProps } from "./Tooltip.types";
+declare const Tooltip: {
+    ({ content, children, placement, delay, disabled, className, maxWidth, minWidth, showArrow, showOnFocus, wrapText, id, theme: themeOverrides, }: TooltipProps): React.JSX.Element;
+    displayName: string;
+};
+export default Tooltip;

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

@@ -0,0 +1,8 @@
+export declare const tooltipTheme: {
+    baseStyle: string;
+    arrow: string;
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+};

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

@@ -0,0 +1,81 @@
+import { ReactNode } from "react";
+export type TooltipPlacement = "top" | "right" | "bottom" | "left";
+export interface TooltipThemeOverrides {
+    /**
+     * Base style for the tooltip container
+     */
+    baseStyle?: string;
+    /**
+     * Style for the tooltip arrow
+     */
+    arrow?: string;
+    /**
+     * Placement styles
+     */
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+}
+export interface TooltipProps {
+    /**
+     * Content to display in the tooltip
+     */
+    content: ReactNode;
+    /**
+     * The element that triggers the tooltip
+     */
+    children: ReactNode;
+    /**
+     * Tooltip placement relative to the child element
+     * @default "top"
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Delay before showing tooltip (in ms)
+     * @default 300
+     */
+    delay?: number;
+    /**
+     * Whether the tooltip is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes for the tooltip container
+     */
+    className?: string;
+    /**
+     * Max width for the tooltip content
+     * @default "320px"
+     */
+    maxWidth?: string;
+    /**
+     * Min width for the tooltip content
+     * @default "250px"
+     */
+    minWidth?: string;
+    /**
+     * Whether to show an arrow pointing to the trigger element
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * Whether the tooltip should be shown on focus
+     * @default true
+     */
+    showOnFocus?: boolean;
+    /**
+     * Whether to allow text wrapping for longer content
+     * @default false
+     */
+    wrapText?: boolean;
+    /**
+     * ID to be applied to the tooltip element
+     */
+    id?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: TooltipThemeOverrides;
+}

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

@@ -0,0 +1,3 @@
+export { default as Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipThemeOverrides, TooltipPlacement } from './Tooltip.types';
+export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './Tooltip.animations';

package/dist/components/core/Tree/Tree.animations.d.ts

@@ -0,0 +1,5 @@
+import { Variants } from 'motion/react';
+export declare const treeNodeVariants: Variants;
+export declare const expandIconVariants: Variants;
+export declare const nodeSelectionVariants: Variants;
+export declare const nodeHoverVariants: Variants;

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

@@ -0,0 +1,2 @@
+import { TreeComponent } from './Tree.types';
+export declare const Tree: TreeComponent;

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

@@ -0,0 +1,2 @@
+import { TreeTheme } from './Tree.types';
+export declare const treeTheme: TreeTheme;

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

@@ -0,0 +1,101 @@
+import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface TreeNode {
+    /** Unique identifier for the node */
+    id: string;
+    /** Display label for the node */
+    label: string;
+    /** Child nodes */
+    children?: TreeNode[];
+    /** Whether the node is expanded (only for nodes with children) */
+    expanded?: boolean;
+    /** Whether the node is selected */
+    selected?: boolean;
+    /** Whether the node is disabled */
+    disabled?: boolean;
+    /** Custom icon for the node */
+    icon?: ReactNode;
+    /** Additional data attached to the node */
+    data?: any;
+}
+export interface TreeTheme {
+    baseStyle: string;
+    nodeStyle: string;
+    labelStyle: string;
+    iconStyle: string;
+    expandIconStyle: string;
+    indentSize: string;
+}
+export interface TreeThemeOverrides {
+    baseStyle?: string;
+    nodeStyle?: string;
+    labelStyle?: string;
+    iconStyle?: string;
+    expandIconStyle?: string;
+    indentSize?: string;
+}
+export interface TreeProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tree data structure */
+    data: TreeNode[];
+    /** Whether nodes can be selected */
+    selectable?: boolean;
+    /** Whether to show checkboxes for multi-selection */
+    checkable?: boolean;
+    /** Whether nodes can be expanded/collapsed */
+    expandable?: boolean;
+    /** Keys of nodes that are expanded by default */
+    defaultExpandedKeys?: string[];
+    /** Keys of nodes that are selected by default */
+    defaultSelectedKeys?: string[];
+    /** Controlled expanded keys */
+    expandedKeys?: string[];
+    /** Controlled selected keys */
+    selectedKeys?: string[];
+    /** Callback when a node is selected */
+    onSelect?: (selectedKeys: string[], node: TreeNode) => void;
+    /** Callback when a node is expanded/collapsed */
+    onExpand?: (expandedKeys: string[], node: TreeNode, expanded: boolean) => void;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: TreeThemeOverrides;
+}
+export interface TreeNodeProps extends HTMLAttributes<HTMLDivElement> {
+    /** Node data */
+    node: TreeNode;
+    /** Current nesting level */
+    level?: number;
+    /** Whether the node is expanded */
+    expanded?: boolean;
+    /** Whether the node is selected */
+    selected?: boolean;
+    /** Whether selection is enabled */
+    selectable?: boolean;
+    /** Whether checkboxes are shown */
+    checkable?: boolean;
+    /** Whether expand/collapse is enabled */
+    expandable?: boolean;
+    /** Click handler for the node */
+    onClick?: (node: TreeNode) => void;
+    /** Toggle expand/collapse handler */
+    onToggleExpand?: (node: TreeNode) => void;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: TreeThemeOverrides;
+}
+export interface TreeIconProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Whether the node is expanded */
+    expanded?: boolean;
+    /** Whether the node has children */
+    hasChildren?: boolean;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom class name */
+    className?: string;
+}
+export interface TreeComponent extends ForwardRefExoticComponent<TreeProps & RefAttributes<HTMLDivElement>> {
+    Node: ForwardRefExoticComponent<TreeNodeProps & RefAttributes<HTMLDivElement>>;
+    Icon: ForwardRefExoticComponent<TreeIconProps & RefAttributes<HTMLSpanElement>>;
+}

package/dist/components/core/Tree/TreeIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TreeIconProps } from './Tree.types';
+export declare const TreeIcon: React.ForwardRefExoticComponent<TreeIconProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/core/Tree/TreeNode.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TreeNodeProps } from './Tree.types';
+export declare const TreeNode: React.ForwardRefExoticComponent<TreeNodeProps & {
+    expandedKeys?: string[];
+    selectedKeys?: string[];
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,5 @@
+export { Tree } from './Tree';
+export { TreeNode } from './TreeNode';
+export { TreeIcon } from './TreeIcon';
+export type { TreeProps, TreeNodeProps, TreeIconProps, TreeNode as TreeNodeType, TreeTheme, TreeThemeOverrides, TreeComponent, } from './Tree.types';
+export { treeTheme } from './Tree.theme';

package/dist/components/data-display/Masonry/Masonry.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MasonryProps } from './Masonry.types';
+declare const Masonry: React.FC<MasonryProps>;
+export default Masonry;