flikkui 0.1.0-beta.11

package/dist/components/core/Button/Button.ripple.js

@@ -0,0 +1,229 @@
+import { __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import { useState, useRef, useCallback } from 'react';
+
+/**
+ * Custom hook for managing ripple effects on button clicks
+ *
+ * @param config - Optional ripple configuration
+ * @returns Object containing ripples array and createRipple handler
+ *
+ * @example
+ * ```tsx
+ * const { ripples, createRipple } = useRipple({ scale: 12, duration: 700 });
+ *
+ * <button onClick={createRipple}>
+ *   {ripples.map((ripple) => (
+ *     <RippleSpan key={ripple.id} ripple={ripple} />
+ *   ))}
+ * </button>
+ * ```
+ */
+function useRipple(config) {
+    if (config === void 0) { config = {}; }
+    var _a = config.scale, scale = _a === void 0 ? 10 : _a, _b = config.duration, duration = _b === void 0 ? 600 : _b, _c = config.effect, effect = _c === void 0 ? 'default' : _c;
+    var _d = useState([]), ripples = _d[0], setRipples = _d[1];
+    var buttonRef = useRef(null);
+    var createRipple = useCallback(function (event) {
+        var button = buttonRef.current;
+        if (!button)
+            return;
+        // Calculate click position relative to button
+        var rect = button.getBoundingClientRect();
+        var x = event.clientX - rect.left;
+        var y = event.clientY - rect.top;
+        var baseId = Date.now();
+        var newRipples = [];
+        var maxDuration = duration;
+        // Create ripples based on effect type
+        switch (effect) {
+            case 'aurora':
+                // Triple layer with staggered timing
+                newRipples = [
+                    { id: baseId, x: x, y: y, layer: 1 },
+                    { id: baseId + 1, x: x, y: y, layer: 2 },
+                    { id: baseId + 2, x: x, y: y, layer: 3 },
+                ];
+                maxDuration = 800; // Longest layer duration
+                break;
+            case 'particle':
+                // Multiple small ripples at random offsets
+                newRipples = Array.from({ length: 6 }, function (_, i) { return ({
+                    id: baseId + i,
+                    x: x + (Math.random() - 0.5) * 20,
+                    y: y + (Math.random() - 0.5) * 20,
+                    layer: i + 1,
+                }); });
+                maxDuration = 700;
+                break;
+            case 'glass':
+                // Expanding outer + shrinking inner
+                newRipples = [
+                    { id: baseId, x: x, y: y, layer: 1 }, // Outer expanding
+                    { id: baseId + 1, x: x, y: y, layer: 2 }, // Inner shrinking
+                ];
+                maxDuration = 600;
+                break;
+            case 'neon':
+                // Glowing multi-color layers
+                newRipples = [
+                    { id: baseId, x: x, y: y, layer: 1 }, // Inner glow
+                    { id: baseId + 1, x: x, y: y, layer: 2 }, // Middle
+                    { id: baseId + 2, x: x, y: y, layer: 3 }, // Outer halo
+                ];
+                maxDuration = 700;
+                break;
+            case 'echo':
+                // Primary + delayed echoes
+                newRipples = [{ id: baseId, x: x, y: y, layer: 1 }];
+                maxDuration = 800;
+                // Spawn echo ripples with delays
+                setTimeout(function () {
+                    setRipples(function (prev) { return __spreadArray(__spreadArray([], prev, true), [{ id: baseId + 10, x: x, y: y, layer: 2 }], false); });
+                }, 100);
+                setTimeout(function () {
+                    setRipples(function (prev) { return __spreadArray(__spreadArray([], prev, true), [{ id: baseId + 20, x: x, y: y, layer: 3 }], false); });
+                }, 200);
+                break;
+            case 'default':
+            default:
+                // Single ripple (original behavior)
+                newRipples = [{ id: baseId, x: x, y: y, layer: 1 }];
+                maxDuration = duration;
+                break;
+        }
+        setRipples(function (prev) { return __spreadArray(__spreadArray([], prev, true), newRipples, true); });
+        // Auto-remove all ripples after longest animation completes
+        setTimeout(function () {
+            setRipples(function (prev) { return prev.filter(function (r) { return r.id < baseId || r.id > baseId + 30; }); });
+        }, maxDuration);
+    }, [duration, effect]);
+    return {
+        ripples: ripples,
+        createRipple: createRipple,
+        buttonRef: buttonRef,
+        scale: scale,
+        duration: duration,
+        effect: effect,
+    };
+}
+/**
+ * Get ripple color classes based on button variant and color
+ */
+function getRippleColorClass(variant, color) {
+    // For filled buttons, use white ripple for contrast
+    if (variant === "filled") {
+        return "bg-white/30";
+    }
+    // For outline/ghost buttons, use color-matched ripple
+    switch (color) {
+        case "primary":
+            return "bg-[var(--color-primary)]/20";
+        case "success":
+            return "bg-[var(--color-success)]/20";
+        case "warning":
+            return "bg-[var(--color-warning)]/20";
+        case "danger":
+            return "bg-[var(--color-danger)]/20";
+        case "muted":
+            return "bg-[var(--color-text-muted)]/20";
+        default:
+            return "bg-[var(--color-primary)]/20";
+    }
+}
+/**
+ * Get animation properties for specific ripple effect and layer
+ */
+function getRippleAnimation(effect, layer, baseScale) {
+    switch (effect) {
+        case 'aurora':
+            // Triple layer with different speeds and opacities
+            if (layer === 1) {
+                return {
+                    initial: { scale: 0, opacity: 0.5 },
+                    animate: { scale: baseScale * 0.9, opacity: 0 },
+                    transition: { duration: 0.4, ease: "easeOut" },
+                };
+            }
+            else if (layer === 2) {
+                return {
+                    initial: { scale: 0, opacity: 0.3 },
+                    animate: { scale: baseScale, opacity: 0 },
+                    transition: { duration: 0.6, ease: "easeOut" },
+                };
+            }
+            else {
+                return {
+                    initial: { scale: 0, opacity: 0.2 },
+                    animate: { scale: baseScale * 1.2, opacity: 0 },
+                    transition: { duration: 0.8, ease: "easeOut" },
+                };
+            }
+        case 'particle':
+            // Random scales and staggered delays
+            var randomScale = baseScale * (0.7 + Math.random() * 0.6);
+            var randomDelay = layer * 0.025;
+            return {
+                initial: { scale: 0, opacity: 0.6 },
+                animate: { scale: randomScale, opacity: 0 },
+                transition: { duration: 0.5 + Math.random() * 0.2, ease: "easeOut", delay: randomDelay },
+            };
+        case 'glass':
+            if (layer === 1) {
+                // Outer expanding ring
+                return {
+                    initial: { scale: 0, opacity: 0.4 },
+                    animate: { scale: baseScale, opacity: 0 },
+                    transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }, // Custom easing
+                };
+            }
+            else {
+                // Inner collapsing circle
+                return {
+                    initial: { scale: 1, opacity: 0.3 },
+                    animate: { scale: 0, opacity: 0 },
+                    transition: { duration: 0.6, ease: "easeIn" },
+                };
+            }
+        case 'neon':
+            // Layered glow effect with blur
+            if (layer === 1) {
+                return {
+                    initial: { scale: 0, opacity: 0.7 },
+                    animate: { scale: baseScale * 0.7, opacity: 0 },
+                    transition: { duration: 0.5, ease: "easeOut" },
+                    className: "blur-sm",
+                };
+            }
+            else if (layer === 2) {
+                return {
+                    initial: { scale: 0, opacity: 0.5 },
+                    animate: { scale: baseScale * 0.9, opacity: 0 },
+                    transition: { duration: 0.6, ease: "easeOut" },
+                };
+            }
+            else {
+                return {
+                    initial: { scale: 0, opacity: 0.3 },
+                    animate: { scale: baseScale * 1.1, opacity: 0 },
+                    transition: { duration: 0.7, ease: "easeOut" },
+                    className: "blur-[2px]",
+                };
+            }
+        case 'echo':
+            // Delayed waves with increasing size
+            return {
+                initial: { scale: 0, opacity: 0.4 - layer * 0.1 },
+                animate: { scale: baseScale + layer * 0.3, opacity: 0 },
+                transition: { duration: 0.6, ease: "easeOut" },
+            };
+        case 'default':
+        default:
+            return {
+                initial: { scale: 0, opacity: 0.5 },
+                animate: { scale: baseScale, opacity: 0 },
+                transition: { duration: 0.6, ease: "easeOut" },
+            };
+    }
+}
+
+export { getRippleAnimation, getRippleColorClass, useRipple };

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

