@inui/design-system 0.0.0-stage → 1.22.0

package/dist/index.js

@@ -0,0 +1,77 @@
+import { cn } from "./lib/utils.js";
+import { M2DS_PORTAL_ATTRIBUTE, M2DS_ROOT_ATTRIBUTE, getPortalContainer, portalScopeProps, rootScopeProps } from "./lib/scope.js";
+import { useIsMobile } from "./hooks/use-mobile.js";
+import { useIsDarkMode } from "./hooks/use-dark-mode.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/ui/accordion.js";
+import { AISparkle, aiSparkleSizeVariants, aiSparkleStateVariants } from "./components/ui/ai-sparkle.js";
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./components/ui/avatar.js";
+import { AIAvatar } from "./components/ui/ai-avatar.js";
+import { Button, buttonVariants } from "./components/ui/button.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./components/ui/popover.js";
+import { AILabel, AILabelContent, AILabelTrigger } from "./components/ui/ai-label.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./components/ui/alert-dialog.js";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/ui/alert.js";
+import { AspectRatio } from "./components/ui/aspect-ratio.js";
+import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger } from "./components/ui/attachment.js";
+import { Badge, badgeVariants } from "./components/ui/badge.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/ui/breadcrumb.js";
+import { Input } from "./components/ui/input.js";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/ui/context-menu.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./components/ui/tabs.js";
+import { BrowserTab, BrowserTabs, BrowserTabsList } from "./components/ui/browser-tabs.js";
+import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "./components/ui/bubble.js";
+import { Separator } from "./components/ui/separator.js";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "./components/ui/button-group.js";
+import { Calendar, CalendarDayButton } from "./components/ui/calendar.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/ui/card.js";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel } from "./components/ui/carousel.js";
+import { Label, OptionalHint, RequiredDot } from "./components/ui/label.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldIdContext, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./components/ui/field.js";
+import { Checkbox } from "./components/ui/checkbox.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible.js";
+import { Textarea } from "./components/ui/textarea.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/ui/input-group.js";
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./components/ui/combobox.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/dialog.js";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/ui/command.js";
+import { CountBadge } from "./components/ui/count-badge.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/ui/table.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./components/ui/pagination.js";
+import { Skeleton } from "./components/ui/skeleton.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./components/ui/empty.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/ui/dropdown-menu.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectMultiple, SelectMultipleContent, SelectMultipleFooter, SelectMultipleGroup, SelectMultipleItem, SelectMultipleLabel, SelectMultipleSeparator, SelectMultipleTrigger, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/ui/select.js";
+import { DataTable, HighlightMatch, RowActions, columnMenuActions } from "./components/ui/data-table.js";
+import { DirectionProvider, useDirection } from "./components/ui/direction.js";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./components/ui/drawer.js";
+import { Dropzone, FileTypeIcon, getFileTypeFamily } from "./components/ui/dropzone.js";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./components/ui/hover-card.js";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./components/ui/input-otp.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from "./components/ui/item.js";
+import { Kbd, KbdGroup } from "./components/ui/kbd.js";
+import { KeyValuePair, KeyValuePairGroup, KeyValuePairKey, KeyValuePairValue, keyValuePairVariants } from "./components/ui/key-value-pair.js";
+import { Marker, MarkerContent, MarkerIcon, markerVariants } from "./components/ui/marker.js";
+import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./components/ui/menubar.js";
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "./components/ui/message-scroller.js";
+import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from "./components/ui/message.js";
+import { MetaList, MetaListIcon, MetaListItem, metaListVariants } from "./components/ui/meta-list.js";
+import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./components/ui/native-select.js";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./components/ui/navigation-menu.js";
+import { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle } from "./components/ui/page-header.js";
+import { Progress } from "./components/ui/progress.js";
+import { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle } from "./components/ui/questionnaire.js";
+import { RadioGroup, RadioGroupItem } from "./components/ui/radio-group.js";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/ui/resizable.js";
+import { ScrollArea, ScrollBar } from "./components/ui/scroll-area.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/ui/sheet.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuCollapsible, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./components/ui/sidebar.js";
+import { Slider } from "./components/ui/slider.js";
+import { Toaster } from "./components/ui/sonner.js";
+import { Spinner } from "./components/ui/spinner.js";
+import { Stepper, StepperContent, StepperList, StepperTrigger } from "./components/ui/stepper.js";
+import { Switch } from "./components/ui/switch.js";
+import { TimePicker } from "./components/ui/time-picker.js";
+import { Toggle, toggleVariants } from "./components/ui/toggle.js";
+import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
+export { AIAvatar, AILabel, AILabelContent, AILabelTrigger, AISparkle, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrowserTab, BrowserTabs, TabsContent as BrowserTabsContent, TabsContent, BrowserTabsList, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CountBadge, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldIdContext, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileTypeIcon, HighlightMatch, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, KeyValuePair, KeyValuePairGroup, KeyValuePairKey, KeyValuePairValue, Label, M2DS_PORTAL_ATTRIBUTE, M2DS_ROOT_ATTRIBUTE, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MetaList, MetaListIcon, MetaListItem, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, OptionalHint, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RadioGroup, RadioGroupItem, RequiredDot, ResizableHandle, ResizablePanel, ResizablePanelGroup, RowActions, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectMultiple, SelectMultipleContent, SelectMultipleFooter, SelectMultipleGroup, SelectMultipleItem, SelectMultipleLabel, SelectMultipleSeparator, SelectMultipleTrigger, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuCollapsible, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Stepper, StepperContent, StepperList, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsTrigger, Textarea, TimePicker, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, aiSparkleSizeVariants, aiSparkleStateVariants, badgeVariants, buttonGroupVariants, buttonVariants, cn, columnMenuActions, getFileTypeFamily, getPortalContainer, keyValuePairVariants, markerVariants, metaListVariants, navigationMenuTriggerStyle, portalScopeProps, rootScopeProps, tabsListVariants, toggleVariants, useCarousel, useComboboxAnchor, useDirection, useIsDarkMode, useIsMobile, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar };

package/dist/lib/scope.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Scope markers for the stylesheet.
+ *
+ * `dist/styles.css` wraps every rule in
+ * `@scope ([data-m2ds-root], [data-m2ds-portal])` so the library can be mounted as
+ * one web component among several on a shared page without its reset or its token
+ * palette touching the host document. See `src/styles/index.css`.
+ *
+ * There is no unscoped build, so `data-m2ds-root` is required: without it on some
+ * ancestor, nothing renders styled.
+ *
+ * Both constants are harmless if a consumer instead runs their own unscoped Tailwind
+ * build over our `dist/` — they are only attributes, and nothing in such a sheet
+ * selects on them.
+ */
+/**
+ * Put this on the element your app renders into — the web component host, or any
+ * wrapper. Everything inside it is styled; nothing outside it is.
+ *
+ * Note that `@scope` does not match the scoping root itself with bare selectors, so
+ * utility classes on the SAME element as this attribute will not apply. Put it on a
+ * wrapper, not on an element you also want to style with utilities.
+ */
+export declare const M2DS_ROOT_ATTRIBUTE = "data-m2ds-root";
+/**
+ * Marks the container that portalled content is mounted into, so `@scope` reaches
+ * it. `@scope` resolves against the DOM, and overlays portal into `document.body` —
+ * outside the consumer's `data-m2ds-root` — so without this every dialog, select,
+ * tooltip, popover and dropdown would render unstyled.
+ */
+export declare const M2DS_PORTAL_ATTRIBUTE = "data-m2ds-portal";
+/** Spread onto the element your app renders into. See {@link M2DS_ROOT_ATTRIBUTE}. */
+export declare const rootScopeProps: {
+    readonly "data-m2ds-root": "";
+};
+/**
+ * Spread onto a container you portal library content into yourself.
+ *
+ * The built-in overlays do NOT use this — they pass {@link getPortalContainer} as
+ * Radix's `container` prop instead. Radix's portal wrappers destructure a fixed set
+ * of props with no rest spread (`react-menu`, `react-dialog`, `react-tooltip`,
+ * `react-popover`, `react-hover-card`), so an attribute handed to `<X.Portal>` is
+ * silently dropped; and because they render with `asChild`, there is no portal
+ * element to carry it even if it survived. `container` is the supported hook.
+ */
+export declare const portalScopeProps: {
+    readonly "data-m2ds-portal": "";
+};
+/**
+ * The shared element that every built-in overlay portals into: one
+ * `<div data-m2ds-portal>` appended to `document.body`, created on first use.
+ *
+ * Returns `undefined` during SSR, where Radix falls back to `document.body` and
+ * renders nothing until mount anyway. Created during render rather than in an
+ * effect so the first paint is already in scope — an effect would flash unstyled.
+ * Re-created if something detaches it from the document.
+ *
+ * Caveat: being a child of `<body>`, it inherits the document's theme. `dark` on
+ * `<html>` reaches it, but if two roots on one page run different modes, overlays
+ * follow the document rather than the root that opened them. Pass an explicit
+ * `container` on the component to override per overlay.
+ */
+export declare function getPortalContainer(): HTMLElement | undefined;
+//# sourceMappingURL=scope.d.ts.map

