flikkui 0.1.0-beta.11

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

@@ -0,0 +1,30 @@
+import { SegmentedSize } from './Segmented.types';
+/**
+ * Internal theme structure for the Segmented component
+ */
+interface SegmentedTheme {
+    baseStyle: string;
+    sizes: Record<SegmentedSize, string>;
+    blockStyle: string;
+    disabledStyle: string;
+    slidingBackgroundStyle: string;
+}
+/**
+ * Internal theme structure for the SegmentedItem component
+ */
+interface SegmentedItemTheme {
+    baseStyle: string;
+    sizes: Record<SegmentedSize, string>;
+    selectedStyle: string;
+    unselectedStyle: string;
+    disabledStyle: string;
+}
+/**
+ * Default theme for the Segmented component
+ */
+export declare const segmentedTheme: SegmentedTheme;
+/**
+ * Default theme for the SegmentedItem component
+ */
+export declare const segmentedItemTheme: SegmentedItemTheme;
+export {};

package/dist/components/core/Segmented/Segmented.theme.js

@@ -0,0 +1,40 @@
+/**
+ * Default theme for the Segmented component
+ */
+var segmentedTheme = {
+    // Base styles for the segmented container
+    baseStyle: "relative flex rounded-[var(--segmented-rounded)] p-[2px] ",
+    // Size variants using CSS variables
+    sizes: {
+        sm: "min-h-[var(--segmented-min-h-sm)]",
+        md: "min-h-[var(--segmented-min-h-md)]",
+        lg: "min-h-[var(--segmented-min-h-lg)]",
+    },
+    // Block style
+    blockStyle: "w-full",
+    // Disabled style
+    disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
+    // Sliding background style with CSS variables
+    slidingBackgroundStyle: "absolute top-[2px] left-[2px] rounded-[calc(var(--segmented-rounded)-1.5px)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-[var(--segmented-active-bg)] shadow-real-md",
+};
+/**
+ * Default theme for the SegmentedItem component
+ */
+var segmentedItemTheme = {
+    // Base styles for the segmented item
+    baseStyle: "relative flex min-h-full min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-rounded)-1.5px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
+    // Size variants using CSS variables
+    sizes: {
+        sm: "text-[length:var(--segmented-text-size-sm)] px-[var(--segmented-px-sm)]",
+        md: "text-[length:var(--segmented-text-size-md)] px-[var(--segmented-px-md)]",
+        lg: "text-[length:var(--segmented-text-size-lg)] px-[var(--segmented-px-lg)]",
+    },
+    // Selected state
+    selectedStyle: "text-neutral-900 z-10",
+    // Unselected state
+    unselectedStyle: "text-neutral-500 hover:text-neutral-800 ",
+    // Disabled state
+    disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
+};
+
+export { segmentedItemTheme, segmentedTheme };

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

@@ -0,0 +1,52 @@
+import React from "react";
+/**
+ * Size options for the Segmented component
+ */
+export type SegmentedSize = "sm" | "md" | "lg";
+/**
+ * Theme overrides for Segmented component
+ */
+export interface SegmentedThemeOverrides {
+    /** Base styles for the container */
+    baseStyle?: string;
+    /** Size-specific styles */
+    sizes?: Partial<Record<SegmentedSize, string>>;
+    /** Block/full-width styles */
+    blockStyle?: string;
+    /** Disabled state styles */
+    disabledStyle?: string;
+    /** Sliding background styles */
+    slidingBackgroundStyle?: string;
+}
+/**
+ * Segmented component props
+ */
+export interface SegmentedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** The currently selected value (controlled mode) */
+    value?: string;
+    /** Function called when selection changes */
+    onChange?: (value: string) => void;
+    /** Size of the segmented control */
+    size?: SegmentedSize;
+    /** Whether the segmented control is disabled */
+    disabled?: boolean;
+    /** Whether the segmented control should take full width */
+    block?: boolean;
+    /** Children SegmentedItem components */
+    children?: React.ReactNode;
+    /** Custom className for the sliding background */
+    slidingBackgroundClassName?: string;
+    /** Theme overrides for advanced customization */
+    theme?: SegmentedThemeOverrides;
+}
+/**
+ * SegmentedItem component props
+ */
+export interface SegmentedItemProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** The value for this segment */
+    value: string;
+    /** Whether this segment is disabled */
+    disabled?: boolean;
+    /** Children content */
+    children?: React.ReactNode;
+}

