@noxlovette/material 0.3.3 → 0.4.1

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

@@ -1,185 +0,0 @@
-import { tv } from 'tailwind-variants';
-export const splitPane = tv({
-    slots: {
-        left: 'top-0 bottom-0 z-20 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-30 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'
-            },
-            // In-flow flex row: left/right sit side by side and the left pane sticks
-            // as the page scrolls, instead of being fixed/absolute. Use for nested
-            // sidebars (e.g. a secondary docs nav) that live inside an already
-            // width-offset content column, where "viewport" would fix to the true
-            // left edge and "parent" would lose sticky-while-scrolling behaviour.
-            sticky: {
-                base: 'md:flex md:flex-row',
-                left: 'shrink-0 md:sticky md:top-0 md:self-start md:max-h-dvh',
-                handle: 'md:sticky md:top-0 md:ml-0 md:h-dvh md:translate-x-0 md:self-start',
-                right: 'md:ml-0 md:grow md:min-w-0'
-            }
-        },
-        full: {
-            true: {
-                left: 'md:bottom-[30px]',
-                right: 'md:min-h-[calc(100dvh-30px)]'
-            },
-            false: ''
-        },
-        rounded: {
-            true: {
-                left: 'md:rounded-t-lg md:rounded-b-lg',
-                right: 'md:rounded-b-lg'
-            },
-            false: {
-                left: '',
-                right: ''
-            }
-        }
-    },
-    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 w-full max-w-7xl mx-auto'
-    },
-    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: ''
-            }
-        },
-        padding: {
-            none: { content: 'p-0' },
-            sm: { content: 'p-3 md:p-4' },
-            md: { content: 'p-4 md:p-6 lg:p-8' },
-            lg: { content: 'p-6 md:p-8 lg:p-12' }
-        },
-        gap: {
-            none: { content: 'gap-0' },
-            sm: { content: 'gap-2' },
-            md: { content: 'gap-3' },
-            lg: { content: 'gap-4' },
-            xl: { content: 'gap-6' }
-        }
-    },
-    defaultVariants: {
-        rounded: true
-    }
-});
-export const supportingPane = tv({
-    slots: {
-        base: 'flex w-full flex-col lg:flex-row',
-        main: 'bg-md-sys-color-surface box-border grow order-2 lg:order-1',
-        supporting: 'text-md-sys-color-on-surface-container box-border order-1 lg:order-2 min-w-0 lg:w-80'
-    },
-    variants: {
-        anchor: {
-            // supporting scrolls independently; main scrolls the page
-            viewport: {
-                supporting: 'lg:fixed lg:top-[var(--supporting-pane-top,0px)] lg:bottom-0 lg:w-[var(--supporting-pane-width,320px)] lg:overflow-y-auto scrollbar-none'
-            },
-            // supporting sticks as user scrolls the page (classic sticky)
-            parent: {
-                supporting: 'lg:sticky lg:top-4 overflow-y-scroll'
-            }
-        },
-        position: {
-            right: {
-                base: 'lg:flex-row',
-                supporting: ''
-            },
-            left: {
-                base: 'lg:flex-row-reverse',
-                supporting: ''
-            }
-        },
-        centered: {
-            true: {
-                base: 'max-w-5xl mx-auto'
-            },
-            false: {
-                base: 'justify-between'
-            }
-        },
-        gap: {
-            none: { main: 'gap-0' },
-            sm: { main: 'gap-4' },
-            md: { main: 'gap-6' },
-            lg: { main: 'gap-8' }
-        },
-        full: {
-            true: { base: 'min-h-dvh' },
-            false: ''
-        },
-        rounded: {
-            true: {
-                main: 'rounded-t-lg'
-            },
-            false: {
-                main: ''
-            }
-        }
-    },
-    compoundVariants: [
-        {
-            anchor: 'viewport',
-            position: 'right',
-            class: {
-                supporting: 'lg:right-0',
-                main: 'lg:mr-[var(--supporting-pane-width,320px)]'
-            }
-        },
-        {
-            anchor: 'viewport',
-            position: 'left',
-            class: {
-                supporting: 'lg:left-0',
-                main: 'lg:ml-[var(--supporting-pane-width,320px)]'
-            }
-        }
-    ],
-    defaultVariants: {
-        anchor: 'parent',
-        position: 'right',
-        centered: true,
-        rounded: true,
-        gap: 'md'
-    }
-});

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

@@ -1,108 +0,0 @@
-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.
-     * - `viewport` — left pane fixes to the true browser edge (full-page app layouts).
-     * - `parent` — left pane is absolutely positioned within a `relative` ancestor
-     *   (embedded/contained demos, does not stick while scrolling).
-     * - `sticky` — left/right sit in normal flex flow and the left pane sticks as
-     *   the page scrolls. Use for a sidebar nested inside other offset content
-     *   (e.g. a secondary docs nav inside an already Rail-offset column), where
-     *   `viewport` would fix to the wrong edge and `parent` would lose sticky
-     *   behaviour. Typically paired with `resizable={false}`.
-     */
-    anchor?: SplitPaneVariants['anchor'];
-    /**
-     * Whether the split is user-draggable. Set to `false` for a static sidebar —
-     * hides the drag handle and skips width persistence.
-     * @default true
-     */
-    resizable?: boolean;
-    /**
-     * Which pane to show on mobile. On desktop both panes are always visible.
-     * @default 'right'
-     */
-    mobilePane?: 'left' | 'right';
-    /** 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 (desktop). */
-    collapsible?: boolean;
-    /** Show a bottom sheet on mobile instead of inline stacking. @default false */
-    mobileSheet?: boolean;
-    /** Material symbol name for the mobile sheet trigger button. @default 'info' */
-    mobileSheetIcon?: string;
-    /** Extra class for the mobile trigger button (use to position above navbars). */
-    mobileTriggerClass?: string;
-    /**
-     * 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/nav/rail/RailNavContext.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { setContext } from 'svelte';
-  import type { Snippet } from 'svelte';
-
-  let { children, mobile = false }: { children: Snippet; mobile?: boolean } = $props();
-
-  setContext('railMode', {
-    get mobile() {
-      return mobile;
-    }
-  });
-</script>
-
-{@render children()}

package/dist/components/nav/rail/RailNavContext.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    mobile?: boolean;
-};
-declare const RailNavContext: import("svelte").Component<$$ComponentProps, {}, "">;
-type RailNavContext = ReturnType<typeof RailNavContext>;
-export default RailNavContext;