flikkui 0.1.0-beta.4 → 0.1.0-beta.5

package/dist/components/core/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,67 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useMemo } from 'react';
+import { Avatar } from '../Avatar/Avatar.js';
+import { cn } from '../../../utils/cn.js';
+import { avatarGroupTheme } from './AvatarGroup.theme.js';
+import { getAnimationState, getAvatarGroupVariants } from './AvatarGroup.animations.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var AvatarGroup = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.avatars, avatars = _b === void 0 ? [] : _b, _c = _a.max, max = _c === void 0 ? 5 : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, _e = _a.spacing, spacing = _e === void 0 ? "normal" : _e, _f = _a.direction, direction = _f === void 0 ? "row" : _f, overflowIndicator = _a.overflowIndicator, className = _a.className, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? "Group of users" : _g, _h = _a.shouldAnimate, shouldAnimate = _h === void 0 ? true : _h, props = __rest(_a, ["avatars", "max", "size", "spacing", "direction", "overflowIndicator", "className", "ariaLabel", "shouldAnimate"]);
+    var _j = useState(null), hoveredIndex = _j[0], setHoveredIndex = _j[1];
+    var shouldReduceMotion = useReducedMotion();
+    var enableAnimations = shouldAnimate && !shouldReduceMotion;
+    // Memoize expensive calculations to prevent unnecessary re-renders
+    var memoizedData = useMemo(function () {
+        var visibleAvatars = avatars.slice(0, max);
+        var overflowCount = avatars.length > max ? avatars.length - max : 0;
+        var spacingClass = avatarGroupTheme.spacingStyles[spacing];
+        var spacingHoverClass = enableAnimations ? avatarGroupTheme.spacingHoverStyles[spacing] : '';
+        var directionClass = direction === "row-reverse" ? "flex-row-reverse" : "flex-row";
+        var totalPeople = avatars.length;
+        var groupDescription = avatars
+            .map(function (avatar) { return avatar.alt || "User"; })
+            .join(", ");
+        return {
+            visibleAvatars: visibleAvatars,
+            overflowCount: overflowCount,
+            spacingClass: spacingClass,
+            spacingHoverClass: spacingHoverClass,
+            directionClass: directionClass,
+            totalPeople: totalPeople,
+            groupDescription: groupDescription
+        };
+    }, [avatars, max, spacing, direction, enableAnimations]);
+    var visibleAvatars = memoizedData.visibleAvatars, overflowCount = memoizedData.overflowCount, spacingClass = memoizedData.spacingClass, spacingHoverClass = memoizedData.spacingHoverClass, directionClass = memoizedData.directionClass, totalPeople = memoizedData.totalPeople, groupDescription = memoizedData.groupDescription;
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(avatarGroupTheme.baseStyle, directionClass, className // User overrides take precedence
+        ), role: "group", "aria-label": ariaLabel, "aria-description": "Contains ".concat(totalPeople, " users: ").concat(groupDescription), "data-size": size, "data-spacing": spacing, "data-direction": direction, "data-total": totalPeople, "data-visible": visibleAvatars.length, "data-overflow": overflowCount > 0 ? "true" : "false", onMouseLeave: function () { return enableAnimations && setHoveredIndex(null); } }, props),
+        visibleAvatars.map(function (avatarProps, index) {
+            // Create contextual label for individual avatars in a group
+            var position = index + 1;
+            var contextLabel = avatarProps.contextualLabel ||
+                " (".concat(position, " of ").concat(totalPeople, ")");
+            var MotionDiv = enableAnimations ? motion.div : "div";
+            var motionProps = enableAnimations ? {
+                variants: getAvatarGroupVariants(direction, shouldReduceMotion, enableAnimations),
+                animate: getAnimationState(index, hoveredIndex, enableAnimations),
+                onHoverStart: function () { return setHoveredIndex(index); },
+                whileHover: "hover"
+            } : {};
+            return (React__default.createElement(MotionDiv, __assign({ key: index, className: cn(
+                // First avatar doesn't need negative margin
+                index > 0 ? spacingClass : "z-10", 
+                // Apply hover z-index only when animations enabled
+                index > 0 && spacingHoverClass), "data-position": position, "data-index": index }, motionProps),
+                React__default.createElement(Avatar, __assign({ size: size }, avatarProps, { contextualLabel: contextLabel, 
+                    // Ensure that groupPosition is not passed to avoid conflicts
+                    groupPosition: undefined }))));
+        }),
+        overflowCount > 0 && (React__default.createElement("div", { className: cn(spacingClass, enableAnimations && "transition-transform duration-200 hover:scale-110"), "data-overflow-count": overflowCount }, overflowIndicator ? (overflowIndicator(overflowCount)) : (React__default.createElement(Avatar, { size: size, alt: "+".concat(overflowCount, " more"), fallback: React__default.createElement("span", null,
+                "+",
+                overflowCount), className: avatarGroupTheme.overflowAvatarStyle, role: "img", "aria-label": "+ ".concat(overflowCount, " more users") }))))));
+});
+// Set display name for dev tools and Storybook
+AvatarGroup.displayName = "AvatarGroup";
+
+export { AvatarGroup, AvatarGroup as default };

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

