@dtcode/ui 0.2.0 → 0.4.0

package/dist/material-symbols-LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/select.d.ts

@@ -0,0 +1,7 @@
+export type SelectProps = React.ComponentProps<"select"> & {
+    invalid?: boolean;
+    /** Primeira opção vazia, mostrada enquanto nada foi escolhido (ex.: "Selecione"). */
+    placeholder?: string;
+};
+/** Campo de seleção nativo, com o visual do Input. Use dentro de <Field> para rótulo, dica e erro. */
+export declare function Select({ invalid, placeholder, className, children, ...props }: SelectProps): import("react").JSX.Element;

package/dist/select.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import { Icon } from "./icon.js";
+import { controlClasses } from "./input.js";
+/** Campo de seleção nativo, com o visual do Input. Use dentro de <Field> para rótulo, dica e erro. */
+export function Select({ invalid, placeholder, className, children, ...props }) {
+    return (_jsxs("div", { className: "relative", children: [_jsxs("select", { "aria-invalid": invalid || undefined, className: controlClasses({ invalid, className: cn("peer h-10 cursor-pointer appearance-none pr-10", className) }), ...props, children: [placeholder !== undefined && (_jsx("option", { value: "", disabled: props.required, children: placeholder })), children] }), _jsx(Icon, { name: "expand_more", size: 20, className: "pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-muted transition-colors peer-focus:text-accent" })] }));
+}

package/dist/sheet.d.ts

