@fanvue/ui 2.0.0 → 2.1.1

package/dist/index.d.ts

@@ -371,46 +371,6 @@ 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>>;
@@ -1592,6 +1552,10 @@ export declare const MoreVerticalIcon: React_2.ForwardRefExoticComponent<React_2
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const NewMessageIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 /**
  * Like `Omit`, but preserves discriminated unions.
  *
@@ -1818,6 +1782,10 @@ export declare const ReplyIcon: React_2.ForwardRefExoticComponent<React_2.SVGAtt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const ReverseIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 /**
  * A text input field with a search icon and optional clear button.
  *
@@ -2216,6 +2184,242 @@ export declare interface SwitchToggleProps extends Omit<React_2.HTMLAttributes<H
 /** Height of the switch toggle in pixels. */
 export declare type SwitchToggleSize = "24" | "32" | "40";
 
+/**
+ * Semantic `<table>` element. Place inside {@link TableScrollArea}.
+ */
+export declare const Table: React_2.ForwardRefExoticComponent<TableProps & React_2.RefAttributes<HTMLTableElement>>;
+
+export declare const TableBody: React_2.ForwardRefExoticComponent<TableBodyProps & React_2.RefAttributes<HTMLTableSectionElement>>;
+
+export declare interface TableBodyProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
+}
+
+/**
+ * Surface wrapper for data tables: rounded container, spacing, and size
+ * context for {@link TableCell} descendants. Compose with {@link TableScrollArea},
+ * {@link Table}, {@link TableHeader}, {@link TableBody}, {@link TableRow},
+ * {@link TableHead}, and {@link TableCell}.
+ *
+ * @example
+ * ```tsx
+ * <TableCard size="md">
+ *   <TableScrollArea>
+ *     <Table>
+ *       <TableHeader>
+ *         <TableRow>
+ *           <TableHead>Name</TableHead>
+ *         </TableRow>
+ *       </TableHeader>
+ *       <TableBody>
+ *         <TableRow>
+ *           <TableCell>Jane Doe</TableCell>
+ *         </TableRow>
+ *       </TableBody>
+ *     </Table>
+ *   </TableScrollArea>
+ * </TableCard>
+ * ```
+ */
+export declare const TableCard: React_2.ForwardRefExoticComponent<TableCardProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TableCardProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Row density applied to {@link TableCell} descendants. @default "md" */
+    size?: TableSize;
+}
+
+export declare const TableCell: React_2.ForwardRefExoticComponent<TableCellProps & React_2.RefAttributes<HTMLTableCellElement>>;
+
+/**
+ * Horizontal group for icons, chips, and metadata inside a {@link TableCell} (Figma `gap-[10px]`).
+ */
+export declare const TableCellGroup: React_2.ForwardRefExoticComponent<TableCellGroupProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TableCellGroupProps extends React_2.HTMLAttributes<HTMLDivElement> {
+}
+
+/** Layout / typography preset for {@link TableCell} (orthogonal to {@link TableCellVariant}). */
+export declare type TableCellIntent = "default" | "checkbox" | "stacked" | "multiline" | "sideLabel";
+
+export declare interface TableCellProps extends React_2.TdHTMLAttributes<HTMLTableCellElement> {
+    /** `pillProgress` uses wider horizontal padding; row dividers match the default weight for visibility. @default "default" */
+    cellVariant?: TableCellVariant;
+    /** Alignment and typography preset for common cell types. @default "default" */
+    intent?: TableCellIntent;
+}
+
+/** Bottom border and padding preset for body cells (Figma table cell component). */
+export declare type TableCellVariant = "default" | "chip" | "pillProgress";
+
+export declare const TableFooter: React_2.ForwardRefExoticComponent<TableFooterProps & React_2.RefAttributes<HTMLTableSectionElement>>;
+
+export declare interface TableFooterProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
+}
+
+export declare const TableHead: React_2.ForwardRefExoticComponent<TableHeadProps & React_2.RefAttributes<HTMLTableCellElement>>;
+
+export declare const TableHeader: React_2.ForwardRefExoticComponent<TableHeaderProps & React_2.RefAttributes<HTMLTableSectionElement>>;
+
+export declare interface TableHeaderProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
+}
+
+/** Column layout preset for {@link TableHead}. */
+export declare type TableHeadIntent = "default" | "checkbox" | "sort" | "leading";
+
+export declare interface TableHeadProps extends React_2.ThHTMLAttributes<HTMLTableCellElement> {
+    /** Layout preset for common column types. @default "default" */
+    intent?: TableHeadIntent;
+}
+
+/**
+ * Clamps child text to a fixed number of lines inside a {@link TableCell}.
+ */
+export declare const TableLineClamp: React_2.ForwardRefExoticComponent<TableLineClampProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TableLineClampProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Number of lines before ellipsis. @default 2 */
+    lines?: 1 | 2 | 3;
+}
+
+/**
+ * Rounded thumbnail sized from {@link TableCard} `size` (`md` vs `lg`).
+ */
+export declare const TableMediaThumbnail: React_2.ForwardRefExoticComponent<TableMediaThumbnailProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TableMediaThumbnailProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Image URL. */
+    src: string;
+    /** Alt text for the image. @default "" */
+    alt?: string;
+    /** Applies the table’s blurred-media treatment. @default false */
+    blurred?: boolean;
+    /** `center` uses the fixed media column width from the lg spec. @default "start" */
+    align?: "start" | "center";
+}
+
+/**
+ * Footer bar for data tables: rows-per-page control, page navigation, and range
+ * summary. Pair `paginationSlot` with {@link Pagination} for numbered controls.
+ *
+ * @example
+ * ```tsx
+ * <TablePagination
+ *   leadingSlot={<Select size="32" aria-label="Rows per page">…</Select>}
+ *   paginationSlot={<Pagination totalPages={5} currentPage={2} onPageChange={setPage} />}
+ *   summary="20–30 of 100 rows"
+ * />
+ * ```
+ */
+export declare const TablePagination: React_2.ForwardRefExoticComponent<TablePaginationProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Layout preset for the pagination bar — desktop (range on the right) or stacked mobile. */
+export declare type TablePaginationLayout = "desktop" | "mobile";
+
+export declare interface TablePaginationProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Layout preset. @default "desktop" */
+    layout?: TablePaginationLayout;
+    /** Left (desktop) or top row (mobile) content, e.g. rows-per-page {@link Select}. */
+    leadingSlot?: React_2.ReactNode;
+    /** Center (desktop) or bottom row (mobile) content, e.g. {@link Pagination}. */
+    paginationSlot?: React_2.ReactNode;
+    /** Summary text or node (e.g. current range and total). */
+    summary: React_2.ReactNode;
+}
+
+/**
+ * Vertical layout for pill label + {@link TableProgressTrack} in a cell.
+ */
+export declare const TablePillProgressLayout: React_2.ForwardRefExoticComponent<TablePillProgressLayoutProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TablePillProgressLayoutProps extends React_2.HTMLAttributes<HTMLDivElement> {
+}
+
+/**
+ * Thin progress track used with badges in table cells (Figma pill + progress).
+ * Renders with `role="progressbar"` and a default `aria-label` of `"Progress"`.
+ */
+export declare const TableProgressTrack: React_2.ForwardRefExoticComponent<TableProgressTrackProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TableProgressTrackProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Fill width from 0–100. @default 0 */
+    value?: number;
+}
+
+export declare interface TableProps extends React_2.TableHTMLAttributes<HTMLTableElement> {
+}
+
+export declare const TableRow: React_2.ForwardRefExoticComponent<TableRowProps & React_2.RefAttributes<HTMLTableRowElement>>;
+
+export declare interface TableRowProps extends React_2.HTMLAttributes<HTMLTableRowElement> {
+}
+
+/**
+ * Rows-per-page {@link Select} styled for {@link TablePagination} (Figma field).
+ */
+export declare function TableRowsPerPageSelect(props: TableRowsPerPageSelectProps): JSX.Element;
+
+export declare interface TableRowsPerPageSelectProps {
+    /** Passed to the trigger for forms and labels. */
+    id?: string;
+    /** Accessible name for the trigger when no visible label. @default "Rows per page" */
+    "aria-label"?: string;
+}
+
+/**
+ * Horizontal scroll container for wide tables. Uses an inner scrollport so the
+ * table respects the card radius (plain `overflow-x-auto` on the table
+ * wrapper often loses rounded corners with `border-collapse`).
+ */
+export declare const TableScrollArea: React_2.ForwardRefExoticComponent<TableScrollAreaProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TableScrollAreaProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Rounds the top of the table block to match {@link TableCard}. Set `false` when {@link TableToolbar} is above this scroll area. @default true */
+    roundTop?: boolean;
+}
+
+/** Row density for body cells — `md` (60px min height) or `lg` (80px). */
+export declare type TableSize = "md" | "lg";
+
+/**
+ * Sortable column label with caption typography and a sort affordance.
+ */
+export declare const TableSortLabel: React_2.ForwardRefExoticComponent<TableSortLabelProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface TableSortLabelProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+    children: React_2.ReactNode;
+}
+
+/**
+ * Two-line primary + secondary text block for “cell + info” patterns.
+ */
+export declare function TableStackedText({ title, subtitle }: TableStackedTextProps): JSX.Element;
+
+export declare namespace TableStackedText {
+    var displayName: string;
+}
+
+export declare interface TableStackedTextProps {
+    /** Primary line (semibold body). */
+    title: React_2.ReactNode;
+    /** Secondary line (caption, muted). */
+    subtitle: React_2.ReactNode;
+}
+
+/**
+ * Small status indicator dot for table cells (Figma status column).
+ */
+export declare const TableStatusDot: React_2.ForwardRefExoticComponent<TableStatusDotProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TableStatusDotProps extends React_2.HTMLAttributes<HTMLDivElement> {
+}
+
+/**
+ * Optional toolbar row above the table (e.g. bulk selection actions).
+ */
+export declare const TableToolbar: React_2.ForwardRefExoticComponent<TableToolbarProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TableToolbarProps extends React_2.HTMLAttributes<HTMLDivElement> {
+}
+
 /**
  * Root container for a tabbed interface. Manages the active tab state and
  * coordinates {@link TabsList}, {@link TabsTrigger}, and {@link TabsContent}.

package/dist/index.mjs

@@ -9,7 +9,6 @@ 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";
@@ -98,6 +97,7 @@ import { MinusIcon } from "./components/Icons/MinusIcon.mjs";
 import { MoonIcon } from "./components/Icons/MoonIcon.mjs";
 import { MoreIcon } from "./components/Icons/MoreIcon.mjs";
 import { MoreVerticalIcon } from "./components/Icons/MoreVerticalIcon.mjs";
+import { NewMessageIcon } from "./components/Icons/NewMessageIcon.mjs";
 import { PauseIcon } from "./components/Icons/PauseIcon.mjs";
 import { PhoneIcon } from "./components/Icons/PhoneIcon.mjs";
 import { PhoneOffIcon } from "./components/Icons/PhoneOffIcon.mjs";
@@ -108,6 +108,7 @@ import { PrivacyIcon } from "./components/Icons/PrivacyIcon.mjs";
 import { RepeatIcon } from "./components/Icons/RepeatIcon.mjs";
 import { Reply2Icon } from "./components/Icons/Reply2Icon.mjs";
 import { ReplyIcon } from "./components/Icons/ReplyIcon.mjs";
+import { ReverseIcon } from "./components/Icons/ReverseIcon.mjs";
 import { SearchIcon } from "./components/Icons/SearchIcon.mjs";
 import { SendIcon } from "./components/Icons/SendIcon.mjs";
 import { SettingsIcon } from "./components/Icons/SettingsIcon.mjs";
@@ -160,6 +161,8 @@ import { Snackbar } from "./components/Snackbar/Snackbar.mjs";
 import { Switch } from "./components/Switch/Switch.mjs";
 import { SwitchField } from "./components/SwitchField/SwitchField.mjs";
 import { SwitchToggle } from "./components/SwitchToggle/SwitchToggle.mjs";
+import { Table, TableBody, TableCard, TableCell, TableCellGroup, TableFooter, TableHead, TableHeader, TableLineClamp, TableMediaThumbnail, TablePillProgressLayout, TableProgressTrack, TableRow, TableRowsPerPageSelect, TableScrollArea, TableSortLabel, TableStackedText, TableStatusDot, TableToolbar } from "./components/Table/Table.mjs";
+import { TablePagination } from "./components/Table/TablePagination.mjs";
 import { Tabs } from "./components/Tabs/Tabs.mjs";
 import { TabsContent } from "./components/Tabs/TabsContent.mjs";
 import { TabsList } from "./components/Tabs/TabsList.mjs";
@@ -191,7 +194,6 @@ export {
   AvatarRoot,
   Badge,
   BankIcon,
-  Banner,
   BellIcon,
   BellOffIcon,
   BoltIcon,
@@ -310,6 +312,7 @@ export {
   MoonIcon,
   MoreIcon,
   MoreVerticalIcon,
+  NewMessageIcon,
   OnlineBlinkingIcon,
   Pagination,
   PasswordField,
@@ -327,6 +330,7 @@ export {
   RepeatIcon,
   Reply2Icon,
   ReplyIcon,
+  ReverseIcon,
   SearchField,
   SearchIcon,
   Select,
@@ -351,6 +355,26 @@ export {
   Switch,
   SwitchField,
   SwitchToggle,
+  Table,
+  TableBody,
+  TableCard,
+  TableCell,
+  TableCellGroup,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableLineClamp,
+  TableMediaThumbnail,
+  TablePagination,
+  TablePillProgressLayout,
+  TableProgressTrack,
+  TableRow,
+  TableRowsPerPageSelect,
+  TableScrollArea,
+  TableSortLabel,
+  TableStackedText,
+  TableStatusDot,
+  TableToolbar,
   Tabs,
   TabsContent,
   TabsList,

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/utils/floatingContentCollisionPadding.mjs

@@ -0,0 +1,6 @@
+"use client";
+const FLOATING_CONTENT_COLLISION_PADDING = 16;
+export {
+  FLOATING_CONTENT_COLLISION_PADDING
+};
+//# sourceMappingURL=floatingContentCollisionPadding.mjs.map

package/dist/utils/floatingContentCollisionPadding.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingContentCollisionPadding.mjs","sources":["../../src/utils/floatingContentCollisionPadding.ts"],"sourcesContent":["/**\n * Default viewport inset for Radix-positioned panels (dropdown, select list, autocomplete).\n * Applied via `collisionPadding` so content stays off screen edges on narrow viewports.\n */\nexport const FLOATING_CONTENT_COLLISION_PADDING = 16;\n"],"names":[],"mappings":";AAIO,MAAM,qCAAqC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "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-content-primary": "#151515ff",
-  "--color-content-secondary": "#404040ff",
-  "--color-neutral-alphas-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 overflow-hidden rounded-2xl bg-gradient-to-br p-3 text-content-primary",
-          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-content-primary\": \"#151515ff\",\n  \"--color-content-secondary\": \"#404040ff\",\n  \"--color-neutral-alphas-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 overflow-hidden rounded-2xl bg-gradient-to-br p-3 text-content-primary\",\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,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,8BAA8B;AAChC;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-content-primary": "#151515ff",
-  "--color-content-secondary": "#404040ff",
-  "--color-neutral-alphas-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 overflow-hidden rounded-2xl bg-gradient-to-br p-3 text-content-primary",
-          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-content-primary\": \"#151515ff\",\n  \"--color-content-secondary\": \"#404040ff\",\n  \"--color-neutral-alphas-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 overflow-hidden rounded-2xl bg-gradient-to-br p-3 text-content-primary\",\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,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,8BAA8B;AAChC;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;"}