@mohasinac/appkit 2.2.0 → 2.3.0

package/dist/ui/components/Modal.js

@@ -1,79 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
-import React from "react";
-import { createPortal } from "react-dom";
-import { Heading } from "./Typography";
-import { Button } from "./Button";
-const SIZE_CLASSES = {
-    sm: "appkit-modal__panel--sm",
-    md: "appkit-modal__panel--md",
-    lg: "appkit-modal__panel--lg",
-    xl: "appkit-modal__panel--xl",
-    full: "appkit-modal__panel--full",
-};
-export function Modal({ isOpen, open, onClose, title, children, size = "md", showCloseButton = true, actions, className = "", }) {
-    const visible = open ?? isOpen ?? false;
-    const titleId = React.useId();
-    const panelRef = React.useRef(null);
-    const previousFocusRef = React.useRef(null);
-    React.useEffect(() => {
-        if (!visible) {
-            return;
-        }
-        const previousOverflow = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = previousOverflow;
-        };
-    }, [visible]);
-    React.useEffect(() => {
-        if (visible) {
-            previousFocusRef.current = document.activeElement;
-            requestAnimationFrame(() => panelRef.current?.focus());
-            return;
-        }
-        previousFocusRef.current?.focus();
-    }, [visible]);
-    const handleKeyDown = (event) => {
-        if (event.key === "Escape") {
-            onClose();
-            return;
-        }
-        if (event.key !== "Tab") {
-            return;
-        }
-        const panel = panelRef.current;
-        if (!panel) {
-            return;
-        }
-        const focusable = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])'));
-        if (!focusable.length) {
-            return;
-        }
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (event.shiftKey && document.activeElement === first) {
-            event.preventDefault();
-            last.focus();
-        }
-        else if (!event.shiftKey && document.activeElement === last) {
-            event.preventDefault();
-            first.focus();
-        }
-    };
-    if (!visible || typeof document === "undefined") {
-        return null;
-    }
-    return createPortal(_jsxs("div", { className: "appkit-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, onKeyDown: handleKeyDown, children: [_jsx("div", { className: "appkit-modal__backdrop", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { ref: panelRef, tabIndex: -1, className: ["appkit-modal__panel", SIZE_CLASSES[size], className]
-                    .filter(Boolean)
-                    .join(" "), children: [(title || showCloseButton) && (_jsxs("div", { className: "appkit-modal__header", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] }), document.body);
-}
-export function ModalFooter({ children, className = "", }) {
-    return (_jsx("div", { className: [
-            "flex items-center justify-end gap-3 border-t border-zinc-100 px-6 py-4 dark:border-slate-800",
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), children: children }));
-}

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

@@ -1,102 +0,0 @@
-.appkit-modal {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-}
-
-.appkit-modal__backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-}
-
-.appkit-modal__panel {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  max-height: 90vh;
-  overflow: hidden;
-  border-radius: 1rem;
-  background: #ffffff;
-  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.45);
-  border: 1px solid #e4e4e7;
-  animation: appkit-modal-fade-up 0.15s ease forwards;
-}
-
-.dark .appkit-modal__panel {
-  background: #0f172a;
-  border-color: #334155;
-}
-
-.appkit-modal__panel--sm { max-width: 24rem; }
-.appkit-modal__panel--md { max-width: 32rem; }
-.appkit-modal__panel--lg { max-width: 42rem; }
-.appkit-modal__panel--xl { max-width: 56rem; }
-.appkit-modal__panel--full { max-width: 95vw; max-height: 95vh; }
-
-.appkit-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid #f4f4f5;
-  flex-shrink: 0;
-}
-
-.dark .appkit-modal__header {
-  border-bottom-color: #1e293b;
-}
-
-.appkit-modal__title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.appkit-modal__close {
-  margin-left: auto;
-  min-height: 0;
-  padding: 0.375rem;
-  border-radius: 0.5rem;
-  color: #a1a1aa;
-}
-
-.appkit-modal__close:hover {
-  color: #52525b;
-}
-
-.dark .appkit-modal__close {
-  color: #71717a;
-}
-
-.dark .appkit-modal__close:hover {
-  color: #cbd5e1;
-}
-
-.appkit-modal__close-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.appkit-modal__body {
-  overflow-y: auto;
-  flex: 1;
-  padding: 1rem 1.5rem;
-}
-
-@keyframes appkit-modal-fade-up {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

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

@@ -1,25 +0,0 @@
-import type { PaginationConfig } from "../../contracts";
-/**
- * Pagination — smart ellipsis pagination with prev/next chevrons.
- *
- * Accepts either individual props OR a `paginationConfig` object
- * (merged with DEFAULT_PAGINATION_CONFIG). Individual props take precedence.
- */
-export interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    /**
-     * Composable pagination config. Merged with DEFAULT_PAGINATION_CONFIG.
-     * Individual flat props override this.
-     */
-    paginationConfig?: Partial<PaginationConfig>;
-    /** Max visible page buttons before ellipsis kicks in. Default: 7 */
-    maxVisible?: number;
-    showFirstLast?: boolean;
-    showPrevNext?: boolean;
-    disabled?: boolean;
-    size?: "sm" | "md" | "lg";
-    className?: string;
-}
-export declare function Pagination({ currentPage, totalPages, onPageChange, paginationConfig, maxVisible: maxVisibleProp, showFirstLast: showFirstLastProp, showPrevNext: showPrevNextProp, disabled, size: sizeProp, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Pagination.js

@@ -1,56 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DEFAULT_PAGINATION_CONFIG } from "../../contracts";
-function getPageNumbers(currentPage, totalPages, maxVisible) {
-    if (totalPages <= maxVisible) {
-        return Array.from({ length: totalPages }, (_, i) => i + 1);
-    }
-    const pages = [];
-    const halfVisible = Math.floor(maxVisible / 2);
-    let startPage = Math.max(1, currentPage - halfVisible);
-    let endPage = Math.min(totalPages, currentPage + halfVisible);
-    if (currentPage <= halfVisible)
-        endPage = maxVisible;
-    if (currentPage >= totalPages - halfVisible)
-        startPage = totalPages - maxVisible + 1;
-    if (startPage > 1) {
-        pages.push(1);
-        if (startPage > 2)
-            pages.push("...");
-    }
-    for (let i = startPage; i <= endPage; i++)
-        pages.push(i);
-    if (endPage < totalPages) {
-        if (endPage < totalPages - 1)
-            pages.push("...");
-        pages.push(totalPages);
-    }
-    return pages;
-}
-const SIZE_CLASSES = {
-    sm: "appkit-pagination--sm",
-    md: "appkit-pagination--md",
-    lg: "appkit-pagination--lg",
-};
-export function Pagination({ currentPage, totalPages, onPageChange, paginationConfig, maxVisible: maxVisibleProp, showFirstLast: showFirstLastProp, showPrevNext: showPrevNextProp, disabled = false, size: sizeProp, className = "", }) {
-    const resolved = { ...DEFAULT_PAGINATION_CONFIG, ...paginationConfig };
-    const maxVisible = maxVisibleProp ?? resolved.maxVisible;
-    const showFirstLast = showFirstLastProp ?? resolved.showFirstLast;
-    const showPrevNext = showPrevNextProp ?? resolved.showPrevNext;
-    const size = sizeProp ?? resolved.size;
-    const handle = (page) => {
-        if (disabled || page < 1 || page > totalPages || page === currentPage)
-            return;
-        onPageChange(page);
-    };
-    const btnClass = (active, off) => {
-        const base = `appkit-pagination__button ${SIZE_CLASSES[size]}`;
-        if (off)
-            return `${base} appkit-pagination__button--disabled`;
-        if (active)
-            return `${base} appkit-pagination__button--active`;
-        return `${base} appkit-pagination__button--default`;
-    };
-    const pages = getPageNumbers(currentPage, totalPages, maxVisible);
-    return (_jsxs("nav", { className: `appkit-pagination ${className}`, "aria-label": "Pagination", children: [showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(1), disabled: disabled || currentPage === 1, "aria-label": "First page", children: "\u00AB" })), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(currentPage - 1), disabled: disabled || currentPage === 1, "aria-label": "Previous page", children: "\u2039" })), pages.map((page, i) => page === "..." ? (_jsx("span", { className: `appkit-pagination__ellipsis ${SIZE_CLASSES[size]}`, "aria-hidden": "true", children: "\u2026" }, `ellipsis-${i}`)) : (_jsx("button", { type: "button", className: btnClass(page === currentPage, disabled && page !== currentPage), onClick: () => handle(page), disabled: disabled, "aria-label": `Page ${page}`, "aria-current": page === currentPage ? "page" : undefined, children: page }, page))), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(currentPage + 1), disabled: disabled || currentPage === totalPages, "aria-label": "Next page", children: "\u203A" })), showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(totalPages), disabled: disabled || currentPage === totalPages, "aria-label": "Last page", children: "\u00BB" }))] }));
-}

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

