@noxlovette/material 0.3.3 → 0.4.1

package/dist/components/containers/merger/InputMerger.svelte.d.ts

@@ -1,14 +0,0 @@
-interface Props {
-    /**
-     * The input components to be merged.
-     */
-    children: import('svelte').Snippet;
-    /**
-     * Additional CSS classes for the container.
-     */
-    class?: string;
-}
-/** InputMerger is a container that groups multiple input components together visually. */
-declare const InputMerger: import("svelte").Component<Props, {}, "">;
-type InputMerger = ReturnType<typeof InputMerger>;
-export default InputMerger;

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

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

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

@@ -1 +0,0 @@
-export declare const inputMerger: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "grid max-h-max w-full shrink gap-2 rounded-none border-x-0 border-md-sys-color-outline-variant px-0 py-2 md:rounded-2xl md:border-x-2 md:px-2.5", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "grid max-h-max w-full shrink gap-2 rounded-none border-x-0 border-md-sys-color-outline-variant px-0 py-2 md:rounded-2xl md:border-x-2 md:px-2.5", unknown, unknown, undefined>>;

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

@@ -1,4 +0,0 @@
-import { tv } from 'tailwind-variants';
-export const inputMerger = tv({
-    base: 'grid max-h-max w-full shrink gap-2 rounded-none border-x-0 border-md-sys-color-outline-variant px-0 py-2 md:rounded-2xl md:border-x-2 md:px-2.5'
-});

package/dist/components/containers/panes/SinglePane.stories.svelte

