@noxlovette/material 0.1.0

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

@@ -0,0 +1,39 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { TabVariants } from './theme.js';
+export type TabProps = {
+    /** Props for the Icon component. Omit for secondary tabs. */
+    iconProps?: IconProps;
+    /** Text label for the tab. */
+    name: string;
+    /**
+     * Unique value identifier — required for content-panel tabs (no href).
+     * Omit for navigation tabs that use href for routing.
+     */
+    value?: string;
+    /** Optional href for navigation tabs. Renders an <a> instead of <button>. */
+    href?: string;
+    /** Whether the tab is disabled. */
+    disabled?: boolean;
+    /** Tab style variant inherited from the parent TabHolder. */
+    variant?: TabVariants['variant'];
+    /** Additional CSS classes. */
+    class?: string;
+};
+export type TabHolderProps = {
+    /** The currently active tab value. Bindable. */
+    value?: string;
+    /** Callback when the active tab changes. */
+    onValueChange?: (value: string) => void;
+    /** Whether tabs activate on focus (automatic) or require Enter/Space (manual). */
+    activationMode?: 'automatic' | 'manual';
+    /** Primary tabs show icon + label; secondary tabs show label only. */
+    variant?: TabVariants['variant'];
+    /** Tab items to render. */
+    items: TabProps[];
+};
+export type TabContentProps = {
+    /** Must match the value of the corresponding Tab. */
+    value: string;
+    /** Additional CSS classes. */
+    class?: string;
+};

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

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

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

@@ -0,0 +1,6 @@
+export type NavPage = 'dashboard' | 'flashcards' | 'lessons' | 'tasks' | 'students' | 'calendar' | 'settings' | 'legal' | 'contact' | 'why';
+export interface BreadcrumbSegment {
+    segment?: string;
+    label: string;
+    href: string;
+}

package/dist/components/nav/types.js

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

package/dist/components/pill/Pill.svelte

@@ -0,0 +1,17 @@
+<!--
+@component
+Standard Pill component with Material 3 color variants.
+-->
+<script lang="ts">
+  import { pill } from './theme.js';
+  import type { PillProps } from './types.js';
+  import clsx from 'clsx';
+
+  const { variant = 'primary', children, class: className, ...restProps }: PillProps = $props();
+
+  const styling = $derived(pill({ variant }));
+</script>
+
+<div class={clsx(styling, className)} {...restProps}>
+  {@render children?.()}
+</div>

package/dist/components/pill/Pill.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { PillProps } from './types.js';
+/** Standard Pill component with Material 3 color variants. */
+declare const Pill: import("svelte").Component<PillProps, {}, "">;
+type Pill = ReturnType<typeof Pill>;
+export default Pill;

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

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

package/dist/components/pill/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 Pill } from './Pill.svelte';

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

@@ -0,0 +1,27 @@
+import { type VariantProps } from 'tailwind-variants';
+export type PillVariants = VariantProps<typeof pill>;
+export declare const pill: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        error: string;
+        container: string;
+    };
+}, undefined, "relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full", {
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        error: string;
+        container: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        error: string;
+        container: string;
+    };
+}, undefined, "relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full", unknown, unknown, undefined>>;

package/dist/components/pill/theme.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const pill = tv({
+    base: 'relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full',
+    variants: {
+        variant: {
+            primary: 'md-component-button-filled-primary',
+            secondary: 'md-component-button-filled-secondary',
+            tertiary: 'md-component-button-filled-tertiary',
+            error: 'md-component-button-filled-error',
+            container: 'bg-md-sys-color-surface-container text-md-sys-color-on-surface'
+        }
+    },
+    defaultVariants: {
+        variant: 'primary'
+    }
+});

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

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PillVariants } from './theme.js';
+export interface PillProps extends PillVariants, HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+}

package/dist/components/pill/types.js

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

package/dist/components/progress/CircularProgress.svelte

