@rark-ui/themes 1.0.0

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

@@ -0,0 +1,114 @@
+import { tv } from '../../../shared/utils/tv';
+const prefix = 'rui-select';
+export const tvSelect = tv({
+    slots: {
+        root: '',
+        trigger: [
+            'group',
+            'flex',
+            'items-center',
+            'min-w-[10.875rem]',
+            'rounded',
+            'gap-1.5',
+            'px-2',
+            'py-1.5',
+            'text-start',
+            'transition-colors',
+            'data-[disabled]:pointer-events-none',
+            'data-[disabled]:opacity-(--disabled-opacity)',
+        ],
+        indicator: ['data-[state=open]:rotate-180', 'transition-transform'],
+        value: 'flex-1 flex items-center [&>span]:truncate',
+        content: [
+            'relative',
+            'z-auto',
+            'min-w-(--reference-width)',
+            'rounded',
+            'p-0',
+            'z-(--z-popover)',
+            '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: '',
+        item: [
+            'w-full',
+            'relative',
+            'flex',
+            'items-center',
+            'justify-between',
+            'gap-2',
+            'rounded',
+            'cursor-default',
+            'select-none',
+            'data-[disabled]:pointer-events-none',
+            'data-[disabled]:opacity-(--disabled-opacity)',
+        ],
+        itemIndicator: '[&_path]:animate-check-dash',
+        itemGroup: '',
+        itemGroupLabel: 'relative border-b',
+        clearTrigger: ['flex', 'items-center', 'justify-center'],
+    },
+    variants: {
+        size: {
+            xs: {
+                trigger: 'text-xs',
+                item: 'text-xs px-1.5 py-1',
+                contentInner: 'px-1.5 py-1',
+                itemGroupLabel: 'text-sm px-1.5 py-1.5 mb-1.5',
+            },
+            sm: {
+                trigger: 'text-sm',
+                item: 'text-sm px-2 py-1.5',
+                contentInner: 'px-2 py-1.5',
+                itemGroupLabel: 'text-base px-2 py-2 mb-2',
+            },
+            base: {
+                trigger: 'text-base',
+                item: 'text-base px-2.5 py-1.5',
+                contentInner: 'px-2.5 py-1.5',
+                itemGroupLabel: 'text-xl px-2.5 py-2.5 mb-2.5',
+            },
+            lg: {
+                trigger: 'text-lg',
+                item: 'text-lg px-3 py-2',
+                contentInner: 'px-3 py-2',
+                itemGroupLabel: 'text-xl px-3 py-3 mb-3',
+            },
+        },
+        bordered: {
+            true: {
+                trigger: 'border',
+                content: 'border',
+            },
+            false: '',
+        },
+    },
+    defaultVariants: {
+        size: 'base',
+        bordered: true,
+    },
+}, {
+    slots: {
+        root: prefix,
+        trigger: `${prefix}-trigger`,
+        indicator: `${prefix}-indicator`,
+        content: `${prefix}-content`,
+        contentInner: `${prefix}-content-inner`,
+        value: `${prefix}-value`,
+        item: `${prefix}-item`,
+        itemIndicator: `${prefix}-item-indicator`,
+        itemGroup: `${prefix}-item-group`,
+        itemGroupLabel: `${prefix}-item-group-label`,
+        clearTrigger: `${prefix}-clear-trigger`,
+    },
+});

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

@@ -0,0 +1,35 @@
+import type { VariantProps } from '../../../shared/utils/tv';
+export declare const tvSkeleton: import("tailwind-variants").TVReturnType<{
+    variant: {
+        pulse: string;
+        wave: string;
+    };
+    shape: {
+        rect: string;
+        circle: string;
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, undefined, "", {
+    variant: {
+        pulse: string;
+        wave: string;
+    };
+    shape: {
+        rect: string;
+        circle: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        pulse: string;
+        wave: string;
+    };
+    shape: {
+        rect: string;
+        circle: string;
+    };
+}, undefined, "", unknown, unknown>>;
+export type SkeletonVariants = VariantProps<typeof tvSkeleton>;

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

@@ -0,0 +1,15 @@
+import { tv } from '../../../shared/utils/tv';
+const prefix = 'rui-skeleton';
+export const tvSkeleton = tv({
+    base: '',
+    variants: {
+        variant: {
+            pulse: 'animate-pulse',
+            wave: 'animate-skeleton-wave animate-infinite',
+        },
+        shape: {
+            rect: 'rounded',
+            circle: 'rounded-full',
+        },
+    },
+}, { class: prefix });

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

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

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

@@ -0,0 +1,85 @@
+import { tv } from '../../../shared/utils/tv';
+const prefix = 'rui-slider';
+export const tvSlider = tv({
+    slots: {
+        root: '',
+        control: '',
+        track: '',
+        range: '',
+        thumb: 'z-10 rounded-full data-dragging:scale-120 transition-transform',
+        marker: '',
+        markerDot: 'absolute left-1/2 -translate-x-1/2 rounded-full',
+    },
+    variants: {
+        size: {
+            xs: {
+                control: 'h-[max(var(--slider-thumb-height),.5rem)]',
+                track: 'h-0.5 rounded',
+                range: 'rounded',
+                thumb: [
+                    'w-[max(var(--slider-thumb-width),.5rem)]',
+                    'h-[max(var(--slider-thumb-height),.5rem)]',
+                ],
+                markerDot: 'size-1.5 -top-[calc(max(var(--slider-thumb-height),.5rem)/2+var(--spacing)*0.75)]',
+            },
+            sm: {
+                control: 'h-[max(var(--slider-thumb-height),.75rem)]',
+                track: 'h-1 rounded-md',
+                range: 'rounded-md',
+                thumb: [
+                    'w-[max(var(--slider-thumb-width),.75rem)]',
+                    'h-[max(var(--slider-thumb-height),.75rem)]',
+                ],
+                markerDot: 'size-2 -top-[calc(max(var(--slider-thumb-height),.75rem)/2+var(--spacing))]',
+            },
+            base: {
+                control: 'h-[max(var(--slider-thumb-height),1rem)]',
+                track: 'h-1.5 rounded-lg',
+                range: 'rounded-lg',
+                thumb: [
+                    'w-[max(var(--slider-thumb-width),1rem)]',
+                    'h-[max(var(--slider-thumb-height),1rem)]',
+                ],
+                markerDot: 'size-2.5 -top-[calc(max(var(--slider-thumb-height),1rem)/2+var(--spacing)*1.25)]',
+            },
+            lg: {
+                control: 'h-[max(var(--slider-thumb-height),1.25rem)]',
+                track: 'h-2 rounded-xl',
+                range: 'rounded-xl',
+                thumb: [
+                    'w-[max(var(--slider-thumb-width),1.25rem)]',
+                    'h-[max(var(--slider-thumb-height),1.25rem)]',
+                ],
+                markerDot: 'size-3 -top-[calc(max(var(--slider-thumb-height),1.25rem)/2+var(--spacing)*1.5)]',
+            },
+        },
+        orientation: {
+            horizontal: {
+                root: 'flex flex-col',
+                control: 'w-full flex items-center',
+                track: 'w-full',
+                range: 'h-full',
+            },
+            vertical: {
+                root: 'flex items-center justify-center',
+                control: 'h-full flex items-center',
+                track: 'h-full',
+                range: 'w-full',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'base',
+        orientation: 'horizontal',
+    },
+}, {
+    slots: {
+        root: prefix,
+        control: `${prefix}-control`,
+        track: `${prefix}-track`,
+        range: `${prefix}-range`,
+        thumb: `${prefix}-thumb`,
+        marker: `${prefix}-marker`,
+        markerDot: `${prefix}-marker-dot`,
+    },
+});

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

@@ -0,0 +1,102 @@
+import type { VariantProps } from '../../../shared/utils/tv';
+export declare const tvSpin: import("tailwind-variants").TVReturnType<{
+    mode: {
+        fullscreen: {
+            root: string[];
+        };
+        inline: string[];
+    };
+    size: {
+        xs: {
+            icon: string[];
+            text: string[];
+        };
+        sm: {
+            icon: string[];
+            text: string[];
+        };
+        base: {
+            icon: string[];
+            text: string[];
+        };
+        lg: {
+            icon: string[];
+            text: string[];
+        };
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    root: string;
+    mask: string[];
+    indicator: string[];
+    icon: string[];
+    text: string[];
+}, undefined, {
+    mode: {
+        fullscreen: {
+            root: string[];
+        };
+        inline: string[];
+    };
+    size: {
+        xs: {
+            icon: string[];
+            text: string[];
+        };
+        sm: {
+            icon: string[];
+            text: string[];
+        };
+        base: {
+            icon: string[];
+            text: string[];
+        };
+        lg: {
+            icon: string[];
+            text: string[];
+        };
+    };
+}, {
+    root: string;
+    mask: string[];
+    indicator: string[];
+    icon: string[];
+    text: string[];
+}, import("tailwind-variants").TVReturnType<{
+    mode: {
+        fullscreen: {
+            root: string[];
+        };
+        inline: string[];
+    };
+    size: {
+        xs: {
+            icon: string[];
+            text: string[];
+        };
+        sm: {
+            icon: string[];
+            text: string[];
+        };
+        base: {
+            icon: string[];
+            text: string[];
+        };
+        lg: {
+            icon: string[];
+            text: string[];
+        };
+    };
+}, {
+    root: string;
+    mask: string[];
+    indicator: string[];
+    icon: string[];
+    text: string[];
+}, undefined, unknown, unknown>>;
+export interface SpinVariants extends VariantProps<typeof tvSpin> {
+}

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

@@ -0,0 +1,56 @@
+import { tv } from '../../../shared/utils/tv';
+const prefix = 'rui-spin';
+export const tvSpin = tv({
+    slots: {
+        root: '',
+        mask: ['absolute', 'top-0', 'left-0', 'size-full'],
+        indicator: [
+            'absolute',
+            'top-1/2',
+            'left-1/2',
+            'transform',
+            'translate-x-[-50%]',
+            'translate-y-[-50%]',
+            'flex',
+            'items-center',
+            'justify-center',
+            'gap-2',
+        ],
+        icon: ['inline-block', 'size-6'],
+        text: ['text-xs'],
+    },
+    variants: {
+        mode: {
+            fullscreen: {
+                root: ['fixed', 'top-0', 'left-0', 'w-screen', 'h-screen', 'z-(--z-loading)'],
+            },
+            inline: ['absolute', 'inset-0'],
+        },
+        size: {
+            xs: {
+                icon: ['size-6'],
+                text: ['text-xs'],
+            },
+            sm: {
+                icon: ['size-8'],
+                text: ['text-sm'],
+            },
+            base: {
+                icon: ['size-10'],
+                text: ['text-base'],
+            },
+            lg: {
+                icon: ['size-12'],
+                text: ['text-lg'],
+            },
+        },
+    },
+}, {
+    slots: {
+        root: prefix,
+        mask: `${prefix}-mask`,
+        indicator: `${prefix}-indicator`,
+        icon: `${prefix}-icon`,
+        text: `${prefix}-text`,
+    },
+});

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

@@ -0,0 +1,92 @@
+import type { VariantProps } from '../../../shared/utils/tv';
+export declare const tvSwitch: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+        sm: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+        base: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+        lg: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    root: string[];
+    control: string[];
+    thumb: string[];
+    label: string;
+}, undefined, {
+    size: {
+        xs: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+        sm: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+        base: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+        lg: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+    };
+}, {
+    root: string[];
+    control: string[];
+    thumb: string[];
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+        sm: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+        base: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+        lg: {
+            control: string;
+            thumb: string;
+            label: string;
+        };
+    };
+}, {
+    root: string[];
+    control: string[];
+    thumb: string[];
+    label: string;
+}, undefined, unknown, unknown>>;
+export type SwitchVariants = VariantProps<typeof tvSwitch>;