flikkui 0.1.0-beta.2

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

@@ -0,0 +1,14 @@
+import { AvatarGroupSpacing } from './AvatarGroup.types';
+/**
+ * Internal theme structure for the AvatarGroup component
+ */
+interface AvatarGroupTheme {
+    baseStyle: string;
+    spacingStyles: Record<AvatarGroupSpacing, string>;
+    overflowAvatarStyle: string;
+}
+/**
+ * Default theme for the AvatarGroup component
+ */
+export declare const avatarGroupTheme: AvatarGroupTheme;
+export {};

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import type { AvatarProps } from '../Avatar/Avatar.types';
+export type AvatarGroupSpacing = 'tight' | 'normal' | 'loose';
+export type AvatarGroupDirection = 'row' | 'row-reverse';
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of avatar props to render in the group
+     */
+    avatars: AvatarProps[];
+    /**
+     * Maximum number of avatars to display before showing a count
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Size for all avatars in the group
+     * @default "md"
+     */
+    size?: AvatarProps["size"];
+    /**
+     * Amount of overlap between avatars (higher value = more overlap)
+     * @default "normal"
+     */
+    spacing?: AvatarGroupSpacing;
+    /**
+     * Direction of the avatar stack
+     * @default "row"
+     */
+    direction?: AvatarGroupDirection;
+    /**
+     * Custom renderer for the overflow avatar
+     */
+    overflowIndicator?: (overflowCount: number) => ReactNode;
+    /**
+     * ARIA label for the avatar group for accessibility
+     * @default "Group of users"
+     */
+    ariaLabel?: string;
+    /**
+     * Enable motion animations for hover effects
+     * @default true
+     */
+    shouldAnimate?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { AvatarGroup } from './AvatarGroup';
+export type { AvatarGroupProps, AvatarGroupSpacing, AvatarGroupDirection } from './AvatarGroup.types';

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

@@ -0,0 +1,8 @@
+import { Variants } from "motion/react";
+export declare const badgeVariants: Variants;
+export declare const dotVariants: Variants;
+export declare const dismissButtonVariants: Variants;
+export declare const dismissVariants: Variants;
+export declare const animationTiming: {
+    dismissDelay: number;
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BadgeProps } from './Badge.types';
+/**
+ * Badge component for displaying status, labels, or counters.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Badge variant="primary" size="md" pill>New Feature</Badge>
+ * <Badge variant="success" withDot>Ready</Badge>
+ * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
+ * ```
+ */
+export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,5 @@
+import { BadgeTheme } from './Badge.types';
+/**
+ * Default theme configuration for Badge component
+ */
+export declare const badgeTheme: BadgeTheme;

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

