uisv 0.0.1

package/dist/theme/pin-input.d.ts

@@ -0,0 +1,45 @@
+declare const _default: (options: Required<ModuleOptions>) => {
+    slots: {
+        root: string;
+        base: any[];
+    };
+    variants: {
+        size: {
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+        };
+        variant: {
+            outline: string;
+            soft: string;
+            subtle: string;
+            ghost: string;
+            none: string;
+        };
+        color: {
+            neutral: string;
+        };
+        highlight: {
+            true: string;
+        };
+    };
+    compoundVariants: any[];
+    defaultVariants: {
+        size: string;
+        color: string;
+        variant: string;
+    };
+};
+export default _default;

package/dist/theme/pin-input.js

@@ -0,0 +1,69 @@
+export default (options) => ({
+    slots: {
+        root: 'relative inline-flex items-center gap-1.5',
+        base: [
+            'rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
+            options.theme.transitions && 'transition-colors'
+        ]
+    },
+    variants: {
+        size: {
+            xs: {
+                base: 'size-6 text-xs'
+            },
+            sm: {
+                base: 'size-7 text-xs'
+            },
+            md: {
+                base: 'size-8 text-sm'
+            },
+            lg: {
+                base: 'size-9 text-sm'
+            },
+            xl: {
+                base: 'size-10 text-base'
+            }
+        },
+        variant: {
+            outline: 'text-highlighted bg-default ring ring-inset ring-accented',
+            soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
+            subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
+            ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
+            none: 'text-highlighted bg-transparent'
+        },
+        color: {
+            ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ''])),
+            neutral: ''
+        },
+        highlight: {
+            true: ''
+        }
+    },
+    compoundVariants: [
+        ...(options.theme.colors || []).map((color) => ({
+            color,
+            variant: ['outline', 'subtle'],
+            class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+        })),
+        ...(options.theme.colors || []).map((color) => ({
+            color,
+            highlight: true,
+            class: `ring ring-inset ring-${color}`
+        })),
+        {
+            color: 'neutral',
+            variant: ['outline', 'subtle'],
+            class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
+        },
+        {
+            color: 'neutral',
+            highlight: true,
+            class: 'ring ring-inset ring-inverted'
+        }
+    ],
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        variant: 'outline'
+    }
+});

package/dist/theme/popover.d.ts

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

package/dist/theme/popover.js

@@ -0,0 +1,6 @@
+export default {
+    slots: {
+        content: 'bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto',
+        arrow: 'fill-default'
+    }
+};

package/dist/theme/pricing-plan.d.ts

@@ -0,0 +1,81 @@
+declare const _default: {
+    slots: {
+        root: string;
+        header: string;
+        body: string;
+        footer: string;
+        titleWrapper: string;
+        title: string;
+        description: string;
+        priceWrapper: string;
+        price: string;
+        discount: string;
+        billing: string;
+        billingPeriod: string;
+        billingCycle: string;
+        features: string;
+        feature: string;
+        featureIcon: string;
+        featureTitle: string;
+        badge: string;
+        button: string;
+        tagline: string;
+        terms: string;
+    };
+    variants: {
+        orientation: {
+            horizontal: {
+                root: string;
+                body: string;
+                footer: string;
+                features: string;
+            };
+            vertical: {
+                footer: string;
+                priceWrapper: string;
+            };
+        };
+        variant: {
+            solid: {
+                root: string;
+                title: string;
+                description: string;
+                price: string;
+                discount: string;
+                billingCycle: string;
+                billingPeriod: string;
+                featureTitle: string;
+            };
+            outline: {
+                root: string;
+            };
+            soft: {
+                root: string;
+            };
+            subtle: {
+                root: string;
+            };
+        };
+        highlight: {
+            true: {
+                root: string;
+            };
+        };
+        scale: {
+            true: {
+                root: string;
+            };
+        };
+    };
+    compoundVariants: {
+        orientation: string;
+        variant: string;
+        class: {
+            root: string;
+        };
+    }[];
+    defaultVariants: {
+        variant: string;
+    };
+};
+export default _default;

package/dist/theme/pricing-plan.js