package/dist/components/core/Segmented/SegmentedContext.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { SegmentedSize } from "./Segmented.types";
+/**
+ * Context interface for sharing state between Segmented and SegmentedItem
+ */
+interface SegmentedContextValue {
+    selectedValue?: string;
+    onChange?: (value: string) => void;
+    size: SegmentedSize;
+    disabled: boolean;
+}
+/**
+ * Context for sharing state between Segmented container and SegmentedItem components
+ */
+export declare const SegmentedContext: React.Context<SegmentedContextValue | null>;
+export {};

package/dist/components/core/Segmented/SegmentedContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/**
+ * Context for sharing state between Segmented container and SegmentedItem components
+ */
+var SegmentedContext = createContext(null);
+
+export { SegmentedContext };

package/dist/components/core/Segmented/SegmentedItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SegmentedItemProps } from "./Segmented.types";
+export declare const SegmentedItem: React.ForwardRefExoticComponent<SegmentedItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/core/Segmented/SegmentedItem.js

@@ -0,0 +1,30 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { segmentedItemTheme } from './Segmented.theme.js';
+import { SegmentedContext } from './SegmentedContext.js';
+
+var SegmentedItem = 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, onClick = _a.onClick, props = __rest(_a, ["value", "disabled", "children", "className", "onClick"]);
+    var context = useContext(SegmentedContext);
+    if (!context) {
+        throw new Error("SegmentedItem must be used within a Segmented component");
+    }
+    var selectedValue = context.selectedValue, onChange = context.onChange, size = context.size, contextDisabled = context.disabled;
+    var isSelected = value === selectedValue;
+    var isDisabled = disabled || contextDisabled;
+    var handleClick = function (event) {
+        if (isDisabled)
+            return;
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    return (React__default.createElement("button", __assign({ ref: ref, type: "button", role: "tab", "aria-selected": isSelected, disabled: isDisabled, className: cn(segmentedItemTheme.baseStyle, segmentedItemTheme.sizes[size], isSelected
+            ? segmentedItemTheme.selectedStyle
+            : segmentedItemTheme.unselectedStyle, isDisabled && segmentedItemTheme.disabledStyle, className // User overrides take precedence
+        ), onClick: handleClick, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled }, props), children));
+});
+// Set display name for dev tools and Storybook
+SegmentedItem.displayName = "SegmentedItem";
+
+export { SegmentedItem };

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

@@ -0,0 +1,2 @@
+export { Segmented } from './Segmented';
+export type { SegmentedProps, SegmentedItemProps, SegmentedSize } from './Segmented.types';

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

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

package/dist/components/core/Sidebar/Sidebar.js

@@ -0,0 +1,28 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { sidebarTheme } from './Sidebar.theme.js';
+import { useSidebarContext, SidebarProvider } from './SidebarContext.js';
+
+var SidebarContainer = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d;
+    var _e = _a.side, side = _e === void 0 ? 'left' : _e, _f = _a.variant, variant = _f === void 0 ? 'sidebar' : _f, width = _a.width, children = _a.children, className = _a.className, _g = _a.theme, customTheme = _g === void 0 ? {} : _g, props = __rest(_a, ["side", "variant", "width", "children", "className", "theme"]);
+    var context = useSidebarContext();
+    var collapsed = (_b = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _b !== void 0 ? _b : false;
+    var theme = __assign(__assign(__assign({}, sidebarTheme), customTheme), { variants: __assign(__assign({}, sidebarTheme.variants), customTheme.variants), sides: __assign(__assign({}, sidebarTheme.sides), customTheme.sides) });
+    var sidebarClasses = cn(theme.baseStyle, theme.variants[variant], theme.sides[side], className);
+    var widthValue = collapsed
+        ? ((width === null || width === void 0 ? void 0 : width.collapsed) || ((_c = context === null || context === void 0 ? void 0 : context.width) === null || _c === void 0 ? void 0 : _c.collapsed) || 80)
+        : ((width === null || width === void 0 ? void 0 : width.expanded) || ((_d = context === null || context === void 0 ? void 0 : context.width) === null || _d === void 0 ? void 0 : _d.expanded) || 280);
+    return (React__default.createElement("div", __assign({ ref: ref, className: sidebarClasses, "data-side": side, "data-variant": variant, "data-collapsed": collapsed, style: {
+            width: "".concat(widthValue, "px"),
+        } }, props), children));
+});
+var Sidebar = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.side, side = _b === void 0 ? 'left' : _b, _c = _a.variant, variant = _c === void 0 ? 'sidebar' : _c, _d = _a.defaultCollapsed, defaultCollapsed = _d === void 0 ? false : _d, controlledCollapsed = _a.collapsed, onCollapsedChange = _a.onCollapsedChange, width = _a.width, children = _a.children, className = _a.className, _e = _a.theme, customTheme = _e === void 0 ? {} : _e, props = __rest(_a, ["side", "variant", "defaultCollapsed", "collapsed", "onCollapsedChange", "width", "children", "className", "theme"]);
+    return (React__default.createElement(SidebarProvider, { defaultCollapsed: defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange: onCollapsedChange, width: width, side: side, variant: variant },
+        React__default.createElement(SidebarContainer, __assign({ ref: ref, className: className, theme: customTheme, side: side, variant: variant, width: width }, props), children)));
+});
+Sidebar.displayName = 'Sidebar';
+
+export { Sidebar };

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

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

