uisv 0.0.1

package/dist/theme/breadcrumb.js

@@ -0,0 +1,42 @@
+export default (options) => ({
+    slots: {
+        root: 'relative min-w-0',
+        list: 'flex items-center gap-1.5',
+        item: 'flex min-w-0',
+        link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary',
+        linkLeadingIcon: 'shrink-0 size-5',
+        linkLeadingAvatar: 'shrink-0',
+        linkLeadingAvatarSize: '2xs',
+        linkLabel: 'truncate',
+        separator: 'flex',
+        separatorIcon: 'shrink-0 size-5 text-muted'
+    },
+    variants: {
+        active: {
+            true: {
+                link: 'text-primary font-semibold'
+            },
+            false: {
+                link: 'text-muted font-medium'
+            }
+        },
+        disabled: {
+            true: {
+                link: 'cursor-not-allowed opacity-75'
+            }
+        },
+        to: {
+            true: ''
+        }
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            active: false,
+            to: true,
+            class: {
+                link: ['hover:text-default', options.theme.transitions && 'transition-colors']
+            }
+        }
+    ]
+});

package/dist/theme/button.d.ts

@@ -0,0 +1,19 @@
+import type { PluginOptions } from '../vite.js';
+declare const _default: (options: PluginOptions) => {
+    slots: {
+        base: any[];
+        label: string;
+        leadingIcon: string;
+        leadingAvatar: string;
+        leadingAvatarSize: string;
+        trailingIcon: string;
+    };
+    variants: any;
+    compoundVariants: any[];
+    defaultVariants: {
+        color: string;
+        variant: string;
+        size: string;
+    };
+};
+export default _default;

package/dist/theme/button.js

@@ -0,0 +1,194 @@
+import { fieldGroupVariant } from './field-group.js';
+export default (options) => ({
+    slots: {
+        base: [
+            'rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75',
+            options.transitions && 'transition-colors'
+        ],
+        label: 'truncate',
+        leadingIcon: 'shrink-0',
+        leadingAvatar: 'shrink-0',
+        leadingAvatarSize: '',
+        trailingIcon: 'shrink-0'
+    },
+    variants: {
+        ...fieldGroupVariant,
+        color: {
+            ...Object.fromEntries((options.colors || []).map((color) => [color, ''])),
+            neutral: ''
+        },
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: '',
+            ghost: '',
+            link: ''
+        },
+        size: {
+            xs: {
+                base: 'px-2 py-1 text-xs gap-1',
+                leadingIcon: 'size-4',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-4'
+            },
+            sm: {
+                base: 'px-2.5 py-1.5 text-xs gap-1.5',
+                leadingIcon: 'size-4',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-4'
+            },
+            md: {
+                base: 'px-2.5 py-1.5 text-sm gap-1.5',
+                leadingIcon: 'size-5',
+                leadingAvatarSize: '2xs',
+                trailingIcon: 'size-5'
+            },
+            lg: {
+                base: 'px-3 py-2 text-sm gap-2',
+                leadingIcon: 'size-5',
+                leadingAvatarSize: '2xs',
+                trailingIcon: 'size-5'
+            },
+            xl: {
+                base: 'px-3 py-2 text-base gap-2',
+                leadingIcon: 'size-6',
+                leadingAvatarSize: 'xs',
+                trailingIcon: 'size-6'
+            }
+        },
+        block: {
+            true: {
+                base: 'w-full justify-center',
+                trailingIcon: 'ms-auto'
+            }
+        },
+        square: {
+            true: ''
+        },
+        leading: {
+            true: ''
+        },
+        trailing: {
+            true: ''
+        },
+        loading: {
+            true: ''
+        },
+        active: {
+            true: {
+                base: ''
+            },
+            false: {
+                base: ''
+            }
+        }
+    },
+    compoundVariants: [
+        ...(options.colors || []).map((color) => ({
+            color,
+            variant: 'solid',
+            class: `text-inverted bg-${color} hover:bg-${color}/75 active:bg-${color}/75 disabled:bg-${color} aria-disabled:bg-${color} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
+        })),
+        ...(options.colors || []).map((color) => ({
+            color,
+            variant: 'outline',
+            class: `ring ring-inset ring-${color}/50 text-${color} hover:bg-${color}/10 active:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
+        })),
+        ...(options.colors || []).map((color) => ({
+            color,
+            variant: 'soft',
+            class: `text-${color} bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 focus:outline-none focus-visible:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10`
+        })),
+        ...(options.colors || []).map((color) => ({
+            color,
+            variant: 'subtle',
+            class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
+        })),
+        ...(options.colors || []).map((color) => ({
+            color,
+            variant: 'ghost',
+            class: `text-${color} hover:bg-${color}/10 active:bg-${color}/10 focus:outline-none focus-visible:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
+        })),
+        ...(options.colors || []).map((color) => ({
+            color,
+            variant: 'link',
+            class: `text-${color} hover:text-${color}/75 active:text-${color}/75 disabled:text-${color} aria-disabled:text-${color} focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+        })),
+        {
+            color: 'neutral',
+            variant: 'solid',
+            class: 'text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted'
+        },
+        {
+            color: 'neutral',
+            variant: 'outline',
+            class: 'ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted'
+        },
+        {
+            color: 'neutral',
+            variant: 'soft',
+            class: 'text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated'
+        },
+        {
+            color: 'neutral',
+            variant: 'subtle',
+            class: 'ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted'
+        },
+        {
+            color: 'neutral',
+            variant: 'ghost',
+            class: 'text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent'
+        },
+        {
+            color: 'neutral',
+            variant: 'link',
+            class: 'text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted'
+        },
+        {
+            size: 'xs',
+            square: true,
+            class: 'p-1'
+        },
+        {
+            size: 'sm',
+            square: true,
+            class: 'p-1.5'
+        },
+        {
+            size: 'md',
+            square: true,
+            class: 'p-1.5'
+        },
+        {
+            size: 'lg',
+            square: true,
+            class: 'p-2'
+        },
+        {
+            size: 'xl',
+            square: true,
+            class: 'p-2'
+        },
+        {
+            loading: true,
+            leading: true,
+            class: {
+                leadingIcon: 'animate-spin'
+            }
+        },
+        {
+            loading: true,
+            leading: false,
+            trailing: true,
+            class: {
+                trailingIcon: 'animate-spin'
+            }
+        }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        variant: 'solid',
+        size: 'md'
+    }
+});

