@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+
+const SidebarNavGroup = React__default.forwardRef(({ title, showTitleWhenCollapsed = false, children, className, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    const showTitle = title && (!collapsed || showTitleWhenCollapsed);
+    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), collapsed && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
+});
+SidebarNavGroup.displayName = "SidebarNavGroup";
+
+export { SidebarNavGroup };

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

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SidebarSubmenuProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    className?: string;
+}
+export declare const SidebarSubmenu: ({ children, isOpen, className, }: SidebarSubmenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+const SidebarSubmenu = ({ children, isOpen, className, }) => {
+    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { initial: "collapsed", animate: "open", exit: "collapsed", variants: {
+                open: { opacity: 1, height: "auto" },
+                collapsed: { opacity: 0, height: 0 },
+            }, transition: { duration: 0.2, ease: "easeInOut" }, className: cn("overflow-hidden", className), children: children })) }));
+};
+
+export { SidebarSubmenu };

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 { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import { Button } from '../Button/Button.js';
+
+const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, className, onClick, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    if (!sidebarContext) {
+        if (process.env.NODE_ENV !== "production") {
+            console.warn("SidebarToggle must be used within a Sidebar component");
+        }
+        return null;
+    }
+    const { collapsed, toggleCollapsed } = sidebarContext;
+    const handleClick = (e) => {
+        toggleCollapsed();
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    return (jsx(Button, { ref: ref, variant: "ghost", size: "sm", className: cn("size-8 p-0", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...props, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2 }, children: collapsed
+                ? expandIcon || jsx(ChevronRightIcon, { className: "size-4" })
+                : collapseIcon || jsx(ChevronLeftIcon, { className: "size-4" }) }) }));
+});
+SidebarToggle.displayName = "SidebarToggle";
+
+export { SidebarToggle };

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

@@ -0,0 +1,10 @@
+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 { SidebarSubmenu } from "./SidebarSubmenu";
+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.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export { Skeleton };

package/dist/components/core/Skeleton/Skeleton.js

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { skeletonTheme } from './Skeleton.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * 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} />
+ */
+const Skeleton = React__default.forwardRef(({ variant = 'rectangle', width, height, lines = 1, animate = true, className, theme: customTheme, style, ...props }, ref) => {
+    // Merge custom theme with default theme
+    const theme = customTheme ? { ...skeletonTheme, ...customTheme } : skeletonTheme;
+    // Convert dimensions to CSS values
+    const getSize = (value) => {
+        if (value === undefined)
+            return undefined;
+        if (typeof value === 'number')
+            return `${value}px`;
+        return value;
+    };
+    const computedWidth = getSize(width);
+    const computedHeight = getSize(height);
+    // Compute styles
+    const computedStyle = {
+        ...style,
+        width: computedWidth,
+        height: computedHeight,
+    };
+    // Base classes
+    const baseClasses = cn(theme.baseStyle, theme.variants[variant], animate && theme.animation, className);
+    // For text variant with multiple lines, render multiple skeletons
+    if (variant === 'text' && lines > 1) {
+        return (jsx("div", { ref: ref, className: "space-y-2", ...props, children: Array.from({ length: lines }).map((_, index) => {
+                // Make last line 75% width for more natural look
+                const isLastLine = index === lines - 1;
+                const lineWidth = isLastLine && !width ? '75%' : computedWidth;
+                return (jsx("div", { className: baseClasses, style: { ...computedStyle, width: lineWidth } }, index));
+            }) }));
+    }
+    // Single skeleton
+    return (jsx("div", { ref: ref, className: baseClasses, style: computedStyle, "aria-busy": "true", "aria-live": "polite", ...props }));
+});
+Skeleton.displayName = 'Skeleton';
+
+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 {};

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

@@ -0,0 +1,18 @@
+/**
+ * Default theme for the Skeleton component
+ * Uses production-ready CSS variables from global.scss
+ */
+const skeletonTheme = {
+    // Base styles with background color and animation
+    baseStyle: "bg-[var(--color-background-tertiary)] overflow-hidden",
+    // Shape variants
+    variants: {
+        text: "h-4 rounded",
+        circular: "rounded-full",
+        rectangle: "rounded-[calc(var(--radius-base)*0.75)]",
+    },
+    // Pulse animation
+    animation: "animate-pulse",
+};
+
+export { skeletonTheme };

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

