pdm-ui-kit 0.2.0 → 0.3.1

package/public-api.d.ts

@@ -1,65 +1,66 @@
-export * from './lib/pdm-ui-kit.module';
-export * from './lib/overlay/pdm-overlay-options';
-export * from './lib/overlay/create-flexible-position-strategy';
-export * from './lib/overlay/pdm-outside-click.directive';
-export * from './lib/utils/responsive';
-export * from './lib/utils/z-index';
-export * from './lib/components/accordion/accordion.component';
-export * from './lib/components/alert/alert.component';
-export * from './lib/components/alert-dialog/alert-dialog.component';
-export * from './lib/components/aspect-ratio/aspect-ratio.component';
-export * from './lib/components/avatar/avatar.component';
-export * from './lib/components/badge/badge.component';
-export * from './lib/components/breadcrumb/breadcrumb.component';
-export * from './lib/components/button-group/button-group.component';
-export * from './lib/components/button/button.component';
-export * from './lib/components/calendar/calendar.component';
-export * from './lib/components/carousel/carousel.component';
-export * from './lib/components/card/card.component';
-export * from './lib/components/chart/chart.component';
-export * from './lib/components/checkbox/checkbox.component';
-export * from './lib/components/collapsible/collapsible.component';
-export * from './lib/components/combobox/combobox.component';
-export * from './lib/components/command/command.component';
-export * from './lib/components/context-menu/context-menu.component';
-export * from './lib/components/data-table/data-table.component';
-export * from './lib/components/date-picker/date-picker.component';
-export * from './lib/components/dialog/dialog.component';
-export * from './lib/components/draggable-table/draggable-table.component';
-export * from './lib/components/dropdown-menu/dropdown-menu.component';
-export * from './lib/components/drawer/drawer.component';
-export * from './lib/components/empty/empty.component';
-export * from './lib/components/field/field.component';
-export * from './lib/components/hover-card/hover-card.component';
-export * from './lib/components/icon/icon.component';
-export * from './lib/components/item/item.component';
-export * from './lib/components/input/input.component';
-export * from './lib/components/input-password/input-password.component';
-export * from './lib/components/input-group/input-group.component';
-export * from './lib/components/input-otp/input-otp.component';
-export * from './lib/components/kbd/kbd.component';
-export * from './lib/components/label/label.component';
-export * from './lib/components/menubar/menubar.component';
-export * from './lib/components/native-select/native-select.component';
-export * from './lib/components/navigation-menu/navigation-menu.component';
-export * from './lib/components/pagination/pagination.component';
-export * from './lib/components/popover/popover.component';
-export * from './lib/components/progress/progress.component';
-export * from './lib/components/radio-group/radio-group.component';
-export * from './lib/components/scroll-area/scroll-area.component';
-export * from './lib/components/select/select.component';
-export * from './lib/components/select/select-option.directive';
-export * from './lib/components/separator/separator.component';
-export * from './lib/components/sheet/sheet.component';
-export * from './lib/components/sidebar/sidebar.component';
-export * from './lib/components/skeleton/skeleton.component';
-export * from './lib/components/slider/slider.component';
-export * from './lib/components/sonner/sonner.component';
-export * from './lib/components/spinner/spinner.component';
-export * from './lib/components/switch/switch.component';
-export * from './lib/components/table/table.component';
-export * from './lib/components/tabs/tabs.component';
-export * from './lib/components/textarea/textarea.component';
-export * from './lib/components/toggle/toggle.component';
-export * from './lib/components/toggle-group/toggle-group.component';
-export * from './lib/components/tooltip/tooltip.component';
+export * from "./lib/pdm-ui-kit.module";
+export * from "./lib/overlay/pdm-overlay-options";
+export * from "./lib/overlay/create-flexible-position-strategy";
+export * from "./lib/overlay/pdm-outside-click.directive";
+export * from "./lib/overlay/z-index-helper";
+export * from "./lib/utils/responsive";
+export * from "./lib/utils/z-index";
+export * from "./lib/components/accordion/accordion.component";
+export * from "./lib/components/alert/alert.component";
+export * from "./lib/components/alert-dialog/alert-dialog.component";
+export * from "./lib/components/aspect-ratio/aspect-ratio.component";
+export * from "./lib/components/avatar/avatar.component";
+export * from "./lib/components/badge/badge.component";
+export * from "./lib/components/breadcrumb/breadcrumb.component";
+export * from "./lib/components/button-group/button-group.component";
+export * from "./lib/components/button/button.component";
+export * from "./lib/components/calendar/calendar.component";
+export * from "./lib/components/carousel/carousel.component";
+export * from "./lib/components/card/card.component";
+export * from "./lib/components/chart/chart.component";
+export * from "./lib/components/checkbox/checkbox.component";
+export * from "./lib/components/collapsible/collapsible.component";
+export * from "./lib/components/combobox/combobox.component";
+export * from "./lib/components/command/command.component";
+export * from "./lib/components/context-menu/context-menu.component";
+export * from "./lib/components/data-table/data-table.component";
+export * from "./lib/components/date-picker/date-picker.component";
+export * from "./lib/components/dialog/dialog.component";
+export * from "./lib/components/draggable-table/draggable-table.component";
+export * from "./lib/components/dropdown-menu/dropdown-menu.component";
+export * from "./lib/components/drawer/drawer.component";
+export * from "./lib/components/empty/empty.component";
+export * from "./lib/components/field/field.component";
+export * from "./lib/components/hover-card/hover-card.component";
+export * from "./lib/components/icon/icon.component";
+export * from "./lib/components/item/item.component";
+export * from "./lib/components/input/input.component";
+export * from "./lib/components/input-password/input-password.component";
+export * from "./lib/components/input-group/input-group.component";
+export * from "./lib/components/input-otp/input-otp.component";
+export * from "./lib/components/kbd/kbd.component";
+export * from "./lib/components/label/label.component";
+export * from "./lib/components/menubar/menubar.component";
+export * from "./lib/components/native-select/native-select.component";
+export * from "./lib/components/navigation-menu/navigation-menu.component";
+export * from "./lib/components/pagination/pagination.component";
+export * from "./lib/components/popover/popover.component";
+export * from "./lib/components/progress/progress.component";
+export * from "./lib/components/radio-group/radio-group.component";
+export * from "./lib/components/scroll-area/scroll-area.component";
+export * from "./lib/components/select/select.component";
+export * from "./lib/components/select/select-option.directive";
+export * from "./lib/components/separator/separator.component";
+export * from "./lib/components/sheet/sheet.component";
+export * from "./lib/components/sidebar/sidebar.component";
+export * from "./lib/components/skeleton/skeleton.component";
+export * from "./lib/components/slider/slider.component";
+export * from "./lib/components/sonner/sonner.component";
+export * from "./lib/components/spinner/spinner.component";
+export * from "./lib/components/switch/switch.component";
+export * from "./lib/components/table/table.component";
+export * from "./lib/components/tabs/tabs.component";
+export * from "./lib/components/textarea/textarea.component";
+export * from "./lib/components/toggle/toggle.component";
+export * from "./lib/components/toggle-group/toggle-group.component";
+export * from "./lib/components/tooltip/tooltip.component";

