flysoft-react-ui 0.1.2 → 0.1.3

package/dist/App.d.ts

@@ -0,0 +1,4 @@
+import "./styles.css";
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;
+//# sourceMappingURL=App.d.ts.map

package/dist/App.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAQA,OAAO,cAAc,CAAC;AAEtB,iBAAS,GAAG,4CA2MX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, Card, Badge, ThemeProvider, ThemeSwitcher, } from "./index";
+import "./styles.css";
+function App() {
+    return (_jsx(ThemeProvider, { initialTheme: "light", children: _jsx("div", { className: "min-h-screen p-8", style: { backgroundColor: "var(--flysoft-bg-secondary)" }, children: _jsxs("div", { className: "max-w-4xl mx-auto", children: [_jsxs("div", { className: "text-center mb-12", children: [_jsx("h1", { className: "text-4xl font-bold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Flysoft React UI" }), _jsx("p", { className: "text-xl", style: { color: "var(--flysoft-text-secondary)" }, children: "Biblioteca de componentes React moderna con Tailwind CSS, FontAwesome y sistema de temas personalizable" })] }), _jsx("div", { className: "mb-8", children: _jsx(ThemeSwitcher, {}) }), _jsx(Card, { title: "Botones", subtitle: "Diferentes variantes y tama\u00F1os de botones", className: "mb-8", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { variant: "primary", icon: "fa-heart", children: "Bot\u00F3n Primario" }), _jsx(Button, { variant: "outline", icon: "fa-download", children: "Bot\u00F3n Outline" }), _jsx(Button, { variant: "ghost", icon: "fa-edit", children: "Bot\u00F3n Ghost" })] }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { size: "sm", icon: "fa-plus", children: "Peque\u00F1o" }), _jsx(Button, { size: "md", icon: "fa-check", children: "Mediano" }), _jsx(Button, { size: "lg", icon: "fa-arrow-right", children: "Grande" })] }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { loading: true, children: "Cargando..." }), _jsx(Button, { disabled: true, children: "Deshabilitado" }), _jsx(Button, { icon: "fa-arrow-right", iconPosition: "right", children: "Con Icono Derecha" })] })] }) }), _jsx(Card, { title: "Campos de Entrada", subtitle: "Diferentes tipos de inputs con iconos", className: "mb-8", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Input, { label: "Nombre completo", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "tu@email.com", icon: "fa-envelope" }), _jsx(Input, { label: "Contrase\u00F1a", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-lock" }), _jsx(Input, { label: "B\u00FAsqueda", placeholder: "Buscar...", icon: "fa-search", iconPosition: "right" }), _jsx(Input, { label: "Con error", placeholder: "Campo con error", error: "Este campo es requerido", icon: "fa-exclamation-triangle" })] }) }), _jsx(Card, { title: "Badges", subtitle: "Diferentes variantes de badges", className: "mb-8", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { variant: "primary", children: "Primary" }), _jsx(Badge, { variant: "secondary", children: "Secondary" }), _jsx(Badge, { variant: "success", children: "Success" }), _jsx(Badge, { variant: "warning", children: "Warning" }), _jsx(Badge, { variant: "danger", children: "Danger" }), _jsx(Badge, { variant: "info", children: "Info" })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { size: "sm", children: "Small" }), _jsx(Badge, { size: "md", children: "Medium" }), _jsx(Badge, { size: "lg", children: "Large" })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { rounded: true, children: "Rounded" }), _jsx(Badge, { variant: "success", rounded: true, children: "Success Rounded" }), _jsx(Badge, { variant: "warning", rounded: true, children: "Warning Rounded" })] })] }) }), _jsx(Card, { title: "Tarjetas", subtitle: "Diferentes variantes de tarjetas", className: "mb-8", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsx(Card, { title: "Tarjeta Simple", subtitle: "Sin acciones ni footer", variant: "default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta simple con contenido b\u00E1sico." }) }), _jsx(Card, { title: "Con Acciones", subtitle: "Incluye botones en el header", variant: "elevated", headerActions: _jsx(Button, { size: "sm", variant: "outline", icon: "fa-edit", children: "Editar" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Tarjeta con botones de acci\u00F3n en el header." }) }), _jsx(Card, { title: "Con Footer", subtitle: "Incluye secci\u00F3n de footer", variant: "outlined", footer: _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", style: { color: "var(--flysoft-text-muted)" }, children: "\u00DAltima actualizaci\u00F3n: hoy" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-save", children: "Guardar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Tarjeta con footer personalizado y botones." }) })] }) })] }) }) }));
+}
+export default App;

