@mohasinac/appkit 2.3.0 → 2.3.2

package/dist/ui/animation.helper.js

@@ -0,0 +1,17 @@
+/**
+ * Animation Helpers
+ *
+ * Easing functions for animations and transitions.
+ */
+export const easings = {
+    linear: (t) => t,
+    easeInQuad: (t) => t * t,
+    easeOutQuad: (t) => t * (2 - t),
+    easeInOutQuad: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+    easeInCubic: (t) => t * t * t,
+    easeOutCubic: (t) => --t * t * t + 1,
+    easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+    easeInQuart: (t) => t * t * t * t,
+    easeOutQuart: (t) => 1 - --t * t * t * t,
+    easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+};

package/dist/ui/color.helper.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Color Helpers
+ *
+ * UI helpers for color manipulation and utilities.
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function getContrastColor(hex: string): "#000000" | "#ffffff";

package/dist/ui/color.helper.js

@@ -0,0 +1,31 @@
+/**
+ * Color Helpers
+ *
+ * UI helpers for color manipulation and utilities.
+ */
+export function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+export function rgbToHex(r, g, b) {
+    return ("#" +
+        [r, g, b]
+            .map((x) => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? "0" + hex : hex;
+        })
+            .join(""));
+}
+export function getContrastColor(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return "#000000";
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    return luminance > 0.5 ? "#000000" : "#ffffff";
+}

package/dist/ui/columns/build-columns.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Generic column builder — replaces the copy-pasted `build*Columns()` factory
+ * found in every feature's `columns/index.ts`.
+ *
+ * @example
+ * export const buildOrderColumns = createColumnBuilder(orderAdminColumns);
+ */
+import type { TableColumn, ColumnExtensionOpts } from "../../contracts";
+/**
+ * Build a merged column list from base columns + extension opts.
+ * Handles omit, overrides, and extras in one pass.
+ */
+export declare function buildColumns<T>(base: TableColumn<T>[], opts?: ColumnExtensionOpts<T>): TableColumn<T>[];
+/**
+ * Factory that binds a base column set, returning a single-arg builder.
+ *
+ * @example
+ * export const buildOrderColumns = createColumnBuilder(orderAdminColumns);
+ * // usage: buildOrderColumns({ omit: ["trackingNumber"] })
+ */
+export declare function createColumnBuilder<T>(base: TableColumn<T>[]): (opts?: ColumnExtensionOpts<T>) => TableColumn<T>[];

package/dist/ui/columns/build-columns.js

@@ -0,0 +1,33 @@
+/**
+ * Generic column builder — replaces the copy-pasted `build*Columns()` factory
+ * found in every feature's `columns/index.ts`.
+ *
+ * @example
+ * export const buildOrderColumns = createColumnBuilder(orderAdminColumns);
+ */
+/**
+ * Build a merged column list from base columns + extension opts.
+ * Handles omit, overrides, and extras in one pass.
+ */
+export function buildColumns(base, opts) {
+    if (!opts)
+        return base;
+    const omit = opts.omit?.length ? new Set(opts.omit) : undefined;
+    const cols = base
+        .filter((col) => !omit?.has(col.key))
+        .map((col) => {
+        const ovr = opts.overrides?.[col.key];
+        return ovr ? { ...col, ...ovr } : col;
+    });
+    return opts.extras ? [...cols, ...opts.extras] : cols;
+}
+/**
+ * Factory that binds a base column set, returning a single-arg builder.
+ *
+ * @example
+ * export const buildOrderColumns = createColumnBuilder(orderAdminColumns);
+ * // usage: buildOrderColumns({ omit: ["trackingNumber"] })
+ */
+export function createColumnBuilder(base) {
+    return (opts) => buildColumns(base, opts);
+}