package/dist/components/core/Sidebar/Sidebar.theme.js

@@ -0,0 +1,16 @@
+var sidebarTheme = {
+    baseStyle: 'flex flex-col h-full bg-white border-r border-gray-200 overflow-hidden transition-all duration-300 ease-in-out',
+    variants: {
+        sidebar: 'relative',
+        floating: 'rounded-lg shadow-lg border border-gray-200',
+        inset: 'rounded-lg bg-gray-50 border border-gray-200',
+    },
+    sides: {
+        left: 'border-r',
+        right: 'border-l',
+    },
+    collapsed: 'w-20',
+    expanded: 'w-[280px]', // Using arbitrary value since 280px is not a standard Tailwind width
+};
+
+export { sidebarTheme };

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

@@ -0,0 +1,129 @@
+import { ReactNode } from 'react';
+export type SidebarSide = 'left' | 'right';
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+export interface SidebarContextValue {
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    toggleCollapsed: () => void;
+    width: {
+        expanded: number;
+        collapsed: number;
+    };
+    side: SidebarSide;
+    variant: SidebarVariant;
+}
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Which side the sidebar appears on
+     * @default "left"
+     */
+    side?: SidebarSide;
+    /**
+     * Visual variant of the sidebar
+     * @default "sidebar"
+     */
+    variant?: SidebarVariant;
+    /**
+     * Whether the sidebar is collapsed by default
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Controlled collapsed state
+     */
+    collapsed?: boolean;
+    /**
+     * Callback when collapsed state changes
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Sidebar width configuration
+     */
+    width?: {
+        expanded?: number;
+        collapsed?: number;
+    };
+    /**
+     * Children components
+     */
+    children: ReactNode;
+    /**
+     * Custom theme overrides
+     */
+    theme?: SidebarThemeOverrides;
+}
+export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Logo component to display
+     */
+    logo?: ReactNode;
+    /**
+     * Whether to show the collapse toggle button
+     * @default true
+     */
+    showToggle?: boolean;
+    /**
+     * Custom toggle button
+     */
+    customToggle?: ReactNode;
+    /**
+     * Children for custom header content
+     */
+    children?: ReactNode;
+}
+export interface SidebarContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export interface SidebarNavProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export interface SidebarNavGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title for the navigation group
+     */
+    title?: string;
+    /**
+     * Whether to show the title when sidebar is collapsed
+     * @default false
+     */
+    showTitleWhenCollapsed?: boolean;
+    /**
+     * Children navigation items
+     */
+    children: ReactNode;
+}
+export interface SidebarToggleProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Custom icon for expanded state
+     */
+    expandIcon?: ReactNode;
+    /**
+     * Custom icon for collapsed state
+     */
+    collapseIcon?: ReactNode;
+}
+export interface SidebarTheme {
+    baseStyle: string;
+    variants: {
+        [K in SidebarVariant]: string;
+    };
+    sides: {
+        [K in SidebarSide]: string;
+    };
+    collapsed: string;
+    expanded: string;
+}
+export interface SidebarThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<{
+        [K in SidebarVariant]: string;
+    }>;
+    sides?: Partial<{
+        [K in SidebarSide]: string;
+    }>;
+    collapsed?: string;
+    expanded?: string;
+}

package/dist/components/core/Sidebar/SidebarContent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SidebarContentProps } from './Sidebar.types';
+export declare const SidebarContent: React.ForwardRefExoticComponent<SidebarContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/SidebarContent.js

@@ -0,0 +1,12 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+
+var SidebarContent = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn('flex-1 flex flex-col min-h-0 overflow-hidden', className) }, props),
+        React__default.createElement("div", { className: "flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent" }, children)));
+});
+SidebarContent.displayName = 'SidebarContent';
+
+export { SidebarContent };

package/dist/components/core/Sidebar/SidebarContext.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SidebarContextValue } from './Sidebar.types';
+export declare const useSidebarContext: () => SidebarContextValue | null;
+interface SidebarProviderProps {
+    children: React.ReactNode;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    width?: {
+        expanded?: number;
+        collapsed?: number;
+    };
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+}
+export declare const SidebarProvider: React.FC<SidebarProviderProps>;
+export {};