@@ -0,0 +1,98 @@
+import { ReactNode, MouseEvent } from 'react';
+import { HTMLMotionProps } from 'motion/react';
+export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+/**
+ * Theme configuration for Badge component
+ */
+export interface BadgeTheme {
+    /**
+     * Base styles applied to all badge variants
+     */
+    baseStyle: string;
+    /**
+     * Styles for each badge variant
+     */
+    variants: Record<BadgeVariant, string>;
+    /**
+     * Styles for each badge size
+     */
+    sizes: Record<BadgeSize, {
+        base: string;
+        pill: string;
+        default: string;
+    }>;
+    /**
+     * Color styles for dot indicators
+     */
+    dotColors: Record<BadgeVariant, string>;
+}
+/**
+ * Theme overrides for Badge component
+ */
+export interface BadgeThemeOverrides {
+    /**
+     * Base styles applied to all badge variants
+     */
+    baseStyle?: string;
+    /**
+     * Styles for each badge variant
+     */
+    variants?: Partial<Record<BadgeVariant, string>>;
+    /**
+     * Styles for each badge size
+     */
+    sizes?: Partial<Record<BadgeSize, Partial<{
+        base: string;
+        pill: string;
+        default: string;
+    }>>>;
+    /**
+     * Color styles for dot indicators
+     */
+    dotColors?: Partial<Record<BadgeVariant, string>>;
+}
+export interface BadgeProps extends HTMLMotionProps<"span"> {
+    /**
+     * The content to be displayed inside the badge
+     */
+    children: ReactNode;
+    /**
+     * The visual style variant of the badge
+     * @default 'default'
+     */
+    variant?: BadgeVariant;
+    /**
+     * The size of the badge
+     * @default 'md'
+     */
+    size?: BadgeSize;
+    /**
+     * Whether the badge is pill-shaped (fully rounded)
+     * @default false
+     */
+    pill?: boolean;
+    /**
+     * Whether the badge has a dot indicator
+     * @default false
+     */
+    withDot?: boolean;
+    /**
+     * Whether the badge is dismissible (shows close button)
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Callback when close button is clicked
+     * Required when dismissible is true
+     */
+    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Custom class name for the badge
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: BadgeThemeOverrides;
+}

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize, BadgeThemeOverrides } from './Badge.types';

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { BreadcrumbsProps } from "./Breadcrumbs.types";
+/**
+ * Breadcrumbs component for displaying navigation hierarchy
+ *
+ * Features:
+ * - Smart collapse with ellipsis when items exceed maxItems
+ * - Customizable separators
+ * - Popover integration for collapsed items
+ * - shadcn-style className overrides
+ * - Accessibility support
+ */
+declare const Breadcrumbs: {
+    ({ items, separator, maxItems, variant, className, theme: themeOverrides, showIcons, ...props }: BreadcrumbsProps): React.JSX.Element;
+    displayName: string;
+};
+export default Breadcrumbs;