@@ -0,0 +1,45 @@
+/**
+ * Skeleton component props
+ * Loading placeholder that mimics the shape of content
+ */
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The variant of the skeleton
+     * @default "rectangle"
+     */
+    variant?: SkeletonVariant;
+    /**
+     * Width of the skeleton
+     * Can be a number (px), string (with units), or percentage
+     */
+    width?: number | string;
+    /**
+     * Height of the skeleton
+     * Can be a number (px), string (with units), or percentage
+     */
+    height?: number | string;
+    /**
+     * Number of skeleton lines to render (for text variant)
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * Whether to show pulse animation
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Custom CSS class to apply to the skeleton
+     */
+    className?: string;
+    /**
+     * Theme overrides for the skeleton
+     */
+    theme?: SkeletonThemeOverrides;
+}
+export type SkeletonVariant = "text" | "circular" | "rectangle";
+export interface SkeletonThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<Record<SkeletonVariant, string>>;
+    animation?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant } from './Skeleton.types';

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { SlidingNumberProps } from "./SlidingNumber.types";
+/**
+ * SlidingNumber component with odometer-style digit animation
+ *
+ * Each digit animates independently, creating a satisfying slot-machine effect.
+ * Perfect for counters, statistics, and animated numeric displays.
+ *
+ * @example
+ * ```tsx
+ * <SlidingNumber value={12345} />
+ * <SlidingNumber value={99.95} decimalPlaces={2} />
+ * <SlidingNumber value={42} padStart padWidth={4} /> // "0042"
+ * ```
+ */
+export declare const SlidingNumber: React.ForwardRefExoticComponent<SlidingNumberProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/SlidingNumber/SlidingNumber.js

@@ -0,0 +1,73 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { motion, useReducedMotion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+const DIGIT_CONTAINER_STYLE = { height: "1em", width: "0.6em", lineHeight: "1em" };
+const DIGIT_ITEM_STYLE = { height: "1em", lineHeight: "1em" };
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+const DEFAULT_TRANSITION = { type: "spring", stiffness: 300, damping: 30, bounce: 0 };
+const STATIC_CHAR_STYLE = { width: "0.6em" };
+const ROOT_STYLE = { lineHeight: "1" };
+/**
+ * Individual digit component that handles the sliding animation
+ */
+const SlidingDigit = React__default.memo(({ value, transition, className, disableAnimations, }) => {
+    return (jsx("div", { className: cn("relative inline-block overflow-hidden", className), style: DIGIT_CONTAINER_STYLE, "aria-hidden": "true", children: jsx(motion.div, { className: "absolute inset-0", animate: disableAnimations ? { y: 0 } : { y: `${-value * 100}%` }, transition: disableAnimations ? undefined : transition, children: DIGITS.map((num) => (jsx("div", { className: "flex items-center justify-center", style: DIGIT_ITEM_STYLE, children: num }, num))) }) }));
+});
+SlidingDigit.displayName = "SlidingDigit";
+/**
+ * Static character component for non-numeric symbols
+ */
+const StaticChar = React__default.memo(({ char, className }) => {
+    return (jsx("div", { className: cn("inline-flex items-center justify-center", className), style: STATIC_CHAR_STYLE, "aria-hidden": "true", children: char }));
+});
+StaticChar.displayName = "StaticChar";
+/**
+ * SlidingNumber component with odometer-style digit animation
+ *
+ * Each digit animates independently, creating a satisfying slot-machine effect.
+ * Perfect for counters, statistics, and animated numeric displays.
+ *
+ * @example
+ * ```tsx
+ * <SlidingNumber value={12345} />
+ * <SlidingNumber value={99.95} decimalPlaces={2} />
+ * <SlidingNumber value={42} padStart padWidth={4} /> // "0042"
+ * ```
+ */
+const SlidingNumber = React__default.forwardRef(({ value, decimalPlaces = 0, padStart = false, padWidth, transition = DEFAULT_TRANSITION, className, digitClassName, ...props }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    const shouldDisableAnimations = !!shouldReduceMotion;
+    // Format the number with decimal places and padding
+    const formattedNumber = useMemo(() => {
+        // 1. Convert to fixed decimal string or rounded integer string
+        let numStr = decimalPlaces > 0
+            ? Number(value).toFixed(decimalPlaces)
+            : String(Math.round(value));
+        // 2. Handle Padding
+        if (padStart && padWidth) {
+            const isNegative = numStr.startsWith("-");
+            let stringToPad = isNegative ? numStr.substring(1) : numStr;
+            const [intPart, decPart] = stringToPad.split(".");
+            const paddedInt = intPart.padStart(padWidth, "0");
+            stringToPad = decPart ? `${paddedInt}.${decPart}` : paddedInt;
+            return isNegative ? `-${stringToPad}` : stringToPad;
+        }
+        return numStr;
+    }, [value, decimalPlaces, padStart, padWidth]);
+    // Split formatted number into individual characters
+    const characters = useMemo(() => {
+        return formattedNumber.split("");
+    }, [formattedNumber]);
+    return (jsx("div", { ref: ref, className: cn("inline-flex items-center justify-center tabular-nums", className), style: ROOT_STYLE, "aria-label": formattedNumber, ...props, children: characters.map((char, index) => {
+            const isNumber = /\d/.test(char);
+            if (!isNumber) {
+                return (jsx(StaticChar, { char: char, className: digitClassName }, `${char}-${index}`));
+            }
+            return (jsx(SlidingDigit, { value: parseInt(char, 10), className: digitClassName, transition: transition, disableAnimations: shouldDisableAnimations }, `digit-${index}`));
+        }) }));
+});
+SlidingNumber.displayName = "SlidingNumber";
+
+export { SlidingNumber };

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

@@ -0,0 +1,36 @@
+import { Transition } from "motion/react";
+import { HTMLAttributes } from "react";
+export interface SlidingNumberProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * The number value to display with sliding animation
+     */
+    value: number;
+    /**
+     * Number of decimal places to display
+     * @default 0
+     */
+    decimalPlaces?: number;
+    /**
+     * Whether to pad the start with zeros for consistent width
+     * @default false
+     */
+    padStart?: boolean;
+    /**
+     * Total width for padding (only used if padStart is true)
+     * @default undefined
+     */
+    padWidth?: number;
+    /**
+     * Custom transition configuration for digit animations
+     * @default { type: 'spring', stiffness: 300, damping: 30, bounce: 0 }
+     */
+    transition?: Transition;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for individual digits
+     */
+    digitClassName?: string;
+}

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

