flikkui 0.1.0-beta.2 → 0.1.0-beta.3

package/dist/components/charts/index.d.ts

@@ -4,6 +4,7 @@ export { LineChart } from './LineChart';
 export { AreaChart } from './AreaChart';
 export { Heatmap } from './Heatmap';
 export { ChartTooltip } from './shared/ChartTooltip';
+export { ChartLegend, ChartLegendContent } from './shared/ChartLegend';
 export { XAxis, YAxis } from './shared/ChartAxis';
 export { ChartText } from './shared/ChartText';
 export { ChartMarker } from './shared/ChartMarker';
@@ -17,6 +18,7 @@ export { generateColorPalette, getContrastColor } from './utils/color-utils';
 export { processHeatmapData, calculateIntensity, createGridMatrix, getDefaultTooltipContent, formatAxisLabel, generateSampleData } from './Heatmap/utils/heatmapUtils';
 export type { ChartDataPoint, ChartConfig, ChartVariant, CurveType, BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps, StandardAxisConfig, ChartThemeOverrides, CHART_DEFAULTS, } from './types/chart.types';
 export type { ChartTooltipProps, ChartTooltipContentProps, } from './shared/ChartTooltip/ChartTooltip.types';
+export type { ChartLegendProps, ChartLegendContentProps, } from './shared/ChartLegend/ChartLegend.types';
 export type { BaseAxisProps, XAxisProps, YAxisProps, AxisTickProps, } from './shared/ChartAxis/ChartAxis.types';
 export type { ChartTextProps, ChartTextTheme, } from './shared/ChartText/ChartText.types';
 export type { ChartMarkerProps, ChartMarkerTheme, } from './shared/ChartMarker/ChartMarker.types';

package/dist/components/charts/shared/ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ChartLegendProps } from './ChartLegend.types';
+/**
+ * Basic ChartLegend component - minimal implementation
+ * TODO: Enhance with full legend functionality when needed
+ */
+export declare const ChartLegend: React.FC<ChartLegendProps>;

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ChartLegendContentProps } from './ChartLegend.types';
+/**
+ * Basic ChartLegendContent component - minimal implementation
+ * TODO: Enhance with full legend content functionality when needed
+ */
+export declare const ChartLegendContent: React.FC<ChartLegendContentProps>;

package/dist/components/charts/shared/ChartLegend/index.d.ts

@@ -1 +1,3 @@
+export { ChartLegend } from './ChartLegend';
+export { ChartLegendContent } from './ChartLegendContent';
 export type { ChartLegendProps, ChartLegendContentProps } from './ChartLegend.types';

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

@@ -5,7 +5,7 @@ import { AvatarGroupDirection } from "./AvatarGroup.types";
  * Creates a creative sliding and focus effect where hovered avatars scale up
  * while non-hovered avatars slide closer together and fade slightly
  */
-export declare const getAvatarGroupVariants: (direction?: AvatarGroupDirection, shouldReduceMotion?: boolean | null) => Variants;
+export declare const getAvatarGroupVariants: (direction?: AvatarGroupDirection, shouldReduceMotion?: boolean | null, enableAnimations?: boolean) => Variants;
 /**
  * Determines which animation state to use based on hover index
  */

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