@@ -0,0 +1,58 @@
+<!--
+@component
+Material 3 Circular Progress Indicator.
+
+@see https://m3.material.io/components/progress-indicators/overview#circular-progress-indicators
+-->
+<script lang="ts">
+  import { Progress } from 'bits-ui';
+
+  let {
+    percent,
+    size = 48,
+    thickness = 4
+  }: {
+    /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
+    percent?: number | null;
+    /** Diameter of the indicator in pixels. Defaults to 48. */
+    size?: number;
+    /** Stroke thickness in pixels. Defaults to 4. */
+    thickness?: number;
+  } = $props();
+
+  let r = $derived(size / 2 - thickness / 2);
+  let circumference = $derived(Math.PI * r * 2);
+</script>
+
+<Progress.Root value={percent ?? null} max={100}>
+  {#snippet child({ props })}
+    <svg
+      {...props}
+      width={size}
+      height={size}
+      viewBox="0 0 {size} {size}"
+      xmlns="http://www.w3.org/2000/svg"
+      class="rotate-[-90deg]"
+    >
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        {r}
+        stroke="var(--color-md-sys-color-secondary-container)"
+        stroke-width={thickness}
+        fill="none"
+      />
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        {r}
+        stroke="var(--color-md-sys-color-primary)"
+        stroke-width={thickness}
+        stroke-dasharray="{circumference} {circumference}"
+        stroke-dashoffset={(percent != null ? (percent / -100) * circumference : 0) + circumference}
+        stroke-linecap="round"
+        fill="none"
+      />
+    </svg>
+  {/snippet}
+</Progress.Root>

package/dist/components/progress/CircularProgress.svelte.d.ts

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
+    percent?: number | null;
+    /** Diameter of the indicator in pixels. Defaults to 48. */
+    size?: number;
+    /** Stroke thickness in pixels. Defaults to 4. */
+    thickness?: number;
+};
+/**
+ * Material 3 Circular Progress Indicator.
+ *
+ * @see https://m3.material.io/components/progress-indicators/overview#circular-progress-indicators
+ */
+declare const CircularProgress: import("svelte").Component<$$ComponentProps, {}, "">;
+type CircularProgress = ReturnType<typeof CircularProgress>;
+export default CircularProgress;

package/dist/components/progress/LinearProgress.svelte

@@ -0,0 +1,45 @@
+<!--
+@component
+Material 3 Linear Progress Indicator.
+
+@see https://m3.material.io/components/progress-indicators/overview#linear-progress-indicators
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { tv } from 'tailwind-variants';
+  import { Progress } from 'bits-ui';
+
+  let {
+    percent,
+    height = 4,
+    class: className
+  }: {
+    /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
+    percent?: number | null;
+    /** Height of the bar in pixels. Defaults to 4. */
+    height?: number;
+    class?: string;
+  } = $props();
+
+  const linearProgress = tv({
+    slots: {
+      container: 'flex gap-1',
+      fill: 'bg-md-sys-color-primary rounded-full shrink',
+      track: 'bg-md-sys-color-secondary-container rounded-full grow'
+    }
+  });
+
+  const { container, fill, track } = linearProgress();
+</script>
+
+<Progress.Root
+  value={percent ?? null}
+  max={100}
+  class={container({ class: clsx(className) })}
+  style="height: {height / 16}rem"
+>
+  {#if percent != null}
+    <div class={fill()} style:width="{percent}%"></div>
+  {/if}
+  <div class={track()}></div>
+</Progress.Root>

package/dist/components/progress/LinearProgress.svelte.d.ts

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
+    percent?: number | null;
+    /** Height of the bar in pixels. Defaults to 4. */
+    height?: number;
+    class?: string;
+};
+/**
+ * Material 3 Linear Progress Indicator.
+ *
+ * @see https://m3.material.io/components/progress-indicators/overview#linear-progress-indicators
+ */
+declare const LinearProgress: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinearProgress = ReturnType<typeof LinearProgress>;
+export default LinearProgress;

package/dist/components/progress/WavyLinearProgress.svelte

