@raxium/vue 0.1.0 → 0.1.1

package/dist/components/arrow/createArrow.d.ts

@@ -0,0 +1,10 @@
+import type { ThemeNoCrafts } from '../../providers/theme';
+import type { DefineComponent, HTMLAttributes } from 'vue';
+export interface ArrowProps extends ThemeNoCrafts {
+    class?: HTMLAttributes['class'];
+    ui?: {
+        arrow?: HTMLAttributes['class'];
+        arrowTip?: HTMLAttributes['class'];
+    };
+}
+export declare function createArrow(ArrowNode: DefineComponent<any, any, any>, ArrowTipNode: DefineComponent<any, any, any>): DefineComponent<ArrowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ArrowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/arrow/createArrow.js

@@ -0,0 +1,60 @@
+import { computed, createVNode, defineComponent } from "vue";
+import { cn } from "@raxium/themes/utils";
+import { useTheme } from "../../composables/useTheme.js";
+function createArrow(ArrowNode, ArrowTipNode) {
+    return defineComponent({
+        name: ArrowNode.__name ?? 'Arrow',
+        props: {
+            class: {
+                type: [
+                    String,
+                    Array,
+                    Object
+                ]
+            },
+            ui: {
+                type: Object
+            },
+            theme: {
+                type: Object
+            }
+        },
+        setup (props) {
+            const theme = useTheme(()=>props.theme);
+            const arrowSize = computed(()=>{
+                switch(theme.value.size){
+                    case 'xs':
+                        return '0.25rem';
+                    case 'sm':
+                        return '0.375rem';
+                    case 'base':
+                        return '0.5rem';
+                    case 'lg':
+                        return '0.625rem';
+                    default:
+                        return '0.5rem';
+                }
+            });
+            return ()=>createVNode(ArrowNode, {
+                    class: cn(props.ui?.arrow, props.class),
+                    "data-theme-skin": theme.value.skin,
+                    "data-theme-surface": theme.value.surface,
+                    style: {
+                        overflow: 'visible',
+                        zIndex: 0,
+                        '--arrow-size': arrowSize.value
+                    }
+                }, {
+                    default: ()=>[
+                            createVNode(ArrowTipNode, {
+                                class: cn(theme.value.bordered && 'border', props.ui?.arrowTip),
+                                "data-theme-skin": theme.value.skin,
+                                "data-theme-surface": theme.value.surface,
+                                "data-theme-bordered": theme.value.bordered ? '' : void 0
+                            }, null)
+                        ]
+                });
+        }
+    });
+}
+export { createArrow };

package/dist/components/badge/Badge.js

@@ -0,0 +1,58 @@
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+import { useForwardProps } from "@ark-ui/vue";
+import { ark } from "@ark-ui/vue/factory";
+import { clsx } from "@raxium/themes/utils";
+import { useTheme } from "../../composables/useTheme.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    __name: "Badge",
+    props: {
+        class: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        variant: {},
+        as: {
+            default: "div"
+        },
+        asChild: {
+            type: Boolean
+        },
+        theme: {}
+    },
+    setup (__props) {
+        const props = createPropsRestProxy(__props, [
+            "variant",
+            "class",
+            "theme",
+            "as",
+            "asChild"
+        ]);
+        const forwarded = useForwardProps(props);
+        const theme = useTheme(()=>__props.theme);
+        return (_ctx, _cache)=>(openBlock(), createBlock(resolveDynamicComponent("div" === __props.as ? unref(ark).div : unref(ark).sup), mergeProps(unref(forwarded), {
+                class: unref(theme).crafts.tvBadge({
+                    variant: __props.variant,
+                    class: unref(clsx)(__props.class),
+                    ...unref(theme)
+                }),
+                "data-variant": __props.variant,
+                "as-child": __props.asChild
+            }), {
+                default: withCtx(()=>[
+                        renderSlot(_ctx.$slots, "default")
+                    ]),
+                _: 3
+            }, 16, [
+                "class",
+                "data-variant",
+                "as-child"
+            ]));
+    }
+});
+const Badge = _sfc_main;
+export default Badge;

package/dist/components/badge/Badge.vue.d.ts

@@ -0,0 +1,14 @@
+import type { BadgeProps } from '.';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.vue';
+export * from './props';

package/dist/components/badge/index.js

@@ -0,0 +1,2 @@
+export * from "./props.js";
+export { default as Badge } from "./Badge.js";

package/dist/components/badge/props.d.ts

@@ -0,0 +1,9 @@
+import type { BadgeVariants } from '@raxium/themes/default';
+import type { ThemeCrafts } from '../../providers';
+import type { HTMLAttributes } from 'vue';
+export interface BadgeProps extends ThemeCrafts<'tvBadge'> {
+    class?: HTMLAttributes['class'];
+    variant?: BadgeVariants['variant'];
+    as?: 'div' | 'sup';
+    asChild?: boolean;
+}

