@m3-baseui/react-tailwind 1.2.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/checkbox.js +5 -0
- package/dist/checkbox.js.map +1 -1
- package/dist/chip.d.ts +31 -0
- package/dist/chip.js +29 -5
- package/dist/chip.js.map +1 -1
- package/dist/dialog.d.ts +76 -46
- package/dist/dialog.js +43 -8
- package/dist/dialog.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +184 -31
- package/dist/index.js.map +1 -1
- package/dist/item.d.ts +9 -9
- package/dist/item.js +9 -3
- package/dist/item.js.map +1 -1
- package/dist/list.d.ts +4 -4
- package/dist/list.js +9 -3
- package/dist/list.js.map +1 -1
- package/dist/progress.d.ts +6 -6
- package/dist/progress.js +23 -2
- package/dist/progress.js.map +1 -1
- package/dist/radio.js +8 -3
- package/dist/radio.js.map +1 -1
- package/dist/search.d.ts +5 -5
- package/dist/segmented-button.d.ts +5 -5
- package/dist/slider.d.ts +33 -6
- package/dist/slider.js +16 -3
- package/dist/slider.js.map +1 -1
- package/dist/snackbar.js +6 -1
- package/dist/snackbar.js.map +1 -1
- package/dist/switch.js +4 -1
- package/dist/switch.js.map +1 -1
- package/dist/tooltip.d.ts +82 -1
- package/dist/tooltip.js +33 -5
- package/dist/tooltip.js.map +1 -1
- package/package.json +1 -1
package/dist/slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tv.ts","../src/slider.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC9BI,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,gEAAA;AAAA,IACN,OAAA,EAAS,wCAAA;AAAA,IACT,KAAA,EAAO;AAAA,MACL,+DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,sCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/slider.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC9BI,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,gEAAA;AAAA,IACN,OAAA,EAAS,wCAAA;AAAA,IACT,KAAA,EAAO;AAAA,MACL,+DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,sCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,kEAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,8DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,uDAAA;AAAA,IACP,QAAA,EAAU,sCAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV,+GAAA;AAAA,MACA,oEAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,UAAA,EAAY,EAAE,UAAA;AAChB,CAAC","file":"slider.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n 'display-large',\n 'display-medium',\n 'display-small',\n 'headline-large',\n 'headline-medium',\n 'headline-small',\n 'title-large',\n 'title-medium',\n 'title-small',\n 'body-large',\n 'body-medium',\n 'body-small',\n 'label-large',\n 'label-medium',\n 'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n baseTv(options, {\n ...config,\n twMergeConfig: {\n extend: {\n classGroups: {\n 'font-size': [{ text: [...TYPESCALE] }],\n },\n },\n },\n });\n","/**\n * slider.ts — Tailwind classes for the M3 Slider.\n *\n * 4dp rail (surface-container-highest) with a primary active indicator and a\n * 20dp primary thumb carrying a 40dp circular state layer (hover/focus/drag).\n *\n * Disabled follows M3 per-token opacities (not a blanket fade): inactive track\n * on-surface/0.12, active track + handle on-surface/0.38. The root carries a\n * `group` so the descendant parts can react to Base UI's data-disabled on Root.\n */\nimport { createSlider } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const sliderTv = tv({\n slots: {\n root: 'group relative flex items-center select-none w-full touch-none',\n control: 'relative flex items-center w-full h-10',\n track: [\n 'relative w-full h-1 rounded-full bg-surface-container-highest',\n 'group-data-[disabled]:bg-on-surface/[0.12]',\n ],\n indicator: [\n 'absolute h-1 rounded-full bg-primary',\n 'group-data-[disabled]:bg-on-surface/[0.38]',\n ],\n thumb: [\n 'group/thumb relative size-5 rounded-full bg-primary outline-none',\n 'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n 'before:size-10 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'data-[dragging]:before:opacity-[var(--md-sys-state-dragged)]',\n 'group-data-[disabled]:bg-on-surface/[0.38]',\n ],\n value: 'text-label-large text-on-surface-variant tabular-nums',\n tickList: 'pointer-events-none absolute inset-0',\n tick: [\n 'absolute size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-surface-variant',\n 'data-[active]:bg-on-primary/[0.38]',\n ],\n valueLabel: [\n 'pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded px-2 py-0.5',\n 'bg-primary text-label-large text-on-primary tabular-nums opacity-0',\n 'data-[visible]:opacity-100',\n ],\n },\n});\n\nconst s = sliderTv();\nexport const Slider = createSlider({\n root: s.root(),\n control: s.control(),\n track: s.track(),\n indicator: s.indicator(),\n thumb: s.thumb(),\n value: s.value(),\n tickList: s.tickList(),\n tick: s.tick(),\n valueLabel: s.valueLabel(),\n});\n"]}
|
package/dist/snackbar.js
CHANGED
|
@@ -8,10 +8,15 @@ var snackbarTv = tv({
|
|
|
8
8
|
slots: {
|
|
9
9
|
viewport: [
|
|
10
10
|
"fixed bottom-4 left-1/2 -translate-x-1/2 z-50",
|
|
11
|
-
|
|
11
|
+
// M3 container width: cap at 672dp, clamp to the viewport on small screens.
|
|
12
|
+
// Center items so content-following (w-fit) snackbars stay under the anchor.
|
|
13
|
+
"flex flex-col items-center gap-2 w-[calc(100vw-32px)] max-w-[672px]"
|
|
12
14
|
],
|
|
13
15
|
root: [
|
|
14
16
|
"relative flex items-center gap-2 min-h-12 box-border pl-4 pr-2 py-2",
|
|
17
|
+
// M3 container width follows content within min 344dp / max 672dp. The
|
|
18
|
+
// min is clamped by 100% so it never overflows a narrower viewport.
|
|
19
|
+
"w-fit min-w-[min(344px,100%)] max-w-[672px]",
|
|
15
20
|
"rounded-extra-small bg-inverse-surface text-inverse-on-surface shadow-level3",
|
|
16
21
|
"text-body-medium",
|
|
17
22
|
"transition-[opacity,transform] duration-200 ease-emphasized",
|
package/dist/snackbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/snackbar.ts"],"names":[],"mappings":";;;;;;AAYO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,+CAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/snackbar.ts"],"names":[],"mappings":";;;;;;AAYO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,+CAAA;AAAA;AAAA;AAAA,MAGA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,qEAAA;AAAA;AAAA;AAAA,MAGA,6CAAA;AAAA,MACA,8EAAA;AAAA,MACA,kBAAA;AAAA,MACA,6DAAA;AAAA,MACA,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,sCAAA;AAAA,IACT,KAAA,EAAO,kBAAA;AAAA,IACP,WAAA,EAAa,kBAAA;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,oFAAA;AAAA,MACA,yEAAA;AAAA,MACA,uCAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,+FAAA;AAAA,MACA,6EAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"snackbar.js","sourcesContent":["/**\n * snackbar.ts — tailwind-variants slots for the M3 Snackbar.\n *\n * Inverse-surface container, extra-small corners, elevation level3. The Action\n * is an inverse-primary text button with a state layer + ripple. Enter/exit key\n * off Toast's `data-starting-style` / `data-ending-style`. Same DOM as VE.\n */\nimport { createSnackbar } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport { useSnackbar } from '@m3-baseui/core';\n\nexport const snackbarTv = tv({\n slots: {\n viewport: [\n 'fixed bottom-4 left-1/2 -translate-x-1/2 z-50',\n // M3 container width: cap at 672dp, clamp to the viewport on small screens.\n // Center items so content-following (w-fit) snackbars stay under the anchor.\n 'flex flex-col items-center gap-2 w-[calc(100vw-32px)] max-w-[672px]',\n ],\n root: [\n 'relative flex items-center gap-2 min-h-12 box-border pl-4 pr-2 py-2',\n // M3 container width follows content within min 344dp / max 672dp. The\n // min is clamped by 100% so it never overflows a narrower viewport.\n 'w-fit min-w-[min(344px,100%)] max-w-[672px]',\n 'rounded-extra-small bg-inverse-surface text-inverse-on-surface shadow-level3',\n 'text-body-medium',\n 'transition-[opacity,transform] duration-200 ease-emphasized',\n 'data-[starting-style]:opacity-0 data-[starting-style]:translate-y-2',\n 'data-[ending-style]:opacity-0',\n ],\n content: 'flex flex-col flex-1 min-w-0 gap-0.5',\n title: 'text-body-medium',\n description: 'text-body-medium',\n action: [\n 'relative inline-flex items-center justify-center shrink-0 h-9 px-3 overflow-hidden',\n 'rounded-extra-small bg-transparent border-0 cursor-pointer outline-none',\n 'text-inverse-primary text-label-large',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n close: [\n 'relative inline-flex items-center justify-center shrink-0 size-8 rounded-full overflow-hidden',\n 'bg-transparent border-0 cursor-pointer text-inverse-on-surface outline-none',\n 'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n 'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n },\n});\n\nconst s = snackbarTv();\nexport const Snackbar = createSnackbar({\n viewport: s.viewport(),\n root: s.root(),\n content: s.content(),\n title: s.title(),\n description: s.description(),\n action: s.action(),\n close: s.close(),\n});\n"]}
|
package/dist/switch.js
CHANGED
|
@@ -21,7 +21,10 @@ var switchTv = tv({
|
|
|
21
21
|
"absolute top-1/2 -translate-y-1/2 left-[6px] size-4 rounded-full pointer-events-none",
|
|
22
22
|
"flex items-center justify-center",
|
|
23
23
|
"bg-outline text-on-surface",
|
|
24
|
-
|
|
24
|
+
// M3 spatial motion: the handle slides/grows with emphasized easing over
|
|
25
|
+
// 300ms (token-backed). emphasized is overshoot-free, so it stays safe for
|
|
26
|
+
// the handle's color transitions too (no spring flicker on background-color).
|
|
27
|
+
"transition-all ease-emphasized duration-[var(--md-sys-motion-duration-medium2)]",
|
|
25
28
|
"data-[checked]:left-[22px] data-[checked]:size-6 data-[checked]:bg-on-primary data-[checked]:text-primary",
|
|
26
29
|
// M3 with-icon: the unchecked handle grows to 24dp to fit its icon
|
|
27
30
|
"data-[with-icon]:data-[unchecked]:left-1 data-[with-icon]:data-[unchecked]:size-6",
|
package/dist/switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/switch.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,kGAAA;AAAA,MACA,6CAAA;AAAA,MACA,8CAAA;AAAA,MACA,yDAAA;AAAA,MACA,4FAAA;AAAA,MACA,qCAAA;AAAA;AAAA;AAAA,MAGA,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA,kCAAA;AAAA,MACA,4BAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/switch.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,kGAAA;AAAA,MACA,6CAAA;AAAA,MACA,8CAAA;AAAA,MACA,yDAAA;AAAA,MACA,4FAAA;AAAA,MACA,qCAAA;AAAA;AAAA;AAAA,MAGA,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA,kCAAA;AAAA,MACA,4BAAA;AAAA;AAAA;AAAA;AAAA,MAIA,iFAAA;AAAA,MACA,2GAAA;AAAA;AAAA,MAEA,mFAAA;AAAA;AAAA;AAAA,MAGA,gHAAA;AAAA,MACA,0JAAA;AAAA;AAAA,MAEA,yCAAA;AAAA,MACA,uEAAA;AAAA;AAAA,MAEA,wCAAA;AAAA,MACA,iDAAA;AAAA;AAAA,MAEA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,WAAA,EAAa;AAAA,MACX,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,aAAA,EAAe;AAAA,MACb,qEAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,aAAA,EAAe,EAAE,aAAA;AACnB,CAAC","file":"switch.js","sourcesContent":["/**\n * switch.ts — tailwind-variants slots for the M3 Switch.\n *\n * Track + handle styled off Base UI's data-checked/data-disabled state. The\n * thumb grows and slides when checked; a 40dp circular state layer (`before:`)\n * reacts to hover/focus/press on the root via the `group` utility.\n */\nimport { createSwitch } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const switchTv = tv({\n slots: {\n root: [\n 'group relative inline-flex shrink-0 w-[52px] h-8 rounded-full border-2 box-border cursor-pointer',\n 'bg-surface-container-highest border-outline',\n 'transition-colors duration-200 ease-standard',\n 'data-[checked]:bg-primary data-[checked]:border-primary',\n 'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n 'data-[disabled]:pointer-events-none',\n // M3 disabled: faint track + outline (unselected); on-surface/12 track,\n // no outline (selected). Not a blanket element opacity.\n 'data-[disabled]:bg-surface-container-highest/12 data-[disabled]:border-on-surface/12',\n 'data-[disabled]:data-[checked]:bg-on-surface/12 data-[disabled]:data-[checked]:border-transparent',\n ],\n thumb: [\n 'absolute top-1/2 -translate-y-1/2 left-[6px] size-4 rounded-full pointer-events-none',\n 'flex items-center justify-center',\n 'bg-outline text-on-surface',\n // M3 spatial motion: the handle slides/grows with emphasized easing over\n // 300ms (token-backed). emphasized is overshoot-free, so it stays safe for\n // the handle's color transitions too (no spring flicker on background-color).\n 'transition-all ease-emphasized duration-[var(--md-sys-motion-duration-medium2)]',\n 'data-[checked]:left-[22px] data-[checked]:size-6 data-[checked]:bg-on-primary data-[checked]:text-primary',\n // M3 with-icon: the unchecked handle grows to 24dp to fit its icon\n 'data-[with-icon]:data-[unchecked]:left-1 data-[with-icon]:data-[unchecked]:size-6',\n // M3 handle interaction colors: unselected outline→on-surface-variant,\n // selected on-primary→primary-container on hover/focus/press\n 'group-hover:bg-on-surface-variant group-focus-visible:bg-on-surface-variant group-active:bg-on-surface-variant',\n 'group-hover:data-[checked]:bg-primary-container group-focus-visible:data-[checked]:bg-primary-container group-active:data-[checked]:bg-primary-container',\n // M3 squish: handle grows to 28px while pressed, staying on its side\n 'group-active:left-0 group-active:size-7',\n 'group-active:data-[checked]:left-5 group-active:data-[checked]:size-7',\n // M3 disabled handle: on-surface/38 (unselected), surface (selected)\n 'group-data-[disabled]:bg-on-surface/38',\n 'group-data-[disabled]:data-[checked]:bg-surface',\n // 40dp circular state layer centered on the thumb\n 'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n 'before:size-10 before:rounded-full before:bg-current before:opacity-0 before:transition-opacity before:duration-100',\n 'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n 'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n 'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n ],\n // Handle icons (16dp). Both stay mounted; the root's data-checked reveals one.\n iconChecked: [\n 'hidden group-data-[checked]:inline-flex items-center justify-center',\n 'text-on-primary-container [&>svg]:size-4',\n ],\n iconUnchecked: [\n 'inline-flex group-data-[checked]:hidden items-center justify-center',\n 'text-surface-container-highest [&>svg]:size-4',\n ],\n },\n});\n\nconst s = switchTv();\nexport const Switch = createSwitch({\n root: s.root(),\n thumb: s.thumb(),\n iconChecked: s.iconChecked(),\n iconUnchecked: s.iconUnchecked(),\n});\n"]}
|
package/dist/tooltip.d.ts
CHANGED
|
@@ -48,6 +48,75 @@ declare const tooltipTv: tailwind_variants.TVReturnType<{
|
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
50
|
} | {}>, unknown, unknown, undefined>>;
|
|
51
|
+
declare const richTooltipTv: tailwind_variants.TVReturnType<{
|
|
52
|
+
[key: string]: {
|
|
53
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
54
|
+
actions?: tailwind_variants.ClassValue;
|
|
55
|
+
popup?: tailwind_variants.ClassValue;
|
|
56
|
+
supportingText?: tailwind_variants.ClassValue;
|
|
57
|
+
arrow?: tailwind_variants.ClassValue;
|
|
58
|
+
subhead?: tailwind_variants.ClassValue;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
} | {
|
|
62
|
+
[x: string]: {
|
|
63
|
+
[x: string]: tailwind_variants.ClassValue | {
|
|
64
|
+
actions?: tailwind_variants.ClassValue;
|
|
65
|
+
popup?: tailwind_variants.ClassValue;
|
|
66
|
+
supportingText?: tailwind_variants.ClassValue;
|
|
67
|
+
arrow?: tailwind_variants.ClassValue;
|
|
68
|
+
subhead?: tailwind_variants.ClassValue;
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
} | {}, {
|
|
72
|
+
popup: string[];
|
|
73
|
+
arrow: string[];
|
|
74
|
+
subhead: string[];
|
|
75
|
+
supportingText: string[];
|
|
76
|
+
actions: string[];
|
|
77
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
78
|
+
[key: string]: {
|
|
79
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
80
|
+
actions?: tailwind_variants.ClassValue;
|
|
81
|
+
popup?: tailwind_variants.ClassValue;
|
|
82
|
+
supportingText?: tailwind_variants.ClassValue;
|
|
83
|
+
arrow?: tailwind_variants.ClassValue;
|
|
84
|
+
subhead?: tailwind_variants.ClassValue;
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
} | {}>, {
|
|
88
|
+
[key: string]: {
|
|
89
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
90
|
+
actions?: tailwind_variants.ClassValue;
|
|
91
|
+
popup?: tailwind_variants.ClassValue;
|
|
92
|
+
supportingText?: tailwind_variants.ClassValue;
|
|
93
|
+
arrow?: tailwind_variants.ClassValue;
|
|
94
|
+
subhead?: tailwind_variants.ClassValue;
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
} | {}, {
|
|
98
|
+
popup: string[];
|
|
99
|
+
arrow: string[];
|
|
100
|
+
subhead: string[];
|
|
101
|
+
supportingText: string[];
|
|
102
|
+
actions: string[];
|
|
103
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
104
|
+
popup: string[];
|
|
105
|
+
arrow: string[];
|
|
106
|
+
subhead: string[];
|
|
107
|
+
supportingText: string[];
|
|
108
|
+
actions: string[];
|
|
109
|
+
}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
|
|
110
|
+
[key: string]: {
|
|
111
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
112
|
+
actions?: tailwind_variants.ClassValue;
|
|
113
|
+
popup?: tailwind_variants.ClassValue;
|
|
114
|
+
supportingText?: tailwind_variants.ClassValue;
|
|
115
|
+
arrow?: tailwind_variants.ClassValue;
|
|
116
|
+
subhead?: tailwind_variants.ClassValue;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
} | {}>, unknown, unknown, undefined>>;
|
|
51
120
|
declare const Tooltip: {
|
|
52
121
|
Provider: react.FC<_base_ui_react.TooltipProviderProps>;
|
|
53
122
|
Root: <Payload>(props: _base_ui_react.TooltipRoot.Props<Payload>) => react.JSX.Element;
|
|
@@ -57,5 +126,17 @@ declare const Tooltip: {
|
|
|
57
126
|
Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TooltipPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
58
127
|
Arrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TooltipArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
59
128
|
};
|
|
129
|
+
declare const RichTooltip: {
|
|
130
|
+
Root: typeof _base_ui_react.PopoverRoot;
|
|
131
|
+
Trigger: _base_ui_react.PopoverTrigger;
|
|
132
|
+
Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
133
|
+
Positioner: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverPositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
134
|
+
Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.PopoverPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
135
|
+
Arrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.PopoverArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
136
|
+
Subhead: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.PopoverTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
137
|
+
SupportingText: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.PopoverDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<unknown>>;
|
|
138
|
+
Actions: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
139
|
+
Close: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
140
|
+
};
|
|
60
141
|
|
|
61
|
-
export { Tooltip, tooltipTv };
|
|
142
|
+
export { RichTooltip, Tooltip, richTooltipTv, tooltipTv };
|
package/dist/tooltip.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { createTooltip } from '@m3-baseui/core';
|
|
2
|
+
import { createTooltip, createRichTooltip } from '@m3-baseui/core';
|
|
3
3
|
import { tv as tv$1 } from 'tailwind-variants';
|
|
4
4
|
|
|
5
5
|
// src/tooltip.ts
|
|
@@ -32,21 +32,49 @@ var tv = (options, config) => tv$1(options, {
|
|
|
32
32
|
});
|
|
33
33
|
|
|
34
34
|
// src/tooltip.ts
|
|
35
|
+
var transition = [
|
|
36
|
+
"origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
|
|
37
|
+
"data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
|
|
38
|
+
"data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
|
|
39
|
+
];
|
|
35
40
|
var tooltipTv = tv({
|
|
36
41
|
slots: {
|
|
37
42
|
popup: [
|
|
38
43
|
"bg-inverse-surface text-inverse-on-surface text-body-small",
|
|
39
44
|
"rounded-extra-small px-2 py-1 max-w-[224px] select-none",
|
|
40
|
-
|
|
41
|
-
"data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
|
|
42
|
-
"data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
|
|
45
|
+
...transition
|
|
43
46
|
],
|
|
44
47
|
arrow: ["text-inverse-surface"]
|
|
45
48
|
}
|
|
46
49
|
});
|
|
50
|
+
var richTooltipTv = tv({
|
|
51
|
+
slots: {
|
|
52
|
+
popup: [
|
|
53
|
+
"bg-surface-container text-on-surface shadow-level2",
|
|
54
|
+
"rounded-medium px-4 py-3 max-w-[320px] flex flex-col gap-1",
|
|
55
|
+
"outline-none",
|
|
56
|
+
...transition
|
|
57
|
+
],
|
|
58
|
+
arrow: ["text-surface-container"],
|
|
59
|
+
subhead: ["text-title-small text-on-surface m-0"],
|
|
60
|
+
supportingText: ["text-body-medium text-on-surface-variant m-0"],
|
|
61
|
+
// M3 places rich-tooltip actions at the bottom-left (leading), not trailing
|
|
62
|
+
// like a dialog. -ml-2 pulls the text button so its label optically aligns
|
|
63
|
+
// with the content's left edge.
|
|
64
|
+
actions: ["flex flex-wrap items-center gap-2 mt-1 -ml-2"]
|
|
65
|
+
}
|
|
66
|
+
});
|
|
47
67
|
var t = tooltipTv();
|
|
48
68
|
var Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });
|
|
69
|
+
var r = richTooltipTv();
|
|
70
|
+
var RichTooltip = createRichTooltip({
|
|
71
|
+
popup: r.popup(),
|
|
72
|
+
arrow: r.arrow(),
|
|
73
|
+
subhead: r.subhead(),
|
|
74
|
+
supportingText: r.supportingText(),
|
|
75
|
+
actions: r.actions()
|
|
76
|
+
});
|
|
49
77
|
|
|
50
|
-
export { Tooltip, tooltipTv };
|
|
78
|
+
export { RichTooltip, Tooltip, richTooltipTv, tooltipTv };
|
|
51
79
|
//# sourceMappingURL=tooltip.js.map
|
|
52
80
|
//# sourceMappingURL=tooltip.js.map
|
package/dist/tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tv.ts","../src/tooltip.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;
|
|
1
|
+
{"version":3,"sources":["../src/tv.ts","../src/tooltip.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC3BH,IAAM,UAAA,GAAa;AAAA,EACjB,4FAAA;AAAA,EACA,gEAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,4DAAA;AAAA,MACA,yDAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA,KAAA,EAAO,CAAC,sBAAsB;AAAA;AAElC,CAAC;AAEM,IAAM,gBAAgB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,oDAAA;AAAA,MACA,4DAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA,KAAA,EAAO,CAAC,wBAAwB,CAAA;AAAA,IAChC,OAAA,EAAS,CAAC,sCAAsC,CAAA;AAAA,IAChD,cAAA,EAAgB,CAAC,8CAA8C,CAAA;AAAA;AAAA;AAAA;AAAA,IAI/D,OAAA,EAAS,CAAC,8CAA8C;AAAA;AAE5D,CAAC;AAED,IAAM,IAAI,SAAA,EAAU;AACb,IAAM,OAAA,GAAU,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG;AAE3E,IAAM,IAAI,aAAA,EAAc;AACjB,IAAM,cAAc,iBAAA,CAAkB;AAAA,EAC3C,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,EACjC,OAAA,EAAS,EAAE,OAAA;AACb,CAAC","file":"tooltip.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n 'display-large',\n 'display-medium',\n 'display-small',\n 'headline-large',\n 'headline-medium',\n 'headline-small',\n 'title-large',\n 'title-medium',\n 'title-small',\n 'body-large',\n 'body-medium',\n 'body-small',\n 'label-large',\n 'label-medium',\n 'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n baseTv(options, {\n ...config,\n twMergeConfig: {\n extend: {\n classGroups: {\n 'font-size': [{ text: [...TYPESCALE] }],\n },\n },\n },\n });\n","/**\n * tooltip.ts — Tailwind classes for the M3 Tooltip (plain + rich).\n *\n * Plain (`Tooltip`, Base UI Tooltip): inverse-surface background, body-small\n * text, extra-small corners, with a fade + small-move transition driven by Base\n * UI's data-[starting-style] / data-[ending-style] attributes.\n *\n * Rich (`RichTooltip`, Base UI Popover): surface-container surface (level2\n * elevation, 12dp corner, 320dp max) holding an optional title-small subhead,\n * body-medium supporting text, and a leading-aligned action row at the bottom\n * (M3 places rich-tooltip actions bottom-left). Built on Popover so its buttons\n * are reachable by keyboard and touch.\n */\nimport { createTooltip, createRichTooltip } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nconst transition = [\n 'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n 'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n 'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n];\n\nexport const tooltipTv = tv({\n slots: {\n popup: [\n 'bg-inverse-surface text-inverse-on-surface text-body-small',\n 'rounded-extra-small px-2 py-1 max-w-[224px] select-none',\n ...transition,\n ],\n arrow: ['text-inverse-surface'],\n },\n});\n\nexport const richTooltipTv = tv({\n slots: {\n popup: [\n 'bg-surface-container text-on-surface shadow-level2',\n 'rounded-medium px-4 py-3 max-w-[320px] flex flex-col gap-1',\n 'outline-none',\n ...transition,\n ],\n arrow: ['text-surface-container'],\n subhead: ['text-title-small text-on-surface m-0'],\n supportingText: ['text-body-medium text-on-surface-variant m-0'],\n // M3 places rich-tooltip actions at the bottom-left (leading), not trailing\n // like a dialog. -ml-2 pulls the text button so its label optically aligns\n // with the content's left edge.\n actions: ['flex flex-wrap items-center gap-2 mt-1 -ml-2'],\n },\n});\n\nconst t = tooltipTv();\nexport const Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });\n\nconst r = richTooltipTv();\nexport const RichTooltip = createRichTooltip({\n popup: r.popup(),\n arrow: r.arrow(),\n subhead: r.subhead(),\n supportingText: r.supportingText(),\n actions: r.actions(),\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m3-baseui/react-tailwind",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "M3 components implemented with tailwind-variants over the shared @m3-baseui/core factories. Ships the Tailwind v4 @theme preset.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|