sv5ui 1.1.3 → 1.3.0

package/dist/CheckboxGroup/checkbox-group.variants.js

@@ -0,0 +1,231 @@
+import { tv } from 'tailwind-variants';
+export const checkboxGroupVariants = tv({
+    slots: {
+        root: '',
+        fieldset: 'flex m-0 p-0 border-0 min-w-0',
+        legend: 'w-full font-medium text-on-surface mb-1',
+        item: 'flex items-start',
+        container: 'flex items-center',
+        wrapper: '',
+        base: [
+            'inline-flex items-center justify-center shrink-0 rounded-md border',
+            'focus-visible:outline-2 focus-visible:outline-offset-2',
+            'transition-colors duration-200',
+            'border-outline-variant',
+            'data-[state=unchecked]:bg-transparent'
+        ],
+        indicator: 'flex items-center justify-center',
+        icon: 'shrink-0 text-surface',
+        label: 'block font-medium text-on-surface',
+        description: 'text-on-surface-variant'
+    },
+    variants: {
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        size: {
+            xs: {
+                fieldset: 'gap-2',
+                legend: 'text-xs',
+                base: 'size-3.5 rounded',
+                container: 'h-4',
+                icon: 'size-2.5',
+                wrapper: 'text-xs'
+            },
+            sm: {
+                fieldset: 'gap-2.5',
+                legend: 'text-xs',
+                base: 'size-4 rounded',
+                container: 'h-4',
+                icon: 'size-3',
+                wrapper: 'text-xs'
+            },
+            md: {
+                fieldset: 'gap-3',
+                legend: 'text-sm',
+                base: 'size-4.5 rounded-md',
+                container: 'h-5',
+                icon: 'size-3.5',
+                wrapper: 'text-sm'
+            },
+            lg: {
+                fieldset: 'gap-3.5',
+                legend: 'text-sm',
+                base: 'size-5 rounded-md',
+                container: 'h-5',
+                icon: 'size-4',
+                wrapper: 'text-sm'
+            },
+            xl: {
+                fieldset: 'gap-4',
+                legend: 'text-base',
+                base: 'size-5.5 rounded-md',
+                container: 'h-6',
+                icon: 'size-4.5',
+                wrapper: 'text-base'
+            }
+        },
+        orientation: {
+            horizontal: {
+                fieldset: 'flex-row flex-wrap items-start'
+            },
+            vertical: {
+                fieldset: 'flex-col'
+            }
+        },
+        variant: {
+            list: '',
+            card: {
+                item: 'border border-outline-variant rounded-lg cursor-pointer select-none'
+            }
+        },
+        indicator: {
+            start: {
+                wrapper: 'ms-2'
+            },
+            end: {
+                item: 'flex-row-reverse',
+                wrapper: 'me-2'
+            },
+            hidden: {
+                container: 'sr-only'
+            }
+        },
+        loading: {
+            true: {
+                icon: 'animate-spin'
+            }
+        },
+        required: {
+            true: {
+                legend: "after:content-['*'] after:ms-0.5 after:text-error"
+            }
+        },
+        disabled: {
+            true: {
+                root: 'opacity-75',
+                base: 'cursor-not-allowed',
+                label: 'cursor-not-allowed',
+                description: 'cursor-not-allowed'
+            }
+        }
+    },
+    compoundVariants: [
+        // ========== COLOR (checked bg + border + focus ring) ==========
+        {
+            color: 'primary',
+            class: {
+                base: 'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary focus-visible:outline-primary'
+            }
+        },
+        {
+            color: 'secondary',
+            class: {
+                base: 'data-[state=checked]:bg-secondary data-[state=checked]:border-secondary data-[state=indeterminate]:bg-secondary data-[state=indeterminate]:border-secondary focus-visible:outline-secondary'
+            }
+        },
+        {
+            color: 'tertiary',
+            class: {
+                base: 'data-[state=checked]:bg-tertiary data-[state=checked]:border-tertiary data-[state=indeterminate]:bg-tertiary data-[state=indeterminate]:border-tertiary focus-visible:outline-tertiary'
+            }
+        },
+        {
+            color: 'success',
+            class: {
+                base: 'data-[state=checked]:bg-success data-[state=checked]:border-success data-[state=indeterminate]:bg-success data-[state=indeterminate]:border-success focus-visible:outline-success'
+            }
+        },
+        {
+            color: 'warning',
+            class: {
+                base: 'data-[state=checked]:bg-warning data-[state=checked]:border-warning data-[state=indeterminate]:bg-warning data-[state=indeterminate]:border-warning focus-visible:outline-warning'
+            }
+        },
+        {
+            color: 'error',
+            class: {
+                base: 'data-[state=checked]:bg-error data-[state=checked]:border-error data-[state=indeterminate]:bg-error data-[state=indeterminate]:border-error focus-visible:outline-error'
+            }
+        },
+        {
+            color: 'info',
+            class: {
+                base: 'data-[state=checked]:bg-info data-[state=checked]:border-info data-[state=indeterminate]:bg-info data-[state=indeterminate]:border-info focus-visible:outline-info'
+            }
+        },
+        {
+            color: 'surface',
+            class: {
+                base: 'data-[state=checked]:bg-on-surface data-[state=checked]:border-on-surface data-[state=indeterminate]:bg-on-surface data-[state=indeterminate]:border-on-surface focus-visible:outline-outline'
+            }
+        },
+        // ========== CARD × SIZE (padding) ==========
+        { variant: 'card', size: 'xs', class: { item: 'p-2' } },
+        { variant: 'card', size: 'sm', class: { item: 'p-2.5' } },
+        { variant: 'card', size: 'md', class: { item: 'p-3' } },
+        { variant: 'card', size: 'lg', class: { item: 'p-3.5' } },
+        { variant: 'card', size: 'xl', class: { item: 'p-4' } },
+        // ========== CARD × COLOR (checked border) ==========
+        {
+            variant: 'card',
+            color: 'primary',
+            class: { item: 'has-[[data-state=checked]]:border-primary' }
+        },
+        {
+            variant: 'card',
+            color: 'secondary',
+            class: { item: 'has-[[data-state=checked]]:border-secondary' }
+        },
+        {
+            variant: 'card',
+            color: 'tertiary',
+            class: { item: 'has-[[data-state=checked]]:border-tertiary' }
+        },
+        {
+            variant: 'card',
+            color: 'success',
+            class: { item: 'has-[[data-state=checked]]:border-success' }
+        },
+        {
+            variant: 'card',
+            color: 'warning',
+            class: { item: 'has-[[data-state=checked]]:border-warning' }
+        },
+        {
+            variant: 'card',
+            color: 'error',
+            class: { item: 'has-[[data-state=checked]]:border-error' }
+        },
+        {
+            variant: 'card',
+            color: 'info',
+            class: { item: 'has-[[data-state=checked]]:border-info' }
+        },
+        {
+            variant: 'card',
+            color: 'surface',
+            class: { item: 'has-[[data-state=checked]]:border-on-surface' }
+        },
+        // ========== CARD × DISABLED ==========
+        { variant: 'card', disabled: true, class: { item: 'cursor-not-allowed' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        size: 'md',
+        variant: 'list',
+        indicator: 'start',
+        orientation: 'vertical'
+    }
+});
+export const checkboxGroupDefaults = {
+    defaultVariants: checkboxGroupVariants.defaultVariants,
+    slots: {}
+};

package/dist/CheckboxGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export type { CheckboxGroupProps, CheckboxGroupItem } from './checkbox-group.types.js';

package/dist/CheckboxGroup/index.js

@@ -0,0 +1 @@
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';

package/dist/Chip/Chip.svelte

@@ -11,6 +11,7 @@
     const config = getComponentConfig('chip', chipDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'div',
         ui,
         text,
@@ -19,7 +20,7 @@
         position = config.defaultVariants.position,
         inset = false,
         standalone = false,
-        show = true,
+        show = $bindable(true),
         class: className,
         children,
         content,
@@ -35,7 +36,7 @@
     })
 </script>
 
-<svelte:element this={as} class={classes.root} {...restProps}>
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
     {@render children?.()}
 
     {#if show}

package/dist/Chip/Chip.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ChipProps } from './chip.types.js';
 export type Props = ChipProps;
-declare const Chip: import("svelte").Component<ChipProps, {}, "">;
+declare const Chip: import("svelte").Component<ChipProps, {}, "show" | "ref">;
 type Chip = ReturnType<typeof Chip>;
 export default Chip;

package/dist/Chip/chip.types.d.ts

@@ -3,6 +3,10 @@ import type { ClassNameValue } from 'tailwind-merge';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ChipVariantProps, ChipSlots } from './chip.variants.js';
 export type ChipProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bind to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The HTML element to render as.
      * @default 'div'
