@fanvue/ui 3.15.0 → 3.17.0

package/dist/cjs/components/MediaStatusIndicator/MediaStatusIndicator.cjs

@@ -0,0 +1,66 @@
+"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 CloseIcon = require("../Icons/CloseIcon.cjs");
+const EyeOffIcon = require("../Icons/EyeOffIcon.cjs");
+const FlagIcon = require("../Icons/FlagIcon.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 STATUS_CONFIG = {
+  default: {
+    container: "bg-warning-surface text-warning-content",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(FlagIcon.FlagIcon, { size: 16, filled: true }),
+    label: "Flagged"
+  },
+  removed: {
+    container: "border border-error-secondary bg-error-negative-content text-content-always-white",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, { size: 16 }),
+    label: "Removed"
+  },
+  sensitive: {
+    container: "bg-buttons-overlay-default text-content-always-white",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon.EyeOffIcon, { size: 16, filled: true }),
+    label: "Sensitive content"
+  }
+};
+const MediaStatusIndicator = React__namespace.forwardRef(
+  ({ status = "default", label, className, ...props }, ref) => {
+    const config = STATUS_CONFIG[status];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        role: "img",
+        "aria-label": props["aria-label"] ?? label ?? config.label,
+        className: cn.cn(
+          "inline-flex items-center justify-center rounded-full p-2 [&>svg]:size-4",
+          config.container,
+          className
+        ),
+        ...props,
+        children: config.icon
+      }
+    );
+  }
+);
+MediaStatusIndicator.displayName = "MediaStatusIndicator";
+exports.MediaStatusIndicator = MediaStatusIndicator;
+//# sourceMappingURL=MediaStatusIndicator.cjs.map

package/dist/cjs/components/MediaStatusIndicator/MediaStatusIndicator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaStatusIndicator.cjs","sources":["../../../../src/components/MediaStatusIndicator/MediaStatusIndicator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { EyeOffIcon } from \"../Icons/EyeOffIcon\";\nimport { FlagIcon } from \"../Icons/FlagIcon\";\n\n/**\n * State represented by the indicator.\n * - `\"default\"`: media flagged / pending review (amber).\n * - `\"removed\"`: media removed for a policy violation (red).\n * - `\"sensitive\"`: sensitive content hidden behind an overlay (dark).\n */\nexport type MediaStatusIndicatorStatus = \"default\" | \"removed\" | \"sensitive\";\n\nexport interface MediaStatusIndicatorProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** Which media state to represent. @default \"default\" */\n  status?: MediaStatusIndicatorStatus;\n  /**\n   * Accessible label announced by assistive tech. Defaults to a per-status\n   * description; pass your own for localisation or extra context.\n   */\n  label?: string;\n}\n\ntype StatusConfig = { container: string; icon: React.ReactNode; label: string };\n\nconst STATUS_CONFIG: Record<MediaStatusIndicatorStatus, StatusConfig> = {\n  default: {\n    container: \"bg-warning-surface text-warning-content\",\n    icon: <FlagIcon size={16} filled />,\n    label: \"Flagged\",\n  },\n  removed: {\n    container: \"border border-error-secondary bg-error-negative-content text-content-always-white\",\n    icon: <CloseIcon size={16} />,\n    label: \"Removed\",\n  },\n  sensitive: {\n    container: \"bg-buttons-overlay-default text-content-always-white\",\n    icon: <EyeOffIcon size={16} filled />,\n    label: \"Sensitive content\",\n  },\n};\n\n/**\n * A compact circular indicator that surfaces the moderation state of a piece of\n * media — flagged, removed, or sensitive. Typically overlaid on a thumbnail or\n * attachment.\n *\n * Renders as `role=\"img\"` with a descriptive `aria-label`; the inner glyph is\n * decorative.\n *\n * @example\n * ```tsx\n * <MediaStatusIndicator status=\"sensitive\" />\n * <MediaStatusIndicator status=\"removed\" label=\"Removed for violating guidelines\" />\n * ```\n */\nexport const MediaStatusIndicator = React.forwardRef<HTMLSpanElement, MediaStatusIndicatorProps>(\n  ({ status = \"default\", label, className, ...props }, ref) => {\n    const config = STATUS_CONFIG[status];\n    return (\n      <span\n        ref={ref}\n        role=\"img\"\n        aria-label={props[\"aria-label\"] ?? label ?? config.label}\n        className={cn(\n          \"inline-flex items-center justify-center rounded-full p-2 [&>svg]:size-4\",\n          config.container,\n          className,\n        )}\n        {...props}\n      >\n        {config.icon}\n      </span>\n    );\n  },\n);\n\nMediaStatusIndicator.displayName = \"MediaStatusIndicator\";\n"],"names":["jsx","FlagIcon","CloseIcon","EyeOffIcon","React","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,gBAAkE;AAAA,EACtE,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAMA,2BAAAA,IAACC,mBAAA,EAAS,MAAM,IAAI,QAAM,MAAC;AAAA,IACjC,OAAO;AAAA,EAAA;AAAA,EAET,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAMD,2BAAAA,IAACE,UAAAA,WAAA,EAAU,MAAM,GAAA,CAAI;AAAA,IAC3B,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,WAAW;AAAA,IACX,MAAMF,2BAAAA,IAACG,uBAAA,EAAW,MAAM,IAAI,QAAM,MAAC;AAAA,IACnC,OAAO;AAAA,EAAA;AAEX;AAgBO,MAAM,uBAAuBC,iBAAM;AAAA,EACxC,CAAC,EAAE,SAAS,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC3D,UAAM,SAAS,cAAc,MAAM;AACnC,WACEJ,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,MAAM,YAAY,KAAK,SAAS,OAAO;AAAA,QACnD,WAAWK,GAAAA;AAAAA,UACT;AAAA,UACA,OAAO;AAAA,UACP;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAGd;AACF;AAEA,qBAAqB,cAAc;;"}

