@protonradio/proton-ui 0.13.0 → 0.13.1

package/dist/components/Tooltip/Tooltip.es.js

@@ -1,89 +1,89 @@
-import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
-import { useState as w, useRef as j, forwardRef as C } from "react";
+import { jsx as t, jsxs as N } from "react/jsx-runtime";
+import { useState as _, useRef as T, forwardRef as x } from "react";
 import { Tooltip as r } from "radix-ui";
-import { useTheme as N } from "../ThemeProvider.es.js";
-import { csx as _ } from "../../utils/string.es.js";
-import { Overlay as y } from "../Overlay/Overlay.es.js";
+import { useTheme as y } from "../ThemeProvider.es.js";
+import { csx as O } from "../../utils/string.es.js";
+import { Overlay as P } from "../Overlay/Overlay.es.js";
 /* empty css               */
 /* empty css                            */
-const g = C(
+const v = x(
   ({
-    content: a,
+    content: s,
     arrow: o,
     placement: e = "top",
     align: l = "center",
     "data-testid": p
   }, d) => {
-    const { style: i, className: s } = N();
-    return /* @__PURE__ */ t.jsx(
+    const { style: i, className: n } = y();
+    return /* @__PURE__ */ t(
       r.Content,
       {
         ref: d,
         side: e,
         align: l,
-        className: _("proton__Tooltip", "proton-Elevation--glass", s),
+        className: O("proton__Tooltip", "proton-Elevation--glass", n),
         style: i,
         sideOffset: 8,
         "data-testid": p,
-        children: /* @__PURE__ */ t.jsx(
-          y,
+        children: /* @__PURE__ */ t(
+          P,
           {
-            arrow: o && /* @__PURE__ */ t.jsx(r.Arrow, { width: 8, height: 8, children: /* @__PURE__ */ t.jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ t.jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
-            children: a
+            arrow: o && /* @__PURE__ */ t(r.Arrow, { width: 8, height: 8, children: /* @__PURE__ */ t("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ t("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+            children: s
           }
         )
       }
     );
   }
 );
-g.displayName = "ProtonUITooltipContent";
+v.displayName = "ProtonUITooltipContent";
 function R({
-  arrow: a = !0,
+  arrow: s = !0,
   children: o,
   content: e,
   delay: l = 100,
   placement: p = "top",
   align: d = "center",
   isDisabled: i,
-  defaultOpen: s = !1,
+  defaultOpen: n = !1,
   onOpenChange: h,
   disableTriggerClick: m,
-  "data-testid": T
+  "data-testid": w
 }) {
-  const [c, u] = w(s), n = j(!1), x = j(!1);
+  const [c, u] = _(n), a = T(!1), g = T(!1);
   if (e === "") return null;
-  const v = (f) => {
-    f && !n.current && (x.current = !0), h && h(f), n.current || u(f), n.current = !1;
+  const C = (f) => {
+    f && !a.current && (g.current = !0), h && h(f), a.current || u(f), a.current = !1;
   };
-  return /* @__PURE__ */ t.jsx(r.Provider, { children: /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ t(r.Provider, { children: /* @__PURE__ */ N(
     r.Root,
     {
       open: c,
-      defaultOpen: s,
-      onOpenChange: v,
+      defaultOpen: n,
+      onOpenChange: C,
       delayDuration: l,
       children: [
-        /* @__PURE__ */ t.jsx(r.Trigger, { asChild: !0, children: m ? /* @__PURE__ */ t.jsx("span", { "aria-label": "Show tooltip", className: "proton__Tooltip-trigger", children: o }) : /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ t(r.Trigger, { asChild: !0, children: m ? /* @__PURE__ */ t("span", { "aria-label": "Show tooltip", className: "proton__Tooltip-trigger", children: o }) : /* @__PURE__ */ t(
           "div",
           {
             role: "button",
             "aria-label": "Show tooltip",
             "data-hovered": c,
             onClick: () => {
-              m || i || x.current || (n.current = !0, u(!c));
+              m || i || g.current || (a.current = !0, u(!c));
             },
             className: "proton__Tooltip-trigger",
             children: o
           }
         ) }),
-        !i && /* @__PURE__ */ t.jsx(r.Portal, { children: /* @__PURE__ */ t.jsx(
-          g,
+        !i && /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ t(
+          v,
           {
             content: e,
             placement: p,
             align: d,
-            arrow: a,
-            "data-testid": T
+            arrow: s,
+            "data-testid": w
           }
         ) })
       ]

package/dist/components/Tooltip/Tooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { CSSProperties, forwardRef, ReactNode, useRef, useState } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\n\nimport { Overlay } from \"../Overlay/Overlay\";\nimport \"./Tooltip.css\";\nimport \"../Elevation/Elevation.css\";\n\ntype TooltipContentProps = Pick<\n  TooltipProps,\n  \"content\" | \"arrow\" | \"placement\" | \"align\" | \"data-testid\"\n>;\n\nconst TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(\n  (\n    {\n      content,\n      arrow,\n      placement = \"top\",\n      align = \"center\",\n      \"data-testid\": testId,\n    },\n    ref,\n  ) => {\n    const { style, className } = useTheme();\n\n    return (\n      <RadixTooltip.Content\n        ref={ref}\n        side={placement}\n        align={align}\n        className={csx(\"proton__Tooltip\", \"proton-Elevation--glass\", className)}\n        style={style as CSSProperties}\n        sideOffset={8}\n        data-testid={testId}\n      >\n        <Overlay\n          arrow={\n            arrow && (\n              <RadixTooltip.Arrow width={8} height={8}>\n                <svg width={8} height={8} viewBox=\"0 0 8 8\">\n                  <path d=\"M0 0 L4 4 L8 0\" />\n                </svg>\n              </RadixTooltip.Arrow>\n            )\n          }\n        >\n          {content}\n        </Overlay>\n      </RadixTooltip.Content>\n    );\n  },\n);\n\nTooltipContent.displayName = \"ProtonUITooltipContent\";\n\n/** Radix `Tooltip.Content` `side` */\nexport type TooltipPlacement = RadixSide;\n/** Radix `Tooltip.Content` `align` */\nexport type TooltipAlign = RadixAlign;\n\nexport interface TooltipProps {\n  /**\n   * Whether to show an arrow pointing to the tooltip.\n   * @default true\n   */\n  arrow?: boolean;\n  /**\n   * The children to display in the tooltip.\n   */\n  children: ReactNode;\n  /**\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\n   */\n  content: string | ReactNode;\n  /**\n   * A test ID.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Side of the trigger to place the tooltip.\n   * @see {@link TooltipPlacement}\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement;\n  /**\n   * Alignment along the side.\n   * @see {@link TooltipAlign}\n   * @default \"center\"\n   */\n  align?: TooltipAlign;\n  /**\n   * Whether to disable the trigger click feature.\n   * This is useful when using an info only Tooltip that might wrap a clickable element.\n   */\n  disableTriggerClick?: boolean;\n  /**\n   * Whether the tooltip is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Delay before showing the tooltip (in milliseconds).\n   * @default 100\n   */\n  delay?: number;\n  /**\n   * Whether the tooltip is open by default.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The callback function to call when the tooltip is opened or closed.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * A component that displays a tooltip when the user hovers over the trigger.\n * For mobile, use Popover instead.\n * API:\n *  - {@link TooltipProps}\n *\n * @example\n * ```tsx\n    <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\n      {children}\n    </Tooltip>\n * ```\n */\nexport function Tooltip({\n  arrow = true,\n  children,\n  content,\n  delay = 100,\n  placement = \"top\",\n  align = \"center\",\n  isDisabled,\n  defaultOpen = false,\n  onOpenChange,\n  disableTriggerClick,\n  \"data-testid\": testId,\n}: TooltipProps) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const triggerClickRef = useRef<boolean>(false);\n  const hasHovered = useRef<boolean>(false);\n\n  if (content === \"\") return null;\n\n  const handleOpenChange = (openState: boolean) => {\n    // When opened via hover, we want to disable the trigger click feature as it causes\n    // the tooltip state to get out of sync with the trigger state.\n    if (openState && !triggerClickRef.current) hasHovered.current = true;\n\n    if (onOpenChange) onOpenChange(openState);\n\n    // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\n    // it again here.\n    if (!triggerClickRef.current) setIsOpen(openState);\n    triggerClickRef.current = false;\n  };\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        onOpenChange={handleOpenChange}\n        delayDuration={delay}\n      >\n        <RadixTooltip.Trigger asChild>\n          {disableTriggerClick ? (\n            <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\n              {children}\n            </span>\n          ) : (\n            <div\n              role=\"button\"\n              aria-label=\"Show tooltip\"\n              data-hovered={isOpen}\n              onClick={() => {\n                if (disableTriggerClick || isDisabled) return;\n\n                // Once hovered it's safe to assume the user isn't trying to use via a touch device,\n                // so we can safely disable the trigger click feature.\n                if (hasHovered.current) return;\n\n                triggerClickRef.current = true;\n                setIsOpen(!isOpen);\n              }}\n              className=\"proton__Tooltip-trigger\"\n            >\n              {children}\n            </div>\n          )}\n        </RadixTooltip.Trigger>\n        {!isDisabled && (\n          <RadixTooltip.Portal>\n            <TooltipContent\n              content={content}\n              placement={placement}\n              align={align}\n              arrow={arrow}\n              data-testid={testId}\n            />\n          </RadixTooltip.Portal>\n        )}\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n\nTooltip.displayName = \"ProtonUITooltip\";\n"],"names":["TooltipContent","forwardRef","content","arrow","placement","align","testId","ref","style","className","useTheme","jsx","RadixTooltip","csx","Overlay","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","handleOpenChange","openState","jsxs"],"mappings":"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"}
+{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { CSSProperties, forwardRef, ReactNode, useRef, useState } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\n\nimport { Overlay } from \"../Overlay/Overlay\";\nimport \"./Tooltip.css\";\nimport \"../Elevation/Elevation.css\";\n\ntype TooltipContentProps = Pick<\n  TooltipProps,\n  \"content\" | \"arrow\" | \"placement\" | \"align\" | \"data-testid\"\n>;\n\nconst TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(\n  (\n    {\n      content,\n      arrow,\n      placement = \"top\",\n      align = \"center\",\n      \"data-testid\": testId,\n    },\n    ref,\n  ) => {\n    const { style, className } = useTheme();\n\n    return (\n      <RadixTooltip.Content\n        ref={ref}\n        side={placement}\n        align={align}\n        className={csx(\"proton__Tooltip\", \"proton-Elevation--glass\", className)}\n        style={style as CSSProperties}\n        sideOffset={8}\n        data-testid={testId}\n      >\n        <Overlay\n          arrow={\n            arrow && (\n              <RadixTooltip.Arrow width={8} height={8}>\n                <svg width={8} height={8} viewBox=\"0 0 8 8\">\n                  <path d=\"M0 0 L4 4 L8 0\" />\n                </svg>\n              </RadixTooltip.Arrow>\n            )\n          }\n        >\n          {content}\n        </Overlay>\n      </RadixTooltip.Content>\n    );\n  },\n);\n\nTooltipContent.displayName = \"ProtonUITooltipContent\";\n\n/** Radix `Tooltip.Content` `side` */\nexport type TooltipPlacement = RadixSide;\n/** Radix `Tooltip.Content` `align` */\nexport type TooltipAlign = RadixAlign;\n\nexport interface TooltipProps {\n  /**\n   * Whether to show an arrow pointing to the tooltip.\n   * @default true\n   */\n  arrow?: boolean;\n  /**\n   * The children to display in the tooltip.\n   */\n  children: ReactNode;\n  /**\n   * The content to display in the tooltip. Zero-length titles string are never displayed.\n   */\n  content: string | ReactNode;\n  /**\n   * A test ID.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Side of the trigger to place the tooltip.\n   * @see {@link TooltipPlacement}\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement;\n  /**\n   * Alignment along the side.\n   * @see {@link TooltipAlign}\n   * @default \"center\"\n   */\n  align?: TooltipAlign;\n  /**\n   * Whether to disable the trigger click feature.\n   * This is useful when using an info only Tooltip that might wrap a clickable element.\n   */\n  disableTriggerClick?: boolean;\n  /**\n   * Whether the tooltip is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Delay before showing the tooltip (in milliseconds).\n   * @default 100\n   */\n  delay?: number;\n  /**\n   * Whether the tooltip is open by default.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The callback function to call when the tooltip is opened or closed.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * A component that displays a tooltip when the user hovers over the trigger.\n * For mobile, use Popover instead.\n * API:\n *  - {@link TooltipProps}\n *\n * @example\n * ```tsx\n    <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\n      {children}\n    </Tooltip>\n * ```\n */\nexport function Tooltip({\n  arrow = true,\n  children,\n  content,\n  delay = 100,\n  placement = \"top\",\n  align = \"center\",\n  isDisabled,\n  defaultOpen = false,\n  onOpenChange,\n  disableTriggerClick,\n  \"data-testid\": testId,\n}: TooltipProps) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const triggerClickRef = useRef<boolean>(false);\n  const hasHovered = useRef<boolean>(false);\n\n  if (content === \"\") return null;\n\n  const handleOpenChange = (openState: boolean) => {\n    // When opened via hover, we want to disable the trigger click feature as it causes\n    // the tooltip state to get out of sync with the trigger state.\n    if (openState && !triggerClickRef.current) hasHovered.current = true;\n\n    if (onOpenChange) onOpenChange(openState);\n\n    // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\n    // it again here.\n    if (!triggerClickRef.current) setIsOpen(openState);\n    triggerClickRef.current = false;\n  };\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        onOpenChange={handleOpenChange}\n        delayDuration={delay}\n      >\n        <RadixTooltip.Trigger asChild>\n          {disableTriggerClick ? (\n            <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\n              {children}\n            </span>\n          ) : (\n            <div\n              role=\"button\"\n              aria-label=\"Show tooltip\"\n              data-hovered={isOpen}\n              onClick={() => {\n                if (disableTriggerClick || isDisabled) return;\n\n                // Once hovered it's safe to assume the user isn't trying to use via a touch device,\n                // so we can safely disable the trigger click feature.\n                if (hasHovered.current) return;\n\n                triggerClickRef.current = true;\n                setIsOpen(!isOpen);\n              }}\n              className=\"proton__Tooltip-trigger\"\n            >\n              {children}\n            </div>\n          )}\n        </RadixTooltip.Trigger>\n        {!isDisabled && (\n          <RadixTooltip.Portal>\n            <TooltipContent\n              content={content}\n              placement={placement}\n              align={align}\n              arrow={arrow}\n              data-testid={testId}\n            />\n          </RadixTooltip.Portal>\n        )}\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n\nTooltip.displayName = \"ProtonUITooltip\";\n"],"names":["TooltipContent","forwardRef","content","arrow","placement","align","testId","ref","style","className","useTheme","jsx","RadixTooltip","csx","Overlay","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","handleOpenChange","openState","jsxs"],"mappings":";;;;;;;;AAiBA,MAAMA,IAAiBC;AAAA,EACrB,CACE;AAAA,IACE,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,eAAeC;AAAA,EAAA,GAEjBC,MACG;AACH,UAAM,EAAE,OAAAC,GAAO,WAAAC,EAAA,IAAcC,EAAA;AAE7B,WACE,gBAAAC;AAAA,MAACC,EAAa;AAAA,MAAb;AAAA,QACC,KAAAL;AAAA,QACA,MAAMH;AAAA,QACN,OAAAC;AAAA,QACA,WAAWQ,EAAI,mBAAmB,2BAA2BJ,CAAS;AAAA,QACtE,OAAAD;AAAA,QACA,YAAY;AAAA,QACZ,eAAaF;AAAA,QAEb,UAAA,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OACEX,KACE,gBAAAQ,EAACC,EAAa,OAAb,EAAmB,OAAO,GAAG,QAAQ,GACpC,UAAA,gBAAAD,EAAC,SAAI,OAAO,GAAG,QAAQ,GAAG,SAAQ,WAChC,4BAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB,EAAA,CAC3B,EAAA,CACF;AAAA,YAIH,UAAAT;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEAF,EAAe,cAAc;AA2EtB,SAASe,EAAQ;AAAA,EACtB,OAAAZ,IAAQ;AAAA,EACR,UAAAa;AAAA,EACA,SAAAd;AAAA,EACA,OAAAe,IAAQ;AAAA,EACR,WAAAb,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,YAAAa;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAef;AACjB,GAAiB;AACf,QAAM,CAACgB,GAAQC,CAAS,IAAIC,EAASL,CAAW,GAC1CM,IAAkBC,EAAgB,EAAK,GACvCC,IAAaD,EAAgB,EAAK;AAExC,MAAIxB,MAAY,GAAI,QAAO;AAE3B,QAAM0B,IAAmB,CAACC,MAAuB;AAG/C,IAAIA,KAAa,CAACJ,EAAgB,cAAoB,UAAU,KAE5DL,OAA2BS,CAAS,GAInCJ,EAAgB,WAASF,EAAUM,CAAS,GACjDJ,EAAgB,UAAU;AAAA,EAC5B;AAEA,SACE,gBAAAd,EAACC,EAAa,UAAb,EACC,UAAA,gBAAAkB;AAAA,IAAClB,EAAa;AAAA,IAAb;AAAA,MACC,MAAMU;AAAA,MACN,aAAAH;AAAA,MACA,cAAcS;AAAA,MACd,eAAeX;AAAA,MAEf,UAAA;AAAA,QAAA,gBAAAN,EAACC,EAAa,SAAb,EAAqB,SAAO,IAC1B,UAAAS,IACC,gBAAAV,EAAC,QAAA,EAAK,cAAW,gBAAe,WAAU,2BACvC,UAAAK,GACH,IAEA,gBAAAL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,gBAAcW;AAAA,YACd,SAAS,MAAM;AACb,cAAID,KAAuBH,KAIvBS,EAAW,YAEfF,EAAgB,UAAU,IAC1BF,EAAU,CAACD,CAAM;AAAA,YACnB;AAAA,YACA,WAAU;AAAA,YAET,UAAAN;AAAA,UAAA;AAAA,QAAA,GAGP;AAAA,QACC,CAACE,KACA,gBAAAP,EAACC,EAAa,QAAb,EACC,UAAA,gBAAAD;AAAA,UAACX;AAAA,UAAA;AAAA,YACC,SAAAE;AAAA,YACA,WAAAE;AAAA,YACA,OAAAC;AAAA,YACA,OAAAF;AAAA,YACA,eAAaG;AAAA,UAAA;AAAA,QAAA,EACf,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;AAEAS,EAAQ,cAAc;"}

package/dist/components/Waveform/Waveform.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../node_modules/react/jsx-runtime.cjs.js"),v=require("react"),H=require("../ThemeProvider.cjs.js");;/* empty css                  */const L=require("./WaveformBar.cjs.js"),$=require("../../utils/string.cjs.js"),X=K(100);function F({data:e,resolution:t=2,startDuration:s,endDuration:a,currentTime:m=0,showTimestamps:g=!1,totalDuration:l,disabled:f,disabledMessage:d,onClick:h,"data-testid":p}){var S;const{className:_}=H.useTheme(),o=v.useRef(null),[W,B]=v.useState([]),[j,y]=v.useState(null),[q,w]=v.useState(!1),[I,N]=v.useState(!1),E=e||X,M=t;v.useEffect(()=>{if(!o.current)return;const r=i=>{const x=Math.floor(i/(t+M)),R=G(E,x);B(R)},n=o.current.clientWidth;r(n);const c=new ResizeObserver(i=>{i&&i[0]&&r(i[0].contentRect.width)});return c.observe(o.current),()=>c.disconnect()},[E,t,M]),v.useEffect(()=>{const r=setTimeout(()=>w(!0),50),n=setTimeout(()=>N(!0),500);return()=>{clearTimeout(r),clearTimeout(n)}},[]);const A=r=>{if(!o.current)return;const n=o.current.getBoundingClientRect(),i=(r.clientX-n.left)/n.width*l;y(i)},z=()=>{y(null)},O=t+M,b=(r,n)=>{var x;const c=r/l*100;return(n==="start"?Math.floor(c/100*W.length):Math.ceil(c/100*W.length))*O/((x=o.current)==null?void 0:x.clientWidth)*100},V=((S=o.current)==null?void 0:S.clientWidth)||0,P=v.useMemo(()=>f&&d?d:e?null:"Waveform Unavailable",[f,d,e]);return u.jsxRuntimeExports.jsxs("div",{className:$.csx("proton-Waveform",_),"data-testid":p,children:[g&&u.jsxRuntimeExports.jsx(T,{direction:"left",seconds:m}),u.jsxRuntimeExports.jsxs("div",{ref:o,className:"proton-Waveform__container",onMouseMove:A,onMouseLeave:z,onClick:r=>{if(!o.current||f)return;const n=o.current.getBoundingClientRect(),i=(r.clientX-n.left)/n.width*l;h==null||h(i,r)},"data-disabled":f,"data-testid":"waveform-container",children:[s!==void 0&&a!==void 0&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__active-region",style:{left:o.current?`calc(${b(s,"start")}%`:"0%",right:o.current?`calc(${100-b(a,"end")}% - 2px)`:"0%"}}),j!==null&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__hover-line",style:{left:`${j/l*100}%`}}),W.map((r,n)=>{const c=n/W.length*l,i=s!==void 0&&a!==void 0&&(c<s||c>a),x=m===0?!1:c<=m,R=j!==null&&c<=j;return u.jsxRuntimeExports.jsx(L.WaveformBar,{amplitude:r,isDisabled:f||i,isPlayed:x,isHovered:R,isVisible:q,hasAnimated:I,resolution:t,spacing:M,index:n},n)})]}),P&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__bar-unavailable",style:{fontSize:V<325?"0.85rem":"1rem"},children:P}),g&&u.jsxRuntimeExports.jsx(T,{direction:"right",seconds:l})]})}function T({direction:e,seconds:t}){return u.jsxRuntimeExports.jsx("div",{className:$.csx("proton-Waveform__timestamp",`proton-Waveform__timestamp--${e}`),children:U(t)})}function U(e){const t=Math.floor(e/60),s=Math.floor(e%60);return`${t}:${s<10?"0":""}${s.toFixed(0)}`}function G(e,t){const s=e.length,a=s/t,m=new Array(t).fill(0).map((g,l)=>{const f=l*a,d=Math.floor(f),h=Math.min(d+1,s-1),p=f-d;return e[d]*(1-p)+e[h]*p});return J(m)}function J(e){const t=Math.min(...e),s=Math.max(...e);return e.map(a=>{const m=(a-t)/(s-t);return Math.max(m*.8+.1,.1)})}function K(e){return Array.from({length:e},(t,s)=>{const m=s/(e-1)*6*2*Math.PI-Math.PI/2;return Math.sin(m)*.5+.5})}exports.Waveform=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),v=require("react"),E=require("../ThemeProvider.cjs.js");;/* empty css                  */const L=require("./WaveformBar.cjs.js"),w=require("../../utils/string.cjs.js"),X=K(100);function F({data:e,resolution:t=2,startDuration:s,endDuration:a,currentTime:l=0,showTimestamps:_=!1,totalDuration:u,disabled:f,disabledMessage:d,onClick:p,"data-testid":x}){var T;const{className:y}=E.useTheme(),o=v.useRef(null),[W,I]=v.useState([]),[M,b]=v.useState(null),[N,$]=v.useState(!1),[q,A]=v.useState(!1),P=e||X,g=t;v.useEffect(()=>{if(!o.current)return;const r=i=>{const h=Math.floor(i/(t+g)),j=G(P,h);I(j)},n=o.current.clientWidth;r(n);const c=new ResizeObserver(i=>{i&&i[0]&&r(i[0].contentRect.width)});return c.observe(o.current),()=>c.disconnect()},[P,t,g]),v.useEffect(()=>{const r=setTimeout(()=>$(!0),50),n=setTimeout(()=>A(!0),500);return()=>{clearTimeout(r),clearTimeout(n)}},[]);const z=r=>{if(!o.current)return;const n=o.current.getBoundingClientRect(),i=(r.clientX-n.left)/n.width*u;b(i)},O=()=>{b(null)},V=t+g,R=(r,n)=>{var h;const c=r/u*100;return(n==="start"?Math.floor(c/100*W.length):Math.ceil(c/100*W.length))*V/((h=o.current)==null?void 0:h.clientWidth)*100},H=((T=o.current)==null?void 0:T.clientWidth)||0,S=v.useMemo(()=>f&&d?d:e?null:"Waveform Unavailable",[f,d,e]);return m.jsxs("div",{className:w.csx("proton-Waveform",y),"data-testid":x,children:[_&&m.jsx(B,{direction:"left",seconds:l}),m.jsxs("div",{ref:o,className:"proton-Waveform__container",onMouseMove:z,onMouseLeave:O,onClick:r=>{if(!o.current||f)return;const n=o.current.getBoundingClientRect(),i=(r.clientX-n.left)/n.width*u;p==null||p(i,r)},"data-disabled":f,"data-testid":"waveform-container",children:[s!==void 0&&a!==void 0&&m.jsx("div",{className:"proton-Waveform__active-region",style:{left:o.current?`calc(${R(s,"start")}%`:"0%",right:o.current?`calc(${100-R(a,"end")}% - 2px)`:"0%"}}),M!==null&&m.jsx("div",{className:"proton-Waveform__hover-line",style:{left:`${M/u*100}%`}}),W.map((r,n)=>{const c=n/W.length*u,i=s!==void 0&&a!==void 0&&(c<s||c>a),h=l===0?!1:c<=l,j=M!==null&&c<=M;return m.jsx(L.WaveformBar,{amplitude:r,isDisabled:f||i,isPlayed:h,isHovered:j,isVisible:N,hasAnimated:q,resolution:t,spacing:g,index:n},n)})]}),S&&m.jsx("div",{className:"proton-Waveform__bar-unavailable",style:{fontSize:H<325?"0.85rem":"1rem"},children:S}),_&&m.jsx(B,{direction:"right",seconds:u})]})}function B({direction:e,seconds:t}){return m.jsx("div",{className:w.csx("proton-Waveform__timestamp",`proton-Waveform__timestamp--${e}`),children:U(t)})}function U(e){const t=Math.floor(e/60),s=Math.floor(e%60);return`${t}:${s<10?"0":""}${s.toFixed(0)}`}function G(e,t){const s=e.length,a=s/t,l=new Array(t).fill(0).map((_,u)=>{const f=u*a,d=Math.floor(f),p=Math.min(d+1,s-1),x=f-d;return e[d]*(1-x)+e[p]*x});return J(l)}function J(e){const t=Math.min(...e),s=Math.max(...e);return e.map(a=>{const l=(a-t)/(s-t);return Math.max(l*.8+.1,.1)})}function K(e){return Array.from({length:e},(t,s)=>{const l=s/(e-1)*6*2*Math.PI-Math.PI/2;return Math.sin(l)*.5+.5})}exports.Waveform=F;
 //# sourceMappingURL=Waveform.cjs.js.map

package/dist/components/Waveform/Waveform.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Waveform.cjs.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { csx } from \"../../utils\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Waveform.css\";\nimport { WaveformBar } from \"./WaveformBar\";\n\nexport interface WaveformProps {\n  /**\n   * Array of normalized amplitude values (0-1) representing the waveform.\n   * If not provided, uses a sample sine wave.\n   */\n  data?: number[];\n\n  /**\n   * Current playback position in seconds.\n   */\n  currentTime?: number;\n\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n\n  /**\n   * Whether the entire waveform is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Reason for the waveform being disabled.\n   */\n  disabledMessage?: string;\n\n  /**\n   * End time to display until in seconds.\n   */\n  endDuration?: number;\n\n  /**\n   * Click handler that receives the clicked position (0-1) and event.\n   */\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Width in pixels of each waveform bar.\n   */\n  resolution?: number;\n\n  /**\n   * Whether to show timestamp markers.\n   */\n  showTimestamps?: boolean;\n\n  /**\n   * Start time to display from in seconds.\n   */\n  startDuration?: number;\n\n  /**\n   * Total duration of the audio in seconds.\n   */\n  totalDuration: number;\n}\n\nconst sampleWaveform = generateSampleWaveformData(100);\n\n/**\n * A waveform visualization component that displays audio data with interactive features.\n *\n * API:\n *  - {@link WaveformProps}\n */\nexport function Waveform({\n  data: waveformData,\n  resolution = 2,\n  startDuration,\n  endDuration,\n  currentTime = 0,\n  showTimestamps = false,\n  totalDuration,\n  disabled,\n  disabledMessage,\n  onClick,\n  \"data-testid\": testId,\n}: WaveformProps) {\n  const { className } = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasAnimated, setHasAnimated] = useState(false);\n\n  const waveform = waveformData || sampleWaveform;\n\n  const spacing = resolution;\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const processWaveform = (width: number) => {\n      const numBars = Math.floor(width / (resolution + spacing));\n      const processed = resampleData(waveform, numBars);\n      setProcessedWaveform(processed);\n    };\n\n    const initialWidth = containerRef.current.clientWidth;\n    processWaveform(initialWidth);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (entries && entries[0]) {\n        processWaveform(entries[0].contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [waveform, resolution, spacing]);\n\n  useEffect(() => {\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\n\n    return () => {\n      clearTimeout(visibilityTimer);\n      clearTimeout(animationTimer);\n    };\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const position = (x / rect.width) * totalDuration;\n    setHoverPosition(position);\n  };\n\n  const handleMouseLeave = () => {\n    setHoverPosition(null);\n  };\n\n  // Calculate the width of a single bar including spacing\n  const barTotalWidth = resolution + spacing;\n\n  // Find the nearest bar boundaries for start and end durations\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\n    const position = (time / totalDuration) * 100;\n    const barIndex =\n      direction === \"start\"\n        ? Math.floor((position / 100) * processedWaveform.length)\n        : Math.ceil((position / 100) * processedWaveform.length);\n\n    return (\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\n    );\n  };\n\n  const containerWidth = containerRef.current?.clientWidth || 0;\n  const waveformMessage = useMemo(() => {\n    if (disabled && disabledMessage) return disabledMessage;\n    if (!waveformData) return \"Waveform Unavailable\";\n\n    return null;\n  }, [disabled, disabledMessage, waveformData]);\n\n  return (\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\n      {showTimestamps && (\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\n      )}\n      <div\n        ref={containerRef}\n        className=\"proton-Waveform__container\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onClick={(e) => {\n          if (!containerRef.current || disabled) return;\n          const rect = containerRef.current.getBoundingClientRect();\n          const x = e.clientX - rect.left;\n          const position = (x / rect.width) * totalDuration;\n          onClick?.(position, e);\n        }}\n        data-disabled={disabled}\n        data-testid=\"waveform-container\"\n      >\n        {startDuration !== undefined && endDuration !== undefined && (\n          <div\n            className=\"proton-Waveform__active-region\"\n            style={{\n              left: containerRef.current\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\n                : \"0%\",\n              right: containerRef.current\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\n                : \"0%\",\n            }}\n          />\n        )}\n        {hoverPosition !== null && (\n          <div\n            className=\"proton-Waveform__hover-line\"\n            style={{\n              left: `${(hoverPosition / totalDuration) * 100}%`,\n            }}\n          />\n        )}\n        {processedWaveform.map((amplitude, index) => {\n          const position = (index / processedWaveform.length) * totalDuration;\n          const isBarOutsideActiveRegion =\n            startDuration !== undefined &&\n            endDuration !== undefined &&\n            (position < startDuration || position > endDuration);\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\n\n          return (\n            <WaveformBar\n              key={index}\n              amplitude={amplitude}\n              isDisabled={disabled || isBarOutsideActiveRegion}\n              isPlayed={isPlayed}\n              isHovered={isHovered}\n              isVisible={isVisible}\n              hasAnimated={hasAnimated}\n              resolution={resolution}\n              spacing={spacing}\n              index={index}\n            />\n          );\n        })}\n      </div>\n\n      {waveformMessage && (\n        <div\n          className=\"proton-Waveform__bar-unavailable\"\n          style={{\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\n          }}\n        >\n          {waveformMessage}\n        </div>\n      )}\n\n      {showTimestamps && (\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\n      )}\n    </div>\n  );\n}\n\nfunction TimestampBlock({\n  direction,\n  seconds,\n}: {\n  direction: \"left\" | \"right\";\n  seconds: number;\n}) {\n  return (\n    <div\n      className={csx(\n        \"proton-Waveform__timestamp\",\n        `proton-Waveform__timestamp--${direction}`,\n      )}\n    >\n      {formatTimestamp(seconds)}\n    </div>\n  );\n}\n\n/** Formats seconds into MM:SS timestamp string\n * @param {number} seconds - Number of seconds to format\n * @returns {string} Formatted timestamp string in MM:SS format\n */\n\nfunction formatTimestamp(seconds: number) {\n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  return `${minutes}:${\n    remainingSeconds < 10 ? \"0\" : \"\"\n  }${remainingSeconds.toFixed(0)}`;\n}\n\n/** Takes an array of waveform data and rescales it to any length\n * @param {array} initialData - original waveform data\n * @param {number} finalArrayLength - How long do you want the returned array?\n * @param {number} height - Height of the waveform container\n */\n\nfunction resampleData(initialData: number[], finalArrayLength: number) {\n  const initialArrayLength = initialData.length;\n  // How many samples from the original data do we skip per new sample?\n  const step = initialArrayLength / finalArrayLength;\n\n  // Create new array with desired length\n  const resampledData = new Array(finalArrayLength)\n    .fill(0)\n    .map((_, newIndex) => {\n      // Calculate position in original array\n      const position = newIndex * step;\n      const leftIndex = Math.floor(position);\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\n\n      // Calculate weights for interpolation\n      const fraction = position - leftIndex;\n\n      // Linear interpolation between adjacent samples\n      const newVal =\n        initialData[leftIndex] * (1 - fraction) +\n        initialData[rightIndex] * fraction;\n\n      return newVal;\n    });\n\n  return scaleData(resampledData);\n}\n\n/** Takes an array of waveform data and scales it based on the desired pixel height\n * @param {array} data – Array of waveform data\n * @param {number} height - Height of the waveform container\n */\nfunction scaleData(data: number[]) {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n\n  return data.map((item) => {\n    // Normalize to 0-1 range first\n    const normalized = (item - min) / (max - min);\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\n  });\n}\n\n/** Generates a sample sine wave waveform data array\n * @param {number} length - Length of the waveform data array\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\n */\n\nfunction generateSampleWaveformData(length: number) {\n  return Array.from({ length }, (_, i) => {\n    const cycles = 6;\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\n    return Math.sin(phase) * 0.5 + 0.5;\n  });\n}\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","_","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","i","phase"],"mappings":"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"}
+{"version":3,"file":"Waveform.cjs.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { csx } from \"../../utils\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Waveform.css\";\nimport { WaveformBar } from \"./WaveformBar\";\n\nexport interface WaveformProps {\n  /**\n   * Array of normalized amplitude values (0-1) representing the waveform.\n   * If not provided, uses a sample sine wave.\n   */\n  data?: number[];\n\n  /**\n   * Current playback position in seconds.\n   */\n  currentTime?: number;\n\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n\n  /**\n   * Whether the entire waveform is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Reason for the waveform being disabled.\n   */\n  disabledMessage?: string;\n\n  /**\n   * End time to display until in seconds.\n   */\n  endDuration?: number;\n\n  /**\n   * Click handler that receives the clicked position (0-1) and event.\n   */\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Width in pixels of each waveform bar.\n   */\n  resolution?: number;\n\n  /**\n   * Whether to show timestamp markers.\n   */\n  showTimestamps?: boolean;\n\n  /**\n   * Start time to display from in seconds.\n   */\n  startDuration?: number;\n\n  /**\n   * Total duration of the audio in seconds.\n   */\n  totalDuration: number;\n}\n\nconst sampleWaveform = generateSampleWaveformData(100);\n\n/**\n * A waveform visualization component that displays audio data with interactive features.\n *\n * API:\n *  - {@link WaveformProps}\n */\nexport function Waveform({\n  data: waveformData,\n  resolution = 2,\n  startDuration,\n  endDuration,\n  currentTime = 0,\n  showTimestamps = false,\n  totalDuration,\n  disabled,\n  disabledMessage,\n  onClick,\n  \"data-testid\": testId,\n}: WaveformProps) {\n  const { className } = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasAnimated, setHasAnimated] = useState(false);\n\n  const waveform = waveformData || sampleWaveform;\n\n  const spacing = resolution;\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const processWaveform = (width: number) => {\n      const numBars = Math.floor(width / (resolution + spacing));\n      const processed = resampleData(waveform, numBars);\n      setProcessedWaveform(processed);\n    };\n\n    const initialWidth = containerRef.current.clientWidth;\n    processWaveform(initialWidth);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (entries && entries[0]) {\n        processWaveform(entries[0].contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [waveform, resolution, spacing]);\n\n  useEffect(() => {\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\n\n    return () => {\n      clearTimeout(visibilityTimer);\n      clearTimeout(animationTimer);\n    };\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const position = (x / rect.width) * totalDuration;\n    setHoverPosition(position);\n  };\n\n  const handleMouseLeave = () => {\n    setHoverPosition(null);\n  };\n\n  // Calculate the width of a single bar including spacing\n  const barTotalWidth = resolution + spacing;\n\n  // Find the nearest bar boundaries for start and end durations\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\n    const position = (time / totalDuration) * 100;\n    const barIndex =\n      direction === \"start\"\n        ? Math.floor((position / 100) * processedWaveform.length)\n        : Math.ceil((position / 100) * processedWaveform.length);\n\n    return (\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\n    );\n  };\n\n  const containerWidth = containerRef.current?.clientWidth || 0;\n  const waveformMessage = useMemo(() => {\n    if (disabled && disabledMessage) return disabledMessage;\n    if (!waveformData) return \"Waveform Unavailable\";\n\n    return null;\n  }, [disabled, disabledMessage, waveformData]);\n\n  return (\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\n      {showTimestamps && (\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\n      )}\n      <div\n        ref={containerRef}\n        className=\"proton-Waveform__container\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onClick={(e) => {\n          if (!containerRef.current || disabled) return;\n          const rect = containerRef.current.getBoundingClientRect();\n          const x = e.clientX - rect.left;\n          const position = (x / rect.width) * totalDuration;\n          onClick?.(position, e);\n        }}\n        data-disabled={disabled}\n        data-testid=\"waveform-container\"\n      >\n        {startDuration !== undefined && endDuration !== undefined && (\n          <div\n            className=\"proton-Waveform__active-region\"\n            style={{\n              left: containerRef.current\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\n                : \"0%\",\n              right: containerRef.current\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\n                : \"0%\",\n            }}\n          />\n        )}\n        {hoverPosition !== null && (\n          <div\n            className=\"proton-Waveform__hover-line\"\n            style={{\n              left: `${(hoverPosition / totalDuration) * 100}%`,\n            }}\n          />\n        )}\n        {processedWaveform.map((amplitude, index) => {\n          const position = (index / processedWaveform.length) * totalDuration;\n          const isBarOutsideActiveRegion =\n            startDuration !== undefined &&\n            endDuration !== undefined &&\n            (position < startDuration || position > endDuration);\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\n\n          return (\n            <WaveformBar\n              key={index}\n              amplitude={amplitude}\n              isDisabled={disabled || isBarOutsideActiveRegion}\n              isPlayed={isPlayed}\n              isHovered={isHovered}\n              isVisible={isVisible}\n              hasAnimated={hasAnimated}\n              resolution={resolution}\n              spacing={spacing}\n              index={index}\n            />\n          );\n        })}\n      </div>\n\n      {waveformMessage && (\n        <div\n          className=\"proton-Waveform__bar-unavailable\"\n          style={{\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\n          }}\n        >\n          {waveformMessage}\n        </div>\n      )}\n\n      {showTimestamps && (\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\n      )}\n    </div>\n  );\n}\n\nfunction TimestampBlock({\n  direction,\n  seconds,\n}: {\n  direction: \"left\" | \"right\";\n  seconds: number;\n}) {\n  return (\n    <div\n      className={csx(\n        \"proton-Waveform__timestamp\",\n        `proton-Waveform__timestamp--${direction}`,\n      )}\n    >\n      {formatTimestamp(seconds)}\n    </div>\n  );\n}\n\n/** Formats seconds into MM:SS timestamp string\n * @param {number} seconds - Number of seconds to format\n * @returns {string} Formatted timestamp string in MM:SS format\n */\n\nfunction formatTimestamp(seconds: number) {\n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  return `${minutes}:${\n    remainingSeconds < 10 ? \"0\" : \"\"\n  }${remainingSeconds.toFixed(0)}`;\n}\n\n/** Takes an array of waveform data and rescales it to any length\n * @param {array} initialData - original waveform data\n * @param {number} finalArrayLength - How long do you want the returned array?\n * @param {number} height - Height of the waveform container\n */\n\nfunction resampleData(initialData: number[], finalArrayLength: number) {\n  const initialArrayLength = initialData.length;\n  // How many samples from the original data do we skip per new sample?\n  const step = initialArrayLength / finalArrayLength;\n\n  // Create new array with desired length\n  const resampledData = new Array(finalArrayLength)\n    .fill(0)\n    .map((_, newIndex) => {\n      // Calculate position in original array\n      const position = newIndex * step;\n      const leftIndex = Math.floor(position);\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\n\n      // Calculate weights for interpolation\n      const fraction = position - leftIndex;\n\n      // Linear interpolation between adjacent samples\n      const newVal =\n        initialData[leftIndex] * (1 - fraction) +\n        initialData[rightIndex] * fraction;\n\n      return newVal;\n    });\n\n  return scaleData(resampledData);\n}\n\n/** Takes an array of waveform data and scales it based on the desired pixel height\n * @param {array} data – Array of waveform data\n * @param {number} height - Height of the waveform container\n */\nfunction scaleData(data: number[]) {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n\n  return data.map((item) => {\n    // Normalize to 0-1 range first\n    const normalized = (item - min) / (max - min);\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\n  });\n}\n\n/** Generates a sample sine wave waveform data array\n * @param {number} length - Length of the waveform data array\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\n */\n\nfunction generateSampleWaveformData(length: number) {\n  return Array.from({ length }, (_, i) => {\n    const cycles = 6;\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\n    return Math.sin(phase) * 0.5 + 0.5;\n  });\n}\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","_","i","phase"],"mappings":"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"}

package/dist/components/Waveform/Waveform.es.js

@@ -1,102 +1,102 @@
-import { j as l } from "../../node_modules/react/jsx-runtime.es.js";
-import { useRef as X, useState as g, useEffect as N, useMemo as F } from "react";
-import { useTheme as U } from "../ThemeProvider.es.js";
+import { jsxs as R, jsx as v } from "react/jsx-runtime";
+import { useRef as F, useState as x, useEffect as T, useMemo as U } from "react";
+import { useTheme as q } from "../ThemeProvider.es.js";
 /* empty css                */
-import { WaveformBar as q } from "./WaveformBar.es.js";
-import { csx as T } from "../../utils/string.es.js";
-const G = Y(100);
-function ne({
+import { WaveformBar as G } from "./WaveformBar.es.js";
+import { csx as A } from "../../utils/string.es.js";
+const J = Z(100);
+function oe({
   data: e,
   resolution: t = 2,
   startDuration: o,
   endDuration: a,
   currentTime: m = 0,
   showTimestamps: _ = !1,
-  totalDuration: f,
-  disabled: u,
-  disabledMessage: v,
+  totalDuration: l,
+  disabled: f,
+  disabledMessage: u,
   onClick: h,
   "data-testid": p
 }) {
-  var I;
-  const { className: y } = U(), r = X(null), [x, $] = g([]), [W, b] = g(null), [A, z] = g(!1), [S, V] = g(!1), R = e || G, M = t;
-  N(() => {
-    if (!r.current) return;
-    const s = (i) => {
-      const d = Math.floor(i / (t + M)), j = K(R, d);
-      $(j);
-    }, n = r.current.clientWidth;
-    s(n);
+  var P;
+  const { className: b } = q(), s = F(null), [W, z] = x([]), [M, w] = x(null), [S, V] = x(!1), [H, O] = x(!1), B = e || J, g = t;
+  T(() => {
+    if (!s.current) return;
+    const r = (i) => {
+      const d = Math.floor(i / (t + g)), y = Q(B, d);
+      z(y);
+    }, n = s.current.clientWidth;
+    r(n);
     const c = new ResizeObserver((i) => {
-      i && i[0] && s(i[0].contentRect.width);
+      i && i[0] && r(i[0].contentRect.width);
     });
-    return c.observe(r.current), () => c.disconnect();
-  }, [R, t, M]), N(() => {
-    const s = setTimeout(() => z(!0), 50), n = setTimeout(() => V(!0), 500);
+    return c.observe(s.current), () => c.disconnect();
+  }, [B, t, g]), T(() => {
+    const r = setTimeout(() => V(!0), 50), n = setTimeout(() => O(!0), 500);
     return () => {
-      clearTimeout(s), clearTimeout(n);
+      clearTimeout(r), clearTimeout(n);
     };
   }, []);
-  const H = (s) => {
-    if (!r.current) return;
-    const n = r.current.getBoundingClientRect(), i = (s.clientX - n.left) / n.width * f;
-    b(i);
-  }, O = () => {
-    b(null);
-  }, E = t + M, w = (s, n) => {
+  const j = (r) => {
+    if (!s.current) return;
+    const n = s.current.getBoundingClientRect(), i = (r.clientX - n.left) / n.width * l;
+    w(i);
+  }, L = () => {
+    w(null);
+  }, X = t + g, I = (r, n) => {
     var d;
-    const c = s / f * 100;
-    return (n === "start" ? Math.floor(c / 100 * x.length) : Math.ceil(c / 100 * x.length)) * E / ((d = r.current) == null ? void 0 : d.clientWidth) * 100;
-  }, L = ((I = r.current) == null ? void 0 : I.clientWidth) || 0, B = F(() => u && v ? v : e ? null : "Waveform Unavailable", [u, v, e]);
-  return /* @__PURE__ */ l.jsxs("div", { className: T("proton-Waveform", y), "data-testid": p, children: [
-    _ && /* @__PURE__ */ l.jsx(P, { direction: "left", seconds: m }),
-    /* @__PURE__ */ l.jsxs(
+    const c = r / l * 100;
+    return (n === "start" ? Math.floor(c / 100 * W.length) : Math.ceil(c / 100 * W.length)) * X / ((d = s.current) == null ? void 0 : d.clientWidth) * 100;
+  }, E = ((P = s.current) == null ? void 0 : P.clientWidth) || 0, N = U(() => f && u ? u : e ? null : "Waveform Unavailable", [f, u, e]);
+  return /* @__PURE__ */ R("div", { className: A("proton-Waveform", b), "data-testid": p, children: [
+    _ && /* @__PURE__ */ v($, { direction: "left", seconds: m }),
+    /* @__PURE__ */ R(
       "div",
       {
-        ref: r,
+        ref: s,
         className: "proton-Waveform__container",
-        onMouseMove: H,
-        onMouseLeave: O,
-        onClick: (s) => {
-          if (!r.current || u) return;
-          const n = r.current.getBoundingClientRect(), i = (s.clientX - n.left) / n.width * f;
-          h == null || h(i, s);
+        onMouseMove: j,
+        onMouseLeave: L,
+        onClick: (r) => {
+          if (!s.current || f) return;
+          const n = s.current.getBoundingClientRect(), i = (r.clientX - n.left) / n.width * l;
+          h == null || h(i, r);
         },
-        "data-disabled": u,
+        "data-disabled": f,
         "data-testid": "waveform-container",
         children: [
-          o !== void 0 && a !== void 0 && /* @__PURE__ */ l.jsx(
+          o !== void 0 && a !== void 0 && /* @__PURE__ */ v(
             "div",
             {
               className: "proton-Waveform__active-region",
               style: {
-                left: r.current ? `calc(${w(o, "start")}%` : "0%",
-                right: r.current ? `calc(${100 - w(a, "end")}% - 2px)` : "0%"
+                left: s.current ? `calc(${I(o, "start")}%` : "0%",
+                right: s.current ? `calc(${100 - I(a, "end")}% - 2px)` : "0%"
               }
             }
           ),
-          W !== null && /* @__PURE__ */ l.jsx(
+          M !== null && /* @__PURE__ */ v(
             "div",
             {
               className: "proton-Waveform__hover-line",
               style: {
-                left: `${W / f * 100}%`
+                left: `${M / l * 100}%`
               }
             }
           ),
-          x.map((s, n) => {
-            const c = n / x.length * f, i = o !== void 0 && a !== void 0 && (c < o || c > a), d = m === 0 ? !1 : c <= m, j = W !== null && c <= W;
-            return /* @__PURE__ */ l.jsx(
-              q,
+          W.map((r, n) => {
+            const c = n / W.length * l, i = o !== void 0 && a !== void 0 && (c < o || c > a), d = m === 0 ? !1 : c <= m, y = M !== null && c <= M;
+            return /* @__PURE__ */ v(
+              G,
               {
-                amplitude: s,
-                isDisabled: u || i,
+                amplitude: r,
+                isDisabled: f || i,
                 isPlayed: d,
-                isHovered: j,
-                isVisible: A,
-                hasAnimated: S,
+                isHovered: y,
+                isVisible: S,
+                hasAnimated: H,
                 resolution: t,
-                spacing: M,
+                spacing: g,
                 index: n
               },
               n
@@ -105,59 +105,59 @@ function ne({
         ]
       }
     ),
-    B && /* @__PURE__ */ l.jsx(
+    N && /* @__PURE__ */ v(
       "div",
       {
         className: "proton-Waveform__bar-unavailable",
         style: {
-          fontSize: L < 325 ? "0.85rem" : "1rem"
+          fontSize: E < 325 ? "0.85rem" : "1rem"
         },
-        children: B
+        children: N
       }
     ),
-    _ && /* @__PURE__ */ l.jsx(P, { direction: "right", seconds: f })
+    _ && /* @__PURE__ */ v($, { direction: "right", seconds: l })
   ] });
 }
-function P({
+function $({
   direction: e,
   seconds: t
 }) {
-  return /* @__PURE__ */ l.jsx(
+  return /* @__PURE__ */ v(
     "div",
     {
-      className: T(
+      className: A(
         "proton-Waveform__timestamp",
         `proton-Waveform__timestamp--${e}`
       ),
-      children: J(t)
+      children: K(t)
     }
   );
 }
-function J(e) {
+function K(e) {
   const t = Math.floor(e / 60), o = Math.floor(e % 60);
   return `${t}:${o < 10 ? "0" : ""}${o.toFixed(0)}`;
 }
-function K(e, t) {
-  const o = e.length, a = o / t, m = new Array(t).fill(0).map((_, f) => {
-    const u = f * a, v = Math.floor(u), h = Math.min(v + 1, o - 1), p = u - v;
-    return e[v] * (1 - p) + e[h] * p;
+function Q(e, t) {
+  const o = e.length, a = o / t, m = new Array(t).fill(0).map((_, l) => {
+    const f = l * a, u = Math.floor(f), h = Math.min(u + 1, o - 1), p = f - u;
+    return e[u] * (1 - p) + e[h] * p;
   });
-  return Q(m);
+  return Y(m);
 }
-function Q(e) {
+function Y(e) {
   const t = Math.min(...e), o = Math.max(...e);
   return e.map((a) => {
     const m = (a - t) / (o - t);
     return Math.max(m * 0.8 + 0.1, 0.1);
   });
 }
-function Y(e) {
+function Z(e) {
   return Array.from({ length: e }, (t, o) => {
     const m = o / (e - 1) * 6 * 2 * Math.PI - Math.PI / 2;
     return Math.sin(m) * 0.5 + 0.5;
   });
 }
 export {
-  ne as Waveform
+  oe as Waveform
 };
 //# sourceMappingURL=Waveform.es.js.map

package/dist/components/Waveform/Waveform.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Waveform.es.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { csx } from \"../../utils\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Waveform.css\";\nimport { WaveformBar } from \"./WaveformBar\";\n\nexport interface WaveformProps {\n  /**\n   * Array of normalized amplitude values (0-1) representing the waveform.\n   * If not provided, uses a sample sine wave.\n   */\n  data?: number[];\n\n  /**\n   * Current playback position in seconds.\n   */\n  currentTime?: number;\n\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n\n  /**\n   * Whether the entire waveform is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Reason for the waveform being disabled.\n   */\n  disabledMessage?: string;\n\n  /**\n   * End time to display until in seconds.\n   */\n  endDuration?: number;\n\n  /**\n   * Click handler that receives the clicked position (0-1) and event.\n   */\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Width in pixels of each waveform bar.\n   */\n  resolution?: number;\n\n  /**\n   * Whether to show timestamp markers.\n   */\n  showTimestamps?: boolean;\n\n  /**\n   * Start time to display from in seconds.\n   */\n  startDuration?: number;\n\n  /**\n   * Total duration of the audio in seconds.\n   */\n  totalDuration: number;\n}\n\nconst sampleWaveform = generateSampleWaveformData(100);\n\n/**\n * A waveform visualization component that displays audio data with interactive features.\n *\n * API:\n *  - {@link WaveformProps}\n */\nexport function Waveform({\n  data: waveformData,\n  resolution = 2,\n  startDuration,\n  endDuration,\n  currentTime = 0,\n  showTimestamps = false,\n  totalDuration,\n  disabled,\n  disabledMessage,\n  onClick,\n  \"data-testid\": testId,\n}: WaveformProps) {\n  const { className } = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasAnimated, setHasAnimated] = useState(false);\n\n  const waveform = waveformData || sampleWaveform;\n\n  const spacing = resolution;\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const processWaveform = (width: number) => {\n      const numBars = Math.floor(width / (resolution + spacing));\n      const processed = resampleData(waveform, numBars);\n      setProcessedWaveform(processed);\n    };\n\n    const initialWidth = containerRef.current.clientWidth;\n    processWaveform(initialWidth);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (entries && entries[0]) {\n        processWaveform(entries[0].contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [waveform, resolution, spacing]);\n\n  useEffect(() => {\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\n\n    return () => {\n      clearTimeout(visibilityTimer);\n      clearTimeout(animationTimer);\n    };\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const position = (x / rect.width) * totalDuration;\n    setHoverPosition(position);\n  };\n\n  const handleMouseLeave = () => {\n    setHoverPosition(null);\n  };\n\n  // Calculate the width of a single bar including spacing\n  const barTotalWidth = resolution + spacing;\n\n  // Find the nearest bar boundaries for start and end durations\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\n    const position = (time / totalDuration) * 100;\n    const barIndex =\n      direction === \"start\"\n        ? Math.floor((position / 100) * processedWaveform.length)\n        : Math.ceil((position / 100) * processedWaveform.length);\n\n    return (\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\n    );\n  };\n\n  const containerWidth = containerRef.current?.clientWidth || 0;\n  const waveformMessage = useMemo(() => {\n    if (disabled && disabledMessage) return disabledMessage;\n    if (!waveformData) return \"Waveform Unavailable\";\n\n    return null;\n  }, [disabled, disabledMessage, waveformData]);\n\n  return (\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\n      {showTimestamps && (\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\n      )}\n      <div\n        ref={containerRef}\n        className=\"proton-Waveform__container\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onClick={(e) => {\n          if (!containerRef.current || disabled) return;\n          const rect = containerRef.current.getBoundingClientRect();\n          const x = e.clientX - rect.left;\n          const position = (x / rect.width) * totalDuration;\n          onClick?.(position, e);\n        }}\n        data-disabled={disabled}\n        data-testid=\"waveform-container\"\n      >\n        {startDuration !== undefined && endDuration !== undefined && (\n          <div\n            className=\"proton-Waveform__active-region\"\n            style={{\n              left: containerRef.current\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\n                : \"0%\",\n              right: containerRef.current\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\n                : \"0%\",\n            }}\n          />\n        )}\n        {hoverPosition !== null && (\n          <div\n            className=\"proton-Waveform__hover-line\"\n            style={{\n              left: `${(hoverPosition / totalDuration) * 100}%`,\n            }}\n          />\n        )}\n        {processedWaveform.map((amplitude, index) => {\n          const position = (index / processedWaveform.length) * totalDuration;\n          const isBarOutsideActiveRegion =\n            startDuration !== undefined &&\n            endDuration !== undefined &&\n            (position < startDuration || position > endDuration);\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\n\n          return (\n            <WaveformBar\n              key={index}\n              amplitude={amplitude}\n              isDisabled={disabled || isBarOutsideActiveRegion}\n              isPlayed={isPlayed}\n              isHovered={isHovered}\n              isVisible={isVisible}\n              hasAnimated={hasAnimated}\n              resolution={resolution}\n              spacing={spacing}\n              index={index}\n            />\n          );\n        })}\n      </div>\n\n      {waveformMessage && (\n        <div\n          className=\"proton-Waveform__bar-unavailable\"\n          style={{\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\n          }}\n        >\n          {waveformMessage}\n        </div>\n      )}\n\n      {showTimestamps && (\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\n      )}\n    </div>\n  );\n}\n\nfunction TimestampBlock({\n  direction,\n  seconds,\n}: {\n  direction: \"left\" | \"right\";\n  seconds: number;\n}) {\n  return (\n    <div\n      className={csx(\n        \"proton-Waveform__timestamp\",\n        `proton-Waveform__timestamp--${direction}`,\n      )}\n    >\n      {formatTimestamp(seconds)}\n    </div>\n  );\n}\n\n/** Formats seconds into MM:SS timestamp string\n * @param {number} seconds - Number of seconds to format\n * @returns {string} Formatted timestamp string in MM:SS format\n */\n\nfunction formatTimestamp(seconds: number) {\n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  return `${minutes}:${\n    remainingSeconds < 10 ? \"0\" : \"\"\n  }${remainingSeconds.toFixed(0)}`;\n}\n\n/** Takes an array of waveform data and rescales it to any length\n * @param {array} initialData - original waveform data\n * @param {number} finalArrayLength - How long do you want the returned array?\n * @param {number} height - Height of the waveform container\n */\n\nfunction resampleData(initialData: number[], finalArrayLength: number) {\n  const initialArrayLength = initialData.length;\n  // How many samples from the original data do we skip per new sample?\n  const step = initialArrayLength / finalArrayLength;\n\n  // Create new array with desired length\n  const resampledData = new Array(finalArrayLength)\n    .fill(0)\n    .map((_, newIndex) => {\n      // Calculate position in original array\n      const position = newIndex * step;\n      const leftIndex = Math.floor(position);\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\n\n      // Calculate weights for interpolation\n      const fraction = position - leftIndex;\n\n      // Linear interpolation between adjacent samples\n      const newVal =\n        initialData[leftIndex] * (1 - fraction) +\n        initialData[rightIndex] * fraction;\n\n      return newVal;\n    });\n\n  return scaleData(resampledData);\n}\n\n/** Takes an array of waveform data and scales it based on the desired pixel height\n * @param {array} data – Array of waveform data\n * @param {number} height - Height of the waveform container\n */\nfunction scaleData(data: number[]) {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n\n  return data.map((item) => {\n    // Normalize to 0-1 range first\n    const normalized = (item - min) / (max - min);\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\n  });\n}\n\n/** Generates a sample sine wave waveform data array\n * @param {number} length - Length of the waveform data array\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\n */\n\nfunction generateSampleWaveformData(length: number) {\n  return Array.from({ length }, (_, i) => {\n    const cycles = 6;\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\n    return Math.sin(phase) * 0.5 + 0.5;\n  });\n}\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","_","i","phase"],"mappings":"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"}
+{"version":3,"file":"Waveform.es.js","sources":["../../../src/components/Waveform/Waveform.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { csx } from \"../../utils\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Waveform.css\";\nimport { WaveformBar } from \"./WaveformBar\";\n\nexport interface WaveformProps {\n  /**\n   * Array of normalized amplitude values (0-1) representing the waveform.\n   * If not provided, uses a sample sine wave.\n   */\n  data?: number[];\n\n  /**\n   * Current playback position in seconds.\n   */\n  currentTime?: number;\n\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n\n  /**\n   * Whether the entire waveform is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Reason for the waveform being disabled.\n   */\n  disabledMessage?: string;\n\n  /**\n   * End time to display until in seconds.\n   */\n  endDuration?: number;\n\n  /**\n   * Click handler that receives the clicked position (0-1) and event.\n   */\n  onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Width in pixels of each waveform bar.\n   */\n  resolution?: number;\n\n  /**\n   * Whether to show timestamp markers.\n   */\n  showTimestamps?: boolean;\n\n  /**\n   * Start time to display from in seconds.\n   */\n  startDuration?: number;\n\n  /**\n   * Total duration of the audio in seconds.\n   */\n  totalDuration: number;\n}\n\nconst sampleWaveform = generateSampleWaveformData(100);\n\n/**\n * A waveform visualization component that displays audio data with interactive features.\n *\n * API:\n *  - {@link WaveformProps}\n */\nexport function Waveform({\n  data: waveformData,\n  resolution = 2,\n  startDuration,\n  endDuration,\n  currentTime = 0,\n  showTimestamps = false,\n  totalDuration,\n  disabled,\n  disabledMessage,\n  onClick,\n  \"data-testid\": testId,\n}: WaveformProps) {\n  const { className } = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [processedWaveform, setProcessedWaveform] = useState<number[]>([]);\n  const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasAnimated, setHasAnimated] = useState(false);\n\n  const waveform = waveformData || sampleWaveform;\n\n  const spacing = resolution;\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const processWaveform = (width: number) => {\n      const numBars = Math.floor(width / (resolution + spacing));\n      const processed = resampleData(waveform, numBars);\n      setProcessedWaveform(processed);\n    };\n\n    const initialWidth = containerRef.current.clientWidth;\n    processWaveform(initialWidth);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (entries && entries[0]) {\n        processWaveform(entries[0].contentRect.width);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [waveform, resolution, spacing]);\n\n  useEffect(() => {\n    const visibilityTimer = setTimeout(() => setIsVisible(true), 50);\n    const animationTimer = setTimeout(() => setHasAnimated(true), 500);\n\n    return () => {\n      clearTimeout(visibilityTimer);\n      clearTimeout(animationTimer);\n    };\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const position = (x / rect.width) * totalDuration;\n    setHoverPosition(position);\n  };\n\n  const handleMouseLeave = () => {\n    setHoverPosition(null);\n  };\n\n  // Calculate the width of a single bar including spacing\n  const barTotalWidth = resolution + spacing;\n\n  // Find the nearest bar boundaries for start and end durations\n  const getBarPosition = (time: number, direction: \"start\" | \"end\") => {\n    const position = (time / totalDuration) * 100;\n    const barIndex =\n      direction === \"start\"\n        ? Math.floor((position / 100) * processedWaveform.length)\n        : Math.ceil((position / 100) * processedWaveform.length);\n\n    return (\n      ((barIndex * barTotalWidth) / containerRef.current?.clientWidth!) * 100\n    );\n  };\n\n  const containerWidth = containerRef.current?.clientWidth || 0;\n  const waveformMessage = useMemo(() => {\n    if (disabled && disabledMessage) return disabledMessage;\n    if (!waveformData) return \"Waveform Unavailable\";\n\n    return null;\n  }, [disabled, disabledMessage, waveformData]);\n\n  return (\n    <div className={csx(\"proton-Waveform\", className)} data-testid={testId}>\n      {showTimestamps && (\n        <TimestampBlock direction=\"left\" seconds={currentTime} />\n      )}\n      <div\n        ref={containerRef}\n        className=\"proton-Waveform__container\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onClick={(e) => {\n          if (!containerRef.current || disabled) return;\n          const rect = containerRef.current.getBoundingClientRect();\n          const x = e.clientX - rect.left;\n          const position = (x / rect.width) * totalDuration;\n          onClick?.(position, e);\n        }}\n        data-disabled={disabled}\n        data-testid=\"waveform-container\"\n      >\n        {startDuration !== undefined && endDuration !== undefined && (\n          <div\n            className=\"proton-Waveform__active-region\"\n            style={{\n              left: containerRef.current\n                ? `calc(${getBarPosition(startDuration, \"start\")}%`\n                : \"0%\",\n              right: containerRef.current\n                ? `calc(${100 - getBarPosition(endDuration, \"end\")}% - 2px)`\n                : \"0%\",\n            }}\n          />\n        )}\n        {hoverPosition !== null && (\n          <div\n            className=\"proton-Waveform__hover-line\"\n            style={{\n              left: `${(hoverPosition / totalDuration) * 100}%`,\n            }}\n          />\n        )}\n        {processedWaveform.map((amplitude, index) => {\n          const position = (index / processedWaveform.length) * totalDuration;\n          const isBarOutsideActiveRegion =\n            startDuration !== undefined &&\n            endDuration !== undefined &&\n            (position < startDuration || position > endDuration);\n          const isPlayed = currentTime === 0 ? false : position <= currentTime;\n          const isHovered = hoverPosition !== null && position <= hoverPosition;\n\n          return (\n            <WaveformBar\n              key={index}\n              amplitude={amplitude}\n              isDisabled={disabled || isBarOutsideActiveRegion}\n              isPlayed={isPlayed}\n              isHovered={isHovered}\n              isVisible={isVisible}\n              hasAnimated={hasAnimated}\n              resolution={resolution}\n              spacing={spacing}\n              index={index}\n            />\n          );\n        })}\n      </div>\n\n      {waveformMessage && (\n        <div\n          className=\"proton-Waveform__bar-unavailable\"\n          style={{\n            fontSize: containerWidth < 325 ? \"0.85rem\" : \"1rem\",\n          }}\n        >\n          {waveformMessage}\n        </div>\n      )}\n\n      {showTimestamps && (\n        <TimestampBlock direction=\"right\" seconds={totalDuration} />\n      )}\n    </div>\n  );\n}\n\nfunction TimestampBlock({\n  direction,\n  seconds,\n}: {\n  direction: \"left\" | \"right\";\n  seconds: number;\n}) {\n  return (\n    <div\n      className={csx(\n        \"proton-Waveform__timestamp\",\n        `proton-Waveform__timestamp--${direction}`,\n      )}\n    >\n      {formatTimestamp(seconds)}\n    </div>\n  );\n}\n\n/** Formats seconds into MM:SS timestamp string\n * @param {number} seconds - Number of seconds to format\n * @returns {string} Formatted timestamp string in MM:SS format\n */\n\nfunction formatTimestamp(seconds: number) {\n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  return `${minutes}:${\n    remainingSeconds < 10 ? \"0\" : \"\"\n  }${remainingSeconds.toFixed(0)}`;\n}\n\n/** Takes an array of waveform data and rescales it to any length\n * @param {array} initialData - original waveform data\n * @param {number} finalArrayLength - How long do you want the returned array?\n * @param {number} height - Height of the waveform container\n */\n\nfunction resampleData(initialData: number[], finalArrayLength: number) {\n  const initialArrayLength = initialData.length;\n  // How many samples from the original data do we skip per new sample?\n  const step = initialArrayLength / finalArrayLength;\n\n  // Create new array with desired length\n  const resampledData = new Array(finalArrayLength)\n    .fill(0)\n    .map((_, newIndex) => {\n      // Calculate position in original array\n      const position = newIndex * step;\n      const leftIndex = Math.floor(position);\n      const rightIndex = Math.min(leftIndex + 1, initialArrayLength - 1);\n\n      // Calculate weights for interpolation\n      const fraction = position - leftIndex;\n\n      // Linear interpolation between adjacent samples\n      const newVal =\n        initialData[leftIndex] * (1 - fraction) +\n        initialData[rightIndex] * fraction;\n\n      return newVal;\n    });\n\n  return scaleData(resampledData);\n}\n\n/** Takes an array of waveform data and scales it based on the desired pixel height\n * @param {array} data – Array of waveform data\n * @param {number} height - Height of the waveform container\n */\nfunction scaleData(data: number[]) {\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n\n  return data.map((item) => {\n    // Normalize to 0-1 range first\n    const normalized = (item - min) / (max - min);\n    // Then scale to desired height (using 0.1 as minimum to ensure visibility)\n    return Math.max(normalized * 0.8 + 0.1, 0.1);\n  });\n}\n\n/** Generates a sample sine wave waveform data array\n * @param {number} length - Length of the waveform data array\n * @returns {number[]} Array of normalized amplitude values (0-1) representing the waveform\n */\n\nfunction generateSampleWaveformData(length: number) {\n  return Array.from({ length }, (_, i) => {\n    const cycles = 6;\n    // Create 3 complete cycles (6π total) starting at -π/2 (trough)\n    const phase = (i / (length - 1)) * cycles * 2 * Math.PI - Math.PI / 2;\n    return Math.sin(phase) * 0.5 + 0.5;\n  });\n}\n"],"names":["sampleWaveform","generateSampleWaveformData","Waveform","waveformData","resolution","startDuration","endDuration","currentTime","showTimestamps","totalDuration","disabled","disabledMessage","onClick","testId","className","useTheme","containerRef","useRef","processedWaveform","setProcessedWaveform","useState","hoverPosition","setHoverPosition","isVisible","setIsVisible","hasAnimated","setHasAnimated","waveform","spacing","useEffect","processWaveform","width","numBars","processed","resampleData","initialWidth","resizeObserver","entries","visibilityTimer","animationTimer","handleMouseMove","e","rect","position","handleMouseLeave","barTotalWidth","getBarPosition","time","direction","_a","containerWidth","waveformMessage","useMemo","jsxs","csx","jsx","TimestampBlock","amplitude","index","isBarOutsideActiveRegion","isPlayed","isHovered","WaveformBar","seconds","formatTimestamp","minutes","remainingSeconds","initialData","finalArrayLength","initialArrayLength","step","resampledData","newIndex","leftIndex","rightIndex","fraction","scaleData","data","min","max","item","normalized","length","_","i","phase"],"mappings":"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"}

package/dist/components/Waveform/WaveformBar.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("../../utils/string.cjs.js");function x({amplitude:_,isDisabled:o,isPlayed:e,isHovered:p,isVisible:a,hasAnimated:m,resolution:v,spacing:i,index:s}){const t=a?`${Math.max(_*100,4)}%`:"0%";return r.jsxRuntimeExports.jsxs("div",{className:n.csx("proton-Waveform__bar-wrapper"),style:{width:`${v}px`,marginRight:`${i}px`},children:[r.jsxRuntimeExports.jsx("div",{className:n.csx("proton-Waveform__bar","proton-Waveform__bar--upper",o&&"proton-Waveform__bar--disabled",e&&"proton-Waveform__bar--played",a&&"proton-Waveform__bar--visible",m&&"proton-Waveform__bar--animated"),style:{"--target-height":`calc(${t} / 2)`,"--index":s}}),r.jsxRuntimeExports.jsx("div",{className:n.csx("proton-Waveform__bar","proton-Waveform__bar--lower",o&&"proton-Waveform__bar--disabled",e&&"proton-Waveform__bar--played",a&&"proton-Waveform__bar--visible",m&&"proton-Waveform__bar--animated"),style:{"--target-height":`calc(${t} / 2)`,"--index":s}}),p&&!o&&!e&&r.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__bar--hover",style:{"--hover-height":t}})]})}exports.WaveformBar=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("../../utils/string.cjs.js");function f({amplitude:v,isDisabled:o,isPlayed:a,isHovered:p,isVisible:e,hasAnimated:_,resolution:s,spacing:c,index:m}){const t=e?`${Math.max(v*100,4)}%`:"0%";return r.jsxs("div",{className:n.csx("proton-Waveform__bar-wrapper"),style:{width:`${s}px`,marginRight:`${c}px`},children:[r.jsx("div",{className:n.csx("proton-Waveform__bar","proton-Waveform__bar--upper",o&&"proton-Waveform__bar--disabled",a&&"proton-Waveform__bar--played",e&&"proton-Waveform__bar--visible",_&&"proton-Waveform__bar--animated"),style:{"--target-height":`calc(${t} / 2)`,"--index":m}}),r.jsx("div",{className:n.csx("proton-Waveform__bar","proton-Waveform__bar--lower",o&&"proton-Waveform__bar--disabled",a&&"proton-Waveform__bar--played",e&&"proton-Waveform__bar--visible",_&&"proton-Waveform__bar--animated"),style:{"--target-height":`calc(${t} / 2)`,"--index":m}}),p&&!o&&!a&&r.jsx("div",{className:"proton-Waveform__bar--hover",style:{"--hover-height":t}})]})}exports.WaveformBar=f;
 //# sourceMappingURL=WaveformBar.cjs.js.map