sv5ui 1.7.0 → 2.0.0

package/dist/Pagination/pagination.variants.d.ts

@@ -7,50 +7,30 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         sm: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         md: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         lg: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         xl: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
     };
     disabled: {
@@ -68,10 +48,6 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
     next: string;
     last: string;
     ellipsisIcon: string;
-    firstIcon: string;
-    prevIcon: string;
-    nextIcon: string;
-    lastIcon: string;
 }, undefined, {
     size: {
         xs: {
@@ -79,50 +55,30 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         sm: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         md: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         lg: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         xl: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
     };
     disabled: {
@@ -140,10 +96,6 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
     next: string;
     last: string;
     ellipsisIcon: string;
-    firstIcon: string;
-    prevIcon: string;
-    nextIcon: string;
-    lastIcon: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -151,50 +103,30 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         sm: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         md: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         lg: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         xl: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
     };
     disabled: {
@@ -212,10 +144,6 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
     next: string;
     last: string;
     ellipsisIcon: string;
-    firstIcon: string;
-    prevIcon: string;
-    nextIcon: string;
-    lastIcon: string;
 }, undefined, unknown, unknown, undefined>>;
 export type PaginationVariantProps = VariantProps<typeof paginationVariants>;
 export type PaginationSlots = keyof ReturnType<typeof paginationVariants>;

package/dist/Pagination/pagination.variants.js

@@ -68,11 +68,7 @@ export const paginationVariants = tv({
         prev: '',
         next: '',
         last: '',
-        ellipsisIcon: navIcon,
-        firstIcon: navIcon,
-        prevIcon: navIcon,
-        nextIcon: navIcon,
-        lastIcon: navIcon
+        ellipsisIcon: navIcon
     },
     variants: {
         size: {
@@ -80,51 +76,31 @@ export const paginationVariants = tv({
                 list: 'gap-0.5',
                 item: 'size-7 text-xs',
                 ellipsis: 'size-7 text-xs',
-                ellipsisIcon: 'size-3',
-                firstIcon: 'size-3',
-                prevIcon: 'size-3',
-                nextIcon: 'size-3',
-                lastIcon: 'size-3'
+                ellipsisIcon: 'size-3'
             },
             sm: {
                 list: 'gap-0.5',
                 item: 'size-8 text-xs',
                 ellipsis: 'size-8 text-xs',
-                ellipsisIcon: 'size-3.5',
-                firstIcon: 'size-3.5',
-                prevIcon: 'size-3.5',
-                nextIcon: 'size-3.5',
-                lastIcon: 'size-3.5'
+                ellipsisIcon: 'size-3.5'
             },
             md: {
                 list: 'gap-1',
                 item: 'size-9 text-sm',
                 ellipsis: 'size-9 text-sm',
-                ellipsisIcon: 'size-4',
-                firstIcon: 'size-4',
-                prevIcon: 'size-4',
-                nextIcon: 'size-4',
-                lastIcon: 'size-4'
+                ellipsisIcon: 'size-4'
             },
             lg: {
                 list: 'gap-1',
                 item: 'size-10 text-sm',
                 ellipsis: 'size-10 text-sm',
-                ellipsisIcon: 'size-5',
-                firstIcon: 'size-5',
-                prevIcon: 'size-5',
-                nextIcon: 'size-5',
-                lastIcon: 'size-5'
+                ellipsisIcon: 'size-5'
             },
             xl: {
                 list: 'gap-1.5',
                 item: 'size-11 text-base',
                 ellipsis: 'size-11 text-base',
-                ellipsisIcon: 'size-5',
-                firstIcon: 'size-5',
-                prevIcon: 'size-5',
-                nextIcon: 'size-5',
-                lastIcon: 'size-5'
+                ellipsisIcon: 'size-5'
             }
         },
         disabled: {

package/dist/Select/Select.svelte

@@ -67,7 +67,8 @@
         itemLabel: itemLabelSlot,
         itemTrailing,
         selected: selectedSlot,
-        content: contentSlot
+        content: contentSlot,
+        ...restProps
     }: Props = $props()
 
     // ---- Form context ----
@@ -371,6 +372,7 @@
         {/if}
 
         <Select.Trigger
+            {...restProps}
             id={resolvedId}
             name={resolvedName}
             aria-describedby={ariaDescribedBy}

package/dist/Select/select.types.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { SelectVariantProps, SelectSlots } from './select.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
-import type { SelectRootPropsWithoutHTML, SelectContentPropsWithoutHTML } from 'bits-ui';
+import type { SelectRootPropsWithoutHTML, SelectContentPropsWithoutHTML, SelectTriggerProps } from 'bits-ui';
 /**
  * The value shape for the Select.
  * - When `multiple` is `false` (or omitted), the value is a single string (or undefined).
@@ -102,7 +102,10 @@ type ContentProps = Pick<SelectContentPropsWithoutHTML, 'side' | 'sideOffset' |
  *
  * @see https://bits-ui.com/docs/components/select
  */
-export interface SelectProps extends RootProps, ContentProps {
+type TriggerHTMLProps = Pick<SelectTriggerProps, 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'>;
+export interface SelectProps extends RootProps, ContentProps, TriggerHTMLProps {
+    /** Custom data attributes are forwarded to the trigger element. */
+    [key: `data-${string}`]: unknown;
     /**
      * Bindable reference to the root DOM element.
      */
@@ -114,13 +117,6 @@ export interface SelectProps extends RootProps, ContentProps {
      * - When `multiple` is `true`, this is a `string[]`.
      */
     value?: string | string[];
-    /**
-     * The default selected value when uncontrolled.
-     *
-     * - When `multiple` is `false`/omitted, this is a `string`.
-     * - When `multiple` is `true`, this is a `string[]`.
-     */
-    defaultValue?: string | string[];
     /**
      * Whether multiple items can be selected at once.
      * When `true`, `value` becomes a `string[]` and the trigger displays

package/dist/SelectMenu/SelectMenu.svelte

@@ -21,7 +21,6 @@
     } from '../FieldGroup/field-group.variants.js'
     import Icon from '../Icon/Icon.svelte'
     import Avatar from '../Avatar/Avatar.svelte'
-    import Input from '../Input/Input.svelte'
     import type { AvatarSize } from '../Avatar/avatar.types.js'
     import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
@@ -82,7 +81,8 @@
         itemTrailing,
         selected: selectedSlot,
         empty: emptySlot,
-        content: contentSlot
+        content: contentSlot,
+        ...restProps
     }: Props = $props()
 
     // ---- Form context ----
@@ -444,7 +444,9 @@
         {forceMount}
         class={contentClass}
     >
-        <Input
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+            type="text"
             autofocus
             placeholder={searchPlaceholder}
             value={searchTerm}
@@ -455,8 +457,6 @@
                 e.preventDefault()
                 handleCreate()
             }}
-            variant="none"
-            size={resolvedSize}
             class={inputClass}
         />
 
@@ -539,6 +539,7 @@
         />
 
         <Combobox.Trigger
+            {...restProps}
             id={resolvedId}
             aria-describedby={ariaDescribedBy}
             aria-invalid={resolvedHighlight ? true : undefined}

package/dist/SelectMenu/SelectMenuFormFieldTestWrapper.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import FormField from '../FormField/FormField.svelte'
+    import SelectMenu from './SelectMenu.svelte'
+    import type { SelectMenuItemType } from './select-menu.types.js'
+
+    let { items = [] }: { items?: SelectMenuItemType[] } = $props()
+</script>
+
+<FormField name="fruit" label="Fruit">
+    <SelectMenu open {items} placeholder="Pick" />
+</FormField>

package/dist/SelectMenu/SelectMenuFormFieldTestWrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SelectMenuItemType } from './select-menu.types.js';
+type $$ComponentProps = {
+    items?: SelectMenuItemType[];
+};
+declare const SelectMenuFormFieldTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectMenuFormFieldTestWrapper = ReturnType<typeof SelectMenuFormFieldTestWrapper>;
+export default SelectMenuFormFieldTestWrapper;

package/dist/SelectMenu/select-menu.types.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { SelectMenuVariantProps, SelectMenuSlots } from './select-menu.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
-import type { ComboboxContentPropsWithoutHTML } from 'bits-ui';
+import type { ComboboxContentPropsWithoutHTML, ComboboxTriggerProps } from 'bits-ui';
 /**
  * A single selectable option within the SelectMenu.
  */
@@ -87,7 +87,10 @@ type ContentProps = Pick<ComboboxContentPropsWithoutHTML, 'side' | 'sideOffset'
  *
  * @see https://bits-ui.com/docs/components/combobox
  */
-export interface SelectMenuProps extends ContentProps {
+type TriggerHTMLProps = Pick<ComboboxTriggerProps, 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'>;
+export interface SelectMenuProps extends ContentProps, TriggerHTMLProps {
+    /** Custom data attributes are forwarded to the trigger element. */
+    [key: `data-${string}`]: unknown;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/SelectMenu/select-menu.variants.d.ts

@@ -2,26 +2,31 @@ import { type VariantProps } from 'tailwind-variants';
 export declare const selectMenuVariants: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
+            input: string;
             empty: string;
             createItem: string;
             createItemIcon: string;
         };
         sm: {
+            input: string;
             empty: string;
             createItem: string;
             createItemIcon: string;
         };
         md: {
+            input: string;
             empty: string;
             createItem: string;
             createItemIcon: string;
         };
         lg: {
+            input: string;
             empty: string;
             createItem: string;
             createItemIcon: string;
         };
         xl: {
+            input: string;
             empty: string;
             createItem: string;
             createItemIcon: string;
@@ -29,7 +34,7 @@ export declare const selectMenuVariants: import("tailwind-variants").TVReturnTyp
     };
 }, {
     content: string[];
-    input: string;
+    input: string[];
     viewport: string;
     empty: string;
     createItem: string[];
@@ -606,26 +611,31 @@ export declare const selectMenuDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
         size: {
             xs: {
+                input: string;
                 empty: string;
                 createItem: string;
                 createItemIcon: string;
             };
             sm: {
+                input: string;
                 empty: string;
                 createItem: string;
                 createItemIcon: string;
             };
             md: {
+                input: string;
                 empty: string;
                 createItem: string;
                 createItemIcon: string;
             };
             lg: {
+                input: string;
                 empty: string;
                 createItem: string;
                 createItemIcon: string;
             };
             xl: {
+                input: string;
                 empty: string;
                 createItem: string;
                 createItemIcon: string;
@@ -633,7 +643,7 @@ export declare const selectMenuDefaults: {
         };
     }, {
         content: string[];
-        input: string;
+        input: string[];
         viewport: string;
         empty: string;
         createItem: string[];

package/dist/SelectMenu/select-menu.variants.js

@@ -13,7 +13,11 @@ export const selectMenuVariants = tv({
             'overflow-hidden',
             'flex flex-col'
         ],
-        input: 'border-b border-outline-variant',
+        input: [
+            'w-full border-0 border-b border-outline-variant bg-transparent',
+            'text-on-surface placeholder:text-on-surface-variant/50',
+            'focus:outline-none focus:ring-0'
+        ],
         viewport: 'p-1 flex-1 overflow-y-auto scrollbar-thin',
         empty: 'text-center text-on-surface-variant',
         createItem: [
@@ -28,26 +32,31 @@ export const selectMenuVariants = tv({
     variants: {
         size: {
             xs: {
+                input: 'px-2 py-1 text-xs',
                 empty: 'p-2 text-xs',
                 createItem: 'py-1 text-xs',
                 createItemIcon: 'size-3'
             },
             sm: {
+                input: 'px-2.5 py-1.5 text-xs',
                 empty: 'p-2.5 text-xs',
                 createItem: 'py-1.5 text-xs',
                 createItemIcon: 'size-3.5'
             },
             md: {
+                input: 'px-3 py-2 text-sm',
                 empty: 'p-2.5 text-sm',
                 createItem: 'py-1.5 text-sm',
                 createItemIcon: 'size-4'
             },
             lg: {
+                input: 'px-4 py-2.5 text-sm',
                 empty: 'p-3 text-sm',
                 createItem: 'py-2 text-sm',
                 createItemIcon: 'size-5'
             },
             xl: {
+                input: 'px-5 py-3 text-base',
                 empty: 'p-3 text-base',
                 createItem: 'py-2.5 text-base',
                 createItemIcon: 'size-5'

package/dist/Separator/Separator.svelte

@@ -24,6 +24,7 @@
         size = config.defaultVariants.size,
         type = config.defaultVariants.type,
         orientation = config.defaultVariants.orientation,
+        position = config.defaultVariants.position,
         decorative = false,
         class: className,
         content,
@@ -46,9 +47,11 @@
 </script>
 
 <Separator.Root bind:ref class={classes.root} {orientation} {decorative} {...restProps}>
-    <div class={classes.border}></div>
-
     {#if hasContent}
+        {#if position !== 'start'}
+            <div class={classes.border}></div>
+        {/if}
+
         <div class={classes.container}>
             {#if content}
                 {@render content()}
@@ -65,6 +68,10 @@
             {/if}
         </div>
 
+        {#if position !== 'end'}
+            <div class={classes.border}></div>
+        {/if}
+    {:else}
         <div class={classes.border}></div>
     {/if}
 </Separator.Root>

package/dist/Separator/separator.types.d.ts

@@ -19,6 +19,11 @@ export type SeparatorProps = Separator.RootProps & {
      * @default 'solid'
      */
     type?: NonNullable<SeparatorVariantProps['type']>;
+    /**
+     * Position of the label/icon/avatar/content along the separator.
+     * @default 'center'
+     */
+    position?: NonNullable<SeparatorVariantProps['position']>;
     /**
      * Text content displayed in the center of the separator.
      */

package/dist/Separator/separator.variants.d.ts

@@ -87,6 +87,11 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
             container: string;
         };
     };
+    position: {
+        start: string;
+        center: string;
+        end: string;
+    };
 }, {
     root: string;
     border: string;
@@ -182,6 +187,11 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
             container: string;
         };
     };
+    position: {
+        start: string;
+        center: string;
+        end: string;
+    };
 }, {
     root: string;
     border: string;
@@ -277,6 +287,11 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
             container: string;
         };
     };
+    position: {
+        start: string;
+        center: string;
+        end: string;
+    };
 }, {
     root: string;
     border: string;
@@ -376,6 +391,11 @@ export declare const separatorDefaults: {
                 container: string;
             };
         };
+        position: {
+            start: string;
+            center: string;
+            end: string;
+        };
     }, {
         root: string;
         border: string;
@@ -471,6 +491,11 @@ export declare const separatorDefaults: {
                 container: string;
             };
         };
+        position: {
+            start: string;
+            center: string;
+            end: string;
+        };
     }, {
         root: string;
         border: string;

package/dist/Separator/separator.variants.js

@@ -74,6 +74,11 @@ export const separatorVariants = tv({
                 border: 'h-full flex-1',
                 container: 'my-2'
             }
+        },
+        position: {
+            start: '',
+            center: '',
+            end: ''
         }
     },
     compoundVariants: [
@@ -94,7 +99,8 @@ export const separatorVariants = tv({
         color: 'surface',
         size: 'xs',
         type: 'solid',
-        orientation: 'horizontal'
+        orientation: 'horizontal',
+        position: 'center'
     }
 });
 export const separatorDefaults = {