@raxium/themes 0.1.1

package/dist/default/crafts/dialog.js

@@ -0,0 +1,95 @@
+import { tv } from '../../utils';
+const prefix = 'rui-dialog';
+export const tvDialog = tv({
+    slots: {
+        backdrop: [
+            'fixed',
+            'inset-0',
+            'z-(--z-overlay)',
+            'data-[state=open]:motion-opacity-in',
+            'data-[state=open]:animate-backdrop-blur-in',
+            'data-[state=closed]:motion-opacity-out',
+            'data-[state=closed]:animate-backdrop-blur-out',
+        ],
+        positioner: ['fixed', 'inset-0', 'z-(--z-modal)', 'flex', 'items-center', 'justify-center'],
+        content: [
+            'relative',
+            'max-w-full',
+            'md:max-w-[80vw]',
+            'border',
+            'rounded',
+            'data-[state=open]:motion-opacity-in',
+            'data-[state=open]:motion-translate-y-in',
+            'data-[state=closed]:motion-opacity-out',
+            'data-[state=closed]:motion-translate-y-out',
+        ],
+        close: '',
+        header: ['flex', 'items-center', 'justify-between'],
+        title: [],
+        body: ['flex-1', 'overflow-y-auto'],
+        footer: ['flex', 'items-center', 'justify-end'],
+    },
+    variants: {
+        size: {
+            xs: {
+                body: 'p-4 text-xs',
+                footer: 'px-4 py-3 gap-4 text-xs',
+                header: 'py-2 px-4 text-xs',
+                close: [
+                    'p-0.25',
+                    'text-xs',
+                    'data-[variant=content-close]:pt-1.5',
+                    'data-[variant=content-close]:pr-1.5',
+                ],
+            },
+            sm: {
+                body: 'p-5 text-sm',
+                footer: 'px-5 py-4 gap-5 text-sm',
+                header: 'py-2.5 px-5 text-sm',
+                close: [
+                    'p-0.5',
+                    'text-sm',
+                    'data-[variant=content-close]:p-0',
+                    'data-[variant=content-close]:pt-2',
+                    'data-[variant=content-close]:pr-2',
+                ],
+            },
+            base: {
+                body: 'p-6 text-base',
+                footer: 'px-6 py-5 gap-6 text-base',
+                header: 'py-3 px-6 text-base',
+                close: [
+                    'p-0.75',
+                    'text-base',
+                    'data-[variant=content-close]:pt-2.5',
+                    'data-[variant=content-close]:pr-2.5',
+                ],
+            },
+            lg: {
+                body: 'p-8 text-lg',
+                footer: 'px-8 py-6 gap-8 text-lg',
+                header: 'py-4 px-8 text-lg',
+                close: [
+                    'p-1',
+                    'text-lg',
+                    'data-[variant=content-close]:pt-3',
+                    'data-[variant=content-close]:pr-3',
+                ],
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'base',
+    },
+}, {
+    slots: {
+        backdrop: `${prefix}-backdrop`,
+        positioner: `${prefix}-positioner`,
+        content: `${prefix}-content`,
+        header: `${prefix}-header`,
+        close: `${prefix}-close`,
+        title: `${prefix}-title`,
+        body: `${prefix}-body`,
+        footer: `${prefix}-footer`,
+    },
+});

package/dist/default/crafts/editable.d.ts

@@ -0,0 +1,197 @@
+import type { VariantProps } from '../../utils';
+export declare const tvEditable: 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;
+    area: string;
+    preview: string;
+}, undefined, {
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+}, undefined, unknown, unknown>>;
+export declare const tvEditableInput: import("tailwind-variants").TVReturnType<({
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            clearable?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    size: {
+        xs: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            clearable?: import("tailwind-merge").ClassNameValue;
+        };
+        sm: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            clearable?: import("tailwind-merge").ClassNameValue;
+        };
+        base: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            clearable?: import("tailwind-merge").ClassNameValue;
+        };
+        lg: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            clearable?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            clearable?: import("tailwind-merge").ClassNameValue;
+        };
+        false: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            clearable?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+}) & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    root: string;
+    input: string;
+    clearable: string;
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+            input: string;
+        };
+        sm: {
+            root: string;
+            input: string;
+        };
+        base: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    root: string[];
+    input: string[];
+    clearable: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+            input: string;
+        };
+        sm: {
+            root: string;
+            input: string;
+        };
+        base: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    root: string[];
+    input: string[];
+    clearable: string[];
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+            input: string;
+        };
+        sm: {
+            root: string;
+            input: string;
+        };
+        base: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
+    };
+}, {
+    root: string[];
+    input: string[];
+    clearable: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+            input: string;
+        };
+        sm: {
+            root: string;
+            input: string;
+        };
+        base: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
+    };
+}, {
+    root: string[];
+    input: string[];
+    clearable: string[];
+}, undefined, unknown, unknown>>>;
+export type EditableVariants = VariantProps<typeof tvEditable>;
+export type EditableInputVariants = VariantProps<typeof tvEditableInput>;

package/dist/default/crafts/editable.js

@@ -0,0 +1,95 @@
+import { tv } from '../../utils';
+import { tvInput } from './input';
+const prefix = 'rui-editable';
+export const tvEditable = tv({
+    slots: {
+        root: 'flex items-center',
+        area: '',
+        preview: '',
+    },
+    variants: {
+        size: {
+            xs: '',
+            sm: '',
+            base: '',
+            lg: '',
+        },
+    },
+    compoundVariants: [
+        {
+            size: 'xs',
+            class: {
+                root: 'text-xs',
+            },
+        },
+        {
+            size: 'sm',
+            class: {
+                root: 'text-sm',
+            },
+        },
+        {
+            size: 'base',
+            class: {
+                root: 'text-base',
+            },
+        },
+        {
+            size: 'lg',
+            class: {
+                root: 'text-lg',
+            },
+        },
+    ],
+    defaultVariants: { size: 'base' },
+}, {
+    slots: {
+        root: prefix,
+        area: `${prefix}-area`,
+        preview: `${prefix}-preview`,
+    },
+});
+export const tvEditableInput = tv({
+    extend: tvInput,
+    slots: {
+        root: '',
+        input: 'min-w-20 w-fit',
+        clearable: '',
+    },
+    compoundVariants: [
+        {
+            size: 'xs',
+            class: {
+                root: 'px-1 py-0.25',
+                clearable: 'text-xs size-[1lh]',
+            },
+        },
+        {
+            size: 'sm',
+            class: {
+                root: 'px-1 py-0.5',
+                clearable: 'text-sm size-[1lh]',
+            },
+        },
+        {
+            size: 'base',
+            class: {
+                root: 'px-2 py-0.75',
+                clearable: 'text-base size-[1lh]',
+            },
+        },
+        {
+            size: 'lg',
+            class: {
+                root: 'px-2 py-1',
+                clearable: 'text-lg size-[1lh]',
+            },
+        },
+    ],
+}, {
+    slots: {
+        root: `${prefix}-input`,
+        input: `${prefix}-input-input`,
+        clearable: `${prefix}-input-clearable`,
+    },
+});

package/dist/default/crafts/floating-panel.d.ts

@@ -0,0 +1,143 @@
+import type { VariantProps } from '../../utils';
+export declare const tvFloatingPanel: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+        sm: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+        base: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+        lg: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+    };
+} & {
+    unstyled: {
+        true: import("tailwind-merge").ClassNameValue;
+        false: import("tailwind-merge").ClassNameValue;
+    };
+}, {
+    positioner: string;
+    content: string;
+    header: string;
+    control: string;
+    title: string;
+    trigger: string;
+    resizeVertical: string;
+    resizeHorizontal: string;
+    resizeCorner: string;
+}, undefined, {
+    size: {
+        xs: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+        sm: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+        base: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+        lg: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+    };
+}, {
+    positioner: string;
+    content: string;
+    header: string;
+    control: string;
+    title: string;
+    trigger: string;
+    resizeVertical: string;
+    resizeHorizontal: string;
+    resizeCorner: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+        sm: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+        base: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+        lg: {
+            header: string;
+            control: string;
+            trigger: string;
+            resizeVertical: string;
+            resizeHorizontal: string;
+            resizeCorner: string;
+        };
+    };
+}, {
+    positioner: string;
+    content: string;
+    header: string;
+    control: string;
+    title: string;
+    trigger: string;
+    resizeVertical: string;
+    resizeHorizontal: string;
+    resizeCorner: string;
+}, undefined, unknown, unknown>>;
+export type FloatingPanelVariants = VariantProps<typeof tvFloatingPanel>;

package/dist/default/crafts/floating-panel.js

@@ -0,0 +1,63 @@
+import { tv } from '../../utils';
+const prefix = 'rui-floating-panel';
+export const tvFloatingPanel = tv({
+    slots: {
+        positioner: '',
+        content: '',
+        header: 'w-full flex items-center justify-between',
+        control: 'flex items-center gap-2',
+        title: '',
+        trigger: 'flex items-center justify-center',
+        resizeVertical: 'h-full w-2',
+        resizeHorizontal: 'w-full h-2',
+        resizeCorner: 'size-2',
+    },
+    variants: {
+        size: {
+            xs: {
+                header: 'py-2 pl-4 pr-3 text-xs',
+                control: '',
+                trigger: 'size-5',
+                resizeVertical: 'w-0.5',
+                resizeHorizontal: 'h-0.5',
+                resizeCorner: 'size-1',
+            },
+            sm: {
+                header: 'py-2.5 pl-5 pr-4 text-sm',
+                control: '',
+                trigger: 'size-6',
+                resizeVertical: 'w-0.75',
+                resizeHorizontal: 'h-0.75',
+                resizeCorner: 'size-1.5',
+            },
+            base: {
+                header: 'py-3 pl-6 pr-5 text-base',
+                control: '',
+                trigger: 'size-7',
+                resizeVertical: 'w-1',
+                resizeHorizontal: 'h-1',
+                resizeCorner: 'size-2',
+            },
+            lg: {
+                header: 'py-4 pl-8 pr-7 text-lg',
+                control: '',
+                trigger: 'size-8',
+                resizeVertical: 'w-1.25',
+                resizeHorizontal: 'h-1.25',
+                resizeCorner: 'size-2.5',
+            },
+        },
+    },
+}, {
+    slots: {
+        positioner: `${prefix}-positioner`,
+        content: `${prefix}-content`,
+        header: `${prefix}-header`,
+        control: `${prefix}-control`,
+        title: `${prefix}-title`,
+        trigger: `${prefix}-trigger`,
+        resizeVertical: `${prefix}-resize-vertical`,
+        resizeHorizontal: `${prefix}-resize-horizontal`,
+        resizeCorner: `${prefix}-resize-corner`,
+    },
+});