@vifui/core 0.4.0-alpha.6

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

@@ -0,0 +1,144 @@
+import type { Colors, Sizes, Spinners, Variants } from "../types/shared-types";
+/**
+ * Props for the VifUI Button component.
+ * Provides extensive configuration for variant, size, state, and accessibility.
+ */
+export interface ButtonProps {
+    /**
+     * Defines the visual style of the button.
+     *
+     * @type {"primary" | "secondary" | "soft" | "ghost" | "outline" | "danger" | "shadow"}
+     * @default "primary"
+     * @example
+     * ```vue
+     * <Button variant="secondary">Cancel</Button>
+     * ```
+     */
+    variant?: Variants;
+    /**
+     * Defines the button color scheme.
+     * @type {"neutral" | "brand" | "success" | "warning" | "danger"}
+     * @default "brand"
+     */
+    color?: Colors;
+    /**
+     * Controls the overall button size.
+     *
+     * @type {"xs" | "sm" | "md" | "lg" | "xl"}
+     * @default "md"
+     * @example
+     * ```vue
+     * <Button size="lg">Large Button</Button>
+     * ```
+     */
+    size?: Sizes;
+    /**
+     * Renders an icon-only button (square with equal width and height).
+     * Automatically centers slot content.
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <Button isIconOnly><Icon icon="gravity-ui:plus" /></Button>
+     * ```
+     */
+    isIconOnly?: boolean;
+    /**
+     * Custom class names for extending or overriding styles.
+     *
+     * @example
+     * ```vue
+     * <Button class="rounded-full">Rounded Button</Button>
+     * ```
+     */
+    class?: string;
+    /**
+     * Disables the button, preventing interaction.
+     * Also sets `aria-disabled` for accessibility.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows a loading spinner and disables user interaction.
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <Button :isPending="loading">Loading...</Button>
+     * ```
+     */
+    isPending?: boolean;
+    /**
+     * Defines the button type when rendered as a `<button>` element.
+     *
+     * @default "button"
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * Accessible label (for icon-only buttons or ARIA usage).
+     */
+    ariaLabel?: string;
+    /**
+     * Spinner animation type displayed when `isPending` is true.
+     *
+     * @default "default"
+     */
+    spinnerType?: Spinners;
+    /**
+     * When provided, renders as an anchor tag (`<a>`) instead of `<button>`.
+     *
+     * @example
+     * ```vue
+     * <Button href="https://veroui.com" target="_blank">Visit Site</Button>
+     * ```
+     */
+    href?: string;
+    /**
+     * Target for link navigation when using `href`.
+     *
+     * @default "_self"
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     * Rel attribute for link security and SEO when using `href`.
+     *
+     * @default "noopener noreferrer" (when target is "_blank")
+     */
+    rel?: string;
+    /**
+     * Enables the ripple effect on click.
+     *
+     * @default true
+     */
+    ripple?: boolean;
+}
+declare var __VLS_15: {
+    isPending: boolean;
+    isDisabled: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_component: 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;
+}>, {
+    size: Sizes;
+    variant: Variants;
+    color: Colors;
+    type: "button" | "submit" | "reset";
+    disabled: boolean;
+    isIconOnly: boolean;
+    isPending: boolean;
+    spinnerType: Spinners;
+    ripple: 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/button/button.vue.js

@@ -0,0 +1,131 @@
+import { defineComponent, ref, computed, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createCommentVNode, createElementVNode, createVNode, unref, renderSlot } from 'vue';
+import { buttonVariants } from './button.styles.js';
+import _sfc_main$1 from '../spinner/spinner.vue.js';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "vif-button__loader",
+  "aria-hidden": "true"
+};
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "button",
+  props: {
+    variant: { type: String, required: false, default: "primary" },
+    color: { type: String, required: false, default: "brand" },
+    size: { type: String, required: false, default: "md" },
+    isIconOnly: { type: Boolean, required: false, default: false },
+    class: { type: String, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    isPending: { type: Boolean, required: false, default: false },
+    type: { type: String, required: false, default: "button" },
+    ariaLabel: { type: String, required: false },
+    spinnerType: { type: String, required: false, default: "default" },
+    href: { type: String, required: false },
+    target: { type: String, required: false },
+    rel: { type: String, required: false },
+    ripple: { type: Boolean, required: false, default: true }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const buttonRef = ref(null);
+    const classes = computed(
+      () => buttonVariants({
+        variant: props.variant,
+        color: props.color,
+        size: props.size,
+        isIconOnly: props.isIconOnly,
+        class: props.class
+      })
+    );
+    const createRipple = (event) => {
+      if (!props.ripple || !buttonRef.value) return;
+      const button = buttonRef.value;
+      const ripple = document.createElement("span");
+      ripple.classList.add("vif-button__ripple");
+      const rect = button.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      ripple.style.left = `${x}px`;
+      ripple.style.top = `${y}px`;
+      button.appendChild(ripple);
+      ripple.addEventListener("animationend", () => {
+        ripple.remove();
+      });
+    };
+    const handleClick = (event) => {
+      if (!props.disabled && !props.isPending) {
+        createRipple(event);
+        emit("click", event);
+      }
+    };
+    const isDisabled = computed(() => props.disabled || props.isPending);
+    const componentTag = computed(() => props.href ? "a" : "button");
+    const spinnerSize = computed(() => props.size || "sm");
+    const spinnerContainerSize = computed(() => {
+      const sizeMap = {
+        xs: "h-3.5 w-3.5",
+        sm: "h-3.5 w-3.5",
+        md: "h-4 w-4",
+        lg: "h-5 w-5",
+        xl: "h-5 w-5"
+      };
+      return sizeMap[props.size || "md"];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(componentTag.value), {
+        ref_key: "buttonRef",
+        ref: buttonRef,
+        class: normalizeClass([classes.value, { "vif-button--loading": __props.isPending }]),
+        type: !__props.href ? __props.type : void 0,
+        href: __props.href,
+        target: __props.href && __props.target,
+        rel: __props.href && __props.target === "_blank" ? __props.rel || "noopener noreferrer" : __props.rel,
+        disabled: !__props.href ? isDisabled.value : void 0,
+        "aria-disabled": isDisabled.value,
+        "aria-label": __props.ariaLabel,
+        "data-pending": __props.isPending || void 0,
+        onClick: handleClick
+      }, {
+        default: withCtx(() => [
+          __props.isPending ? (openBlock(), createElementBlock("span", _hoisted_1, [
+            createElementVNode(
+              "div",
+              {
+                class: normalizeClass(spinnerContainerSize.value)
+              },
+              [
+                createVNode(unref(_sfc_main$1), {
+                  size: spinnerSize.value,
+                  type: __props.spinnerType,
+                  color: "current"
+                }, null, 8, ["size", "type"])
+              ],
+              2
+              /* CLASS */
+            )
+          ])) : createCommentVNode("v-if", true),
+          createElementVNode(
+            "span",
+            {
+              class: normalizeClass(__props.isPending ? "opacity-0" : "vif-button__content")
+            },
+            [
+              renderSlot(_ctx.$slots, "default", {
+                isPending: __props.isPending,
+                isDisabled: isDisabled.value
+              })
+            ],
+            2
+            /* CLASS */
+          )
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["class", "type", "href", "target", "rel", "disabled", "aria-disabled", "aria-label", "data-pending"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/button/button.vue2.js

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

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

@@ -0,0 +1,3 @@
+export { default as Button } from './button.vue';
+export { buttonVariants, type ButtonVariantProps } from './button.styles';
+export type { ButtonProps } from './button.vue';

package/dist/components/button/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from './button.vue.js';
+export { buttonVariants } from './button.styles.js';

package/dist/components/card/card-body.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Props for the VifUI CardBody component.
+ * Wraps the main content area of a card, typically used for
+ * text, images, or other media.
+ */
+export interface CardBodyProps {
+    /**
+     * Custom class names for the card body wrapper.
+     * Applied directly to the `<div>` element.
+     *
+     * @example
+     * ```vue
+     * <CardBody class="p-4 text-gray-700" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CardBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBodyProps> & 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/card/card-body.vue.js

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

package/dist/components/card/card-body.vue2.js

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

package/dist/components/card/card-footer.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Props for the VifUI CardFooter component.
+ * Wraps the bottom section of a card, typically used for
+ * actions, buttons, or supplementary information.
+ */
+export interface CardFooterProps {
+    /**
+     * Custom class names for the card footer wrapper.
+     * Applied directly to the `<div>` element.
+     *
+     * @example
+     * ```vue
+     * <CardFooter class="flex justify-end p-4 gap-2" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CardFooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardFooterProps> & 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/card/card-footer.vue.js

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

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

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

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

@@ -0,0 +1,29 @@
+/**
+ * Props for the VifUI CardHeader component.
+ * Wraps the top section of a card, typically used for titles,
+ * badges, or action buttons.
+ */
+export interface CardHeaderProps {
+    /**
+     * Custom class names for the card header wrapper.
+     * Applied directly to the `<div>` element.
+     *
+     * @example
+     * ```vue
+     * <CardHeader class="flex justify-between items-center p-4" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CardHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardHeaderProps> & 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/card/card-header.vue.js

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

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

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

package/dist/components/card/card-media.vue.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Props for the VifUI CardMedia component.
+ * Displays media content Displays media content (images or videos) within a card.
+ * Supports various aspect ratios and object-fit options.
+ */
+export interface CardMediaProps {
+    src?: string;
+    alt?: string;
+    /**
+     * Aspect ratio of the media container.
+     * - `"auto"` — Uses natural image dimensions (no extra space)
+     * - `"square"` — 1:1 ratio
+     * - `"video"` — 16:9 ratio
+     * - `"portrait"` — 3:4 ratio
+     */
+    ratio?: "auto" | "square" | "video" | "portrait";
+    /**
+     * Object fit behavior for the media content.
+     * - `"cover"` — Fills container, may crop (default)
+     * - `"contain"` — Fits inside container, may show letterboxing
+     * - `"fill"` — Stretches to fill container
+     * - `"none"` — Original size
+     * - `"scale-down"` — Smaller of none/contain
+     */
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    loading?: "lazy" | "eager";
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CardMediaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardMediaProps> & Readonly<{}>, {
+    loading: "lazy" | "eager";
+    ratio: "auto" | "square" | "video" | "portrait";
+    objectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
+}, {}, {}, {}, 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/card/card-media.vue.js

@@ -0,0 +1,56 @@
+import { defineComponent, inject, computed, createElementBlock, openBlock, normalizeClass, renderSlot, createCommentVNode } from 'vue';
+
+const _hoisted_1 = ["src", "alt", "loading"];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "card-media",
+  props: {
+    src: { type: String, required: false },
+    alt: { type: String, required: false },
+    ratio: { type: String, required: false, default: "auto" },
+    objectFit: { type: String, required: false, default: "cover" },
+    loading: { type: String, required: false, default: "lazy" },
+    class: { type: String, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("cardSlots", null);
+    const ratioClass = computed(() => {
+      if (props.ratio === "auto") return "";
+      return `vif-card__media--${props.ratio}`;
+    });
+    const mediaClasses = computed(() => [
+      slots?.value?.media?.(),
+      ratioClass.value,
+      props.class
+    ]);
+    const imageClasses = computed(() => {
+      if (props.ratio === "auto") {
+        return ["w-full", "h-auto", "block"];
+      }
+      return [`object-${props.objectFit}`];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(mediaClasses.value)
+        },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            __props.src ? (openBlock(), createElementBlock("img", {
+              key: 0,
+              src: __props.src,
+              alt: __props.alt,
+              class: normalizeClass(imageClasses.value),
+              loading: __props.loading
+            }, null, 10, _hoisted_1)) : createCommentVNode("v-if", true)
+          ])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/card/card-media.vue2.js

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