@fanvue/ui 1.21.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "1.21.0",
+  "version": "2.1.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -164,7 +164,7 @@
   "size-limit": [
     {
       "path": "dist/index.mjs",
-      "limit": "50 KB",
+      "limit": "55 KB",
       "ignore": [
         "@radix-ui/*",
         "clsx",

package/dist/cjs/components/Banner/Banner.cjs

@@ -1,71 +0,0 @@
-"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");
-const Badge = require("../Badge/Badge.cjs");
-const Button = require("../Button/Button.cjs");
-const ArrowRightIcon = require("../Icons/ArrowRightIcon.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_GRADIENTS = {
-  primary: "from-[var(--primitives-color-green-50)] to-[var(--primitives-color-purple-50)]",
-  secondary: "from-[var(--primitives-color-purple-50)] to-[var(--primitives-color-pink-50)]",
-  tertiary: "from-[var(--primitives-color-pink-50)] to-[var(--primitives-color-info-50)]"
-};
-const LIGHT_MODE_OVERRIDES = {
-  "--color-foreground-default": "#151515ff",
-  "--color-foreground-secondary": "#404040ff",
-  "--color-neutral-100": "#1515150a"
-};
-const Banner = React__namespace.forwardRef(
-  ({ className, variant = "primary", badgeLabel, heading, description, cta, style, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: cn.cn(
-          "flex flex-col items-start gap-2 rounded-2xl bg-gradient-to-br p-3 text-foreground-default",
-          VARIANT_GRADIENTS[variant],
-          className
-        ),
-        style: { ...LIGHT_MODE_OVERRIDES, ...style },
-        ...props,
-        children: [
-          badgeLabel && /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { children: badgeLabel }),
-          heading && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "typography-semibold-body-md", children: heading }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-sm", children: description }),
-          cta && /* @__PURE__ */ jsxRuntime.jsx(
-            Button.Button,
-            {
-              variant: "text",
-              onClick: cta.onClick,
-              size: "24",
-              rightIcon: cta.icon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon.ArrowRightIcon, {}),
-              children: cta.label
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Banner.displayName = "Banner";
-exports.Banner = Banner;
-//# sourceMappingURL=Banner.cjs.map

package/dist/cjs/components/Banner/Banner.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.cjs","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Badge } from \"../Badge/Badge\";\nimport { Button } from \"../Button/Button\";\nimport { ArrowRightIcon } from \"../Icons/ArrowRightIcon\";\n\n/** Gradient variant of the banner. */\nexport type BannerVariant = \"primary\" | \"secondary\" | \"tertiary\";\n\nconst VARIANT_GRADIENTS: Record<BannerVariant, string> = {\n  primary: \"from-[var(--primitives-color-green-50)] to-[var(--primitives-color-purple-50)]\",\n  secondary: \"from-[var(--primitives-color-purple-50)] to-[var(--primitives-color-pink-50)]\",\n  tertiary: \"from-[var(--primitives-color-pink-50)] to-[var(--primitives-color-info-50)]\",\n};\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Gradient variant controlling the background colours. @default \"primary\" */\n  variant?: BannerVariant;\n  /** Text rendered inside a `Badge` at the top of the banner. */\n  badgeLabel?: string;\n  /** Primary heading displayed below the badge. Rendered as an `<h3>`. */\n  heading?: React.ReactNode;\n  /** Supporting copy displayed below the heading. */\n  description?: React.ReactNode;\n  /**\n   * Call-to-action button config. Renders a text-style `Button` with an arrow icon.\n   * Pass `icon` to override the default `ArrowRightIcon`.\n   */\n  cta?: { label: string; onClick: () => void; icon?: React.ReactNode };\n}\n\n/**\n * Force light-mode semantic tokens on the Banner since its gradient\n * backgrounds are always light regardless of the current colour scheme.\n */\nconst LIGHT_MODE_OVERRIDES: React.CSSProperties = {\n  \"--color-foreground-default\": \"#151515ff\",\n  \"--color-foreground-secondary\": \"#404040ff\",\n  \"--color-neutral-100\": \"#1515150a\",\n} as React.CSSProperties;\n\n/**\n * A promotional banner card with gradient backgrounds, optional badge,\n * heading, description, and call-to-action button.\n *\n * @example\n * ```tsx\n * <Banner\n *   variant=\"primary\"\n *   badgeLabel=\"New\"\n *   heading=\"Boost your earnings\"\n *   description=\"Try our latest feature to grow faster.\"\n *   cta={{ label: \"Learn more\", onClick: handleClick }}\n * />\n * ```\n */\nexport const Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  (\n    { className, variant = \"primary\", badgeLabel, heading, description, cta, style, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col items-start gap-2 rounded-2xl bg-gradient-to-br p-3 text-foreground-default\",\n          VARIANT_GRADIENTS[variant],\n          className,\n        )}\n        style={{ ...LIGHT_MODE_OVERRIDES, ...style }}\n        {...props}\n      >\n        {badgeLabel && <Badge>{badgeLabel}</Badge>}\n        {heading && <h3 className=\"typography-semibold-body-md\">{heading}</h3>}\n        {description && <p className=\"typography-regular-body-sm\">{description}</p>}\n        {cta && (\n          <Button\n            variant=\"text\"\n            onClick={cta.onClick}\n            size=\"24\"\n            rightIcon={cta.icon ?? <ArrowRightIcon />}\n          >\n            {cta.label}\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nBanner.displayName = \"Banner\";\n"],"names":["React","jsxs","cn","jsx","Badge","Button","ArrowRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,oBAAmD;AAAA,EACvD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AACZ;AAsBA,MAAM,uBAA4C;AAAA,EAChD,8BAA8B;AAAA,EAC9B,gCAAgC;AAAA,EAChC,uBAAuB;AACzB;AAiBO,MAAM,SAASA,iBAAM;AAAA,EAC1B,CACE,EAAE,WAAW,UAAU,WAAW,YAAY,SAAS,aAAa,KAAK,OAAO,GAAG,MAAA,GACnF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,kBAAkB,OAAO;AAAA,UACzB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,GAAG,sBAAsB,GAAG,MAAA;AAAA,QACpC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,cAAcC,2BAAAA,IAACC,MAAAA,SAAO,UAAA,WAAA,CAAW;AAAA,UACjC,WAAWD,2BAAAA,IAAC,MAAA,EAAG,WAAU,+BAA+B,UAAA,SAAQ;AAAA,UAChE,eAAeA,2BAAAA,IAAC,KAAA,EAAE,WAAU,8BAA8B,UAAA,aAAY;AAAA,UACtE,OACCA,2BAAAA;AAAAA,YAACE,OAAAA;AAAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,IAAI;AAAA,cACb,MAAK;AAAA,cACL,WAAW,IAAI,QAAQF,2BAAAA,IAACG,eAAAA,gBAAA,CAAA,CAAe;AAAA,cAEtC,UAAA,IAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,OAAO,cAAc;;"}

package/dist/components/Banner/Banner.mjs

@@ -1,54 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../../utils/cn.mjs";
-import { Badge } from "../Badge/Badge.mjs";
-import { Button } from "../Button/Button.mjs";
-import { ArrowRightIcon } from "../Icons/ArrowRightIcon.mjs";
-const VARIANT_GRADIENTS = {
-  primary: "from-[var(--primitives-color-green-50)] to-[var(--primitives-color-purple-50)]",
-  secondary: "from-[var(--primitives-color-purple-50)] to-[var(--primitives-color-pink-50)]",
-  tertiary: "from-[var(--primitives-color-pink-50)] to-[var(--primitives-color-info-50)]"
-};
-const LIGHT_MODE_OVERRIDES = {
-  "--color-foreground-default": "#151515ff",
-  "--color-foreground-secondary": "#404040ff",
-  "--color-neutral-100": "#1515150a"
-};
-const Banner = React.forwardRef(
-  ({ className, variant = "primary", badgeLabel, heading, description, cta, style, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex flex-col items-start gap-2 rounded-2xl bg-gradient-to-br p-3 text-foreground-default",
-          VARIANT_GRADIENTS[variant],
-          className
-        ),
-        style: { ...LIGHT_MODE_OVERRIDES, ...style },
-        ...props,
-        children: [
-          badgeLabel && /* @__PURE__ */ jsx(Badge, { children: badgeLabel }),
-          heading && /* @__PURE__ */ jsx("h3", { className: "typography-semibold-body-md", children: heading }),
-          description && /* @__PURE__ */ jsx("p", { className: "typography-regular-body-sm", children: description }),
-          cta && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "text",
-              onClick: cta.onClick,
-              size: "24",
-              rightIcon: cta.icon ?? /* @__PURE__ */ jsx(ArrowRightIcon, {}),
-              children: cta.label
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Banner.displayName = "Banner";
-export {
-  Banner
-};
-//# sourceMappingURL=Banner.mjs.map

package/dist/components/Banner/Banner.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.mjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Badge } from \"../Badge/Badge\";\nimport { Button } from \"../Button/Button\";\nimport { ArrowRightIcon } from \"../Icons/ArrowRightIcon\";\n\n/** Gradient variant of the banner. */\nexport type BannerVariant = \"primary\" | \"secondary\" | \"tertiary\";\n\nconst VARIANT_GRADIENTS: Record<BannerVariant, string> = {\n  primary: \"from-[var(--primitives-color-green-50)] to-[var(--primitives-color-purple-50)]\",\n  secondary: \"from-[var(--primitives-color-purple-50)] to-[var(--primitives-color-pink-50)]\",\n  tertiary: \"from-[var(--primitives-color-pink-50)] to-[var(--primitives-color-info-50)]\",\n};\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Gradient variant controlling the background colours. @default \"primary\" */\n  variant?: BannerVariant;\n  /** Text rendered inside a `Badge` at the top of the banner. */\n  badgeLabel?: string;\n  /** Primary heading displayed below the badge. Rendered as an `<h3>`. */\n  heading?: React.ReactNode;\n  /** Supporting copy displayed below the heading. */\n  description?: React.ReactNode;\n  /**\n   * Call-to-action button config. Renders a text-style `Button` with an arrow icon.\n   * Pass `icon` to override the default `ArrowRightIcon`.\n   */\n  cta?: { label: string; onClick: () => void; icon?: React.ReactNode };\n}\n\n/**\n * Force light-mode semantic tokens on the Banner since its gradient\n * backgrounds are always light regardless of the current colour scheme.\n */\nconst LIGHT_MODE_OVERRIDES: React.CSSProperties = {\n  \"--color-foreground-default\": \"#151515ff\",\n  \"--color-foreground-secondary\": \"#404040ff\",\n  \"--color-neutral-100\": \"#1515150a\",\n} as React.CSSProperties;\n\n/**\n * A promotional banner card with gradient backgrounds, optional badge,\n * heading, description, and call-to-action button.\n *\n * @example\n * ```tsx\n * <Banner\n *   variant=\"primary\"\n *   badgeLabel=\"New\"\n *   heading=\"Boost your earnings\"\n *   description=\"Try our latest feature to grow faster.\"\n *   cta={{ label: \"Learn more\", onClick: handleClick }}\n * />\n * ```\n */\nexport const Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  (\n    { className, variant = \"primary\", badgeLabel, heading, description, cta, style, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col items-start gap-2 rounded-2xl bg-gradient-to-br p-3 text-foreground-default\",\n          VARIANT_GRADIENTS[variant],\n          className,\n        )}\n        style={{ ...LIGHT_MODE_OVERRIDES, ...style }}\n        {...props}\n      >\n        {badgeLabel && <Badge>{badgeLabel}</Badge>}\n        {heading && <h3 className=\"typography-semibold-body-md\">{heading}</h3>}\n        {description && <p className=\"typography-regular-body-sm\">{description}</p>}\n        {cta && (\n          <Button\n            variant=\"text\"\n            onClick={cta.onClick}\n            size=\"24\"\n            rightIcon={cta.icon ?? <ArrowRightIcon />}\n          >\n            {cta.label}\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nBanner.displayName = \"Banner\";\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,oBAAmD;AAAA,EACvD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AACZ;AAsBA,MAAM,uBAA4C;AAAA,EAChD,8BAA8B;AAAA,EAC9B,gCAAgC;AAAA,EAChC,uBAAuB;AACzB;AAiBO,MAAM,SAAS,MAAM;AAAA,EAC1B,CACE,EAAE,WAAW,UAAU,WAAW,YAAY,SAAS,aAAa,KAAK,OAAO,GAAG,MAAA,GACnF,QACG;AACH,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,kBAAkB,OAAO;AAAA,UACzB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,GAAG,sBAAsB,GAAG,MAAA;AAAA,QACpC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,cAAc,oBAAC,SAAO,UAAA,WAAA,CAAW;AAAA,UACjC,WAAW,oBAAC,MAAA,EAAG,WAAU,+BAA+B,UAAA,SAAQ;AAAA,UAChE,eAAe,oBAAC,KAAA,EAAE,WAAU,8BAA8B,UAAA,aAAY;AAAA,UACtE,OACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,IAAI;AAAA,cACb,MAAK;AAAA,cACL,WAAW,IAAI,QAAQ,oBAAC,gBAAA,CAAA,CAAe;AAAA,cAEtC,UAAA,IAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,OAAO,cAAc;"}