@noxlovette/material 0.1.0

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

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

package/dist/components/date/theme.js

@@ -0,0 +1,149 @@
+import { tv } from 'tailwind-variants';
+export const dateRangeField = tv({
+    slots: {
+        base: `
+			group w-full h-14 bg-md-sys-color-surface-container-highest rounded-t-xs
+			after:absolute after:bottom-0 after:left-0 after:right-0
+			relative
+			state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
+			flex items-center
+			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 h-full flex items-center
+		`,
+        input: `
+			bg-transparent outline-none flex items-center
+			md-sys-typescale-body-large text-md-sys-color-on-surface
+			disabled:text-md-sys-color-on-surface/38 w-full
+		`,
+        leadingIcon: `
+      text-md-sys-color-on-surface-variant size-6
+      group-focus-within:text-md-sys-color-primary
+      group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
+    `,
+        trailingIcon: `
+      text-md-sys-color-on-surface-variant size-6
+      group-focus-within:text-md-sys-color-primary
+      group-data-[invalid]:text-md-sys-color-error mr-3 text-[24px]
+    `,
+        separator: `
+			text-md-sys-color-on-surface-variant select-none shrink-0
+		`,
+        label: `
+			absolute left-4 top-1.5
+			md-sys-typescale-body-small
+			text-md-sys-color-on-surface-variant
+			pointer-events-none
+			transition-[top,font-size,line-height,color,transform] duration-200 ease-in-out
+			group-focus-within:text-md-sys-color-primary
+			z-20
+		`,
+        requiredAsterisk: `
+			ml-0.5
+			text-md-sys-color-error
+			group-focus-within:text-md-sys-color-primary
+			transition-colors duration-200
+		`,
+        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',
+                requiredAsterisk: '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: 'pointer-events-none opacity-60'
+            }
+        }
+    }
+});
+export const dateField = tv({
+    slots: {
+        base: `
+				group w-full h-14 bg-md-sys-color-surface-container-highest rounded-t-xs
+				after:absolute after:bottom-0 after:left-0 after:right-0
+				relative
+				state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
+				flex items-center
+				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
+				justify-between
+			`,
+        inputWrapper: `
+			relative flex-1 px-4 h-full flex items-center
+		`,
+        input: `
+				w-full bg-transparent outline-none
+				md-sys-typescale-body-large text-md-sys-color-on-surface
+				disabled:text-md-sys-color-on-surface/38 flex items-center
+			`,
+        leadingIcon: `
+      text-md-sys-color-on-surface-variant size-6
+      group-focus-within:text-md-sys-color-primary
+      group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
+    `,
+        trailingIcon: `
+      text-md-sys-color-on-surface-variant size-6
+      group-focus-within:text-md-sys-color-primary
+      group-data-[invalid]:text-md-sys-color-error mr-3 text-[24px]
+    `,
+        label: `
+			absolute left-4 top-1.5
+			md-sys-typescale-body-small
+			text-md-sys-color-on-surface-variant
+			pointer-events-none
+			transition-[top,font-size,line-height,color,transform] duration-200 ease-in-out
+			group-focus-within:text-md-sys-color-primary
+			z-20
+		`,
+        requiredAsterisk: `
+			ml-0.5
+			text-md-sys-color-error
+			group-focus-within:text-md-sys-color-primary
+			transition-colors duration-200
+		`,
+        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',
+                requiredAsterisk: '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: 'pointer-events-none opacity-60'
+            }
+        }
+    }
+});

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

