uisv 0.0.1

package/dist/theme/checkbox.js

@@ -0,0 +1,125 @@
+export default (options) => ({
+    slots: {
+        root: 'relative flex items-start',
+        container: 'flex items-center',
+        base: 'rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2',
+        indicator: 'flex items-center justify-center size-full text-inverted',
+        icon: 'shrink-0 size-full',
+        wrapper: 'w-full',
+        label: 'block font-medium text-default',
+        description: 'text-muted'
+    },
+    variants: {
+        color: {
+            ...Object.fromEntries((options.theme.colors || []).map((color) => [
+                color,
+                {
+                    base: `focus-visible:outline-${color}`,
+                    indicator: `bg-${color}`
+                }
+            ])),
+            neutral: {
+                base: 'focus-visible:outline-inverted',
+                indicator: 'bg-inverted'
+            }
+        },
+        variant: {
+            list: {
+                root: ''
+            },
+            card: {
+                root: 'border border-muted rounded-lg'
+            }
+        },
+        indicator: {
+            start: {
+                root: 'flex-row',
+                wrapper: 'ms-2'
+            },
+            end: {
+                root: 'flex-row-reverse',
+                wrapper: 'me-2'
+            },
+            hidden: {
+                base: 'sr-only',
+                wrapper: 'text-center'
+            }
+        },
+        size: {
+            xs: {
+                base: 'size-3',
+                container: 'h-4',
+                wrapper: 'text-xs'
+            },
+            sm: {
+                base: 'size-3.5',
+                container: 'h-4',
+                wrapper: 'text-xs'
+            },
+            md: {
+                base: 'size-4',
+                container: 'h-5',
+                wrapper: 'text-sm'
+            },
+            lg: {
+                base: 'size-4.5',
+                container: 'h-5',
+                wrapper: 'text-sm'
+            },
+            xl: {
+                base: 'size-5',
+                container: 'h-6',
+                wrapper: 'text-base'
+            }
+        },
+        required: {
+            true: {
+                label: "after:content-['*'] after:ms-0.5 after:text-error"
+            }
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-75',
+                label: 'cursor-not-allowed opacity-75',
+                description: 'cursor-not-allowed opacity-75'
+            }
+        },
+        checked: {
+            true: ''
+        }
+    },
+    compoundVariants: [
+        { size: 'xs', variant: 'card', class: { root: 'p-2.5' } },
+        { size: 'sm', variant: 'card', class: { root: 'p-3' } },
+        { size: 'md', variant: 'card', class: { root: 'p-3.5' } },
+        { size: 'lg', variant: 'card', class: { root: 'p-4' } },
+        { size: 'xl', variant: 'card', class: { root: 'p-4.5' } },
+        ...(options.theme.colors || []).map((color) => ({
+            color,
+            variant: 'card',
+            class: {
+                root: `has-data-[state=checked]:border-${color}`
+            }
+        })),
+        {
+            color: 'neutral',
+            variant: 'card',
+            class: {
+                root: 'has-data-[state=checked]:border-inverted'
+            }
+        },
+        {
+            variant: 'card',
+            disabled: true,
+            class: {
+                root: 'cursor-not-allowed opacity-75'
+            }
+        }
+    ],
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        variant: 'list',
+        indicator: 'start'
+    }
+});

package/dist/theme/chip.d.ts

