@rark-ui/themes 1.0.0

package/dist/default/crafts/core/pagination.d.ts

@@ -0,0 +1,190 @@
+import type { VariantProps } from '../../../shared/utils/tv';
+export declare const tvPagination: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            item: string[];
+            ellipsis: string;
+        };
+        sm: {
+            item: string[];
+            ellipsis: string;
+        };
+        base: {
+            item: string[];
+            ellipsis: string;
+        };
+        lg: {
+            item: string[];
+            ellipsis: string;
+        };
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    root: string;
+    control: string;
+    item: string[];
+    ellipsis: string;
+}, undefined, {
+    size: {
+        xs: {
+            item: string[];
+            ellipsis: string;
+        };
+        sm: {
+            item: string[];
+            ellipsis: string;
+        };
+        base: {
+            item: string[];
+            ellipsis: string;
+        };
+        lg: {
+            item: string[];
+            ellipsis: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    item: string[];
+    ellipsis: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            item: string[];
+            ellipsis: string;
+        };
+        sm: {
+            item: string[];
+            ellipsis: string;
+        };
+        base: {
+            item: string[];
+            ellipsis: string;
+        };
+        lg: {
+            item: string[];
+            ellipsis: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    item: string[];
+    ellipsis: string;
+}, undefined, unknown, unknown>>;
+export type PaginationVariants = VariantProps<typeof tvPagination>;
+export declare const tvPaginationGoto: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            input: string;
+        };
+        sm: {
+            input: string;
+        };
+        base: {
+            input: string;
+        };
+        lg: {
+            input: string;
+        };
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    root: string;
+    input: string[];
+}, undefined, {
+    size: {
+        xs: {
+            input: string;
+        };
+        sm: {
+            input: string;
+        };
+        base: {
+            input: string;
+        };
+        lg: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    input: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            input: string;
+        };
+        sm: {
+            input: string;
+        };
+        base: {
+            input: string;
+        };
+        lg: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    input: string[];
+}, undefined, unknown, unknown>>;
+export type PaginationGotoVariants = VariantProps<typeof tvPaginationGoto>;
+export declare const tvPaginationPageSize: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    root: string;
+    control: string;
+    trigger: string;
+    value: string;
+    content: string;
+    item: string;
+}, undefined, {
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+    };
+}, {
+    root: string;
+    control: string;
+    trigger: string;
+    value: string;
+    content: string;
+    item: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+    };
+}, {
+    root: string;
+    control: string;
+    trigger: string;
+    value: string;
+    content: string;
+    item: string;
+}, undefined, unknown, unknown>>;
+export type PaginationPageSizeVariants = VariantProps<typeof tvPaginationPageSize>;

package/dist/default/crafts/core/pagination.js