package/dist/components/core/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,101 @@
+import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator } from './Breadcrumbs.theme.js';
+import Popover from '../Popover/Popover.js';
+
+/**
+ * Breadcrumbs component for displaying navigation hierarchy
+ *
+ * Features:
+ * - Smart collapse with ellipsis when items exceed maxItems
+ * - Customizable separators
+ * - Popover integration for collapsed items
+ * - shadcn-style className overrides
+ * - Accessibility support
+ */
+var Breadcrumbs = function (_a) {
+    var items = _a.items, separator = _a.separator, _b = _a.maxItems, maxItems = _b === void 0 ? 4 : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, className = _a.className, themeOverrides = _a.theme, _d = _a.showIcons, showIcons = _d === void 0 ? true : _d, props = __rest(_a, ["items", "separator", "maxItems", "variant", "className", "theme", "showIcons"]);
+    var _e = useState(false), isEllipsisOpen = _e[0], setIsEllipsisOpen = _e[1];
+    // Use default separator if none provided
+    var SeparatorComponent = separator || defaultSeparator;
+    // Merge theme with overrides
+    var theme = __assign(__assign(__assign({}, breadcrumbsTheme), breadcrumbsVariants[variant]), (themeOverrides || {}));
+    // Determine if we need to collapse items
+    var shouldCollapse = items.length > maxItems;
+    // Calculate visible items when collapsed
+    var getVisibleItems = function () {
+        if (!shouldCollapse) {
+            return { visibleItems: items, hiddenItems: [] };
+        }
+        // Show first item + last 2 items, hide middle items
+        var firstItem = items[0];
+        var lastTwoItems = items.slice(-2);
+        var hiddenItems = items.slice(1, -2);
+        var visibleItems = __spreadArray([firstItem], lastTwoItems, true);
+        return { visibleItems: visibleItems, hiddenItems: hiddenItems };
+    };
+    var _f = getVisibleItems(), visibleItems = _f.visibleItems, hiddenItems = _f.hiddenItems;
+    // Render individual breadcrumb item
+    var renderItem = function (item, index, isLast) {
+        var isCurrentPage = isLast || !item.href;
+        var itemContent = (React__default.createElement(React__default.Fragment, null,
+            showIcons && item.icon && (React__default.createElement("span", { className: cn(theme.icon) }, item.icon)),
+            item.label));
+        return (React__default.createElement("span", { key: "".concat(item.label, "-").concat(index), className: cn(theme.item) }, isCurrentPage ? (React__default.createElement("span", { className: cn(theme.current), "aria-current": "page" }, itemContent)) : (React__default.createElement("a", { href: item.href, className: cn(theme.link), "aria-label": "Navigate to ".concat(item.label) }, itemContent))));
+    };
+    // Render separator
+    var renderSeparator = function (index) {
+        return (React__default.createElement("span", { key: "separator-".concat(index), className: cn(theme.separator), "aria-hidden": "true" }, SeparatorComponent));
+    };
+    // Render ellipsis with popover
+    var renderEllipsis = function () {
+        if (hiddenItems.length === 0)
+            return null;
+        return (React__default.createElement(Popover, { isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen },
+            React__default.createElement(Popover.Trigger, { asChild: true },
+                React__default.createElement("button", { className: cn(theme.ellipsis), "aria-label": "Show ".concat(hiddenItems.length, " hidden breadcrumb items"), "aria-expanded": isEllipsisOpen }, "...")),
+            React__default.createElement(Popover.Content, { className: "p-2 min-w-48" },
+                React__default.createElement("div", { className: "space-y-1" }, hiddenItems.map(function (item, index) { return (React__default.createElement("div", { key: "hidden-".concat(index), className: "block" }, item.href ? (React__default.createElement("a", { href: item.href, className: cn("block px-2 py-1 text-sm rounded hover:bg-neutral-100 transition-colors", theme.link), onClick: function () { return setIsEllipsisOpen(false); } },
+                    showIcons && item.icon && (React__default.createElement("span", { className: cn(theme.icon) }, item.icon)),
+                    item.label)) : (React__default.createElement("span", { className: cn("block px-2 py-1 text-sm", theme.current) },
+                    showIcons && item.icon && (React__default.createElement("span", { className: cn(theme.icon) }, item.icon)),
+                    item.label)))); })))));
+    };
+    // Build the breadcrumb elements
+    var breadcrumbElements = [];
+    if (shouldCollapse) {
+        // Add first item
+        breadcrumbElements.push(renderItem(visibleItems[0], 0, false));
+        breadcrumbElements.push(renderSeparator(0));
+        // Add ellipsis
+        breadcrumbElements.push(renderEllipsis());
+        breadcrumbElements.push(renderSeparator(1));
+        // Add last two items
+        var lastTwoItems_1 = visibleItems.slice(1);
+        lastTwoItems_1.forEach(function (item, index) {
+            var actualIndex = index + 1;
+            var isLast = actualIndex === lastTwoItems_1.length;
+            breadcrumbElements.push(renderItem(item, actualIndex, isLast));
+            if (!isLast) {
+                breadcrumbElements.push(renderSeparator(actualIndex));
+            }
+        });
+    }
+    else {
+        // Render all items normally
+        visibleItems.forEach(function (item, index) {
+            var isLast = index === visibleItems.length - 1;
+            breadcrumbElements.push(renderItem(item, index, isLast));
+            if (!isLast) {
+                breadcrumbElements.push(renderSeparator(index));
+            }
+        });
+    }
+    return (React__default.createElement("nav", __assign({ "aria-label": "Breadcrumb", className: cn(theme.container, className) }, props),
+        React__default.createElement("ol", { className: cn(theme.nav) },
+            React__default.createElement("li", { className: "contents space-x-3" }, breadcrumbElements))));
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export { Breadcrumbs as default };

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { BreadcrumbsTheme, BreadcrumbsVariant } from "./Breadcrumbs.types";
+/**
+ * Default theme configuration for Breadcrumbs component
+ */
+export declare const breadcrumbsTheme: BreadcrumbsTheme;
+/**
+ * Variant styles for different breadcrumb appearances
+ */
+export declare const breadcrumbsVariants: Record<BreadcrumbsVariant, Partial<BreadcrumbsTheme>>;
+/**
+ * Default chevron separator element
+ */
+export declare const defaultSeparator: React.FunctionComponentElement<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    title?: string;
+    titleId?: string;
+} & React.RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,34 @@
+import React__default from 'react';
+import ForwardRef from '../../../node_modules/@heroicons/react/20/solid/esm/ChevronRightIcon.js';
+
+/**
+ * Default theme configuration for Breadcrumbs component
+ */
+var breadcrumbsTheme = {
+    container: "flex  items-center space-x-1",
+    nav: "flex items-center gap-3 space-x-1",
+    item: "flex items-cente",
+    link: "text-neutral-600 hover:text-neutral-900 transition-colors duration-150 font-medium",
+    current: "text-neutral-900 font-medium",
+    separator: "text-neutral-400 select-none",
+    ellipsis: "text-neutral-600 hover:text-neutral-900 transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-neutral-100",
+    icon: "mr-1.5 flex-shrink-0",
+};
+/**
+ * Variant styles for different breadcrumb appearances
+ */
+var breadcrumbsVariants = {
+    default: {},
+    muted: {
+        link: "text-neutral-500 hover:text-neutral-700 transition-colors duration-150 font-normal",
+        current: "text-neutral-700 font-normal",
+        separator: "text-neutral-300",
+        ellipsis: "text-neutral-500 hover:text-neutral-700 transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-neutral-50",
+    },
+};
+/**
+ * Default chevron separator element
+ */
+var defaultSeparator = React__default.createElement(ForwardRef, { className: "w-4 h-4" });
+
+export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator };

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

