@noxlovette/material 0.1.0

package/dist/components/nav/appbar/theme.d.ts

@@ -0,0 +1,99 @@
+import { type VariantProps } from 'tailwind-variants';
+export type AppbarVariants = VariantProps<typeof appbar>;
+export declare const appbar: import("tailwind-variants").TVReturnType<{
+    scrolled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    searchContainer: {
+        true: string;
+        false: string;
+    };
+    noTrailing: {
+        true: {
+            textContainer: string;
+        };
+        false: string;
+    };
+    noLeading: {
+        true: {
+            textContainer: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    textContainer: string;
+    title: string;
+    subtitle: string;
+    leading: string;
+    trailing: string;
+}, undefined, {
+    scrolled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    searchContainer: {
+        true: string;
+        false: string;
+    };
+    noTrailing: {
+        true: {
+            textContainer: string;
+        };
+        false: string;
+    };
+    noLeading: {
+        true: {
+            textContainer: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    textContainer: string;
+    title: string;
+    subtitle: string;
+    leading: string;
+    trailing: string;
+}, import("tailwind-variants").TVReturnType<{
+    scrolled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    searchContainer: {
+        true: string;
+        false: string;
+    };
+    noTrailing: {
+        true: {
+            textContainer: string;
+        };
+        false: string;
+    };
+    noLeading: {
+        true: {
+            textContainer: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    textContainer: string;
+    title: string;
+    subtitle: string;
+    leading: string;
+    trailing: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/nav/appbar/theme.js

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants';
+export const appbar = tv({
+    slots: {
+        base: 'py-1 fixed top-0 left-0 w-full md:hidden flex z-40 items-center justify-between',
+        textContainer: 'flex flex-col items-start gap-0.5 grow',
+        title: 'text-md-sys-color-on-surface md-sys-typescale-title-large line-clamp-1   capitalize ',
+        subtitle: 'text-md-sys-color-on-surface-variant md-sys-typescale-label-medium',
+        leading: 'text-md-sys-color-on-surface ml-0.5',
+        trailing: 'text-md-sys-color-on-surface-variant mr-4'
+    },
+    variants: {
+        scrolled: {
+            true: { base: 'shadow-elevation-2 bg-md-sys-color-surface-container' },
+            false: { base: 'shadow-elevation-0 bg-md-sys-color-surface' }
+        },
+        searchContainer: {
+            true: '',
+            false: ''
+        },
+        noTrailing: {
+            true: {
+                textContainer: 'pr-2'
+            },
+            false: ''
+        },
+        noLeading: {
+            true: {
+                textContainer: 'pl-6'
+            },
+            false: ''
+        }
+    }
+});

package/dist/components/nav/appbar/types.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { AppbarVariants } from './theme.js';
+/**
+ * Props for the AppBar component.
+ */
+export type AppBarProps = AppbarVariants & HTMLAttributes<HTMLElementTagNameMap['nav']> & {
+    /** The content to be rendered inside the app bar. */
+    children?: Snippet;
+    /** The main title of the app bar. */
+    title: string;
+    /** An optional subtitle displayed below the title. */
+    subtitle?: string;
+    /** A snippet to be rendered on the left side (e.g., navigation icon). */
+    leading?: Snippet;
+    /** A snippet to be rendered on the right side (e.g., action icons). */
+    trailing?: Snippet;
+    /** Whether to show a back button in the leading section. */
+    showBack?: boolean;
+};

package/dist/components/nav/appbar/types.js

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

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

@@ -0,0 +1,5 @@
+export * from './appbar/index.js';
+export * from './navbar/index.js';
+export * from './rail/index.js';
+export * from './tabs/index.js';
+export * from './types.js';

package/dist/components/nav/index.js

@@ -0,0 +1,8 @@
+// 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 './appbar/index.js';
+export * from './navbar/index.js';
+export * from './rail/index.js';
+export * from './tabs/index.js';
+// re-export TS/JS modules from this folder
+export * from './types.js';

package/dist/components/nav/navbar/Navbar.svelte

@@ -0,0 +1,33 @@
+<!--
+@component
+Material 3 Navigation Bar.
+
+Navigation bars offer a convenient way to switch between primary destinations in an app.
+They are typically used at the bottom of the screen for ergonomics and easy reach on mobile devices.
+
+This component takes NavbarItems as its children
+
+@see https://m3.material.io/components/navigation-bar/overview
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { navbar } from './theme.js';
+  import { NavigationMenu } from 'bits-ui';
+
+  const { children, fab }: { children: Snippet; fab?: Snippet } = $props();
+
+  const { base, items, fab: fabCls } = $derived(navbar());
+</script>
+
+<div class={base()}>
+  {#if fab}
+    <div class={fabCls()}>
+      {@render fab?.()}
+    </div>
+  {/if}
+  <NavigationMenu.Root orientation="horizontal" class="flex w-full">
+    <NavigationMenu.List class={items()}>
+      {@render children()}
+    </NavigationMenu.List>
+  </NavigationMenu.Root>
+</div>

package/dist/components/nav/navbar/Navbar.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    fab?: Snippet;
+};
+/**
+ * Material 3 Navigation Bar.
+ *
+ * Navigation bars offer a convenient way to switch between primary destinations in an app.
+ * They are typically used at the bottom of the screen for ergonomics and easy reach on mobile devices.
+ *
+ * This component takes NavbarItems as its children
+ *
+ * @see https://m3.material.io/components/navigation-bar/overview
+ */
+declare const Navbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/components/nav/navbar/NavbarItem.svelte

@@ -0,0 +1,66 @@
+<!--
+@component
+Material 3 Navigation Bar Item.
+
+A single destination within a navigation bar.
+-->
+<script lang="ts">
+  import { page } from '$app/state';
+  import type { NavItemProps } from './types.js';
+  import { navitem } from './theme.js';
+  import { Icon, Layer } from '../../../utils/index.js';
+  import Badge from '../../badge/Badge.svelte';
+  import { NavigationMenu } from 'bits-ui';
+  import clsx from 'clsx';
+
+  let {
+    href = '/',
+    label,
+    badge = 0,
+    class: className,
+    iconProps,
+    ...rest
+  }: NavItemProps = $props();
+
+  const isActive = $derived(
+    page.url.pathname === href ||
+      (href !== '/' && page.url.href.startsWith(href)) ||
+      page.url.href == href
+  );
+
+  const {
+    base,
+    content,
+    icon,
+    iconContainer,
+    label: labelClass
+  } = $derived(navitem({ active: isActive }));
+
+  const rootClass = $derived(base({ class: clsx(className) }));
+</script>
+
+<NavigationMenu.Item class="flex h-full flex-1 justify-center">
+  <NavigationMenu.Link active={isActive} {href}>
+    {#snippet child({ props })}
+      <a {...props} {...rest} class={rootClass}>
+        <div class={content()}>
+          <div class={iconContainer()}>
+            <Layer />
+            <Icon
+              {...iconProps}
+              class={icon()}
+              wght={isActive ? 600 : 400}
+              fill={isActive ? 1 : 0}
+            />
+            {#if badge}
+              <Badge size={badge === -1 ? 'sm' : 'lg'} number={badge}></Badge>
+            {/if}
+          </div>
+          <span class={labelClass()}>
+            {label}
+          </span>
+        </div>
+      </a>
+    {/snippet}
+  </NavigationMenu.Link>
+</NavigationMenu.Item>

package/dist/components/nav/navbar/NavbarItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { NavItemProps } from './types.js';
+/**
+ * Material 3 Navigation Bar Item.
+ *
+ * A single destination within a navigation bar.
+ */
+declare const NavbarItem: import("svelte").Component<NavItemProps, {}, "">;
+type NavbarItem = ReturnType<typeof NavbarItem>;
+export default NavbarItem;

package/dist/components/nav/navbar/index.d.ts

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

package/dist/components/nav/navbar/index.js

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

package/dist/components/nav/navbar/theme.d.ts

@@ -0,0 +1,95 @@
+export declare const navbar: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            items?: import("tailwind-merge").ClassNameValue;
+            fab?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            items?: import("tailwind-merge").ClassNameValue;
+            fab?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    items: string;
+    fab: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            items?: import("tailwind-merge").ClassNameValue;
+            fab?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    items: string;
+    fab: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    items: string;
+    fab: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const navitem: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            content: string;
+            label: string;
+            iconContainer: string;
+        };
+        false: {
+            content: string;
+            label: string;
+            iconContainer: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    iconContainer: string;
+    icon: string;
+    label: string;
+}, undefined, {
+    active: {
+        true: {
+            content: string;
+            label: string;
+            iconContainer: string;
+        };
+        false: {
+            content: string;
+            label: string;
+            iconContainer: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    iconContainer: string;
+    icon: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            content: string;
+            label: string;
+            iconContainer: string;
+        };
+        false: {
+            content: string;
+            label: string;
+            iconContainer: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    iconContainer: string;
+    icon: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/nav/navbar/theme.js

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants';
+export const navbar = tv({
+    slots: {
+        base: 'shadow-elevation-2 bg-md-sys-color-surface-container relative z-20 flex h-20 fixed bottom-0 w-full left-0 justify-around py-3 md:hidden',
+        items: 'flex justify-around w-full',
+        fab: 'bottom-24 right-4 absolute'
+    }
+});
+export const navitem = tv({
+    slots: {
+        base: 'group relative flex flex-1 flex-col items-center justify-center min-w-0 max-w-[168px] h-full transition-colors',
+        content: 'flex flex-col items-center justify-center gap-1 w-full',
+        iconContainer: 'relative flex items-center justify-center h-8 w-16 rounded-full transition-colors duration-200 ease-in-out',
+        icon: 'text-[24px]',
+        label: 'md-sys-typescale-label-medium truncate w-full text-center'
+    },
+    variants: {
+        active: {
+            true: {
+                content: 'text-md-sys-color-on-secondary-container',
+                label: 'font-bold text-md-sys-color-on-surface',
+                iconContainer: 'bg-md-sys-color-secondary-container'
+            },
+            false: {
+                content: 'text-md-sys-color-on-surface-variant',
+                label: 'text-md-sys-color-on-surface-variant',
+                iconContainer: 'group-hover:bg-md-sys-color-surface-variant/10'
+            }
+        }
+    }
+});

package/dist/components/nav/navbar/types.d.ts

@@ -0,0 +1,29 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { VariantProps } from 'tailwind-variants';
+import type { navbar, navitem } from './theme.js';
+export type NavItemVariants = VariantProps<typeof navitem>;
+export type NavBarVariants = VariantProps<typeof navbar>;
+/**
+ * Props for the NavbarItem component.
+ */
+export type NavItemProps = NavItemVariants & HTMLAttributes<HTMLAnchorElement> & {
+    /** The text label for the item. */
+    label: string;
+    /** An optional numeric badge to display on the icon. Use -1 for a small dot. */
+    badge?: number;
+    /** The URL this item points to. */
+    href: string;
+    /** Props passed to the Icon component. */
+    iconProps: IconProps;
+};
+/**
+ * Props for the Navbar component.
+ */
+export type NavBarProps = NavBarVariants & HTMLAttributes<HTMLDivElement> & {
+    /** The navigation items. */
+    children: Snippet;
+    /** An optional Floating Action Button snippet. */
+    fab?: Snippet;
+};

package/dist/components/nav/navbar/types.js

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

package/dist/components/nav/rail/Rail.svelte

@@ -0,0 +1,75 @@
+<!--
+@component
+Material 3 Navigation Rail.
+
+Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.
+
+@see https://m3.material.io/components/navigation-rail/overview
+-->
+<script lang="ts">
+  import { clickOutside } from '../../../actions/index.js';
+  import clsx from 'clsx';
+  import type { RailProps } from './types';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import { rail } from './theme';
+  import { NavigationMenu } from 'bits-ui';
+
+  let {
+    children,
+    rounded = false,
+    expandable = true,
+    fab,
+    collapsed = $bindable(true),
+    anchor = 'viewport',
+    railTop = 0,
+    class: className
+  }: RailProps = $props();
+
+  const expanded = $derived(!collapsed);
+  const { base, items, ghost, scrim } = $derived(rail({ expanded, anchor, rounded }));
+  const railBaseClass = $derived(`${base({ class: clsx(className) })} rail-base`);
+  const toggleClass = $derived(collapsed ? 'cursor-e-resize' : 'cursor-w-resize');
+  const cssVars = $derived(`--rail-top: ${railTop}px;`);
+</script>
+
+<div class={ghost()}></div>
+
+<div class={`${scrim()} rail-scrim`} data-expanded={expanded}></div>
+<div
+  class={railBaseClass}
+  style={cssVars}
+  data-expanded={expanded}
+  use:clickOutside={() => {
+    if (expanded) collapsed = true;
+  }}
+>
+  {#if expandable}
+    <ButtonIcon
+      type="button"
+      tooltipContent={collapsed ? 'Открыть' : 'Закрыть'}
+      iconProps={{ name: `${collapsed ? 'menu' : 'menu_open'}` }}
+      class={toggleClass}
+      onclick={() => (collapsed = !collapsed)}
+    />
+  {/if}
+
+  {@render fab?.()}
+
+  <NavigationMenu.Root orientation="vertical" class="w-full">
+    <NavigationMenu.List class={`${items()} rail-items`}>
+      {@render children?.()}
+    </NavigationMenu.List>
+  </NavigationMenu.Root>
+</div>
+
+<style>
+  .rail-scrim {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .rail-scrim[data-expanded='true'] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { RailProps } from './types';
+/**
+ * Material 3 Navigation Rail.
+ *
+ * Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.
+ *
+ * @see https://m3.material.io/components/navigation-rail/overview
+ */
+declare const Rail: import("svelte").Component<RailProps, {}, "collapsed">;
+type Rail = ReturnType<typeof Rail>;
+export default Rail;

package/dist/components/nav/rail/RailItem.svelte

@@ -0,0 +1,104 @@
+<!--
+@component
+Material 3 Navigation Rail Item.
+
+A single destination within a navigation rail.
+-->
+<script lang="ts">
+  import { page } from '$app/state';
+  import type { RailItemProps } from './types.js';
+  import { railElement } from './theme.js';
+  import { Icon, Layer } from '../../../utils/index.js';
+  import Badge from '../../badge/Badge.svelte';
+  import { NavigationMenu } from 'bits-ui';
+
+  let {
+    href = '/',
+    name,
+    external = false,
+    badge = 0,
+    class: className,
+    selected,
+    disabled,
+    collapsed = true,
+    iconProps,
+    ...rest
+  }: RailItemProps = $props();
+
+  const isDisabled = $derived(!!disabled);
+  const target = $derived(!isDisabled && external ? '_blank' : undefined);
+  const rel = $derived(!isDisabled && external ? 'noopener noreferrer' : undefined);
+  const hrefValue = $derived(isDisabled ? undefined : href);
+  const ariaDisabled = $derived(isDisabled ? true : undefined);
+  const tabIndex = $derived(isDisabled ? -1 : undefined);
+  const hrefPathname = $derived.by(() => {
+    try {
+      return new URL(href).pathname;
+    } catch {
+      return href;
+    }
+  });
+  const isActive = $derived(
+    selected ||
+      page.url.pathname === hrefPathname ||
+      (hrefPathname !== '/' && page.url.pathname.startsWith(hrefPathname + '/'))
+  );
+  const {
+    base,
+    content,
+    icon,
+    iconContainer,
+    label: labelClass
+  } = $derived(
+    railElement({
+      active: isActive,
+      expanded: !collapsed,
+      disabled: isDisabled
+    })
+  );
+  const rootClass = $derived([base(), className].filter(Boolean).join(' '));
+
+  function handleClick(event: MouseEvent) {
+    if (isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+</script>
+
+<NavigationMenu.Item
+  class={['flex w-full items-center', collapsed && 'justify-center'].filter(Boolean).join(' ')}
+>
+  <NavigationMenu.Link active={isActive} href={hrefValue}>
+    {#snippet child({ props })}
+      <a
+        {...props}
+        {...rest}
+        {target}
+        {rel}
+        aria-disabled={ariaDisabled}
+        tabindex={tabIndex}
+        onclick={handleClick}
+        class={rootClass}
+      >
+        <div class={content()}>
+          <div class={iconContainer()}>
+            <Layer />
+            <Icon
+              {...iconProps}
+              class={icon()}
+              wght={isActive ? 600 : 400}
+              fill={isActive ? 1 : 0}
+            />
+            {#if badge}
+              <Badge size={badge === -1 ? 'sm' : 'lg'} number={badge}></Badge>
+            {/if}
+          </div>
+          <p class={labelClass()}>
+            {name}
+          </p>
+        </div>
+      </a>
+    {/snippet}
+  </NavigationMenu.Link>
+</NavigationMenu.Item>

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

@@ -0,0 +1,9 @@
+import type { RailItemProps } from './types.js';
+/**
+ * Material 3 Navigation Rail Item.
+ *
+ * A single destination within a navigation rail.
+ */
+declare const RailItem: import("svelte").Component<RailItemProps, {}, "">;
+type RailItem = ReturnType<typeof RailItem>;
+export default RailItem;