@noxlovette/material 0.1.0

package/dist/components/typography/body/theme.js

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+export const body = tv({
+    base: '',
+    variants: {
+        emphasized: {
+            true: 'font-medium'
+        },
+        size: {
+            small: 'md-sys-typescale-body-small',
+            medium: 'md-sys-typescale-body-medium',
+            large: 'md-sys-typescale-body-large'
+        }
+    }
+});

package/dist/components/typography/body/types.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BodyVariants } from './theme.js';
+/**
+ * Props for the Body typography component.
+ */
+export interface BodyProps extends BodyVariants, HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Body text content.
+     */
+    children: Snippet;
+    /**
+     * Whether to use the emphasized weight for the body text.
+     */
+    emphasized?: boolean;
+    /**
+     * The size of the body text.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+}

package/dist/components/typography/body/types.js

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

package/dist/components/typography/display/Display.svelte

@@ -0,0 +1,27 @@
+<!--
+@component
+Display components are the largest text on the screen, reserved for short, important text or numerals.
+Follows Material 3 Display typography styles.
+
+@see https://m3.material.io/styles/typography/overview#08f23783-0941-4c74-9844-3d0da7e74287
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+
+  import { display } from './theme.js';
+  import type { DisplayProps } from './types.js';
+
+  let {
+    children,
+    emphasized,
+    size = 'medium',
+    class: className,
+    ...restProps
+  }: DisplayProps = $props();
+
+  let displayCls = $derived(display({ class: clsx(className), emphasized, size }));
+</script>
+
+<h1 {...restProps} class={displayCls}>
+  {@render children()}
+</h1>

package/dist/components/typography/display/Display.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { DisplayProps } from './types.js';
+/**
+ * Display components are the largest text on the screen, reserved for short, important text or numerals.
+ * Follows Material 3 Display typography styles.
+ *
+ * @see https://m3.material.io/styles/typography/overview#08f23783-0941-4c74-9844-3d0da7e74287
+ */
+declare const Display: import("svelte").Component<DisplayProps, {}, "">;
+type Display = ReturnType<typeof Display>;
+export default Display;

package/dist/components/typography/display/index.d.ts

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

package/dist/components/typography/display/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 Display } from './Display.svelte';

package/dist/components/typography/display/theme.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from 'tailwind-variants';
+export type DisplayVariants = VariantProps<typeof display>;
+export declare const display: import("tailwind-variants").TVReturnType<{
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "", {
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/components/typography/display/theme.js

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+export const display = tv({
+    base: '',
+    variants: {
+        emphasized: {
+            true: 'font-medium'
+        },
+        size: {
+            small: 'md-sys-typescale-display-small',
+            medium: 'md-sys-typescale-display-medium',
+            large: 'md-sys-typescale-display-large'
+        }
+    }
+});

package/dist/components/typography/display/types.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { DisplayVariants } from './theme.js';
+/**
+ * Props for the Display typography component.
+ */
+export type DisplayProps = DisplayVariants & HTMLAttributes<HTMLElement> & {
+    /**
+     * Display text content.
+     */
+    children: Snippet;
+    /**
+     * Whether to use the emphasized weight for the display text.
+     */
+    emphasized?: boolean;
+    /**
+     * The size of the display text.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+};

package/dist/components/typography/display/types.js

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

package/dist/components/typography/headline/Headline.svelte

@@ -0,0 +1,27 @@
+<!--
+@component
+Headlines are best-suited for short, high-emphasis text on smaller screens.
+Follows Material 3 Headline typography styles.
+
+@see https://m3.material.io/styles/typography/overview#073998f4-6e19-4847-987a-397f3729e16d
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+
+  import { headline } from './theme.js';
+  import type { HeadlineProps } from './types.js';
+
+  let {
+    children,
+    size = 'medium',
+    emphasized,
+    class: className,
+    ...restProps
+  }: HeadlineProps = $props();
+
+  let headlineCls = $derived(headline({ class: clsx(className), emphasized, size }));
+</script>
+
+<h2 {...restProps} class={headlineCls}>
+  {@render children()}
+</h2>

package/dist/components/typography/headline/Headline.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HeadlineProps } from './types.js';
+/**
+ * Headlines are best-suited for short, high-emphasis text on smaller screens.
+ * Follows Material 3 Headline typography styles.
+ *
+ * @see https://m3.material.io/styles/typography/overview#073998f4-6e19-4847-987a-397f3729e16d
+ */
+declare const Headline: import("svelte").Component<HeadlineProps, {}, "">;
+type Headline = ReturnType<typeof Headline>;
+export default Headline;

package/dist/components/typography/headline/index.d.ts

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

package/dist/components/typography/headline/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 Headline } from './Headline.svelte';

package/dist/components/typography/headline/theme.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from 'tailwind-variants';
+export type HeadlineVariants = VariantProps<typeof headline>;
+export declare const headline: import("tailwind-variants").TVReturnType<{
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "", {
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/components/typography/headline/theme.js

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+export const headline = tv({
+    base: '',
+    variants: {
+        emphasized: {
+            true: 'font-medium'
+        },
+        size: {
+            small: 'md-sys-typescale-headline-small',
+            medium: 'md-sys-typescale-headline-medium',
+            large: 'md-sys-typescale-headline-large'
+        }
+    }
+});

package/dist/components/typography/headline/types.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadlineVariants } from './theme.js';
+/**
+ * Props for the Headline typography component.
+ */
+export type HeadlineProps = HeadlineVariants & HTMLAttributes<HTMLElement> & {
+    /**
+     * Headline text content.
+     */
+    children: Snippet;
+    /**
+     * Whether to use the emphasized weight for the headline text.
+     */
+    emphasized?: boolean;
+    /**
+     * The size of the headline text.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+};

package/dist/components/typography/headline/types.js

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

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

@@ -0,0 +1,6 @@
+export * from './body/index.js';
+export * from './display/index.js';
+export * from './headline/index.js';
+export * from './kbd/index.js';
+export * from './label/index.js';
+export * from './title/index.js';

package/dist/components/typography/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 './body/index.js';
+export * from './display/index.js';
+export * from './headline/index.js';
+export * from './kbd/index.js';
+export * from './label/index.js';
+export * from './title/index.js';

package/dist/components/typography/kbd/Kbd.svelte

@@ -0,0 +1,18 @@
+<!--
+@component
+Kbd component is used to display keyboard shortcuts or hints.
+-->
+<script lang="ts">
+  import { kbd } from './theme.js';
+
+  import clsx from 'clsx';
+  import type { KbdProps } from './types.js';
+
+  let { children, position = 'absolute', class: className, ...restProps }: KbdProps = $props();
+
+  const kbdCls = $derived(kbd({ class: clsx(className), position }));
+</script>
+
+<kbd {...restProps} class={kbdCls}>
+  {@render children()}
+</kbd>

package/dist/components/typography/kbd/Kbd.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { KbdProps } from './types.js';
+/** Kbd component is used to display keyboard shortcuts or hints. */
+declare const Kbd: import("svelte").Component<KbdProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/typography/kbd/index.d.ts

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

package/dist/components/typography/kbd/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 Kbd } from './Kbd.svelte';

package/dist/components/typography/kbd/theme.d.ts

@@ -0,0 +1,18 @@
+import { type VariantProps } from 'tailwind-variants';
+export type KbdVariants = VariantProps<typeof kbd>;
+export declare const kbd: import("tailwind-variants").TVReturnType<{
+    position: {
+        absolute: string;
+        relative: string;
+    };
+}, undefined, "text-xs font-semibold text-text-tertiary", {
+    position: {
+        absolute: string;
+        relative: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    position: {
+        absolute: string;
+        relative: string;
+    };
+}, undefined, "text-xs font-semibold text-text-tertiary", unknown, unknown, undefined>>;

package/dist/components/typography/kbd/theme.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+export const kbd = tv({
+    base: 'text-xs font-semibold text-text-tertiary',
+    variants: {
+        position: {
+            absolute: 'right-1.5 bottom-1.5 hidden md:absolute md:right-2 md:bottom-2',
+            relative: ''
+        }
+    }
+});

package/dist/components/typography/kbd/types.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { KbdVariants } from './theme.js';
+/**
+ * Props for the Kbd typography component.
+ */
+export type KbdProps = HTMLAttributes<HTMLElement> & KbdVariants & {
+    /**
+     * Keyboard hint content.
+     */
+    children: Snippet;
+    /**
+     * The position of the kbd element.
+     * @default 'absolute'
+     */
+    position?: 'absolute' | 'relative' | 'static';
+};

package/dist/components/typography/kbd/types.js

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

package/dist/components/typography/label/Label.svelte

@@ -0,0 +1,25 @@
+<!--
+@component
+Label components are used for things like components' labels or very small text, such as captions.
+Follows Material 3 Label typography styles.
+
+@see https://m3.material.io/styles/typography/overview#0624647c-2187-4d7a-b51c-8b820a469146
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+
+  import { label } from './theme.js';
+  import type { LabelProps } from './types.js';
+
+  let {
+    children,
+    size = 'medium',
+    emphasized,
+    class: className,
+    ...restProps
+  }: LabelProps = $props();
+</script>
+
+<p {...restProps} class={label({ class: clsx(className), emphasized, size })}>
+  {@render children()}
+</p>

package/dist/components/typography/label/Label.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { LabelProps } from './types.js';
+/**
+ * Label components are used for things like components' labels or very small text, such as captions.
+ * Follows Material 3 Label typography styles.
+ *
+ * @see https://m3.material.io/styles/typography/overview#0624647c-2187-4d7a-b51c-8b820a469146
+ */
+declare const Label: import("svelte").Component<LabelProps, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/typography/label/index.d.ts

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

package/dist/components/typography/label/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 Label } from './Label.svelte';

package/dist/components/typography/label/theme.d.ts

@@ -0,0 +1,28 @@
+export declare const label: import("tailwind-variants").TVReturnType<{
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "", {
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/components/typography/label/theme.js

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+export const label = tv({
+    base: '',
+    variants: {
+        emphasized: {
+            true: 'font-semibold'
+        },
+        size: {
+            small: 'md-sys-label-display-small',
+            medium: 'md-sys-label-display-medium',
+            large: 'md-sys-label-display-large'
+        }
+    }
+});

package/dist/components/typography/label/types.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { VariantProps } from 'tailwind-variants';
+import type { label } from './theme.js';
+export type LabelVariants = VariantProps<typeof label>;
+/**
+ * Props for the Label typography component.
+ */
+export type LabelProps = LabelVariants & HTMLAttributes<HTMLElement> & {
+    /**
+     * Label text content.
+     */
+    children: Snippet;
+    /**
+     * Whether to use the emphasized weight for the label text.
+     */
+    emphasized?: boolean;
+    /**
+     * The size of the label text.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+};

package/dist/components/typography/label/types.js

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

package/dist/components/typography/title/Title.svelte

@@ -0,0 +1,27 @@
+<!--
+@component
+Titles are smaller than headline styles and should be used for shorter, medium-emphasis text.
+Follows Material 3 Title typography styles.
+
+@see https://m3.material.io/styles/typography/overview#0384814d-f952-475a-a3a8-4447432163b8
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+
+  import { title } from './theme.js';
+  import type { TitleProps } from './types.js';
+
+  let {
+    children,
+    emphasized,
+    size = 'medium',
+    class: className,
+    ...restProps
+  }: TitleProps = $props();
+
+  let titleCls = $derived(title({ class: clsx(className), emphasized, size }));
+</script>
+
+<h3 {...restProps} class={titleCls}>
+  {@render children()}
+</h3>

package/dist/components/typography/title/Title.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { TitleProps } from './types.js';
+/**
+ * Titles are smaller than headline styles and should be used for shorter, medium-emphasis text.
+ * Follows Material 3 Title typography styles.
+ *
+ * @see https://m3.material.io/styles/typography/overview#0384814d-f952-475a-a3a8-4447432163b8
+ */
+declare const Title: import("svelte").Component<TitleProps, {}, "">;
+type Title = ReturnType<typeof Title>;
+export default Title;

package/dist/components/typography/title/index.d.ts

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

package/dist/components/typography/title/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 Title } from './Title.svelte';

package/dist/components/typography/title/theme.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from 'tailwind-variants';
+export type TitleVariants = VariantProps<typeof title>;
+export declare const title: import("tailwind-variants").TVReturnType<{
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "", {
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/components/typography/title/theme.js

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+export const title = tv({
+    base: '',
+    variants: {
+        emphasized: {
+            true: 'font-semibold'
+        },
+        size: {
+            small: 'md-sys-typescale-title-small',
+            medium: 'md-sys-typescale-title-medium',
+            large: 'md-sys-typescale-title-large'
+        }
+    }
+});

package/dist/components/typography/title/types.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TitleVariants } from './theme.js';
+/**
+ * Props for the Title typography component.
+ */
+export type TitleProps = TitleVariants & HTMLAttributes<HTMLElement> & {
+    /**
+     * Title text content.
+     */
+    children: Snippet;
+    /**
+     * Whether to use the emphasized weight for the title text.
+     */
+    emphasized?: boolean;
+    /**
+     * The size of the title text.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+};

package/dist/components/typography/title/types.js

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