@@ -42,7 +46,7 @@ export type ChipProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
      */
     standalone?: boolean;
     /**
-     * Controls the visibility of the chip.
+     * Controls the visibility of the chip. Supports `bind:show`.
      * @default true
      */
     show?: boolean;

package/dist/Chip/chip.variants.d.ts

@@ -27,15 +27,33 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
+        '3xs': {
+            base: string;
+        };
+        '2xs': {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
     };
     position: {
         'top-right': {
@@ -91,15 +109,33 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
+        '3xs': {
+            base: string;
+        };
+        '2xs': {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
     };
     position: {
         'top-right': {
@@ -155,15 +191,33 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
+        '3xs': {
+            base: string;
+        };
+        '2xs': {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
     };
     position: {
         'top-right': {
@@ -223,15 +277,33 @@ export declare const chipDefaults: {
             };
         };
         size: {
-            '3xs': string;
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-            '3xl': string;
+            '3xs': {
+                base: string;
+            };
+            '2xs': {
+                base: string;
+            };
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+            '2xl': {
+                base: string;
+            };
+            '3xl': {
+                base: string;
+            };
         };
         position: {
             'top-right': {
@@ -287,15 +359,33 @@ export declare const chipDefaults: {
             };
         };
         size: {
-            '3xs': string;
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-            '3xl': string;
+            '3xs': {
+                base: string;
+            };
+            '2xs': {
+                base: string;
+            };
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+            '2xl': {
+                base: string;
+            };
+            '3xl': {
+                base: string;
+            };
         };
         position: {
             'top-right': {

package/dist/Chip/chip.variants.js

@@ -16,15 +16,15 @@ export const chipVariants = tv({
             surface: { base: 'bg-inverse-surface text-inverse-on-surface' }
         },
         size: {
-            '3xs': 'h-[4px] min-w-[4px] text-[4px]',
-            '2xs': 'h-[5px] min-w-[5px] text-[5px]',
-            xs: 'h-[6px] min-w-[6px] text-[6px]',
-            sm: 'h-[7px] min-w-[7px] text-[7px]',
-            md: 'h-[8px] min-w-[8px] text-[8px]',
-            lg: 'h-[9px] min-w-[9px] text-[9px]',
-            xl: 'h-[10px] min-w-[10px] text-[10px]',
-            '2xl': 'h-[11px] min-w-[11px] text-[11px]',
-            '3xl': 'h-[12px] min-w-[12px] text-[12px]'
+            '3xs': { base: 'h-[4px] min-w-[4px] text-[4px]' },
+            '2xs': { base: 'h-[5px] min-w-[5px] text-[5px]' },
+            xs: { base: 'h-[6px] min-w-[6px] text-[6px]' },
+            sm: { base: 'h-[7px] min-w-[7px] text-[7px]' },
+            md: { base: 'h-[8px] min-w-[8px] text-[8px]' },
+            lg: { base: 'h-[9px] min-w-[9px] text-[9px]' },
+            xl: { base: 'h-[10px] min-w-[10px] text-[10px]' },
+            '2xl': { base: 'h-[11px] min-w-[11px] text-[11px]' },
+            '3xl': { base: 'h-[12px] min-w-[12px] text-[12px]' }
         },
         position: {
             'top-right': { base: 'top-0 right-0' },