@vifui/core 0.4.0-alpha.6

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

@@ -0,0 +1,40 @@
+import { type CheckboxIndicatorProps as RekaCheckboxIndicatorProps } from "reka-ui";
+/**
+ * Props for the VifUI CheckboxIndicator component.
+ * Wraps Reka UI's CheckboxIndicator with icon support.
+ */
+export interface CheckboxIndicatorProps extends RekaCheckboxIndicatorProps {
+    /**
+     * Icon to show when checked.
+     * @default "lucide:check"
+     */
+    checkedIcon?: string;
+    /**
+     * Icon to show when indeterminate.
+     * @default "lucide:minus"
+     */
+    indeterminateIcon?: string;
+    /**
+     * Custom class names for the indicator wrapper.
+     */
+    class?: string;
+}
+declare var __VLS_5: {
+    checkedIcon: string;
+    indeterminateIcon: string;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CheckboxIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckboxIndicatorProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+    checkedIcon: string;
+    indeterminateIcon: 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/checkbox/checkbox-indicator.vue.js

@@ -0,0 +1,58 @@
+import { defineComponent, computed, inject, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createVNode, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import { useForwardProps, CheckboxIndicator } from 'reka-ui';
+import { Icon } from '@iconify/vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "checkbox-indicator",
+  props: {
+    checkedIcon: { type: String, required: false, default: "lucide:check" },
+    indeterminateIcon: { type: String, required: false, default: "lucide:minus" },
+    class: { type: String, required: false },
+    forceMount: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "span" }
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = computed(() => {
+      const { class: _, checkedIcon, indeterminateIcon, ...delegated } = props;
+      return delegated;
+    });
+    const forwarded = useForwardProps(delegatedProps);
+    const slots = inject("checkboxSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(slots)?.box?.())
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(unref(slots)?.check?.())
+            },
+            null,
+            2
+            /* CLASS */
+          ),
+          createVNode(unref(CheckboxIndicator), mergeProps(unref(forwarded), {
+            class: [unref(slots)?.indicator?.(), props.class]
+          }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ checkedIcon: __props.checkedIcon, indeterminateIcon: __props.indeterminateIcon })), () => [
+                createVNode(unref(Icon), { icon: __props.checkedIcon }, null, 8, ["icon"])
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["class"])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

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