package/dist/cjs/components/Select/Select.cjs

@@ -98,7 +98,7 @@ const Select = React__namespace.forwardRef(
                 "aria-describedby": bottomText ? helperTextId : void 0,
                 "aria-invalid": error || void 0,
                 className: cn.cn(
-                  "flex w-full cursor-pointer items-center justify-between rounded-sm border bg-inputs-inputs-primary outline-none motion-safe:transition-colors focus-visible:shadow-focus-ring",
+                  "flex w-full cursor-pointer items-center justify-between rounded-sm border bg-inputs-inputs-primary outline-none focus-visible:shadow-focus-ring motion-safe:transition-colors",
                   TRIGGER_HEIGHT[size],
                   TRIGGER_PADDING_X[size],
                   TRIGGER_GAP[size],
@@ -173,22 +173,66 @@ const SelectContent = React__namespace.forwardRef(
   ) })
 );
 SelectContent.displayName = "SelectContent";
-const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Item,
-  {
-    ref,
-    className: cn.cn(
-      "typography-body-default-16px-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xs py-2 pr-2 pl-3 text-content-primary outline-none",
-      "focus:bg-neutral-alphas-100 data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon.CheckIcon, { className: "size-4 text-content-primary" }) })
-    ]
-  }
-));
+const ITEM_SIZE_CLASSES = {
+  "40": "min-h-10 py-2 typography-body-default-16px-regular",
+  "32": "min-h-8 py-[7px] typography-body-small-14px-regular"
+};
+const ITEM_DESCRIPTION_TYPOGRAPHY = {
+  "40": "typography-body-small-14px-regular",
+  "32": "typography-description-12px-regular"
+};
+function isRenderableNode(node) {
+  return node !== null && node !== void 0 && typeof node !== "boolean";
+}
+const SelectItem = React__namespace.forwardRef(({ className, children, size, leadingIcon, avatar, description, ...props }, ref) => {
+  const { size: triggerSize } = React__namespace.useContext(SelectContext);
+  const itemSize = size ?? (triggerSize === "32" ? "32" : "40");
+  const hasDescription = isRenderableNode(description);
+  const hasAvatar = isRenderableNode(avatar);
+  const hasLeadingIcon = isRenderableNode(leadingIcon);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.Item,
+    {
+      ref,
+      className: cn.cn(
+        "group relative flex w-full cursor-pointer select-none gap-2 rounded-xs px-3 text-content-primary outline-none",
+        hasDescription ? "items-start" : "items-center",
+        ITEM_SIZE_CLASSES[itemSize],
+        hasAvatar && !hasDescription && itemSize === "32" && "py-1",
+        "focus:bg-neutral-alphas-50 data-highlighted:bg-neutral-alphas-50",
+        "data-disabled:pointer-events-none data-disabled:text-content-disabled",
+        className
+      ),
+      ...props,
+      children: [
+        hasAvatar ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: avatar }) : hasLeadingIcon && (hasDescription ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center pt-0.5 [&>svg]:size-4", children: leadingIcon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center [&>svg]:size-4", children: leadingIcon })),
+        hasDescription ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn.cn(
+                "truncate text-content-secondary group-data-[disabled]:text-content-disabled",
+                ITEM_DESCRIPTION_TYPOGRAPHY[itemSize]
+              ),
+              children: description
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectPrimitive__namespace.ItemIndicator,
+          {
+            className: cn.cn(
+              "ml-auto flex size-4 shrink-0 items-center justify-center",
+              hasDescription && "self-start"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon.CheckIcon, { className: "size-4 text-content-primary group-data-[disabled]:text-content-disabled" })
+          }
+        )
+      ]
+    }
+  );
+});
 SelectItem.displayName = "SelectItem";
 const SelectGroup = SelectPrimitive__namespace.Group;
 SelectGroup.displayName = "SelectGroup";