package/dist/theme/calendar.d.ts

@@ -0,0 +1,59 @@
+declare const _default: (options: Required<ModuleOptions>) => {
+    slots: {
+        root: string;
+        header: string;
+        body: string;
+        heading: string;
+        grid: string;
+        gridRow: string;
+        gridWeekDaysRow: string;
+        gridBody: string;
+        headCell: string;
+        cell: string;
+        cellTrigger: any[];
+    };
+    variants: {
+        color: {
+            neutral: {
+                headCell: string;
+                cellTrigger: string;
+            };
+        };
+        size: {
+            xs: {
+                heading: string;
+                cell: string;
+                headCell: string;
+                cellTrigger: string;
+                body: string;
+            };
+            sm: {
+                heading: string;
+                headCell: string;
+                cell: string;
+                cellTrigger: string;
+            };
+            md: {
+                heading: string;
+                headCell: string;
+                cell: string;
+                cellTrigger: string;
+            };
+            lg: {
+                heading: string;
+                headCell: string;
+                cellTrigger: string;
+            };
+            xl: {
+                heading: string;
+                headCell: string;
+                cellTrigger: string;
+            };
+        };
+    };
+    defaultVariants: {
+        size: string;
+        color: string;
+    };
+};
+export default _default;

package/dist/theme/calendar.js

