@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/tailwind.css

@@ -0,0 +1,219 @@
+/* @justanarthur/modo-ui for Tailwind CSS v4: import after `@import "tailwindcss"`. */
+
+@import "./base.css";
+
+@source "./shared";
+
+@source "./primitives";
+
+@source "./components";
+
+@source "./blocks";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-hover: var(--accent-hover);
+  --color-brand: var(--brand);
+  --color-brand-hover: var(--brand-hover);
+  --color-focus-ring: var(--focus-ring);
+  --color-overlay: rgb(var(--overlay));
+  --color-selected: var(--selected);
+  --color-thumb: var(--thumb);
+  --color-picker-edge: var(--picker-edge);
+  --color-picker-ring: var(--picker-ring);
+  --color-control: var(--control-border);
+  --color-scrim: var(--scrim);
+  --color-status-success: var(--status-success);
+  --color-status-loading: var(--status-loading);
+  --color-status-error: var(--status-error);
+  --color-status-warning: var(--status-warning);
+  --color-status-info: var(--status-info);
+  --color-status-action: var(--status-action);
+  --color-border: var(--border);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-destructive: var(--destructive);
+  --color-destructive-light: var(--destructive-light);
+  --color-hover: var(--hover);
+  --color-active: var(--active);
+  --color-syntax-keyword: var(--syntax-keyword);
+  --color-syntax-string: var(--syntax-string);
+  --color-syntax-class: var(--syntax-class);
+  --color-syntax-entity: var(--syntax-entity);
+  --color-syntax-property: var(--syntax-property);
+  --color-syntax-comment: var(--syntax-comment);
+  --color-syntax-identifier: var(--syntax-identifier);
+  --color-syntax-jsx: var(--syntax-jsx);
+  --color-syntax-sign: var(--syntax-sign);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
+  --color-surface-4: var(--surface-4);
+  --color-surface-5: var(--surface-5);
+  --color-surface-6: var(--surface-6);
+  --color-surface-7: var(--surface-7);
+  --color-surface-8: var(--surface-8);
+  --shadow-surface-1: var(--shadow-1);
+  --shadow-surface-2: var(--shadow-2);
+  --shadow-surface-3: var(--shadow-3);
+  --shadow-surface-4: var(--shadow-4);
+  --shadow-surface-5: var(--shadow-5);
+  --shadow-surface-6: var(--shadow-6);
+  --shadow-surface-7: var(--shadow-7);
+  --shadow-surface-8: var(--shadow-8);
+  --shadow-thumb: var(--shadow-thumb);
+  --shadow-picker-thumb: var(--shadow-picker-thumb);
+  --shadow-picker-cursor: var(--shadow-picker-cursor);
+  --shadow-swatch: var(--shadow-swatch);
+  --shadow-swatch-hover: var(--shadow-swatch-hover);
+  --shadow-swatch-selected: var(--shadow-swatch-selected);
+  --drop-shadow-picker-cursor: var(--drop-shadow-picker-cursor);
+}
+
+@utility text-display {
+  font-size: var(--text-display);
+  line-height: var(--leading-display);
+}
+
+@utility text-display-compact {
+  font-size: var(--text-display-compact);
+  line-height: var(--leading-display);
+}
+
+@utility text-title {
+  font-size: var(--text-title);
+  line-height: var(--leading-title);
+}
+
+@utility text-title-compact {
+  font-size: var(--text-title-compact);
+  line-height: var(--leading-title);
+}
+
+@utility text-subtitle {
+  font-size: var(--text-subtitle);
+  line-height: var(--leading-subtitle);
+}
+
+@utility text-subtitle-compact {
+  font-size: var(--text-subtitle-compact);
+  line-height: var(--leading-subtitle);
+}
+
+@utility text-body {
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+}
+
+@utility text-body-compact {
+  font-size: var(--text-body-compact);
+  line-height: var(--leading-body);
+}
+
+@utility text-caption {
+  font-size: var(--text-caption);
+  line-height: var(--leading-caption);
+}
+
+@utility text-caption-compact {
+  font-size: var(--text-caption-compact);
+  line-height: var(--leading-caption);
+}
+
+@utility text-micro {
+  font-size: var(--text-micro);
+  line-height: var(--leading-micro);
+}
+
+@utility text-micro-compact {
+  font-size: var(--text-micro-compact);
+  line-height: var(--leading-micro);
+}
+
+@utility weight-normal {
+  font-variation-settings: var(--weight-normal);
+}
+
+@utility weight-medium {
+  font-variation-settings: var(--weight-medium);
+}
+
+@utility weight-semibold {
+  font-variation-settings: var(--weight-semibold);
+}
+
+@utility weight-bold {
+  font-variation-settings: var(--weight-bold);
+}
+
+@utility duration-fast {
+  --tw-duration: var(--duration-fast);
+  transition-duration: var(--duration-fast);
+}
+
+@utility delay-fast {
+  transition-delay: var(--duration-fast);
+}
+
+@utility duration-fast-exit {
+  --tw-duration: var(--duration-fast-exit);
+  transition-duration: var(--duration-fast-exit);
+}
+
+@utility delay-fast-exit {
+  transition-delay: var(--duration-fast-exit);
+}
+
+@utility duration-moderate {
+  --tw-duration: var(--duration-moderate);
+  transition-duration: var(--duration-moderate);
+}
+
+@utility delay-moderate {
+  transition-delay: var(--duration-moderate);
+}
+
+@utility duration-moderate-exit {
+  --tw-duration: var(--duration-moderate-exit);
+  transition-duration: var(--duration-moderate-exit);
+}
+
+@utility delay-moderate-exit {
+  transition-delay: var(--duration-moderate-exit);
+}
+
+@utility duration-slow {
+  --tw-duration: var(--duration-slow);
+  transition-duration: var(--duration-slow);
+}
+
+@utility delay-slow {
+  transition-delay: var(--duration-slow);
+}
+
+@utility duration-slow-exit {
+  --tw-duration: var(--duration-slow-exit);
+  transition-duration: var(--duration-slow-exit);
+}
+
+@utility delay-slow-exit {
+  transition-delay: var(--duration-slow-exit);
+}
+
+@utility rounded-box {
+  border-radius: var(--radius-box);
+}
+
+@utility rounded-glyph {
+  border-radius: var(--radius-glyph);
+}
+

package/dist/tokens.css

@@ -0,0 +1,345 @@
+/*
+ * Fluid Functionalism color tokens.
+ *
+ * Source: mickadesign/fluid-functionalism `app/globals.css` §1 (DESIGN TOKENS)
+ * at commit b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License
+ * © 2026 Micka Touillaud — fluidfunctionalism.com.
+ *
+ * Migration from upstream: every HEX literal was converted to its exact oklch
+ * equivalent (sRGB → OKLab, round-trip verified to the original hex). The
+ * rgb()/rgba() alpha overlays (--overlay, --hover, --active, --shadow-color,
+ * --dm-*) are kept as-is — they are alpha contracts, not palette colors.
+ *
+ * Every color token is written ONCE, as light-dark(light, dark). Which side
+ * renders is driven by `color-scheme` (set in base.css): :root follows the
+ * OS, and a `.light` or `.dark` class pins it. The block is declared on
+ * `:root, .light, .dark` — not just `:root` — because light-dark() inside a
+ * custom property resolves against the color-scheme of the element the
+ * property is declared on, so a forced-scope subtree becomes its own
+ * resolution point.
+ *
+ * The surface ladder and its shadow recipes live with their primitive in
+ * primitives/surface/surface.css. The one token that cannot ride
+ * light-dark() here — the --overlay RGB triplet (consumed as
+ * rgb(var(--overlay) / α), an alpha contract) — is re-pointed per scheme in
+ * base.css.
+ */
+
+:root,
+.light,
+.dark {
+  /* The surface ladder (--surface-1..8) and the shadow recipes pair with it
+     in primitives/surface/surface.css. */
+
+  /* ── Semantic tokens ── */
+  /* Same color as --surface-1, inlined so the global token set never
+     depends on the surface primitive's CSS being loaded. */
+  --background: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --foreground: light-dark(oklch(0.205 0 0), oklch(0.97 0 0));
+  /* Same color as --surface-3, inlined for the same reason. */
+  --card: light-dark(oklch(1 0 0), oklch(0.264 0 0));
+  --card-foreground: light-dark(oklch(0.205 0 0), oklch(0.97 0 0));
+  /* Light `muted` decouples from surface-2: the light surface ladder is so
+     compressed that a ladder value would read as near-white, making anything
+     sitting on it blend together. A slightly greyer value gives muted real
+     semantic presence. Dark keeps the ladder value (= surface-2). */
+  --muted: light-dark(oklch(0.967 0.001 286.375), oklch(0.235 0 0));
+  --muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.7155 0 0));
+
+  /* ── Interactive states ── */
+  --accent: light-dark(oklch(0.922 0 0), oklch(0.439 0 0));
+  --accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.97 0 0));
+  /* --accent nudged toward the overlay direction (the switch track's hover). */
+  --accent-hover: color-mix(in oklab, var(--accent), rgb(var(--overlay)) 10%);
+  --selected: light-dark(oklch(0.87 0 0), oklch(0.439 0 0));
+
+  /* ── Borders ──
+     --border mixes from --foreground, so it tracks the theme automatically —
+     including inside nested forced scopes, where light-dark() re-resolves
+     --foreground before the mix happens. */
+  --border: color-mix(in oklab, var(--foreground) 12%, transparent);
+  --ring: light-dark(oklch(0.922 0 0), oklch(0.371 0 0));
+  --input: light-dark(oklch(0.922 0 0), oklch(0.371 0 0));
+
+  /* ── Error / Destructive ── */
+  --destructive: light-dark(oklch(0.6368 0.2078 25.33), oklch(0.7106 0.1661 22.22));
+  --destructive-light: light-dark(oklch(0.971 0.013 17.38), oklch(0.2575 0.0886 26.04));
+
+  /* ── Brand blue ──
+     FF's one chromatic accent: the switch's on-track, the copy field's hover
+     highlight, drop-target and selected-swatch rings. */
+  --brand: oklch(0.693 0.16 265);
+  --brand-hover: oklch(0.649 0.164 264.76);
+
+  /* ── Focus indicator ──
+     Every component focus ring reads it (`ring-focus-ring`,
+     `border-focus-ring`), so this is the single theming point. */
+  --focus-ring: var(--brand);
+
+  /* ── Alpha checkerboard (color-picker swatches) ── */
+  --checker-a: light-dark(oklch(0.792 0 0), oklch(0.239 0 0));
+  --checker-b: light-dark(oklch(1 0 0), oklch(0.285 0 0));
+  /* Swatch edges: a mid-grey hairline that reads on any swatch color in
+     either scheme, plus the hover / selected rings, set off by a
+     --background gap. */
+  --swatch-edge: rgb(127 127 127 / 0.25);
+  --swatch-edge-hover: rgb(127 127 127 / 0.4);
+  --shadow-swatch: inset 0 0 0 1px var(--swatch-edge);
+  --shadow-swatch-hover: var(--shadow-swatch), 0 0 0 2px var(--background), 0 0 0 4px var(--swatch-edge-hover);
+  --shadow-swatch-selected: var(--shadow-swatch), 0 0 0 2px var(--background), 0 0 0 4px var(--brand);
+
+  /* ── Thumbs (switch, slider) ──
+     White in both schemes, set off by a soft drop. */
+  --thumb: oklch(1 0 0);
+  --shadow-thumb: 0 1px 2px rgb(0 0 0 / 0.1);
+
+  /* ── Color picker affordances ──
+     Drawn over any user color, so fixed white and black rather than theme
+     colors: they have to read on every fill, in either scheme. */
+  --picker-edge: oklch(0 0 0);
+  --picker-ring: oklch(1 0 0 / 0.55);
+  --picker-thumb-border: oklch(1 0 0 / 0.9);
+  --shadow-picker-thumb: 0 0 0 1px var(--picker-edge);
+  --shadow-picker-cursor: 0 0 0 1px oklch(0 0 0 / 0.2);
+  --drop-shadow-picker-cursor: 0 1px 1px oklch(0 0 0 / 0.4);
+
+  /* ── Controls ──
+     An unchecked checkbox or radio takes a stronger edge than --border;
+     a modal dialog dims the page behind it with the scrim. */
+  --control-border: light-dark(oklch(0.708 0 0), oklch(0.556 0 0));
+  --scrim: light-dark(oklch(0 0 0 / 0.4), oklch(0 0 0 / 0.8));
+
+  /* ── Surface-relative interactive overlays (work on any elevation) ──
+     --overlay is the tint-direction triplet — black for light surfaces,
+     white for dark. Components consume it as rgb(var(--overlay) / α), so it
+     stays an RGB triplet and switches per theme in base.css. --hover and
+     --active are the pre-mixed conveniences. */
+  --overlay: 0 0 0;
+  --hover: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.06));
+  --active: light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.1));
+
+  /* ── Syntax (primitives/code) ──
+     Low-chroma hues so code reads as text first; identifiers, JSX text and
+     punctuation ride the existing foreground pair. */
+  --syntax-keyword: light-dark(oklch(0.52 0.16 300), oklch(0.76 0.12 300));
+  --syntax-string: light-dark(oklch(0.52 0.12 150), oklch(0.79 0.11 150));
+  --syntax-class: light-dark(oklch(0.56 0.12 65), oklch(0.81 0.1 75));
+  --syntax-entity: light-dark(oklch(0.52 0.15 255), oklch(0.77 0.11 250));
+  --syntax-property: light-dark(oklch(0.52 0.1 205), oklch(0.79 0.08 200));
+  --syntax-comment: light-dark(oklch(0.62 0 0), oklch(0.56 0 0));
+  --syntax-identifier: var(--foreground);
+  --syntax-jsx: var(--foreground);
+  --syntax-sign: var(--muted-foreground);
+}
+
+/* ── Badge palette ──
+   Badge's `color` hues (upstream hex, as exact oklch). Constant across
+   schemes; the solid variant mixes each 15% into --background. */
+:root {
+  --badge-gray: oklch(0.715 0 0);
+  --badge-red: oklch(0.637 0.208 25.33);
+  --badge-orange: oklch(0.7049 0.1867 47.6);
+  --badge-amber: oklch(0.7686 0.1647 70.08);
+  --badge-yellow: oklch(0.7952 0.1617 86.05);
+  --badge-lime: oklch(0.7681 0.2044 130.85);
+  --badge-green: oklch(0.723 0.192 149.58);
+  --badge-emerald: oklch(0.6959 0.1491 162.48);
+  --badge-teal: oklch(0.704 0.123 182.5);
+  --badge-cyan: oklch(0.7148 0.1257 215.22);
+  --badge-blue: oklch(0.623 0.188 259.81);
+  --badge-indigo: oklch(0.585 0.204 277.12);
+  --badge-violet: oklch(0.606 0.219 292.72);
+  --badge-purple: oklch(0.627 0.233 303.9);
+  --badge-fuchsia: oklch(0.667 0.259 322.15);
+  --badge-pink: oklch(0.656 0.212 354.31);
+  --badge-rose: oklch(0.645 0.215 16.44);
+}
+
+/* ── Status roles ──
+   The toast states, picked from the badge palette (and --destructive /
+   --brand) by reference, so a status reads the same wherever it shows. */
+:root {
+  --status-success: var(--badge-green);
+  --status-loading: var(--badge-gray);
+  --status-error: var(--destructive);
+  --status-warning: var(--badge-amber);
+  --status-info: var(--badge-blue);
+  --status-action: var(--brand);
+}
+
+/*
+ * Fluid Functionalism motion tokens.
+ *
+ * Source: mickadesign/fluid-functionalism `registry/default/lib/springs.ts`
+ * at commit b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License © 2026
+ * Micka Touillaud — fluidfunctionalism.com.
+ *
+ * FF's motion is JS: the `spring` tiers in lib/springs.ts feed
+ * `motion/react`, and components always reach for a tier rather than a
+ * hand-written duration. These properties mirror those tiers for CSS
+ * consumers and for the tokens page — keep the two in sync.
+ *
+ * Each tier's enter transition is a spring of the given duration; its exit is
+ * a plain tween one step quicker, so a dismissal reads as crisp and final.
+ *   fast      80ms enter, 60ms exit   — critically damped (bounce 0)
+ *   moderate  160ms enter, 120ms exit — critically damped (bounce 0): panels,
+ *             dropdowns, tabs, merged selection backgrounds
+ *   slow      240ms enter, 160ms exit — the one tier with a little bounce
+ *             (bounce 0.12)
+ * The bigger the thing that moves, the slower the tier.
+ *
+ * Local addition: `goo`, the morph engine's tier for the goo effect — 250ms
+ * to land (bounce 0.15), a 200ms spring back — so the liquid neck reads.
+ */
+
+:root {
+  --duration-fast: 80ms;
+  --duration-fast-exit: 60ms;
+  --duration-moderate: 160ms;
+  --duration-moderate-exit: 120ms;
+  --duration-slow: 240ms;
+  --duration-slow-exit: 160ms;
+  --duration-goo: 250ms;
+  --duration-goo-exit: 200ms;
+}
+
+:root {
+  /* Fluid Functionalism's corner token (upstream tokens/radius.css). */
+  --radius: 0.625rem;
+
+  /* Small-box corners between wind4's xs (2px) and md (6px) steps, read by
+     the `rounded-box|glyph` utility in preset.ts: checkbox squares and
+     keycaps, and the composer's stop glyph. */
+  --radius-box: 5px;
+  --radius-glyph: 3px;
+}
+
+:root {
+  /* The docs chrome's spacing rhythm (AGENTS.md generic tokens). */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+}
+
+/*
+ * Fluid Functionalism type tokens.
+ *
+ * Source: mickadesign/fluid-functionalism `app/globals.css` §3–4 (`--font-sans`,
+ * the `--fs-*` type-scale roles and their `@utility text-*` classes) at commit
+ * b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License © 2026 Micka
+ * Touillaud — fluidfunctionalism.com.
+ *
+ * Local changes:
+ * - The family is Inter Variable from @fontsource-variable/inter/opsz
+ *   (imported in base.css) instead of upstream's self-hosted
+ *   InterVariable.ttf. The opsz build matters: the `--weight-*` ladder sets
+ *   both the wght and opsz axes.
+ * - The role sizes are renamed `--fs-*` → `--text-*` and read by the
+ *   `text-<role>[-compact]` utility in preset.ts. They hold both columns of
+ *   `typeScale` in lib/size-context.tsx (keep the two in sync), so a
+ *   component's `compact ? … : …` picks a token on either side. Upstream's
+ *   site-chrome extras — the 22px mobile display step and the
+ *   `html[data-size="compact"]` override set by the docs site's
+ *   SizeAttribute — are not carried over.
+ * - `micro` (keycaps, one notch below caption) is a local role.
+ * - Each role's line-height (FF's typography page: 28/34, 16/22, 14/20,
+ *   13/20, 12/16) is a `--leading-*` token, emitted by the same
+ *   `text-<role>` rule; the compact step keeps its role's leading.
+ * - The docs chrome's element roles (`--font-size-<el>`, `--line-height-<el>`,
+ *   `--font-weight-<el>`, `--color-<el>`) reference these, following FF's
+ *   rules: headings in foreground, text muted.
+ * - Upstream's `fontWeights` (lib/font-weight.ts, fontVariationSettings
+ *   strings) become the `--weight-*` variation settings, read by the
+ *   `weight-*` utility in preset.ts. Each derives its wght from
+ *   `--font-weight-*`, the plain font-weight form the docs chrome reads.
+ */
+
+:root {
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* Page titles. */
+  --text-display: 28px;
+  /* Section headings, dialog titles. */
+  --text-title: 16px;
+  /* Card titles, emphasized rows. */
+  --text-subtitle: 14px;
+  /* Control labels and body copy. */
+  --text-body: 13px;
+  /* Secondary text: descriptions, meta rows, errors, group labels. */
+  --text-caption: 12px;
+  /* Keycaps and chips. */
+  --text-micro: 11px;
+
+  /* Each role's paired line-height. */
+  --leading-display: 34px;
+  --leading-title: 22px;
+  --leading-subtitle: 20px;
+  --leading-body: 20px;
+  --leading-caption: 16px;
+  --leading-micro: 14px;
+
+  /* The compact step: each role one notch down. */
+  --text-display-compact: 24px;
+  --text-title-compact: 15px;
+  --text-subtitle-compact: 13px;
+  --text-body-compact: 12px;
+  --text-caption-compact: 11px;
+  --text-micro-compact: 10px;
+
+  /* Inter variable weights, each paired with the opsz that keeps a label's
+     advance width steady as it changes weight. */
+  --font-weight-normal: 400;
+  --font-weight-medium: 450;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 700;
+  --weight-normal: "wght" var(--font-weight-normal), "opsz" 14;
+  --weight-medium: "wght" var(--font-weight-medium), "opsz" 15;
+  --weight-semibold: "wght" var(--font-weight-semibold), "opsz" 18;
+  --weight-bold: "wght" var(--font-weight-bold), "opsz" 25;
+
+  /* The docs chrome's elements (modo's type contract), on the roles above. */
+  --font-size-h1: var(--text-display);
+  --line-height-h1: var(--leading-display);
+  --font-weight-h1: var(--font-weight-bold);
+  --color-h1: var(--foreground);
+
+  --font-size-h2: var(--text-title);
+  --line-height-h2: var(--leading-title);
+  --font-weight-h2: var(--font-weight-semibold);
+  --color-h2: var(--foreground);
+
+  --font-size-h3: var(--text-subtitle);
+  --line-height-h3: var(--leading-subtitle);
+  --font-weight-h3: var(--font-weight-semibold);
+  --color-h3: var(--foreground);
+
+  --font-size-h4: var(--text-body);
+  --line-height-h4: var(--leading-body);
+  --font-weight-h4: var(--font-weight-semibold);
+  --color-h4: var(--foreground);
+
+  --font-size-p: var(--text-body);
+  --line-height-p: var(--leading-body);
+  --font-weight-p: var(--font-weight-normal);
+  --color-p: var(--muted-foreground);
+
+  --font-size-lead: var(--text-body);
+  --line-height-lead: var(--leading-body);
+  --font-weight-lead: var(--font-weight-normal);
+  --color-lead: var(--muted-foreground);
+
+  --font-size-eyebrow: var(--text-caption);
+  --line-height-eyebrow: var(--leading-caption);
+  --font-weight-eyebrow: var(--font-weight-medium);
+  --color-eyebrow: var(--muted-foreground);
+
+  --font-size-sm: var(--text-caption);
+  --line-height-sm: var(--leading-caption);
+
+  --font-size-xs: var(--text-micro);
+  --line-height-xs: var(--leading-micro);
+}

