@noxlovette/material 0.1.0

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

@@ -0,0 +1,51 @@
+import { type VariantProps } from 'tailwind-variants';
+export type ContextMenuVariants = VariantProps<typeof contextMenu>;
+export declare const contextMenu: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    subTrigger: string;
+    itemContent: string;
+    label: string;
+    helper: string;
+    icon: string;
+    separator: string;
+    rightSlot: string;
+}, undefined, {
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    subTrigger: string;
+    itemContent: string;
+    label: string;
+    helper: string;
+    icon: string;
+    separator: string;
+    rightSlot: string;
+}, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    subTrigger: string;
+    itemContent: string;
+    label: string;
+    helper: string;
+    icon: string;
+    separator: string;
+    rightSlot: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/containers/context-menu/theme.js

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+export const contextMenu = tv({
+    slots: {
+        content: 'z-[100] min-w-48 overflow-hidden rounded-xl bg-md-sys-color-surface-container-high py-2 ring-1 ring-md-sys-color-outline/10 shadow-elevation-3',
+        item: 'relative flex w-full cursor-pointer select-none items-center gap-3 px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface outline-none data-[highlighted]:bg-md-sys-color-on-surface/8 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38',
+        subTrigger: 'relative flex w-full cursor-pointer select-none items-center gap-3 px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface outline-none data-[state=open]:bg-md-sys-color-on-surface/8 data-[highlighted]:bg-md-sys-color-on-surface/8 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38',
+        itemContent: 'flex flex-1 flex-col gap-0.5',
+        label: 'md-sys-typescale-body-large text-md-sys-color-on-surface',
+        helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
+        icon: 'size-6 text-[24px] text-md-sys-color-on-surface-variant',
+        separator: 'my-2 h-px bg-md-sys-color-outline-variant/30',
+        rightSlot: 'ml-auto text-md-sys-color-on-surface-variant'
+    },
+    variants: {
+        selected: {
+            true: {
+                item: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container'
+            }
+        }
+    }
+});

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

@@ -0,0 +1,45 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+/**
+ * Represents an item in the context menu.
+ */
+export type ContextMenuDataItem = {
+    /** The display label of the item. */
+    label?: string;
+    /** The unique value of the item. */
+    value?: string;
+    /** Optional supporting text shown below the label. */
+    helper?: string;
+    /** Whether the item is disabled. */
+    disabled?: boolean;
+    /** Optional icon props for the item. */
+    iconProps?: IconProps;
+    /** Whether the item is a separator. */
+    separator?: boolean;
+    /** Whether the item is selected. */
+    selected?: boolean;
+    /** Callback function when the item is selected. */
+    onselect?: (value: string) => void;
+    /** Optional sub-items for nested menus. */
+    items?: ContextMenuDataItem[];
+};
+/**
+ * Props for the ContextMenu component.
+ */
+export type ContextMenuProps = {
+    /** Array of menu items to display. */
+    items: ContextMenuDataItem[];
+    /** The value of the currently selected item. */
+    selected?: string;
+    /** The element(s) that will trigger the context menu on right-click. */
+    children: Snippet;
+    /** Callback function when an item is selected. */
+    onselect?: (value: string) => void;
+    /**
+     * Prefix for data-cy attributes on menu items.
+     * @default 'context-menu-item'
+     */
+    itemDataCyPrefix?: string;
+    /** Whether the context menu is disabled. */
+    disabled?: boolean;
+};

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

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

package/dist/components/containers/dialogue/Dialogue.svelte

@@ -0,0 +1,134 @@
+<!--
+@component
+Dialogs provide important information or prompt users for a decision.
+
+A dialog is a type of modal window that appears in front of app content
+to provide critical information or ask for a decision.
+Dialogs disable all app functionality when they appear, and remain
+on screen until confirmed, dismissed, or a required action has been taken.
+
+@see https://m3.material.io/components/dialogs/overview
+-->
+<script lang="ts">
+  import { dialogue } from './theme.js';
+  import type { DialogueProps } from './types.js';
+  import { Dialog } from 'bits-ui';
+  import clsx from 'clsx';
+  import { enterExit } from '../../../animation/enterExit.js';
+  import { easeEmphasized, easeEmphasizedDecel } from '../../../animation/easing.js';
+  import { Button } from '../../buttons/index.js';
+
+  let {
+    open = $bindable(false),
+    enhance,
+    headline,
+    supportingText,
+    confirmText,
+    cancelText = 'Отмена',
+    confirmAction,
+    loading = false,
+    portalDisabled = false,
+    minWidth = '280px',
+    maxWidth = '560px',
+    children,
+    disabled = false,
+    class: className,
+    toggle = () => {},
+    contentProps,
+    onconfirm,
+    ...rootRest
+  }: DialogueProps = $props();
+
+  const { base, inner, headlineContainer, buttonContainer, supportingTextContainer } =
+    $derived(dialogue());
+</script>
+
+<Dialog.Root
+  bind:open
+  {...rootRest}
+  onOpenChange={(v) => {
+    if (!v) toggle?.();
+    rootRest.onOpenChange?.(v);
+  }}
+>
+  <Dialog.Portal disabled={portalDisabled}>
+    <Dialog.Overlay forceMount>
+      {#snippet child({ props, open })}
+        {#if open}
+          <div
+            {...props}
+            class={base()}
+            transition:enterExit={{
+              duration: 500,
+              easing: easeEmphasizedDecel
+            }}
+          ></div>
+        {/if}
+      {/snippet}
+    </Dialog.Overlay>
+    <Dialog.Content forceMount>
+      {#snippet child({ props, open: isOpen })}
+        {#if isOpen}
+          <form
+            method="POST"
+            action={confirmAction}
+            use:enhance
+            onsubmit={(e) => {
+              if (onconfirm) {
+                e.preventDefault();
+                onconfirm();
+                open = false;
+              }
+            }}
+            {...props}
+            class={inner({ class: className })}
+            style:min-width={minWidth}
+            style:max-width={maxWidth}
+            transition:enterExit={{
+              duration: 500,
+              easing: easeEmphasized,
+              mode: 'dialog-m3'
+            }}
+          >
+            {#if headline}
+              <Dialog.Title class={headlineContainer()}>
+                {headline}
+              </Dialog.Title>
+            {/if}
+            {#if supportingText}
+              <Dialog.Description class={supportingTextContainer()}>
+                {supportingText}
+              </Dialog.Description>
+            {/if}
+
+            {#if children}
+              <div class="flex w-full flex-col gap-4">
+                {@render children()}
+              </div>
+            {/if}
+
+            <div class={buttonContainer()}>
+              <Button
+                type="button"
+                variant="text"
+                data-cy="dialogue-cancel"
+                onclick={() => (open = false)}
+              >
+                {cancelText}
+              </Button>
+              <Button
+                type="submit"
+                {disabled}
+                {loading}
+                variant="filled"
+                data-cy="dialogue-confirm"
+              >
+                {confirmText}
+              </Button>
+            </div>
+          </form>
+        {/if}
+      {/snippet}
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>

package/dist/components/containers/dialogue/Dialogue.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { DialogueProps } from './types.js';
+/**
+ * Dialogs provide important information or prompt users for a decision.
+ *
+ * A dialog is a type of modal window that appears in front of app content
+ * to provide critical information or ask for a decision.
+ * Dialogs disable all app functionality when they appear, and remain
+ * on screen until confirmed, dismissed, or a required action has been taken.
+ *
+ * @see https://m3.material.io/components/dialogs/overview
+ */
+declare const Dialogue: import("svelte").Component<DialogueProps, {}, "open">;
+type Dialogue = ReturnType<typeof Dialogue>;
+export default Dialogue;

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

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

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

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

@@ -0,0 +1,51 @@
+import { type VariantProps } from 'tailwind-variants';
+export type DialogueVariants = VariantProps<typeof dialogue>;
+export declare const dialogue: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            headlineContainer?: import("tailwind-merge").ClassNameValue;
+            supportingTextContainer?: import("tailwind-merge").ClassNameValue;
+            buttonContainer?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            headlineContainer?: import("tailwind-merge").ClassNameValue;
+            supportingTextContainer?: import("tailwind-merge").ClassNameValue;
+            buttonContainer?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    inner: string;
+    headlineContainer: string;
+    supportingTextContainer: string;
+    buttonContainer: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            headlineContainer?: import("tailwind-merge").ClassNameValue;
+            supportingTextContainer?: import("tailwind-merge").ClassNameValue;
+            buttonContainer?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    inner: string;
+    headlineContainer: string;
+    supportingTextContainer: string;
+    buttonContainer: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    inner: string;
+    headlineContainer: string;
+    supportingTextContainer: string;
+    buttonContainer: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+export const dialogue = tv({
+    slots: {
+        base: 'fixed inset-0 z-40 bg-md-sys-color-scrim/32',
+        inner: 'fixed inset-0 z-50 m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-[28px] p-6 gap-4',
+        headlineContainer: 'md-sys-typescale-headline-small text-md-sys-color-on-surface',
+        supportingTextContainer: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
+        buttonContainer: 'mt-2 flex items-center justify-end gap-2'
+    }
+});

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

@@ -0,0 +1,46 @@
+import type { Dialog } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { DialogueVariants } from './theme.js';
+/**
+ * Props for the Dialogue component.
+ * Dialogs provide important information or prompt users for a decision.
+ */
+export type DialogueProps = DialogueVariants & Dialog.RootProps & {
+    /** Required form enhancement from superForms or SvelteKit. */
+    enhance: any;
+    /** Whether to deactivate the submit button */
+    disabled?: boolean;
+    /** Toggle handler for closing the dialogue when not using history state. */
+    toggle?: () => void;
+    /** Whether the dialogue is open. */
+    open?: boolean;
+    /** The main descriptive text content of the dialogue. */
+    supportingText?: string;
+    /** An optional headline for the dialogue. */
+    headline?: string;
+    /** The label for the confirmation button. */
+    confirmText: string;
+    /** The label for the cancel button. Defaults to 'Отмена'. */
+    cancelText?: string;
+    /**
+     * Optional additional content to be rendered between the supporting text
+     * and the action buttons.
+     */
+    children?: Snippet;
+    /** Optional form action for the confirm button. */
+    confirmAction?: string;
+    /** Whether the confirm button should show a loading state. */
+    loading?: boolean;
+    /** Whether to disable the portal (useful if the dialogue is inside a form). */
+    portalDisabled?: boolean;
+    /** Minimum width for the dialogue. */
+    minWidth?: string;
+    /** Maximum width for the dialogue. */
+    maxWidth?: string;
+    /** Additional props */
+    contentProps?: Dialog.ContentProps;
+    /** Class for the inner content */
+    class?: string;
+    /** Optional callback when the confirm button is clicked. */
+    onconfirm?: () => void;
+};

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

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

package/dist/components/containers/divider/Divider.svelte

@@ -0,0 +1,100 @@
+<!--
+@component
+Dividers are thin lines that group content in lists and layouts.
+
+Dividers help organize content by establishing hierarchy and making
+information easier to scan. They can be horizontal or vertical.
+Powered by bits-ui for accessibility.
+
+@see https://m3.material.io/components/divider/overview
+-->
+<script lang="ts">
+  import { Separator } from 'bits-ui';
+  import clsx from 'clsx';
+  import { hr } from './theme.js';
+  import type { HrProps } from './types.js';
+  import { linear } from '../../progress/_wavy.js';
+
+  let {
+    class: className,
+    children,
+    variant = 'full',
+    orientation = 'horizontal',
+    decorative = true,
+    ...restProps
+  }: HrProps = $props();
+
+  let styling = $derived(hr({ variant, orientation }));
+  let lineClass = $derived(
+    clsx(
+      'bg-md-sys-color-outline-variant',
+      orientation === 'horizontal' ? 'h-[1px] w-full' : 'w-[1px] h-full'
+    )
+  );
+  let insetClass = $derived(variant === 'inset' ? 'mr-2 ml-4' : '');
+
+  let host = $state<HTMLDivElement | null>(null);
+  let width = $state(0);
+  let waveHeight = 12;
+  let waveThickness = 1;
+  let waveAmp = $derived((waveHeight - waveThickness) / 2);
+  let waveCenter = $derived(waveHeight / 2);
+  let left = $derived(waveThickness * 0.5);
+  let right = $derived(Math.max(left, width - waveThickness * 0.5));
+  let wavePath = $derived(width > 0 ? linear(waveAmp, waveCenter, left, right, 0) : '');
+
+  $effect(() => {
+    if (variant !== 'wavy' || !host || typeof window === 'undefined') return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      width = Math.max(0, entry?.contentRect.width ?? 0);
+    });
+    observer.observe(host);
+    return () => {
+      observer.disconnect();
+    };
+  });
+</script>
+
+{#if variant === 'wavy'}
+  <div
+    {...restProps}
+    bind:this={host}
+    class={clsx('w-full', insetClass, className)}
+    role={decorative ? 'none' : 'separator'}
+    aria-orientation={orientation}
+  >
+    <svg
+      viewBox={`0 0 ${Math.max(width, 1)} ${waveHeight}`}
+      class="block w-full"
+      style={`height: ${waveHeight}px`}
+      role="presentation"
+      aria-hidden="true"
+    >
+      <path
+        fill="none"
+        stroke="var(--color-md-sys-color-outline-variant)"
+        stroke-width={waveThickness}
+        stroke-linecap="round"
+        d={wavePath}
+      />
+    </svg>
+  </div>
+{:else if children && orientation === 'horizontal'}
+  <div
+    {...restProps}
+    class={clsx('flex h-full w-full items-center gap-3', insetClass, className)}
+    role={decorative ? 'none' : 'separator'}
+    aria-orientation="horizontal"
+  >
+    <div class={lineClass}></div>
+    <span
+      class="md-sys-typescale-label-small text-md-sys-color-on-surface-variant whitespace-nowrap"
+    >
+      {@render children?.()}
+    </span>
+    <div class={lineClass}></div>
+  </div>
+{:else}
+  <Separator.Root {...restProps} {orientation} {decorative} class={clsx(styling, className)} />
+{/if}

package/dist/components/containers/divider/Divider.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HrProps } from './types.js';
+/**
+ * Dividers are thin lines that group content in lists and layouts.
+ *
+ * Dividers help organize content by establishing hierarchy and making
+ * information easier to scan. They can be horizontal or vertical.
+ * Powered by bits-ui for accessibility.
+ *
+ * @see https://m3.material.io/components/divider/overview
+ */
+declare const Divider: import("svelte").Component<HrProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

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

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

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

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

@@ -0,0 +1,33 @@
+import { type VariantProps } from 'tailwind-variants';
+export type HrVariants = VariantProps<typeof hr>;
+export declare const hr: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        inset: string;
+        full: string;
+        wavy: string;
+    };
+}, undefined, "bg-md-sys-color-outline-variant", {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        inset: string;
+        full: string;
+        wavy: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        inset: string;
+        full: string;
+        wavy: string;
+    };
+}, undefined, "bg-md-sys-color-outline-variant", unknown, unknown, undefined>>;

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

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+export const hr = tv({
+    base: 'bg-md-sys-color-outline-variant',
+    variants: {
+        orientation: {
+            horizontal: 'h-[1px] mt-1 mb-2 w-full',
+            vertical: 'w-[1px] self-stretch min-h-[1em]'
+        },
+        variant: {
+            inset: 'mr-2 ml-4',
+            full: '',
+            wavy: ''
+        }
+    }
+});

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

@@ -0,0 +1,27 @@
+import type { SeparatorRootProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HrVariants } from './theme.js';
+/**
+ * Props for the Divider component.
+ * Dividers are thin lines that group content in lists and layouts.
+ */
+export interface HrProps extends HrVariants, Omit<SeparatorRootProps, 'children' | 'orientation'> {
+    /**
+     * Optional content to be rendered within the divider (horizontal only).
+     * If provided, the divider will show the content centered between two lines.
+     */
+    children?: Snippet;
+    /**
+     * The orientation of the divider.
+     * @default 'horizontal'
+     */
+    orientation?: HrVariants['orientation'];
+    /**
+     * The visual variant of the divider.
+     * - 'full': Spans the full width/height of the container.
+     * - 'inset': Has margins on the sides.
+     * - 'wavy': Renders as a wavy line.
+     * @default 'full'
+     */
+    variant?: HrVariants['variant'];
+}

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

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

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

@@ -0,0 +1,15 @@
+export * from './app/index.js';
+export * from './bottom-sheet/index.js';
+export * from './context-menu/index.js';
+export * from './dialogue/index.js';
+export * from './divider/index.js';
+export * from './link-preview/index.js';
+export * from './list/index.js';
+export * from './menu-item/index.js';
+export * from './menu/index.js';
+export * from './merger/index.js';
+export * from './panes/index.js';
+export * from './popover/index.js';
+export * from './scroll-area/index.js';
+export * from './side-sheet/index.js';
+export * from './stack/index.js';

package/dist/components/containers/index.js

@@ -0,0 +1,17 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// folder re-exports (export everything from these folders)
+export * from './app/index.js';
+export * from './bottom-sheet/index.js';
+export * from './context-menu/index.js';
+export * from './dialogue/index.js';
+export * from './divider/index.js';
+export * from './link-preview/index.js';
+export * from './list/index.js';
+export * from './menu-item/index.js';
+export * from './menu/index.js';
+export * from './merger/index.js';
+export * from './panes/index.js';
+export * from './popover/index.js';
+export * from './scroll-area/index.js';
+export * from './side-sheet/index.js';
+export * from './stack/index.js';