@fanvue/ui 3.13.0 → 3.14.0

package/dist/cjs/components/Icons/ListViewIcon.cjs

@@ -0,0 +1,50 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const BaseIcon = require("./BaseIcon.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 VARIANTS = {
+  16: {
+    outlined: [
+      {
+        d: "M13.267 9H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487v-2.693c0-1.06-.4-1.487-1.4-1.487m0-7.667H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487V2.82c0-1.06-.4-1.487-1.4-1.487"
+      }
+    ]
+  },
+  24: {
+    outlined: [
+      {
+        d: "M19.9 13.5H4.1c-1.5 0-2.1.64-2.1 2.23v4.04C2 21.36 2.6 22 4.1 22h15.8c1.5 0 2.1-.64 2.1-2.23v-4.04c0-1.59-.6-2.23-2.1-2.23m0-11.5H4.1C2.6 2 2 2.64 2 4.23v4.04c0 1.59.6 2.23 2.1 2.23h15.8c1.5 0 2.1-.64 2.1-2.23V4.23C22 2.64 21.4 2 19.9 2"
+      }
+    ]
+  },
+  32: {
+    outlined: [
+      {
+        d: "M26.533 18H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.853 2.8-2.973v-5.387c0-2.12-.8-2.973-2.8-2.973m0-15.333H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.854 2.8-2.973V5.64c0-2.12-.8-2.973-2.8-2.973"
+      }
+    ]
+  }
+};
+const ListViewIcon = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseIcon.BaseIcon, { ref, variants: VARIANTS, ...props }));
+ListViewIcon.displayName = "ListViewIcon";
+exports.ListViewIcon = ListViewIcon;
+//# sourceMappingURL=ListViewIcon.cjs.map

package/dist/cjs/components/Icons/ListViewIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListViewIcon.cjs","sources":["../../../../src/components/Icons/ListViewIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    outlined: [\n      {\n        d: \"M13.267 9H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487v-2.693c0-1.06-.4-1.487-1.4-1.487m0-7.667H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487V2.82c0-1.06-.4-1.487-1.4-1.487\",\n      },\n    ],\n  },\n  24: {\n    outlined: [\n      {\n        d: \"M19.9 13.5H4.1c-1.5 0-2.1.64-2.1 2.23v4.04C2 21.36 2.6 22 4.1 22h15.8c1.5 0 2.1-.64 2.1-2.23v-4.04c0-1.59-.6-2.23-2.1-2.23m0-11.5H4.1C2.6 2 2 2.64 2 4.23v4.04c0 1.59.6 2.23 2.1 2.23h15.8c1.5 0 2.1-.64 2.1-2.23V4.23C22 2.64 21.4 2 19.9 2\",\n      },\n    ],\n  },\n  32: {\n    outlined: [\n      {\n        d: \"M26.533 18H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.853 2.8-2.973v-5.387c0-2.12-.8-2.973-2.8-2.973m0-15.333H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.854 2.8-2.973V5.64c0-2.12-.8-2.973-2.8-2.973\",\n      },\n    ],\n  },\n};\n\n/** Props for {@link ListViewIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type ListViewIconProps = BaseIconProps;\n\n/**\n * List view icon. Renders at sizes 16, 24, or 32 px.\n *\n * @example\n * ```tsx\n * <ListViewIcon size={24} />\n * ```\n */\nexport const ListViewIcon = React.forwardRef<SVGSVGElement, ListViewIconProps>((props, ref) => (\n  <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nListViewIcon.displayName = \"ListViewIcon\";\n"],"names":["React","jsx","BaseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAaO,MAAM,eAAeA,iBAAM,WAA6C,CAAC,OAAO,QACrFC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,aAAa,cAAc;;"}

package/dist/cjs/components/SegmentedControl/SegmentedControl.cjs

@@ -35,11 +35,47 @@ function warnMissingAccessibleName(ariaLabel, ariaLabelledBy) {
     }
   }
 }
