flikkui 0.1.0-beta.2 → 0.1.0-beta.4

package/README.md

@@ -0,0 +1,155 @@
+# Flikkui
+
+A modern React component library built with TypeScript, Tailwind CSS v4, and optional Framer Motion animations. Follows the shadcn philosophy where users can override any styling using className props while getting sensible defaults out of the box.
+
+## 🚀 Quick Start
+
+### 1. Install the package
+
+```bash
+npm install flikkui@beta motion
+# or
+yarn add flikkui@beta motion
+```
+
+### 2. Download the theme file
+
+Download the theme file from [flikkui.dev/theme](https://flikkui.dev/theme) and save it as `flikkui-theme.css` in your project root.
+
+Alternatively, you can copy this file: [flikkui-theme.css](./flikkui-theme.css)
+
+### 3. Import the theme in your app
+
+```tsx
+// In your main App.tsx, index.tsx, or _app.tsx
+import './flikkui-theme.css'  // Import the downloaded theme file
+import App from './App'
+
+// Your app code...
+```
+
+### 4. Start using components
+
+```tsx
+import { Button } from 'flikkui'
+
+export function MyComponent() {
+  return (
+    <Button variant="primary">
+      Hello World
+    </Button>
+  )
+}
+```
+
+## 🎨 Customization
+
+Edit the `flikkui-theme.css` file to customize your design system:
+
+```css
+/* flikkui-theme.css */
+@theme {
+  /* Change primary color */
+  --color-primary-base: oklch(0.666 0.223 48.717); /* Orange */
+  --color-primary-600: oklch(0.666 0.223 48.717);
+  --color-primary-700: oklch(0.555 0.192 47.355);
+  
+  /* Larger buttons */
+  --button-min-h-md: 3rem;
+  --button-px-md: 1.25rem;
+  
+  /* More rounded design */
+  --form-rounded: 1rem;
+}
+```
+
+You can also override styles using className props (shadcn approach):
+
+```tsx
+<Button className="bg-purple-600 hover:bg-purple-700 rounded-full">
+  Custom Button
+</Button>
+```
+
+## 📚 Components
+
+### Core Components
+- **Button** - Multiple variants, states, optional animations
+- **Avatar** - Image handling, fallbacks, status indicators
+- **AvatarGroup** - Overlapping avatars with compound component pattern  
+- **Badge** - Variants, sizes, content flexibility
+- **Accordion** - Compound component with animations
+- **Modal** - Compound component with header, body, footer
+- **Drawer** - Slide-out panels from edges
+- **Popover** - Compound with portal rendering
+- **Tooltip** - Positioning, animations, accessibility
+- **Tabs** - Horizontal tabbed interface
+
+### Form Components  
+- **Input** - Multiple types, masking, validation
+- **Select** - Searchable, compound pattern
+- **Checkbox** - Custom styling, controlled/uncontrolled
+- **Radio** - Group management
+- **Switch** - Toggle functionality
+- **Textarea** - Resizable, validation
+
+### Data Display
+- **Table** - Dual API, sorting, filtering, selection
+- **Spinner** - Loading states, sizes
+
+### Charts
+- **AreaChart** - Stacked, curved, null value handling
+- **BarChart** - Horizontal/vertical, grouped, stacked  
+- **LineChart** - Multiple series, curved lines
+- **DonutChart** - Progress, animations, gradients
+- **Heatmap** - Interactive, customizable intensity
+
+## 🔄 Migration from v0.1.0-beta.3
+
+If you were using the previous version, update your imports:
+
+```tsx
+// Old (v0.1.0-beta.3)
+import 'flikkui/styles.css'
+
+// New (v0.1.0-beta.4+)
+import './flikkui-theme.css'  // Download this file first
+```
+
+This change gives you:
+- ✅ 100% predictable styling
+- ✅ Full control over your design system  
+- ✅ No more CSS cascade conflicts
+- ✅ Easy theme customization
+
+## 💡 Philosophy
+
+Flikkui follows the **shadcn approach**:
+- Components provide sensible defaults
+- **className overrides always take precedence**
+- Full TypeScript support with excellent DX
+- Copy-paste friendly - customize anything
+- CSS variables for consistent theming
+
+## 🛠️ Tech Stack
+
+- **React 18** with TypeScript (strict mode)
+- **Tailwind CSS v4** with CSS variables
+- **Framer Motion** (optional, for enhanced components)
+- **Accessibility-first** - WCAG 2.1 AA compliance built-in
+
+## 📖 Documentation
+
+Visit [flikkui.dev](https://flikkui.dev) for:
+- Component API documentation
+- Interactive examples
+- Theme customization guide
+- Migration guides
+
+## 📄 License
+
+MIT
+
+---
+
+Made with ❤️ by [Espranza Innovations](https://espranza.net)

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;
+    };
+};