@noxlovette/material 0.1.0

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

@@ -0,0 +1,36 @@
+import type { IconProps } from '../../../utils/icon/types.js';
+import type { Snippet } from 'svelte';
+/**
+ * Props for the MenuItem component.
+ */
+export interface MenuItemProps {
+    /**
+     * Props for the leading icon.
+     */
+    iconProps?: IconProps;
+    /**
+     * Whether the menu item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback function for the click event.
+     */
+    onclick?: () => void;
+    /**
+     * Callback function for the bits-ui onSelect event.
+     */
+    onSelect?: (event: Event) => void;
+    /**
+     * Whether the item is selected.
+     */
+    selected?: boolean;
+    /**
+     * Optional supporting text.
+     */
+    helper?: string;
+    /**
+     * The content of the menu item, typically a label.
+     */
+    children: Snippet;
+}

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

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

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

@@ -0,0 +1,29 @@
+<!--
+@component
+InputMerger is a container that groups multiple input components together visually.
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+
+  interface Props {
+    /**
+     * The input components to be merged.
+     */
+    children: import('svelte').Snippet;
+    /**
+     * Additional CSS classes for the container.
+     */
+    class?: string;
+  }
+
+  let { children, class: className = '' }: Props = $props();
+</script>
+
+<div
+  class={clsx(
+    className,
+    'border-primary padding-default gap-narrow grid max-h-max w-full shrink rounded-none border-x-0 px-0 md:rounded-2xl md:border-x-2 md:px-2.5'
+  )}
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,14 @@
+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

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

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

@@ -0,0 +1,3 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// default exports for components in this folder
+export { default as InputMerger } from './InputMerger.svelte';

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

