@noxlovette/material 0.3.3 → 0.4.0

package/dist/components/containers/link-preview/theme.d.ts

@@ -2,16 +2,16 @@ import { type VariantProps } from 'tailwind-variants';
 export type LinkPreviewVariants = VariantProps<typeof linkPreview>;
 export declare const linkPreview: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -19,15 +19,15 @@ export declare const linkPreview: import("tailwind-variants").TVReturnType<{
     content: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     base: string;
     content: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
     content: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -1,8 +1,8 @@
 export declare const listiem: import("tailwind-variants").TVReturnType<{
     lines: {
-        1: string;
-        2: string;
-        3: string;
+        1: "h-14";
+        2: "h-18";
+        3: "h-22";
     };
     selected: {
         true: {
@@ -10,7 +10,7 @@ export declare const listiem: import("tailwind-variants").TVReturnType<{
             headline: string;
             trailing: string;
         };
-        false: string;
+        false: "";
     };
 }, {
     base: string;
@@ -22,9 +22,9 @@ export declare const listiem: import("tailwind-variants").TVReturnType<{
     trailing: string;
 }, undefined, {
     lines: {
-        1: string;
-        2: string;
-        3: string;
+        1: "h-14";
+        2: "h-18";
+        3: "h-22";
     };
     selected: {
         true: {
@@ -32,7 +32,7 @@ export declare const listiem: import("tailwind-variants").TVReturnType<{
             headline: string;
             trailing: string;
         };
-        false: string;
+        false: "";
     };
 }, {
     base: string;
@@ -42,11 +42,11 @@ export declare const listiem: import("tailwind-variants").TVReturnType<{
     headline: string;
     supporting: string;
     trailing: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     lines: {
-        1: string;
-        2: string;
-        3: string;
+        1: "h-14";
+        2: "h-18";
+        3: "h-22";
     };
     selected: {
         true: {
@@ -54,7 +54,7 @@ export declare const listiem: import("tailwind-variants").TVReturnType<{
             headline: string;
             trailing: string;
         };
-        false: string;
+        false: "";
     };
 }, {
     base: string;
@@ -64,4 +64,4 @@ export declare const listiem: import("tailwind-variants").TVReturnType<{
     headline: string;
     supporting: string;
     trailing: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -7,7 +7,7 @@ export const listiem = tv({
         overline: 'md-sys-typescale-label-small line-clamp-1',
         headline: 'text-md-sys-color-on-surface md-sys-typescale-body-large line-clamp-1',
         supporting: 'md-sys-typescale-body-medium line-clamp-2',
-        trailing: 'size-6 text-[24px] inline-flex items-start ml-auto'
+        trailing: 'inline-flex ml-auto'
     },
     variants: {
         lines: {

package/dist/components/containers/menu/Menu.stories.svelte

@@ -7,7 +7,12 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Menu from './Menu.svelte';
-  import MenuItem from '../menu-item/MenuItem.svelte';
+  import MenuItem from './menu-item/MenuItem.svelte';
+  import MenuGroup from './MenuGroup.svelte';
+  import MenuRadioGroup from './MenuRadioGroup.svelte';
+  import MenuRadioItem from './MenuRadioItem.svelte';
+  import MenuCheckboxItem from './MenuCheckboxItem.svelte';
+  import MenuSub from './MenuSub.svelte';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
   import { Divider } from '../../../index.js';
 
@@ -25,6 +30,14 @@
   });
 </script>
 
+<script lang="ts">
+  let sortBy = $state('name');
+  let showHidden = $state(true);
+  let showExtensions = $state(false);
+  let kitchenSinkSort = $state('date');
+  let kitchenSinkWordWrap = $state(true);
+</script>
+
 <Story name="Playground">
   {#snippet template(args)}
     <div class="p-6">
@@ -40,8 +53,8 @@
 <Story name="With Custom Trigger" asChild>
   <div class="p-6">
     <Menu align="end">
-      {#snippet trigger()}
-        <ButtonIcon iconProps={{ name: 'more_vert' }} variant="text" />
+      {#snippet trigger(triggerProps)}
+        <ButtonIcon iconProps={{ name: 'more_vert' }} variant="text" {...triggerProps} />
       {/snippet}
       <MenuItem iconProps={{ name: 'edit' }}>Edit</MenuItem>
       <MenuItem iconProps={{ name: 'archive' }} helper="Move to archive folder">Archive</MenuItem>
@@ -60,3 +73,92 @@
     </Menu>
   </div>
 </Story>
+
+<Story name="With Groups" asChild>
+  <div class="p-6">
+    <Menu label="Sort by">
+      <MenuGroup heading="Name">
+        <MenuItem>A to Z</MenuItem>
+        <MenuItem>Z to A</MenuItem>
+      </MenuGroup>
+      <Divider class="my-1" />
+      <MenuGroup heading="Date">
+        <MenuItem>Newest first</MenuItem>
+        <MenuItem>Oldest first</MenuItem>
+      </MenuGroup>
+    </Menu>
+  </div>
+</Story>
+
+<Story name="With Checkboxes" asChild>
+  <div class="p-6">
+    <Menu label="View">
+      <MenuCheckboxItem bind:checked={showHidden}>Show hidden files</MenuCheckboxItem>
+      <MenuCheckboxItem bind:checked={showExtensions}>Show file extensions</MenuCheckboxItem>
+      <MenuCheckboxItem disabled>Show system files</MenuCheckboxItem>
+    </Menu>
+  </div>
+</Story>
+
+<Story name="With Radio Group" asChild>
+  <div class="p-6">
+    <Menu label="Sort by">
+      <MenuRadioGroup bind:value={sortBy}>
+        <MenuRadioItem value="name">Name</MenuRadioItem>
+        <MenuRadioItem value="date">Date modified</MenuRadioItem>
+        <MenuRadioItem value="size">Size</MenuRadioItem>
+      </MenuRadioGroup>
+    </Menu>
+  </div>
+</Story>
+
+<Story name="With Submenu" asChild>
+  <div class="p-6">
+    <Menu label="File">
+      <MenuItem iconProps={{ name: 'draft' }}>New</MenuItem>
+      <MenuItem iconProps={{ name: 'folder' }}>Open</MenuItem>
+      <MenuSub iconProps={{ name: 'ios_share' }}>
+        Share
+        {#snippet submenu()}
+          <MenuItem iconProps={{ name: 'mail' }}>Email</MenuItem>
+          <MenuItem iconProps={{ name: 'link' }}>Copy link</MenuItem>
+          <MenuSub iconProps={{ name: 'chat' }}>
+            Message
+            {#snippet submenu()}
+              <MenuItem>SMS</MenuItem>
+              <MenuItem>Direct message</MenuItem>
+            {/snippet}
+          </MenuSub>
+        {/snippet}
+      </MenuSub>
+      <Divider class="my-1" />
+      <MenuItem iconProps={{ name: 'delete' }}>Delete</MenuItem>
+    </Menu>
+  </div>
+</Story>
+
+<Story name="Kitchen Sink" asChild>
+  <div class="p-6">
+    <Menu label="Document">
+      <MenuGroup heading="Sort by">
+        <MenuRadioGroup bind:value={kitchenSinkSort}>
+          <MenuRadioItem value="name">Name</MenuRadioItem>
+          <MenuRadioItem value="date">Date modified</MenuRadioItem>
+        </MenuRadioGroup>
+      </MenuGroup>
+      <Divider class="my-1" />
+      <MenuGroup heading="View">
+        <MenuCheckboxItem bind:checked={kitchenSinkWordWrap}>Word wrap</MenuCheckboxItem>
+      </MenuGroup>
+      <Divider class="my-1" />
+      <MenuSub iconProps={{ name: 'ios_share' }}>
+        Share
+        {#snippet submenu()}
+          <MenuItem iconProps={{ name: 'mail' }}>Email</MenuItem>
+          <MenuItem iconProps={{ name: 'link' }}>Copy link</MenuItem>
+        {/snippet}
+      </MenuSub>
+      <MenuItem iconProps={{ name: 'delete' }} disabled>Delete</MenuItem>
+    </Menu>
+  </div>
+</Story>

package/dist/components/containers/menu/Menu.stories.svelte.d.ts

@@ -1,19 +1,4 @@
 import Menu from './Menu.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Menu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Menu = InstanceType<typeof Menu>;
+declare const Menu: import("svelte").Component<Record<string, never>, {}, "">;
+type Menu = ReturnType<typeof Menu>;
 export default Menu;

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

@@ -35,22 +35,24 @@ Contrast with `MenuItem` (a single interactive row inside the panel) and
 
 <DropdownMenu.Root bind:open>
   <DropdownMenu.Trigger>
-    {#if trigger}
-      {@render trigger()}
-    {:else}
-      <Button variant="filled" type="button">{label}</Button>
-    {/if}
+    {#snippet child({ props })}
+      {#if trigger}
+        {@render trigger(props)}
+      {:else}
+        <Button variant="filled" {...props}>{label}</Button>
+      {/if}
+    {/snippet}
   </DropdownMenu.Trigger>
 
   <DropdownMenu.Portal>
-    <DropdownMenu.Content forceMount {align} sideOffset={4} class="z-[100]">
+    <DropdownMenu.Content forceMount {align} sideOffset={4} class="z-100">
       {#snippet child({ wrapperProps, props, open: isOpen })}
         {#if isOpen}
           <div {...wrapperProps} class={wrapperProps.class as any}>
             <div
               {...props}
               class={clsx(
-                'bg-md-sys-color-surface-container-high shadow-elevation-3 ring-md-sys-color-outline/10 max-w-sm min-w-48 overflow-hidden rounded-xl py-2 ring-1',
+                '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',
                 props.class as any,
                 contentClass
               )}

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

@@ -0,0 +1,55 @@
+<!--
+@component
+A toggleable option inside a `Menu`.
+
+Wraps bits-ui's `DropdownMenu.CheckboxItem`. Unlike `MenuRadioItem`, its
+checked state is independent of any sibling item, so any number of
+`MenuCheckboxItem`s can be checked at once. Renders a leading checkbox
+indicator that fills in when checked.
+
+@example
+```svelte
+<script>
+  let showHidden = $state(false);
+</script>
+
+<Menu label="View">
+  <MenuCheckboxItem bind:checked={showHidden}>Show hidden files</MenuCheckboxItem>
+</Menu>
+```
+
+@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 { MenuCheckboxItemProps } from './types.js';
+
+  let {
+    checked = $bindable(false),
+    onCheckedChange,
+    disabled = false,
+    closeOnSelect = true,
+    helper,
+    children,
+    class: className
+  }: MenuCheckboxItemProps = $props();
+</script>
+
+<DropdownMenu.CheckboxItem bind:checked {onCheckedChange} {disabled} {closeOnSelect}>
+  {#snippet child({ props, checked })}
+    {@const cls = menuCls({ checked })}
+    <div {...props} class={cls.item({ class: className })}>
+      <Icon name={checked ? 'check_box' : 'check_box_outline_blank'} class={cls.indicator()} />
+      <div class={cls.itemContent()}>
+        {@render children()}
+        {#if helper}
+          <span class={cls.helper()}>{helper}</span>
+        {/if}
+      </div>
+      <Layer />
+    </div>
+  {/snippet}
+</DropdownMenu.CheckboxItem>

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

@@ -0,0 +1,25 @@
+import type { MenuCheckboxItemProps } from './types.js';
+/**
+ * A toggleable option inside a `Menu`.
+ *
+ * Wraps bits-ui's `DropdownMenu.CheckboxItem`. Unlike `MenuRadioItem`, its
+ * checked state is independent of any sibling item, so any number of
+ * `MenuCheckboxItem`s can be checked at once. Renders a leading checkbox
+ * indicator that fills in when checked.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ * let showHidden = $state(false);
+ * </script>
+ *
+ * <Menu label="View">
+ * <MenuCheckboxItem bind:checked={showHidden}>Show hidden files</MenuCheckboxItem>
+ * </Menu>
+ * ```
+ *
+ * @see https://m3.material.io/components/menus/guidelines
+ */
+declare const MenuCheckboxItem: import("svelte").Component<MenuCheckboxItemProps, {}, "checked">;
+type MenuCheckboxItem = ReturnType<typeof MenuCheckboxItem>;
+export default MenuCheckboxItem;

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

@@ -0,0 +1,43 @@
+<!--
+@component
+Groups related rows inside a `Menu` under an optional heading.
+
+Wraps bits-ui's `DropdownMenu.Group` (and `DropdownMenu.GroupHeading` when
+`heading` is supplied) so screen readers announce the rows as a labelled
+set. Purely organizational — it renders no interactive behavior of its own.
+
+@example
+```svelte
+<Menu label="Sort by">
+  <MenuGroup heading="Name">
+    <MenuItem>A to Z</MenuItem>
+    <MenuItem>Z to A</MenuItem>
+  </MenuGroup>
+  <Divider class="my-1" />
+  <MenuGroup heading="Date">
+    <MenuItem>Newest first</MenuItem>
+    <MenuItem>Oldest first</MenuItem>
+  </MenuGroup>
+</Menu>
+```
+
+@see https://m3.material.io/components/menus/guidelines
+-->
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import { menu as menuCls } from './theme.js';
+  import type { MenuGroupProps } from './types.js';
+
+  let { heading, children, class: className }: MenuGroupProps = $props();
+
+  const cls = $derived(menuCls());
+</script>
+
+<DropdownMenu.Group class={className}>
+  {#if heading}
+    <DropdownMenu.GroupHeading class={cls.groupHeading()}>
+      {heading}
+    </DropdownMenu.GroupHeading>
+  {/if}
+  {@render children()}
+</DropdownMenu.Group>

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

@@ -0,0 +1,28 @@
+import type { MenuGroupProps } from './types.js';
+/**
+ * Groups related rows inside a `Menu` under an optional heading.
+ *
+ * Wraps bits-ui's `DropdownMenu.Group` (and `DropdownMenu.GroupHeading` when
+ * `heading` is supplied) so screen readers announce the rows as a labelled
+ * set. Purely organizational — it renders no interactive behavior of its own.
+ *
+ * @example
+ * ```svelte
+ * <Menu label="Sort by">
+ * <MenuGroup heading="Name">
+ *   <MenuItem>A to Z</MenuItem>
+ *   <MenuItem>Z to A</MenuItem>
+ * </MenuGroup>
+ * <Divider class="my-1" />
+ * <MenuGroup heading="Date">
+ *   <MenuItem>Newest first</MenuItem>
+ *   <MenuItem>Oldest first</MenuItem>
+ * </MenuGroup>
+ * </Menu>
+ * ```
+ *
+ * @see https://m3.material.io/components/menus/guidelines
+ */
+declare const MenuGroup: import("svelte").Component<MenuGroupProps, {}, "">;
+type MenuGroup = ReturnType<typeof MenuGroup>;
+export default MenuGroup;

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

@@ -0,0 +1,39 @@
+<!--
+@component
+Restricts a set of `MenuRadioItem`s to a single selected value at a time.
+
+Wraps bits-ui's `DropdownMenu.RadioGroup`. Bind `value` to drive the
+selection externally, or leave it uncontrolled and read `onValueChange`.
+
+@example
+```svelte
+<script>
+  let sortBy = $state('name');
+</script>
+
+<Menu label="Sort by">
+  <MenuRadioGroup bind:value={sortBy}>
+    <MenuRadioItem value="name">Name</MenuRadioItem>
+    <MenuRadioItem value="date">Date modified</MenuRadioItem>
+    <MenuRadioItem value="size">Size</MenuRadioItem>
+  </MenuRadioGroup>
+</Menu>
+```
+
+@see https://m3.material.io/components/menus/guidelines
+-->
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import type { MenuRadioGroupProps } from './types.js';
+
+  let {
+    value = $bindable(''),
+    onValueChange,
+    children,
+    class: className
+  }: MenuRadioGroupProps = $props();
+</script>
+
+<DropdownMenu.RadioGroup bind:value {onValueChange} class={className}>
+  {@render children()}
+</DropdownMenu.RadioGroup>

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

@@ -0,0 +1,27 @@
+import type { MenuRadioGroupProps } from './types.js';
+/**
+ * Restricts a set of `MenuRadioItem`s to a single selected value at a time.
+ *
+ * Wraps bits-ui's `DropdownMenu.RadioGroup`. Bind `value` to drive the
+ * selection externally, or leave it uncontrolled and read `onValueChange`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ * let sortBy = $state('name');
+ * </script>
+ *
+ * <Menu label="Sort by">
+ * <MenuRadioGroup bind:value={sortBy}>
+ *   <MenuRadioItem value="name">Name</MenuRadioItem>
+ *   <MenuRadioItem value="date">Date modified</MenuRadioItem>
+ *   <MenuRadioItem value="size">Size</MenuRadioItem>
+ * </MenuRadioGroup>
+ * </Menu>
+ * ```
+ *
+ * @see https://m3.material.io/components/menus/guidelines
+ */
+declare const MenuRadioGroup: import("svelte").Component<MenuRadioGroupProps, {}, "value">;
+type MenuRadioGroup = ReturnType<typeof MenuRadioGroup>;
+export default MenuRadioGroup;

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;