@m3-baseui/react-tailwind 1.0.0

package/dist/fab.js

@@ -0,0 +1,43 @@
+"use client";
+import { createFab } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/fab.ts
+var fabTv = tv({
+  base: [
+    "relative inline-flex items-center justify-center box-border overflow-hidden",
+    "border-0 cursor-pointer select-none outline-none",
+    "shadow-level3 hover:shadow-level4",
+    "transition-shadow duration-150 ease-standard",
+    "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+    "hover:before:opacity-[var(--md-sys-state-hover)]",
+    "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+    "active:before:opacity-[var(--md-sys-state-pressed)]",
+    "data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]",
+    "disabled:opacity-[0.38] disabled:pointer-events-none disabled:shadow-none",
+    "data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none data-[disabled]:shadow-none"
+  ],
+  variants: {
+    size: {
+      small: "size-10 rounded-medium [&_svg]:size-6",
+      regular: "size-14 rounded-large [&_svg]:size-6",
+      large: "size-24 rounded-extra-large [&_svg]:size-9",
+      extended: "h-14 min-w-20 px-4 gap-3 rounded-large text-label-large [&_svg]:size-6"
+    },
+    color: {
+      surface: "bg-surface-container-high text-primary",
+      primary: "bg-primary-container text-on-primary-container",
+      secondary: "bg-secondary-container text-on-secondary-container",
+      tertiary: "bg-tertiary-container text-on-tertiary-container"
+    }
+  },
+  defaultVariants: {
+    size: "regular",
+    color: "surface"
+  }
+});
+var Fab = createFab(({ size, color }) => fabTv({ size, color }));
+
+export { Fab, fabTv };
+//# sourceMappingURL=fab.js.map
+//# sourceMappingURL=fab.js.map

package/dist/fab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/fab.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,QAAQ,EAAA,CAAG;AAAA,EACtB,IAAA,EAAM;AAAA,IACJ,6EAAA;AAAA,IACA,kDAAA;AAAA,IACA,mCAAA;AAAA,IACA,8CAAA;AAAA,IACA,4IAAA;AAAA,IACA,kDAAA;AAAA,IACA,0DAAA;AAAA,IACA,qDAAA;AAAA,IACA,6DAAA;AAAA,IACA,2EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO,uCAAA;AAAA,MACP,OAAA,EAAS,sCAAA;AAAA,MACT,KAAA,EAAO,4CAAA;AAAA,MACP,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,wCAAA;AAAA,MACT,OAAA,EAAS,gDAAA;AAAA,MACT,SAAA,EAAW,oDAAA;AAAA,MACX,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC;AAEM,IAAM,GAAA,GAAM,SAAA,CAAU,CAAC,EAAE,IAAA,EAAM,KAAA,EAAM,KAAM,KAAA,CAAM,EAAE,IAAA,EAAM,KAAA,EAAO,CAAC","file":"fab.js","sourcesContent":["/**\n * fab.ts — tailwind-variants for the M3 FAB.\n *\n * Four sizes + four container colors, elevation level3 (level4 on hover) and a\n * currentColor state-layer `::before`. The pointer ripple is added by the\n * factory. Same DOM as the VE build.\n */\nimport { createFab } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const fabTv = tv({\n  base: [\n    'relative inline-flex items-center justify-center box-border overflow-hidden',\n    'border-0 cursor-pointer select-none outline-none',\n    'shadow-level3 hover:shadow-level4',\n    'transition-shadow duration-150 ease-standard',\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    'disabled:opacity-[0.38] disabled:pointer-events-none disabled:shadow-none',\n    'data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none data-[disabled]:shadow-none',\n  ],\n  variants: {\n    size: {\n      small: 'size-10 rounded-medium [&_svg]:size-6',\n      regular: 'size-14 rounded-large [&_svg]:size-6',\n      large: 'size-24 rounded-extra-large [&_svg]:size-9',\n      extended: 'h-14 min-w-20 px-4 gap-3 rounded-large text-label-large [&_svg]:size-6',\n    },\n    color: {\n      surface: 'bg-surface-container-high text-primary',\n      primary: 'bg-primary-container text-on-primary-container',\n      secondary: 'bg-secondary-container text-on-secondary-container',\n      tertiary: 'bg-tertiary-container text-on-tertiary-container',\n    },\n  },\n  defaultVariants: {\n    size: 'regular',\n    color: 'surface',\n  },\n});\n\nexport const Fab = createFab(({ size, color }) => fabTv({ size, color }));\nexport type { FabProps, FabSize, FabColor } from '@m3-baseui/core';\n"]}

package/dist/icon-button.d.ts

@@ -0,0 +1,174 @@
+import * as _base_ui_react from '@base-ui/react';
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { IconButtonProps, IconButtonVariant } from '@m3-baseui/core';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+
+declare const iconButton: tailwind_variants.TVReturnType<{
+    variant: {
+        standard: string[];
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    width: {
+        narrow: string;
+        default: string;
+        wide: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        standard: string[];
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    width: {
+        narrow: string;
+        default: string;
+        wide: string;
+    };
+}, {
+    variant: {
+        standard: string[];
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    width: {
+        narrow: string;
+        default: string;
+        wide: string;
+    };
+}>, {
+    variant: {
+        standard: string[];
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    width: {
+        narrow: string;
+        default: string;
+        wide: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        standard: string[];
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    width: {
+        narrow: string;
+        default: string;
+        wide: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        standard: string[];
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    width: {
+        narrow: string;
+        default: string;
+        wide: string;
+    };
+}, {
+    variant: {
+        standard: string[];
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    width: {
+        narrow: string;
+        default: string;
+        wide: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const IconButton: react.ForwardRefExoticComponent<_m3_baseui_core.IconButtonOwnProps & Omit<react.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    render?: _base_ui_react.useRender.RenderProp;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton, iconButton };

package/dist/icon-button.js

@@ -0,0 +1,121 @@
+"use client";
+import { createIconButton } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/icon-button.ts
+var WIDTHS = {
+  xs: { narrow: "w-7", default: "w-8", wide: "w-10" },
+  // 28 / 32 / 40
+  s: { narrow: "w-8", default: "w-10", wide: "w-13" },
+  // 32 / 40 / 52
+  m: { narrow: "w-12", default: "w-14", wide: "w-18" },
+  // 48 / 56 / 72
+  l: { narrow: "w-16", default: "w-24", wide: "w-32" },
+  // 64 / 96 / 128
+  xl: { narrow: "w-26", default: "w-34", wide: "w-46" }
+  // 104 / 136 / 184
+};
+var widthCompounds = Object.entries(WIDTHS).flatMap(
+  ([size, w]) => Object.entries(w).map(([width, klass]) => ({
+    size,
+    width,
+    class: klass
+  }))
+);
+var iconButton = tv({
+  base: [
+    "relative inline-flex items-center justify-center shrink-0",
+    "rounded-full overflow-hidden cursor-pointer select-none border-0 bg-transparent",
+    "transition-[box-shadow,background-color,color] duration-200 ease-standard",
+    // State layer overlay
+    "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
+    "before:transition-opacity before:duration-100",
+    "hover:before:opacity-[var(--md-sys-state-hover)]",
+    "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+    "active:before:opacity-[var(--md-sys-state-pressed)]",
+    "data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]",
+    // Focus ring (M3: 3px secondary, 2px offset)
+    "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+    // Disabled: no interaction, no state layer. Per-variant disabled colors
+    // (container on-surface/12, icon on-surface/38) live on each variant.
+    "disabled:pointer-events-none disabled:before:opacity-0",
+    "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0"
+  ],
+  variants: {
+    // Disabled icon is on-surface/38 for every variant; filled/tonal disabled
+    // container is on-surface/12; outlined disabled outline is on-surface/12
+    // (material-web parity).
+    variant: {
+      standard: [
+        "text-on-surface-variant",
+        "disabled:text-on-surface/38 data-[disabled]:text-on-surface/38"
+      ],
+      filled: [
+        "bg-primary text-on-primary",
+        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+      ],
+      tonal: [
+        "bg-secondary-container text-on-secondary-container",
+        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+      ],
+      outlined: [
+        "border border-outline text-on-surface-variant",
+        "disabled:border-on-surface/12 disabled:text-on-surface/38",
+        "data-[disabled]:border-on-surface/12 data-[disabled]:text-on-surface/38"
+      ]
+    },
+    selected: {
+      true: "",
+      false: ""
+    },
+    // Container height + icon size per M3 Expressive size. Width comes from the
+    // (size, width) compound variants below.
+    size: {
+      xs: "h-8 [&>svg]:size-5",
+      s: "h-10 [&>svg]:size-6",
+      m: "h-14 [&>svg]:size-6",
+      l: "h-24 [&>svg]:size-8",
+      xl: "h-[136px] [&>svg]:size-10"
+    },
+    width: {
+      narrow: "",
+      default: "",
+      wide: ""
+    }
+  },
+  compoundVariants: [
+    ...widthCompounds,
+    { variant: "standard", selected: true, class: "text-primary" },
+    { variant: "filled", selected: false, class: "bg-surface-container-highest text-primary" },
+    {
+      variant: "tonal",
+      selected: false,
+      class: "bg-surface-container-highest text-on-surface-variant"
+    },
+    {
+      variant: "outlined",
+      selected: true,
+      class: [
+        "bg-inverse-surface text-inverse-on-surface border-transparent",
+        // M3 disabled + selected: faint on-surface/12 container, no outline
+        // (icon falls back to on-surface/38 from the variant). NOT transparent.
+        "disabled:bg-on-surface/12 disabled:border-transparent",
+        "data-[disabled]:bg-on-surface/12 data-[disabled]:border-transparent"
+      ]
+    }
+  ],
+  defaultVariants: {
+    variant: "standard",
+    size: "s",
+    width: "default"
+  }
+});
+var IconButton = createIconButton(
+  ({ variant, selected, size, width }) => iconButton({ variant, selected, size, width })
+);
+
+export { IconButton, iconButton };
+//# sourceMappingURL=icon-button.js.map
+//# sourceMappingURL=icon-button.js.map

package/dist/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon-button.ts"],"names":[],"mappings":"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","file":"icon-button.js","sourcesContent":["/**\n * icon-button.ts — tailwind-variants resolver for the M3 Icon Button.\n *\n * 40×40 circular target with a centered icon. The `selected` variant supports\n * toggle icon buttons; when `selected` is undefined the variant's default\n * (filled/active) look is used. Emits the same DOM + ripple as the VE build.\n */\nimport { createIconButton } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\n// M3 Expressive container widths (px) per size × width. Tailwind v4's dynamic\n// spacing scale resolves any integer (e.g. w-13 = 52px, w-46 = 184px).\nconst WIDTHS = {\n  xs: { narrow: 'w-7', default: 'w-8', wide: 'w-10' }, // 28 / 32 / 40\n  s: { narrow: 'w-8', default: 'w-10', wide: 'w-13' }, // 32 / 40 / 52\n  m: { narrow: 'w-12', default: 'w-14', wide: 'w-18' }, // 48 / 56 / 72\n  l: { narrow: 'w-16', default: 'w-24', wide: 'w-32' }, // 64 / 96 / 128\n  xl: { narrow: 'w-26', default: 'w-34', wide: 'w-46' }, // 104 / 136 / 184\n} as const;\n\nconst widthCompounds = Object.entries(WIDTHS).flatMap(([size, w]) =>\n  Object.entries(w).map(([width, klass]) => ({\n    size: size as keyof typeof WIDTHS,\n    width: width as 'narrow' | 'default' | 'wide',\n    class: klass,\n  })),\n);\n\nexport const iconButton = tv({\n  base: [\n    'relative inline-flex items-center justify-center shrink-0',\n    'rounded-full overflow-hidden cursor-pointer select-none border-0 bg-transparent',\n    'transition-[box-shadow,background-color,color] duration-200 ease-standard',\n    // State layer overlay\n    'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n    '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    // Focus ring (M3: 3px secondary, 2px offset)\n    'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n    // Disabled: no interaction, no state layer. Per-variant disabled colors\n    // (container on-surface/12, icon on-surface/38) live on each variant.\n    'disabled:pointer-events-none disabled:before:opacity-0',\n    'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n  ],\n  variants: {\n    // Disabled icon is on-surface/38 for every variant; filled/tonal disabled\n    // container is on-surface/12; outlined disabled outline is on-surface/12\n    // (material-web parity).\n    variant: {\n      standard: [\n        'text-on-surface-variant',\n        'disabled:text-on-surface/38 data-[disabled]:text-on-surface/38',\n      ],\n      filled: [\n        'bg-primary text-on-primary',\n        'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n      tonal: [\n        'bg-secondary-container text-on-secondary-container',\n        'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n      outlined: [\n        'border border-outline text-on-surface-variant',\n        'disabled:border-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:border-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n    },\n    selected: {\n      true: '',\n      false: '',\n    },\n    // Container height + icon size per M3 Expressive size. Width comes from the\n    // (size, width) compound variants below.\n    size: {\n      xs: 'h-8 [&>svg]:size-5',\n      s: 'h-10 [&>svg]:size-6',\n      m: 'h-14 [&>svg]:size-6',\n      l: 'h-24 [&>svg]:size-8',\n      xl: 'h-[136px] [&>svg]:size-10',\n    },\n    width: {\n      narrow: '',\n      default: '',\n      wide: '',\n    },\n  },\n  compoundVariants: [\n    ...widthCompounds,\n    { variant: 'standard', selected: true, class: 'text-primary' },\n    { variant: 'filled', selected: false, class: 'bg-surface-container-highest text-primary' },\n    {\n      variant: 'tonal',\n      selected: false,\n      class: 'bg-surface-container-highest text-on-surface-variant',\n    },\n    {\n      variant: 'outlined',\n      selected: true,\n      class: [\n        'bg-inverse-surface text-inverse-on-surface border-transparent',\n        // M3 disabled + selected: faint on-surface/12 container, no outline\n        // (icon falls back to on-surface/38 from the variant). NOT transparent.\n        'disabled:bg-on-surface/12 disabled:border-transparent',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:border-transparent',\n      ],\n    },\n  ],\n  defaultVariants: {\n    variant: 'standard',\n    size: 's',\n    width: 'default',\n  },\n});\n\nexport const IconButton = createIconButton(({ variant, selected, size, width }) =>\n  iconButton({ variant, selected, size, width }),\n);\nexport type { IconButtonProps, IconButtonVariant } from '@m3-baseui/core';\n"]}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+export { Button, button } from './button.js';
+export { IconButton, iconButton } from './icon-button.js';
+export { Switch, switchTv } from './switch.js';
+export { Checkbox, checkboxTv } from './checkbox.js';
+export { Radio, RadioGroup, radioTv } from './radio.js';
+export { Chip, chipTv } from './chip.js';
+export { Tooltip, tooltipTv } from './tooltip.js';
+export { Dialog, dialogTv } from './dialog.js';
+export { Menu, menuTv } from './menu.js';
+export { Tabs, tabsTv } from './tabs.js';
+export { Slider, sliderTv } from './slider.js';
+export { Select, selectTv } from './select.js';
+export { TextField, textFieldTv } from './textfield.js';
+export { NavigationBar, navigationBarTv } from './navigation-bar.js';
+export { Fab, fabTv } from './fab.js';
+export { Divider, dividerTv } from './divider.js';
+export { Progress, circularTv, linearTv } from './progress.js';
+export { List, listTv } from './list.js';
+export { Snackbar, snackbarTv } from './snackbar.js';
+export { Item, itemTv } from './item.js';
+export { Badge, badgeTv } from './badge.js';
+export { Card, cardTv } from './card.js';
+export { SegmentedButton, segmentedButtonTv } from './segmented-button.js';
+export { NavigationDrawer, navigationDrawerTv } from './navigation-drawer.js';
+export { BadgeProps, BadgeSize, ButtonProps, ButtonVariant, CardProps, CardVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabProps, FabSize, IconButtonProps, IconButtonVariant, ItemProps, LinearProgressProps, ListItemLines, ListItemProps, NavigationDrawerVariant, Ripple, SchemeVariant, TabsVariant, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
+import '@base-ui/react';
+import 'react';
+import 'tailwind-variants';
+import 'tailwind-variants/dist/config.js';