@m3-baseui/react-tailwind 1.4.0 → 3.0.0

package/dist/components/top-app-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/top-app-bar/top-app-bar.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;;;AChCI,IAAM,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,iEAAA;AAAA,IACN,GAAA,EAAK,mCAAA;AAAA,IACL,OAAA,EAAS,2DAAA;AAAA,IACT,QAAA,EAAU,kCAAA;AAAA,IACV,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,EAAE,QAAA,EAAU,8BAAA,EAA+B;AAAA,MAClD,MAAA,EAAQ,EAAE,QAAA,EAAU,0CAAA,EAA2C;AAAA,MAC/D,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,+BAAA,EAAgC;AAAA,MAClE,KAAA,EAAO,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,gCAAA;AAAiC;AACpE,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,SAAA,GAAY,eAAA,CAAgB,CAAC,IAAA,KAAS;AACjD,EAAA,MAAM,IAAI,WAAA,CAAY,EAAE,OAAA,EAAS,IAAA,CAAK,SAAS,CAAA;AAC/C,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,IACX,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,IACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,IACrB,QAAA,EAAU,EAAE,QAAA;AAAS,GACvB;AACF,CAAC","file":"index.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 * top-app-bar.ts — tailwind-variants slots for the M3 TopAppBar.\n *\n * A `surface` bar. `small`/`center` are a single 64dp row (title-large, left vs.\n * centered); `medium`/`large` add a second headline line (headline-small /\n * headline-medium) below a 64dp action row, for 112dp / 152dp totals. The active\n * variant is exposed as `data-variant`. Same DOM as the VE build.\n */\nimport { createTopAppBar } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const topAppBarTv = tv({\n  slots: {\n    root: 'flex flex-col w-full box-border h-16 bg-surface text-on-surface',\n    row: 'flex items-center gap-1 h-16 px-1',\n    leading: 'flex items-center shrink-0 text-on-surface [&_svg]:size-6',\n    headline: 'min-w-0 truncate text-on-surface',\n    trailing: 'flex items-center gap-1 shrink-0 text-on-surface-variant [&_svg]:size-6',\n  },\n  variants: {\n    variant: {\n      small: { headline: 'flex-1 px-3 text-title-large' },\n      center: { headline: 'flex-1 px-3 text-center text-title-large' },\n      medium: { root: 'h-28', headline: 'px-4 pb-6 text-headline-small' },\n      large: { root: 'h-38', headline: 'px-4 pb-7 text-headline-medium' },\n    },\n  },\n  defaultVariants: {\n    variant: 'small',\n  },\n});\n\nexport const TopAppBar = createTopAppBar((args) => {\n  const s = topAppBarTv({ variant: args.variant });\n  return {\n    root: s.root(),\n    row: s.row(),\n    leading: s.leading(),\n    headline: s.headline(),\n    trailing: s.trailing(),\n  };\n});\nexport type { TopAppBarProps, TopAppBarVariant } from '@m3-baseui/core';\n"]}

package/dist/index.d.ts