@@ -1,67 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import SinglePane from './SinglePane.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Containers/Single Pane',
-    component: SinglePane,
-    argTypes: {
-      centered: {
-        control: 'select',
-        options: ['none', 'narrow', 'medium']
-      },
-      padding: {
-        control: 'select',
-        options: ['none', 'sm', 'md', 'lg']
-      },
-      gap: {
-        control: 'select',
-        options: ['none', 'sm', 'md', 'lg', 'xl']
-      },
-      background: { control: 'boolean' },
-      full: { control: 'boolean' },
-      rounded: { control: 'boolean' }
-    },
-    args: {
-      centered: 'medium',
-      padding: 'md',
-      gap: 'md',
-      background: true,
-      full: false,
-      rounded: true
-    }
-  });
-</script>
-
-<Story name="Playground">
-  {#snippet template(args)}
-    <SinglePane
-      centered={args.centered}
-      padding={args.padding}
-      gap={args.gap}
-      background={args.background}
-      full={args.full}
-      rounded={args.rounded}
-    >
-      <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">Block one</div>
-      <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">Block two</div>
-      <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">Block three</div>
-    </SinglePane>
-  {/snippet}
-</Story>
-
-<Story name="Centered Widths" asChild>
-  <div class="flex flex-col gap-6">
-    <SinglePane centered="narrow" background={false}>
-      <div class="bg-md-sys-color-secondary-container rounded-lg p-4 text-sm">narrow</div>
-    </SinglePane>
-    <SinglePane centered="medium" background={false}>
-      <div class="bg-md-sys-color-secondary-container rounded-lg p-4 text-sm">medium</div>
-    </SinglePane>
-    <SinglePane centered="none" background={false}>
-      <div class="bg-md-sys-color-secondary-container rounded-lg p-4 text-sm">
-        none (full width)
-      </div>
-    </SinglePane>
-  </div>
-</Story>

package/dist/components/containers/panes/SinglePane.svelte

@@ -1,32 +0,0 @@
-<!--
-@component
-SinglePane provides a centered or full-width container for content.
--->
-<script lang="ts">
-  import clsx from 'clsx';
-  import { singlePane } from './theme.js';
-  import type { SinglePaneProps } from './types.js';
-
-  const {
-    children,
-    centered = 'none',
-    background = true,
-    full = true,
-    padding = 'md',
-    gap = 'md',
-    rounded = true,
-    class: className,
-    contentClass,
-    ...rest
-  }: SinglePaneProps = $props();
-
-  const { base, content } = $derived(
-    singlePane({ padding, gap, centered, full, background, rounded })
-  );
-</script>
-
-<div class={base({ class: clsx(className) })} {...rest}>
-  <div class={content({ class: clsx(contentClass) })}>
-    {@render children()}
-  </div>
-</div>

package/dist/components/containers/panes/SinglePane.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { SinglePaneProps } from './types.js';
-/** SinglePane provides a centered or full-width container for content. */
-declare const SinglePane: import("svelte").Component<SinglePaneProps, {}, "">;
-type SinglePane = ReturnType<typeof SinglePane>;
-export default SinglePane;

package/dist/components/containers/panes/SplitPane.stories.svelte

@@ -1,124 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import SplitPane from './SplitPane.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Containers/Split Pane',
-    component: SplitPane,
-    argTypes: {
-      anchor: {
-        control: 'select',
-        options: ['viewport', 'parent', 'sticky']
-      },
-      resizable: { control: 'boolean' },
-      leftWidth: { control: 'number' },
-      minLeft: { control: 'number' },
-      maxLeft: { control: 'number' },
-      full: { control: 'boolean' },
-      rounded: { control: 'boolean' },
-      mobilePane: {
-        control: 'select',
-        options: ['left', 'right']
-      }
-    },
-    args: {
-      anchor: 'parent',
-      resizable: true,
-      leftWidth: 320,
-      minLeft: 240,
-      maxLeft: 560,
-      full: false,
-      rounded: true,
-      mobilePane: 'right'
-    }
-  });
-</script>
-
-<!--
-  Playground uses anchor="parent" (bounded/relative container) since it's the
-  only mode that demos meaningfully inside Storybook's iframe canvas — "viewport"
-  fixes to the true browser edge and "sticky" needs a real scrolling page.
--->
-<Story name="Playground">
-  {#snippet template(args)}
-    <div
-      class="relative h-[420px] overflow-hidden rounded-lg border border-md-sys-color-outline-variant"
-    >
-      <SplitPane {...args}>
-        {#snippet left()}
-          <div class="p-4">
-            <p class="md-sys-typescale-title-small mb-2">Left pane</p>
-            <p class="text-md-sys-color-on-surface-variant text-sm">
-              Drag the handle to resize. Persisted to localStorage when resizable.
-            </p>
-          </div>
-        {/snippet}
-        {#snippet right()}
-          <div class="p-4">
-            <p class="md-sys-typescale-title-small mb-2">Right pane</p>
-            <p class="text-md-sys-color-on-surface-variant text-sm">Main content area.</p>
-          </div>
-        {/snippet}
-      </SplitPane>
-    </div>
-  {/snippet}
-</Story>
-
-<!--
-  anchor="viewport" — left pane fixes to the true browser edge. Meant for a
-  full-page app layout where SplitPane is the outermost positioned element
-  (e.g. the root Rail). Shown here at a reduced height so the fixed left pane
-  is still visible inside the story canvas.
--->
-<Story name="Anchor Viewport" asChild>
-  <div
-    class="relative h-[420px] overflow-hidden rounded-lg border border-md-sys-color-outline-variant"
-  >
-    <SplitPane anchor="viewport" resizable={false} leftWidth={280}>
-      {#snippet left()}
-        <div class="p-4">
-          <p class="md-sys-typescale-title-small mb-2">Fixed to viewport edge</p>
-          <p class="text-md-sys-color-on-surface-variant text-sm">
-            In a real page this pane is position: fixed to the true left edge of the browser.
-          </p>
-        </div>
-      {/snippet}
-      {#snippet right()}
-        <div class="p-4">
-          <p class="text-md-sys-color-on-surface-variant text-sm">Right / main content.</p>
-        </div>
-      {/snippet}
-    </SplitPane>
-  </div>
-</Story>
-
-<!--
-  anchor="sticky" — left/right sit in normal flex flow and the left pane
-  sticks (position: sticky) as the page scrolls. Used for a sidebar nested
-  inside other already-offset content, e.g. the docs secondary nav. Paired
-  with resizable={false} for a static, non-draggable sidebar. Needs a tall
-  scrollable right pane to demonstrate the sticky behaviour.
--->
-<Story name="Anchor Sticky" asChild>
-  <div class="h-[420px] overflow-y-auto rounded-lg border border-md-sys-color-outline-variant">
-    <SplitPane anchor="sticky" resizable={false} leftWidth={240} rounded={false}>
-      {#snippet left()}
-        <div class="p-4">
-          <p class="md-sys-typescale-title-small mb-2">Sticky nav</p>
-          <p class="text-md-sys-color-on-surface-variant text-sm">
-            Stays pinned to the top of the viewport while the right pane scrolls past it.
-          </p>
-        </div>
-      {/snippet}
-      {#snippet right()}
-        <div class="flex flex-col gap-4 p-4">
-          {#each Array(12) as _, i}
-            <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
-              Scrollable content block {i + 1}
-            </div>
-          {/each}
-        </div>
-      {/snippet}
-    </SplitPane>
-  </div>
-</Story>

package/dist/components/containers/panes/SplitPane.svelte

@@ -1,144 +0,0 @@
-<!--
-@component
-SplitPane provides a two-column layout. Set `resizable={false}` for a static,
-non-draggable sidebar (e.g. a docs nav) instead of a user-resizable split.
--->
-<script lang="ts">
-  import type { SplitPaneProps } from './types.js';
-  import { splitPane } from './theme.js';
-  import { onDestroy, onMount } from 'svelte';
-  import clsx from 'clsx';
-
-  let dragging = $state(false);
-
-  let {
-    left,
-    right,
-    leftWidth = $bindable(396),
-    full = true,
-    rounded = true,
-    resizable = true,
-    minLeft = 280,
-    maxLeft = 720,
-    storageKey = 'splitpane:leftWidth',
-    persist = true,
-    onPaddingChange,
-    anchor = 'viewport',
-    mobilePane = 'right',
-    class: className,
-    leftClass,
-    rightClass
-  }: SplitPaneProps = $props();
-
-  const {
-    base,
-    left: lCls,
-    right: rCls,
-    handle: hCls,
-    handleGrip
-  } = $derived(splitPane({ full, anchor, rounded }));
-
-  const leftMobileClass = $derived(
-    mobilePane === 'left' ? 'block w-full md:w-[var(--splitpane-left-width)]' : ''
-  );
-  const rightMobileClass = $derived(mobilePane === 'left' ? 'hidden md:flex' : '');
-
-  const leftOffset = $derived(anchor === 'viewport' ? 'var(--splitpane-offset, 0px)' : '0px');
-  const handleOffset = $derived(
-    anchor === 'viewport'
-      ? 'calc(var(--splitpane-left-width) + var(--splitpane-offset, 0px))'
-      : 'var(--splitpane-left-width)'
-  );
-
-  const clampWidth = (next: number) => Math.min(maxLeft, Math.max(minLeft, next));
-
-  const footerPaddingOffset = 80;
-
-  let dragStartX = 0;
-  let dragStartWidth = 0;
-  let mounted = false;
-
-  const startDrag = (event: PointerEvent) => {
-    dragging = true;
-    dragStartX = event.clientX;
-    dragStartWidth = leftWidth;
-    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
-  };
-
-  const moveDrag = (event: PointerEvent) => {
-    if (!dragging) return;
-    const delta = event.clientX - dragStartX;
-    leftWidth = clampWidth(dragStartWidth + delta);
-  };
-
-  const endDrag = () => {
-    dragging = false;
-  };
-
-  onMount(() => {
-    mounted = true;
-
-    if (resizable && persist && typeof localStorage !== 'undefined') {
-      const stored = Number(localStorage.getItem(storageKey));
-      if (!Number.isNaN(stored)) {
-        leftWidth = clampWidth(stored);
-      }
-    }
-
-    onPaddingChange?.(leftWidth + footerPaddingOffset);
-  });
-
-  onDestroy(() => {
-    onPaddingChange?.(0);
-  });
-
-  $effect(() => {
-    if (!mounted) return;
-    onPaddingChange?.(leftWidth + footerPaddingOffset);
-  });
-
-  $effect(() => {
-    if (!resizable || !persist || typeof localStorage === 'undefined') return;
-    localStorage.setItem(storageKey, String(leftWidth));
-  });
-</script>
-
-<div class={base({ class: clsx(className) })} style={`--splitpane-left-width: ${leftWidth}px;`}>
-  <!-- LEFT PANE -->
-  <div
-    class={lCls({ class: clsx(leftClass, leftMobileClass) })}
-    style={mobilePane === 'left'
-      ? `left: ${leftOffset};`
-      : `width: var(--splitpane-left-width); left: ${leftOffset};`}
-  >
-    {@render left()}
-  </div>
-
-  <!-- DRAG HANDLE -->
-  {#if resizable}
-    <div
-      class={hCls()}
-      role="separator"
-      aria-orientation="vertical"
-      aria-valuenow={leftWidth}
-      aria-valuemin={minLeft}
-      aria-valuemax={maxLeft}
-      style={anchor === 'sticky' ? undefined : `left: ${handleOffset};`}
-      onpointerdown={startDrag}
-      onpointermove={moveDrag}
-      onpointerup={endDrag}
-      onpointercancel={endDrag}
-    >
-      <div
-        class={handleGrip({
-          class: clsx(dragging && 'w-0.5')
-        })}
-      ></div>
-    </div>
-  {/if}
-
-  <!-- RIGHT PANE -->
-  <div class={rCls({ class: clsx(rightClass, rightMobileClass) })}>
-    {@render right()}
-  </div>
-</div>

package/dist/components/containers/panes/SplitPane.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { SplitPaneProps } from './types.js';
-/**
- * SplitPane provides a two-column layout. Set `resizable={false}` for a static,
- * non-draggable sidebar (e.g. a docs nav) instead of a user-resizable split.
- */
-declare const SplitPane: import("svelte").Component<SplitPaneProps, {}, "leftWidth">;
-type SplitPane = ReturnType<typeof SplitPane>;
-export default SplitPane;

package/dist/components/containers/panes/SupportingPane.stories.svelte

@@ -1,113 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import SupportingPane from './SupportingPane.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Containers/Supporting Pane',
-    component: SupportingPane,
-    argTypes: {
-      anchor: {
-        control: 'select',
-        options: ['viewport', 'parent']
-      },
-      position: {
-        control: 'select',
-        options: ['left', 'right']
-      },
-      centered: { control: 'boolean' },
-      rounded: { control: 'boolean' },
-      full: { control: 'boolean' },
-      gap: {
-        control: 'select',
-        options: ['none', 'sm', 'md', 'lg']
-      },
-      collapsible: { control: 'boolean' },
-      supportingWidth: { control: 'number' },
-      mobileSheet: { control: 'boolean' }
-    },
-    args: {
-      anchor: 'parent',
-      position: 'right',
-      centered: false,
-      rounded: false,
-      full: false,
-      gap: 'md',
-      collapsible: false,
-      supportingWidth: 320,
-      mobileSheet: false
-    }
-  });
-</script>
-
-<!--
-  anchor="parent" demos meaningfully in a bounded box (classic sticky-while-
-  scrolling-the-page behaviour). anchor="viewport" — used by the docs pages'
-  own "On this page" TOC — fixes the supporting pane to the true browser edge,
-  which only reads correctly on a real scrolling page, not inside Storybook's
-  iframe canvas.
--->
-<Story name="Playground">
-  {#snippet template(args)}
-    <SupportingPane {...args}>
-      {#snippet main()}
-        <div class="flex flex-col gap-4 p-4">
-          {#each Array(6) as _, i}
-            <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
-              Main content block {i + 1}
-            </div>
-          {/each}
-        </div>
-      {/snippet}
-      {#snippet supporting()}
-        <div class="bg-md-sys-color-surface-container rounded-lg p-4">
-          <p class="md-sys-typescale-title-small mb-2">Supporting content</p>
-          <p class="text-md-sys-color-on-surface-variant text-sm">
-            Fixed-width side panel — e.g. a table of contents or contextual actions.
-          </p>
-        </div>
-      {/snippet}
-    </SupportingPane>
-  {/snippet}
-</Story>
-
-<Story name="Collapsible" asChild>
-  <SupportingPane anchor="parent" position="right" collapsible>
-    {#snippet main()}
-      <div class="flex flex-col gap-4 p-4">
-        {#each Array(4) as _, i}
-          <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
-            Main content block {i + 1}
-          </div>
-        {/each}
-      </div>
-    {/snippet}
-    {#snippet supporting()}
-      <div class="bg-md-sys-color-surface-container rounded-lg p-4">
-        <p class="md-sys-typescale-title-small mb-2">Collapsible panel</p>
-        <p class="text-md-sys-color-on-surface-variant text-sm">
-          A toggle button appears over the main pane to hide/show this panel (desktop only).
-        </p>
-      </div>
-    {/snippet}
-  </SupportingPane>
-</Story>
-
-<Story name="Position Left" asChild>
-  <SupportingPane anchor="parent" position="left">
-    {#snippet main()}
-      <div class="flex flex-col gap-4 p-4">
-        {#each Array(4) as _, i}
-          <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
-            Main content block {i + 1}
-          </div>
-        {/each}
-      </div>
-    {/snippet}
-    {#snippet supporting()}
-      <div class="bg-md-sys-color-surface-container rounded-lg p-4">
-        <p class="md-sys-typescale-title-small mb-2">Supporting content</p>
-        <p class="text-md-sys-color-on-surface-variant text-sm">Panel rendered on the left.</p>
-      </div>
-    {/snippet}
-  </SupportingPane>
-</Story>