@noxlovette/material 0.3.2 → 0.4.0

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>

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

@@ -1,175 +0,0 @@
-<!--
-@component
-SupportingPane provides a layout with a main content area and a supporting side pane.
-
-@see https://m3.material.io/foundations/layout/canonical-layouts/supporting-pane
--->
-<script lang="ts">
-  import clsx from 'clsx';
-  import type { SupportingPaneProps } from './types.js';
-  import { supportingPane } from './theme.js';
-  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
-  import {
-    easeEmphasized,
-    easeEmphasizedAccel,
-    easeEmphasizedDecel
-  } from '../../../animation/easing.js';
-  import { fade } from 'svelte/transition';
-  import type { TransitionConfig } from 'svelte/transition';
-
-  function slideWidth(node: HTMLElement): TransitionConfig {
-    const width = node.offsetWidth;
-    return {
-      duration: 500,
-      easing: easeEmphasized,
-      css: (t) => `width: ${t * width}px; min-width: 0; overflow: hidden;`
-    };
-  }
-
-  function sheetIn(_node: HTMLElement): TransitionConfig {
-    return {
-      duration: 500,
-      easing: easeEmphasizedDecel,
-      css: (t) => `transform: translateY(${(1 - t) * 100}%);`
-    };
-  }
-
-  function sheetOut(_node: HTMLElement): TransitionConfig {
-    return {
-      duration: 280,
-      easing: easeEmphasizedAccel,
-      css: (t) => `transform: translateY(${(1 - t) * 100}%);`
-    };
-  }
-
-  const {
-    main,
-    supporting,
-    anchor = 'viewport',
-    position = 'right',
-    centered = false,
-    rounded = true,
-    gap = 'md',
-    class: className,
-    mainClass,
-    full = true,
-    supportingClass,
-    collapsible,
-    supportingWidth = 320,
-    supportingTop = 0,
-    mobileSheet = false,
-    mobileSheetIcon = 'info',
-    mobileTriggerClass
-  }: SupportingPaneProps = $props();
-
-  let supportingVisible = $state(true);
-  let mobileSheetOpen = $state(false);
-  let isLargeScreen = $state(false);
-  const supportingId = 'supporting-pane';
-
-  $effect(() => {
-    const mq = window.matchMedia('(min-width: 1024px)');
-    isLargeScreen = mq.matches;
-    const handler = (e: MediaQueryListEvent) => {
-      isLargeScreen = e.matches;
-    };
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
-  });
-
-  const {
-    base,
-    main: mainCls,
-    supporting: supportingCls
-  } = $derived(supportingPane({ anchor, position, centered, full, rounded, gap }));
-
-  const cssVars = $derived(
-    anchor === 'viewport'
-      ? `--supporting-pane-width: ${supportingWidth}px; --supporting-pane-top: ${supportingTop}px;`
-      : ''
-  );
-
-  const mainViewportStyle = $derived(
-    anchor === 'viewport' && isLargeScreen
-      ? `transition: margin-${position === 'right' ? 'right' : 'left'} ${supportingVisible ? '500ms' : '280ms'} cubic-bezier(0.2, 0, 0, 1); margin-${position === 'right' ? 'right' : 'left'}: ${supportingVisible ? supportingWidth : 0}px;`
-      : ''
-  );
-
-  const inlineSupportingClass = $derived(mobileSheet ? 'hidden lg:block' : '');
-</script>
-
-<div class={base({ class: clsx(className) })} style={cssVars}>
-  <div class={mainCls({ class: clsx('relative', mainClass) })} style={mainViewportStyle}>
-    {#if collapsible}
-      <div class="top-3 right-3 z-10 hidden h-12 w-12 lg:absolute lg:block">
-        <ButtonIcon
-          type="button"
-          variant="elevated"
-          tooltipContent={supportingVisible ? 'Скрыть панель' : 'Показать панель'}
-          size="xs"
-          iconProps={{
-            name: supportingVisible ? 'right_panel_close' : 'right_panel_open'
-          }}
-          aria-controls={supportingId}
-          aria-expanded={supportingVisible}
-          aria-label={supportingVisible ? 'Hide supporting pane' : 'Show supporting pane'}
-          onclick={() => {
-            supportingVisible = !supportingVisible;
-          }}
-        />
-      </div>
-    {/if}
-    {@render main()}
-    {#if mobileSheet}
-      <ButtonIcon
-        class={clsx('fixed right-4 bottom-6 z-30 lg:hidden', mobileTriggerClass)}
-        type="button"
-        variant="tonal"
-        iconProps={{ name: mobileSheetIcon }}
-        aria-label="Open supporting panel"
-        onclick={() => (mobileSheetOpen = true)}
-      />
-    {/if}
-  </div>
-
-  {#if supportingVisible}
-    <aside
-      transition:slideWidth
-      id={supportingId}
-      class={supportingCls({
-        class: clsx(supportingClass, inlineSupportingClass)
-      })}
-      data-position={position}
-    >
-      {@render supporting()}
-    </aside>
-  {/if}
-</div>
-
-{#if mobileSheet && mobileSheetOpen}
-  <!-- Scrim -->
-  <div
-    class="bg-md-sys-color-scrim/40 fixed inset-0 z-40 lg:hidden"
-    transition:fade={{ duration: 220 }}
-    onclick={() => (mobileSheetOpen = false)}
-    aria-hidden="true"
-  ></div>
-
-  <!-- Sheet -->
-  <div
-    class="bg-md-sys-color-surface-container-low fixed inset-x-0 bottom-0 z-50 max-h-[85dvh] scrollbar-none overflow-y-auto rounded-t-[28px] pb-[env(safe-area-inset-bottom)] lg:hidden"
-    in:sheetIn
-    out:sheetOut
-    role="dialog"
-    aria-modal="true"
-  >
-    <button
-      class="flex w-full cursor-pointer items-center justify-center pt-4 pb-2"
-      aria-label="Close supporting panel"
-      onclick={() => (mobileSheetOpen = false)}
-    >
-      <div class="bg-md-sys-color-on-surface-variant/40 h-1 w-8 rounded-full"></div>
-    </button>
-    {@render supporting()}
-  </div>
-{/if}

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

@@ -1,9 +0,0 @@
-import type { SupportingPaneProps } from './types.js';
-/**
- * SupportingPane provides a layout with a main content area and a supporting side pane.
- *
- * @see https://m3.material.io/foundations/layout/canonical-layouts/supporting-pane
- */
-declare const SupportingPane: import("svelte").Component<SupportingPaneProps, {}, "">;
-type SupportingPane = ReturnType<typeof SupportingPane>;
-export default SupportingPane;

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

@@ -1,5 +0,0 @@
-export * from './theme.js';
-export * from './types.js';
-export { default as SinglePane } from './SinglePane.svelte';
-export { default as SplitPane } from './SplitPane.svelte';
-export { default as SupportingPane } from './SupportingPane.svelte';