@@ -0,0 +1,86 @@
+export default {
+    slots: {
+        root: 'relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6',
+        header: '',
+        body: 'flex flex-col min-w-0',
+        footer: 'flex flex-col gap-6 items-center',
+        titleWrapper: 'flex items-center gap-3',
+        title: 'text-highlighted text-2xl sm:text-3xl text-pretty font-semibold',
+        description: 'text-muted text-base text-pretty mt-2',
+        priceWrapper: 'flex items-center gap-1',
+        price: 'text-highlighted text-3xl sm:text-4xl font-semibold',
+        discount: 'text-muted line-through text-xl sm:text-2xl',
+        billing: 'flex flex-col justify-between min-w-0',
+        billingPeriod: 'text-toned truncate text-xs font-medium',
+        billingCycle: 'text-muted truncate text-xs font-medium',
+        features: 'flex flex-col gap-3 flex-1 mt-6 grow-0',
+        feature: 'flex items-center gap-2 min-w-0',
+        featureIcon: 'size-5 shrink-0 text-primary',
+        featureTitle: 'text-muted text-sm truncate',
+        badge: '',
+        button: '',
+        tagline: 'text-base font-semibold text-default',
+        terms: 'text-xs/5 text-muted text-center text-balance'
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                root: 'grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default',
+                body: 'lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center',
+                footer: 'lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto',
+                features: 'lg:grid lg:grid-cols-2 lg:mt-12'
+            },
+            vertical: {
+                footer: 'justify-end',
+                priceWrapper: 'mt-6'
+            }
+        },
+        variant: {
+            solid: {
+                root: 'bg-inverted',
+                title: 'text-inverted',
+                description: 'text-dimmed',
+                price: 'text-inverted',
+                discount: 'text-dimmed',
+                billingCycle: 'text-dimmed',
+                billingPeriod: 'text-dimmed',
+                featureTitle: 'text-dimmed'
+            },
+            outline: {
+                root: 'bg-default ring ring-default'
+            },
+            soft: {
+                root: 'bg-elevated/50'
+            },
+            subtle: {
+                root: 'bg-elevated/50 ring ring-default'
+            }
+        },
+        highlight: {
+            true: {
+                root: 'ring-2 ring-inset ring-primary'
+            }
+        },
+        scale: {
+            true: {
+                root: 'lg:scale-[1.1] lg:z-[1]'
+            }
+        }
+    },
+    compoundVariants: [{
+            orientation: 'horizontal',
+            variant: 'soft',
+            class: {
+                root: 'divide-accented'
+            }
+        }, {
+            orientation: 'horizontal',
+            variant: 'subtle',
+            class: {
+                root: 'divide-accented'
+            }
+        }],
+    defaultVariants: {
+        variant: 'outline'
+    }
+};

package/dist/theme/pricing-plans.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    base: string;
+    variants: {
+        orientation: {
+            horizontal: string;
+            vertical: string;
+        };
+        compact: {
+            false: string;
+        };
+        scale: {
+            true: string;
+        };
+    };
+    compoundVariants: {
+        compact: boolean;
+        scale: boolean;
+        class: string;
+    }[];
+};
+export default _default;

package/dist/theme/pricing-plans.js

@@ -0,0 +1,20 @@
+export default {
+    base: 'flex flex-col gap-y-8',
+    variants: {
+        orientation: {
+            horizontal: 'lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]',
+            vertical: ''
+        },
+        compact: {
+            false: 'gap-x-8'
+        },
+        scale: {
+            true: ''
+        }
+    },
+    compoundVariants: [{
+            compact: false,
+            scale: true,
+            class: 'lg:gap-x-13'
+        }]
+};