@@ -0,0 +1,69 @@
+import React from "react";
+/**
+ * Individual breadcrumb item interface
+ */
+export interface BreadcrumbItem {
+    /** The display text for the breadcrumb item */
+    label: string;
+    /** Optional href for navigation. If not provided, item is treated as current page */
+    href?: string;
+    /** Optional icon to display before the label */
+    icon?: React.ReactNode;
+}
+/**
+ * Breadcrumbs component variant types
+ */
+export type BreadcrumbsVariant = "default" | "muted";
+/**
+ * Theme overrides for Breadcrumbs component
+ */
+export interface BreadcrumbsTheme {
+    /** Base container styles */
+    container: string;
+    /** Navigation wrapper styles */
+    nav: string;
+    /** Individual item styles */
+    item: string;
+    /** Link styles */
+    link: string;
+    /** Current page (non-link) styles */
+    current: string;
+    /** Separator styles */
+    separator: string;
+    /** Ellipsis button styles */
+    ellipsis: string;
+    /** Icon styles */
+    icon: string;
+}
+/**
+ * Theme overrides interface
+ */
+export interface BreadcrumbsThemeOverrides {
+    container?: string;
+    nav?: string;
+    item?: string;
+    link?: string;
+    current?: string;
+    separator?: string;
+    ellipsis?: string;
+    icon?: string;
+}
+/**
+ * Main Breadcrumbs component props
+ */
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    /** Array of breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Custom separator between items. Defaults to "/" */
+    separator?: React.ReactNode;
+    /** Maximum number of items to display before collapsing. Defaults to 4 */
+    maxItems?: number;
+    /** Visual variant of the breadcrumbs */
+    variant?: BreadcrumbsVariant;
+    /** Custom className for styling overrides */
+    className?: string;
+    /** Theme overrides */
+    theme?: BreadcrumbsThemeOverrides;
+    /** Whether to show icons if provided in items */
+    showIcons?: boolean;
+}

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

@@ -0,0 +1,4 @@
+export { default } from "./Breadcrumbs";
+export { default as Breadcrumbs } from "./Breadcrumbs";
+export type { BreadcrumbsProps, BreadcrumbItem, BreadcrumbsVariant, BreadcrumbsTheme, BreadcrumbsThemeOverrides, } from "./Breadcrumbs.types";
+export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator, } from "./Breadcrumbs.theme";

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