@@ -0,0 +1,23 @@
+/**
+ * Default theme for the AvatarGroup component
+ */
+var avatarGroupTheme = {
+    // Base styles for the avatar group
+    baseStyle: 'flex items-start',
+    // Spacing options - separated from hover effects
+    spacingStyles: {
+        tight: '-ml-5 z-10',
+        normal: '-ml-3 z-10',
+        loose: '-ml-2 z-10',
+    },
+    // Hover z-index effects - applied separately when animations enabled
+    spacingHoverStyles: {
+        tight: 'hover:z-20',
+        normal: 'hover:z-20',
+        loose: 'hover:z-20',
+    },
+    // Overflow avatar styles
+    overflowAvatarStyle: 'bg-neutral-100 text-neutral-800 font-semibold text-sm flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200',
+};
+
+export { avatarGroupTheme };

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

@@ -0,0 +1,109 @@
+// Main badge variants with optimized transitions
+var badgeVariants = {
+    initial: {
+        opacity: 1,
+        scale: 1,
+    },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+            mass: 1,
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.2,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 25,
+            mass: 0.8,
+            duration: 0.3,
+        },
+    },
+};
+// Dot variants
+var dotVariants = {
+    initial: {
+        opacity: 0,
+        scale: 0,
+    },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0,
+        transition: {
+            duration: 0.15,
+            ease: "easeIn",
+        },
+    },
+};
+// Dismiss button variants - optimized for performance
+var dismissButtonVariants = {
+    initial: {
+        opacity: 0.5,
+    },
+    hover: {
+        opacity: 1,
+        transition: { duration: 0.15, ease: "easeOut" },
+    },
+    tap: {
+        scale: 0.95,
+        transition: { duration: 0.1, ease: "easeOut" },
+    },
+};
+// Optimized dismiss animation sequence
+// This uses Framer Motion's built-in sequencing capabilities
+var dismissVariants = {
+    initial: {
+        opacity: 0,
+        scale: 0.8,
+    },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+            mass: 1,
+        },
+    },
+    // First stage of exit - slight pop
+    exit: {
+        opacity: 0,
+        scale: 0.2,
+        transition: {
+            opacity: {
+                duration: 0.3,
+                ease: "easeOut",
+            },
+            scale: {
+                type: "spring",
+                stiffness: 300,
+                damping: 20,
+                // Add a slight delay to create the pop effect
+                delay: 0.05,
+            },
+            duration: 0.4,
+        },
+    },
+};
+// Animation timing constants (in ms)
+var animationTiming = {
+    dismissDelay: 400, // Total animation duration
+};
+
+export { animationTiming, badgeVariants, dismissButtonVariants, dismissVariants, dotVariants };

package/dist/components/core/Badge/Badge.js

