@fanvue/ui 1.14.1 → 1.15.0

package/dist/cjs/components/Skeleton/Skeleton.cjs

@@ -0,0 +1,61 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const VARIANT_CLASSES = {
+  text: "rounded my-0.5",
+  circular: "rounded-full",
+  rectangular: "",
+  rounded: "rounded-lg"
+};
+const Skeleton = React__namespace.forwardRef(
+  ({ className, variant = "text", animation = "pulse", width, height, style, children, ...props }, ref) => {
+    const hasChildren = React__namespace.Children.count(children) > 0;
+    const sizeStyle = {
+      ...style,
+      ...width !== void 0 && { width: typeof width === "number" ? `${width}px` : width },
+      ...height !== void 0 && { height: typeof height === "number" ? `${height}px` : height }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn.cn(
+          "block bg-neutral-200 dark:bg-neutral-200",
+          VARIANT_CLASSES[variant],
+          variant === "text" && !height && !hasChildren && "h-[1em]",
+          animation === "pulse" && "animate-pulse",
+          animation === "wave" && "fv-skeleton-wave",
+          hasChildren && "relative overflow-hidden [&>*]:invisible",
+          className
+        ),
+        style: sizeStyle,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+exports.Skeleton = Skeleton;
+//# sourceMappingURL=Skeleton.cjs.map

package/dist/cjs/components/Skeleton/Skeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.cjs","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Shape variant of the skeleton placeholder. */\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\n\n/** Animation style of the skeleton. `false` disables animation. */\nexport type SkeletonAnimation = \"pulse\" | \"wave\" | false;\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Shape variant of the skeleton.\n   *\n   * - `text` – a single line of text with slight vertical margin and rounded ends\n   * - `circular` – a circle (width and height should match)\n   * - `rectangular` – a sharp-cornered rectangle\n   * - `rounded` – a rectangle with rounded corners\n   *\n   * @default \"text\"\n   */\n  variant?: SkeletonVariant;\n  /** Animation style. Set to `false` to disable animation. @default \"pulse\" */\n  animation?: SkeletonAnimation;\n  /** Width of the skeleton. Accepts a CSS value (number is treated as `px`). */\n  width?: number | string;\n  /** Height of the skeleton. Accepts a CSS value (number is treated as `px`). */\n  height?: number | string;\n}\n\nconst VARIANT_CLASSES: Record<SkeletonVariant, string> = {\n  text: \"rounded my-0.5\",\n  circular: \"rounded-full\",\n  rectangular: \"\",\n  rounded: \"rounded-lg\",\n};\n\n/**\n * A placeholder preview of content before data is loaded, reducing perceived\n * load time. Mirrors common MUI Skeleton props for easy migration.\n *\n * When used as a loading state, wrap the skeleton region with `aria-busy=\"true\"`\n * and provide an accessible label so screen readers can convey the loading state.\n *\n * @example\n * ```tsx\n * <Skeleton variant=\"text\" width={200} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * <Skeleton variant=\"rectangular\" width=\"100%\" height={120} />\n * ```\n */\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n  (\n    { className, variant = \"text\", animation = \"pulse\", width, height, style, children, ...props },\n    ref,\n  ) => {\n    const hasChildren = React.Children.count(children) > 0;\n    const sizeStyle: React.CSSProperties = {\n      ...style,\n      ...(width !== undefined && { width: typeof width === \"number\" ? `${width}px` : width }),\n      ...(height !== undefined && { height: typeof height === \"number\" ? `${height}px` : height }),\n    };\n\n    return (\n      <span\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\n          \"block bg-neutral-200 dark:bg-neutral-200\",\n          VARIANT_CLASSES[variant],\n          variant === \"text\" && !height && !hasChildren && \"h-[1em]\",\n          animation === \"pulse\" && \"animate-pulse\",\n          animation === \"wave\" && \"fv-skeleton-wave\",\n          hasChildren && \"relative overflow-hidden [&>*]:invisible\",\n          className,\n        )}\n        style={sizeStyle}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AACX;AAgBO,MAAM,WAAWA,iBAAM;AAAA,EAC5B,CACE,EAAE,WAAW,UAAU,QAAQ,YAAY,SAAS,OAAO,QAAQ,OAAO,UAAU,GAAG,MAAA,GACvF,QACG;AACH,UAAM,cAAcA,iBAAM,SAAS,MAAM,QAAQ,IAAI;AACrD,UAAM,YAAiC;AAAA,MACrC,GAAG;AAAA,MACH,GAAI,UAAU,UAAa,EAAE,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO,MAAA;AAAA,MAC/E,GAAI,WAAW,UAAa,EAAE,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO,OAAA;AAAA,IAAO;AAG5F,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,gBAAgB,OAAO;AAAA,UACvB,YAAY,UAAU,CAAC,UAAU,CAAC,eAAe;AAAA,UACjD,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,SAAS,cAAc;;"}

package/dist/cjs/index.cjs

@@ -139,6 +139,7 @@ const Radio = require("./components/Radio/Radio.cjs");
 const RadioGroup = require("./components/RadioGroup/RadioGroup.cjs");
 const SearchField = require("./components/SearchField/SearchField.cjs");
 const Select = require("./components/Select/Select.cjs");
+const Skeleton = require("./components/Skeleton/Skeleton.cjs");
 const Slider = require("./components/Slider/Slider.cjs");
 const Snackbar = require("./components/Snackbar/Snackbar.cjs");
 const Switch = require("./components/Switch/Switch.cjs");
@@ -299,6 +300,7 @@ exports.SelectGroup = Select.SelectGroup;
 exports.SelectItem = Select.SelectItem;
 exports.SelectLabel = Select.SelectLabel;
 exports.SelectSeparator = Select.SelectSeparator;
+exports.Skeleton = Skeleton.Skeleton;
 exports.Slider = Slider.Slider;
 exports.Snackbar = Snackbar.Snackbar;
 exports.Switch = Switch.Switch;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Skeleton/Skeleton.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const VARIANT_CLASSES = {
+  text: "rounded my-0.5",
+  circular: "rounded-full",
+  rectangular: "",
+  rounded: "rounded-lg"
+};
+const Skeleton = React.forwardRef(
+  ({ className, variant = "text", animation = "pulse", width, height, style, children, ...props }, ref) => {
+    const hasChildren = React.Children.count(children) > 0;
+    const sizeStyle = {
+      ...style,
+      ...width !== void 0 && { width: typeof width === "number" ? `${width}px` : width },
+      ...height !== void 0 && { height: typeof height === "number" ? `${height}px` : height }
+    };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(
+          "block bg-neutral-200 dark:bg-neutral-200",
+          VARIANT_CLASSES[variant],
+          variant === "text" && !height && !hasChildren && "h-[1em]",
+          animation === "pulse" && "animate-pulse",
+          animation === "wave" && "fv-skeleton-wave",
+          hasChildren && "relative overflow-hidden [&>*]:invisible",
+          className
+        ),
+        style: sizeStyle,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+export {
+  Skeleton
+};
+//# sourceMappingURL=Skeleton.mjs.map

package/dist/components/Skeleton/Skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.mjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Shape variant of the skeleton placeholder. */\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\n\n/** Animation style of the skeleton. `false` disables animation. */\nexport type SkeletonAnimation = \"pulse\" | \"wave\" | false;\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Shape variant of the skeleton.\n   *\n   * - `text` – a single line of text with slight vertical margin and rounded ends\n   * - `circular` – a circle (width and height should match)\n   * - `rectangular` – a sharp-cornered rectangle\n   * - `rounded` – a rectangle with rounded corners\n   *\n   * @default \"text\"\n   */\n  variant?: SkeletonVariant;\n  /** Animation style. Set to `false` to disable animation. @default \"pulse\" */\n  animation?: SkeletonAnimation;\n  /** Width of the skeleton. Accepts a CSS value (number is treated as `px`). */\n  width?: number | string;\n  /** Height of the skeleton. Accepts a CSS value (number is treated as `px`). */\n  height?: number | string;\n}\n\nconst VARIANT_CLASSES: Record<SkeletonVariant, string> = {\n  text: \"rounded my-0.5\",\n  circular: \"rounded-full\",\n  rectangular: \"\",\n  rounded: \"rounded-lg\",\n};\n\n/**\n * A placeholder preview of content before data is loaded, reducing perceived\n * load time. Mirrors common MUI Skeleton props for easy migration.\n *\n * When used as a loading state, wrap the skeleton region with `aria-busy=\"true\"`\n * and provide an accessible label so screen readers can convey the loading state.\n *\n * @example\n * ```tsx\n * <Skeleton variant=\"text\" width={200} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * <Skeleton variant=\"rectangular\" width=\"100%\" height={120} />\n * ```\n */\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n  (\n    { className, variant = \"text\", animation = \"pulse\", width, height, style, children, ...props },\n    ref,\n  ) => {\n    const hasChildren = React.Children.count(children) > 0;\n    const sizeStyle: React.CSSProperties = {\n      ...style,\n      ...(width !== undefined && { width: typeof width === \"number\" ? `${width}px` : width }),\n      ...(height !== undefined && { height: typeof height === \"number\" ? `${height}px` : height }),\n    };\n\n    return (\n      <span\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\n          \"block bg-neutral-200 dark:bg-neutral-200\",\n          VARIANT_CLASSES[variant],\n          variant === \"text\" && !height && !hasChildren && \"h-[1em]\",\n          animation === \"pulse\" && \"animate-pulse\",\n          animation === \"wave\" && \"fv-skeleton-wave\",\n          hasChildren && \"relative overflow-hidden [&>*]:invisible\",\n          className,\n        )}\n        style={sizeStyle}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n"],"names":[],"mappings":";;;;AA4BA,MAAM,kBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AACX;AAgBO,MAAM,WAAW,MAAM;AAAA,EAC5B,CACE,EAAE,WAAW,UAAU,QAAQ,YAAY,SAAS,OAAO,QAAQ,OAAO,UAAU,GAAG,MAAA,GACvF,QACG;AACH,UAAM,cAAc,MAAM,SAAS,MAAM,QAAQ,IAAI;AACrD,UAAM,YAAiC;AAAA,MACrC,GAAG;AAAA,MACH,GAAI,UAAU,UAAa,EAAE,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO,MAAA;AAAA,MAC/E,GAAI,WAAW,UAAa,EAAE,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO,OAAA;AAAA,IAAO;AAG5F,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,OAAO;AAAA,UACvB,YAAY,UAAU,CAAC,UAAU,CAAC,eAAe;AAAA,UACjD,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,SAAS,cAAc;"}

package/dist/index.d.ts

@@ -1104,6 +1104,47 @@ export declare const ShareIcon: React_2.ForwardRefExoticComponent<React_2.SVGAtt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A placeholder preview of content before data is loaded, reducing perceived
+ * load time. Mirrors common MUI Skeleton props for easy migration.
+ *
+ * When used as a loading state, wrap the skeleton region with `aria-busy="true"`
+ * and provide an accessible label so screen readers can convey the loading state.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="text" width={200} />
+ * <Skeleton variant="circular" width={40} height={40} />
+ * <Skeleton variant="rectangular" width="100%" height={120} />
+ * ```
+ */
+export declare const Skeleton: React_2.ForwardRefExoticComponent<SkeletonProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+/** Animation style of the skeleton. `false` disables animation. */
+export declare type SkeletonAnimation = "pulse" | "wave" | false;
+
+export declare interface SkeletonProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+    /** Shape variant of the skeleton.
+     *
+     * - `text` – a single line of text with slight vertical margin and rounded ends
+     * - `circular` – a circle (width and height should match)
+     * - `rectangular` – a sharp-cornered rectangle
+     * - `rounded` – a rectangle with rounded corners
+     *
+     * @default "text"
+     */
+    variant?: SkeletonVariant;
+    /** Animation style. Set to `false` to disable animation. @default "pulse" */
+    animation?: SkeletonAnimation;
+    /** Width of the skeleton. Accepts a CSS value (number is treated as `px`). */
+    width?: number | string;
+    /** Height of the skeleton. Accepts a CSS value (number is treated as `px`). */
+    height?: number | string;
+}
+
+/** Shape variant of the skeleton placeholder. */
+export declare type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
+
 /**
  * A range input for selecting one or more numeric values along a track.
  * Supports single and multi-thumb modes, optional labels, and a value tooltip.

package/dist/index.mjs

@@ -137,6 +137,7 @@ import { Radio } from "./components/Radio/Radio.mjs";
 import { RadioGroup } from "./components/RadioGroup/RadioGroup.mjs";
 import { SearchField } from "./components/SearchField/SearchField.mjs";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator } from "./components/Select/Select.mjs";
+import { Skeleton } from "./components/Skeleton/Skeleton.mjs";
 import { Slider } from "./components/Slider/Slider.mjs";
 import { Snackbar } from "./components/Snackbar/Snackbar.mjs";
 import { Switch } from "./components/Switch/Switch.mjs";
@@ -268,6 +269,7 @@ export {
   SendIcon,
   SettingsIcon,
   ShareIcon,
+  Skeleton,
   Slider,
   Snackbar,
   SpinnerIcon,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/theme.css

@@ -477,3 +477,30 @@
   letter-spacing: 0px;
   line-height: 64px;
 }
+
+@utility fv-skeleton-wave {
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    will-change: transform;
+    background-image: linear-gradient(
+      90deg,
+      transparent,
+      color-mix(in srgb, var(--color-foreground-default) 8%, transparent),
+      color-mix(in srgb, var(--color-foreground-default) 16%, transparent),
+      transparent
+    );
+    animation: fv-skeleton-shimmer 1.5s ease-in-out infinite;
+    content: "";
+  }
+}
+
+@keyframes fv-skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",