@fanvue/ui 1.13.1 → 1.14.1

package/dist/cjs/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /**\n   * Controlled open state. When provided, the component is in controlled mode\n   * and you must also supply `onOpenChange` to update the value.\n   */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the tooltip when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\n/**\n * Visual style variant of the tooltip content.\n *\n * - `\"tooltip\"` — simple text bubble, no border.\n * - `\"infobox\"` — richer card with a visible border, structured header, body text, and optional actions.\n */\nexport type TooltipContentVariant = \"tooltip\" | \"infobox\";\n\n/** Action button configuration for the infobox variant of {@link TooltipContent}. */\nexport interface TooltipAction {\n  /** Button label. */\n  label: string;\n  /** Click handler. */\n  onClick?: () => void;\n  /**\n   * Optional custom React node to be rendered for the action instead of the default button.\n   * Only used in the infobox variant.\n   */\n  element?: React.ReactNode;\n}\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /**\n   * Visual style variant.\n   *\n   * `\"tooltip\"` is a lightweight text bubble. `\"infobox\"` renders a structured card\n   * with optional heading, icon, pill, body text, and action buttons.\n   *\n   * @default \"tooltip\"\n   */\n  variant?: TooltipContentVariant;\n  /** Whether to show the directional arrow pointer. @default true */\n  showArrow?: boolean;\n  /**\n   * Heading text rendered in subtitle style at the top of the infobox.\n   * Infobox variant only.\n   */\n  heading?: React.ReactNode;\n  /**\n   * Icon element displayed to the left of the heading.\n   * Infobox variant only.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Pill or badge element displayed to the right of the heading.\n   * Infobox variant only.\n   */\n  pill?: React.ReactNode;\n  /**\n   * Primary action button (brand green). Rendered below the body text.\n   * Infobox variant only.\n   */\n  primaryAction?: TooltipAction;\n  /**\n   * Secondary action button (ghost). Rendered next to the primary action.\n   * Infobox variant only.\n   */\n  secondaryAction?: TooltipAction;\n}\n\n/**\n * The popup content of the tooltip. Renders inside a portal.\n *\n * Arrow direction is controlled via the `side` and `align` props (Radix passthrough).\n *\n * @example\n * ```tsx\n * // Simple tooltip\n * <TooltipContent>Info text</TooltipContent>\n *\n * // Infobox with structured content\n * <TooltipContent\n *   variant=\"infobox\"\n *   heading=\"Title\"\n *   icon={<InfoCircleIcon className=\"size-5\" />}\n *   primaryAction={{ label: \"OK\", onClick: () => {} }}\n *   secondaryAction={{ label: \"Dismiss\" }}\n * >\n *   Info text\n * </TooltipContent>\n * ```\n */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(\n  (\n    {\n      className,\n      variant = \"tooltip\",\n      showArrow = true,\n      sideOffset = 8,\n      heading,\n      icon,\n      pill,\n      primaryAction,\n      secondaryAction,\n      children,\n      side,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInfobox = variant === \"infobox\";\n    const hasHeader =\n      isInfobox && (icon !== undefined || heading !== undefined || pill !== undefined);\n    const hasActions = isInfobox && (primaryAction !== undefined || secondaryAction !== undefined);\n\n    return (\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n          className={cn(\n            \"typography-body-2-regular max-w-[320px] overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n            isInfobox && \"border border-neutral-200\",\n            className,\n          )}\n          align=\"center\"\n          arrowPadding={12}\n          side={side}\n          {...props}\n        >\n          {isInfobox ? (\n            <div className=\"flex flex-col gap-3\">\n              {hasHeader && (\n                <div className=\"flex items-center gap-3\">\n                  {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n                  {heading && (\n                    <p className=\"typography-subtitle min-w-0 flex-1 text-background-inverse-solid\">\n                      {heading}\n                    </p>\n                  )}\n                  {pill && <div className=\"shrink-0\">{pill}</div>}\n                </div>\n              )}\n              {children && (\n                <div className=\"typography-body-2-regular text-background-inverse-solid\">\n                  {children}\n                </div>\n              )}\n              {hasActions && (\n                <div className=\"flex items-center gap-1\">\n                  {primaryAction &&\n                    (primaryAction.element ? (\n                      primaryAction.element\n                    ) : (\n                      <Button variant=\"brand\" size=\"32\" onClick={primaryAction.onClick}>\n                        {primaryAction.label}\n                      </Button>\n                    ))}\n                  {secondaryAction &&\n                    (secondaryAction.element ? (\n                      secondaryAction.element\n                    ) : (\n                      <Button variant=\"tertiary\" size=\"32\" onClick={secondaryAction.onClick}>\n                        {secondaryAction.label}\n                      </Button>\n                    ))}\n                </div>\n              )}\n            </div>\n          ) : (\n            children\n          )}\n          {showArrow && (\n            <TooltipPrimitive.Arrow\n              className={\"-translate-y-px! fill-background-solid stroke-2 stroke-background-solid\"}\n              width={12}\n              height={6}\n            />\n          )}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    );\n  },\n);\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":["TooltipPrimitive","React","jsx","jsxs","cn","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,kBAAkBA,4BAAiB;AAgBzC,MAAM,UAAUA,4BAAiB;AAMjC,MAAM,iBAAiBA,4BAAiB;AAqFxC,MAAM,iBAAiBC,iBAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,YAAY;AAC9B,UAAM,YACJ,cAAc,SAAS,UAAa,YAAY,UAAa,SAAS;AACxE,UAAM,aAAa,cAAc,kBAAkB,UAAa,oBAAoB;AAEpF,WACEC,2BAAAA,IAACF,4BAAiB,QAAjB,EACC,UAAAG,2BAAAA;AAAAA,MAACH,4BAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,QAC3D,WAAWI,GAAAA;AAAAA,UACT;AAAA,UACA,aAAa;AAAA,UACb;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,cAAc;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,YACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,YAAA,aACCA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,QAAQD,2BAAAA,IAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,cAC/C,WACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,oEACV,UAAA,SACH;AAAA,cAED,QAAQA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,YAAA,GAC3C;AAAA,YAED,YACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,2DACZ,UACH;AAAA,YAED,cACCC,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,kBACE,cAAc,UACb,cAAc,yCAEbE,OAAAA,QAAA,EAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,cAAc,SACtD,wBAAc,MAAA,CACjB;AAAA,cAEH,oBACE,gBAAgB,UACf,gBAAgB,UAEhBH,2BAAAA,IAACG,OAAAA,QAAA,EAAO,SAAQ,YAAW,MAAK,MAAK,SAAS,gBAAgB,SAC3D,0BAAgB,OACnB;AAAA,YAAA,EAAA,CAEN;AAAA,UAAA,EAAA,CAEJ,IAEA;AAAA,UAED,aACCH,2BAAAA;AAAAA,YAACF,4BAAiB;AAAA,YAAjB;AAAA,cACC,WAAW;AAAA,cACX,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /**\n   * Controlled open state. When provided, the component is in controlled mode\n   * and you must also supply `onOpenChange` to update the value.\n   */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the tooltip when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\n/**\n * Visual style variant of the tooltip content.\n *\n * - `\"tooltip\"` — simple text bubble, no border.\n * - `\"infobox\"` — richer card with a visible border, structured header, body text, and optional actions.\n */\nexport type TooltipContentVariant = \"tooltip\" | \"infobox\";\n\n/** Action button configuration for the infobox variant of {@link TooltipContent}. */\nexport interface TooltipAction {\n  /** Button label. */\n  label: string;\n  /** Click handler. */\n  onClick?: () => void;\n  /**\n   * Optional custom React node to be rendered for the action instead of the default button.\n   * Only used in the infobox variant.\n   */\n  element?: React.ReactNode;\n}\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /**\n   * Visual style variant.\n   *\n   * `\"tooltip\"` is a lightweight text bubble. `\"infobox\"` renders a structured card\n   * with optional heading, icon, pill, body text, and action buttons.\n   *\n   * @default \"tooltip\"\n   */\n  variant?: TooltipContentVariant;\n  /** Whether to show the directional arrow pointer. @default true */\n  showArrow?: boolean;\n  /**\n   * Heading text rendered in subtitle style at the top of the infobox.\n   * Infobox variant only.\n   */\n  heading?: React.ReactNode;\n  /**\n   * Icon element displayed to the left of the heading.\n   * Infobox variant only.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Pill or badge element displayed to the right of the heading.\n   * Infobox variant only.\n   */\n  pill?: React.ReactNode;\n  /**\n   * Primary action button (brand green). Rendered below the body text.\n   * Infobox variant only.\n   */\n  primaryAction?: TooltipAction;\n  /**\n   * Secondary action button (ghost). Rendered next to the primary action.\n   * Infobox variant only.\n   */\n  secondaryAction?: TooltipAction;\n}\n\nconst ActionButton = ({\n  action,\n  variant,\n}: {\n  action: TooltipAction;\n  variant: \"brand\" | \"tertiary\";\n}) =>\n  action.element ? (\n    action.element\n  ) : (\n    <Button variant={variant} size=\"32\" onClick={action.onClick}>\n      {action.label}\n    </Button>\n  );\n\nconst InfoboxContent = ({\n  icon,\n  heading,\n  pill,\n  children,\n  primaryAction,\n  secondaryAction,\n  hasHeader,\n  hasActions,\n}: {\n  icon?: React.ReactNode;\n  heading?: React.ReactNode;\n  pill?: React.ReactNode;\n  children?: React.ReactNode;\n  primaryAction?: TooltipAction;\n  secondaryAction?: TooltipAction;\n  hasHeader: boolean;\n  hasActions: boolean;\n}) => (\n  <div className=\"flex flex-col gap-3\">\n    {hasHeader && (\n      <div className=\"flex items-center gap-3\">\n        {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n        {heading && (\n          <p className=\"typography-semibold-body-lg min-w-0 flex-1 text-foreground-inverse\">\n            {heading}\n          </p>\n        )}\n        {pill && <div className=\"shrink-0\">{pill}</div>}\n      </div>\n    )}\n    {children && (\n      <div className=\"typography-regular-body-md text-foreground-inverse\">{children}</div>\n    )}\n    {hasActions && (\n      <div className=\"flex items-center gap-1\">\n        {primaryAction && <ActionButton action={primaryAction} variant=\"brand\" />}\n        {secondaryAction && <ActionButton action={secondaryAction} variant=\"tertiary\" />}\n      </div>\n    )}\n  </div>\n);\n\n/**\n * The popup content of the tooltip. Renders inside a portal.\n *\n * Arrow direction is controlled via the `side` and `align` props (Radix passthrough).\n *\n * @example\n * ```tsx\n * // Simple tooltip\n * <TooltipContent>Info text</TooltipContent>\n *\n * // Infobox with structured content\n * <TooltipContent\n *   variant=\"infobox\"\n *   heading=\"Title\"\n *   icon={<InfoCircleIcon className=\"size-5\" />}\n *   primaryAction={{ label: \"OK\", onClick: () => {} }}\n *   secondaryAction={{ label: \"Dismiss\" }}\n * >\n *   Info text\n * </TooltipContent>\n * ```\n */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(\n  (\n    {\n      className,\n      variant = \"tooltip\",\n      showArrow = true,\n      sideOffset = 8,\n      heading,\n      icon,\n      pill,\n      primaryAction,\n      secondaryAction,\n      children,\n      side,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInfobox = variant === \"infobox\";\n    const hasHeader =\n      isInfobox && (icon !== undefined || heading !== undefined || pill !== undefined);\n    const hasActions = isInfobox && (primaryAction !== undefined || secondaryAction !== undefined);\n\n    return (\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n          className={cn(\n            \"typography-regular-body-md max-w-[320px] overflow-hidden rounded-3xl bg-surface-pageinverse p-4 text-foreground-inverse shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n            isInfobox && \"border border-neutral-200\",\n            className,\n          )}\n          align=\"center\"\n          arrowPadding={12}\n          side={side}\n          {...props}\n        >\n          {isInfobox ? (\n            <InfoboxContent\n              icon={icon}\n              heading={heading}\n              pill={pill}\n              primaryAction={primaryAction}\n              secondaryAction={secondaryAction}\n              hasHeader={hasHeader}\n              hasActions={hasActions}\n            >\n              {children}\n            </InfoboxContent>\n          ) : (\n            children\n          )}\n          {showArrow && (\n            <TooltipPrimitive.Arrow\n              className={\n                \"-translate-y-px! fill-surface-pageinverse stroke-2 stroke-surface-pageinverse\"\n              }\n              width={12}\n              height={6}\n            />\n          )}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    );\n  },\n);\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":["TooltipPrimitive","jsx","Button","jsxs","React","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,kBAAkBA,4BAAiB;AAgBzC,MAAM,UAAUA,4BAAiB;AAMjC,MAAM,iBAAiBA,4BAAiB;AA+D/C,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIE,OAAO,UACL,OAAO,UAEPC,2BAAAA,IAACC,OAAAA,QAAA,EAAO,SAAkB,MAAK,MAAK,SAAS,OAAO,SACjD,iBAAO,OACV;AAGJ,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAUEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,EAAA,aACCA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAA,QAAQF,2BAAAA,IAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,IAC/C,WACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,sEACV,UAAA,SACH;AAAA,IAED,QAAQA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,EAAA,GAC3C;AAAA,EAED,YACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,sDAAsD,UAAS;AAAA,EAE/E,cACCE,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAA,iBAAiBF,2BAAAA,IAAC,cAAA,EAAa,QAAQ,eAAe,SAAQ,SAAQ;AAAA,IACtE,mBAAmBA,2BAAAA,IAAC,cAAA,EAAa,QAAQ,iBAAiB,SAAQ,WAAA,CAAW;AAAA,EAAA,EAAA,CAChF;AAAA,GAEJ;AAyBK,MAAM,iBAAiBG,iBAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,YAAY;AAC9B,UAAM,YACJ,cAAc,SAAS,UAAa,YAAY,UAAa,SAAS;AACxE,UAAM,aAAa,cAAc,kBAAkB,UAAa,oBAAoB;AAEpF,WACEH,2BAAAA,IAACD,4BAAiB,QAAjB,EACC,UAAAG,2BAAAA;AAAAA,MAACH,4BAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,QAC3D,WAAWK,GAAAA;AAAAA,UACT;AAAA,UACA,aAAa;AAAA,UACb;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,cAAc;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,YACCJ,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UAAA,IAGH;AAAA,UAED,aACCA,2BAAAA;AAAAA,YAACD,4BAAiB;AAAA,YAAjB;AAAA,cACC,WACE;AAAA,cAEF,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;;;"}

package/dist/cjs/index.cjs

@@ -12,36 +12,123 @@ const Chip = require("./components/Chip/Chip.cjs");
 const Count = require("./components/Count/Count.cjs");
 const Divider = require("./components/Divider/Divider.cjs");
 const IconButton = require("./components/IconButton/IconButton.cjs");
+const AddIcon = require("./components/Icons/AddIcon.cjs");
+const AIIcon = require("./components/Icons/AIIcon.cjs");
+const AlertIcon = require("./components/Icons/AlertIcon.cjs");
+const ArrowDownIcon = require("./components/Icons/ArrowDownIcon.cjs");
+const ArrowLeftIcon = require("./components/Icons/ArrowLeftIcon.cjs");
 const ArrowRightIcon = require("./components/Icons/ArrowRightIcon.cjs");
+const ArrowUpIcon = require("./components/Icons/ArrowUpIcon.cjs");
 const ArrowUpRightIcon = require("./components/Icons/ArrowUpRightIcon.cjs");
+const BankIcon = require("./components/Icons/BankIcon.cjs");
+const BellIcon = require("./components/Icons/BellIcon.cjs");
+const BellOffIcon = require("./components/Icons/BellOffIcon.cjs");
+const BoltIcon = require("./components/Icons/BoltIcon.cjs");
+const BulbIcon = require("./components/Icons/BulbIcon.cjs");
+const Calendar2Icon = require("./components/Icons/Calendar2Icon.cjs");
+const CalendarIcon = require("./components/Icons/CalendarIcon.cjs");
+const CameraIcon = require("./components/Icons/CameraIcon.cjs");
+const ChartIcon = require("./components/Icons/ChartIcon.cjs");
 const CheckCircleIcon = require("./components/Icons/CheckCircleIcon.cjs");
 const CheckIcon = require("./components/Icons/CheckIcon.cjs");
 const CheckOutlineIcon = require("./components/Icons/CheckOutlineIcon.cjs");
 const ChevronDownIcon = require("./components/Icons/ChevronDownIcon.cjs");
 const ChevronLeftIcon = require("./components/Icons/ChevronLeftIcon.cjs");
 const ChevronRightIcon = require("./components/Icons/ChevronRightIcon.cjs");
+const ChevronUpIcon = require("./components/Icons/ChevronUpIcon.cjs");
+const ClockIcon = require("./components/Icons/ClockIcon.cjs");
 const CloseIcon = require("./components/Icons/CloseIcon.cjs");
+const CodeIcon = require("./components/Icons/CodeIcon.cjs");
+const CoinIcon = require("./components/Icons/CoinIcon.cjs");
+const CompassIcon = require("./components/Icons/CompassIcon.cjs");
+const CopyIcon = require("./components/Icons/CopyIcon.cjs");
 const CrossIcon = require("./components/Icons/CrossIcon.cjs");
 const CrownIcon = require("./components/Icons/CrownIcon.cjs");
+const DiamondIcon = require("./components/Icons/DiamondIcon.cjs");
+const DiscountIcon = require("./components/Icons/DiscountIcon.cjs");
+const DonateIcon = require("./components/Icons/DonateIcon.cjs");
+const DoubleTickIcon = require("./components/Icons/DoubleTickIcon.cjs");
+const DownloadIcon = require("./components/Icons/DownloadIcon.cjs");
+const EditIcon = require("./components/Icons/EditIcon.cjs");
 const ErrorCircleIcon = require("./components/Icons/ErrorCircleIcon.cjs");
 const ErrorIcon = require("./components/Icons/ErrorIcon.cjs");
+const ExpandIcon = require("./components/Icons/ExpandIcon.cjs");
 const EyeClosedIcon = require("./components/Icons/EyeClosedIcon.cjs");
 const EyeIcon = require("./components/Icons/EyeIcon.cjs");
-const FireIcon = require("./components/Icons/FireIcon.cjs");
+const EyeSlashIcon = require("./components/Icons/EyeSlashIcon.cjs");
+const FlagIcon = require("./components/Icons/FlagIcon.cjs");
+const FlameIcon = require("./components/Icons/FlameIcon.cjs");
+const FolderIcon = require("./components/Icons/FolderIcon.cjs");
+const ForwardIcon = require("./components/Icons/ForwardIcon.cjs");
+const GalleryIcon = require("./components/Icons/GalleryIcon.cjs");
+const GenderIcon = require("./components/Icons/GenderIcon.cjs");
+const GiftIcon = require("./components/Icons/GiftIcon.cjs");
+const HelpIcon = require("./components/Icons/HelpIcon.cjs");
 const HomeIcon = require("./components/Icons/HomeIcon.cjs");
+const HourglassIcon = require("./components/Icons/HourglassIcon.cjs");
+const ImageIcon = require("./components/Icons/ImageIcon.cjs");
+const InboxIcon = require("./components/Icons/InboxIcon.cjs");
 const InfoCircleIcon = require("./components/Icons/InfoCircleIcon.cjs");
 const InfoIcon = require("./components/Icons/InfoIcon.cjs");
+const LinkIcon = require("./components/Icons/LinkIcon.cjs");
+const LocationIcon = require("./components/Icons/LocationIcon.cjs");
+const LockerOffIcon = require("./components/Icons/LockerOffIcon.cjs");
+const LockerOnIcon = require("./components/Icons/LockerOnIcon.cjs");
+const LogoutIcon = require("./components/Icons/LogoutIcon.cjs");
+const LoveIcon = require("./components/Icons/LoveIcon.cjs");
+const MegaphoneIcon = require("./components/Icons/MegaphoneIcon.cjs");
+const MenuCloseIcon = require("./components/Icons/MenuCloseIcon.cjs");
+const MenuIcon = require("./components/Icons/MenuIcon.cjs");
+const MenuOpenIcon = require("./components/Icons/MenuOpenIcon.cjs");
+const MessageIcon = require("./components/Icons/MessageIcon.cjs");
 const MicrophoneIcon = require("./components/Icons/MicrophoneIcon.cjs");
 const MinusIcon = require("./components/Icons/MinusIcon.cjs");
+const MoonIcon = require("./components/Icons/MoonIcon.cjs");
+const MoreIcon = require("./components/Icons/MoreIcon.cjs");
+const MoreVerticalIcon = require("./components/Icons/MoreVerticalIcon.cjs");
+const PauseIcon = require("./components/Icons/PauseIcon.cjs");
+const PhoneIcon = require("./components/Icons/PhoneIcon.cjs");
+const PhoneOffIcon = require("./components/Icons/PhoneOffIcon.cjs");
+const PinIcon = require("./components/Icons/PinIcon.cjs");
+const PlayIcon = require("./components/Icons/PlayIcon.cjs");
 const PlusIcon = require("./components/Icons/PlusIcon.cjs");
+const PrivacyIcon = require("./components/Icons/PrivacyIcon.cjs");
+const RepeatIcon = require("./components/Icons/RepeatIcon.cjs");
+const Reply2Icon = require("./components/Icons/Reply2Icon.cjs");
+const ReplyIcon = require("./components/Icons/ReplyIcon.cjs");
 const SearchIcon = require("./components/Icons/SearchIcon.cjs");
+const SendIcon = require("./components/Icons/SendIcon.cjs");
+const SettingsIcon = require("./components/Icons/SettingsIcon.cjs");
+const ShareIcon = require("./components/Icons/ShareIcon.cjs");
 const SpinnerIcon = require("./components/Icons/SpinnerIcon.cjs");
+const StarIcon = require("./components/Icons/StarIcon.cjs");
 const StopIcon = require("./components/Icons/StopIcon.cjs");
 const SuccessIcon = require("./components/Icons/SuccessIcon.cjs");
+const SunIcon = require("./components/Icons/SunIcon.cjs");
+const Support2Icon = require("./components/Icons/Support2Icon.cjs");
+const SupportIcon = require("./components/Icons/SupportIcon.cjs");
+const TagIcon = require("./components/Icons/TagIcon.cjs");
+const TaskIcon = require("./components/Icons/TaskIcon.cjs");
+const ThumbDownIcon = require("./components/Icons/ThumbDownIcon.cjs");
+const ThumbUpIcon = require("./components/Icons/ThumbUpIcon.cjs");
+const TickCircleIcon = require("./components/Icons/TickCircleIcon.cjs");
+const TickCircleOffIcon = require("./components/Icons/TickCircleOffIcon.cjs");
+const TickIcon = require("./components/Icons/TickIcon.cjs");
+const TrashBinIcon = require("./components/Icons/TrashBinIcon.cjs");
+const TrophyIcon = require("./components/Icons/TrophyIcon.cjs");
 const UploadCloudIcon = require("./components/Icons/UploadCloudIcon.cjs");
+const UploadIcon = require("./components/Icons/UploadIcon.cjs");
+const UserCircleIcon = require("./components/Icons/UserCircleIcon.cjs");
+const UserIcon = require("./components/Icons/UserIcon.cjs");
+const UsersIcon = require("./components/Icons/UsersIcon.cjs");
+const VideoIcon = require("./components/Icons/VideoIcon.cjs");
 const VipBadgeIcon = require("./components/Icons/VipBadgeIcon.cjs");
+const WalletIcon = require("./components/Icons/WalletIcon.cjs");
 const WarningIcon = require("./components/Icons/WarningIcon.cjs");
 const WarningTriangleIcon = require("./components/Icons/WarningTriangleIcon.cjs");
+const WifiOffIcon = require("./components/Icons/WifiOffIcon.cjs");
+const WifiOnIcon = require("./components/Icons/WifiOnIcon.cjs");
+const WrenchIcon = require("./components/Icons/WrenchIcon.cjs");
 const Loader = require("./components/Loader/Loader.cjs");
 const Logo = require("./components/Logo/Logo.cjs");
 const Pagination = require("./components/Pagination/Pagination.cjs");
@@ -80,36 +167,123 @@ exports.Chip = Chip.Chip;
 exports.Count = Count.Count;
 exports.Divider = Divider.Divider;
 exports.IconButton = IconButton.IconButton;
+exports.AddIcon = AddIcon.AddIcon;
+exports.AIIcon = AIIcon.AIIcon;
+exports.AlertIcon = AlertIcon.AlertIcon;
+exports.ArrowDownIcon = ArrowDownIcon.ArrowDownIcon;
+exports.ArrowLeftIcon = ArrowLeftIcon.ArrowLeftIcon;
 exports.ArrowRightIcon = ArrowRightIcon.ArrowRightIcon;
+exports.ArrowUpIcon = ArrowUpIcon.ArrowUpIcon;
 exports.ArrowUpRightIcon = ArrowUpRightIcon.ArrowUpRightIcon;
+exports.BankIcon = BankIcon.BankIcon;
+exports.BellIcon = BellIcon.BellIcon;
+exports.BellOffIcon = BellOffIcon.BellOffIcon;
+exports.BoltIcon = BoltIcon.BoltIcon;
+exports.BulbIcon = BulbIcon.BulbIcon;
+exports.Calendar2Icon = Calendar2Icon.Calendar2Icon;
+exports.CalendarIcon = CalendarIcon.CalendarIcon;
+exports.CameraIcon = CameraIcon.CameraIcon;
+exports.ChartIcon = ChartIcon.ChartIcon;
 exports.CheckCircleIcon = CheckCircleIcon.CheckCircleIcon;
 exports.CheckIcon = CheckIcon.CheckIcon;
 exports.CheckOutlineIcon = CheckOutlineIcon.CheckOutlineIcon;
 exports.ChevronDownIcon = ChevronDownIcon.ChevronDownIcon;
 exports.ChevronLeftIcon = ChevronLeftIcon.ChevronLeftIcon;
 exports.ChevronRightIcon = ChevronRightIcon.ChevronRightIcon;
+exports.ChevronUpIcon = ChevronUpIcon.ChevronUpIcon;
+exports.ClockIcon = ClockIcon.ClockIcon;
 exports.CloseIcon = CloseIcon.CloseIcon;
+exports.CodeIcon = CodeIcon.CodeIcon;
+exports.CoinIcon = CoinIcon.CoinIcon;
+exports.CompassIcon = CompassIcon.CompassIcon;
+exports.CopyIcon = CopyIcon.CopyIcon;
 exports.CrossIcon = CrossIcon.CrossIcon;
 exports.CrownIcon = CrownIcon.CrownIcon;
+exports.DiamondIcon = DiamondIcon.DiamondIcon;
+exports.DiscountIcon = DiscountIcon.DiscountIcon;
+exports.DonateIcon = DonateIcon.DonateIcon;
+exports.DoubleTickIcon = DoubleTickIcon.DoubleTickIcon;
+exports.DownloadIcon = DownloadIcon.DownloadIcon;
+exports.EditIcon = EditIcon.EditIcon;
 exports.ErrorCircleIcon = ErrorCircleIcon.ErrorCircleIcon;
 exports.ErrorIcon = ErrorIcon.ErrorIcon;
+exports.ExpandIcon = ExpandIcon.ExpandIcon;
 exports.EyeClosedIcon = EyeClosedIcon.EyeClosedIcon;
 exports.EyeIcon = EyeIcon.EyeIcon;
-exports.FireIcon = FireIcon.FireIcon;
+exports.EyeSlashIcon = EyeSlashIcon.EyeSlashIcon;
+exports.FlagIcon = FlagIcon.FlagIcon;
+exports.FlameIcon = FlameIcon.FlameIcon;
+exports.FolderIcon = FolderIcon.FolderIcon;
+exports.ForwardIcon = ForwardIcon.ForwardIcon;
+exports.GalleryIcon = GalleryIcon.GalleryIcon;
+exports.GenderIcon = GenderIcon.GenderIcon;
+exports.GiftIcon = GiftIcon.GiftIcon;
+exports.HelpIcon = HelpIcon.HelpIcon;
 exports.HomeIcon = HomeIcon.HomeIcon;
+exports.HourglassIcon = HourglassIcon.HourglassIcon;
+exports.ImageIcon = ImageIcon.ImageIcon;
+exports.InboxIcon = InboxIcon.InboxIcon;
 exports.InfoCircleIcon = InfoCircleIcon.InfoCircleIcon;
 exports.InfoIcon = InfoIcon.InfoIcon;
+exports.LinkIcon = LinkIcon.LinkIcon;
+exports.LocationIcon = LocationIcon.LocationIcon;
+exports.LockerOffIcon = LockerOffIcon.LockerOffIcon;
+exports.LockerOnIcon = LockerOnIcon.LockerOnIcon;
+exports.LogoutIcon = LogoutIcon.LogoutIcon;
+exports.LoveIcon = LoveIcon.LoveIcon;
+exports.MegaphoneIcon = MegaphoneIcon.MegaphoneIcon;
+exports.MenuCloseIcon = MenuCloseIcon.MenuCloseIcon;
+exports.MenuIcon = MenuIcon.MenuIcon;
+exports.MenuOpenIcon = MenuOpenIcon.MenuOpenIcon;
+exports.MessageIcon = MessageIcon.MessageIcon;
 exports.MicrophoneIcon = MicrophoneIcon.MicrophoneIcon;
 exports.MinusIcon = MinusIcon.MinusIcon;
+exports.MoonIcon = MoonIcon.MoonIcon;
+exports.MoreIcon = MoreIcon.MoreIcon;
+exports.MoreVerticalIcon = MoreVerticalIcon.MoreVerticalIcon;
+exports.PauseIcon = PauseIcon.PauseIcon;
+exports.PhoneIcon = PhoneIcon.PhoneIcon;
+exports.PhoneOffIcon = PhoneOffIcon.PhoneOffIcon;
+exports.PinIcon = PinIcon.PinIcon;
+exports.PlayIcon = PlayIcon.PlayIcon;
 exports.PlusIcon = PlusIcon.PlusIcon;
+exports.PrivacyIcon = PrivacyIcon.PrivacyIcon;
+exports.RepeatIcon = RepeatIcon.RepeatIcon;
+exports.Reply2Icon = Reply2Icon.Reply2Icon;
+exports.ReplyIcon = ReplyIcon.ReplyIcon;
 exports.SearchIcon = SearchIcon.SearchIcon;
+exports.SendIcon = SendIcon.SendIcon;
+exports.SettingsIcon = SettingsIcon.SettingsIcon;
+exports.ShareIcon = ShareIcon.ShareIcon;
 exports.SpinnerIcon = SpinnerIcon.SpinnerIcon;
+exports.StarIcon = StarIcon.StarIcon;
 exports.StopIcon = StopIcon.StopIcon;
 exports.SuccessIcon = SuccessIcon.SuccessIcon;
+exports.SunIcon = SunIcon.SunIcon;
+exports.Support2Icon = Support2Icon.Support2Icon;
+exports.SupportIcon = SupportIcon.SupportIcon;
+exports.TagIcon = TagIcon.TagIcon;
+exports.TaskIcon = TaskIcon.TaskIcon;
+exports.ThumbDownIcon = ThumbDownIcon.ThumbDownIcon;
+exports.ThumbUpIcon = ThumbUpIcon.ThumbUpIcon;
+exports.TickCircleIcon = TickCircleIcon.TickCircleIcon;
+exports.TickCircleOffIcon = TickCircleOffIcon.TickCircleOffIcon;
+exports.TickIcon = TickIcon.TickIcon;
+exports.TrashBinIcon = TrashBinIcon.TrashBinIcon;
+exports.TrophyIcon = TrophyIcon.TrophyIcon;
 exports.UploadCloudIcon = UploadCloudIcon.UploadCloudIcon;
+exports.UploadIcon = UploadIcon.UploadIcon;
+exports.UserCircleIcon = UserCircleIcon.UserCircleIcon;
+exports.UserIcon = UserIcon.UserIcon;
+exports.UsersIcon = UsersIcon.UsersIcon;
+exports.VideoIcon = VideoIcon.VideoIcon;
 exports.VipBadgeIcon = VipBadgeIcon.VipBadgeIcon;
+exports.WalletIcon = WalletIcon.WalletIcon;
 exports.WarningIcon = WarningIcon.WarningIcon;
 exports.WarningTriangleIcon = WarningTriangleIcon.WarningTriangleIcon;
+exports.WifiOffIcon = WifiOffIcon.WifiOffIcon;
+exports.WifiOnIcon = WifiOnIcon.WifiOnIcon;
+exports.WrenchIcon = WrenchIcon.WrenchIcon;
 exports.Loader = Loader.Loader;
 exports.Logo = Logo.Logo;
 exports.Pagination = Pagination.Pagination;

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

@@ -15,10 +15,10 @@ const DEFAULT_ICONS = {
   error: /* @__PURE__ */ jsx(ErrorCircleIcon, {})
 };
 const CLOSE_BUTTON_CLASSES = {
-  info: "hover:bg-info-500/10 active:bg-info-500/10 text-info-500 motion-safe:transition-colors motion-safe:duration-150",
-  success: "hover:bg-success-500/10 active:bg-success-500/10 text-success-500 motion-safe:transition-colors motion-safe:duration-150",
-  warning: "hover:bg-warning-500/10 active:bg-warning-500/10 text-warning-500 motion-safe:transition-colors motion-safe:duration-150",
-  error: "hover:bg-error-500/10 active:bg-error-500/10 text-error-500 motion-safe:transition-colors motion-safe:duration-150"
+  info: "hover:bg-info-default active:bg-info-default text-info-default motion-safe:transition-colors motion-safe:duration-150",
+  success: "hover:bg-success-default active:bg-success-default text-success-default motion-safe:transition-colors motion-safe:duration-150",
+  warning: "hover:bg-warning-default active:bg-warning-default text-warning-default motion-safe:transition-colors motion-safe:duration-150",
+  error: "hover:bg-error-default active:bg-error-default text-error-default motion-safe:transition-colors motion-safe:duration-150"
 };
 const Alert = React.forwardRef(
   ({
@@ -46,18 +46,18 @@ const Alert = React.forwardRef(
           !resolvedIcon && closable && "grid-cols-[1fr_auto]",
           !resolvedIcon && !closable && "grid-cols-[1fr]",
           title && children ? "items-start" : "items-center",
-          variant === "info" && "bg-info-50 text-info-500",
-          variant === "success" && "bg-success-50 text-success-500",
-          variant === "warning" && "bg-warning-50 text-warning-500",
-          variant === "error" && "bg-error-50 text-error-500",
+          variant === "info" && "bg-info-background text-info-default",
+          variant === "success" && "bg-success-background text-success-default",
+          variant === "warning" && "bg-warning-background text-warning-default",
+          variant === "error" && "bg-error-background text-error-default",
           className
         ),
         ...props,
         children: [
           resolvedIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-start", "aria-hidden": "true", children: resolvedIcon }),
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
-            title && /* @__PURE__ */ jsx("div", { className: "typography-body-2-semibold text-body-100", children: title }),
-            /* @__PURE__ */ jsx("div", { className: "typography-body-2-regular text-body-200", children })
+            title && /* @__PURE__ */ jsx("div", { className: "typography-semibold-body-md text-foreground-default", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "typography-regular-body-md text-foreground-secondary", children })
           ] }),
           closable && /* @__PURE__ */ jsx(
             Button,

package/dist/components/Alert/Alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CheckCircleIcon } from \"../Icons/CheckCircleIcon\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\nimport { ErrorCircleIcon } from \"../Icons/ErrorCircleIcon\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { WarningTriangleIcon } from \"../Icons/WarningTriangleIcon\";\n\n/** Visual style variant of the alert. */\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nconst DEFAULT_ICONS: Record<AlertVariant, React.ReactNode> = {\n  info: <InfoCircleIcon />,\n  success: <CheckCircleIcon />,\n  warning: <WarningTriangleIcon />,\n  error: <ErrorCircleIcon />,\n};\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the alert. @default \"info\" */\n  variant?: AlertVariant;\n  /** Optional title text displayed in bold above the description. */\n  title?: string;\n  /** Custom icon override. Pass `null` to hide the icon entirely. Each variant shows a default icon when left `undefined`. */\n  icon?: React.ReactNode | null;\n  /** Whether to show the close button. @default false */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked. */\n  onClose?: () => void;\n  /** Accessible label for the close button. @default \"Close alert\" */\n  closeLabel?: string;\n}\n\nconst CLOSE_BUTTON_CLASSES: Record<AlertVariant, string> = {\n  info: \"hover:bg-info-500/10 active:bg-info-500/10 text-info-500 motion-safe:transition-colors motion-safe:duration-150\",\n  success:\n    \"hover:bg-success-500/10 active:bg-success-500/10 text-success-500 motion-safe:transition-colors motion-safe:duration-150\",\n  warning:\n    \"hover:bg-warning-500/10 active:bg-warning-500/10 text-warning-500 motion-safe:transition-colors motion-safe:duration-150\",\n  error:\n    \"hover:bg-error-500/10 active:bg-error-500/10 text-error-500 motion-safe:transition-colors motion-safe:duration-150\",\n};\n\n/**\n * Displays a contextual feedback message to the user.\n *\n * Supports `info`, `success`, `warning`, and `error` variants with a default\n * icon per variant, optional title, description, and dismiss button.\n *\n * Each variant renders a default icon automatically. Pass a custom `icon` to\n * override, or `icon={null}` to hide the icon entirely.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\" title=\"Saved\" closable onClose={handleClose}>\n *   Your changes have been saved.\n * </Alert>\n * ```\n */\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      icon,\n      closable = false,\n      onClose,\n      closeLabel = \"Close alert\",\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedIcon = icon === null ? null : (icon ?? DEFAULT_ICONS[variant]);\n\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-testid=\"alert\"\n        className={cn(\n          \"grid gap-x-3 rounded-lg p-4 text-sm leading-[18px]\",\n          resolvedIcon && closable && \"grid-cols-[auto_1fr_auto]\",\n          resolvedIcon && !closable && \"grid-cols-[auto_1fr]\",\n          !resolvedIcon && closable && \"grid-cols-[1fr_auto]\",\n          !resolvedIcon && !closable && \"grid-cols-[1fr]\",\n          title && children ? \"items-start\" : \"items-center\",\n          variant === \"info\" && \"bg-info-50 text-info-500\",\n          variant === \"success\" && \"bg-success-50 text-success-500\",\n          variant === \"warning\" && \"bg-warning-50 text-warning-500\",\n          variant === \"error\" && \"bg-error-50 text-error-500\",\n          className,\n        )}\n        {...props}\n      >\n        {resolvedIcon && (\n          <span className=\"flex shrink-0 items-start\" aria-hidden=\"true\">\n            {resolvedIcon}\n          </span>\n        )}\n\n        <div className=\"flex min-w-0 flex-col gap-2\">\n          {title && <div className=\"typography-body-2-semibold text-body-100\">{title}</div>}\n          <div className=\"typography-body-2-regular text-body-200\">{children}</div>\n        </div>\n\n        {closable && (\n          <Button\n            variant=\"tertiary\"\n            size=\"24\"\n            onClick={onClose}\n            className={cn(\"self-start px-0\", CLOSE_BUTTON_CLASSES[variant])}\n            aria-label={closeLabel}\n          >\n            <CrossIcon />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,gBAAuD;AAAA,EAC3D,0BAAO,gBAAA,EAAe;AAAA,EACtB,6BAAU,iBAAA,EAAgB;AAAA,EAC1B,6BAAU,qBAAA,EAAoB;AAAA,EAC9B,2BAAQ,iBAAA,CAAA,CAAgB;AAC1B;AAiBA,MAAM,uBAAqD;AAAA,EACzD,MAAM;AAAA,EACN,SACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AACJ;AAkBO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,SAAS,OAAO,OAAQ,QAAQ,cAAc,OAAO;AAE1E,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,YAAY;AAAA,UAC5B,gBAAgB,CAAC,YAAY;AAAA,UAC7B,CAAC,gBAAgB,YAAY;AAAA,UAC7B,CAAC,gBAAgB,CAAC,YAAY;AAAA,UAC9B,SAAS,WAAW,gBAAgB;AAAA,UACpC,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,oCACE,QAAA,EAAK,WAAU,6BAA4B,eAAY,QACrD,UAAA,cACH;AAAA,UAGF,qBAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,YAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,OAAM;AAAA,YAC3E,oBAAC,OAAA,EAAI,WAAU,2CAA2C,SAAA,CAAS;AAAA,UAAA,GACrE;AAAA,UAEC,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW,GAAG,mBAAmB,qBAAqB,OAAO,CAAC;AAAA,cAC9D,cAAY;AAAA,cAEZ,8BAAC,WAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}
+{"version":3,"file":"Alert.mjs","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CheckCircleIcon } from \"../Icons/CheckCircleIcon\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\nimport { ErrorCircleIcon } from \"../Icons/ErrorCircleIcon\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { WarningTriangleIcon } from \"../Icons/WarningTriangleIcon\";\n\n/** Visual style variant of the alert. */\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nconst DEFAULT_ICONS: Record<AlertVariant, React.ReactNode> = {\n  info: <InfoCircleIcon />,\n  success: <CheckCircleIcon />,\n  warning: <WarningTriangleIcon />,\n  error: <ErrorCircleIcon />,\n};\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the alert. @default \"info\" */\n  variant?: AlertVariant;\n  /** Optional title text displayed in bold above the description. */\n  title?: string;\n  /** Custom icon override. Pass `null` to hide the icon entirely. Each variant shows a default icon when left `undefined`. */\n  icon?: React.ReactNode | null;\n  /** Whether to show the close button. @default false */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked. */\n  onClose?: () => void;\n  /** Accessible label for the close button. @default \"Close alert\" */\n  closeLabel?: string;\n}\n\nconst CLOSE_BUTTON_CLASSES: Record<AlertVariant, string> = {\n  info: \"hover:bg-info-default active:bg-info-default text-info-default motion-safe:transition-colors motion-safe:duration-150\",\n  success:\n    \"hover:bg-success-default active:bg-success-default text-success-default motion-safe:transition-colors motion-safe:duration-150\",\n  warning:\n    \"hover:bg-warning-default active:bg-warning-default text-warning-default motion-safe:transition-colors motion-safe:duration-150\",\n  error:\n    \"hover:bg-error-default active:bg-error-default text-error-default motion-safe:transition-colors motion-safe:duration-150\",\n};\n\n/**\n * Displays a contextual feedback message to the user.\n *\n * Supports `info`, `success`, `warning`, and `error` variants with a default\n * icon per variant, optional title, description, and dismiss button.\n *\n * Each variant renders a default icon automatically. Pass a custom `icon` to\n * override, or `icon={null}` to hide the icon entirely.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\" title=\"Saved\" closable onClose={handleClose}>\n *   Your changes have been saved.\n * </Alert>\n * ```\n */\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      icon,\n      closable = false,\n      onClose,\n      closeLabel = \"Close alert\",\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedIcon = icon === null ? null : (icon ?? DEFAULT_ICONS[variant]);\n\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-testid=\"alert\"\n        className={cn(\n          \"grid gap-x-3 rounded-lg p-4 text-sm leading-[18px]\",\n          resolvedIcon && closable && \"grid-cols-[auto_1fr_auto]\",\n          resolvedIcon && !closable && \"grid-cols-[auto_1fr]\",\n          !resolvedIcon && closable && \"grid-cols-[1fr_auto]\",\n          !resolvedIcon && !closable && \"grid-cols-[1fr]\",\n          title && children ? \"items-start\" : \"items-center\",\n          variant === \"info\" && \"bg-info-background text-info-default\",\n          variant === \"success\" && \"bg-success-background text-success-default\",\n          variant === \"warning\" && \"bg-warning-background text-warning-default\",\n          variant === \"error\" && \"bg-error-background text-error-default\",\n          className,\n        )}\n        {...props}\n      >\n        {resolvedIcon && (\n          <span className=\"flex shrink-0 items-start\" aria-hidden=\"true\">\n            {resolvedIcon}\n          </span>\n        )}\n\n        <div className=\"flex min-w-0 flex-col gap-2\">\n          {title && (\n            <div className=\"typography-semibold-body-md text-foreground-default\">{title}</div>\n          )}\n          <div className=\"typography-regular-body-md text-foreground-secondary\">{children}</div>\n        </div>\n\n        {closable && (\n          <Button\n            variant=\"tertiary\"\n            size=\"24\"\n            onClick={onClose}\n            className={cn(\"self-start px-0\", CLOSE_BUTTON_CLASSES[variant])}\n            aria-label={closeLabel}\n          >\n            <CrossIcon />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,gBAAuD;AAAA,EAC3D,0BAAO,gBAAA,EAAe;AAAA,EACtB,6BAAU,iBAAA,EAAgB;AAAA,EAC1B,6BAAU,qBAAA,EAAoB;AAAA,EAC9B,2BAAQ,iBAAA,CAAA,CAAgB;AAC1B;AAiBA,MAAM,uBAAqD;AAAA,EACzD,MAAM;AAAA,EACN,SACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AACJ;AAkBO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,SAAS,OAAO,OAAQ,QAAQ,cAAc,OAAO;AAE1E,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,YAAY;AAAA,UAC5B,gBAAgB,CAAC,YAAY;AAAA,UAC7B,CAAC,gBAAgB,YAAY;AAAA,UAC7B,CAAC,gBAAgB,CAAC,YAAY;AAAA,UAC9B,SAAS,WAAW,gBAAgB;AAAA,UACpC,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,oCACE,QAAA,EAAK,WAAU,6BAA4B,eAAY,QACrD,UAAA,cACH;AAAA,UAGF,qBAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,YAAA,SACC,oBAAC,OAAA,EAAI,WAAU,uDAAuD,UAAA,OAAM;AAAA,YAE9E,oBAAC,OAAA,EAAI,WAAU,wDAAwD,SAAA,CAAS;AAAA,UAAA,GAClF;AAAA,UAEC,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW,GAAG,mBAAmB,qBAAqB,OAAO,CAAC;AAAA,cAC9D,cAAY;AAAA,cAEZ,8BAAC,WAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}

package/dist/components/AudioUpload/AudioUpload.mjs

@@ -153,7 +153,7 @@ const AudioUpload = React.forwardRef(
                   {
                     className: "flex size-[72px] items-center justify-center rounded-full bg-neutral-400",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ jsx(MicrophoneIcon, { className: "size-5 text-body-300" })
+                    children: /* @__PURE__ */ jsx(MicrophoneIcon, { className: "size-5 text-foreground-inverse" })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -161,7 +161,7 @@ const AudioUpload = React.forwardRef(
                   {
                     role: "timer",
                     "aria-label": "Recording time",
-                    className: "typography-body-1-regular text-body-100",
+                    className: "typography-regular-body-lg text-foreground-default",
                     children: [
                       formattedElapsed,
                       " / ",
@@ -184,7 +184,7 @@ const AudioUpload = React.forwardRef(
                   ref: stopButtonRef,
                   type: "button",
                   onClick: handleStopClick,
-                  className: "mt-1 flex size-11 items-center justify-center rounded-full bg-error-500 text-body-white-solid-constant transition-colors hover:bg-error-500/80 focus:shadow-focus-ring focus-visible:outline-none",
+                  className: "mt-1 flex size-11 items-center justify-center rounded-full bg-error-default text-foreground-onaccentinverse transition-colors hover:bg-error-default/80 focus:shadow-focus-ring focus-visible:outline-none",
                   "aria-label": stopButtonAriaLabel,
                   children: /* @__PURE__ */ jsx(StopIcon, { className: "size-5" })
                 }
@@ -210,7 +210,7 @@ const AudioUpload = React.forwardRef(
           onDragLeave: handleDragLeave,
           className: cn(
             "flex flex-col items-center justify-center gap-2 rounded-xl bg-neutral-100 px-4 py-3 transition-colors",
-            isDragActive && "bg-brand-green-50 ring-2 ring-brand-green-500",
+            isDragActive && "bg-brand-accent-muted ring-2 ring-brand-accent-default",
             disabled && "pointer-events-none opacity-50",
             className
           ),
@@ -235,14 +235,21 @@ const AudioUpload = React.forwardRef(
                 htmlFor: inputId,
                 className: "flex cursor-pointer flex-col items-center gap-2 rounded-lg px-2 py-1 peer-focus-visible:shadow-focus-ring",
                 children: [
-                  /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-5 text-body-100" }),
-                  /* @__PURE__ */ jsx("span", { className: "typography-body-1-semibold text-center text-body-100", children: uploadTitle }),
-                  /* @__PURE__ */ jsx("span", { id: descriptionId, className: "typography-body-2-regular text-center text-body-100", children: uploadDescription })
+                  /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-5 text-foreground-default" }),
+                  /* @__PURE__ */ jsx("span", { className: "typography-semibold-body-lg text-center text-foreground-default", children: uploadTitle }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      id: descriptionId,
+                      className: "typography-regular-body-md text-center text-foreground-default",
+                      children: uploadDescription
+                    }
+                  )
                 ]
               }
             ),
             allowRecording && isRecordingSupported && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("p", { className: "typography-body-2-regular text-center text-body-100", children: separatorText }),
+              /* @__PURE__ */ jsx("p", { className: "typography-regular-body-md text-center text-foreground-default", children: separatorText }),
               /* @__PURE__ */ jsx(
                 Button,
                 {

package/dist/components/AudioUpload/AudioUpload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioUpload.mjs","sources":["../../../src/components/AudioUpload/AudioUpload.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { MicrophoneIcon } from \"../Icons/MicrophoneIcon\";\nimport { StopIcon } from \"../Icons/StopIcon\";\nimport { UploadCloudIcon } from \"../Icons/UploadCloudIcon\";\nimport { AudioWaveform } from \"./AudioWaveform\";\nimport { type AudioValidationError, formatAudioTime, validateAudioFile } from \"./audioUtils\";\nimport {\n  DEFAULT_ACCEPTED_TYPES,\n  DEFAULT_MAX_FILE_SIZE,\n  DEFAULT_MAX_RECORDING_DURATION,\n  DEFAULT_MIN_RECORDING_DURATION,\n} from \"./constants\";\nimport { useAudioRecorder } from \"./useAudioRecorder\";\n\n/** A file that was rejected during drop or browse, along with the reasons. */\nexport interface AudioFileRejection {\n  /** The rejected file. */\n  file: File;\n  /** One or more validation errors explaining why the file was rejected. */\n  errors: AudioValidationError[];\n}\n\nexport interface AudioUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onDrop\"> {\n  /** Maximum file size in bytes. @default 10_485_760 (10MB) */\n  maxFileSize?: number;\n  /** Accepted audio MIME types. @default DEFAULT_ACCEPTED_TYPES */\n  accept?: readonly string[];\n  /** Maximum number of files per drop. @default 1 */\n  maxFiles?: number;\n  /** Whether to show the record audio button. @default true */\n  allowRecording?: boolean;\n  /** Maximum recording duration in seconds. @default 30 */\n  maxRecordingDuration?: number;\n  /** Minimum recording duration in seconds. @default 5 */\n  minRecordingDuration?: number;\n\n  /** Called when valid files are accepted via drop or browse */\n  onFilesAccepted?: (files: File[]) => void;\n  /** Called when files are rejected (wrong type, too large, etc.) */\n  onFilesRejected?: (rejections: AudioFileRejection[]) => void;\n  /** Called when a recording completes and meets minimum duration */\n  onRecordingComplete?: (blob: Blob, durationMs: number) => void;\n  /** Called when recording is stopped but does not meet minimum duration */\n  onRecordingTooShort?: (durationMs: number, minDurationMs: number) => void;\n  /** Called when microphone permission is denied or unavailable */\n  onPermissionError?: (error: Error) => void;\n  /** Called when an unexpected recording error occurs */\n  onRecordingError?: (error: Error) => void;\n\n  /** Upload area title text. @default \"Click to upload, or drag & drop\" */\n  uploadTitle?: string;\n  /** Upload area description text. @default \"Audio files only, up to 10MB each\" */\n  uploadDescription?: string;\n  /** Separator text between upload and record. @default \"or\" */\n  separatorText?: string;\n  /** Record button label. @default \"Record audio\" */\n  recordButtonLabel?: string;\n  /** Stop recording button aria-label. @default \"Stop recording\" */\n  stopButtonAriaLabel?: string;\n\n  /** Whether the component is disabled. @default false */\n  disabled?: boolean;\n}\n\nfunction partitionFiles(\n  files: File[],\n  maxFileSize: number,\n  accept: readonly string[],\n  maxFiles: number,\n): { accepted: File[]; rejected: AudioFileRejection[] } {\n  const accepted: File[] = [];\n  const rejected: AudioFileRejection[] = [];\n\n  for (const file of files) {\n    const errors = validateAudioFile(file, { maxFileSize, acceptedTypes: accept });\n    if (errors.length > 0) {\n      rejected.push({ file, errors });\n    } else {\n      accepted.push(file);\n    }\n  }\n\n  if (maxFiles > 0 && accepted.length > maxFiles) {\n    const excess = accepted.splice(maxFiles);\n    for (const file of excess) {\n      rejected.push({\n        file,\n        errors: [{ code: \"too-many-files\", message: `Too many files. Maximum is ${maxFiles}` }],\n      });\n    }\n  }\n\n  return { accepted, rejected };\n}\n\n/**\n * Audio file upload with drag-and-drop and optional in-browser recording.\n * Supports file validation, multiple files, and real-time waveform visualization during recording.\n *\n * @example\n * ```tsx\n * <AudioUpload\n *   onFilesAccepted={(files) => console.log(files)}\n *   onRecordingComplete={(blob, duration) => console.log(blob, duration)}\n * />\n * ```\n */\nexport const AudioUpload = React.forwardRef<HTMLDivElement, AudioUploadProps>(\n  (\n    {\n      className,\n      maxFileSize = DEFAULT_MAX_FILE_SIZE,\n      accept = DEFAULT_ACCEPTED_TYPES,\n      maxFiles = 1,\n      allowRecording = true,\n      maxRecordingDuration = DEFAULT_MAX_RECORDING_DURATION,\n      minRecordingDuration = DEFAULT_MIN_RECORDING_DURATION,\n      onFilesAccepted,\n      onFilesRejected,\n      onRecordingComplete,\n      onRecordingTooShort,\n      onPermissionError,\n      onRecordingError,\n      uploadTitle = \"Click to upload, or drag & drop\",\n      uploadDescription = \"Audio files only, up to 10MB each\",\n      separatorText = \"or\",\n      recordButtonLabel = \"Record audio\",\n      stopButtonAriaLabel = \"Stop recording\",\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = React.useId();\n    const descriptionId = React.useId();\n    const [isDragActive, setIsDragActive] = React.useState(false);\n    const stopButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    const {\n      isRecording,\n      elapsedMs,\n      startRecording,\n      stopRecording,\n      analyserNode,\n      isSupported: isRecordingSupported,\n    } = useAudioRecorder({\n      maxDuration: maxRecordingDuration,\n      minDuration: minRecordingDuration,\n      onComplete: onRecordingComplete,\n      onTooShort: onRecordingTooShort,\n      onPermissionError,\n      onError: onRecordingError,\n    });\n\n    const acceptString = accept.join(\",\");\n\n    // Move focus to stop button when recording starts\n    React.useEffect(() => {\n      if (isRecording) {\n        stopButtonRef.current?.focus();\n      }\n    }, [isRecording]);\n\n    const validateAndAcceptFiles = React.useCallback(\n      (files: FileList | File[]) => {\n        const { accepted, rejected } = partitionFiles(\n          Array.from(files),\n          maxFileSize,\n          accept,\n          maxFiles,\n        );\n        if (accepted.length > 0) onFilesAccepted?.(accepted);\n        if (rejected.length > 0) onFilesRejected?.(rejected);\n      },\n      [maxFileSize, accept, maxFiles, onFilesAccepted, onFilesRejected],\n    );\n\n    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n\n      if (disabled) return;\n\n      const { files } = e.dataTransfer;\n      if (files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n    };\n\n    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (!disabled) {\n        setIsDragActive(true);\n      }\n    };\n\n    const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n    };\n\n    const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const { files } = e.target;\n      if (files && files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n      // Reset input so same file can be selected again\n      e.target.value = \"\";\n    };\n\n    const handleRecordClick = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      startRecording();\n    };\n\n    const handleStopClick = () => {\n      stopRecording();\n    };\n\n    if (isRecording) {\n      const formattedElapsed = formatAudioTime(elapsedMs);\n\n      return (\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label=\"Audio recording in progress\"\n          data-testid=\"audio-upload\"\n          data-state=\"recording\"\n          className={cn(\n            \"flex flex-col items-center justify-center gap-2 rounded-xl bg-neutral-100 px-4 py-3\",\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"flex flex-1 flex-col items-center gap-2\">\n            <div\n              className=\"flex size-[72px] items-center justify-center rounded-full bg-neutral-400\"\n              aria-hidden=\"true\"\n            >\n              <MicrophoneIcon className=\"size-5 text-body-300\" />\n            </div>\n\n            <p\n              role=\"timer\"\n              aria-label=\"Recording time\"\n              className=\"typography-body-1-regular text-body-100\"\n            >\n              {formattedElapsed} / {formatAudioTime(maxRecordingDuration * 1000)}\n            </p>\n          </div>\n\n          <div className=\"flex w-full items-center gap-2.5\" aria-hidden=\"true\">\n            <AudioWaveform\n              analyserNode={analyserNode}\n              isRecording={isRecording}\n              className=\"flex-1\"\n            />\n          </div>\n\n          <button\n            ref={stopButtonRef}\n            type=\"button\"\n            onClick={handleStopClick}\n            className=\"mt-1 flex size-11 items-center justify-center rounded-full bg-error-500 text-body-white-solid-constant transition-colors hover:bg-error-500/80 focus:shadow-focus-ring focus-visible:outline-none\"\n            aria-label={stopButtonAriaLabel}\n          >\n            <StopIcon className=\"size-5\" />\n          </button>\n        </div>\n      );\n    }\n\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Audio upload\"\n        data-testid=\"audio-upload\"\n        data-state=\"idle\"\n        aria-disabled={disabled || undefined}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        className={cn(\n          \"flex flex-col items-center justify-center gap-2 rounded-xl bg-neutral-100 px-4 py-3 transition-colors\",\n          isDragActive && \"bg-brand-green-50 ring-2 ring-brand-green-500\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={acceptString}\n          multiple={maxFiles > 1}\n          onChange={handleFileInputChange}\n          className=\"peer sr-only\"\n          disabled={disabled}\n          aria-describedby={descriptionId}\n        />\n\n        <label\n          htmlFor={inputId}\n          className=\"flex cursor-pointer flex-col items-center gap-2 rounded-lg px-2 py-1 peer-focus-visible:shadow-focus-ring\"\n        >\n          <UploadCloudIcon className=\"size-5 text-body-100\" />\n\n          <span className=\"typography-body-1-semibold text-center text-body-100\">\n            {uploadTitle}\n          </span>\n\n          <span id={descriptionId} className=\"typography-body-2-regular text-center text-body-100\">\n            {uploadDescription}\n          </span>\n        </label>\n\n        {allowRecording && isRecordingSupported && (\n          <>\n            <p className=\"typography-body-2-regular text-center text-body-100\">{separatorText}</p>\n\n            <Button\n              variant=\"brand\"\n              size=\"40\"\n              leftIcon={<MicrophoneIcon className=\"size-5\" />}\n              onClick={handleRecordClick}\n              disabled={disabled}\n              type=\"button\"\n            >\n              {recordButtonLabel}\n            </Button>\n          </>\n        )}\n      </div>\n    );\n  },\n);\n\nAudioUpload.displayName = \"AudioUpload\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AudioUpload.mjs","sources":["../../../src/components/AudioUpload/AudioUpload.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { MicrophoneIcon } from \"../Icons/MicrophoneIcon\";\nimport { StopIcon } from \"../Icons/StopIcon\";\nimport { UploadCloudIcon } from \"../Icons/UploadCloudIcon\";\nimport { AudioWaveform } from \"./AudioWaveform\";\nimport { type AudioValidationError, formatAudioTime, validateAudioFile } from \"./audioUtils\";\nimport {\n  DEFAULT_ACCEPTED_TYPES,\n  DEFAULT_MAX_FILE_SIZE,\n  DEFAULT_MAX_RECORDING_DURATION,\n  DEFAULT_MIN_RECORDING_DURATION,\n} from \"./constants\";\nimport { useAudioRecorder } from \"./useAudioRecorder\";\n\n/** A file that was rejected during drop or browse, along with the reasons. */\nexport interface AudioFileRejection {\n  /** The rejected file. */\n  file: File;\n  /** One or more validation errors explaining why the file was rejected. */\n  errors: AudioValidationError[];\n}\n\nexport interface AudioUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onDrop\"> {\n  /** Maximum file size in bytes. @default 10_485_760 (10MB) */\n  maxFileSize?: number;\n  /** Accepted audio MIME types. @default DEFAULT_ACCEPTED_TYPES */\n  accept?: readonly string[];\n  /** Maximum number of files per drop. @default 1 */\n  maxFiles?: number;\n  /** Whether to show the record audio button. @default true */\n  allowRecording?: boolean;\n  /** Maximum recording duration in seconds. @default 30 */\n  maxRecordingDuration?: number;\n  /** Minimum recording duration in seconds. @default 5 */\n  minRecordingDuration?: number;\n\n  /** Called when valid files are accepted via drop or browse */\n  onFilesAccepted?: (files: File[]) => void;\n  /** Called when files are rejected (wrong type, too large, etc.) */\n  onFilesRejected?: (rejections: AudioFileRejection[]) => void;\n  /** Called when a recording completes and meets minimum duration */\n  onRecordingComplete?: (blob: Blob, durationMs: number) => void;\n  /** Called when recording is stopped but does not meet minimum duration */\n  onRecordingTooShort?: (durationMs: number, minDurationMs: number) => void;\n  /** Called when microphone permission is denied or unavailable */\n  onPermissionError?: (error: Error) => void;\n  /** Called when an unexpected recording error occurs */\n  onRecordingError?: (error: Error) => void;\n\n  /** Upload area title text. @default \"Click to upload, or drag & drop\" */\n  uploadTitle?: string;\n  /** Upload area description text. @default \"Audio files only, up to 10MB each\" */\n  uploadDescription?: string;\n  /** Separator text between upload and record. @default \"or\" */\n  separatorText?: string;\n  /** Record button label. @default \"Record audio\" */\n  recordButtonLabel?: string;\n  /** Stop recording button aria-label. @default \"Stop recording\" */\n  stopButtonAriaLabel?: string;\n\n  /** Whether the component is disabled. @default false */\n  disabled?: boolean;\n}\n\nfunction partitionFiles(\n  files: File[],\n  maxFileSize: number,\n  accept: readonly string[],\n  maxFiles: number,\n): { accepted: File[]; rejected: AudioFileRejection[] } {\n  const accepted: File[] = [];\n  const rejected: AudioFileRejection[] = [];\n\n  for (const file of files) {\n    const errors = validateAudioFile(file, { maxFileSize, acceptedTypes: accept });\n    if (errors.length > 0) {\n      rejected.push({ file, errors });\n    } else {\n      accepted.push(file);\n    }\n  }\n\n  if (maxFiles > 0 && accepted.length > maxFiles) {\n    const excess = accepted.splice(maxFiles);\n    for (const file of excess) {\n      rejected.push({\n        file,\n        errors: [{ code: \"too-many-files\", message: `Too many files. Maximum is ${maxFiles}` }],\n      });\n    }\n  }\n\n  return { accepted, rejected };\n}\n\n/**\n * Audio file upload with drag-and-drop and optional in-browser recording.\n * Supports file validation, multiple files, and real-time waveform visualization during recording.\n *\n * @example\n * ```tsx\n * <AudioUpload\n *   onFilesAccepted={(files) => console.log(files)}\n *   onRecordingComplete={(blob, duration) => console.log(blob, duration)}\n * />\n * ```\n */\nexport const AudioUpload = React.forwardRef<HTMLDivElement, AudioUploadProps>(\n  (\n    {\n      className,\n      maxFileSize = DEFAULT_MAX_FILE_SIZE,\n      accept = DEFAULT_ACCEPTED_TYPES,\n      maxFiles = 1,\n      allowRecording = true,\n      maxRecordingDuration = DEFAULT_MAX_RECORDING_DURATION,\n      minRecordingDuration = DEFAULT_MIN_RECORDING_DURATION,\n      onFilesAccepted,\n      onFilesRejected,\n      onRecordingComplete,\n      onRecordingTooShort,\n      onPermissionError,\n      onRecordingError,\n      uploadTitle = \"Click to upload, or drag & drop\",\n      uploadDescription = \"Audio files only, up to 10MB each\",\n      separatorText = \"or\",\n      recordButtonLabel = \"Record audio\",\n      stopButtonAriaLabel = \"Stop recording\",\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = React.useId();\n    const descriptionId = React.useId();\n    const [isDragActive, setIsDragActive] = React.useState(false);\n    const stopButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    const {\n      isRecording,\n      elapsedMs,\n      startRecording,\n      stopRecording,\n      analyserNode,\n      isSupported: isRecordingSupported,\n    } = useAudioRecorder({\n      maxDuration: maxRecordingDuration,\n      minDuration: minRecordingDuration,\n      onComplete: onRecordingComplete,\n      onTooShort: onRecordingTooShort,\n      onPermissionError,\n      onError: onRecordingError,\n    });\n\n    const acceptString = accept.join(\",\");\n\n    // Move focus to stop button when recording starts\n    React.useEffect(() => {\n      if (isRecording) {\n        stopButtonRef.current?.focus();\n      }\n    }, [isRecording]);\n\n    const validateAndAcceptFiles = React.useCallback(\n      (files: FileList | File[]) => {\n        const { accepted, rejected } = partitionFiles(\n          Array.from(files),\n          maxFileSize,\n          accept,\n          maxFiles,\n        );\n        if (accepted.length > 0) onFilesAccepted?.(accepted);\n        if (rejected.length > 0) onFilesRejected?.(rejected);\n      },\n      [maxFileSize, accept, maxFiles, onFilesAccepted, onFilesRejected],\n    );\n\n    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n\n      if (disabled) return;\n\n      const { files } = e.dataTransfer;\n      if (files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n    };\n\n    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (!disabled) {\n        setIsDragActive(true);\n      }\n    };\n\n    const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n    };\n\n    const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const { files } = e.target;\n      if (files && files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n      // Reset input so same file can be selected again\n      e.target.value = \"\";\n    };\n\n    const handleRecordClick = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      startRecording();\n    };\n\n    const handleStopClick = () => {\n      stopRecording();\n    };\n\n    if (isRecording) {\n      const formattedElapsed = formatAudioTime(elapsedMs);\n\n      return (\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label=\"Audio recording in progress\"\n          data-testid=\"audio-upload\"\n          data-state=\"recording\"\n          className={cn(\n            \"flex flex-col items-center justify-center gap-2 rounded-xl bg-neutral-100 px-4 py-3\",\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"flex flex-1 flex-col items-center gap-2\">\n            <div\n              className=\"flex size-[72px] items-center justify-center rounded-full bg-neutral-400\"\n              aria-hidden=\"true\"\n            >\n              <MicrophoneIcon className=\"size-5 text-foreground-inverse\" />\n            </div>\n\n            <p\n              role=\"timer\"\n              aria-label=\"Recording time\"\n              className=\"typography-regular-body-lg text-foreground-default\"\n            >\n              {formattedElapsed} / {formatAudioTime(maxRecordingDuration * 1000)}\n            </p>\n          </div>\n\n          <div className=\"flex w-full items-center gap-2.5\" aria-hidden=\"true\">\n            <AudioWaveform\n              analyserNode={analyserNode}\n              isRecording={isRecording}\n              className=\"flex-1\"\n            />\n          </div>\n\n          <button\n            ref={stopButtonRef}\n            type=\"button\"\n            onClick={handleStopClick}\n            className=\"mt-1 flex size-11 items-center justify-center rounded-full bg-error-default text-foreground-onaccentinverse transition-colors hover:bg-error-default/80 focus:shadow-focus-ring focus-visible:outline-none\"\n            aria-label={stopButtonAriaLabel}\n          >\n            <StopIcon className=\"size-5\" />\n          </button>\n        </div>\n      );\n    }\n\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Audio upload\"\n        data-testid=\"audio-upload\"\n        data-state=\"idle\"\n        aria-disabled={disabled || undefined}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        className={cn(\n          \"flex flex-col items-center justify-center gap-2 rounded-xl bg-neutral-100 px-4 py-3 transition-colors\",\n          isDragActive && \"bg-brand-accent-muted ring-2 ring-brand-accent-default\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={acceptString}\n          multiple={maxFiles > 1}\n          onChange={handleFileInputChange}\n          className=\"peer sr-only\"\n          disabled={disabled}\n          aria-describedby={descriptionId}\n        />\n\n        <label\n          htmlFor={inputId}\n          className=\"flex cursor-pointer flex-col items-center gap-2 rounded-lg px-2 py-1 peer-focus-visible:shadow-focus-ring\"\n        >\n          <UploadCloudIcon className=\"size-5 text-foreground-default\" />\n\n          <span className=\"typography-semibold-body-lg text-center text-foreground-default\">\n            {uploadTitle}\n          </span>\n\n          <span\n            id={descriptionId}\n            className=\"typography-regular-body-md text-center text-foreground-default\"\n          >\n            {uploadDescription}\n          </span>\n        </label>\n\n        {allowRecording && isRecordingSupported && (\n          <>\n            <p className=\"typography-regular-body-md text-center text-foreground-default\">\n              {separatorText}\n            </p>\n\n            <Button\n              variant=\"brand\"\n              size=\"40\"\n              leftIcon={<MicrophoneIcon className=\"size-5\" />}\n              onClick={handleRecordClick}\n              disabled={disabled}\n              type=\"button\"\n            >\n              {recordButtonLabel}\n            </Button>\n          </>\n        )}\n      </div>\n    );\n  },\n);\n\nAudioUpload.displayName = \"AudioUpload\";\n"],"names":[],"mappings":"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"}

package/dist/components/AudioUpload/AudioWaveform.mjs

@@ -96,7 +96,7 @@ function AudioWaveform({ analyserNode, isRecording, className }) {
       observer.disconnect();
     };
   }, [analyserNode, isRecording]);
-  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: cn("h-5 w-full text-body-200", className) });
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: cn("h-5 w-full text-foreground-secondary", className) });
 }
 export {
   AudioWaveform

package/dist/components/AudioUpload/AudioWaveform.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioWaveform.mjs","sources":["../../../src/components/AudioUpload/AudioWaveform.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\ninterface AudioWaveformProps {\n  /** AnalyserNode from useAudioRecorder for frequency data */\n  analyserNode: AnalyserNode | null;\n  /** Whether recording is active (affects rendering mode) */\n  isRecording: boolean;\n  /** Additional className */\n  className?: string;\n}\n\nconst BAR_WIDTH = 3;\nconst BAR_GAP = 4;\nconst BAR_RADIUS = 1.5;\nconst MIN_BAR_HEIGHT = 3;\nconst IDLE_DOT_SIZE = 3;\n\n/** Draw a rounded rect, falling back to a plain rect if unsupported. */\nfunction drawRoundedRect(\n  ctx: CanvasRenderingContext2D,\n  x: number,\n  y: number,\n  w: number,\n  h: number,\n  r: number,\n) {\n  ctx.beginPath();\n  if (ctx.roundRect) {\n    ctx.roundRect(x, y, w, h, r);\n  } else {\n    ctx.rect(x, y, w, h);\n  }\n  ctx.fill();\n}\n\n/**\n * Canvas-based waveform visualization for audio recording.\n * Shows animated frequency bars when recording, static dots when idle.\n *\n * @internal Not exported from the library — used internally by AudioUpload.\n */\nexport function AudioWaveform({ analyserNode, isRecording, className }: AudioWaveformProps) {\n  const canvasRef = React.useRef<HTMLCanvasElement>(null);\n  const rafRef = React.useRef<number>(0);\n\n  React.useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n\n    // Cache color, dimensions, and frequency buffer outside the animation loop\n    let cachedColor = \"\";\n    let cachedWidth = 0;\n    let cachedHeight = 0;\n    let dataArray: Uint8Array<ArrayBuffer> | null = null;\n\n    const resizeCanvas = () => {\n      const rect = canvas.getBoundingClientRect();\n      const dpr = window.devicePixelRatio || 1;\n      canvas.width = rect.width * dpr;\n      canvas.height = rect.height * dpr;\n      ctx.scale(dpr, dpr);\n      cachedColor = getComputedStyle(canvas).color || \"#151515\";\n      cachedWidth = rect.width;\n      cachedHeight = rect.height;\n    };\n\n    resizeCanvas();\n\n    const drawIdle = () => {\n      ctx.clearRect(0, 0, cachedWidth, cachedHeight);\n      ctx.fillStyle = cachedColor;\n\n      const totalBarSpace = IDLE_DOT_SIZE + BAR_GAP;\n      const barCount = Math.floor(cachedWidth / totalBarSpace);\n      const startX = (cachedWidth - barCount * totalBarSpace + BAR_GAP) / 2;\n      const y = cachedHeight / 2 - IDLE_DOT_SIZE / 2;\n\n      for (let i = 0; i < barCount; i++) {\n        const x = startX + i * totalBarSpace;\n        ctx.beginPath();\n        ctx.arc(x + IDLE_DOT_SIZE / 2, y + IDLE_DOT_SIZE / 2, IDLE_DOT_SIZE / 2, 0, Math.PI * 2);\n        ctx.fill();\n      }\n    };\n\n    const drawRecording = () => {\n      if (!analyserNode) {\n        drawIdle();\n        return;\n      }\n\n      ctx.clearRect(0, 0, cachedWidth, cachedHeight);\n\n      // Reuse typed array across frames\n      const bufferLength = analyserNode.frequencyBinCount;\n      if (!dataArray || dataArray.length !== bufferLength) {\n        dataArray = new Uint8Array(bufferLength);\n      }\n      analyserNode.getByteFrequencyData(dataArray);\n\n      ctx.fillStyle = cachedColor;\n\n      const totalBarSpace = BAR_WIDTH + BAR_GAP;\n      const barCount = Math.floor(cachedWidth / totalBarSpace);\n      const startX = (cachedWidth - barCount * totalBarSpace + BAR_GAP) / 2;\n\n      const step = bufferLength / barCount;\n\n      for (let i = 0; i < barCount; i++) {\n        const dataIndex = Math.floor(i * step);\n        const value = (dataArray[dataIndex] ?? 0) / 255;\n        const barHeight = Math.max(MIN_BAR_HEIGHT, value * (cachedHeight - 4));\n        const x = startX + i * totalBarSpace;\n        const y = (cachedHeight - barHeight) / 2;\n\n        drawRoundedRect(ctx, x, y, BAR_WIDTH, barHeight, BAR_RADIUS);\n      }\n\n      rafRef.current = requestAnimationFrame(drawRecording);\n    };\n\n    if (isRecording && analyserNode) {\n      rafRef.current = requestAnimationFrame(drawRecording);\n    } else {\n      drawIdle();\n    }\n\n    const observer = new ResizeObserver(() => {\n      resizeCanvas();\n      if (!isRecording || !analyserNode) {\n        drawIdle();\n      }\n    });\n    observer.observe(canvas);\n\n    return () => {\n      cancelAnimationFrame(rafRef.current);\n      observer.disconnect();\n    };\n  }, [analyserNode, isRecording]);\n\n  return <canvas ref={canvasRef} className={cn(\"h-5 w-full text-body-200\", className)} />;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AudioWaveform.mjs","sources":["../../../src/components/AudioUpload/AudioWaveform.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\ninterface AudioWaveformProps {\n  /** AnalyserNode from useAudioRecorder for frequency data */\n  analyserNode: AnalyserNode | null;\n  /** Whether recording is active (affects rendering mode) */\n  isRecording: boolean;\n  /** Additional className */\n  className?: string;\n}\n\nconst BAR_WIDTH = 3;\nconst BAR_GAP = 4;\nconst BAR_RADIUS = 1.5;\nconst MIN_BAR_HEIGHT = 3;\nconst IDLE_DOT_SIZE = 3;\n\n/** Draw a rounded rect, falling back to a plain rect if unsupported. */\nfunction drawRoundedRect(\n  ctx: CanvasRenderingContext2D,\n  x: number,\n  y: number,\n  w: number,\n  h: number,\n  r: number,\n) {\n  ctx.beginPath();\n  if (ctx.roundRect) {\n    ctx.roundRect(x, y, w, h, r);\n  } else {\n    ctx.rect(x, y, w, h);\n  }\n  ctx.fill();\n}\n\n/**\n * Canvas-based waveform visualization for audio recording.\n * Shows animated frequency bars when recording, static dots when idle.\n *\n * @internal Not exported from the library — used internally by AudioUpload.\n */\nexport function AudioWaveform({ analyserNode, isRecording, className }: AudioWaveformProps) {\n  const canvasRef = React.useRef<HTMLCanvasElement>(null);\n  const rafRef = React.useRef<number>(0);\n\n  React.useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n\n    // Cache color, dimensions, and frequency buffer outside the animation loop\n    let cachedColor = \"\";\n    let cachedWidth = 0;\n    let cachedHeight = 0;\n    let dataArray: Uint8Array<ArrayBuffer> | null = null;\n\n    const resizeCanvas = () => {\n      const rect = canvas.getBoundingClientRect();\n      const dpr = window.devicePixelRatio || 1;\n      canvas.width = rect.width * dpr;\n      canvas.height = rect.height * dpr;\n      ctx.scale(dpr, dpr);\n      cachedColor = getComputedStyle(canvas).color || \"#151515\";\n      cachedWidth = rect.width;\n      cachedHeight = rect.height;\n    };\n\n    resizeCanvas();\n\n    const drawIdle = () => {\n      ctx.clearRect(0, 0, cachedWidth, cachedHeight);\n      ctx.fillStyle = cachedColor;\n\n      const totalBarSpace = IDLE_DOT_SIZE + BAR_GAP;\n      const barCount = Math.floor(cachedWidth / totalBarSpace);\n      const startX = (cachedWidth - barCount * totalBarSpace + BAR_GAP) / 2;\n      const y = cachedHeight / 2 - IDLE_DOT_SIZE / 2;\n\n      for (let i = 0; i < barCount; i++) {\n        const x = startX + i * totalBarSpace;\n        ctx.beginPath();\n        ctx.arc(x + IDLE_DOT_SIZE / 2, y + IDLE_DOT_SIZE / 2, IDLE_DOT_SIZE / 2, 0, Math.PI * 2);\n        ctx.fill();\n      }\n    };\n\n    const drawRecording = () => {\n      if (!analyserNode) {\n        drawIdle();\n        return;\n      }\n\n      ctx.clearRect(0, 0, cachedWidth, cachedHeight);\n\n      // Reuse typed array across frames\n      const bufferLength = analyserNode.frequencyBinCount;\n      if (!dataArray || dataArray.length !== bufferLength) {\n        dataArray = new Uint8Array(bufferLength);\n      }\n      analyserNode.getByteFrequencyData(dataArray);\n\n      ctx.fillStyle = cachedColor;\n\n      const totalBarSpace = BAR_WIDTH + BAR_GAP;\n      const barCount = Math.floor(cachedWidth / totalBarSpace);\n      const startX = (cachedWidth - barCount * totalBarSpace + BAR_GAP) / 2;\n\n      const step = bufferLength / barCount;\n\n      for (let i = 0; i < barCount; i++) {\n        const dataIndex = Math.floor(i * step);\n        const value = (dataArray[dataIndex] ?? 0) / 255;\n        const barHeight = Math.max(MIN_BAR_HEIGHT, value * (cachedHeight - 4));\n        const x = startX + i * totalBarSpace;\n        const y = (cachedHeight - barHeight) / 2;\n\n        drawRoundedRect(ctx, x, y, BAR_WIDTH, barHeight, BAR_RADIUS);\n      }\n\n      rafRef.current = requestAnimationFrame(drawRecording);\n    };\n\n    if (isRecording && analyserNode) {\n      rafRef.current = requestAnimationFrame(drawRecording);\n    } else {\n      drawIdle();\n    }\n\n    const observer = new ResizeObserver(() => {\n      resizeCanvas();\n      if (!isRecording || !analyserNode) {\n        drawIdle();\n      }\n    });\n    observer.observe(canvas);\n\n    return () => {\n      cancelAnimationFrame(rafRef.current);\n      observer.disconnect();\n    };\n  }, [analyserNode, isRecording]);\n\n  return (\n    <canvas ref={canvasRef} className={cn(\"h-5 w-full text-foreground-secondary\", className)} />\n  );\n}\n"],"names":[],"mappings":"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"}