package/dist/ui/columns/column-renderers.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Shared, React-free column cell renderers.
+ *
+ * Every renderer returns a `string` (not ReactNode) so it works with
+ * `TableColumn<T>.render` in both server and client contexts.
+ *
+ * For JSX renderers (badge, thumbnail, action buttons) see `column-renderers.tsx`.
+ */
+export interface BooleanRenderOpts {
+    trueLabel?: string;
+    falseLabel?: string;
+}
+/** Render a boolean as "Yes" / "No" (or custom labels). */
+export declare function renderBoolean(value: boolean | null | undefined, opts?: BooleanRenderOpts): string;
+/** Render a monetary amount through the shared `formatCurrency` pipeline. */
+export declare function renderCurrency(amount: number | null | undefined, currency?: string, locale?: string, fallback?: string): string;
+/**
+ * Render a monetary amount as `CURRENCY AMOUNT` (e.g. `INR 1,200`).
+ * This matches the existing inline pattern across column modules.
+ */
+export declare function renderCurrencyCompact(amount: number | null | undefined, currency?: string, fallback?: string): string;
+/** Render a numeric value with locale separators, with an optional fallback. */
+export declare function renderCount(value: number | null | undefined, fallback?: string): string;
+/** Render a nullable value through an optional formatter, with em-dash fallback. */
+export declare function renderNullable<T>(value: T | null | undefined, format?: (v: T) => string, fallback?: string): string;
+export type RatingMode = "numeric" | "stars";
+export interface RatingRenderOpts {
+    mode?: RatingMode;
+    maxStars?: number;
+    showCount?: boolean;
+}
+/** Render a rating value as "4.2 (31)" or "★★★★☆". */
+export declare function renderRating(rating: number | null | undefined, reviewCount?: number | null, opts?: RatingRenderOpts): string;

package/dist/ui/columns/column-renderers.js

@@ -0,0 +1,64 @@
+/**
+ * Shared, React-free column cell renderers.
+ *
+ * Every renderer returns a `string` (not ReactNode) so it works with
+ * `TableColumn<T>.render` in both server and client contexts.
+ *
+ * For JSX renderers (badge, thumbnail, action buttons) see `column-renderers.tsx`.
+ */
+import { formatCurrency } from "../../utils/number.formatter";
+import { getDefaultCurrency, } from "../../core/baseline-resolver";
+/** Render a boolean as "Yes" / "No" (or custom labels). */
+export function renderBoolean(value, opts) {
+    const trueLabel = opts?.trueLabel ?? "Yes";
+    const falseLabel = opts?.falseLabel ?? "No";
+    return value ? trueLabel : falseLabel;
+}
+// --- Currency -----------------------------------------------------------------
+/** Render a monetary amount through the shared `formatCurrency` pipeline. */
+export function renderCurrency(amount, currency, locale, fallback = "—") {
+    if (amount == null)
+        return fallback;
+    return formatCurrency(amount, currency, locale);
+}
+/**
+ * Render a monetary amount as `CURRENCY AMOUNT` (e.g. `INR 1,200`).
+ * This matches the existing inline pattern across column modules.
+ */
+export function renderCurrencyCompact(amount, currency, fallback = "—") {
+    if (amount == null)
+        return fallback;
+    const resolvedCurrency = currency ?? getDefaultCurrency();
+    return `${resolvedCurrency} ${amount.toLocaleString()}`;
+}
+// --- Count --------------------------------------------------------------------
+/** Render a numeric value with locale separators, with an optional fallback. */
+export function renderCount(value, fallback = "0") {
+    if (value == null)
+        return fallback;
+    return value.toLocaleString();
+}
+// --- Nullable -----------------------------------------------------------------
+/** Render a nullable value through an optional formatter, with em-dash fallback. */
+export function renderNullable(value, format, fallback = "—") {
+    if (value == null)
+        return fallback;
+    return format ? format(value) : String(value);
+}
+/** Render a rating value as "4.2 (31)" or "★★★★☆". */
+export function renderRating(rating, reviewCount, opts) {
+    if (rating == null)
+        return "—";
+    const mode = opts?.mode ?? "numeric";
+    if (mode === "stars") {
+        const max = opts?.maxStars ?? 5;
+        const filled = Math.round(rating);
+        return ("★".repeat(Math.min(filled, max)) + "☆".repeat(Math.max(max - filled, 0)));
+    }
+    // numeric
+    const base = rating.toFixed(1);
+    if (opts?.showCount !== false && reviewCount != null) {
+        return `${base} (${reviewCount.toLocaleString()})`;
+    }
+    return base;
+}

package/dist/ui/columns/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Barrel for shared column utilities.
+ */
+export { buildColumns, createColumnBuilder } from "./build-columns";
+export { renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, } from "./column-renderers";
+export type { BooleanRenderOpts, RatingMode, RatingRenderOpts, } from "./column-renderers";

