flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/charts/utils/color-utils.js

@@ -8,8 +8,8 @@
  * @returns The fill class or empty string
  */
 function extractFillClass(classString) {
-    var classes = classString.split(' ');
-    var fillClass = classes.find(function (cls) { return cls.startsWith('fill-'); });
+    const classes = classString.split(' ');
+    const fillClass = classes.find(cls => cls.startsWith('fill-'));
     return fillClass || '';
 }
 /**
@@ -18,8 +18,8 @@ function extractFillClass(classString) {
  * @returns The stroke class or empty string
  */
 function extractStrokeClass(classString) {
-    var classes = classString.split(' ');
-    var strokeClass = classes.find(function (cls) { return cls.startsWith('stroke-'); });
+    const classes = classString.split(' ');
+    const strokeClass = classes.find(cls => cls.startsWith('stroke-'));
     return strokeClass || '';
 }
 /**
@@ -29,23 +29,19 @@ function extractStrokeClass(classString) {
  */
 function colorClassToVariable(colorClass) {
     // Remove the prefix (fill-, stroke-, bg-, text-, etc.)
-    var colorPart = colorClass.replace(/^(fill-|stroke-|bg-|text-|border-)/, '');
+    const colorPart = colorClass.replace(/^(fill-|stroke-|bg-|text-|border-)/, '');
     // Convert to CSS variable format
     if (colorPart.includes('-base')) {
-        return "var(--color-".concat(colorPart.replace('-base', '-500'), ")");
+        return `var(--color-${colorPart.replace('-base', '-500')})`;
     }
-    return "var(--color-".concat(colorPart, ")");
+    return `var(--color-${colorPart})`;
 }
 /**
  * Combines multiple Tailwind classes into a single class string
  * @param classes - Array of class strings
  * @returns Combined class string
  */
-function combineClasses() {
-    var classes = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        classes[_i] = arguments[_i];
-    }
+function combineClasses(...classes) {
     return classes.filter(Boolean).join(' ');
 }
 /**
@@ -55,19 +51,17 @@ function combineClasses() {
  * @param shade - Color shade (e.g., "base", "400", "500")
  * @returns Tailwind class string
  */
-function createColorClass(baseColor, type, shade) {
-    if (type === void 0) { type = 'both'; }
-    if (shade === void 0) { shade = 'base'; }
-    var colorName = "".concat(baseColor, "-").concat(shade);
+function createColorClass(baseColor, type = 'both', shade = 'base') {
+    const colorName = `${baseColor}-${shade}`;
     switch (type) {
         case 'fill':
-            return "fill-".concat(colorName);
+            return `fill-${colorName}`;
         case 'stroke':
-            return "stroke-".concat(colorName);
+            return `stroke-${colorName}`;
         case 'both':
-            return "fill-".concat(colorName, " stroke-").concat(colorName);
+            return `fill-${colorName} stroke-${colorName}`;
         default:
-            return "fill-".concat(colorName, " stroke-").concat(colorName);
+            return `fill-${colorName} stroke-${colorName}`;
     }
 }
 /**
@@ -77,15 +71,13 @@ function createColorClass(baseColor, type, shade) {
  * @param shade - Color shade
  * @returns Array of color class strings
  */
-function generateSeriesColors(baseColors, type, shade) {
-    if (type === void 0) { type = 'both'; }
-    if (shade === void 0) { shade = 'base'; }
-    return baseColors.map(function (color) { return createColorClass(color, type, shade); });
+function generateSeriesColors(baseColors, type = 'both', shade = 'base') {
+    return baseColors.map(color => createColorClass(color, type, shade));
 }
 /**
  * Default color palette for charts
  */
-var DEFAULT_CHART_COLORS = [
+const DEFAULT_CHART_COLORS = [
     'primary',
     'warning',
     'success',
@@ -94,7 +86,7 @@ var DEFAULT_CHART_COLORS = [
 /**
  * Extended color palette for charts with more options
  */
-var EXTENDED_CHART_COLORS = [
+const EXTENDED_CHART_COLORS = [
     'primary',
     'warning',
     'success',
@@ -107,7 +99,7 @@ var EXTENDED_CHART_COLORS = [
 /**
  * Minimal color palette for subtle charts
  */
-var MINIMAL_CHART_COLORS = [
+const MINIMAL_CHART_COLORS = [
     'neutral',
     'slate',
     'gray',
@@ -116,14 +108,13 @@ var MINIMAL_CHART_COLORS = [
 /**
  * Generate a color palette for charts
  */
-function generateColorPalette(count, baseHue) {
-    if (baseHue === void 0) { baseHue = 200; }
-    var colors = [];
-    var saturation = 70;
-    var lightness = 50;
-    for (var i = 0; i < count; i++) {
-        var hue = (baseHue + (i * 360) / count) % 360;
-        colors.push("hsl(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%)"));
+function generateColorPalette(count, baseHue = 200) {
+    const colors = [];
+    const saturation = 70;
+    const lightness = 50;
+    for (let i = 0; i < count; i++) {
+        const hue = (baseHue + (i * 360) / count) % 360;
+        colors.push(`hsl(${hue}, ${saturation}%, ${lightness}%)`);
     }
     return colors;
 }
@@ -132,44 +123,13 @@ function generateColorPalette(count, baseHue) {
  */
 function getContrastColor(backgroundColor) {
     // Convert hex to RGB
-    var hex = backgroundColor.replace('#', '');
-    var r = parseInt(hex.substr(0, 2), 16);
-    var g = parseInt(hex.substr(2, 2), 16);
-    var b = parseInt(hex.substr(4, 2), 16);
+    const hex = backgroundColor.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 2), 16);
+    const b = parseInt(hex.substring(4, 2), 16);
     // Calculate luminance
-    var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
     return luminance > 0.5 ? '#000000' : '#ffffff';
 }
-/**
- * Comprehensive color mapping that handles all chart color class variations
- * Returns CSS variable references to match actual chart element colors
- * Only uses CSS variables that actually exist in the project
- */
-var getColorValue = function (colorClass) {
-    // Normalize the color class by removing prefixes and handling variations
-    var normalizedClass = colorClass
-        .replace(/^(fill-|stroke-)/, '') // Remove fill- or stroke- prefix
-        .replace(/-(base|400|500|600)$/, ''); // Remove suffix variations
-    // Map to CSS variables that actually exist in global.css
-    var colorMap = {
-        // Primary colors (exists)
-        'primary': 'var(--color-primary-base)',
-        // Warning/Yellow colors (exists)
-        'warning': 'var(--color-warning-base)',
-        // Success/Green colors (exists)
-        'success': 'var(--color-success-base)',
-        // Error/Danger/Red colors (exists as danger)
-        'error': 'var(--color-danger-base)', // Map error to danger
-        'danger': 'var(--color-danger-base)',
-        // Fallbacks for colors that don't exist in CSS - use primary as fallback
-        'info': 'var(--color-primary-base)', // Fallback to primary
-        'secondary': 'var(--color-primary-base)', // Fallback to primary
-        // Neutral colors - fallback to primary
-        'neutral': 'var(--color-primary-base)',
-        'slate': 'var(--color-primary-base)',
-    };
-    // Return the CSS variable directly
-    return colorMap[normalizedClass] || colorMap['primary'];
-};
 
-export { DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, colorClassToVariable, combineClasses, createColorClass, extractFillClass, extractStrokeClass, generateColorPalette, generateSeriesColors, getColorValue, getContrastColor };
+export { DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, colorClassToVariable, combineClasses, createColorClass, extractFillClass, extractStrokeClass, generateColorPalette, generateSeriesColors, getContrastColor };

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

@@ -1,2 +1,3 @@
 export { extractFillClass, extractStrokeClass, colorClassToVariable, combineClasses, createColorClass, generateSeriesColors, DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, generateColorPalette, getContrastColor, } from './color-utils';
 export { SafeMath, validateChart, validateChartData, validateChartConfig, validateDataConfigCompatibility, sanitizeChartData, calculateSafeScaleRange, type ChartValidationError, type ChartValidationResult, } from './chart-validation';
+export { getSpringAnimation, getUseSpringConfig, getStaggerDelay, SPRING_PRESETS, CIRCULAR_CHART_ANIMATIONS, type SpringConfig, type NoAnimationConfig, type AnimationPreset, } from './animation-utils';

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

@@ -1,7 +1,7 @@
 /**
  * Accordion animation variants for smooth, staggered open/close transitions
  */
-var accordionAnimations = {
+const accordionAnimations = {
     collapsed: {
         height: 0,
         opacity: 0,
@@ -22,7 +22,7 @@ var accordionAnimations = {
 /**
  * Content animation variants for subtle slide-in effect after container expands
  */
-var accordionContentAnimations = {
+const accordionContentAnimations = {
     collapsed: {
         opacity: 0,
         y: -10,

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

@@ -1,12 +1,11 @@
 import React from "react";
 import { AccordionProps, AccordionContextValue } from "./Accordion.types";
 export declare const useAccordionContext: () => AccordionContextValue;
-declare const _default: {
-    ({ children, className, type, collapsible, defaultValue, value, onValueChange, theme: themeOverrides, ...props }: AccordionProps): React.JSX.Element;
+export declare const Accordion: {
+    ({ children, className, type, variant, collapsible, defaultValue, value, onValueChange, theme: themeOverrides, ...props }: AccordionProps): React.JSX.Element;
     displayName: string;
 } & {
     Item: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
     Trigger: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Content: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
 };
-export default _default;

package/dist/components/core/Accordion/Accordion.js

@@ -1,4 +1,3 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useContext, createContext, useState, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { accordionTheme } from './Accordion.theme.js';
@@ -7,46 +6,51 @@ import { AccordionContent } from './AccordionContent.js';
 import { AccordionItem } from './AccordionItem.js';
 
 // Create context for the main Accordion component
-var AccordionContext = createContext(undefined);
-var useAccordionContext = function () {
-    var ctx = useContext(AccordionContext);
+const AccordionContext = createContext(undefined);
+const useAccordionContext = () => {
+    const ctx = useContext(AccordionContext);
     if (!ctx)
         throw new Error("Accordion compound components must be used within <Accordion>");
     return ctx;
 };
-var Accordion = function (_a) {
-    var children = _a.children, className = _a.className, _b = _a.type, type = _b === void 0 ? "single" : _b, _c = _a.collapsible, collapsible = _c === void 0 ? false : _c, defaultValue = _a.defaultValue, value = _a.value, onValueChange = _a.onValueChange, themeOverrides = _a.theme, props = __rest(_a, ["children", "className", "type", "collapsible", "defaultValue", "value", "onValueChange", "theme"]);
+const AccordionRoot = ({ children, className, type = "single", variant = "separated", collapsible = false, defaultValue, value, onValueChange, theme: themeOverrides, ...props }) => {
     // State for uncontrolled component
-    var _d = useState(defaultValue || (type === "single" ? "" : [])), uncontrolledValue = _d[0], setUncontrolledValue = _d[1];
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || (type === "single" ? "" : []));
     // Determine if component is controlled
-    var isControlled = value !== undefined;
-    var currentValue = isControlled ? value : uncontrolledValue;
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : uncontrolledValue;
     // Handler for value changes
-    var handleValueChange = useCallback(function (newValue) {
+    const handleValueChange = useCallback((newValue) => {
         if (!isControlled) {
             setUncontrolledValue(newValue);
         }
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
     }, [isControlled, onValueChange]);
     // Merge theme with any overrides
-    var theme = __assign(__assign({}, accordionTheme), (themeOverrides || {}));
+    const theme = {
+        ...accordionTheme,
+        ...(themeOverrides || {}),
+    };
     // Context value to be provided to children
-    var contextValue = {
-        type: type,
-        collapsible: collapsible,
+    const contextValue = {
+        type,
+        variant,
+        collapsible,
         value: currentValue,
         onValueChange: handleValueChange,
-        theme: theme,
+        theme,
     };
+    // Select base style based on variant
+    const baseStyleClass = variant === "stacked" ? theme.baseStyleStacked : theme.baseStyle;
     return (React__default.createElement(AccordionContext.Provider, { value: contextValue },
-        React__default.createElement("div", __assign({ className: cn(theme.baseStyle, className, "accordion") }, props), children)));
+        React__default.createElement("div", { className: cn(baseStyleClass, className), "data-variant": variant, ...props }, children)));
 };
-Accordion.displayName = "Accordion";
+AccordionRoot.displayName = "Accordion";
 // Attach compound subcomponents
-var Accordion$1 = Object.assign(Accordion, {
+const Accordion = Object.assign(AccordionRoot, {
     Item: AccordionItem,
     Trigger: AccordionTrigger,
     Content: AccordionContent,
 });
 
-export { Accordion$1 as default, useAccordionContext };
+export { Accordion, useAccordionContext };

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

@@ -1,7 +1,10 @@
 export interface AccordionTheme {
     baseStyle: string;
+    baseStyleStacked: string;
     triggerStyle: string;
     contentStyle: string;
+    contentInnerStyle: string;
     itemStyle: string;
+    itemStyleStacked: string;
 }
 export declare const accordionTheme: AccordionTheme;

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

@@ -1,8 +1,18 @@
-var accordionTheme = {
+const accordionTheme = {
+    // Base container styles for separated variant (default)
     baseStyle: "w-full max-w-xl",
-    itemStyle: "border border-border rounded-[var(--form-rounded)] bg-white overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-lg data-[state=open]:shadow-neutral-500/10",
-    triggerStyle: "flex w-full items-center justify-between px-4 py-3 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-text-primary [&[data-state=open]>svg]:rotate-180",
-    contentStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[500px]",
+    // Base container styles for stacked variant (unified card)
+    baseStyleStacked: "w-full max-w-xl border border-[var(--color-border)] rounded-[var(--form-rounded)] overflow-hidden",
+    // Item styles for separated variant (individual cards with spacing)
+    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-rounded)] bg-[var(--color-background)] overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-xs",
+    // Item styles for stacked variant (shared borders, no spacing)
+    itemStyleStacked: "bg-white border-t border-[var(--color-border)] first-of-type:border-t-0",
+    // Trigger styles (shared across variants)
+    triggerStyle: "flex w-full gap-3 items-center justify-between px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] [&[data-state=open]>svg]:rotate-180 cursor-pointer focus:outline-none transition-all flex justify-between",
+    // Content styles (shared across variants)
+    contentStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[500px] accordion-content overflow-hidden",
+    // Content inner wrapper styles
+    contentInnerStyle: "p-4 pb-2.5 pt-0",
 };
 
 export { accordionTheme };

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

@@ -7,6 +7,10 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
      * Accordion type - single allows only one item open, multiple allows many
      */
     type?: "single" | "multiple";
+    /**
+     * Visual variant - separated (card-like with spacing) or stacked (unified borders)
+     */
+    variant?: "separated" | "stacked";
     /**
      * Whether accordion can be collapsed after being opened (for type="single")
      */
@@ -34,6 +38,7 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export interface AccordionContextValue {
     type: "single" | "multiple";
+    variant: "separated" | "stacked";
     collapsible: boolean;
     value: string | string[] | undefined;
     onValueChange: (value: string | string[]) => void;
@@ -87,7 +92,9 @@ export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivEleme
  */
 export interface AccordionThemeOverrides {
     baseStyle?: string;
+    baseStyleStacked?: string;
     triggerStyle?: string;
     contentStyle?: string;
     itemStyle?: string;
+    itemStyleStacked?: string;
 }

package/dist/components/core/Accordion/AccordionContent.js

@@ -1,24 +1,17 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useAccordionContext } from './Accordion.js';
 import { useAccordionItemContext } from './AccordionItem.js';
+import { AnimatePresence, motion } from 'motion/react';
 import { accordionAnimations, accordionContentAnimations } from './Accordion.animations.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';
 
-var AccordionContent = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var theme = useAccordionContext().theme;
-    var isOpen = useAccordionItemContext().isOpen;
+const AccordionContent = React__default.forwardRef(({ children, className, ...rest }, ref) => {
+    const { theme } = useAccordionContext();
+    const { isOpen } = useAccordionItemContext();
     // Filter out conflicting props to avoid type issues
-    rest.onDrag; rest.onDragEnd; rest.onDragStart; rest.onAnimationStart; rest.onAnimationEnd; rest.onTransitionEnd; rest.onTransitionStart; var safeProps = __rest(rest, ["onDrag", "onDragEnd", "onDragStart", "onAnimationStart", "onAnimationEnd", "onTransitionEnd", "onTransitionStart"]);
-    return (React__default.createElement(AnimatePresence, { initial: false }, isOpen && (React__default.createElement(motion.div, __assign({ ref: ref, className: cn(
-        // Default theme styles (can be overridden by className)
-        (theme === null || theme === void 0 ? void 0 : theme.contentStyle) || "data-[state=closed]:max-h-0 data-[state=open]:max-h-[500px]", "accordion-content overflow-hidden", 
-        // User className takes precedence
-        className), "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations }, safeProps),
-        React__default.createElement(motion.div, { className: "accordion-content-inner p-4", variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed" }, children)))));
+    const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, onTransitionEnd, onTransitionStart, ...safeProps } = rest;
+    return (React__default.createElement(AnimatePresence, { initial: false }, isOpen && (React__default.createElement(motion.div, { ref: ref, className: cn(theme === null || theme === void 0 ? void 0 : theme.contentStyle, className), "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, ...safeProps },
+        React__default.createElement(motion.div, { className: "p-4 pt-0", variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed" }, children)))));
 });
 AccordionContent.displayName = "AccordionContent";
 

package/dist/components/core/Accordion/AccordionItem.js

@@ -1,26 +1,24 @@
-import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useAccordionContext } from './Accordion.js';
 
 // Create context for AccordionItem
-var AccordionItemContext = createContext(undefined);
+const AccordionItemContext = createContext(undefined);
 // Hook to use AccordionItem context
-var useAccordionItemContext = function () {
-    var ctx = useContext(AccordionItemContext);
+const useAccordionItemContext = () => {
+    const ctx = useContext(AccordionItemContext);
     if (!ctx)
         throw new Error("Accordion.Trigger and Accordion.Content must be used within Accordion.Item");
     return ctx;
 };
-var AccordionItem = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, value = _a.value, props = __rest(_a, ["children", "className", "value"]);
-    var _b = useAccordionContext(), selectedValue = _b.value, onValueChange = _b.onValueChange, type = _b.type, collapsible = _b.collapsible, theme = _b.theme;
+const AccordionItem = React__default.forwardRef(({ children, className, value, ...props }, ref) => {
+    const { value: selectedValue, onValueChange, type, variant, collapsible, theme } = useAccordionContext();
     // Determine if this item is open
-    var isOpen = type === "single"
+    const isOpen = type === "single"
         ? selectedValue === value
         : Array.isArray(selectedValue) && selectedValue.includes(value);
     // Toggle handler for this specific item
-    var toggle = function () {
+    const toggle = () => {
         if (type === "single") {
             // For single type, either select this item or clear selection if collapsible
             onValueChange(isOpen && collapsible ? "" : value);
@@ -28,9 +26,9 @@ var AccordionItem = React__default.forwardRef(function (_a, ref) {
         else {
             // For multiple type, add or remove from array
             if (Array.isArray(selectedValue)) {
-                var newValue = isOpen
-                    ? selectedValue.filter(function (v) { return v !== value; })
-                    : __spreadArray(__spreadArray([], selectedValue, true), [value], false);
+                const newValue = isOpen
+                    ? selectedValue.filter(v => v !== value)
+                    : [...selectedValue, value];
                 onValueChange(newValue);
             }
             else {
@@ -39,17 +37,15 @@ var AccordionItem = React__default.forwardRef(function (_a, ref) {
         }
     };
     // Context value for Trigger and Content
-    var contextValue = {
-        value: value,
-        isOpen: isOpen,
-        toggle: toggle
+    const contextValue = {
+        value,
+        isOpen,
+        toggle
     };
+    // Select item style based on variant
+    const itemStyleClass = variant === "stacked" ? theme === null || theme === void 0 ? void 0 : theme.itemStyleStacked : theme === null || theme === void 0 ? void 0 : theme.itemStyle;
     return (React__default.createElement(AccordionItemContext.Provider, { value: contextValue },
-        React__default.createElement("div", __assign({ ref: ref, className: cn(
-            // Default theme styles (can be overridden by className)
-            (theme === null || theme === void 0 ? void 0 : theme.itemStyle) || "border border-gray-200 rounded-lg bg-white overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-lg data-[state=open]:shadow-gray-500/10", 
-            // User className takes precedence
-            className), "data-state": isOpen ? "open" : "closed", "data-value": value }, props), children)));
+        React__default.createElement("div", { ref: ref, className: cn(itemStyleClass, className), "data-state": isOpen ? "open" : "closed", "data-variant": variant, "data-value": value, ...props }, children)));
 });
 AccordionItem.displayName = "AccordionItem";
 

package/dist/components/core/Accordion/AccordionTrigger.js

@@ -1,31 +1,20 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useAccordionContext } from './Accordion.js';
 import { useAccordionItemContext } from './AccordionItem.js';
-import { PlusIcon } from '../../../icons/core/PlusIcon.js';
-import '../../../icons/core/MinusIcon.js';
-import '../../../icons/core/SearchIcon.js';
-import '../../../icons/core/LockIcon.js';
-import '../../../icons/core/DollarIcon.js';
-import '../../../icons/core/TickIcon.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { motion } from 'motion/react';
+import { PlusIcon } from '@heroicons/react/24/outline';
 
-var AccordionTrigger = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    var theme = useAccordionContext().theme;
-    var _b = useAccordionItemContext(), isOpen = _b.isOpen, toggle = _b.toggle;
-    return (React__default.createElement("button", __assign({ ref: ref, type: "button", className: cn(
-        // Default theme styles (can be overridden by className)
-        (theme === null || theme === void 0 ? void 0 : theme.triggerStyle) || "cursor-pointer focus:outline-none transition-all flex justify-between gap-3 w-full px-4 py-2", 
-        // User className takes precedence
-        className), "aria-expanded": isOpen, "data-state": isOpen ? "open" : "closed", onClick: toggle }, props),
+const AccordionTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    const { theme } = useAccordionContext();
+    const { isOpen, toggle } = useAccordionItemContext();
+    return (React__default.createElement("button", { ref: ref, type: "button", className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "data-state": isOpen ? "open" : "closed", onClick: toggle, ...props },
         children,
         React__default.createElement(motion.div, { animate: { rotate: isOpen ? 45 : 0 }, transition: {
                 duration: 0.2,
                 ease: [0.4, 0.0, 0.2, 1]
             }, className: "flex items-center justify-center" },
-            React__default.createElement(PlusIcon, { size: "sm" }))));
+            React__default.createElement(PlusIcon, { className: "size-4", strokeWidth: 2 }))));
 });
 AccordionTrigger.displayName = "AccordionTrigger";
 

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

@@ -1,5 +1,4 @@
-import Accordion from "./Accordion";
+import { Accordion } from "./Accordion";
 import { AccordionProps, AccordionTriggerProps, AccordionContentProps, AccordionItemProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides } from "./Accordion.types";
 export { Accordion };
 export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides, };
-export default Accordion;

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

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

package/dist/components/core/Alert/Alert.js

@@ -0,0 +1,33 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { alertTheme } from './Alert.theme.js';
+import { XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { Button } from '../Button/Button.js';
+
+const colorIcons = {
+    neutral: InformationCircleIcon,
+    dark: InformationCircleIcon,
+    primary: InformationCircleIcon,
+    success: CheckCircleIcon,
+    warning: ExclamationTriangleIcon,
+    danger: XCircleIcon,
+};
+const Alert = React__default.forwardRef(({ color = "primary", title, description, dismissible = false, icon, showIcon = true, onDismiss, className, theme: customTheme = {}, children, ...props }, ref) => {
+    var _a, _b;
+    const IconComponent = colorIcons[color];
+    const handleDismiss = () => {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    const hasContent = title || description || children;
+    return (React__default.createElement("div", { ref: ref, className: cn(alertTheme.baseStyle, ((_a = alertTheme.colors) === null || _a === void 0 ? void 0 : _a[color]) || "", customTheme.baseStyle, (_b = customTheme.colors) === null || _b === void 0 ? void 0 : _b[color], className), role: "alert", ...props },
+        showIcon && (React__default.createElement("div", { className: "flex-shrink-0 size-5 mt-0.5" }, icon || React__default.createElement(IconComponent, { className: "size-5" }))),
+        hasContent && (React__default.createElement("div", { className: "flex-1 min-w-0" },
+            title && React__default.createElement("div", { className: "font-medium text-sm" }, title),
+            description && (React__default.createElement("div", { className: "text-sm mt-0.5 text-[var(--color-text-secondary)]" }, description)),
+            children && React__default.createElement("div", { className: "mt-1" }, children))),
+        dismissible && (React__default.createElement(Button, { variant: "link", color: "primary", size: "sm", iconOnly: true, onClick: handleDismiss, className: "absolute top-2 right-2 flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity cursor-pointer" },
+            React__default.createElement(XMarkIcon, { className: "size-4" })))));
+});
+Alert.displayName = "Alert";
+
+export { Alert };

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

@@ -0,0 +1,2 @@
+import { AlertTheme } from "./Alert.types";
+export declare const alertTheme: AlertTheme;

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

@@ -0,0 +1,16 @@
+const alertTheme = {
+    baseStyle: "relative flex items-start gap-3 rounded-xl p-4 text-sm glass-effect ring-[1px]",
+    /**
+     * Semantic colors with ring and background styling
+     */
+    colors: {
+        neutral: "bg-[var(--color-background)]/80 text-[var(--color-text-primary)]",
+        dark: "bg-[var(--color-neutral-950)] text-white",
+        primary: "bg-[var(--color-primary-50)]/80 text-[var(--color-primary-700)]",
+        success: "bg-[var(--color-success-50)]/80 text-[var(--color-success-700)]",
+        warning: "bg-[var(--color-warning-50)]/80 text-[var(--color-warning-700)]",
+        danger: "bg-[var(--color-danger-50)]/80 text-[var(--color-danger-700)]",
+    },
+};
+
+export { alertTheme };

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

@@ -0,0 +1,35 @@
+import { HTMLAttributes, ReactNode } from "react";
+/**
+ * Alert semantic colors (intent)
+ */
+export type AlertColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
+export interface AlertTheme {
+    baseStyle: string;
+    colors: Record<AlertColor, string>;
+}
+export interface AlertThemeOverrides {
+    baseStyle?: string;
+    colors?: Partial<Record<AlertColor, string>>;
+}
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    /** Semantic color (neutral, dark, primary, success, warning, danger) */
+    color?: AlertColor;
+    /** The main title/message of the alert */
+    title?: string;
+    /** Additional description text */
+    description?: string;
+    /** Whether the alert can be dismissed */
+    dismissible?: boolean;
+    /** Custom icon for the alert */
+    icon?: ReactNode;
+    /** Whether to show the default icon for the variant */
+    showIcon?: boolean;
+    /** Callback when the alert is dismissed */
+    onDismiss?: () => void;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: AlertThemeOverrides;
+    /** Children content */
+    children?: ReactNode;
+}

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { AlertDialogProps } from "./AlertDialog.types";
+export declare const AlertDialog: {
+    ({ trigger, icon, title, description, footer, className, }: AlertDialogProps): React.JSX.Element;
+    displayName: string;
+};