package/dist/components/core/Sidebar/SidebarContext.js

@@ -0,0 +1,38 @@
+import React__default, { createContext, useContext, useState, useCallback } from 'react';
+
+var SidebarContext = createContext(null);
+var useSidebarContext = function () {
+    var context = useContext(SidebarContext);
+    // Return null if not in sidebar context (allows NavItem to work elsewhere)
+    return context;
+};
+var SidebarProvider = function (_a) {
+    var children = _a.children, _b = _a.defaultCollapsed, defaultCollapsed = _b === void 0 ? false : _b, controlledCollapsed = _a.collapsed, onCollapsedChange = _a.onCollapsedChange, _c = _a.width, width = _c === void 0 ? {} : _c, _d = _a.side, side = _d === void 0 ? 'left' : _d, _e = _a.variant, variant = _e === void 0 ? 'sidebar' : _e;
+    var _f = useState(defaultCollapsed), internalCollapsed = _f[0], setInternalCollapsed = _f[1];
+    // Determine if component is controlled
+    var isControlled = controlledCollapsed !== undefined;
+    var collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    var setCollapsed = useCallback(function (newCollapsed) {
+        if (!isControlled) {
+            setInternalCollapsed(newCollapsed);
+        }
+        onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(newCollapsed);
+    }, [isControlled, onCollapsedChange]);
+    var toggleCollapsed = useCallback(function () {
+        setCollapsed(!collapsed);
+    }, [collapsed, setCollapsed]);
+    var contextValue = {
+        collapsed: collapsed,
+        setCollapsed: setCollapsed,
+        toggleCollapsed: toggleCollapsed,
+        width: {
+            expanded: width.expanded || 280,
+            collapsed: width.collapsed || 80,
+        },
+        side: side,
+        variant: variant,
+    };
+    return (React__default.createElement(SidebarContext.Provider, { value: contextValue }, children));
+};
+
+export { SidebarProvider, useSidebarContext };

package/dist/components/core/Sidebar/SidebarFooter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SidebarFooterProps } from './Sidebar.types';
+export declare const SidebarFooter: React.ForwardRefExoticComponent<SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/SidebarFooter.js

@@ -0,0 +1,11 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+
+var SidebarFooter = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn('flex-shrink-0 border-t border-gray-200 bg-white p-4', className) }, props), children));
+});
+SidebarFooter.displayName = 'SidebarFooter';
+
+export { SidebarFooter };

package/dist/components/core/Sidebar/SidebarHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SidebarHeaderProps } from './Sidebar.types';
+export declare const SidebarHeader: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/SidebarHeader.js

@@ -0,0 +1,22 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import { SidebarToggle } from './SidebarToggle.js';
+
+var SidebarHeader = React__default.forwardRef(function (_a, ref) {
+    var logo = _a.logo, _b = _a.showToggle, showToggle = _b === void 0 ? true : _b, customToggle = _a.customToggle, children = _a.children, className = _a.className, props = __rest(_a, ["logo", "showToggle", "customToggle", "children", "className"]);
+    var sidebarContext = useSidebarContext();
+    var collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    // If children are provided, use them instead of default layout
+    if (children) {
+        return (React__default.createElement("div", __assign({ ref: ref, className: cn('flex-shrink-0 border-b border-gray-200 bg-white', className) }, props), children));
+    }
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn('flex items-center justify-between flex-shrink-0 p-4 border-b border-gray-200 bg-white', className) }, props),
+        logo && (React__default.createElement("div", { className: cn('flex items-center min-w-0', collapsed && 'justify-center w-full') }, logo)),
+        showToggle && !collapsed && (React__default.createElement("div", { className: "flex-shrink-0 ml-4" }, customToggle || React__default.createElement(SidebarToggle, null))),
+        showToggle && collapsed && (React__default.createElement("div", { className: "absolute top-4 right-2" }, customToggle || React__default.createElement(SidebarToggle, null)))));
+});
+SidebarHeader.displayName = 'SidebarHeader';
+
+export { SidebarHeader };

package/dist/components/core/Sidebar/SidebarNav.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SidebarNavProps } from './Sidebar.types';
+export declare const SidebarNav: React.ForwardRefExoticComponent<SidebarNavProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/SidebarNav.js

@@ -0,0 +1,11 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+
+var SidebarNav = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (React__default.createElement("nav", __assign({ ref: ref, className: cn('flex-1 space-y-1 p-4', className), role: "navigation" }, props), children));
+});
+SidebarNav.displayName = 'SidebarNav';
+
+export { SidebarNav };