@@ -0,0 +1,2 @@
+export { SlidingNumber } from './SlidingNumber';
+export type { SlidingNumberProps } from './SlidingNumber.types';

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

@@ -0,0 +1,48 @@
+import { Transition, Variants } from 'motion/react';
+export declare const dragAnimations: {
+    initial: {
+        opacity: number;
+        scale: number;
+        zIndex: number;
+        rotate: number;
+    };
+    dragging: {
+        opacity: number;
+        scale: number;
+        zIndex: number;
+        rotate: number;
+        transition: Transition;
+    };
+    idle: {
+        opacity: number;
+        scale: number;
+        zIndex: number;
+        rotate: number;
+        transition: Transition;
+    };
+};
+export declare const layoutAnimations: {
+    layout: Transition;
+    layoutId: (id: string) => string;
+};
+export declare const dragHandleAnimations: {
+    hover: {
+        scale: number;
+        transition: Transition;
+    };
+    tap: {
+        scale: number;
+        transition: Transition;
+    };
+};
+export declare const containerAnimations: {
+    layout: Transition;
+};
+export declare const itemVariants: Variants;
+export declare const sortableAnimations: {
+    drag: typeof dragAnimations;
+    layout: typeof layoutAnimations;
+    dragHandle: typeof dragHandleAnimations;
+    container: typeof containerAnimations;
+    variants: Variants;
+};

package/dist/components/core/Sortable/Sortable.animations.js

@@ -0,0 +1,78 @@
+// Spring configuration for smooth, natural animations
+const springConfig = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+    mass: 1,
+};
+const fastSpringConfig = {
+    type: 'spring',
+    stiffness: 400,
+    damping: 25,
+    mass: 0.8,
+};
+const layoutSpringConfig = {
+    type: 'spring',
+    stiffness: 200,
+    damping: 25,
+    mass: 1,
+};
+// Drag state animations
+const dragAnimations = {
+    initial: {
+        opacity: 1,
+        scale: 1,
+        zIndex: 1,
+        rotate: 0,
+    },
+    dragging: {
+        opacity: 0.9,
+        scale: 1.02,
+        zIndex: 10,
+        rotate: 2,
+        transition: springConfig,
+    },
+    idle: {
+        opacity: 1,
+        scale: 1,
+        zIndex: 1,
+        rotate: 0,
+        transition: springConfig,
+    },
+};
+// Layout animation configuration
+const layoutAnimations = {
+    layout: {
+        ...layoutSpringConfig,
+        // Slightly slower for smooth settling effect
+        stiffness: 180,
+        damping: 28,
+    }};
+// Drag handle animations
+const dragHandleAnimations = {
+    hover: {
+        scale: 1.1,
+        transition: fastSpringConfig,
+    },
+    tap: {
+        scale: 0.9,
+        transition: {
+            ...fastSpringConfig,
+            stiffness: 500,
+        },
+    },
+};
+// Animation variants for different states
+const itemVariants = {
+    initial: dragAnimations.initial,
+    dragging: dragAnimations.dragging,
+    idle: dragAnimations.idle,
+};
+// Export configuration objects
+const sortableAnimations = {
+    layout: layoutAnimations,
+    dragHandle: dragHandleAnimations,
+    variants: itemVariants,
+};
+
+export { dragAnimations, dragHandleAnimations, itemVariants, layoutAnimations, sortableAnimations };

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SortableProps, SortableItemProps } from './Sortable.types';
+export declare const Sortable: React.ForwardRefExoticComponent<SortableProps & React.RefAttributes<HTMLUListElement>>;
+export declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLDivElement>>;