@@ -5,6 +5,7 @@ import { AvatarGroupSpacing } from './AvatarGroup.types';
 interface AvatarGroupTheme {
     baseStyle: string;
     spacingStyles: Record<AvatarGroupSpacing, string>;
+    spacingHoverStyles: Record<AvatarGroupSpacing, string>;
     overflowAvatarStyle: string;
 }
 /**

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

@@ -52,9 +52,9 @@ var Breadcrumbs = function (_a) {
     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 }, "...")),
+        return (React__default.createElement(Popover, { key: "ellipsis", isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen },
+            React__default.createElement(Popover.Trigger, { className: cn(theme.ellipsis), "aria-label": "Show ".concat(hiddenItems.length, " hidden breadcrumb items"), "aria-expanded": isEllipsisOpen },
+                React__default.createElement("button", { type: "button" }, "...")),
             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)),
@@ -64,13 +64,14 @@ var Breadcrumbs = function (_a) {
     };
     // Build the breadcrumb elements
     var breadcrumbElements = [];
+    var separatorIndex = 0; // Unique separator counter
     if (shouldCollapse) {
         // Add first item
         breadcrumbElements.push(renderItem(visibleItems[0], 0, false));
-        breadcrumbElements.push(renderSeparator(0));
+        breadcrumbElements.push(renderSeparator(separatorIndex++));
         // Add ellipsis
         breadcrumbElements.push(renderEllipsis());
-        breadcrumbElements.push(renderSeparator(1));
+        breadcrumbElements.push(renderSeparator(separatorIndex++));
         // Add last two items
         var lastTwoItems_1 = visibleItems.slice(1);
         lastTwoItems_1.forEach(function (item, index) {
@@ -78,7 +79,7 @@ var Breadcrumbs = function (_a) {
             var isLast = actualIndex === lastTwoItems_1.length;
             breadcrumbElements.push(renderItem(item, actualIndex, isLast));
             if (!isLast) {
-                breadcrumbElements.push(renderSeparator(actualIndex));
+                breadcrumbElements.push(renderSeparator(separatorIndex++));
             }
         });
     }
@@ -88,7 +89,7 @@ var Breadcrumbs = function (_a) {
             var isLast = index === visibleItems.length - 1;
             breadcrumbElements.push(renderItem(item, index, isLast));
             if (!isLast) {
-                breadcrumbElements.push(renderSeparator(index));
+                breadcrumbElements.push(renderSeparator(separatorIndex++));
             }
         });
     }

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

@@ -3,15 +3,3 @@ 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

@@ -8,28 +8,13 @@ var getButtonVariants = function (shouldReduceMotion) {
             tap: {
                 scale: 0.95,
                 transition: {
-                    duration: 0.01,
+                    duration: 0.1,
                     type: "spring",
-                    stiffness: 800,
-                    damping: 1,
+                    stiffness: 400,
+                    damping: 10,
                 },
             },
         };
 };
-/**
- * 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 };
+export { getButtonVariants };

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

@@ -1,40 +1,32 @@
 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 React__default, { useMemo, useCallback } from 'react';
+import { 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 children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.iconOnly, iconOnly = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "md" : _e, _f = _a.variant, variant = _f === void 0 ? "primary" : _f, _g = _a.block, block = _g === void 0 ? false : _g, onClick = _a.onClick, props = __rest(_a, ["children", "className", "iconOnly", "state", "size", "variant", "block", "onClick"]);
     var shouldReduceMotion = useReducedMotion();
-    var controls = useAnimation();
+    // Check if we're in Storybook and should disable animations
+    var isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
+    var shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
     // 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); };
+    // Compute variants without a global cache (HMR-safe)
+    var buttonVariants = useMemo(function () { return getButtonVariants(shouldDisableAnimations); }, [shouldDisableAnimations]);
+    // Dev-time a11y warning for iconOnly buttons without aria-label
+    if (process.env.NODE_ENV !== 'production') {
+        if (iconOnly && !props["aria-label"]) {
+            // eslint-disable-next-line no-console
+            console.warn("Button(iconOnly) requires 'aria-label' for accessibility.");
         }
-    }, [isError, controls, shakeAnimation, shouldReduceMotion]);
+    }
     // Safe onClick handler
     var handleClick = useCallback(function (event) {
         if (isDisabled)
@@ -43,27 +35,38 @@ var Button = React__default.forwardRef(function (_a, ref) {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         }
         catch (error) {
+            // eslint-disable-next-line no-console
             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
+    // Memoize theme classes to prevent recalculation on every render
+    var themeClasses = useMemo(function () {
+        var _a, _b, _c, _d, _e;
+        var sizeClasses = ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[iconOnly ? "iconOnly" : "default"]) || "";
+        var variantClasses = ((_c = buttonTheme.variants) === null || _c === void 0 ? void 0 : _c[variant]) || "";
+        var stateClasses = isDisabled ? (((_d = buttonTheme.states) === null || _d === void 0 ? void 0 : _d.disabled) || "") :
+            isError ? (((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.error) || "") : "";
+        return {
+            sizeClasses: sizeClasses,
+            variantClasses: variantClasses,
+            stateClasses: stateClasses,
+            blockStyle: block ? buttonTheme.blockStyle : "",
+        };
+    }, [size, iconOnly, variant, isDisabled, isError, block]);
+    // Generate default aria-label for icon-only buttons if not provided (fallback only)
     var ariaLabel = iconOnly && !props["aria-label"] ? "Button" : props["aria-label"];
+    // Determine animation props (user props will override due to spread order)
+    var animationProps = shouldDisableAnimations ? {} : {
+        whileTap: !isDisabled ? "tap" : undefined,
+        variants: buttonVariants,
+    };
     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",
+        buttonTheme.baseStyle, themeClasses.variantClasses, themeClasses.sizeClasses, themeClasses.blockStyle, themeClasses.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", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, "aria-describedby": undefined, onClick: handleClick }, animationProps, props),
+        React__default.createElement("div", { className: "absolute pointer-events-none top-px left-px right-px h-3 rounded-inherit bg-gradient-to-b from-white/15 via-transparent to-transparent", style: {
+                borderRadius: "calc(var(--button-rounded) - 2px)",
                 boxShadow: buttonTheme.highlightShadow,
-            } })),
+            } }),
         children));
 });
 // Set display name for dev tools and Storybook

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

@@ -12,10 +12,6 @@ interface ButtonTheme {
     states: Partial<Record<ButtonState, string>>;
     blockStyle: string;
     highlightShadow: string;
-    animations: {
-        springTransition: string;
-        bounceTransition: string;
-    };
 }
 /**
  * Default theme for the Button component

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

@@ -6,25 +6,29 @@ 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-[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",
+        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",
+        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",
+        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",
     },
     // 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)]",
+            iconOnly: "size-[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)]",
+            iconOnly: "size-[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)]",
+            iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
         },
     },
     // State styles
@@ -36,6 +40,7 @@ var buttonTheme = {
     // 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)"};
+    highlightShadow: "inset 0 .75px .25px 0 rgba(255, 255, 255, 0.25)",
+};
 
 export { buttonTheme };

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

@@ -24,6 +24,6 @@ export interface ButtonProps extends HTMLMotionProps<"button"> {
     /** Additional class names */
     className?: string;
 }
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "link" | "clear";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "link" | "clear" | "outline" | "warning" | "danger" | "success";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonState = "default" | "disabled" | "error";

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

