vicdev-ui-lib 1.0.0

package/README.md

@@ -0,0 +1,297 @@
+# vicdev-ui-lib
+
+Biblioteca de componentes React reutilizables con sistema de tema centralizado y soporte para Tailwind CSS.
+
+## 🚀 Características
+
+- ✨ **Sistema de tema centralizado**: Configura todos los colores desde un solo lugar
+- 🎨 **Integración con Tailwind CSS**: Compatible con Tailwind CSS v3 y v4
+- 📦 **Componentes listos para usar**: Modales, formularios, tablas, botones y más
+- 🔧 **TypeScript**: Completamente tipado para mejor experiencia de desarrollo
+- 🎯 **Peer Dependencies**: Las dependencias se resuelven desde tu proyecto
+
+## 📦 Instalación
+
+```bash
+npm install vicdev-ui-lib
+# o
+yarn add vicdev-ui-lib
+# o
+pnpm add vicdev-ui-lib
+```
+
+### Dependencias Peer
+
+Esta biblioteca requiere las siguientes dependencias en tu proyecto:
+
+```bash
+npm install react react-dom
+npm install tailwindcss@^3.0.0  # o tailwindcss@^4.0.0 para v4
+
+# Opcionales (según los componentes que uses)
+npm install framer-motion      # Para animaciones
+npm install lucide-react      # Para iconos
+npm install primereact        # Para componentes de tabla
+npm install primeicons        # Para iconos de PrimeReact
+```
+
+> **Nota**: La biblioteca es compatible con Tailwind CSS v3 y v4. Ver [THEME.md](./THEME.md) para instrucciones específicas según tu versión.
+
+#### Configuración Automática de Tailwind
+
+Si tu proyecto no tiene Tailwind CSS configurado, puedes usar el script de configuración automática:
+
+```bash
+# Desde el proyecto que usa la biblioteca
+npx vicdev-ui-lib setup:tailwind
+```
+
+Este script:
+- ✅ Verifica si Tailwind CSS está instalado (si no, lo instala)
+- ✅ Crea la configuración de Tailwind si no existe
+- ✅ Te guía para completar la configuración con los colores del tema
+
+## 🎨 Configuración del Tema
+
+### 1. Configurar Tailwind CSS
+
+#### Para Tailwind CSS v4
+
+En Tailwind CSS v4, la configuración se hace directamente en CSS:
+
+```css
+/* src/index.css */
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #3b82f6;
+  --color-primary-foreground: #f8fafc;
+  /* ... más colores (en formato hexadecimal) ... */
+}
+
+:root {
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-primary-foreground);
+  /* ... más variables ... */
+}
+```
+
+O usa el helper de la biblioteca:
+
+```tsx
+import { generateTailwindV4CSS, createTheme } from 'vicdev-ui-lib';
+
+const theme = createTheme({ /* tus colores */ });
+const css = generateTailwindV4CSS(theme.colors);
+// Inyecta el CSS en tu aplicación
+```
+
+Ver `tailwind.v4.css.example` para un ejemplo completo.
+
+#### Para Tailwind CSS v3
+
+```js
+// tailwind.config.js
+const { getTailwindConfig } = require('vicdev-ui-lib/theme');
+
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: getTailwindConfig(),
+  },
+  plugins: [],
+};
+```
+
+Ver [THEME.md](./THEME.md) para más detalles.
+
+### 2. Configurar el ThemeProvider
+
+Envuelve tu aplicación con el `ThemeProvider`:
+
+```tsx
+import { ThemeProvider, createTheme } from 'vicdev-ui-lib';
+import { generateCSSVariables } from 'vicdev-ui-lib';
+
+const customTheme = createTheme({
+  primary: '#3b82f6',
+  primaryForeground: '#f8fafc',
+  destructive: '#ef4444',
+  // ... personaliza más colores según necesites (en formato hexadecimal)
+});
+
+function App() {
+  return (
+    <>
+      <style>{generateCSSVariables(customTheme)}</style>
+      <ThemeProvider theme={customTheme}>
+        {/* Tu aplicación */}
+      </ThemeProvider>
+    </>
+  );
+}
+```
+
+## 📚 Componentes Disponibles
+
+### Modales
+
+```tsx
+import { Modal, DeleteConfirmModal } from 'vicdev-ui-lib';
+
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Mi Modal"
+  tamaño="lg"
+>
+  Contenido del modal
+</Modal>
+
+<DeleteConfirmModal
+  isOpen={isOpen}
+  onClose={(confirmed) => setIsOpen(false)}
+  onConfirm={handleDelete}
+  entidad={{ tipo: 'producto', nombre: 'Producto 1' }}
+/>
+```
+
+### Botones
+
+```tsx
+import { ActionButton } from 'vicdev-ui-lib';
+import { Plus } from 'lucide-react';
+
+<ActionButton
+  variant="primary"
+  icon={Plus}
+  label="Agregar"
+  onClick={handleClick}
+/>
+```
+
+### Formularios
+
+```tsx
+import { FormField, SearchBar, FileUpload, ToggleSwitch, MultiSelectCheckbox } from 'vicdev-ui-lib';
+
+<FormField
+  label="Nombre"
+  type="text"
+  value={value}
+  onChange={handleChange}
+  required
+/>
+
+<SearchBar
+  value={search}
+  onChange={setSearch}
+  placeholder="Buscar..."
+/>
+```
+
+### Tablas
+
+```tsx
+import { DataTable } from 'vicdev-ui-lib';
+
+const columns = [
+  { field: 'id', header: 'ID', sortable: true },
+  { field: 'name', header: 'Nombre', sortable: true },
+];
+
+<DataTable
+  value={data}
+  columns={columns}
+  paginator
+  rows={10}
+  loading={loading}
+/>
+```
+
+### Toast
+
+```tsx
+import { Toast } from 'vicdev-ui-lib';
+
+<Toast
+  message="Operación exitosa"
+  variant="success"
+  open={showToast}
+  onClose={() => setShowToast(false)}
+  autoClose={3000}
+/>
+```
+
+### Otros Componentes
+
+```tsx
+import { CurrencyDisplay, Logo, FileViewerModal, FileLink } from 'vicdev-ui-lib';
+
+<CurrencyDisplay value={50000} bold primary />
+<Logo size="large" variant="whiteNoBg" />
+```
+
+## 🎨 Sistema de Tema
+
+La biblioteca incluye un sistema de tema completo que permite personalizar todos los colores desde un solo lugar. Ver [THEME.md](./THEME.md) para documentación completa.
+
+### Colores Disponibles
+
+- `primary` / `primaryForeground`
+- `secondary` / `secondaryForeground`
+- `accent` / `accentForeground`
+- `destructive` / `destructiveForeground`
+- `background` / `foreground`
+- `card` / `cardForeground`
+- `border` / `input` / `ring`
+- `muted` / `mutedForeground`
+- `popover` / `popoverForeground`
+- `radio` / `radioForeground`
+
+### Uso del Hook useTheme
+
+```tsx
+import { useTheme } from 'vicdev-ui-lib';
+
+function MyComponent() {
+  const { theme, setTheme } = useTheme();
+  
+  return (
+    <div style={{ color: theme.colors.primary }}>
+      Mi componente con tema personalizado
+    </div>
+  );
+}
+```
+
+## 📖 Documentación
+
+- [THEME.md](./THEME.md) - Documentación completa del sistema de tema
+- [tailwind.config.example.js](./tailwind.config.example.js) - Ejemplo de configuración de Tailwind
+
+## 🔧 Desarrollo
+
+```bash
+# Instalar dependencias
+npm install
+
+# Modo desarrollo
+npm run dev
+
+# Construir biblioteca
+npm run build
+
+# Linter
+npm run lint
+```
+
+## 📝 Licencia
+
+Este proyecto es privado.
+
+## 🤝 Contribuir
+
+Este es un proyecto privado. Para contribuciones, contacta al mantenedor del proyecto.