package/dist/theme/pricing-table.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+    slots: {
+        root: string;
+        table: string;
+        list: string;
+        item: string;
+        caption: string;
+        thead: string;
+        tbody: string;
+        tr: string;
+        th: string;
+        td: string;
+        tier: string;
+        tierTitleWrapper: string;
+        tierTitle: string;
+        tierDescription: string;
+        tierBadge: string;
+        tierPriceWrapper: string;
+        tierPrice: string;
+        tierDiscount: string;
+        tierBilling: string;
+        tierBillingPeriod: string;
+        tierBillingCycle: string;
+        tierButton: string;
+        tierFeatureIcon: string;
+        section: string;
+        sectionTitle: string;
+        feature: string;
+        featureTitle: string;
+        featureValue: string;
+    };
+    variants: {
+        section: {
+            true: {
+                tr: string;
+            };
+        };
+        active: {
+            true: {
+                tierFeatureIcon: string;
+            };
+        };
+        highlight: {
+            true: {
+                tier: string;
+                td: string;
+                item: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/theme/pricing-table.js

@@ -0,0 +1,51 @@
+export default {
+    slots: {
+        root: 'w-full relative',
+        table: 'w-full table-fixed border-separate border-spacing-x-0 hidden md:table',
+        list: 'md:hidden flex flex-col gap-6 w-full',
+        item: 'p-6 flex flex-col border border-default rounded-lg',
+        caption: 'sr-only',
+        thead: '',
+        tbody: '',
+        tr: '',
+        th: 'py-4 font-normal text-left border-b border-default',
+        td: 'px-6 py-4 text-center border-b border-default',
+        tier: 'p-6 text-left font-normal',
+        tierTitleWrapper: 'flex items-center gap-3',
+        tierTitle: 'text-lg font-semibold text-highlighted',
+        tierDescription: 'text-sm font-normal text-muted mt-1',
+        tierBadge: 'truncate',
+        tierPriceWrapper: 'flex items-center gap-1 mt-4',
+        tierPrice: 'text-highlighted text-3xl sm:text-4xl font-semibold',
+        tierDiscount: 'text-muted line-through text-xl sm:text-2xl',
+        tierBilling: 'flex flex-col justify-between min-w-0',
+        tierBillingPeriod: 'text-toned truncate text-xs font-medium',
+        tierBillingCycle: 'text-muted truncate text-xs font-medium',
+        tierButton: 'mt-6',
+        tierFeatureIcon: 'size-5 shrink-0',
+        section: 'mt-6 flex flex-col gap-2',
+        sectionTitle: 'font-semibold text-sm text-highlighted',
+        feature: 'flex items-center justify-between gap-1',
+        featureTitle: 'text-sm text-default',
+        featureValue: 'text-sm text-muted flex justify-center min-w-5'
+    },
+    variants: {
+        section: {
+            true: {
+                tr: '*:pt-8'
+            }
+        },
+        active: {
+            true: {
+                tierFeatureIcon: 'text-primary'
+            }
+        },
+        highlight: {
+            true: {
+                tier: 'bg-elevated/50 border-x border-t border-default rounded-t-lg',
+                td: 'bg-elevated/50 border-x border-default',
+                item: 'bg-elevated/50'
+            }
+        }
+    }
+};

package/dist/theme/progress.d.ts

@@ -0,0 +1,131 @@
+declare const _default: (options: Required<ModuleOptions>) => {
+    slots: {
+        root: string;
+        base: string;
+        indicator: string;
+        status: string;
+        steps: string;
+        step: string;
+    };
+    variants: {
+        animation: {
+            carousel: string;
+            'carousel-inverse': string;
+            swing: string;
+            elastic: string;
+        };
+        color: {
+            neutral: {
+                indicator: string;
+                steps: string;
+            };
+        };
+        size: {
+            '2xs': {
+                status: string;
+                steps: string;
+            };
+            xs: {
+                status: string;
+                steps: string;
+            };
+            sm: {
+                status: string;
+                steps: string;
+            };
+            md: {
+                status: string;
+                steps: string;
+            };
+            lg: {
+                status: string;
+                steps: string;
+            };
+            xl: {
+                status: string;
+                steps: string;
+            };
+            '2xl': {
+                status: string;
+                steps: string;
+            };
+        };
+        step: {
+            active: {
+                step: string;
+            };
+            first: {
+                step: string;
+            };
+            other: {
+                step: string;
+            };
+            last: {
+                step: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                base: string;
+                status: string;
+            };
+            vertical: {
+                root: string;
+                base: string;
+                status: string;
+            };
+        };
+        inverted: {
+            true: {
+                status: string;
+            };
+        };
+    };
+    compoundVariants: ({
+        inverted: boolean;
+        orientation: string;
+        class: {
+            step: string;
+            status: string;
+            steps?: undefined;
+            indicator?: undefined;
+        };
+        size?: undefined;
+        animation?: undefined;
+    } | {
+        inverted: boolean;
+        orientation: string;
+        class: {
+            steps: string;
+            status: string;
+            step?: undefined;
+            indicator?: undefined;
+        };
+        size?: undefined;
+        animation?: undefined;
+    } | {
+        orientation: string;
+        size: string;
+        class: string;
+        inverted?: undefined;
+        animation?: undefined;
+    } | {
+        orientation: string;
+        animation: string;
+        class: {
+            indicator: string;
+            step?: undefined;
+            status?: undefined;
+            steps?: undefined;
+        };
+        inverted?: undefined;
+        size?: undefined;
+    })[];
+    defaultVariants: {
+        animation: string;
+        color: string;
+        size: string;
+    };
+};
+export default _default;