@vifui/core 0.4.0-alpha.6

package/README.md

@@ -0,0 +1,204 @@
+# @vifui/core
+
+> 🚀 Beautiful and modern Vue UI library built with Tailwind CSS 4.0, inspired by Vuesax.
+
+[![npm version](https://img.shields.io/npm/v/@vifui/core.svg)](https://www.npmjs.com/package/@vifui/core)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## ⚠️ Alpha Notice
+
+This library is in active development and currently in alpha stage. APIs may change between releases.
+
+## Features
+
+✨ **10+ High-Quality Components** - Built with Vue 3 Composition API  
+🎨 **Vuesax-Inspired Design** - Beautiful, modern aesthetic  
+⚡ **Tailwind CSS 4.0** - Utility-first styling with CSS variables  
+♿ **Accessible** - Built on Reka UI primitives (Radix Vue)  
+🎯 **TypeScript** - Full type safety  
+🌙 **Dark Mode** - Built-in theme support  
+📦 **Tree-shakeable** - Import only what you need
+
+## Installation
+
+```bash
+# npm
+npm install @vifui/core @vifui/styles
+
+# pnpm
+pnpm add @vifui/core @vifui/styles
+
+# yarn
+yarn add @vifui/core @vifui/styles
+```
+
+### Peer Dependencies
+
+Make sure you have these installed:
+
+```bash
+npm install vue@^3.4.0 tailwindcss@^4.0.0 @iconify/vue@^4.0.0
+```
+
+## Quick Start
+
+### 1. Import Styles
+
+In your `main.js` or `App.vue`:
+
+```js
+import '@vifui/core/styles'
+```
+
+### 2. Use Components
+
+```vue
+<script setup>
+import { Button, Badge, Card } from '@vifui/core'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <h3>Welcome to VifUI</h3>
+    </CardHeader>
+    <CardBody>
+      <p>Beautiful components for Vue 3</p>
+      <Badge color="success">New</Badge>
+    </CardBody>
+    <CardFooter>
+      <Button color="brand">Get Started</Button>
+    </CardFooter>
+  </Card>
+</template>
+```
+
+## Available Components
+
+### ✅ Ready to Use
+
+- **Button** - Versatile button with variants, sizes, and colors
+- **Badge** - Status indicators and labels
+- **Accordion** - Collapsible content panels
+- **Alert** - Contextual feedback messages
+- **Avatar** - User profile images with fallbacks
+- **Breadcrumb** - Navigation hierarchy
+- **Card** - Content containers with media support
+- **Checkbox** - Selection controls with indeterminate state
+- **Divider** - Visual content separators
+- **Spinner** - Loading indicators
+
+### 🚧 Coming Soon
+
+- Radio
+- Switch
+- Input
+- Select
+- Dialog
+- Dropdown
+- Tabs
+- Tooltip
+- And more...
+
+## Component Example
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import {
+  AlertRoot,
+  AlertIcon,
+  AlertContent,
+  AlertHeader,
+  AlertTitle,
+  AlertDescription,
+  Button
+} from '@vifui/core'
+
+const showAlert = ref(true)
+</script>
+
+<template>
+  <AlertRoot
+    v-model:visible="showAlert"
+    variant="soft"
+    color="success"
+  >
+    <AlertIcon icon="lucide:check-circle" />
+    <AlertContent>
+      <AlertHeader>
+        <AlertTitle>Success!</AlertTitle>
+        <AlertDescription>
+          Your changes have been saved.
+        </AlertDescription>
+      </AlertHeader>
+    </AlertContent>
+  </AlertRoot>
+</template>
+```
+
+## Theming
+
+VifUI uses Tailwind CSS 4.0 with CSS variables for theming:
+
+```css
+/* Customize theme colors */
+:root {
+  --primary: oklch(0.61 0.2 263.6);
+  --success: oklch(0.77 0.2 145.5);
+  --warning: oklch(0.82 0.18 83.7);
+  --danger: oklch(0.62 0.22 10);
+}
+```
+
+Dark mode is automatically supported through Tailwind's `dark:` variants.
+
+## Documentation
+
+Full documentation coming soon at **vifui.com**
+
+For now, explore our [Storybook examples](https://github.com/I-am-abdulazeez/vifui) in the repository.
+
+## TypeScript Support
+
+All components are built with TypeScript and include full type definitions:
+
+```typescript
+import type { ButtonProps, CardRootProps } from '@vifui/core'
+
+const buttonProps: ButtonProps = {
+  color: 'brand',
+  size: 'lg',
+  variant: 'solid'
+}
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+Contributions are welcome! This is an alpha project and we'd love your feedback.
+
+1. Fork the repository
+2. Create your feature branch
+3. Make your changes
+4. Submit a pull request
+
+## License
+
+MIT © [AbdulAzeez Olamide](https://github.com/I-am-abdulazeez)
+
+## Acknowledgments
+
+- Inspired by [Vuesax](https://vuesax.com/)
+- Built with [Reka UI](https://reka-ui.com/) (Radix Vue)
+- Styled with [Tailwind CSS](https://tailwindcss.com/)
+
+---
+
+Made with ❤️ by the VifUI team

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

@@ -0,0 +1,29 @@
+/**
+ * Props for the VifUI AccordionBody component.
+ * Serves as a wrapper for the main content inside an accordion item.
+ * Can be used to structure content within `AccordionContent`.
+ */
+export interface AccordionBodyProps {
+    /**
+     * Custom class names for the body wrapper.
+     * Applied directly to the outer `<div>` element.
+     *
+     * @example
+     * ```vue
+     * <AccordionBody 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<AccordionBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionBodyProps> & 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/accordion/accordion-body.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent, inject, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "accordion-body",
+  props: {
+    class: { type: String, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("accordionSlots", 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/accordion/accordion-body.vue2.js

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

package/dist/components/accordion/accordion-content.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Props for the VifUI AccordionContent component.
+ * Represents the collapsible content section of an accordion item.
+ * Typically paired with `AccordionTrigger` inside an `AccordionItem`.
+ */
+export interface AccordionContentProps {
+    /**
+     * Custom class names for the content wrapper.
+     * Applied directly to the `<RekaAccordionContent>` element.
+     *
+     * @example
+     * ```vue
+     * <AccordionContent class="p-4 bg-gray-50" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<AccordionContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionContentProps> & 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/accordion/accordion-content.vue.js

@@ -0,0 +1,26 @@
+import { defineComponent, inject, createBlock, openBlock, unref, normalizeClass, withCtx, renderSlot } from 'vue';
+import { AccordionContent } from 'reka-ui';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "accordion-content",
+  props: {
+    class: { type: String, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("accordionSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(AccordionContent), {
+        class: normalizeClass([unref(slots)?.content?.(), props.class])
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/accordion/accordion-content.vue2.js

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

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

@@ -0,0 +1,30 @@
+import { type AccordionHeaderProps as RekaAccordionHeaderProps } from "reka-ui";
+/**
+ * Props for the VifUI AccordionHeader component.
+ * Serves as the wrapper for the accordion trigger and title,
+ * and extends the base Reka UI `AccordionHeaderProps`.
+ */
+export interface AccordionHeaderProps extends RekaAccordionHeaderProps {
+    /**
+     * Custom class names for the header wrapper.
+     * Applied directly to the `<RekaAccordionHeader>` element.
+     *
+     * @example
+     * ```vue
+     * <AccordionHeader class="bg-gray-50 px-4 py-2" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<AccordionHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionHeaderProps> & 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/accordion/accordion-header.vue.js

@@ -0,0 +1,28 @@
+import { defineComponent, inject, createBlock, openBlock, unref, normalizeClass, withCtx, renderSlot } from 'vue';
+import { AccordionHeader } from 'reka-ui';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "accordion-header",
+  props: {
+    class: { type: String, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("accordionSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(AccordionHeader), {
+        class: normalizeClass([unref(slots)?.header?.(), props.class])
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

package/dist/components/accordion/accordion-indicator.vue.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Props for the VifUI AccordionIndicator component.
+ * Renders the visual indicator (typically a chevron) for
+ * accordion items, showing their expanded/collapsed state.
+ */
+export interface AccordionIndicatorProps {
+    /**
+     * Custom icon to use instead of the default chevron.
+     * Accepts any Iconify icon name.
+     *
+     * @default "lucide:chevron-down"
+     * @example
+     * ```vue
+     * <AccordionIndicator icon="mdi:arrow-up-bold" />
+     * ```
+     */
+    icon?: string;
+    /**
+     * Custom class names for the indicator icon.
+     * Applied directly to the `<Icon>` component.
+     *
+     * @example
+     * ```vue
+     * <AccordionIndicator class="text-primary-600" />
+     * ```
+     */
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<AccordionIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionIndicatorProps> & Readonly<{}>, {
+    icon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/accordion/accordion-indicator.vue.js

@@ -0,0 +1,22 @@
+import { defineComponent, inject, createBlock, openBlock, unref, normalizeClass } from 'vue';
+import { Icon } from '@iconify/vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "accordion-indicator",
+  props: {
+    icon: { type: String, required: false, default: "lucide:chevron-down" },
+    class: { type: String, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("accordionSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Icon), {
+        icon: __props.icon,
+        class: normalizeClass([unref(slots)?.icon?.(), props.class])
+      }, null, 8, ["icon", "class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/accordion/accordion-indicator.vue2.js

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

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

@@ -0,0 +1,54 @@
+/**
+ * Props for the VifUI AccordionItem component.
+ * Represents a single accordion section that can expand or collapse,
+ * controlled by its associated trigger and content components.
+ */
+export interface AccordionItemProps {
+    /**
+     * A unique identifier for the accordion item.
+     * Used to control expansion state in both controlled
+     * and uncontrolled accordion modes.
+     *
+     * @required
+     * @example
+     * ```vue
+     * <AccordionItem value="account-settings" />
+     * ```
+     */
+    value: string;
+    /**
+     * Disables this specific accordion item.
+     * Prevents interaction and disables its trigger.
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <AccordionItem value="billing" disabled />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Custom class names for the accordion item wrapper.
+     * Applied directly to the `<RekaAccordionItem>` element.
+     *
+     * @example
+     * ```vue
+     * <AccordionItem class="border-b" />
+     * ```
+     */
+    class?: string;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<AccordionItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionItemProps> & 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/accordion/accordion-item.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent, inject, createBlock, openBlock, unref, normalizeClass, withCtx, renderSlot } from 'vue';
+import { AccordionItem } from 'reka-ui';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "accordion-item",
+  props: {
+    value: { type: String, required: true },
+    disabled: { type: Boolean, required: false, default: false },
+    class: { type: String, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("accordionSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(AccordionItem), {
+        value: __props.value,
+        disabled: __props.disabled,
+        class: normalizeClass([unref(slots)?.item?.(), props.class])
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["value", "disabled", "class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

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

@@ -0,0 +1,94 @@
+import type { AccordionVariantProps } from "./accordion.styles";
+/**
+ * Props for the VifUI AccordionRoot component.
+ * Serves as the main container that manages accordion behavior,
+ * state, orientation, and overall styling.
+ */
+export interface AccordionRootProps {
+    /**
+     * Defines the visual style of the accordion.
+     * Maps to style variants from `accordion.styles`.
+     *
+     * @default "default"
+     */
+    variant?: AccordionVariantProps["variant"];
+    /**
+     * Controls the overall accordion size.
+     * Determines paddings, icon sizes, and text sizing.
+     *
+     * @default "md"
+     */
+    size?: AccordionVariantProps["size"];
+    /**
+     * Controls the expanded accordion item(s) in controlled usage.
+     * Accepts a single string for `"single"` mode, or an array for `"multiple"` mode.
+     */
+    modelValue?: string | string[];
+    /**
+     * Default expanded item(s) for uncontrolled usage.
+     * Ignored when `modelValue` is provided.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Determines accordion expansion behavior.
+     * `"single"` allows only one item open — `"multiple"` allows many.
+     *
+     * @default "single"
+     */
+    type?: "single" | "multiple";
+    /**
+     * When using `"single"` mode, allows closing the currently open item.
+     *
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * Disables the entire accordion.
+     * Prevents expanding or collapsing items.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom class names for extending or overriding styles.
+     * Applied directly to the accordion root element.
+     */
+    class?: string;
+    /**
+     * Orientation of the accordion layout.
+     * `"vertical"` stacks items top-to-bottom — `"horizontal"` arranges them side-by-side.
+     *
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Document direction, useful for RTL layouts.
+     *
+     * @default "ltr"
+     */
+    dir?: "ltr" | "rtl";
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<AccordionRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<AccordionRootProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    variant: "shadow" | "default" | "flat" | "bordered";
+    type: "single" | "multiple";
+    disabled: boolean;
+    collapsible: boolean;
+    orientation: "vertical" | "horizontal";
+    dir: "ltr" | "rtl";
+}, {}, {}, {}, 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;
+    };
+};