@@ -1,76 +0,0 @@
-.appkit-pagination {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.appkit-pagination__button {
-  border: 1px solid #e4e4e7;
-  border-radius: 0.5rem;
-  font-weight: 500;
-  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
-}
-
-.appkit-pagination--sm { font-size: 0.75rem; padding: 0.25rem 0.5rem; min-width: 1.75rem; }
-.appkit-pagination--md { font-size: 0.875rem; padding: 0.375rem 0.75rem; min-width: 2.25rem; }
-.appkit-pagination--lg { font-size: 1rem; padding: 0.5rem 1rem; min-width: 2.75rem; }
-
-.appkit-pagination__button--default {
-  background: #ffffff;
-  color: #3f3f46;
-  cursor: pointer;
-}
-
-.appkit-pagination__button--default:hover {
-  background: #fafafa;
-  border-color: #d4d4d8;
-}
-
-.appkit-pagination__button--active {
-  background: #509c02;
-  color: #ffffff;
-  border-color: #509c02;
-  cursor: default;
-}
-
-.appkit-pagination__button--disabled {
-  background: #f4f4f5;
-  color: #a1a1aa;
-  border-color: #e4e4e7;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.appkit-pagination__ellipsis {
-  color: #a1a1aa;
-  text-align: center;
-}
-
-.dark .appkit-pagination__button {
-  border-color: #334155;
-}
-
-.dark .appkit-pagination__button--default {
-  background: #0f172a;
-  color: #cbd5e1;
-}
-
-.dark .appkit-pagination__button--default:hover {
-  background: #1e293b;
-  border-color: #475569;
-}
-
-.dark .appkit-pagination__button--active {
-  background: #e91e8c;
-  border-color: #e91e8c;
-  color: #ffffff;
-}
-
-.dark .appkit-pagination__button--disabled {
-  background: #1e293b;
-  color: #64748b;
-}
-
-.dark .appkit-pagination__ellipsis {
-  color: #64748b;
-}

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

@@ -1,12 +0,0 @@
-export interface PasswordStrengthIndicatorProps {
-    password: string;
-    minLength?: number;
-    showRequirements?: boolean;
-    labels?: {
-        weak?: string;
-        fair?: string;
-        good?: string;
-        strong?: string;
-    };
-}
-export declare function PasswordStrengthIndicator({ password, minLength, showRequirements, labels, }: PasswordStrengthIndicatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/components/PasswordStrengthIndicator.js

@@ -1,35 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Li, Ul } from "./Semantic";
-import { Row } from "./Layout";
-import { Span } from "./Typography";
-export function PasswordStrengthIndicator({ password, minLength = 8, showRequirements = true, labels, }) {
-    if (!password)
-        return null;
-    const requirements = [
-        {
-            label: `At least ${minLength} characters`,
-            met: password.length >= minLength,
-        },
-        { label: "Contains lowercase letter", met: /[a-z]/.test(password) },
-        { label: "Contains uppercase letter", met: /[A-Z]/.test(password) },
-        { label: "Contains number", met: /[0-9]/.test(password) },
-    ];
-    const metCount = requirements.filter((req) => req.met).length;
-    const strength = (metCount / requirements.length) * 100;
-    const strengthLabel = strength <= 25
-        ? (labels?.weak ?? "Weak")
-        : strength <= 50
-            ? (labels?.fair ?? "Fair")
-            : strength <= 75
-                ? (labels?.good ?? "Good")
-                : (labels?.strong ?? "Strong");
-    const strengthColor = strength <= 25
-        ? "bg-red-500"
-        : strength <= 50
-            ? "bg-orange-500"
-            : strength <= 75
-                ? "bg-yellow-500"
-                : "bg-green-500";
-    return (_jsxs("div", { className: "appkit-password-strength", "aria-live": "polite", "aria-atomic": "true", children: [_jsxs(Row, { gap: "sm", className: "mb-2", children: [_jsx("div", { className: "appkit-password-strength__track", children: _jsx("div", { className: `appkit-password-strength__fill ${strengthColor}`, style: { width: `${strength}%` }, role: "progressbar", "aria-valuenow": Math.round(strength), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Password strength: ${strengthLabel}` }) }), _jsx(Span, { className: "appkit-password-strength__label", children: strengthLabel })] }), showRequirements ? (_jsx(Ul, { className: "appkit-password-strength__requirements", children: requirements.map((req) => (_jsxs(Li, { className: `appkit-password-strength__requirement ${req.met ? "appkit-password-strength__requirement--met" : ""}`, children: [_jsx(Span, { className: "sr-only", children: req.met ? "Met: " : "Not met: " }), req.label] }, req.label))) })) : null] }));
-}

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

@@ -1,56 +0,0 @@
-/* PasswordStrengthIndicator — progress bar + requirements checklist */
-
-.appkit-password-strength {
-  margin-top: 0.5rem;
-}
-
-.appkit-password-strength__track {
-  height: 0.5rem;
-  flex: 1;
-  overflow: hidden;
-  border-radius: 9999px;
-  background: #e4e4e7;
-}
-
-:is(.dark) .appkit-password-strength__track {
-  background: #334155;
-}
-
-.appkit-password-strength__fill {
-  height: 100%;
-  transition: all 0.3s ease;
-}
-
-.appkit-password-strength__label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #52525b;
-}
-
-:is(.dark) .appkit-password-strength__label {
-  color: #d4d4d8;
-}
-
-.appkit-password-strength__requirements {
-  margin-top: 0.5rem;
-}
-
-.appkit-password-strength__requirement {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.75rem;
-  color: #71717a;
-}
-
-:is(.dark) .appkit-password-strength__requirement {
-  color: #a1a1aa;
-}
-
-.appkit-password-strength__requirement--met {
-  color: #16a34a;
-}
-
-:is(.dark) .appkit-password-strength__requirement--met {
-  color: #4ade80;
-}

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

@@ -1,8 +0,0 @@
-export interface PriceDisplayProps {
-    amount: number;
-    currency?: string;
-    originalAmount?: number;
-    variant?: "compact" | "detail";
-    className?: string;
-}
-export declare function PriceDisplay({ amount, currency, originalAmount, variant, className, }: PriceDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/PriceDisplay.js

@@ -1,28 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Span } from "./Typography";
-import { Row } from "./Layout";
-import { getDefaultCurrency, getDefaultLocale, } from "../../core/baseline-resolver";
-function formatCurrency(amount, currency) {
-    return new Intl.NumberFormat(getDefaultLocale(), {
-        style: "currency",
-        currency,
-        maximumFractionDigits: 2,
-    }).format(amount);
-}
-function formatPercent(value) {
-    return `${Math.round(value * 100)}%`;
-}
-export function PriceDisplay({ amount, currency = getDefaultCurrency(), originalAmount, variant = "compact", className, }) {
-    const hasDiscount = originalAmount !== undefined && originalAmount > amount;
-    const discountPct = hasDiscount
-        ? (originalAmount - amount) / originalAmount
-        : 0;
-    const priceClass = variant === "detail"
-        ? "appkit-price-display__price appkit-price-display__price--detail"
-        : "appkit-price-display__price appkit-price-display__price--compact";
-    const originalClass = variant === "detail"
-        ? "appkit-price-display__original appkit-price-display__original--detail"
-        : "appkit-price-display__original appkit-price-display__original--compact";
-    return (_jsxs(Row, { wrap: true, align: "baseline", gap: "xs", className: `appkit-price-display ${className ?? ""}`.trim(), children: [_jsx(Span, { className: priceClass, children: formatCurrency(amount, currency) }), hasDiscount && (_jsxs(_Fragment, { children: [_jsx(Span, { className: originalClass, children: formatCurrency(originalAmount, currency) }), _jsxs(Span, { className: "appkit-price-display__discount", children: ["-", formatPercent(discountPct)] })] }))] }));
-}

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

@@ -1,47 +0,0 @@
-.appkit-price-display__price {
-  font-weight: 700;
-  color: #509c02;
-}
-
-.dark .appkit-price-display__price {
-  color: #f063b9;
-}
-
-.appkit-price-display__price--compact {
-  font-size: 1rem;
-}
-
-.appkit-price-display__price--detail {
-  font-size: 1.25rem;
-}
-
-.appkit-price-display__original {
-  text-decoration: line-through;
-  color: #a1a1aa;
-}
-
-.dark .appkit-price-display__original {
-  color: #71717a;
-}
-
-.appkit-price-display__original--compact {
-  font-size: 0.75rem;
-}
-
-.appkit-price-display__original--detail {
-  font-size: 0.875rem;
-}
-
-.appkit-price-display__discount {
-  border-radius: 0.25rem;
-  padding: 0.125rem 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  background: #dcfce7;
-  color: #047857;
-}
-
-.dark .appkit-price-display__discount {
-  background: rgba(6, 78, 59, 0.35);
-  color: #6ee7b7;
-}

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

@@ -1,23 +0,0 @@
-/**
- * Progress / IndeterminateProgress — deterministic and animated loading bars.
- *
- * Extracted from src/components/ui/Progress.tsx for @mohasinac/ui.
- * Theme values inlined; styled-jsx replaced with plain <style> element.
- */
-export interface ProgressProps {
-    value: number;
-    max?: number;
-    variant?: "primary" | "success" | "warning" | "error";
-    size?: "sm" | "md" | "lg";
-    label?: string;
-    showValue?: boolean;
-    className?: string;
-}
-export declare function Progress({ value, max, variant, size, label, showValue, className, }: ProgressProps): import("react/jsx-runtime").JSX.Element;
-export interface IndeterminateProgressProps {
-    variant?: "primary" | "success" | "warning" | "error";
-    size?: "sm" | "md" | "lg";
-    label?: string;
-    className?: string;
-}
-export declare function IndeterminateProgress({ variant, size, label, className, }: IndeterminateProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Progress.js

@@ -1,32 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Span } from "./Typography";
-export function Progress({ value, max = 100, variant = "primary", size = "md", label, showValue = false, className = "", }) {
-    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-    const sizeClasses = {
-        sm: "appkit-progress__track--sm",
-        md: "appkit-progress__track--md",
-        lg: "appkit-progress__track--lg",
-    };
-    const variantClasses = {
-        primary: "appkit-progress__bar--primary",
-        success: "appkit-progress__bar--success",
-        warning: "appkit-progress__bar--warning",
-        error: "appkit-progress__bar--error",
-    };
-    return (_jsxs("div", { className: `appkit-progress ${className}`, children: [(label || showValue) && (_jsxs("div", { className: "appkit-progress__meta", children: [label && _jsx(Span, { className: "appkit-progress__label", children: label }), showValue && (_jsxs(Span, { className: "appkit-progress__value", children: [Math.round(percentage), "%"] }))] })), _jsx("div", { className: `appkit-progress__track ${sizeClasses[size]}`, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label || `Progress: ${Math.round(percentage)}%`, children: _jsx("div", { className: `appkit-progress__bar ${variantClasses[variant]}`, style: { width: `${percentage}%` } }) })] }));
-}
-export function IndeterminateProgress({ variant = "primary", size = "md", label, className = "", }) {
-    const sizeClasses = {
-        sm: "appkit-progress__track--sm",
-        md: "appkit-progress__track--md",
-        lg: "appkit-progress__track--lg",
-    };
-    const variantClasses = {
-        primary: "appkit-progress__bar--primary",
-        success: "appkit-progress__bar--success",
-        warning: "appkit-progress__bar--warning",
-        error: "appkit-progress__bar--error",
-    };
-    return (_jsxs("div", { className: `appkit-progress ${className}`, children: [label && (_jsx(Span, { className: "appkit-progress__label appkit-progress__label--block", children: label })), _jsx("div", { className: `appkit-progress__track appkit-progress__track--indeterminate ${sizeClasses[size]}`, role: "progressbar", "aria-label": label || "Loading...", children: _jsx("div", { className: `appkit-progress__bar appkit-progress__bar--indeterminate ${variantClasses[variant]}`, style: { width: "40%" } }) })] }));
-}

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

@@ -1,81 +0,0 @@
-.appkit-progress {
-  width: 100%;
-}
-
-.appkit-progress__meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-}
-
-.appkit-progress__label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #18181b;
-}
-
-.appkit-progress__label--block {
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.appkit-progress__value {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #71717a;
-}
-
-.appkit-progress__track {
-  width: 100%;
-  border-radius: 9999px;
-  overflow: hidden;
-  background: #fafafa;
-}
-
-.appkit-progress__track--sm { height: 0.25rem; }
-.appkit-progress__track--md { height: 0.5rem; }
-.appkit-progress__track--lg { height: 0.75rem; }
-
-.appkit-progress__track--indeterminate {
-  position: relative;
-}
-
-.appkit-progress__bar {
-  height: 100%;
-  border-radius: 9999px;
-  transition: width 0.3s ease;
-}
-
-.appkit-progress__bar--primary { background: #509c02; }
-.appkit-progress__bar--success { background: #16a34a; }
-.appkit-progress__bar--warning { background: #ca8a04; }
-.appkit-progress__bar--error { background: #dc2626; }
-
-.appkit-progress__bar--indeterminate {
-  position: absolute;
-  inset: 0;
-  animation: appkit-progress-indeterminate 1.5s ease-in-out infinite;
-}
-
-@keyframes appkit-progress-indeterminate {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(350%); }
-}
-
-.dark .appkit-progress__label {
-  color: #fafafa;
-}
-
-.dark .appkit-progress__value {
-  color: #a1a1aa;
-}
-
-.dark .appkit-progress__track {
-  background: #0f172a;
-}
-
-.dark .appkit-progress__bar--primary { background: #e91e8c; }
-.dark .appkit-progress__bar--success { background: #22c55e; }
-.dark .appkit-progress__bar--warning { background: #eab308; }
-.dark .appkit-progress__bar--error { background: #ef4444; }