@iclips/ui 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iclips/ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Sistema de design completo com paleta personalizada (#7F26BF) e 47 componentes shadcn/ui",
   "author": "iclipsbr",
   "license": "MIT",
@@ -19,7 +19,6 @@
   },
   "files": [
     "dist",
-    "styles",
     "README.md",
     "LICENSE"
   ],

package/styles/globals.css

@@ -1,478 +0,0 @@
-@import "tailwindcss";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --font-size: 16px;
-  
-  /* Custom Color Palette - Base Colors */
-  /* Grays */
-  --gray-50: #F2F6FA;
-  --gray-100: #E9EEF5;
-  --gray-200: #DAE1EB;
-  --gray-300: #C5CDD9;
-  --gray-400: #9BA5B3;
-  --gray-500: #697280;
-  --gray-600: #464E59;
-  --gray-700: #2F3640;
-  --gray-800: #1A1F26;
-  --gray-900: #000000;
-  --white: #FFFFFF;
-  
-  /* Purple (Primary Brand Color) */
-  --purple-50: #F6E9FF;
-  --purple-100: #DAA6FF;
-  --purple-200: #BB6DF2;
-  --purple-500: #7F26BF;
-  --purple-600: #5B158C;
-  --purple-700: #420F66;
-  
-  /* Blue */
-  --blue-50: #E2E9FF;
-  --blue-100: #AABCF2;
-  --blue-200: #667FCC;
-  --blue-500: #1C2F8C;
-  --blue-600: #0F1E66;
-  --blue-700: #061040;
-  
-  /* Cyan */
-  --cyan-50: #D8EFFF;
-  --cyan-100: #8CCFFF;
-  --cyan-200: #3DA7F2;
-  --cyan-500: #0086E6;
-  --cyan-600: #0053A6;
-  --cyan-700: #003066;
-  
-  /* Teal */
-  --teal-50: #D4F5F5;
-  --teal-100: #9DF2F2;
-  --teal-200: #5CE6E6;
-  --teal-500: #14CCCC;
-  --teal-600: #00A7A7;
-  --teal-700: #045659;
-  
-  /* Green */
-  --green-50: #D3FBDD;
-  --green-100: #91F2AA;
-  --green-200: #57D977;
-  --green-500: #24B347;
-  --green-600: #007F2A;
-  --green-700: #004D19;
-  
-  /* Yellow */
-  --yellow-50: #FFF7CC;
-  --yellow-100: #FFDD99;
-  --yellow-200: #FFC859;
-  --yellow-500: #FAB325;
-  --yellow-600: #E6960B;
-  --yellow-700: #CC7C04;
-  
-  /* Orange */
-  --orange-50: #FFECE1;
-  --orange-100: #FFB68C;
-  --orange-200: #FF8E4C;
-  --orange-500: #F26924;
-  --orange-600: #E64D0B;
-  --orange-700: #BF3000;
-  
-  /* Red */
-  --red-50: #FFE9EC;
-  --red-100: #FFB2B9;
-  --red-200: #FF5967;
-  --red-500: #F22435;
-  --red-600: #CC0A1A;
-  --red-700: #99000D;
-  
-  /* Pink */
-  --pink-50: #FFECF9;
-  --pink-100: #FFB2E8;
-  --pink-200: #FF66CC;
-  --pink-500: #E62EA8;
-  --pink-600: #BF0A89;
-  --pink-700: #99086D;
-  
-  /* Semantic Colors - Light Mode */
-  --background: var(--white);
-  --foreground: var(--gray-800);
-  --card: var(--white);
-  --card-foreground: var(--gray-800);
-  --popover: var(--white);
-  --popover-foreground: var(--gray-800);
-  --primary: var(--purple-500);
-  --primary-foreground: var(--white);
-  --secondary: var(--purple-50);
-  --secondary-foreground: var(--purple-700);
-  --muted: var(--gray-100);
-  --muted-foreground: var(--gray-500);
-  --accent: var(--purple-50);
-  --accent-foreground: var(--purple-600);
-  --destructive: var(--red-500);
-  --destructive-foreground: var(--white);
-  --success: var(--green-500);
-  --success-foreground: var(--white);
-  --warning: var(--yellow-500);
-  --warning-foreground: var(--gray-800);
-  --info: var(--cyan-500);
-  --info-foreground: var(--white);
-  --border: var(--gray-200);
-  --input: transparent;
-  --input-background: var(--gray-50);
-  --switch-background: var(--gray-300);
-  --ring: var(--purple-500);
-  --font-weight-medium: 500;
-  --font-weight-normal: 400;
-  
-  /* Charts - Acessibilidade melhorada com Balanceamento Óptico */
-  --chart-1: var(--purple-500); /* Brand Color (Vibrante) */
-  --chart-2: var(--cyan-600);   /* Darkened for contrast */
-  --chart-3: var(--green-600);  /* Darkened for contrast */
-  --chart-4: var(--orange-600); /* Darkened for contrast */
-  --chart-5: var(--pink-600);   /* Darkened for contrast */
-  
-  /* Border Radius */
-  --radius: 0.625rem;
-  
-  /* Sidebar */
-  --sidebar: var(--white);
-  --sidebar-foreground: var(--gray-800);
-  --sidebar-primary: var(--purple-500);
-  --sidebar-primary-foreground: var(--white);
-  --sidebar-accent: var(--purple-50);
-  --sidebar-accent-foreground: var(--purple-700);
-  --sidebar-border: var(--gray-200);
-  --sidebar-ring: var(--purple-500);
-}
-
-.dark {
-  /* Semantic Colors - Dark Mode */
-  --background: var(--gray-800);
-  --foreground: var(--gray-50);
-  --card: var(--gray-700);
-  --card-foreground: var(--gray-50);
-  --popover: var(--gray-700);
-  --popover-foreground: var(--gray-50);
-  --primary: var(--purple-200);
-  --primary-foreground: var(--gray-900);
-  --secondary: var(--gray-700);
-  --secondary-foreground: var(--gray-50);
-  --muted: var(--gray-600);
-  --muted-foreground: var(--gray-300);
-  --accent: var(--purple-700);
-  --accent-foreground: var(--purple-100);
-  --destructive: var(--red-600);
-  --destructive-foreground: var(--white);
-  --success: var(--green-600);
-  --success-foreground: var(--white);
-  --warning: var(--yellow-600);
-  --warning-foreground: var(--white);
-  --info: var(--cyan-600);
-  --info-foreground: var(--white);
-  --border: var(--gray-600);
-  --input: var(--gray-600);
-  --input-background: var(--gray-700);
-  --switch-background: var(--gray-600);
-  --ring: var(--purple-200);
-  
-  /* Charts - Dark Mode */
-  --chart-1: var(--purple-200);
-  --chart-2: var(--cyan-200);
-  --chart-3: var(--green-200);
-  --chart-4: var(--orange-200);
-  --chart-5: var(--pink-200);
-  
-  /* Sidebar - Dark Mode */
-  --sidebar: var(--gray-800);
-  --sidebar-foreground: var(--gray-50);
-  --sidebar-primary: var(--purple-200);
-  --sidebar-primary-foreground: var(--gray-900);
-  --sidebar-accent: var(--gray-700);
-  --sidebar-accent-foreground: var(--purple-100);
-  --sidebar-border: var(--gray-600);
-  --sidebar-ring: var(--purple-200);
-}
-
-@theme inline {
-  /* Semantic Colors */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-input-background: var(--input-background);
-  --color-switch-background: var(--switch-background);
-  --color-ring: var(--ring);
-  
-  /* Charts */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  
-  /* Border Radius */
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  
-  /* Sidebar */
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  
-  /* Raw Color Palette */
-  --color-gray-50: var(--gray-50);
-  --color-gray-100: var(--gray-100);
-  --color-gray-200: var(--gray-200);
-  --color-gray-300: var(--gray-300);
-  --color-gray-400: var(--gray-400);
-  --color-gray-500: var(--gray-500);
-  --color-gray-600: var(--gray-600);
-  --color-gray-700: var(--gray-700);
-  --color-gray-800: var(--gray-800);
-  --color-purple-50: var(--purple-50);
-  --color-purple-100: var(--purple-100);
-  --color-purple-200: var(--purple-200);
-  --color-purple-500: var(--purple-500);
-  --color-purple-600: var(--purple-600);
-  --color-purple-700: var(--purple-700);
-  --color-blue-50: var(--blue-50);
-  --color-blue-100: var(--blue-100);
-  --color-blue-200: var(--blue-200);
-  --color-blue-500: var(--blue-500);
-  --color-blue-600: var(--blue-600);
-  --color-blue-700: var(--blue-700);
-  --color-cyan-50: var(--cyan-50);
-  --color-cyan-100: var(--cyan-100);
-  --color-cyan-200: var(--cyan-200);
-  --color-cyan-500: var(--cyan-500);
-  --color-cyan-600: var(--cyan-600);
-  --color-cyan-700: var(--cyan-700);
-  --color-teal-50: var(--teal-50);
-  --color-teal-100: var(--teal-100);
-  --color-teal-200: var(--teal-200);
-  --color-teal-500: var(--teal-500);
-  --color-teal-600: var(--teal-600);
-  --color-teal-700: var(--teal-700);
-  --color-green-50: var(--green-50);
-  --color-green-100: var(--green-100);
-  --color-green-200: var(--green-200);
-  --color-green-500: var(--green-500);
-  --color-green-600: var(--green-600);
-  --color-green-700: var(--green-700);
-  --color-yellow-50: var(--yellow-50);
-  --color-yellow-100: var(--yellow-100);
-  --color-yellow-200: var(--yellow-200);
-  --color-yellow-500: var(--yellow-500);
-  --color-yellow-600: var(--yellow-600);
-  --color-yellow-700: var(--yellow-700);
-  --color-orange-50: var(--orange-50);
-  --color-orange-100: var(--orange-100);
-  --color-orange-200: var(--orange-200);
-  --color-orange-500: var(--orange-500);
-  --color-orange-600: var(--orange-600);
-  --color-orange-700: var(--orange-700);
-  --color-red-50: var(--red-50);
-  --color-red-100: var(--red-100);
-  --color-red-200: var(--red-200);
-  --color-red-500: var(--red-500);
-  --color-red-600: var(--red-600);
-  --color-red-700: var(--red-700);
-  --color-pink-50: var(--pink-50);
-  --color-pink-100: var(--pink-100);
-  --color-pink-200: var(--pink-200);
-  --color-pink-500: var(--pink-500);
-  --color-pink-600: var(--pink-600);
-  --color-pink-700: var(--pink-700);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/**
- * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
- */
-@layer base {
-  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) {
-    h1 {
-      font-size: var(--text-2xl);
-      font-weight: var(--font-weight-medium);
-      line-height: 1.5;
-    }
-
-    h2 {
-      font-size: var(--text-xl);
-      font-weight: var(--font-weight-medium);
-      line-height: 1.5;
-    }
-
-    h3 {
-      font-size: var(--text-lg);
-      font-weight: var(--font-weight-medium);
-      line-height: 1.5;
-    }
-
-    h4 {
-      font-size: var(--text-base);
-      font-weight: var(--font-weight-medium);
-      line-height: 1.5;
-    }
-
-    p {
-      font-size: var(--text-base);
-      font-weight: var(--font-weight-normal);
-      line-height: 1.5;
-    }
-
-    label {
-      font-size: var(--text-base);
-      font-weight: var(--font-weight-medium);
-      line-height: 1.5;
-    }
-
-    button {
-      font-size: var(--text-base);
-      font-weight: var(--font-weight-medium);
-      line-height: 1.5;
-    }
-
-    input {
-      font-size: var(--text-base);
-      font-weight: var(--font-weight-normal);
-      line-height: 1.5;
-    }
-  }
-}
-
-html {
-  font-size: var(--font-size);
-}
-
-/* ============================================
-   Print Styles
-   ============================================ */
-
-@media print {
-  /* Ocultar elementos desnecessários na impressão */
-  .no-print {
-    display: none !important;
-  }
-
-  /* Forçar impressão em cores */
-  * {
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-    color-adjust: exact !important;
-  }
-
-  /* Configuração da página */
-  @page {
-    margin: 2cm;
-    size: A4 portrait;
-  }
-
-  /* Evitar quebras de página indesejadas */
-  .avoid-break {
-    page-break-inside: avoid !important;
-    break-inside: avoid !important;
-  }
-
-  /* Quebra de página forçada */
-  .page-break {
-    page-break-before: always !important;
-    break-before: page !important;
-  }
-
-  /* Layout específico para tabelas */
-  table {
-    page-break-inside: auto !important;
-  }
-
-  tr {
-    page-break-inside: avoid !important;
-    page-break-after: auto !important;
-  }
-
-  thead {
-    display: table-header-group !important;
-  }
-
-  tfoot {
-    display: table-footer-group !important;
-  }
-
-  /* Remover sombras e bordas arredondadas para impressão limpa */
-  .contract-template,
-  .print-template {
-    box-shadow: none !important;
-    border-radius: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-
-  /* Garantir que textos primários sejam visíveis */
-  .text-primary {
-    color: #7F26BF !important;
-  }
-
-  /* Garantir bordas visíveis */
-  .border-primary {
-    border-color: #7F26BF !important;
-  }
-
-  /* Ajustar cores de fundo para impressão */
-  .bg-gray-50,
-  .bg-gray-100 {
-    background-color: #F2F6FA !important;
-  }
-
-  /* Ocultar elementos interativos */
-  button:not(.print-keep),
-  .hover\:opacity-100,
-  [role="button"]:not(.print-keep) {
-    display: none !important;
-  }
-
-  /* Garantir que cabeçalhos e rodapés sejam impressos */
-  .print-header,
-  .print-footer {
-    display: block !important;
-  }
-
-  /* Ajustar espaçamentos para impressão */
-  body {
-    background: white !important;
-    color: black !important;
-  }
-}