@@ -0,0 +1,29 @@
+<!--
+@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';
+  import type { Snippet } from 'svelte';
+
+  const {
+    children,
+    centered = 'none',
+    background = true,
+    full = true,
+    rounded = true,
+    class: className,
+    contentClass,
+    ...rest
+  }: SinglePaneProps = $props();
+
+  const { base, content } = $derived(singlePane({ 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

@@ -0,0 +1,5 @@
+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.svelte

@@ -0,0 +1,132 @@
+<!--
+@component
+SplitPane provides a resizable two-column layout.
+-->
+<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,
+    minLeft = 280,
+    maxLeft = 720,
+    storageKey = 'splitpane:leftWidth',
+    persist = true,
+    onPaddingChange,
+    anchor = 'viewport',
+    class: className,
+    leftClass,
+    rightClass
+  }: SplitPaneProps = $props();
+
+  const {
+    base,
+    left: lCls,
+    right: rCls,
+    handle: hCls,
+    handleGrip
+  } = $derived(splitPane({ full, anchor, rounded }));
+
+  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 (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 (!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: leftClass })}
+    style={`width: var(--splitpane-left-width); left: ${leftOffset};`}
+  >
+    {@render left()}
+  </div>
+
+  <!-- DRAG HANDLE -->
+  <div
+    class={hCls()}
+    role="separator"
+    aria-orientation="vertical"
+    aria-valuenow={leftWidth}
+    aria-valuemin={minLeft}
+    aria-valuemax={maxLeft}
+    style={`left: ${handleOffset};`}
+    onpointerdown={startDrag}
+    onpointermove={moveDrag}
+    onpointerup={endDrag}
+    onpointercancel={endDrag}
+  >
+    <div
+      class={handleGrip({
+        class: clsx(dragging && 'w-0.5')
+      })}
+    ></div>
+  </div>
+
+  <!-- RIGHT PANE -->
+  <div class={rCls({ class: rightClass })}>
+    {@render right()}
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+import type { SplitPaneProps } from './types.js';
+/** SplitPane provides a resizable two-column layout. */
+declare const SplitPane: import("svelte").Component<SplitPaneProps, {}, "leftWidth">;
+type SplitPane = ReturnType<typeof SplitPane>;
+export default SplitPane;

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

@@ -0,0 +1,81 @@
+<!--
+@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';
+
+  const {
+    main,
+    supporting,
+    anchor = 'parent',
+    position = 'right',
+    centered = false,
+    rounded = true,
+    class: className,
+    mainClass,
+    full = true,
+    supportingClass,
+    collapsible,
+    supportingWidth = 320,
+    supportingTop = 0
+  }: SupportingPaneProps = $props();
+
+  let entered = $state(false);
+  let supportingVisible = $state(true);
+  const supportingId = 'supporting-pane';
+
+  const {
+    base,
+    main: mainCls,
+    supporting: supportingCls
+  } = $derived(supportingPane({ anchor, position, centered, full, rounded }));
+
+  const cssVars = $derived(
+    anchor === 'viewport'
+      ? `--supporting-pane-width: ${supportingWidth}px; --supporting-pane-top: ${supportingTop}px;`
+      : ''
+  );
+</script>
+
+<div class={base({ class: clsx(className) })} style={cssVars}>
+  <div class={mainCls({ class: clsx('relative', mainClass) })}>
+    {#if collapsible}
+      <div class="top-3 right-3 z-10 hidden h-12 w-12 md:absolute md:block">
+        <ButtonIcon
+          triggerClass=""
+          variant="text"
+          tooltipContent={supportingVisible ? 'Скрыть панель' : 'Показать панель'}
+          size="sm"
+          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()}
+  </div>
+  {#if supportingVisible}
+    <aside
+      id={supportingId}
+      class={supportingCls({
+        class: clsx(supportingClass)
+      })}
+      data-entered={entered}
+      data-position={position}
+    >
+      {@render supporting()}
+    </aside>
+  {/if}
+</div>

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,5 @@
+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';

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

@@ -0,0 +1,8 @@
+// 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 SinglePane } from './SinglePane.svelte';
+export { default as SplitPane } from './SplitPane.svelte';
+export { default as SupportingPane } from './SupportingPane.svelte';

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

@@ -0,0 +1,331 @@
+import { type VariantProps } from 'tailwind-variants';
+export type SplitPaneVariants = VariantProps<typeof splitPane>;
+export type SinglePaneVariants = VariantProps<typeof singlePane>;
+export type SupportingPaneVariants = VariantProps<typeof supportingPane>;
+export declare const splitPane: import("tailwind-variants").TVReturnType<{
+    anchor: {
+        viewport: {
+            left: string;
+            handle: string;
+        };
+        parent: {
+            base: string;
+            left: string;
+            handle: string;
+        };
+    };
+    full: {
+        true: {
+            right: string;
+        };
+        false: string;
+    };
+    rounded: {
+        true: {
+            left: string;
+        };
+        false: {
+            left: string;
+        };
+    };
+}, {
+    left: string;
+    right: string;
+    handle: string;
+    handleGrip: string;
+    handlePip: string;
+    base: string;
+}, undefined, {
+    anchor: {
+        viewport: {
+            left: string;
+            handle: string;
+        };
+        parent: {
+            base: string;
+            left: string;
+            handle: string;
+        };
+    };
+    full: {
+        true: {
+            right: string;
+        };
+        false: string;
+    };
+    rounded: {
+        true: {
+            left: string;
+        };
+        false: {
+            left: string;
+        };
+    };
+}, {
+    left: string;
+    right: string;
+    handle: string;
+    handleGrip: string;
+    handlePip: string;
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    anchor: {
+        viewport: {
+            left: string;
+            handle: string;
+        };
+        parent: {
+            base: string;
+            left: string;
+            handle: string;
+        };
+    };
+    full: {
+        true: {
+            right: string;
+        };
+        false: string;
+    };
+    rounded: {
+        true: {
+            left: string;
+        };
+        false: {
+            left: string;
+        };
+    };
+}, {
+    left: string;
+    right: string;
+    handle: string;
+    handleGrip: string;
+    handlePip: string;
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const singlePane: import("tailwind-variants").TVReturnType<{
+    background: {
+        true: string;
+        false: string;
+    };
+    centered: {
+        narrow: {
+            content: string;
+        };
+        medium: {
+            content: string;
+        };
+        none: string;
+    };
+    full: {
+        true: string;
+        false: string;
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    headline: string;
+}, undefined, {
+    background: {
+        true: string;
+        false: string;
+    };
+    centered: {
+        narrow: {
+            content: string;
+        };
+        medium: {
+            content: string;
+        };
+        none: string;
+    };
+    full: {
+        true: string;
+        false: string;
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    headline: string;
+}, import("tailwind-variants").TVReturnType<{
+    background: {
+        true: string;
+        false: string;
+    };
+    centered: {
+        narrow: {
+            content: string;
+        };
+        medium: {
+            content: string;
+        };
+        none: string;
+    };
+    full: {
+        true: string;
+        false: string;
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    headline: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const supportingPane: import("tailwind-variants").TVReturnType<{
+    anchor: {
+        viewport: {
+            supporting: string;
+        };
+        parent: {
+            supporting: string;
+        };
+    };
+    position: {
+        right: {
+            base: string;
+            supporting: string;
+        };
+        left: {
+            base: string;
+            supporting: string;
+        };
+    };
+    centered: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    full: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+    rounded: {
+        true: {
+            main: string;
+        };
+        false: {
+            main: string;
+        };
+    };
+}, {
+    base: string;
+    main: string;
+    supporting: string;
+}, undefined, {
+    anchor: {
+        viewport: {
+            supporting: string;
+        };
+        parent: {
+            supporting: string;
+        };
+    };
+    position: {
+        right: {
+            base: string;
+            supporting: string;
+        };
+        left: {
+            base: string;
+            supporting: string;
+        };
+    };
+    centered: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    full: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+    rounded: {
+        true: {
+            main: string;
+        };
+        false: {
+            main: string;
+        };
+    };
+}, {
+    base: string;
+    main: string;
+    supporting: string;
+}, import("tailwind-variants").TVReturnType<{
+    anchor: {
+        viewport: {
+            supporting: string;
+        };
+        parent: {
+            supporting: string;
+        };
+    };
+    position: {
+        right: {
+            base: string;
+            supporting: string;
+        };
+        left: {
+            base: string;
+            supporting: string;
+        };
+    };
+    centered: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    full: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+    rounded: {
+        true: {
+            main: string;
+        };
+        false: {
+            main: string;
+        };
+    };
+}, {
+    base: string;
+    main: string;
+    supporting: string;
+}, undefined, unknown, unknown, undefined>>;