@@ -0,0 +1,21 @@
+import { ButtonColor, ButtonVariant, ButtonSize, ButtonState } from "./Button.types";
+/**
+ * Simplified theme structure for the Button component following optimal patterns
+ */
+interface ButtonTheme {
+    baseStyle: string;
+    colorStyles: Record<ButtonColor, string>;
+    variantStyles: Record<ButtonVariant, string>;
+    sizes: Record<ButtonSize, {
+        default: string;
+        iconOnly: string;
+        link: string;
+    }>;
+    states: Partial<Record<ButtonState, string>>;
+    blockStyle: string;
+}
+/**
+ * Default theme for the Button component
+ */
+export declare const buttonTheme: ButtonTheme;
+export {};

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

@@ -0,0 +1,52 @@
+/**
+ * Default theme for the Button component
+ */
+var buttonTheme = {
+    // Base styles for the button element
+    baseStyle: "relative inline-flex items-center justify-center gap-2 font-semibold focus:outline-none rounded-[var(--button-rounded)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
+    // Color-based styling using data attributes and CSS variables
+    colorStyles: {
+        neutral: "data-[variant=filled]:bg-white data-[variant=filled]:text-[var(--color-text-secondary)] data-[variant=filled]:border-[var(--color-border)] data-[variant=filled]:hover:bg-neutral-50 data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-neutral-400/10 data-[variant=filled]:focus-visible:outline-neutral-600 data-[variant=outline]:text-[var(--color-text-secondary)] data-[variant=outline]:border-[var(--color-border)] data-[variant=outline]:hover:bg-neutral-50 data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-neutral-400/10 data-[variant=outline]:focus-visible:outline-neutral-600 data-[variant=ghost]:text-[var(--color-text-secondary)] data-[variant=ghost]:bg-neutral-100 data-[variant=ghost]:hover:bg-neutral-200 data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-neutral-400/20 data-[variant=ghost]:focus-visible:outline-neutral-600 data-[variant=link]:text-[var(--color-text-secondary)] data-[variant=link]:focus-visible:outline-neutral-600",
+        dark: "data-[variant=filled]:bg-[var(--color-background-quinary)] data-[variant=filled]:text-white data-[variant=filled]:border-[var(--color-background-quinary)] data-[variant=filled]:hover:bg-[var(--color-background-quinary)]/90 data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-[var(--color-border)]/20 data-[variant=filled]:focus-visible:outline-[var(--color-background-quinary)] data-[variant=outline]:text-[var(--color-background-quinary)] data-[variant=outline]:border-[var(--color-background-quinary)] data-[variant=outline]:hover:bg-[var(--color-background-tertiary)] data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-[var(--color-border)]/20 data-[variant=outline]:focus-visible:outline-[var(--color-background-quinary)] data-[variant=ghost]:text-[var(--color-text-primary)] data-[variant=ghost]:bg-[var(--color-background-tertiary)] data-[variant=ghost]:hover:bg-[var(--color-background-quaternary)] data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-[var(--color-border)]/10 data-[variant=ghost]:focus-visible:outline-[var(--color-background-quinary)] data-[variant=link]:text-[var(--color-text-primary)] data-[variant=link]:focus-visible:outline-[var(--color-background-quinary)]",
+        primary: "data-[variant=filled]:bg-[var(--color-primary)] data-[variant=filled]:text-white data-[variant=filled]:border-[var(--color-primary)] data-[variant=filled]:hover:bg-[var(--color-primary-700)] data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-[var(--color-primary)]/20 data-[variant=filled]:focus-visible:outline-[var(--color-primary-600)] data-[variant=outline]:text-[var(--color-primary-600)] data-[variant=outline]:border-[var(--color-primary-600)] data-[variant=outline]:hover:bg-[var(--color-primary-50)] data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-[var(--color-primary)]/30 data-[variant=outline]:focus-visible:outline-[var(--color-primary-600)] data-[variant=ghost]:text-[var(--color-primary-600)] data-[variant=ghost]:bg-[var(--color-primary)]/10 data-[variant=ghost]:hover:bg-[var(--color-primary-50)] data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-[var(--color-primary)]/10 data-[variant=ghost]:focus-visible:outline-[var(--color-primary-600)] data-[variant=link]:text-[var(--color-primary-600)] data-[variant=link]:focus-visible:outline-[var(--color-primary-600)]",
+        success: "data-[variant=filled]:bg-[var(--color-success)] data-[variant=filled]:text-white data-[variant=filled]:border-[var(--color-success)] data-[variant=filled]:hover:bg-[var(--color-success-600)] data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-[var(--color-success)]/20 data-[variant=filled]:focus-visible:outline-[var(--color-success-600)] data-[variant=outline]:text-[var(--color-success-600)] data-[variant=outline]:border-[var(--color-success-600)] data-[variant=outline]:hover:bg-[var(--color-success-50)] data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-[var(--color-success)]/30 data-[variant=outline]:focus-visible:outline-[var(--color-success-600)] data-[variant=ghost]:text-[var(--color-success-600)] data-[variant=ghost]:bg-[var(--color-success)]/10 data-[variant=ghost]:hover:bg-[var(--color-success-50)] data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-[var(--color-success)]/20 data-[variant=ghost]:focus-visible:outline-[var(--color-success-600)] data-[variant=link]:text-[var(--color-success-600)] data-[variant=link]:focus-visible:outline-[var(--color-success-600)]",
+        warning: "data-[variant=filled]:bg-[var(--color-warning)] data-[variant=filled]:text-white data-[variant=filled]:border-[var(--color-warning)] data-[variant=filled]:hover:bg-[var(--color-warning-600)] data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-[var(--color-warning)]/20 data-[variant=filled]:focus-visible:outline-[var(--color-warning-600)] data-[variant=outline]:text-[var(--color-warning-600)] data-[variant=outline]:border-[var(--color-warning-600)] data-[variant=outline]:hover:bg-[var(--color-warning-50)] data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-[var(--color-warning)]/30 data-[variant=outline]:focus-visible:outline-[var(--color-warning-600)] data-[variant=ghost]:text-[var(--color-warning-600)] data-[variant=ghost]:bg-[var(--color-warning)]/10 data-[variant=ghost]:hover:bg-[var(--color-warning-50)] data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-[var(--color-warning)]/20 data-[variant=ghost]:focus-visible:outline-[var(--color-warning-600)] data-[variant=link]:text-[var(--color-warning-600)] data-[variant=link]:focus-visible:outline-[var(--color-warning-600)]",
+        danger: "data-[variant=filled]:bg-[var(--color-danger)] data-[variant=filled]:text-white data-[variant=filled]:border-[var(--color-danger)] data-[variant=filled]:hover:bg-[var(--color-danger-600)] data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-[var(--color-danger)]/20 data-[variant=filled]:focus-visible:outline-[var(--color-danger-600)] data-[variant=outline]:text-[var(--color-danger-600)] data-[variant=outline]:border-[var(--color-danger-600)] data-[variant=outline]:hover:bg-[var(--color-danger-50)] data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-[var(--color-danger)]/30 data-[variant=outline]:focus-visible:outline-[var(--color-danger-600)] data-[variant=ghost]:text-[var(--color-danger-600)] data-[variant=ghost]:bg-[var(--color-danger)]/10 data-[variant=ghost]:hover:bg-[var(--color-danger-50)] data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-[var(--color-danger)]/20 data-[variant=ghost]:focus-visible:outline-[var(--color-danger-600)] data-[variant=link]:text-[var(--color-danger-600)] data-[variant=link]:focus-visible:outline-[var(--color-danger-600)]",
+    },
+    // Visual style variants (appearance) - rings moved to colorStyles for color awareness
+    variantStyles: {
+        filled: "border ",
+        outline: "bg-transparent border",
+        ghost: "border-transparent !bg-transparent",
+        link: "bg-transparent border-transparent",
+    },
+    // Size variants
+    sizes: {
+        sm: {
+            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
+            iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
+            link: "p-0 text-sm h-fit",
+        },
+        md: {
+            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
+            iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
+            link: "p-0 text-sm h-fit",
+        },
+        lg: {
+            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
+            iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
+            link: "p-0 text-base h-fit",
+        },
+    },
+    // State styles
+    states: {
+        disabled: "opacity-50 cursor-not-allowed pointer-events-none text-opacity-50",
+        error: "ring-2 ring-[var(--color-danger-500)]",
+        loading: "cursor-not-allowed",
+        // default state has no additional classes
+    },
+    // Block style
+    blockStyle: "w-full",
+};
+
+export { buttonTheme };

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { HTMLMotionProps } from "motion/react";
+import { RippleEffectType } from "./Button.ripple";
+/**
+ * Button component props
+ * @property {ButtonColor} color - The semantic color/intent of the button
+ * @property {ButtonVariant} variant - The visual style variant of the button
+ * @property {ButtonSize} size - The size of the button
+ * @property {ButtonState} state - The state of the button (normal, disabled, error)
+ * @property {boolean} iconOnly - Whether the button should display as icon-only (square padding)
+ * @property {boolean} block - Whether the button should be full width
+ * @property {boolean} enableRipple - Whether to enable ripple effect on click
+ * @property {RippleEffectType} rippleEffect - Type of ripple effect (default, aurora, particle, glass, neon, echo)
+ * @property {string} rippleClassName - Custom class name for ripple styling
+ * @property {number} rippleScale - Scale multiplier for ripple expansion (default: 10)
+ */
+export interface ButtonProps extends HTMLMotionProps<"button"> {
+    /** The semantic color/intent of the button */
+    color?: ButtonColor;
+    /** The visual style variant of the button */
+    variant?: ButtonVariant;
+    /** The size of the button */
+    size?: ButtonSize;
+    /** The state of the button (normal, disabled, error) */
+    state?: ButtonState;
+    /** Whether the button should display as icon-only (square padding) */
+    iconOnly?: boolean;
+    /** Whether the button should be full width */
+    block?: boolean;
+    /** Button contents */
+    children?: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+    /** Whether to enable ripple effect on click */
+    enableRipple?: boolean;
+    /** Type of ripple effect: 'default' | 'aurora' | 'particle' | 'glass' | 'neon' | 'echo' */
+    rippleEffect?: RippleEffectType;
+    /** Custom class name for ripple styling */
+    rippleClassName?: string;
+    /** Scale multiplier for ripple expansion (default: 10) */
+    rippleScale?: number;
+}
+export type ButtonColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
+export type ButtonVariant = "filled" | "outline" | "ghost" | "link";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonState = "default" | "disabled" | "error" | "loading";

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export * from './Button.types';

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ButtonGroupProps } from "./ButtonGroup.types";
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { ButtonGroup };

