@noxlovette/material 0.1.0

package/dist/components/forms/textfield/Textfield.svelte

@@ -0,0 +1,82 @@
+<!--
+@component
+Material 3 Text Field.
+
+Text fields allow users to enter and edit text.
+
+@see https://m3.material.io/components/text-fields/overview
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { Icon } from '../../../utils/index.js';
+  import { textfield } from './theme.js';
+  import type { TextfieldProps } from './types.js';
+
+  let {
+    value = $bindable(),
+    supportingText,
+    leadingIconProps,
+    trailingIconProps,
+    placeholder = '',
+    label,
+    id,
+    class: className,
+    characterLimit,
+    disabled = false,
+    error = false,
+    required = false,
+    trailingOnClick,
+    inputChild,
+    trailingIcon,
+    ...restProps
+  }: TextfieldProps = $props();
+
+  const cls = $derived(textfield({ disabled, error }));
+  const inputProps = $derived({
+    id,
+    class: cls.input(),
+    'aria-invalid': error,
+    'aria-required': required,
+    required,
+    disabled,
+    placeholder,
+    ...restProps
+  });
+</script>
+
+<div class={clsx('relative w-full', className)}>
+  <div class={cls.base()}>
+    {#if leadingIconProps}
+      <Icon class={cls.leadingIcon()} {...leadingIconProps} />
+    {/if}
+
+    <div class={cls.inputWrapper()}>
+      {#if inputChild}
+        {@render inputChild({ props: inputProps })}
+      {:else}
+        <input bind:value {...inputProps} />
+      {/if}
+
+      <label class={cls.label()} for={id}>
+        {label}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true">*</span>{/if}
+      </label>
+    </div>
+
+    {#if trailingIcon}
+      {@render trailingIcon()}
+    {:else if trailingIconProps}
+      <button type="button" onclick={trailingOnClick}>
+        <Icon class={cls.trailingIcon()} {...trailingIconProps} />
+      </button>
+    {/if}
+  </div>
+
+  {#if supportingText}
+    <div class={cls.supportingText()}>
+      <p>{@render supportingText()}</p>
+      {#if characterLimit && typeof value === 'string'}
+        <p>{value?.length} / {characterLimit}</p>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/components/forms/textfield/Textfield.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { TextfieldProps } from './types.js';
+/**
+ * Material 3 Text Field.
+ *
+ * Text fields allow users to enter and edit text.
+ *
+ * @see https://m3.material.io/components/text-fields/overview
+ */
+declare const Textfield: import("svelte").Component<TextfieldProps, {}, "value">;
+type Textfield = ReturnType<typeof Textfield>;
+export default Textfield;

package/dist/components/forms/textfield/index.d.ts

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

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

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

@@ -0,0 +1,75 @@
+import { type VariantProps } from 'tailwind-variants';
+export type TextFieldVariants = VariantProps<typeof textfield>;
+export declare const textfield: import("tailwind-variants").TVReturnType<{
+    error: {
+        true: {
+            base: string;
+            label: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    label: string;
+    requiredAsterisk: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    supportingText: string;
+}, undefined, {
+    error: {
+        true: {
+            base: string;
+            label: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    label: string;
+    requiredAsterisk: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    supportingText: string;
+}, import("tailwind-variants").TVReturnType<{
+    error: {
+        true: {
+            base: string;
+            label: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    label: string;
+    requiredAsterisk: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    supportingText: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,74 @@
+import { tv } from 'tailwind-variants';
+export const textfield = tv({
+    slots: {
+        base: `
+      group w-full h-14 px-0 bg-md-sys-color-surface-container-highest
+      rounded-t-xs state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8 relative flex items-center
+      after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-md-sys-color-on-surface-variant
+      after:transition-[height,background-color] after:duration-200
+      hover:after:bg-md-sys-color-on-surface
+      focus-within:after:bg-md-sys-color-primary
+      focus-within:after:h-[2px]
+      disabled:bg-md-sys-color-on-surface/4
+      disabled:after:bg-md-sys-color-on-surface/12
+    `,
+        inputWrapper: `
+      relative flex-1 px-4
+    `,
+        input: `
+      peer w-full pt-4 bg-transparent outline-none
+      md-sys-typescale-body-large text-md-sys-color-on-surface
+      disabled:text-md-sys-color-on-surface/38
+    `,
+        label: `
+      absolute left-4 top-1/2 -translate-y-1/2
+      md-sys-typescale-body-large
+      text-md-sys-color-on-surface-variant
+      pointer-events-none
+      transition-[top,font-size,line-height,color,transform] duration-200 ease-in-out
+
+      peer-focus:text-md-sys-color-primary
+
+      peer-focus:top-1.5 peer-focus:md-sys-typescale-body-small peer-focus:-translate-y-1
+
+      peer-not-placeholder-shown:top-1.5 peer-not-placeholder-shown:md-sys-typescale-body-small peer-not-placeholder-shown:-translate-y-1
+    `,
+        requiredAsterisk: `
+      ml-0.5
+      text-md-sys-color-error
+      group-focus-within:text-md-sys-color-primary
+      transition-colors duration-200
+    `,
+        leadingIcon: `
+      text-md-sys-color-on-surface-variant size-6
+      group-focus-within:text-md-sys-color-primary
+      ml-3 text-[24px]
+    `,
+        trailingIcon: `
+      mr-3 text-md-sys-color-on-surface-variant size-6
+      group-focus-within:text-md-sys-color-primary
+      z-20 text-[24px]
+    `,
+        supportingText: `
+      px-4 pt-1 flex justify-between
+      md-sys-typescale-body-small
+      text-md-sys-color-on-surface-variant
+    `
+    },
+    variants: {
+        error: {
+            true: {
+                base: 'after:bg-md-sys-color-error focus-within:after:bg-md-sys-color-error',
+                label: 'text-md-sys-color-error',
+                supportingText: 'text-md-sys-color-error',
+                leadingIcon: 'text-md-sys-color-error',
+                trailingIcon: 'text-md-sys-color-error'
+            }
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-60'
+            }
+        }
+    }
+});

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

@@ -0,0 +1,60 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { DateValue } from '@internationalized/date';
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { TextFieldVariants } from './theme.js';
+/**
+ * Props for the Textfield component.
+ */
+export type TextfieldProps = TextFieldVariants & Omit<HTMLInputAttributes, 'children' | 'value'> & {
+    /**
+     * The current value of the text field.
+     */
+    value?: string | number | null | DateValue;
+    /**
+     * The label text for the text field.
+     */
+    label: string;
+    /**
+     * The ID for the input element.
+     */
+    id: string;
+    /**
+     * The placeholder text for the input element.
+     */
+    placeholder?: '';
+    /**
+     * Reference to the HTML input element.
+     */
+    elementRef?: HTMLInputElement;
+    /**
+     * Snippet for supporting text (helper text) displayed below the input.
+     */
+    supportingText?: Snippet;
+    /**
+     * Props for the leading icon.
+     */
+    leadingIconProps?: IconProps;
+    /**
+     * Props for the trailing icon.
+     */
+    trailingIconProps?: IconProps;
+    /**
+     * Maximum number of characters allowed in the text field.
+     */
+    characterLimit?: number;
+    /**
+     * Callback function when the trailing icon is clicked.
+     */
+    trailingOnClick?: () => void;
+    /**
+     * Snippet to override the default input element.
+     */
+    inputChild?: Snippet<[{
+        props: Record<string, any>;
+    }]>;
+    /**
+     * Optional snippet for trailing icon override
+     */
+    trailingIcon?: Snippet;
+};

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

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

package/dist/components/forms/toggle-group/ToggleGroup.svelte

@@ -0,0 +1,38 @@
+<!--
+@component
+Toggle group renders as M3 segmented buttons — a continuous pill of
+connected toggle items for filtering or mode selection.
+
+@see https://m3.material.io/components/segmented-buttons/overview
+-->
+<script lang="ts">
+  import { ToggleGroup } from 'bits-ui';
+  import clsx from 'clsx';
+  import { toggleGroup } from './theme.js';
+  import type { ToggleGroupProps } from './types.js';
+
+  let {
+    type,
+    value = $bindable(undefined),
+    onValueChange,
+    disabled = false,
+    loop = true,
+    orientation = 'horizontal',
+    children,
+    class: className
+  }: ToggleGroupProps = $props();
+
+  const cls = $derived(toggleGroup({ orientation }));
+</script>
+
+<ToggleGroup.Root
+  {type}
+  bind:value
+  {onValueChange}
+  {disabled}
+  {loop}
+  {orientation}
+  class={cls.root({ class: clsx(className) })}
+>
+  {@render children?.()}
+</ToggleGroup.Root>

package/dist/components/forms/toggle-group/ToggleGroup.svelte.d.ts

@@ -0,0 +1,11 @@
+import { ToggleGroup } from 'bits-ui';
+import type { ToggleGroupProps } from './types.js';
+/**
+ * Toggle group renders as M3 segmented buttons — a continuous pill of
+ * connected toggle items for filtering or mode selection.
+ *
+ * @see https://m3.material.io/components/segmented-buttons/overview
+ */
+declare const ToggleGroup: import("svelte").Component<ToggleGroupProps, {}, "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/forms/toggle-group/ToggleGroupItem.svelte

@@ -0,0 +1,36 @@
+<!--
+@component
+A single segment within a ToggleGroup.
+Shows a leading check icon when selected, per M3 segmented button spec.
+-->
+<script lang="ts">
+  import { ToggleGroup } from 'bits-ui';
+  import clsx from 'clsx';
+  import { Icon, Layer } from '../../../utils/index.js';
+  import { toggleGroupItem } from './theme.js';
+  import type { ToggleGroupItemProps } from './types.js';
+
+  let {
+    value,
+    label,
+    iconProps,
+    disabled = false,
+    class: className
+  }: ToggleGroupItemProps = $props();
+
+  const { base, checkIcon, icon } = toggleGroupItem();
+</script>
+
+<ToggleGroup.Item {value} {disabled} class={base({ class: clsx(className) })}>
+  {#snippet children({ pressed })}
+    {#if pressed}
+      <Icon name="check" class={checkIcon()} />
+    {:else if iconProps}
+      <Icon {...iconProps} class={icon()} />
+    {/if}
+    {#if label}
+      <span>{label}</span>
+    {/if}
+    <Layer />
+  {/snippet}
+</ToggleGroup.Item>

package/dist/components/forms/toggle-group/ToggleGroupItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ToggleGroupItemProps } from './types.js';
+/**
+ * A single segment within a ToggleGroup.
+ * Shows a leading check icon when selected, per M3 segmented button spec.
+ */
+declare const ToggleGroupItem: import("svelte").Component<ToggleGroupItemProps, {}, "">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
+export default ToggleGroupItem;

package/dist/components/forms/toggle-group/index.d.ts

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

package/dist/components/forms/toggle-group/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 ToggleGroup } from './ToggleGroup.svelte';
+export { default as ToggleGroupItem } from './ToggleGroupItem.svelte';

package/dist/components/forms/toggle-group/theme.d.ts

@@ -0,0 +1,74 @@
+import { type VariantProps } from 'tailwind-variants';
+export type ToggleGroupVariants = VariantProps<typeof toggleGroup>;
+export type ToggleGroupItemVariants = VariantProps<typeof toggleGroupItem>;
+export declare const toggleGroup: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const toggleGroupItem: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+            checkIcon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+            checkIcon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    checkIcon: string;
+    icon: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+            checkIcon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    checkIcon: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    checkIcon: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/forms/toggle-group/theme.js

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+export const toggleGroup = tv({
+    slots: {
+        root: 'inline-flex h-10 overflow-hidden rounded-full border border-md-sys-color-outline'
+    },
+    variants: {
+        orientation: {
+            horizontal: { root: 'flex-row' },
+            vertical: { root: 'flex-col h-auto w-auto rounded-2xl' }
+        }
+    },
+    defaultVariants: { orientation: 'horizontal' }
+});
+export const toggleGroupItem = tv({
+    slots: {
+        base: 'layer-container state-layer relative inline-flex min-w-12 flex-1 items-center justify-center gap-2 px-4 md-sys-typescale-label-large text-md-sys-color-on-surface outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38 [&:not(:last-child)]:border-r [&:not(:last-child)]:border-md-sys-color-outline data-[state=on]:bg-md-sys-color-secondary-container data-[state=on]:text-md-sys-color-on-secondary-container',
+        checkIcon: 'size-[18px] text-[18px]',
+        icon: 'size-[18px] text-[18px]'
+    }
+});

package/dist/components/forms/toggle-group/types.d.ts

@@ -0,0 +1,25 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { ToggleGroupItemVariants, ToggleGroupVariants } from './theme.js';
+export type ToggleGroupProps = ToggleGroupVariants & {
+    /** Whether only one item can be active at a time, or multiple. */
+    type: 'single' | 'multiple';
+    /** Currently selected value(s). @bindable */
+    value?: any;
+    onValueChange?: (value: any) => void;
+    disabled?: boolean;
+    loop?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    children?: Snippet;
+    class?: string;
+};
+export type ToggleGroupItemProps = ToggleGroupItemVariants & {
+    /** The value this item represents. */
+    value: string;
+    /** Text label displayed in the item. */
+    label?: string;
+    /** Optional leading icon. When selected, a check replaces it. */
+    iconProps?: IconProps;
+    disabled?: boolean;
+    class?: string;
+};

package/dist/components/forms/toggle-group/types.js

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

package/dist/components/forms/tooltip/Tooltip.svelte

@@ -0,0 +1,104 @@
+<!--
+@component
+Tooltips provide informative text when users hover over, focus on, or tap an element.
+Plain tooltips are used for simple labels, while rich tooltips can contain formatted text and images.
+
+@see https://m3.material.io/components/tooltips/overview
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import Body from '../../typography/body/Body.svelte';
+  import Title from '../../typography/title/Title.svelte';
+  import { Layer } from '../../../utils/index.js';
+  import { tooltip } from './theme.js';
+  import type { TooltipProps } from './types.js';
+  import { Tooltip } from 'bits-ui';
+  import { enterExit, easeEmphasizedDecel, easeEmphasizedAccel } from '../../../animation/index.js';
+
+  let {
+    subhead,
+    supportingText,
+    children,
+    trigger,
+    triggerClass,
+    delayDuration = 100,
+    class: className,
+    variant = 'snack',
+    style = 'container',
+    isOpen = $bindable(false),
+    showArrow = false,
+    triggerProps = {},
+    contentProps = {},
+    ...restProps
+  }: TooltipProps = $props();
+
+  const {
+    subhead: subheadCls,
+    base,
+    trigger: triggerCls,
+    supportingText: supportingTextCls
+  } = $derived(tooltip({ variant, style }));
+
+  const baseCls = $derived(base({ class: clsx(className) }));
+
+  /**
+   * ButtonIcons always have tooltips on, but not always with text
+   * This ensures we don't get ugly rectangles then
+   */
+  const hasTooltipContent = $derived(
+    Boolean(supportingText || subhead || (variant === 'rich' && children))
+  );
+</script>
+
+<Tooltip.Root {...restProps} {delayDuration} bind:open={isOpen}>
+  <Tooltip.Trigger {...triggerProps} class={triggerCls({ class: clsx(triggerClass) })}>
+    {@render trigger?.()}
+  </Tooltip.Trigger>
+  <Tooltip.Portal>
+    {#if showArrow}
+      <Tooltip.Arrow />
+    {/if}
+
+    {#if hasTooltipContent}
+      <Tooltip.Content {...contentProps} forceMount>
+        {#snippet child({ wrapperProps, props, open })}
+          {#if open}
+            <div {...wrapperProps} class={wrapperProps.class as any}>
+              <div
+                {...props}
+                class={clsx(baseCls, props.class as any)}
+                in:enterExit={{
+                  duration: variant === 'rich' ? 200 : 150,
+                  easing: easeEmphasizedDecel,
+                  mode: 'scale'
+                }}
+                out:enterExit={{
+                  duration: variant === 'rich' ? 150 : 75,
+                  easing: easeEmphasizedAccel,
+                  mode: 'scale'
+                }}
+              >
+                {#if variant === 'rich'}
+                  <Layer />
+                  {#if subhead}
+                    <Title class={subheadCls()}>
+                      {subhead}
+                    </Title>
+                  {/if}
+                  <Body class={supportingTextCls()}>
+                    {supportingText}
+                  </Body>
+                  {@render children?.()}
+                {:else if supportingText}
+                  <Body class={supportingTextCls()}>
+                    {supportingText}
+                  </Body>
+                {/if}
+              </div>
+            </div>
+          {/if}
+        {/snippet}
+      </Tooltip.Content>
+    {/if}
+  </Tooltip.Portal>
+</Tooltip.Root>

package/dist/components/forms/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { TooltipProps } from './types.js';
+import { Tooltip } from 'bits-ui';
+/**
+ * Tooltips provide informative text when users hover over, focus on, or tap an element.
+ * Plain tooltips are used for simple labels, while rich tooltips can contain formatted text and images.
+ *
+ * @see https://m3.material.io/components/tooltips/overview
+ */
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "isOpen">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

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

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