@@ -0,0 +1,58 @@
+<!--
+@component
+Wavy linear progress indicator — a custom M3-inspired variant.
+
+@see https://m3.material.io/components/progress-indicators/overview
+-->
+<script lang="ts">
+  import { Progress } from 'bits-ui';
+  import { linear, trackOpacity } from './_wavy.js';
+
+  let {
+    width = 600,
+    height = 10,
+    thickness = 4,
+    percent,
+    class: className
+  }: {
+    /** Width of the SVG viewBox. */
+    width?: number;
+    /** Height of the SVG viewBox. */
+    height?: number;
+    /** Thickness of the progress line. */
+    thickness?: number;
+    /** Completion percentage (0–100). Omit or pass null for indeterminate. */
+    percent?: number | null;
+    class?: string;
+  } = $props();
+
+  let left = $derived(thickness * 0.5);
+  let right = $derived(width - thickness * 0.5);
+  let percentX = $derived(percent != null ? (percent / 100) * (right - left) + left : left);
+  let wavePath = $derived(linear(height / 2 - thickness / 2, height / 2, left, percentX, 0));
+</script>
+
+<Progress.Root value={percent ?? null} max={100}>
+  {#snippet child({ props })}
+    <svg {...props} viewBox="0 0 {width} {height}" class={className}>
+      <path
+        fill="none"
+        stroke="var(--color-md-sys-color-primary)"
+        stroke-width={thickness}
+        stroke-linecap="round"
+        d={wavePath}
+      />
+      <line
+        fill="none"
+        stroke="var(--color-md-sys-color-secondary-container)"
+        stroke-width={thickness}
+        stroke-linecap="round"
+        x1={percentX + thickness + 4}
+        y1={height / 2}
+        x2={right}
+        y2={height / 2}
+        opacity={trackOpacity(right, percentX + thickness + 4)}
+      />
+    </svg>
+  {/snippet}
+</Progress.Root>

package/dist/components/progress/WavyLinearProgress.svelte.d.ts

@@ -0,0 +1,19 @@
+type $$ComponentProps = {
+    /** Width of the SVG viewBox. */
+    width?: number;
+    /** Height of the SVG viewBox. */
+    height?: number;
+    /** Thickness of the progress line. */
+    thickness?: number;
+    /** Completion percentage (0–100). Omit or pass null for indeterminate. */
+    percent?: number | null;
+    class?: string;
+};
+/**
+ * Wavy linear progress indicator — a custom M3-inspired variant.
+ *
+ * @see https://m3.material.io/components/progress-indicators/overview
+ */
+declare const WavyLinearProgress: import("svelte").Component<$$ComponentProps, {}, "">;
+type WavyLinearProgress = ReturnType<typeof WavyLinearProgress>;
+export default WavyLinearProgress;

package/dist/components/progress/_wavy.d.ts

@@ -0,0 +1,2 @@
+export declare const linear: (amp: number, center: number, from: number, to: number, time: number, cutoffTo?: number) => string;
+export declare const trackOpacity: (right: number, x: number) => number;

package/dist/components/progress/_wavy.js

@@ -0,0 +1,32 @@
+const frequencyT = (Math.PI * 2) / 1000;
+const frequencyX = (Math.PI * 2) / 40;
+const round2 = (x) => Math.round(x * 100) / 100;
+const round1 = (x) => Math.round(x * 10) / 10;
+export const linear = (amp, center, from, to, time, cutoffTo) => {
+    time = time * frequencyT;
+    time %= Math.PI * 2;
+    if (from >= to)
+        return '';
+    let path = '';
+    for (let xIterator = from; xIterator <= to; xIterator += 0.5) {
+        const x = cutoffTo ? Math.min(cutoffTo, xIterator) : xIterator;
+        const sinV = Math.sin(x * frequencyX + time);
+        const y = sinV * amp + center;
+        if (x == from) {
+            path = `M ${round1(x)} ${round2(y)}`;
+        }
+        else {
+            path += ` ${round1(x)} ${round2(y)}`;
+        }
+    }
+    return path;
+};
+export const trackOpacity = (right, x) => {
+    let opacity = right - x;
+    if (opacity < 0)
+        opacity = 0;
+    if (opacity > 1)
+        opacity = 1;
+    opacity = round2(opacity);
+    return opacity;
+};

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

@@ -0,0 +1,4 @@
+export * from './_wavy.js';
+export { default as CircularProgress } from './CircularProgress.svelte';
+export { default as LinearProgress } from './LinearProgress.svelte';
+export { default as WavyLinearProgress } from './WavyLinearProgress.svelte';

package/dist/components/progress/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 './_wavy.js';
+// default exports for components in this folder
+export { default as CircularProgress } from './CircularProgress.svelte';
+export { default as LinearProgress } from './LinearProgress.svelte';
+export { default as WavyLinearProgress } from './WavyLinearProgress.svelte';

package/dist/components/snackbar/Snackbar.svelte

@@ -0,0 +1,102 @@
+<!--
+@component
+Snackbars provide brief messages about app processes at the bottom of the screen.
+
+@see https://m3.material.io/components/snackbars/overview
+-->
+<script lang="ts">
+  import { snackbar } from './theme.js';
+  import type { SnackBarProps } from './types.js';
+  import Icon from '../../utils/icon/Icon.svelte';
+  import { Layer } from '../../utils/index.js';
+  import { enterExit } from '../../animation/enterExit.js';
+  import { easeEmphasizedDecel, easeEmphasizedAccel } from '../../animation/easing.js';
+
+  let {
+    message,
+    fixed = true,
+    static: isStatic = false,
+    label,
+    callback,
+    showClose = true,
+    ...restProps
+  }: SnackBarProps = $props();
+
+  let dismissed = $state(false);
+
+  $effect(() => {
+    if (!message) return;
+    if (isStatic) return;
+    const t = setTimeout(() => {
+      dismissed = true;
+      message = '';
+    }, 5000);
+    return () => clearTimeout(t);
+  });
+
+  $effect(() => {
+    if (!message) {
+      dismissed = false;
+      return;
+    }
+    dismissed = false;
+  });
+
+  const {
+    base,
+    icon,
+    label: labelCls,
+    supportingText,
+    actionWrapper
+  } = $derived(snackbar({ fixed }));
+</script>
+
+{#if message && !dismissed}
+  <div
+    class={base()}
+    data-cy="notification-snackbar"
+    {...restProps}
+    in:enterExit={{
+      duration: 400,
+      easing: easeEmphasizedDecel,
+      mode: 'slide-up'
+    }}
+    out:enterExit={{
+      duration: 200,
+      easing: easeEmphasizedAccel,
+      mode: 'slide-up'
+    }}
+  >
+    {#if typeof message === 'string'}
+      <p class={supportingText()}>{message}</p>
+    {:else}
+      <p class={supportingText()}>
+        {@render message()}
+      </p>
+    {/if}
+
+    <div class={actionWrapper()}>
+      {#if label}
+        <button class={`${labelCls()} relative`} onclick={callback}>
+          {label}
+          <Layer />
+        </button>
+      {/if}
+
+      {#if showClose}
+        <button
+          class="relative rounded-full p-1"
+          onclick={() => {
+            dismissed = true;
+            message = '';
+          }}
+          aria-label="Dismiss snackbar"
+          data-cy="notification-dismiss"
+        >
+          <Icon class={icon()} name="close" />
+          <Layer />
+        </button>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/components/snackbar/Snackbar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SnackBarProps } from './types.js';
+/**
+ * Snackbars provide brief messages about app processes at the bottom of the screen.
+ *
+ * @see https://m3.material.io/components/snackbars/overview
+ */
+declare const Snackbar: import("svelte").Component<SnackBarProps, {}, "">;
+type Snackbar = ReturnType<typeof Snackbar>;
+export default Snackbar;

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

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

package/dist/components/snackbar/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 Snackbar } from './Snackbar.svelte';

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

@@ -0,0 +1,36 @@
+import { type VariantProps } from 'tailwind-variants';
+export type SnackBarVariants = VariantProps<typeof snackbar>;
+export declare const snackbar: import("tailwind-variants").TVReturnType<{
+    fixed: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    label: string;
+    actionWrapper: string;
+    supportingText: string;
+    icon: string;
+}, undefined, {
+    fixed: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    label: string;
+    actionWrapper: string;
+    supportingText: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    fixed: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    label: string;
+    actionWrapper: string;
+    supportingText: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/snackbar/theme.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const snackbar = tv({
+    slots: {
+        base: 'rounded-xs relative min-h-12 md:max-h-17 flex z-[100] items-center bg-md-sys-color-inverse-surface shadow-elevation-3 pr-2 pl-4 justify-between h-max py-3',
+        label: 'text-md-sys-color-inverse-primary md-sys-typescale-label-large px-3 cursor-pointer ',
+        actionWrapper: 'flex items-center z-40',
+        supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-medium max-w-[60ch] ',
+        icon: 'size-6 text-[24px] text-md-sys-color-inverse-on-surface mr-1 ml-3'
+    },
+    variants: {
+        fixed: {
+            true: 'fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2',
+            false: ''
+        }
+    }
+});

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

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SnackBarVariants } from './theme.js';
+/**
+ * Configuration for a simple snackbar toast.
+ */
+export interface Toast {
+    /** The message to display. */
+    message?: string;
+    /** Whether to show a close button. */
+    showClose?: boolean;
+    /** The label for the action button. */
+    label?: string;
+    /** Whether the snackbar should remain until manually dismissed. */
+    static?: boolean;
+}
+/**
+ * Props for the Snackbar component.
+ */
+export type SnackBarProps = SnackBarVariants & HTMLAttributes<HTMLDivElement> & {
+    /** The message or snippet to display in the snackbar. */
+    message?: string | Snippet;
+    /** Whether the snackbar should have a fixed position. */
+    fixed?: boolean;
+    /** Callback for the action button. */
+    callback?: () => void;
+    /** The label for the action button. */
+    label?: string;
+    /** Whether to show a close button. */
+    showClose?: boolean;
+    /** Whether the snackbar should remain until manually dismissed. */
+    static?: boolean;
+};

package/dist/components/snackbar/types.js

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

package/dist/components/table/Table.svelte

@@ -0,0 +1,26 @@
+<!--
+@component
+Primitive root element for building MD3-styled data tables.
+Compose with TableHead, TableBody, TableFoot, TableRow, TableCell, and TableHeader.
+-->
+<script lang="ts">
+  import type { TableProps } from './types.js';
+  import { table } from './theme.js';
+  import clsx from 'clsx';
+
+  let { children, rounded = false, class: className, ...restProps }: TableProps = $props();
+
+  const { root } = table();
+</script>
+
+{#if rounded}
+  <div class="ring-md-sys-color-outline-variant overflow-hidden rounded-xl ring-1">
+    <table class={root({ class: clsx(className) })} {...restProps}>
+      {@render children()}
+    </table>
+  </div>
+{:else}
+  <table class={root({ class: clsx(className) })} {...restProps}>
+    {@render children()}
+  </table>
+{/if}