package/dist/components/core/Sidebar/SidebarNavGroup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SidebarNavGroupProps } from './Sidebar.types';
+export declare const SidebarNavGroup: React.ForwardRefExoticComponent<SidebarNavGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/SidebarNavGroup.js

@@ -0,0 +1,19 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+
+var SidebarNavGroup = React__default.forwardRef(function (_a, ref) {
+    var title = _a.title, _b = _a.showTitleWhenCollapsed, showTitleWhenCollapsed = _b === void 0 ? false : _b, children = _a.children, className = _a.className, props = __rest(_a, ["title", "showTitleWhenCollapsed", "children", "className"]);
+    var sidebarContext = useSidebarContext();
+    var collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    var showTitle = title && (!collapsed || showTitleWhenCollapsed);
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn('space-y-1', className) }, props),
+        showTitle && (React__default.createElement("div", { className: "px-3 py-2" },
+            React__default.createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider" }, title))),
+        React__default.createElement("div", { className: "space-y-1" }, children),
+        React__default.createElement("div", { className: "pt-4" })));
+});
+SidebarNavGroup.displayName = 'SidebarNavGroup';
+
+export { SidebarNavGroup };

package/dist/components/core/Sidebar/SidebarToggle.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SidebarToggleProps } from './Sidebar.types';
+export declare const SidebarToggle: React.ForwardRefExoticComponent<SidebarToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/core/Sidebar/SidebarToggle.js

@@ -0,0 +1,28 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/Bars3Icon.js';
+
+var SidebarToggle = React__default.forwardRef(function (_a, ref) {
+    var expandIcon = _a.expandIcon, collapseIcon = _a.collapseIcon, className = _a.className, onClick = _a.onClick, props = __rest(_a, ["expandIcon", "collapseIcon", "className", "onClick"]);
+    var sidebarContext = useSidebarContext();
+    if (!sidebarContext) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('SidebarToggle must be used within a Sidebar component');
+        }
+        return null;
+    }
+    var collapsed = sidebarContext.collapsed, toggleCollapsed = sidebarContext.toggleCollapsed;
+    var handleClick = function (e) {
+        toggleCollapsed();
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    var defaultIcon = (React__default.createElement(ForwardRef, { className: "size-4", "aria-hidden": "true" }));
+    return (React__default.createElement("button", __assign({ ref: ref, type: "button", className: cn('inline-flex items-center justify-center rounded-md p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 transition-colors', className), onClick: handleClick, "aria-label": collapsed ? 'Expand sidebar' : 'Collapse sidebar', title: collapsed ? 'Expand sidebar' : 'Collapse sidebar' }, props), collapsed
+        ? (expandIcon || defaultIcon)
+        : (collapseIcon || defaultIcon)));
+});
+SidebarToggle.displayName = 'SidebarToggle';
+
+export { SidebarToggle };

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

@@ -0,0 +1,9 @@
+export { Sidebar } from './Sidebar';
+export { SidebarHeader } from './SidebarHeader';
+export { SidebarContent } from './SidebarContent';
+export { SidebarFooter } from './SidebarFooter';
+export { SidebarNav } from './SidebarNav';
+export { SidebarNavGroup } from './SidebarNavGroup';
+export { SidebarToggle } from './SidebarToggle';
+export { useSidebarContext } from './SidebarContext';
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from './Sidebar.types';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { SkeletonProps } from './Skeleton.types';
+/**
+ * Skeleton component - Loading placeholder that mimics content shape
+ *
+ * Features:
+ * - Multiple variants: text, circular, rectangle
+ * - Customizable dimensions
+ * - Pulse animation
+ * - Multi-line support for text variant
+ * - Full theme customization
+ *
+ * @example
+ * // Text lines
+ * <Skeleton variant="text" lines={3} />
+ *
+ * // Avatar placeholder
+ * <Skeleton variant="circular" width={40} height={40} />
+ *
+ * // Card placeholder
+ * <Skeleton variant="rectangle" width="100%" height={200} />
+ */
+declare const Skeleton: React.FC<SkeletonProps>;
+export { Skeleton };

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

@@ -0,0 +1,15 @@
+import { SkeletonVariant } from "./Skeleton.types";
+/**
+ * Internal theme structure for the Skeleton component
+ */
+interface SkeletonTheme {
+    baseStyle: string;
+    variants: Record<SkeletonVariant, string>;
+    animation: string;
+}
+/**
+ * Default theme for the Skeleton component
+ * Uses production-ready CSS variables from global.scss
+ */
+export declare const skeletonTheme: SkeletonTheme;
+export {};