@iclips/ui 1.0.0 → 1.0.2

package/styles/globals.css

@@ -1,694 +0,0 @@
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --font-size: 16px;
-  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-
-  /* Typography Scale */
-  --text-xs: 0.75rem;
-  /* 12px */
-  --text-sm: 0.875rem;
-  /* 14px */
-  --text-base: 1rem;
-  /* 16px */
-  --text-lg: 1.125rem;
-  /* 18px */
-  --text-xl: 1.25rem;
-  /* 20px */
-  --text-2xl: 1.5rem;
-  /* 24px */
-  --text-3xl: 1.875rem;
-  /* 30px */
-  --text-4xl: 2.25rem;
-  /* 36px */
-
-  /* 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);
-}
-
-/* ============================================
-   Micro-Animations (Premium)
-   ============================================ */
-
-/* Keyframes */
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-@keyframes scale-in {
-  0% {
-    transform: scale(0.95);
-    opacity: 0;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes scale-out {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  100% {
-    transform: scale(0.95);
-    opacity: 0;
-  }
-}
-
-@keyframes shake {
-
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: translateX(-4px);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: translateX(4px);
-  }
-}
-
-@keyframes checkmark-draw {
-  0% {
-    stroke-dashoffset: 24;
-  }
-
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes success-pop {
-  0% {
-    transform: scale(0);
-  }
-
-  50% {
-    transform: scale(1.2);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes slide-up-fade {
-  0% {
-    transform: translateY(8px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slide-down-fade {
-  0% {
-    transform: translateY(-8px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Animation Utility Classes */
-.animate-shimmer {
-  animation: shimmer 2s infinite linear;
-  background: linear-gradient(90deg,
-      var(--muted) 0%,
-      var(--accent) 50%,
-      var(--muted) 100%);
-  background-size: 200% 100%;
-}
-
-.animate-scale-in {
-  animation: scale-in 200ms ease-out;
-}
-
-.animate-scale-out {
-  animation: scale-out 200ms ease-in;
-}
-
-.animate-shake {
-  animation: shake 500ms ease-in-out;
-}
-
-.animate-success-pop {
-  animation: success-pop 400ms ease-out;
-}
-
-.animate-slide-up {
-  animation: slide-up-fade 200ms ease-out;
-}
-
-.animate-slide-down {
-  animation: slide-down-fade 200ms ease-out;
-}
-
-/* Interactive Micro-Animations */
-.interactive-scale {
-  transition: transform 150ms ease, box-shadow 150ms ease;
-}
-
-.interactive-scale:hover {
-  transform: scale(1.02);
-}
-
-.interactive-scale:active {
-  transform: scale(0.98);
-}
-
-/* Button Premium Hover */
-.btn-premium {
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.btn-premium:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(127, 38, 191, 0.25);
-}
-
-.btn-premium:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 4px rgba(127, 38, 191, 0.15);
-}
-
-/* Card Premium Hover */
-.card-premium {
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.card-premium:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-}
-
-/* Skeleton Shimmer Effect */
-.skeleton-shimmer {
-  background: linear-gradient(90deg,
-      var(--accent) 0%,
-      var(--muted) 20%,
-      var(--accent) 40%,
-      var(--accent) 100%);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-}
-
-/* ============================================
-   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;
-  }
-}