package/dist/cjs/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-sm border bg-inputs-inputs-primary outline-none motion-safe:transition-colors focus-visible:shadow-focus-ring\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-content\" : \"border-border-primary\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-alphas-400 data-[state=open]:border-neutral-alphas-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <span className=\"min-w-0 flex-1 truncate text-left text-content-primary [&>[data-placeholder]]:text-content-tertiary\">\n                  <SelectPrimitive.Value placeholder={placeholder} />\n                </span>\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n                error ? \"text-error-content\" : \"text-content-secondary\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(\n  (\n    {\n      className,\n      children,\n      position = \"popper\",\n      sideOffset = 4,\n      collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n      style,\n      ...props\n    },\n    ref,\n  ) => (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={ref}\n        position={position}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n        className={cn(\n          \"relative w-max min-w-(--radix-select-trigger-width) max-w-(--radix-select-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-background-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n          \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          className,\n        )}\n        {...props}\n      >\n        <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  ),\n);\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-body-default-16px-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xs py-2 pr-2 pl-3 text-content-primary outline-none\",\n      \"focus:bg-neutral-alphas-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-content-primary\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"typography-description-12px-semibold px-3 py-1.5 text-content-secondary\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-alphas-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","CheckIcon"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-sm border bg-inputs-inputs-primary outline-none focus-visible:shadow-focus-ring motion-safe:transition-colors\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-content\" : \"border-border-primary\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-alphas-400 data-[state=open]:border-neutral-alphas-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <span className=\"min-w-0 flex-1 truncate text-left text-content-primary [&>[data-placeholder]]:text-content-tertiary\">\n                  <SelectPrimitive.Value placeholder={placeholder} />\n                </span>\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n                error ? \"text-error-content\" : \"text-content-secondary\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(\n  (\n    {\n      className,\n      children,\n      position = \"popper\",\n      sideOffset = 4,\n      collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n      style,\n      ...props\n    },\n    ref,\n  ) => (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={ref}\n        position={position}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n        className={cn(\n          \"relative w-max min-w-(--radix-select-trigger-width) max-w-(--radix-select-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-background-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n          \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          className,\n        )}\n        {...props}\n      >\n        <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  ),\n);\n\nSelectContent.displayName = \"SelectContent\";\n\n/** Dropdown row height in pixels, matching the V2 Menu Item spec. */\nexport type SelectItemSize = \"40\" | \"32\";\n\nconst ITEM_SIZE_CLASSES: Record<SelectItemSize, string> = {\n  \"40\": \"min-h-10 py-2 typography-body-default-16px-regular\",\n  \"32\": \"min-h-8 py-[7px] typography-body-small-14px-regular\",\n};\n\nconst ITEM_DESCRIPTION_TYPOGRAPHY: Record<SelectItemSize, string> = {\n  \"40\": \"typography-body-small-14px-regular\",\n  \"32\": \"typography-description-12px-regular\",\n};\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {\n  /** Row height. Defaults to the parent {@link Select} size (`48`/`40` → `40`, `32` → `32`). */\n  size?: SelectItemSize;\n  /** Icon (or other node) rendered before the label. Ignored when {@link SelectItemProps.avatar} is set. */\n  leadingIcon?: React.ReactNode;\n  /**\n   * Leading avatar rendered in place of {@link SelectItemProps.leadingIcon}, for rows\n   * representing a person or account. Pass an `Avatar` sized to `24`. Takes precedence over `leadingIcon`.\n   */\n  avatar?: React.ReactNode;\n  /** Optional secondary text rendered on a second line below the label. */\n  description?: React.ReactNode;\n}\n\n/**\n * Whether a `ReactNode` will actually render. Excludes `null`/`undefined` and\n * booleans so short-circuit props (e.g. `description={cond && \"…\"}`) don't flip\n * the item into a two-line/avatar layout when they resolve to `false`.\n */\nfunction isRenderableNode(node: React.ReactNode): boolean {\n  return node !== null && node !== undefined && typeof node !== \"boolean\";\n}\n\n/**\n * An individual option inside {@link SelectContent}, following the V2 Menu Item spec.\n *\n * Supports a leading icon or avatar, an optional two-line layout via `description`,\n * and the standard hover / selected / disabled states. The selected row is marked\n * with a trailing check indicator.\n *\n * @example\n * ```tsx\n * <SelectItem value=\"jane\" avatar={<Avatar size={24} fallback=\"JD\" />} description=\"Product designer\">\n *   Jane Doe\n * </SelectItem>\n * ```\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, size, leadingIcon, avatar, description, ...props }, ref) => {\n  const { size: triggerSize } = React.useContext(SelectContext);\n  const itemSize: SelectItemSize = size ?? (triggerSize === \"32\" ? \"32\" : \"40\");\n  const hasDescription = isRenderableNode(description);\n  const hasAvatar = isRenderableNode(avatar);\n  const hasLeadingIcon = isRenderableNode(leadingIcon);\n\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"group relative flex w-full cursor-pointer select-none gap-2 rounded-xs px-3 text-content-primary outline-none\",\n        hasDescription ? \"items-start\" : \"items-center\",\n        ITEM_SIZE_CLASSES[itemSize],\n        hasAvatar && !hasDescription && itemSize === \"32\" && \"py-1\",\n        \"focus:bg-neutral-alphas-50 data-highlighted:bg-neutral-alphas-50\",\n        \"data-disabled:pointer-events-none data-disabled:text-content-disabled\",\n        className,\n      )}\n      {...props}\n    >\n      {hasAvatar ? (\n        <span className=\"shrink-0\">{avatar}</span>\n      ) : (\n        hasLeadingIcon &&\n        (hasDescription ? (\n          <span className=\"flex shrink-0 items-center pt-0.5 [&>svg]:size-4\">{leadingIcon}</span>\n        ) : (\n          <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{leadingIcon}</span>\n        ))\n      )}\n\n      {hasDescription ? (\n        <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n          <span className=\"truncate\">\n            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n          </span>\n          <span\n            className={cn(\n              \"truncate text-content-secondary group-data-[disabled]:text-content-disabled\",\n              ITEM_DESCRIPTION_TYPOGRAPHY[itemSize],\n            )}\n          >\n            {description}\n          </span>\n        </span>\n      ) : (\n        <span className=\"min-w-0 flex-1 truncate\">\n          <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n        </span>\n      )}\n\n      <SelectPrimitive.ItemIndicator\n        className={cn(\n          \"ml-auto flex size-4 shrink-0 items-center justify-center\",\n          hasDescription && \"self-start\",\n        )}\n      >\n        <CheckIcon className=\"size-4 text-content-primary group-data-[disabled]:text-content-disabled\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n});\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"typography-description-12px-semibold px-3 py-1.5 text-content-secondary\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-alphas-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","CheckIcon"],"mappings":"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"}

