@vifui/core 0.4.0-alpha.6

package/dist/components/alert/alert-footer.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent, inject, ref, computed, createBlock, openBlock, Transition, withCtx, withDirectives, createVNode, unref, mergeProps, renderSlot, vShow } from 'vue';
+import { useForwardProps, Primitive } from 'reka-ui';
+import { alertVariants } from './alert.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "alert-footer",
+  props: {
+    class: { type: String, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const contentContext = inject("alertContentContext", {
+      collapsible: false,
+      collapsed: ref(false)
+    });
+    const collapsed = computed(() => contentContext.collapsed.value);
+    const delegatedProps = computed(() => {
+      const { as, asChild } = props;
+      return { as, asChild };
+    });
+    const forwardedProps = useForwardProps(delegatedProps);
+    const classes = computed(
+      () => alertVariants({
+        class: props.class
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        name: "vif-collapse",
+        persisted: ""
+      }, {
+        default: withCtx(() => [
+          withDirectives(createVNode(unref(Primitive), mergeProps(unref(forwardedProps), {
+            class: classes.value.contentFooter()
+          }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["class"]), [
+            [vShow, !collapsed.value]
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      });
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/alert/alert-footer.vue2.js

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

package/dist/components/alert/alert-header.vue.d.ts

@@ -0,0 +1,16 @@
+import { type PrimitiveProps } from 'reka-ui';
+import { type Slot } from 'vue';
+export interface AlertHeaderProps extends PrimitiveProps {
+    class?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AlertHeaderProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default: Slot;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/alert/alert-header.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent, inject, ref, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { useForwardProps, Primitive } from 'reka-ui';
+import { alertVariants } from './alert.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "alert-header",
+  props: {
+    class: { type: String, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const contentContext = inject("alertContentContext", {
+      collapsible: false,
+      collapsed: ref(false),
+      toggle: () => {
+      }
+    });
+    const delegatedProps = computed(() => {
+      const {
+        as,
+        asChild
+      } = props;
+      return { as, asChild };
+    });
+    const computedDelegatedProps = computed(() => ({
+      ...delegatedProps.value,
+      as: contentContext.collapsible ? "button" : props.as
+    }));
+    const forwardedProps = useForwardProps(computedDelegatedProps);
+    const classes = computed(
+      () => alertVariants({
+        class: props.class,
+        contentCollapsible: contentContext.collapsible
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({
+        onClick: _cache[0] || (_cache[0] = ($event) => unref(contentContext).collapsible && unref(contentContext).toggle())
+      }, unref(forwardedProps), {
+        class: classes.value.contentHeader()
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/alert/alert-header.vue2.js

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

package/dist/components/alert/alert-icon.vue.d.ts

@@ -0,0 +1,8 @@
+import { type IconifyIconProps } from '@iconify/vue';
+export interface AlertIconProps extends IconifyIconProps {
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<AlertIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AlertIconProps> & Readonly<{}>, {
+    mode: import("@iconify/vue/dist/iconify.js").IconifyRenderMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/alert/alert-icon.vue.js

@@ -0,0 +1,43 @@
+import { defineComponent, computed, createBlock, openBlock, resolveDynamicComponent, unref, normalizeProps, guardReactiveProps } from 'vue';
+import { Icon } from '@iconify/vue';
+import { alertVariants } from './alert.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "alert-icon",
+  props: {
+    class: { type: String, required: false },
+    icon: { type: [Object, String], required: true },
+    mode: { type: String, required: false, default: "svg" },
+    color: { type: String, required: false },
+    flip: { type: String, required: false },
+    rotate: { type: [Number, String], required: false },
+    hFlip: { type: Boolean, required: false },
+    vFlip: { type: Boolean, required: false },
+    width: { type: [null, String, Number], required: false },
+    height: { type: [null, String, Number], required: false },
+    inline: { type: Boolean, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const classes = computed(
+      () => alertVariants({
+        class: props.class
+      })
+    );
+    const computedProps = computed(() => ({
+      ...props,
+      class: classes.value.icon()
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(
+        resolveDynamicComponent(unref(Icon)),
+        normalizeProps(guardReactiveProps(computedProps.value)),
+        null,
+        16
+        /* FULL_PROPS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/alert/alert-icon.vue2.js

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

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

@@ -0,0 +1,48 @@
+import { type PrimitiveProps } from "reka-ui";
+import { type Slot } from "vue";
+import type { Colors, Variants } from "../types/shared-types";
+export interface AlertRootProps extends PrimitiveProps {
+    /**
+     * The variant of the alert
+     * @defaultValue "primary"
+     */
+    variant?: Extract<Variants, "primary" | "secondary" | "soft" | "outline">;
+    /**
+     * The color of the alert
+     * @defaultValue "brand"
+     */
+    color?: Colors;
+    /**
+     * Hides the content of the alert (makes the title a trigger)
+     * @defaultValue "false"
+     */
+    hideContent?: boolean;
+    class?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertRootProps & {
+    /**
+     * Handles the visibility of the alert
+     */
+    visible?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:visible": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<AlertRootProps & {
+    /**
+     * Handles the visibility of the alert
+     */
+    visible?: boolean;
+}> & Readonly<{
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+}>, {
+    variant: Extract<Variants, "primary" | "secondary" | "soft" | "outline">;
+    color: Colors;
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default: Slot;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,57 @@
+import { defineComponent, mergeModels, computed, useModel, createBlock, openBlock, Transition, withCtx, createCommentVNode, unref, mergeProps, renderSlot } from 'vue';
+import { useForwardProps, Primitive } from 'reka-ui';
+import { alertVariants } from './alert.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "alert-root",
+  props: /* @__PURE__ */ mergeModels({
+    variant: { type: String, required: false, default: "primary" },
+    color: { type: String, required: false, default: "brand" },
+    hideContent: { type: Boolean, required: false },
+    class: { type: String, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" }
+  }, {
+    "visible": { type: Boolean, default: true },
+    "visibleModifiers": {}
+  }),
+  emits: ["update:visible"],
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = computed(() => {
+      const { class: className, color, variant, ...rest } = props;
+      return rest;
+    });
+    const forwardedProps = useForwardProps(delegatedProps);
+    const visible = useModel(__props, "visible");
+    const classes = computed(
+      () => alertVariants({
+        class: props.class,
+        variant: props.variant,
+        color: props.color
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, { name: "vif-alert-fade" }, {
+        default: withCtx(() => [
+          visible.value ? (openBlock(), createBlock(unref(Primitive), mergeProps({
+            key: 0,
+            role: "alert"
+          }, unref(forwardedProps), {
+            class: classes.value.base()
+          }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", { visible: visible.value })
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["class"])) : createCommentVNode("v-if", true)
+        ]),
+        _: 3
+        /* FORWARDED */
+      });
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

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

@@ -0,0 +1,16 @@
+import { type PrimitiveProps } from 'reka-ui';
+import { type Slot } from 'vue';
+export interface AlertTitleProps extends PrimitiveProps {
+    class?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AlertTitleProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default: Slot;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,41 @@
+import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { useForwardProps, Primitive } from 'reka-ui';
+import { alertVariants } from './alert.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "alert-title",
+  props: {
+    class: { type: String, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = computed(() => {
+      const {
+        as,
+        asChild
+      } = props;
+      return { as, asChild };
+    });
+    const forwardedProps = useForwardProps(delegatedProps);
+    const classes = computed(
+      () => alertVariants({
+        class: props.class
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps(unref(forwardedProps), {
+        class: classes.value.contentHeaderTitle()
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

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

@@ -0,0 +1,96 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * Alert component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ * Inspired by Vuesax's alert architecture
+ */
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        soft: string;
+        outline: string;
+    };
+    color: {
+        brand: string;
+        neutral: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    contentCollapsible: {
+        true: {
+            contentHeader: string;
+        };
+        false: string;
+    };
+}, {
+    content: string;
+    contentHeader: string;
+    contentHeaderTitle: string;
+    contentHeaderDescription: string;
+    contentBody: string;
+    contentFooter: string;
+    icon: string;
+    close: string;
+}, "vif-alert", {
+    variant: {
+        primary: string;
+        secondary: string;
+        soft: string;
+        outline: string;
+    };
+    color: {
+        brand: string;
+        neutral: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    contentCollapsible: {
+        true: {
+            contentHeader: string;
+        };
+        false: string;
+    };
+}, {
+    content: string;
+    contentHeader: string;
+    contentHeaderTitle: string;
+    contentHeaderDescription: string;
+    contentBody: string;
+    contentFooter: string;
+    icon: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        soft: string;
+        outline: string;
+    };
+    color: {
+        brand: string;
+        neutral: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    contentCollapsible: {
+        true: {
+            contentHeader: string;
+        };
+        false: string;
+    };
+}, {
+    content: string;
+    contentHeader: string;
+    contentHeaderTitle: string;
+    contentHeaderDescription: string;
+    contentBody: string;
+    contentFooter: string;
+    icon: string;
+    close: string;
+}, "vif-alert", unknown, unknown, undefined>>;
+export type AlertVariantProps = VariantProps<typeof alertVariants>;

package/dist/components/alert/alert.styles.js

@@ -0,0 +1,147 @@
+import { tv } from 'tailwind-variants';
+
+const alertVariants = tv({
+  base: "vif-alert",
+  slots: {
+    content: "vif-alert__content",
+    contentHeader: "vif-alert__header",
+    contentHeaderTitle: "vif-alert__title",
+    contentHeaderDescription: "vif-alert__description",
+    contentBody: "vif-alert__body",
+    contentFooter: "vif-alert__footer",
+    icon: "vif-alert__icon",
+    close: "vif-alert__close"
+  },
+  variants: {
+    variant: {
+      primary: "",
+      secondary: "",
+      soft: "",
+      outline: ""
+    },
+    color: {
+      brand: "",
+      neutral: "",
+      success: "",
+      warning: "",
+      danger: ""
+    },
+    contentCollapsible: {
+      true: { contentHeader: "vif-alert__content-collapsible" },
+      false: ""
+    }
+  },
+  compoundVariants: [
+    // Brand
+    {
+      color: "brand",
+      variant: "primary",
+      class: "vif-alert-brand-primary"
+    },
+    {
+      color: "brand",
+      variant: "secondary",
+      class: "vif-alert-brand-secondary"
+    },
+    {
+      color: "brand",
+      variant: "soft",
+      class: "vif-alert-brand-soft"
+    },
+    {
+      color: "brand",
+      variant: "outline",
+      class: "vif-alert-brand-outline"
+    },
+    // Neutral
+    {
+      color: "neutral",
+      variant: "primary",
+      class: "vif-alert-neutral-primary"
+    },
+    {
+      color: "neutral",
+      variant: "soft",
+      class: "vif-alert-neutral-soft"
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      class: "vif-alert-neutral-outline"
+    },
+    {
+      color: "neutral",
+      variant: "secondary",
+      class: "vif-alert-neutral-secondary"
+    },
+    // Success
+    {
+      color: "success",
+      variant: "primary",
+      class: "vif-alert-success-primary"
+    },
+    {
+      color: "success",
+      variant: "soft",
+      class: "vif-alert-success-soft"
+    },
+    {
+      color: "success",
+      variant: "outline",
+      class: "vif-alert-success-outline"
+    },
+    {
+      color: "success",
+      variant: "secondary",
+      class: "vif-alert-success-secondary"
+    },
+    // Warning
+    {
+      color: "warning",
+      variant: "primary",
+      class: "vif-alert-warning-primary"
+    },
+    {
+      color: "warning",
+      variant: "soft",
+      class: "vif-alert-warning-soft"
+    },
+    {
+      color: "warning",
+      variant: "outline",
+      class: "vif-alert-warning-outline"
+    },
+    {
+      color: "warning",
+      variant: "secondary",
+      class: "vif-alert-warning-secondary"
+    },
+    // Danger
+    {
+      color: "danger",
+      variant: "primary",
+      class: "vif-alert-danger-primary"
+    },
+    {
+      color: "danger",
+      variant: "soft",
+      class: "vif-alert-danger-soft"
+    },
+    {
+      color: "danger",
+      variant: "outline",
+      class: "vif-alert-danger-outline"
+    },
+    {
+      color: "danger",
+      variant: "secondary",
+      class: "vif-alert-danger-secondary"
+    }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    color: "brand"
+  }
+});
+
+export { alertVariants };

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

@@ -0,0 +1,19 @@
+export { default as AlertRoot } from './alert-root.vue';
+export { default as AlertIcon } from './alert-icon.vue';
+export { default as AlertContent } from './alert-content.vue';
+export { default as AlertHeader } from './alert-header.vue';
+export { default as AlertTitle } from './alert-title.vue';
+export { default as AlertDescription } from './alert-description.vue';
+export { default as AlertBody } from './alert-body.vue';
+export { default as AlertFooter } from './alert-footer.vue';
+export { default as AlertClose } from './alert-close.vue';
+export type { AlertRootProps } from './alert-root.vue';
+export type { AlertIconProps } from './alert-icon.vue';
+export type { AlertContentProps } from './alert-content.vue';
+export type { AlertHeaderProps } from './alert-header.vue';
+export type { AlertTitleProps } from './alert-title.vue';
+export type { AlertDescriptionProps } from './alert-description.vue';
+export type { AlertBodyProps } from './alert-body.vue';
+export type { AlertFooterProps } from './alert-footer.vue';
+export type { AlertCloseProps } from './alert-close.vue';
+export { alertVariants, type AlertVariantProps } from './alert.styles';

package/dist/components/alert/index.js

@@ -0,0 +1,10 @@
+export { default as AlertRoot } from './alert-root.vue.js';
+export { default as AlertIcon } from './alert-icon.vue.js';
+export { default as AlertContent } from './alert-content.vue.js';
+export { default as AlertHeader } from './alert-header.vue.js';
+export { default as AlertTitle } from './alert-title.vue.js';
+export { default as AlertDescription } from './alert-description.vue.js';
+export { default as AlertBody } from './alert-body.vue.js';
+export { default as AlertFooter } from './alert-footer.vue.js';
+export { default as AlertClose } from './alert-close.vue.js';
+export { alertVariants } from './alert.styles.js';

package/dist/components/avatar/avatar-fallback.vue.d.ts

@@ -0,0 +1,14 @@
+import { type AvatarFallbackProps as RekaAvatarFallbackProps } from "reka-ui";
+import { type Slot } from "vue";
+export interface AvatarFallbackProps extends RekaAvatarFallbackProps {
+    class?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarFallbackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarFallbackProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default: Slot;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};