@iclips/ui 1.4.13 → 2.0.0

package/dist/preset.css

@@ -0,0 +1,352 @@
+/* ============================================================================
+   @iclips/ui — preset para consumidores com Tailwind v4.
+
+   Modo B (bundle sob demanda) — no CSS do app:
+
+       @import "tailwindcss";
+       @import "@iclips/ui/preset.css";
+       @source "../node_modules/@iclips/ui/dist";
+
+   Traz tudo que o build de Tailwind do app precisa para resolver as classes dos
+   componentes da lib: tokens, variante `dark`, camada base, animações de overlay
+   e o CSS de componente escrito à mão (alert / toast / input-group / tipografia).
+   As classes utilitárias em si (`bg-primary`, `rounded-md`, `dark:*`…) são
+   geradas pelo `@source` a partir do `dist/` da lib.
+
+   Requer `tw-animate-css` instalado (peer dep opcional) — as classes
+   `animate-in` / `slide-*` / `zoom-*` dos overlays do Radix vêm de lá.
+
+   Quem NÃO usa Tailwind: use `@iclips/ui/styles.css` (tudo pré-compilado, modo A).
+   ============================================================================ */
+
+/* Utilitários de animação usados pelos overlays do Radix. */
+@import "tw-animate-css";
+/* Tokens (primitivos + semânticos + @theme). */
+@import "./tokens.css";
+/* CSS de componente escrito à mão (color-mix — não são utilitários Tailwind). */
+@import "./alert-theme.css";
+@import "./toast-theme.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+  }
+
+  /* ============================================
+     Autofill Override
+     Evita que o browser sobreponha o fundo do input
+     com a cor de autofill (branco/amarelo) no dark mode.
+     Usa inset box-shadow para "pintar por cima" da cor do browser.
+     ============================================ */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px var(--input-background) inset !important;
+    -webkit-text-fill-color: var(--foreground) !important;
+    caret-color: var(--foreground);
+    /* Excluir box-shadow da transition: garante que o inset seja aplicado
+       instantaneamente, evitando o flash branco causado pela animação
+       do transition-[box-shadow] do Tailwind no hover do autofill */
+    transition: color 5000s ease-in-out 0s,
+                background-color 5000s ease-in-out 0s !important;
+  }
+}
+
+/**
+ * A lib NÃO impõe tipografia em elementos nus do documento hospedeiro.
+ * Antes daqui viviam regras `h1..h6 / p / label / button / input` globais —
+ * removidas por vazarem para fora dos componentes da lib e brigarem com o
+ * Preflight do Tailwind e com a camada base do app consumidor (padrão
+ * shadcn/Radix: o design system estiliza `body` e os próprios componentes,
+ * nunca os elementos nus do app).
+ *
+ * A escala tipográfica do Figma continua documentada em
+ * `Fundamentos/Tipografia` no Storybook e disponível via classes utilitárias
+ * (`text-all-caps-*`, `text-short-*`, `text-long-*`), a escala `text-*` do
+ * Tailwind e os tokens `--font-weight-*`.
+ */
+
+/* ============================================
+   Typography Utility Classes
+   ============================================ */
+
+/* All Caps (Bold + Uppercase) */
+.text-all-caps-3 {
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.2;
+  letter-spacing: 0.02em; /* 2% tracking */
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+}
+
+.text-all-caps-2 {
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.2;
+  letter-spacing: 0.02em;
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+}
+
+.text-all-caps-1 {
+  font-size: 0.625rem; /* 10px */
+  line-height: 1.2;
+  letter-spacing: 0.02em;
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+}
+
+/* Short (Regular + Tight Leading) */
+.text-short-3 {
+  font-size: 1rem; /* 16px */
+  line-height: 1.2;
+  font-weight: var(--font-weight-normal);
+}
+
+.text-short-2 {
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.2;
+  font-weight: var(--font-weight-normal);
+}
+
+.text-short-1 {
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.2;
+  font-weight: var(--font-weight-normal);
+}
+
+/* Long (Regular + Relaxed Leading) */
+.text-long-3 {
+  font-size: 1rem; /* 16px */
+  line-height: 1.4;
+  font-weight: var(--font-weight-normal);
+}
+
+.text-long-2 {
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.4;
+  font-weight: var(--font-weight-normal);
+}
+
+.text-long-1 {
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.4;
+  font-weight: var(--font-weight-normal);
+}
+
+html {
+  font-size: var(--font-size);
+}
+
+/* ============================================
+   Reduced Motion
+   Respeita a preferência do sistema: neutraliza animações e transições
+   (inclusive as de entrada/saída do Radix e o shimmer do Skeleton),
+   mantendo o estado final visível.
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ============================================
+   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: var(--primary) !important;
+  }
+
+  /* Garantir bordas visíveis */
+  .border-primary {
+    border-color: var(--primary) !important;
+  }
+
+  /* Ajustar cores de fundo para impressão */
+  .bg-gray-50,
+  .bg-gray-100 {
+    background-color: var(--gray-50) !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;
+  }
+}
+
+/* ============================================
+   Input Group Styles
+   ============================================ */
+
+.cn-input-group {
+  @apply border-input bg-input-background h-9 rounded-md border shadow-xs transition-[color,box-shadow];
+
+  /* Variants based on alignment */
+  &:has([data-align=inline-start]) [data-slot=input-group-control] {
+    @apply pl-2;
+  }
+
+  &:has([data-align=inline-end]) [data-slot=input-group-control] {
+    @apply pr-2;
+  }
+
+  &:has([data-align=block-start]) {
+    @apply h-auto flex-col;
+
+    & [data-slot=input-group-control] {
+      @apply pb-3;
+    }
+  }
+
+  &:has([data-align=block-end]) {
+    @apply h-auto flex-col;
+
+    & [data-slot=input-group-control] {
+      @apply pt-3;
+    }
+  }
+
+  /* Focus state */
+  &:focus-within {
+    @apply border-ring ring-ring/50 ring-[3px];
+  }
+
+  /* Invalid state */
+  &:has([aria-invalid=true]) {
+    @apply border-destructive ring-destructive/20 dark:ring-destructive/40;
+  }
+
+  /* Disabled state */
+  &:has([data-slot=input-group-control]:disabled) {
+    @apply opacity-50;
+  }
+}
+
+.cn-input-group-input,
+.cn-input-group-textarea {
+  @apply border-none shadow-none ring-0 focus-visible:ring-0 focus-visible:border-transparent;
+}
+
+.cn-input-group-addon {
+  @apply text-muted-foreground flex h-auto gap-2 py-1.5 text-sm font-medium;
+  @apply [&>svg:not([class*='size-'])]:size-4;
+  @apply [&>kbd]:rounded-[calc(var(--radius)-5px)];
+  @apply group-data-[disabled=true]/input-group:opacity-50;
+}
+
+.cn-input-group-addon-align-inline-start {
+  @apply pl-3;
+  @apply has-[>button]:ml-[-0.45rem];
+  @apply has-[>kbd]:ml-[-0.35rem];
+}
+
+.cn-input-group-addon-align-inline-end {
+  @apply pr-3;
+  @apply has-[>button]:mr-[-0.4rem];
+  @apply has-[>kbd]:mr-[-0.35rem];
+}
+
+.cn-input-group-addon-align-block-start {
+  @apply px-3 pt-3;
+  @apply border-b;
+
+  .cn-input-group:has([data-slot=input-group-control]:is(input)) & {
+    @apply pt-2.5;
+  }
+}
+
+.cn-input-group-addon-align-block-end {
+  @apply px-3 pb-3;
+  @apply border-t;
+
+  .cn-input-group:has([data-slot=input-group-control]:is(input)) & {
+    @apply pb-2.5;
+  }
+}