@@ -0,0 +1,45 @@
+declare const _default: (options: Required<ModuleOptions>) => {
+    slots: {
+        root: string;
+        base: string;
+    };
+    variants: {
+        color: {
+            neutral: string;
+        };
+        size: {
+            '3xs': string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+        position: {
+            'top-right': string;
+            'bottom-right': string;
+            'top-left': string;
+            'bottom-left': string;
+        };
+        inset: {
+            false: string;
+        };
+        standalone: {
+            false: string;
+        };
+    };
+    compoundVariants: {
+        position: string;
+        inset: boolean;
+        class: string;
+    }[];
+    defaultVariants: {
+        size: string;
+        color: string;
+        position: string;
+    };
+};
+export default _default;

package/dist/theme/chip.js

@@ -0,0 +1,62 @@
+export default (options) => ({
+    slots: {
+        root: 'relative inline-flex items-center justify-center shrink-0',
+        base: 'rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap'
+    },
+    variants: {
+        color: {
+            ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-${color}`])),
+            neutral: 'bg-inverted'
+        },
+        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]'
+        },
+        position: {
+            'top-right': 'top-0 right-0',
+            'bottom-right': 'bottom-0 right-0',
+            'top-left': 'top-0 left-0',
+            'bottom-left': 'bottom-0 left-0'
+        },
+        inset: {
+            false: ''
+        },
+        standalone: {
+            false: 'absolute'
+        }
+    },
+    compoundVariants: [
+        {
+            position: 'top-right',
+            inset: false,
+            class: '-translate-y-1/2 translate-x-1/2 transform'
+        },
+        {
+            position: 'bottom-right',
+            inset: false,
+            class: 'translate-y-1/2 translate-x-1/2 transform'
+        },
+        {
+            position: 'top-left',
+            inset: false,
+            class: '-translate-y-1/2 -translate-x-1/2 transform'
+        },
+        {
+            position: 'bottom-left',
+            inset: false,
+            class: 'translate-y-1/2 -translate-x-1/2 transform'
+        }
+    ],
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        position: 'top-right'
+    }
+});

package/dist/theme/collapsible.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    slots: {
+        root: string;
+        content: string;
+    };
+};
+export default _default;

package/dist/theme/collapsible.js

@@ -0,0 +1,6 @@
+export default {
+    slots: {
+        root: '',
+        content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
+    }
+};

package/dist/theme/color-picker.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    slots: {
+        root: string;
+        picker: string;
+        selector: string;
+        selectorBackground: string;
+        selectorThumb: string;
+        track: string;
+        trackThumb: string;
+    };
+    variants: {
+        size: {
+            xs: {
+                selector: string;
+                track: string;
+            };
+            sm: {
+                selector: string;
+                track: string;
+            };
+            md: {
+                selector: string;
+                track: string;
+            };
+            lg: {
+                selector: string;
+                track: string;
+            };
+            xl: {
+                selector: string;
+                track: string;
+            };
+        };
+    };
+    compoundVariants: never[];
+    defaultVariants: {
+        size: string;
+    };
+};
+export default _default;

package/dist/theme/color-picker.js

@@ -0,0 +1,39 @@
+export default {
+    slots: {
+        root: 'data-[disabled]:opacity-75',
+        picker: 'flex gap-4',
+        selector: 'rounded-md touch-none',
+        selectorBackground: 'w-full h-full relative rounded-md',
+        selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
+        track: 'w-[8px] relative rounded-md touch-none',
+        trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed'
+    },
+    variants: {
+        size: {
+            xs: {
+                selector: 'w-38 h-38',
+                track: 'h-38'
+            },
+            sm: {
+                selector: 'w-40 h-40',
+                track: 'h-40'
+            },
+            md: {
+                selector: 'w-42 h-42',
+                track: 'h-42'
+            },
+            lg: {
+                selector: 'w-44 h-44',
+                track: 'h-44'
+            },
+            xl: {
+                selector: 'w-46 h-46',
+                track: 'h-46'
+            }
+        }
+    },
+    compoundVariants: [],
+    defaultVariants: {
+        size: 'md'
+    }
+};

package/dist/theme/command-palette.d.ts

@@ -0,0 +1,47 @@
+declare const _default: (options: Required<ModuleOptions>) => {
+    slots: {
+        root: string;
+        input: string;
+        close: string;
+        back: string;
+        content: string;
+        footer: string;
+        viewport: string;
+        group: string;
+        empty: string;
+        label: string;
+        item: string;
+        itemLeadingIcon: string;
+        itemLeadingAvatar: string;
+        itemLeadingAvatarSize: string;
+        itemLeadingChip: string;
+        itemLeadingChipSize: string;
+        itemTrailing: string;
+        itemTrailingIcon: string;
+        itemTrailingHighlightedIcon: string;
+        itemTrailingKbds: string;
+        itemTrailingKbdsSize: string;
+        itemLabel: string;
+        itemLabelBase: string;
+        itemLabelPrefix: string;
+        itemLabelSuffix: string;
+    };
+    variants: {
+        active: {
+            true: {
+                item: string;
+                itemLeadingIcon: string;
+            };
+            false: {
+                item: any[];
+                itemLeadingIcon: any[];
+            };
+        };
+        loading: {
+            true: {
+                itemLeadingIcon: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/theme/command-palette.js

@@ -0,0 +1,52 @@
+export default (options) => ({
+    slots: {
+        root: 'flex flex-col min-h-0 min-w-0 divide-y divide-default',
+        input: '[&>input]:h-12',
+        close: '',
+        back: 'p-0',
+        content: 'relative overflow-hidden flex flex-col',
+        footer: 'p-1',
+        viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none',
+        group: 'p-1 isolate',
+        empty: 'py-6 text-center text-sm text-muted',
+        label: 'p-1.5 text-xs font-semibold text-highlighted',
+        item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75',
+        itemLeadingIcon: 'shrink-0 size-5',
+        itemLeadingAvatar: 'shrink-0',
+        itemLeadingAvatarSize: '2xs',
+        itemLeadingChip: 'shrink-0 size-5',
+        itemLeadingChipSize: 'md',
+        itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
+        itemTrailingIcon: 'shrink-0 size-5',
+        itemTrailingHighlightedIcon: 'shrink-0 size-5 text-dimmed hidden group-data-highlighted:inline-flex',
+        itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
+        itemTrailingKbdsSize: 'md',
+        itemLabel: 'truncate space-x-1 text-dimmed',
+        itemLabelBase: 'text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary',
+        itemLabelPrefix: 'text-default',
+        itemLabelSuffix: 'text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary'
+    },
+    variants: {
+        active: {
+            true: {
+                item: 'text-highlighted before:bg-elevated',
+                itemLeadingIcon: 'text-default'
+            },
+            false: {
+                item: [
+                    'text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50',
+                    options.theme.transitions && 'transition-colors before:transition-colors'
+                ],
+                itemLeadingIcon: [
+                    'text-dimmed group-data-highlighted:not-group-data-disabled:text-default',
+                    options.theme.transitions && 'transition-colors'
+                ]
+            }
+        },
+        loading: {
+            true: {
+                itemLeadingIcon: 'animate-spin'
+            }
+        }
+    }
+});

package/dist/theme/container.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    base: string;
+};
+export default _default;

package/dist/theme/container.js

@@ -0,0 +1,3 @@
+export default {
+    base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
+};

package/dist/theme/content/content-navigation.d.ts

@@ -0,0 +1,65 @@
+import type { NuxtOptions } from '@nuxt/schema';
+declare const _default: (options: Required<NuxtOptions["ui"]>) => {
+    slots: {
+        root: string;
+        content: string;
+        list: string;
+        item: string;
+        listWithChildren: string;
+        itemWithChildren: string;
+        trigger: string;
+        link: string;
+        linkLeadingIcon: string;
+        linkTrailing: string;
+        linkTrailingBadge: string;
+        linkTrailingBadgeSize: string;
+        linkTrailingIcon: string;
+        linkTitle: string;
+        linkTitleExternalIcon: string;
+    };
+    variants: {
+        color: {
+            neutral: {
+                trigger: string;
+                link: string;
+            };
+        };
+        highlightColor: {
+            neutral: string;
+        };
+        variant: {
+            pill: string;
+            link: string;
+        };
+        active: {
+            true: {
+                link: string;
+            };
+            false: {
+                link: string;
+                linkLeadingIcon: string;
+            };
+        };
+        disabled: {
+            true: {
+                trigger: string;
+            };
+        };
+        highlight: {
+            true: {};
+        };
+        level: {
+            true: {
+                item: string;
+                itemWithChildren: string;
+            };
+        };
+    };
+    compoundVariants: any[];
+    defaultVariants: {
+        color: string;
+        highlightColor: string;
+        variant: string;
+    };
+};
+export default _default;

package/dist/theme/content/content-navigation.js

@@ -0,0 +1,153 @@
+export default (options) => ({
+    slots: {
+        root: '',
+        content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
+        list: 'isolate -mx-2.5 -mt-1.5',
+        item: '',
+        listWithChildren: 'ms-5 border-s border-default',
+        itemWithChildren: 'flex flex-col data-[state=open]:mb-1.5',
+        trigger: 'font-semibold',
+        link: 'group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
+        linkLeadingIcon: 'shrink-0 size-5',
+        linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
+        linkTrailingBadge: 'shrink-0',
+        linkTrailingBadgeSize: 'sm',
+        linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
+        linkTitle: 'truncate',
+        linkTitleExternalIcon: 'size-3 align-top text-dimmed'
+    },
+    variants: {
+        color: {
+            ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+                    trigger: `focus-visible:ring-${color}`,
+                    link: `focus-visible:before:ring-${color}`
+                }])),
+            neutral: {
+                trigger: 'focus-visible:ring-inverted',
+                link: 'focus-visible:before:ring-inverted'
+            }
+        },
+        highlightColor: {
+            ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ''])),
+            neutral: ''
+        },
+        variant: {
+            pill: '',
+            link: ''
+        },
+        active: {
+            true: {
+                link: 'font-medium'
+            },
+            false: {
+                link: 'text-muted',
+                linkLeadingIcon: 'text-dimmed'
+            }
+        },
+        disabled: {
+            true: {
+                trigger: 'data-[state=open]:text-highlighted'
+            }
+        },
+        highlight: {
+            true: {}
+        },
+        level: {
+            true: {
+                item: 'ps-1.5 -ms-px',
+                itemWithChildren: 'ps-1.5 -ms-px'
+            }
+        }
+    },
+    compoundVariants: [{
+            highlight: true,
+            level: true,
+            class: {
+                link: ['after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full', options.theme.transitions && 'after:transition-colors']
+            }
+        }, {
+            disabled: false,
+            active: false,
+            variant: 'pill',
+            class: {
+                link: ['hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted', options.theme.transitions && 'transition-colors before:transition-colors'],
+                linkLeadingIcon: ['group-hover:text-default group-data-[state=open]:text-default', options.theme.transitions && 'transition-colors']
+            }
+        }, ...(options.theme.colors || []).map((color) => ({
+            color,
+            variant: 'pill',
+            active: true,
+            class: {
+                link: `text-${color}`,
+                linkLeadingIcon: `text-${color} group-data-[state=open]:text-${color}`
+            }
+        })), {
+            color: 'neutral',
+            variant: 'pill',
+            active: true,
+            class: {
+                link: 'text-highlighted',
+                linkLeadingIcon: 'text-highlighted group-data-[state=open]:text-highlighted'
+            }
+        }, {
+            variant: 'pill',
+            active: true,
+            highlight: false,
+            class: {
+                link: 'before:bg-elevated'
+            }
+        }, {
+            variant: 'pill',
+            active: true,
+            highlight: true,
+            disabled: false,
+            class: {
+                link: ['hover:before:bg-elevated/50', options.theme.transitions && 'before:transition-colors']
+            }
+        }, {
+            disabled: false,
+            active: false,
+            variant: 'link',
+            class: {
+                link: ['hover:text-highlighted data-[state=open]:text-highlighted', options.theme.transitions && 'transition-colors'],
+                linkLeadingIcon: ['group-hover:text-default group-data-[state=open]:text-default', options.theme.transitions && 'transition-colors']
+            }
+        }, ...(options.theme.colors || []).map((color) => ({
+            color,
+            variant: 'link',
+            active: true,
+            class: {
+                link: `text-${color}`,
+                linkLeadingIcon: `text-${color} group-data-[state=open]:text-${color}`
+            }
+        })), {
+            color: 'neutral',
+            variant: 'link',
+            active: true,
+            class: {
+                link: 'text-highlighted',
+                linkLeadingIcon: 'text-highlighted group-data-[state=open]:text-highlighted'
+            }
+        }, ...(options.theme.colors || []).map((highlightColor) => ({
+            highlightColor,
+            highlight: true,
+            level: true,
+            active: true,
+            class: {
+                link: `after:bg-${highlightColor}`
+            }
+        })), {
+            highlightColor: 'neutral',
+            highlight: true,
+            level: true,
+            active: true,
+            class: {
+                link: 'after:bg-inverted'
+            }
+        }],
+    defaultVariants: {
+        color: 'primary',
+        highlightColor: 'primary',
+        variant: 'pill'
+    }
+});

package/dist/theme/content/content-search-button.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    slots: {
+        base: string;
+        trailing: string;
+    };
+};
+export default _default;

package/dist/theme/content/content-search-button.js

@@ -0,0 +1,6 @@
+export default {
+    slots: {
+        base: '',
+        trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
+    }
+};

package/dist/theme/content/content-search.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    slots: {
+        modal: string;
+        input: string;
+    };
+};
+export default _default;