@noxlovette/material 0.1.0

package/dist/components/containers/link-preview/LinkPreview.svelte

@@ -0,0 +1,64 @@
+<!--
+@component
+Link Previews display a preview of a link's content when hovered.
+
+@see https://bits-ui.com/docs/components/link-preview
+-->
+<script lang="ts">
+  import { LinkPreview } from 'bits-ui';
+  import clsx from 'clsx';
+  import { linkPreview } from './theme.js';
+  import type { LinkPreviewProps } from './types.js';
+  import { enterExit, easeEmphasizedDecel, easeEmphasizedAccel } from '../../../animation/index.js';
+  import { Layer } from '../../../utils/index.js';
+
+  let {
+    trigger,
+    children,
+    open = $bindable(false),
+    side = 'bottom',
+    align = 'center',
+    sideOffset = 8,
+    openDelay = 700,
+    closeDelay = 300,
+    class: className
+  }: LinkPreviewProps = $props();
+
+  const { base, content } = linkPreview();
+</script>
+
+<LinkPreview.Root bind:open {openDelay} {closeDelay}>
+  <LinkPreview.Trigger>
+    {@render trigger()}
+  </LinkPreview.Trigger>
+
+  <LinkPreview.Portal>
+    <LinkPreview.Content forceMount {side} {align} {sideOffset}>
+      {#snippet child({ wrapperProps, props, open: isOpen })}
+        {#if isOpen}
+          <div {...wrapperProps}>
+            <div
+              {...props}
+              class={base({ class: clsx(className) })}
+              in:enterExit={{
+                duration: 200,
+                easing: easeEmphasizedDecel,
+                mode: 'scale'
+              }}
+              out:enterExit={{
+                duration: 150,
+                easing: easeEmphasizedAccel,
+                mode: 'scale'
+              }}
+            >
+              <Layer />
+              <div class={content()}>
+                {@render children()}
+              </div>
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </LinkPreview.Content>
+  </LinkPreview.Portal>
+</LinkPreview.Root>

package/dist/components/containers/link-preview/LinkPreview.svelte.d.ts

@@ -0,0 +1,10 @@
+import { LinkPreview } from 'bits-ui';
+import type { LinkPreviewProps } from './types.js';
+/**
+ * Link Previews display a preview of a link's content when hovered.
+ *
+ * @see https://bits-ui.com/docs/components/link-preview
+ */
+declare const LinkPreview: import("svelte").Component<LinkPreviewProps, {}, "open">;
+type LinkPreview = ReturnType<typeof LinkPreview>;
+export default LinkPreview;

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

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as LinkPreview } from './LinkPreview.svelte';

package/dist/components/containers/link-preview/index.js

@@ -0,0 +1,6 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// 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 LinkPreview } from './LinkPreview.svelte';

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

@@ -0,0 +1,33 @@
+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;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    content: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/containers/link-preview/theme.js

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+export const linkPreview = tv({
+    slots: {
+        base: 'relative z-[100] min-w-48 max-w-sm rounded-2xl bg-md-sys-color-surface-container-high p-4 shadow-elevation-3 ring-1 ring-md-sys-color-outline/20 overflow-hidden',
+        content: 'flex flex-col gap-2'
+    }
+});

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

@@ -0,0 +1,22 @@
+import type { LinkPreview } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { LinkPreviewVariants } from './theme.js';
+export interface LinkPreviewProps extends LinkPreviewVariants {
+    /** Snippet rendered as the trigger element (typically an anchor tag or a link). */
+    trigger: Snippet;
+    /** The preview content. */
+    children: Snippet;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Positioning side relative to the trigger. */
+    side?: LinkPreview.ContentProps['side'];
+    /** Alignment along the side axis. */
+    align?: LinkPreview.ContentProps['align'];
+    /** Gap between trigger and panel in px. */
+    sideOffset?: number;
+    /** Delay in ms before the preview opens. */
+    openDelay?: number;
+    /** Delay in ms before the preview closes. */
+    closeDelay?: number;
+    class?: string;
+}

package/dist/components/containers/link-preview/types.js

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

package/dist/components/containers/list/ListItem.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { Layer } from '../../../utils/index.js';
+  import { listiem } from './theme.js';
+  import type { ListitemProps } from './types.js';
+
+  let {
+    leading,
+    overline = '',
+    headline = '',
+    supporting = '',
+    trailing,
+    selected,
+    class: className,
+    asChild = false,
+    lines = overline && supporting ? 3 : overline || supporting ? 2 : 1,
+    ...restProps
+  }: ListitemProps = $props();
+
+  const cls = $derived(listiem({ lines, selected }));
+</script>
+
+{#snippet content()}
+  {#if leading}
+    <div class={cls.leading()}>
+      {@render leading()}
+    </div>
+  {/if}
+  <div class={cls.body()}>
+    {#if overline}
+      <p class={cls.overline()}>{overline}</p>
+    {/if}
+    <p class={cls.headline()}>{headline}</p>
+    {#if supporting}
+      <p class={cls.supporting()}>{supporting}</p>
+    {/if}
+  </div>
+  {#if trailing}
+    <div class={cls.trailing()}>
+      {@render trailing()}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet action()}
+  {#if 'label' in restProps}
+    {@const { label: _, ...extra } = restProps}
+    <label class={cls.base()} {...extra}>
+      <Layer />
+      {@render content()}
+    </label>
+  {:else if 'onclick' in restProps}
+    <button type="button" class={cls.base()} {...restProps}>
+      <Layer />
+      {@render content()}
+    </button>
+  {:else if 'href' in restProps && restProps.href != null && restProps.href !== ''}
+    {@const { href, ...extra } = restProps as typeof restProps & {
+      href?: string | null;
+    }}
+    <a class={cls.base()} {href} {...extra}>
+      <Layer />
+      {@render content()}
+    </a>
+  {:else}
+    {@const { href: _, ...extra } = restProps as Record<string, unknown>}
+    <div class={cls.base()} {...extra}>
+      <Layer />
+      {@render content()}
+    </div>
+  {/if}
+{/snippet}
+
+{#if asChild}
+  {@render action()}
+{:else}
+  <li>
+    {@render action()}
+  </li>
+{/if}

package/dist/components/containers/list/ListItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ListitemProps } from './types.js';
+declare const ListItem: import("svelte").Component<ListitemProps, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

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

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as ListItem } from './ListItem.svelte';

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

@@ -0,0 +1,6 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// 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 ListItem } from './ListItem.svelte';

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

@@ -0,0 +1,67 @@
+export declare const listiem: import("tailwind-variants").TVReturnType<{
+    lines: {
+        1: string;
+        2: string;
+        3: string;
+    };
+    selected: {
+        true: {
+            base: string;
+            headline: string;
+            trailing: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    leading: string;
+    body: string;
+    overline: string;
+    headline: string;
+    supporting: string;
+    trailing: string;
+}, undefined, {
+    lines: {
+        1: string;
+        2: string;
+        3: string;
+    };
+    selected: {
+        true: {
+            base: string;
+            headline: string;
+            trailing: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    leading: string;
+    body: string;
+    overline: string;
+    headline: string;
+    supporting: string;
+    trailing: string;
+}, import("tailwind-variants").TVReturnType<{
+    lines: {
+        1: string;
+        2: string;
+        3: string;
+    };
+    selected: {
+        true: {
+            base: string;
+            headline: string;
+            trailing: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    leading: string;
+    body: string;
+    overline: string;
+    headline: string;
+    supporting: string;
+    trailing: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,27 @@
+import { tv } from 'tailwind-variants';
+export const listiem = tv({
+    slots: {
+        base: 'bg-md-sys-color-surface text-sys-color-on-surface-variant state-layer disabled:before:bg-md-sys-color-on-surface/10 md-sys-state-focus-indicator px-4 py-2 gap-4 items-center relative flex rounded-lg before:rounded-lg w-full',
+        leading: 'inline-flex items-start',
+        body: 'min-w-0',
+        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-label-small line-clamp-2',
+        trailing: 'size-6 text-[24px] inline-flex items-start ml-auto'
+    },
+    variants: {
+        lines: {
+            1: 'h-14',
+            2: 'h-18',
+            3: 'h-22'
+        },
+        selected: {
+            true: {
+                base: 'text-md-sys-color-on-secondary-container bg-md-sys-color-secondary-container',
+                headline: 'text-md-sys-color-on-secondary-container',
+                trailing: 'text-md-sys-color-primary'
+            },
+            false: ''
+        }
+    }
+});

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

@@ -0,0 +1,48 @@
+import type { ButtonAttrs, DivAttrs, NotButton } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLLabelAttributes } from 'svelte/elements';
+export type ActionProps = DivAttrs | ButtonAttrs | ({
+    label: true;
+} & NotButton<HTMLLabelAttributes>) | ({
+    href: string | null;
+} & NotButton<HTMLAnchorAttributes>);
+/**
+ * Props for the ListItem component.
+ * Lists are continuous, vertical indexes of text or images.
+ */
+export type ListitemProps = {
+    /**
+     * Optional leading slot, typically used for an icon, avatar, or checkbox.
+     */
+    leading?: Snippet;
+    /**
+     * Whether the list item is in a selected state.
+     */
+    selected?: boolean;
+    /**
+     * Optional overline text displayed above the headline.
+     */
+    overline?: string | null;
+    /**
+     * The primary headline text of the list item.
+     */
+    headline?: string;
+    /**
+     * Supporting text content displayed below the headline.
+     */
+    supporting?: string | null;
+    /**
+     * Optional trailing slot, typically used for an icon, metadata, or switch.
+     */
+    trailing?: Snippet;
+    /**
+     * The number of text lines to reserve space for.
+     * If not provided, it's calculated based on presence of overline and supporting text.
+     */
+    lines?: 1 | 2 | 3;
+    /**
+     * If true, the component will not wrap its content in an `<li>` element.
+     * Useful for when the parent already provides the list item container.
+     */
+    asChild?: boolean;
+} & ActionProps;

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

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

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

@@ -0,0 +1,70 @@
+<!--
+@component
+Shell for an action dropdown menu.
+
+`Menu` owns exactly two things: open/close state and the floating panel's
+position. It renders whatever you pass as `children` — typically `MenuItem`
+components, but also `Divider`, group headings, or any custom element.
+
+Use the `trigger` snippet to supply a fully custom trigger element (e.g. an
+icon button). When omitted, a default filled `Button` labelled by `label`
+is rendered.
+
+Contrast with `MenuItem` (a single interactive row inside the panel) and
+`ContextMenu` (right-click variant that remains data-driven).
+
+@see https://m3.material.io/components/menus/guidelines
+-->
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import clsx from 'clsx';
+  import Button from '../../buttons/Button.svelte';
+  import { enterExit } from '../../../animation/enterExit.js';
+  import { easeEmphasizedDecel } from '../../../animation/easing.js';
+  import type { MenuProps } from './types.js';
+
+  let {
+    children,
+    trigger,
+    label = 'Open menu',
+    align = 'start',
+    open = $bindable(false),
+    class: contentClass
+  }: MenuProps = $props();
+</script>
+
+<DropdownMenu.Root bind:open>
+  <DropdownMenu.Trigger>
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      <Button variant="filled" type="button">{label}</Button>
+    {/if}
+  </DropdownMenu.Trigger>
+
+  <DropdownMenu.Portal>
+    <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',
+                props.class as any,
+                contentClass
+              )}
+              transition:enterExit={{
+                duration: 200,
+                easing: easeEmphasizedDecel,
+                mode: 'scale'
+              }}
+            >
+              {@render children()}
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </DropdownMenu.Content>
+  </DropdownMenu.Portal>
+</DropdownMenu.Root>

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

@@ -0,0 +1,20 @@
+import type { MenuProps } from './types.js';
+/**
+ * Shell for an action dropdown menu.
+ *
+ * `Menu` owns exactly two things: open/close state and the floating panel's
+ * position. It renders whatever you pass as `children` — typically `MenuItem`
+ * components, but also `Divider`, group headings, or any custom element.
+ *
+ * Use the `trigger` snippet to supply a fully custom trigger element (e.g. an
+ * icon button). When omitted, a default filled `Button` labelled by `label`
+ * is rendered.
+ *
+ * Contrast with `MenuItem` (a single interactive row inside the panel) and
+ * `ContextMenu` (right-click variant that remains data-driven).
+ *
+ * @see https://m3.material.io/components/menus/guidelines
+ */
+declare const Menu: import("svelte").Component<MenuProps, {}, "open">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

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

@@ -0,0 +1,2 @@
+export * from './types.js';
+export { default as Menu } from './Menu.svelte';

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

@@ -0,0 +1,5 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
+export * from './types.js';
+// default exports for components in this folder
+export { default as Menu } from './Menu.svelte';

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

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+/**
+ * Props for the Menu component.
+ *
+ * Menu is the **shell** — it wires up open/close state and positions the
+ * floating panel. It has no opinion about what goes inside; compose it with
+ * `MenuItem` (and `Divider`, headings, etc.) as children.
+ *
+ * Contrast with `MenuItem`, which is an individual interactive row, and
+ * `ContextMenu`, which is a right-click variant that stays data-driven
+ * because its items are always contextual and uniform.
+ */
+export type MenuProps = {
+    /**
+     * Content rendered inside the floating panel.
+     * Typically a list of `MenuItem` components, but any element is valid.
+     */
+    children: Snippet;
+    /**
+     * Custom trigger element. When omitted, a default filled `Button` labelled
+     * by `label` is used.
+     */
+    trigger?: Snippet;
+    /**
+     * Label for the default button trigger. Ignored when `trigger` is provided.
+     * @default 'Open menu'
+     */
+    label?: string;
+    /**
+     * Alignment of the floating panel relative to the trigger.
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Controlled open state. Bind to this to drive the menu externally.
+     */
+    open?: boolean;
+    /** Additional CSS classes applied to the floating content panel. */
+    class?: string;
+};

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

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

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

@@ -0,0 +1,75 @@
+<!--
+@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 Icon from '../../../utils/icon/Icon.svelte';
+  import Layer from '../../../utils/Layer.svelte';
+  import { DropdownMenu } from 'bits-ui';
+  import clsx from 'clsx';
+  import { tv } from 'tailwind-variants';
+
+  let {
+    iconProps,
+    disabled = false,
+    onclick,
+    onSelect,
+    selected,
+    helper,
+    children,
+    ...restProps
+  }: MenuItemProps & Record<string, any> = $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 itemClass = $derived(
+    tv({
+      base: 'relative flex w-full cursor-pointer items-start gap-3 border-none bg-transparent px-4 py-3 text-left md-sys-typescale-body-large whitespace-nowrap text-md-sys-color-on-surface hover:bg-md-sys-color-on-surface/8 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-md-sys-color-primary disabled:cursor-not-allowed disabled:opacity-38',
+      variants: {
+        selected: {
+          true: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container'
+        }
+      }
+    })({ selected })
+  );
+</script>
+
+<DropdownMenu.Item {disabled} onSelect={handleSelect}>
+  <button {...restProps} type="button" class={itemClass} {disabled}>
+    {#if iconProps}
+      <Icon class="text-md-sys-color-on-surface-variant size-6 text-[24px]" {...iconProps} />
+    {/if}
+
+    <div class="flex flex-1 flex-col gap-1">
+      <span class="md-sys-typescale-body-large text-md-sys-color-on-surface">
+        {@render children()}
+      </span>
+      {#if helper}
+        <span class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant">
+          {helper}
+        </span>
+      {/if}
+    </div>
+
+    {#if selected}
+      <Icon aria-hidden="true" name="check" />
+    {/if}
+
+    <Layer />
+  </button>
+</DropdownMenu.Item>

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

@@ -0,0 +1,20 @@
+import type { MenuItemProps } from './types.js';
+type $$ComponentProps = MenuItemProps & Record<string, any>;
+/**
+ * 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
+ */
+declare const MenuItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

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

@@ -0,0 +1,2 @@
+export * from './types.js';
+export { default as MenuItem } from './MenuItem.svelte';

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

@@ -0,0 +1,5 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
+export * from './types.js';
+// default exports for components in this folder
+export { default as MenuItem } from './MenuItem.svelte';