package/dist/components/ThemeSwitcher.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const ThemeSwitcher: React.FC;
+//# sourceMappingURL=ThemeSwitcher.d.ts.map

package/dist/components/ThemeSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../src/components/ThemeSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAmEjC,CAAC"}

package/dist/components/ThemeSwitcher.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useTheme } from "../contexts/ThemeContext";
+import { Button } from "./form-controls/Button";
+import { Card } from "./layout/Card";
+export const ThemeSwitcher = () => {
+    const { theme, setTheme, currentThemeName, availableThemes, resetToDefault, isDark, } = useTheme();
+    return (_jsxs(Card, { className: "p-6 max-w-md mx-auto", children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Theme Switcher" }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: availableThemes.map((themeName) => (_jsx(Button, { variant: currentThemeName === themeName ? "primary" : "ghost", size: "sm", onClick: () => setTheme(themeName), children: themeName }, themeName))) }), _jsx(Button, { variant: "outline", size: "sm", onClick: resetToDefault, className: "w-full", children: "Reset to Default" }), _jsxs("div", { className: "text-sm space-y-2", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("p", { children: [_jsx("strong", { children: "Current Theme:" }), " ", currentThemeName] }), _jsxs("p", { children: [_jsx("strong", { children: "Mode:" }), " ", isDark ? "Dark" : "Light"] }), _jsxs("p", { children: [_jsx("strong", { children: "Primary Color:" }), " ", theme.colors.primary] })] }), _jsx("div", { className: "w-full h-8 rounded border-2", style: {
+                            backgroundColor: theme.colors.primary,
+                            borderColor: theme.colors.borderDefault,
+                        } })] })] }));
+};

package/dist/components/form-controls/Button.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "outline" | "ghost";
+    size?: "sm" | "md" | "lg";
+    icon?: string;
+    iconPosition?: "left" | "right";
+    loading?: boolean;
+    children: React.ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/form-controls/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgExC,CAAC"}

package/dist/components/form-controls/Button.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+export const Button = ({ variant = "primary", size = "md", icon, iconPosition = "left", loading = false, children, className = "", disabled, ...props }) => {
+    const baseClasses = `
+    inline-flex items-center justify-center font-medium rounded-sm transition-colors 
+    cursor-pointer
+    disabled:opacity-50 disabled:cursor-not-allowed
+    font-[var(--font-default)]
+  `;
+    const variantClasses = {
+        primary: `
+      bg-[var(--color-primary)] text-[var(--color-primary-contrast)] 
+      hover:bg-[var(--color-primary-dark)] focus:ring-[var(--color-primary)]
+    `,
+        outline: `
+      border border-[var(--color-primary)] text-[var(--color-primary)] 
+      hover:bg-[var(--color-bg-secondary)] focus:ring-[var(--color-primary)]
+    `,
+        ghost: `
+      text-[var(--color-primary)] hover:bg-[var(--color-bg-secondary)] 
+      focus:ring-[var(--color-primary)]
+    `,
+    };
+    const sizeClasses = {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2 text-base",
+        lg: "px-6 py-3 text-lg",
+    };
+    const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
+    const renderIcon = () => {
+        if (!icon)
+            return null;
+        const iconClasses = size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6";
+        return (_jsx("i", { className: `fa ${icon} ${iconClasses} ${iconPosition === "right" ? "ml-2" : "mr-2"}` }));
+    };
+    return (_jsxs("button", { className: classes, disabled: disabled || loading, ...props, children: [loading && _jsx("i", { className: "fa fa-spinner fa-spin mr-2" }), icon && iconPosition === "left" && !loading && renderIcon(), children, icon && iconPosition === "right" && !loading && renderIcon()] }));
+};

