@adres/adrec-dls 0.1.0

package/dist-lib/styles/tv.d.ts

@@ -0,0 +1 @@
+export declare const tv: import("tailwind-variants").TV;

package/dist-lib/tokens.css

@@ -0,0 +1,441 @@
+/*
+ * ADREC Design System tokens, re-based on `docs/buy-and-sell-elms-prototype 2.html`
+ * (the ADREC-branded ELMS "Buy and Sell" prototype), which is the authoritative visual
+ * design going forward. The previous version of this file was ported from an unrelated
+ * Figma file ("Tawtheeq") and used a muted purple/sage/olive palette, Helvetica Neue,
+ * and a spacious 12-18px type scale — none of that survives here.
+ *
+ * Registered as Tailwind v4 theme variables under an "ads" namespace so they stay
+ * traceable back to source and never collide with Tailwind's own default palette
+ * (its default `black`, `gray`, etc. remain available alongside these).
+ *
+ * Static, always-the-same colors/sizes should be used as plain Tailwind utilities
+ * (e.g. `bg-ads-gold`, `text-ads-label`). A handful of components pick their
+ * color from a runtime variant (Badge, InputField, Notification, ...) — those set
+ * a local `--ads-*` CSS custom property inline and consume it via Tailwind's
+ * arbitrary-value syntax (`bg-[var(--ads-danger-light)]`), so the token stays the
+ * single source of truth either way.
+ */
+@import 'tailwindcss';
+
+@theme {
+  /* Color: neutrals
+   * Names and hex values taken directly from the prototype's `:root` block
+   * (--cream, --cream-2, --cream-3, --ink, --ink-2, --muted, --muted-2, --line,
+   * --line-2, --fld), plus two literal one-off values pulled from specific
+   * prototype rules that need a traceable token: input.t[readonly] background
+   * (#f6f7f2) and table.gt tr.hi td background (#eaeedb).
+   *
+   * --line/--line-2/--field-border are gone: every border-color AND background-
+   * fill usage they ever had has been migrated to the border/border-strong
+   * application aliases below (Neutral scale), and nothing else referenced them,
+   * so they were deleted rather than left as dead custom properties. --ink-2/
+   * --muted/--muted-2 are gone the same way (text-strong/text-muted/text-base).
+   *
+   * --ink survives, but its scope has narrowed to one thing: the Transparent/
+   * Translucent surface demo's `bg-ads-ink/40`, an exact reproduction of the
+   * prototype's modal scrim (rgba(22,41,63,.4) — 22,41,63 is #16293f in
+   * decimal). Every text-color and background-fill role it used to serve is
+   * on --color-ads-text-strong (Neutral scale) instead — that's a different
+   * hue (gray, not navy), so it can't substitute here: the scrim demo is
+   * specifically illustrating this exact prototype value, not a general
+   * "darkest neutral" role.
+   */
+  --color-ads-ink: #16293f;
+  --color-ads-field-disabled: #f6f7f2;
+  --color-ads-base-background: #ffffff;
+  --color-ads-cream: #f2f4e8;
+  --color-ads-cream-alt: #f8f9f1;
+  --color-ads-cream-deep: #e8ebd8;
+  /* Judgment call: not a prototype :root token — the exact value used by
+   * `table.gt tr.hi td` for a highlighted/emphasized data-table row. */
+  --color-ads-highlight: #eaeedb;
+
+  /* Color: brand (gold) */
+  --color-ads-gold: #a39558;
+  --color-ads-gold-dark: #807542;
+  --color-ads-gold-light: #c8bd8a;
+
+  /* Color: primitive scales
+   * Three color families — Primary (gold), Secondary (olive), Neutral (gray) —
+   * each an 8-step light→dark ramp: Muted (lightest/most subtle) → Weakest →
+   * Weaker → Weak → Base (the family's true hue) → Strong → Stronger →
+   * Strongest (darkest). Computed with one consistent HSL formula per step
+   * (same lightness/saturation pair across all three families, only hue
+   * differs: gold H49°, olive H72°, gray desaturated) so the three ramps stay
+   * structurally parallel — see scripts used to derive this in the PR that
+   * introduced it.
+   *
+   * Primary's weak/base steps are pinned to the *exact* existing
+   * --color-ads-gold-light/-gold hexes (not re-derived) so every already-
+   * shipped component keeps its exact current color. strong was later
+   * darkened from the original --color-ads-gold-dark (#8b7f47, L41%) to L38%
+   * (#807542) — the original only cleared 4.0:1 against white (AA large/UI
+   * text only); this step needs to carry small text too (links, RadioGroup's
+   * checked label), so it's now tuned to 4.6:1, comfortably past the 4.5:1 AA
+   * text threshold while staying the same H49° gold hue. gold-dark was moved
+   * to match, so the two stay pinned. Secondary (olive) backs Notification's
+   * "system" view directly and the surface-* application aliases below.
+   * Neutral (gray) backs the text- and border-role application aliases — see
+   * those blocks for exactly which old tokens each step replaces.
+   */
+  --color-ads-primary-muted: #f7f6f3;
+  --color-ads-primary-weakest: #eeece2;
+  --color-ads-primary-weaker: #dcd6bc;
+  --color-ads-primary-weak: #c8bd8a;
+  --color-ads-primary-base: #a39558;
+  --color-ads-primary-strong: #807542;
+  --color-ads-primary-stronger: #655c34;
+  --color-ads-primary-strongest: #413c25;
+
+  --color-ads-secondary-muted: #f6f7f3;
+  --color-ads-secondary-weakest: #eceee2;
+  --color-ads-secondary-weaker: #d6dcbc;
+  --color-ads-secondary-weak: #bbc889;
+  --color-ads-secondary-base: #93a257;
+  /* Darkened from the formula's original #7d8a47 (L41%, 3.75:1 against white — below
+   * even AA large/UI) to L36% (#6e793e, 4.7:1) — same accessibility-driven adjustment
+   * as Primary's strong step, see its comment above. */
+  --color-ads-secondary-strong: #6e793e;
+  --color-ads-secondary-stronger: #5b6534;
+  --color-ads-secondary-strongest: #3c4125;
+
+  --color-ads-neutral-muted: #f5f5f5;
+  --color-ads-neutral-weakest: #e8e8e8;
+  --color-ads-neutral-weaker: #cccccc;
+  --color-ads-neutral-weak: #a8a8a8;
+  --color-ads-neutral-base: #7d7d7d;
+  --color-ads-neutral-strong: #696969;
+  --color-ads-neutral-stronger: #4d4d4d;
+  --color-ads-neutral-strongest: #333333;
+
+  /* Accent (maroon), H≈348° — same 8-step formula as Primary/Secondary/Neutral,
+   * a fourth family for the maroon this system used to carry as a one-off
+   * (--color-ads-maroon, retired when Badge/Button's danger-red usages were
+   * consolidated onto danger/danger-light). Accent is deliberately NOT reused for
+   * danger — danger stays reserved for error/destructive state (see its own
+   * comment below); Accent is for brand-adjacent emphasis that isn't gold and
+   * isn't a status color. stronger is pinned to the *exact* original maroon hex
+   * (closest lightness match to the formula's stronger step, L32.5% vs L30%) —
+   * not base, since maroon's real lightness never matched the formula's L49%
+   * base target the way gold's did for Primary.
+   */
+  --color-ads-accent-muted: #f7f3f4;
+  --color-ads-accent-weakest: #eee2e4;
+  --color-ads-accent-weaker: #dcbcc2;
+  --color-ads-accent-weak: #c88996;
+  --color-ads-accent-base: #a25766;
+  --color-ads-accent-strong: #8a4754;
+  --color-ads-accent-stronger: #7b2b3b;
+  --color-ads-accent-strongest: #41252a;
+
+  /* Color: application aliases (text & border roles → Neutral scale)
+   * ink/ink-2/muted/muted-2 (text) and line/line-2/field-border (borders)
+   * measured H≈210-215° and H≈70° respectively — neither hue is part of the
+   * Primary/Secondary/Neutral scale, so these are a deliberate consolidation
+   * onto Neutral, not a snap-to-nearest-existing-value: text-strong collapses
+   * ink+ink-2 (both ~L17%, only a hue difference between them); text-base
+   * takes muted-2's slot (~L41%, matches neutral-strong almost exactly);
+   * text-muted takes muted's slot (~L59%, nearest is neutral-base); border
+   * collapses line+line-2 (~L86-91%, both subtle dividers); border-strong
+   * takes field-border's slot (~L70%, form-control borders that need more
+   * visible affordance than a plain divider).
+   *
+   * All six old tokens have since lost every consumer — including their
+   * background-fill uses (Badge's solid dark variants, CardTitle's divider,
+   * form-control disabled/unit-divider fills), all migrated to these aliases
+   * too — so --ink-2/-muted/-muted-2/-line/-line-2/-field-border were deleted
+   * outright (see the neutrals block above). --ink alone survives, narrowed to
+   * one exact-value use unrelated to this text/border role — see its own
+   * comment above.
+   */
+  --color-ads-text-strong: var(--color-ads-neutral-strongest);
+  --color-ads-text-base: var(--color-ads-neutral-strong);
+  --color-ads-text-muted: var(--color-ads-neutral-base);
+  --color-ads-border: var(--color-ads-neutral-weakest);
+  --color-ads-border-strong: var(--color-ads-neutral-weaker);
+
+  /* Color: application aliases (surface fills → Secondary scale)
+   * cream/cream-alt/highlight/field-disabled measured H≈67-73° — the same hue
+   * as Secondary (olive, H72°) — so this consolidation is faithful, not a
+   * hue-shift like the text- and border-role aliases above. Roles are assigned to
+   * preserve relative distinctness rather than by a strict nearest-lightness
+   * snap: cream/cream-alt/field-disabled all sit within 3% lightness of each
+   * other (L93-96%), so a pure nearest-match would collapse surface-highlight
+   * onto the same step as surface-base — but DataTable's highlighted row needs
+   * to visually stand out from its own zebra rows, so surface-highlight is
+   * deliberately stepped one notch further (weaker, not weakest).
+   * surface-alt and surface-disabled resolve to the same step (secondary-muted)
+   * — cream-alt and field-disabled were already near-duplicates in the original
+   * hexes — but are named separately since "alternating row" and "disabled
+   * control" are different intents in the components that consume them.
+   * cream-deep has no current component consumer, so it's left unaliased.
+   */
+  --color-ads-surface-base: var(--color-ads-secondary-weakest); /* was cream */
+  --color-ads-surface-alt: var(--color-ads-secondary-muted); /* was cream-alt */
+  --color-ads-surface-highlight: var(--color-ads-secondary-weaker); /* was highlight */
+  --color-ads-surface-disabled: var(--color-ads-secondary-muted); /* was field-disabled */
+
+  /* Color: semantic
+   * success used to map 1:1 to the prototype's --ok token (#2f7d55) — overridden by
+   * explicit request to #159553/#f3fffb, no longer a prototype-exact match. Warning
+   * originally had no
+   * prototype equivalent (the prototype has no warning/alert-amber state distinct
+   * from gold) and reused --gold-dark as a judgment call — that's since been
+   * overridden by explicit request to a proper amber, #d97706, distinct from every
+   * other token in the system. A useful side effect: this also resolves the
+   * informative/warning collision noted below (both used to be #8b7f47).
+   *
+   * link used to map 1:1 to the prototype's own --link (#1b6fe0, blue) — by explicit
+   * request it's now aliased to Primary's strong step instead (var(--color-ads-
+   * primary-strong), #8b7f47), so every link/action-style text across the library
+   * (SectionHeader's action, Notification's link button and "informative" view,
+   * ScreenBottomActions' view-selected link, DataTable's action cells, Badge's Blue
+   * variants, StatusIndicator's Blue dot) renders gold-dark instead of blue.
+   * link-accent is a second option, aliased to Accent's stronger step (var(--color-
+   * ads-accent-stronger), maroon) for callers that want the accent look instead of
+   * the new default — nothing consumes it yet; no component has a variant prop to
+   * select it. link-tint has been removed by explicit request: with link now aliased
+   * to Primary, its former consumers (Notification's "informative" view, Badge's
+   * Light/Blue) use --color-ads-primary-weakest directly instead — link's own hue
+   * family already has a light step, so a dedicated tint token would be redundant.
+   *
+   * The "-light" background tokens (named that for consistency with Badge's own
+   * type="Light" — they were originally called "-tint", a more precise color-theory
+   * term for a hue mixed with white, but that read inconsistently against the
+   * component vocabulary that actually consumes them) are judgment calls too: the
+   * prototype's own success state (`.okmsg`) is bare colored text with no box at all,
+   * so these are pale tints mixed by hand at the same hue as their base color
+   * (matching how success-light/danger-light were already built). warning-light was
+   * briefly a mismatch — still borrowed from --cream after warning moved to amber —
+   * but has since been given its own proper pale-amber value, back in line with the
+   * rest.
+   *
+   * danger/danger-light replace what used to be seven separate red/pink/maroon
+   * tokens (--alert-red, --alert-bg, --alert-line, --maroon, --badge-bg,
+   * --danger-border, --danger-bg-hover) — all measured within H344-356°, i.e. the
+   * same red hue family, so consolidating them is faithful, not a hue-shift. The one
+   * exception was --alert-bg/--alert-line, which sat at H≈46° (borrowed from a
+   * warning/cream palette by historical accident, not actually red) —
+   * Notification's error box trades its exact prototype pale-yellow look for a
+   * proper pale-red tint as a result, a deliberate simplification, not an
+   * oversight. danger originally kept --alert-red's exact value (the more heavily
+   * used of the two reds, vs. the rarer --maroon), then was overridden by explicit
+   * request to #df2c2c, a brighter, higher-contrast red; danger-light moved with it
+   * to #fdf0ed, a matching pale tint rather than being re-derived from the new base.
+   */
+  /* Darkened from the original #159553 (3.8:1 against white — below AA text) to
+   * #13864b (4.6:1) — same accessibility-driven adjustment as Primary/Secondary's
+   * strong steps, same hue (H149°), just less lightness. */
+  --color-ads-success: #13864b;
+  --color-ads-success-light: #f3fffb;
+  --color-ads-link: var(--color-ads-primary-strong);
+  --color-ads-link-accent: var(--color-ads-accent-stronger);
+  /* Darkened from the original #d97706 (3.2:1 against white — below even AA large/UI
+   * at the margin used elsewhere in this file) to #ae5f05 (4.7:1) — same hue (H32°),
+   * just less lightness. */
+  --color-ads-warning: #ae5f05;
+  --color-ads-warning-light: #fff7ed;
+  --color-ads-danger: #df2c2c;
+  --color-ads-danger-light: #fdf0ed;
+
+  /* Radius
+   * 2px is the prototype's dominant control radius (buttons, chips, inputs — `.b`,
+   * `.chip`, `input.t`... well, inputs actually have no radius at all, but chips and
+   * buttons do). 4px remains for the one place the prototype uses a slightly larger
+   * radius: `.bdg` (the status badge). full is a reintroduction, added by explicit
+   * request — the old 16px/20px pill radii were dropped when Badge first moved to
+   * the prototype's rectangular `.bdg`, but a true pill shape (9999px, not a fixed
+   * pixel value, so it stays fully rounded regardless of the badge's height) is
+   * back for Badge specifically.
+   */
+  --radius-ads-2: 2px;
+  --radius-ads-4: 4px;
+  --radius-ads-full: 9999px;
+
+  /* Shadow
+   * Lifted exactly from the prototype's `.modal` box-shadow — the only elevated
+   * surface the prototype defines (this is a very flat, 2D-styled UI otherwise).
+   * No scale (sm/md/lg): nothing in the source needs more than one elevation.
+   */
+  --shadow-ads-elevated: 0 14px 40px rgba(0, 0, 0, 0.24);
+
+  /* Typography
+   * The prototype loads Poppins (English) and Cairo (Arabic) from Google Fonts in
+   * its own <head> — that's an app-shell concern, so this library only declares the
+   * family with a system fallback stack, the same way it previously did for the
+   * (also not-bundled) Helvetica Neue LT Std. Consumers that don't load the webfont
+   * will fall back to the system sans stack below.
+   */
+  --font-ads-en: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+  --font-ads-ar: 'Cairo', 'Tajawal', Arial, sans-serif;
+
+  /* Type scale
+   * caption and label share the same size (11px) — a deliberate step, not an
+   * oversight. body/subtitle/title (12/14/16px) round out the dense end of the
+   * scale; header matches the prototype's `.bnr-h h1` heading (20px); display is
+   * an extrapolated hero tier (28px) with no prototype anchor. See
+   * Foundation/Typography for the per-step usage notes.
+   */
+  --text-ads-caption: 11px;
+  --text-ads-caption--line-height: 1.3;
+  --text-ads-label: 11px;
+  --text-ads-label--line-height: 1.4;
+  --text-ads-body: 12px;
+  --text-ads-body--line-height: 1.3;
+  --text-ads-subtitle: 14px;
+  --text-ads-subtitle--line-height: 1.4;
+  --text-ads-title: 16px;
+  --text-ads-title--line-height: 1.3;
+  --text-ads-header: 20px;
+  --text-ads-header--line-height: 1.2;
+  --text-ads-display: 28px;
+  --text-ads-display--line-height: 1.15;
+
+  /* Sizing: ELMS control heights + a handful of off-grid spacing values
+   * Tailwind's default 4px spacing scale does NOT cover this design: the prototype's
+   * form-control heights (19px text inputs, 20px selects, 23px buttons) and several
+   * of its paddings (3px, 5px, 7px, 11px) fall between default steps. These are
+   * named literally by pixel value, the same way the radius tokens above are, and
+   * are consumed as `h-ads-19`, `px-ads-11`, `size-ads-13`, etc. 27px is a judgment
+   * call: the prototype only defines one button height, so it's extrapolated as a
+   * "large" tier at the same proportion Button's existing size scale used before
+   * this rework. 34px is expressible via Tailwind's default fractional scale
+   * (`px-8.5`) already, but gets a named token anyway for the same traceability
+   * reason as the others: it's the prototype's own exact `.elms`/`.bnr-zone`
+   * horizontal padding, not an arbitrary App-level choice — consumed as `px-ads-34`.
+   * 661px/900px/1015px/1420px are the same story at App-page scale: the prototype's
+   * exact `.main`/`.pg-t`/`.main.w`/`.pg-t.w`/`.bnr` widths, previously left as
+   * one-off `max-w-[…]`/`w-[…]` arbitrary values in App code — named here instead,
+   * consumed as `w-ads-661`, `max-w-ads-900`, `w-ads-1015`, `max-w-ads-1420`.
+   */
+  --spacing-ads-3: 3px;
+  /* The smallest padding step — InputField/Select's own internal text padding
+   * (px-ads-4/ps-ads-4) and DescriptionList/DataTable's per-row vertical padding
+   * (py-ads-4). A separate token from the others above (rather than reusing default
+   * Tailwind px-1/py-1) purely so the text-size overrides below can grow it
+   * independently of the row's height/gap tokens. */
+  --spacing-ads-4: 4px;
+  --spacing-ads-5: 5px;
+  --spacing-ads-7: 7px;
+  --spacing-ads-9: 9px;
+  --spacing-ads-11: 11px;
+  --spacing-ads-13: 13px;
+  --spacing-ads-19: 19px;
+  --spacing-ads-20: 20px;
+  --spacing-ads-23: 23px;
+  --spacing-ads-27: 27px;
+  --spacing-ads-34: 34px;
+  --spacing-ads-661: 661px;
+  --spacing-ads-900: 900px;
+  --spacing-ads-1015: 1015px;
+  --spacing-ads-1420: 1420px;
+
+  /* Color: data-visualization (categorical)
+   * No chart exists in the prototype this system is re-based on, so this is a
+   * forward-looking addition rather than something extracted from the source design
+   * — validated with the dataviz skill's `validate_palette.js` (WCAG relative
+   * luminance + OKLab CVD simulation) against this system's own white surface
+   * (--color-ads-base-background), not eyeballed.
+   *
+   * Slot 1 reuses --color-ads-link exactly (already the system's blue) for brand
+   * coherence. Slot 2 is a custom gold-amber tuned to nod to --color-ads-gold while
+   * clearing the chroma/CVD floors gold itself is too desaturated to pass as a
+   * categorical hue. Slots 3–8 are the dataviz skill's validated reference hues
+   * (aqua/yellow/magenta/green/violet/red), left as-is since they already clear
+   * every gate and a categorical palette's hue order is the CVD-safety mechanism —
+   * don't reorder it.
+   *
+   * Validated PASS (light, surface #ffffff): lightness band, chroma floor, adjacent
+   * CVD separation (worst ΔE 8.4), adjacent normal-vision floor (worst ΔE 17.6).
+   * Contrast WARN on chart-3/4/5 (<3:1 vs white) is expected and requires visible
+   * direct labels or a legend, never color alone — same rule as any chart consuming
+   * this palette. Only chart-1/2/3 clear the stricter all-pairs floor (scatter,
+   * bubble, choropleth, small multiples); charts needing more than 3 simultaneous
+   * pairwise comparisons should fold extra series into "Other" or facet instead of
+   * extending past slot 8.
+   *
+   * No dark-mode steps are defined: nothing else in this token file has a dark
+   * variant, so shipping unused dark chart steps would be speculative. If/when this
+   * system adds dark-mode support, re-derive dark steps against that dark surface
+   * with the same validator rather than guessing.
+   *
+   * Sequential/diverging guidance (not shipped as tokens — nothing consumes them
+   * yet): sequential magnitude scales should ramp a single hue light→dark, default
+   * to blue (chart-1's hue family); diverging/polarity scales should use blue↔red
+   * (chart-1 vs chart-8) with a neutral gray midpoint from --color-ads-border, never
+   * a rainbow and never a hue at the midpoint.
+   */
+  --color-ads-chart-1: #1b6fe0;
+  --color-ads-chart-2: #b8862e;
+  --color-ads-chart-3: #1baf7a;
+  --color-ads-chart-4: #eda100;
+  --color-ads-chart-5: #e87ba4;
+  --color-ads-chart-6: #008300;
+  --color-ads-chart-7: #4a3aa7;
+  --color-ads-chart-8: #e34948;
+}
+
+/* Text-size preference — three discrete tiers (default/large/xlarge), switched at
+ * runtime via a `data-text-size` attribute on <html> (a page-level user setting, not
+ * a per-component prop — see App's useTextSizePreference hook). These overrides live
+ * outside @theme on purpose: @theme's job is registering each custom property once so
+ * Tailwind can generate a utility for it (text-ads-body, gap-ads-9, ...); it doesn't
+ * need to run again here, since every one of those utilities already just resolves to
+ * whatever its custom property currently equals. Re-declaring the same properties in a
+ * more specific selector is a plain CSS cascade override — the utility classes
+ * themselves, and every component using them, don't change at all.
+ *
+ * Only the type scale and the control-adjacent spacing steps (3-27px: paddings,
+ * checkbox/radio size, input/select/button heights) scale up. The larger structural
+ * tokens (34/661/900/1015/1420 — page margins and column widths) are deliberately left
+ * alone: scaling those the same way would stretch the page's proportions instead of
+ * just making its text/controls easier to read, and 34px in particular already does
+ * double duty as both a control-ish padding and ScreenLayout's own page margin (see
+ * the sizing comment above) — leaving it fixed keeps the page frame stable across all
+ * three tiers. Line-heights need no override: they're unitless ratios already, so they
+ * scale proportionally with font-size for free.
+ */
+:root[data-text-size='large'] {
+  --text-ads-caption: 13px;
+  --text-ads-label: 13px;
+  --text-ads-body: 14px;
+  --text-ads-subtitle: 16px;
+  --text-ads-title: 18px;
+  --text-ads-header: 23px;
+  --text-ads-display: 32px;
+
+  --spacing-ads-3: 4px;
+  --spacing-ads-4: 6px;
+  --spacing-ads-5: 6px;
+  --spacing-ads-7: 8px;
+  --spacing-ads-9: 10px;
+  --spacing-ads-11: 13px;
+  --spacing-ads-13: 15px;
+  --spacing-ads-19: 21px;
+  --spacing-ads-20: 22px;
+  --spacing-ads-23: 26px;
+  --spacing-ads-27: 30px;
+}
+
+:root[data-text-size='xlarge'] {
+  --text-ads-caption: 14px;
+  --text-ads-label: 14px;
+  --text-ads-body: 16px;
+  --text-ads-subtitle: 18px;
+  --text-ads-title: 21px;
+  --text-ads-header: 26px;
+  --text-ads-display: 36px;
+
+  --spacing-ads-3: 5px;
+  --spacing-ads-4: 8px;
+  --spacing-ads-5: 7px;
+  --spacing-ads-7: 9px;
+  --spacing-ads-9: 12px;
+  --spacing-ads-11: 14px;
+  --spacing-ads-13: 17px;
+  --spacing-ads-19: 24px;
+  --spacing-ads-20: 25px;
+  --spacing-ads-23: 29px;
+  --spacing-ads-27: 34px;
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@adres/adrec-dls",
+  "version": "0.1.0",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist-lib"
+  ],
+  "main": "./dist-lib/index.js",
+  "module": "./dist-lib/index.js",
+  "types": "./dist-lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist-lib/index.d.ts",
+      "default": "./dist-lib/index.js"
+    },
+    "./tokens.css": "./dist-lib/tokens.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "tsc -b tsconfig.build.json && vite build --config vite.lib.config.ts && cp src/styles/tokens.css dist-lib/tokens.css",
+    "lint": "oxlint",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-popover": "^1.1.23",
+    "tailwind-variants": "^3.3.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "latest",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.1.0",
+    "@vitest/browser-playwright": "latest",
+    "@vitest/coverage-v8": "latest",
+    "oxlint": "^1.79.0",
+    "playwright": "latest",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "storybook": "^10.6.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2",
+    "vitest": "latest"
+  }
+}