@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/src/theme/utilities/corner-shape.css

@@ -0,0 +1,28 @@
+/**
+ * Utilitário genérico de forma de canto (`corner-shape`), usado em conjunto com `rounded-*`.
+ *
+ * Aceita qualquer keyword válida da propriedade:
+ * - corner-normal: cantos retos, sem forma especial (reseta pro comportamento padrão)
+ * - corner-round: cantos arredondados tradicionais
+ * - corner-bevel: cantos chanfrados (corte reto na diagonal)
+ * - corner-scoop: cantos "escavados" (curva côncava, oposta ao arredondado)
+ * - corner-notch: cantos com entalhe (recorte quadrado na diagonal)
+ * - corner-squircle: forma intermediária entre quadrado e círculo, com curva mais suave e orgânica
+ *
+ * Também aceita valor arbitrário, ex.: corner-[superellipse(2.5)].
+ *
+ * Suporte de navegador: `corner-shape` é feature nova (Chromium/Chrome 139+),
+ * ainda sem suporte em Firefox/Safari — degrada de forma segura pro border-radius
+ * comum onde não suportado.
+ */
+@utility corner-* {
+  corner-shape: --value(
+    "normal",
+    "round",
+    "bevel",
+    "notch",
+    "scoop",
+    "squircle",
+    [*]
+  );
+}

package/src/theme/utilities/focus-ring.css

@@ -0,0 +1,62 @@
+/**
+ * Utilities de anel de foco (focus ring), construídas sobre `--tw-ring-color`.
+ *
+ * Existem três variantes para cobrir os padrões visuais mais comuns:
+ * - focus-ring-outside: anel deslocado para fora do elemento, com offset
+ * - focus-ring-inside: anel encostado na borda interna, sem offset
+ * - focus-ring-mixed: anel mais espesso que também colore a borda
+ *
+ * Todas respondem ao :focus-visible nativo, ao [data-focus-visible] usado pelas
+ * primitivas do Base UI e a um filho direto marcado com [data-focus-ring] que
+ * recebe foco pelo teclado. Esse último serve quando o anel não pode ser pintado
+ * pelo próprio elemento focado — ex.: o viewport do ScrollArea, cuja máscara de
+ * fade apagaria o anel. O filho se marca; o pai pinta.
+ */
+@utility focus-ring-outside {
+  &:is(
+      :focus-visible,
+      [data-focus-visible],
+      :has(> [data-focus-ring]:focus-visible)
+    ) {
+    /* Offset positivo: o anel fica fora do elemento, sem sobrepor o conteúdo */
+    outline-width: var(--focus-ring-width, 2px);
+    outline-offset: var(--focus-ring-offset, 2px);
+    outline-style: solid;
+    outline-color: var(--tw-ring-color);
+  }
+}
+
+@utility focus-ring-inside {
+  &:is(
+      :focus-visible,
+      [data-focus-visible],
+      :has(> [data-focus-ring]:focus-visible)
+    ) {
+    /*
+     * Sem offset: útil quando não há espaço ao redor do elemento (ex.: inputs).
+     *
+     * Use `--focus-ring-offset` negativo quando o elemento estiver dentro de um
+     * ancestral com `overflow: hidden` — no offset padrão o anel é desenhado
+     * exatamente na borda e acaba recortado.
+     */
+    outline-offset: var(--focus-ring-offset, 0px);
+    outline-width: var(--focus-ring-width, 1px);
+    outline-style: solid;
+    outline-color: var(--tw-ring-color);
+    border-color: var(--tw-ring-color);
+  }
+}
+
+@utility focus-ring-mixed {
+  &:is(
+      :focus-visible,
+      [data-focus-visible],
+      :has(> [data-focus-ring]:focus-visible)
+    ) {
+    /* Anel espesso + borda colorida: combina os dois estilos para maior destaque */
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: solid;
+    outline-color: var(--tw-ring-color);
+    border-color: var(--tw-ring-color);
+  }
+}

package/src/theme/utilities/grid-auto-columns.css

@@ -0,0 +1,33 @@
+/**
+ * Grid com colunas automáticas a partir de largura mínima (sem breakpoints manuais).
+ *
+ * - grid-auto-fill-*: mantém os "slots" mesmo vazios (alinhamento previsível entre linhas).
+ * - grid-auto-fit-*: colapsa slots vazios e estica os itens existentes.
+ *
+ * `min(valor, 100%)` evita overflow horizontal quando o container é menor que a largura mínima.
+ *
+ * Cada utility tem duas declarações da mesma propriedade (uma linha só quebra os valores
+ * da escala): --value(integer) sozinho não passa por --spacing(), vira número cru e o
+ * navegador descarta a declaração. Tailwind gera só a que faz sentido por classe.
+ */
+@utility grid-auto-fill-* {
+  grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(--value([length]), 100%), 1fr)
+    );
+  grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(--spacing(--value(integer)), 100%), 1fr)
+    );
+}
+
+@utility grid-auto-fit-* {
+  grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(--value([length]), 100%), 1fr)
+    );
+  grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(--spacing(--value(integer)), 100%), 1fr)
+    );
+}

package/src/theme/utilities/index.css

@@ -0,0 +1,3 @@
+@import "./grid-auto-columns.css";
+@import "./corner-shape.css";
+@import "./focus-ring.css";

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.