@noxlovette/material 0.1.0

package/dist/components/forms/tooltip/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 Tooltip } from './Tooltip.svelte';

package/dist/components/forms/tooltip/theme.d.ts

@@ -0,0 +1,105 @@
+import { type VariantProps } from 'tailwind-variants';
+export type TooltipVariants = VariantProps<typeof tooltip>;
+export declare const tooltip: import("tailwind-variants").TVReturnType<{
+    variant: {
+        rich: {
+            base: string;
+        };
+        snack: {
+            base: string;
+            supportingText: string;
+            textContainer: string;
+        };
+    };
+    style: {
+        container: {
+            base: string;
+            textContainer: string;
+        };
+        primary: {
+            base: string;
+            textContainer: string;
+        };
+        secondary: {
+            base: string;
+            textContainer: string;
+        };
+        tertiary: {
+            base: string;
+            textContainer: string;
+        };
+    };
+}, {
+    base: string;
+    subhead: string;
+    supportingText: string;
+    trigger: string;
+}, undefined, {
+    variant: {
+        rich: {
+            base: string;
+        };
+        snack: {
+            base: string;
+            supportingText: string;
+            textContainer: string;
+        };
+    };
+    style: {
+        container: {
+            base: string;
+            textContainer: string;
+        };
+        primary: {
+            base: string;
+            textContainer: string;
+        };
+        secondary: {
+            base: string;
+            textContainer: string;
+        };
+        tertiary: {
+            base: string;
+            textContainer: string;
+        };
+    };
+}, {
+    base: string;
+    subhead: string;
+    supportingText: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        rich: {
+            base: string;
+        };
+        snack: {
+            base: string;
+            supportingText: string;
+            textContainer: string;
+        };
+    };
+    style: {
+        container: {
+            base: string;
+            textContainer: string;
+        };
+        primary: {
+            base: string;
+            textContainer: string;
+        };
+        secondary: {
+            base: string;
+            textContainer: string;
+        };
+        tertiary: {
+            base: string;
+            textContainer: string;
+        };
+    };
+}, {
+    base: string;
+    subhead: string;
+    supportingText: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/forms/tooltip/theme.js

@@ -0,0 +1,52 @@
+import { tv } from 'tailwind-variants';
+export const tooltip = tv({
+    slots: {
+        base: 'min-w-60 py-3 px-4  shadow-elevation-2 rounded-md relative z-[100] pointer-events-auto',
+        subhead: '',
+        supportingText: '',
+        trigger: 'relative inline-flex'
+    },
+    variants: {
+        variant: {
+            rich: {
+                base: 'flex flex-col gap-3'
+            },
+            snack: {
+                base: 'inlie-flex min-w-0 max-w-50 bg-md-sys-color-inverse-surface text-md-sys-color-inverse-on-surface md-sys-typescale-body-small px-3 py-2 shadow-elevation-3 before:rounded-md',
+                supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-small',
+                textContainer: ''
+            }
+        },
+        style: {
+            container: {
+                base: 'bg-md-sys-color-surface-container',
+                textContainer: 'text-md-sys-on-surface-variant'
+            },
+            primary: {
+                base: 'bg-md-sys-color-primary-container',
+                textContainer: 'text-md-sys-on-primary-container'
+            },
+            secondary: {
+                base: 'bg-md-sys-color-secondary-container',
+                textContainer: 'text-md-sys-on-secondary-container'
+            },
+            tertiary: {
+                base: 'bg-md-sys-color-tertiary-container',
+                textContainer: 'text-md-sys-on-tertiary-container'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'snack',
+            class: {
+                base: 'bg-md-sys-color-inverse-surface text-md-sys-color-inverse-on-surface',
+                textContainer: '',
+                supportingText: 'text-md-sys-color-inverse-on-surface'
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: 'rich'
+    }
+});

package/dist/components/forms/tooltip/types.d.ts

@@ -0,0 +1,29 @@
+import type { TooltipContentProps, TooltipRootProps, TooltipTriggerProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { TooltipVariants } from './theme.js';
+export type TooltipProps = TooltipVariants & TooltipRootProps & {
+    /** Larger, emphasized text displayed at the top of the tooltip (Rich tooltips only) */
+    subhead?: string | null;
+    /** Content for rich tooltips */
+    children?: Snippet;
+    /** Secondary text providing additional context */
+    supportingText?: string | null;
+    /** The element that triggers the tooltip on hover or focus */
+    trigger?: Snippet;
+    /** CSS class applied to the trigger element */
+    triggerClass?: string;
+    /** Additional props passed to the underlying Tooltip.Trigger component */
+    triggerProps?: TooltipTriggerProps;
+    /** Additional props passed to the underlying Tooltip.Content component */
+    contentProps?: Omit<TooltipContentProps, 'forceMount'>;
+    /** Time in milliseconds to wait before showing the tooltip */
+    delayDuration?: number;
+    /** Whether the tooltip is currently visible */
+    isOpen?: boolean;
+    /** Tooltip style variant: 'snack' for simple tooltips, 'rich' for more complex content */
+    variant?: 'rich' | 'snack';
+    /** Whether to show an arrow pointing to the trigger */
+    showArrow?: boolean;
+    /** Custom CSS class for the tooltip content */
+    class?: string;
+};

package/dist/components/forms/tooltip/types.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,15 @@
+export * from './badge/index.js';
+export * from './buttons/index.js';
+export * from './cards/index.js';
+export * from './containers/index.js';
+export * from './date/index.js';
+export * from './forms/index.js';
+export * from './misc/index.js';
+export * from './nav/index.js';
+export * from './pill/index.js';
+export * from './progress/index.js';
+export * from './snackbar/index.js';
+export * from './table/index.js';
+export * from './time/index.js';
+export * from './toolbar/index.js';
+export * from './typography/index.js';

package/dist/components/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 './badge/index.js';
+export * from './buttons/index.js';
+export * from './cards/index.js';
+export * from './containers/index.js';
+export * from './date/index.js';
+export * from './forms/index.js';
+export * from './misc/index.js';
+export * from './nav/index.js';
+export * from './pill/index.js';
+export * from './progress/index.js';
+export * from './snackbar/index.js';
+export * from './table/index.js';
+export * from './time/index.js';
+export * from './toolbar/index.js';
+export * from './typography/index.js';

package/dist/components/misc/Avatar.svelte

@@ -0,0 +1,70 @@
+<!--
+@component
+Avatars can be used to represent people or objects.
+
+@see https://m3.material.io/components/avatars/overview
+-->
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from 'bits-ui';
+  import { Layer } from '../../utils/index.js';
+  import { avatar } from './theme.js';
+  import type { AvatarProps } from './types.js';
+
+  let {
+    src,
+    alt = 'User avatar',
+    seed = 'ogonek',
+    size = 'lg',
+    loadingStatus = $bindable('loading'),
+    class: className,
+    onclick,
+    ...rest
+  }: AvatarProps = $props();
+
+  const materialPalette = ['e8f0fe', 'e8f5e9', 'fff7e6', 'fde7ec', 'e3f2fd'];
+  const dicebearBaseUrl = 'https://api.dicebear.com/9.x/shapes/svg';
+  const sizeMap = {
+    sm: 48,
+    md: 72,
+    lg: 96
+  } as const;
+
+  const generatedAvatar = $derived.by(() => {
+    const sizePx = sizeMap[size ?? 'lg'] ?? 96;
+    const params = new URLSearchParams({
+      seed,
+      size: String(sizePx),
+      radius: '50',
+      backgroundColor: materialPalette.join(',')
+    });
+
+    return `${dicebearBaseUrl}?${params.toString()}`;
+  });
+
+  const { root, image, fallback, button } = $derived(avatar({ size }));
+
+  const rootClasses = $derived(root({ class: className }));
+</script>
+
+{#if onclick}
+  <button class={button({ class: rootClasses })} {onclick} type="button">
+    <Layer />
+    <AvatarPrimitive.Root {...rest} bind:loadingStatus class="h-full w-full">
+      {#if src}
+        <AvatarPrimitive.Image {src} {alt} class={image()} />
+      {/if}
+      <AvatarPrimitive.Fallback class={fallback()}>
+        <img src={generatedAvatar} {alt} class={image()} />
+      </AvatarPrimitive.Fallback>
+    </AvatarPrimitive.Root>
+  </button>
+{:else}
+  <AvatarPrimitive.Root {...rest} bind:loadingStatus class={rootClasses}>
+    {#if src}
+      <AvatarPrimitive.Image {src} {alt} class={image()} />
+    {/if}
+    <AvatarPrimitive.Fallback class={fallback()}>
+      <img src={generatedAvatar} {alt} class={image()} />
+    </AvatarPrimitive.Fallback>
+  </AvatarPrimitive.Root>
+{/if}

package/dist/components/misc/Avatar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { AvatarProps } from './types.js';
+/**
+ * Avatars can be used to represent people or objects.
+ *
+ * @see https://m3.material.io/components/avatars/overview
+ */
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "loadingStatus">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/misc/ThemeSettings.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { RadioGroup } from '../forms/radio-group/index.js';
+  import { themeState, extractColorFromImage } from '../../utils/theme.svelte.js';
+  import { Title } from '../typography/title/index.js';
+  import { Body } from '../typography/body/index.js';
+
+  const schemeItems = [
+    { label: 'System', value: 'system' },
+    { label: 'Light', value: 'light' },
+    { label: 'Dark', value: 'dark' }
+  ];
+
+  const contrastItems = [
+    { label: 'Standard', value: 'standard' },
+    { label: 'Medium', value: 'medium' },
+    { label: 'High', value: 'high' }
+  ];
+
+  const variantItems = [
+    { label: 'Tonal Spot', value: 'tonal-spot' },
+    { label: 'Vibrant', value: 'vibrant' },
+    { label: 'Fidelity', value: 'fidelity' },
+    { label: 'Content', value: 'content' },
+    { label: 'Fruit Salad', value: 'fruit-salad' },
+    { label: 'Rainbow', value: 'rainbow' }
+  ];
+
+  async function handleImageUpload(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const file = target.files?.[0];
+    if (file) {
+      const color = await extractColorFromImage(file);
+      if (color) {
+        themeState.sourceColor = color;
+      }
+    }
+  }
+</script>
+
+<div class="flex w-full flex-col gap-6">
+  <!-- Source Color -->
+  <div class="flex flex-col gap-2">
+    <Title size="medium">Source Color</Title>
+    <div class="flex items-center gap-4">
+      <input
+        type="color"
+        bind:value={themeState.sourceColor}
+        class="size-10 cursor-pointer bg-transparent"
+      />
+      <Body size="medium">{themeState.sourceColor}</Body>
+    </div>
+    <div class="mt-2 flex flex-col gap-1">
+      <Body size="medium">Or extract from image:</Body>
+      <input
+        type="file"
+        accept="image/*"
+        onchange={handleImageUpload}
+        class="file:bg-md-sys-color-primary-container file:text-md-sys-color-on-primary-container hover:file:bg-md-sys-color-primary-container/80 text-sm file:mr-4 file:rounded-full file:border-0 file:px-4 file:py-2 file:text-sm file:font-semibold"
+      />
+    </div>
+  </div>
+
+  <!-- Scheme -->
+  <div class="flex flex-col gap-2">
+    <Title size="medium">Scheme</Title>
+    <RadioGroup items={schemeItems} bind:value={themeState.scheme as any} orientation="vertical" />
+  </div>
+
+  <!-- Contrast -->
+  <div class="flex flex-col gap-2">
+    <Title size="medium">Contrast</Title>
+    <RadioGroup
+      items={contrastItems}
+      bind:value={themeState.contrast as any}
+      orientation="vertical"
+    />
+  </div>
+
+  <!-- Variant -->
+  <div class="flex flex-col gap-2">
+    <Title size="medium">Variant</Title>
+    <RadioGroup
+      items={variantItems}
+      bind:value={themeState.variant as any}
+      orientation="vertical"
+    />
+  </div>
+</div>

package/dist/components/misc/ThemeSettings.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ThemeSettings: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThemeSettings = InstanceType<typeof ThemeSettings>;
+export default ThemeSettings;

package/dist/components/misc/ThemeSwitcher.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Popover } from '../containers/popover/index.js';
+  import { FAB } from '../buttons/index.js';
+  import ThemeSettings from './ThemeSettings.svelte';
+
+  let open = $state(false);
+</script>
+
+<div class="fixed right-4 bottom-4 z-50">
+  <Popover bind:open title="Theme Settings" side="top" align="end" sideOffset={16}>
+    {#snippet trigger()}
+      <FAB iconProps={{ name: 'palette' }} config="primary" />
+    {/snippet}
+
+    <div
+      class="scrollbar-thumb-md-sys-color-outline-variant hover:scrollbar-thumb-md-sys-color-outline flex max-h-[80vh] w-72 scrollbar-thin flex-col overflow-y-auto p-4"
+    >
+      <ThemeSettings />
+    </div>
+  </Popover>
+</div>

package/dist/components/misc/ThemeSwitcher.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ThemeSwitcher: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeSwitcher = ReturnType<typeof ThemeSwitcher>;
+export default ThemeSwitcher;

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

@@ -0,0 +1,5 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Avatar } from './Avatar.svelte';
+export { default as ThemeSettings } from './ThemeSettings.svelte';
+export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/dist/components/misc/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 Avatar } from './Avatar.svelte';
+export { default as ThemeSettings } from './ThemeSettings.svelte';
+export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/dist/components/misc/theme.d.ts

@@ -0,0 +1,52 @@
+export declare const avatar: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    button: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    button: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    button: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/misc/theme.js

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+export const avatar = tv({
+    slots: {
+        root: 'relative flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full',
+        image: 'h-full w-full object-cover',
+        fallback: 'flex h-full w-full items-center justify-center rounded-full bg-surface-container-highest',
+        button: 'relative rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+    },
+    variants: {
+        size: {
+            sm: {
+                root: 'size-12'
+            },
+            md: {
+                root: 'size-18'
+            },
+            lg: {
+                root: 'size-24'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'lg'
+    }
+});

package/dist/components/misc/types.d.ts

@@ -0,0 +1,18 @@
+import type { Avatar as AvatarPrimitive } from 'bits-ui';
+import type { VariantProps } from 'tailwind-variants';
+import type { avatar } from './theme.js';
+export type AvatarVariants = VariantProps<typeof avatar>;
+export type AvatarProps = AvatarPrimitive.RootProps & {
+    /** The URL of the avatar image. If null or undefined, a generated avatar will be used. */
+    src?: string | null;
+    /** The alt text for the avatar image. */
+    alt?: string;
+    /** The seed for the generated avatar if no src is provided. */
+    seed?: string;
+    /** The loading status of the avatar image. */
+    loadingStatus?: 'loading' | 'loaded' | 'error';
+    /** Callback for when the avatar is clicked. If provided, the avatar is wrapped in a button. */
+    onclick?: (e: MouseEvent) => void;
+    /** Additional CSS classes for the avatar element. */
+    class?: string;
+} & AvatarVariants;

package/dist/components/misc/types.js

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

package/dist/components/nav/appbar/AppBar.svelte

@@ -0,0 +1,60 @@
+<!--
+@component
+Material 3 App Bar.
+
+Top app bars provide content and actions related to the current screen.
+They’re used for branding, screen titles, navigation, and actions.
+
+@see https://m3.material.io/components/top-app-bar/overview
+-->
+<script lang="ts">
+  import { appbar } from './theme.js';
+  import type { AppBarProps } from './types.js';
+  import clsx from 'clsx';
+
+  let {
+    children,
+    title,
+    subtitle,
+    trailing,
+    leading,
+    class: className,
+    showBack,
+    ...rest
+  }: AppBarProps = $props();
+
+  let scrollY = $state(0);
+  let scrolled = $derived(scrollY > 10);
+
+  const noTrailing = $derived(!trailing);
+  const noLeading = $derived(!leading || !showBack);
+
+  const {
+    base,
+    title: titleCLs,
+    textContainer,
+    subtitle: subtitleCls,
+    leading: leadingCls,
+    trailing: trailingCls
+  } = $derived(appbar({ scrolled, noLeading, noTrailing }));
+  const navClass = $derived(base({ class: clsx(className) }));
+</script>
+
+<svelte:window bind:scrollY />
+
+<nav {...rest} class={navClass}>
+  <div class={leadingCls()}>
+    {@render leading?.()}
+  </div>
+  <div class={textContainer()}>
+    <h1 class={titleCLs()}>
+      {title}
+    </h1>
+    {#if subtitle}
+      <p class={subtitleCls()}>{subtitle}</p>
+    {/if}
+  </div>
+  <div class={trailingCls()}>
+    {@render trailing?.()}
+  </div>
+</nav>

package/dist/components/nav/appbar/AppBar.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { AppBarProps } from './types.js';
+/**
+ * Material 3 App Bar.
+ *
+ * Top app bars provide content and actions related to the current screen.
+ * They’re used for branding, screen titles, navigation, and actions.
+ *
+ * @see https://m3.material.io/components/top-app-bar/overview
+ */
+declare const AppBar: import("svelte").Component<AppBarProps, {}, "">;
+type AppBar = ReturnType<typeof AppBar>;
+export default AppBar;

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

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

package/dist/components/nav/appbar/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 AppBar } from './AppBar.svelte';