@vifui/core 0.6.0-alpha.13 → 0.6.0-alpha.14

package/dist/components/index.d.ts

@@ -14,3 +14,4 @@ export * from "./tabs";
 export * from "./popover";
 export * from "./tooltip";
 export * from "./upload";
+export * from "./skeleton";

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

@@ -0,0 +1,3 @@
+export { default as Skeleton } from "./skeleton.vue";
+export { skeletonVariants, type SkeletonVariantProps } from "./skeleton.styles";
+export type { SkeletonProps, SkeletonSlots } from "./skeleton.vue";

package/dist/components/skeleton/index.js

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './skeleton.vue.js';
+export { skeletonVariants } from './skeleton.styles.js';

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

@@ -0,0 +1,29 @@
+import type { VariantProps } from "tailwind-variants";
+/**
+ * Skeleton component variant mapper
+ *
+ * Maps variant props to @vifui/styles CSS classes
+ */
+export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
+    presets: {
+        default: string;
+        circle: string;
+        rectangle: string;
+        square: string;
+    };
+}, undefined, "vif-skeleton__root", {
+    presets: {
+        default: string;
+        circle: string;
+        rectangle: string;
+        square: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    presets: {
+        default: string;
+        circle: string;
+        rectangle: string;
+        square: string;
+    };
+}, undefined, "vif-skeleton__root", unknown, unknown, undefined>>;
+export type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;

package/dist/components/skeleton/skeleton.styles.js

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+
+const skeletonVariants = tv({
+  base: "vif-skeleton__root",
+  variants: {
+    presets: {
+      default: "",
+      circle: "vif-skeleton__root--preset-circle",
+      rectangle: "vif-skeleton__root--preset-rectangle",
+      square: "vif-skeleton__root--preset-square"
+    }
+  }
+});
+
+export { skeletonVariants };

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

@@ -0,0 +1,28 @@
+import { type PrimitiveProps } from "reka-ui";
+import { type HTMLAttributes } from "vue";
+/** Skeleton component props */
+export interface SkeletonProps extends PrimitiveProps {
+    /** Custom style classes */
+    class?: HTMLAttributes["class"];
+    /** Skeleton  presets */
+    preset?: "default" | "circle" | "rectangle" | "square";
+}
+/** Skeleton component slots */
+export interface SkeletonSlots {
+    default: () => void;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+    preset: "default" | "circle" | "rectangle" | "square";
+}, {}, {}, {}, 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/skeleton/skeleton.vue.js

@@ -0,0 +1,34 @@
+import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { useForwardProps, Primitive } from 'reka-ui';
+import { skeletonVariants } from './skeleton.styles.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "skeleton",
+  props: {
+    class: { type: null, required: false },
+    preset: { type: String, required: false, default: "default" },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const primitiveProps = useForwardProps(() => ({
+      as: props.as,
+      asChild: props.asChild
+    }));
+    const theme = computed(
+      () => skeletonVariants({ class: props.class, presets: props.preset })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({ "aria-hidden": "" }, unref(primitiveProps), { class: theme.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/skeleton/skeleton.vue2.js

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

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

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

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

@@ -1,4 +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 Spinners = "default" | "border" | "points" | "radius" | "corners" | "scale" | "waves" | "square" | "gradient" | "rectangle" | "circles" | "square-rotate" | "material";
 export type Colors = "neutral" | "brand" | "success" | "warning" | "danger";

package/dist/index.js

@@ -71,6 +71,7 @@ export { default as TooltipPortal } from './components/tooltip/tooltip-portal.vu
 export { default as TooltipContent } from './components/tooltip/tooltip-content.vue.js';
 export { default as TooltipArrow } from './components/tooltip/tooltip-arrow.vue.js';
 export { default as UploadRoot } from './components/upload/upload-root.vue.js';
+export { default as Skeleton } from './components/skeleton/skeleton.vue.js';
 export { accordionVariants } from './components/accordion/accordion.styles.js';
 export { alertVariants } from './components/alert/alert.styles.js';
 export { avatarVariants } from './components/avatar/avatar.styles.js';
@@ -87,6 +88,7 @@ export { tabsVariants } from './components/tabs/tabs.styles.js';
 export { popoverVariants } from './components/popover/popover.styles.js';
 export { tooltipVariants } from './components/tooltip/tooltip.styles.js';
 export { uploadVariants } from './components/upload/upload.styles.js';
+export { skeletonVariants } from './components/skeleton/skeleton.styles.js';
 
 const version = "__VIFUI_VERSION__";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vifui/core",
-  "version": "0.6.0-alpha.13",
+  "version": "0.6.0-alpha.14",
   "description": "A vivid, modern Vue 3 component library built with Tailwind CSS 4.🚀",
   "license": "MIT",
   "type": "module",