@@ -0,0 +1,26 @@
+import * as RadixDialog from "@radix-ui/react-dialog";
+export declare const Sheet: import("react").FC<RadixDialog.DialogProps>;
+export declare const SheetTrigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SheetClose: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type SheetContentProps = Omit<React.ComponentProps<typeof RadixDialog.Content>, "title"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Ações fixas no rodapé do painel (ex.: botões Salvar e Cancelar). */
+    footer?: React.ReactNode;
+};
+/** Painel lateral à direita (até 520px) para ver ou editar um item sem sair da lista. */
+export declare function SheetContent({ title, description, footer, className, children, ...props }: SheetContentProps): import("react").JSX.Element;
+/** Bloco com título dentro do painel. */
+export declare function SheetSection({ title, className, children }: {
+    title: React.ReactNode;
+    className?: string;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/** Lista de rótulo e valor (ex.: dados de um registro). */
+export declare function DefinitionList({ items, className }: {
+    items: {
+        label: React.ReactNode;
+        value: React.ReactNode;
+    }[];
+    className?: string;
+}): import("react").JSX.Element;

package/dist/sheet.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { cn } from "./cn.js";
+import { overlayClasses } from "./dialog.js";
+import { Icon } from "./icon.js";
+export const Sheet = RadixDialog.Root;
+export const SheetTrigger = RadixDialog.Trigger;
+export const SheetClose = RadixDialog.Close;
+/** Painel lateral à direita (até 520px) para ver ou editar um item sem sair da lista. */
+export function SheetContent({ title, description, footer, className, children, ...props }) {
+    return (_jsxs(RadixDialog.Portal, { children: [_jsx(RadixDialog.Overlay, { className: overlayClasses }), _jsxs(RadixDialog.Content, { ...(description ? {} : { "aria-describedby": undefined }), className: cn("fixed inset-y-0 right-0 z-50 flex w-full max-w-[520px] animate-slide-in-right flex-col border-l border-border bg-surface text-fg shadow-4 focus:outline-none", className), ...props, children: [_jsxs("div", { className: "flex items-start gap-3 border-b border-border px-6 py-5", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [_jsx(RadixDialog.Title, { className: "font-display text-lg leading-snug font-semibold", children: title }), description && _jsx(RadixDialog.Description, { className: "text-sm text-fg-2", children: description })] }), _jsx(RadixDialog.Close, { "aria-label": "Fechar", className: "-mt-1 -mr-2 grid size-9 flex-none place-items-center rounded-md text-muted transition-colors hover:bg-surface-subtle hover:text-fg", children: _jsx(Icon, { name: "close", size: 20 }) })] }), _jsx("div", { className: "grid flex-1 content-start gap-7 overflow-y-auto px-6 py-6", children: children }), footer && _jsx("div", { className: "flex flex-wrap justify-end gap-2 border-t border-border px-6 py-4", children: footer })] })] }));
+}
+/** Bloco com título dentro do painel. */
+export function SheetSection({ title, className, children }) {
+    return (_jsxs("section", { className: cn("grid gap-3", className), children: [_jsx("h3", { className: "font-display text-xs font-semibold tracking-[.1em] text-fg-2 uppercase", children: title }), children] }));
+}
+/** Lista de rótulo e valor (ex.: dados de um registro). */
+export function DefinitionList({ items, className }) {
+    return (_jsx("dl", { className: cn("grid grid-cols-[minmax(0,140px)_minmax(0,1fr)] gap-x-4 gap-y-2.5 text-sm", className), children: items.map((item, i) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-fg-2", children: item.label }), _jsx("dd", { className: "min-w-0 break-words text-fg", children: item.value })] }, i))) }));
+}

package/dist/skeleton.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Bloco de carregamento no formato do conteúdo (listas, tabelas, números).
+ * Use quando a estrutura da tela já é conhecida; para uma ação em andamento, use o Loader.
+ */
+export declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;

package/dist/skeleton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+/**
+ * Bloco de carregamento no formato do conteúdo (listas, tabelas, números).
+ * Use quando a estrutura da tela já é conhecida; para uma ação em andamento, use o Loader.
+ */
+export function Skeleton({ className, ...props }) {
+    return _jsx("div", { "aria-hidden": true, className: cn("h-4 animate-pulse rounded-md bg-border", className), ...props });
+}

package/dist/styles.css

@@ -1,6 +1,15 @@
 /* @dtcode/ui: tokens (claro e escuro), base, movimento e ícones. Importe depois do Tailwind. */
 @source "./";
 
+/* Material Symbols Rounded (Apache-2.0, ver material-symbols-LICENSE.txt): todos os ícones, peso 500, com o eixo FILL. */
+@font-face {
+  font-family: "Material Symbols Rounded";
+  font-style: normal;
+  font-weight: 500;
+  font-display: block;
+  src: url("./material-symbols-rounded.woff2") format("woff2");
+}
+
 /* Arquivo gerado por scripts/build-tokens.mjs. Não edite à mão: altere src/tokens/tokens.json. */
 
 :root {
@@ -254,7 +263,7 @@
 
 /* Base do Design System dtcode: tema escuro, fontes, movimento, estilos de base e ícones.
    Vai no dist/styles.css do pacote @dtcode/ui, no globals.css do site e no ds.css do kit para copiar (scripts/build-templates.mjs).
-   Só entra aqui o que os componentes do pacote precisam; estilos do app ficam em globals.css. */
+   Só entra aqui o que os componentes e as classes utilitárias do pacote precisam; estilos do app ficam em globals.css. */
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
@@ -269,6 +278,7 @@
   --animate-fade-up: fade-up 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
   --animate-scale-in: scale-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
   --animate-slide-in-left: slide-in-left 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
+  --animate-slide-in-right: slide-in-right 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
   --animate-pop: pop 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
   --animate-spin-in: spin-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
   --animate-shake: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) backwards;
@@ -287,6 +297,9 @@
   @keyframes slide-in-left {
     from { translate: -100% 0; }
   }
+  @keyframes slide-in-right {
+    from { translate: 100% 0; }
+  }
   @keyframes pop {
     0% { scale: 0.92; opacity: 0.6; }
     60% { scale: 1.03; opacity: 1; }
@@ -344,6 +357,71 @@
     user-select: none;
     flex: none;
   }
+
+  /* Rótulo de seção — padrão das páginas do MIV: RÓTULO ——— */
+  .eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    font: 600 0.75rem/1 var(--font-display);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--fg-2);
+  }
+  .eyebrow::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--border-strong);
+  }
+
+  .text-gradient {
+    background: var(--grad-marca);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  /* Rolagem sobre fundo escuro (sidebar): quase invisível, aparece ao passar o mouse */
+  .scrollbar-dark {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.2s;
+  }
+  .scrollbar-dark:hover,
+  .scrollbar-dark:focus-within {
+    scrollbar-color: rgb(255 255 255 / 0.22) transparent;
+  }
+  .scrollbar-dark::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+  .scrollbar-dark:hover::-webkit-scrollbar-thumb {
+    background-color: rgb(255 255 255 / 0.22);
+  }
+
+  /* Entrada em cascata dos filhos diretos */
+  .stagger > * {
+    animation: var(--animate-fade-up);
+  }
+  .stagger > :nth-child(2) { animation-delay: 25ms; }
+  .stagger > :nth-child(3) { animation-delay: 50ms; }
+  .stagger > :nth-child(4) { animation-delay: 75ms; }
+  .stagger > :nth-child(5) { animation-delay: 100ms; }
+  .stagger > :nth-child(6) { animation-delay: 125ms; }
+  .stagger > :nth-child(n + 7) { animation-delay: 150ms; }
+
+  .bg-hero {
+    background: var(--grad-hero);
+  }
+
+  .bg-dots {
+    background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1.2px);
+    background-size: 16px 16px;
+  }
+  .bg-dots-light {
+    background-image: radial-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1.2px);
+    background-size: 18px 18px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -353,3 +431,228 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Símbolo animado (AnimatedSymbol): montagem, brilho, partículas e parallax. Vai no dist/styles.css. */
+
+@layer components {
+  /*
+   * Símbolo animado (tela de login) — componente AnimatedSymbol do pacote.
+   * Ordem dos <path> no SVG oficial: losango de cima, do meio, de baixo e o chevron.
+   * Linha do tempo: 0–1,3 s peças voam de longe (desfocadas, girando) e se encaixam · ~1,3 s impacto
+   * (ondas em losango + aura + halo) · 2 s chevron pisca como cursor de terminal · 2 s+ flutuação, brilho
+   * pulsando, reflexo de luz, balanço de cada peça e partículas em losango subindo.
+   * Hover: visão explodida (as peças se afastam um pouco; --spread anima de 0 a 1).
+   * Parallax: o JS do componente define --px/--py (-1..1) conforme o ponteiro; a inclinação 3D usa
+   * `transform` no palco e o deslocamento por peça usa `transform` nos <path>, que se soma às
+   * propriedades `translate`/`rotate`/`scale` usadas pelas animações.
+   */
+  .symbol-stage {
+    --px: 0;
+    --py: 0;
+    transition: --spread 0.6s cubic-bezier(0.22, 1.3, 0.36, 1);
+  }
+  .symbol-stage:hover {
+    --spread: 1;
+  }
+  .symbol-tilt {
+    transform: perspective(800px) rotateX(calc(var(--py) * -14deg)) rotateY(calc(var(--px) * 16deg));
+    transform-style: preserve-3d;
+  }
+
+  .symbol-live {
+    overflow: visible;
+    animation:
+      symbol-float 5s ease-in-out 2s infinite,
+      symbol-glow 5s ease-in-out 1.3s infinite;
+  }
+  .symbol-live path {
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  /* unidades em px aqui são do viewBox do SVG (350 de largura) */
+  .symbol-live path:nth-of-type(1) {
+    --from: -210% -300%;
+    --spin: -150deg;
+    transform: translate(calc(var(--px) * -18px), calc(var(--py) * -14px - var(--spread) * 22px));
+    animation:
+      piece-assemble 1.25s cubic-bezier(0.22, 1.25, 0.36, 1) backwards,
+      piece-bob 3.4s ease-in-out 2s infinite;
+  }
+  .symbol-live path:nth-of-type(2) {
+    --from: 360% -80%;
+    --spin: 170deg;
+    transform: translate(calc(var(--px) * 26px + var(--spread) * 24px), calc(var(--py) * 10px));
+    animation:
+      piece-assemble 1.25s cubic-bezier(0.22, 1.25, 0.36, 1) 0.15s backwards,
+      piece-bob 3.9s ease-in-out 2.3s infinite;
+  }
+  .symbol-live path:nth-of-type(3) {
+    --from: -190% 320%;
+    --spin: 130deg;
+    transform: translate(calc(var(--px) * -10px), calc(var(--py) * 18px + var(--spread) * 22px));
+    animation:
+      piece-assemble 1.25s cubic-bezier(0.22, 1.25, 0.36, 1) 0.3s backwards,
+      piece-bob 3.6s ease-in-out 2.6s infinite;
+  }
+  .symbol-live path:nth-of-type(4) {
+    --from: -700% 0;
+    --spin: 0deg;
+    transform: translate(calc(var(--px) * 34px - var(--spread) * 30px), 0);
+    animation:
+      piece-assemble 0.85s cubic-bezier(0.22, 1.5, 0.36, 1) 0.85s backwards,
+      chevron-blink 0.9s steps(1) 1.9s 2,
+      chevron-nudge 4s ease-in-out 3.8s infinite;
+  }
+
+  /* Reflexo de luz: cópia branca do símbolo, revelada por uma faixa de máscara que atravessa as peças */
+  .symbol-live.symbol-shine {
+    mix-blend-mode: overlay;
+    -webkit-mask-image: linear-gradient(115deg, transparent 42%, #000 50%, transparent 58%);
+    mask-image: linear-gradient(115deg, transparent 42%, #000 50%, transparent 58%);
+    -webkit-mask-size: 300% 100%;
+    mask-size: 300% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: 130% 0;
+    mask-position: 130% 0;
+    animation:
+      symbol-float 5s ease-in-out 2s infinite,
+      shine-sweep 5.5s ease-in-out 2.2s infinite;
+  }
+
+  /* Ondas em losango no momento do encaixe */
+  .symbol-ring {
+    position: absolute;
+    width: 58%;
+    aspect-ratio: 1;
+    border: 2px solid rgb(255 145 153 / 0.75);
+    border-radius: 26%;
+    rotate: 45deg;
+    opacity: 0;
+    pointer-events: none;
+    animation: ring-burst 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s both;
+  }
+  .symbol-ring--late {
+    border-color: rgb(239 47 177 / 0.55);
+    animation-delay: 1.42s;
+  }
+
+  /* Halo de luz atrás do símbolo: dá contraste ao chevron roxo sobre o fundo escuro */
+  .symbol-halo {
+    position: absolute;
+    width: 78%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgb(255 236 246 / 0.55), rgb(255 145 153 / 0.18) 45%, transparent 70%);
+    filter: blur(18px);
+    opacity: 0;
+    pointer-events: none;
+    animation:
+      aurora-in 1.4s ease-out 1.15s both,
+      halo-breathe 5s ease-in-out 2.6s infinite;
+  }
+
+  /* Partículas em losango (motivo da marca) subindo devagar em volta do símbolo */
+  .symbol-particles {
+    position: absolute;
+    inset: -35% -45%;
+    pointer-events: none;
+  }
+  .symbol-particles span {
+    position: absolute;
+    left: var(--x);
+    bottom: 18%;
+    width: var(--s);
+    aspect-ratio: 1;
+    border-radius: 28%;
+    rotate: 45deg;
+    background: linear-gradient(135deg, #ff9199, #ef2fb1);
+    box-shadow: 0 0 12px rgb(239 47 177 / 0.6);
+    opacity: 0;
+    animation: particle-rise var(--d) ease-in-out var(--delay) infinite;
+  }
+
+  /* Aura colorida atrás do símbolo: acende no impacto e gira devagar */
+  .symbol-aurora {
+    position: absolute;
+    width: 150%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: conic-gradient(from 0deg, #ef2fb1, #6a3dba, #ff9199, #3d1883, #ef2fb1);
+    filter: blur(70px);
+    opacity: 0;
+    pointer-events: none;
+    animation:
+      aurora-in 1.6s ease-out 1.1s both,
+      aurora-spin 16s linear infinite;
+  }
+
+  @keyframes piece-assemble {
+    from {
+      translate: var(--from);
+      rotate: var(--spin);
+      scale: 0.3;
+      opacity: 0;
+      filter: blur(14px);
+    }
+    30% {
+      opacity: 1;
+    }
+    70% {
+      filter: blur(0);
+    }
+  }
+  @keyframes piece-bob {
+    0%, 100% { translate: 0 0; }
+    50% { translate: 0 -7%; }
+  }
+  @keyframes chevron-blink {
+    0% { opacity: 0.15; }
+    50% { opacity: 1; }
+  }
+  @keyframes halo-breathe {
+    0%, 100% { opacity: 0.5; scale: 1; }
+    50% { opacity: 0.8; scale: 1.08; }
+  }
+  @keyframes particle-rise {
+    0% { translate: 0 0; opacity: 0; scale: 0.4; }
+    15% { opacity: var(--o, 0.85); scale: 1; }
+    75% { opacity: calc(var(--o, 0.85) * 0.6); }
+    100% { translate: var(--drift) -240px; opacity: 0; scale: 0.6; }
+  }
+  @keyframes chevron-nudge {
+    0%, 55%, 100% { translate: 0 0; }
+    25% { translate: 30% 0; }
+  }
+  @keyframes symbol-float {
+    0%, 100% { translate: 0 0; }
+    50% { translate: 0 -16px; }
+  }
+  @keyframes symbol-glow {
+    0%, 100% { filter: drop-shadow(0 18px 36px rgb(239 47 177 / 0.35)); }
+    50% { filter: drop-shadow(0 26px 60px rgb(239 47 177 / 0.65)); }
+  }
+  @keyframes shine-sweep {
+    0% { -webkit-mask-position: 130% 0; mask-position: 130% 0; }
+    40%, 100% { -webkit-mask-position: -30% 0; mask-position: -30% 0; }
+  }
+  @keyframes ring-burst {
+    0% { opacity: 0; scale: 0.45; }
+    8% { opacity: 1; }
+    100% { opacity: 0; scale: 2.6; }
+  }
+  @keyframes aurora-in {
+    from { opacity: 0; scale: 0.3; }
+    to { opacity: 0.5; scale: 1; }
+  }
+  @keyframes aurora-spin {
+    to { rotate: 360deg; }
+  }
+}
+
+/* Permite animar --spread (visão explodida do símbolo do login) com transição */
+@property --spread {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}

package/dist/table.d.ts

@@ -0,0 +1,7 @@
+/** Tabela de dados. A moldura rola na horizontal quando falta espaço. */
+export declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react").JSX.Element;
+export declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react").JSX.Element;
+export declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react").JSX.Element;
+export declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react").JSX.Element;
+export declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react").JSX.Element;
+export declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react").JSX.Element;

package/dist/table.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+/** Tabela de dados. A moldura rola na horizontal quando falta espaço. */
+export function Table({ className, ...props }) {
+    return (_jsx("div", { className: "w-full overflow-x-auto rounded-lg border border-border bg-surface", children: _jsx("table", { className: cn("w-full border-collapse text-left text-sm", className), ...props }) }));
+}
+export function TableHeader({ className, ...props }) {
+    return _jsx("thead", { className: cn("border-b border-border bg-surface-subtle", className), ...props });
+}
+export function TableBody({ className, ...props }) {
+    return _jsx("tbody", { className: cn("[&>tr:not(:last-child)]:border-b [&>tr:not(:last-child)]:border-border", className), ...props });
+}
+export function TableRow({ className, ...props }) {
+    return _jsx("tr", { className: cn("transition-colors [tbody>&]:hover:bg-surface-subtle", className), ...props });
+}
+export function TableHead({ className, ...props }) {
+    return _jsx("th", { scope: "col", className: cn("px-4 py-3 font-display text-xs font-semibold tracking-[.06em] whitespace-nowrap text-fg-2 uppercase", className), ...props });
+}
+export function TableCell({ className, ...props }) {
+    return _jsx("td", { className: cn("px-4 py-3 align-middle text-fg", className), ...props });
+}

package/dist/textarea.d.ts

@@ -0,0 +1,5 @@
+export type TextareaProps = React.ComponentProps<"textarea"> & {
+    invalid?: boolean;
+};
+/** Campo de texto longo, com o visual do Input. Use dentro de <Field> para rótulo, dica e erro. */
+export declare function Textarea({ invalid, className, rows, ...props }: TextareaProps): import("react").JSX.Element;