@noxlovette/material 0.3.3 → 0.4.0

package/dist/components/date/theme.js

@@ -2,17 +2,7 @@ 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
+			group w-full h-14 relative flex items-center
 		`,
         inputWrapper: `
 			relative flex-1 px-4 h-full flex items-center
@@ -57,6 +47,29 @@ export const dateRangeField = tv({
 		`
     },
     variants: {
+        variant: {
+            filled: {
+                base: `
+          bg-md-sys-color-surface-container-highest rounded-t-xs
+          after:absolute after:bottom-0 after:left-0 after:right-0
+          state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
+          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
+        `
+            },
+            outlined: {
+                base: `
+          rounded-xs border border-md-sys-color-outline
+          transition-colors duration-150
+          hover:border-md-sys-color-on-surface
+          focus-within:border-2 focus-within:border-md-sys-color-primary
+        `
+            }
+        },
         error: {
             true: {
                 base: 'after:bg-md-sys-color-error focus-within:after:bg-md-sys-color-error',
@@ -72,23 +85,31 @@ export const dateRangeField = tv({
                 base: 'pointer-events-none opacity-60'
             }
         }
+    },
+    compoundVariants: [
+        {
+            variant: 'outlined',
+            error: true,
+            class: {
+                base: 'border-md-sys-color-error hover:border-md-sys-color-error focus-within:border-md-sys-color-error'
+            }
+        },
+        {
+            variant: 'outlined',
+            disabled: true,
+            class: {
+                base: 'border-md-sys-color-on-surface/12 hover:border-md-sys-color-on-surface/12'
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: 'outlined'
     }
 });
 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
+				group w-full h-14 relative flex items-center justify-between
 			`,
         inputWrapper: `
 			relative flex-1 px-4 h-full flex items-center
@@ -98,6 +119,9 @@ export const dateField = tv({
 				md-sys-typescale-body-large text-md-sys-color-on-surface
 				disabled:text-md-sys-color-on-surface/38 flex items-center
 			`,
+        segments: `
+			flex w-full flex-col tabular-nums
+		`,
         leadingIcon: `
       text-md-sys-color-on-surface-variant size-6
       group-focus-within:text-md-sys-color-primary
@@ -127,9 +151,45 @@ export const dateField = tv({
 			px-4 pt-1 flex justify-between
 			md-sys-typescale-body-small
 			text-md-sys-color-on-surface-variant
-		`
+		`,
+        fieldset: `
+      absolute -top-[5px] left-0 right-0 bottom-0 m-0 px-2
+      pointer-events-none rounded-xs border border-md-sys-color-outline
+      transition-colors duration-150
+
+      group-hover:border-md-sys-color-on-surface
+      group-focus-within:border-2 group-focus-within:border-md-sys-color-primary
+    `,
+        legend: `
+      invisible float-none block h-auto max-w-full overflow-hidden
+      whitespace-nowrap md-sys-typescale-body-small
+    `,
+        legendLabel: `
+      px-1
+    `
     },
     variants: {
+        variant: {
+            filled: {
+                base: `
+          bg-md-sys-color-surface-container-highest rounded-t-xs
+          after:absolute after:bottom-0 after:left-0 after:right-0
+          state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
+          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
+        `,
+                segments: 'pt-4'
+            },
+            outlined: {
+                label: `
+          top-0 -translate-y-1/2
+        `
+            }
+        },
         error: {
             true: {
                 base: 'after:bg-md-sys-color-error focus-within:after:bg-md-sys-color-error',
@@ -137,13 +197,22 @@ export const dateField = tv({
                 requiredAsterisk: 'text-md-sys-color-error',
                 supportingText: 'text-md-sys-color-error',
                 leadingIcon: 'text-md-sys-color-error',
-                trailingIcon: 'text-md-sys-color-error'
+                trailingIcon: 'text-md-sys-color-error',
+                fieldset: `
+          border-md-sys-color-error
+          group-hover:border-md-sys-color-error
+          group-focus-within:border-md-sys-color-error
+        `
             }
         },
         disabled: {
             true: {
-                base: 'pointer-events-none opacity-60'
+                base: 'pointer-events-none opacity-60',
+                fieldset: 'border-md-sys-color-on-surface/12 group-hover:border-md-sys-color-on-surface/12'
             }
         }
+    },
+    defaultVariants: {
+        variant: 'outlined'
     }
 });

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

@@ -32,6 +32,11 @@ export interface BaseDateProps extends HTMLAttributes<HTMLDivElement> {
      * Supporting text shown below the field.
      */
     supportingText?: Snippet;
+    /**
+     * The visual style of the field.
+     * @default 'outlined'
+     */
+    variant?: 'filled' | 'outlined';
 }
 export interface DateFieldProps extends BaseDateProps {
     /**

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

@@ -47,15 +47,13 @@ Checkboxes let users select one or more items from a list, or turn an item on or
         {#if indeterminate}
           <span class={cls.indeterminateIcon()}></span>
         {:else if checked}
-          <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
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            class={cls.checkIcon()}
+            fill="currentColor"
+          >
+            <path d="M9.55 18 3.85 12.3 5.275 10.875 9.55 15.15 18.725 5.975 20.15 7.4Z" />
           </svg>
         {/if}
       </div>

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

@@ -22,8 +22,8 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
         };
     };
     align: {
-        start: string;
-        center: string;
+        start: "items-start";
+        center: "items-center";
     };
     disabled: {
         true: {
@@ -67,8 +67,8 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
         };
     };
     align: {
-        start: string;
-        center: string;
+        start: "items-start";
+        center: "items-center";
     };
     disabled: {
         true: {
@@ -89,7 +89,7 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
     checkIcon: string;
     indeterminateIcon: string;
     label: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     state: {
         unchecked: {};
         checked: {
@@ -112,8 +112,8 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
         };
     };
     align: {
-        start: string;
-        center: string;
+        start: "items-start";
+        center: "items-center";
     };
     disabled: {
         true: {
@@ -134,5 +134,5 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
     checkIcon: string;
     indeterminateIcon: string;
     label: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type CheckboxM3Variants = VariantProps<typeof checkbox>;

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

@@ -1,11 +1,11 @@
 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 cursor-pointer',
+        root: 'group inline-flex min-h-10 select-none items-start gap-3 text-md-sys-color-on-surface min-h-4.5 cursor-pointer',
         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',
+        control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full group-focus-visible:outline group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-md-sys-color-secondary transition-colors duration-[var(--md-sys-motion-duration-fast)] ease-[var(--md-sys-motion-timing-function)]',
+        box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface transition-colors duration-[var(--md-sys-motion-duration-fast)] ease-[var(--md-sys-motion-timing-function)]',
+        checkIcon: 'pointer-events-none absolute inset-0 m-auto size-3.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 cursor-pointer'
     },
@@ -25,7 +25,7 @@ export const checkbox = tv({
         },
         error: {
             true: {
-                control: 'text-md-sys-color-error peer-focus-visible:outline-md-sys-color-error',
+                control: 'text-md-sys-color-error group-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'
@@ -48,17 +48,39 @@ export const checkbox = tv({
         }
     },
     compoundVariants: [
+        {
+            state: 'checked',
+            error: true,
+            class: {
+                box: 'bg-md-sys-color-error',
+                checkIcon: 'text-md-sys-color-on-error'
+            }
+        },
+        {
+            state: 'indeterminate',
+            error: true,
+            class: {
+                box: 'bg-md-sys-color-error',
+                indeterminateIcon: 'bg-md-sys-color-on-error'
+            }
+        },
         {
             state: 'checked',
             disabled: true,
-            control: 'text-md-sys-color-on-surface/38',
-            box: 'bg-md-sys-color-on-surface/12 border-transparent'
+            class: {
+                control: 'text-md-sys-color-on-surface/38',
+                box: 'bg-md-sys-color-on-surface/38 border-transparent',
+                checkIcon: 'text-md-sys-color-surface'
+            }
         },
         {
             state: 'indeterminate',
             disabled: true,
-            control: 'text-md-sys-color-on-surface/38',
-            box: 'bg-md-sys-color-on-surface/12 border-transparent'
+            class: {
+                control: 'text-md-sys-color-on-surface/38',
+                box: 'bg-md-sys-color-on-surface/38 border-transparent',
+                indeterminateIcon: 'bg-md-sys-color-surface'
+            }
         }
     ],
     defaultVariants: {

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

@@ -2,32 +2,32 @@ import { type VariantProps } from 'tailwind-variants';
 export type CommandVariants = VariantProps<typeof command>;
 export declare const command: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            input?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            group?: import("tailwind-merge").ClassNameValue;
-            list?: import("tailwind-merge").ClassNameValue;
-            separator?: import("tailwind-merge").ClassNameValue;
-            item?: import("tailwind-merge").ClassNameValue;
-            inputWrapper?: import("tailwind-merge").ClassNameValue;
-            inputIcon?: import("tailwind-merge").ClassNameValue;
-            empty?: import("tailwind-merge").ClassNameValue;
-            itemIcon?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            input?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            inputWrapper?: import("tailwind-variants").ClassValue;
+            inputIcon?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            itemIcon?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            input?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            group?: import("tailwind-merge").ClassNameValue;
-            list?: import("tailwind-merge").ClassNameValue;
-            separator?: import("tailwind-merge").ClassNameValue;
-            item?: import("tailwind-merge").ClassNameValue;
-            inputWrapper?: import("tailwind-merge").ClassNameValue;
-            inputIcon?: import("tailwind-merge").ClassNameValue;
-            empty?: import("tailwind-merge").ClassNameValue;
-            itemIcon?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            input?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            inputWrapper?: import("tailwind-variants").ClassValue;
+            inputIcon?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            itemIcon?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -43,17 +43,17 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     itemIcon: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            input?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            group?: import("tailwind-merge").ClassNameValue;
-            list?: import("tailwind-merge").ClassNameValue;
-            separator?: import("tailwind-merge").ClassNameValue;
-            item?: import("tailwind-merge").ClassNameValue;
-            inputWrapper?: import("tailwind-merge").ClassNameValue;
-            inputIcon?: import("tailwind-merge").ClassNameValue;
-            empty?: import("tailwind-merge").ClassNameValue;
-            itemIcon?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            input?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            inputWrapper?: import("tailwind-variants").ClassValue;
+            inputIcon?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            itemIcon?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -67,7 +67,7 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     separator: string;
     item: string;
     itemIcon: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
     inputWrapper: string;
     inputIcon: string;
@@ -78,4 +78,4 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     separator: string;
     item: string;
     itemIcon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -38,7 +38,7 @@ export declare const pinInput: import("tailwind-variants").TVReturnType<{
     container: string;
     cell: string;
     supportingText: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     error: {
         true: {
             cell: string;
@@ -57,4 +57,4 @@ export declare const pinInput: import("tailwind-variants").TVReturnType<{
     container: string;
     cell: string;
     supportingText: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -85,7 +85,7 @@ export declare const radioGroup: import("tailwind-variants").TVReturnType<{
     innerDot: string;
     label: string;
     supporting: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         vertical: {
             root: string;
@@ -128,5 +128,5 @@ export declare const radioGroup: import("tailwind-variants").TVReturnType<{
     innerDot: string;
     label: string;
     supporting: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type RadioGroupVariants = VariantProps<typeof radioGroup>;

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

@@ -2,8 +2,8 @@ import { type VariantProps } from 'tailwind-variants';
 export type SearchVariants = VariantProps<typeof search>;
 export declare const search: import("tailwind-variants").TVReturnType<{
     shadow: {
-        true: string;
-        false: string;
+        true: "shadow-elevation-3";
+        false: "";
     };
 }, {
     base: string;
@@ -12,22 +12,22 @@ export declare const search: import("tailwind-variants").TVReturnType<{
     input: string;
 }, undefined, {
     shadow: {
-        true: string;
-        false: string;
+        true: "shadow-elevation-3";
+        false: "";
     };
 }, {
     base: string;
     leadingIcon: string;
     trailingIcon: string;
     input: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     shadow: {
-        true: string;
-        false: string;
+        true: "shadow-elevation-3";
+        false: "";
     };
 }, {
     base: string;
     leadingIcon: string;
     trailingIcon: string;
     input: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/forms/select/Select.svelte

@@ -23,6 +23,7 @@ Powered by bits-ui for accessibility and behavior.
     options = [],
     placeholder,
     error = false,
+    variant = 'outlined',
     supportingText,
     leadingIconProps,
     triggerProps,
@@ -32,7 +33,7 @@ Powered by bits-ui for accessibility and behavior.
     ...rootProps
   }: SelectProps = $props();
 
-  const cls = $derived(selectCls({ disabled, error }));
+  const cls = $derived(selectCls({ disabled, error, variant }));
 
   const selectedLabel = $derived.by(() => {
     for (const option of options as any[]) {
@@ -82,7 +83,7 @@ Powered by bits-ui for accessibility and behavior.
                       easing: easeEmphasized,
                       mode: 'scale'
                     }}
-                    style:width="var(--bits-select-trigger-width)"
+                    style:width="var(--bits-select-anchor-width)"
                     style:max-width="min(calc(100vw - 32px), 560px)"
                   >
                     <Select.Viewport class="w-full">

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

@@ -1,6 +1,14 @@
 import { type VariantProps } from 'tailwind-variants';
 export type SelectVariants = VariantProps<typeof select>;
 export declare const select: import("tailwind-variants").TVReturnType<{
+    variant: {
+        filled: {
+            base: string;
+        };
+        outlined: {
+            base: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -28,6 +36,14 @@ export declare const select: import("tailwind-variants").TVReturnType<{
     separator: string;
     supportingText: string;
 }, undefined, {
+    variant: {
+        filled: {
+            base: string;
+        };
+        outlined: {
+            base: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -54,7 +70,15 @@ export declare const select: import("tailwind-variants").TVReturnType<{
     groupLabel: string;
     separator: string;
     supportingText: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        filled: {
+            base: string;
+        };
+        outlined: {
+            base: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -81,4 +105,4 @@ export declare const select: import("tailwind-variants").TVReturnType<{
     groupLabel: string;
     separator: string;
     supportingText: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;