@@ -1,43 +1,44 @@
-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 { RichTooltip, Tooltip, richTooltipTv, 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 { FabMenu, fabMenuTv } from './fab-menu.js';
-export { Divider, dividerTv } from './divider.js';
-export { Progress, circularTv, linearTv } from './progress.js';
-export { LoadingIndicator, loadingIndicatorTv } from './loading-indicator.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 { ButtonGroup, buttonGroup } from './button-group.js';
-export { SplitButton, splitButtonTv } from './split-button.js';
-export { NavigationDrawer, navigationDrawerTv } from './navigation-drawer.js';
-export { TopAppBar, topAppBarTv } from './top-app-bar.js';
-export { BottomAppBar, bottomAppBarTv } from './bottom-app-bar.js';
-export { NavigationRail, navigationRailTv } from './navigation-rail.js';
-export { BottomSheet, bottomSheetTv } from './bottom-sheet.js';
-export { SideSheet, sideSheetTv } from './side-sheet.js';
-export { Search, searchTv } from './search.js';
-export { DatePicker, datePickerTv } from './date-picker.js';
-export { TimePicker, timePickerTv } from './time-picker.js';
-export { BadgeProps, BadgeSize, BottomAppBarProps, BottomSheetVariant, ButtonGroupProps, ButtonGroupVariant, ButtonProps, ButtonVariant, CardProps, CardVariant, CarouselVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabMenuItemProps, FabMenuTriggerProps, FabProps, FabSize, ITEM_LEADING_VARIANTS, IconButtonProps, IconButtonVariant, ItemLeadingVariant, ItemProps, LIST_LEADING_VARIANTS, LinearProgressProps, ListItemLines, ListItemProps, ListLeadingVariant, LoadingIndicatorProps, NavigationDrawerVariant, Ripple, SchemeVariant, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TimePickerVariant, TimeValue, ToolbarOrientation, ToolbarProps, ToolbarVariant, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
-export { Toolbar, toolbarTv } from './toolbar.js';
-export { Carousel, carouselTv } from './carousel.js';
+export { Button, button } from './components/button/index.js';
+export { IconButton, iconButton } from './components/icon-button/index.js';
+export { Switch, switchTv } from './components/switch/index.js';
+export { Checkbox, checkboxTv } from './components/checkbox/index.js';
+export { Radio, RadioGroup, radioTv } from './components/radio/index.js';
+export { Chip, chipTv } from './components/chip/index.js';
+export { RichTooltip, Tooltip, richTooltipTv, tooltipTv } from './components/tooltip/index.js';
+export { Dialog, dialogTv } from './components/dialog/index.js';
+export { Menu, menuTv } from './components/menu/index.js';
+export { Tabs, tabsTv } from './components/tabs/index.js';
+export { Slider, sliderTv } from './components/slider/index.js';
+export { Select, selectFieldTv, selectTv } from './components/select/index.js';
+export { TextField, textFieldTv } from './components/textfield/index.js';
+export { NavigationBar, navigationBarTv } from './components/navigation-bar/index.js';
+export { Fab, fabTv } from './components/fab/index.js';
+export { FabMenu, fabMenuTv } from './components/fab-menu/index.js';
+export { Divider, dividerTv } from './components/divider/index.js';
+export { Progress, circularTv, linearTv } from './components/progress/index.js';
+export { LoadingIndicator, loadingIndicatorTv } from './components/loading-indicator/index.js';
+export { List, listTv } from './components/list/index.js';
+export { Snackbar, snackbarTv } from './components/snackbar/index.js';
+export { Item, itemTv } from './components/item/index.js';
+export { Badge, badgeTv } from './components/badge/index.js';
+export { Card, cardTv } from './components/card/index.js';
+export { SegmentedButton, segmentedButtonTv } from './components/segmented-button/index.js';
+export { ButtonGroup, buttonGroup } from './components/button-group/index.js';
+export { SplitButton, splitButtonTv } from './components/split-button/index.js';
+export { NavigationDrawer, navigationDrawerTv } from './components/navigation-drawer/index.js';
+export { TopAppBar, topAppBarTv } from './components/top-app-bar/index.js';
+export { BottomAppBar, bottomAppBarTv } from './components/bottom-app-bar/index.js';
+export { NavigationRail, navigationRailTv } from './components/navigation-rail/index.js';
+export { BottomSheet, bottomSheetTv } from './components/bottom-sheet/index.js';
+export { SideSheet, sideSheetTv } from './components/side-sheet/index.js';
+export { Search, searchTv } from './components/search/index.js';
+export { DatePicker, datePickerTv } from './components/date-picker/index.js';
+export { TimePicker, timePickerTv } from './components/time-picker/index.js';
+export { BadgeProps, BadgeSize, BottomAppBarProps, BottomSheetVariant, ButtonGroupProps, ButtonGroupVariant, ButtonProps, ButtonVariant, CardProps, CardVariant, CarouselVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabMenuItemProps, FabMenuTriggerProps, FabProps, FabSize, ITEM_LEADING_VARIANTS, IconButtonProps, IconButtonVariant, ItemLeadingVariant, ItemProps, LIST_LEADING_VARIANTS, LinearProgressProps, ListItemLines, ListItemProps, ListLeadingVariant, LoadingIndicatorProps, NavigationDrawerVariant, Ripple, SchemeVariant, SelectFieldProps, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldIconAction, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TimePickerVariant, TimeValue, ToolbarOrientation, ToolbarProps, ToolbarVariant, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
+export { Toolbar, toolbarTv } from './components/toolbar/index.js';
+export { Carousel, carouselTv } from './components/carousel/index.js';
 import '@base-ui/react';
 import 'react';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config.js';
+import 'tailwind-merge';