package/dist/cjs/components/SubscribeButton/SubscribeButton.cjs

@@ -0,0 +1,53 @@
+"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 Button = require("../Button/Button.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 OLD_PRICE_TYPOGRAPHY = {
+  "48": "typography-body-small-14px-regular",
+  "40": "typography-body-small-14px-regular",
+  "32": "typography-description-12px-regular"
+};
+function warnMissingAccessibleName(hasTextLabel, ariaLabel) {
+  if (process.env.NODE_ENV !== "production" && !hasTextLabel && !ariaLabel) {
+    console.warn(
+      "SubscribeButton: no accessible name could be derived from a string `children`. Pass an `aria-label` so the action and price are announced."
+    );
+  }
+}
+const SubscribeButton = React__namespace.forwardRef(
+  ({ variant = "primary", size = "48", price, discount, children = "Join now", ...props }, ref) => {
+    const labelText = typeof children === "string" ? children : void 0;
+    warnMissingAccessibleName(Boolean(labelText?.trim()), props["aria-label"]);
+    const accessibleName = props["aria-label"] ?? [labelText, price, discount ? `was ${discount}` : null].filter(Boolean).join(", ");
+    return /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { ref, variant, size, ...props, "aria-label": accessibleName, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left", children }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-2", "aria-hidden": "true", children: [
+        discount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn(OLD_PRICE_TYPOGRAPHY[size], "line-through"), children: discount }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: price })
+      ] })
+    ] });
+  }
+);
+SubscribeButton.displayName = "SubscribeButton";
+exports.SubscribeButton = SubscribeButton;
+//# sourceMappingURL=SubscribeButton.cjs.map