@@ -0,0 +1,27 @@
+/**
+ * Props for the VifUI CheckboxLabel component.
+ * Provides accessible label for checkbox.
+ */
+export interface CheckboxLabelProps {
+    /**
+     * HTML for attribute to associate with checkbox.
+     * If not provided, clicking label won't toggle checkbox.
+     */
+    for?: string;
+    /**
+     * Custom class names for the label.
+     */
+    class?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CheckboxLabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckboxLabelProps> & 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-label.vue.js

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

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

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

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

@@ -0,0 +1,42 @@
+import { type CheckboxRootProps as RekaCheckboxRootProps } from "reka-ui";
+import type { Colors, Sizes } from "../types/shared-types";
+/**
+ * Props for the VifUI CheckboxRoot component.
+ * Wraps Reka UI's CheckboxRoot with VifUI styling.
+ */
+export interface CheckboxRootProps extends RekaCheckboxRootProps {
+    /**
+     * The color theme of the checkbox.
+     * @default "brand"
+     */
+    color?: Colors;
+    /**
+     * The size of the checkbox.
+     * @default "md"
+     */
+    size?: Extract<Sizes, "sm" | "md" | "lg">;
+    /**
+     * Custom class names for the checkbox wrapper.
+     */
+    class?: string;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CheckboxRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxRootProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {
+    size: Extract<Sizes, "sm" | "md" | "lg">;
+    color: Colors;
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, 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-root.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent, computed, provide, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { useForwardPropsEmits, CheckboxRoot } from 'reka-ui';
+import { checkboxVariants } from './checkbox.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "checkbox-root",
+  props: {
+    color: { type: String, required: false, default: "brand" },
+    size: { type: String, required: false, default: "md" },
+    class: { type: String, required: false },
+    defaultValue: { type: [Boolean, String], required: false },
+    modelValue: { type: [Boolean, String, null], required: false },
+    disabled: { type: Boolean, required: false },
+    value: { type: null, required: false },
+    id: { type: String, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "button" },
+    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: _, color, size, ...delegated } = props;
+      return delegated;
+    });
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const slots = computed(
+      () => checkboxVariants({
+        color: props.color,
+        size: props.size
+      })
+    );
+    provide("checkboxSlots", slots);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(CheckboxRoot), 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-root.vue2.js

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

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

@@ -0,0 +1,155 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * Checkbox component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ * Inspired by Vuesax's checkbox architecture
+ */
+export declare const checkboxVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        brand: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    box: string;
+    check: string;
+    indicator: string;
+    label: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        brand: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    box: string;
+    check: string;
+    indicator: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        brand: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    box: string;
+    check: string;
+    indicator: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Checkbox Group variant mapper
+ */
+export declare const checkboxGroupVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, undefined, {
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CheckboxVariantProps = VariantProps<typeof checkboxVariants>;
+export type CheckboxGroupVariantProps = VariantProps<typeof checkboxGroupVariants>;

package/dist/components/checkbox/checkbox.styles.js

@@ -0,0 +1,66 @@
+import { tv } from 'tailwind-variants';
+
+const checkboxVariants = tv({
+  slots: {
+    root: "vif-checkbox",
+    box: "vif-checkbox__box",
+    check: "vif-checkbox__check",
+    indicator: "vif-checkbox__indicator",
+    label: "vif-checkbox__label"
+  },
+  variants: {
+    size: {
+      sm: {
+        root: "vif-checkbox--sm"
+      },
+      md: {
+        root: "vif-checkbox--md"
+      },
+      lg: {
+        root: "vif-checkbox--lg"
+      }
+    },
+    color: {
+      brand: {
+        root: "vif-checkbox--brand"
+      },
+      success: {
+        root: "vif-checkbox--success"
+      },
+      warning: {
+        root: "vif-checkbox--warning"
+      },
+      danger: {
+        root: "vif-checkbox--danger"
+      },
+      neutral: {
+        root: "vif-checkbox--neutral"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "brand"
+  }
+});
+const checkboxGroupVariants = tv({
+  slots: {
+    root: "vif-checkbox-group",
+    item: "vif-checkbox-group__item"
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        root: "vif-checkbox-group--vertical"
+      },
+      horizontal: {
+        root: "vif-checkbox-group--horizontal"
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+
+export { checkboxGroupVariants, checkboxVariants };

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

@@ -0,0 +1,11 @@
+export { default as CheckboxRoot } from "./checkbox-root.vue";
+export { default as CheckboxIndicator } from "./checkbox-indicator.vue";
+export { default as CheckboxLabel } from "./checkbox-label.vue";
+export { default as CheckboxGroup } from "./checkbox-group.vue";
+export { default as CheckboxGroupItem } from "./checkbox-group-item.vue";
+export { checkboxVariants, checkboxGroupVariants, type CheckboxVariantProps, type CheckboxGroupVariantProps, } from "./checkbox.styles";
+export type { CheckboxRootProps } from "./checkbox-root.vue";
+export type { CheckboxIndicatorProps } from "./checkbox-indicator.vue";
+export type { CheckboxLabelProps } from "./checkbox-label.vue";
+export type { CheckboxGroupProps } from "./checkbox-group.vue";
+export type { CheckboxGroupItemProps } from "./checkbox-group-item.vue";

package/dist/components/checkbox/index.js

@@ -0,0 +1,6 @@
+export { default as CheckboxRoot } from './checkbox-root.vue.js';
+export { default as CheckboxIndicator } from './checkbox-indicator.vue.js';
+export { default as CheckboxLabel } from './checkbox-label.vue.js';
+export { default as CheckboxGroup } from './checkbox-group.vue.js';
+export { default as CheckboxGroupItem } from './checkbox-group-item.vue.js';
+export { checkboxGroupVariants, checkboxVariants } from './checkbox.styles.js';

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

@@ -0,0 +1,93 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * Divider component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ * Inspired by Vuesax's divider architecture
+ */
+export declare const dividerVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        solid: string;
+        dashed: string;
+        dotted: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    color: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    labelPosition: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, "vif-divider", {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        solid: string;
+        dashed: string;
+        dotted: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    color: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    labelPosition: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        solid: string;
+        dashed: string;
+        dotted: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    color: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    labelPosition: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, "vif-divider", unknown, unknown, undefined>>;
+export type DividerVariantProps = VariantProps<typeof dividerVariants>;

package/dist/components/divider/divider.styles.js

@@ -0,0 +1,43 @@
+import { tv } from 'tailwind-variants';
+
+const dividerVariants = tv({
+  base: "vif-divider",
+  variants: {
+    orientation: {
+      horizontal: "vif-divider--horizontal",
+      vertical: "vif-divider--vertical"
+    },
+    variant: {
+      solid: "vif-divider--solid",
+      dashed: "vif-divider--dashed",
+      dotted: "vif-divider--dotted"
+    },
+    size: {
+      xs: "vif-divider--xs",
+      sm: "vif-divider--sm",
+      md: "vif-divider--md",
+      lg: "vif-divider--lg"
+    },
+    color: {
+      neutral: "vif-divider--neutral",
+      brand: "vif-divider--brand",
+      success: "vif-divider--success",
+      warning: "vif-divider--warning",
+      danger: "vif-divider--danger"
+    },
+    labelPosition: {
+      start: "vif-divider--label-start",
+      center: "vif-divider--label-center",
+      end: "vif-divider--label-end"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid",
+    size: "sm",
+    color: "neutral",
+    labelPosition: "center"
+  }
+});
+
+export { dividerVariants };