@mohasinac/appkit 2.2.0 → 2.3.0

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

@@ -1,114 +0,0 @@
-/* Toast — notification popup with variant colors and position */
-
-.appkit-toast-container {
-  pointer-events: none;
-  position: fixed;
-  inset-inline: 0;
-  top: 0;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  padding-top: 0.75rem;
-}
-@media (min-width: 768px) {
-  .appkit-toast-container {
-    inset-inline: auto;
-    padding: 0;
-    padding-top: 0;
-  }
-}
-
-/* Positions (md+) */
-.appkit-toast-container--top-right { }
-@media (min-width: 768px) {
-  .appkit-toast-container--top-right { top: 1rem; right: 1rem; }
-  .appkit-toast-container--top-left { top: 1rem; left: 1rem; }
-  .appkit-toast-container--bottom-right { bottom: 1rem; right: 1rem; top: auto; }
-  .appkit-toast-container--bottom-left { bottom: 1rem; left: 1rem; top: auto; }
-  .appkit-toast-container--top-center { top: 1rem; left: 50%; transform: translateX(-50%); }
-  .appkit-toast-container--bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); top: auto; }
-}
-
-/* Toast row */
-.appkit-toast {
-  pointer-events: auto;
-  display: flex;
-  width: 100%;
-  align-items: flex-start;
-  gap: 0.75rem;
-  border-radius: 0.75rem;
-  border: 1px solid;
-  padding: 0.75rem 1rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-@media (min-width: 768px) {
-  .appkit-toast {
-    min-width: 320px;
-    max-width: 28rem;
-  }
-}
-
-/* Variants */
-.appkit-toast--success {
-  border-color: #bbf7d0;
-  background: #f0fdf4;
-  color: #14532d;
-}
-.appkit-toast--error {
-  border-color: #fecaca;
-  background: #fef2f2;
-  color: #7f1d1d;
-}
-.appkit-toast--warning {
-  border-color: #fde68a;
-  background: #fffbeb;
-  color: #78350f;
-}
-.appkit-toast--info {
-  border-color: #bae6fd;
-  background: #f0f9ff;
-  color: #0c4a6e;
-}
-
-/* Icon bubble */
-.appkit-toast__icon {
-  display: flex;
-  height: 1.5rem;
-  width: 1.5rem;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  background: rgba(0, 0, 0, 0.05);
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-toast--success {
-    border-color: rgba(20, 83, 45, 0.6);
-    background: rgba(20, 83, 45, 0.7);
-    color: #dcfce7;
-  }
-  .appkit-toast--error {
-    border-color: rgba(127, 29, 29, 0.6);
-    background: rgba(127, 29, 29, 0.7);
-    color: #fecdd3;
-  }
-  .appkit-toast--warning {
-    border-color: rgba(120, 53, 15, 0.6);
-    background: rgba(120, 53, 15, 0.7);
-    color: #fef3c7;
-  }
-  .appkit-toast--info {
-    border-color: rgba(12, 74, 110, 0.6);
-    background: rgba(12, 74, 110, 0.7);
-    color: #e0f2fe;
-  }
-  .appkit-toast__icon {
-    background: rgba(255, 255, 255, 0.1);
-  }
-}

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

@@ -1,12 +0,0 @@
-import React from "react";
-export interface ToggleProps {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    label?: React.ReactNode;
-    size?: "sm" | "md" | "lg";
-    className?: string;
-    id?: string;
-}
-export declare function Toggle({ checked: checkedProp, defaultChecked, onChange, disabled, label, size, className, id, }: ToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Toggle.js

@@ -1,47 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Label, Span } from "./Typography";
-const UI_TOGGLE = {
-    base: "appkit-toggle",
-    sizes: {
-        sm: "appkit-toggle--sm",
-        md: "appkit-toggle--md",
-        lg: "appkit-toggle--lg",
-    },
-    track: "appkit-toggle__track",
-    trackOn: "appkit-toggle__track--on",
-    trackOff: "appkit-toggle__track--off",
-    trackDisabled: "appkit-toggle__track--disabled",
-    thumb: "appkit-toggle__thumb",
-    thumbOn: "appkit-toggle__thumb--on",
-    thumbOff: "appkit-toggle__thumb--off",
-};
-export function Toggle({ checked: checkedProp, defaultChecked = false, onChange, disabled = false, label, size = "md", className = "", id, }) {
-    const generatedId = React.useId();
-    const toggleId = id ?? generatedId;
-    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
-    const checked = checkedProp ?? internalChecked;
-    const handleToggle = () => {
-        if (disabled) {
-            return;
-        }
-        const nextValue = !checked;
-        if (checkedProp === undefined) {
-            setInternalChecked(nextValue);
-        }
-        onChange?.(nextValue);
-    };
-    return (_jsxs("div", { className: [UI_TOGGLE.base, UI_TOGGLE.sizes[size], className]
-            .filter(Boolean)
-            .join(" "), children: [_jsx("button", { id: toggleId, type: "button", role: "switch", "aria-checked": checked, "aria-labelledby": label ? `${toggleId}-label` : undefined, disabled: disabled, onClick: handleToggle, className: [
-                    UI_TOGGLE.track,
-                    checked ? UI_TOGGLE.trackOn : UI_TOGGLE.trackOff,
-                    disabled ? UI_TOGGLE.trackDisabled : "",
-                ]
-                    .filter(Boolean)
-                    .join(" "), children: _jsx(Span, { "aria-hidden": "true", className: [
-                        UI_TOGGLE.thumb,
-                        checked ? UI_TOGGLE.thumbOn : UI_TOGGLE.thumbOff,
-                    ].join(" ") }) }), label && (_jsx(Label, { id: `${toggleId}-label`, htmlFor: toggleId, className: disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", onClick: disabled ? undefined : handleToggle, children: label }))] }));
-}

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

@@ -1,107 +0,0 @@
-/* Toggle — switch control with size variants */
-
-.appkit-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.appkit-toggle__track {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  border-radius: 9999px;
-  padding: 0;
-  transition: background-color 0.2s ease;
-  cursor: pointer;
-  border: none;
-  background: none;
-}
-
-.appkit-toggle__track:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.3), 0 0 0 4px white;
-}
-
-.appkit-toggle__track--off {
-  background-color: #d4d4d8;
-}
-.appkit-toggle__track--on {
-  background-color: #65a30d;
-}
-
-.appkit-toggle__track--disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.appkit-toggle__thumb {
-  display: inline-block;
-  border-radius: 9999px;
-  background: white;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  transition: transform 0.2s ease;
-}
-
-/* Sizes */
-.appkit-toggle--sm .appkit-toggle__track {
-  height: 18px;
-  width: 2rem;
-}
-.appkit-toggle--sm .appkit-toggle__thumb {
-  height: 0.875rem;
-  width: 0.875rem;
-}
-.appkit-toggle--sm .appkit-toggle__thumb--off {
-  transform: translateX(2px);
-}
-.appkit-toggle--sm .appkit-toggle__thumb--on {
-  transform: translateX(14px);
-}
-
-.appkit-toggle--md .appkit-toggle__track {
-  height: 1.5rem;
-  width: 2.75rem;
-}
-.appkit-toggle--md .appkit-toggle__thumb {
-  height: 1.25rem;
-  width: 1.25rem;
-}
-.appkit-toggle--md .appkit-toggle__thumb--off {
-  transform: translateX(2px);
-}
-.appkit-toggle--md .appkit-toggle__thumb--on {
-  transform: translateX(1.25rem);
-}
-
-.appkit-toggle--lg .appkit-toggle__track {
-  height: 1.75rem;
-  width: 3.5rem;
-}
-.appkit-toggle--lg .appkit-toggle__thumb {
-  height: 1.5rem;
-  width: 1.5rem;
-}
-.appkit-toggle--lg .appkit-toggle__thumb--off {
-  transform: translateX(2px);
-}
-.appkit-toggle--lg .appkit-toggle__thumb--on {
-  transform: translateX(1.75rem);
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-toggle__track:focus-visible {
-    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px #020617;
-  }
-  .appkit-toggle__track--off {
-    background-color: #334155;
-  }
-  .appkit-toggle__track--on {
-    background-color: #ec4899;
-  }
-  .appkit-toggle__thumb {
-    background: #020617;
-  }
-}

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

@@ -1,34 +0,0 @@
-import "client-only";
-import React from "react";
-export interface TooltipProps {
-    /** Text shown in the tooltip bubble */
-    label: string;
-    /** Single child element — must accept mouse/focus events */
-    children: React.ReactElement;
-    /** Which side to render the tooltip on (default: "top") */
-    side?: "top" | "bottom" | "left" | "right";
-    /** Delay before showing tooltip in ms (default: 400) */
-    delay?: number;
-    /**
-     * Enable long-press on touch devices to show a bottom-sheet tooltip panel.
-     * Designed for mobile where hover is not available. Default: true.
-     */
-    mobileSheet?: boolean;
-    /**
-     * Duration in ms to hold touch before the mobile sheet opens. Default: 500.
-     */
-    longPressDelay?: number;
-}
-/**
- * Tooltip wrapper. Injects `aria-label` into the child if not already present,
- * and shows a visible label bubble on hover/focus (desktop) or long-press
- * (mobile — opens an accessible bottom-sheet panel).
- *
- * @example
- * ```tsx
- * <Tooltip label="Add to wishlist">
- *   <IconButton aria-label="Add to wishlist" icon={<HeartIcon />} onClick={handleWishlist} />
- * </Tooltip>
- * ```
- */
-export declare function Tooltip({ label, children, side, delay, mobileSheet, longPressDelay, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Tooltip.js

@@ -1,110 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
-import React, { useState, useEffect, useRef, useCallback } from "react";
-const POSITION = {
-    top: "appkit-tooltip__bubble--top",
-    bottom: "appkit-tooltip__bubble--bottom",
-    left: "appkit-tooltip__bubble--left",
-    right: "appkit-tooltip__bubble--right",
-};
-/**
- * Tooltip wrapper. Injects `aria-label` into the child if not already present,
- * and shows a visible label bubble on hover/focus (desktop) or long-press
- * (mobile — opens an accessible bottom-sheet panel).
- *
- * @example
- * ```tsx
- * <Tooltip label="Add to wishlist">
- *   <IconButton aria-label="Add to wishlist" icon={<HeartIcon />} onClick={handleWishlist} />
- * </Tooltip>
- * ```
- */
-export function Tooltip({ label, children, side = "top", delay = 400, mobileSheet = true, longPressDelay = 500, }) {
-    const [visible, setVisible] = useState(false);
-    const [mobileOpen, setMobileOpen] = useState(false);
-    const timeoutRef = useRef(null);
-    const longPressRef = useRef(null);
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current !== null)
-                clearTimeout(timeoutRef.current);
-            if (longPressRef.current !== null)
-                clearTimeout(longPressRef.current);
-        };
-    }, []);
-    const showTooltip = () => {
-        timeoutRef.current = setTimeout(() => setVisible(true), delay);
-    };
-    const hideTooltip = () => {
-        if (timeoutRef.current !== null)
-            clearTimeout(timeoutRef.current);
-        setVisible(false);
-    };
-    // ── Long-press handlers for touch devices ──────────────────────────────────
-    const handleTouchStart = useCallback(() => {
-        if (!mobileSheet)
-            return;
-        longPressRef.current = setTimeout(() => {
-            setMobileOpen(true);
-        }, longPressDelay);
-    }, [mobileSheet, longPressDelay]);
-    const handleTouchEnd = useCallback(() => {
-        if (longPressRef.current !== null) {
-            clearTimeout(longPressRef.current);
-            longPressRef.current = null;
-        }
-    }, []);
-    // Close mobile sheet on Escape
-    useEffect(() => {
-        if (!mobileOpen)
-            return;
-        const handler = (e) => {
-            if (e.key === "Escape")
-                setMobileOpen(false);
-        };
-        document.addEventListener("keydown", handler);
-        return () => document.removeEventListener("keydown", handler);
-    }, [mobileOpen]);
-    // Clone child to inject aria-label + mouse/focus/touch handlers
-    const existingProps = children.props;
-    const child = React.cloneElement(children, {
-        "aria-label": existingProps["aria-label"] ?? label,
-        onMouseEnter: (e) => {
-            if (typeof existingProps.onMouseEnter === "function")
-                existingProps.onMouseEnter(e);
-            showTooltip();
-        },
-        onMouseLeave: (e) => {
-            if (typeof existingProps.onMouseLeave === "function")
-                existingProps.onMouseLeave(e);
-            hideTooltip();
-        },
-        onFocus: (e) => {
-            if (typeof existingProps.onFocus === "function")
-                existingProps.onFocus(e);
-            setVisible(true);
-        },
-        onBlur: (e) => {
-            if (typeof existingProps.onBlur === "function")
-                existingProps.onBlur(e);
-            hideTooltip();
-        },
-        onTouchStart: (e) => {
-            if (typeof existingProps.onTouchStart === "function")
-                existingProps.onTouchStart(e);
-            handleTouchStart();
-        },
-        onTouchEnd: (e) => {
-            if (typeof existingProps.onTouchEnd === "function")
-                existingProps.onTouchEnd(e);
-            handleTouchEnd();
-        },
-        onTouchCancel: (e) => {
-            if (typeof existingProps.onTouchCancel === "function")
-                existingProps.onTouchCancel(e);
-            handleTouchEnd();
-        },
-    });
-    return (_jsxs("span", { className: "appkit-tooltip", children: [child, visible && (_jsx("span", { role: "tooltip", className: `appkit-tooltip__bubble ${POSITION[side]}`, children: label })), mobileOpen && (_jsxs("span", { role: "presentation", className: "appkit-tooltip__mobile-sheet", onClick: () => setMobileOpen(false), children: [_jsx("span", { className: "appkit-tooltip__mobile-backdrop", "aria-hidden": "true" }), _jsxs("span", { role: "tooltip", "aria-label": label, className: "appkit-tooltip__mobile-panel", children: [_jsx("span", { className: "appkit-tooltip__mobile-drag", "aria-hidden": "true" }), _jsx("span", { className: "appkit-tooltip__mobile-text", children: label })] })] }))] }));
-}

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

@@ -1,114 +0,0 @@
-.appkit-tooltip {
-  position: relative;
-  display: inline-flex;
-}
-
-.appkit-tooltip__bubble {
-  position: absolute;
-  z-index: 50;
-  pointer-events: none;
-  white-space: nowrap;
-  border-radius: 0.375rem;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  background: #18181b;
-  color: #ffffff;
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
-}
-
-.dark .appkit-tooltip__bubble {
-  background: #f4f4f5;
-  color: #18181b;
-}
-
-.appkit-tooltip__bubble--top {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 0.5rem;
-}
-
-.appkit-tooltip__bubble--bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 0.5rem;
-}
-
-.appkit-tooltip__bubble--left {
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-right: 0.5rem;
-}
-
-.appkit-tooltip__bubble--right {
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 0.5rem;
-}
-
-.appkit-tooltip__mobile-sheet {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-}
-
-@media (min-width: 768px) {
-  .appkit-tooltip__mobile-sheet {
-    display: none;
-  }
-}
-
-.appkit-tooltip__mobile-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-
-.appkit-tooltip__mobile-panel {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  border-top: 1px solid #e4e4e7;
-  border-radius: 1rem 1rem 0 0;
-  background: #ffffff;
-  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
-  padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
-}
-
-.dark .appkit-tooltip__mobile-panel {
-  border-top-color: #27272a;
-  background: #18181b;
-}
-
-.appkit-tooltip__mobile-drag {
-  width: 2.5rem;
-  height: 0.25rem;
-  border-radius: 9999px;
-  background: #d4d4d8;
-  margin-bottom: 0.5rem;
-}
-
-.dark .appkit-tooltip__mobile-drag {
-  background: #52525b;
-}
-
-.appkit-tooltip__mobile-text {
-  text-align: center;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #27272a;
-}
-
-.dark .appkit-tooltip__mobile-text {
-  color: #f4f4f5;
-}

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

@@ -1,50 +0,0 @@
-import React from "react";
-interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    variant?: "primary" | "secondary" | "muted" | "none";
-    children: React.ReactNode;
-}
-export declare function Heading({ level, variant, className, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
-interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
-    variant?: "primary" | "secondary" | "muted" | "error" | "success" | "none";
-    size?: "xs" | "sm" | "base" | "lg" | "xl";
-    weight?: "normal" | "medium" | "semibold" | "bold";
-    /** Override the rendered element. Defaults to `p`. */
-    as?: React.ElementType;
-    children: React.ReactNode;
-}
-export declare function Text({ variant, size, weight, className, as: Tag, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
-interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-    required?: boolean;
-    children: React.ReactNode;
-}
-export declare function Label({ required, className, children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
-interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /** "default" — muted grey (default); "accent" — indigo, semibold; "inverse" — light indigo for use on dark indigo backgrounds */
-    variant?: "default" | "accent" | "inverse";
-    children: React.ReactNode;
-}
-export declare function Caption({ variant, className, children, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Inline wrapper for styled text fragments. Use instead of a raw `<span>`.
- * When `variant` is "inherit" (default) the element carries no colour classes
- * so it blends with its parent — perfect for purely structural/CSS wrappers.
- *
- * @example
- * ```tsx
- * <Span className="bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">
- *   Highlighted
- * </Span>
- *
- * <Span variant="error" weight="semibold">Required</Span>
- * ```
- */
-interface SpanProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /** Colour variant. "inherit" (default) applies no colour class. */
-    variant?: "inherit" | "primary" | "secondary" | "muted" | "error" | "success" | "accent";
-    size?: "xs" | "sm" | "base" | "lg" | "xl";
-    weight?: "normal" | "medium" | "semibold" | "bold";
-    children?: React.ReactNode;
-}
-export declare function Span({ variant, size, weight, className, children, ...props }: SpanProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/ui/components/Typography.js

@@ -1,103 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TYPOGRAPHY = {
-    headingLevel: {
-        1: "appkit-heading--h1",
-        2: "appkit-heading--h2",
-        3: "appkit-heading--h3",
-        4: "appkit-heading--h4",
-        5: "appkit-heading--h5",
-        6: "appkit-heading--h6",
-    },
-    textSize: {
-        xs: "appkit-text--xs",
-        sm: "appkit-text--sm",
-        base: "appkit-text--base",
-        lg: "appkit-text--lg",
-        xl: "appkit-text--xl",
-    },
-    textWeight: {
-        normal: "appkit-font--normal",
-        medium: "appkit-font--medium",
-        semibold: "appkit-font--semibold",
-        bold: "appkit-font--bold",
-    },
-    colorVariant: {
-        primary: "appkit-color--primary",
-        secondary: "appkit-color--secondary",
-        muted: "appkit-color--muted",
-        error: "appkit-color--error",
-        success: "appkit-color--success",
-        none: "",
-        inherit: "",
-        accent: "appkit-color--accent",
-    },
-};
-export function Heading({ level = 1, variant = "primary", className = "", children, ...props }) {
-    const Tag = `h${level}`;
-    return (_jsx(Tag, { className: [
-            "appkit-heading",
-            TYPOGRAPHY.headingLevel[level],
-            TYPOGRAPHY.colorVariant[variant],
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), ...props, children: children }));
-}
-export function Text({ variant = "primary", size = "base", weight = "normal", className = "", as: Tag = "p", children, ...props }) {
-    return (_jsx(Tag, { className: [
-            "appkit-text",
-            TYPOGRAPHY.textSize[size],
-            TYPOGRAPHY.textWeight[weight],
-            TYPOGRAPHY.colorVariant[variant],
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), ...props, children: children }));
-}
-export function Label({ required, className = "", children, ...props }) {
-    return (_jsxs("label", { className: ["appkit-label", className].filter(Boolean).join(" "), ...props, children: [children, required && _jsx("span", { className: "appkit-label__required", children: "*" })] }));
-}
-export function Caption({ variant = "default", className = "", children, ...props }) {
-    const variantClasses = {
-        default: "appkit-caption--default",
-        accent: "appkit-caption--accent",
-        inverse: "appkit-caption--inverse",
-    };
-    return (_jsx("span", { className: ["appkit-caption", variantClasses[variant], className]
-            .filter(Boolean)
-            .join(" "), ...props, children: children }));
-}
-export function Span({ variant = "inherit", size, weight, className = "", children, ...props }) {
-    const variantClasses = {
-        inherit: "",
-        primary: "appkit-color--primary",
-        secondary: "appkit-color--secondary",
-        muted: "appkit-color--muted",
-        error: "appkit-color--error",
-        success: "appkit-color--success",
-        accent: "appkit-color--accent",
-    };
-    const sizeClasses = {
-        xs: "appkit-text--xs",
-        sm: "appkit-text--sm",
-        base: "appkit-text--base",
-        lg: "appkit-text--lg",
-        xl: "appkit-text--xl",
-    };
-    const weightClasses = {
-        normal: "appkit-font--normal",
-        medium: "appkit-font--medium",
-        semibold: "appkit-font--semibold",
-        bold: "appkit-font--bold",
-    };
-    const classes = [
-        "appkit-span",
-        size ? sizeClasses[size] : "",
-        weight ? weightClasses[weight] : "",
-        variantClasses[variant],
-        className,
-    ]
-        .filter(Boolean)
-        .join(" ");
-    return (_jsx("span", { className: classes, ...props, children: children }));
-}