@noxlovette/material 0.1.0

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

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

package/dist/components/nav/rail/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 Rail } from './Rail.svelte';
+export { default as RailItem } from './RailItem.svelte';

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

@@ -0,0 +1,218 @@
+import { type VariantProps } from 'tailwind-variants';
+export type RailVariants = VariantProps<typeof rail>;
+export type RailItemVariants = VariantProps<typeof railElement>;
+export declare const rail: import("tailwind-variants").TVReturnType<{
+    anchor: {
+        viewport: {
+            base: string;
+            scrim: string;
+        };
+        parent: {
+            base: string;
+            scrim: string;
+        };
+    };
+    expanded: {
+        true: {
+            base: string;
+            ghost: string;
+            scrim: string;
+        };
+        false: {
+            base: string;
+            items: string;
+            ghost: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    items: string;
+    ghost: string;
+    scrim: string;
+}, undefined, {
+    anchor: {
+        viewport: {
+            base: string;
+            scrim: string;
+        };
+        parent: {
+            base: string;
+            scrim: string;
+        };
+    };
+    expanded: {
+        true: {
+            base: string;
+            ghost: string;
+            scrim: string;
+        };
+        false: {
+            base: string;
+            items: string;
+            ghost: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    items: string;
+    ghost: string;
+    scrim: string;
+}, import("tailwind-variants").TVReturnType<{
+    anchor: {
+        viewport: {
+            base: string;
+            scrim: string;
+        };
+        parent: {
+            base: string;
+            scrim: string;
+        };
+    };
+    expanded: {
+        true: {
+            base: string;
+            ghost: string;
+            scrim: string;
+        };
+        false: {
+            base: string;
+            items: string;
+            ghost: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    items: string;
+    ghost: string;
+    scrim: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const railElement: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            content: string;
+            label: string;
+            iconContainer: string;
+        };
+        false: {
+            content: string;
+            iconContainer: string;
+        };
+    };
+    expanded: {
+        true: {
+            base: string;
+            content: string;
+            iconContainer: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            content: string;
+            iconContainer: string;
+            label: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    iconContainer: string;
+    icon: string;
+    label: string;
+}, undefined, {
+    active: {
+        true: {
+            content: string;
+            label: string;
+            iconContainer: string;
+        };
+        false: {
+            content: string;
+            iconContainer: string;
+        };
+    };
+    expanded: {
+        true: {
+            base: string;
+            content: string;
+            iconContainer: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            content: string;
+            iconContainer: string;
+            label: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: 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;
+            iconContainer: string;
+        };
+    };
+    expanded: {
+        true: {
+            base: string;
+            content: string;
+            iconContainer: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            content: string;
+            iconContainer: string;
+            label: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    iconContainer: string;
+    icon: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,107 @@
+import { tv } from 'tailwind-variants';
+export const rail = tv({
+    slots: {
+        base: 'py-12 hidden bg-md-sys-color-surface-container z-20 flex-col md:flex gap-6 transition-[width,padding,background-color] duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)] overflow-x-hidden',
+        items: 'flex flex-col gap-3 pt-6 scrollbar-none w-full',
+        ghost: 'hidden md:block shrink-0 transition-[width] duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
+        scrim: 'xl:hidden inset-0 -z-10 transition-opacity duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]'
+    },
+    variants: {
+        anchor: {
+            viewport: {
+                base: 'fixed top-[var(--rail-top,0px)] bottom-0 left-0',
+                scrim: 'fixed'
+            },
+            parent: {
+                base: 'absolute top-[var(--rail-top,0px)] bottom-0 left-0',
+                scrim: 'absolute'
+            }
+        },
+        expanded: {
+            true: {
+                base: 'pl-9 w-60 items-start bg-md-sys-color-surface-container-highest xl:bg-md-sys-color-surface-container rounded-r-lg',
+                ghost: 'w-24 xl:w-60',
+                scrim: 'z-20 bg-black/40'
+            },
+            false: {
+                base: 'w-24 items-center',
+                items: 'items-center',
+                ghost: 'w-24'
+            }
+        },
+        rounded: {
+            true: {
+                base: 'rounded-xl'
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        anchor: 'viewport'
+    }
+});
+export const railElement = tv({
+    slots: {
+        base: 'group relative z-30 flex w-full transition-all duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
+        content: 'flex items-center min-w-0 rounded-full gap-0.5 py-1.5 transition-all duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
+        iconContainer: 'relative rounded-full items-center justify-center inline-flex transition-all duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
+        icon: 'text-[24px] transition-all duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
+        label: 'transition-all duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)] whitespace-nowrap'
+    },
+    variants: {
+        active: {
+            true: {
+                content: 'text-md-sys-color-on-secondary-container',
+                label: 'font-bold',
+                iconContainer: 'group-hover:text-md-sys-color-secondary  bg-md-sys-color-secondary-container'
+            },
+            false: {
+                content: 'text-md-sys-color-on-surface-variant',
+                iconContainer: ''
+            }
+        },
+        expanded: {
+            true: {
+                base: 'justify-start',
+                content: 'p-4 gap-3',
+                iconContainer: '',
+                label: 'md-sys-typescale-label-large'
+            },
+            false: {
+                base: 'text-center justify-center',
+                content: 'flex-col',
+                iconContainer: 'py-1.5 px-4',
+                label: 'md-sys-typescale-label-medium'
+            }
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-38'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            expanded: true,
+            active: true,
+            class: {
+                iconContainer: 'bg-transparent',
+                content: 'bg-md-sys-color-secondary-container'
+            }
+        },
+        {
+            expanded: true,
+            active: false,
+            class: {
+                content: 'group-hover:bg-md-sys-color-surface-variant'
+            }
+        },
+        {
+            expanded: false,
+            active: false,
+            class: {
+                iconContainer: 'group-hover:bg-md-sys-color-surface-variant'
+            }
+        }
+    ]
+});

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

@@ -0,0 +1,44 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { RailItemVariants, RailVariants } from './theme.js';
+/**
+ * Props for the RailItem component.
+ */
+export interface RailItemProps extends RailItemVariants, HTMLAttributes<HTMLAnchorElement> {
+    /** Props passed to the Icon component. */
+    iconProps: IconProps;
+    /** An optional numeric badge to display on the icon. Use -1 for a small dot. */
+    badge?: number;
+    /** Whether the link is external. */
+    external?: boolean;
+    /** The URL this item points to. */
+    href: string;
+    /** Whether the item is manually forced into a selected state. */
+    selected?: boolean;
+    /** The text label for the item. */
+    name: string;
+    /** Whether the rail is collapsed, affecting label visibility. */
+    collapsed?: boolean;
+    /** Whether the item is disabled. */
+    disabled?: boolean;
+}
+/**
+ * Props for the Rail component.
+ */
+export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
+    /** The navigation items. */
+    children: Snippet;
+    /** @deprecated */
+    showHelp?: boolean;
+    /** Whether the rail can be expanded. */
+    expandable?: boolean;
+    /** An optional Floating Action Button snippet. */
+    fab?: Snippet;
+    /** Whether the rail is currently collapsed. */
+    collapsed?: boolean;
+    /** Where the rail should be anchored. */
+    anchor?: RailVariants['anchor'];
+    /** Top offset in px for viewport/parent anchor (e.g. height of a top bar). Default 0. */
+    railTop?: number;
+};

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

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

package/dist/components/nav/tabs/Tab.svelte

@@ -0,0 +1,49 @@
+<!--
+@component
+A single tab trigger within a TabHolder.
+Renders as <a> when href is provided (navigation tabs),
+otherwise as <button> (content-panel tabs).
+-->
+<script lang="ts">
+  import { Icon, Layer } from '../../../utils/index.js';
+  import { tab } from './theme.js';
+  import type { TabProps } from './types.js';
+  import { Tabs } from 'bits-ui';
+  import clsx from 'clsx';
+
+  const {
+    iconProps,
+    name,
+    value,
+    href,
+    variant = 'primary',
+    disabled,
+    class: className
+  }: TabProps = $props();
+
+  const { base, icon: iconCls, label: labelCls } = $derived(tab({ variant, disabled }));
+  const cls = $derived(base({ class: clsx(className) }));
+</script>
+
+<Tabs.Trigger value={value ?? ''} {disabled}>
+  {#snippet child({ props })}
+    {@const { type: _type, disabled: _disabled, ...anchorProps } = props}
+    {#if href}
+      <a {href} {...anchorProps} class={cls} aria-disabled={disabled || undefined}>
+        {#if variant === 'primary' && iconProps}
+          <Icon {...iconProps} class={iconCls()} />
+        {/if}
+        <span class={labelCls()}>{name}</span>
+        <Layer />
+      </a>
+    {:else}
+      <button type="button" {...props} class={cls}>
+        {#if variant === 'primary' && iconProps}
+          <Icon {...iconProps} class={iconCls()} />
+        {/if}
+        <span class={labelCls()}>{name}</span>
+        <Layer />
+      </button>
+    {/if}
+  {/snippet}
+</Tabs.Trigger>

package/dist/components/nav/tabs/Tab.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TabProps } from './types.js';
+/**
+ * A single tab trigger within a TabHolder.
+ * Renders as <a> when href is provided (navigation tabs),
+ * otherwise as <button> (content-panel tabs).
+ */
+declare const Tab: import("svelte").Component<TabProps, {}, "">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;

package/dist/components/nav/tabs/TabContent.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { TabContentProps } from './types.js';
+  import { Tabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  const { value, class: className, children }: TabContentProps & { children?: Snippet } = $props();
+</script>
+
+<Tabs.Content {value} class={className}>
+  {@render children?.()}
+</Tabs.Content>

package/dist/components/nav/tabs/TabContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TabContentProps } from './types.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = TabContentProps & {
+    children?: Snippet;
+};
+declare const TabContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabContent = ReturnType<typeof TabContent>;
+export default TabContent;

package/dist/components/nav/tabs/TabHolder.svelte

@@ -0,0 +1,44 @@
+<!--
+@component
+Material 3 Tabs container.
+
+Wraps bits-ui Tabs.Root + Tabs.List and renders a sliding active indicator.
+Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
+
+@see https://m3.material.io/components/tabs/overview
+-->
+<script lang="ts">
+  import { tabHolder } from './theme.js';
+  import type { TabHolderProps } from './types.js';
+  import Tab from './Tab.svelte';
+  import { Tabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  let {
+    items,
+    value = $bindable(items[0]?.value ?? ''),
+    onValueChange,
+    activationMode = 'automatic',
+    variant = 'primary',
+    children
+  }: TabHolderProps & { children?: Snippet } = $props();
+
+  const idx = $derived(items.findIndex((i) => i.value === value));
+  const count = $derived(items.length);
+  const { base, bar } = tabHolder();
+</script>
+
+<Tabs.Root bind:value {onValueChange} {activationMode}>
+  <Tabs.List class={base()}>
+    {#each items as item}
+      <Tab {...item} {variant} />
+    {/each}
+
+    <div
+      class={bar()}
+      style="width: calc(100% / {count}); transform: translateX(calc({idx} * 100%));"
+    ></div>
+  </Tabs.List>
+
+  {@render children?.()}
+</Tabs.Root>

package/dist/components/nav/tabs/TabHolder.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { TabHolderProps } from './types.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = TabHolderProps & {
+    children?: Snippet;
+};
+/**
+ * Material 3 Tabs container.
+ *
+ * Wraps bits-ui Tabs.Root + Tabs.List and renders a sliding active indicator.
+ * Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
+ *
+ * @see https://m3.material.io/components/tabs/overview
+ */
+declare const TabHolder: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TabHolder = ReturnType<typeof TabHolder>;
+export default TabHolder;

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

@@ -0,0 +1,5 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Tab } from './Tab.svelte';
+export { default as TabContent } from './TabContent.svelte';
+export { default as TabHolder } from './TabHolder.svelte';

package/dist/components/nav/tabs/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 Tab } from './Tab.svelte';
+export { default as TabContent } from './TabContent.svelte';
+export { default as TabHolder } from './TabHolder.svelte';

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

@@ -0,0 +1,92 @@
+import { type VariantProps } from 'tailwind-variants';
+export type TabVariants = VariantProps<typeof tab>;
+export type TabHolderVariants = VariantProps<typeof tabHolder>;
+export declare const tabHolder: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    bar: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    bar: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    bar: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const tab: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+            icon: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+    icon: string;
+}, undefined, {
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+            icon: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+            icon: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,37 @@
+import { tv } from 'tailwind-variants';
+export const tabHolder = tv({
+    slots: {
+        base: 'relative flex w-full bg-md-sys-color-surface',
+        bar: 'absolute bottom-0 h-[3px] rounded-t-full bg-md-sys-color-primary transition-transform duration-200 ease-out'
+    }
+});
+export const tab = tv({
+    slots: {
+        base: [
+            'relative flex w-full cursor-pointer flex-col items-center justify-center',
+            'data-[state=active]:text-md-sys-color-primary',
+            'data-[state=inactive]:text-md-sys-color-on-surface-variant'
+        ].join(' '),
+        label: 'md-sys-typescale-title-small',
+        icon: 'size-6 text-[24px]'
+    },
+    variants: {
+        variant: {
+            primary: {
+                base: 'h-16 gap-1 py-3'
+            },
+            secondary: {
+                base: 'h-12 py-3',
+                icon: 'hidden'
+            }
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-38'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'primary'
+    }
+});