@vifui/core 0.4.0-alpha.6 → 0.6.0-alpha.8

package/dist/components/list/list-title.vue.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from "vue";
+export interface ListTitleProps {
+    /**
+     * Custom class names.
+     */
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ListTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/list/list-title.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent, inject, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list-title",
+  props: {
+    class: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("listSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(slots)?.title?.(), props.class])
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/list/list-title.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './list-title.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/list/list.styles.d.ts

@@ -0,0 +1,129 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * List component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ * Inspired by Vuesax's list architecture
+ */
+export declare const listVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        outline: {
+            root: string;
+        };
+        shadow: {
+            root: string;
+        };
+        flat: {
+            root: string;
+        };
+        divided: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {};
+        lg: {
+            root: string;
+        };
+    };
+    hoverable: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    item: string;
+    icon: string;
+    avatar: string;
+    content: string;
+    title: string;
+    subtitle: string;
+    slot: string;
+}, undefined, {
+    variant: {
+        default: {};
+        outline: {
+            root: string;
+        };
+        shadow: {
+            root: string;
+        };
+        flat: {
+            root: string;
+        };
+        divided: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {};
+        lg: {
+            root: string;
+        };
+    };
+    hoverable: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    item: string;
+    icon: string;
+    avatar: string;
+    content: string;
+    title: string;
+    subtitle: string;
+    slot: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        outline: {
+            root: string;
+        };
+        shadow: {
+            root: string;
+        };
+        flat: {
+            root: string;
+        };
+        divided: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {};
+        lg: {
+            root: string;
+        };
+    };
+    hoverable: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    item: string;
+    icon: string;
+    avatar: string;
+    content: string;
+    title: string;
+    subtitle: string;
+    slot: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ListVariantProps = VariantProps<typeof listVariants>;

package/dist/components/list/list.styles.js

@@ -0,0 +1,53 @@
+import { tv } from 'tailwind-variants';
+
+const listVariants = tv({
+  slots: {
+    root: "vif-list",
+    header: "vif-list__header",
+    item: "vif-list__item",
+    icon: "vif-list__icon",
+    avatar: "vif-list__avatar",
+    content: "vif-list__content",
+    title: "vif-list__title",
+    subtitle: "vif-list__subtitle",
+    slot: "vif-list__slot"
+  },
+  variants: {
+    variant: {
+      default: {},
+      outline: {
+        root: "vif-list--outline"
+      },
+      shadow: {
+        root: "vif-list--shadow"
+      },
+      flat: {
+        root: "vif-list--flat"
+      },
+      divided: {
+        root: "vif-list--divided"
+      }
+    },
+    size: {
+      sm: {
+        root: "vif-list--sm"
+      },
+      md: {},
+      lg: {
+        root: "vif-list--lg"
+      }
+    },
+    hoverable: {
+      true: {
+        item: "vif-list__item--hoverable"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    hoverable: false
+  }
+});
+
+export { listVariants };

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

@@ -1,3 +1,3 @@
-export { default as Spinner } from './spinner.vue';
-export { spinnerVariants, type SpinnerVariantProps } from './spinner.styles';
-export type { SpinnerProps } from './spinner.vue';
+export { default as Spinner } from "./spinner.vue";
+export { spinnerVariants, type SpinnerVariantProps } from "./spinner.styles";
+export type { SpinnerProps } from "./spinner.vue";

package/dist/components/spinner/spinner.vue.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 import type { Sizes } from "../types/shared-types";
 export interface SpinnerProps {
     /**
@@ -16,7 +17,7 @@ export interface SpinnerProps {
     /**
      * Custom CSS class
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
     /**
      * Accessible label for screen readers
      */

package/dist/components/spinner/spinner.vue.js

@@ -17,7 +17,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     size: { type: String, required: false, default: "md" },
     color: { type: String, required: false, default: "primary" },
     type: { type: String, required: false, default: "default" },
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     label: { type: String, required: false, default: "Loading..." }
   },
   setup(__props) {

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

@@ -0,0 +1,11 @@
+export { default as TabsRoot } from "./tabs-root.vue";
+export { default as TabsList } from "./tabs-list.vue";
+export { default as TabsIndicator } from "./tabs-indicator.vue";
+export { default as TabsTrigger } from "./tabs-trigger.vue";
+export { default as TabsContent } from "./tabs-content.vue";
+export { tabsVariants, type TabsVariantProps } from "./tabs.styles";
+export type { TabsRootProps, TabsRootEmits, TabsRootSlots, } from "./tabs-root.vue";
+export type { TabsListProps, TabsListSlots } from "./tabs-list.vue";
+export type { TabsIndicatorProps, TabsIndicatorSlots, } from "./tabs-indicator.vue";
+export type { TabsTriggerProps, TabsTriggerSlots } from "./tabs-trigger.vue";
+export type { TabsContentProps, TabsContentSlots } from "./tabs-content.vue";

package/dist/components/tabs/index.js

@@ -0,0 +1,6 @@
+export { default as TabsRoot } from './tabs-root.vue.js';
+export { default as TabsList } from './tabs-list.vue.js';
+export { default as TabsIndicator } from './tabs-indicator.vue.js';
+export { default as TabsTrigger } from './tabs-trigger.vue.js';
+export { default as TabsContent } from './tabs-content.vue.js';
+export { tabsVariants } from './tabs.styles.js';

package/dist/components/tabs/tabs-content.vue.d.ts

@@ -0,0 +1,25 @@
+import { type TabsContentProps as RekaTabsContentProps } from "reka-ui";
+import { type HTMLAttributes } from "vue";
+/** TabsContent Props */
+export interface TabsContentProps extends RekaTabsContentProps {
+    /** Custom class */
+    class?: HTMLAttributes["class"];
+}
+/** TabsContent Slots */
+export interface TabsContentSlots {
+    default: () => void;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<TabsContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsContentProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tabs/tabs-content.vue.js

@@ -0,0 +1,37 @@
+import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { useForwardProps, TabsContent } from 'reka-ui';
+import { tabsVariants } from './tabs.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tabs-content",
+  props: {
+    class: { type: null, required: false },
+    value: { type: [String, Number], required: true },
+    forceMount: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const contentProps = useForwardProps(() => {
+      const { class: className, ...rest } = props;
+      return rest;
+    });
+    const theme = computed(
+      () => tabsVariants().content({
+        class: props.class
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TabsContent), mergeProps(unref(contentProps), { class: theme.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/tabs/tabs-content.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './tabs-content.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/tabs/tabs-indicator.vue.d.ts

@@ -0,0 +1,25 @@
+import { type TabsIndicatorProps as RekaTabsIndicatorProps } from "reka-ui";
+import { type HTMLAttributes } from "vue";
+/** TabsIndicator Props */
+export interface TabsIndicatorProps extends RekaTabsIndicatorProps {
+    /** Custom class */
+    class?: HTMLAttributes["class"];
+}
+/** TabsIndicator Slots */
+export interface TabsIndicatorSlots {
+    default: () => void;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<TabsIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsIndicatorProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tabs/tabs-indicator.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { useForwardProps, TabsIndicator } from 'reka-ui';
+import { tabsVariants } from './tabs.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tabs-indicator",
+  props: {
+    class: { type: null, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const indicatorProps = useForwardProps(() => {
+      const { class: className, ...rest } = props;
+      return rest;
+    });
+    const theme = computed(
+      () => tabsVariants().indicator({
+        class: props.class
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TabsIndicator), mergeProps(unref(indicatorProps), { class: theme.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/tabs/tabs-indicator.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './tabs-indicator.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/tabs/tabs-list.vue.d.ts

@@ -0,0 +1,26 @@
+import { type TabsListProps as RekaTabsListProps } from "reka-ui";
+import { type HTMLAttributes } from "vue";
+/** TabsList Props */
+export interface TabsListProps extends RekaTabsListProps {
+    /** Custom class */
+    class?: HTMLAttributes["class"];
+}
+/** TabsList Slots */
+export interface TabsListSlots {
+    default: () => void;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<TabsListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsListProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+    loop: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tabs/tabs-list.vue.js

@@ -0,0 +1,36 @@
+import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { useForwardProps, TabsList } from 'reka-ui';
+import { tabsVariants } from './tabs.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tabs-list",
+  props: {
+    class: { type: null, required: false },
+    loop: { type: Boolean, required: false, default: true },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const listProps = useForwardProps(() => {
+      const { class: className, ...rest } = props;
+      return rest;
+    });
+    const theme = computed(
+      () => tabsVariants().list({
+        class: props.class
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TabsList), mergeProps(unref(listProps), { class: theme.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/tabs/tabs-list.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './tabs-list.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/tabs/tabs-root.vue.d.ts

@@ -0,0 +1,39 @@
+import { type TabsRootProps as RekaTabsRootProps, type TabsRootEmits as RekaTabsRootEmits } from "reka-ui";
+import { type HTMLAttributes } from "vue";
+/** TabsRoot Props */
+export interface TabsRootProps extends RekaTabsRootProps {
+    /** Custom class */
+    class?: HTMLAttributes["class"];
+}
+/** TabsRoot Emits */
+export interface TabsRootEmits extends RekaTabsRootEmits {
+}
+/** TabsRoot Slots */
+export interface TabsRootSlots {
+    default: (props: {
+        modelValue?: string | number;
+    }) => void;
+}
+declare var __VLS_6: {
+    modelValue: string | number | undefined;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<TabsRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (payload: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<TabsRootProps> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+    orientation: "vertical" | "horizontal";
+    unmountOnHide: boolean;
+    activationMode: "automatic" | "manual";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tabs/tabs-root.vue.js

@@ -0,0 +1,44 @@
+import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import { useForwardPropsEmits, TabsRoot } from 'reka-ui';
+import { tabsVariants } from './tabs.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tabs-root",
+  props: {
+    class: { type: null, required: false },
+    defaultValue: { type: null, required: false },
+    orientation: { type: String, required: false, default: "horizontal" },
+    dir: { type: String, required: false },
+    activationMode: { type: String, required: false, default: "automatic" },
+    modelValue: { type: null, required: false },
+    unmountOnHide: { type: Boolean, required: false, default: true },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const rootOnlyProps = computed(() => {
+      const { class: className, ...rest } = props;
+      return rest;
+    });
+    const rootPropsEmits = useForwardPropsEmits(rootOnlyProps, emits);
+    const theme = computed(
+      () => tabsVariants().root({
+        class: props.class
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TabsRoot), mergeProps(unref(rootPropsEmits), { class: theme.value }), {
+        default: withCtx((slotProps) => [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/tabs/tabs-root.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './tabs-root.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/tabs/tabs-trigger.vue.d.ts

@@ -0,0 +1,39 @@
+import { type TabsTriggerProps as RekaTabsTriggerProps } from "reka-ui";
+import { type HTMLAttributes } from "vue";
+import type { Colors } from "../types/shared-types";
+/** TabsTrigger Props */
+export interface TabsTriggerProps extends RekaTabsTriggerProps {
+    /** Custom class */
+    class?: HTMLAttributes["class"];
+    /**
+     * The color of the tab sued for trigger ans indicators
+     * @defaultValue 'brand'
+     */
+    color?: Colors;
+    /**
+     * The variant of the tab
+     * @defaultValue 'link'
+     */
+    variant?: "pill" | "link";
+}
+/** TabsTrigger Slots */
+export interface TabsTriggerSlots {
+    default: () => void;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<TabsTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsTriggerProps> & Readonly<{}>, {
+    variant: "pill" | "link";
+    color: Colors;
+    disabled: boolean;
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tabs/tabs-trigger.vue.js

@@ -0,0 +1,42 @@
+import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { useForwardProps, TabsTrigger } from 'reka-ui';
+import { tabsVariants } from './tabs.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tabs-trigger",
+  props: {
+    class: { type: null, required: false },
+    color: { type: String, required: false, default: "brand" },
+    variant: { type: String, required: false, default: "link" },
+    value: { type: [String, Number], required: true },
+    disabled: { type: Boolean, required: false, default: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "button" }
+  },
+  setup(__props) {
+    const props = __props;
+    const triggerProps = useForwardProps(() => {
+      const { class: className, color, variant, ...rest } = props;
+      return rest;
+    });
+    const theme = computed(
+      () => tabsVariants().trigger({
+        class: props.class
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TabsTrigger), mergeProps({
+        "data-color": __props.color,
+        "data-variant": __props.variant
+      }, unref(triggerProps), { class: theme.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["data-color", "data-variant", "class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };