@flikk/ui 1.0.0-beta.1

package/dist/components/charts/utils/path-utils.d.ts

@@ -0,0 +1,35 @@
+import type { CurveType } from '../types/chart.types';
+export interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * Generate a straight-line path through all points.
+ */
+export declare const generateLinearPath: (points: Point[]) => string;
+/**
+ * Generate a step path (step at midpoint between points).
+ */
+export declare const generateStepPath: (points: Point[]) => string;
+/**
+ * Generate a step-before path (vertical first, then horizontal).
+ */
+export declare const generateStepBeforePath: (points: Point[]) => string;
+/**
+ * Generate a step-after path (horizontal first, then vertical).
+ */
+export declare const generateStepAfterPath: (points: Point[]) => string;
+/**
+ * Fritsch-Carlson monotone cubic interpolation.
+ *
+ * Produces straight lines during consistent trends and smooth curves only
+ * at inflection points (direction changes). No overshooting past data bounds.
+ *
+ * Algorithm: https://en.wikipedia.org/wiki/Monotone_cubic_interpolation
+ * Same approach used by D3.js (curveMonotoneX), Recharts, and Chart.js.
+ */
+export declare const generateMonotonePath: (points: Point[]) => string;
+/**
+ * Router function that dispatches to the correct path generator based on curve type.
+ */
+export declare const generateCurvePath: (points: Point[], curveType?: CurveType) => string;

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

@@ -0,0 +1,156 @@
+/**
+ * Generate a straight-line path through all points.
+ */
+const generateLinearPath = (points) => {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        path += ` L ${points[i].x} ${points[i].y}`;
+    }
+    return path;
+};
+/**
+ * Generate a step path (step at midpoint between points).
+ */
+const generateStepPath = (points) => {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const midX = prev.x + (curr.x - prev.x) / 2;
+        path += ` L ${midX} ${prev.y} L ${midX} ${curr.y} L ${curr.x} ${curr.y}`;
+    }
+    return path;
+};
+/**
+ * Generate a step-before path (vertical first, then horizontal).
+ */
+const generateStepBeforePath = (points) => {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        path += ` L ${prev.x} ${curr.y} L ${curr.x} ${curr.y}`;
+    }
+    return path;
+};
+/**
+ * Generate a step-after path (horizontal first, then vertical).
+ */
+const generateStepAfterPath = (points) => {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const curr = points[i];
+        const prev = points[i - 1];
+        path += ` L ${curr.x} ${prev.y} L ${curr.x} ${curr.y}`;
+    }
+    return path;
+};
+/**
+ * Fritsch-Carlson monotone cubic interpolation.
+ *
+ * Produces straight lines during consistent trends and smooth curves only
+ * at inflection points (direction changes). No overshooting past data bounds.
+ *
+ * Algorithm: https://en.wikipedia.org/wiki/Monotone_cubic_interpolation
+ * Same approach used by D3.js (curveMonotoneX), Recharts, and Chart.js.
+ */
+const generateMonotonePath = (points) => {
+    const n = points.length;
+    if (n === 0)
+        return '';
+    if (n === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    if (n === 2) {
+        return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+    }
+    // Step 1: Compute secant slopes between consecutive points
+    const delta = new Array(n - 1);
+    const dx = new Array(n - 1);
+    for (let k = 0; k < n - 1; k++) {
+        dx[k] = points[k + 1].x - points[k].x;
+        delta[k] = dx[k] === 0 ? 0 : (points[k + 1].y - points[k].y) / dx[k];
+    }
+    // Step 2: Initialize tangent slopes
+    const m = new Array(n);
+    m[0] = delta[0];
+    m[n - 1] = delta[n - 2];
+    for (let k = 1; k < n - 1; k++) {
+        if (delta[k - 1] * delta[k] <= 0) {
+            // Sign change or zero — flat tangent preserves monotonicity
+            m[k] = 0;
+        }
+        else {
+            m[k] = (delta[k - 1] + delta[k]) / 2;
+        }
+    }
+    // Step 3: Enforce Fritsch-Carlson monotonicity constraints
+    for (let k = 0; k < n - 1; k++) {
+        if (delta[k] === 0) {
+            // Flat segment: tangents at both endpoints must be zero
+            m[k] = 0;
+            m[k + 1] = 0;
+        }
+        else {
+            const alpha = m[k] / delta[k];
+            const beta = m[k + 1] / delta[k];
+            const s = alpha * alpha + beta * beta;
+            if (s > 9) {
+                // Rescale to keep the curve within bounds
+                const tau = 3 / Math.sqrt(s);
+                m[k] = tau * alpha * delta[k];
+                m[k + 1] = tau * beta * delta[k];
+            }
+        }
+    }
+    // Step 4: Build SVG path using Hermite-to-Bezier conversion
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let k = 0; k < n - 1; k++) {
+        const segDx = dx[k];
+        const cp1x = points[k].x + segDx / 3;
+        const cp1y = points[k].y + (m[k] * segDx) / 3;
+        const cp2x = points[k + 1].x - segDx / 3;
+        const cp2y = points[k + 1].y - (m[k + 1] * segDx) / 3;
+        path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${points[k + 1].x} ${points[k + 1].y}`;
+    }
+    return path;
+};
+/**
+ * Router function that dispatches to the correct path generator based on curve type.
+ */
+const generateCurvePath = (points, curveType = 'monotone') => {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    switch (curveType) {
+        case 'monotone':
+            return generateMonotonePath(points);
+        case 'step':
+            return generateStepPath(points);
+        case 'stepBefore':
+            return generateStepBeforePath(points);
+        case 'stepAfter':
+            return generateStepAfterPath(points);
+        case 'linear':
+        default:
+            return generateLinearPath(points);
+    }
+};
+
+export { generateCurvePath, generateLinearPath, generateMonotonePath, generateStepAfterPath, generateStepBeforePath, generateStepPath };

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

@@ -0,0 +1,9 @@
+import { Variants } from 'motion/react';
+/**
+ * Accordion animation variants for smooth, staggered open/close transitions
+ */
+export declare const accordionAnimations: Variants;
+/**
+ * Content animation variants for subtle slide-in effect after container expands
+ */
+export declare const accordionContentAnimations: Variants;

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

@@ -0,0 +1,45 @@
+/**
+ * Accordion animation variants for smooth, staggered open/close transitions
+ */
+const accordionAnimations = {
+    collapsed: {
+        height: 0,
+        opacity: 0,
+        transition: {
+            height: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.25 }
+        }
+    },
+    open: {
+        height: 'auto',
+        opacity: 1,
+        transition: {
+            height: { duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.3, delay: 0.1 }
+        }
+    }
+};
+/**
+ * Content animation variants for subtle slide-in effect after container expands
+ */
+const accordionContentAnimations = {
+    collapsed: {
+        opacity: 0,
+        y: -10,
+        transition: {
+            y: { duration: 0.2, ease: 'easeOut' },
+            opacity: { duration: 0.2 }
+        }
+    },
+    open: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            delay: 0.15, // Start after the container has begun expanding
+            y: { duration: 0.3, ease: 'easeOut' },
+            opacity: { duration: 0.3, ease: 'easeOut' }
+        }
+    }
+};
+
+export { accordionAnimations, accordionContentAnimations };

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { AccordionProps, AccordionContextValue } from "./Accordion.types";
+export declare const useAccordionContext: () => AccordionContextValue;
+export declare const Accordion: {
+    ({ children, className, type, variant, collapsible, defaultValue, value, onValueChange, theme: themeOverrides, darkMode, ...props }: AccordionProps): import("react/jsx-runtime").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>>;
+};

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

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext, useState, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { accordionTheme } from './Accordion.theme.js';
+import { AccordionTrigger } from './AccordionTrigger.js';
+import { AccordionContent } from './AccordionContent.js';
+import { AccordionItem } from './AccordionItem.js';
+
+// Create context for the main Accordion component
+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;
+};
+const AccordionRoot = ({ children, className, type = "single", variant = "separated", collapsible = false, defaultValue, value, onValueChange, theme: themeOverrides, darkMode = false, ...props }) => {
+    // State for uncontrolled component
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || (type === "single" ? "" : []));
+    // Determine if component is controlled
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : uncontrolledValue;
+    // Handler for value changes
+    const handleValueChange = useCallback((newValue) => {
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+    }, [isControlled, onValueChange]);
+    // Merge theme with any overrides
+    const theme = {
+        ...accordionTheme,
+        ...(themeOverrides || {}),
+    };
+    // Context value to be provided to children
+    const contextValue = {
+        type,
+        variant,
+        collapsible,
+        value: currentValue,
+        onValueChange: handleValueChange,
+        theme,
+    };
+    // Select base style based on variant
+    const baseStyleClass = variant === "stacked" ? theme.baseStyleStacked : theme.baseStyle;
+    return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx("div", { className: cn(baseStyleClass, darkMode && "dark", className), "data-variant": variant, ...props, children: children }) }));
+};
+AccordionRoot.displayName = "Accordion";
+// Attach compound subcomponents
+const Accordion = Object.assign(AccordionRoot, {
+    Item: AccordionItem,
+    Trigger: AccordionTrigger,
+    Content: AccordionContent,
+});
+
+export { Accordion, useAccordionContext };

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

@@ -0,0 +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

@@ -0,0 +1,18 @@
+const accordionTheme = {
+    // Base container styles for separated variant (default)
+    baseStyle: "w-full max-w-xl",
+    // Base container styles for stacked variant (unified card)
+    baseStyleStacked: "w-full max-w-xl border border-[var(--color-border)] rounded-[var(--form-radius)] overflow-hidden",
+    // Item styles for separated variant (individual cards with spacing)
+    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-white dark:bg-[var(--color-background-secondary)] 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

@@ -0,0 +1,110 @@
+import React from "react";
+/**
+ * Accordion component props
+ */
+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")
+     */
+    collapsible?: boolean;
+    /**
+     * Default value(s) for the opened item(s)
+     */
+    defaultValue?: string | string[];
+    /**
+     * Controlled value(s) for the opened item(s)
+     */
+    value?: string | string[];
+    /**
+     * Callback when open state changes
+     */
+    onValueChange?: (value: string | string[]) => void;
+    /**
+     * Theme overrides
+     */
+    theme?: AccordionThemeOverrides;
+    children: React.ReactNode;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
+}
+/**
+ * Accordion context value
+ */
+export interface AccordionContextValue {
+    type: "single" | "multiple";
+    variant: "separated" | "stacked";
+    collapsible: boolean;
+    value: string | string[] | undefined;
+    onValueChange: (value: string | string[]) => void;
+    theme: AccordionThemeOverrides & {
+        baseStyle: string;
+        triggerStyle: string;
+        contentStyle: string;
+    };
+}
+/**
+ * AccordionItem component props
+ */
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique value for the accordion item
+     */
+    value: string;
+    /**
+     * Optional className for styling
+     */
+    className?: string;
+    /**
+     * Item content
+     */
+    children: React.ReactNode;
+}
+/**
+ * AccordionItem context value - to be used by Trigger and Content
+ */
+export interface AccordionItemContextValue {
+    value: string;
+    isOpen: boolean;
+    toggle: () => void;
+    triggerId: string;
+    contentId: string;
+}
+/**
+ * Trigger props
+ */
+export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Content props
+ */
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Theme overrides for Accordion
+ */
+export interface AccordionThemeOverrides {
+    baseStyle?: string;
+    baseStyleStacked?: string;
+    triggerStyle?: string;
+    contentStyle?: string;
+    itemStyle?: string;
+    itemStyleStacked?: string;
+}

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

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

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useAccordionContext } from './Accordion.js';
+import { useAccordionItemContext } from './AccordionItem.js';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { accordionAnimations, accordionContentAnimations } from './Accordion.animations.js';
+
+const AccordionContent = React__default.forwardRef(({ children, className, ...rest }, ref) => {
+    const { theme } = useAccordionContext();
+    const { isOpen, contentId, triggerId } = useAccordionItemContext();
+    const shouldReduceMotion = useReducedMotion();
+    // When reduced motion is preferred, skip all animation durations
+    const instantTransition = shouldReduceMotion ? { duration: 0 } : undefined;
+    // Filter out conflicting props to avoid type issues
+    const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, onTransitionEnd, onTransitionStart, ...safeProps } = rest;
+    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { ref: ref, id: contentId, role: "region", "aria-labelledby": triggerId, 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, transition: instantTransition, ...safeProps, children: jsx(motion.div, { className: "p-4 pt-0", variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed", transition: instantTransition, children: children }) })) }));
+});
+AccordionContent.displayName = "AccordionContent";
+
+export { AccordionContent };

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { AccordionItemProps, AccordionItemContextValue } from "./Accordion.types";
+export declare const useAccordionItemContext: () => AccordionItemContextValue;
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { createContext, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useAccordionContext } from './Accordion.js';
+
+// Create context for AccordionItem
+const AccordionItemContext = createContext(undefined);
+// Hook to use AccordionItem context
+const useAccordionItemContext = () => {
+    const ctx = useContext(AccordionItemContext);
+    if (!ctx)
+        throw new Error("Accordion.Trigger and Accordion.Content must be used within Accordion.Item");
+    return ctx;
+};
+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
+    const isOpen = type === "single"
+        ? selectedValue === value
+        : Array.isArray(selectedValue) && selectedValue.includes(value);
+    // Toggle handler for this specific item
+    const toggle = () => {
+        if (type === "single") {
+            // For single type, either select this item or clear selection if collapsible
+            onValueChange(isOpen && collapsible ? "" : value);
+        }
+        else {
+            // For multiple type, add or remove from array
+            if (Array.isArray(selectedValue)) {
+                const newValue = isOpen
+                    ? selectedValue.filter(v => v !== value)
+                    : [...selectedValue, value];
+                onValueChange(newValue);
+            }
+            else {
+                onValueChange([value]);
+            }
+        }
+    };
+    // Generate IDs for ARIA linkage
+    const triggerId = `accordion-item-${value}-trigger`;
+    const contentId = `accordion-item-${value}-content`;
+    // Context value for Trigger and Content
+    const contextValue = {
+        value,
+        isOpen,
+        toggle,
+        triggerId,
+        contentId,
+    };
+    // 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 (jsx(AccordionItemContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(itemStyleClass, className), "data-state": isOpen ? "open" : "closed", "data-variant": variant, "data-value": value, ...props, children: children }) }));
+});
+AccordionItem.displayName = "AccordionItem";
+
+export { AccordionItem, useAccordionItemContext };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { AccordionTriggerProps } from "./Accordion.types";
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useAccordionContext } from './Accordion.js';
+import { useAccordionItemContext } from './AccordionItem.js';
+import { motion } from 'motion/react';
+import { PlusIcon } from '@heroicons/react/24/outline';
+
+const AccordionTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    const { theme } = useAccordionContext();
+    const { isOpen, toggle, triggerId, contentId } = useAccordionItemContext();
+    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", onClick: toggle, ...props, children: [children, jsx(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", children: jsx(PlusIcon, { className: "size-4", strokeWidth: 2 }) })] }));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export { AccordionTrigger };

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

@@ -0,0 +1,4 @@
+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, };

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,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { alertTheme } from './Alert.theme.js';
+import { XMarkIcon, XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, BellIcon } from '@heroicons/react/24/solid';
+import { Button } from '../Button/Button.js';
+
+const defaultIcons = {
+    neutral: BellIcon,
+    primary: InformationCircleIcon,
+    success: CheckCircleIcon,
+    warning: ExclamationTriangleIcon,
+    danger: XCircleIcon,
+};
+const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, description, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
+    var _a;
+    const iconColor = (_a = alertTheme.iconColors[color]) !== null && _a !== void 0 ? _a : alertTheme.iconColors.primary;
+    const showDismiss = dismissible === true || (dismissible !== false && !!onDismiss);
+    const handleDismiss = () => {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    const renderIconOrAvatar = () => {
+        if (avatar) {
+            return (jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full", "aria-hidden": "true", children: avatar }));
+        }
+        if (icon === null || !showIcon) {
+            return null;
+        }
+        if (React__default.isValidElement(icon)) {
+            return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: icon }));
+        }
+        const IconComponent = defaultIcons[color];
+        return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: jsx(IconComponent, { className: cn("w-6 h-6", iconColor) }) }));
+    };
+    const alertNode = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })), description && (jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: description })), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "link", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
+    if (darkMode) {
+        return jsx("div", { className: "dark", children: alertNode });
+    }
+    return alertNode;
+});
+Alert.displayName = "Alert";
+
+export { Alert };

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

@@ -0,0 +1,6 @@
+import { AlertTheme } from "./Alert.types";
+/**
+ * Default theme configuration for Alert component
+ * Uses flat color organization matching Badge pattern
+ */
+export declare const alertTheme: AlertTheme;