@@ -0,0 +1,68 @@
+export default (options) => ({
+    slots: {
+        root: '',
+        header: 'flex items-center justify-between',
+        body: 'flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0',
+        heading: 'text-center font-medium truncate mx-auto',
+        grid: 'w-full border-collapse select-none space-y-1 focus:outline-none',
+        gridRow: 'grid grid-cols-7 place-items-center',
+        gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
+        gridBody: 'grid',
+        headCell: 'rounded-md',
+        cell: 'relative text-center',
+        cellTrigger: [
+            'm-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted',
+            options.theme.transitions && 'transition'
+        ]
+    },
+    variants: {
+        color: {
+            ...Object.fromEntries((options.theme.colors || []).map((color) => [
+                color,
+                {
+                    headCell: `text-${color}`,
+                    cellTrigger: `focus-visible:ring-${color} data-[selected]:bg-${color} data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
+                }
+            ])),
+            neutral: {
+                headCell: 'text-highlighted',
+                cellTrigger: 'focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10'
+            }
+        },
+        size: {
+            xs: {
+                heading: 'text-xs',
+                cell: 'text-xs',
+                headCell: 'text-[10px]',
+                cellTrigger: 'size-7',
+                body: 'space-y-2 pt-2'
+            },
+            sm: {
+                heading: 'text-xs',
+                headCell: 'text-xs',
+                cell: 'text-xs',
+                cellTrigger: 'size-7'
+            },
+            md: {
+                heading: 'text-sm',
+                headCell: 'text-xs',
+                cell: 'text-sm',
+                cellTrigger: 'size-8'
+            },
+            lg: {
+                heading: 'text-md',
+                headCell: 'text-md',
+                cellTrigger: 'size-9 text-md'
+            },
+            xl: {
+                heading: 'text-lg',
+                headCell: 'text-lg',
+                cellTrigger: 'size-10 text-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'primary'
+    }
+});

package/dist/theme/card.d.ts

@@ -0,0 +1,28 @@
+declare const _default: {
+    slots: {
+        root: string;
+        header: string;
+        body: string;
+        footer: string;
+    };
+    variants: {
+        variant: {
+            solid: {
+                root: string;
+            };
+            outline: {
+                root: string;
+            };
+            soft: {
+                root: string;
+            };
+            subtle: {
+                root: string;
+            };
+        };
+    };
+    defaultVariants: {
+        variant: string;
+    };
+};
+export default _default;

package/dist/theme/card.js

@@ -0,0 +1,27 @@
+export default {
+    slots: {
+        root: 'rounded-lg overflow-hidden',
+        header: 'p-4 sm:px-6',
+        body: 'p-4 sm:p-6',
+        footer: 'p-4 sm:px-6'
+    },
+    variants: {
+        variant: {
+            solid: {
+                root: 'bg-inverted text-inverted'
+            },
+            outline: {
+                root: 'bg-default ring ring-default divide-y divide-default'
+            },
+            soft: {
+                root: 'bg-elevated/50 divide-y divide-default'
+            },
+            subtle: {
+                root: 'bg-elevated/50 ring ring-default divide-y divide-default'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'outline'
+    }
+};

package/dist/theme/carousel.d.ts

@@ -0,0 +1,36 @@
+declare const _default: (options: Required<ModuleOptions>) => {
+    slots: {
+        root: string;
+        viewport: string;
+        container: string;
+        item: string;
+        controls: string;
+        arrows: string;
+        prev: string;
+        next: string;
+        dots: string;
+        dot: any[];
+    };
+    variants: {
+        orientation: {
+            vertical: {
+                container: string;
+                item: string;
+                prev: string;
+                next: string;
+            };
+            horizontal: {
+                container: string;
+                item: string;
+                prev: string;
+                next: string;
+            };
+        };
+        active: {
+            true: {
+                dot: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/theme/carousel.js

@@ -0,0 +1,38 @@
+export default (options) => ({
+    slots: {
+        root: 'relative focus:outline-none',
+        viewport: 'overflow-hidden',
+        container: 'flex items-start',
+        item: 'min-w-0 shrink-0 basis-full',
+        controls: '',
+        arrows: '',
+        prev: 'absolute rounded-full',
+        next: 'absolute rounded-full',
+        dots: 'absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3',
+        dot: [
+            'cursor-pointer size-3 bg-accented rounded-full',
+            options.theme.transitions && 'transition'
+        ]
+    },
+    variants: {
+        orientation: {
+            vertical: {
+                container: 'flex-col -mt-4',
+                item: 'pt-4',
+                prev: 'top-4 sm:-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90',
+                next: 'bottom-4 sm:-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90'
+            },
+            horizontal: {
+                container: 'flex-row -ms-4',
+                item: 'ps-4',
+                prev: 'start-4 sm:-start-12 top-1/2 -translate-y-1/2',
+                next: 'end-4 sm:-end-12 top-1/2 -translate-y-1/2'
+            }
+        },
+        active: {
+            true: {
+                dot: 'data-[state=active]:bg-inverted'
+            }
+        }
+    }
+});

package/dist/theme/changelog-version.d.ts

@@ -0,0 +1,42 @@
+declare const _default: {
+    slots: {
+        root: string;
+        container: string;
+        header: string;
+        meta: string;
+        date: string;
+        badge: string;
+        title: string;
+        description: string;
+        imageWrapper: string;
+        image: string;
+        authors: string;
+        footer: string;
+        indicator: string;
+        dot: string;
+        dotInner: string;
+    };
+    variants: {
+        body: {
+            false: {
+                footer: string;
+            };
+        };
+        badge: {
+            false: {
+                meta: string;
+            };
+        };
+        to: {
+            true: {
+                image: string;
+            };
+        };
+        hidden: {
+            true: {
+                date: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/theme/changelog-version.js

@@ -0,0 +1,41 @@
+export default {
+    slots: {
+        root: 'relative',
+        container: 'flex flex-col mx-auto max-w-2xl',
+        header: '',
+        meta: 'flex items-center gap-3 mb-2',
+        date: 'text-sm/6 text-toned truncate',
+        badge: '',
+        title: 'relative text-xl text-pretty font-semibold text-highlighted',
+        description: 'text-base text-pretty text-muted mt-1',
+        imageWrapper: 'relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image',
+        image: 'object-cover object-top w-full h-full',
+        authors: 'flex flex-wrap gap-x-4 gap-y-1.5',
+        footer: 'border-t border-default pt-5 flex items-center justify-between',
+        indicator: 'absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0',
+        dot: 'size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1',
+        dotInner: 'size-2 rounded-full bg-primary'
+    },
+    variants: {
+        body: {
+            false: {
+                footer: 'mt-5'
+            }
+        },
+        badge: {
+            false: {
+                meta: 'lg:hidden'
+            }
+        },
+        to: {
+            true: {
+                image: 'transform transition-transform duration-200 group-hover/changelog-version-image:scale-105'
+            }
+        },
+        hidden: {
+            true: {
+                date: 'lg:hidden'
+            }
+        }
+    }
+};

package/dist/theme/changelog-versions.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    slots: {
+        root: string;
+        container: string;
+        indicator: string;
+        beam: string;
+    };
+};
+export default _default;

package/dist/theme/changelog-versions.js

@@ -0,0 +1,8 @@
+export default {
+    slots: {
+        root: 'relative',
+        container: 'flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16',
+        indicator: 'absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]',
+        beam: 'absolute start-0 top-0 w-full bg-primary will-change-[height]'
+    }
+};