package/dist/cjs/components/SubscribeButton/SubscribeButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribeButton.cjs","sources":["../../../../src/components/SubscribeButton/SubscribeButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\n\n/** Visual style variant of the subscribe button. Mirrors the V2 Subscribe Button \"Type\" set (`brand` is Figma's \"Upsell\"). */\nexport type SubscribeButtonVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"outline\" | \"brand\";\n\n/** Height of the subscribe button in pixels. */\nexport type SubscribeButtonSize = \"48\" | \"40\" | \"32\";\n\nexport interface SubscribeButtonProps\n  extends Omit<\n    ButtonProps,\n    \"variant\" | \"size\" | \"price\" | \"discount\" | \"leftIcon\" | \"rightIcon\" | \"asChild\"\n  > {\n  /** Visual style variant. `brand` is the Figma \"Upsell\" (green) type. @default \"primary\" */\n  variant?: SubscribeButtonVariant;\n  /** Height of the button in pixels. @default \"48\" */\n  size?: SubscribeButtonSize;\n  /** Current price shown on the trailing side (e.g. `\"$9.99/mo\"`). */\n  price: string;\n  /** Previous price rendered struck-through before {@link SubscribeButtonProps.price}. */\n  discount?: string;\n  /** Leading action label. @default \"Join now\" */\n  children?: React.ReactNode;\n}\n\nconst OLD_PRICE_TYPOGRAPHY: Record<SubscribeButtonSize, string> = {\n  \"48\": \"typography-body-small-14px-regular\",\n  \"40\": \"typography-body-small-14px-regular\",\n  \"32\": \"typography-description-12px-regular\",\n};\n\nfunction warnMissingAccessibleName(hasTextLabel: boolean, ariaLabel?: string) {\n  if (process.env.NODE_ENV !== \"production\" && !hasTextLabel && !ariaLabel) {\n    console.warn(\n      \"SubscribeButton: no accessible name could be derived from a string `children`. Pass an `aria-label` so the action and price are announced.\",\n    );\n  }\n}\n\n/**\n * A subscription / purchase button pairing an action label with the current\n * price and an optional struck-through previous price. Built on {@link Button},\n * so it inherits the same variants, sizes, `negative` dark-surface treatment,\n * `fullWidth`, loading, and disabled behaviour.\n *\n * The accessible name defaults to the label plus pricing (e.g. `\"Join now, $9.99,\n * was $19.99\"`); pass `aria-label` to override.\n *\n * @example\n * ```tsx\n * <SubscribeButton price=\"$9.99/mo\" discount=\"$19.99\" variant=\"brand\" fullWidth>\n *   Join now\n * </SubscribeButton>\n * ```\n */\nexport const SubscribeButton = React.forwardRef<HTMLButtonElement, SubscribeButtonProps>(\n  ({ variant = \"primary\", size = \"48\", price, discount, children = \"Join now\", ...props }, ref) => {\n    const labelText = typeof children === \"string\" ? children : undefined;\n    warnMissingAccessibleName(Boolean(labelText?.trim()), props[\"aria-label\"]);\n\n    const accessibleName =\n      props[\"aria-label\"] ??\n      [labelText, price, discount ? `was ${discount}` : null].filter(Boolean).join(\", \");\n\n    return (\n      <Button ref={ref} variant={variant} size={size} {...props} aria-label={accessibleName}>\n        <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n        <span className=\"flex shrink-0 items-center gap-2\" aria-hidden=\"true\">\n          {discount && (\n            <span className={cn(OLD_PRICE_TYPOGRAPHY[size], \"line-through\")}>{discount}</span>\n          )}\n          <span>{price}</span>\n        </span>\n      </Button>\n    );\n  },\n);\n\nSubscribeButton.displayName = \"SubscribeButton\";\n"],"names":["React","jsxs","Button","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,uBAA4D;AAAA,EAChE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,0BAA0B,cAAuB,WAAoB;AAC5E,MAAI,QAAQ,IAAI,aAAa,gBAAgB,CAAC,gBAAgB,CAAC,WAAW;AACxE,YAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AACF;AAkBO,MAAM,kBAAkBA,iBAAM;AAAA,EACnC,CAAC,EAAE,UAAU,WAAW,OAAO,MAAM,OAAO,UAAU,WAAW,YAAY,GAAG,MAAA,GAAS,QAAQ;AAC/F,UAAM,YAAY,OAAO,aAAa,WAAW,WAAW;AAC5D,8BAA0B,QAAQ,WAAW,KAAA,CAAM,GAAG,MAAM,YAAY,CAAC;AAEzE,UAAM,iBACJ,MAAM,YAAY,KAClB,CAAC,WAAW,OAAO,WAAW,OAAO,QAAQ,KAAK,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI;AAEnF,WACEC,gCAACC,OAAAA,UAAO,KAAU,SAAkB,MAAa,GAAG,OAAO,cAAY,gBACrE,UAAA;AAAA,MAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,qCAAqC,SAAA,CAAS;AAAA,MAC9DF,2BAAAA,KAAC,QAAA,EAAK,WAAU,oCAAmC,eAAY,QAC5D,UAAA;AAAA,QAAA,YACCE,2BAAAA,IAAC,UAAK,WAAWC,GAAAA,GAAG,qBAAqB,IAAI,GAAG,cAAc,GAAI,UAAA,SAAA,CAAS;AAAA,QAE7ED,2BAAAA,IAAC,UAAM,UAAA,MAAA,CAAM;AAAA,MAAA,EAAA,CACf;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;;"}