@@ -0,0 +1,64 @@
+import type { DateValue } from '@internationalized/date';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Common props for Date components.
+ *
+ * Note: We use DateValue from @internationalized/date.
+ * To create a DateValue from a string, use:
+ * ```ts
+ * import { parseDate } from '@internationalized/date';
+ * const date = parseDate('2023-10-27');
+ * ```
+ */
+export interface BaseDateProps extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    /**
+     * Whether the field is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is in an error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Supporting text shown below the field.
+     */
+    supportingText?: Snippet;
+}
+export interface DateFieldProps extends BaseDateProps {
+    /**
+     * The current value of the date field.
+     */
+    value?: DateValue;
+    /**
+     * The name for the hidden input submitted with the form.
+     * If not provided, no hidden input is rendered.
+     */
+    name?: string;
+}
+export interface DateRange {
+    start: DateValue | undefined;
+    end: DateValue | undefined;
+}
+export interface DateRangeFieldProps extends BaseDateProps {
+    /**
+     * Label for the start date input.
+     */
+    startLabel?: string;
+    /**
+     * Label for the end date input.
+     */
+    endLabel?: string;
+    /** The selected date range with optional start and end values. */
+    value?: DateRange;
+    /** Name prefix for hidden inputs submitted with the form. */
+    name?: string;
+}

package/dist/components/date/types.js

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

package/dist/components/forms/checkbox/Checkbox.svelte