package/dist/components/button/Button.js

@@ -0,0 +1,110 @@
+import { computed, createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
+import { useForwardExpose } from "@ark-ui/vue";
+import { ark } from "@ark-ui/vue/factory";
+import { getNodeCssVar } from "@raxium/shared/css";
+import { clsx } from "@raxium/themes/utils";
+import { useRipple } from "../../composables/useRipple.js";
+import { useTheme } from "../../composables/useTheme.js";
+import { LoaderCircle } from "lucide-vue-next";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    __name: "Button",
+    props: {
+        variant: {
+            default: "default"
+        },
+        class: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        disabled: {
+            type: Boolean
+        },
+        tooltip: {},
+        ripple: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        asChild: {
+            type: Boolean,
+            default: false
+        },
+        ui: {},
+        theme: {}
+    },
+    emits: [
+        "click"
+    ],
+    setup (__props, { emit: __emit }) {
+        const emits = __emit;
+        useSlots();
+        const { forwardRef, currentElement } = useForwardExpose();
+        const rippleColor = computed(()=>getNodeCssVar(currentElement.value, "--rui-ripple-color", "transparent"));
+        const { onRipple, Ripple } = useRipple(currentElement, {
+            enabled: __props.ripple && !__props.disabled,
+            color: rippleColor
+        });
+        function onClick(event) {
+            onRipple(event);
+            emits("click", event);
+        }
+        const theme = useTheme(()=>__props.theme);
+        const crafts = computed(()=>theme.value.crafts.tvButton());
+        return (_ctx, _cache)=>(openBlock(), createBlock(unref(ark).button, {
+                ref: unref(forwardRef),
+                class: normalizeClass(crafts.value.root({
+                    variant: __props.variant,
+                    loading: __props.loading,
+                    class: unref(clsx)(__props.ui?.root?.class, __props.class),
+                    ...unref(theme)
+                })),
+                disabled: __props.disabled,
+                "data-variant": __props.variant,
+                "data-ripple": __props.ripple ? true : void 0,
+                "data-loading": __props.loading ? true : void 0,
+                "data-theme-size": unref(theme).size,
+                "as-child": __props.asChild,
+                onClick
+            }, {
+                default: withCtx(()=>[
+                        __props.loading ? renderSlot(_ctx.$slots, "loading", {
+                            key: 0
+                        }, ()=>[
+                                createVNode(unref(LoaderCircle), {
+                                    class: normalizeClass(crafts.value.loading({
+                                        variant: __props.variant,
+                                        loading: __props.loading,
+                                        class: unref(clsx)(__props.ui?.loading?.class),
+                                        ...unref(theme)
+                                    }))
+                                }, null, 8, [
+                                    "class"
+                                ])
+                            ]) : createCommentVNode("", true),
+                        renderSlot(_ctx.$slots, "default"),
+                        __props.ripple ? (openBlock(), createBlock(unref(Ripple), {
+                            key: 1
+                        })) : createCommentVNode("", true)
+                    ]),
+                _: 3
+            }, 8, [
+                "class",
+                "disabled",
+                "data-variant",
+                "data-ripple",
+                "data-loading",
+                "data-theme-size",
+                "as-child"
+            ]));
+    }
+});
+const Button = _sfc_main;
+export default Button;

package/dist/components/button/Button.vue.d.ts