@@ -0,0 +1,17 @@
+import { Variants } from "motion/react";
+/**
+ * Get button animation variants based on reduced motion preference
+ */
+export declare const getButtonVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+/**
+ * Get shake animation for error state
+ */
+export declare const getShakeAnimation: (shouldReduceMotion: boolean | null) => {
+    x: number | number[];
+    transition: {
+        duration: number;
+        times: number[];
+        restSpeed: number;
+        restDelta: number;
+    };
+};

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

@@ -0,0 +1,35 @@
+/**
+ * Get button animation variants based on reduced motion preference
+ */
+var getButtonVariants = function (shouldReduceMotion) {
+    return (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false)
+        ? undefined
+        : {
+            tap: {
+                scale: 0.95,
+                transition: {
+                    duration: 0.01,
+                    type: "spring",
+                    stiffness: 800,
+                    damping: 1,
+                },
+            },
+        };
+};
+/**
+ * Get shake animation for error state
+ */
+var getShakeAnimation = function (shouldReduceMotion) { return ({
+    x: (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false)
+        ? 0
+        : [0, -20, 20, -16, 16, -8, 8, -4, 4, 0],
+    transition: {
+        duration: 0.4,
+        times: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
+        // Add a flag to prevent AbortError propagation
+        restSpeed: 0.01,
+        restDelta: 0.01,
+    },
+}); };
+
+export { getButtonVariants, getShakeAnimation };

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ButtonProps } from "./Button.types";
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

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