package/dist/components/core/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,12 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { buttonGroupTheme } from './ButtonGroup.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+var ButtonGroup = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c, props = __rest(_a, ["children", "className", "orientation"]);
+    return (React__default.createElement("div", __assign({ ref: ref, role: "group", "data-orientation": orientation, className: cn(buttonGroupTheme.baseStyle, buttonGroupTheme.orientationStyles[orientation], className) }, props), children));
+});
+ButtonGroup.displayName = "ButtonGroup";
+
+export { ButtonGroup };

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

@@ -0,0 +1,18 @@
+import { ButtonGroupOrientation } from "./ButtonGroup.types";
+/**
+ * Simplified theme structure for the ButtonGroup component
+ */
+interface ButtonGroupTheme {
+    baseStyle: string;
+    orientationStyles: Record<ButtonGroupOrientation, string>;
+    separatorStyles: {
+        base: string;
+        horizontal: string;
+        vertical: string;
+    };
+}
+/**
+ * Default theme for the ButtonGroup component using CSS pseudo-classes
+ */
+export declare const buttonGroupTheme: ButtonGroupTheme;
+export {};

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

@@ -0,0 +1,48 @@
+/**
+ * Default theme for the ButtonGroup component using CSS pseudo-classes
+ */
+var buttonGroupTheme = {
+    // Base styles for the button group container with child button styling
+    baseStyle: "inline-flex items-stretch " +
+        // Horizontal orientation - direct button children
+        "[&>button:first-child]:rounded-r-none " +
+        "[&>button:last-child]:rounded-l-none " +
+        "[&>button:not(:first-child):not(:last-child)]:rounded-none " +
+        "[&>button:not(:first-child)]:-ml-px " +
+        "[&>button]:relative [&>button]:focus:z-10 [&>button]:hover:z-10 " +
+        // Horizontal orientation - nested button children (e.g., in Dropdown)
+        "[&>*:first-child>button]:rounded-r-none " +
+        "[&>*:last-child>button]:rounded-l-none " +
+        "[&>*:not(:first-child):not(:last-child)>button]:rounded-none " +
+        "[&>*:not(:first-child)>button]:-ml-px " +
+        "[&>*>button]:relative [&>*>button]:focus:z-10 [&>*>button]:hover:z-10 " +
+        // Vertical orientation child styles (via data-attribute)
+        "data-[orientation=vertical]:[&>button:first-child]:rounded-[var(--button-rounded)] " +
+        "data-[orientation=vertical]:[&>button:first-child]:rounded-b-none " +
+        "data-[orientation=vertical]:[&>button:last-child]:rounded-[var(--button-rounded)] " +
+        "data-[orientation=vertical]:[&>button:last-child]:rounded-t-none " +
+        "data-[orientation=vertical]:[&>button:not(:first-child):not(:last-child)]:rounded-none " +
+        "data-[orientation=vertical]:[&>button:not(:first-child)]:-ml-0 " +
+        "data-[orientation=vertical]:[&>button:not(:first-child)]:-mt-px " +
+        // Vertical orientation - nested buttons
+        "data-[orientation=vertical]:[&>*:first-child>button]:rounded-[var(--button-rounded)] " +
+        "data-[orientation=vertical]:[&>*:first-child>button]:rounded-b-none " +
+        "data-[orientation=vertical]:[&>*:last-child>button]:rounded-[var(--button-rounded)] " +
+        "data-[orientation=vertical]:[&>*:last-child>button]:rounded-t-none " +
+        "data-[orientation=vertical]:[&>*:not(:first-child):not(:last-child)>button]:rounded-none " +
+        "data-[orientation=vertical]:[&>*:not(:first-child)>button]:-ml-0 " +
+        "data-[orientation=vertical]:[&>*:not(:first-child)>button]:-mt-px",
+    // Orientation-specific container styles
+    orientationStyles: {
+        horizontal: "flex-row",
+        vertical: "flex-col",
+    },
+    // Separator styles
+    separatorStyles: {
+        base: "flex-shrink-0 bg-[var(--color-border)]",
+        horizontal: "w-px self-stretch",
+        vertical: "h-px self-stretch",
+    },
+};
+
+export { buttonGroupTheme };

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