@@ -0,0 +1,101 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useMemo, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { animationTiming, dismissVariants, badgeVariants, dotVariants, dismissButtonVariants } from './Badge.animations.js';
+import { badgeTheme } from './Badge.theme.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+// Helper to determine whether we should animate (Storybook can disable animations globally)
+var getShouldAnimate = function () {
+    if (typeof window === 'undefined')
+        return true;
+    if (window.__STORYBOOK_DISABLE_ANIMATIONS__)
+        return false;
+    try {
+        return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+    catch (_a) {
+        return true;
+    }
+};
+/**
+ * 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>
+ * ```
+ */
+var Badge = React__default.memo(React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d;
+    var children = _a.children, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.size, size = _f === void 0 ? 'md' : _f, _g = _a.pill, pill = _g === void 0 ? false : _g, _h = _a.withDot, withDot = _h === void 0 ? false : _h, _j = _a.dismissible, dismissible = _j === void 0 ? false : _j, onDismiss = _a.onDismiss, className = _a.className, _k = _a.theme, customTheme = _k === void 0 ? {} : _k, props = __rest(_a, ["children", "variant", "size", "pill", "withDot", "dismissible", "onDismiss", "className", "theme"]);
+    // Add state to track visibility for animation
+    var _l = useState(true), isVisible = _l[0], setIsVisible = _l[1];
+    var shouldAnimate = useMemo(getShouldAnimate, []);
+    // Validate that onDismiss is provided when dismissible is true
+    if (process.env.NODE_ENV !== 'production') {
+        if (dismissible && !onDismiss) {
+            console.warn('Badge: onDismiss prop is required when dismissible is true');
+        }
+    }
+    var handleDismiss = useCallback(function (e) {
+        e.stopPropagation();
+        setIsVisible(false);
+        // Delay the onDismiss call until after the animation
+        setTimeout(function () {
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e);
+        }, animationTiming.dismissDelay);
+    }, [onDismiss]);
+    // Merge default theme with custom theme overrides
+    var theme = __assign(__assign(__assign({}, badgeTheme), customTheme), { variants: __assign(__assign({}, badgeTheme.variants), customTheme.variants), sizes: __assign(__assign({}, badgeTheme.sizes), customTheme.sizes), dotColors: __assign(__assign({}, badgeTheme.dotColors), customTheme.dotColors) });
+    // Get styles from theme
+    var variantStyles = ((_b = theme.variants) === null || _b === void 0 ? void 0 : _b[variant]) || '';
+    var sizeStyle = ((_c = theme.sizes) === null || _c === void 0 ? void 0 : _c[size]) || {};
+    var shapeStyle = pill ? 'rounded-full' : 'rounded-md';
+    var dotColorStyle = ((_d = theme.dotColors) === null || _d === void 0 ? void 0 : _d[variant]) || '';
+    // Button and icon size styles
+    var buttonSizeStyles = {
+        sm: 'size-3.5',
+        md: 'size-4',
+        lg: 'size-4.5',
+    };
+    var iconSizeStyles = {
+        sm: 'size-2.5',
+        md: 'size-3',
+        lg: 'size-3.5',
+    };
+    var baseStyles = cn(theme.baseStyle, 'badge inline-flex items-center font-medium ring-inset select-none whitespace-nowrap', shapeStyle, variantStyles, sizeStyle.base, pill ? sizeStyle.pill : sizeStyle.default, className);
+    // Create data attributes for styling hooks
+    var dataAttributes = {
+        'data-variant': variant,
+        'data-size': size,
+        'data-state': isVisible ? 'visible' : 'hidden',
+        'data-pill': pill ? 'true' : 'false',
+        'data-with-dot': withDot ? 'true' : 'false',
+        'data-dismissible': dismissible ? 'true' : 'false',
+    };
+    if (!shouldAnimate) {
+        // Strip motion-only props to satisfy HTMLAttributes typings
+        var _m = props; _m.initial; _m.animate; _m.exit; _m.variants; _m.whileHover; _m.whileTap; _m.layout; _m.transition; _m.style; _m.onUpdate; var restHtmlProps = __rest(_m, ["initial", "animate", "exit", "variants", "whileHover", "whileTap", "layout", "transition", "style", "onUpdate"]);
+        // Non-animated render for Storybook or reduced-motion environments
+        return (isVisible ? (React__default.createElement("span", __assign({ ref: ref, className: baseStyles }, dataAttributes, restHtmlProps),
+            withDot && (React__default.createElement("span", { className: cn('badge-dot rounded-full shrink-0 size-1.5', dotColorStyle), "aria-hidden": "true" })),
+            React__default.createElement("span", { className: "badge-content" }, children),
+            dismissible && (React__default.createElement("button", { type: "button", onClick: handleDismiss, className: cn('badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer', buttonSizeStyles[size]), "aria-label": "Dismiss" },
+                React__default.createElement("svg", { className: cn('badge-dismiss-icon', iconSizeStyles[size]), viewBox: "0 0 16 16", fill: "currentColor" },
+                    React__default.createElement("path", { d: "M12.72 3.293a1 1 0 00-1.415 0L8.002 6.586 4.709 3.293a1 1 0 00-1.415 1.414L6.587 8l-3.293 3.293a1 1 0 101.415 1.414L8.002 9.414l3.303 3.293a1 1 0 001.415-1.414L9.417 8l3.303-3.293a1 1 0 000-1.414z" })))))) : null);
+    }
+    return (React__default.createElement(AnimatePresence, { mode: "wait" }, isVisible && (React__default.createElement(motion.span, __assign({ ref: ref, className: baseStyles, variants: dismissible ? dismissVariants : badgeVariants, initial: "initial", animate: "animate", exit: "exit" }, dataAttributes, props),
+        withDot && (React__default.createElement(motion.span, { className: cn('badge-dot rounded-full shrink-0 size-1.5', dotColorStyle), variants: dotVariants, "aria-hidden": "true" })),
+        React__default.createElement("span", { className: "badge-content" }, children),
+        dismissible && (React__default.createElement(motion.button, { type: "button", onClick: handleDismiss, className: cn('badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer', buttonSizeStyles[size]), "aria-label": "Dismiss", variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap" },
+            React__default.createElement("svg", { className: cn('badge-dismiss-icon', iconSizeStyles[size]), viewBox: "0 0 16 16", fill: "currentColor" },
+                React__default.createElement("path", { d: "M12.72 3.293a1 1 0 00-1.415 0L8.002 6.586 4.709 3.293a1 1 0 00-1.415 1.414L6.587 8l-3.293 3.293a1 1 0 101.415 1.414L8.002 9.414l3.303 3.293a1 1 0 001.415-1.414L9.417 8l3.303-3.293a1 1 0 000-1.414z" }))))))));
+}));
+Badge.displayName = 'Badge';
+
+export { Badge };

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