@@ -0,0 +1,19 @@
+import type { ButtonProps } from '.';
+type __VLS_Slots = {
+    default?: () => any;
+    tooltip?: () => any;
+    loading?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.vue';
+export * from './props';

package/dist/components/button/index.js

@@ -0,0 +1,2 @@
+export * from "./props.js";
+export { default as Button } from "./Button.js";

package/dist/components/button/props.d.ts

@@ -0,0 +1,20 @@
+import type { ButtonVariants } from '@raxium/themes/default';
+import type { ThemeCrafts } from '../../providers';
+import type { HTMLAttributes } from 'vue';
+export interface ButtonProps extends ThemeCrafts<'tvButton'> {
+    variant?: ButtonVariants['variant'] | string;
+    class?: HTMLAttributes['class'];
+    disabled?: boolean;
+    tooltip?: string;
+    ripple?: boolean;
+    loading?: boolean;
+    asChild?: boolean;
+    ui?: {
+        root?: {
+            class?: HTMLAttributes['class'];
+        };
+        loading?: {
+            class?: HTMLAttributes['class'];
+        };
+    };
+}

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,163 @@
+import { computed, createBlock, createCommentVNode, createElementVNode, createPropsRestProxy, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
+import { Checkbox, useCheckbox } from "@ark-ui/vue/checkbox";
+import { useForwardExpose, useForwardProps } from "@ark-ui/vue/utils";
+import { clsx } from "@raxium/themes/utils";
+import { useTheme } from "../../composables/useTheme.js";
+import { Check, Minus } from "lucide-vue-next";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    __name: "Checkbox",
+    props: {
+        label: {},
+        class: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        ui: {},
+        value: {},
+        checked: {},
+        defaultChecked: {},
+        disabled: {
+            type: Boolean
+        },
+        form: {},
+        id: {},
+        ids: {},
+        invalid: {
+            type: Boolean
+        },
+        name: {},
+        readOnly: {
+            type: Boolean
+        },
+        required: {
+            type: Boolean
+        },
+        asChild: {
+            type: Boolean
+        },
+        theme: {}
+    },
+    emits: [
+        "checkedChange",
+        "update:checked"
+    ],
+    setup (__props, { expose: __expose, emit: __emit }) {
+        const props = createPropsRestProxy(__props, [
+            "class",
+            "theme",
+            "label",
+            "ui"
+        ]);
+        const emit = __emit;
+        const slots = useSlots();
+        const forwarded = useForwardProps(props);
+        const checkbox = useCheckbox(forwarded, emit);
+        const theme = useTheme(()=>__props.theme);
+        const crafts = computed(()=>theme.value.crafts.tvCheckbox());
+        __expose({
+            $api: checkbox
+        });
+        useForwardExpose();
+        return (_ctx, _cache)=>(openBlock(), createBlock(unref(Checkbox).RootProvider, {
+                value: unref(checkbox),
+                class: normalizeClass(crafts.value.root({
+                    class: unref(clsx)(__props.ui?.root, __props.class),
+                    ...unref(theme)
+                }))
+            }, {
+                default: withCtx(()=>[
+                        createVNode(unref(Checkbox).Control, {
+                            class: normalizeClass(crafts.value.control({
+                                class: unref(clsx)(__props.ui?.control),
+                                ...unref(theme)
+                            }))
+                        }, {
+                            default: withCtx(()=>[
+                                    createVNode(unref(Checkbox).Indicator, {
+                                        class: normalizeClass(crafts.value.indicator({
+                                            class: unref(clsx)(__props.ui?.indicator),
+                                            ...unref(theme)
+                                        }))
+                                    }, {
+                                        default: withCtx(()=>[
+                                                renderSlot(_ctx.$slots, "indicator", normalizeProps(guardReactiveProps({
+                                                    checkedState: unref(checkbox).checkedState
+                                                })), ()=>[
+                                                        createVNode(unref(Check), {
+                                                            class: normalizeClass(crafts.value.indicatorChecked({
+                                                                ...unref(theme)
+                                                            }))
+                                                        }, null, 8, [
+                                                            "class"
+                                                        ])
+                                                    ])
+                                            ]),
+                                        _: 3
+                                    }, 8, [
+                                        "class"
+                                    ]),
+                                    createVNode(unref(Checkbox).Indicator, {
+                                        class: normalizeClass(crafts.value.indicator({
+                                            class: unref(clsx)(__props.ui?.indicator),
+                                            ...unref(theme)
+                                        })),
+                                        indeterminate: ""
+                                    }, {
+                                        default: withCtx(()=>[
+                                                renderSlot(_ctx.$slots, "indicator", normalizeProps(guardReactiveProps({
+                                                    checkedState: unref(checkbox).checkedState
+                                                })), ()=>[
+                                                        createVNode(unref(Minus), {
+                                                            class: normalizeClass(crafts.value.indicatorMinus({
+                                                                ...unref(theme)
+                                                            }))
+                                                        }, null, 8, [
+                                                            "class"
+                                                        ])
+                                                    ])
+                                            ]),
+                                        _: 3
+                                    }, 8, [
+                                        "class"
+                                    ])
+                                ]),
+                            _: 3
+                        }, 8, [
+                            "class"
+                        ]),
+                        __props.label || slots.label?.() ? (openBlock(), createBlock(unref(Checkbox).Label, {
+                            key: 0,
+                            class: normalizeClass(crafts.value.label({
+                                class: unref(clsx)(__props.ui?.label),
+                                ...unref(theme)
+                            })),
+                            "as-child": !!__props.label
+                        }, {
+                            default: withCtx(()=>[
+                                    renderSlot(_ctx.$slots, "label", {}, ()=>[
+                                            createElementVNode("span", null, toDisplayString(__props.label), 1)
+                                        ])
+                                ]),
+                            _: 3
+                        }, 8, [
+                            "class",
+                            "as-child"
+                        ])) : createCommentVNode("", true),
+                        createVNode(unref(Checkbox).HiddenInput, {
+                            class: "hidden"
+                        })
+                    ]),
+                _: 3
+            }, 8, [
+                "value",
+                "class"
+            ]));
+    }
+});
+const checkbox_Checkbox = _sfc_main;
+export default checkbox_Checkbox;

