@vifui/core 0.4.0-alpha.6

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

@@ -0,0 +1,128 @@
+import type { Colors, Sizes } from "../types/shared-types";
+/**
+ * Props for the VifUI Card component.
+ * Controls appearance, behavior, interactivity, and layout.
+ */
+export interface CardRootProps {
+    /**
+     * Determines the visual style of the card.
+     *
+     * - `elevated` — Raised surface with shadow.
+     * - `outlined` — Minimal style with a border.
+     * - `flat` — No elevation or border.
+     * - `ghost` — Ultra-light, low-emphasis style.
+     *
+     * @default "elevated"
+     * @example
+     * ```vue
+     * <Card variant="outlined" />
+     * ```
+     */
+    variant?: "elevated" | "outlined" | "flat" | "ghost";
+    /**
+     * Defines the card color theme.
+     * Affects borders, shadows, and subtle accents.
+     *
+     * @type {Colors}
+     * @example
+     * ```vue
+     * <Card color="brand" />
+     * ```
+     */
+    color?: Colors;
+    /**
+     * Controls internal padding and card density.
+     *
+     * Allowed sizes: `"sm" | "md" | "lg"`
+     *
+     * @default "md"
+     * @example
+     * ```vue
+     * <Card size="lg" />
+     * ```
+     */
+    size?: Exclude<Sizes, "xs" | "xl">;
+    /**
+     * Enables hover-based visual feedback.
+     * Useful for interactive cards such as dashboards or menus.
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <Card hoverable />
+     * ```
+     */
+    hoverable?: boolean;
+    /**
+     * Makes the card stretch to fill the available vertical space.
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <Card full-height />
+     * ```
+     */
+    fullHeight?: boolean;
+    /**
+     * Disables interactions and applies a muted appearance.
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <Card disabled />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Shows a loading state and prevents interaction.
+     * Often used while content inside the card is still fetching/loading.
+     *
+     * @default false
+     * @example
+     * ```vue
+     * <Card loading />
+     * ```
+     */
+    loading?: boolean;
+    /**
+     * Custom utility classes for extending or overriding styles.
+     *
+     * @example
+     * ```vue
+     * <Card class="rounded-xl p-6" />
+     * ```
+     */
+    class?: string;
+    /**
+     * Make entire card clickable
+     */
+    href?: string;
+    /**
+     * Target for link
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CardRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<CardRootProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    size: Exclude<Sizes, "xs" | "xl">;
+    variant: "elevated" | "outlined" | "flat" | "ghost";
+    loading: boolean;
+    color: Colors;
+    disabled: boolean;
+    hoverable: boolean;
+    fullHeight: 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/card/card-root.vue.js

@@ -0,0 +1,58 @@
+import { defineComponent, computed, provide, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+import { cardVariants } from './card.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "card-root",
+  props: {
+    variant: { type: String, required: false, default: "elevated" },
+    color: { type: String, required: false, default: "neutral" },
+    size: { type: String, required: false, default: "md" },
+    hoverable: { type: Boolean, required: false, default: false },
+    fullHeight: { type: Boolean, required: false, default: false },
+    disabled: { type: Boolean, required: false, default: false },
+    loading: { type: Boolean, required: false, default: false },
+    class: { type: String, required: false },
+    href: { type: String, required: false },
+    target: { type: String, required: false }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = computed(
+      () => cardVariants({
+        variant: props.variant,
+        size: props.size,
+        color: props.color,
+        hoverable: props.hoverable,
+        fullHeight: props.fullHeight,
+        disabled: props.disabled,
+        loading: props.loading
+      })
+    );
+    provide("cardSlots", slots);
+    const componentTag = computed(() => props.href ? "a" : "div");
+    const handleClick = (event) => {
+      if (!props.disabled && !props.loading) {
+        emit("click", event);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(componentTag.value), {
+        class: normalizeClass([slots.value.root(), props.class]),
+        href: __props.href,
+        target: __props.href && __props.target,
+        "aria-disabled": __props.disabled || __props.loading || void 0,
+        onClick: handleClick
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["class", "href", "target", "aria-disabled"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

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

@@ -0,0 +1,216 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * Card component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ * Inspired by Vuesax's card architecture
+ */
+export declare const cardVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        elevated: {
+            root: string;
+        };
+        outlined: {
+            root: string;
+        };
+        flat: {
+            root: string;
+        };
+        ghost: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        neutral: {
+            root: string;
+        };
+        brand: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+    };
+    hoverable: {
+        true: {
+            root: string;
+        };
+    };
+    fullHeight: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+    loading: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    body: string;
+    footer: string;
+    media: string;
+}, undefined, {
+    variant: {
+        elevated: {
+            root: string;
+        };
+        outlined: {
+            root: string;
+        };
+        flat: {
+            root: string;
+        };
+        ghost: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        neutral: {
+            root: string;
+        };
+        brand: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+    };
+    hoverable: {
+        true: {
+            root: string;
+        };
+    };
+    fullHeight: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+    loading: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    body: string;
+    footer: string;
+    media: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        elevated: {
+            root: string;
+        };
+        outlined: {
+            root: string;
+        };
+        flat: {
+            root: string;
+        };
+        ghost: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        neutral: {
+            root: string;
+        };
+        brand: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+    };
+    hoverable: {
+        true: {
+            root: string;
+        };
+    };
+    fullHeight: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+    loading: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    body: string;
+    footer: string;
+    media: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CardVariantProps = VariantProps<typeof cardVariants>;