@@ -0,0 +1,66 @@
+<!--
+@component
+Checkboxes let users select one or more items from a list, or turn an item on or off.
+
+@see https://m3.material.io/components/checkbox/overview
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { checkbox } from './theme.js';
+  import type { CheckboxProps } from './types.js';
+  import { Layer } from '../../../utils/index.js';
+  import { Checkbox } from 'bits-ui';
+
+  let {
+    label,
+    supportingText,
+    indeterminate = $bindable(false),
+    checked = $bindable(false),
+    disabled = false,
+    error = false,
+    align = 'start',
+    class: className,
+    ...restProps
+  }: CheckboxProps = $props();
+
+  const state = $derived(indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked');
+  const cls = $derived(checkbox({ state, error, align, disabled }));
+</script>
+
+<Checkbox.Root
+  bind:checked
+  bind:indeterminate
+  {disabled}
+  class={cls.root({ class: clsx(className) })}
+  {...restProps}
+>
+  {#snippet children({ checked, indeterminate })}
+    <div class={cls.container()}>
+      <div class={cls.control()}>
+        <Layer />
+        <div class={cls.box()}></div>
+      </div>
+      <span class={cls.indeterminateIcon()}></span>
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class={cls.checkIcon()}>
+        <path
+          d="M 4.83 13.41 L 9 17.585 L 19.59 7"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+    {#if label || supportingText}
+      <div class="flex flex-col gap-1 text-left">
+        {#if label}
+          <span class={cls.label()}>{label}</span>
+        {/if}
+        {#if supportingText}
+          <span class={cls.supporting()}>{supportingText}</span>
+        {/if}
+      </div>
+    {/if}
+  {/snippet}
+</Checkbox.Root>

package/dist/components/forms/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CheckboxProps } from './types.js';
+import { Checkbox } from 'bits-ui';
+/**
+ * Checkboxes let users select one or more items from a list, or turn an item on or off.
+ *
+ * @see https://m3.material.io/components/checkbox/overview
+ */
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

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

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

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

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

@@ -0,0 +1,141 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const checkbox: import("tailwind-variants").TVReturnType<{
+    state: {
+        unchecked: {};
+        checked: {
+            control: string;
+            box: string;
+            checkIcon: string;
+        };
+        indeterminate: {
+            control: string;
+            box: string;
+            indeterminateIcon: string;
+        };
+    };
+    error: {
+        true: {
+            control: string;
+            box: string;
+            label: string;
+            supporting: string;
+        };
+    };
+    align: {
+        start: string;
+        center: string;
+    };
+    disabled: {
+        true: {
+            root: string;
+            control: string;
+            box: string;
+            checkIcon: string;
+            indeterminateIcon: string;
+            label: string;
+            supporting: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    control: string;
+    box: string;
+    checkIcon: string;
+    indeterminateIcon: string;
+    label: string;
+    supporting: string;
+}, undefined, {
+    state: {
+        unchecked: {};
+        checked: {
+            control: string;
+            box: string;
+            checkIcon: string;
+        };
+        indeterminate: {
+            control: string;
+            box: string;
+            indeterminateIcon: string;
+        };
+    };
+    error: {
+        true: {
+            control: string;
+            box: string;
+            label: string;
+            supporting: string;
+        };
+    };
+    align: {
+        start: string;
+        center: string;
+    };
+    disabled: {
+        true: {
+            root: string;
+            control: string;
+            box: string;
+            checkIcon: string;
+            indeterminateIcon: string;
+            label: string;
+            supporting: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    control: string;
+    box: string;
+    checkIcon: string;
+    indeterminateIcon: string;
+    label: string;
+    supporting: string;
+}, import("tailwind-variants").TVReturnType<{
+    state: {
+        unchecked: {};
+        checked: {
+            control: string;
+            box: string;
+            checkIcon: string;
+        };
+        indeterminate: {
+            control: string;
+            box: string;
+            indeterminateIcon: string;
+        };
+    };
+    error: {
+        true: {
+            control: string;
+            box: string;
+            label: string;
+            supporting: string;
+        };
+    };
+    align: {
+        start: string;
+        center: string;
+    };
+    disabled: {
+        true: {
+            root: string;
+            control: string;
+            box: string;
+            checkIcon: string;
+            indeterminateIcon: string;
+            label: string;
+            supporting: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    control: string;
+    box: string;
+    checkIcon: string;
+    indeterminateIcon: string;
+    label: string;
+    supporting: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CheckboxM3Variants = VariantProps<typeof checkbox>;

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

@@ -0,0 +1,69 @@
+import { tv } from 'tailwind-variants';
+export const checkbox = tv({
+    slots: {
+        root: 'inline-flex min-h-10 select-none items-start gap-3 text-md-sys-color-on-surface min-h-4.5',
+        container: 'relative inline-flex size-[18px] shrink-0',
+        control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full peer-focus-visible:outline peer-focus-visible:outline-3 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-md-sys-color-secondary',
+        box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface',
+        checkIcon: 'pointer-events-none absolute inset-0 m-auto size-5 text-md-sys-color-on-primary opacity-0 scale-75',
+        indeterminateIcon: 'pointer-events-none absolute inset-0 m-auto block h-0.5 w-3 rounded-full bg-md-sys-color-on-primary opacity-0 scale-75',
+        label: 'md-sys-typescale-body-large leading-5 text-md-sys-color-on-surface',
+        supporting: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant'
+    },
+    variants: {
+        state: {
+            unchecked: {},
+            checked: {
+                control: 'text-md-sys-color-primary',
+                box: 'bg-md-sys-color-primary',
+                checkIcon: 'opacity-100 scale-100'
+            },
+            indeterminate: {
+                control: 'text-md-sys-color-primary',
+                box: 'bg-md-sys-color-primary',
+                indeterminateIcon: 'opacity-100 scale-100'
+            }
+        },
+        error: {
+            true: {
+                control: 'text-md-sys-color-error peer-focus-visible:outline-md-sys-color-error',
+                box: 'border-md-sys-color-error',
+                label: 'text-md-sys-color-error',
+                supporting: 'text-md-sys-color-error'
+            }
+        },
+        align: {
+            start: 'items-start',
+            center: 'items-center'
+        },
+        disabled: {
+            true: {
+                root: 'cursor-not-allowed',
+                control: 'text-md-sys-color-on-surface/38 before:hidden',
+                box: 'border-md-sys-color-on-surface/38',
+                checkIcon: 'text-md-sys-color-on-surface/38',
+                indeterminateIcon: 'bg-md-sys-color-on-surface/38',
+                label: 'text-md-sys-color-on-surface/38',
+                supporting: 'text-md-sys-color-on-surface/38'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            state: 'checked',
+            disabled: true,
+            control: 'text-md-sys-color-on-surface/38',
+            box: 'bg-md-sys-color-on-surface/12 border-transparent'
+        },
+        {
+            state: 'indeterminate',
+            disabled: true,
+            control: 'text-md-sys-color-on-surface/38',
+            box: 'bg-md-sys-color-on-surface/12 border-transparent'
+        }
+    ],
+    defaultVariants: {
+        state: 'unchecked',
+        align: 'start'
+    }
+});