@@ -4,13 +4,19 @@ export interface DividerTheme {
     baseStyle: string;
     horizontal: string;
     vertical: string;
-    margins: Record<DividerMargin, string>;
+    margins: {
+        horizontal: Record<DividerMargin, string>;
+        vertical: Record<DividerMargin, string>;
+    };
 }
 export interface DividerThemeOverrides {
     baseStyle?: string;
     horizontal?: string;
     vertical?: string;
-    margins?: Partial<Record<DividerMargin, string>>;
+    margins?: {
+        horizontal?: Partial<Record<DividerMargin, string>>;
+        vertical?: Partial<Record<DividerMargin, string>>;
+    };
 }
 export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
     /**

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

@@ -29,7 +29,7 @@ export interface DrawerContextValue {
     showCloseButton: boolean;
     theme: DrawerTheme;
 }
-export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose'> {
+export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose' | 'onAnimationStart' | 'onDragStart'> {
     isOpen: boolean;
     onClose: () => void;
     position?: DrawerPosition;

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

@@ -27,7 +27,7 @@ export interface ModalContextValue {
     showCloseButton: boolean;
     theme: ModalTheme;
 }
-export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose'> {
+export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose' | 'onAnimationStart' | 'onDragStart'> {
     isOpen: boolean;
     onClose: () => void;
     size?: ModalSize;

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

@@ -8,10 +8,6 @@ import React from "react";
  * @property {boolean} showFirstLast - Whether to show first/last page buttons
  * @property {boolean} showPrevNext - Whether to show previous/next buttons
  * @property {number} siblingCount - Number of sibling pages to show around current page
- * @property {string} previousLabel - Label for previous button
- * @property {string} nextLabel - Label for next button
- * @property {string} firstLabel - Label for first page button
- * @property {string} lastLabel - Label for last page button
  */
 export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The current active page number (1-based) */
@@ -28,18 +24,34 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
     showPrevNext?: boolean;
     /** Number of sibling pages to show around current page */
     siblingCount?: number;
-    /** Label for previous button */
-    previousLabel?: string;
-    /** Label for next button */
-    nextLabel?: string;
-    /** Label for first page button */
-    firstLabel?: string;
-    /** Label for last page button */
-    lastLabel?: string;
     /** Additional class names */
     className?: string;
+    /** Theme overrides */
+    theme?: PaginationThemeOverrides;
+}
+export type PaginationSize = "sm" | "md";
+/**
+ * Theme overrides for the Pagination component
+ */
+export interface PaginationThemeOverrides {
+    /** Base container styles */
+    baseStyle?: string;
+    /** Base item styles */
+    itemBase?: string;
+    /** Variant styles */
+    variants?: {
+        page?: string;
+        ellipsis?: string;
+    };
+    /** Size variants */
+    sizes?: Partial<Record<PaginationSize, string>>;
+    /** State styles */
+    states?: {
+        active?: string;
+        disabled?: string;
+        hover?: string;
+    };
 }
-export type PaginationSize = "sm" | "md" | "lg";
 /**
  * Internal pagination item props
  */

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