@@ -0,0 +1,41 @@
+/**
+ * Default theme configuration for Badge component
+ */
+var badgeTheme = {
+    baseStyle: '',
+    variants: {
+        default: 'bg-white text-gray-600 ring-1 ring-gray-500/20',
+        primary: 'bg-[var(--color-primary-50)] text-primary ring-1 ring-primary/10',
+        secondary: 'bg-gray-100 text-gray-700 ring-1 ring-gray-900/10',
+        success: 'bg-[var(--color-success-50)] text-[var(--color-success-700)] ring-1 ring-success/20',
+        warning: 'bg-[var(--color-warning-50)] text-warning ring-1 ring-warning/20',
+        error: 'bg-[var(--color-danger-50)] text-danger ring-1 ring-danger/10',
+    },
+    sizes: {
+        sm: {
+            base: 'text-xs py-1 gap-1',
+            pill: 'px-2.5',
+            default: 'px-2',
+        },
+        md: {
+            base: 'text-sm py-1 gap-1.5',
+            pill: 'px-2.5',
+            default: 'px-2',
+        },
+        lg: {
+            base: 'text-sm py-1.5 gap-2',
+            pill: 'px-3',
+            default: 'px-2.5',
+        },
+    },
+    dotColors: {
+        default: 'bg-gray-400',
+        primary: 'bg-primary',
+        secondary: 'bg-gray-500',
+        success: 'bg-success',
+        warning: 'bg-warning',
+        error: 'bg-danger',
+    }
+};
+
+export { badgeTheme };

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

