@noxlovette/material 0.3.2 → 0.4.0

package/dist/components/containers/menu/MenuRadioItem.svelte

@@ -0,0 +1,49 @@
+<!--
+@component
+A single selectable option inside a `MenuRadioGroup`.
+
+Wraps bits-ui's `DropdownMenu.RadioItem`. Only one radio item within the
+same `MenuRadioGroup` can be checked at a time; selecting one unchecks any
+previously-checked sibling. Renders a leading radio indicator that fills
+in when selected.
+
+Contrast with `MenuCheckboxItem`, whose checked state is independent of any
+sibling item.
+
+@see https://m3.material.io/components/menus/guidelines
+-->
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import Icon from '../../../utils/icon/Icon.svelte';
+  import Layer from '../../../utils/Layer.svelte';
+  import { menu as menuCls } from './theme.js';
+  import type { MenuRadioItemProps } from './types.js';
+
+  let {
+    value,
+    disabled = false,
+    closeOnSelect = true,
+    helper,
+    children,
+    class: className
+  }: MenuRadioItemProps = $props();
+</script>
+
+<DropdownMenu.RadioItem {value} {disabled} {closeOnSelect}>
+  {#snippet child({ props, checked })}
+    {@const cls = menuCls({ checked })}
+    <div {...props} class={cls.item({ class: className })}>
+      <Icon
+        name={checked ? 'radio_button_checked' : 'radio_button_unchecked'}
+        class={cls.indicator()}
+      />
+      <div class={cls.itemContent()}>
+        {@render children()}
+        {#if helper}
+          <span class={cls.helper()}>{helper}</span>
+        {/if}
+      </div>
+      <Layer />
+    </div>
+  {/snippet}
+</DropdownMenu.RadioItem>

package/dist/components/containers/menu/MenuRadioItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { MenuRadioItemProps } from './types.js';
+/**
+ * A single selectable option inside a `MenuRadioGroup`.
+ *
+ * Wraps bits-ui's `DropdownMenu.RadioItem`. Only one radio item within the
+ * same `MenuRadioGroup` can be checked at a time; selecting one unchecks any
+ * previously-checked sibling. Renders a leading radio indicator that fills
+ * in when selected.
+ *
+ * Contrast with `MenuCheckboxItem`, whose checked state is independent of any
+ * sibling item.
+ *
+ * @see https://m3.material.io/components/menus/guidelines
+ */
+declare const MenuRadioItem: import("svelte").Component<MenuRadioItemProps, {}, "">;
+type MenuRadioItem = ReturnType<typeof MenuRadioItem>;
+export default MenuRadioItem;

package/dist/components/containers/menu/MenuSub.svelte

@@ -0,0 +1,91 @@
+<!--
+@component
+A `MenuItem`-like row that opens a nested submenu panel on hover or press,
+instead of firing a selection itself.
+
+Wraps bits-ui's `DropdownMenu.Sub` + `SubTrigger` + `SubContent`. The
+trigger row (`iconProps`/`helper`/`children` label) behaves like a
+`MenuItem`; pass the nested rows — `MenuItem`, `MenuCheckboxItem`,
+`MenuRadioItem`, `MenuGroup`, more `MenuSub`, etc. — as `submenu`.
+
+@example
+```svelte
+<Menu label="File">
+  <MenuItem iconProps={{ name: 'draft' }}>New</MenuItem>
+  <MenuSub iconProps={{ name: 'ios_share' }}>
+    Share
+    {#snippet submenu()}
+      <MenuItem>Email</MenuItem>
+      <MenuItem>Link</MenuItem>
+    {/snippet}
+  </MenuSub>
+</Menu>
+```
+
+@see https://m3.material.io/components/menus/guidelines
+-->
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import clsx from 'clsx';
+  import Icon from '../../../utils/icon/Icon.svelte';
+  import Layer from '../../../utils/Layer.svelte';
+  import { menu as menuCls } from './theme.js';
+  import { enterExit } from '../../../animation/enterExit.js';
+  import { easeEmphasizedDecel } from '../../../animation/easing.js';
+  import type { MenuSubProps } from './types.js';
+
+  let {
+    iconProps,
+    disabled = false,
+    helper,
+    children,
+    submenu,
+    open = $bindable(false),
+    class: className,
+    submenuClass
+  }: MenuSubProps = $props();
+
+  const cls = $derived(menuCls());
+</script>
+
+<DropdownMenu.Sub bind:open>
+  <DropdownMenu.SubTrigger {disabled}>
+    {#snippet child({ props })}
+      <div {...props} class={cls.item({ class: className })}>
+        {#if iconProps}
+          <Icon class={cls.icon()} {...iconProps} />
+        {/if}
+        <div class={cls.itemContent()}>
+          {@render children()}
+          {#if helper}
+            <span class={cls.helper()}>{helper}</span>
+          {/if}
+        </div>
+        <Icon name="chevron_right" class={cls.rightSlot()} />
+        <Layer />
+      </div>
+    {/snippet}
+  </DropdownMenu.SubTrigger>
+
+  <DropdownMenu.Portal>
+    <DropdownMenu.SubContent forceMount sideOffset={4} class="z-100">
+      {#snippet child({ wrapperProps, props, open: isOpen })}
+        {#if isOpen}
+          <div {...wrapperProps} class={wrapperProps.class as any}>
+            <div
+              {...props}
+              class={clsx(cls.content(), props.class as any, submenuClass)}
+              transition:enterExit={{
+                duration: 200,
+                easing: easeEmphasizedDecel,
+                mode: 'scale'
+              }}
+            >
+              {@render submenu()}
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </DropdownMenu.SubContent>
+  </DropdownMenu.Portal>
+</DropdownMenu.Sub>

package/dist/components/containers/menu/MenuSub.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { MenuSubProps } from './types.js';
+/**
+ * A `MenuItem`-like row that opens a nested submenu panel on hover or press,
+ * instead of firing a selection itself.
+ *
+ * Wraps bits-ui's `DropdownMenu.Sub` + `SubTrigger` + `SubContent`. The
+ * trigger row (`iconProps`/`helper`/`children` label) behaves like a
+ * `MenuItem`; pass the nested rows — `MenuItem`, `MenuCheckboxItem`,
+ * `MenuRadioItem`, `MenuGroup`, more `MenuSub`, etc. — as `submenu`.
+ *
+ * @example
+ * ```svelte
+ * <Menu label="File">
+ * <MenuItem iconProps={{ name: 'draft' }}>New</MenuItem>
+ * <MenuSub iconProps={{ name: 'ios_share' }}>
+ *   Share
+ *   {#snippet submenu()}
+ *     <MenuItem>Email</MenuItem>
+ *     <MenuItem>Link</MenuItem>
+ *   {/snippet}
+ * </MenuSub>
+ * </Menu>
+ * ```
+ *
+ * @see https://m3.material.io/components/menus/guidelines
+ */
+declare const MenuSub: import("svelte").Component<MenuSubProps, {}, "open">;
+type MenuSub = ReturnType<typeof MenuSub>;
+export default MenuSub;

package/dist/components/containers/menu/index.d.ts

@@ -1,2 +1,9 @@
+export * from './menu-item/index.js';
+export * from './theme.js';
 export * from './types.js';
 export { default as Menu } from './Menu.svelte';
+export { default as MenuCheckboxItem } from './MenuCheckboxItem.svelte';
+export { default as MenuGroup } from './MenuGroup.svelte';
+export { default as MenuRadioGroup } from './MenuRadioGroup.svelte';
+export { default as MenuRadioItem } from './MenuRadioItem.svelte';
+export { default as MenuSub } from './MenuSub.svelte';

package/dist/components/containers/menu/index.js

@@ -1,5 +1,13 @@
 // THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// folder re-exports (export everything from these folders)
+export * from './menu-item/index.js';
 // re-export TS/JS modules from this folder
+export * from './theme.js';
 export * from './types.js';
 // default exports for components in this folder
 export { default as Menu } from './Menu.svelte';
+export { default as MenuCheckboxItem } from './MenuCheckboxItem.svelte';
+export { default as MenuGroup } from './MenuGroup.svelte';
+export { default as MenuRadioGroup } from './MenuRadioGroup.svelte';
+export { default as MenuRadioItem } from './MenuRadioItem.svelte';
+export { default as MenuSub } from './MenuSub.svelte';

package/dist/components/containers/menu/menu-item/MenuItem.svelte

@@ -0,0 +1,71 @@
+<!--
+@component
+A single interactive row inside a `Menu`.
+
+`MenuItem` is the leaf node of the menu system. It wraps bits-ui's
+`DropdownMenu.Item` so each row automatically gets keyboard navigation,
+focus management, and the ARIA `menuitem` role.
+
+Pass `onclick` (or `onSelect`) for the action; use `iconProps` for a
+leading icon and `helper` for a supporting line below the label.
+
+Contrast with `Menu`, which is just the shell (open state + floating panel),
+and `ContextMenu`, which owns its own item list and is right-click triggered.
+
+@see https://m3.material.io/components/menus/guidelines
+-->
+<script lang="ts">
+  import type { MenuItemProps } from './types.js';
+  import type { DropdownMenuItemProps } from 'bits-ui';
+  import Icon from '../../../../utils/icon/Icon.svelte';
+  import Layer from '../../../../utils/Layer.svelte';
+  import { DropdownMenu } from 'bits-ui';
+  import { menu as menuCls } from '../theme.js';
+
+  let {
+    iconProps,
+    disabled = false,
+    onclick,
+    onSelect,
+    isGap,
+    selected,
+    helper,
+    children,
+    class: className,
+    ...restProps
+  }: MenuItemProps & DropdownMenuItemProps = $props();
+
+  // bits-ui fires onSelect at the Item level; avoid wiring onclick to the
+  // native button as well or it would fire twice on every click.
+  const handleSelect = $derived(onSelect ?? (onclick ? () => onclick() : undefined));
+
+  const cls = $derived(menuCls({ selected }));
+</script>
+
+{#if !isGap}
+  <DropdownMenu.Item
+    {...restProps}
+    {disabled}
+    onSelect={handleSelect}
+    class={cls.item({ class: className as string })}
+  >
+    {#if iconProps}
+      <Icon class={cls.icon()} {...iconProps} />
+    {/if}
+
+    <div class={cls.itemContent()}>
+      {@render children()}
+      {#if helper}
+        <span class={cls.helper()}>
+          {helper}
+        </span>
+      {/if}
+    </div>
+    <Layer />
+  </DropdownMenu.Item>
+{:else}
+  <!-- Render as a gap -->
+  <DropdownMenu.Item>
+    <hr class="h-1" />
+  </DropdownMenu.Item>
+{/if}

package/dist/components/containers/{menu-item → menu/menu-item}/MenuItem.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { MenuItemProps } from './types.js';
-type $$ComponentProps = MenuItemProps & Record<string, any>;
+import type { DropdownMenuItemProps } from 'bits-ui';
+type $$ComponentProps = MenuItemProps & DropdownMenuItemProps;
 /**
  * A single interactive row inside a `Menu`.
  *

package/dist/components/containers/{menu-item → menu/menu-item}/types.d.ts

@@ -1,4 +1,4 @@
-import type { IconProps } from '../../../utils/icon/types.js';
+import type { IconProps } from '../../../../utils/icon/types.js';
 import type { Snippet } from 'svelte';
 /**
  * Props for the MenuItem component.
@@ -33,4 +33,8 @@ export interface MenuItemProps {
      * The content of the menu item, typically a label.
      */
     children: Snippet;
+    /**
+     * Whether this item is in fact a gap
+     */
+    isGap?: boolean;
 }

package/dist/components/containers/menu/menu-item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/containers/menu/theme.d.ts

@@ -0,0 +1,68 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * Shared styling for every row-shaped element inside a `Menu`'s floating
+ * panel: `MenuItem`, `MenuCheckboxItem`, `MenuRadioItem`, and `MenuSub`'s
+ * trigger row all pull from this one `tv()` so they stay visually identical.
+ */
+export type MenuVariants = VariantProps<typeof menu>;
+export declare const menu: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+    checked: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    icon: string;
+    indicator: string;
+    itemContent: string;
+    helper: string;
+    rightSlot: string;
+    groupHeading: string;
+}, undefined, {
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+    checked: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    icon: string;
+    indicator: string;
+    itemContent: string;
+    helper: string;
+    rightSlot: string;
+    groupHeading: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+    checked: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    icon: string;
+    indicator: string;
+    itemContent: string;
+    helper: string;
+    rightSlot: string;
+    groupHeading: string;
+}>>;

package/dist/components/containers/menu/theme.js

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+export const menu = tv({
+    slots: {
+        content: `
+      bg-md-sys-color-surface-container-high shadow-elevation-3
+      ring-md-sys-color-outline/10 max-w-sm min-w-48 gap-1
+      overflow-y-auto rounded-lg px-2 py-1
+    `,
+        item: `
+      rounded-sm h-11 relative flex w-full cursor-pointer items-center gap-2 px-3 py-2
+      md-sys-typescale-body-medium whitespace-nowrap text-md-sys-color-on-surface
+      hover:bg-md-sys-color-on-surface/8 data-[highlighted]:bg-md-sys-color-on-surface/8
+      focus-visible:outline-2 focus-visible:outline-offset-2
+      focus-visible:outline-md-sys-color-primary
+      data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
+    `,
+        icon: 'text-md-sys-color-on-surface-variant size-5 text-[20px] shrink-0',
+        indicator: 'size-5 text-[20px] shrink-0 text-md-sys-color-on-surface-variant',
+        itemContent: 'flex flex-1 flex-col gap-1 text-left min-w-0',
+        helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
+        rightSlot: 'text-md-sys-color-on-surface-variant size-5 text-[20px] shrink-0',
+        groupHeading: 'px-3 pt-2 pb-1 md-sys-typescale-label-medium text-md-sys-color-primary'
+    },
+    variants: {
+        selected: {
+            true: {
+                item: 'bg-md-sys-color-secondary-container rounded-lg text-md-sys-color-on-secondary-container'
+            }
+        },
+        checked: {
+            true: {
+                indicator: 'text-md-sys-color-primary'
+            }
+        }
+    }
+});

package/dist/components/containers/menu/types.d.ts

@@ -1,3 +1,4 @@
+import type { IconProps } from '../../../utils/icon/types.js';
 import type { Snippet } from 'svelte';
 /**
  * Props for the Menu component.
@@ -18,9 +19,11 @@ export type MenuProps = {
     children: Snippet;
     /**
      * Custom trigger element. When omitted, a default filled `Button` labelled
-     * by `label` is used.
+     * by `label` is used. Receives the trigger's props — spread them onto the
+     * rendered element/component so bits-ui doesn't wrap it in its own
+     * `<button>` (which would nest buttons).
      */
-    trigger?: Snippet;
+    trigger?: Snippet<[Record<string, unknown>]>;
     /**
      * Label for the default button trigger. Ignored when `trigger` is provided.
      * @default 'Open menu'
@@ -38,3 +41,111 @@ export type MenuProps = {
     /** Additional CSS classes applied to the floating content panel. */
     class?: string;
 };
+/**
+ * Props for `MenuGroup`, which wraps related `MenuItem`s (or
+ * `MenuCheckboxItem`/`MenuRadioItem`s) under an optional heading so screen
+ * readers announce them as a labelled set.
+ */
+export type MenuGroupProps = {
+    /** Optional label rendered above the group's items. */
+    heading?: string;
+    /** Items inside the group. */
+    children: Snippet;
+    /** Additional CSS classes applied to the group container. */
+    class?: string;
+};
+/**
+ * Props for `MenuRadioGroup`, which restricts its `MenuRadioItem` children
+ * to a single selected value at a time.
+ */
+export type MenuRadioGroupProps = {
+    /**
+     * The value of the currently selected radio item.
+     * Supports two-way binding with `bind:value`.
+     */
+    value?: string;
+    /** Called when the selected value changes. */
+    onValueChange?: (value: string) => void;
+    /** `MenuRadioItem`s inside the group. */
+    children: Snippet;
+    /** Additional CSS classes applied to the group container. */
+    class?: string;
+};
+/**
+ * Props for a single option inside a `MenuRadioGroup`.
+ */
+export type MenuRadioItemProps = {
+    /** The value this item represents within its `MenuRadioGroup`. */
+    value: string;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Optional supporting text shown below the label. */
+    helper?: string;
+    /** The item's label. */
+    children: Snippet;
+    /**
+     * Whether the menu closes when this item is selected.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /** Additional CSS classes applied to the item row. */
+    class?: string;
+};
+/**
+ * Props for a toggleable option inside a `Menu`, independent of any other
+ * item (unlike `MenuRadioItem`, any number of `MenuCheckboxItem`s can be
+ * checked at once).
+ */
+export type MenuCheckboxItemProps = {
+    /**
+     * The checked state. Supports two-way binding with `bind:checked`.
+     * @default false
+     */
+    checked?: boolean;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Optional supporting text shown below the label. */
+    helper?: string;
+    /** The item's label. */
+    children: Snippet;
+    /**
+     * Whether the menu closes when this item is selected.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /** Additional CSS classes applied to the item row. */
+    class?: string;
+};
+/**
+ * Props for `MenuSub`, a `MenuItem`-like row that opens a nested submenu
+ * panel on hover/click instead of firing a selection.
+ */
+export type MenuSubProps = {
+    /** Props for the trigger row's leading icon. */
+    iconProps?: IconProps;
+    /**
+     * Whether the submenu trigger is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Optional supporting text shown below the trigger's label. */
+    helper?: string;
+    /** The trigger row's label. */
+    children: Snippet;
+    /** Items rendered inside the nested submenu panel. */
+    submenu: Snippet;
+    /** Controlled open state for the submenu. */
+    open?: boolean;
+    /** Additional CSS classes applied to the trigger row. */
+    class?: string;
+    /** Additional CSS classes applied to the submenu's floating panel. */
+    submenuClass?: string;
+};