@flowtomic/ui 0.1.4 → 0.1.5

package/dist/styles/globals.css

@@ -0,0 +1,489 @@
+@import "tailwindcss";
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");
+@import "tw-animate-css";
+
+/* Input glow effect - renderizado dentro do próprio input (Email e Password) */
+.email-glow-focused input {
+  animation: emailGlowPulse 2s ease-in-out infinite;
+}
+
+/* Efeito de glow usando pseudo-elemento no container do Input (Email) */
+.email-glow-focused > div > div::after {
+  content: "";
+  position: absolute;
+  top: 1.75rem;
+  left: 0;
+  right: 0;
+  height: 2.75rem;
+  border-radius: 0.375rem;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(91, 95, 237, 0.4) 0%,
+    rgba(91, 95, 237, 0.2) 50%,
+    transparent 100%
+  );
+  filter: blur(12px);
+  z-index: 0;
+  opacity: 0;
+  animation: emailGlowFade 2s ease-in-out infinite;
+  pointer-events: none;
+}
+
+/* Efeito de glow para PasswordInput (estrutura diferente) */
+.email-glow-focused > div > div > div {
+  position: relative;
+}
+
+.email-glow-focused > div > div > div > input {
+  position: relative;
+  z-index: 1;
+}
+
+.email-glow-focused > div > div > div::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 0.375rem;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(91, 95, 237, 0.4) 0%,
+    rgba(91, 95, 237, 0.2) 50%,
+    transparent 100%
+  );
+  filter: blur(12px);
+  z-index: 0;
+  opacity: 0;
+  animation: emailGlowFade 2s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes emailGlowPulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(91, 95, 237, 0);
+  }
+
+  50% {
+    box-shadow: 0 0 20px 5px rgba(91, 95, 237, 0.3);
+  }
+}
+
+@keyframes emailGlowFade {
+  0%,
+  100% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  :root {
+    /* Background & Surface */
+    --background: 0 0% 100%;
+    --surface: 249 100% 98%;
+    --surface-hover: 210 40% 96%;
+
+    /* Foreground & Text */
+    --foreground: 222.2 84% 4.9%;
+    --text-primary: 222.2 84% 4.9%;
+    --text-secondary: 215.4 16.3% 46.9%;
+
+    /* Card */
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    /* Popover */
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    /* Primary Colors - Purple */
+    --primary: 262 85% 58%;
+    --primary-foreground: 0 0% 100%;
+    --primary-hover: 265 73% 50%;
+
+    /* Secondary Colors - Purple */
+    --secondary: 258 90% 66%;
+    --secondary-foreground: 0 0% 100%;
+    --secondary-hover: 262 85% 58%;
+
+    /* Accent Colors - Purple */
+    --accent: 252 94% 76%;
+    --accent-foreground: 262 85% 58%;
+    --accent-hover: 258 90% 66%;
+
+    /* Success Colors - Verde com melhor contraste */
+    --success: 142 76% 36%;
+    --success-foreground: 0 0% 100%;
+    --success-hover: 142 76% 30%;
+
+    /* Warning Colors - Amarelo com melhor contraste */
+    --warning: 38 92% 50%;
+    --warning-foreground: 38 92% 20%;
+    --warning-hover: 38 92% 45%;
+
+    /* Info Colors - Azul com melhor contraste */
+    --info: 217 91% 50%;
+    --info-foreground: 217 91% 20%;
+    --info-hover: 217 91% 45%;
+
+    /* Error/Destructive Colors - Vermelho para erros e ações destrutivas */
+    --error: 0 84% 60%;
+    --error-foreground: 0 84% 20%;
+    --error-hover: 0 84% 50%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 84% 20%;
+
+    /* Muted Colors */
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    /* Border & Input */
+    --border: 214.3 31.8% 91.4%;
+    --border-hover: 213 31% 82%;
+    --input: 214.3 31.8% 91.4%;
+
+    /* Ring (Focus) - Purple */
+    --ring: 262 85% 58%;
+
+    /* Radius */
+    --radius: 0.75rem;
+
+    /* Design System Tokens */
+    /* Componentes */
+    --ds-button-radius: 0.375rem;
+    --ds-input-radius: 0.375rem;
+    --ds-card-radius: 0.5rem;
+    --ds-table-radius: 0.375rem;
+    --ds-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --ds-table-header-height: 3rem;
+    --ds-table-row-height: 3rem;
+
+    /* Layout */
+    --ds-layout-max-width: 7xl;
+    --ds-layout-padding: 1.5rem;
+    --ds-layout-gap: 1rem;
+
+    /* Animações */
+    --ds-animation-fast: 150ms;
+    --ds-animation-normal: 300ms;
+    --ds-animation-slow: 500ms;
+    --ds-animation-easing-linear: linear;
+    --ds-animation-easing-in: cubic-bezier(0.4, 0, 1, 1);
+    --ds-animation-easing-out: cubic-bezier(0, 0, 0.2, 1);
+    --ds-animation-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Acessibilidade */
+    --ds-focus-ring: 2px solid;
+    --ds-focus-ring-offset: 2px;
+  }
+
+  .dark {
+    /* Background & Surface */
+    --background: 222.2 84% 4.9%;
+    --surface: 217 32% 17%;
+    --surface-hover: 217 32% 25%;
+
+    /* Foreground & Text */
+    --foreground: 210 40% 98%;
+    --text-primary: 210 40% 98%;
+    --text-secondary: 215 20.2% 65.1%;
+
+    /* Card */
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    /* Popover */
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    /* Primary Colors - Purple */
+    --primary: 258 90% 66%;
+    --primary-foreground: 0 0% 100%;
+    --primary-hover: 262 85% 58%;
+
+    /* Secondary Colors - Purple */
+    --secondary: 252 94% 76%;
+    --secondary-foreground: 0 0% 100%;
+    --secondary-hover: 258 90% 66%;
+
+    /* Accent Colors - Purple */
+    --accent: 248 95% 85%;
+    --accent-foreground: 0 0% 100%;
+    --accent-hover: 252 94% 76%;
+
+    /* Success Colors - Verde com melhor contraste para dark mode */
+    --success: 142 76% 45%;
+    --success-foreground: 142 76% 85%;
+    --success-hover: 142 76% 55%;
+
+    /* Warning Colors - Amarelo com melhor contraste para dark mode */
+    --warning: 38 92% 55%;
+    --warning-foreground: 38 92% 85%;
+    --warning-hover: 38 92% 65%;
+
+    /* Info Colors - Azul com melhor contraste para dark mode */
+    --info: 217 91% 55%;
+    --info-foreground: 217 91% 85%;
+    --info-hover: 217 91% 65%;
+
+    /* Error/Destructive Colors - Vermelho para erros e ações destrutivas (dark mode) */
+    --error: 0 84% 60%;
+    --error-foreground: 0 84% 85%;
+    --error-hover: 0 72% 70%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 84% 85%;
+
+    /* Muted Colors */
+    --muted: 217 32% 17%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    /* Border & Input */
+    --border: 217 32% 17%;
+    --border-hover: 217 32% 25%;
+    --input: 217 33% 30%;
+
+    /* Ring (Focus) - Purple */
+    --ring: 258 90% 66%;
+  }
+}
+
+@theme {
+  /* Cores customizadas mapeadas para o Tailwind v4 */
+  /* Essas cores referenciam as variáveis CSS definidas em globals.css */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
+  --color-error: hsl(var(--error));
+  --color-error-foreground: hsl(var(--error-foreground));
+  --color-surface: hsl(var(--surface));
+  --color-surface-hover: hsl(var(--surface-hover));
+  --color-text-primary: hsl(var(--text-primary));
+  --color-text-secondary: hsl(var(--text-secondary));
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+    font-family:
+      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+      "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.6;
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
+  }
+}
+
+@layer components {
+  /* Componentes customizados do Design System */
+  .ds-card {
+    @apply bg-card text-card-foreground rounded-lg border shadow-sm;
+  }
+
+  .ds-card-hover {
+    @apply hover:shadow-lg transition-shadow duration-200;
+  }
+
+  .ds-button {
+    @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none;
+  }
+
+  .ds-input {
+    @apply flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  .ds-badge {
+    @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
+  }
+
+  .ds-table {
+    @apply w-full caption-bottom text-sm;
+  }
+
+  .ds-table-header {
+    @apply [&_tr]:border-b;
+  }
+
+  .ds-table-body {
+    @apply [&_tr:last-child]:border-0;
+  }
+
+  .ds-table-row {
+    @apply border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted;
+  }
+
+  .ds-table-head {
+    @apply h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0;
+  }
+
+  .ds-table-cell {
+    @apply p-4 align-middle [&:has([role=checkbox])]:pr-0;
+  }
+}
+
+@layer utilities {
+  /* Utilitários customizados */
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .text-pretty {
+    text-wrap: pretty;
+  }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  .animate-in {
+    animation: fadeIn 0.5s ease-in-out;
+  }
+
+  .animate-slide-up {
+    animation: slideUp 0.3s ease-out;
+  }
+
+  .animate-slide-down {
+    animation: slideDown 0.3s ease-out;
+  }
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--surface));
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--text-secondary));
+}
+
+:root {
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+  --sidebar: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@theme inline {
+  --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);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  --animate-shiny-text: shiny-text 3s infinite;
+  @keyframes shiny-text {
+    0% {
+      background-position: calc(-1 * var(--shiny-width)) 0;
+    }
+    100% {
+      background-position: calc(100% + var(--shiny-width)) 0;
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}