@noxlovette/material 0.1.0

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

@@ -0,0 +1,152 @@
+import { tv } from 'tailwind-variants';
+export const splitPane = tv({
+    slots: {
+        left: 'top-0 bottom-0 overflow-y-scroll overflow-x-visible bg-md-sys-color-surface-container scrollbar-none hidden md:block',
+        right: 'flex flex-col box-border ml-0 md:ml-[var(--splitpane-left-width)]',
+        handle: 'handle group hidden md:block top-0 bottom-0 z-40 w-3 -ml-1 cursor-col-resize touch-none bg-transparent hover:bg-md-sys-color-outline/20 translate-x-1.5',
+        handleGrip: 'absolute left-1/2 top-1/2 flex h-12 w-1 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-1 rounded-full bg-md-sys-color-secondary group-hover:w-0.5',
+        handlePip: 'h-0.5 w-0.5 rounded-full bg-md-sys-color-on-primary/80',
+        base: ''
+    },
+    variants: {
+        anchor: {
+            viewport: {
+                left: 'md:fixed',
+                handle: 'fixed'
+            },
+            parent: {
+                base: 'relative',
+                left: 'md:absolute',
+                handle: 'absolute'
+            }
+        },
+        full: {
+            true: {
+                right: 'md:min-h-[calc(100dvh-30px)]'
+            },
+            false: ''
+        },
+        rounded: {
+            true: {
+                left: 'md:rounded-t-lg'
+            },
+            false: {
+                left: ''
+            }
+        }
+    },
+    defaultVariants: {
+        anchor: 'viewport',
+        rounded: true
+    }
+});
+export const singlePane = tv({
+    slots: {
+        base: 'flex flex-col box-border overflow-clip items-center',
+        content: 'flex flex-1 flex-col gap-3 w-full md:pb-12 max-w-7xl mx-auto',
+        headline: 'md-sys-typescale-title-medium mb-4'
+    },
+    variants: {
+        background: {
+            true: 'bg-md-sys-color-surface',
+            false: ''
+        },
+        centered: {
+            narrow: {
+                content: 'max-w-2xl'
+            },
+            medium: {
+                content: 'max-w-5xl'
+            },
+            none: ''
+        },
+        full: {
+            true: 'min-h-dvh',
+            false: ''
+        },
+        rounded: {
+            true: {
+                base: 'md:rounded-t-lg'
+            },
+            false: {
+                base: ''
+            }
+        }
+    },
+    defaultVariants: {
+        rounded: true
+    }
+});
+export const supportingPane = tv({
+    slots: {
+        base: 'flex w-full flex-col gap-6 md:flex-row',
+        main: 'bg-md-sys-color-surface box-border grow order-2 md:order-1',
+        supporting: 'text-md-sys-color-on-surface-container box-border order-1 md:order-2 min-w-min md:w-80 overflow-x-visible'
+    },
+    variants: {
+        anchor: {
+            // supporting scrolls independently; main scrolls the page
+            viewport: {
+                supporting: 'md:fixed md:top-[var(--supporting-pane-top,0px)] md:bottom-0 md:w-[var(--supporting-pane-width,320px)] md:overflow-y-auto scrollbar-none'
+            },
+            // supporting sticks as user scrolls the page (classic sticky)
+            parent: {
+                supporting: 'md:sticky md:top-4 overflow-y-scroll'
+            }
+        },
+        position: {
+            right: {
+                base: 'md:flex-row',
+                supporting: ''
+            },
+            left: {
+                base: 'md:flex-row-reverse',
+                supporting: ''
+            }
+        },
+        centered: {
+            true: {
+                base: 'max-w-5xl mx-auto'
+            },
+            false: {
+                base: 'justify-between'
+            }
+        },
+        full: {
+            true: { base: 'min-h-dvh' },
+            false: ''
+        },
+        rounded: {
+            true: {
+                main: 'rounded-t-lg'
+            },
+            false: {
+                main: ''
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            anchor: 'viewport',
+            position: 'right',
+            class: {
+                supporting: 'md:right-0',
+                main: 'md:mr-[var(--supporting-pane-width,320px)]'
+            }
+        },
+        {
+            anchor: 'viewport',
+            position: 'left',
+            class: {
+                supporting: 'md:left-0',
+                main: 'md:ml-[var(--supporting-pane-width,320px)]'
+            }
+        }
+    ],
+    defaultVariants: {
+        anchor: 'parent',
+        position: 'right',
+        centered: true,
+        rounded: true
+    }
+});

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

@@ -0,0 +1,81 @@
+import type { DivAttrs } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { SinglePaneVariants, SplitPaneVariants, SupportingPaneVariants } from './theme.js';
+/**
+ * Props for the SplitPane component.
+ */
+export type SplitPaneProps = SplitPaneVariants & DivAttrs & {
+    /** Left pane content. */
+    left: Snippet;
+    /** Right pane content. */
+    right: Snippet;
+    /**
+     * Initial left pane width in px.
+     * @default 396
+     */
+    leftWidth?: number;
+    /**
+     * Minimum left pane width in px.
+     * @default 280
+     */
+    minLeft?: number;
+    /**
+     * Maximum left pane width in px.
+     * @default 720
+     */
+    maxLeft?: number;
+    /**
+     * LocalStorage key used to persist the split width.
+     * @default 'splitpane:leftWidth'
+     */
+    storageKey?: string;
+    /**
+     * Whether to persist split width.
+     * @default true
+     */
+    persist?: boolean;
+    /** Called when the component wants to update external footer padding. */
+    onPaddingChange?: (padding: number) => void;
+    /** The anchor mode for the panes. */
+    anchor?: SplitPaneVariants['anchor'];
+    /** Optional class for the left pane. */
+    leftClass?: string;
+    /** Optional class for the right pane. */
+    rightClass?: string;
+};
+/**
+ * Props for the SupportingPane component.
+ */
+export type SupportingPaneProps = SupportingPaneVariants & DivAttrs & {
+    /** Main pane content. */
+    main: Snippet;
+    /** Supporting pane content. */
+    supporting: Snippet;
+    /** Optional class for the main pane. */
+    mainClass?: string;
+    /** Optional class for the supporting pane. */
+    supportingClass?: string;
+    /** Whether the supporting pane can be collapsed. */
+    collapsible?: boolean;
+    /**
+     * Width of the supporting pane in px (viewport anchor mode).
+     * @default 320
+     */
+    supportingWidth?: number;
+    /**
+     * Top offset of the fixed supporting pane in px (viewport anchor mode).
+     * @default 0
+     */
+    supportingTop?: number;
+};
+/**
+ * Props for the SinglePane component.
+ */
+export type SinglePaneProps = SinglePaneVariants & DivAttrs & {
+    /** Pane content. */
+    children: Snippet;
+    /** Optional root class. */
+    class?: string;
+    /** Optional content container class. */
+    contentClass?: string;
+};

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

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

package/dist/components/containers/popover/Popover.svelte

@@ -0,0 +1,82 @@
+<!--
+@component
+Popovers display rich content in a non-modal overlay anchored to a trigger element.
+
+@see https://m3.material.io/components/dialogs/overview (non-modal surface variant)
+-->
+<script lang="ts">
+  import { Popover } from 'bits-ui';
+  import clsx from 'clsx';
+  import { popover } from './theme.js';
+  import type { PopoverProps } from './types.js';
+  import { enterExit, easeEmphasizedDecel, easeEmphasizedAccel } from '../../../animation/index.js';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import Title from '../../typography/title/Title.svelte';
+  let {
+    trigger,
+    children,
+    title,
+    showClose = true,
+    open = $bindable(false),
+    side = 'bottom',
+    align = 'start',
+    sideOffset = 8,
+    class: className
+  }: PopoverProps = $props();
+
+  const { base, header, title: titleCls, close } = popover();
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {@render trigger()}
+  </Popover.Trigger>
+
+  <Popover.Portal>
+    <Popover.Content forceMount {side} {align} {sideOffset}>
+      {#snippet child({ wrapperProps, props, open: isOpen })}
+        {#if isOpen}
+          <div {...wrapperProps} class={wrapperProps.class as any}>
+            <div
+              {...props}
+              class={base({ class: clsx(className, props.class as any) })}
+              in:enterExit={{
+                duration: 200,
+                easing: easeEmphasizedDecel,
+                mode: 'scale'
+              }}
+              out:enterExit={{
+                duration: 150,
+                easing: easeEmphasizedAccel,
+                mode: 'scale'
+              }}
+            >
+              {#if title || showClose}
+                <div class={header()}>
+                  {#if title}
+                    <Title class={titleCls()}>{title}</Title>
+                  {/if}
+                  {#if showClose}
+                    <Popover.Close>
+                      {#snippet child({ props: closeProps })}
+                        <div class={close()}>
+                          <ButtonIcon
+                            {...closeProps}
+                            iconProps={{ name: 'close' }}
+                            variant="text"
+                            size="sm"
+                          />
+                        </div>
+                      {/snippet}
+                    </Popover.Close>
+                  {/if}
+                </div>
+              {/if}
+              {@render children()}
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>

package/dist/components/containers/popover/Popover.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Popover } from 'bits-ui';
+import type { PopoverProps } from './types.js';
+/**
+ * Popovers display rich content in a non-modal overlay anchored to a trigger element.
+ *
+ * @see https://m3.material.io/components/dialogs/overview (non-modal surface variant)
+ */
+declare const Popover: import("svelte").Component<PopoverProps, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

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

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

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

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

@@ -0,0 +1,51 @@
+import { type VariantProps } from 'tailwind-variants';
+export type PopoverVariants = VariantProps<typeof popover>;
+export declare const popover: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            close?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            body?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            close?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            body?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    close: string;
+    header: string;
+    title: string;
+    body: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            close?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            body?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    close: string;
+    header: string;
+    title: string;
+    body: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    close: string;
+    header: string;
+    title: string;
+    body: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+export const popover = 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',
+        close: 'absolute top-3 right-3',
+        header: 'mb-2 flex items-center justify-between gap-4',
+        title: 'md-sys-typescale-title-small text-md-sys-color-on-surface',
+        body: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant'
+    }
+});

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

@@ -0,0 +1,22 @@
+import type { Popover } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { PopoverVariants } from './theme.js';
+export interface PopoverProps extends PopoverVariants {
+    /** Snippet rendered as the trigger element (typically a Button or ButtonIcon). */
+    trigger: Snippet;
+    /** The popover panel content. */
+    children: Snippet;
+    /** Optional heading displayed at the top of the panel. */
+    title?: string;
+    /** Show a close (×) button inside the panel. Defaults to true. */
+    showClose?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Positioning side relative to the trigger. */
+    side?: Popover.ContentProps['side'];
+    /** Alignment along the side axis. */
+    align?: Popover.ContentProps['align'];
+    /** Gap between trigger and panel in px. */
+    sideOffset?: number;
+    class?: string;
+}

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

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

package/dist/components/containers/scroll-area/ScrollArea.svelte

@@ -0,0 +1,41 @@
+<!--
+@component
+ScrollArea is a custom scrollbar component based on Bits UI.
+-->
+<script lang="ts">
+  import { ScrollArea as BitsScrollArea } from 'bits-ui';
+  import { scrollArea } from './theme.js';
+  import type { ScrollAreaProps } from './types.js';
+  import { clsx } from 'clsx';
+
+  let {
+    children,
+    class: className,
+    orientation = 'vertical',
+    type = 'hover',
+    scrollHideDelay = 600,
+    ...restProps
+  }: ScrollAreaProps = $props();
+
+  const styles = $derived(scrollArea({ orientation }));
+</script>
+
+<BitsScrollArea.Root class={clsx(styles.root(), className)} {type} {scrollHideDelay} {...restProps}>
+  <BitsScrollArea.Viewport class={styles.viewport()}>
+    {@render children?.()}
+  </BitsScrollArea.Viewport>
+
+  {#if orientation === 'vertical' || orientation === 'both'}
+    <BitsScrollArea.Scrollbar orientation="vertical" class={styles.scrollbar()}>
+      <BitsScrollArea.Thumb class={styles.thumb()} />
+    </BitsScrollArea.Scrollbar>
+  {/if}
+
+  {#if orientation === 'horizontal' || orientation === 'both'}
+    <BitsScrollArea.Scrollbar orientation="horizontal" class={styles.scrollbar()}>
+      <BitsScrollArea.Thumb class={styles.thumb()} />
+    </BitsScrollArea.Scrollbar>
+  {/if}
+
+  <BitsScrollArea.Corner class={styles.corner()} />
+</BitsScrollArea.Root>

package/dist/components/containers/scroll-area/ScrollArea.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ScrollAreaProps } from './types.js';
+/** ScrollArea is a custom scrollbar component based on Bits UI. */
+declare const ScrollArea: import("svelte").Component<ScrollAreaProps, {}, "">;
+type ScrollArea = ReturnType<typeof ScrollArea>;
+export default ScrollArea;

package/dist/components/containers/scroll-area/index.d.ts

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

package/dist/components/containers/scroll-area/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 ScrollArea } from './ScrollArea.svelte';

package/dist/components/containers/scroll-area/theme.d.ts

@@ -0,0 +1,55 @@
+export declare const scrollArea: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            scrollbar: string;
+        };
+        horizontal: {
+            scrollbar: string;
+        };
+        both: {
+            scrollbar: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+    scrollbar: string;
+    thumb: string;
+    corner: string;
+}, undefined, {
+    orientation: {
+        vertical: {
+            scrollbar: string;
+        };
+        horizontal: {
+            scrollbar: string;
+        };
+        both: {
+            scrollbar: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+    scrollbar: string;
+    thumb: string;
+    corner: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            scrollbar: string;
+        };
+        horizontal: {
+            scrollbar: string;
+        };
+        both: {
+            scrollbar: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+    scrollbar: string;
+    thumb: string;
+    corner: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/containers/scroll-area/theme.js

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+export const scrollArea = tv({
+    slots: {
+        root: 'relative overflow-hidden',
+        viewport: 'size-full rounded-[inherit]',
+        scrollbar: 'flex touch-none select-none transition-colors duration-150 ease-out',
+        thumb: 'relative flex-1 rounded-full bg-md-sys-color-outline-variant hover:bg-md-sys-color-secondary active:bg-md-sys-color-secondary transition-colors duration-150',
+        corner: 'bg-md-sys-color-surface-container-highest'
+    },
+    variants: {
+        orientation: {
+            vertical: {
+                scrollbar: 'h-full w-2 border-l border-l-transparent p-px'
+            },
+            horizontal: {
+                scrollbar: 'h-2 w-full border-t border-t-transparent p-px'
+            },
+            both: {
+                scrollbar: ''
+            }
+        }
+    },
+    defaultVariants: {
+        orientation: 'vertical'
+    }
+});

package/dist/components/containers/scroll-area/types.d.ts

@@ -0,0 +1,26 @@
+import type { ScrollAreaRootProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export interface ScrollAreaProps extends ScrollAreaRootProps {
+    /**
+     * The content to be scrolled.
+     */
+    children?: Snippet;
+    /**
+     * Additional classes for the root element.
+     */
+    class?: string;
+    /**
+     * Orientation of the scroll area.
+     * @default "vertical"
+     */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /**
+     * Scrollbar visibility behavior.
+     * - "auto": visible when content overflows.
+     * - "always": always visible.
+     * - "scroll": visible when scrolling.
+     * - "hover": visible when hovering.
+     * @default "hover"
+     */
+    scrollbarVisibility?: 'auto' | 'always' | 'scroll' | 'hover';
+}

package/dist/components/containers/scroll-area/types.js

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

package/dist/components/containers/side-sheet/SideSheet.svelte

@@ -0,0 +1,21 @@
+<!--
+@component
+Side sheets are supplementary surfaces which are anchored to the edge of the screen.
+
+@see https://m3.material.io/components/side-sheets/guidelines
+-->
+<script lang="ts">
+  import type { SideSheetProps } from './types.js';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+
+  let { headline, children, close }: SideSheetProps = $props();
+</script>
+
+<div class="flex flex-col">
+  <div class="flex items-center justify-between p-6">
+    <span class="md-sys-typescale-title-large text-md-sys-color-on-surface-variant">{headline}</span
+    >
+    <ButtonIcon variant="text" iconProps={{ name: 'close' }} onclick={close} />
+  </div>
+  {@render children()}
+</div>

package/dist/components/containers/side-sheet/SideSheet.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SideSheetProps } from './types.js';
+/**
+ * Side sheets are supplementary surfaces which are anchored to the edge of the screen.
+ *
+ * @see https://m3.material.io/components/side-sheets/guidelines
+ */
+declare const SideSheet: import("svelte").Component<SideSheetProps, {}, "">;
+type SideSheet = ReturnType<typeof SideSheet>;
+export default SideSheet;

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

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

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

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+/**
+ * Props for the SideSheet component.
+ */
+export interface SideSheetProps {
+    /**
+     * The title displayed at the top of the side sheet.
+     */
+    headline: string;
+    /**
+     * The content of the side sheet.
+     */
+    children: Snippet;
+    /**
+     * Callback function to close the side sheet.
+     */
+    close: () => void;
+}

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

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