@vifui/core 0.4.0-alpha.6

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

@@ -0,0 +1,78 @@
+import type { Colors, Sizes } from "../types/shared-types";
+/**
+ * Props for the VifUI Breadcrumb root component.
+ * Controls size, color, alignment, and style customization.
+ */
+export interface BreadcrumbRootProps {
+    /**
+     * Defines the overall sizing for breadcrumb text, spacing,
+     * and separator dimensions.
+     *
+     * Allowed values: `"sm" | "md" | "lg"`
+     *
+     * @default "md"
+     * @example
+     * ```vue
+     * <Breadcrumb size="lg">
+     *   <BreadcrumbItem>Home</BreadcrumbItem>
+     * </Breadcrumb>
+     * ```
+     */
+    size?: Exclude<Sizes, "xl" | "xs">;
+    /**
+     * Determines the color scheme applied to breadcrumb items
+     * and separators. Useful for matching the component to
+     * different themes or contexts.
+     *
+     * @default "neutral"
+     * @example
+     * ```vue
+     * <Breadcrumb color="brand">
+     *   <BreadcrumbItem>Dashboard</BreadcrumbItem>
+     * </Breadcrumb>
+     * ```
+     */
+    color?: Colors;
+    /**
+     * Controls horizontal alignment of the entire breadcrumb.
+     *
+     * - `left` — Standard left alignment.
+     * - `center` — Centers the breadcrumb within the container.
+     * - `right` — Right-aligns the breadcrumb.
+     *
+     * @default "left"
+     * @example
+     * ```vue
+     * <Breadcrumb align="center">
+     *   <BreadcrumbItem>Profile</BreadcrumbItem>
+     * </Breadcrumb>
+     * ```
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Custom utility classes for extending or overriding styles.
+     * Applied to the outer `<nav>` element.
+     *
+     * @example
+     * ```vue
+     * <Breadcrumb class="mb-4 text-sm" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<BreadcrumbRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbRootProps> & Readonly<{}>, {
+    size: Exclude<Sizes, "xl" | "xs">;
+    color: Colors;
+    align: "left" | "center" | "right";
+}, {}, {}, {}, 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-root.vue.js

@@ -0,0 +1,39 @@
+import { defineComponent, computed, provide, createElementBlock, openBlock, normalizeClass, renderSlot } from 'vue';
+import { breadcrumbVariants } from './breadcrumb.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "breadcrumb-root",
+  props: {
+    size: { type: String, required: false, default: "md" },
+    color: { type: String, required: false, default: "neutral" },
+    align: { type: String, required: false, default: "left" },
+    class: { type: String, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = computed(
+      () => breadcrumbVariants({
+        size: props.size,
+        color: props.color,
+        align: props.align
+      })
+    );
+    provide("breadcrumbSlots", slots);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "nav",
+        {
+          class: normalizeClass([slots.value.root(), props.class]),
+          "aria-label": "Breadcrumb"
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

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

@@ -0,0 +1,41 @@
+/**
+ * Props for the VifUI BreadcrumbSeparator component.
+ * Renders the visual separator between breadcrumb items, typically an icon.
+ */
+export interface BreadcrumbSeparatorProps {
+    /**
+     * Custom separator icon.
+     * Accepts any Iconify icon name.
+     *
+     * @default "lucide:chevron-right"
+     * @example
+     * ```vue
+     * <BreadcrumbSeparator icon="mdi:slash-forward" />
+     * ```
+     */
+    icon?: string;
+    /**
+     * Custom class names for the breadcrumb separator.
+     * Applied directly to the `<li>` wrapper.
+     *
+     * @example
+     * ```vue
+     * <BreadcrumbSeparator class="text-gray-400" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<BreadcrumbSeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbSeparatorProps> & Readonly<{}>, {
+    icon: string;
+}, {}, {}, {}, 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-separator.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent, inject, createElementBlock, openBlock, normalizeClass, unref, renderSlot, createVNode } from 'vue';
+import { Icon } from '@iconify/vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "breadcrumb-separator",
+  props: {
+    icon: { type: String, required: false, default: "lucide:chevron-right" },
+    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)?.separator?.(), props.class]),
+          "aria-hidden": "true"
+        },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createVNode(unref(Icon), { icon: __props.icon }, null, 8, ["icon"])
+          ])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

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

@@ -0,0 +1,144 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * Breadcrumb component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ * Inspired by Vuesax's breadcrumb architecture
+ */
+export declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {};
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        neutral: {
+            root: string;
+        };
+        brand: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+    };
+    align: {
+        left: {
+            root: string;
+        };
+        center: {
+            root: string;
+        };
+        right: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    currentLink: string;
+    separator: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {};
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        neutral: {
+            root: string;
+        };
+        brand: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+    };
+    align: {
+        left: {
+            root: string;
+        };
+        center: {
+            root: string;
+        };
+        right: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    currentLink: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {};
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        neutral: {
+            root: string;
+        };
+        brand: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+    };
+    align: {
+        left: {
+            root: string;
+        };
+        center: {
+            root: string;
+        };
+        right: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    currentLink: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BreadcrumbVariantProps = VariantProps<typeof breadcrumbVariants>;

package/dist/components/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1,58 @@
+import { tv } from 'tailwind-variants';
+
+const breadcrumbVariants = tv({
+  slots: {
+    root: "vif-breadcrumb",
+    list: "vif-breadcrumb__list",
+    item: "vif-breadcrumb__item",
+    link: "vif-breadcrumb__link",
+    currentLink: "vif-breadcrumb__current-link",
+    separator: "vif-breadcrumb__separator"
+  },
+  variants: {
+    size: {
+      sm: {
+        root: "vif-breadcrumb--sm"
+      },
+      md: {},
+      lg: {
+        root: "vif-breadcrumb--lg"
+      }
+    },
+    color: {
+      neutral: {
+        root: "vif-breadcrumb--neutral"
+      },
+      brand: {
+        root: "vif-breadcrumb--brand"
+      },
+      success: {
+        root: "vif-breadcrumb--success"
+      },
+      warning: {
+        root: "vif-breadcrumb--warning"
+      },
+      danger: {
+        root: "vif-breadcrumb--danger"
+      }
+    },
+    align: {
+      left: {
+        root: "vif-breadcrumb--left"
+      },
+      center: {
+        root: "vif-breadcrumb--center"
+      },
+      right: {
+        root: "vif-breadcrumb--right"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "neutral",
+    align: "left"
+  }
+});
+
+export { breadcrumbVariants };

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

@@ -0,0 +1,13 @@
+export { default as BreadcrumbRoot } from "./breadcrumb-root.vue";
+export { default as BreadcrumbList } from "./breadcrumb-list.vue";
+export { default as BreadcrumbItem } from "./breadcrumb-item.vue";
+export { default as BreadcrumbLink } from "./breadcrumb-link.vue";
+export { default as BreadcrumbCurrentLink } from "./breadcrumb-current-link.vue";
+export { default as BreadcrumbSeparator } from "./breadcrumb-separator.vue";
+export { breadcrumbVariants, type BreadcrumbVariantProps } from "./breadcrumb.styles";
+export type { BreadcrumbRootProps } from "./breadcrumb-root.vue";
+export type { BreadcrumbListProps } from "./breadcrumb-list.vue";
+export type { BreadcrumbItemProps } from "./breadcrumb-item.vue";
+export type { BreadcrumbLinkProps } from "./breadcrumb-link.vue";
+export type { BreadcrumbCurrentLinkProps } from "./breadcrumb-current-link.vue";
+export type { BreadcrumbSeparatorProps } from "./breadcrumb-separator.vue";

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,7 @@
+export { default as BreadcrumbRoot } from './breadcrumb-root.vue.js';
+export { default as BreadcrumbList } from './breadcrumb-list.vue.js';
+export { default as BreadcrumbItem } from './breadcrumb-item.vue.js';
+export { default as BreadcrumbLink } from './breadcrumb-link.vue.js';
+export { default as BreadcrumbCurrentLink } from './breadcrumb-current-link.vue.js';
+export { default as BreadcrumbSeparator } from './breadcrumb-separator.vue.js';
+export { breadcrumbVariants } from './breadcrumb.styles.js';

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

@@ -0,0 +1,90 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * Button component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ * Inspired by Vuesax's button architecture
+ */
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        soft: string;
+        ghost: string;
+        outline: string;
+        shadow: string;
+        danger: string;
+    };
+    color: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    isIconOnly: {
+        true: string;
+    };
+}, undefined, "vif-button", {
+    variant: {
+        primary: string;
+        secondary: string;
+        soft: string;
+        ghost: string;
+        outline: string;
+        shadow: string;
+        danger: string;
+    };
+    color: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    isIconOnly: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        soft: string;
+        ghost: string;
+        outline: string;
+        shadow: string;
+        danger: string;
+    };
+    color: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    isIconOnly: {
+        true: string;
+    };
+}, undefined, "vif-button", unknown, unknown, undefined>>;
+export type ButtonVariantProps = VariantProps<typeof buttonVariants>;

package/dist/components/button/button.styles.js

@@ -0,0 +1,41 @@
+import { tv } from 'tailwind-variants';
+
+const buttonVariants = tv({
+  base: "vif-button",
+  variants: {
+    variant: {
+      primary: "vif-button--primary",
+      secondary: "vif-button--secondary",
+      soft: "vif-button--soft",
+      ghost: "vif-button--ghost",
+      outline: "vif-button--outline",
+      shadow: "vif-button--shadow",
+      danger: "vif-button--danger"
+    },
+    color: {
+      neutral: "vif-button--neutral",
+      brand: "vif-button--brand",
+      success: "vif-button--success",
+      warning: "vif-button--warning",
+      danger: "vif-button--danger"
+    },
+    size: {
+      xs: "vif-button--xs",
+      sm: "vif-button--sm",
+      md: "",
+      lg: "vif-button--lg",
+      xl: "vif-button--xl"
+    },
+    isIconOnly: {
+      true: "vif-button--icon-only"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    color: "brand",
+    size: "md",
+    isIconOnly: false
+  }
+});
+
+export { buttonVariants };