@antadesign/anta 0.2.0 → 0.2.1

package/dist/reset.css

@@ -1,209 +1 @@
-/* Anta's reset + typography defaults. All rules live in `@layer anta`
-   so consumer-owned components (in `@layer components`) and utility
-   frameworks (in `@layer utilities`) can override on demand. The
-   layer-order declaration in `tokens.css` (`@layer base, anta,
-   components, utilities;`) keeps Anta above any preflight resets in
-   `@layer base` so a Tailwind import doesn't wipe Anta's typography. */
-
-@layer anta {
-  /* ───── Structural reset ─────────────────────────────────────── */
-
-  /* Modern box-sizing — pads and borders count inside the declared
-     width/height. Universal selectors so `::before` / `::after`
-     pseudo-elements follow the host. */
-  *, *::before, *::after {
-    box-sizing: border-box;
-  }
-
-  /* Zero out browser-default margins on every element. Apps build
-     up their own spacing from explicit values rather than fighting
-     the user-agent stylesheet. */
-  * {
-    margin: 0;
-  }
-
-  /* Replaced elements as block-level by default + cap to their
-     container so a misplaced large image doesn't blow out the
-     layout. Consumers re-inline them with `display: inline-block`
-     where needed. */
-  img, picture, video, canvas, svg {
-    display: block;
-    max-width: 100%;
-  }
-
-  /* Inherit typography into form controls — by default browsers
-     reset font on these. */
-  input, button, textarea, select {
-    font: inherit;
-  }
-
-  /* Wrap long words rather than overflow; `text-wrap: pretty`
-     balances widows on paragraphs, `text-wrap: balance` evens
-     headlines across lines. */
-  p, h1, h2, h3, h4, h5, h6 {
-    overflow-wrap: break-word;
-  }
-  p {
-    text-wrap: pretty;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    text-wrap: balance;
-  }
-
-  /* ───── Typography defaults — Anta opinion ───────────────────── */
-
-  /* Raw headings adopt the same visual scale as `<Title level={n}>`
-     so plain markup matches the component. Values are duplicated in
-     `src/elements/a-title.css`; keep the two in lockstep. */
-  h1, h2, h3, h4, h5, h6 {
-    color: var(--text-1);
-    font-weight: 584.62;
-    letter-spacing: 0;
-  }
-
-  h1 { font-size: 28px; line-height: 32px; margin-block: 0    16px; }
-  h2 { font-size: 24px; line-height: 28px; margin-block: 32px 12px; }
-  h3 { font-size: 20px; line-height: 24px; margin-block: 24px 12px; }
-  h4 { font-size: 17px; line-height: 20px; margin-block: 20px 8px;  }
-  h5 { font-size: 15px; line-height: 20px; margin-block: 16px 8px;  }
-  h6 { font-size: 13px; line-height: 16px; margin-block: 16px 4px;  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  /* Keep inline `<code>` from inflating the line box of the prose it
-     sits in — `1em` pins its line height to its own font size. */
-  code {
-    line-height: 1em;
-  }
-
-  /* Prose lists (ul, ol) get a tight 3ch left padding so markers
-     hug the text, and items get a small bottom margin so
-     consecutive ones breathe. Markers are toned all the way down
-     to --text-5 since they are visual scaffolding, not content. */
-  ul, ol {
-    padding-left: 3ch;
-  }
-  :is(ul, ol) > li {
-    margin-bottom: 0.5em;
-  }
-  :is(ul, ol) > li::marker {
-    color: var(--text-5);
-  }
-
-  /* `<menu>` is for command/option lists, not prose. By default
-     browsers render it like a `<ul>` (disc markers, 40px padding);
-     strip all of that so it's a clean semantic container ready to
-     be styled. */
-  menu {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  menu > li {
-    margin: 0;
-  }
-
-  /* Global link defaults. Hairline underline at 75% alpha;
-     underline goes to currentColor (100%) and 1px on hover. Color
-     comes from --link-color tokens, which auto-flip in dark mode.
-     `:not(:where([role="button"]))` excludes anchor-buttons (`<a role="button">`,
-     e.g. `<Button href>`): `a:link`/`a:visited` are pseudo-classes with the
-     same (0,1,1) specificity as `a[role="button"]`, so without the exclusion
-     they'd tie and win on source order, giving buttons link colour +
-     underline. The `:where()` keeps the exclusion specificity-neutral so this
-     base rule stays at (0,0,1)/(0,1,1) — a bare `:not([role="button"])` would
-     add an attribute selector's weight and out-specify prose-link overrides
-     like `a-text a` / the <Button> prose-link rule, leaving their links stuck
-     on the global blue. Other contexts (nav, headings) still override as needed. */
-  a:not(:where([role="button"])),
-  a:not(:where([role="button"])):link,
-  a:not(:where([role="button"])):visited {
-    color: var(--link-color);
-    text-decoration: underline;
-    text-decoration-style: solid;
-    text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
-    text-decoration-thickness: 0.5px;
-    text-underline-offset: 3px;
-  }
-  /* Hover only on real-pointer devices — gating avoids the sticky hover
-     color that lingers after a tap on touch screens. */
-  @media (hover: hover) and (pointer: fine) {
-    a:not(:where([role="button"])):hover {
-      color: var(--link-color-hover);
-      /* Underline color is left as the resting hairline (the base rule's
-         `currentColor` mix) — only the thickness grows on hover. */
-      text-decoration-thickness: 1px;
-    }
-  }
-  a:not(:where([role="button"])):active {
-    text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
-  }
-
-  /* Text selection — brand color at 15% alpha. */
-  ::selection {
-    background: color-mix(in srgb, var(--text-1-brand), transparent 85%);
-  }
-
-  /* ───── Tables ───────────────────────────────────────────────── */
-
-  /* Polite, element-level baseline. Rules live in `@layer anta`, so
-     any consumer rule outside a layer — or in `components` /
-     `utilities` — overrides without effort. Width is intentionally
-     left untouched so app tables stay inline-sized; full-bleed is a
-     decision for the surrounding page. */
-  table {
-    border-collapse: collapse;
-    font-variant-numeric: tabular-nums;
-  }
-
-  caption {
-    text-align: left;
-    color: var(--text-3);
-    padding-left: 10px;
-    margin-bottom: 0.25em;
-  }
-
-  th, td {
-    padding: 5px 10px;
-    text-align: left;
-    vertical-align: top;
-    border-bottom: 1px solid var(--border-5);
-  }
-
-  thead th {
-    font-weight: 600;
-  }
-
-  /* Drop the trailing hairline under the table's last row so the
-     table doesn't end with an orphan line. Handles both "tbody is
-     the final section" and "tfoot is the final section". */
-  tfoot tr:last-child > :is(th, td),
-  table:not(:has(tfoot)) tbody tr:last-child > :is(th, td) {
-    border-bottom: none;
-  }
-
-  /* Opt-in: outer frame + vertical column dividers + 3px rounded
-     corners. Switches to separate borders because `border-radius`
-     doesn't render reliably under `border-collapse: collapse` — the
-     collapsed borders override the radius. Cells draw their own
-     right edges to build the internal grid; the last cell in each
-     row drops its right border so the table's own border supplies
-     the outer frame. Row separators come from the baseline
-     `border-bottom` and continue to work under separate-collapse. */
-  table[data-bordered] {
-    border-collapse: separate;
-    border-spacing: 0;
-    border: 1px solid var(--border-5);
-    border-radius: 3px;
-  }
-
-  table[data-bordered] :is(th, td) {
-    border-right: 1px solid var(--border-5);
-  }
-
-  table[data-bordered] tr > :is(th, td):last-child {
-    border-right: 0;
-  }
-}
+@layer anta{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}code{line-height:1em}code,kbd,samp,pre{letter-spacing:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in srgb,var(--text-1-brand),transparent 85%)}table{border-collapse:collapse;font-variant-numeric:tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}

package/dist/tokens.css

@@ -1,285 +1 @@
-/* Anta declares its layer order so consumers don't have to.
-   `base` is below — typically used by resets like Tailwind's
-   preflight (`@layer base`) — so Anta's reset + element styles
-   beat resets but lose to a consumer's own `@layer components`
-   rules. `utilities` sits above everything so utility-class
-   frameworks like Tailwind (`@layer utilities`) can still
-   override single properties when needed. Consumers who load
-   their own layer-order declaration earlier in the cascade
-   override this one — first mention of each layer name wins. */
-@layer base, anta, components, utilities;
-
-:root, .light {
-  --sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  --monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-
-  font-size: 15px;
-  font-weight: 400;
-  font-feature-settings: 'ss02' on, 'ss05' on;
-
-  /* Colors imported from Figma library "Anta 0.2" → "Dynamic colors" collection.
-     See FIGMA.md for the full extraction procedure (figma.variables Plugin
-     API + alias resolution). */
-
-  /* Backgrounds — light, neutral. Numeric elevation scale: 1 = deepest /
-     recessed (was bg-section), 5 = most raised (was bg-spot). */
-  --bg-1: #ffffff;
-  --bg-2: #fbfafb;
-  --bg-3: #f6f4f6;
-  --bg-4: #f1eff1;
-  --bg-5: #ece9ec;
-
-  /* Backgrounds — light, Brand (no --bg-1-brand; bg-1 is neutral-only) */
-  --bg-2-brand: #fcfcfe;
-  --bg-3-brand: #f7f6fd;
-  --bg-4-brand: #efeefc;
-  --bg-5-brand: #e9e5fa;
-
-  /* Backgrounds — light, Success */
-  --bg-2-success: #f7fcf9;
-  --bg-3-success: #ecf9f0;
-  --bg-4-success: #e2f5e8;
-  --bg-5-success: #d9f2e0;
-
-  /* Backgrounds — light, Critical */
-  --bg-2-critical: #fefbfb;
-  --bg-3-critical: #fdf2f2;
-  --bg-4-critical: #fcebeb;
-  --bg-5-critical: #fae5e5;
-
-  /* Backgrounds — light, Warning */
-  --bg-2-warning: #fefbf6;
-  --bg-3-warning: #fcf4e8;
-  --bg-4-warning: #fbeeda;
-  --bg-5-warning: #f9e7cd;
-
-  /* Backgrounds — light, Info */
-  --bg-2-info: #fbfcfe;
-  --bg-3-info: #f2f7fd;
-  --bg-4-info: #e9f3fb;
-  --bg-5-info: #e1eefa;
-
-  /* Text — light, neutral */
-  --text-1: #050306;
-  --text-2: #302b31;
-  --text-3: #635b65;
-  --text-4: #878089;
-  --text-5: #9f99a1;
-
-  /* Text — light, Brand */
-  --text-1-brand: #2e1e7b;
-  --text-2-brand: #483493;
-  --text-3-brand: #483493cc;
-  --text-4-brand: #48349399;
-  --text-5-brand: #48349366;
-
-  /* Text — light, Success */
-  --text-1-success: #004618;
-  --text-2-success: #1f5c31;
-  --text-3-success: #1f5c31cc;
-  --text-4-success: #1f5c3199;
-  --text-5-success: #1f5c3166;
-
-  /* Text — light, Critical */
-  --text-1-critical: #8f1014;
-  --text-2-critical: #a01c1c;
-  --text-3-critical: #a01c1ccc;
-  --text-4-critical: #a01c1c99;
-  --text-5-critical: #a01c1c66;
-
-  /* Text — light, Warning */
-  --text-1-warning: #7f410b;
-  --text-2-warning: #995200;
-  --text-3-warning: #995200cc;
-  --text-4-warning: #99520099;
-  --text-5-warning: #99520066;
-
-  /* Text — light, Info */
-  --text-1-info: #003969;
-  --text-2-info: #175082;
-  --text-3-info: #175082cc;
-  --text-4-info: #175082b2;
-  --text-5-info: #17508280;
-
-  /* Borders — light, neutral */
-  --border-1: #938d96;
-  --border-2: #c1b9c1;
-  --border-3: #d4ced4;
-  --border-4: #e0dce0;
-  --border-5: #ece9ec;
-
-  /* Borders — light, Brand */
-  --border-1-brand: #9081df;
-  --border-2-brand: #bcb1f1;
-  --border-3-brand: #d2cbf6;
-  --border-4-brand: #ddd8f8;
-  --border-5-brand: #e9e5fa;
-
-  /* Borders — light, Success */
-  --border-1-success: #44c169;
-  --border-2-success: #88d7a0;
-  --border-3-success: #b3e5c2;
-  --border-4-success: #c6ecd1;
-  --border-5-success: #d9f2e0;
-
-  /* Borders — light, Critical */
-  --border-1-critical: #e56c6c;
-  --border-2-critical: #efa4a4;
-  --border-3-critical: #f4c2c2;
-  --border-4-critical: #f7d4d4;
-  --border-5-critical: #fae5e5;
-
-  /* Borders — light, Warning */
-  --border-1-warning: #d88118;
-  --border-2-warning: #edb25a;
-  --border-3-warning: #f3cc91;
-  --border-4-warning: #f6dbb1;
-  --border-5-warning: #f9e7cd;
-
-  /* Borders — light, Info */
-  --border-1-info: #56a1e1;
-  --border-2-info: #93c5ec;
-  --border-3-info: #bad6f3;
-  --border-4-info: #cfe3f7;
-  --border-5-info: #e1eefa;
-
-  /* Prose link colors — used by <a-text> for priorities 1 & 2 and by
-     consumers wiring their own prose contexts. */
-  --link-color: #1466d4;
-  --link-color-hover: #2674e6;
-}
-
-
-.dark {
-  font-weight: 400;
-
-  /* Backgrounds — dark, neutral. Numeric elevation scale: 1 = deepest /
-     recessed (was bg-section), 5 = most raised (was bg-spot). */
-  --bg-1: #000000;
-  --bg-2: #0e0d0f;
-  --bg-3: #121014;
-  --bg-4: #161316;
-  --bg-5: #1a171b;
-
-  /* Backgrounds — dark, tinted. The Anta 0.2 values,
-     each a touch deeper for dark mode. (No --bg-1-tone; bg-1 is neutral-only.) */
-
-  /* Backgrounds — dark, Brand */
-  --bg-2-brand: #08060e;
-  --bg-3-brand: #0f0c1d;
-  --bg-4-brand: #130f24;
-  --bg-5-brand: #16132b;
-
-  /* Backgrounds — dark, Success */
-  --bg-2-success: #030b06;
-  --bg-3-success: #051209;
-  --bg-4-success: #06160b;
-  --bg-5-success: #081b0e;
-
-  /* Backgrounds — dark, Critical */
-  --bg-2-critical: #120303;
-  --bg-3-critical: #210606;
-  --bg-4-critical: #260808;
-  --bg-5-critical: #2e0a0b;
-
-  /* Backgrounds — dark, Warning */
-  --bg-2-warning: #110a03;
-  --bg-3-warning: #1c1105;
-  --bg-4-warning: #231406;
-  --bg-5-warning: #2b1a08;
-
-  /* Backgrounds — dark, Info */
-  --bg-2-info: #020a12;
-  --bg-3-info: #05131f;
-  --bg-4-info: #071725;
-  --bg-5-info: #0c2337;
-
-  /* Text — dark, neutral */
-  --text-1: #ece9ec;
-  --text-2: #c1b9c1;
-  --text-3: #9f99a1;
-  --text-4: #776e77;
-  --text-5: #635b65;
-
-  /* Text — dark, Brand */
-  --text-1-brand: #c5baff;
-  --text-2-brand: #ada0ee;
-  --text-3-brand: #ada0eecc;
-  --text-4-brand: #ada0ee99;
-  --text-5-brand: #ada0ee66;
-
-  /* Text — dark, Success */
-  --text-1-success: #9ddeb1;
-  --text-2-success: #74cd8e;
-  --text-3-success: #74cd8ecc;
-  --text-4-success: #74cd8e99;
-  --text-5-success: #74cd8e66;
-
-  /* Text — dark, Critical */
-  --text-1-critical: #ffabac;
-  --text-2-critical: #e78e90;
-  --text-3-critical: #e78e90cc;
-  --text-4-critical: #e78e9099;
-  --text-5-critical: #e78e9066;
-
-  /* Text — dark, Warning */
-  --text-1-warning: #f0bf75;
-  --text-2-warning: #e1a452;
-  --text-3-warning: #e1a452cc;
-  --text-4-warning: #e1a45299;
-  --text-5-warning: #e1a45266;
-
-  /* Text — dark, Info */
-  --text-1-info: #9ed2ff;
-  --text-2-info: #7db6e8;
-  --text-3-info: #7db6e8cc;
-  --text-4-info: #7db6e899;
-  --text-5-info: #7db6e866;
-
-  /* Borders — dark, neutral */
-  --border-1: hsl(288deg 5.21% 42%);
-  --border-2: hsl(282deg 7.04% 28%);
-  --border-3: hsl(277.5deg 6.56% 20%);
-  --border-4: hsl(290deg 6.52% 13%);
-  --border-5: hsl(285deg 7.14% 10%);
-
-  /* Borders — dark, Brand */
-  --border-1-brand: hsl(250.08deg 59.8% 58%);
-  --border-2-brand: hsl(250deg 50% 42%);
-  --border-3-brand: hsl(252.63deg 47.74% 30%);
-  --border-4-brand: hsl(249.8deg 39.84% 19%);
-  --border-5-brand: hsl(249deg 39.22% 14%);
-
-  /* Borders — dark, Success */
-  --border-1-success: hsl(138.18deg 49.75% 29%);
-  --border-2-success: hsl(138.26deg 50.36% 20%);
-  --border-3-success: hsl(137.7deg 49.59% 16%);
-  --border-4-success: hsl(138.46deg 52% 10%);
-  --border-5-success: hsl(138.86deg 53.85% 7.5%);
-
-  /* Borders — dark, Critical */
-  --border-1-critical: hsl(0deg 56% 46%);
-  --border-2-critical: hsl(0.42deg 63% 30%);
-  --border-3-critical: hsl(0deg 62.21% 23%);
-  --border-4-critical: hsl(359.13deg 59% 15%);
-  --border-5-critical: hsl(359.06deg 63% 11%);
-
-  /* Borders — dark, Warning */
-  --border-1-warning: hsl(32.13deg 80.31% 34%);
-  --border-2-warning: hsl(27.93deg 84.06% 24%);
-  --border-3-warning: hsl(30deg 79.66% 17%);
-  --border-4-warning: hsl(28.75deg 63.16% 12%);
-  --border-5-warning: hsl(28.64deg 66.67% 9%);
-
-  /* Borders — dark, Info */
-  --border-1-info: hsl(207.82deg 70.2% 40%);
-  --border-2-info: hsl(207.77deg 69.94% 29%);
-  --border-3-info: hsl(208.04deg 69.93% 21%);
-  --border-4-info: hsl(208.52deg 62.89% 14%);
-  --border-5-info: hsl(207.78deg 65.85% 10.5%);
-
-  /* Prose link colors — dark mode */
-  --link-color: #7baee9;
-  --link-color-hover: #90bdee;
-}
-
+@layer base,anta,components,utilities;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;font-size:15px;font-weight:400;font-feature-settings:"ss02" on,"ss05" on;--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--link-color: #1466d4;--link-color-hover: #2674e6}.dark{font-weight:400;--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 13%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--link-color: #7baee9;--link-color-hover: #90bdee}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -44,10 +44,12 @@
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css && pnpm run build:types",
-    "build:css": "find src -name '*.css' | while IFS= read -r f; do d=\"dist/${f#src/}\"; mkdir -p \"$(dirname \"$d\")\"; cp \"$f\" \"$d\"; done && cp scripts/generate-icons.mjs dist/",
+    "build:dev": "pnpm run build:js && pnpm run build:css:dev && pnpm run build:types",
+    "build:css": "esbuild $(find src -name '*.css') --minify --loader:.module.css=css --outdir=dist --outbase=src && cp scripts/generate-icons.mjs dist/",
+    "build:css:dev": "find src -name '*.css' | while IFS= read -r f; do d=\"dist/${f#src/}\"; mkdir -p \"$(dirname \"$d\")\"; cp \"$f\" \"$d\"; done && cp scripts/generate-icons.mjs dist/",
     "build:js": "esbuild $(find src \\( -name '*.ts' -o -name '*.tsx' \\) ! -name '*.d.ts') --outdir=dist --outbase=src --jsx=automatic --jsx-import-source=@antadesign/anta --format=esm --target=ES2022 --loader:.module.css=local-css --loader:.css=global-css",
     "build:types": "tsc -p src/tsconfig.json",
-    "dev": "echo $$ > .dev.pid; trap 'rm -f .dev.pid' EXIT; nodemon -w src -w stickers/src -e ts,tsx,css -x 'pnpm run build && pnpm --filter @antadesign/stickers run build && pnpm --filter anta-site run docs' & pnpm --filter anta-site run dev & wait",
+    "dev": "echo $$ > .dev.pid; trap 'rm -f .dev.pid' EXIT; nodemon -w src -w stickers/src -e ts,tsx,css -x 'pnpm run build:dev && pnpm --filter @antadesign/stickers run build:dev && pnpm --filter anta-site run docs' & pnpm --filter anta-site run dev & wait",
     "stop": "node scripts/dev-stop.mjs",
     "typecheck": "tsc --noEmit -p src/tsconfig.json",
     "icons": "node scripts/generate-icons.mjs --input src/elements/icons --output src/elements --name a-icon.shapes --internal",
@@ -63,7 +65,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.0",
-    "es-toolkit": "^1.47.0"
+    "es-toolkit": "1.47.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"

package/dist/components/Button.module.css

@@ -1,2 +0,0 @@
-/* Layout lives in src/elements/a-button.css. Stub kept for symmetry
- * with the other wrappers and as a landing pad for wrapper-only styles. */

package/dist/components/Menu.d.ts

@@ -1,61 +0,0 @@
-import type { BaseProps } from '../general_types';
-export interface MenuProps extends BaseProps {
-    /** Preferred placement relative to the trigger. The cross-axis suffix
-     *  (`-start` / `-end`) aligns the left / right edges; the menu auto-flips
-     *  vertically and clamps horizontally when there isn't room.
-     *  @defaultValue bottom-start */
-    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-    /** Open on right-click (the `contextmenu` event) of the trigger region
-     *  instead of a left click, positioned at the pointer. */
-    context?: boolean;
-    /** Open at the pointer coordinates rather than aligned to the trigger box.
-     *  Pairs naturally with `context`; on its own it positions a left-click
-     *  menu at the cursor. */
-    coord?: boolean;
-    /** Marks this menu as a submenu of the enclosing `MenuItem`. Set by passing
-     *  it as a `MenuItem`'s `submenu`; rarely written by hand. */
-    submenu?: boolean;
-    /** For a submenu: also open it on hover (with intent timing), not only on
-     *  click. No effect on a root menu. */
-    hover?: boolean;
-    /** Gap in pixels between the trigger and the menu.
-     *  @defaultValue 4 */
-    offset?: number;
-    /** Controlled open state. Omit for the default **uncontrolled** menu (it
-     *  opens/closes itself). Pass `'opened'` / `'closed'` to **control** it: the
-     *  menu's visibility follows this value, and user dismiss (Esc, outside-click,
-     *  select) fires `openchange` *without* self-closing — you update `state` in
-     *  response. A string (not a boolean) so there's no `"false"`-as-truthy
-     *  footgun. Submenus are always uncontrolled regardless of this. */
-    state?: 'opened' | 'closed';
-    /** The menu's contents: `MenuItem`, `MenuSeparator`, `MenuGroup`, or any
-     *  custom element. */
-    children?: React.ReactNode;
-}
-/**
- * Menu — a dropdown / context menu that anchors to any target and "just
- * works". Place `<Menu>` immediately after the trigger element (a button,
- * say); it opens on click by default. For a whole-area right-click menu, put
- * it after the region and pass `context`.
- *
- * Open state is uncontrolled by default — listen for the `openchange` event
- * (`detail: { open, previousState }`) to observe it, or pass `state` to control
- * it. You can also grab a `ref` and call `.open()` / `.close()` / `.toggle()`.
- * Selecting a `MenuItem` closes the menu;
- * arbitrary injected content does not. Add `data-menu-open` to any item /
- * container to keep it open, or `data-menu-close` to a custom element to let it
- * close.
- *
- * Requires `@antadesign/anta/elements` to be imported (client-side only).
- *
- * @example Dropdown from a button
- * ```tsx
- * <a-button>Actions</a-button>
- * <Menu>
- *   <MenuItem icon="edit" label="Edit" kbd="⌘E" onSelect={onEdit} />
- *   <MenuSeparator />
- *   <MenuItem tone="critical" icon="trash" label="Delete" onSelect={onDelete} />
- * </Menu>
- * ```
- */
-export declare const Menu: ({ placement, context, coord, submenu, hover, offset, state, className, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -1,34 +0,0 @@
-import { jsx } from "@antadesign/anta/jsx-runtime";
-const Menu = ({
-  placement,
-  context,
-  coord,
-  submenu,
-  hover,
-  offset,
-  state,
-  className,
-  children,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx(
-    "a-menu",
-    {
-      placement: placement && placement !== "bottom-start" ? placement : void 0,
-      context: context ? "" : void 0,
-      coord: coord ? "" : void 0,
-      submenu: submenu ? "" : void 0,
-      hover: hover ? "" : void 0,
-      offset: offset != null ? String(offset) : void 0,
-      state,
-      role: "menu",
-      "aria-orientation": "vertical",
-      class: className,
-      ...rest,
-      children
-    }
-  );
-};
-export {
-  Menu
-};

package/dist/components/MenuGroup.d.ts

@@ -1,24 +0,0 @@
-import type { BaseProps } from '../general_types';
-export interface MenuGroupProps extends BaseProps {
-    /** The section heading shown above the grouped items (also the group's
-     *  accessible name). */
-    label?: string;
-    /** The grouped `MenuItem`s. */
-    children?: React.ReactNode;
-}
-/**
- * MenuGroup — a titled section that organises related `MenuItem`s. Keyboard
- * navigation flattens items across groups, skipping the heading.
- *
- * Add `data-menu-open` to keep the menu open after any item in the group is
- * chosen (it forwards to the element).
- *
- * @example
- * ```tsx
- * <MenuGroup label="Edit">
- *   <MenuItem icon="copy" label="Copy" />
- *   <MenuItem icon="cut" label="Cut" />
- * </MenuGroup>
- * ```
- */
-export declare const MenuGroup: ({ label, className, children, ...rest }: MenuGroupProps) => any;

package/dist/components/MenuGroup.js

@@ -1,19 +0,0 @@
-import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-const MenuGroup = ({ label, className, children, ...rest }) => {
-  return /* @__PURE__ */ jsxs(
-    "a-menu-group",
-    {
-      role: "group",
-      "aria-label": label,
-      class: className,
-      ...rest,
-      children: [
-        label != null && /* @__PURE__ */ jsx("a-menu-group-label", { "aria-hidden": "true", children: label }),
-        children
-      ]
-    }
-  );
-};
-export {
-  MenuGroup
-};