package/package.json

@@ -1,6 +1,105 @@
 {
   "name": "@justanarthur/modo-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "type": "module",
+  "version": "0.2.0",
+  "description": "Fluid Functionalism (Base UI flavor, MIT © 2026 Micka Touillaud) ported to UnoCSS: motion springs, fluid hover, a two-step size ladder and an eight-level elevated surface system. Documented with modo.",
+  "license": "MIT",
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "base-ui",
+    "unocss",
+    "tailwindcss",
+    "motion",
+    "fluid-functionalism"
+  ],
+  "homepage": "https://github.com/justAnArthur/modo/tree/main/ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/justAnArthur/modo.git",
+    "directory": "ui"
+  },
+  "bugs": {
+    "url": "https://github.com/justAnArthur/modo/issues"
+  },
+  "author": {
+    "name": "justAnArthur",
+    "email": "kozubov.arthur@gmail.com"
+  },
+  "properties": {
+    "gitCommitScopeRelatedNames": "ui,modo-ui,@justanarthur/modo-ui,justanarthur/modo-ui"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE*"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./primitives/*": {
+      "types": "./dist/primitives/*/index.d.ts",
+      "default": "./dist/primitives/*/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "default": "./dist/components/*/index.js"
+    },
+    "./blocks/*": {
+      "types": "./dist/blocks/*/index.d.ts",
+      "default": "./dist/blocks/*/index.js"
+    },
+    "./unocss": {
+      "types": "./dist/preset.d.ts",
+      "default": "./dist/preset.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./base.css": "./dist/base.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./tailwind.css": "./dist/tailwind.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "rm -rf dist && NODE_ENV=production bunup && bun scripts/build-css.ts",
+    "build:docs": "modo build --out docs-dist",
+    "dev": "modo dev",
+    "check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@base-ui/react": "1.4.1",
+    "@fontsource-variable/inter": "^5.3.0",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.3.0",
+    "date-fns": "^4.4.0",
+    "lucide-react": "^1.47.0",
+    "motion": "^13.4.0",
+    "pdfjs-dist": "^5.7.284",
+    "react-day-picker": "^10.0.2",
+    "sugar-high": "^2.5.1"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@justanarthur/modo": "0.8.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "bunup": "^0.16.0",
+    "esbuild": "^0.20.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "typescript": "^5.4.0",
+    "unocss": "66.10.5",
+    "vite": "^5.4.0"
+  }
+}