package/dist/toast-theme.css

@@ -0,0 +1,100 @@
+/*
+ * Toast Variant Theme Styles
+ * Uses CSS variables for automatic dark/light mode adaptation.
+ * These classes are referenced by toast.tsx (sonner) classNames map.
+ *
+ * Sonner renders each toast with `unstyled: true`, so the variant class
+ * (`toast-variant-*`) lands on the toast element, which also carries
+ * `data-sonner-toast` and `data-type="error|success|warning|info"`.
+ * Inner elements: `[data-title]`, `[data-description]`, `[data-icon]`.
+ *
+ * Same recipe as alert-theme.css. Variables used (defined in tokens.css,
+ * change between modes):
+ *   --info        → cyan-600 (light) / cyan-600 (dark)
+ *   --success     → green-600 (light) / green-600 (dark)
+ *   --warning     → yellow-500 (light) / yellow-600 (dark)
+ *   --destructive → red-600 (light) / red-600 (dark)
+ *   --foreground  → gray-800 (light) / gray-50 (dark)
+ *   --card        → white (light) / gray-700 (dark)
+ *   --border      → gray-200 (light) / gray-600 (dark)
+ */
+
+/* ── Error ────────────────────────────────────────────────── */
+[data-sonner-toast].toast-variant-error {
+  color: color-mix(in oklab, var(--destructive) 80%, var(--foreground));
+  background-color: color-mix(in oklab, var(--destructive) 22%, var(--card));
+  border-color: color-mix(in oklab, var(--destructive) 50%, var(--border));
+}
+
+[data-sonner-toast].toast-variant-error [data-icon] {
+  color: var(--destructive);
+}
+
+[data-sonner-toast].toast-variant-error [data-title] {
+  color: color-mix(in oklab, var(--destructive) 80%, var(--foreground));
+}
+
+[data-sonner-toast].toast-variant-error [data-description] {
+  color: color-mix(in oklab, var(--destructive) 65%, var(--foreground));
+}
+
+/* ── Success ──────────────────────────────────────────────── */
+[data-sonner-toast].toast-variant-success {
+  color: color-mix(in oklab, var(--success) 80%, var(--foreground));
+  background-color: color-mix(in oklab, var(--success) 22%, var(--card));
+  border-color: color-mix(in oklab, var(--success) 50%, var(--border));
+}
+
+[data-sonner-toast].toast-variant-success [data-icon] {
+  color: var(--success);
+}
+
+[data-sonner-toast].toast-variant-success [data-title] {
+  color: color-mix(in oklab, var(--success) 80%, var(--foreground));
+}
+
+[data-sonner-toast].toast-variant-success [data-description] {
+  color: color-mix(in oklab, var(--success) 65%, var(--foreground));
+}
+
+/* ── Warning ──────────────────────────────────────────────── */
+/* --warning é o único token de status "claro" (yellow-500). Derivar texto
+   com o mesmo 80/65% dos outros deixaria ~2,4:1 sobre o fundo pálido — abaixo
+   de AA. O texto do warning mistura muito mais --foreground (fica âmbar
+   escuro); o ícone continua no amarelo cheio. */
+[data-sonner-toast].toast-variant-warning {
+  color: color-mix(in oklab, var(--warning) 32%, var(--foreground));
+  background-color: color-mix(in oklab, var(--warning) 22%, var(--card));
+  border-color: color-mix(in oklab, var(--warning) 50%, var(--border));
+}
+
+[data-sonner-toast].toast-variant-warning [data-icon] {
+  color: color-mix(in oklab, var(--warning) 80%, var(--foreground));
+}
+
+[data-sonner-toast].toast-variant-warning [data-title] {
+  color: color-mix(in oklab, var(--warning) 32%, var(--foreground));
+}
+
+[data-sonner-toast].toast-variant-warning [data-description] {
+  color: color-mix(in oklab, var(--warning) 26%, var(--foreground));
+}
+
+/* ── Info ─────────────────────────────────────────────────── */
+[data-sonner-toast].toast-variant-info {
+  color: color-mix(in oklab, var(--info) 80%, var(--foreground));
+  background-color: color-mix(in oklab, var(--info) 22%, var(--card));
+  border-color: color-mix(in oklab, var(--info) 50%, var(--border));
+}
+
+[data-sonner-toast].toast-variant-info [data-icon] {
+  color: var(--info);
+}
+
+[data-sonner-toast].toast-variant-info [data-title] {
+  color: color-mix(in oklab, var(--info) 80%, var(--foreground));
+}
+
+[data-sonner-toast].toast-variant-info [data-description] {
+  color: color-mix(in oklab, var(--info) 65%, var(--foreground));
+}