@@ -0,0 +1,100 @@
+import { tv } from '../../../shared/utils/tv';
+const prefix = 'rui-pagination';
+export const tvPagination = tv({
+    slots: {
+        root: 'flex items-center gap-2',
+        control: 'flex items-center gap-2',
+        item: ['inline-flex', 'items-center', 'justify-center', 'transition-all', 'rounded'],
+        ellipsis: 'inline-flex items-center justify-center',
+    },
+    variants: {
+        size: {
+            xs: {
+                item: ['h-6', 'min-w-6', 'text-xs'],
+                ellipsis: 'size-6',
+            },
+            sm: {
+                item: ['h-8', 'min-w-8', 'text-sm'],
+                ellipsis: 'size-8',
+            },
+            base: {
+                item: ['h-10', 'min-w-10', 'text-base'],
+                ellipsis: 'size-10',
+            },
+            lg: {
+                item: ['h-12', 'min-w-12', 'text-lg'],
+                ellipsis: 'size-12',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'base',
+    },
+}, {
+    slots: {
+        root: prefix,
+        control: `${prefix}-control`,
+        item: `${prefix}-item`,
+        ellipsis: `${prefix}-ellipsis`,
+    },
+});
+export const tvPaginationGoto = tv({
+    slots: {
+        root: 'flex items-center gap-2',
+        input: ['[&_[data-part="input"]]:px-0 [&_[data-part="input"]]:text-center'],
+    },
+    variants: {
+        size: {
+            xs: {
+                input: 'text-xs size-6',
+            },
+            sm: {
+                input: 'text-sm size-8',
+            },
+            base: {
+                input: 'text-base size-10',
+            },
+            lg: {
+                input: 'text-lg size-12',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'base',
+    },
+}, {
+    slots: {
+        root: `${prefix}-goto`,
+        input: `${prefix}-goto-input`,
+    },
+});
+export const tvPaginationPageSize = tv({
+    slots: {
+        root: 'flex items-center gap-2',
+        control: '',
+        trigger: 'min-w-0',
+        value: '',
+        content: '',
+        item: '',
+    },
+    variants: {
+        size: {
+            xs: '',
+            sm: '',
+            base: '',
+            lg: '',
+        },
+    },
+    defaultVariants: {
+        size: 'base',
+    },
+}, {
+    slots: {
+        root: `${prefix}-page-size`,
+        control: `${prefix}-page-size-control`,
+        trigger: `${prefix}-page-size-trigger`,
+        value: `${prefix}-page-size-value`,
+        content: `${prefix}-page-size-content`,
+        item: `${prefix}-page-size-item`,
+    },
+});

package/dist/default/crafts/core/popover.d.ts

@@ -0,0 +1,104 @@
+import type { VariantProps } from '../../../shared/utils/tv';
+export declare const tvPopover: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+        sm: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+        base: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+        lg: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+    };
+    bordered: {
+        true: string;
+        false: string;
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    content: string[];
+    contentInner: string[];
+    close: string;
+    indicator: string[];
+}, undefined, {
+    size: {
+        xs: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+        sm: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+        base: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+        lg: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+    };
+    bordered: {
+        true: string;
+        false: string;
+    };
+}, {
+    content: string[];
+    contentInner: string[];
+    close: string;
+    indicator: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+        sm: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+        base: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+        lg: {
+            contentInner: string;
+            close: string;
+            indicator: string;
+        };
+    };
+    bordered: {
+        true: string;
+        false: string;
+    };
+}, {
+    content: string[];
+    contentInner: string[];
+    close: string;
+    indicator: string[];
+}, undefined, unknown, unknown>>;
+export type PopoverVariants = VariantProps<typeof tvPopover>;

package/dist/default/crafts/core/popover.js

@@ -0,0 +1,66 @@
+import { tv } from '../../../shared/utils/tv';
+const prefix = 'rui-popover';
+export const tvPopover = tv({
+    slots: {
+        content: [
+            'rounded-(--border-radius)',
+            'data-[state=open]:motion-opacity-in',
+            'data-[state=open]:motion-scale-in-95',
+            'data-[state=open]:data-[placement^=bottom]:motion-translate-y-in-[.25rem]',
+            'data-[state=open]:data-[placement^=top]:-motion-translate-y-in-[.25rem]',
+            'data-[state=open]:data-[placement^=left]:-motion-translate-x-in-[.25rem]',
+            'data-[state=open]:data-[placement^=right]:motion-translate-x-in-[.25rem]',
+            'data-[state=closed]:motion-opacity-out',
+            'data-[state=closed]:motion-scale-out-95',
+            'data-[state=closed]:data-[placement^=bottom]:motion-translate-y-out-[.25rem]',
+            'data-[state=closed]:data-[placement^=top]:-motion-translate-y-out-[.25rem]',
+            'data-[state=closed]:data-[placement^=left]:-motion-translate-x-out-[.25rem]',
+            'data-[state=closed]:data-[placement^=right]:motion-translate-x-out-[.25rem]',
+        ],
+        contentInner: ['relative', 'rounded-(--border-radius)', 'z-10'],
+        close: 'inline-flex w-fit items-center justify-center',
+        indicator: [
+            'data-[state=open]:motion-rotate-out-180',
+            'data-[state=closed]:motion-rotate-in-180',
+        ],
+    },
+    variants: {
+        size: {
+            xs: {
+                contentInner: 'px-1.5 py-0.5 text-xs',
+                close: 'p-1 text-xs',
+                indicator: 'text-xs',
+            },
+            sm: {
+                contentInner: 'px-2 py-1 text-sm',
+                close: 'p-1.5 text-sm',
+                indicator: 'text-sm',
+            },
+            base: {
+                contentInner: 'px-2.5 py-1.5 text-base',
+                close: 'p-2 text-base',
+                indicator: 'text-base',
+            },
+            lg: {
+                contentInner: 'px-3 py-2 text-lg',
+                close: 'p-2.5 text-lg',
+                indicator: 'text-lg',
+            },
+        },
+        bordered: {
+            true: '',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        size: 'base',
+        bordered: true,
+    },
+}, {
+    slots: {
+        content: `${prefix}-content`,
+        contentInner: `${prefix}-content-inner`,
+        close: `${prefix}-close`,
+        indicator: `${prefix}-indicator`,
+    },
+});

package/dist/default/crafts/core/progress.d.ts

@@ -0,0 +1,110 @@
+import type { VariantProps } from '../../../shared/utils/tv';
+export declare const tvProgress: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+        sm: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+        base: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+        lg: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    root: string;
+    track: string;
+    range: string;
+    circle: string;
+    circleTrack: string;
+    circleRange: string;
+}, undefined, {
+    size: {
+        xs: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+        sm: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+        base: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+        lg: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, {
+    root: string;
+    track: string;
+    range: string;
+    circle: string;
+    circleTrack: string;
+    circleRange: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+        sm: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+        base: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+        lg: {
+            track: string;
+            range: string;
+            circle: string[];
+        };
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, {
+    root: string;
+    track: string;
+    range: string;
+    circle: string;
+    circleTrack: string;
+    circleRange: string;
+}, undefined, unknown, unknown>>;
+export type ProgressVariants = VariantProps<typeof tvProgress>;

package/dist/default/crafts/core/progress.js

@@ -0,0 +1,121 @@
+import { tv } from '../../../shared/utils/tv';
+const prefix = 'rui-progress';
+export const tvProgress = tv({
+    slots: {
+        root: 'w-full flex flex-col items-center',
+        track: '',
+        range: '',
+        circle: '',
+        circleTrack: '',
+        circleRange: '',
+    },
+    variants: {
+        size: {
+            xs: {
+                track: 'rounded-[calc(var(--spacing))]',
+                range: 'rounded-[calc(var(--spacing))]',
+                circle: ['[--size:calc(var(--spacing)*10.5)]', '[--thickness:calc(var(--spacing)*0.5)]'],
+            },
+            sm: {
+                track: 'rounded-[calc(var(--spacing)*1.5)]',
+                range: 'rounded-[calc(var(--spacing)*1.5)]',
+                circle: ['[--size:calc(var(--spacing)*12.5)]', '[--thickness:calc(var(--spacing)*1)]'],
+            },
+            base: {
+                track: 'rounded-[calc(var(--spacing)*2)]',
+                range: 'rounded-[calc(var(--spacing)*2)]',
+                circle: ['[--size:calc(var(--spacing)*14.5)]', '[--thickness:calc(var(--spacing)*1.5)]'],
+            },
+            lg: {
+                track: 'rounded-[calc(var(--spacing)*2.5)]',
+                range: 'rounded-[calc(var(--spacing)*2.5)]',
+                circle: ['[--size:calc(var(--spacing)*16.5)]', '[--thickness:calc(var(--spacing)*2)]'],
+            },
+        },
+        orientation: {
+            horizontal: '',
+            vertical: '',
+        },
+    },
+    compoundVariants: [
+        // horizontal
+        {
+            orientation: 'horizontal',
+            size: 'xs',
+            class: {
+                track: ['w-full', 'h-1', '[--height:var(--spacing)]'],
+                range: ['h-full', '[--height:calc(var(--spacing))]'],
+            },
+        },
+        {
+            orientation: 'horizontal',
+            size: 'sm',
+            class: {
+                track: ['w-full', 'h-1.5', '[--height:calc(var(--spacing)*1.5)]'],
+                range: ['h-full', '[--height:calc(var(--spacing)*1.5)]'],
+            },
+        },
+        {
+            orientation: 'horizontal',
+            size: 'base',
+            class: {
+                track: ['w-full', 'h-2', '[--height:calc(var(--spacing)*2)]'],
+                range: ['h-full', '[--height:calc(var(--spacing)*2)]'],
+            },
+        },
+        {
+            orientation: 'horizontal',
+            size: 'lg',
+            class: {
+                track: ['w-full', 'h-2.5', '[--height:calc(var(--spacing)*2.5)]'],
+                range: ['h-full', '[--height:calc(var(--spacing)*2.5)]'],
+            },
+        },
+        // vertical
+        {
+            orientation: 'vertical',
+            size: 'xs',
+            class: {
+                track: ['h-full', 'w-1', '[--width:var(--spacing)]'],
+                range: ['w-full', '[--width:calc(var(--spacing))]'],
+            },
+        },
+        {
+            orientation: 'vertical',
+            size: 'sm',
+            class: {
+                track: ['h-full', 'w-1.5', '[--width:calc(var(--spacing)*1.5)]'],
+                range: ['w-full', '[--width:calc(var(--spacing)*1.5)]'],
+            },
+        },
+        {
+            orientation: 'vertical',
+            size: 'base',
+            class: {
+                track: ['h-full', 'w-2', '[--height:calc(var(--spacing)*2)]'],
+                range: ['w-full', '[--height:calc(var(--spacing)*2)]'],
+            },
+        },
+        {
+            orientation: 'vertical',
+            size: 'lg',
+            class: {
+                track: ['h-full', 'w-2.5', '[--height:calc(var(--spacing)*2.5)]'],
+                range: ['w-full', '[--height:calc(var(--spacing)*2.5)]'],
+            },
+        },
+    ],
+    defaultVariants: {
+        size: 'base',
+        orientation: 'horizontal',
+    },
+}, {
+    slots: {
+        root: prefix,
+        track: `${prefix}-track`,
+        range: `${prefix}-range`,
+        circle: `${prefix}-circle`,
+        circleTrack: `${prefix}-circle-track`,
+        circleRange: `${prefix}-circle-range`,
+    },
+});