@@ -0,0 +1,36 @@
+import React from "react";
+/**
+ * ButtonGroup component props
+ * @property {ButtonGroupOrientation} orientation - The layout direction of the button group
+ */
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The layout direction of the button group */
+    orientation?: ButtonGroupOrientation;
+    /** Button group contents */
+    children?: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * ButtonGroupSeparator component props
+ * @property {ButtonGroupOrientation} orientation - The orientation of the separator
+ */
+export interface ButtonGroupSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The orientation of the separator (defaults to vertical for horizontal groups) */
+    orientation?: ButtonGroupOrientation;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * ButtonGroupText component props
+ * @property {boolean} asChild - Render as a child component using Slot pattern
+ */
+export interface ButtonGroupTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Render as a child component using Slot pattern */
+    asChild?: boolean;
+    /** Text content */
+    children?: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+}
+export type ButtonGroupOrientation = "horizontal" | "vertical";

package/dist/components/core/ButtonGroup/ButtonGroupSeparator.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ButtonGroupSeparatorProps } from "./ButtonGroup.types";
+declare const ButtonGroupSeparator: React.ForwardRefExoticComponent<ButtonGroupSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export { ButtonGroupSeparator };

package/dist/components/core/ButtonGroup/ButtonGroupSeparator.js

@@ -0,0 +1,14 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { buttonGroupTheme } from './ButtonGroup.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+var ButtonGroupSeparator = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.orientation, orientation = _c === void 0 ? "vertical" : _c, props = __rest(_a, ["className", "orientation"]);
+    return (React__default.createElement("div", __assign({ ref: ref, role: "separator", "aria-orientation": orientation, "data-orientation": orientation, className: cn(buttonGroupTheme.separatorStyles.base, orientation === "vertical"
+            ? buttonGroupTheme.separatorStyles.horizontal
+            : buttonGroupTheme.separatorStyles.vertical, className) }, props)));
+});
+ButtonGroupSeparator.displayName = "ButtonGroupSeparator";
+
+export { ButtonGroupSeparator };