package/dist/lib/scope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope.d.ts","sourceRoot":"","sources":["../../src/lib/scope.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAA;AAEnD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,qBAAqB,CAAA;AAEvD,sFAAsF;AACtF,eAAO,MAAM,cAAc;;CAAoC,CAAA;AAE/D;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB;;CAAsC,CAAA;AAEnE;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,IAAI,WAAW,GAAG,SAAS,CAiB5D"}

package/dist/lib/scope.js

@@ -0,0 +1,74 @@
+//#region src/lib/scope.ts
+/**
+* Scope markers for the stylesheet.
+*
+* `dist/styles.css` wraps every rule in
+* `@scope ([data-m2ds-root], [data-m2ds-portal])` so the library can be mounted as
+* one web component among several on a shared page without its reset or its token
+* palette touching the host document. See `src/styles/index.css`.
+*
+* There is no unscoped build, so `data-m2ds-root` is required: without it on some
+* ancestor, nothing renders styled.
+*
+* Both constants are harmless if a consumer instead runs their own unscoped Tailwind
+* build over our `dist/` — they are only attributes, and nothing in such a sheet
+* selects on them.
+*/
+/**
+* Put this on the element your app renders into — the web component host, or any
+* wrapper. Everything inside it is styled; nothing outside it is.
+*
+* Note that `@scope` does not match the scoping root itself with bare selectors, so
+* utility classes on the SAME element as this attribute will not apply. Put it on a
+* wrapper, not on an element you also want to style with utilities.
+*/
+var M2DS_ROOT_ATTRIBUTE = "data-m2ds-root";
+/**
+* Marks the container that portalled content is mounted into, so `@scope` reaches
+* it. `@scope` resolves against the DOM, and overlays portal into `document.body` —
+* outside the consumer's `data-m2ds-root` — so without this every dialog, select,
+* tooltip, popover and dropdown would render unstyled.
+*/
+var M2DS_PORTAL_ATTRIBUTE = "data-m2ds-portal";
+/** Spread onto the element your app renders into. See {@link M2DS_ROOT_ATTRIBUTE}. */
+var rootScopeProps = { "data-m2ds-root": "" };
+/**
+* Spread onto a container you portal library content into yourself.
+*
+* The built-in overlays do NOT use this — they pass {@link getPortalContainer} as
+* Radix's `container` prop instead. Radix's portal wrappers destructure a fixed set
+* of props with no rest spread (`react-menu`, `react-dialog`, `react-tooltip`,
+* `react-popover`, `react-hover-card`), so an attribute handed to `<X.Portal>` is
+* silently dropped; and because they render with `asChild`, there is no portal
+* element to carry it even if it survived. `container` is the supported hook.
+*/
+var portalScopeProps = { "data-m2ds-portal": "" };
+/**
+* The shared element that every built-in overlay portals into: one
+* `<div data-m2ds-portal>` appended to `document.body`, created on first use.
+*
+* Returns `undefined` during SSR, where Radix falls back to `document.body` and
+* renders nothing until mount anyway. Created during render rather than in an
+* effect so the first paint is already in scope — an effect would flash unstyled.
+* Re-created if something detaches it from the document.
+*
+* Caveat: being a child of `<body>`, it inherits the document's theme. `dark` on
+* `<html>` reaches it, but if two roots on one page run different modes, overlays
+* follow the document rather than the root that opened them. Pass an explicit
+* `container` on the component to override per overlay.
+*/
+function getPortalContainer() {
+	if (typeof document === "undefined") return void 0;
+	if (!container?.isConnected) {
+		container = document.createElement("div");
+		container.setAttribute(M2DS_PORTAL_ATTRIBUTE, "");
+		container.style.containerType = "inline-size";
+		document.body.appendChild(container);
+	}
+	return container;
+}
+var container = null;
+//#endregion
+export { M2DS_PORTAL_ATTRIBUTE, M2DS_ROOT_ATTRIBUTE, getPortalContainer, portalScopeProps, rootScopeProps };
+
+//# sourceMappingURL=scope.js.map