@@ -8,10 +8,10 @@ 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",
+    link: "text-[var(--color-neutral-600)] hover:text-[var(--color-neutral-900)] transition-colors duration-150 font-medium",
+    current: "text-[var(--color-neutral-900)] font-medium",
+    separator: "text-[var(--color-neutral-400)] select-none",
+    ellipsis: "text-[var(--color-neutral-600)] hover:text-[var(--color-neutral-900)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-neutral-100)]",
     icon: "mr-1.5 flex-shrink-0",
 };
 /**
@@ -20,10 +20,10 @@ var breadcrumbsTheme = {
 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",
+        link: "text-[var(--color-neutral-500)] hover:text-[var(--color-neutral-700)] transition-colors duration-150 font-normal",
+        current: "text-[var(--color-neutral-700)] font-normal",
+        separator: "text-[var(--color-neutral-300)]",
+        ellipsis: "text-[var(--color-neutral-500)] hover:text-[var(--color-neutral-700)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-neutral-50)]",
     },
 };
 /**

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

@@ -6,15 +6,15 @@ var buttonTheme = {
     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 border-primary-700 hover:bg-primary-700 hover:ring-2 hover:ring-primary-base/40 hover:border-primary-600 hover:shadow-xl hover:shadow-primary-base/20",
+        primary: "bg-primary text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] border border-[var(--color-primary-700)] hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-primary/40 hover:border-[var(--color-primary-600)] hover:shadow-xl hover:shadow-primary/20",
         secondary: "bg-white text-text-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 border border-border hover:bg-neutral-50 hover:ring-2 hover:ring-border/50  hover:shadow-xl hover:shadow-neutral-500/10",
         ghost: "bg-neutral-50 text-text-secondary hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 hover:ring-2 hover:ring-border/50",
         outline: "bg-white text-text-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 border border-border hover:bg-neutral-50 hover:ring-2 hover:ring-border/50",
-        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",
+        link: "bg-transparent text-[var(--color-primary-600)] hover:text-[var(--color-primary-700)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)]",
         clear: "bg-transparent text-text-secondary hover:text-text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600",
-        warning: "bg-warning-base text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warning-600 border border-warning-700 hover:bg-warning-600 hover:ring-2 hover:ring-warning-base/40 hover:border-warning-700 hover:shadow-xl hover:shadow-warning-base/20",
-        danger: "bg-danger-base text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger-600 border border-danger-700 hover:bg-danger-600 hover:ring-2 hover:ring-danger-base/40 hover:border-danger-700 hover:shadow-xl hover:shadow-danger-base/20",
-        success: "bg-success-base text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success-600 border border-success-600 hover:bg-success-600 hover:ring-2 hover:ring-success-base/30 hover:border-success-base  hover:shadow-xl hover:shadow-success-base/20",
+        warning: "bg-warning text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-warning-600)] border border-[var(--color-warning-700)] hover:bg-[var(--color-warning-600)] hover:ring-2 hover:ring-warning/40 hover:border-[var(--color-warning-700)] hover:shadow-xl hover:shadow-warning/20",
+        danger: "bg-danger text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-danger-600)] border border-[var(--color-danger-700)] hover:bg-[var(--color-danger-600)] hover:ring-2 hover:ring-danger/40 hover:border-[var(--color-danger-700)] hover:shadow-xl hover:shadow-danger/20",
+        success: "bg-success text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-success-600)] border border-[var(--color-success-600)] hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-success/30 hover:border-success  hover:shadow-xl hover:shadow-success/20",
     },
     // Size variants
     sizes: {

package/dist/components/core/Card/Card.js

@@ -0,0 +1,46 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { cardTheme } from './Card.theme.js';
+
+var CardRoot = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.theme, customTheme = _b === void 0 ? {} : _b, props = __rest(_a, ["children", "className", "theme"]);
+    var theme = __assign(__assign({}, cardTheme), customTheme);
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(theme.baseStyle, className) }, props), children));
+});
+var CardHeader = 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 flex-col space-y-1.5 p-6', className) }, props), children));
+});
+var CardTitle = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (React__default.createElement("h3", __assign({ ref: ref, className: cn('text-2xl font-semibold leading-none tracking-tight', className) }, props), children));
+});
+var CardDescription = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (React__default.createElement("p", __assign({ ref: ref, className: cn('text-sm text-gray-600', className) }, props), children));
+});
+var CardContent = 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('p-6 pt-0', className) }, props), children));
+});
+var CardFooter = 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 items-center p-6 pt-0', className) }, props), children));
+});
+CardRoot.displayName = 'Card';
+CardHeader.displayName = 'CardHeader';
+CardTitle.displayName = 'CardTitle';
+CardDescription.displayName = 'CardDescription';
+CardContent.displayName = 'CardContent';
+CardFooter.displayName = 'CardFooter';
+// Create compound component with proper typing
+var Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Title: CardTitle,
+    Description: CardDescription,
+    Content: CardContent,
+    Footer: CardFooter,
+});
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

@@ -0,0 +1,5 @@
+var cardTheme = {
+    baseStyle: 'rounded-xl overflow-hidden bg-white border border-border',
+};
+
+export { cardTheme };

package/dist/components/core/Divider/Divider.js

@@ -0,0 +1,21 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { dividerTheme } from './Divider.theme.js';
+
+var Divider = React__default.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d = _a.vertical, vertical = _d === void 0 ? false : _d, _e = _a.margin, margin = _e === void 0 ? 'md' : _e, className = _a.className, _f = _a.theme, customTheme = _f === void 0 ? {} : _f, props = __rest(_a, ["vertical", "margin", "className", "theme"]);
+    var theme = __assign(__assign(__assign({}, dividerTheme), customTheme), { margins: {
+            horizontal: __assign(__assign({}, dividerTheme.margins.horizontal), (_b = customTheme.margins) === null || _b === void 0 ? void 0 : _b.horizontal),
+            vertical: __assign(__assign({}, dividerTheme.margins.vertical), (_c = customTheme.margins) === null || _c === void 0 ? void 0 : _c.vertical),
+        } });
+    var marginStyle = vertical
+        ? theme.margins.vertical[margin] || ''
+        : theme.margins.horizontal[margin] || '';
+    var orientationStyle = vertical ? theme.vertical : theme.horizontal;
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(theme.baseStyle, orientationStyle, marginStyle, className), role: "separator", "aria-orientation": vertical ? 'vertical' : 'horizontal' }, props)));
+});
+Divider.displayName = 'Divider';
+
+export { Divider };

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

@@ -0,0 +1,19 @@
+var dividerTheme = {
+    baseStyle: 'bg-gray-200 border-0',
+    horizontal: 'w-full h-px',
+    vertical: 'h-full w-px',
+    margins: {
+        horizontal: {
+            sm: 'my-2',
+            md: 'my-4',
+            lg: 'my-6',
+        },
+        vertical: {
+            sm: 'mx-2',
+            md: 'mx-4',
+            lg: 'mx-6',
+        },
+    },
+};
+
+export { dividerTheme };

package/dist/components/core/Pagination/Pagination.js

@@ -0,0 +1,113 @@
+import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo } from 'react';
+import { paginationTheme } from './Pagination.theme.js';
+import { cn } from '../../../utils/cn.js';
+import Button from '../Button/Button.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronDoubleLeftIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronLeftIcon.js';
+import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronRightIcon.js';
+import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronDoubleRightIcon.js';
+
+/**
+ * Internal PaginationItem component for page numbers and ellipsis
+ */
+var PaginationItem = React__default.forwardRef(function (_a, ref) {
+    var isActive = _a.isActive, isDisabled = _a.isDisabled, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "page" : _c, className = _a.className, children = _a.children, props = __rest(_a, ["isActive", "isDisabled", "size", "variant", "className", "children"]);
+    var baseClasses = paginationTheme.itemBase;
+    var variantClasses = paginationTheme.variants[variant];
+    var sizeClasses = paginationTheme.sizes[size];
+    var stateClasses = isActive
+        ? paginationTheme.states.active
+        : isDisabled
+            ? paginationTheme.states.disabled
+            : "";
+    return (React__default.createElement("button", __assign({ ref: ref, type: "button", disabled: isDisabled, className: cn(baseClasses, variantClasses, sizeClasses, stateClasses, className), "aria-current": isActive ? "page" : undefined }, props), children));
+});
+PaginationItem.displayName = "PaginationItem";
+/**
+ * Generate pagination range with ellipsis
+ */
+var usePaginationRange = function (currentPage, totalPages, siblingCount) {
+    if (siblingCount === void 0) { siblingCount = 1; }
+    return useMemo(function () {
+        var DOTS = "...";
+        // Total page numbers to show: current + siblings + first + last + 2 dots
+        var totalPageNumbers = siblingCount + 5;
+        // If total pages is less than total page numbers, show all pages
+        if (totalPageNumbers >= totalPages) {
+            return Array.from({ length: totalPages }, function (_, i) { return i + 1; });
+        }
+        var leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+        var rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+        var shouldShowLeftDots = leftSiblingIndex > 2;
+        var shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+        var firstPageIndex = 1;
+        var lastPageIndex = totalPages;
+        // No left dots, but right dots
+        if (!shouldShowLeftDots && shouldShowRightDots) {
+            var leftItemCount = 3 + 2 * siblingCount;
+            var leftRange = Array.from({ length: leftItemCount }, function (_, i) { return i + 1; });
+            return __spreadArray(__spreadArray([], leftRange, true), [DOTS, totalPages], false);
+        }
+        // Left dots, but no right dots
+        if (shouldShowLeftDots && !shouldShowRightDots) {
+            var rightItemCount_1 = 3 + 2 * siblingCount;
+            var rightRange = Array.from({ length: rightItemCount_1 }, function (_, i) { return totalPages - rightItemCount_1 + i + 1; });
+            return __spreadArray([firstPageIndex, DOTS], rightRange, true);
+        }
+        // Both left and right dots
+        if (shouldShowLeftDots && shouldShowRightDots) {
+            var middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, function (_, i) { return leftSiblingIndex + i; });
+            return __spreadArray(__spreadArray([firstPageIndex, DOTS], middleRange, true), [DOTS, lastPageIndex], false);
+        }
+        return [];
+    }, [currentPage, totalPages, siblingCount]);
+};
+/**
+ * Pagination component for navigating through pages
+ */
+var Pagination = React__default.forwardRef(function (_a, ref) {
+    var currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.showFirstLast, showFirstLast = _c === void 0 ? false : _c, _d = _a.showPrevNext, showPrevNext = _d === void 0 ? true : _d, _e = _a.siblingCount, siblingCount = _e === void 0 ? 1 : _e, className = _a.className, _f = _a.theme, customTheme = _f === void 0 ? {} : _f, props = __rest(_a, ["currentPage", "totalPages", "onPageChange", "size", "showFirstLast", "showPrevNext", "siblingCount", "className", "theme"]);
+    // Merge theme with custom overrides
+    var theme = __assign(__assign(__assign({}, paginationTheme), customTheme), { variants: __assign(__assign({}, paginationTheme.variants), (customTheme.variants || {})), sizes: __assign(__assign({}, paginationTheme.sizes), (customTheme.sizes || {})), states: __assign(__assign({}, paginationTheme.states), (customTheme.states || {})) });
+    var paginationRange = usePaginationRange(currentPage, totalPages, siblingCount);
+    // Don't render if there's only one page
+    if (totalPages <= 1) {
+        return null;
+    }
+    var handlePageChange = function (page) {
+        if (page >= 1 && page <= totalPages && page !== currentPage) {
+            onPageChange(page);
+        }
+    };
+    var isFirstPage = currentPage === 1;
+    var isLastPage = currentPage === totalPages;
+    return (React__default.createElement("nav", __assign({ ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className) }, props),
+        showFirstLast && (React__default.createElement(Button, { size: size, variant: "clear", disabled: isFirstPage, onClick: function () { return handlePageChange(1); }, "aria-label": "Go to first page" },
+            React__default.createElement(ForwardRef, { className: "w-4 h-4" }),
+            React__default.createElement("span", { className: "sr-only" }, "First"))),
+        showPrevNext && (React__default.createElement(Button, { size: size, variant: "clear", disabled: isFirstPage, onClick: function () { return handlePageChange(currentPage - 1); }, "aria-label": "Go to previous page (".concat(currentPage - 1, ")") },
+            React__default.createElement(ForwardRef$1, { className: "w-4 h-4" }),
+            React__default.createElement("span", { className: "sr-only" }, "Previous"))),
+        paginationRange.map(function (pageNumber, index) {
+            if (pageNumber === "...") {
+                return (React__default.createElement(PaginationItem, { key: "ellipsis-".concat(index), size: size, variant: "ellipsis", isDisabled: true, "aria-label": "More pages", role: "separator" },
+                    React__default.createElement("span", { "aria-hidden": "true" }, "\u2026"),
+                    React__default.createElement("span", { className: "sr-only" }, "More pages")));
+            }
+            var page = pageNumber;
+            var isActive = page === currentPage;
+            return (React__default.createElement(PaginationItem, { key: page, size: size, variant: "page", isActive: isActive, onClick: function () { return handlePageChange(page); }, "aria-label": isActive ? "Page ".concat(page, ", current page") : "Go to page ".concat(page) },
+                page,
+                isActive && React__default.createElement("span", { className: "sr-only" }, "(current)")));
+        }),
+        showPrevNext && (React__default.createElement(Button, { size: size, variant: "clear", disabled: isLastPage, onClick: function () { return handlePageChange(currentPage + 1); }, "aria-label": "Go to next page (".concat(currentPage + 1, ")") },
+            React__default.createElement(ForwardRef$2, { className: "w-4 h-4" }),
+            React__default.createElement("span", { className: "sr-only" }, "Next"))),
+        showFirstLast && (React__default.createElement(Button, { size: size, variant: "clear", disabled: isLastPage, onClick: function () { return handlePageChange(totalPages); }, "aria-label": "Go to last page" },
+            React__default.createElement(ForwardRef$3, { className: "w-4 h-4" }),
+            React__default.createElement("span", { className: "sr-only" }, "Last")))));
+});
+Pagination.displayName = "Pagination";
+
+export { Pagination as default };

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

@@ -0,0 +1,27 @@
+/**
+ * Default theme for the Pagination component
+ */
+var paginationTheme = {
+    // Base container styles
+    baseStyle: "flex items-center justify-center gap-1",
+    // Base item styles
+    itemBase: "inline-flex items-center justify-center font-medium rounded-full transition-all duration-200 ease-in-out focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer text-text-secondary hover:text-text-primary",
+    // Variant styles
+    variants: {
+        page: "hover:bg-neutral-50 hover:border-neutral-300",
+        ellipsis: "border-none cursor-default pointer-events-none",
+    },
+    // Size variants
+    sizes: {
+        sm: "h-8 min-w-[2rem] px-2 text-sm",
+        md: "h-10 min-w-[2.5rem] px-3 text-sm",
+    },
+    // State styles
+    states: {
+        active: "bg-primary-50 text-text-primary",
+        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
+        hover: "hover:bg-neutral-50",
+    },
+};
+
+export { paginationTheme };