@instruments/materia-ui 0.4.7 → 0.4.9

package/dist/compositions/sidebar/sidebar-menu-sub.js

@@ -5,6 +5,7 @@ import { Dot } from "@instruments/materia-ui/components/dot";
 import { Flex } from "@instruments/materia-ui/components/flex";
 import { Icon } from "@instruments/materia-ui/components/icon";
 import { MenuItem } from "@instruments/materia-ui/components/menu-item";
+import { ScrollFrame } from "@instruments/materia-ui/components/scroll-frame";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { isString } from "../../utils/type-guards.js";
 /** The `<ul>` container for a nested submenu under a menu item; hidden when the sidebar collapses to an icon rail. */
@@ -13,7 +14,7 @@ export const SidebarMenuSub = ({ className, ...props }) => (_jsx(Flex, { as: "ul
  * Scroll viewport for sidebar submenu content inside floating surfaces.
  * Keeps menu list scrolling, scrollbar styling, and bottom fade treatment centralised.
  */
-export const SidebarMenuSubScrollArea = ({ children, className, fade = false, maxHeight = "none", ...props }) => (_jsxs("div", { className: cn("relative min-h-0", className), "data-component": "sidebar-menu-sub-scroll-area", "data-slot": "sidebar-menu-sub-scroll-area", ...props, children: [_jsx("div", { className: cn("scrollbar-menu overflow-x-hidden overflow-y-auto", maxHeight === "dropdown" && "max-h-menu-sidebar-list"), children: children }), fade ? (_jsx("div", { "aria-hidden": true, className: "to-popover pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-linear-to-b from-transparent" })) : null] }));
+export const SidebarMenuSubScrollArea = ({ children, className, fade = false, maxHeight = "none", ...props }) => (_jsx(ScrollFrame, { ...props, className: cn("min-h-0", maxHeight === "dropdown" && "max-h-menu-sidebar-list", className), "data-component": "sidebar-menu-sub-scroll-area", "data-slot": "sidebar-menu-sub-scroll-area", fadeSize: "3xl", fadeTheme: "popover", fades: fade ? "end" : "none", children: children }));
 /** The `<li>` wrapper for a single submenu row. */
 export const SidebarMenuSubItem = ({ className, ...props }) => (_jsx("li", { className: cn("group/menu-sub-item relative", className), "data-component": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", "data-slot": "sidebar-menu-sub-item", ...props }));
 /**

package/dist/compositions/sidebar/sidebar-trigger.d.ts

@@ -1,7 +1,7 @@
 import { Button } from "@instruments/materia-ui/components/button";
 import type React from "react";
 import type { IconComponent } from "../../tokens/icon-component.js";
-type SidebarTriggerProps = Omit<React.ComponentProps<typeof Button>, "icon"> & {
+type SidebarTriggerProps = Omit<React.ComponentProps<typeof Button>, "emphasis" | "icon"> & {
     /** Icon to display. Defaults to PanelLeftCloseIcon. */
     icon?: IconComponent;
     /** Visual weight, as on Button. @default "ghost" */

package/dist/compositions/tag-selector/tag-selector-list.js

@@ -7,6 +7,7 @@ import { Plus } from "lucide-react";
 import { useMemo } from "react";
 import { Button } from "../../components/button.js";
 import { Flex } from "../../components/flex.js";
+import { ScrollFrame } from "../../components/scroll-frame.js";
 import { TagSelectorColorSwatches } from "../tag-selector/tag-selector-color-swatches.js";
 import { useTagSelectorContext } from "../tag-selector/tag-selector-context.js";
 import { TagSelectorItem } from "../tag-selector/tag-selector-item.js";
@@ -94,7 +95,7 @@ export const TagSelectorList = ({ emptyMessage = "No tags found.", className, })
     const exactMatch = tags.some((tag) => tag.label.toLowerCase() === searchQuery.toLowerCase());
     const showCreateOption = allowCreate && searchQuery !== "" && !exactMatch;
     const selectedIds = new Set(value.map((t) => t.id));
-    return (_jsx(Flex, { className: cn("max-h-75 overflow-y-auto p-1", className), "data-component": "tag-selector-list", "data-slot": "tag-selector-list", direction: "column", id: listboxId, 
-        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role, react-doctor/prefer-tag-over-role -- this is a custom listbox widget whose children are interactive TagSelectorItem rows, a drag-to-reorder DndContext, and a "Create" affordance with a colour palette; <datalist>/<select> can only hold plain <option>s, so they cannot represent this content.
-        role: "listbox", children: filteredTags.length === 0 && !showCreateOption ? (_jsx("div", { className: "text-muted-foreground text-paragraph-sm py-6 text-center", children: emptyMessage })) : (_jsxs(_Fragment, { children: [showCreateOption && _jsx(TagSelectorCreateOption, {}), _jsx(TagSelectorItems, { filteredTags: filteredTags, selectedIds: selectedIds })] })) }));
+    return (_jsx(ScrollFrame, { className: cn("max-h-75", className), fadeTheme: "popover", fades: "end", children: _jsx(Flex, { className: "p-1", "data-component": "tag-selector-list", "data-slot": "tag-selector-list", direction: "column", id: listboxId, 
+            // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role, react-doctor/prefer-tag-over-role -- this is a custom listbox widget whose children are interactive TagSelectorItem rows, a drag-to-reorder DndContext, and a "Create" affordance with a colour palette; <datalist>/<select> can only hold plain <option>s, so they cannot represent this content.
+            role: "listbox", children: filteredTags.length === 0 && !showCreateOption ? (_jsx("div", { className: "text-muted-foreground text-paragraph-sm py-6 text-center", children: emptyMessage })) : (_jsxs(_Fragment, { children: [showCreateOption && _jsx(TagSelectorCreateOption, {}), _jsx(TagSelectorItems, { filteredTags: filteredTags, selectedIds: selectedIds })] })) }) }));
 };