uisv 0.0.1

package/dist/theme/kbd.js

@@ -0,0 +1,67 @@
+export default (options) => ({
+    base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans',
+    variants: {
+        color: {
+            ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ''])),
+            neutral: ''
+        },
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: ''
+        },
+        size: {
+            sm: 'h-4 min-w-[16px] text-[10px]',
+            md: 'h-5 min-w-[20px] text-[11px]',
+            lg: 'h-6 min-w-[24px] text-[12px]'
+        }
+    },
+    compoundVariants: [
+        ...(options.theme.colors || []).map((color) => ({
+            color,
+            variant: 'solid',
+            class: `text-inverted bg-${color}`
+        })),
+        ...(options.theme.colors || []).map((color) => ({
+            color,
+            variant: 'outline',
+            class: `ring ring-inset ring-${color}/50 text-${color}`
+        })),
+        ...(options.theme.colors || []).map((color) => ({
+            color,
+            variant: 'soft',
+            class: `text-${color} bg-${color}/10`
+        })),
+        ...(options.theme.colors || []).map((color) => ({
+            color,
+            variant: 'subtle',
+            class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10`
+        })),
+        {
+            color: 'neutral',
+            variant: 'solid',
+            class: 'text-inverted bg-inverted'
+        },
+        {
+            color: 'neutral',
+            variant: 'outline',
+            class: 'ring ring-inset ring-accented text-default bg-default'
+        },
+        {
+            color: 'neutral',
+            variant: 'soft',
+            class: 'text-default bg-elevated'
+        },
+        {
+            color: 'neutral',
+            variant: 'subtle',
+            class: 'ring ring-inset ring-accented text-default bg-elevated'
+        }
+    ],
+    defaultVariants: {
+        variant: 'outline',
+        color: 'neutral',
+        size: 'md'
+    }
+});

package/dist/theme/link.d.ts

@@ -0,0 +1,18 @@
+declare const _default: (options: Required<ModuleOptions>) => {
+    base: string;
+    variants: {
+        active: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string;
+        };
+    };
+    compoundVariants: {
+        active: boolean;
+        disabled: boolean;
+        class: any[];
+    }[];
+};
+export default _default;

package/dist/theme/link.js

@@ -0,0 +1,19 @@
+export default (options) => ({
+    base: 'focus-visible:outline-primary',
+    variants: {
+        active: {
+            true: 'text-primary',
+            false: 'text-muted'
+        },
+        disabled: {
+            true: 'cursor-not-allowed opacity-75'
+        }
+    },
+    compoundVariants: [
+        {
+            active: false,
+            disabled: false,
+            class: ['hover:text-default', options.theme.transitions && 'transition-colors']
+        }
+    ]
+});

package/dist/theme/main.d.ts

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

package/dist/theme/main.js

@@ -0,0 +1,3 @@
+export default {
+    base: 'min-h-[calc(100vh-var(--ui-header-height))]'
+};

package/dist/theme/marquee.d.ts

@@ -0,0 +1,47 @@
+declare const _default: {
+    slots: {
+        root: string;
+        content: string;
+    };
+    variants: {
+        orientation: {
+            horizontal: {
+                content: string;
+            };
+            vertical: {
+                content: string;
+            };
+        };
+        pauseOnHover: {
+            true: {
+                content: string;
+            };
+        };
+        reverse: {
+            true: {
+                content: string;
+            };
+        };
+        overlay: {
+            true: {
+                root: string;
+            };
+        };
+    };
+    compoundVariants: ({
+        orientation: string;
+        class: {
+            root: string;
+            content: string;
+        };
+        overlay?: undefined;
+    } | {
+        orientation: string;
+        overlay: boolean;
+        class: {
+            root: string;
+            content?: undefined;
+        };
+    })[];
+};
+export default _default;

package/dist/theme/marquee.js

@@ -0,0 +1,56 @@
+export default {
+    slots: {
+        root: 'group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s]',
+        content: 'flex items-center shrink-0 justify-around gap-(--gap) min-w-max'
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                content: 'w-full'
+            },
+            vertical: {
+                content: 'h-full'
+            }
+        },
+        pauseOnHover: {
+            true: {
+                content: 'group-hover:[animation-play-state:paused]'
+            }
+        },
+        reverse: {
+            true: {
+                content: '![animation-direction:reverse]'
+            }
+        },
+        overlay: {
+            true: {
+                root: 'before:absolute before:pointer-events-none before:content-[""] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[""] after:z-2 after:from-default after:to-transparent'
+            }
+        }
+    },
+    compoundVariants: [{
+            orientation: 'horizontal',
+            class: {
+                root: 'flex-row',
+                content: 'flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden'
+            }
+        }, {
+            orientation: 'horizontal',
+            overlay: true,
+            class: {
+                root: 'before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden'
+            }
+        }, {
+            orientation: 'vertical',
+            class: {
+                root: 'flex-col',
+                content: 'flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden'
+            }
+        }, {
+            orientation: 'vertical',
+            overlay: true,
+            class: {
+                root: 'before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden'
+            }
+        }]
+};

package/dist/theme/modal.d.ts

@@ -0,0 +1,30 @@
+declare const _default: {
+    slots: {
+        overlay: string;
+        content: string;
+        header: string;
+        wrapper: string;
+        body: string;
+        footer: string;
+        title: string;
+        description: string;
+        close: string;
+    };
+    variants: {
+        transition: {
+            true: {
+                overlay: string;
+                content: string;
+            };
+        };
+        fullscreen: {
+            true: {
+                content: string;
+            };
+            false: {
+                content: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/theme/modal.js

@@ -0,0 +1,29 @@
+export default {
+    slots: {
+        overlay: 'fixed inset-0 bg-elevated/75',
+        content: 'fixed bg-default divide-y divide-default flex flex-col focus:outline-none',
+        header: 'flex items-center gap-1.5 p-4 sm:px-6 min-h-16',
+        wrapper: '',
+        body: 'flex-1 overflow-y-auto p-4 sm:p-6',
+        footer: 'flex items-center gap-1.5 p-4 sm:px-6',
+        title: 'text-highlighted font-semibold',
+        description: 'mt-1 text-muted text-sm',
+        close: 'absolute top-4 end-4'
+    },
+    variants: {
+        transition: {
+            true: {
+                overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]',
+                content: 'data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]'
+            }
+        },
+        fullscreen: {
+            true: {
+                content: 'inset-0'
+            },
+            false: {
+                content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden'
+            }
+        }
+    }
+};

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

@@ -0,0 +1,108 @@
+declare const _default: (options: Required<ModuleOptions>) => {
+    slots: {
+        root: string;
+        list: string;
+        label: string;
+        item: string;
+        link: string;
+        linkLeadingIcon: string;
+        linkLeadingAvatar: string;
+        linkLeadingAvatarSize: string;
+        linkTrailing: string;
+        linkTrailingBadge: string;
+        linkTrailingBadgeSize: string;
+        linkTrailingIcon: string;
+        linkLabel: string;
+        linkLabelExternalIcon: string;
+        childList: string;
+        childLabel: string;
+        childItem: string;
+        childLink: string;
+        childLinkWrapper: string;
+        childLinkIcon: string;
+        childLinkLabel: string;
+        childLinkLabelExternalIcon: string;
+        childLinkDescription: string;
+        separator: string;
+        viewportWrapper: string;
+        viewport: string;
+        content: string;
+        indicator: string;
+        arrow: string;
+    };
+    variants: {
+        color: {
+            neutral: {
+                link: string;
+                childLink: string;
+            };
+        };
+        highlightColor: {
+            neutral: string;
+        };
+        variant: {
+            pill: string;
+            link: string;
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                list: string;
+                item: string;
+                link: string;
+                childList: string;
+                childLink: string;
+                childLinkLabel: string;
+                content: string;
+            };
+            vertical: {
+                root: string;
+                link: string;
+                childLabel: string;
+                childLink: string;
+            };
+        };
+        contentOrientation: {
+            horizontal: {
+                viewportWrapper: string;
+                content: string;
+            };
+            vertical: {
+                viewport: string;
+            };
+        };
+        active: {
+            true: {
+                childLink: string;
+                childLinkIcon: string;
+            };
+            false: {
+                link: string;
+                linkLeadingIcon: string;
+                childLink: any[];
+                childLinkIcon: any[];
+            };
+        };
+        disabled: {
+            true: {
+                link: string;
+            };
+        };
+        highlight: {
+            true: string;
+        };
+        level: {
+            true: string;
+        };
+        collapsed: {
+            true: string;
+        };
+    };
+    compoundVariants: any[];
+    defaultVariants: {
+        color: string;
+        highlightColor: string;
+        variant: string;
+    };
+};
+export default _default;