package/dist/components/core/ButtonGroup/ButtonGroupText.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ButtonGroupTextProps } from "./ButtonGroup.types";
+declare const ButtonGroupText: React.ForwardRefExoticComponent<ButtonGroupTextProps & React.RefAttributes<HTMLDivElement>>;
+export { ButtonGroupText };

package/dist/components/core/ButtonGroup/ButtonGroupText.js

@@ -0,0 +1,18 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { buttonGroupTheme } from './ButtonGroup.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+var ButtonGroupText = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.asChild, asChild = _c === void 0 ? false : _c, props = __rest(_a, ["children", "className", "asChild"]);
+    // If asChild is true, clone the child element with our styles
+    if (asChild && React__default.isValidElement(children)) {
+        var childProps = children.props;
+        return React__default.cloneElement(children, __assign(__assign({}, childProps), { ref: ref, className: cn(buttonGroupTheme.textStyles, childProps.className, className) }));
+    }
+    // Otherwise, render as a div
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(buttonGroupTheme.textStyles, className) }, props), children));
+});
+ButtonGroupText.displayName = "ButtonGroupText";
+
+export { ButtonGroupText };

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

@@ -0,0 +1,4 @@
+export { ButtonGroup } from "./ButtonGroup";
+export { ButtonGroupSeparator } from "./ButtonGroupSeparator";
+export { ButtonGroupText } from "./ButtonGroupText";
+export type { ButtonGroupProps, ButtonGroupSeparatorProps, ButtonGroupTextProps, ButtonGroupOrientation, } from "./ButtonGroup.types";

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

@@ -0,0 +1,12 @@
+import { Variants } from 'motion/react';
+/**
+ * Animation variants for Calendar component
+ */
+export declare const calendarAnimations: {
+    monthSlide: {
+        slideInRight: Variants;
+        slideInLeft: Variants;
+    };
+    dayButton: Variants;
+    todayDot: Variants;
+};

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

@@ -0,0 +1,25 @@
+/**
+ * Animation variants for Calendar component
+ */
+var calendarAnimations = {
+    dayButton: {
+        hover: {
+            scale: 1.05,
+            transition: { type: "spring", stiffness: 100, damping: 25 }
+        },
+        tap: {
+            scale: 0.95,
+            transition: { type: "spring", stiffness: 100, damping: 25 }
+        }
+    },
+    todayDot: {
+        initial: { scale: 0, opacity: 0 },
+        animate: {
+            scale: 1,
+            opacity: 1,
+            transition: { delay: 0.2, type: "spring", stiffness: 400, damping: 25 }
+        }
+    },
+};
+
+export { calendarAnimations };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { CalendarProps } from "./Calendar.types";
+export declare const Calendar: React.FC<CalendarProps>;