package/dist/cjs/components/VoiceNote/VoiceNote.cjs

@@ -0,0 +1,305 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const audioWaveform = require("../../utils/audioWaveform.cjs");
+const cn = require("../../utils/cn.cjs");
+const useAudioPlayback = require("../../utils/useAudioPlayback.cjs");
+const useFittedBarCount = require("../../utils/useFittedBarCount.cjs");
+const useWaveformPeaks = require("../../utils/useWaveformPeaks.cjs");
+const useWaveformSeek = require("../../utils/useWaveformSeek.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const CloseIcon = require("../Icons/CloseIcon.cjs");
+const PauseIcon = require("../Icons/PauseIcon.cjs");
+const PlayIcon = require("../Icons/PlayIcon.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 DEFAULT_WAVEFORM = [
+  0.15,
+  0.46,
+  0.85,
+  0.23,
+  1,
+  0.85,
+  0.62,
+  0.62,
+  0.62,
+  0.85,
+  0.85,
+  0.62,
+  0.62,
+  1,
+  1,
+  0.62,
+  0.62,
+  0.62,
+  0.23,
+  0.23,
+  0.15,
+  0.46,
+  0.85,
+  0.23,
+  1,
+  0.46,
+  0.85,
+  0.62,
+  0.23,
+  0.23,
+  0.62,
+  0.62,
+  0.85,
+  0.85,
+  0.62,
+  0.62,
+  0.85,
+  1,
+  0.85,
+  1,
+  0.62,
+  0.62,
+  0.62,
+  0.23,
+  0.23,
+  0.62,
+  0.23,
+  0.23,
+  0.23,
+  0.62,
+  0.85,
+  0.62,
+  0.85,
+  1,
+  0.85,
+  0.85,
+  1,
+  0.85,
+  0.23,
+  0.23,
+  0.23,
+  0.46,
+  0.62,
+  0.23,
+  0.23
+];
+const MIN_BAR_HEIGHT = 4;
+const MAX_BAR_HEIGHT = {
+  default: 26,
+  small: 16
+};
+const CONTROL_SIZE = {
+  default: "48",
+  small: "32"
+};
+const BAR_WIDTH_PX = 4;
+const BAR_GAP_PX = 4;
+const DEFAULT_BAR_COUNT = 40;
+function activeBarClass(negative) {
+  return negative ? "bg-messages-waveform-listening-negative-active" : "bg-messages-waveform-listening-active";
+}
+function inactiveBarClass(negative) {
+  return negative ? "bg-messages-waveform-listening-negative-inactive" : "bg-messages-waveform-listening-inactive";
+}
+function restingBarClass(negative) {
+  return negative ? "bg-messages-waveform-listening-negative-default" : "bg-messages-waveform-default";
+}
+function WaveformBars({ bars, variant, size, negative, progress }) {
+  const hasProgress = progress !== void 0;
+  const activeCount = hasProgress ? Math.round(progress * bars.length) : 0;
+  const maxBarHeight = MAX_BAR_HEIGHT[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: bars.map((amplitude, index) => {
+    const height = variant === "flat" ? MIN_BAR_HEIGHT : Math.max(MIN_BAR_HEIGHT, Math.round(amplitude * maxBarHeight));
+    const colorClass = !hasProgress ? restingBarClass(negative) : index < activeCount ? activeBarClass(negative) : inactiveBarClass(negative);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn.cn("w-1 shrink-0 rounded-[2px]", colorClass),
+        style: { height }
+      },
+      index
+    );
+  }) });
+}
+function WaveformMeta({ time, fileName, textColor }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    time && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn("typography-body-small-14px-regular shrink-0", textColor), children: time }),
+    fileName && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn.cn(
+          "typography-body-small-14px-regular min-w-0 max-w-[50%] truncate",
+          textColor
+        ),
+        children: fileName
+      }
+    )
+  ] });
+}
+const VoiceNote = React__namespace.forwardRef(
+  ({
+    className,
+    src,
+    duration,
+    waveform = DEFAULT_WAVEFORM,
+    variant = "default",
+    size = "default",
+    negative = false,
+    progress,
+    playing,
+    defaultPlaying = false,
+    onPlayPause,
+    onEnded,
+    time,
+    fileName,
+    showControls = true,
+    showTimestamp = true,
+    showRemove = false,
+    onRemove,
+    playButtonLabel,
+    removeButtonLabel = "Remove",
+    "aria-label": ariaLabel = "Voice note",
+    ...props
+  }, ref) => {
+    const isPlayer = src !== void 0;
+    const playback = useAudioPlayback.useAudioPlayback({
+      src,
+      duration,
+      playing,
+      defaultPlaying,
+      onEnded,
+      onPlay: React__namespace.useCallback(() => onPlayPause?.(true), [onPlayPause]),
+      onPause: React__namespace.useCallback(() => onPlayPause?.(false), [onPlayPause])
+    });
+    const decodedPeaks = useWaveformPeaks.useWaveformPeaks(src);
+    const [internalPlaying, setInternalPlaying] = React__namespace.useState(defaultPlaying);
+    const isControlled = playing !== void 0;
+    const trackRef = React__namespace.useRef(null);
+    const fittedBarCount = useFittedBarCount.useFittedBarCount(trackRef, {
+      barWidthPx: BAR_WIDTH_PX,
+      gapPx: BAR_GAP_PX,
+      fallback: DEFAULT_BAR_COUNT
+    });
+    const seekProps = useWaveformSeek.useWaveformSeek({
+      trackRef,
+      displayDuration: playback.displayDuration,
+      currentTime: playback.currentTime,
+      seekTo: playback.seekTo,
+      setSeeking: playback.setSeeking
+    });
+    const isPlaying = isPlayer ? playback.isPlaying : playing ?? internalPlaying;
+    const handlePlayPause = () => {
+      if (isPlayer) {
+        playback.toggle();
+        return;
+      }
+      const next = !isPlaying;
+      if (!isControlled) setInternalPlaying(next);
+      onPlayPause?.(next);
+    };
+    const bars = audioWaveform.resamplePeaks(isPlayer ? decodedPeaks : waveform, fittedBarCount);
+    const progressValue = isPlayer ? playback.progress : progress;
+    const textColor = negative ? "text-content-primary-inverted" : "text-content-primary";
+    const playerTime = playback.hasStarted ? playback.currentTime : playback.displayDuration;
+    const displayTime = isPlayer ? audioWaveform.formatTime(playerTime) : time;
+    const controlLabel = playButtonLabel ?? (isPlaying ? "Pause" : "Play");
+    const trackAria = isPlayer ? seekProps : { "aria-hidden": true };
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          role: "group",
+          "aria-label": ariaLabel,
+          className: cn.cn("flex items-center gap-3", size === "small" ? "h-8" : "h-12", className),
+          ...props,
+          children: [
+            showControls && /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton.IconButton,
+              {
+                variant: "secondary",
+                size: CONTROL_SIZE[size],
+                negative,
+                icon: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(PauseIcon.PauseIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlayIcon.PlayIcon, {}),
+                "aria-label": controlLabel,
+                onClick: handlePlayPause
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: trackRef,
+                "data-testid": "voice-note-waveform",
+                className: cn.cn(
+                  "flex h-full min-w-0 flex-1 items-center gap-1 overflow-hidden",
+                  isPlayer && "cursor-pointer touch-none select-none focus-visible:shadow-focus-ring focus-visible:outline-none"
+                ),
+                ...trackAria,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  WaveformBars,
+                  {
+                    bars,
+                    variant,
+                    size,
+                    negative,
+                    progress: progressValue
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              WaveformMeta,
+              {
+                time: showTimestamp ? displayTime : void 0,
+                fileName,
+                textColor
+              }
+            ),
+            showRemove && /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton.IconButton,
+              {
+                variant: "tertiary",
+                size: CONTROL_SIZE[size],
+                negative,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, {}),
+                "aria-label": removeButtonLabel,
+                onClick: onRemove
+              }
+            ),
+            isPlayer && // biome-ignore lint/a11y/useMediaCaption: a UI voice note / short recording, not narrated content needing captions
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "audio",
+              {
+                ref: playback.audioRef,
+                src,
+                preload: "metadata",
+                className: "hidden",
+                onLoadedMetadata: playback.audioHandlers.onLoadedMetadata,
+                onTimeUpdate: playback.audioHandlers.onTimeUpdate,
+                onEnded: playback.audioHandlers.onEnded
+              }
+            )
+          ]
+        }
+      )
+    );
+  }
+);
+VoiceNote.displayName = "VoiceNote";
+exports.VoiceNote = VoiceNote;
+//# sourceMappingURL=VoiceNote.cjs.map