@@ -1,5 +1,36 @@
-import { Variants } from 'motion/react';
 /**
- * Dropdown animation variants for the Select component
+ * Animation variants for Popover component
  */
-export declare const popoverAnimations: Variants;
+export declare const popoverContentVariants: {
+    hidden: {
+        opacity: number;
+        scale: number;
+    };
+    visible: {
+        opacity: number;
+        scale: number;
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+    };
+};
+export declare const popoverBackdropVariants: {
+    hidden: {
+        opacity: number;
+    };
+    visible: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+};
+export declare const popoverTransitions: {
+    content: {
+        duration: number;
+    };
+    backdrop: {
+        duration: number;
+    };
+};

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

@@ -0,0 +1,19 @@
+/**
+ * Animation variants for Popover component
+ */
+var popoverContentVariants = {
+    hidden: { opacity: 0, scale: 0.95 },
+    visible: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 }
+};
+var popoverBackdropVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+    exit: { opacity: 0 }
+};
+var popoverTransitions = {
+    content: { duration: 0.2 },
+    backdrop: { duration: 0.15 }
+};
+
+export { popoverBackdropVariants, popoverContentVariants, popoverTransitions };

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

@@ -5,9 +5,9 @@ var popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
     // Content styles
-    contentStyle: "bg-white border border-gray-200 rounded-md shadow-lg p-3 max-w-sm",
+    contentStyle: "bg-white border border-border rounded-[var(--popover-rounded)] shadow-[var(--popover-shadow)] p-[var(--popover-padding-md)] max-w-[var(--popover-max-width-md)]",
     // Backdrop styles
-    backdropStyle: "fixed inset-0 bg-black/30",
+    backdropStyle: "fixed inset-0 bg-black/50",
 };
 
 export { popoverTheme };

package/dist/components/core/Popover/PopoverContent.js

@@ -4,6 +4,8 @@ import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
 import { usePopoverContext } from './PopoverContext.js';
 import { useClickOutside } from '../../../utils/useClickOutside.js';
+import { popoverTransitions, popoverBackdropVariants, popoverContentVariants } from './Popover.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';
 import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
 
@@ -13,6 +15,7 @@ import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/com
 var PopoverContent = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className; _a.animation; var _c = _a.portal, portal = _c === void 0 ? false : _c, props = __rest(_a, ["children", "className", "animation", "portal"]);
     var _d = usePopoverContext(), isOpen = _d.isOpen, onOpenChange = _d.onOpenChange, triggerRef = _d.triggerRef, contentRef = _d.contentRef, placement = _d.placement, offset = _d.offset, triggerType = _d.triggerType, closeOnClickOutside = _d.closeOnClickOutside, closeOnEsc = _d.closeOnEsc, preventClose = _d.preventClose, hasBackdrop = _d.hasBackdrop, theme = _d.theme;