package/dist/vicdev-ui-lib.cjs.js

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("react"),F=require("framer-motion"),m=require("lucide-react"),K=require("react-dom"),X=require("primereact/datatable"),G=require("primereact/column"),T={primary:"#0f172a",primaryForeground:"#f8fafc",secondary:"#f1f5f9",secondaryForeground:"#0f172a",accent:"#f1f5f9",accentForeground:"#0f172a",destructive:"#ef4444",destructiveForeground:"#f8fafc",background:"#ffffff",foreground:"#0f172a",card:"#ffffff",cardForeground:"#0f172a",border:"#e2e8f0",input:"#e2e8f0",ring:"#0f172a",muted:"#f1f5f9",mutedForeground:"#64748b",popover:"#ffffff",popoverForeground:"#0f172a",radio:"#e2e8f0",radioForeground:"#0f172a"},R={colors:T,name:"default",description:"Tema por defecto de vicdev-ui-lib"};function H(r){return{colors:{...T,...r},name:"custom"}}function Z(r){const{colors:t}=r;return`:root {
+${Object.entries(t).map(([s,n])=>`  --${s.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${n};`).join(`
+`)}
+}`}const z=v.createContext(void 0);function Y({theme:r=R,children:t}){const[o,s]=v.useState(r),n={theme:o,setTheme:s};return e.jsx(z.Provider,{value:n,children:t})}function J(){const r=v.useContext(z);if(r===void 0)throw new Error("useTheme debe ser usado dentro de un ThemeProvider");return r}function V(r){const t={...T,...r};return{primary:{DEFAULT:t.primary,foreground:t.primaryForeground},secondary:{DEFAULT:t.secondary,foreground:t.secondaryForeground},accent:{DEFAULT:t.accent,foreground:t.accentForeground},destructive:{DEFAULT:t.destructive,foreground:t.destructiveForeground},background:t.background,foreground:t.foreground,card:{DEFAULT:t.card,foreground:t.cardForeground},border:t.border,input:t.input,ring:t.ring,muted:{DEFAULT:t.muted,foreground:t.mutedForeground},popover:{DEFAULT:t.popover,foreground:t.popoverForeground},radio:{DEFAULT:t.radio,foreground:t.radioForeground}}}function Q(r){return{extend:{colors:V(r),borderRadius:{lg:"var(--radius)",md:"calc(var(--radius) - 2px)",sm:"calc(var(--radius) - 4px)"}}}}function U(r){const t={...T,...r};return`@theme {
+${Object.entries(t).map(([s,n])=>`  --color-${s.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${n};`).join(`
+`)}
+
+  /* Border radius */
+  --radius: 0.5rem;
+}`}function I(r){const t={...T,...r};return`:root {
+${Object.entries(t).map(([s])=>{const n=s.replace(/([A-Z])/g,"-$1").toLowerCase(),a=`color-${n}`;return`  --${n}: var(--${a});`}).join(`
+`)}
+}`}function ee(r){const t=U(r),o=I(r);return`${t}
+
+${o}`}const B={primary:"bg-primary text-primary-foreground hover:bg-primary/90 font-bold shadow-lg",secondary:"bg-white border-2 border-border/20 text-foreground hover:border-border/40 hover:bg-card shadow-sm",accent:"bg-gradient-to-r from-accent to-accent/90 text-accent-foreground hover:shadow-lg",danger:"bg-destructive text-destructive-foreground hover:bg-destructive/90 border-0 shadow-lg hover:shadow-destructive/25",outline:"border-2 border-border/30 text-foreground hover:bg-card hover:border-border/50",ghost:"text-foreground hover:bg-card hover:text-primary",success:"bg-green-500 text-white hover:bg-green-600 hover:shadow-green-400/20"},P=({onClick:r,icon:t,label:o,variant:s="primary",type:n="button",className:a="",disabled:c=!1,children:l,...d})=>e.jsxs("button",{onClick:r,type:n,disabled:c,className:`
+        flex items-center justify-center px-4 py-3 rounded-xl font-semibold text-sm
+        transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] group
+        disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100
+        ${B[s]??B.primary} ${a}
+      `,...d,children:[t&&e.jsx(t,{size:20,className:`${o?"mr-2":""} ${c?"":"group-hover:rotate-12"} transition-transform duration-300`}),o,l]}),O={sm:"max-w-sm",md:"max-w-md",lg:"max-w-2xl",xl:"max-w-4xl",full:"max-w-[90vw]",fullscreen:"w-[95vw] h-[95vh]"};function _({isOpen:r,onClose:t,title:o="",tamaño:s="lg",children:n,canClose:a=!0}){const c=e.jsx(F.AnimatePresence,{children:r&&e.jsxs(e.Fragment,{children:[e.jsx(F.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:"fixed inset-0 z-[99998]"}),e.jsx(F.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:`fixed inset-0 z-[99999] bg-black/60 backdrop-blur-sm flex items-center justify-center ${s==="fullscreen"?"p-2":"p-4"} ${a?"":"cursor-not-allowed"}`,onClick:a?t:l=>l.stopPropagation(),children:e.jsxs(F.motion.div,{initial:{opacity:0,scale:.95,y:20},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.95,y:20},transition:{type:"spring",damping:20,stiffness:300},className:`
+              bg-background shadow-2xl w-full overflow-hidden relative border border-border/50
+              ${s==="fullscreen"?"rounded-none h-[95vh]":"rounded-2xl max-h-[95vh]"}
+              ${O[s]||O.md}
+            `,onClick:l=>l.stopPropagation(),children:[e.jsxs("div",{className:"bg-gradient-to-r from-primary to-secondary p-4 flex justify-between items-center sticky top-0 z-10 border-b border-primary-foreground/20",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-8 h-8 bg-primary-foreground/20 rounded-lg flex items-center justify-center",children:e.jsx("div",{className:"w-4 h-4 bg-primary-foreground rounded-full"})}),e.jsx("h2",{className:"text-lg font-bold text-primary-foreground",children:o})]}),a?e.jsx("button",{onClick:t,className:"text-primary-foreground hover:text-primary-foreground/80 hover:bg-primary-foreground/10 p-2 rounded-lg transition-all duration-200",children:e.jsx(m.X,{size:24})}):e.jsx("div",{className:"w-10 h-10 flex items-center justify-center",children:e.jsx("div",{className:"w-5 h-5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin"})})]}),e.jsx("div",{className:`overflow-y-auto bg-gradient-to-b from-background to-card/30 ${s==="fullscreen"?"p-8 h-[calc(95vh-100px)]":"p-6 max-h-[calc(95vh-100px)]"}`,children:n})]})})]})});return typeof window<"u"?K.createPortal(c,document.body):c}const re=({isOpen:r,onClose:t,onConfirm:o,loading:s=!1,entidad:n})=>{if(!r)return null;const{tipo:a="elemento",nombre:c="",dependencias:l=0,nombreDependencia:d=""}=n||{};return e.jsx("div",{className:"fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4",children:e.jsxs("div",{className:"bg-background rounded-2xl shadow-2xl max-w-md w-full p-6 transform transition-all",children:[e.jsx("div",{className:"flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-destructive/10 rounded-full",children:e.jsx(m.AlertTriangle,{className:"w-8 h-8 text-destructive"})}),e.jsxs("h3",{className:"text-xl font-bold text-foreground text-center mb-2",children:["¿Eliminar ",a,"?"]}),e.jsxs("p",{className:"text-muted-foreground text-center mb-6",children:["Esta acción eliminará ",a==="producto"?"el":"la"," ",e.jsxs("strong",{children:[a,' "',c,'"']}),l>0&&d?e.jsxs(e.Fragment,{children:[" y afectará a ",e.jsxs("strong",{children:[l," ",d]}),"."]}):null,e.jsx("br",{}),"Esta acción no se puede deshacer."]}),e.jsxs("div",{className:"flex gap-3",children:[e.jsx("button",{onClick:()=>t(!1),className:"flex-1 px-4 py-3 border border-border text-foreground rounded-xl hover:bg-card transition-colors",children:"Cancelar"}),e.jsx("button",{onClick:o,disabled:s,className:`flex-1 px-4 py-3 ${s?"bg-destructive/70":"bg-destructive hover:bg-destructive/90"} text-destructive-foreground rounded-xl transition-colors`,children:s?"Cargando...":"Eliminar"})]})]})})},te={success:{container:"bg-primary/10 border-primary/30 text-primary",icon:m.CheckCircle},error:{container:"bg-destructive/10 border-destructive/30 text-destructive",icon:m.XCircle},info:{container:"bg-blue-500/10 border-blue-500/30 text-blue-600 dark:text-blue-400",icon:m.Info},warning:{container:"bg-amber-500/10 border-amber-500/30 text-amber-700 dark:text-amber-400",icon:m.AlertTriangle}};function se({message:r,variant:t="info",open:o,onClose:s,autoClose:n,className:a=""}){const{container:c,icon:l}=te[t];return v.useEffect(()=>{if(!o||!n)return;const d=setTimeout(s,n);return()=>clearTimeout(d)},[o,n,s]),o?e.jsxs("div",{role:"alert",className:`fixed top-20 right-4 z-[9999] max-w-md flex items-center gap-3 px-4 py-3 rounded-xl border shadow-xl shadow-black/10 dark:shadow-black/30 animate-in slide-in-from-top-5 fade-in duration-300 ${c} ${a}`,children:[e.jsx(l,{className:"w-5 h-5 shrink-0","aria-hidden":!0}),e.jsx("p",{className:"font-medium flex-1",children:r}),e.jsx("button",{type:"button",onClick:s,className:"shrink-0 p-1 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring","aria-label":"Cerrar",children:e.jsx(m.X,{className:"w-4 h-4"})})]}):null}const ne="No hay registros para mostrar.",oe=10,ae=[10,25,50];function ie({value:r,columns:t,dataKey:o,emptyMessage:s=ne,loading:n=!1,paginator:a=!1,rows:c=oe,rowsPerPageOptions:l=ae,size:d="normal",stripedRows:f=!1,showGridlines:h=!1,className:x,style:g}){const b=t.filter(i=>!i.hidden);return e.jsx("div",{className:`data-table-viva overflow-hidden rounded-lg border border-border bg-card ${x??""}`.trim(),style:g,children:e.jsx(X.DataTable,{value:r,dataKey:o,loading:n,emptyMessage:s,paginator:a,rows:c,rowsPerPageOptions:l,size:d,stripedRows:f,showGridlines:h,paginatorTemplate:"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown",currentPageReportTemplate:"Mostrando {first} a {last} de {totalRecords} registros",children:b.map(i=>e.jsx(G.Column,{field:i.field,header:i.header,sortable:i.sortable??!1,align:i.align,alignHeader:i.alignHeader,style:i.style,bodyClassName:i.bodyClassName,body:i.body?p=>i.body(p):void 0},String(i.field)))})})}function le(r){return e.jsx(ie,{...r})}const ce="w-full px-4 py-3 border text-base border-input rounded-xl focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all bg-background shadow-sm",de="w-full pl-4 pr-12 py-3 border text-base border-input rounded-xl focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all bg-background shadow-sm",ue="w-full px-4 pt-6 pb-2 border text-base border-input rounded-xl focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all bg-background shadow-sm",me="w-full pl-4 pr-12 pt-6 pb-2 border text-base border-input rounded-xl focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all bg-background shadow-sm";function fe({label:r,id:t,name:o,type:s="text",value:n="",onChange:a,onBlur:c,placeholder:l,required:d=!1,options:f=[],rows:h=4,className:x="",floatingLabel:g=!1,helperText:b,disabled:i=!1,inputMode:p}){const[S,k]=v.useState(!1),[y,C]=v.useState(!1),j=v.useRef(null),E=g&&(S||n!==""&&n!==void 0&&n!==null),u=s==="password",w=u&&y?"text":s,L=()=>{k(!0)},A=N=>{k(!1),c?.(N)},$=g?u?me:ue:u?de:ce,M=()=>{C(!y)};return e.jsxs("div",{className:x,children:[g?e.jsxs("div",{className:"relative",children:[r&&e.jsxs("label",{htmlFor:t,className:`absolute left-4 transition-all duration-200 pointer-events-none ${E?"top-2 text-xs text-muted-foreground font-medium":"top-1/2 -translate-y-1/2 text-base text-muted-foreground/70"}`,children:[r,d&&e.jsx("span",{className:"text-destructive ml-1",children:"*"})]}),s==="textarea"?e.jsx("textarea",{ref:j,id:t,name:o,value:n,onChange:a,onFocus:L,onBlur:A,placeholder:E?l:"",rows:h,disabled:i,className:`${$} resize-none`}):s==="select"?e.jsxs("select",{ref:j,id:t,name:o,value:n,onChange:a,onFocus:L,onBlur:A,disabled:i,className:$,children:[e.jsx("option",{value:"",children:"Seleccionar opción"}),f.map(N=>e.jsx("option",{value:N.value,children:N.label},N.value))]}):e.jsxs("div",{className:"relative",children:[e.jsx("input",{ref:j,type:w,id:t,name:o,value:n,onChange:a,onFocus:L,onBlur:A,placeholder:E?l:"",disabled:i,inputMode:p,className:$}),u&&e.jsx("button",{type:"button",onClick:M,className:"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded p-1","aria-label":y?"Ocultar contraseña":"Mostrar contraseña",children:y?e.jsx(m.EyeOff,{className:"w-5 h-5"}):e.jsx(m.Eye,{className:"w-5 h-5"})})]})]}):e.jsxs(e.Fragment,{children:[r&&e.jsxs("label",{htmlFor:t,className:"block text-base font-semibold text-foreground mb-2",children:[r,d&&e.jsx("span",{className:"text-destructive ml-1",children:"*"})]}),s==="textarea"?e.jsx("textarea",{id:t,name:o,value:n,onChange:a,placeholder:l,rows:h,disabled:i,className:`${$} resize-none`}):s==="select"?e.jsxs("select",{id:t,name:o,value:n,onChange:a,disabled:i,className:$,children:[e.jsx("option",{value:"",children:"Seleccionar opción"}),f.map(N=>e.jsx("option",{value:N.value,children:N.label},N.value))]}):e.jsxs("div",{className:"relative",children:[e.jsx("input",{type:w,id:t,name:o,value:n,onChange:a,onFocus:L,onBlur:A,placeholder:l,disabled:i,inputMode:p,className:$}),u&&e.jsx("button",{type:"button",onClick:M,className:"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded p-1","aria-label":y?"Ocultar contraseña":"Mostrar contraseña",children:y?e.jsx(m.EyeOff,{className:"w-5 h-5"}):e.jsx(m.Eye,{className:"w-5 h-5"})})]})]}),b&&e.jsx("p",{className:`mt-2 text-sm ${x?.includes("border-red-500")?"text-destructive":"text-muted-foreground"}`,children:b})]})}function xe({value:r,onChange:t,placeholder:o="Buscar...",className:s=""}){return e.jsxs("div",{className:`relative ${s}`,children:[e.jsx(m.Search,{className:"absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"}),e.jsx("input",{type:"text",value:r,onChange:n=>t(n.target.value),placeholder:o,className:"w-full pl-12 pr-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-uno focus:border-uno transition-all text-sm font-medium text-divisiones placeholder-gray-400"}),r&&e.jsx("button",{onClick:()=>t(""),className:"absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-divisiones transition-colors",type:"button",children:e.jsx(m.X,{className:"w-4 h-4"})})]})}function ge({id:r,name:t,label:o,accept:s=".pdf,application/pdf",required:n=!1,helperText:a,onChange:c,error:l,disabled:d=!1,maxSizeMB:f=10,currentFileName:h}){const[x,g]=v.useState(null),[b,i]=v.useState(!1),p=v.useRef(null),S=u=>{if(s.includes("pdf")&&u.type!=="application/pdf")return"El archivo debe ser un PDF";const w=f*1024*1024;return u.size>w?`El archivo no debe superar ${f}MB`:null},k=u=>{if(!u){g(null),c(null);return}if(S(u)){c(null);return}g(u),c(u)},y=u=>{const w=u.target.files?.[0]||null;k(w)},C=u=>{u.preventDefault(),u.stopPropagation(),u.type==="dragenter"||u.type==="dragover"?i(!0):u.type==="dragleave"&&i(!1)},j=u=>{if(u.preventDefault(),u.stopPropagation(),i(!1),d)return;const w=u.dataTransfer.files?.[0];w&&k(w)},D=()=>{g(null),c(null),p.current&&(p.current.value="")},E=()=>{d||p.current?.click()};return e.jsxs("div",{className:"space-y-2",children:[e.jsxs("label",{htmlFor:r,className:"block text-sm font-medium text-foreground",children:[o,n&&e.jsx("span",{className:"text-destructive ml-1",children:"*"})]}),e.jsxs("div",{className:`
+                    relative border-2 border-dashed rounded-lg p-6 transition-all
+                    ${b?"border-primary bg-primary/5":"border-border"}
+                    ${d?"opacity-50 cursor-not-allowed":"cursor-pointer hover:border-primary/50"}
+                    ${l?"border-destructive":""}
+                `,onDragEnter:C,onDragLeave:C,onDragOver:C,onDrop:j,onClick:E,children:[e.jsx("input",{ref:p,id:r,name:t,type:"file",accept:s,onChange:y,disabled:d,className:"hidden"}),x||h?e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-3 flex-1 min-w-0",children:[e.jsx("div",{className:"p-2 rounded-lg bg-primary/10 flex-shrink-0",children:e.jsx(m.FileText,{className:"w-5 h-5 text-primary"})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("p",{className:"text-sm font-medium text-foreground truncate",children:x?.name||h}),x&&e.jsxs("p",{className:"text-xs text-muted-foreground",children:[(x.size/1024/1024).toFixed(2)," MB"]})]})]}),!d&&e.jsx("button",{type:"button",onClick:u=>{u.stopPropagation(),D()},className:"p-2 rounded-lg hover:bg-destructive/10 transition-colors flex-shrink-0",children:e.jsx(m.X,{className:"w-4 h-4 text-destructive"})})]}):e.jsxs("div",{className:"text-center",children:[e.jsx(m.Upload,{className:"mx-auto h-12 w-12 text-muted-foreground"}),e.jsxs("div",{className:"mt-4",children:[e.jsxs("p",{className:"text-sm text-foreground",children:["Arrastra y suelta tu archivo aquí, o"," ",e.jsx("span",{className:"text-primary font-medium",children:"haz clic para seleccionar"})]}),e.jsx("p",{className:"text-xs text-muted-foreground mt-2",children:s.includes("pdf")?`Archivos PDF (máx. ${f}MB)`:`Máximo ${f}MB`})]})]})]}),a&&!l&&e.jsx("p",{className:"text-xs text-muted-foreground",children:a}),l&&e.jsx("p",{className:"text-xs text-destructive",children:l})]})}function pe({label:r,id:t,options:o,selectedIds:s,onChange:n,loading:a=!1,disabled:c=!1,loadingMessage:l="Cargando...",emptyMessage:d,renderLabel:f,helperText:h,itemName:x="item",itemNamePlural:g,maxHeight:b="max-h-60",headerAction:i,emptyAction:p,className:S=""}){const k=g||`${x}s`,y=s.length,C=y>0;return e.jsxs("div",{className:`space-y-2 ${S}`,children:[e.jsxs("div",{className:i?"flex items-center justify-between":"",children:[e.jsx("label",{htmlFor:t,className:"block text-sm font-medium text-foreground",children:r}),i&&e.jsx(P,{type:"button",variant:i.variant||"outline",icon:i.icon,label:i.label,onClick:i.onClick,disabled:c,className:"text-xs"})]}),e.jsx("div",{className:`${b} overflow-y-auto border border-border rounded-lg p-3 bg-background`,children:a?e.jsx("div",{className:"text-center py-4 text-muted-foreground",children:l}):o.length===0?e.jsxs("div",{className:"text-center py-4 space-y-3",children:[d&&e.jsx("p",{className:"text-sm text-muted-foreground",children:d}),p&&e.jsx(P,{type:"button",variant:p.variant||"primary",icon:p.icon,label:p.label,onClick:p.onClick,disabled:c})]}):e.jsx("div",{className:"space-y-2",children:o.map(j=>{const D=s.includes(j.id);return e.jsxs("label",{className:"flex items-center space-x-2 p-2 rounded hover:bg-card/50 cursor-pointer transition-colors",children:[e.jsx("input",{type:"checkbox",checked:D,onChange:()=>n(j.id),disabled:c,className:"w-4 h-4 text-primary border-border rounded focus:ring-primary focus:ring-2"}),e.jsx("span",{className:"text-sm text-foreground",children:f(j)})]},j.id)})})}),h&&e.jsx("p",{className:"text-xs text-muted-foreground",children:h}),C&&e.jsxs("p",{className:"text-xs text-primary",children:[y," ",y===1?x:k," seleccionado",y!==1?"s":""]})]})}function he({label:r,description:t,value:o,onChange:s,icon:n,disabled:a=!1,className:c=""}){const l=!!o;return e.jsxs("div",{className:`flex items-center justify-between p-4 bg-background rounded-xl border border-border hover:bg-card transition-colors duration-200 ${a?"opacity-50 cursor-not-allowed":""} ${c}`,children:[e.jsxs("div",{className:"flex items-center gap-3 flex-1",children:[n&&e.jsx("div",{className:"flex-shrink-0 w-10 h-10 bg-gradient-to-br from-primary/80 to-primary-foreground/20 rounded-lg flex items-center justify-center text-primary-foreground",children:n}),e.jsxs("div",{className:"flex-1",children:[e.jsx("label",{className:"block text-sm font-semibold text-foreground mb-1",children:r}),t&&e.jsx("span",{className:"text-xs text-muted-foreground",children:t})]})]}),e.jsx(F.motion.button,{type:"button",onClick:()=>!a&&s(!l),disabled:a,className:`
+                    relative flex items-center w-14 h-8 rounded-full p-1 transition-colors duration-300 
+                    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50
+                    ${a?"cursor-not-allowed":"cursor-pointer"}
+                    ${l?"bg-gradient-to-r from-green-500 to-green-600":"bg-muted"}
+                `,whileTap:a?{}:{scale:.95},children:e.jsx(F.motion.div,{className:"w-6 h-6 bg-white rounded-full shadow-lg flex items-center justify-center",animate:{x:l?24:0},transition:{type:"spring",stiffness:500,damping:30},children:l?e.jsx(m.Check,{className:"w-4 h-4 text-green-600"}):e.jsx(m.X,{className:"w-4 h-4 text-muted-foreground"})})})]})}const be=r=>{const t=typeof r=="string"?parseFloat(r):r;return new Intl.NumberFormat("es-CO",{style:"currency",currency:"COP",minimumFractionDigits:0,maximumFractionDigits:0}).format(t)};function ve({value:r,className:t="",bold:o=!1,primary:s=!1,secondary:n=!1,success:a=!1,error:c=!1,size:l="base",emptyText:d="-"}){if(r==null)return e.jsx("span",{className:`text-muted-foreground ${t}`,children:d});const f=typeof r=="string"?parseFloat(r):r;if(isNaN(f))return e.jsx("span",{className:`text-muted-foreground ${t}`,children:d});const h=be(f),x={sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl"},g=s?"text-primary":n?"text-secondary":a?"text-green-600 dark:text-green-400":c?"text-destructive":"text-foreground",b=o?"font-bold":"font-normal";return e.jsx("span",{className:`${x[l]} ${g} ${b} ${t}`,children:h})}const ye={small:{width:60,height:45},default:{width:120,height:90},large:{width:180,height:135}},je={default:"/logo.png",logo2:"/logo2.png",white:"/logoW.png",whiteNoBg:"/logoW_sin_bg.png"},we=({size:r="default",variant:t="whiteNoBg",src:o,alt:s="Logo de Buenity",className:n="",fondoColor:a="transparent",animated:c=!1,animationType:l="fade",animationDuration:d=1})=>{const{width:f,height:h}=ye[r],x=o||je[t],b=(()=>{if(!c)return{};const p={initial:{opacity:0},animate:{opacity:1},transition:{duration:d}};switch(l){case"fade":return{...p,initial:{opacity:0},animate:{opacity:1}};case"scale":return{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},transition:{duration:d,ease:"easeOut"}};case"pulse":return{initial:{opacity:0,scale:1},animate:{opacity:1,scale:[1,1.05,1]},transition:{duration:d,repeat:1/0,repeatType:"reverse",ease:"easeInOut"}};case"bounce":return{initial:{opacity:0,y:-20},animate:{opacity:1,y:0},transition:{duration:d,type:"spring",stiffness:200,damping:10}};case"rotate":return{initial:{opacity:0,rotate:-180},animate:{opacity:1,rotate:0},transition:{duration:d,ease:"easeOut"}};default:return p}})(),i={className:"flex items-center rounded-xl justify-center",style:{backgroundColor:a},...c?b:{}};return c?e.jsx(F.motion.div,{...i,children:e.jsx("img",{src:x,width:f,height:h,alt:s,className:`object-contain ${n}`})}):e.jsx("div",{...i,children:e.jsx("img",{src:x,width:f,height:h,alt:s,className:`object-contain ${n}`})})};function W(r){const t=r.split("?")[0],o=t.match(/rp-(\d+)/i);if(o)return`rp-${o[1]}`;const s=t.split("/");return(s[s.length-1]||"").replace(/\.(pdf|jpg|jpeg|png|gif|webp)$/i,"")||"Soporte"}function Ne({url:r,isOpen:t,onClose:o,displayName:s}){const[n,a]=v.useState(!0),[c,l]=v.useState(null),[d,f]=v.useState("unknown");v.useEffect(()=>{if(!r){f("unknown"),a(!1);return}const i=r.toLowerCase();i.match(/\.(jpg|jpeg|png|gif|webp|svg|bmp)$/)?f("image"):i.match(/\.pdf$/)||i.includes("application/pdf")?f("pdf"):f("unknown"),a(!1),l(null)},[r]);const h=()=>{l("Error al cargar la imagen"),a(!1)},x=()=>{if(!r)return;const i=document.createElement("a");i.href=r,i.download=g,i.target="_blank",document.body.appendChild(i),i.click(),document.body.removeChild(i)},g=s??(r?W(r):"Archivo"),b=()=>{switch(d){case"image":return e.jsx(m.Image,{className:"w-6 h-6 text-primary"});case"pdf":return e.jsx(m.FileText,{className:"w-6 h-6 text-primary"});default:return e.jsx(m.File,{className:"w-6 h-6 text-primary"})}};return t?e.jsx(_,{isOpen:!0,onClose:o,title:g,tamaño:"fullscreen",canClose:!0,children:e.jsx("div",{className:"flex flex-col h-full min-h-[90dvh]",children:e.jsxs("div",{className:"flex-1 overflow-auto mt-4 bg-muted/30 rounded-xl p-4 min-h-[60vh]",children:[!r&&e.jsxs("div",{className:"flex flex-col items-center justify-center min-h-[400px] text-muted-foreground",children:[e.jsx(m.File,{className:"w-12 h-12 mb-4 opacity-50"}),e.jsx("p",{children:"No hay archivo para visualizar."})]}),r&&n&&e.jsxs("div",{className:"flex flex-col items-center justify-center min-h-[400px] text-muted-foreground",children:[e.jsx(m.Loader2,{className:"w-12 h-12 text-primary animate-spin mb-4"}),e.jsx("p",{children:"Cargando archivo..."})]}),r&&c&&e.jsxs("div",{className:"flex flex-col items-center justify-center min-h-[400px] text-center",children:[e.jsx("div",{className:"w-16 h-16 bg-destructive/10 rounded-full flex items-center justify-center mx-auto mb-4",children:e.jsx(m.AlertCircle,{className:"w-8 h-8 text-destructive"})}),e.jsx("h3",{className:"text-lg font-semibold text-foreground mb-2",children:"Error al cargar el archivo"}),e.jsx("p",{className:"text-muted-foreground mb-4",children:c}),e.jsx(P,{type:"button",variant:"primary",icon:m.Download,label:"Intentar descargar",onClick:x})]}),r&&!n&&!c&&e.jsxs(e.Fragment,{children:[d==="image"&&e.jsx("div",{className:"flex items-center justify-center min-h-[400px]",children:e.jsx("img",{src:r,alt:g,onError:h,onLoad:()=>a(!1),className:"max-w-full max-h-[75vh] object-contain rounded-lg shadow-lg border border-border"})}),d==="pdf"&&e.jsx("div",{className:"flex items-center justify-center min-h-[82dvh] w-full",children:e.jsx("iframe",{src:r,onLoad:()=>a(!1),className:"w-full h-[75vh] rounded-lg shadow-lg bg-background border border-border",title:g})}),d==="unknown"&&e.jsxs("div",{className:"flex flex-col items-center justify-center min-h-[400px] text-center",children:[e.jsx("div",{className:"w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4",children:b()}),e.jsx("h3",{className:"text-lg font-semibold text-foreground mb-2",children:"Tipo de archivo no soportado para vista previa"}),e.jsx("p",{className:"text-muted-foreground mb-4",children:"Puede descargar el archivo para abrirlo en su dispositivo."}),e.jsx(P,{type:"button",variant:"primary",icon:m.Download,label:"Descargar archivo",onClick:x})]})]})]})})}):null}function ke({url:r,displayName:t,icon:o,className:s="inline-flex items-center gap-2 text-primary hover:text-primary/80 hover:underline font-medium"}){const n=r.startsWith("http")||r.startsWith("//")?r:`${typeof window<"u"?window.location.origin:""}${r.startsWith("/")?r:`/${r}`}`;return e.jsxs("a",{href:n,target:"_blank",rel:"noopener noreferrer",className:s,children:[o??e.jsx(m.FileText,{className:"w-4 h-4 shrink-0"}),t]})}const Ce={sm:"h-4 w-4",md:"h-6 w-6",lg:"h-10 w-10",xl:"h-16 w-16"},Fe={primary:"text-primary",secondary:"text-secondary",muted:"text-muted-foreground",destructive:"text-destructive"};function q({size:r="md",variant:t="muted",className:o=""}){return e.jsxs("svg",{className:`${Ce[r]} ${Fe[t]} animate-spin ${o}`,viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",role:"status","aria-label":"Cargando",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"})]})}function $e({text:r="Cargando datos...",size:t="lg",variant:o="muted",className:s="",textClassName:n=""}){return e.jsx("div",{className:`w-full h-screen flex items-center justify-center p-6 ${s}`,children:e.jsxs("div",{className:"flex flex-col items-center gap-4",children:[e.jsx(q,{size:t,variant:o}),r&&e.jsx("span",{className:`text-lg font-semibold text-muted-foreground ${n}`,children:r})]})})}exports.ActionButton=P;exports.CurrencyDisplay=ve;exports.DataTable=le;exports.DeleteConfirmModal=re;exports.FileLink=ke;exports.FileUpload=ge;exports.FileViewerModal=Ne;exports.FormField=fe;exports.Loader=q;exports.LoaderScreen=$e;exports.Logo=we;exports.Modal=_;exports.MultiSelectCheckbox=pe;exports.SearchBar=xe;exports.ThemeProvider=Y;exports.Toast=se;exports.ToggleSwitch=he;exports.createTheme=H;exports.defaultColors=T;exports.defaultTheme=R;exports.generateCSSVariables=Z;exports.generateCompatibilityVariables=I;exports.generateTailwindV4CSS=ee;exports.generateTailwindV4Theme=U;exports.getRpSoporteDisplayName=W;exports.getTailwindColors=V;exports.getTailwindConfig=Q;exports.useTheme=J;