@noxlovette/material 0.1.0

package/dist/components/cards/Card.svelte

@@ -0,0 +1,39 @@
+<!--
+@component
+Cards contain content and actions about a single subject.
+
+Material 3 cards come in three types: elevated, filled, and outlined.
+They can be used to display information, provide a way for users to interact with it,
+and serve as an entry point to more detailed information.
+
+@see https://m3.material.io/components/cards/overview
+-->
+<script lang="ts">
+  import type { CardProps } from './types.js';
+  import { card } from './theme.js';
+  import clsx from 'clsx';
+  import { Layer } from '../../utils/index.js';
+
+  let {
+    children,
+    type = 'filled',
+    class: className,
+    href,
+    hoverable = !!href,
+    ...restProps
+  }: CardProps = $props();
+
+  const { base } = $derived(card({ type, hoverable }));
+</script>
+
+{#if href}
+  <a {href} class={base({ class: clsx(className) })} {...restProps}>
+    {#if hoverable}<Layer />{/if}
+    {@render children?.()}
+  </a>
+{:else}
+  <div class={base({ class: clsx(className) })} {...restProps}>
+    {#if hoverable}<Layer />{/if}
+    {@render children?.()}
+  </div>
+{/if}

package/dist/components/cards/Card.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { CardProps } from './types.js';
+/**
+ * Cards contain content and actions about a single subject.
+ *
+ * Material 3 cards come in three types: elevated, filled, and outlined.
+ * They can be used to display information, provide a way for users to interact with it,
+ * and serve as an entry point to more detailed information.
+ *
+ * @see https://m3.material.io/components/cards/overview
+ */
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/cards/index.d.ts

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

package/dist/components/cards/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 Card } from './Card.svelte';

package/dist/components/cards/theme.d.ts

@@ -0,0 +1,37 @@
+export declare const card: import("tailwind-variants").TVReturnType<{
+    type: {
+        elevated: string;
+        filled: string;
+        outlined: string;
+    };
+    hoverable: {
+        true: string;
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    type: {
+        elevated: string;
+        filled: string;
+        outlined: string;
+    };
+    hoverable: {
+        true: string;
+    };
+}, {
+    base: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    type: {
+        elevated: string;
+        filled: string;
+        outlined: string;
+    };
+    hoverable: {
+        true: string;
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/cards/theme.js

@@ -0,0 +1,34 @@
+import { tv } from 'tailwind-variants';
+export const card = tv({
+    slots: {
+        base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-sys-color-surface-variant state-layer before:rounded-lg focus:outline-3 focus:outline-md-sys-color-secondary p-4 [transition:box-shadow_var(--md-sys-motion-duration,200ms)_var(--md-sys-motion-timing-function,cubic-bezier(0.34,0.8,0.34,1))]',
+        icon: 'size-6 text-[24px] text-md-sys-color-primary'
+    },
+    variants: {
+        type: {
+            elevated: 'shadow-elevation-1 bg-md-sys-color-surface-container-low',
+            filled: 'bg-md-sys-color-surface-container-high',
+            outlined: 'bg-md-sys-color-surface outline-1 outline-md-sys-color-outline-variant'
+        },
+        hoverable: {
+            true: ''
+        }
+    },
+    compoundVariants: [
+        {
+            type: 'elevated',
+            hoverable: true,
+            class: 'hover:shadow-elevation-2'
+        },
+        {
+            type: 'filled',
+            hoverable: true,
+            class: 'hover:shadow-elevation-1'
+        },
+        {
+            type: 'outlined',
+            hoverable: true,
+            class: 'hover:shadow-elevation-1'
+        }
+    ]
+});

package/dist/components/cards/types.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+import type { VariantProps } from 'tailwind-variants';
+import type { card } from './theme.js';
+export type CardVariants = VariantProps<typeof card>;
+/**
+ * Props for the Card component.
+ * Supports both div (default) and anchor (when href is provided) elements.
+ */
+export type CardProps = CardVariants & HTMLAttributes<HTMLDivElement> & HTMLAnchorAttributes & {
+    /** The content to be rendered inside the card. */
+    children: Snippet;
+    /**
+     * An optional URL that the card should link to.
+     * If provided, the card will be rendered as an `<a>` element.
+     */
+    href?: string;
+    /**
+     * The visual style of the card.
+     * - 'elevated': Cards with a shadow, used for separating content from the background.
+     * - 'filled': Cards with a solid background color, providing subtle separation.
+     * - 'outlined': Cards with a visual boundary, providing the least amount of separation.
+     * @default 'filled'
+     */
+    type?: CardVariants['type'];
+    /**
+     * Whether the card should show a state layer on hover.
+     * Defaults to true if `href` is provided.
+     */
+    hoverable?: boolean;
+};

package/dist/components/cards/types.js

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

package/dist/components/containers/app/App.svelte

@@ -0,0 +1,32 @@
+<!--
+@component
+The core App wrapper that gives default backgrounds and sets up tooltips and icons.
+It manages the Material 3 Dynamic Theme, dark mode, and icon providers.
+-->
+<script lang="ts">
+  import { MaterialSymbolsProvider, Theme } from '../../../utils/index.js';
+  import { Tooltip } from 'bits-ui';
+  import { app } from './theme';
+  import type { AppProps } from './types';
+  import { ModeWatcher } from 'mode-watcher';
+
+  let {
+    children,
+    class: className,
+    iconProviderProps = {},
+    themeConfig,
+    isDark,
+    ...restProps
+  }: AppProps = $props();
+
+  const baseCls = $derived(app({ class: [className, isDark ? 'dark' : ''] }));
+</script>
+
+<Theme config={themeConfig} {isDark} />
+<MaterialSymbolsProvider {...iconProviderProps} />
+<ModeWatcher />
+<Tooltip.Provider>
+  <div class={baseCls} {...restProps}>
+    {@render children()}
+  </div>
+</Tooltip.Provider>

package/dist/components/containers/app/App.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { AppProps } from './types';
+/**
+ * The core App wrapper that gives default backgrounds and sets up tooltips and icons.
+ * It manages the Material 3 Dynamic Theme, dark mode, and icon providers.
+ */
+declare const App: import("svelte").Component<AppProps, {}, "">;
+type App = ReturnType<typeof App>;
+export default App;

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

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

package/dist/components/containers/app/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 App } from './App.svelte';

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

@@ -0,0 +1,3 @@
+import { type VariantProps } from 'tailwind-variants';
+export type AppVariants = VariantProps<typeof app>;
+export declare const app: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] antialiased", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] antialiased", unknown, unknown, undefined>>;

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

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const app = tv({
+    base: 'bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] antialiased'
+});

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

@@ -0,0 +1,25 @@
+import type { MaterialSymbolsProviderProps } from '../../../utils/index.js';
+import type { ThemeConfig } from '../../../utils/theme.svelte.js';
+import type { DivAttrs } from '../../../utils/types.js';
+import type { Snippet } from 'svelte';
+export type AppProps = DivAttrs & {
+    /** Content for the core app */
+    children: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Props to pass to the material symbols provider */
+    iconProviderProps?: Partial<MaterialSymbolsProviderProps>;
+    /**
+     * Optional CSS generated on the server to prevent FOUC.
+     */
+    ssrThemeCSS?: string;
+    /**
+     * Optional theme configuration passed from the server.
+     * If provided, the App component will generate the theme CSS automatically.
+     */
+    themeConfig?: ThemeConfig;
+    /**
+     * Optional dark mode state passed from the server to prevent flashing.
+     */
+    isDark?: boolean;
+};

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

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

package/dist/components/containers/bottom-sheet/BottomSheet.svelte

@@ -0,0 +1,125 @@
+<!--
+@component
+Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.
+
+They provide access to supplementary content and actions, such as navigation or a menu,
+while keeping the main screen content visible.
+
+@see https://m3.material.io/components/bottom-sheets/overview
+-->
+<script lang="ts">
+  import type { BottomSheetProps } from './types.js';
+  import type { TransitionConfig } from 'svelte/transition';
+  import { easeEmphasizedAccel, easeEmphasizedDecel } from '../../../animation/easing.js';
+  import { outroClass } from '../../../animation/outroClass.js';
+
+  let { children, close }: BottomSheetProps = $props();
+
+  let height = $state(480);
+  let container: HTMLDivElement | undefined = $state();
+  let isDragging = $state(false);
+  let startY = $state(0);
+
+  const open = (node: HTMLDialogElement) => node.showModal();
+
+  const heightAnim = (
+    node: HTMLDialogElement,
+    options: { duration: number; easing: typeof easeEmphasizedDecel }
+  ): TransitionConfig => {
+    if (node.clientHeight < height) height = node.clientHeight;
+    return {
+      duration: options.duration,
+      easing: options.easing,
+      css: (t) => `max-height: ${t * height}px`
+    };
+  };
+
+  const moveWheel = (e: WheelEvent) => {
+    e.preventDefault();
+    height += e.deltaY;
+    if (container && container.clientHeight < height) height = container.clientHeight;
+  };
+
+  const moveMouse = (e: { clientY: number }) => {
+    if (isDragging) {
+      const distance = e.clientY - startY;
+      height -= distance;
+      startY = e.clientY;
+    }
+  };
+
+  $effect(() => {
+    if (height < 48) close('low');
+  });
+</script>
+
+<svelte:window
+  onmousemove={moveMouse}
+  onmouseup={() => (isDragging = false)}
+  ontouchmove={(e) => moveMouse(e.touches[0])}
+  ontouchend={() => (isDragging = false)}
+/>
+
+<dialog
+  class="bg-md-sys-color-surface-container-low text-md-sys-color-on-surface m-0 mt-auto w-full max-w-2xl overflow-hidden rounded-t-[28px] border-none p-0"
+  style:max-height="{height}px"
+  use:open
+  use:outroClass
+  oncancel={(e) => {
+    e.preventDefault();
+    close('esc');
+  }}
+  onmousedown={(e) => {
+    if (e.target != e.currentTarget) return;
+    close('click');
+  }}
+  onwheel={moveWheel}
+  in:heightAnim={{ easing: easeEmphasizedDecel, duration: 400 }}
+  out:heightAnim={{ easing: easeEmphasizedAccel, duration: 300 }}
+>
+  <div class="px-4" bind:this={container}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="flex h-12 w-full cursor-grab items-center justify-center"
+      onmousedown={(e) => {
+        e.preventDefault();
+        isDragging = true;
+        startY = e.clientY;
+      }}
+      ontouchstart={(e) => {
+        isDragging = true;
+        startY = e.touches[0].clientY;
+      }}
+    >
+      <div class="bg-md-sys-color-on-surface-variant/40 h-1 w-8 rounded-full"></div>
+    </div>
+    {@render children()}
+  </div>
+</dialog>
+
+<style>
+  dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+    animation: backdrop 400ms;
+  }
+  dialog:global(.leaving)::backdrop {
+    background-color: transparent;
+    animation: backdropReverse 400ms;
+  }
+  @keyframes backdrop {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+  @keyframes backdropReverse {
+    from {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+</style>

package/dist/components/containers/bottom-sheet/BottomSheet.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { BottomSheetProps } from './types.js';
+/**
+ * Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.
+ *
+ * They provide access to supplementary content and actions, such as navigation or a menu,
+ * while keeping the main screen content visible.
+ *
+ * @see https://m3.material.io/components/bottom-sheets/overview
+ */
+declare const BottomSheet: import("svelte").Component<BottomSheetProps, {}, "">;
+type BottomSheet = ReturnType<typeof BottomSheet>;
+export default BottomSheet;

package/dist/components/containers/bottom-sheet/index.d.ts

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

package/dist/components/containers/bottom-sheet/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 BottomSheet } from './BottomSheet.svelte';

package/dist/components/containers/bottom-sheet/types.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+/**
+ * Props for the BottomSheet component.
+ */
+export interface BottomSheetProps {
+    /**
+     * The content to be rendered inside the bottom sheet.
+     * Typically includes a list of actions or supplementary information.
+     */
+    children: Snippet;
+    /**
+     * Callback function to close the bottom sheet.
+     * @param reason The reason for closing ('esc' key, 'click' outside, or 'low' drag height).
+     */
+    close: (reason: 'esc' | 'click' | 'low') => void;
+}

package/dist/components/containers/bottom-sheet/types.js

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

package/dist/components/containers/context-menu/ContextMenu.svelte

@@ -0,0 +1,152 @@
+<!--
+@component
+Context menus appear on right-click and provide actions related to the clicked element.
+
+@example
+```svelte
+<ContextMenu
+  items={[
+    { label: 'Edit', value: 'edit', iconProps: { name: 'edit' } },
+    { separator: true },
+    { label: 'Delete', value: 'delete', color: 'error' }
+  ]}
+  onselect={(value) => console.log(value)}
+>
+  <div class="p-10 bg-surface">Right click me</div>
+</ContextMenu>
+```
+
+@see https://m3.material.io/components/menus/guidelines
+-->
+<script lang="ts">
+  import { ContextMenu as BitsContextMenu } from 'bits-ui';
+  import { contextMenu } from './theme.js';
+  import type { ContextMenuProps, ContextMenuDataItem } from './types.js';
+  import Icon from '../../../utils/icon/Icon.svelte';
+  import Divider from '../divider/Divider.svelte';
+  import { enterExit } from '../../../animation/enterExit.js';
+  import { easeEmphasizedDecel } from '../../../animation/easing.js';
+  import clsx from 'clsx';
+
+  let {
+    items = [],
+    selected,
+    children,
+    onselect,
+    itemDataCyPrefix = 'context-menu-item',
+    disabled = false
+  }: ContextMenuProps = $props();
+
+  const theme = $derived(contextMenu());
+
+  const toDataCy = (value?: string) => (value ? value.replace(/[^a-zA-Z0-9-_]+/g, '-') : 'item');
+</script>
+
+{#snippet MenuItem(item: ContextMenuDataItem)}
+  {#if item.separator}
+    <Divider class="my-1" />
+  {:else if item.items && item.items.length > 0}
+    <BitsContextMenu.Sub>
+      <BitsContextMenu.SubTrigger
+        class={theme.subTrigger()}
+        disabled={item.disabled}
+        data-cy={`${itemDataCyPrefix}-${toDataCy(item.value)}`}
+      >
+        {#if item.iconProps}
+          <Icon class={theme.icon()} {...item.iconProps} />
+        {/if}
+        <div class={theme.itemContent()}>
+          <span class={theme.label()}>{item.label}</span>
+          {#if item.helper}
+            <span class={theme.helper()}>{item.helper}</span>
+          {/if}
+        </div>
+        <Icon name="chevron_right" class={theme.rightSlot()} />
+      </BitsContextMenu.SubTrigger>
+      <BitsContextMenu.Portal>
+        <BitsContextMenu.SubContent forceMount class={theme.content()}>
+          {#snippet child({ wrapperProps, props, open })}
+            {#if open}
+              <div {...wrapperProps} class={wrapperProps.class as any}>
+                <div
+                  {...props}
+                  class={props.class as any}
+                  transition:enterExit={{
+                    duration: 200,
+                    easing: easeEmphasizedDecel,
+                    mode: 'scale'
+                  }}
+                >
+                  {#each item.items as subItem}
+                    {@render MenuItem(subItem)}
+                  {/each}
+                </div>
+              </div>
+            {/if}
+          {/snippet}
+        </BitsContextMenu.SubContent>
+      </BitsContextMenu.Portal>
+    </BitsContextMenu.Sub>
+  {:else}
+    {@const isSelected = item.selected || (selected !== undefined && item.value === selected)}
+    <BitsContextMenu.Item
+      class={theme.item({ selected: isSelected })}
+      disabled={item.disabled}
+      onSelect={() => {
+        if (item.value !== undefined) {
+          item.onselect?.(item.value);
+          onselect?.(item.value);
+        }
+      }}
+      data-cy={`${itemDataCyPrefix}-${toDataCy(item.value)}`}
+    >
+      {#if item.iconProps}
+        <Icon class={theme.icon()} {...item.iconProps} />
+      {/if}
+      <div class={theme.itemContent()}>
+        <span class={theme.label()}>{item.label}</span>
+        {#if item.helper}
+          <span class={theme.helper()}>{item.helper}</span>
+        {/if}
+      </div>
+
+      {#if isSelected}
+        <Icon name="check" class={theme.rightSlot()} />
+      {/if}
+    </BitsContextMenu.Item>
+  {/if}
+{/snippet}
+
+<BitsContextMenu.Root>
+  <BitsContextMenu.Trigger {disabled}>
+    {#snippet child({ props })}
+      <div {...props}>
+        {@render children()}
+      </div>
+    {/snippet}
+  </BitsContextMenu.Trigger>
+
+  <BitsContextMenu.Portal>
+    <BitsContextMenu.Content forceMount class={theme.content()}>
+      {#snippet child({ wrapperProps, props, open })}
+        {#if open}
+          <div {...wrapperProps} class={wrapperProps.class as any}>
+            <div
+              {...props}
+              class={props.class as any}
+              transition:enterExit={{
+                duration: 200,
+                easing: easeEmphasizedDecel,
+                mode: 'scale'
+              }}
+            >
+              {#each items as item}
+                {@render MenuItem(item)}
+              {/each}
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </BitsContextMenu.Content>
+  </BitsContextMenu.Portal>
+</BitsContextMenu.Root>

package/dist/components/containers/context-menu/ContextMenu.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ContextMenuProps } from './types.js';
+/**
+ * Context menus appear on right-click and provide actions related to the clicked element.
+ *
+ * @example
+ * ```svelte
+ * <ContextMenu
+ * items={[
+ *   { label: 'Edit', value: 'edit', iconProps: { name: 'edit' } },
+ *   { separator: true },
+ *   { label: 'Delete', value: 'delete', color: 'error' }
+ * ]}
+ * onselect={(value) => console.log(value)}
+ * >
+ * <div class="p-10 bg-surface">Right click me</div>
+ * </ContextMenu>
+ * ```
+ *
+ * @see https://m3.material.io/components/menus/guidelines
+ */
+declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

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

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

package/dist/components/containers/context-menu/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 ContextMenu } from './ContextMenu.svelte';