package/dist/ui/columns/index.js

@@ -0,0 +1,5 @@
+/**
+ * Barrel for shared column utilities.
+ */
+export { buildColumns, createColumnBuilder } from "./build-columns";
+export { renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, } from "./column-renderers";

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

@@ -0,0 +1,27 @@
+import React from "react";
+export interface AccordionProps {
+    /** Legacy simple mode: renders a native details/summary accordion */
+    title?: React.ReactNode;
+    /** Legacy simple mode open state */
+    open?: boolean;
+    /** Legacy simple mode title styling */
+    titleClassName?: string;
+    /** Legacy simple mode content styling */
+    contentClassName?: string;
+    /** Controlled/list mode: single or multiple expanded items */
+    type?: "single" | "multiple";
+    defaultValue?: string | string[];
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface AccordionItemProps {
+    value: string;
+    title: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare function Accordion({ title, children, open, className, titleClassName, contentClassName, type, defaultValue, value, onChange, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ value, title, disabled, className, children, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Accordion.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from "react";
+import { Button } from "./Button";
+import { Div } from "./Div";
+import { Span } from "./Typography";
+const AccordionContext = createContext(null);
+function toArray(value) {
+    if (!value)
+        return [];
+    return Array.isArray(value) ? value : [value];
+}
+function renderLegacyAccordion({ title, children, open, className = "", titleClassName = "", contentClassName = "", }) {
+    return (_jsxs("details", { open: open, className: `appkit-accordion appkit-accordion--legacy ${className}`, children: [_jsxs("summary", { className: `appkit-accordion__summary ${titleClassName}`, children: [title, _jsx("span", { className: "appkit-accordion__chevron", "aria-hidden": "true", children: "\u25BE" })] }), _jsx("div", { className: `appkit-accordion__content ${contentClassName}`, "data-section": "accordion-div-447", children: children })] }));
+}
+export function Accordion({ title, children, open = false, className = "", titleClassName = "", contentClassName = "", type = "single", defaultValue, value, onChange, }) {
+    // Backward-compatible simple details mode.
+    if (title !== undefined) {
+        return renderLegacyAccordion({
+            title,
+            children,
+            open,
+            className,
+            titleClassName,
+            contentClassName,
+        });
+    }
+    const initialOpen = useMemo(() => {
+        if (value !== undefined)
+            return toArray(value);
+        return toArray(defaultValue);
+    }, [defaultValue, value]);
+    const [internalOpenValues, setInternalOpenValues] = useState(initialOpen);
+    const activeOpenValues = value !== undefined ? toArray(value) : internalOpenValues;
+    const toggle = (itemValue) => {
+        const nextOpenValues = type === "single"
+            ? activeOpenValues.includes(itemValue)
+                ? []
+                : [itemValue]
+            : activeOpenValues.includes(itemValue)
+                ? activeOpenValues.filter((v) => v !== itemValue)
+                : [...activeOpenValues, itemValue];
+        if (value === undefined) {
+            setInternalOpenValues(nextOpenValues);
+        }
+        onChange?.(type === "single" ? (nextOpenValues[0] ?? "") : nextOpenValues);
+    };
+    return (_jsx(AccordionContext.Provider, { value: { type, openValues: activeOpenValues, toggle }, children: _jsx(Div, { className: className, children: children }) }));
+}
+export function AccordionItem({ value, title, disabled = false, className = "", children, }) {
+    const ctx = useContext(AccordionContext);
+    if (!ctx) {
+        throw new Error("AccordionItem must be used within Accordion.");
+    }
+    const isOpen = ctx.openValues.includes(value);
+    return (_jsxs(Div, { className: `appkit-accordion__item ${className}`, children: [_jsxs(Button, { type: "button", disabled: disabled, "aria-expanded": isOpen, onClick: () => ctx.toggle(value), className: "appkit-accordion__trigger", children: [_jsx(Span, { children: title }), _jsx(Span, { className: `appkit-accordion__item-chevron ${isOpen ? "appkit-accordion__item-chevron--open" : ""}`, children: "\u25BE" })] }), isOpen && _jsx(Div, { className: "appkit-accordion__panel", children: children })] }));
+}

package/dist/ui/components/Accordion.style.css

@@ -0,0 +1,82 @@
+.appkit-accordion {
+  border-bottom: 1px solid #e4e4e7;
+}
+
+.dark .appkit-accordion {
+  border-bottom-color: #334155;
+}
+
+.appkit-accordion__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  padding: 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #18181b;
+}
+
+.dark .appkit-accordion__summary {
+  color: #f8fafc;
+}
+
+.appkit-accordion__chevron {
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+  color: #a1a1aa;
+  transition: transform 0.2s ease;
+}
+
+.appkit-accordion[open] .appkit-accordion__chevron {
+  transform: rotate(180deg);
+}
+
+.appkit-accordion__content {
+  padding-bottom: 1rem;
+  font-size: 0.875rem;
+  color: #52525b;
+}
+
+.dark .appkit-accordion__content {
+  color: #a1a1aa;
+}
+
+.appkit-accordion__item {
+  border-bottom: 1px solid #e4e4e7;
+}
+
+.dark .appkit-accordion__item {
+  border-bottom-color: #334155;
+}
+
+.appkit-accordion__trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 0.25rem;
+  text-align: left;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.appkit-accordion__item-chevron {
+  transition: transform 0.2s ease;
+}
+
+.appkit-accordion__item-chevron--open {
+  transform: rotate(180deg);
+}
+
+.appkit-accordion__panel {
+  padding: 0 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  color: #52525b;
+}
+
+.dark .appkit-accordion__panel {
+  color: #94a3b8;
+}

package/dist/ui/components/ActiveFilterChips.d.ts

@@ -0,0 +1,13 @@
+export interface ActiveFilter {
+    key: string;
+    label: string;
+    value: string;
+}
+export interface ActiveFilterChipsProps {
+    filters: ActiveFilter[];
+    onRemove: (key: string) => void;
+    onClearAll: () => void;
+    className?: string;
+    clearAllLabel?: string;
+}
+export declare function ActiveFilterChips({ filters, onRemove, onClearAll, className, clearAllLabel, }: ActiveFilterChipsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/components/ActiveFilterChips.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Row } from "./Layout";
+import { Span } from "./Typography";
+export function ActiveFilterChips({ filters, onRemove, onClearAll, className = "", clearAllLabel = "Clear all", }) {
+    if (filters.length === 0)
+        return null;
+    return (_jsxs(Row, { wrap: true, gap: "sm", className: className, role: "list", "aria-label": "Active filters", children: [filters.map((filter) => (_jsxs("span", { role: "listitem", className: "appkit-active-filter-chips__chip", children: [_jsxs(Span, { className: "appkit-active-filter-chips__chip-label", children: [filter.label, ":"] }), filter.value, _jsx("button", { type: "button", onClick: () => onRemove(filter.key), "aria-label": `Remove ${filter.label}: ${filter.value} filter`, className: "appkit-active-filter-chips__chip-remove", children: _jsx("svg", { className: "appkit-active-filter-chips__chip-remove-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) })] }, filter.key))), _jsx("button", { type: "button", onClick: onClearAll, className: "appkit-active-filter-chips__clear", children: clearAllLabel })] }));
+}

package/dist/ui/components/ActiveFilterChips.style.css

@@ -0,0 +1,66 @@
+.appkit-active-filter-chips__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+  border: 1px solid #e4e4e7;
+  border-radius: 0.5rem;
+  background: #fafafa;
+  color: #27272a;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.dark .appkit-active-filter-chips__chip {
+  border-color: #334155;
+  background: #1e293b;
+  color: #e2e8f0;
+}
+
+.appkit-active-filter-chips__chip-label {
+  margin-right: 0.125rem;
+  color: #71717a;
+}
+
+.dark .appkit-active-filter-chips__chip-label {
+  color: #94a3b8;
+}
+
+.appkit-active-filter-chips__chip-remove {
+  margin-left: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  transition: background-color 0.2s ease;
+}
+
+.appkit-active-filter-chips__chip-remove:hover {
+  background: #d4d4d8;
+}
+
+.dark .appkit-active-filter-chips__chip-remove:hover {
+  background: #475569;
+}
+
+.appkit-active-filter-chips__chip-remove-icon {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.appkit-active-filter-chips__clear {
+  padding: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #509c02;
+}
+
+.appkit-active-filter-chips__clear:hover {
+  text-decoration: underline;
+}
+
+.dark .appkit-active-filter-chips__clear {
+  color: #f063b9;
+}

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

@@ -0,0 +1,43 @@
+import React from "react";
+/**
+ * Alert — flexible alert/notification with variant icons and optional dismiss.
+ *
+ * Extracted from src/components/feedback/Alert.tsx for @mohasinac/ui.
+ * Theme values inlined from THEME_CONSTANTS.colors.alert and THEME_CONSTANTS.colors.button.
+ */
+declare const ALERT_STYLES: {
+    readonly info: {
+        readonly container: "appkit-alert--info";
+        readonly icon: "appkit-alert__icon--info";
+        readonly title: "appkit-alert__title--info";
+        readonly text: "appkit-alert__text--info";
+    };
+    readonly success: {
+        readonly container: "appkit-alert--success";
+        readonly icon: "appkit-alert__icon--success";
+        readonly title: "appkit-alert__title--success";
+        readonly text: "appkit-alert__text--success";
+    };
+    readonly warning: {
+        readonly container: "appkit-alert--warning";
+        readonly icon: "appkit-alert__icon--warning";
+        readonly title: "appkit-alert__title--warning";
+        readonly text: "appkit-alert__text--warning";
+    };
+    readonly error: {
+        readonly container: "appkit-alert--error";
+        readonly icon: "appkit-alert__icon--error";
+        readonly title: "appkit-alert__title--error";
+        readonly text: "appkit-alert__text--error";
+    };
+};
+export interface AlertProps {
+    children: React.ReactNode;
+    variant?: keyof typeof ALERT_STYLES;
+    title?: string;
+    compact?: boolean;
+    onClose?: () => void;
+    className?: string;
+}
+export declare function Alert({ children, variant, title, compact, onClose, className, }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/Alert.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading } from "./Typography";
+import { Button } from "./Button";
+/**
+ * Alert — flexible alert/notification with variant icons and optional dismiss.
+ *
+ * Extracted from src/components/feedback/Alert.tsx for @mohasinac/ui.
+ * Theme values inlined from THEME_CONSTANTS.colors.alert and THEME_CONSTANTS.colors.button.
+ */
+// Inlined from THEME_CONSTANTS.colors.alert
+const ALERT_STYLES = {
+    info: {
+        container: "appkit-alert--info",
+        icon: "appkit-alert__icon--info",
+        title: "appkit-alert__title--info",
+        text: "appkit-alert__text--info",
+    },
+    success: {
+        container: "appkit-alert--success",
+        icon: "appkit-alert__icon--success",
+        title: "appkit-alert__title--success",
+        text: "appkit-alert__text--success",
+    },
+    warning: {
+        container: "appkit-alert--warning",
+        icon: "appkit-alert__icon--warning",
+        title: "appkit-alert__title--warning",
+        text: "appkit-alert__text--warning",
+    },
+    error: {
+        container: "appkit-alert--error",
+        icon: "appkit-alert__icon--error",
+        title: "appkit-alert__title--error",
+        text: "appkit-alert__text--error",
+    },
+};
+const ALERT_CLOSE_HOVER = "appkit-alert__close-hover";
+const ICONS = {
+    info: (_jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })),
+    success: (_jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) })),
+    warning: (_jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) })),
+    error: (_jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })),
+};
+export function Alert({ children, variant = "info", title, compact = false, onClose, className = "", }) {
+    const styles = ALERT_STYLES[variant];
+    return (_jsx("div", { className: `appkit-alert ${styles.container} ${className}`, role: "alert", "data-section": "alert-div-448", children: _jsxs("div", { className: "appkit-alert__content", "data-section": "alert-div-449", children: [!compact && (_jsx("div", { className: `appkit-alert__icon ${styles.icon}`, "data-section": "alert-div-450", children: ICONS[variant] })), _jsxs("div", { className: "appkit-alert__body", "data-section": "alert-div-451", children: [title && (_jsx(Heading, { level: 3, className: `appkit-alert__title ${styles.title}`, children: title })), _jsx("div", { className: `appkit-alert__text ${styles.text}`, "data-section": "alert-div-452", children: children })] }), onClose && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, className: `appkit-alert__close ${styles.icon} ${ALERT_CLOSE_HOVER}`, "aria-label": "Close", children: _jsx("svg", { className: "appkit-alert__close-icon", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }))] }) }));
+}