@hintoric/ui 0.8.0 → 0.10.0

package/dist/tailwind.css

@@ -0,0 +1,463 @@
+/*
+ * @hintoric/ui as Tailwind CSS v4 input. Use it instead of `@hintoric/ui/styles.css`
+ * when your app runs its own Tailwind:
+ *
+ *   @import "tailwindcss";
+ *   @import "@hintoric/ui/tailwind.css";
+ */
+/*
+ * Everything the library's stylesheet needs on top of Tailwind itself, minus
+ * the content scan. Two entry points share it: `index.css` (our own build,
+ * which scans `src/`) and the published `dist/tailwind.css` (a consumer's
+ * Tailwind build, which scans `dist/index.js` instead — see
+ * scripts/tailwindEntry.ts). Keep anything path-relative out of this file:
+ * it is inlined into dist, where `src/` paths do not exist.
+ */
+@theme {
+  /* raw palette stops (from Joy UI's colors.ts: blue/grey/yellow/red/green) */
+  --color-neutral-50: #FBFCFE;
+  --color-neutral-100: #F0F4F8;
+  --color-neutral-200: #DDE7EE;
+  --color-neutral-300: #CDD7E1;
+  --color-neutral-400: #9FA6AD;
+  --color-neutral-500: #636B74;
+  --color-neutral-600: #555E68;
+  --color-neutral-700: #32383E;
+  --color-neutral-800: #171A1C;
+  --color-neutral-900: #0B0D0E;
+  --color-primary-50: #EDF5FD;
+  --color-primary-100: #E3EFFB;
+  --color-primary-200: #C7DFF7;
+  --color-primary-300: #97C3F0;
+  --color-primary-400: #4393E4;
+  --color-primary-500: #0B6BCB;
+  --color-primary-600: #185EA5;
+  --color-primary-700: #12467B;
+  --color-primary-800: #0A2744;
+  --color-primary-900: #051423;
+  --color-warning-50: #FEFAF6;
+  --color-warning-100: #FDF0E1;
+  --color-warning-200: #FCE1C2;
+  --color-warning-300: #F3C896;
+  --color-warning-400: #EA9A3E;
+  --color-warning-500: #9A5B13;
+  --color-warning-600: #72430D;
+  --color-warning-700: #492B08;
+  --color-warning-800: #2E1B05;
+  --color-warning-900: #1D1002;
+  --color-danger-50: #FEF6F6;
+  --color-danger-100: #FCE4E4;
+  --color-danger-200: #F7C5C5;
+  --color-danger-300: #F09898;
+  --color-danger-400: #E47474;
+  --color-danger-500: #C41C1C;
+  --color-danger-600: #A51818;
+  --color-danger-700: #7D1212;
+  --color-danger-800: #430A0A;
+  --color-danger-900: #240505;
+  --color-success-50: #F6FEF6;
+  --color-success-100: #E3FBE3;
+  --color-success-200: #C7F7C7;
+  --color-success-300: #A1E8A1;
+  --color-success-400: #51BC51;
+  --color-success-500: #1F7A1F;
+  --color-success-600: #136C13;
+  --color-success-700: #0A470A;
+  --color-success-800: #042F04;
+  --color-success-900: #021D02;
+  --color-common-white: #FFFFFF;
+  --color-common-black: #000000;
+
+  /* per-variant semantic tokens (light mode default) */
+  --color-primary-plain-color: var(--color-primary-500);
+  --color-primary-plain-hover-bg: var(--color-primary-100);
+  --color-primary-plain-active-bg: var(--color-primary-200);
+  --color-primary-plain-disabled-color: var(--color-neutral-400);
+  --color-primary-outlined-color: var(--color-primary-500);
+  --color-primary-outlined-border: var(--color-primary-300);
+  --color-primary-outlined-hover-bg: var(--color-primary-100);
+  --color-primary-outlined-active-bg: var(--color-primary-200);
+  --color-primary-outlined-disabled-color: var(--color-neutral-400);
+  --color-primary-outlined-disabled-border: var(--color-neutral-200);
+  --color-primary-soft-color: var(--color-primary-700);
+  --color-primary-soft-bg: var(--color-primary-100);
+  --color-primary-soft-hover-bg: var(--color-primary-200);
+  --color-primary-soft-active-color: var(--color-primary-800);
+  --color-primary-soft-active-bg: var(--color-primary-300);
+  --color-primary-soft-disabled-color: var(--color-neutral-400);
+  --color-primary-soft-disabled-bg: var(--color-neutral-50);
+  --color-primary-solid-color: var(--color-common-white);
+  --color-primary-solid-bg: var(--color-primary-500);
+  --color-primary-solid-hover-bg: var(--color-primary-600);
+  --color-primary-solid-active-bg: var(--color-primary-700);
+  --color-primary-solid-disabled-color: var(--color-neutral-400);
+  --color-primary-solid-disabled-bg: var(--color-neutral-100);
+  /* Joy UI overrides plainColor/outlinedColor to neutral-700 specifically for
+     the neutral color (light mode) — every other color keeps the generic
+     -500 from createLightModeVariantVariables. Confirmed against @mui/joy's
+     extendTheme.ts and caught by Button.visual.test.tsx. */
+  --color-neutral-plain-color: var(--color-neutral-700);
+  --color-neutral-plain-hover-bg: var(--color-neutral-100);
+  /* Joy's extendTheme.js gives only neutral a plainHoverColor (900 light, 300
+     dark); found 2026-10-02 by ToggleButtonGroup's hover test. */
+  --color-neutral-plain-hover-color: var(--color-neutral-900);
+  --color-neutral-plain-active-bg: var(--color-neutral-200);
+  --color-neutral-plain-disabled-color: var(--color-neutral-400);
+  --color-neutral-outlined-color: var(--color-neutral-700);
+  --color-neutral-outlined-border: var(--color-neutral-300);
+  --color-neutral-outlined-hover-bg: var(--color-neutral-100);
+  --color-neutral-outlined-active-bg: var(--color-neutral-200);
+  --color-neutral-outlined-disabled-color: var(--color-neutral-400);
+  --color-neutral-outlined-disabled-border: var(--color-neutral-200);
+  --color-neutral-soft-color: var(--color-neutral-700);
+  --color-neutral-soft-bg: var(--color-neutral-100);
+  --color-neutral-soft-hover-bg: var(--color-neutral-200);
+  --color-neutral-soft-active-color: var(--color-neutral-800);
+  --color-neutral-soft-active-bg: var(--color-neutral-300);
+  --color-neutral-soft-disabled-color: var(--color-neutral-400);
+  --color-neutral-soft-disabled-bg: var(--color-neutral-50);
+  --color-neutral-solid-color: var(--color-common-white);
+  --color-neutral-solid-bg: var(--color-neutral-500);
+  --color-neutral-solid-hover-bg: var(--color-neutral-600);
+  --color-neutral-solid-active-bg: var(--color-neutral-700);
+  --color-neutral-solid-disabled-color: var(--color-neutral-400);
+  --color-neutral-solid-disabled-bg: var(--color-neutral-100);
+  --color-danger-plain-color: var(--color-danger-500);
+  --color-danger-plain-hover-bg: var(--color-danger-100);
+  --color-danger-plain-active-bg: var(--color-danger-200);
+  --color-danger-plain-disabled-color: var(--color-neutral-400);
+  --color-danger-outlined-color: var(--color-danger-500);
+  --color-danger-outlined-border: var(--color-danger-300);
+  --color-danger-outlined-hover-bg: var(--color-danger-100);
+  --color-danger-outlined-active-bg: var(--color-danger-200);
+  --color-danger-outlined-disabled-color: var(--color-neutral-400);
+  --color-danger-outlined-disabled-border: var(--color-neutral-200);
+  --color-danger-soft-color: var(--color-danger-700);
+  --color-danger-soft-bg: var(--color-danger-100);
+  --color-danger-soft-hover-bg: var(--color-danger-200);
+  --color-danger-soft-active-color: var(--color-danger-800);
+  --color-danger-soft-active-bg: var(--color-danger-300);
+  --color-danger-soft-disabled-color: var(--color-neutral-400);
+  --color-danger-soft-disabled-bg: var(--color-neutral-50);
+  --color-danger-solid-color: var(--color-common-white);
+  --color-danger-solid-bg: var(--color-danger-500);
+  --color-danger-solid-hover-bg: var(--color-danger-600);
+  --color-danger-solid-active-bg: var(--color-danger-700);
+  --color-danger-solid-disabled-color: var(--color-neutral-400);
+  --color-danger-solid-disabled-bg: var(--color-neutral-100);
+  --color-success-plain-color: var(--color-success-500);
+  --color-success-plain-hover-bg: var(--color-success-100);
+  --color-success-plain-active-bg: var(--color-success-200);
+  --color-success-plain-disabled-color: var(--color-neutral-400);
+  --color-success-outlined-color: var(--color-success-500);
+  --color-success-outlined-border: var(--color-success-300);
+  --color-success-outlined-hover-bg: var(--color-success-100);
+  --color-success-outlined-active-bg: var(--color-success-200);
+  --color-success-outlined-disabled-color: var(--color-neutral-400);
+  --color-success-outlined-disabled-border: var(--color-neutral-200);
+  --color-success-soft-color: var(--color-success-700);
+  --color-success-soft-bg: var(--color-success-100);
+  --color-success-soft-hover-bg: var(--color-success-200);
+  --color-success-soft-active-color: var(--color-success-800);
+  --color-success-soft-active-bg: var(--color-success-300);
+  --color-success-soft-disabled-color: var(--color-neutral-400);
+  --color-success-soft-disabled-bg: var(--color-neutral-50);
+  --color-success-solid-color: var(--color-common-white);
+  --color-success-solid-bg: var(--color-success-500);
+  --color-success-solid-hover-bg: var(--color-success-600);
+  --color-success-solid-active-bg: var(--color-success-700);
+  --color-success-solid-disabled-color: var(--color-neutral-400);
+  --color-success-solid-disabled-bg: var(--color-neutral-100);
+  --color-warning-plain-color: var(--color-warning-500);
+  --color-warning-plain-hover-bg: var(--color-warning-100);
+  --color-warning-plain-active-bg: var(--color-warning-200);
+  --color-warning-plain-disabled-color: var(--color-neutral-400);
+  --color-warning-outlined-color: var(--color-warning-500);
+  --color-warning-outlined-border: var(--color-warning-300);
+  --color-warning-outlined-hover-bg: var(--color-warning-100);
+  --color-warning-outlined-active-bg: var(--color-warning-200);
+  --color-warning-outlined-disabled-color: var(--color-neutral-400);
+  --color-warning-outlined-disabled-border: var(--color-neutral-200);
+  --color-warning-soft-color: var(--color-warning-700);
+  --color-warning-soft-bg: var(--color-warning-100);
+  --color-warning-soft-hover-bg: var(--color-warning-200);
+  --color-warning-soft-active-color: var(--color-warning-800);
+  --color-warning-soft-active-bg: var(--color-warning-300);
+  --color-warning-soft-disabled-color: var(--color-neutral-400);
+  --color-warning-soft-disabled-bg: var(--color-neutral-50);
+  --color-warning-solid-color: var(--color-common-white);
+  --color-warning-solid-bg: var(--color-warning-500);
+  --color-warning-solid-hover-bg: var(--color-warning-600);
+  --color-warning-solid-active-bg: var(--color-warning-700);
+  --color-warning-solid-disabled-color: var(--color-neutral-400);
+  --color-warning-solid-disabled-bg: var(--color-neutral-100);
+
+  /* text + surface tokens (light mode default) */
+  --color-ink-primary: var(--color-neutral-800);
+  --color-ink-secondary: var(--color-neutral-700);
+  --color-ink-tertiary: var(--color-neutral-600);
+  --color-ink-icon: var(--color-neutral-500);
+  --color-canvas: var(--color-common-white);
+  --color-surface: var(--color-neutral-50);
+  --color-surface-popup: var(--color-common-white);
+  --color-surface-1: var(--color-neutral-100);
+  --color-surface-2: var(--color-neutral-200);
+  --color-surface-3: var(--color-neutral-300);
+  --color-divider: rgba(99, 107, 116, 0.2);
+
+  /* Joy's `mainChannel` — the palette step a component reaches for when it
+     wants "the" colour rather than a variant slot. Joy remaps it per scheme
+     in extendTheme.js:393-403:
+
+       const channelMapping = { main: '500', light: '200', dark: '700' };
+       if (supportedColorScheme === 'dark') { channelMapping.main = 400; }
+
+     so it is step 500 in light and step 400 in dark. Added 2026-09-07: this
+     project had no `main` token at all, so components reaching for it
+     hardcoded `-500` and never changed in dark mode. That is what made
+     `Link` (which Joy's Link.js:120 resolves from `palette[color]
+     .mainChannel`, not from `plainColor`) and `Divider` render their light
+     colour on a dark page. */
+  --color-primary-main: var(--color-primary-500);
+  --color-neutral-main: var(--color-neutral-500);
+  --color-danger-main: var(--color-danger-500);
+  --color-success-main: var(--color-success-500);
+  --color-warning-main: var(--color-warning-500);
+
+  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+  /* radius scale (Joy UI defaultTheme.radius) */
+  --radius-xs: 2px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+
+  /* shadow.xs/md/lg (Joy UI defaultTheme.shadow, light mode: shadowChannel
+     '21 21 21' / shadowOpacity 0.08). Joy's real formula prefixes every
+     shadow level with a `shadowRing` layer (`0 0 #000`) — a zero-blur,
+     zero-spread shadow that renders as nothing visible, so it's dropped
+     here rather than carried as a dead layer. Confirmed against
+     @mui/joy's extendTheme.js source. */
+  --shadow-xs: 0px 1px 2px 0px rgba(21, 21, 21, 0.08);
+  --shadow-md: 0px 2px 8px -2px rgba(21, 21, 21, 0.08), 0px 6px 12px -2px rgba(21, 21, 21, 0.08);
+  --shadow-lg: 0px 2px 8px -2px rgba(21, 21, 21, 0.08), 0px 12px 16px -4px rgba(21, 21, 21, 0.08);
+
+  /* AnimatedMapImage's entrance: the whole frame irises open from center
+     (map-reveal) while a pin drops onto the coordinate and an ink ring
+     ripples out from under it. Not color-scheme dependent, so registered
+     once here rather than duplicated in the dark-mode block below. */
+  --animate-map-reveal: hintoric-map-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  --animate-pin-drop: hintoric-pin-drop 550ms 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  --animate-ink-ripple: hintoric-ink-ripple 900ms 400ms ease-out both;
+}
+
+[data-color-scheme="dark"] {
+  --color-primary-plain-color: var(--color-primary-300);
+  --color-primary-plain-hover-bg: var(--color-primary-800);
+  --color-primary-plain-active-bg: var(--color-primary-700);
+  --color-primary-plain-disabled-color: var(--color-neutral-500);
+  --color-primary-outlined-color: var(--color-primary-200);
+  --color-primary-outlined-border: var(--color-primary-700);
+  --color-primary-outlined-hover-bg: var(--color-primary-800);
+  --color-primary-outlined-active-bg: var(--color-primary-700);
+  --color-primary-outlined-disabled-color: var(--color-neutral-500);
+  --color-primary-outlined-disabled-border: var(--color-neutral-800);
+  --color-primary-soft-color: var(--color-primary-200);
+  --color-primary-soft-bg: var(--color-primary-800);
+  --color-primary-soft-hover-bg: var(--color-primary-700);
+  --color-primary-soft-active-color: var(--color-primary-100);
+  --color-primary-soft-active-bg: var(--color-primary-600);
+  --color-primary-soft-disabled-color: var(--color-neutral-500);
+  --color-primary-soft-disabled-bg: var(--color-neutral-800);
+  --color-primary-solid-color: var(--color-common-white);
+  --color-primary-solid-bg: var(--color-primary-500);
+  --color-primary-solid-hover-bg: var(--color-primary-600);
+  --color-primary-solid-active-bg: var(--color-primary-700);
+  --color-primary-solid-disabled-color: var(--color-neutral-500);
+  --color-primary-solid-disabled-bg: var(--color-neutral-800);
+  --color-neutral-plain-color: var(--color-neutral-300);
+  --color-neutral-plain-hover-bg: var(--color-neutral-800);
+  --color-neutral-plain-hover-color: var(--color-neutral-300);
+  --color-neutral-plain-active-bg: var(--color-neutral-700);
+  --color-neutral-plain-disabled-color: var(--color-neutral-500);
+  --color-neutral-outlined-color: var(--color-neutral-200);
+  --color-neutral-outlined-border: var(--color-neutral-700);
+  --color-neutral-outlined-hover-bg: var(--color-neutral-800);
+  --color-neutral-outlined-active-bg: var(--color-neutral-700);
+  --color-neutral-outlined-disabled-color: var(--color-neutral-500);
+  --color-neutral-outlined-disabled-border: var(--color-neutral-800);
+  --color-neutral-soft-color: var(--color-neutral-200);
+  --color-neutral-soft-bg: var(--color-neutral-800);
+  --color-neutral-soft-hover-bg: var(--color-neutral-700);
+  --color-neutral-soft-active-color: var(--color-neutral-100);
+  --color-neutral-soft-active-bg: var(--color-neutral-600);
+  --color-neutral-soft-disabled-color: var(--color-neutral-500);
+  --color-neutral-soft-disabled-bg: var(--color-neutral-800);
+  --color-neutral-solid-color: var(--color-common-white);
+  --color-neutral-solid-bg: var(--color-neutral-500);
+  --color-neutral-solid-hover-bg: var(--color-neutral-600);
+  --color-neutral-solid-active-bg: var(--color-neutral-700);
+  --color-neutral-solid-disabled-color: var(--color-neutral-500);
+  --color-neutral-solid-disabled-bg: var(--color-neutral-800);
+  --color-danger-plain-color: var(--color-danger-300);
+  --color-danger-plain-hover-bg: var(--color-danger-800);
+  --color-danger-plain-active-bg: var(--color-danger-700);
+  --color-danger-plain-disabled-color: var(--color-neutral-500);
+  --color-danger-outlined-color: var(--color-danger-200);
+  --color-danger-outlined-border: var(--color-danger-700);
+  --color-danger-outlined-hover-bg: var(--color-danger-800);
+  --color-danger-outlined-active-bg: var(--color-danger-700);
+  --color-danger-outlined-disabled-color: var(--color-neutral-500);
+  --color-danger-outlined-disabled-border: var(--color-neutral-800);
+  --color-danger-soft-color: var(--color-danger-200);
+  --color-danger-soft-bg: var(--color-danger-800);
+  --color-danger-soft-hover-bg: var(--color-danger-700);
+  --color-danger-soft-active-color: var(--color-danger-100);
+  --color-danger-soft-active-bg: var(--color-danger-600);
+  --color-danger-soft-disabled-color: var(--color-neutral-500);
+  --color-danger-soft-disabled-bg: var(--color-neutral-800);
+  --color-danger-solid-color: var(--color-common-white);
+  --color-danger-solid-bg: var(--color-danger-500);
+  --color-danger-solid-hover-bg: var(--color-danger-600);
+  --color-danger-solid-active-bg: var(--color-danger-700);
+  --color-danger-solid-disabled-color: var(--color-neutral-500);
+  --color-danger-solid-disabled-bg: var(--color-neutral-800);
+  --color-success-plain-color: var(--color-success-300);
+  --color-success-plain-hover-bg: var(--color-success-800);
+  --color-success-plain-active-bg: var(--color-success-700);
+  --color-success-plain-disabled-color: var(--color-neutral-500);
+  --color-success-outlined-color: var(--color-success-200);
+  --color-success-outlined-border: var(--color-success-700);
+  --color-success-outlined-hover-bg: var(--color-success-800);
+  --color-success-outlined-active-bg: var(--color-success-700);
+  --color-success-outlined-disabled-color: var(--color-neutral-500);
+  --color-success-outlined-disabled-border: var(--color-neutral-800);
+  --color-success-soft-color: var(--color-success-200);
+  --color-success-soft-bg: var(--color-success-800);
+  --color-success-soft-hover-bg: var(--color-success-700);
+  --color-success-soft-active-color: var(--color-success-100);
+  --color-success-soft-active-bg: var(--color-success-600);
+  --color-success-soft-disabled-color: var(--color-neutral-500);
+  --color-success-soft-disabled-bg: var(--color-neutral-800);
+  --color-success-solid-color: var(--color-common-white);
+  --color-success-solid-bg: var(--color-success-500);
+  --color-success-solid-hover-bg: var(--color-success-600);
+  --color-success-solid-active-bg: var(--color-success-700);
+  --color-success-solid-disabled-color: var(--color-neutral-500);
+  --color-success-solid-disabled-bg: var(--color-neutral-800);
+  --color-warning-plain-color: var(--color-warning-300);
+  --color-warning-plain-hover-bg: var(--color-warning-800);
+  --color-warning-plain-active-bg: var(--color-warning-700);
+  --color-warning-plain-disabled-color: var(--color-neutral-500);
+  --color-warning-outlined-color: var(--color-warning-200);
+  --color-warning-outlined-border: var(--color-warning-700);
+  --color-warning-outlined-hover-bg: var(--color-warning-800);
+  --color-warning-outlined-active-bg: var(--color-warning-700);
+  --color-warning-outlined-disabled-color: var(--color-neutral-500);
+  --color-warning-outlined-disabled-border: var(--color-neutral-800);
+  --color-warning-soft-color: var(--color-warning-200);
+  --color-warning-soft-bg: var(--color-warning-800);
+  --color-warning-soft-hover-bg: var(--color-warning-700);
+  --color-warning-soft-active-color: var(--color-warning-100);
+  --color-warning-soft-active-bg: var(--color-warning-600);
+  --color-warning-soft-disabled-color: var(--color-neutral-500);
+  --color-warning-soft-disabled-bg: var(--color-neutral-800);
+  --color-warning-solid-color: var(--color-common-white);
+  --color-warning-solid-bg: var(--color-warning-500);
+  --color-warning-solid-hover-bg: var(--color-warning-600);
+  --color-warning-solid-active-bg: var(--color-warning-700);
+  --color-warning-solid-disabled-color: var(--color-neutral-500);
+  --color-warning-solid-disabled-bg: var(--color-neutral-800);
+
+  --color-ink-primary: var(--color-neutral-100);
+  --color-ink-secondary: var(--color-neutral-300);
+  --color-ink-tertiary: var(--color-neutral-400);
+  --color-ink-icon: var(--color-neutral-400);
+  --color-canvas: var(--color-common-black);
+  --color-surface: var(--color-neutral-900);
+  --color-surface-popup: var(--color-common-black);
+  --color-surface-1: var(--color-neutral-800);
+  --color-surface-2: var(--color-neutral-700);
+  --color-surface-3: var(--color-neutral-600);
+  /* neutral-400's channel, not neutral-500's: Joy's divider resolves from
+     `neutral.mainChannel`, which is step 400 in dark (see the note on
+     --color-*-main above). The 0.16 opacity here was already correct — only
+     the channel had been carried over from light, so the divider stayed too
+     dark against a dark surface. Measured against real @mui/joy: it renders
+     rgba(159, 166, 173, 0.16). */
+  --color-divider: rgba(159, 166, 173, 0.16);
+
+  --color-primary-main: var(--color-primary-400);
+  --color-neutral-main: var(--color-neutral-400);
+  --color-danger-main: var(--color-danger-400);
+  --color-success-main: var(--color-success-400);
+  --color-warning-main: var(--color-warning-400);
+
+  /* shadow.xs/md/lg (Joy UI defaultTheme.shadow, dark mode: shadowChannel
+     '0 0 0' / shadowOpacity 0.6). See the light-mode block's comment for
+     why the `shadowRing` layer is dropped. */
+  --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.6);
+  --shadow-md: 0px 2px 8px -2px rgba(0, 0, 0, 0.6), 0px 6px 12px -2px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0px 2px 8px -2px rgba(0, 0, 0, 0.6), 0px 12px 16px -4px rgba(0, 0, 0, 0.6);
+}
+
+/* AnimatedMapImage entrance keyframes — see the --animate-* registrations
+   above. 150% on the circle radius comfortably reaches every corner for any
+   realistic width/height combination (circle()'s percentage basis is the
+   box's corner distance, so 100% alone can undershoot on wide/tall boxes). */
+@keyframes hintoric-map-reveal {
+  from {
+    clip-path: circle(0% at 50% 50%);
+  }
+  to {
+    clip-path: circle(150% at 50% 50%);
+  }
+}
+
+@keyframes hintoric-pin-drop {
+  0% {
+    transform: translateY(-14px) scale(0.4);
+    opacity: 0;
+  }
+  60% {
+    transform: translateY(2px) scale(1.15);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes hintoric-ink-ripple {
+  0% {
+    transform: scale(0.3);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+/*
+ * Tailwind's stock `dark:` keys off `prefers-color-scheme`, which contradicts
+ * ColorSchemeProvider the moment a user overrides their OS setting. Point it
+ * at the same attribute our tokens use. Our own components never write `dark:`
+ * (they read tokens instead) — this exists entirely for consumers' markup.
+ */
+@custom-variant dark (&:where([data-color-scheme="dark"], [data-color-scheme="dark"] *));
+
+/*
+ * `canvas`/`surface*`/`ink-*`/`divider` are public, page-layout tokens meant
+ * for consumers to use directly in their own markup (e.g. `bg-canvas` on a
+ * page root) — not just internally by Phase 1 components. No component's own
+ * source literally contains most of these class names, so Tailwind's content
+ * scan never finds them and never generates their CSS. Force-generate them
+ * explicitly.
+ */
+@source inline("{bg,text,border}-{canvas,surface,surface-1,surface-2,surface-3,surface-popup}");
+@source inline("{bg,border}-divider");
+
+@source "./index.js";

package/dist/theme/ReducedMotionProvider.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface ReducedMotionProviderProps {
+    children: React.ReactNode;
+    /** The app-owned reduced-motion preference. */
+    reducedMotion: boolean;
+}
+export declare function ReducedMotionProvider({ children, reducedMotion }: ReducedMotionProviderProps): React.JSX.Element;
+export declare function useReducedMotion(): boolean;
+//# sourceMappingURL=ReducedMotionProvider.d.ts.map

package/dist/theme/ReducedMotionProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReducedMotionProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ReducedMotionProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+CAA+C;IAC/C,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,0BAA0B,qBAI5F;AAkBD,wBAAgB,gBAAgB,IAAI,OAAO,CAI1C"}

package/dist/utils/usePrefersReducedMotion.d.ts

@@ -1,3 +1,3 @@
-/** Same useSyncExternalStore approach as ColorSchemeProvider's system-scheme detection. */
+/** Package-internal compatibility name. Prefer useReducedMotion for public reads. */
 export declare function usePrefersReducedMotion(): boolean;
 //# sourceMappingURL=usePrefersReducedMotion.d.ts.map

package/dist/utils/usePrefersReducedMotion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePrefersReducedMotion.d.ts","sourceRoot":"","sources":["../../src/utils/usePrefersReducedMotion.ts"],"names":[],"mappings":"AAkBA,2FAA2F;AAC3F,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD"}
+{"version":3,"file":"usePrefersReducedMotion.d.ts","sourceRoot":"","sources":["../../src/utils/usePrefersReducedMotion.ts"],"names":[],"mappings":"AAEA,qFAAqF;AACrF,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hintoric/ui",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Joy UI's look and API, built on Base UI and Tailwind CSS.",
   "type": "module",
   "license": "MIT",
@@ -25,7 +25,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles.css": "./dist/style.css"
+    "./styles.css": "./dist/style.css",
+    "./tailwind.css": "./dist/tailwind.css"
   },
   "publishConfig": {
     "access": "public"
@@ -34,8 +35,14 @@
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0",
     "react-hook-form": "^7.54.0",
+    "tailwindcss": "^4.1.0",
     "zod": "^4.0.0"
   },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@hookform/resolvers": "^5.9.1",
@@ -50,6 +57,8 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/joy": "5.0.0-beta.52",
+    "@tailwindcss/node": "^4.3.3",
+    "@tailwindcss/oxide": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",