+function warnMissingOptionAccessibleName(options) {
+  if (process.env.NODE_ENV !== "production") {
+    for (const option of options) {
+      if (option.icon && !option.label?.trim()) {
+        console.warn(
+          `SegmentedControl: icon-only segment "${option.value}" is missing a non-empty \`label\` to use as its accessible name.`
+        );
+      }
+    }
+  }
+}
+function getSegmentClassName({
+  appearance,
+  size,
+  variant,
+  isSelected,
+  disabled
+}) {
+  return cn.cn(
+    "relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full",
+    "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
+    "focus-visible:shadow-focus-ring focus-visible:outline-none",
+    variant === "fill" ? "flex-1" : "shrink-0",
+    appearance === "plain" ? cn.cn(
+      // Padding + negative margin enlarge the hit target without changing the
+      // visual footprint, which must stay glyph-only to match the design.
+      "-m-1 p-1",
+      isSelected ? "text-icons-primary" : "text-icons-tertiary hover:text-icons-primary"
+    ) : cn.cn(
+      sizeClasses[size],
+      isSelected ? "bg-buttons-primary-default text-content-primary-inverted shadow-sm" : "text-content-primary hover:bg-buttons-switch-hover"
+    ),
+    disabled && "pointer-events-none"
+  );
+}
 const SegmentedControl = React__namespace.forwardRef(
   ({
     className,
     size = "32",
     variant = "hug",
+    appearance = "pill",
     options,
     value: controlledValue,
     defaultValue,
@@ -48,6 +84,7 @@ const SegmentedControl = React__namespace.forwardRef(
     ...props
   }, ref) => {
     warnMissingAccessibleName(props["aria-label"], props["aria-labelledby"]);
+    warnMissingOptionAccessibleName(options);
     const [internalValue, setInternalValue] = React__namespace.useState(defaultValue ?? options[0]?.value);
     const isControlled = controlledValue !== void 0;
     const currentValue = isControlled ? controlledValue : internalValue;
@@ -74,8 +111,9 @@ const SegmentedControl = React__namespace.forwardRef(
         ref,
         role: "radiogroup",
         className: cn.cn(
-          "relative items-center rounded-full bg-surface-tertiary p-1",
+          "relative items-center rounded-full",
           variant === "fill" ? "flex w-full" : "inline-flex",
+          appearance === "plain" ? "gap-2" : "bg-surface-tertiary p-1",
           disabled && "cursor-not-allowed opacity-50",
           className
         ),
@@ -95,18 +133,11 @@ const SegmentedControl = React__namespace.forwardRef(
                 "aria-checked": isSelected,
                 tabIndex: isSelected || !anySelected && index === 0 ? 0 : -1,
                 disabled,
+                "aria-label": option.icon ? option.label : void 0,
                 onClick: () => handleSelect(option.value),
                 onKeyDown: (e) => handleKeyDown(e, index),
-                className: cn.cn(
-                  "relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full",
-                  "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
-                  "focus-visible:shadow-focus-ring focus-visible:outline-none",
-                  variant === "fill" ? "flex-1" : "shrink-0",
-                  sizeClasses[size],
-                  isSelected ? "bg-buttons-primary-default text-content-primary-inverted shadow-sm" : "text-content-primary hover:bg-buttons-switch-hover",
-                  disabled && "pointer-events-none"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
+                className: getSegmentClassName({ appearance, size, variant, isSelected, disabled }),
+                children: option.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center justify-center", "aria-hidden": "true", children: option.icon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
               },
               option.value
             )

package/dist/cjs/components/SegmentedControl/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.cjs","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the segmented control in pixels. */\nexport type SegmentedControlSize = \"32\" | \"40\" | \"48\";\n\n/**\n * Segment layout.\n * - `\"hug\"`: each segment is sized to its content.\n * - `\"fill\"`: the control spans the full width of its container and each segment grows equally.\n */\nexport type SegmentedControlVariant = \"hug\" | \"fill\";\n\n/** Describes one selectable segment. */\nexport interface SegmentedControlOption {\n  /** Display label for the segment. */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the control in pixels. @default \"32\" */\n  size?: SegmentedControlSize;\n  /** Segment layout. @default \"hug\" */\n  variant?: SegmentedControlVariant;\n  /** The selectable segments. Designed for two or three mutually exclusive options. */\n  options: SegmentedControlOption[];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). Defaults to the first option. */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the control is disabled. @default false */\n  disabled?: boolean;\n}\n\n/** Padding and typography per size. Combined with the container's `p-1` these hit the 32/40/48px heights. */\nconst sizeClasses: Record<SegmentedControlSize, string> = {\n  \"32\": \"px-2 py-1 typography-description-12px-semibold\",\n  \"40\": \"px-3 py-1.75 typography-body-small-14px-semibold\",\n  \"48\": \"px-4 py-2 typography-body-default-16px-semibold\",\n};\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SegmentedControl: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A compact selector for choosing between two or three mutually exclusive\n * options where the choice affects the content immediately below it. Use\n * instead of tabs when the options are more like settings or filters than\n * navigation, such as toggling a list/grid view or a monthly/annual price.\n *\n * Rendered as a `radiogroup` with roving-tabindex keyboard navigation. Supports\n * both controlled and uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SegmentedControl\n *   options={[\n *     { label: \"Net\", value: \"net\" },\n *     { label: \"Gross\", value: \"gross\" },\n *   ]}\n *   value={amount}\n *   onChange={setAmount}\n *   aria-label=\"Amount type\"\n * />\n * ```\n */\nexport const SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  (\n    {\n      className,\n      size = \"32\",\n      variant = \"hug\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0]?.value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as SegmentedControlOption;\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative items-center rounded-full bg-surface-tertiary p-1\",\n          variant === \"fill\" ? \"flex w-full\" : \"inline-flex\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={cn(\n                \"relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full\",\n                \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                variant === \"fill\" ? \"flex-1\" : \"shrink-0\",\n                sizeClasses[size],\n                isSelected\n                  ? \"bg-buttons-primary-default text-content-primary-inverted shadow-sm\"\n                  : \"text-content-primary hover:bg-buttons-switch-hover\",\n                disabled && \"pointer-events-none\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSegmentedControl.displayName = \"SegmentedControl\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,cAAoD;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,0BAA0B,WAAoB,gBAAyB;AAC9E,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa,CAAC,gBAAgB;AACjC,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAwBO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,GAEL,QACG;AACH,8BAA0B,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAGvE,UAAM,CAAC,eAAe,gBAAgB,IAAIA,iBAAM,SAAS,gBAAgB,QAAQ,CAAC,GAAG,KAAK;AAC1F,UAAM,eAAe,oBAAoB;AACzC,UAAM,eAAe,eAAe,kBAAkB;AACtD,UAAM,cAAc,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,YAAY;AAChE,UAAM,aAAaA,iBAAM,OAAqC,EAAE;AAEhE,UAAM,eAAe,CAAC,gBAAwB;AAC5C,UAAI,YAAY,gBAAgB,aAAc;AAC9C,UAAI,CAAC,cAAc;AACjB,yBAAiB,WAAW;AAAA,MAC9B;AACA,iBAAW,WAAW;AAAA,IACxB;AAEA,UAAM,gBAAgB,CAAC,GAAwB,UAAkB;AAC/D,YAAM,YACJ,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,eAC/B,QAAQ,KAAK,QAAQ,SACtB,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAChC,QAAQ,IAAI,QAAQ,UAAU,QAAQ,SACvC;AACR,UAAI,cAAc,KAAM;AACxB,QAAE,eAAA;AACF,YAAM,aAAa,QAAQ,SAAS;AACpC,mBAAa,WAAW,KAAK;AAC7B,iBAAW,QAAQ,SAAS,GAAG,MAAA;AAAA,IACjC;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY,SAAS,gBAAgB;AAAA,UACrC,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,aAAa,iBAAiB,OAAO;AAC3C;AAAA;AAAA,YAEED,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,KAAK,CAAC,OAAO;AACX,6BAAW,QAAQ,KAAK,IAAI;AAAA,gBAC9B;AAAA,gBACA,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,gBAAc;AAAA,gBACd,UAAU,cAAe,CAAC,eAAe,UAAU,IAAK,IAAI;AAAA,gBAC5D;AAAA,gBACA,SAAS,MAAM,aAAa,OAAO,KAAK;AAAA,gBACxC,WAAW,CAAC,MAAM,cAAc,GAAG,KAAK;AAAA,gBACxC,WAAWC,GAAAA;AAAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,YAAY,SAAS,WAAW;AAAA,kBAChC,YAAY,IAAI;AAAA,kBAChB,aACI,uEACA;AAAA,kBACJ,YAAY;AAAA,gBAAA;AAAA,gBAGd,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,iBAAO,MAAA,CAAM;AAAA,cAAA;AAAA,cAvB5C,OAAO;AAAA,YAAA;AAAA;AAAA,QA0BlB,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iBAAiB,cAAc;;"}
+{"version":3,"file":"SegmentedControl.cjs","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the segmented control in pixels. */\nexport type SegmentedControlSize = \"32\" | \"40\" | \"48\";\n\n/**\n * Segment layout.\n * - `\"hug\"`: each segment is sized to its content.\n * - `\"fill\"`: the control spans the full width of its container and each segment grows equally.\n */\nexport type SegmentedControlVariant = \"hug\" | \"fill\";\n\n/**\n * Visual style of the control.\n * - `\"pill\"`: the container has a muted background and the selected segment shows a filled pill (default).\n * - `\"plain\"`: no container or selected-pill background; segments are bare content and selection is\n *   communicated by color alone. Designed for icon-only toggles (e.g. a list/grid view switch).\n */\nexport type SegmentedControlAppearance = \"pill\" | \"plain\";\n\n/** Describes one selectable segment. */\nexport interface SegmentedControlOption {\n  /**\n   * Display label for the segment. When `icon` is provided, the segment renders icon-only and\n   * this value is used as its accessible name (applied as `aria-label`) instead of visible text.\n   */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n  /**\n   * Icon to render instead of the visible label. When set, the segment renders icon-only and\n   * `label` becomes required as its accessible name — it is applied as `aria-label` and no\n   * visible text is rendered.\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the control in pixels. @default \"32\" */\n  size?: SegmentedControlSize;\n  /** Segment layout. @default \"hug\" */\n  variant?: SegmentedControlVariant;\n  /** Visual style of the control. @default \"pill\" */\n  appearance?: SegmentedControlAppearance;\n  /** The selectable segments. Designed for two or three mutually exclusive options. */\n  options: SegmentedControlOption[];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). Defaults to the first option. */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the control is disabled. @default false */\n  disabled?: boolean;\n}\n\n/** Padding and typography per size. Combined with the container's `p-1` these hit the 32/40/48px heights. */\nconst sizeClasses: Record<SegmentedControlSize, string> = {\n  \"32\": \"px-2 py-1 typography-description-12px-semibold\",\n  \"40\": \"px-3 py-1.75 typography-body-small-14px-semibold\",\n  \"48\": \"px-4 py-2 typography-body-default-16px-semibold\",\n};\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SegmentedControl: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction warnMissingOptionAccessibleName(options: SegmentedControlOption[]) {\n  if (process.env.NODE_ENV !== \"production\") {\n    for (const option of options) {\n      if (option.icon && !option.label?.trim()) {\n        console.warn(\n          `SegmentedControl: icon-only segment \"${option.value}\" is missing a non-empty \\`label\\` to use as its accessible name.`,\n        );\n      }\n    }\n  }\n}\n\nfunction getSegmentClassName({\n  appearance,\n  size,\n  variant,\n  isSelected,\n  disabled,\n}: {\n  appearance: SegmentedControlAppearance;\n  size: SegmentedControlSize;\n  variant: SegmentedControlVariant;\n  isSelected: boolean;\n  disabled: boolean;\n}) {\n  return cn(\n    \"relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full\",\n    \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n    \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n    variant === \"fill\" ? \"flex-1\" : \"shrink-0\",\n    appearance === \"plain\"\n      ? cn(\n          // Padding + negative margin enlarge the hit target without changing the\n          // visual footprint, which must stay glyph-only to match the design.\n          \"-m-1 p-1\",\n          isSelected ? \"text-icons-primary\" : \"text-icons-tertiary hover:text-icons-primary\",\n        )\n      : cn(\n          sizeClasses[size],\n          isSelected\n            ? \"bg-buttons-primary-default text-content-primary-inverted shadow-sm\"\n            : \"text-content-primary hover:bg-buttons-switch-hover\",\n        ),\n    disabled && \"pointer-events-none\",\n  );\n}\n\n/**\n * A compact selector for choosing between two or three mutually exclusive\n * options where the choice affects the content immediately below it. Use\n * instead of tabs when the options are more like settings or filters than\n * navigation, such as toggling a list/grid view or a monthly/annual price.\n *\n * Rendered as a `radiogroup` with roving-tabindex keyboard navigation. Supports\n * both controlled and uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SegmentedControl\n *   options={[\n *     { label: \"Net\", value: \"net\" },\n *     { label: \"Gross\", value: \"gross\" },\n *   ]}\n *   value={amount}\n *   onChange={setAmount}\n *   aria-label=\"Amount type\"\n * />\n * ```\n *\n * @example Icon-only segments (e.g. a list/grid view toggle)\n * ```tsx\n * <SegmentedControl\n *   appearance=\"plain\"\n *   options={[\n *     { label: \"List view\", value: \"list\", icon: <ListViewIcon size={16} /> },\n *     { label: \"Grid view\", value: \"grid\", icon: <GridViewIcon size={16} /> },\n *   ]}\n *   value={view}\n *   onChange={setView}\n *   aria-label=\"View\"\n * />\n * ```\n */\nexport const SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  (\n    {\n      className,\n      size = \"32\",\n      variant = \"hug\",\n      appearance = \"pill\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n    warnMissingOptionAccessibleName(options);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0]?.value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as SegmentedControlOption;\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative items-center rounded-full\",\n          variant === \"fill\" ? \"flex w-full\" : \"inline-flex\",\n          appearance === \"plain\" ? \"gap-2\" : \"bg-surface-tertiary p-1\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              aria-label={option.icon ? option.label : undefined}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={getSegmentClassName({ appearance, size, variant, isSelected, disabled })}\n            >\n              {option.icon ? (\n                <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n                  {option.icon}\n                </span>\n              ) : (\n                <span className=\"min-w-0 truncate\">{option.label}</span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSegmentedControl.displayName = \"SegmentedControl\";\n"],"names":["cn","React","jsx"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -7,6 +7,7 @@ const AccordionContent = require("./components/Accordion/AccordionContent.cjs");
 const AccordionItem = require("./components/Accordion/AccordionItem.cjs");
 const AccordionTrigger = require("./components/Accordion/AccordionTrigger.cjs");
 const Alert = require("./components/Alert/Alert.cjs");
+const AudioPlayer = require("./components/AudioPlayer/AudioPlayer.cjs");
 const AudioUpload = require("./components/AudioUpload/AudioUpload.cjs");
 const useAudioRecorder = require("./components/AudioUpload/useAudioRecorder.cjs");
 const Autocomplete = require("./components/Autocomplete/Autocomplete.cjs");
@@ -32,6 +33,7 @@ const Drawer = require("./components/Drawer/Drawer.cjs");
 const DropdownMenu = require("./components/DropdownMenu/DropdownMenu.cjs");
 const EmptyState = require("./components/EmptyState/EmptyState.cjs");
 const FanFollowerCount = require("./components/FanFollowerCount/FanFollowerCount.cjs");
+const FloatingActionButton = require("./components/FloatingActionButton/FloatingActionButton.cjs");
 const IconButton = require("./components/IconButton/IconButton.cjs");
 const AddIcon = require("./components/Icons/AddIcon.cjs");
 const AffiliatesIcon = require("./components/Icons/AffiliatesIcon.cjs");
@@ -105,6 +107,7 @@ const GenderIcon = require("./components/Icons/GenderIcon.cjs");
 const GifIcon = require("./components/Icons/GifIcon.cjs");
 const GiftIcon = require("./components/Icons/GiftIcon.cjs");
 const GoogleIcon = require("./components/Icons/GoogleIcon.cjs");
+const GridViewIcon = require("./components/Icons/GridViewIcon.cjs");
 const HealthIcon = require("./components/Icons/HealthIcon.cjs");
 const HeartIcon = require("./components/Icons/HeartIcon.cjs");
 const HelpIcon = require("./components/Icons/HelpIcon.cjs");
@@ -117,6 +120,7 @@ const InfoCircleIcon = require("./components/Icons/InfoCircleIcon.cjs");
 const InfoIcon = require("./components/Icons/InfoIcon.cjs");
 const LanguageIcon = require("./components/Icons/LanguageIcon.cjs");
 const LinkIcon = require("./components/Icons/LinkIcon.cjs");
+const ListViewIcon = require("./components/Icons/ListViewIcon.cjs");
 const LocationIcon = require("./components/Icons/LocationIcon.cjs");
 const LockerIcon = require("./components/Icons/LockerIcon.cjs");
 const LockerOffIcon = require("./components/Icons/LockerOffIcon.cjs");
@@ -257,6 +261,7 @@ exports.AccordionContent = AccordionContent.AccordionContent;
 exports.AccordionItem = AccordionItem.AccordionItem;
 exports.AccordionTrigger = AccordionTrigger.AccordionTrigger;
 exports.Alert = Alert.Alert;
+exports.AudioPlayer = AudioPlayer.AudioPlayer;
 exports.AudioUpload = AudioUpload.AudioUpload;
 exports.useAudioRecorder = useAudioRecorder.useAudioRecorder;
 exports.Autocomplete = Autocomplete.Autocomplete;
@@ -321,6 +326,7 @@ exports.DropdownMenuSeparator = DropdownMenu.DropdownMenuSeparator;
 exports.DropdownMenuTrigger = DropdownMenu.DropdownMenuTrigger;
 exports.EmptyState = EmptyState.EmptyState;
 exports.FanFollowerCount = FanFollowerCount.FanFollowerCount;
+exports.FloatingActionButton = FloatingActionButton.FloatingActionButton;
 exports.IconButton = IconButton.IconButton;
 exports.AddIcon = AddIcon.AddIcon;
 exports.AffiliatesIcon = AffiliatesIcon.AffiliatesIcon;
@@ -394,6 +400,7 @@ exports.GenderIcon = GenderIcon.GenderIcon;
 exports.GifIcon = GifIcon.GifIcon;
 exports.GiftIcon = GiftIcon.GiftIcon;
 exports.GoogleIcon = GoogleIcon.GoogleIcon;
+exports.GridViewIcon = GridViewIcon.GridViewIcon;
 exports.HealthIcon = HealthIcon.HealthIcon;
 exports.HeartIcon = HeartIcon.HeartIcon;
 exports.HelpIcon = HelpIcon.HelpIcon;
@@ -406,6 +413,7 @@ exports.InfoCircleIcon = InfoCircleIcon.InfoCircleIcon;
 exports.InfoIcon = InfoIcon.InfoIcon;
 exports.LanguageIcon = LanguageIcon.LanguageIcon;
 exports.LinkIcon = LinkIcon.LinkIcon;
+exports.ListViewIcon = ListViewIcon.ListViewIcon;
 exports.LocationIcon = LocationIcon.LocationIcon;
 exports.LockerIcon = LockerIcon.LockerIcon;
 exports.LockerOffIcon = LockerOffIcon.LockerOffIcon;

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

@@ -0,0 +1,340 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { PauseIcon } from "../Icons/PauseIcon.mjs";
+import { PlayIcon } from "../Icons/PlayIcon.mjs";
+const BAR_WIDTH_PX = 4;
+const BAR_GAP_PX = 4;
+const MIN_BAR_HEIGHT_PX = 4;
+const MAX_BAR_HEIGHT_PX = 26;
+const DEFAULT_BAR_COUNT = 24;
+const RAW_PEAK_COUNT = 128;
+const SEEK_STEP_SECONDS = 1;
+const SEEK_STEP_LARGE_SECONDS = 5;
+function formatTime(seconds) {
+  if (seconds === void 0 || !Number.isFinite(seconds)) return "--:--";
+  const totalSeconds = Math.max(0, Math.floor(seconds));
+  const minutes = Math.floor(totalSeconds / 60);
+  const remainingSeconds = totalSeconds % 60;
+  return `${minutes}:${String(remainingSeconds).padStart(2, "0")}`;
+}
+function hashString(value) {
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= value.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function createSeededRandom(seed) {
+  let state = seed;
+  return () => {
+    state = state + 1831565813 | 0;
+    let t = Math.imul(state ^ state >>> 15, 1 | state);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function generateFallbackPeaks(src, count) {
+  const random = createSeededRandom(hashString(src));
+  return Array.from({ length: count }, () => 0.2 + random() * 0.8);
+}
+function computePeaksFromChannelData(channelData, count) {
+  const blockSize = Math.max(1, Math.floor(channelData.length / count));
+  const peaks = [];
+  for (let i = 0; i < count; i++) {
+    const start = i * blockSize;
+    let max = 0;
+    for (let j = 0; j < blockSize && start + j < channelData.length; j++) {
+      max = Math.max(max, Math.abs(channelData[start + j] ?? 0));
+    }
+    peaks.push(max);
+  }
+  return peaks;
+}
+function resamplePeaks(peaks, barCount) {
+  if (peaks.length === 0 || barCount <= 0) return [];
+  const step = peaks.length / barCount;
+  return Array.from(
+    { length: barCount },
+    (_, i) => peaks[Math.min(peaks.length - 1, Math.floor(i * step))] ?? 0
+  );
+}
+async function decodeAudioPeaks(src, signal) {
+  const AudioContextCtor = window.AudioContext ?? window.webkitAudioContext;
+  if (!AudioContextCtor) throw new Error("WebAudio unsupported");
+  const response = await fetch(src, { signal });
+  const arrayBuffer = await response.arrayBuffer();
+  const audioContext = new AudioContextCtor();
+  try {
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    return computePeaksFromChannelData(audioBuffer.getChannelData(0), RAW_PEAK_COUNT);
+  } finally {
+    if (audioContext.state !== "closed") audioContext.close().catch(() => {
+    });
+  }
+}
+const AudioPlayer = React.forwardRef(
+  ({
+    className,
+    src,
+    duration,
+    playing: controlledPlaying,
+    defaultPlaying = false,
+    onPlay,
+    onPause,
+    onEnded,
+    size = "40",
+    ...props
+  }, ref) => {
+    const audioRef = React.useRef(null);
+    const trackRef = React.useRef(null);
+    const [internalPlaying, setInternalPlaying] = React.useState(defaultPlaying);
+    const isControlled = controlledPlaying !== void 0;
+    const playing = isControlled ? controlledPlaying : internalPlaying;
+    const [currentTime, setCurrentTime] = React.useState(0);
+    const [mediaDuration, setMediaDuration] = React.useState(void 0);
+    const [barCount, setBarCount] = React.useState(DEFAULT_BAR_COUNT);
+    const [peaks, setPeaks] = React.useState(
+      () => generateFallbackPeaks(src, RAW_PEAK_COUNT)
+    );
+    const [isDragging, setIsDragging] = React.useState(false);
+    const displayDuration = mediaDuration ?? duration;
+    const hasStarted = playing || currentTime > 0;
+    const playingRef = React.useRef(playing);
+    playingRef.current = playing;
+    const isControlledRef = React.useRef(isControlled);
+    isControlledRef.current = isControlled;
+    const onPauseRef = React.useRef(onPause);
+    onPauseRef.current = onPause;
+    const isFirstSrcRenderRef = React.useRef(true);
+    React.useEffect(() => {
+      if (isFirstSrcRenderRef.current) {
+        isFirstSrcRenderRef.current = false;
+        return;
+      }
+      setCurrentTime(0);
+      setMediaDuration(void 0);
+      setPeaks(generateFallbackPeaks(src, RAW_PEAK_COUNT));
+      if (playingRef.current) {
+        if (!isControlledRef.current) setInternalPlaying(false);
+        onPauseRef.current?.();
+      }
+    }, [src]);
+    React.useEffect(() => {
+      let cancelled = false;
+      const abortController = new AbortController();
+      decodeAudioPeaks(src, abortController.signal).then((decodedPeaks) => {
+        if (!cancelled) setPeaks(decodedPeaks);
+      }).catch(() => {
+        if (!cancelled) setPeaks(generateFallbackPeaks(src, RAW_PEAK_COUNT));
+      });
+      return () => {
+        cancelled = true;
+        abortController.abort();
+      };
+    }, [src]);
+    React.useEffect(() => {
+      const track = trackRef.current;
+      if (!track) return;
+      const updateFromWidth = (width) => {
+        if (width <= 0) return;
+        setBarCount(Math.max(1, Math.floor((width + BAR_GAP_PX) / (BAR_WIDTH_PX + BAR_GAP_PX))));
+      };
+      updateFromWidth(track.getBoundingClientRect().width);
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) updateFromWidth(entry.contentRect.width);
+      });
+      observer.observe(track);
+      return () => observer.disconnect();
+    }, []);
+    React.useEffect(() => {
+      const audio = audioRef.current;
+      if (!audio) return;
+      if (playing) {
+        audio.play().catch(() => {
+          if (!isControlled) setInternalPlaying(false);
+          onPauseRef.current?.();
+        });
+      } else {
+        audio.pause();
+      }
+    }, [playing, isControlled]);
+    const handleToggle = () => {
+      const next = !playing;
+      if (!isControlled) setInternalPlaying(next);
+      if (next) onPlay?.();
+      else onPause?.();
+    };
+    const seekTo = React.useCallback(
+      (time) => {
+        if (displayDuration === void 0) return;
+        const clamped = Math.min(Math.max(time, 0), displayDuration);
+        setCurrentTime(clamped);
+        const audio = audioRef.current;
+        if (audio) audio.currentTime = clamped;
+      },
+      [displayDuration]
+    );
+    const seekFromClientX = React.useCallback(
+      (clientX) => {
+        const track = trackRef.current;
+        if (!track || displayDuration === void 0) return;
+        const rect = track.getBoundingClientRect();
+        if (rect.width <= 0) return;
+        const fraction = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
+        seekTo(fraction * displayDuration);
+      },
+      [displayDuration, seekTo]
+    );
+    React.useEffect(() => {
+      if (!isDragging) return;
+      const handleWindowPointerMove = (event) => seekFromClientX(event.clientX);
+      const handleWindowPointerUp = () => setIsDragging(false);
+      window.addEventListener("pointermove", handleWindowPointerMove);
+      window.addEventListener("pointerup", handleWindowPointerUp);
+      return () => {
+        window.removeEventListener("pointermove", handleWindowPointerMove);
+        window.removeEventListener("pointerup", handleWindowPointerUp);
+      };
+    }, [isDragging, seekFromClientX]);
+    const handlePointerDown = (event) => {
+      seekFromClientX(event.clientX);
+      setIsDragging(true);
+    };
+    const handleKeyDown = (event) => {
+      if (displayDuration === void 0) return;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          event.preventDefault();
+          seekTo(currentTime + SEEK_STEP_SECONDS);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          event.preventDefault();
+          seekTo(currentTime - SEEK_STEP_SECONDS);
+          break;
+        case "PageUp":
+          event.preventDefault();
+          seekTo(currentTime + SEEK_STEP_LARGE_SECONDS);
+          break;
+        case "PageDown":
+          event.preventDefault();
+          seekTo(currentTime - SEEK_STEP_LARGE_SECONDS);
+          break;
+        case "Home":
+          event.preventDefault();
+          seekTo(0);
+          break;
+        case "End":
+          event.preventDefault();
+          seekTo(displayDuration);
+          break;
+      }
+    };
+    const bars = resamplePeaks(peaks, barCount);
+    const progressFraction = displayDuration && displayDuration > 0 ? Math.min(Math.max(currentTime / displayDuration, 0), 1) : 0;
+    const playedBarCount = hasStarted ? Math.round(progressFraction * bars.length) : bars.length;
+    const barData = bars.map((amplitude, index) => {
+      const isPlayed = index < playedBarCount;
+      return {
+        heightPx: MIN_BAR_HEIGHT_PX + amplitude * (MAX_BAR_HEIGHT_PX - MIN_BAR_HEIGHT_PX),
+        className: cn(
+          "w-1 shrink-0 rounded-3xs bg-messages-waveform-default",
+          "motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-in-out",
+          isPlayed ? "opacity-100" : "opacity-50"
+        )
+      };
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-size": size,
+        className: cn("flex w-full items-center gap-3", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleToggle,
+              "aria-label": playing ? "Pause" : "Play",
+              className: cn(
+                "flex size-8 shrink-0 items-center justify-center rounded-full",
+                "bg-buttons-secondary-default text-icons-primary backdrop-blur-[40px]",
+                "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
+                "hover:bg-buttons-secondary-hover",
+                "focus-visible:shadow-focus-ring focus-visible:outline-none"
+              ),
+              children: playing ? /* @__PURE__ */ jsx(PauseIcon, { size: 16, filled: true }) : /* @__PURE__ */ jsx(PlayIcon, { size: 16, filled: true })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: trackRef,
+                role: "slider",
+                tabIndex: 0,
+                "aria-label": "Seek",
+                "aria-orientation": "horizontal",
+                "aria-valuemin": 0,
+                "aria-valuemax": displayDuration,
+                "aria-valuenow": Math.round(currentTime),
+                "aria-valuetext": displayDuration !== void 0 ? `${formatTime(currentTime)} of ${formatTime(displayDuration)}` : formatTime(currentTime),
+                onPointerDown: handlePointerDown,
+                onKeyDown: handleKeyDown,
+                className: cn(
+                  "flex h-10 min-w-0 flex-1 cursor-pointer touch-none select-none items-center gap-1 overflow-hidden",
+                  "focus-visible:shadow-focus-ring focus-visible:outline-none"
+                ),
+                children: barData.map((bar, index) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: bars are a fixed-count, non-reorderable list
+                  /* @__PURE__ */ jsx("span", { className: bar.className, style: { height: bar.heightPx } }, index)
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "typography-body-small-14px-semibold flex shrink-0 items-center gap-0.5 whitespace-nowrap", children: hasStarted ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-content-primary", children: formatTime(currentTime) }),
+              /* @__PURE__ */ jsxs("span", { className: "text-content-secondary", children: [
+                "/",
+                formatTime(displayDuration)
+              ] })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-content-primary", children: formatTime(displayDuration) }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "audio",
+            {
+              ref: audioRef,
+              src,
+              preload: "metadata",
+              className: "hidden",
+              onLoadedMetadata: (event) => {
+                const { duration: nativeDuration } = event.currentTarget;
+                setMediaDuration(Number.isFinite(nativeDuration) ? nativeDuration : void 0);
+              },
+              onTimeUpdate: (event) => {
+                if (isDragging) return;
+                setCurrentTime(event.currentTarget.currentTime);
+              },
+              onEnded: () => {
+                setCurrentTime(0);
+                if (!isControlled) setInternalPlaying(false);
+                onEnded?.();
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AudioPlayer.displayName = "AudioPlayer";
+export {
+  AudioPlayer
+};
+//# sourceMappingURL=AudioPlayer.mjs.map