@fanvue/ui 1.20.0 → 1.21.0

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

@@ -0,0 +1,71 @@
+"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

@@ -0,0 +1 @@
+{"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/cjs/components/DropdownMenu/DropdownMenu.cjs

@@ -0,0 +1,111 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const DropdownMenuPrimitive = require("@radix-ui/react-dropdown-menu");
+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 DropdownMenuPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DropdownMenuPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+const DropdownMenuContent = React__namespace.forwardRef(({ className, style, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn.cn(
+      "min-w-[180px] overflow-y-auto rounded-lg border border-neutral-200 bg-surface-page p-1 shadow-lg",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    style: {
+      zIndex: "var(--fanvue-ui-portal-z-index, 50)",
+      maxHeight: "var(--radix-dropdown-menu-content-available-height)",
+      ...style
+    },
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+const DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+const DropdownMenuLabel = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Label,
+  {
+    ref,
+    className: cn.cn("typography-medium-body-xs px-2 py-1.5 text-foreground-secondary", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+const DropdownMenuItem = React__namespace.forwardRef(
+  ({
+    size = "sm",
+    destructive,
+    leadingIcon,
+    trailingIcon,
+    selected,
+    className,
+    children,
+    asChild,
+    ...props
+  }, ref) => {
+    const itemClassName = cn.cn(
+      "flex w-full cursor-pointer items-center gap-1 rounded px-2 outline-none",
+      "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-neutral-100",
+      size === "sm" ? "min-h-[34px] py-1" : "min-h-[40px] py-1.5",
+      size === "sm" ? "typography-medium-body-sm" : "typography-medium-body-md",
+      destructive && "text-error-default",
+      selected && "bg-success-background",
+      className
+    );
+    if (asChild) {
+      return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Item, { ref, asChild: true, className: itemClassName, ...props, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.Item, { ref, className: itemClassName, ...props, children: [
+      leadingIcon,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+      trailingIcon
+    ] });
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+const DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Separator,
+  {
+    ref,
+    className: cn.cn("my-1 h-px bg-neutral-200", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+//# sourceMappingURL=DropdownMenu.cjs.map

package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.cjs","sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link DropdownMenu} root component. */\nexport interface DropdownMenuProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\n\n/** Root component that manages open/close state for a dropdown menu. */\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\n/** Props for the {@link DropdownMenuTrigger} component. */\nexport type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Trigger\n>;\n\n/** The element that toggles the dropdown menu when clicked. */\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/** Props for the {@link DropdownMenuContent} component. */\nexport interface DropdownMenuContentProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}\n\n/**\n * The positioned content panel rendered inside a portal.\n *\n * Override the portal z-index per-instance via `style={{ zIndex: 1500 }}` or\n * globally with the `--fanvue-ui-portal-z-index` CSS custom property.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button>Open</Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem>Option 1</DropdownMenuItem>\n *     <DropdownMenuItem>Option 2</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n */\nexport const DropdownMenuContent = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,\n  DropdownMenuContentProps\n>(({ className, style, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"min-w-[180px] overflow-y-auto rounded-lg border border-neutral-200 bg-surface-page p-1 shadow-lg\",\n        \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n        \"data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2\",\n        \"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n        className,\n      )}\n      style={{\n        zIndex: \"var(--fanvue-ui-portal-z-index, 50)\",\n        maxHeight: \"var(--radix-dropdown-menu-content-available-height)\",\n        ...style,\n      }}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n));\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\n/** Props for the {@link DropdownMenuGroup} component. */\nexport type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Group\n>;\n\n/** Groups related menu items. Accepts an optional `DropdownMenuLabel`. */\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\";\n\n/** Props for the {@link DropdownMenuLabel} component. */\nexport interface DropdownMenuLabelProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {}\n\n/** A label for a group of items. Not focusable or selectable. */\nexport const DropdownMenuLabel = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,\n  DropdownMenuLabelProps\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-medium-body-xs px-2 py-1.5 text-foreground-secondary\", className)}\n    {...props}\n  />\n));\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\n/** Available sizes for a dropdown menu item. */\nexport type DropdownMenuItemSize = \"sm\" | \"md\";\n\nexport interface DropdownMenuItemProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n  /** Height of the menu item row. @default \"sm\" */\n  size?: DropdownMenuItemSize;\n  /** Whether the item uses destructive (error) styling. */\n  destructive?: boolean;\n  /** Icon rendered before the label. */\n  leadingIcon?: React.ReactNode;\n  /** Icon rendered after the label. */\n  trailingIcon?: React.ReactNode;\n  /** Whether the item is in a selected state. */\n  selected?: boolean;\n}\n\n/**\n * An individual item within a {@link DropdownMenuContent}.\n *\n * @example\n * ```tsx\n * <DropdownMenuItem>Edit profile</DropdownMenuItem>\n * <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n * <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>\n *\n * // As a link\n * <DropdownMenuItem asChild>\n *   <a href=\"/settings\">Settings</a>\n * </DropdownMenuItem>\n * ```\n */\nexport const DropdownMenuItem = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,\n  DropdownMenuItemProps\n>(\n  (\n    {\n      size = \"sm\",\n      destructive,\n      leadingIcon,\n      trailingIcon,\n      selected,\n      className,\n      children,\n      asChild,\n      ...props\n    },\n    ref,\n  ) => {\n    const itemClassName = cn(\n      \"flex w-full cursor-pointer items-center gap-1 rounded px-2 outline-none\",\n      \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n      \"data-[highlighted]:bg-neutral-100\",\n      size === \"sm\" ? \"min-h-[34px] py-1\" : \"min-h-[40px] py-1.5\",\n      size === \"sm\" ? \"typography-medium-body-sm\" : \"typography-medium-body-md\",\n      destructive && \"text-error-default\",\n      selected && \"bg-success-background\",\n      className,\n    );\n\n    if (asChild) {\n      return (\n        <DropdownMenuPrimitive.Item ref={ref} asChild className={itemClassName} {...props}>\n          {children}\n        </DropdownMenuPrimitive.Item>\n      );\n    }\n\n    return (\n      <DropdownMenuPrimitive.Item ref={ref} className={itemClassName} {...props}>\n        {leadingIcon}\n        <span className=\"flex-1\">{children}</span>\n        {trailingIcon}\n      </DropdownMenuPrimitive.Item>\n    );\n  },\n);\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\n/** Props for the {@link DropdownMenuSeparator} component. */\nexport interface DropdownMenuSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {}\n\n/** Visual separator between groups of items. */\nexport const DropdownMenuSeparator = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,\n  DropdownMenuSeparatorProps\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"my-1 h-px bg-neutral-200\", className)}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n"],"names":["DropdownMenuPrimitive","React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,eAAeA,iCAAsB;AAQ3C,MAAM,sBAAsBA,iCAAsB;AACzD,oBAAoB,cAAc;AAyB3B,MAAM,sBAAsBC,iBAAM,WAGvC,CAAC,EAAE,WAAW,OAAO,aAAa,GAAG,GAAG,SAAS,QACjDC,2BAAAA,IAACF,iCAAsB,QAAtB,EACC,UAAAE,2BAAAA;AAAAA,EAACF,iCAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAWG,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,GAAG;AAAA,IAAA;AAAA,IAEJ,GAAG;AAAA,EAAA;AACN,GACF,CACD;AACD,oBAAoB,cAAc;AAQ3B,MAAM,oBAAoBH,iCAAsB;AACvD,kBAAkB,cAAc;AAOzB,MAAM,oBAAoBC,iBAAM,WAGrC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACF,iCAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA,WAAWG,GAAAA,GAAG,mEAAmE,SAAS;AAAA,IACzF,GAAG;AAAA,EAAA;AACN,CACD;AACD,kBAAkB,cAAc;AAkCzB,MAAM,mBAAmBF,iBAAM;AAAA,EAIpC,CACE;AAAA,IACE,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,gBAAgBE,GAAAA;AAAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,OAAO,sBAAsB;AAAA,MACtC,SAAS,OAAO,8BAA8B;AAAA,MAC9C,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,IAAA;AAGF,QAAI,SAAS;AACX,aACED,+BAACF,iCAAsB,MAAtB,EAA2B,KAAU,SAAO,MAAC,WAAW,eAAgB,GAAG,OACzE,SAAA,CACH;AAAA,IAEJ;AAEA,WACEI,2BAAAA,KAACJ,iCAAsB,MAAtB,EAA2B,KAAU,WAAW,eAAgB,GAAG,OACjE,UAAA;AAAA,MAAA;AAAA,MACDE,2BAAAA,IAAC,QAAA,EAAK,WAAU,UAAU,SAAA,CAAS;AAAA,MAClC;AAAA,IAAA,GACH;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAOxB,MAAM,wBAAwBD,iBAAM,WAGzC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACF,iCAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA,WAAWG,GAAAA,GAAG,4BAA4B,SAAS;AAAA,IAClD,GAAG;AAAA,EAAA;AACN,CACD;AACD,sBAAsB,cAAc;;;;;;;;"}

package/dist/cjs/components/OnlineBlinkingIcon/OnlineBlinkingIcon.cjs

@@ -0,0 +1,45 @@
+"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 sizeClasses = {
+  sm: "h-2 w-2",
+  md: "h-3 w-3"
+};
+const OnlineBlinkingIcon = React__namespace.forwardRef(
+  ({ className, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      className: cn.cn("relative inline-block rounded-full", sizeClasses[size], className),
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 animate-ping rounded-full bg-success-default opacity-75" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 rounded-full bg-success-default" })
+      ]
+    }
+  )
+);
+OnlineBlinkingIcon.displayName = "OnlineBlinkingIcon";
+exports.OnlineBlinkingIcon = OnlineBlinkingIcon;
+//# sourceMappingURL=OnlineBlinkingIcon.cjs.map

package/dist/cjs/components/OnlineBlinkingIcon/OnlineBlinkingIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnlineBlinkingIcon.cjs","sources":["../../../../src/components/OnlineBlinkingIcon/OnlineBlinkingIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type OnlineBlinkingIconSize = \"sm\" | \"md\";\n\nexport interface OnlineBlinkingIconProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** @default \"sm\" */\n  size?: OnlineBlinkingIconSize;\n}\n\nconst sizeClasses: Record<OnlineBlinkingIconSize, string> = {\n  sm: \"h-2 w-2\",\n  md: \"h-3 w-3\",\n};\n\n/**\n * A small pulsing green dot indicator used to show online status.\n * Decorative only — pair with a visually-hidden label at the usage site\n * to convey status to screen readers.\n *\n * @example\n * ```tsx\n * <OnlineBlinkingIcon />\n * <OnlineBlinkingIcon size=\"md\" />\n * ```\n */\nexport const OnlineBlinkingIcon = React.forwardRef<HTMLSpanElement, OnlineBlinkingIconProps>(\n  ({ className, size = \"sm\", ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(\"relative inline-block rounded-full\", sizeClasses[size], className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <span className=\"absolute inset-0 animate-ping rounded-full bg-success-default opacity-75\" />\n      <span className=\"absolute inset-0 rounded-full bg-success-default\" />\n    </span>\n  ),\n);\n\nOnlineBlinkingIcon.displayName = \"OnlineBlinkingIcon\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,cAAsD;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AACN;AAaO,MAAM,qBAAqBA,iBAAM;AAAA,EACtC,CAAC,EAAE,WAAW,OAAO,MAAM,GAAG,MAAA,GAAS,QACrCC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA,GAAG,sCAAsC,YAAY,IAAI,GAAG,SAAS;AAAA,MAChF,eAAY;AAAA,MACX,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,2EAAA,CAA2E;AAAA,QAC3FA,2BAAAA,IAAC,QAAA,EAAK,WAAU,mDAAA,CAAmD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzE;AAEA,mBAAmB,cAAc;;"}

package/dist/cjs/components/Tabs/TabsTrigger.cjs

@@ -23,19 +23,10 @@ function _interopNamespaceDefault(e) {
 }
 const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const TabsTrigger = React__namespace.forwardRef(({ className, children, onMouseDown, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+const TabsTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
-    onMouseDown: (e) => {
-      if (e.button !== 0) {
-        onMouseDown?.(e);
-        return;
-      }
-      e.preventDefault();
-      if (!props.disabled) e.currentTarget.focus();
-      onMouseDown?.(e);
-    },
     className: cn.cn(
       "inline-flex min-w-0 items-center justify-center",
       "rounded-xs",

package/dist/cjs/components/Tabs/TabsTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, onMouseDown, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    onMouseDown={(e) => {\n      // Only intercept primary (left) button clicks. Right-click and other\n      // buttons should fall through untouched so context menus are unaffected.\n      if (e.button !== 0) {\n        onMouseDown?.(e);\n        return;\n      }\n      // Prevent :focus-visible from appearing on mouse clicks. Native focus is\n      // suppressed via preventDefault; we re-apply focus programmatically so\n      // the element remains focusable for keyboard users, but the browser won't\n      // mark the focus origin as \"pointer\", so Escape won't trigger the ring.\n      e.preventDefault();\n      if (!props.disabled) e.currentTarget.focus();\n      onMouseDown?.(e);\n    }}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-semibold-body-lg cursor-pointer text-foreground-default\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-neutral-350\",\n      \"data-[state=inactive]:hover:text-neutral-300\",\n      \"data-[state=active]:active:text-neutral-350\",\n      \"data-[state=inactive]:active:text-neutral-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-neutral-250\",\n      \"data-disabled:data-[state=inactive]:text-neutral-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,aAAa,GAAG,SAAS,QACjDC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,aAAa,CAAC,MAAM;AAGlB,UAAI,EAAE,WAAW,GAAG;AAClB,sBAAc,CAAC;AACf;AAAA,MACF;AAKA,QAAE,eAAA;AACF,UAAI,CAAC,MAAM,SAAU,GAAE,cAAc,MAAA;AACrC,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;;"}
+{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-semibold-body-lg cursor-pointer text-foreground-default\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-neutral-350\",\n      \"data-[state=inactive]:hover:text-neutral-300\",\n      \"data-[state=active]:active:text-neutral-350\",\n      \"data-[state=inactive]:active:text-neutral-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-neutral-250\",\n      \"data-disabled:data-[state=inactive]:text-neutral-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpCC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;;"}

package/dist/cjs/index.cjs

@@ -11,6 +11,7 @@ const useAudioRecorder = require("./components/AudioUpload/useAudioRecorder.cjs"
 const Autocomplete = require("./components/Autocomplete/Autocomplete.cjs");
 const Avatar = require("./components/Avatar/Avatar.cjs");
 const Badge = require("./components/Badge/Badge.cjs");
+const Banner = require("./components/Banner/Banner.cjs");
 const BottomNavigation = require("./components/BottomNavigation/BottomNavigation.cjs");
 const BottomNavigationAction = require("./components/BottomNavigation/BottomNavigationAction.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
@@ -22,6 +23,7 @@ const Count = require("./components/Count/Count.cjs");
 const Dialog = require("./components/Dialog/Dialog.cjs");
 const Divider = require("./components/Divider/Divider.cjs");
 const Drawer = require("./components/Drawer/Drawer.cjs");
+const DropdownMenu = require("./components/DropdownMenu/DropdownMenu.cjs");
 const IconButton = require("./components/IconButton/IconButton.cjs");
 const AddIcon = require("./components/Icons/AddIcon.cjs");
 const AIIcon = require("./components/Icons/AIIcon.cjs");
@@ -145,6 +147,7 @@ const InfoBox = require("./components/InfoBox/InfoBox.cjs");
 const Loader = require("./components/Loader/Loader.cjs");
 const Logo = require("./components/Logo/Logo.cjs");
 const MobileStepper = require("./components/MobileStepper/MobileStepper.cjs");
+const OnlineBlinkingIcon = require("./components/OnlineBlinkingIcon/OnlineBlinkingIcon.cjs");
 const Pagination = require("./components/Pagination/Pagination.cjs");
 const PasswordField = require("./components/PasswordField/PasswordField.cjs");
 const Pill = require("./components/Pill/Pill.cjs");
@@ -181,6 +184,7 @@ exports.AvatarFallback = Avatar.AvatarFallback;
 exports.AvatarImage = Avatar.AvatarImage;
 exports.AvatarRoot = Avatar.AvatarRoot;
 exports.Badge = Badge.Badge;
+exports.Banner = Banner.Banner;
 exports.BottomNavigation = BottomNavigation.BottomNavigation;
 exports.BottomNavigationAction = BottomNavigationAction.BottomNavigationAction;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
@@ -219,6 +223,13 @@ exports.DrawerHeader = Drawer.DrawerHeader;
 exports.DrawerOverlay = Drawer.DrawerOverlay;
 exports.DrawerTitle = Drawer.DrawerTitle;
 exports.DrawerTrigger = Drawer.DrawerTrigger;
+exports.DropdownMenu = DropdownMenu.DropdownMenu;
+exports.DropdownMenuContent = DropdownMenu.DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenu.DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenu.DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenu.DropdownMenuLabel;
+exports.DropdownMenuSeparator = DropdownMenu.DropdownMenuSeparator;
+exports.DropdownMenuTrigger = DropdownMenu.DropdownMenuTrigger;
 exports.IconButton = IconButton.IconButton;
 exports.AddIcon = AddIcon.AddIcon;
 exports.AIIcon = AIIcon.AIIcon;
@@ -344,6 +355,7 @@ exports.InfoBoxTrigger = InfoBox.InfoBoxTrigger;
 exports.Loader = Loader.Loader;
 exports.Logo = Logo.Logo;
 exports.MobileStepper = MobileStepper.MobileStepper;
+exports.OnlineBlinkingIcon = OnlineBlinkingIcon.OnlineBlinkingIcon;
 exports.Pagination = Pagination.Pagination;
 exports.PasswordField = PasswordField.PasswordField;
 exports.Pill = Pill.Pill;

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/Banner/Banner.mjs

@@ -0,0 +1,54 @@
+"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

@@ -0,0 +1 @@
+{"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;"}

package/dist/components/DropdownMenu/DropdownMenu.mjs

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+const DropdownMenuContent = React.forwardRef(({ className, style, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "min-w-[180px] overflow-y-auto rounded-lg border border-neutral-200 bg-surface-page p-1 shadow-lg",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    style: {
+      zIndex: "var(--fanvue-ui-portal-z-index, 50)",
+      maxHeight: "var(--radix-dropdown-menu-content-available-height)",
+      ...style
+    },
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+const DropdownMenuLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn("typography-medium-body-xs px-2 py-1.5 text-foreground-secondary", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+const DropdownMenuItem = React.forwardRef(
+  ({
+    size = "sm",
+    destructive,
+    leadingIcon,
+    trailingIcon,
+    selected,
+    className,
+    children,
+    asChild,
+    ...props
+  }, ref) => {
+    const itemClassName = cn(
+      "flex w-full cursor-pointer items-center gap-1 rounded px-2 outline-none",
+      "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-neutral-100",
+      size === "sm" ? "min-h-[34px] py-1" : "min-h-[40px] py-1.5",
+      size === "sm" ? "typography-medium-body-sm" : "typography-medium-body-md",
+      destructive && "text-error-default",
+      selected && "bg-success-background",
+      className
+    );
+    if (asChild) {
+      return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, asChild: true, className: itemClassName, ...props, children });
+    }
+    return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Item, { ref, className: itemClassName, ...props, children: [
+      leadingIcon,
+      /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+      trailingIcon
+    ] });
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("my-1 h-px bg-neutral-200", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+};
+//# sourceMappingURL=DropdownMenu.mjs.map

package/dist/components/DropdownMenu/DropdownMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.mjs","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link DropdownMenu} root component. */\nexport interface DropdownMenuProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\n\n/** Root component that manages open/close state for a dropdown menu. */\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\n/** Props for the {@link DropdownMenuTrigger} component. */\nexport type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Trigger\n>;\n\n/** The element that toggles the dropdown menu when clicked. */\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/** Props for the {@link DropdownMenuContent} component. */\nexport interface DropdownMenuContentProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}\n\n/**\n * The positioned content panel rendered inside a portal.\n *\n * Override the portal z-index per-instance via `style={{ zIndex: 1500 }}` or\n * globally with the `--fanvue-ui-portal-z-index` CSS custom property.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button>Open</Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem>Option 1</DropdownMenuItem>\n *     <DropdownMenuItem>Option 2</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n */\nexport const DropdownMenuContent = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,\n  DropdownMenuContentProps\n>(({ className, style, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"min-w-[180px] overflow-y-auto rounded-lg border border-neutral-200 bg-surface-page p-1 shadow-lg\",\n        \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n        \"data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2\",\n        \"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n        className,\n      )}\n      style={{\n        zIndex: \"var(--fanvue-ui-portal-z-index, 50)\",\n        maxHeight: \"var(--radix-dropdown-menu-content-available-height)\",\n        ...style,\n      }}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n));\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\n/** Props for the {@link DropdownMenuGroup} component. */\nexport type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Group\n>;\n\n/** Groups related menu items. Accepts an optional `DropdownMenuLabel`. */\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\";\n\n/** Props for the {@link DropdownMenuLabel} component. */\nexport interface DropdownMenuLabelProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {}\n\n/** A label for a group of items. Not focusable or selectable. */\nexport const DropdownMenuLabel = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,\n  DropdownMenuLabelProps\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-medium-body-xs px-2 py-1.5 text-foreground-secondary\", className)}\n    {...props}\n  />\n));\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\n/** Available sizes for a dropdown menu item. */\nexport type DropdownMenuItemSize = \"sm\" | \"md\";\n\nexport interface DropdownMenuItemProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n  /** Height of the menu item row. @default \"sm\" */\n  size?: DropdownMenuItemSize;\n  /** Whether the item uses destructive (error) styling. */\n  destructive?: boolean;\n  /** Icon rendered before the label. */\n  leadingIcon?: React.ReactNode;\n  /** Icon rendered after the label. */\n  trailingIcon?: React.ReactNode;\n  /** Whether the item is in a selected state. */\n  selected?: boolean;\n}\n\n/**\n * An individual item within a {@link DropdownMenuContent}.\n *\n * @example\n * ```tsx\n * <DropdownMenuItem>Edit profile</DropdownMenuItem>\n * <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n * <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>\n *\n * // As a link\n * <DropdownMenuItem asChild>\n *   <a href=\"/settings\">Settings</a>\n * </DropdownMenuItem>\n * ```\n */\nexport const DropdownMenuItem = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,\n  DropdownMenuItemProps\n>(\n  (\n    {\n      size = \"sm\",\n      destructive,\n      leadingIcon,\n      trailingIcon,\n      selected,\n      className,\n      children,\n      asChild,\n      ...props\n    },\n    ref,\n  ) => {\n    const itemClassName = cn(\n      \"flex w-full cursor-pointer items-center gap-1 rounded px-2 outline-none\",\n      \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n      \"data-[highlighted]:bg-neutral-100\",\n      size === \"sm\" ? \"min-h-[34px] py-1\" : \"min-h-[40px] py-1.5\",\n      size === \"sm\" ? \"typography-medium-body-sm\" : \"typography-medium-body-md\",\n      destructive && \"text-error-default\",\n      selected && \"bg-success-background\",\n      className,\n    );\n\n    if (asChild) {\n      return (\n        <DropdownMenuPrimitive.Item ref={ref} asChild className={itemClassName} {...props}>\n          {children}\n        </DropdownMenuPrimitive.Item>\n      );\n    }\n\n    return (\n      <DropdownMenuPrimitive.Item ref={ref} className={itemClassName} {...props}>\n        {leadingIcon}\n        <span className=\"flex-1\">{children}</span>\n        {trailingIcon}\n      </DropdownMenuPrimitive.Item>\n    );\n  },\n);\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\n/** Props for the {@link DropdownMenuSeparator} component. */\nexport interface DropdownMenuSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {}\n\n/** Visual separator between groups of items. */\nexport const DropdownMenuSeparator = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,\n  DropdownMenuSeparatorProps\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"my-1 h-px bg-neutral-200\", className)}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n"],"names":[],"mappings":";;;;;AASO,MAAM,eAAe,sBAAsB;AAQ3C,MAAM,sBAAsB,sBAAsB;AACzD,oBAAoB,cAAc;AAyB3B,MAAM,sBAAsB,MAAM,WAGvC,CAAC,EAAE,WAAW,OAAO,aAAa,GAAG,GAAG,SAAS,QACjD,oBAAC,sBAAsB,QAAtB,EACC,UAAA;AAAA,EAAC,sBAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,GAAG;AAAA,IAAA;AAAA,IAEJ,GAAG;AAAA,EAAA;AACN,GACF,CACD;AACD,oBAAoB,cAAc;AAQ3B,MAAM,oBAAoB,sBAAsB;AACvD,kBAAkB,cAAc;AAOzB,MAAM,oBAAoB,MAAM,WAGrC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,sBAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,mEAAmE,SAAS;AAAA,IACzF,GAAG;AAAA,EAAA;AACN,CACD;AACD,kBAAkB,cAAc;AAkCzB,MAAM,mBAAmB,MAAM;AAAA,EAIpC,CACE;AAAA,IACE,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,OAAO,sBAAsB;AAAA,MACtC,SAAS,OAAO,8BAA8B;AAAA,MAC9C,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,IAAA;AAGF,QAAI,SAAS;AACX,aACE,oBAAC,sBAAsB,MAAtB,EAA2B,KAAU,SAAO,MAAC,WAAW,eAAgB,GAAG,OACzE,SAAA,CACH;AAAA,IAEJ;AAEA,WACE,qBAAC,sBAAsB,MAAtB,EAA2B,KAAU,WAAW,eAAgB,GAAG,OACjE,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,QAAA,EAAK,WAAU,UAAU,SAAA,CAAS;AAAA,MAClC;AAAA,IAAA,GACH;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAOxB,MAAM,wBAAwB,MAAM,WAGzC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,sBAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,4BAA4B,SAAS;AAAA,IAClD,GAAG;AAAA,EAAA;AACN,CACD;AACD,sBAAsB,cAAc;"}

package/dist/components/OnlineBlinkingIcon/OnlineBlinkingIcon.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const sizeClasses = {
+  sm: "h-2 w-2",
+  md: "h-3 w-3"
+};
+const OnlineBlinkingIcon = React.forwardRef(
+  ({ className, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn("relative inline-block rounded-full", sizeClasses[size], className),
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 animate-ping rounded-full bg-success-default opacity-75" }),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full bg-success-default" })
+      ]
+    }
+  )
+);
+OnlineBlinkingIcon.displayName = "OnlineBlinkingIcon";
+export {
+  OnlineBlinkingIcon
+};
+//# sourceMappingURL=OnlineBlinkingIcon.mjs.map

package/dist/components/OnlineBlinkingIcon/OnlineBlinkingIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnlineBlinkingIcon.mjs","sources":["../../../src/components/OnlineBlinkingIcon/OnlineBlinkingIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type OnlineBlinkingIconSize = \"sm\" | \"md\";\n\nexport interface OnlineBlinkingIconProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** @default \"sm\" */\n  size?: OnlineBlinkingIconSize;\n}\n\nconst sizeClasses: Record<OnlineBlinkingIconSize, string> = {\n  sm: \"h-2 w-2\",\n  md: \"h-3 w-3\",\n};\n\n/**\n * A small pulsing green dot indicator used to show online status.\n * Decorative only — pair with a visually-hidden label at the usage site\n * to convey status to screen readers.\n *\n * @example\n * ```tsx\n * <OnlineBlinkingIcon />\n * <OnlineBlinkingIcon size=\"md\" />\n * ```\n */\nexport const OnlineBlinkingIcon = React.forwardRef<HTMLSpanElement, OnlineBlinkingIconProps>(\n  ({ className, size = \"sm\", ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(\"relative inline-block rounded-full\", sizeClasses[size], className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <span className=\"absolute inset-0 animate-ping rounded-full bg-success-default opacity-75\" />\n      <span className=\"absolute inset-0 rounded-full bg-success-default\" />\n    </span>\n  ),\n);\n\nOnlineBlinkingIcon.displayName = \"OnlineBlinkingIcon\";\n"],"names":[],"mappings":";;;;AAUA,MAAM,cAAsD;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AACN;AAaO,MAAM,qBAAqB,MAAM;AAAA,EACtC,CAAC,EAAE,WAAW,OAAO,MAAM,GAAG,MAAA,GAAS,QACrC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,sCAAsC,YAAY,IAAI,GAAG,SAAS;AAAA,MAChF,eAAY;AAAA,MACX,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,2EAAA,CAA2E;AAAA,QAC3F,oBAAC,QAAA,EAAK,WAAU,mDAAA,CAAmD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzE;AAEA,mBAAmB,cAAc;"}

package/dist/components/Tabs/TabsTrigger.mjs

@@ -3,19 +3,10 @@ import { jsx } from "react/jsx-runtime";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
-const TabsTrigger = React.forwardRef(({ className, children, onMouseDown, ...props }, ref) => /* @__PURE__ */ jsx(
+const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
-    onMouseDown: (e) => {
-      if (e.button !== 0) {
-        onMouseDown?.(e);
-        return;
-      }
-      e.preventDefault();
-      if (!props.disabled) e.currentTarget.focus();
-      onMouseDown?.(e);
-    },
     className: cn(
       "inline-flex min-w-0 items-center justify-center",
       "rounded-xs",

package/dist/components/Tabs/TabsTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, onMouseDown, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    onMouseDown={(e) => {\n      // Only intercept primary (left) button clicks. Right-click and other\n      // buttons should fall through untouched so context menus are unaffected.\n      if (e.button !== 0) {\n        onMouseDown?.(e);\n        return;\n      }\n      // Prevent :focus-visible from appearing on mouse clicks. Native focus is\n      // suppressed via preventDefault; we re-apply focus programmatically so\n      // the element remains focusable for keyboard users, but the browser won't\n      // mark the focus origin as \"pointer\", so Escape won't trigger the ring.\n      e.preventDefault();\n      if (!props.disabled) e.currentTarget.focus();\n      onMouseDown?.(e);\n    }}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-semibold-body-lg cursor-pointer text-foreground-default\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-neutral-350\",\n      \"data-[state=inactive]:hover:text-neutral-300\",\n      \"data-[state=active]:active:text-neutral-350\",\n      \"data-[state=inactive]:active:text-neutral-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-neutral-250\",\n      \"data-disabled:data-[state=inactive]:text-neutral-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,aAAa,GAAG,SAAS,QACjD;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,aAAa,CAAC,MAAM;AAGlB,UAAI,EAAE,WAAW,GAAG;AAClB,sBAAc,CAAC;AACf;AAAA,MACF;AAKA,QAAE,eAAA;AACF,UAAI,CAAC,MAAM,SAAU,GAAE,cAAc,MAAA;AACrC,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;"}
+{"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-semibold-body-lg cursor-pointer text-foreground-default\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-neutral-350\",\n      \"data-[state=inactive]:hover:text-neutral-300\",\n      \"data-[state=active]:active:text-neutral-350\",\n      \"data-[state=inactive]:active:text-neutral-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-neutral-250\",\n      \"data-disabled:data-[state=inactive]:text-neutral-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;"}

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { ClassValue } from 'clsx';
 import { default as default_2 } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { JSX } from 'react/jsx-runtime';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -370,6 +371,46 @@ export declare const BankIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttr
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A promotional banner card with gradient backgrounds, optional badge,
+ * heading, description, and call-to-action button.
+ *
+ * @example
+ * ```tsx
+ * <Banner
+ *   variant="primary"
+ *   badgeLabel="New"
+ *   heading="Boost your earnings"
+ *   description="Try our latest feature to grow faster."
+ *   cta={{ label: "Learn more", onClick: handleClick }}
+ * />
+ * ```
+ */
+export declare const Banner: React_2.ForwardRefExoticComponent<BannerProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface BannerProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Gradient variant controlling the background colours. @default "primary" */
+    variant?: BannerVariant;
+    /** Text rendered inside a `Badge` at the top of the banner. */
+    badgeLabel?: string;
+    /** Primary heading displayed below the badge. Rendered as an `<h3>`. */
+    heading?: React_2.ReactNode;
+    /** Supporting copy displayed below the heading. */
+    description?: React_2.ReactNode;
+    /**
+     * Call-to-action button config. Renders a text-style `Button` with an arrow icon.
+     * Pass `icon` to override the default `ArrowRightIcon`.
+     */
+    cta?: {
+        label: string;
+        onClick: () => void;
+        icon?: React_2.ReactNode;
+    };
+}
+
+/** Gradient variant of the banner. */
+export declare type BannerVariant = "primary" | "secondary" | "tertiary";
+
 export declare const BellIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -1104,6 +1145,97 @@ export declare const DrawerTrigger: React_2.ForwardRefExoticComponent<DialogPrim
 /** Props for the {@link DrawerTrigger} component. */
 export declare type DrawerTriggerProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
 
+/** Root component that manages open/close state for a dropdown menu. */
+export declare const DropdownMenu: React_2.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+
+/**
+ * The positioned content panel rendered inside a portal.
+ *
+ * Override the portal z-index per-instance via `style={{ zIndex: 1500 }}` or
+ * globally with the `--fanvue-ui-portal-z-index` CSS custom property.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button>Open</Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Option 1</DropdownMenuItem>
+ *     <DropdownMenuItem>Option 2</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
+export declare const DropdownMenuContent: React_2.ForwardRefExoticComponent<DropdownMenuContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link DropdownMenuContent} component. */
+export declare interface DropdownMenuContentProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+}
+
+/** Groups related menu items. Accepts an optional `DropdownMenuLabel`. */
+export declare const DropdownMenuGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link DropdownMenuGroup} component. */
+export declare type DropdownMenuGroupProps = React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>;
+
+/**
+ * An individual item within a {@link DropdownMenuContent}.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuItem>Edit profile</DropdownMenuItem>
+ * <DropdownMenuItem destructive>Delete</DropdownMenuItem>
+ * <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>
+ *
+ * // As a link
+ * <DropdownMenuItem asChild>
+ *   <a href="/settings">Settings</a>
+ * </DropdownMenuItem>
+ * ```
+ */
+export declare const DropdownMenuItem: React_2.ForwardRefExoticComponent<DropdownMenuItemProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface DropdownMenuItemProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+    /** Height of the menu item row. @default "sm" */
+    size?: DropdownMenuItemSize;
+    /** Whether the item uses destructive (error) styling. */
+    destructive?: boolean;
+    /** Icon rendered before the label. */
+    leadingIcon?: React_2.ReactNode;
+    /** Icon rendered after the label. */
+    trailingIcon?: React_2.ReactNode;
+    /** Whether the item is in a selected state. */
+    selected?: boolean;
+}
+
+/** Available sizes for a dropdown menu item. */
+export declare type DropdownMenuItemSize = "sm" | "md";
+
+/** A label for a group of items. Not focusable or selectable. */
+export declare const DropdownMenuLabel: React_2.ForwardRefExoticComponent<DropdownMenuLabelProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link DropdownMenuLabel} component. */
+export declare interface DropdownMenuLabelProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+}
+
+/** Props for the {@link DropdownMenu} root component. */
+export declare interface DropdownMenuProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {
+}
+
+/** Visual separator between groups of items. */
+export declare const DropdownMenuSeparator: React_2.ForwardRefExoticComponent<DropdownMenuSeparatorProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link DropdownMenuSeparator} component. */
+export declare interface DropdownMenuSeparatorProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {
+}
+
+/** The element that toggles the dropdown menu when clicked. */
+export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+/** Props for the {@link DropdownMenuTrigger} component. */
+export declare type DropdownMenuTriggerProps = React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>;
+
 export declare const EditIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -1475,6 +1607,26 @@ export declare const MoreVerticalIcon: React_2.ForwardRefExoticComponent<React_2
  */
 export declare type OmitDistributed<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
 
+/**
+ * A small pulsing green dot indicator used to show online status.
+ * Decorative only — pair with a visually-hidden label at the usage site
+ * to convey status to screen readers.
+ *
+ * @example
+ * ```tsx
+ * <OnlineBlinkingIcon />
+ * <OnlineBlinkingIcon size="md" />
+ * ```
+ */
+export declare const OnlineBlinkingIcon: React_2.ForwardRefExoticComponent<OnlineBlinkingIconProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface OnlineBlinkingIconProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+    /** @default "sm" */
+    size?: OnlineBlinkingIconSize;
+}
+
+export declare type OnlineBlinkingIconSize = "sm" | "md";
+
 /**
  * Page navigation control with previous/next buttons and numbered page
  * indicators. Supports a numbered-buttons layout (`"default"`) and a compact

package/dist/index.mjs

@@ -9,6 +9,7 @@ import { useAudioRecorder } from "./components/AudioUpload/useAudioRecorder.mjs"
 import { Autocomplete } from "./components/Autocomplete/Autocomplete.mjs";
 import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from "./components/Avatar/Avatar.mjs";
 import { Badge } from "./components/Badge/Badge.mjs";
+import { Banner } from "./components/Banner/Banner.mjs";
 import { BottomNavigation } from "./components/BottomNavigation/BottomNavigation.mjs";
 import { BottomNavigationAction } from "./components/BottomNavigation/BottomNavigationAction.mjs";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/Breadcrumb/Breadcrumb.mjs";
@@ -20,6 +21,7 @@ import { Count } from "./components/Count/Count.mjs";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger } from "./components/Dialog/Dialog.mjs";
 import { Divider } from "./components/Divider/Divider.mjs";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger } from "./components/Drawer/Drawer.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./components/DropdownMenu/DropdownMenu.mjs";
 import { IconButton } from "./components/IconButton/IconButton.mjs";
 import { AddIcon } from "./components/Icons/AddIcon.mjs";
 import { AIIcon } from "./components/Icons/AIIcon.mjs";
@@ -143,6 +145,7 @@ import { InfoBox, InfoBoxContent, InfoBoxTrigger } from "./components/InfoBox/In
 import { Loader } from "./components/Loader/Loader.mjs";
 import { Logo } from "./components/Logo/Logo.mjs";
 import { MobileStepper } from "./components/MobileStepper/MobileStepper.mjs";
+import { OnlineBlinkingIcon } from "./components/OnlineBlinkingIcon/OnlineBlinkingIcon.mjs";
 import { Pagination } from "./components/Pagination/Pagination.mjs";
 import { PasswordField } from "./components/PasswordField/PasswordField.mjs";
 import { Pill } from "./components/Pill/Pill.mjs";
@@ -188,6 +191,7 @@ export {
   AvatarRoot,
   Badge,
   BankIcon,
+  Banner,
   BellIcon,
   BellOffIcon,
   BoltIcon,
@@ -254,6 +258,13 @@ export {
   DrawerOverlay,
   DrawerTitle,
   DrawerTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   EditIcon,
   EmojiIcon,
   ErrorCircleIcon,
@@ -299,6 +310,7 @@ export {
   MoonIcon,
   MoreIcon,
   MoreVerticalIcon,
+  OnlineBlinkingIcon,
   Pagination,
   PasswordField,
   PauseIcon,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -91,6 +91,7 @@
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-checkbox": "1.3.3",
     "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
     "@radix-ui/react-popover": "1.1.15",
     "@radix-ui/react-radio-group": "1.3.8",
     "@radix-ui/react-select": "2.2.6",