+    var shouldReduceMotion = useReducedMotion();
     var localRef = useRef(null);
     var _e = useState({
         top: 0,
@@ -151,24 +154,12 @@ var PopoverContent = React__default.forwardRef(function (_a, ref) {
             contentRef.current = el;
         }
     }, [ref, contentRef]);
-    // Animation variants
-    var contentVariants = {
-        hidden: { opacity: 0, scale: 0.95 },
-        visible: { opacity: 1, scale: 1 },
-        exit: { opacity: 0, scale: 0.95 }
-    };
-    // Backdrop variants
-    var backdropVariants = {
-        hidden: { opacity: 0 },
-        visible: { opacity: 1 },
-        exit: { opacity: 0 }
-    };
     // Extract DOM props to avoid type conflicts
     // HTML event props that conflict with Framer Motion
     props.onDrag; props.onDragStart; props.onDragEnd; props.onAnimationStart; props.onAnimationEnd; var domProps = __rest(props, ["onDrag", "onDragStart", "onDragEnd", "onAnimationStart", "onAnimationEnd"]);
     // Create a backdrop portal
     var renderBackdrop = hasBackdrop && isOpen && typeof document !== 'undefined';
-    var backdrop = renderBackdrop ? (createPortal(React__default.createElement(motion.div, { key: "backdrop", variants: backdropVariants, initial: "hidden", animate: "visible", exit: "exit", transition: { duration: 0.15 }, className: cn("fixed inset-0 bg-black/50 z-40", theme.backdropStyle), onClick: function (e) {
+    var backdrop = renderBackdrop ? (createPortal(React__default.createElement(motion.div, { key: "backdrop", variants: shouldReduceMotion ? {} : popoverBackdropVariants, initial: shouldReduceMotion ? undefined : "hidden", animate: shouldReduceMotion ? undefined : "visible", exit: shouldReduceMotion ? undefined : "exit", transition: shouldReduceMotion ? { duration: 0 } : popoverTransitions.backdrop, className: cn("fixed inset-0 z-[9998]", theme.backdropStyle), onClick: function (e) {
             e.stopPropagation();
             if (!preventClose) {
                 onOpenChange(false);
@@ -179,7 +170,7 @@ var PopoverContent = React__default.forwardRef(function (_a, ref) {
         React__default.createElement(motion.div, __assign({ ref: handleRef, className: cn("fixed z-50", theme.baseStyle, theme.contentStyle, "popover-content", className), style: {
                 top: "".concat(position.top, "px"),
                 left: "".concat(position.left, "px"),
-            }, role: "dialog", "aria-modal": "true", variants: contentVariants, initial: "hidden", animate: "visible", exit: "exit", transition: { duration: 0.2 }, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, "data-backdrop": hasBackdrop ? "true" : "false", onClick: function (e) { return e.stopPropagation(); } }, domProps), children)))));
+            }, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion ? {} : popoverContentVariants, initial: shouldReduceMotion ? undefined : "hidden", animate: shouldReduceMotion ? undefined : "visible", exit: shouldReduceMotion ? undefined : "exit", transition: shouldReduceMotion ? { duration: 0 } : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, "data-backdrop": hasBackdrop ? "true" : "false", onClick: function (e) { return e.stopPropagation(); } }, domProps), children)))));
     // Use portal if specified
     return portal && typeof document !== 'undefined'
         ? createPortal(popoverContent, document.body)

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

@@ -3,6 +3,21 @@ import React from "react";
  * Size options for the Segmented component
  */
 export type SegmentedSize = "sm" | "md" | "lg";
+/**
+ * Theme overrides for Segmented component
+ */
+export interface SegmentedThemeOverrides {
+    /** Base styles for the container */
+    baseStyle?: string;
+    /** Size-specific styles */
+    sizes?: Partial<Record<SegmentedSize, string>>;
+    /** Block/full-width styles */
+    blockStyle?: string;
+    /** Disabled state styles */
+    disabledStyle?: string;
+    /** Sliding background styles */
+    slidingBackgroundStyle?: string;
+}
 /**
  * Segmented component props
  */
@@ -21,6 +36,8 @@ export interface SegmentedProps extends Omit<React.HTMLAttributes<HTMLDivElement
     children?: React.ReactNode;
     /** Custom className for the sliding background */
     slidingBackgroundClassName?: string;
+    /** Theme overrides for advanced customization */
+    theme?: SegmentedThemeOverrides;
 }
 /**
  * SegmentedItem component props

package/dist/components/core/Tabs/Tabs.js

@@ -12,7 +12,7 @@ import { TabsContent } from './TabsContent.js';
  * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Content
  */
 var TabsComponent = React__default.forwardRef(function (_a, ref) {
-    var value = _a.value, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, children = _a.children, className = _a.className, theme = _a.theme, props = __rest(_a, ["value", "defaultValue", "onValueChange", "orientation", "size", "disabled", "children", "className", "theme"]);
+    var value = _a.value, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, children = _a.children, className = _a.className, props = __rest(_a, ["value", "defaultValue", "onValueChange", "orientation", "size", "disabled", "children", "className"]);
     var _e = useState(value || defaultValue || ""), currentValue = _e[0], setCurrentValue = _e[1];
     // Handle controlled vs uncontrolled
     var isControlled = value !== undefined;
@@ -30,14 +30,8 @@ var TabsComponent = React__default.forwardRef(function (_a, ref) {
         size: size,
         disabled: disabled,
     };
-    // Merge theme overrides
-    var mergedTheme = {
-        baseStyle: (theme === null || theme === void 0 ? void 0 : theme.baseStyle) || tabsTheme.baseStyle,
-        orientations: __assign(__assign({}, tabsTheme.orientations), theme === null || theme === void 0 ? void 0 : theme.orientations),
-        disabledStyle: (theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || tabsTheme.disabledStyle,
-    };
     return (React__default.createElement(TabsContext.Provider, { value: contextValue },
-        React__default.createElement("div", __assign({ ref: ref, className: cn(mergedTheme.baseStyle, mergedTheme.orientations[orientation], disabled && mergedTheme.disabledStyle, className // User overrides take precedence
+        React__default.createElement("div", __assign({ ref: ref, className: cn(tabsTheme.baseStyle, disabled && "opacity-50 cursor-not-allowed pointer-events-none", className // User overrides take precedence
             ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled }, props), children)));
 });
 // Set display name for dev tools and Storybook