package/dist/components/card/card.styles.js

@@ -0,0 +1,86 @@
+import { tv } from 'tailwind-variants';
+
+const cardVariants = tv({
+  slots: {
+    root: "vif-card",
+    header: "vif-card__header",
+    body: "vif-card__body",
+    footer: "vif-card__footer",
+    media: "vif-card__media"
+  },
+  variants: {
+    variant: {
+      elevated: {
+        root: "vif-card--elevated"
+      },
+      outlined: {
+        root: "vif-card--outlined"
+      },
+      flat: {
+        root: "vif-card--flat"
+      },
+      ghost: {
+        root: "vif-card--ghost"
+      }
+    },
+    size: {
+      sm: {
+        root: "vif-card--sm"
+      },
+      md: {
+        root: "vif-card--md"
+      },
+      lg: {
+        root: "vif-card--lg"
+      }
+    },
+    color: {
+      neutral: {
+        root: "vif-card--neutral"
+      },
+      brand: {
+        root: "vif-card--brand"
+      },
+      success: {
+        root: "vif-card--success"
+      },
+      warning: {
+        root: "vif-card--warning"
+      },
+      danger: {
+        root: "vif-card--danger"
+      }
+    },
+    hoverable: {
+      true: {
+        root: "vif-card--hoverable"
+      }
+    },
+    fullHeight: {
+      true: {
+        root: "vif-card--full-height"
+      }
+    },
+    disabled: {
+      true: {
+        root: "vif-card--disabled"
+      }
+    },
+    loading: {
+      true: {
+        root: "vif-card--loading"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "elevated",
+    size: "md",
+    color: "neutral",
+    hoverable: false,
+    fullHeight: false,
+    disabled: false,
+    loading: false
+  }
+});
+
+export { cardVariants };

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

@@ -0,0 +1,11 @@
+export { default as CardRoot } from "./card-root.vue";
+export { default as CardHeader } from "./card-header.vue";
+export { default as CardBody } from "./card-body.vue";
+export { default as CardFooter } from "./card-footer.vue";
+export { default as CardMedia } from "./card-media.vue";
+export { cardVariants, type CardVariantProps } from "./card.styles";
+export type { CardRootProps } from "./card-root.vue";
+export type { CardHeaderProps } from "./card-header.vue";
+export type { CardBodyProps } from "./card-body.vue";
+export type { CardFooterProps } from "./card-footer.vue";
+export type { CardMediaProps } from "./card-media.vue";

package/dist/components/card/index.js

@@ -0,0 +1,6 @@
+export { default as CardRoot } from './card-root.vue.js';
+export { default as CardHeader } from './card-header.vue.js';
+export { default as CardBody } from './card-body.vue.js';
+export { default as CardFooter } from './card-footer.vue.js';
+export { default as CardMedia } from './card-media.vue.js';
+export { cardVariants } from './card.styles.js';

package/dist/components/checkbox/checkbox-group-item.vue.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Props for the VifUI CheckboxGroupItem component.
+ * Wrapper for individual checkbox items within a CheckboxGroup.
+ */
+export interface CheckboxGroupItemProps {
+    /**
+     * Custom class names for the item wrapper.
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CheckboxGroupItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckboxGroupItemProps> & 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/checkbox/checkbox-group-item.vue.js

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

package/dist/components/checkbox/checkbox-group-item.vue2.js

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

package/dist/components/checkbox/checkbox-group.vue.d.ts

@@ -0,0 +1,35 @@
+import { type CheckboxGroupRootProps as RekaCheckboxGroupRootProps } from "reka-ui";
+/**
+ * Props for the VifUI CheckboxGroup component.
+ * Wraps Reka UI's CheckboxGroupRoot for managing multiple checkboxes.
+ */
+export interface CheckboxGroupProps extends RekaCheckboxGroupRootProps {
+    /**
+     * The orientation of the checkbox group.
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Custom class names for the group wrapper.
+     */
+    class?: string;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CheckboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("reka-ui").AcceptableValue[]) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue[]) => any) | undefined;
+}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, 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/checkbox/checkbox-group.vue.js

@@ -0,0 +1,53 @@
+import { defineComponent, computed, provide, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { useForwardPropsEmits, CheckboxGroupRoot } from 'reka-ui';
+import { checkboxGroupVariants } from './checkbox.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "checkbox-group",
+  props: {
+    orientation: { type: String, required: false, default: "vertical" },
+    class: { type: String, required: false },
+    defaultValue: { type: Array, required: false },
+    modelValue: { type: Array, required: false },
+    rovingFocus: { type: Boolean, required: false },
+    disabled: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" },
+    asChild: { type: Boolean, required: false },
+    dir: { type: String, required: false },
+    loop: { type: Boolean, required: false },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegatedProps = computed(() => {
+      const { class: _, ...delegated } = props;
+      return delegated;
+    });
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const slots = computed(
+      () => checkboxGroupVariants({
+        orientation: props.orientation
+      })
+    );
+    provide(
+      "checkboxGroupSlots",
+      slots
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(CheckboxGroupRoot), mergeProps(unref(forwarded), {
+        class: [slots.value.root(), props.class]
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/checkbox/checkbox-group.vue2.js

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