package/dist/components/form-controls/Input.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label?: string;
+    error?: string;
+    icon?: string;
+    iconPosition?: "left" | "right";
+    size?: "sm" | "md" | "lg";
+    children?: React.ReactNode;
+}
+export declare const Input: React.FC<InputProps>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/form-controls/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0EtC,CAAC"}

package/dist/components/form-controls/Input.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+export const Input = ({ label, error, icon, iconPosition = "left", size = "md", className = "", id, ...props }) => {
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+    const baseClasses = `
+    w-full border rounded-lg transition-colors focus:outline-none focus:ring-2 
+    disabled:opacity-50 disabled:cursor-not-allowed
+    font-[var(--font-default)] text-[var(--color-text-primary)]
+    bg-[var(--color-bg-default)]
+  `;
+    const sizeClasses = {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2 text-base",
+        lg: "px-6 py-3 text-lg",
+    };
+    const stateClasses = error
+        ? `border-[var(--color-border-error)] focus:border-[var(--color-border-error)] focus:ring-[var(--color-border-error)]`
+        : `border-[var(--color-border-default)] focus:border-[var(--color-border-focus)] focus:ring-[var(--color-border-focus)]`;
+    const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${className}`;
+    const iconClasses = size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6";
+    const renderIcon = () => {
+        if (!icon)
+            return null;
+        return (_jsx("i", { className: `fa ${icon} ${iconClasses} text-[var(--color-text-muted)] absolute top-1/2 transform -translate-y-1/2 ${iconPosition === "left" ? "left-3" : "right-3"}` }));
+    };
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-[var(--color-text-primary)] mb-1 font-[var(--font-default)]", children: label })), _jsxs("div", { className: "relative", children: [icon && iconPosition === "left" && renderIcon(), _jsx("input", { id: inputId, className: `${inputClasses} ${icon && iconPosition === "left" ? "pl-10" : ""} ${icon && iconPosition === "right" ? "pr-10" : ""}`, ...props }), icon && iconPosition === "right" && renderIcon()] }), error && (_jsx("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
+};

package/dist/components/form-controls/index.d.ts

@@ -0,0 +1,5 @@
+export { Button } from "./Button";
+export { Input } from "./Input";
+export type { ButtonProps } from "./Button";
+export type { InputProps } from "./Input";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form-controls/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/form-controls/index.js

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export { Input } from "./Input";

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./form-controls";
+export * from "./layout";
+export * from "./utils";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAC;AAGhC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,6 @@
+// Form Controls
+export * from "./form-controls";
+// Layout Components
+export * from "./layout";
+// Utility Components
+export * from "./utils";

package/dist/components/layout/Card.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface CardProps {
+    title?: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    className?: string;
+    headerActions?: React.ReactNode;
+    footer?: React.ReactNode;
+    variant?: "default" | "elevated" | "outlined";
+}
+export declare const Card: React.FC<CardProps>;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/layout/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;CAC/C;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAuDpC,CAAC"}

package/dist/components/layout/Card.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+export const Card = ({ title, subtitle, children, className = "", headerActions, footer, variant = "default", }) => {
+    const baseClasses = `
+    bg-[var(--color-bg-default)] rounded-lg border
+    font-[var(--font-default)]
+  `;
+    const variantClasses = {
+        default: `border-[var(--color-border-default)]`,
+        elevated: `border-[var(--color-border-default)] shadow-[var(--shadow-lg)]`,
+        outlined: `border-[var(--color-gray-300)]`,
+    };
+    const classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
+    return (_jsxs("div", { className: classes, children: [(title || subtitle || headerActions) && (_jsx("div", { className: "px-6 py-4 border-b border-[var(--color-border-default)]", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [title && (_jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title })), subtitle && (_jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: subtitle }))] }), headerActions && (_jsx("div", { className: "flex items-center space-x-2", children: headerActions }))] }) })), _jsx("div", { className: "px-6 py-4", children: children }), footer && (_jsx("div", { className: "px-6 py-4 border-t border-[var(--color-border-default)] bg-[var(--color-bg-secondary)] rounded-b-lg", children: footer }))] }));
+};

package/dist/components/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { Card } from "./Card";
+export type { CardProps } from "./Card";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/layout/index.js

@@ -0,0 +1 @@
+export { Card } from "./Card";

package/dist/components/utils/Badge.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface BadgeProps {
+    children: React.ReactNode;
+    variant?: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+    size?: "sm" | "md" | "lg";
+    rounded?: boolean;
+    className?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/utils/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAgDtC,CAAC"}

package/dist/components/utils/Badge.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+export const Badge = ({ children, variant = "primary", size = "md", rounded = false, className = "", }) => {
+    const baseClasses = "inline-flex items-center font-medium font-[var(--font-default)]";
+    const variantClasses = {
+        primary: `
+      bg-[var(--color-primary-light)] text-[var(--color-primary-dark)]
+      hover:bg-[var(--color-primary)] hover:text-[var(--color-primary-contrast)]
+    `,
+        secondary: `
+      bg-[var(--color-secondary-light)] text-[var(--color-secondary-dark)]
+      hover:bg-[var(--color-secondary)] hover:text-[var(--color-secondary-contrast)]
+    `,
+        success: `
+      bg-[var(--color-success-light)] text-[var(--color-success-dark)]
+      hover:bg-[var(--color-success)] hover:text-[var(--color-success-contrast)]
+    `,
+        warning: `
+      bg-[var(--color-warning-light)] text-[var(--color-warning-dark)]
+      hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-contrast)]
+    `,
+        danger: `
+      bg-[var(--color-danger-light)] text-[var(--color-danger-dark)]
+      hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)]
+    `,
+        info: `
+      bg-[var(--color-info-light)] text-[var(--color-info-dark)]
+      hover:bg-[var(--color-info)] hover:text-[var(--color-info-contrast)]
+    `,
+    };
+    const sizeClasses = {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-0.5 text-sm",
+        lg: "px-3 py-1 text-base",
+    };
+    const roundedClasses = rounded ? "rounded-full" : "rounded-md";
+    const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${roundedClasses} ${className}`;
+    return _jsx("span", { className: classes, children: children });
+};

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

@@ -0,0 +1,3 @@
+export { Badge } from "./Badge";
+export type { BadgeProps } from "./Badge";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/utils/index.js

@@ -0,0 +1 @@
+export { Badge } from "./Badge";

package/dist/contexts/ThemeContext.d.ts

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from "react";
+import type { Theme, ThemeContextType } from "./types";
+interface ThemeProviderProps {
+    children: ReactNode;
+    initialTheme?: string | Theme;
+    storageKey?: string;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const useTheme: () => ThemeContextType;
+export declare const useThemeContext: () => boolean;
+export {};
+//# sourceMappingURL=ThemeContext.d.ts.map

package/dist/contexts/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgItD,CAAC;AAGF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAGF,eAAO,MAAM,eAAe,eAG3B,CAAC"}

package/dist/contexts/ThemeContext.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect, useState, } from "react";
+import { themes, defaultTheme } from "./presets";
+const ThemeContext = createContext(undefined);
+export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "flysoft-theme", }) => {
+    const [currentTheme, setCurrentTheme] = useState(() => {
+        // Try to get theme from localStorage
+        if (typeof window !== "undefined") {
+            const savedTheme = localStorage.getItem(storageKey);
+            if (savedTheme) {
+                if (themes[savedTheme]) {
+                    return themes[savedTheme];
+                }
+                // Try to parse as custom theme
+                try {
+                    const parsed = JSON.parse(savedTheme);
+                    if (parsed.name && parsed.colors) {
+                        return parsed;
+                    }
+                }
+                catch {
+                    // Invalid JSON, fallback to default
+                }
+            }
+        }
+        // Handle initialTheme prop
+        if (typeof initialTheme === "string") {
+            return themes[initialTheme] || defaultTheme;
+        }
+        return initialTheme;
+    });
+    const [currentThemeName, setCurrentThemeName] = useState(currentTheme.name);
+    // Function to apply theme to CSS variables
+    const applyThemeToCSS = (theme) => {
+        if (typeof document === "undefined")
+            return;
+        const root = document.documentElement;
+        // Apply color variables
+        Object.entries(theme.colors).forEach(([key, value]) => {
+            const cssVarName = `--flysoft-${key
+                .replace(/([A-Z])/g, "-$1")
+                .toLowerCase()}`;
+            root.style.setProperty(cssVarName, value);
+        });
+        // Apply shadow variables
+        Object.entries(theme.shadows).forEach(([key, value]) => {
+            const cssVarName = `--flysoft-shadow-${key}`;
+            root.style.setProperty(cssVarName, value);
+        });
+        // Apply radius variables
+        Object.entries(theme.radius).forEach(([key, value]) => {
+            const cssVarName = `--flysoft-radius-${key}`;
+            root.style.setProperty(cssVarName, value);
+        });
+        // Apply spacing variables
+        Object.entries(theme.spacing).forEach(([key, value]) => {
+            const cssVarName = `--flysoft-spacing-${key}`;
+            root.style.setProperty(cssVarName, value);
+        });
+        // Apply font variables
+        Object.entries(theme.fonts).forEach(([key, value]) => {
+            const cssVarName = `--flysoft-font-${key}`;
+            root.style.setProperty(cssVarName, value);
+        });
+        // Set theme name as data attribute for CSS targeting
+        root.setAttribute("data-theme", theme.name);
+    };
+    // Function to set theme
+    const setTheme = (theme) => {
+        let newTheme;
+        if (typeof theme === "string") {
+            if (themes[theme]) {
+                newTheme = themes[theme];
+            }
+            else {
+                console.warn(`Theme "${theme}" not found, falling back to default`);
+                newTheme = defaultTheme;
+            }
+        }
+        else {
+            newTheme = theme;
+        }
+        setCurrentTheme(newTheme);
+        setCurrentThemeName(newTheme.name);
+        // Save to localStorage
+        if (typeof window !== "undefined") {
+            localStorage.setItem(storageKey, JSON.stringify(newTheme));
+        }
+        // Apply to CSS
+        applyThemeToCSS(newTheme);
+    };
+    // Function to reset to default theme
+    const resetToDefault = () => {
+        setTheme(defaultTheme);
+    };
+    // Apply theme on mount and when theme changes
+    useEffect(() => {
+        applyThemeToCSS(currentTheme);
+    }, [currentTheme]);
+    // Check if current theme is dark
+    const isDark = currentTheme.name === "dark";
+    const value = {
+        theme: currentTheme,
+        setTheme,
+        currentThemeName,
+        availableThemes: Object.keys(themes),
+        resetToDefault,
+        isDark,
+    };
+    return (_jsx(ThemeContext.Provider, { value: value, children: children }));
+};
+// Hook to use theme context
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+};
+// Hook to check if theme context is available
+export const useThemeContext = () => {
+    const context = useContext(ThemeContext);
+    return context !== undefined;
+};