package/dist/components/checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,26 @@
+import type { UseCheckboxReturn } from '@ark-ui/vue/checkbox';
+import type { CheckboxProps, CheckedState } from './props';
+import { Checkbox } from '@ark-ui/vue/checkbox';
+type __VLS_Slots = {
+    indicator: (props: {
+        checkedState: CheckedState;
+    }) => any;
+    label: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {
+    $api: UseCheckboxReturn;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    checkedChange: (details: Checkbox.CheckedChangeDetails) => any;
+    "update:checked": (checked: Checkbox.CheckedState) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    onCheckedChange?: ((details: Checkbox.CheckedChangeDetails) => any) | undefined;
+    "onUpdate:checked"?: ((checked: Checkbox.CheckedState) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/checkbox/CheckboxGroup.js

@@ -0,0 +1,57 @@
+import { createBlock, createPropsRestProxy, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+import { Checkbox, useCheckboxGroup } from "@ark-ui/vue/checkbox";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    __name: "CheckboxGroup",
+    props: {
+        class: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        modelValue: {},
+        defaultValue: {},
+        disabled: {
+            type: Boolean
+        },
+        readOnly: {
+            type: Boolean
+        },
+        name: {},
+        invalid: {
+            type: Boolean
+        },
+        maxSelectedValues: {},
+        asChild: {
+            type: Boolean
+        },
+        theme: {}
+    },
+    emits: [
+        "valueChange",
+        "update:modelValue"
+    ],
+    setup (__props, { emit: __emit }) {
+        const props = createPropsRestProxy(__props, [
+            "class",
+            "theme"
+        ]);
+        const emit = __emit;
+        const checkboxGroup = useCheckboxGroup(props, emit);
+        return (_ctx, _cache)=>(openBlock(), createBlock(unref(Checkbox).GroupProvider, {
+                value: unref(checkboxGroup)
+            }, {
+                default: withCtx(()=>[
+                        renderSlot(_ctx.$slots, "default")
+                    ]),
+                _: 3
+            }, 8, [
+                "value"
+            ]));
+    }
+});
+const CheckboxGroup = _sfc_main;
+export default CheckboxGroup;

package/dist/components/checkbox/CheckboxGroup.vue.d.ts

@@ -0,0 +1,20 @@
+import type { CheckboxGroupProps } from './props';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CheckboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    valueChange: (value: import("./props").CheckboxValueType[]) => any;
+    "update:modelValue": (value: import("./props").CheckboxValueType[]) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
+    onValueChange?: ((value: import("./props").CheckboxValueType[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import("./props").CheckboxValueType[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Checkbox } from './Checkbox.vue';
+export { default as CheckboxGroup } from './CheckboxGroup.vue';
+export * from './props';

package/dist/components/checkbox/index.js

@@ -0,0 +1,3 @@
+export * from "./props.js";
+export { default as Checkbox } from "./Checkbox.js";
+export { default as CheckboxGroup } from "./CheckboxGroup.js";

package/dist/components/checkbox/props.d.ts

@@ -0,0 +1,28 @@
+import type { ThemeCrafts, ThemeNoCrafts } from '../../providers';
+import type { HTMLAttributes } from 'vue';
+import type { CheckboxGroupBaseProps, CheckboxRootBaseProps } from './checkbox';
+export type CheckedState = boolean | 'indeterminate';
+export type CheckboxValueType = string | number | symbol | bigint | null;
+export interface CheckboxProps extends Omit<CheckboxRootBaseProps, 'value'>, ThemeCrafts<'tvCheckbox'> {
+    label?: string;
+    class?: HTMLAttributes['class'];
+    ui?: {
+        root?: HTMLAttributes['class'];
+        control?: HTMLAttributes['class'];
+        indicator?: HTMLAttributes['class'];
+        label?: HTMLAttributes['class'];
+    };
+    value?: CheckboxValueType;
+}
+export interface CheckboxGroupProps extends Omit<CheckboxGroupBaseProps, 'modelValue' | 'defaultValue'>, ThemeNoCrafts {
+    class?: HTMLAttributes['class'];
+    modelValue?: CheckboxValueType[];
+    defaultValue?: CheckboxValueType[];
+}
+export interface CheckboxGroupRootEmits {
+    /**
+     * Functional called when the value changes.
+     */
+    'valueChange': [value: CheckboxValueType[]];
+    'update:modelValue': [value: CheckboxValueType[]];
+}