@vifui/core 0.4.0-alpha.6

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

@@ -0,0 +1,89 @@
+import type { Colors, Sizes } from "../types/shared-types";
+/**
+ * Props for the VifUI Divider component.
+ * Provides configuration for orientation, variant, size, color, and label.
+ */
+export interface DividerProps {
+    /**
+     * Defines the orientation of the divider.
+     *
+     * @type {"horizontal" | "vertical"}
+     * @default "horizontal"
+     * @example
+     * ```vue
+     * <Divider orientation="vertical" />
+     * ```
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Defines the visual style of the divider.
+     *
+     * @type {"solid" | "dashed" | "dotted"}
+     * @default "solid"
+     * @example
+     * ```vue
+     * <Divider variant="dashed" />
+     * ```
+     */
+    variant?: "solid" | "dashed" | "dotted";
+    /**
+     * Controls the thickness of the divider.
+     *
+     * @type {"xs" | "sm" | "md" | "lg"}
+     * @default "sm"
+     * @example
+     * ```vue
+     * <Divider size="lg" />
+     * ```
+     */
+    size?: Exclude<Sizes, "xl">;
+    /**
+     * Defines the divider color scheme.
+     *
+     * @type {"neutral" | "brand" | "success" | "warning" | "danger"}
+     * @default "neutral"
+     * @example
+     * ```vue
+     * <Divider color="brand" />
+     * ```
+     */
+    color?: Colors;
+    /**
+     * Position of the label/content.
+     *
+     * @type {"start" | "center" | "end"}
+     * @default "center"
+     * @example
+     * ```vue
+     * <Divider label-position="start">Label</Divider>
+     * ```
+     */
+    labelPosition?: "start" | "center" | "end";
+    /**
+     * Custom class names for extending or overriding styles.
+     *
+     * @example
+     * ```vue
+     * <Divider class="my-8" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<DividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DividerProps> & Readonly<{}>, {
+    size: Exclude<Sizes, "xl">;
+    variant: "solid" | "dashed" | "dotted";
+    color: Colors;
+    orientation: "horizontal" | "vertical";
+    labelPosition: "start" | "center" | "end";
+}, {}, {}, {}, 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/divider/divider.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent, useSlots, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, renderSlot } from 'vue';
+import { dividerVariants } from './divider.styles.js';
+
+const _hoisted_1 = ["aria-orientation", "aria-label"];
+const _hoisted_2 = {
+  key: 0,
+  class: "vif-divider__label"
+};
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "divider",
+  props: {
+    orientation: { type: String, required: false, default: "horizontal" },
+    variant: { type: String, required: false, default: "solid" },
+    size: { type: String, required: false, default: "sm" },
+    color: { type: String, required: false, default: "neutral" },
+    labelPosition: { type: String, required: false, default: "center" },
+    class: { type: String, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const hasLabel = computed(() => !!slots["default"]);
+    const classes = computed(
+      () => dividerVariants({
+        orientation: props.orientation,
+        variant: props.variant,
+        size: props.size,
+        color: props.color,
+        labelPosition: hasLabel.value ? props.labelPosition : void 0,
+        class: props.class
+      })
+    );
+    const ariaOrientation = computed(
+      () => props.orientation === "vertical" ? "vertical" : "horizontal"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(classes.value),
+        role: "separator",
+        "aria-orientation": ariaOrientation.value,
+        "aria-label": hasLabel.value ? void 0 : "Divider"
+      }, [
+        hasLabel.value ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default")
+        ])) : createCommentVNode("v-if", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/divider/divider.vue2.js

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

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

@@ -0,0 +1,3 @@
+export { default as Divider } from './divider.vue';
+export { dividerVariants, type DividerVariantProps } from './divider.styles';
+export type { DividerProps } from './divider.vue';

package/dist/components/divider/index.js

@@ -0,0 +1,2 @@
+export { default as Divider } from './divider.vue.js';
+export { dividerVariants } from './divider.styles.js';

package/dist/components/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./avatar";
+export * from "./accordion";
+export * from "./badge";
+export * from "./breadcrumb";
+export * from "./button";
+export * from "./card";
+export * from "./checkbox";
+export * from "./divider";
+export * from "./spinner";
+export * from "./alert";

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

@@ -0,0 +1,3 @@
+export { default as Spinner } from './spinner.vue';
+export { spinnerVariants, type SpinnerVariantProps } from './spinner.styles';
+export type { SpinnerProps } from './spinner.vue';

package/dist/components/spinner/index.js

@@ -0,0 +1,2 @@
+export { default as Spinner } from './spinner.vue.js';
+export { spinnerVariants } from './spinner.styles.js';

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

@@ -0,0 +1,112 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * Spinner component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ * Inspired by Vuesax's loading architecture
+ * Supports all 11 spinner types from original Vuesax
+ */
+export declare const spinnerVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    color: {
+        current: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        white: string;
+    };
+    type: {
+        default: string;
+        border: string;
+        point: string;
+        points: string;
+        radius: string;
+        corners: string;
+        sound: string;
+        scale: string;
+        waves: string;
+        square: string;
+        gradient: string;
+        rectangle: string;
+        circles: string;
+        "square-rotate": string;
+        material: string;
+    };
+}, undefined, "vif-spinner", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    color: {
+        current: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        white: string;
+    };
+    type: {
+        default: string;
+        border: string;
+        point: string;
+        points: string;
+        radius: string;
+        corners: string;
+        sound: string;
+        scale: string;
+        waves: string;
+        square: string;
+        gradient: string;
+        rectangle: string;
+        circles: string;
+        "square-rotate": string;
+        material: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    color: {
+        current: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        white: string;
+    };
+    type: {
+        default: string;
+        border: string;
+        point: string;
+        points: string;
+        radius: string;
+        corners: string;
+        sound: string;
+        scale: string;
+        waves: string;
+        square: string;
+        gradient: string;
+        rectangle: string;
+        circles: string;
+        "square-rotate": string;
+        material: string;
+    };
+}, undefined, "vif-spinner", unknown, unknown, undefined>>;
+export type SpinnerVariantProps = VariantProps<typeof spinnerVariants>;

