@noxlovette/material 0.3.2 → 0.4.0

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>>;
+}>>;

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

@@ -3,18 +3,10 @@ export const select = tv({
     slots: {
         root: 'relative w-full',
         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
-      data-[state=open]:after:bg-md-sys-color-primary
-      data-[state=open]: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 px-0 relative flex items-center
     `,
         trigger: `
-      peer w-full h-full flex items-center justify-between bg-transparent outline-none
+      group peer w-full h-full flex items-center justify-between bg-transparent outline-none
       cursor-pointer
     `,
         inputWrapper: `
@@ -29,7 +21,7 @@ export const select = tv({
     `,
         leadingIcon: `
       text-md-sys-color-on-surface-variant size-6
-      group-data-[state=open]:text-md-sys-color-primary
+      group-has-[[data-state=open]]:text-md-sys-color-primary
       group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
     `,
         dropdownIcon: `
@@ -40,27 +32,27 @@ export const select = tv({
       group-data-[state=open]:rotate-180
     `,
         content: `
-      z-[100] min-w-[var(--bits-select-trigger-width)] max-h-96 overflow-y-auto
-      rounded-xl bg-md-sys-color-surface-container-high
-      shadow-elevation-3 py-2 outline-none
+      z-[100] min-w-[var(--bits-select-anchor-width)] max-h-96 overflow-y-auto
+      rounded-lg gap-1 bg-md-sys-color-surface-container-high
+      shadow-elevation-3 ring-md-sys-color-outline/10 px-2 py-1 outline-none
     `,
         item: `
-      relative flex w-full cursor-pointer select-none
-      px-4 py-3 outline-none
+      rounded-sm relative flex w-full cursor-pointer select-none items-center
+      px-3 py-2 outline-none
       md-sys-typescale-body-large text-md-sys-color-on-surface
       hover:bg-md-sys-color-on-surface/8
-      focus:bg-md-sys-color-on-surface/8
+      data-[highlighted]:bg-md-sys-color-on-surface/8
       data-[selected]:bg-md-sys-color-secondary-container
       data-[selected]:text-md-sys-color-on-secondary-container
-      data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50
-      transition-colors duration-150 first:rounded-t-xl last:rounded-b-xl
+      data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
+      transition-colors duration-150
     `,
         groupLabel: `
-      px-4 py-2 md-sys-typescale-label-medium
+      px-3 pt-2 pb-1 md-sys-typescale-label-medium
       text-md-sys-color-primary
     `,
         separator: `
-      -mx-1 my-1 h-px bg-md-sys-color-outline-variant
+      my-1 h-px bg-md-sys-color-outline-variant
     `,
         supportingText: `
       px-4 pt-1 flex justify-between
@@ -70,9 +62,32 @@ export const select = tv({
     `
     },
     variants: {
+        variant: {
+            filled: {
+                base: `
+          bg-md-sys-color-surface-container-highest
+          rounded-t-xs state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
+          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
+          has-[[data-state=open]]:after:bg-md-sys-color-primary
+          has-[[data-state=open]]: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
+          has-[[data-state=open]]:border-2 has-[[data-state=open]]:border-md-sys-color-primary
+        `
+            }
+        },
         error: {
             true: {
-                base: 'after:bg-md-sys-color-error data-[state=open]:after:bg-md-sys-color-error',
+                base: 'after:bg-md-sys-color-error has-[[data-state=open]]:after:bg-md-sys-color-error',
                 supportingText: 'text-md-sys-color-error',
                 leadingIcon: 'text-md-sys-color-error',
                 trailingIcon: 'text-md-sys-color-error'
@@ -83,5 +98,24 @@ export const select = tv({
                 root: 'cursor-not-allowed opacity-60'
             }
         }
+    },
+    compoundVariants: [
+        {
+            variant: 'outlined',
+            error: true,
+            class: {
+                base: 'border-md-sys-color-error hover:border-md-sys-color-error has-[[data-state=open]]: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'
     }
 });

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

@@ -1,14 +1,14 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const slider: import("tailwind-variants").TVReturnType<{
     size: {
-        xs: string;
-        s: string;
-        m: string;
-        l: string;
-        xl: string;
+        xs: "[--track-height:1rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
+        s: "[--track-height:1.5rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
+        m: "[--track-height:2.5rem] [--handle-height:3.25rem] [--track-radius:var(--m3-shape-medium)] [--icon-size:1.5rem]";
+        l: "[--track-height:3.5rem] [--handle-height:4.25rem] [--track-radius:var(--m3-shape-large)] [--icon-size:1.5rem]";
+        xl: "[--track-height:6rem] [--handle-height:6.75rem] [--track-radius:var(--m3-shape-extra-large)] [--icon-size:2rem]";
     };
     vertical: {
-        true: string;
+        true: "[writing-mode:sideways-lr]";
     };
 }, {
     root: string;
@@ -26,14 +26,14 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
     value: string;
 }, undefined, {
     size: {
-        xs: string;
-        s: string;
-        m: string;
-        l: string;
-        xl: string;
+        xs: "[--track-height:1rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
+        s: "[--track-height:1.5rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
+        m: "[--track-height:2.5rem] [--handle-height:3.25rem] [--track-radius:var(--m3-shape-medium)] [--icon-size:1.5rem]";
+        l: "[--track-height:3.5rem] [--handle-height:4.25rem] [--track-radius:var(--m3-shape-large)] [--icon-size:1.5rem]";
+        xl: "[--track-height:6rem] [--handle-height:6.75rem] [--track-radius:var(--m3-shape-extra-large)] [--icon-size:2rem]";
     };
     vertical: {
-        true: string;
+        true: "[writing-mode:sideways-lr]";
     };
 }, {
     root: string;
@@ -49,16 +49,16 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
     stopRest: string;
     handle: string;
     value: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        xs: string;
-        s: string;
-        m: string;
-        l: string;
-        xl: string;
+        xs: "[--track-height:1rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
+        s: "[--track-height:1.5rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
+        m: "[--track-height:2.5rem] [--handle-height:3.25rem] [--track-radius:var(--m3-shape-medium)] [--icon-size:1.5rem]";
+        l: "[--track-height:3.5rem] [--handle-height:4.25rem] [--track-radius:var(--m3-shape-large)] [--icon-size:1.5rem]";
+        xl: "[--track-height:6rem] [--handle-height:6.75rem] [--track-radius:var(--m3-shape-extra-large)] [--icon-size:2rem]";
     };
     vertical: {
-        true: string;
+        true: "[writing-mode:sideways-lr]";
     };
 }, {
     root: string;
@@ -74,5 +74,5 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
     stopRest: string;
     handle: string;
     value: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type SliderVariants = VariantProps<typeof slider>;

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

@@ -31,7 +31,7 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
     icon: string;
     iconChecked: string;
     iconUnchecked: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     icons: {
         checked: {};
         both: {
@@ -47,5 +47,5 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
     icon: string;
     iconChecked: string;
     iconUnchecked: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type SwitchVariants = VariantProps<typeof toggle>;

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

@@ -8,6 +8,7 @@
     argTypes: {
       label: { control: 'text' },
       placeholder: { control: 'text' },
+      variant: { control: 'select', options: ['filled', 'outlined'] },
       disabled: { control: 'boolean' },
       error: { control: 'boolean' },
       required: { control: 'boolean' },
@@ -15,6 +16,7 @@
     },
     args: {
       label: 'Label',
+      variant: 'outlined',
       disabled: false,
       error: false,
       required: false
@@ -72,3 +74,23 @@
     <Textfield label="Disabled" disabled value="Can't edit" />
   </div>
 </Story>
+
+<Story name="Outlined" asChild>
+  <div class="flex max-w-sm flex-col gap-6 p-6">
+    <Textfield variant="outlined" label="Default" />
+    <Textfield variant="outlined" label="With value" value="Hello" />
+    <Textfield variant="outlined" label="Required" required />
+    <Textfield variant="outlined" label="Error" error value="Invalid value">
+      {#snippet supportingText()}
+        This field is required.
+      {/snippet}
+    </Textfield>
+    <Textfield variant="outlined" label="Disabled" disabled value="Can't edit" />
+    <Textfield
+      variant="outlined"
+      label="Search"
+      leadingIconProps={{ name: 'search' }}
+      trailingIconProps={{ name: 'close' }}
+    />
+  </div>
+</Story>

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

@@ -27,13 +27,14 @@ Text fields allow users to enter and edit text.
     disabled = false,
     error = false,
     required = false,
+    variant = 'outlined',
     trailingOnClick,
     inputChild,
     trailingIcon,
     ...restProps
   }: TextfieldProps = $props();
 
-  const cls = $derived(textfield({ disabled, error }));
+  const cls = $derived(textfield({ disabled, error, variant }));
 
   const inputProps = $derived({
     id,
@@ -75,6 +76,14 @@ Text fields allow users to enter and edit text.
         iconProps={trailingIconProps}
       ></ButtonIcon>
     {/if}
+
+    {#if variant === 'outlined'}
+      <fieldset class={cls.fieldset()} aria-hidden="true">
+        <legend class={cls.legend()}>
+          <span class={cls.legendLabel()}>{label}{required ? '*' : ''}</span>
+        </legend>
+      </fieldset>
+    {/if}
   </div>
 
   {#if supportingText}

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

@@ -1,6 +1,15 @@
 import { type VariantProps } from 'tailwind-variants';
 export type TextFieldVariants = VariantProps<typeof textfield>;
 export declare const textfield: import("tailwind-variants").TVReturnType<{
+    variant: {
+        filled: {
+            base: string;
+            label: string;
+        };
+        outlined: {
+            label: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -8,11 +17,13 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
             supportingText: string;
             leadingIcon: string;
             trailingIcon: string;
+            fieldset: string;
         };
     };
     disabled: {
         true: {
             base: string;
+            fieldset: string;
         };
     };
 }, {
@@ -24,7 +35,19 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
     leadingIcon: string;
     trailingIcon: string;
     supportingText: string;
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
 }, undefined, {
+    variant: {
+        filled: {
+            base: string;
+            label: string;
+        };
+        outlined: {
+            label: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -32,11 +55,13 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
             supportingText: string;
             leadingIcon: string;
             trailingIcon: string;
+            fieldset: string;
         };
     };
     disabled: {
         true: {
             base: string;
+            fieldset: string;
         };
     };
 }, {
@@ -48,7 +73,19 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
     leadingIcon: string;
     trailingIcon: string;
     supportingText: string;
-}, import("tailwind-variants").TVReturnType<{
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        filled: {
+            base: string;
+            label: string;
+        };
+        outlined: {
+            label: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -56,11 +93,13 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
             supportingText: string;
             leadingIcon: string;
             trailingIcon: string;
+            fieldset: string;
         };
     };
     disabled: {
         true: {
             base: string;
+            fieldset: string;
         };
     };
 }, {
@@ -72,4 +111,7 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
     leadingIcon: string;
     trailingIcon: string;
     supportingText: string;
-}, undefined, unknown, unknown, undefined>>;
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
+}>>;

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

@@ -2,16 +2,7 @@ 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
-
+      group relative w-full h-14 flex items-center
     `,
         inputWrapper: `
       relative flex-1 px-4
@@ -29,10 +20,6 @@ export const textfield = tv({
       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
@@ -54,22 +41,75 @@ export const textfield = 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-[0.01px] overflow-hidden
+      whitespace-nowrap md-sys-typescale-body-small
+      transition-[max-width] duration-150 ease-in-out
+
+      group-focus-within:max-w-full
+      group-has-[input:not(:placeholder-shown)]:max-w-full
+    `,
+        legendLabel: `
+      px-1
     `
     },
     variants: {
+        variant: {
+            filled: {
+                base: `
+          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
+          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
+        `,
+                label: `
+          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
+        `
+            },
+            outlined: {
+                label: `
+          peer-focus:top-0 peer-focus:md-sys-typescale-body-small peer-focus:-translate-y-1/2
+          peer-not-placeholder-shown:top-0 peer-not-placeholder-shown:md-sys-typescale-body-small peer-not-placeholder-shown:-translate-y-1/2
+        `
+            }
+        },
         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'
+                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: 'cursor-not-allowed opacity-60'
+                base: 'cursor-not-allowed 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/forms/toggle-group/ToggleGroup.svelte

@@ -1,7 +1,7 @@
 <!--
 @component
-@deprecated Use `ButtonGroup` instead. Google has removed segmented buttons
-from the Material Design 3 spec in favour of Button groups.
+@deprecated Use `ConnectedButtonGroup` instead. Google has removed segmented
+buttons from the Material Design 3 spec in favour of connected button groups.
 
 Toggle group renders as M3 segmented buttons — a continuous pill of
 connected toggle items for filtering or mode selection.

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

@@ -1,8 +1,8 @@
 import { ToggleGroup } from 'bits-ui';
 import type { ToggleGroupProps } from './types.js';
 /**
- * @deprecated Use `ButtonGroup` instead. Google has removed segmented buttons
- * from the Material Design 3 spec in favour of Button groups.
+ * @deprecated Use `ConnectedButtonGroup` instead. Google has removed segmented
+ * buttons from the Material Design 3 spec in favour of connected button groups.
  *
  * Toggle group renders as M3 segmented buttons — a continuous pill of
  * connected toggle items for filtering or mode selection.

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

@@ -1,6 +1,6 @@
 <!--
 @component
-@deprecated Use `ButtonGroupItem` instead. Pair with the deprecated `ToggleGroup`.
+@deprecated Use `ConnectedButtonGroupItem` instead. Pair with the deprecated `ToggleGroup`.
 -->
 <script lang="ts">
   import { ToggleGroup } from 'bits-ui';

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

@@ -1,5 +1,5 @@
 import type { ToggleGroupItemProps } from './types.js';
-/** @deprecated Use `ButtonGroupItem` instead. Pair with the deprecated `ToggleGroup`. */
+/** @deprecated Use `ConnectedButtonGroupItem` instead. Pair with the deprecated `ToggleGroup`. */
 declare const ToggleGroupItem: import("svelte").Component<ToggleGroupItemProps, {}, "">;
 type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
 export default ToggleGroupItem;

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

@@ -23,7 +23,7 @@ export declare const toggleGroup: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         horizontal: {
             root: string;
@@ -34,21 +34,21 @@ export declare const toggleGroup: import("tailwind-variants").TVReturnType<{
     };
 }, {
     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;
-            checkIcon?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+            checkIcon?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            checkIcon?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+            checkIcon?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -57,18 +57,18 @@ export declare const toggleGroupItem: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            checkIcon?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+            checkIcon?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     base: string;
     checkIcon: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
     checkIcon: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -1,7 +1,7 @@
 import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { ToggleGroupItemVariants, ToggleGroupVariants } from './theme.js';
-/** @deprecated Use `ButtonGroupProps` from `ButtonGroup` instead. */
+/** @deprecated Use `ConnectedButtonGroupProps` from `ConnectedButtonGroup` instead. */
 export type ToggleGroupProps = ToggleGroupVariants & {
     /** Whether only one item can be active at a time, or multiple. */
     type: 'single' | 'multiple';
@@ -14,7 +14,7 @@ export type ToggleGroupProps = ToggleGroupVariants & {
     children?: Snippet;
     class?: string;
 };
-/** @deprecated Use `ButtonGroupItemProps` from `ButtonGroupItem` instead. */
+/** @deprecated Use `ConnectedButtonGroupItemProps` from `ConnectedButtonGroupItem` instead. */
 export type ToggleGroupItemProps = ToggleGroupItemVariants & {
     /** The value this item represents. */
     value: string;