package/src/lib/styles/tokens.css

@@ -0,0 +1,182 @@
+/**
+ * PDM UI Kit - CSS Design Tokens
+ * 
+ * Este archivo define los tokens de diseño centralizados que los componentes
+ * consumen via CSS custom properties (variables CSS).
+ * 
+ * USO:
+ * 1. Importar en el proyecto consumidor: @import 'pdm-ui-kit/styles';
+ * 2. O copiar las variables al CSS base del consumidor
+ * 
+ * TOKENS DEFINIDOS:
+ * - Colores: background, foreground, primary, secondary, muted, accent, destructive, etc.
+ * - Bordes: border, input, ring
+ * - Radio: radius
+ * - Charts: --chart-1 a --chart-4
+ */
+
+:root {
+  /* ============================================
+   * COLORES BASE
+   * ============================================ */
+  
+  /* Background - Color de fondo principal */
+  --background: 0 0% 100%;
+  
+  /* Foreground - Color de texto principal */
+  --foreground: 222.2 84% 4.9%;
+  
+  /* ============================================
+   * COLORES DE COMPONENTE
+   * ============================================ */
+  
+  /* Card - Fondo para tarjetas y contenedores elevados */
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  
+  /* Popover - Fondo para elementos flotantes */
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  
+  /* Primary - Color primario de la marca */
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  
+  /* Secondary - Color secundario */
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  
+  /* Muted - Elementos discretos/silueteados */
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  
+  /* Accent - Acentos y elementos destacados */
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  
+  /* Destructive - Acciones destructivas (borrar, error) */
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  
+  /* ============================================
+   * BORDES Y INPUTS
+   * ============================================ */
+  
+  /* Border - Bordes de componentes */
+  --border: 214.3 31.8% 91.4%;
+  
+  /* Input - Bordes de campos de entrada */
+  --input: 214.3 31.8% 91.4%;
+  
+  /* Ring - Anillos de focus/accessibility */
+  --ring: 221.2 83.2% 53.3%;
+  
+  /* ============================================
+   * RADIO DE BORDES
+   * ============================================ */
+  
+  --radius: 0.5rem;
+  
+  /* ============================================
+   * COLORES DE CHARTS (para pdm-chart)
+   * ============================================ */
+  
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+  
+  /* ============================================
+   * VARIANTES DARK MODE (opcional)
+   * ============================================ */
+  
+  /* Descomentar para dark mode:
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+  */
+}
+
+/**
+ * CONFIGURACIÓN TAILWIND (para el proyecto consumidor)
+ * 
+ * Agregar en tailwind.config.js:
+ * 
+ * module.exports = {
+ *   content: [
+ *     // ... otros paths
+ *     'node_modules/pdm-ui-kit/**/*.{ts,html}',
+ *   ],
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         background: 'hsl(var(--background))',
+ *         foreground: 'hsl(var(--foreground))',
+ *         card: {
+ *           DEFAULT: 'hsl(var(--card))',
+ *           foreground: 'hsl(var(--card-foreground))'
+ *         },
+ *         popover: {
+ *           DEFAULT: 'hsl(var(--popover))',
+ *           foreground: 'hsl(var(--popover-foreground))'
+ *         },
+ *         primary: {
+ *           DEFAULT: 'hsl(var(--primary))',
+ *           foreground: 'hsl(var(--primary-foreground))'
+ *         },
+ *         secondary: {
+ *           DEFAULT: 'hsl(var(--secondary))',
+ *           foreground: 'hsl(var(--secondary-foreground))'
+ *         },
+ *         muted: {
+ *           DEFAULT: 'hsl(var(--muted))',
+ *           foreground: 'hsl(var(--muted-foreground))'
+ *         },
+ *         accent: {
+ *           DEFAULT: 'hsl(var(--accent))',
+ *           foreground: 'hsl(var(--accent-foreground))'
+ *         },
+ *         destructive: {
+ *           DEFAULT: 'hsl(var(--destructive))',
+ *           foreground: 'hsl(var(--destructive-foreground))'
+ *         },
+ *         border: 'hsl(var(--border))',
+ *         input: 'hsl(var(--input))',
+ *         ring: 'hsl(var(--ring))',
+ *         chart: {
+ *           '1': 'hsl(var(--chart-1))',
+ *           '2': 'hsl(var(--chart-2))',
+ *           '3': 'hsl(var(--chart-3))',
+ *           '4': 'hsl(var(--chart-4))',
+ *           '5': 'hsl(var(--chart-5))',
+ *         }
+ *       },
+ *       borderRadius: {
+ *         lg: 'var(--radius)',
+ *         md: 'calc(var(--radius) - 2px)',
+ *         sm: 'calc(var(--radius) - 4px)'
+ *       }
+ *     }
+ *   },
+ *   plugins: [require('tailwindcss-animate')]
+ * }
+ */