@vifui/core 0.4.0-alpha.6

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

@@ -0,0 +1,87 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * Badge component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ * Follows VifUI design system
+ */
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        soft: string;
+        outline: string;
+        flat: string;
+    };
+    color: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    rounded: {
+        true: string;
+    };
+    dot: {
+        true: string;
+    };
+}, undefined, "vif-badge", {
+    variant: {
+        solid: string;
+        soft: string;
+        outline: string;
+        flat: string;
+    };
+    color: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    rounded: {
+        true: string;
+    };
+    dot: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        soft: string;
+        outline: string;
+        flat: string;
+    };
+    color: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    rounded: {
+        true: string;
+    };
+    dot: {
+        true: string;
+    };
+}, undefined, "vif-badge", unknown, unknown, undefined>>;
+export type BadgeVariantProps = VariantProps<typeof badgeVariants>;

package/dist/components/badge/badge.styles.js

@@ -0,0 +1,41 @@
+import { tv } from 'tailwind-variants';
+
+const badgeVariants = tv({
+  base: "vif-badge",
+  variants: {
+    variant: {
+      solid: "vif-badge--solid",
+      soft: "vif-badge--soft",
+      outline: "vif-badge--outline",
+      flat: "vif-badge--flat"
+    },
+    color: {
+      neutral: "vif-badge--neutral",
+      brand: "vif-badge--brand",
+      success: "vif-badge--success",
+      warning: "vif-badge--warning",
+      danger: "vif-badge--danger"
+    },
+    size: {
+      xs: "vif-badge--xs",
+      sm: "vif-badge--sm",
+      md: "vif-badge--md",
+      lg: "vif-badge--lg"
+    },
+    rounded: {
+      true: "vif-badge--rounded"
+    },
+    dot: {
+      true: "vif-badge--dot"
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    color: "brand",
+    size: "sm",
+    rounded: false,
+    dot: false
+  }
+});
+
+export { badgeVariants };

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

@@ -0,0 +1,116 @@
+import type { Colors, Sizes } from "../types/shared-types";
+/**
+ * Props for the VifUI Badge component.
+ * Provides configuration for variant, size, color, and features.
+ */
+export interface BadgeProps {
+    /**
+     * Defines the visual style of the badge.
+     *
+     * @type {"solid" | "soft" | "outline" | "flat"}
+     * @default "solid"
+     * @example
+     * ```vue
+     * <Badge variant="soft">New</Badge>
+     * ```
+     */
+    variant?: "solid" | "soft" | "outline" | "flat";
+    /**
+     * Defines the badge color scheme.
+     * @type {"neutral" | "brand" | "success" | "warning" | "danger"}
+     * @default "brand"
+     */
+    color?: Colors;
+    /**
+     * Controls the overall badge size.
+     *
+     * @type {"xs" | "sm" | "md" | "lg"}
+     * @default "sm"
+     * @example
+     * ```vue
+     * <Badge size="lg">Large</Badge>
+     * ```
+     */
+    size?: Exclude<Sizes, "xl">;
+    /**
+     * Fully rounded badge (pill shape).
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <Badge rounded>Rounded</Badge>
+     * ```
+     */
+    rounded?: boolean;
+    /**
+     * Shows a dot indicator before the content.
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <Badge dot>Active</Badge>
+     * ```
+     */
+    dot?: boolean;
+    /**
+     * Makes the badge removable with a close button.
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <Badge removable @remove="handleRemove">Removable</Badge>
+     * ```
+     */
+    removable?: boolean;
+    /**
+     * Custom class names for extending or overriding styles.
+     *
+     * @example
+     * ```vue
+     * <Badge class="uppercase">Custom</Badge>
+     * ```
+     */
+    class?: string;
+    /**
+     * Icon to display before the badge content.
+     * Should be a component (e.g., from lucide-vue-next or @iconify/vue).
+     *
+     * @example
+     * ```vue
+     * <Badge :startIcon="CheckIcon">Verified</Badge>
+     * ```
+     */
+    startIcon?: any;
+    /**
+     * Icon to display after the badge content.
+     *
+     * @example
+     * ```vue
+     * <Badge :endIcon="ArrowRightIcon">Next</Badge>
+     * ```
+     */
+    endIcon?: any;
+}
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{
+    onRemove?: (() => any) | undefined;
+}>, {
+    size: Exclude<Sizes, "xl">;
+    variant: "solid" | "soft" | "outline" | "flat";
+    color: Colors;
+    rounded: boolean;
+    dot: boolean;
+    removable: 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/badge/badge.vue.js

@@ -0,0 +1,79 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createBlock, renderSlot, resolveDynamicComponent, createVNode, unref } from 'vue';
+import { Icon } from '@iconify/vue';
+import { badgeVariants } from './badge.styles.js';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "vif-badge__dot",
+  "aria-hidden": "true"
+};
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "badge",
+  props: {
+    variant: { type: String, required: false, default: "solid" },
+    color: { type: String, required: false, default: "brand" },
+    size: { type: String, required: false, default: "sm" },
+    rounded: { type: Boolean, required: false, default: false },
+    dot: { type: Boolean, required: false, default: false },
+    removable: { type: Boolean, required: false, default: false },
+    class: { type: String, required: false },
+    startIcon: { type: null, required: false },
+    endIcon: { type: null, required: false }
+  },
+  emits: ["remove"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const classes = computed(
+      () => badgeVariants({
+        variant: props.variant,
+        color: props.color,
+        size: props.size,
+        rounded: props.rounded,
+        dot: props.dot,
+        class: props.class
+      })
+    );
+    const showDot = computed(() => {
+      return props.dot && !props.startIcon && !props.endIcon;
+    });
+    const handleRemove = () => {
+      emit("remove");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "span",
+        {
+          class: normalizeClass(classes.value)
+        },
+        [
+          showDot.value ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("v-if", true),
+          __props.startIcon && __props.startIcon ? (openBlock(), createBlock(resolveDynamicComponent(__props.startIcon), {
+            key: 1,
+            class: "vif-badge__icon",
+            "aria-hidden": "true"
+          })) : createCommentVNode("v-if", true),
+          renderSlot(_ctx.$slots, "default"),
+          __props.endIcon ? (openBlock(), createBlock(resolveDynamicComponent(__props.endIcon), {
+            key: 2,
+            class: "vif-badge__icon",
+            "aria-hidden": "true"
+          })) : createCommentVNode("v-if", true),
+          __props.removable ? (openBlock(), createElementBlock("button", {
+            key: 3,
+            type: "button",
+            class: "vif-badge__close",
+            "aria-label": "Remove",
+            onClick: handleRemove
+          }, [
+            createVNode(unref(Icon), { icon: "lucide:x" })
+          ])) : createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/badge/badge.vue2.js

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

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

@@ -0,0 +1,3 @@
+export { default as Badge } from './badge.vue';
+export { badgeVariants, type BadgeVariantProps } from './badge.styles';
+export type { BadgeProps } from './badge.vue';

package/dist/components/badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.vue.js';
+export { badgeVariants } from './badge.styles.js';

package/dist/components/breadcrumb/breadcrumb-current-link.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Props for the VifUI BreadcrumbCurrentLink component.
+ * Represents the current page/item in the breadcrumb and renders
+ * a `<span aria-current="page">` for accessibility.
+ */
+export interface BreadcrumbCurrentLinkProps {
+    /**
+     * Custom class names for the current breadcrumb item.
+     * Applied to the `<span aria-current="page">` element.
+     *
+     * @example
+     * ```vue
+     * <BreadcrumbCurrentLink class="text-gray-900" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<BreadcrumbCurrentLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbCurrentLinkProps> & 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/breadcrumb/breadcrumb-current-link.vue.js

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

package/dist/components/breadcrumb/breadcrumb-current-link.vue2.js

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

package/dist/components/breadcrumb/breadcrumb-item.vue.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Props for the VifUI BreadcrumbItem component.
+ * Represents a single `<li>` wrapper for breadcrumb content.
+ */
+export interface BreadcrumbItemProps {
+    /**
+     * Custom class names for the breadcrumb item wrapper.
+     * Applied to the `<li>` element.
+     *
+     * @example
+     * ```vue
+     * <BreadcrumbItem class="font-medium" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<BreadcrumbItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbItemProps> & 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/breadcrumb/breadcrumb-item.vue.js

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

package/dist/components/breadcrumb/breadcrumb-item.vue2.js

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

package/dist/components/breadcrumb/breadcrumb-link.vue.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Props for the VifUI BreadcrumbLink component.
+ * Renders an interactive breadcrumb link (`<a>`) when `href` is provided,
+ * otherwise renders a non-interactive `<span>`.
+ */
+export interface BreadcrumbLinkProps {
+    /**
+     * The URL target for the breadcrumb link.
+     * When provided, the component renders an `<a>` tag.
+     * When omitted, it renders a non-interactive `<span>`.
+     *
+     * @example
+     * ```vue
+     * <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
+     * ```
+     */
+    href?: string;
+    /**
+     * Disables the breadcrumb link.
+     * Applies `aria-disabled="true"` and prevents interaction.
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <BreadcrumbLink disabled>Billing</BreadcrumbLink>
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Custom class names for the breadcrumb link.
+     * Applied directly to the rendered component (`<a>` or `<span>`).
+     *
+     * @example
+     * ```vue
+     * <BreadcrumbLink class="text-brand-600" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<BreadcrumbLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbLinkProps> & Readonly<{}>, {
+    disabled: 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/breadcrumb/breadcrumb-link.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent, inject, computed, createBlock, openBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "breadcrumb-link",
+  props: {
+    href: { type: String, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    class: { type: String, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("breadcrumbSlots", null);
+    const componentTag = computed(() => props.href ? "a" : "span");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(componentTag.value), {
+        href: __props.href,
+        class: normalizeClass([unref(slots)?.link?.(), props.class]),
+        "aria-disabled": __props.disabled || void 0
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["href", "class", "aria-disabled"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/breadcrumb/breadcrumb-link.vue2.js

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

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

@@ -0,0 +1,28 @@
+/**
+ * Props for the VifUI BreadcrumbList component.
+ * Represents the `<ol>` container that holds breadcrumb items.
+ */
+export interface BreadcrumbListProps {
+    /**
+     * Custom class names for styling or extending the breadcrumb list.
+     * Applied directly to the `<ol>` element.
+     *
+     * @example
+     * ```vue
+     * <BreadcrumbList class="gap-3" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<BreadcrumbListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbListProps> & 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/breadcrumb/breadcrumb-list.vue.js

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

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

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