package/dist/lib/scope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope.js","names":[],"sources":["../../src/lib/scope.ts"],"sourcesContent":["/**\n * Scope markers for the stylesheet.\n *\n * `dist/styles.css` wraps every rule in\n * `@scope ([data-m2ds-root], [data-m2ds-portal])` so the library can be mounted as\n * one web component among several on a shared page without its reset or its token\n * palette touching the host document. See `src/styles/index.css`.\n *\n * There is no unscoped build, so `data-m2ds-root` is required: without it on some\n * ancestor, nothing renders styled.\n *\n * Both constants are harmless if a consumer instead runs their own unscoped Tailwind\n * build over our `dist/` — they are only attributes, and nothing in such a sheet\n * selects on them.\n */\n\n/**\n * Put this on the element your app renders into — the web component host, or any\n * wrapper. Everything inside it is styled; nothing outside it is.\n *\n * Note that `@scope` does not match the scoping root itself with bare selectors, so\n * utility classes on the SAME element as this attribute will not apply. Put it on a\n * wrapper, not on an element you also want to style with utilities.\n */\nexport const M2DS_ROOT_ATTRIBUTE = \"data-m2ds-root\"\n\n/**\n * Marks the container that portalled content is mounted into, so `@scope` reaches\n * it. `@scope` resolves against the DOM, and overlays portal into `document.body` —\n * outside the consumer's `data-m2ds-root` — so without this every dialog, select,\n * tooltip, popover and dropdown would render unstyled.\n */\nexport const M2DS_PORTAL_ATTRIBUTE = \"data-m2ds-portal\"\n\n/** Spread onto the element your app renders into. See {@link M2DS_ROOT_ATTRIBUTE}. */\nexport const rootScopeProps = { \"data-m2ds-root\": \"\" } as const\n\n/**\n * Spread onto a container you portal library content into yourself.\n *\n * The built-in overlays do NOT use this — they pass {@link getPortalContainer} as\n * Radix's `container` prop instead. Radix's portal wrappers destructure a fixed set\n * of props with no rest spread (`react-menu`, `react-dialog`, `react-tooltip`,\n * `react-popover`, `react-hover-card`), so an attribute handed to `<X.Portal>` is\n * silently dropped; and because they render with `asChild`, there is no portal\n * element to carry it even if it survived. `container` is the supported hook.\n */\nexport const portalScopeProps = { \"data-m2ds-portal\": \"\" } as const\n\n/**\n * The shared element that every built-in overlay portals into: one\n * `<div data-m2ds-portal>` appended to `document.body`, created on first use.\n *\n * Returns `undefined` during SSR, where Radix falls back to `document.body` and\n * renders nothing until mount anyway. Created during render rather than in an\n * effect so the first paint is already in scope — an effect would flash unstyled.\n * Re-created if something detaches it from the document.\n *\n * Caveat: being a child of `<body>`, it inherits the document's theme. `dark` on\n * `<html>` reaches it, but if two roots on one page run different modes, overlays\n * follow the document rather than the root that opened them. Pass an explicit\n * `container` on the component to override per overlay.\n */\nexport function getPortalContainer(): HTMLElement | undefined {\n  if (typeof document === \"undefined\") return undefined\n  if (!container?.isConnected) {\n    container = document.createElement(\"div\")\n    container.setAttribute(M2DS_PORTAL_ATTRIBUTE, \"\")\n    // `inline-size` containment, not a visual change on its own — it just\n    // makes this element a valid `@container` query context. Dialog/Sheet/\n    // Drawer's width caps use `@sm:` against it instead of the viewport\n    // `sm:` breakpoint: in ordinary usage this div is 100% of `<body>`,\n    // effectively the same width as the viewport, so behavior is unchanged;\n    // in a host that visually constrains `<body>` itself to a narrower\n    // region (e.g. an embedded/sidecar-style panel), the cap now tracks\n    // that actual width instead of the full, unconstrained browser window.\n    container.style.containerType = \"inline-size\"\n    document.body.appendChild(container)\n  }\n  return container\n}\n\nlet container: HTMLElement | null = null\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,sBAAsB;;;;;;;AAQnC,IAAa,wBAAwB;;AAGrC,IAAa,iBAAiB,EAAE,kBAAkB,GAAG;;;;;;;;;;;AAYrD,IAAa,mBAAmB,EAAE,oBAAoB,GAAG;;;;;;;;;;;;;;;AAgBzD,SAAgB,qBAA8C;CAC5D,IAAI,OAAO,aAAa,aAAa,OAAO,KAAA;CAC5C,IAAI,CAAC,WAAW,aAAa;EAC3B,YAAY,SAAS,cAAc,KAAK;EACxC,UAAU,aAAa,uBAAuB,EAAE;EAShD,UAAU,MAAM,gBAAgB;EAChC,SAAS,KAAK,YAAY,SAAS;CACrC;CACA,OAAO;AACT;AAEA,IAAI,YAAgC"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAmB5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -0,0 +1,11 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+//#region src/lib/utils.ts
+var twMerge = extendTailwindMerge({ extend: { classGroups: { "bg-image": ["bg-ai-glow", "bg-ai-glow-bottom"] } } });
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cn };
+
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { extendTailwindMerge } from \"tailwind-merge\"\n\n// tailwind-merge can't know that `bg-ai-glow`/`bg-ai-glow-bottom` are\n// background-IMAGE utilities (they come from `--background-image-*` theme\n// tokens, not `--color-*`), so out of the box it files them under the\n// background-color group and lets them knock out a sibling `bg-background`\n// / `bg-card` — which is exactly how the AI column's sticky header cell\n// lost its grey, and why the AI Card once needed a separate overlay div.\n// Registering them in the `bg-image` group lets a colour and a glow\n// coexist on one element, the same way `bg-card bg-gradient-to-r` does.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"bg-image\": [\"bg-ai-glow\", \"bg-ai-glow-bottom\"],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;AAWA,IAAM,UAAU,oBAAoB,EAClC,QAAQ,EACN,aAAa,EACX,YAAY,CAAC,cAAc,mBAAmB,EAChD,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}