@@ -0,0 +1,72 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo, useEffect, useCallback } from 'react';
+import { getShakeAnimation, getButtonVariants } from './Button.animations.js';
+import { buttonTheme } from './Button.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { useAnimation } from '../../../node_modules/framer-motion/dist/es/animation/hooks/use-animation.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var Button = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f;
+    var children = _a.children, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.iconOnly, iconOnly = _h === void 0 ? false : _h, _j = _a.state, state = _j === void 0 ? "default" : _j, _k = _a.size, size = _k === void 0 ? "md" : _k, _l = _a.variant, variant = _l === void 0 ? "primary" : _l, _m = _a.block, block = _m === void 0 ? false : _m, onClick = _a.onClick, props = __rest(_a, ["children", "className", "iconOnly", "state", "size", "variant", "block", "onClick"]);
+    var shouldReduceMotion = useReducedMotion();
+    var controls = useAnimation();
+    // Memoize derived state flags for performance
+    var derivedState = useMemo(function () { return ({
+        isDisabled: state === "disabled",
+        isError: state === "error",
+    }); }, [state]);
+    var isDisabled = derivedState.isDisabled, isError = derivedState.isError;
+    // Get animation variants
+    var buttonVariants = getButtonVariants(shouldReduceMotion);
+    var shakeAnimation = getShakeAnimation(shouldReduceMotion);
+    // Trigger shake animation when error state changes
+    useEffect(function () {
+        if (isError && !shouldReduceMotion) {
+            // Reset animation before starting it again
+            controls.set({ x: 0 });
+            // Use a timeout to prevent race conditions in Storybook
+            var timer_1 = setTimeout(function () {
+                controls.start(shakeAnimation).catch(function () {
+                    // Silently catch animation interruption errors
+                });
+            }, 10);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [isError, controls, shakeAnimation, shouldReduceMotion]);
+    // Safe onClick handler
+    var handleClick = useCallback(function (event) {
+        if (isDisabled)
+            return;
+        try {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }
+        catch (error) {
+            console.error("Error in button click handler:", error);
+        }
+    }, [onClick, isDisabled]);
+    // Get styles from theme
+    var sizeClasses = ((_c = (_b = buttonTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) === null || _c === void 0 ? void 0 : _c[iconOnly ? "iconOnly" : "default"]) || "";
+    var variantClasses = ((_d = buttonTheme.variants) === null || _d === void 0 ? void 0 : _d[variant]) || "";
+    var stateClasses = isDisabled ? (((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.disabled) || "") :
+        isError ? (((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.error) || "") : "";
+    // Generate default aria-label for icon-only buttons
+    var ariaLabel = iconOnly && !props["aria-label"] ? "Button" : props["aria-label"];
+    return (React__default.createElement(motion.button, __assign({ ref: ref, type: "button", className: cn("relative", // Base class
+        buttonTheme.baseStyle, variantClasses, sizeClasses, block ? buttonTheme.blockStyle : "", stateClasses, className // User overrides take precedence
+        ), disabled: isDisabled, "data-state": state, "data-variant": variant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", whileHover: undefined, whileTap: !isDisabled && !shouldReduceMotion ? "tap" : undefined, variants: buttonVariants, animate: controls, "aria-disabled": isDisabled, "aria-invalid": isError, "aria-label": ariaLabel, "aria-describedby": isError ? "".concat(props.id || "button", "-error") : undefined, onClick: handleClick }, props),
+        variant === "primary" && (React__default.createElement("div", { className: "absolute pointer-events-none", style: {
+                top: "1px",
+                left: "1px",
+                right: "1px",
+                bottom: "1px",
+                borderRadius: "inherit",
+                boxShadow: buttonTheme.highlightShadow,
+            } })),
+        children));
+});
+// Set display name for dev tools and Storybook
+Button.displayName = "Button";
+
+export { Button as default };

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

@@ -0,0 +1,24 @@
+import { ButtonVariant, ButtonSize, ButtonState } from "./Button.types";
+/**
+ * Internal theme structure for the Button component
+ */
+interface ButtonTheme {
+    baseStyle: string;
+    variants: Record<ButtonVariant, string>;
+    sizes: Record<ButtonSize, {
+        default: string;
+        iconOnly: string;
+    }>;
+    states: Partial<Record<ButtonState, string>>;
+    blockStyle: string;
+    highlightShadow: string;
+    animations: {
+        springTransition: string;
+        bounceTransition: string;
+    };
+}
+/**
+ * Default theme for the Button component
+ */
+export declare const buttonTheme: ButtonTheme;
+export {};

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

@@ -0,0 +1,41 @@
+/**
+ * Default theme for the Button component
+ */
+var buttonTheme = {
+    // Base styles for the button element
+    baseStyle: "inline-flex items-center justify-center gap-2 font-semibold focus:outline-none rounded-[var(--button-rounded)] cursor-pointer transition-all duration-300 ease-in-out",
+    // Variant styles
+    variants: {
+        primary: "bg-primary-base text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 border-[0.5px] border-primary-700 hover:bg-primary-500 hover:ring-2 hover:ring-primary-500/20 hover:border-primary-600 hover:shadow-xl hover:shadow-primary-500/10",
+        secondary: "bg-white text-neutral-800  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 border border-border hover:bg-neutral-50",
+        ghost: "bg-neutral-50 text-neutral-800 hover:bg-neutral-100  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600",
+        link: "bg-transparent text-primary-600 hover:text-primary-700  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600",
+        clear: "bg-transparent text-neutral-800 hover:text-neutral-700  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600",
+    },
+    // 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: "h-[var(--button-icon-size-sm)] w-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
+        },
+        md: {
+            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
+            iconOnly: "h-[var(--button-icon-size-md)] w-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
+        },
+        lg: {
+            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
+            iconOnly: "h-[var(--button-icon-size-lg)] w-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
+        },
+    },
+    // State styles
+    states: {
+        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
+        error: "ring-2 ring-error-500",
+        // default state has no additional classes
+    },
+    // Block style
+    blockStyle: "w-full",
+    // Highlight shadow for primary variant - moved from hardcoded inline style
+    highlightShadow: "inset 0 .75px .25px 0 rgba(255, 255, 255, 0.25)"};
+
+export { buttonTheme };