package/dist/components/spinner/spinner.styles.js

@@ -0,0 +1,47 @@
+import { tv } from 'tailwind-variants';
+
+const spinnerVariants = tv({
+  base: "vif-spinner",
+  variants: {
+    size: {
+      xs: "vif-spinner--xs",
+      sm: "vif-spinner--xs",
+      md: "vif-spinner--sm",
+      lg: "vif-spinner--md",
+      xl: "vif-spinner--md"
+    },
+    color: {
+      current: "vif-spinner--current",
+      primary: "vif-spinner--primary",
+      secondary: "vif-spinner--secondary",
+      success: "vif-spinner--success",
+      warning: "vif-spinner--warning",
+      danger: "vif-spinner--danger",
+      white: "vif-spinner--white"
+    },
+    type: {
+      default: "vif-spinner--default",
+      border: "vif-spinner--border",
+      point: "vif-spinner--point",
+      points: "vif-spinner--points",
+      radius: "vif-spinner--radius",
+      corners: "vif-spinner--corners",
+      sound: "vif-spinner--sound",
+      scale: "vif-spinner--scale",
+      waves: "vif-spinner--waves",
+      square: "vif-spinner--square",
+      gradient: "vif-spinner--gradient",
+      rectangle: "vif-spinner--rectangle",
+      circles: "vif-spinner--circles",
+      "square-rotate": "vif-spinner--square-rotate",
+      material: "vif-spinner--material"
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    color: "primary",
+    type: "default"
+  }
+});
+
+export { spinnerVariants };

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

@@ -0,0 +1,31 @@
+import type { Sizes } from "../types/shared-types";
+export interface SpinnerProps {
+    /**
+     * Spinner size
+     */
+    size?: Sizes;
+    /**
+     * Spinner color
+     */
+    color?: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "white";
+    /**
+     * Spinner animation type (Vuesax-inspired)
+     * All 11 types from original Vuesax
+     */
+    type?: "default" | "border" | "point" | "points" | "radius" | "corners" | "sound" | "scale" | "waves" | "square" | "gradient" | "rectangle" | "circles" | "square-rotate" | "material";
+    /**
+     * Custom CSS class
+     */
+    class?: string;
+    /**
+     * Accessible label for screen readers
+     */
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<SpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpinnerProps> & Readonly<{}>, {
+    size: Sizes;
+    color: "current" | "primary" | "secondary" | "success" | "warning" | "danger" | "white";
+    type: "default" | "border" | "point" | "points" | "radius" | "corners" | "sound" | "scale" | "waves" | "square" | "gradient" | "rectangle" | "circles" | "square-rotate" | "material";
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/spinner/spinner.vue.js

@@ -0,0 +1,102 @@
+import { defineComponent, computed, createElementBlock, openBlock, Fragment, createCommentVNode, normalizeClass, createElementVNode } from 'vue';
+import { spinnerVariants } from './spinner.styles.js';
+
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = ["aria-label"];
+const _hoisted_3 = {
+  key: 0,
+  class: "vif-spinner__effect vif-spinner__effect-2"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "vif-spinner__effect vif-spinner__effect-3"
+};
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "spinner",
+  props: {
+    size: { type: String, required: false, default: "md" },
+    color: { type: String, required: false, default: "primary" },
+    type: { type: String, required: false, default: "default" },
+    class: { type: String, required: false },
+    label: { type: String, required: false, default: "Loading..." }
+  },
+  setup(__props) {
+    const props = __props;
+    const classes = computed(
+      () => spinnerVariants({
+        size: props.size,
+        color: props.color,
+        type: props.type,
+        class: props.class
+      })
+    );
+    const singleEffectTypes = ["corners", "gradient", "square-rotate"];
+    const doubleEffectTypes = ["square"];
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createCommentVNode(" Material type uses SVG "),
+          __props.type === "material" ? (openBlock(), createElementBlock("svg", {
+            key: 0,
+            class: normalizeClass(classes.value),
+            viewBox: "0 0 50 50",
+            "aria-label": __props.label,
+            role: "status"
+          }, [..._cache[0] || (_cache[0] = [
+            createElementVNode(
+              "circle",
+              {
+                class: "vif-spinner__track",
+                cx: "25",
+                cy: "25",
+                r: "20",
+                fill: "none",
+                "stroke-width": "5"
+              },
+              null,
+              -1
+              /* CACHED */
+            ),
+            createElementVNode(
+              "circle",
+              {
+                class: "vif-spinner__path",
+                cx: "25",
+                cy: "25",
+                r: "20",
+                fill: "none",
+                "stroke-width": "5",
+                "stroke-dasharray": "1, 150",
+                "stroke-dashoffset": "0"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])], 10, _hoisted_1)) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(classes.value),
+            "aria-label": __props.label,
+            role: "status"
+          }, [
+            _cache[1] || (_cache[1] = createElementVNode(
+              "div",
+              { class: "vif-spinner__effect vif-spinner__effect-1" },
+              null,
+              -1
+              /* CACHED */
+            )),
+            !singleEffectTypes.includes(__props.type) ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("v-if", true),
+            !singleEffectTypes.includes(__props.type) && !doubleEffectTypes.includes(__props.type) ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("v-if", true)
+          ], 10, _hoisted_2))
+        ],
+        2112
+        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/spinner/spinner.vue2.js

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

package/dist/components/types/shared-types.d.ts

@@ -0,0 +1,4 @@
+export type Sizes = "xs" | "sm" | "md" | "lg" | "xl";
+export type Variants = "primary" | "secondary" | "soft" | "ghost" | "outline" | "danger" | "shadow";
+export type Spinners = "default" | "border" | "point" | "points" | "radius" | "corners" | "sound" | "scale" | "waves" | "square" | "gradient" | "rectangle" | "circles" | "square-rotate" | "material";
+export type Colors = "neutral" | "brand" | "success" | "warning" | "danger";

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export declare const version = "__VIFUI_VERSION__";

package/dist/index.js

@@ -0,0 +1,54 @@
+export { default as AvatarRoot } from './components/avatar/avatar-root.vue.js';
+export { default as AvatarImage } from './components/avatar/avatar-image.vue.js';
+export { default as AvatarFallback } from './components/avatar/avatar-fallback.vue.js';
+export { default as AvatarGroup } from './components/avatar/avatar-group.vue.js';
+export { default as AccordionRoot } from './components/accordion/accordion-root.vue.js';
+export { default as AccordionItem } from './components/accordion/accordion-item.vue.js';
+export { default as AccordionHeader } from './components/accordion/accordion-header.vue.js';
+export { default as AccordionTrigger } from './components/accordion/accordion-trigger.vue.js';
+export { default as AccordionContent } from './components/accordion/accordion-content.vue.js';
+export { default as AccordionIndicator } from './components/accordion/accordion-indicator.vue.js';
+export { default as AccordionBody } from './components/accordion/accordion-body.vue.js';
+export { default as Badge } from './components/badge/badge.vue.js';
+export { default as BreadcrumbRoot } from './components/breadcrumb/breadcrumb-root.vue.js';
+export { default as BreadcrumbList } from './components/breadcrumb/breadcrumb-list.vue.js';
+export { default as BreadcrumbItem } from './components/breadcrumb/breadcrumb-item.vue.js';
+export { default as BreadcrumbLink } from './components/breadcrumb/breadcrumb-link.vue.js';
+export { default as BreadcrumbCurrentLink } from './components/breadcrumb/breadcrumb-current-link.vue.js';
+export { default as BreadcrumbSeparator } from './components/breadcrumb/breadcrumb-separator.vue.js';
+export { default as Button } from './components/button/button.vue.js';
+export { default as CardRoot } from './components/card/card-root.vue.js';
+export { default as CardHeader } from './components/card/card-header.vue.js';
+export { default as CardBody } from './components/card/card-body.vue.js';
+export { default as CardFooter } from './components/card/card-footer.vue.js';
+export { default as CardMedia } from './components/card/card-media.vue.js';
+export { default as CheckboxRoot } from './components/checkbox/checkbox-root.vue.js';
+export { default as CheckboxIndicator } from './components/checkbox/checkbox-indicator.vue.js';
+export { default as CheckboxLabel } from './components/checkbox/checkbox-label.vue.js';
+export { default as CheckboxGroup } from './components/checkbox/checkbox-group.vue.js';
+export { default as CheckboxGroupItem } from './components/checkbox/checkbox-group-item.vue.js';
+export { default as Divider } from './components/divider/divider.vue.js';
+export { default as Spinner } from './components/spinner/spinner.vue.js';
+export { default as AlertRoot } from './components/alert/alert-root.vue.js';
+export { default as AlertIcon } from './components/alert/alert-icon.vue.js';
+export { default as AlertContent } from './components/alert/alert-content.vue.js';
+export { default as AlertHeader } from './components/alert/alert-header.vue.js';
+export { default as AlertTitle } from './components/alert/alert-title.vue.js';
+export { default as AlertDescription } from './components/alert/alert-description.vue.js';
+export { default as AlertBody } from './components/alert/alert-body.vue.js';
+export { default as AlertFooter } from './components/alert/alert-footer.vue.js';
+export { default as AlertClose } from './components/alert/alert-close.vue.js';
+export { avatarVariants } from './components/avatar/avatar.styles.js';
+export { accordionVariants } from './components/accordion/accordion.styles.js';
+export { badgeVariants } from './components/badge/badge.styles.js';
+export { breadcrumbVariants } from './components/breadcrumb/breadcrumb.styles.js';
+export { buttonVariants } from './components/button/button.styles.js';
+export { cardVariants } from './components/card/card.styles.js';
+export { checkboxGroupVariants, checkboxVariants } from './components/checkbox/checkbox.styles.js';
+export { dividerVariants } from './components/divider/divider.styles.js';
+export { spinnerVariants } from './components/spinner/spinner.styles.js';
+export { alertVariants } from './components/alert/alert.styles.js';
+
+const version = "__VIFUI_VERSION__";
+
+export { version };

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@vifui/core",
+  "version": "0.4.0-alpha.6",
+  "description": "🚀 Beautiful and modern Vue UI library built with Tailwind CSS 4.0.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "author": "AbdulAzeez Olamide",
+  "homepage": "https://github.com/I-am-abdulazeez/vifui#readme",
+  "keywords": [
+    "vifui",
+    "vue",
+    "vue3",
+    "components",
+    "ui",
+    "tailwind",
+    "vuesax",
+    "design-system"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles": {
+      "default": "./dist/styles.css",
+      "style": "./dist/styles.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/I-am-abdulazeez/vifui.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/I-am-abdulazeez/vifui/issues"
+  },
+  "scripts": {
+    "dev": "rollup -c rollup.config.mjs --watch",
+    "build": "node scripts/build.mjs --tsc",
+    "build:fast": "node scripts/build.mjs",
+    "add:component": "node scripts/add-component.mjs",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build"
+  },
+  "dependencies": {
+    "@internationalized/date": "3.10.0",
+    "clsx": "2.1.1",
+    "reka-ui": "2.6.0",
+    "tailwind-merge": "3.3.1",
+    "tailwind-variants": "3.1.1"
+  },
+  "devDependencies": {
+    "@iconify/vue": "^4.1.2",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@vifui/tooling": "workspace:*",
+    "@vitejs/plugin-vue": "6.0.1",
+    "@vue/test-utils": "^2.4.6",
+    "fs-extra": "11.3.2",
+    "glob": "11.0.3",
+    "rollup": "^4.30.1",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwindcss": "4.1.13",
+    "vite": "^7.1.12",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0"
+  },
+  "peerDependencies": {
+    "@vifui/styles": "^0.4.0",
+    "vue": ">=3.4.0",
+    "tailwindcss": ">=4.0.0",
+    "@iconify/vue": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@iconify/vue": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}