@vifui/core 0.4.0-alpha.6

package/dist/components/avatar/avatar-fallback.vue.js

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

package/dist/components/avatar/avatar-fallback.vue2.js

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

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

@@ -0,0 +1,20 @@
+import { type PrimitiveProps } from "reka-ui";
+import { type Slot } from "vue";
+export interface AvatarGroupProps extends PrimitiveProps {
+    class?: string;
+    /**
+     * Limits the number of avatars displayed The rest is displayed as an `+n` avatar
+     */
+    max?: number;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & 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/avatar/avatar-group.vue.js

@@ -0,0 +1,101 @@
+import { defineComponent, computed, useSlots, onMounted, createBlock, openBlock, unref, mergeProps, withCtx, createElementBlock, createCommentVNode, Fragment, renderList, resolveDynamicComponent, createVNode, createTextVNode, toDisplayString } from 'vue';
+import { useForwardProps, Primitive } from 'reka-ui';
+import { avatarGroupVariants } from './avatar.styles.js';
+import _sfc_main$1 from './avatar-root.vue.js';
+import _sfc_main$2 from './avatar-fallback.vue.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "avatar-group",
+  props: {
+    class: { type: String, required: false },
+    max: { type: Number, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const classes = computed(
+      () => avatarGroupVariants({
+        class: props.class
+      })
+    );
+    const delegatedProps = computed(() => {
+      const { class: className, max, ...rest } = props;
+      return rest;
+    });
+    const forwardedProps = useForwardProps(delegatedProps);
+    const slots = useSlots();
+    const avatarChildren = computed(() => {
+      const defaultSlot = slots.default?.() ?? [];
+      return defaultSlot.filter((node) => node.type === _sfc_main$1);
+    });
+    const visibleAvatars = computed(() => {
+      if (!props.max || props.max <= 0) return avatarChildren.value;
+      return avatarChildren.value.slice(0, props.max);
+    });
+    const overflowCount = computed(() => {
+      const limit = props.max && props.max > 0 ? props.max : Number.POSITIVE_INFINITY;
+      return Math.max(0, avatarChildren.value.length - limit);
+    });
+    const overflowAvatarProps = computed(() => {
+      const hiddenAvatars = avatarChildren.value.slice(props.max);
+      if (hiddenAvatars.length === 0) return {};
+      return hiddenAvatars[0]?.props ?? {};
+    });
+    onMounted(() => {
+      if (props.max != null && (!Number.isInteger(props.max) || props.max < 1)) {
+        console.warn(
+          `[AvatarGroup] Invalid 'max' value: ${props.max}. Must be a positive integer.`
+        );
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps(unref(forwardedProps), { class: classes.value }), {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(visibleAvatars.value, (avatar, index) => {
+              return openBlock(), createBlock(
+                resolveDynamicComponent(avatar),
+                mergeProps({ key: index }, { ref_for: true }, avatar.props, { "data-standalone": "false" }),
+                null,
+                16
+                /* FULL_PROPS */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          overflowCount.value > 0 ? (openBlock(), createBlock(
+            resolveDynamicComponent(unref(_sfc_main$1)),
+            mergeProps({ key: 0 }, overflowAvatarProps.value, { "data-standalone": "false" }),
+            {
+              default: withCtx(() => [
+                createVNode(unref(_sfc_main$2), null, {
+                  default: withCtx(() => [
+                    createTextVNode(
+                      "+" + toDisplayString(overflowCount.value),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            },
+            16
+            /* FULL_PROPS */
+          )) : createCommentVNode("v-if", true)
+        ]),
+        _: 1
+        /* STABLE */
+      }, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/avatar/avatar-group.vue2.js

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

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

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

package/dist/components/avatar/avatar-image.vue.js

@@ -0,0 +1,37 @@
+import { defineComponent, computed, createBlock, openBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { useForwardProps, AvatarImage } from 'reka-ui';
+import { avatarVariants } from './avatar.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "avatar-image",
+  props: {
+    class: { type: String, required: false },
+    src: { type: String, required: true },
+    referrerPolicy: { type: null, required: false },
+    crossOrigin: { type: null, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = computed(() => {
+      const { class: className, ...rest } = props;
+      return rest;
+    });
+    const forwardedProps = useForwardProps(delegatedProps);
+    const classes = computed(() => avatarVariants({ class: props.class }));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(AvatarImage)), mergeProps(unref(forwardedProps), {
+        class: classes.value.image()
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/avatar/avatar-image.vue2.js

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

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

@@ -0,0 +1,57 @@
+import { type AvatarRootProps as RekaAvatarRootProps } from "reka-ui";
+import type { Sizes, Colors } from "src/components/types/shared-types";
+import { type Slot } from "vue";
+import { type SpinnerProps } from "../spinner";
+export interface AvatarRootProps extends RekaAvatarRootProps {
+    /**
+     * The size of the avatar
+     * @default 'md'
+     */
+    size?: Sizes;
+    /**
+     * The variant of the avatar
+     * @default 'flat'
+     */
+    variant?: "flat" | "ringed";
+    class?: string;
+    /** The ring color of the avatar if `variant` prop is `ring`
+     * @default 'neutral'
+     */
+    ringColor?: Colors;
+    /**
+     * The shape of the avatar
+     * @default 'circle'
+     */
+    shape?: "default" | "circle" | "square";
+    /**
+     * The loading state of the avatar
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Control the spinner when `loading` prop is `true`.
+     */
+    spinner?: SpinnerProps;
+    /**
+     * Disables the avatar, preventing interaction.
+     * Also sets `aria-disabled` for accessibility.
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarRootProps> & Readonly<{}>, {
+    size: Sizes;
+    ringColor: Colors;
+    shape: "default" | "circle" | "square";
+    variant: "flat" | "ringed";
+    loading: boolean;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default: Slot;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,102 @@
+import { defineComponent, computed, ref, createBlock, openBlock, resolveDynamicComponent, unref, mergeProps, withCtx, createElementBlock, createCommentVNode, renderSlot, normalizeClass, createVNode, normalizeProps, guardReactiveProps } from 'vue';
+import { useForwardProps, AvatarRoot } from 'reka-ui';
+import { avatarVariants } from './avatar.styles.js';
+import _sfc_main$1 from '../spinner/spinner.vue.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "avatar-root",
+  props: {
+    size: { type: String, required: false, default: "md" },
+    variant: { type: String, required: false, default: "flat" },
+    class: { type: String, required: false },
+    ringColor: { type: String, required: false, default: "neutral" },
+    shape: { type: String, required: false, default: "circle" },
+    loading: { type: Boolean, required: false, default: false },
+    spinner: { type: Object, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = computed(() => {
+      const {
+        as,
+        asChild,
+        class: className,
+        size,
+        shape,
+        ringColor,
+        loading,
+        disabled,
+        variant,
+        ...rest
+      } = props;
+      return rest;
+    });
+    const forwardedProps = useForwardProps(delegatedProps);
+    const classes = computed(
+      () => avatarVariants({
+        size: props.size,
+        class: props.class,
+        ringColor: props.ringColor,
+        shape: props.shape,
+        loading: props.loading,
+        variant: props.variant
+      })
+    );
+    const isDisabled = computed(() => props.disabled || props.loading);
+    const loaderSize = computed(() => {
+      const sizeMap = ref({
+        xs: "xs",
+        sm: "xs",
+        md: "xs",
+        lg: "sm",
+        xl: "sm"
+      });
+      return sizeMap.value[props.size] ?? "xs";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(AvatarRoot)), mergeProps({
+        "data-loading": __props.loading || void 0,
+        "aria-disabled": isDisabled.value
+      }, unref(forwardedProps), {
+        class: classes.value.base(),
+        "data-standalone": "true"
+      }), {
+        default: withCtx(() => [
+          __props.loading ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: normalizeClass(classes.value.loader()),
+              "aria-hidden": "true"
+            },
+            [
+              createVNode(
+                unref(_sfc_main$1),
+                normalizeProps(guardReactiveProps({
+                  ...__props.spinner,
+                  size: loaderSize.value
+                })),
+                null,
+                16
+                /* FULL_PROPS */
+              )
+            ],
+            2
+            /* CLASS */
+          )) : createCommentVNode("v-if", true),
+          renderSlot(_ctx.$slots, "default", {
+            loading: __props.loading,
+            disabled: isDisabled.value
+          })
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["data-loading", "aria-disabled", "class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

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

@@ -0,0 +1,209 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * Avatar and Avatar Group component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ * Inspired by Vuesax's avatar architecture
+ */
+export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    variant: {
+        ringed: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+    };
+    ringColor: {
+        brand: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        neutral: {
+            base: string;
+        };
+    };
+    shape: {
+        default: {
+            base: string;
+        };
+        circle: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
+    };
+    loading: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    image: string;
+    fallback: string;
+    loader: string;
+}, "vif-avatar", {
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    variant: {
+        ringed: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+    };
+    ringColor: {
+        brand: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        neutral: {
+            base: string;
+        };
+    };
+    shape: {
+        default: {
+            base: string;
+        };
+        circle: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
+    };
+    loading: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    image: string;
+    fallback: string;
+    loader: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    variant: {
+        ringed: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+    };
+    ringColor: {
+        brand: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        neutral: {
+            base: string;
+        };
+    };
+    shape: {
+        default: {
+            base: string;
+        };
+        circle: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
+    };
+    loading: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    image: string;
+    fallback: string;
+    loader: string;
+}, "vif-avatar", unknown, unknown, undefined>>;
+export declare const avatarGroupVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "vif-avatar-group", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "vif-avatar-group", unknown, unknown, undefined>>;
+export type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+export type AvatarGroupVariantProps = VariantProps<typeof avatarGroupVariants>;

package/dist/components/avatar/avatar.styles.js

@@ -0,0 +1,50 @@
+import { tv } from 'tailwind-variants';
+
+const avatarVariants = tv({
+  base: "vif-avatar",
+  slots: {
+    image: "vif-avatar__image",
+    fallback: "vif-avatar__fallback",
+    loader: "vif-avatar__loader"
+  },
+  variants: {
+    size: {
+      xs: { base: "vif-avatar--xs" },
+      sm: { base: "vif-avatar--sm" },
+      md: { base: "vif-avatar--md" },
+      lg: { base: "vif-avatar--lg" },
+      xl: { base: "vif-avatar--xl" }
+    },
+    variant: {
+      ringed: { base: "vif-avatar--ringed" },
+      flat: { base: "" }
+    },
+    ringColor: {
+      brand: { base: "vif-avatar--brand" },
+      success: { base: "vif-avatar--success" },
+      warning: { base: "vif-avatar--warning" },
+      danger: { base: "vif-avatar--danger" },
+      neutral: { base: "vif-avatar--neutral" }
+    },
+    shape: {
+      default: { base: "vif-avatar--default" },
+      circle: { base: "vif-avatar--circle" },
+      square: { base: "" }
+    },
+    loading: {
+      true: { base: "vif-avatar--loading" },
+      false: { base: "" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    ringColor: "neutral",
+    shape: "circle",
+    variant: "flat"
+  }
+});
+const avatarGroupVariants = tv({
+  base: "vif-avatar-group"
+});
+
+export { avatarGroupVariants, avatarVariants };

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

@@ -0,0 +1,9 @@
+export { default as AvatarRoot } from './avatar-root.vue';
+export { default as AvatarImage } from './avatar-image.vue';
+export { default as AvatarFallback } from './avatar-fallback.vue';
+export { default as AvatarGroup } from './avatar-group.vue';
+export { avatarVariants, type AvatarVariantProps } from './avatar.styles';
+export type { AvatarRootProps } from './avatar-root.vue';
+export type { AvatarImageProps } from './avatar-image.vue';
+export type { AvatarFallbackProps } from './avatar-fallback.vue';
+export type { AvatarGroupProps } from './avatar-group.vue';

package/dist/components/avatar/index.js

@@ -0,0 +1,5 @@
+export { default as AvatarRoot } from './avatar-root.vue.js';
+export { default as AvatarImage } from './avatar-image.vue.js';
+export { default as AvatarFallback } from './avatar-fallback.vue.js';
+export { default as AvatarGroup } from './avatar-group.vue.js';
+export { avatarVariants } from './avatar.styles.js';