package/dist/contexts/index.d.ts

@@ -0,0 +1,5 @@
+export { ThemeProvider, useTheme, useThemeContext } from "./ThemeContext";
+export { useThemeOverride, useTemporaryOverride, } from "../hooks/useThemeOverride";
+export type { Theme, ThemeContextType, ThemeOverride } from "./types";
+export { lightTheme, darkTheme, blueTheme, greenTheme, defaultTheme, themes, } from "./presets";
+//# sourceMappingURL=index.d.ts.map

package/dist/contexts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGtE,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,MAAM,GACP,MAAM,WAAW,CAAC"}

package/dist/contexts/index.js

@@ -0,0 +1,5 @@
+// Theme system exports
+export { ThemeProvider, useTheme, useThemeContext } from "./ThemeContext";
+export { useThemeOverride, useTemporaryOverride, } from "../hooks/useThemeOverride";
+// Preset themes
+export { lightTheme, darkTheme, blueTheme, greenTheme, defaultTheme, themes, } from "./presets";

package/dist/contexts/presets.d.ts

@@ -0,0 +1,8 @@
+import type { Theme } from "./types";
+export declare const lightTheme: Theme;
+export declare const darkTheme: Theme;
+export declare const blueTheme: Theme;
+export declare const greenTheme: Theme;
+export declare const defaultTheme: Theme;
+export declare const themes: Record<string, Theme>;
+//# sourceMappingURL=presets.d.ts.map

package/dist/contexts/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/contexts/presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,UAAU,EAAE,KAuExB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAuEvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAuEvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAuExB,CAAC;AAEF,eAAO,MAAM,YAAY,OAAa,CAAC;AAEvC,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAKxC,CAAC"}