flysoft-react-ui 0.1.16 → 0.2.1

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

@@ -5,6 +5,9 @@ export interface BadgeProps {
     size?: "sm" | "md" | "lg";
     rounded?: boolean;
     className?: string;
+    icon?: string;
+    iconPosition?: "left" | "right";
+    iconLabel?: string;
 }
 export declare const Badge: React.FC<BadgeProps>;
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -1 +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"}
+{"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;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyEtC,CAAC"}

package/dist/components/utils/Badge.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-export const Badge = ({ children, variant = "primary", size = "md", rounded = false, className = "", }) => {
+export const Badge = ({ children, variant = "primary", size = "md", rounded = false, className = "", icon, iconPosition = "left", iconLabel, }) => {
     const baseClasses = "inline-flex items-center font-medium font-[var(--font-default)]";
     const variantClasses = {
         primary: `
@@ -34,6 +34,13 @@ export const Badge = ({ children, variant = "primary", size = "md", rounded = fa
         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 });
+    const gapClasses = icon ? "gap-2" : "";
+    const iconSizeClasses = size === "sm" ? "text-xs" : size === "md" ? "text-sm" : "text-base";
+    const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${roundedClasses} ${gapClasses} ${className}`;
+    const renderIcon = () => {
+        if (!icon)
+            return null;
+        return (_jsx("i", { className: `fa ${icon} ${iconSizeClasses}`, "aria-hidden": !iconLabel, "aria-label": iconLabel }));
+    };
+    return (_jsxs("span", { className: classes, children: [icon && iconPosition === "left" && renderIcon(), _jsx("span", { children: children }), icon && iconPosition === "right" && renderIcon()] }));
 };

package/dist/docs/BadgeDocs.d.ts

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

package/dist/docs/BadgeDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeDocs.d.ts","sourceRoot":"","sources":["../../src/docs/BadgeDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAiFtB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/docs/BadgeDocs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Badge, Card } from "../index";
+const BadgeDocs = () => {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Badge - Variantes y Estados", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", children: [_jsx(Badge, { variant: "primary", children: "Primario" }), _jsx(Badge, { variant: "secondary", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation-triangle", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times-circle", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info-circle", children: "Informaci\u00F3n" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Badge, { size: "sm", icon: "fa-circle", iconLabel: "Indicador peque\u00F1o", children: "Peque\u00F1o" }), _jsx(Badge, { size: "md", icon: "fa-circle", children: "Mediano" }), _jsx(Badge, { size: "lg", icon: "fa-circle", children: "Grande" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y dise\u00F1o" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { icon: "fa-bell", rounded: true, children: "Notificaci\u00F3n" }), _jsx(Badge, { icon: "fa-arrow-right", iconPosition: "right", children: "Acci\u00F3n" }), _jsx(Badge, { icon: "fa-shield-alt", iconLabel: "Estado protegido", children: "Accesible" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "icon" }), " con clases FontAwesome 5 (ej.", " ", _jsx("code", { children: "fa-check" }), ") y combina ", _jsx("code", { children: "rounded" }), " para badges tipo pills."] })] })] }) }) }));
+};
+export default BadgeDocs;

package/dist/docs/DocsMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAmBpB,CAAC"}
+{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAsBpB,CAAC"}

package/dist/docs/DocsMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
 export const DocsMenu = () => {
-    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/badge", children: "Badge" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) })] }) }));
 };

package/dist/docs/DocsRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAU9B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAW9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -5,7 +5,8 @@ import ButtonDocs from "./ButtonDocs";
 import CardDocs from "./CardDocs";
 import InputDocs from "./InputDocs";
 import ThemeSwitcherDocs from "./ThemeSwitcherDocs";
+import BadgeDocs from "./BadgeDocs";
 export const DocsRouter = () => {
-    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) })] }));
 };
 export default DocsRouter;