npm - @protonradio/proton-ui - Versions diffs - 0.11.5-beta.2 → 0.11.5 - Mend

@protonradio/proton-ui 0.11.5-beta.2 → 0.11.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1057) hide show

package/dist/components/Tombstone/Tombstone.cjs.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../node_modules/react/jsx-runtime.cjs.js");;/* empty css */const u=require("../ThemeProvider.cjs.js"),t=require("../../utils/color2k.cjs.js"),i=require("../../utils/string.cjs.js"),a=({width:o="100%",height:s="1.5rem",borderRadius:r="4px"})=>{const{hasPalette:n,palette:e}=u.useTheme(),m={"--tombstone-custom-background":e.PRIMARY.MEDIUM,"--tombstone-custom-primary":t.transparentize(e.PRIMARY.DARK,.9),"--tombstone-custom-secondary":t.transparentize(e.SECONDARY.DARK,.7)};return c.jsxRuntimeExports.jsx("div",{className:i.csx("proton-Tombstone",n&&"proton-Tombstone--custom"),style:{...m,width:o,height:s,borderRadius:r}})};exports.Tombstone=a;
2	- //# sourceMappingURL=Tombstone.cjs.js.map

package/dist/components/Tombstone/Tombstone.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Tombstone.cjs.js","sources":["../../../src/components/Tombstone/Tombstone.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport \"./Tombstone.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx, transparentize } from \"../../utils\";\r\n\r\nexport interface TombstoneProps {\r\n /**\r\n * The border radius of the tombstone.\r\n * @default \"4px\"\r\n */\r\n borderRadius?: string;\r\n /**\r\n * The height of the tombstone.\r\n * @default \"1.5rem\"\r\n */\r\n height?: string;\r\n /**\r\n * The width of the tombstone.\r\n * @default \"100%\"\r\n */\r\n width?: string;\r\n}\r\n\r\n/**\r\n * A component that displays a loading tombstone. For use as a placeholder while loading content.\r\n *\r\n * API:\r\n * - {@link TombstoneProps}\r\n */\r\nexport const Tombstone = ({\r\n width = \"100%\",\r\n height = \"1.5rem\",\r\n borderRadius = \"4px\",\r\n}: TombstoneProps) => {\r\n const { hasPalette, palette } = useTheme();\r\n\r\n const style = {\r\n \"--tombstone-custom-background\": palette.PRIMARY.MEDIUM,\r\n \"--tombstone-custom-primary\": transparentize(palette.PRIMARY.DARK, 0.9),\r\n \"--tombstone-custom-secondary\": transparentize(palette.SECONDARY.DARK, 0.7),\r\n } as React.CSSProperties;\r\n\r\n return (\r\n <div\r\n className={csx(\r\n \"proton-Tombstone\",\r\n hasPalette && \"proton-Tombstone--custom\"\r\n )}\r\n style={{\r\n ...style,\r\n width,\r\n height,\r\n borderRadius,\r\n }}\r\n />\r\n );\r\n};\r\n"],"names":["Tombstone","width","height","borderRadius","hasPalette","palette","useTheme","style","transparentize","jsx","csx"],"mappings":"2SA8BaA,EAAY,CAAC,CACxB,MAAAC,EAAQ,OACR,OAAAC,EAAS,SACT,aAAAC,EAAe,KACjB,IAAsB,CACpB,KAAM,CAAE,WAAAC,EAAY,QAAAC,CAAQ,EAAIC,EAAS,SAAA,EAEnCC,EAAQ,CACZ,gCAAiCF,EAAQ,QAAQ,OACjD,6BAA8BG,EAAAA,eAAeH,EAAQ,QAAQ,KAAM,EAAG,EACtE,+BAAgCG,EAAAA,eAAeH,EAAQ,UAAU,KAAM,EAAG,CAAA,EAI1E,OAAAI,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWC,EAAA,IACT,mBACAN,GAAc,0BAChB,EACA,MAAO,CACL,GAAGG,EACH,MAAAN,EACA,OAAAC,EACA,aAAAC,CACF,CAAA,CAAA,CAGN"}

package/dist/components/Tombstone/Tombstone.es.js DELETED Viewed

@@ -1,35 +0,0 @@
-import { j as p } from "../../node_modules/react/jsx-runtime.es.js";
-/* empty css                 */
-import { useTheme as a } from "../ThemeProvider.es.js";
-import { transparentize as t } from "../../utils/color2k.es.js";
-import { csx as c } from "../../utils/string.es.js";
-const l = ({
-  width: s = "100%",
-  height: m = "1.5rem",
-  borderRadius: e = "4px"
-}) => {
-  const { hasPalette: r, palette: o } = a(), n = {
-    "--tombstone-custom-background": o.PRIMARY.MEDIUM,
-    "--tombstone-custom-primary": t(o.PRIMARY.DARK, 0.9),
-    "--tombstone-custom-secondary": t(o.SECONDARY.DARK, 0.7)
-  };
-  return /* @__PURE__ */ p.jsx(
-    "div",
-    {
-      className: c(
-        "proton-Tombstone",
-        r && "proton-Tombstone--custom"
-      ),
-      style: {
-        ...n,
-        width: s,
-        height: m,
-        borderRadius: e
-      }
-    }
-  );
-};
-export {
-  l as Tombstone
-};
-//# sourceMappingURL=Tombstone.es.js.map

package/dist/components/Tombstone/Tombstone.es.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Tombstone.es.js","sources":["../../../src/components/Tombstone/Tombstone.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport \"./Tombstone.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx, transparentize } from \"../../utils\";\r\n\r\nexport interface TombstoneProps {\r\n /**\r\n * The border radius of the tombstone.\r\n * @default \"4px\"\r\n */\r\n borderRadius?: string;\r\n /**\r\n * The height of the tombstone.\r\n * @default \"1.5rem\"\r\n */\r\n height?: string;\r\n /**\r\n * The width of the tombstone.\r\n * @default \"100%\"\r\n */\r\n width?: string;\r\n}\r\n\r\n/**\r\n * A component that displays a loading tombstone. For use as a placeholder while loading content.\r\n *\r\n * API:\r\n * - {@link TombstoneProps}\r\n */\r\nexport const Tombstone = ({\r\n width = \"100%\",\r\n height = \"1.5rem\",\r\n borderRadius = \"4px\",\r\n}: TombstoneProps) => {\r\n const { hasPalette, palette } = useTheme();\r\n\r\n const style = {\r\n \"--tombstone-custom-background\": palette.PRIMARY.MEDIUM,\r\n \"--tombstone-custom-primary\": transparentize(palette.PRIMARY.DARK, 0.9),\r\n \"--tombstone-custom-secondary\": transparentize(palette.SECONDARY.DARK, 0.7),\r\n } as React.CSSProperties;\r\n\r\n return (\r\n <div\r\n className={csx(\r\n \"proton-Tombstone\",\r\n hasPalette && \"proton-Tombstone--custom\"\r\n )}\r\n style={{\r\n ...style,\r\n width,\r\n height,\r\n borderRadius,\r\n }}\r\n />\r\n );\r\n};\r\n"],"names":["Tombstone","width","height","borderRadius","hasPalette","palette","useTheme","style","transparentize","jsx","csx"],"mappings":";;;;;AA8BO,MAAMA,IAAY,CAAC;AAAA,EACxB,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AACjB,MAAsB;AACpB,QAAM,EAAE,YAAAC,GAAY,SAAAC,EAAQ,IAAIC,EAAS,GAEnCC,IAAQ;AAAA,IACZ,iCAAiCF,EAAQ,QAAQ;AAAA,IACjD,8BAA8BG,EAAeH,EAAQ,QAAQ,MAAM,GAAG;AAAA,IACtE,gCAAgCG,EAAeH,EAAQ,UAAU,MAAM,GAAG;AAAA,EAAA;AAI1E,SAAAI,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAN,KAAc;AAAA,MAChB;AAAA,MACA,OAAO;AAAA,QACL,GAAGG;AAAA,QACH,OAAAN;AAAA,QACA,QAAAC;AAAA,QACA,cAAAC;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Tooltip/Tooltip.cjs.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),h=require("../../node_modules/react-aria-components/dist/OverlayArrow.cjs.js"),T=require("../../node_modules/react-aria-components/dist/Tooltip.cjs.js"),R=require("react-aria"),a=require("react"),d=require("../ThemeProvider.cjs.js");;/* empty css /;/ empty css */const m=require("../../utils/string.cjs.js");function v({children:t,arrow:n,...u}){const{style:r,className:o}=d.useTheme();return e.jsxRuntimeExports.jsxs(T.Tooltip,{...u,className:m.csx("proton__Tooltip","proton-Dialog",o),style:r,children:[n&&e.jsxRuntimeExports.jsx(h.OverlayArrow,{className:m.csx("proton__TooltipArrow",o),children:e.jsxRuntimeExports.jsx("svg",{width:8,height:8,viewBox:"0 0 8 8",children:e.jsxRuntimeExports.jsx("path",{d:"M0 0 L4 4 L8 0"})})}),t]})}function E({children:t,delay:n=500,closeDelay:u=500,isDisabled:r,defaultOpen:o,onOpenChange:x,disableTriggerClick:p,content:j,...g}){const[l,s]=a.useState(!1),i=a.useRef(!1),f=a.useRef(!1);return j===""?null:e.jsxRuntimeExports.jsxs(T.TooltipTrigger,{delay:n,closeDelay:u,isDisabled:r,isOpen:l,defaultOpen:o,onOpenChange:c=>{c&&!i.current&&(f.current=!0),x&&x(c),i.current\|\|s(c),i.current=!1},children:[p?e.jsxRuntimeExports.jsx("span",{className:"proton__TooltipTrigger","aria-label":"Show tooltip",children:t}):e.jsxRuntimeExports.jsx(R.Focusable,{children:e.jsxRuntimeExports.jsx("div",{role:"button","aria-label":"Show tooltip",className:"proton__TooltipTrigger","data-hovered":l,onMouseEnter:()=>{r\|\|s(!0)},onMouseLeave:()=>{r\|\|s(!1)},onClick:()=>{p\|\|r\|\|f.current\|\|(i.current=!0,s(!l))},children:t})}),e.jsxRuntimeExports.jsx(v,{...g,children:j})]})}exports.TooltipTrigger=E;
2	- //# sourceMappingURL=Tooltip.cjs.js.map

package/dist/components/Tooltip/Tooltip.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Tooltip.cjs.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n Tooltip as AriaTooltip,\r\n TooltipProps as AriaTooltipProps,\r\n TooltipTrigger as AriaTooltipTrigger,\r\n Focusable,\r\n OverlayArrow,\r\n TooltipTriggerComponentProps,\r\n} from \"react-aria-components\";\r\n\r\nimport { useRef, useState } from \"react\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\nimport { csx } from \"../../utils\";\r\nimport \"../Dialog/Dialog.css\";\r\nimport \"./Tooltip.css\";\r\n\r\nexport interface TooltipProps extends Omit<AriaTooltipProps, \"children\"> {\r\n children: React.ReactNode;\r\n arrow?: boolean;\r\n}\r\n\r\nfunction Tooltip({ children, arrow, ...props }: TooltipProps) {\r\n const { style, className } = useTheme();\r\n\r\n return (\r\n <AriaTooltip\r\n {...props}\r\n className={csx(\"proton__Tooltip\", \"proton-Dialog\", className)}\r\n style={style as React.CSSProperties}\r\n >\r\n {arrow && (\r\n <OverlayArrow className={csx(\"proton__TooltipArrow\", className)}>\r\n <svg width={8} height={8} viewBox=\"0 0 8 8\">\r\n <path d=\"M0 0 L4 4 L8 0\" />\r\n </svg>\r\n </OverlayArrow>\r\n )}\r\n\r\n {children}\r\n </AriaTooltip>\r\n );\r\n}\r\n\r\nexport interface TooltipTriggerProps\r\n extends TooltipProps,\r\n TooltipTriggerComponentProps {\r\n children: React.ReactNode;\r\n /**\r\n * The content to display in the tooltip. Zero-length titles string are never displayed.\r\n */\r\n content: string | React.ReactNode;\r\n /**\r\n * Whether to disable the trigger click feature.\r\n */\r\n disableTriggerClick?: boolean;\r\n}\r\n\r\n/**\r\n * Proton's TooltipTrigger component deviates from the Aria TooltipTrigger in that on mobile,\r\n * the trigger also opens the tooltip on click as well as hover & focus. This is to improve\r\n * accessibility and usability on mobile.\r\n *\r\n * If you wish to disable the trigger click feature, you can set the `disableTriggerClick` prop.\r\n * This is useful when using an info only Tooltip that might wrap a clickable element.\r\n *\r\n * API:\r\n * - {@link TooltipTriggerProps}\r\n * - extends {@link TooltipProps}\r\n * - extends {@link TooltipTriggerComponentProps}\r\n *\r\n * @example\r\n * ```tsx\r\n <TooltipTrigger content={...} placement=\"top\" arrow isDisabled={disabled}>\r\n {children}\r\n </TooltipTrigger>\r\n * ```\r\n */\r\nexport function TooltipTrigger({\r\n children,\r\n // trigger props\r\n delay = 500,\r\n closeDelay = 500,\r\n isDisabled,\r\n defaultOpen,\r\n onOpenChange,\r\n disableTriggerClick,\r\n // tooltip props\r\n content,\r\n ...tooltipProps\r\n}: TooltipTriggerProps) {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const triggerClickRef = useRef<boolean>(false);\r\n const hasHovered = useRef<boolean>(false);\r\n\r\n if (content === \"\") return null;\r\n\r\n return (\r\n <AriaTooltipTrigger\r\n delay={delay}\r\n closeDelay={closeDelay}\r\n isDisabled={isDisabled}\r\n isOpen={isOpen}\r\n defaultOpen={defaultOpen}\r\n onOpenChange={(openState) => {\r\n // When opened via hover, we want to disable the trigger click feature as it causes\r\n // the tooltip state to get out of sync with the trigger state.\r\n if (openState && !triggerClickRef.current) hasHovered.current = true;\r\n\r\n if (onOpenChange) onOpenChange(openState);\r\n\r\n // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\r\n // it again here.\r\n if (!triggerClickRef.current) setIsOpen(openState);\r\n triggerClickRef.current = false;\r\n }}\r\n >\r\n {disableTriggerClick ? (\r\n <span className=\"proton__TooltipTrigger\" aria-label=\"Show tooltip\">\r\n {children}\r\n </span>\r\n ) : (\r\n <Focusable>\r\n <div\r\n role=\"button\"\r\n aria-label=\"Show tooltip\"\r\n className=\"proton__TooltipTrigger\"\r\n data-hovered={isOpen}\r\n onMouseEnter={() => {\r\n if (!isDisabled) {\r\n setIsOpen(true);\r\n }\r\n }}\r\n onMouseLeave={() => {\r\n if (!isDisabled) {\r\n setIsOpen(false);\r\n }\r\n }}\r\n onClick={() => {\r\n if (disableTriggerClick || isDisabled) return;\r\n\r\n // Once hovered it's safe to assume the user isn't trying to use via a touch device,\r\n // so we can safely disable the trigger click feature.\r\n if (hasHovered.current) return;\r\n\r\n triggerClickRef.current = true;\r\n setIsOpen(!isOpen);\r\n }}\r\n >\r\n {children}\r\n </div>\r\n </Focusable>\r\n )}\r\n <Tooltip {...tooltipProps}>{content}</Tooltip>\r\n </AriaTooltipTrigger>\r\n );\r\n}\r\n"],"names":["Tooltip","children","arrow","props","style","className","useTheme","jsxs","AriaTooltip","csx","jsx","OverlayArrow","TooltipTrigger","delay","closeDelay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","content","tooltipProps","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","AriaTooltipTrigger","openState","Focusable"],"mappings":"4eAuBA,SAASA,EAAQ,CAAE,SAAAC,EAAU,MAAAC,EAAO,GAAGC,GAAuB,CAC5D,KAAM,CAAE,MAAAC,EAAO,UAAAC,CAAU,EAAIC,EAAS,SAAA,EAGpC,OAAAC,EAAA,kBAAA,KAACC,EAAA,QAAA,CACE,GAAGL,EACJ,UAAWM,EAAA,IAAI,kBAAmB,gBAAiBJ,CAAS,EAC5D,MAAAD,EAEC,SAAA,CACCF,GAAAQ,EAAA,kBAAA,IAACC,gBAAa,UAAWF,EAAA,IAAI,uBAAwBJ,CAAS,EAC5D,iCAAC,MAAI,CAAA,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,SAAAK,EAAAA,kBAAAA,IAAC,QAAK,EAAE,iBAAiB,EAC3B,CACF,CAAA,EAGDT,CAAA,CAAA,CAAA,CAGP,CAoCO,SAASW,EAAe,CAC7B,SAAAX,EAEA,MAAAY,EAAQ,IACR,WAAAC,EAAa,IACb,WAAAC,EACA,YAAAC,EACA,aAAAC,EACA,oBAAAC,EAEA,QAAAC,EACA,GAAGC,CACL,EAAwB,CACtB,KAAM,CAACC,EAAQC,CAAS,EAAIC,WAAS,EAAK,EACpCC,EAAkBC,SAAgB,EAAK,EACvCC,EAAaD,SAAgB,EAAK,EAEpC,OAAAN,IAAY,GAAW,KAGzBZ,EAAA,kBAAA,KAACoB,EAAA,eAAA,CACC,MAAAd,EACA,WAAAC,EACA,WAAAC,EACA,OAAAM,EACA,YAAAL,EACA,aAAeY,GAAc,CAGvBA,GAAa,CAACJ,EAAgB,YAAoB,QAAU,IAE5DP,KAA2BW,CAAS,EAInCJ,EAAgB,SAASF,EAAUM,CAAS,EACjDJ,EAAgB,QAAU,EAC5B,EAEC,SAAA,CACCN,EAAAR,EAAAA,kBAAAA,IAAC,QAAK,UAAU,yBAAyB,aAAW,eACjD,SAAAT,CACH,CAAA,EAEAS,EAAAA,kBAAAA,IAACmB,EAAAA,UACC,CAAA,SAAAnB,EAAA,kBAAA,IAAC,MAAA,CACC,KAAK,SACL,aAAW,eACX,UAAU,yBACV,eAAcW,EACd,aAAc,IAAM,CACbN,GACHO,EAAU,EAAI,CAElB,EACA,aAAc,IAAM,CACbP,GACHO,EAAU,EAAK,CAEnB,EACA,QAAS,IAAM,CACTJ,GAAuBH,GAIvBW,EAAW,UAEfF,EAAgB,QAAU,GAC1BF,EAAU,CAACD,CAAM,EACnB,EAEC,SAAApB,CAAA,CAAA,EAEL,EAEDS,EAAA,kBAAA,IAAAV,EAAA,CAAS,GAAGoB,EAAe,SAAQD,CAAA,CAAA,CAAA,CAAA,CAAA,CAG1C"}

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

@@ -1,78 +0,0 @@
-import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
-import { OverlayArrow as T } from "../../node_modules/react-aria-components/dist/OverlayArrow.es.js";
-import { TooltipTrigger as g, Tooltip as j } from "../../node_modules/react-aria-components/dist/Tooltip.es.js";
-import { Focusable as $ } from "react-aria";
-import { useState as _, useRef as x } from "react";
-import { useTheme as v } from "../ThemeProvider.es.js";
-/* empty css                      */
-/* empty css               */
-import { csx as d } from "../../utils/string.es.js";
-function w({ children: e, arrow: n, ...l }) {
-  const { style: o, className: t } = v();
-  return /* @__PURE__ */ r.jsxs(
-    j,
-    {
-      ...l,
-      className: d("proton__Tooltip", "proton-Dialog", t),
-      style: o,
-      children: [
-        n && /* @__PURE__ */ r.jsx(T, { className: d("proton__TooltipArrow", t), children: /* @__PURE__ */ r.jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ r.jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
-        e
-      ]
-    }
-  );
-}
-function k({
-  children: e,
-  // trigger props
-  delay: n = 500,
-  closeDelay: l = 500,
-  isDisabled: o,
-  defaultOpen: t,
-  onOpenChange: c,
-  disableTriggerClick: f,
-  // tooltip props
-  content: u,
-  ...h
-}) {
-  const [a, s] = _(!1), i = x(!1), m = x(!1);
-  return u === "" ? null : /* @__PURE__ */ r.jsxs(
-    g,
-    {
-      delay: n,
-      closeDelay: l,
-      isDisabled: o,
-      isOpen: a,
-      defaultOpen: t,
-      onOpenChange: (p) => {
-        p && !i.current && (m.current = !0), c && c(p), i.current || s(p), i.current = !1;
-      },
-      children: [
-        f ? /* @__PURE__ */ r.jsx("span", { className: "proton__TooltipTrigger", "aria-label": "Show tooltip", children: e }) : /* @__PURE__ */ r.jsx($, { children: /* @__PURE__ */ r.jsx(
-          "div",
-          {
-            role: "button",
-            "aria-label": "Show tooltip",
-            className: "proton__TooltipTrigger",
-            "data-hovered": a,
-            onMouseEnter: () => {
-              o || s(!0);
-            },
-            onMouseLeave: () => {
-              o || s(!1);
-            },
-            onClick: () => {
-              f || o || m.current || (i.current = !0, s(!a));
-            },
-            children: e
-          }
-        ) }),
-        /* @__PURE__ */ r.jsx(w, { ...h, children: u })
-      ]
-    }
-  );
-}
-export {
-  k as TooltipTrigger
-};
-//# sourceMappingURL=Tooltip.es.js.map

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

@@ -1 +0,0 @@

- {"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n Tooltip as AriaTooltip,\r\n TooltipProps as AriaTooltipProps,\r\n TooltipTrigger as AriaTooltipTrigger,\r\n Focusable,\r\n OverlayArrow,\r\n TooltipTriggerComponentProps,\r\n} from \"react-aria-components\";\r\n\r\nimport { useRef, useState } from \"react\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\nimport { csx } from \"../../utils\";\r\nimport \"../Dialog/Dialog.css\";\r\nimport \"./Tooltip.css\";\r\n\r\nexport interface TooltipProps extends Omit<AriaTooltipProps, \"children\"> {\r\n children: React.ReactNode;\r\n arrow?: boolean;\r\n}\r\n\r\nfunction Tooltip({ children, arrow, ...props }: TooltipProps) {\r\n const { style, className } = useTheme();\r\n\r\n return (\r\n <AriaTooltip\r\n {...props}\r\n className={csx(\"proton__Tooltip\", \"proton-Dialog\", className)}\r\n style={style as React.CSSProperties}\r\n >\r\n {arrow && (\r\n <OverlayArrow className={csx(\"proton__TooltipArrow\", className)}>\r\n <svg width={8} height={8} viewBox=\"0 0 8 8\">\r\n <path d=\"M0 0 L4 4 L8 0\" />\r\n </svg>\r\n </OverlayArrow>\r\n )}\r\n\r\n {children}\r\n </AriaTooltip>\r\n );\r\n}\r\n\r\nexport interface TooltipTriggerProps\r\n extends TooltipProps,\r\n TooltipTriggerComponentProps {\r\n children: React.ReactNode;\r\n /**\r\n * The content to display in the tooltip. Zero-length titles string are never displayed.\r\n */\r\n content: string | React.ReactNode;\r\n /**\r\n * Whether to disable the trigger click feature.\r\n */\r\n disableTriggerClick?: boolean;\r\n}\r\n\r\n/**\r\n * Proton's TooltipTrigger component deviates from the Aria TooltipTrigger in that on mobile,\r\n * the trigger also opens the tooltip on click as well as hover & focus. This is to improve\r\n * accessibility and usability on mobile.\r\n *\r\n * If you wish to disable the trigger click feature, you can set the `disableTriggerClick` prop.\r\n * This is useful when using an info only Tooltip that might wrap a clickable element.\r\n *\r\n * API:\r\n * - {@link TooltipTriggerProps}\r\n * - extends {@link TooltipProps}\r\n * - extends {@link TooltipTriggerComponentProps}\r\n *\r\n * @example\r\n * ```tsx\r\n <TooltipTrigger content={...} placement=\"top\" arrow isDisabled={disabled}>\r\n {children}\r\n </TooltipTrigger>\r\n * ```\r\n */\r\nexport function TooltipTrigger({\r\n children,\r\n // trigger props\r\n delay = 500,\r\n closeDelay = 500,\r\n isDisabled,\r\n defaultOpen,\r\n onOpenChange,\r\n disableTriggerClick,\r\n // tooltip props\r\n content,\r\n ...tooltipProps\r\n}: TooltipTriggerProps) {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const triggerClickRef = useRef<boolean>(false);\r\n const hasHovered = useRef<boolean>(false);\r\n\r\n if (content === \"\") return null;\r\n\r\n return (\r\n <AriaTooltipTrigger\r\n delay={delay}\r\n closeDelay={closeDelay}\r\n isDisabled={isDisabled}\r\n isOpen={isOpen}\r\n defaultOpen={defaultOpen}\r\n onOpenChange={(openState) => {\r\n // When opened via hover, we want to disable the trigger click feature as it causes\r\n // the tooltip state to get out of sync with the trigger state.\r\n if (openState && !triggerClickRef.current) hasHovered.current = true;\r\n\r\n if (onOpenChange) onOpenChange(openState);\r\n\r\n // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\r\n // it again here.\r\n if (!triggerClickRef.current) setIsOpen(openState);\r\n triggerClickRef.current = false;\r\n }}\r\n >\r\n {disableTriggerClick ? (\r\n <span className=\"proton__TooltipTrigger\" aria-label=\"Show tooltip\">\r\n {children}\r\n </span>\r\n ) : (\r\n <Focusable>\r\n <div\r\n role=\"button\"\r\n aria-label=\"Show tooltip\"\r\n className=\"proton__TooltipTrigger\"\r\n data-hovered={isOpen}\r\n onMouseEnter={() => {\r\n if (!isDisabled) {\r\n setIsOpen(true);\r\n }\r\n }}\r\n onMouseLeave={() => {\r\n if (!isDisabled) {\r\n setIsOpen(false);\r\n }\r\n }}\r\n onClick={() => {\r\n if (disableTriggerClick || isDisabled) return;\r\n\r\n // Once hovered it's safe to assume the user isn't trying to use via a touch device,\r\n // so we can safely disable the trigger click feature.\r\n if (hasHovered.current) return;\r\n\r\n triggerClickRef.current = true;\r\n setIsOpen(!isOpen);\r\n }}\r\n >\r\n {children}\r\n </div>\r\n </Focusable>\r\n )}\r\n <Tooltip {...tooltipProps}>{content}</Tooltip>\r\n </AriaTooltipTrigger>\r\n );\r\n}\r\n"],"names":["Tooltip","children","arrow","props","style","className","useTheme","jsxs","AriaTooltip","csx","jsx","OverlayArrow","TooltipTrigger","delay","closeDelay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","content","tooltipProps","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","AriaTooltipTrigger","openState","Focusable"],"mappings":";;;;;;;;;AAuBA,SAASA,EAAQ,EAAE,UAAAC,GAAU,OAAAC,GAAO,GAAGC,KAAuB;AAC5D,QAAM,EAAE,OAAAC,GAAO,WAAAC,EAAU,IAAIC,EAAS;AAGpC,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGL;AAAA,MACJ,WAAWM,EAAI,mBAAmB,iBAAiBJ,CAAS;AAAA,MAC5D,OAAAD;AAAA,MAEC,UAAA;AAAA,QACCF,KAAAQ,gBAAAA,EAAA,IAACC,KAAa,WAAWF,EAAI,wBAAwBJ,CAAS,GAC5D,gCAAC,OAAI,EAAA,OAAO,GAAG,QAAQ,GAAG,SAAQ,WAChC,UAAAK,gBAAAA,EAAAA,IAAC,UAAK,GAAE,kBAAiB,GAC3B,EACF,CAAA;AAAA,QAGDT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAoCO,SAASW,EAAe;AAAA,EAC7B,UAAAX;AAAA;AAAA,EAEA,OAAAY,IAAQ;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC;AAAA;AAAA,EAEA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAkBC,EAAgB,EAAK,GACvCC,IAAaD,EAAgB,EAAK;AAEpC,SAAAN,MAAY,KAAW,OAGzBZ,gBAAAA,EAAA;AAAA,IAACoB;AAAAA,IAAA;AAAA,MACC,OAAAd;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QAAAM;AAAA,MACA,aAAAL;AAAA,MACA,cAAc,CAACY,MAAc;AAG3B,QAAIA,KAAa,CAACJ,EAAgB,cAAoB,UAAU,KAE5DP,OAA2BW,CAAS,GAInCJ,EAAgB,WAASF,EAAUM,CAAS,GACjDJ,EAAgB,UAAU;AAAA,MAC5B;AAAA,MAEC,UAAA;AAAA,QACCN,IAAAR,gBAAAA,EAAAA,IAAC,UAAK,WAAU,0BAAyB,cAAW,gBACjD,UAAAT,EACH,CAAA,IAEAS,gBAAAA,EAAAA,IAACmB,GACC,EAAA,UAAAnB,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,WAAU;AAAA,YACV,gBAAcW;AAAA,YACd,cAAc,MAAM;AAClB,cAAKN,KACHO,EAAU,EAAI;AAAA,YAElB;AAAA,YACA,cAAc,MAAM;AAClB,cAAKP,KACHO,EAAU,EAAK;AAAA,YAEnB;AAAA,YACA,SAAS,MAAM;AACb,cAAIJ,KAAuBH,KAIvBW,EAAW,YAEfF,EAAgB,UAAU,IAC1BF,EAAU,CAACD,CAAM;AAAA,YACnB;AAAA,YAEC,UAAApB;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QAEDS,gBAAAA,EAAA,IAAAV,GAAA,EAAS,GAAGoB,GAAe,UAAQD,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;"}

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

	@@ -1,2 +0,0 @@
1	- "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 P;const{className:_}=H.useTheme(),o=v.useRef(null),[W,B]=v.useState([]),[j,b]=v.useState(null),[w,I]=v.useState(!1),[N,q]=v.useState(!1),y=e\|\|X,M=t;v.useEffect(()=>{if(!o.current)return;const r=i=>{const x=Math.floor(i/(t+M)),R=G(y,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()},[y,t,M]),v.useEffect(()=>{const r=setTimeout(()=>I(!0),50),n=setTimeout(()=>q(!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.widthl;b(i)},z=()=>{b(null)},O=t+M,E=(r,n)=>{var x;const c=r/l100;return(n==="start"?Math.floor(c/100W.length):Math.ceil(c/100W.length))O/((x=o.current)==null?void 0:x.clientWidth)100},V=(P=o.current)==null?void 0:P.clientWidth,S=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.widthl;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(${E(s,"start")}%`:"0%",right:o.current?`calc(${100-E(a,"end")}% - 2px)`:"0%"}}),j!==null&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__hover-line",style:{left:`${j/l100}%`}}),W.map((r,n)=>{const c=n/W.lengthl,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:w,hasAnimated:N,resolution:t,spacing:M,index:n},n)})]}),S&&u.jsxRuntimeExports.jsx("div",{className:"proton-Waveform__bar-unavailable",style:{fontSize:V<325?"0.85rem":"1rem"},children:S}),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=la,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)62Math.PI-Math.PI/2;return Math.sin(m).5+.5})}exports.Waveform=F;
2	- //# sourceMappingURL=Waveform.cjs.js.map

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

@@ -1 +0,0 @@

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

@@ -1,163 +0,0 @@
-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";
-/* 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({
-  data: e,
-  resolution: t = 2,
-  startDuration: o,
-  endDuration: a,
-  currentTime: m = 0,
-  showTimestamps: _ = !1,
-  totalDuration: f,
-  disabled: u,
-  disabledMessage: v,
-  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);
-    const c = new ResizeObserver((i) => {
-      i && i[0] && s(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 () => {
-      clearTimeout(s), 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) => {
-    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, 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(
-      "div",
-      {
-        ref: r,
-        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);
-        },
-        "data-disabled": u,
-        "data-testid": "waveform-container",
-        children: [
-          o !== void 0 && a !== void 0 && /* @__PURE__ */ l.jsx(
-            "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%"
-              }
-            }
-          ),
-          W !== null && /* @__PURE__ */ l.jsx(
-            "div",
-            {
-              className: "proton-Waveform__hover-line",
-              style: {
-                left: `${W / f * 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,
-              {
-                amplitude: s,
-                isDisabled: u || i,
-                isPlayed: d,
-                isHovered: j,
-                isVisible: A,
-                hasAnimated: S,
-                resolution: t,
-                spacing: M,
-                index: n
-              },
-              n
-            );
-          })
-        ]
-      }
-    ),
-    B && /* @__PURE__ */ l.jsx(
-      "div",
-      {
-        className: "proton-Waveform__bar-unavailable",
-        style: {
-          fontSize: L < 325 ? "0.85rem" : "1rem"
-        },
-        children: B
-      }
-    ),
-    _ && /* @__PURE__ */ l.jsx(P, { direction: "right", seconds: f })
-  ] });
-}
-function P({
-  direction: e,
-  seconds: t
-}) {
-  return /* @__PURE__ */ l.jsx(
-    "div",
-    {
-      className: T(
-        "proton-Waveform__timestamp",
-        `proton-Waveform__timestamp--${e}`
-      ),
-      children: J(t)
-    }
-  );
-}
-function J(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;
-  });
-  return Q(m);
-}
-function Q(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) {
-  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
-};
-//# sourceMappingURL=Waveform.es.js.map

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

@@ -1 +0,0 @@

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

	@@ -1,2 +0,0 @@
1	- "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;
2	- //# sourceMappingURL=WaveformBar.cjs.js.map

package/dist/components/Waveform/WaveformBar.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"WaveformBar.cjs.js","sources":["../../../src/components/Waveform/WaveformBar.tsx"],"sourcesContent":["import { csx } from \"../../utils\";\r\n\r\ninterface WaveformBarProps {\r\n amplitude: number;\r\n isDisabled: boolean;\r\n isPlayed: boolean;\r\n isHovered: boolean;\r\n isVisible: boolean;\r\n hasAnimated: boolean;\r\n resolution: number;\r\n spacing: number;\r\n index: number;\r\n}\r\n\r\nexport function WaveformBar({\r\n amplitude,\r\n isDisabled,\r\n isPlayed,\r\n isHovered,\r\n isVisible,\r\n hasAnimated,\r\n resolution,\r\n spacing,\r\n index,\r\n}: WaveformBarProps) {\r\n const barHeight = isVisible ? `${Math.max(amplitude * 100, 4)}%` : \"0%\";\r\n\r\n return (\r\n <div\r\n className={csx(\"proton-Waveform__bar-wrapper\")}\r\n style={{\r\n width: `${resolution}px`,\r\n marginRight: `${spacing}px`,\r\n }}\r\n >\r\n <div\r\n className={csx(\r\n \"proton-Waveform__bar\",\r\n \"proton-Waveform__bar--upper\",\r\n isDisabled && \"proton-Waveform__bar--disabled\",\r\n isPlayed && \"proton-Waveform__bar--played\",\r\n isVisible && \"proton-Waveform__bar--visible\",\r\n hasAnimated && \"proton-Waveform__bar--animated\"\r\n )}\r\n style={\r\n {\r\n \"--target-height\": `calc(${barHeight} / 2)`,\r\n \"--index\": index,\r\n } as React.CSSProperties\r\n }\r\n />\r\n <div\r\n className={csx(\r\n \"proton-Waveform__bar\",\r\n \"proton-Waveform__bar--lower\",\r\n isDisabled && \"proton-Waveform__bar--disabled\",\r\n isPlayed && \"proton-Waveform__bar--played\",\r\n isVisible && \"proton-Waveform__bar--visible\",\r\n hasAnimated && \"proton-Waveform__bar--animated\"\r\n )}\r\n style={\r\n {\r\n \"--target-height\": `calc(${barHeight} / 2)`,\r\n \"--index\": index,\r\n } as React.CSSProperties\r\n }\r\n />\r\n {isHovered && !isDisabled && !isPlayed && (\r\n <div\r\n className=\"proton-Waveform__bar--hover\"\r\n style={\r\n {\r\n \"--hover-height\": barHeight,\r\n } as React.CSSProperties\r\n }\r\n />\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["WaveformBar","amplitude","isDisabled","isPlayed","isHovered","isVisible","hasAnimated","resolution","spacing","index","barHeight","jsxs","csx","jsx"],"mappings":"sLAcO,SAASA,EAAY,CAC1B,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EACA,WAAAC,EACA,QAAAC,EACA,MAAAC,CACF,EAAqB,CACb,MAAAC,EAAYL,EAAY,GAAG,KAAK,IAAIJ,EAAY,IAAK,CAAC,CAAC,IAAM,KAGjE,OAAAU,EAAA,kBAAA,KAAC,MAAA,CACC,UAAWC,MAAI,8BAA8B,EAC7C,MAAO,CACL,MAAO,GAAGL,CAAU,KACpB,YAAa,GAAGC,CAAO,IACzB,EAEA,SAAA,CAAAK,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWD,EAAA,IACT,uBACA,8BACAV,GAAc,iCACdC,GAAY,+BACZE,GAAa,gCACbC,GAAe,gCACjB,EACA,MACE,CACE,kBAAmB,QAAQI,CAAS,QACpC,UAAWD,CACb,CAAA,CAEJ,EACAI,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWD,EAAA,IACT,uBACA,8BACAV,GAAc,iCACdC,GAAY,+BACZE,GAAa,gCACbC,GAAe,gCACjB,EACA,MACE,CACE,kBAAmB,QAAQI,CAAS,QACpC,UAAWD,CACb,CAAA,CAEJ,EACCL,GAAa,CAACF,GAAc,CAACC,GAC5BU,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,MACE,CACE,iBAAkBH,CACpB,CAAA,CAEJ,CAAA,CAAA,CAAA,CAIR"}

package/dist/components/Waveform/WaveformBar.es.js DELETED Viewed

@@ -1,74 +0,0 @@
-import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
-import { csx as _ } from "../../utils/string.es.js";
-function c({
-  amplitude: n,
-  isDisabled: o,
-  isPlayed: a,
-  isHovered: v,
-  isVisible: e,
-  hasAnimated: m,
-  resolution: f,
-  spacing: b,
-  index: p
-}) {
-  const t = e ? `${Math.max(n * 100, 4)}%` : "0%";
-  return /* @__PURE__ */ r.jsxs(
-    "div",
-    {
-      className: _("proton-Waveform__bar-wrapper"),
-      style: {
-        width: `${f}px`,
-        marginRight: `${b}px`
-      },
-      children: [
-        /* @__PURE__ */ r.jsx(
-          "div",
-          {
-            className: _(
-              "proton-Waveform__bar",
-              "proton-Waveform__bar--upper",
-              o && "proton-Waveform__bar--disabled",
-              a && "proton-Waveform__bar--played",
-              e && "proton-Waveform__bar--visible",
-              m && "proton-Waveform__bar--animated"
-            ),
-            style: {
-              "--target-height": `calc(${t} / 2)`,
-              "--index": p
-            }
-          }
-        ),
-        /* @__PURE__ */ r.jsx(
-          "div",
-          {
-            className: _(
-              "proton-Waveform__bar",
-              "proton-Waveform__bar--lower",
-              o && "proton-Waveform__bar--disabled",
-              a && "proton-Waveform__bar--played",
-              e && "proton-Waveform__bar--visible",
-              m && "proton-Waveform__bar--animated"
-            ),
-            style: {
-              "--target-height": `calc(${t} / 2)`,
-              "--index": p
-            }
-          }
-        ),
-        v && !o && !a && /* @__PURE__ */ r.jsx(
-          "div",
-          {
-            className: "proton-Waveform__bar--hover",
-            style: {
-              "--hover-height": t
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  c as WaveformBar
-};
-//# sourceMappingURL=WaveformBar.es.js.map

package/dist/components/Waveform/WaveformBar.es.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"WaveformBar.es.js","sources":["../../../src/components/Waveform/WaveformBar.tsx"],"sourcesContent":["import { csx } from \"../../utils\";\r\n\r\ninterface WaveformBarProps {\r\n amplitude: number;\r\n isDisabled: boolean;\r\n isPlayed: boolean;\r\n isHovered: boolean;\r\n isVisible: boolean;\r\n hasAnimated: boolean;\r\n resolution: number;\r\n spacing: number;\r\n index: number;\r\n}\r\n\r\nexport function WaveformBar({\r\n amplitude,\r\n isDisabled,\r\n isPlayed,\r\n isHovered,\r\n isVisible,\r\n hasAnimated,\r\n resolution,\r\n spacing,\r\n index,\r\n}: WaveformBarProps) {\r\n const barHeight = isVisible ? `${Math.max(amplitude * 100, 4)}%` : \"0%\";\r\n\r\n return (\r\n <div\r\n className={csx(\"proton-Waveform__bar-wrapper\")}\r\n style={{\r\n width: `${resolution}px`,\r\n marginRight: `${spacing}px`,\r\n }}\r\n >\r\n <div\r\n className={csx(\r\n \"proton-Waveform__bar\",\r\n \"proton-Waveform__bar--upper\",\r\n isDisabled && \"proton-Waveform__bar--disabled\",\r\n isPlayed && \"proton-Waveform__bar--played\",\r\n isVisible && \"proton-Waveform__bar--visible\",\r\n hasAnimated && \"proton-Waveform__bar--animated\"\r\n )}\r\n style={\r\n {\r\n \"--target-height\": `calc(${barHeight} / 2)`,\r\n \"--index\": index,\r\n } as React.CSSProperties\r\n }\r\n />\r\n <div\r\n className={csx(\r\n \"proton-Waveform__bar\",\r\n \"proton-Waveform__bar--lower\",\r\n isDisabled && \"proton-Waveform__bar--disabled\",\r\n isPlayed && \"proton-Waveform__bar--played\",\r\n isVisible && \"proton-Waveform__bar--visible\",\r\n hasAnimated && \"proton-Waveform__bar--animated\"\r\n )}\r\n style={\r\n {\r\n \"--target-height\": `calc(${barHeight} / 2)`,\r\n \"--index\": index,\r\n } as React.CSSProperties\r\n }\r\n />\r\n {isHovered && !isDisabled && !isPlayed && (\r\n <div\r\n className=\"proton-Waveform__bar--hover\"\r\n style={\r\n {\r\n \"--hover-height\": barHeight,\r\n } as React.CSSProperties\r\n }\r\n />\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["WaveformBar","amplitude","isDisabled","isPlayed","isHovered","isVisible","hasAnimated","resolution","spacing","index","barHeight","jsxs","csx","jsx"],"mappings":";;AAcO,SAASA,EAAY;AAAA,EAC1B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AACF,GAAqB;AACb,QAAAC,IAAYL,IAAY,GAAG,KAAK,IAAIJ,IAAY,KAAK,CAAC,CAAC,MAAM;AAGjE,SAAAU,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAI,8BAA8B;AAAA,MAC7C,OAAO;AAAA,QACL,OAAO,GAAGL,CAAU;AAAA,QACpB,aAAa,GAAGC,CAAO;AAAA,MACzB;AAAA,MAEA,UAAA;AAAA,QAAAK,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACAV,KAAc;AAAA,cACdC,KAAY;AAAA,cACZE,KAAa;AAAA,cACbC,KAAe;AAAA,YACjB;AAAA,YACA,OACE;AAAA,cACE,mBAAmB,QAAQI,CAAS;AAAA,cACpC,WAAWD;AAAA,YACb;AAAA,UAAA;AAAA,QAEJ;AAAA,QACAI,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACAV,KAAc;AAAA,cACdC,KAAY;AAAA,cACZE,KAAa;AAAA,cACbC,KAAe;AAAA,YACjB;AAAA,YACA,OACE;AAAA,cACE,mBAAmB,QAAQI,CAAS;AAAA,cACpC,WAAWD;AAAA,YACb;AAAA,UAAA;AAAA,QAEJ;AAAA,QACCL,KAAa,CAACF,KAAc,CAACC,KAC5BU,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OACE;AAAA,cACE,kBAAkBH;AAAA,YACpB;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/constants/breakpoint.cjs.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={SMALL:576,MEDIUM:768,LARGE:992,X_LARGE:1200};exports.BREAKPOINTS=e;
2	- //# sourceMappingURL=breakpoint.cjs.js.map

package/dist/constants/breakpoint.cjs.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"breakpoint.cjs.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\r\n SMALL: 576,\r\n MEDIUM: 768,\r\n LARGE: 992,\r\n X_LARGE: 1200,\r\n};\r\n\r\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\r\n"],"names":["BREAKPOINTS"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}

package/dist/constants/breakpoint.es.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"breakpoint.es.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\r\n SMALL: 576,\r\n MEDIUM: 768,\r\n LARGE: 992,\r\n X_LARGE: 1200,\r\n};\r\n\r\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\r\n"],"names":["BREAKPOINTS"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}

package/dist/constants/placement.cjs.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=["bottom","bottom left","bottom right","bottom start","bottom end","top","top left","top right","top start","top end","left","left top","left bottom","start","start top","start bottom","right","right top","right bottom","end","end top","end bottom"];exports.placements=t;
2	- //# sourceMappingURL=placement.cjs.js.map

package/dist/constants/placement.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"placement.cjs.js","sources":["../../src/constants/placement.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\r\n\r\nexport const placements: Placement[] = [\r\n \"bottom\",\r\n \"bottom left\",\r\n \"bottom right\",\r\n \"bottom start\",\r\n \"bottom end\",\r\n \"top\",\r\n \"top left\",\r\n \"top right\",\r\n \"top start\",\r\n \"top end\",\r\n \"left\",\r\n \"left top\",\r\n \"left bottom\",\r\n \"start\",\r\n \"start top\",\r\n \"start bottom\",\r\n \"right\",\r\n \"right top\",\r\n \"right bottom\",\r\n \"end\",\r\n \"end top\",\r\n \"end bottom\",\r\n];\r\n"],"names":["placements"],"mappings":"gFAEO,MAAMA,EAA0B,CACrC,SACA,cACA,eACA,eACA,aACA,MACA,WACA,YACA,YACA,UACA,OACA,WACA,cACA,QACA,YACA,eACA,QACA,YACA,eACA,MACA,UACA,YACF"}

package/dist/constants/placement.es.js DELETED Viewed

@@ -1,28 +0,0 @@
-const t = [
-  "bottom",
-  "bottom left",
-  "bottom right",
-  "bottom start",
-  "bottom end",
-  "top",
-  "top left",
-  "top right",
-  "top start",
-  "top end",
-  "left",
-  "left top",
-  "left bottom",
-  "start",
-  "start top",
-  "start bottom",
-  "right",
-  "right top",
-  "right bottom",
-  "end",
-  "end top",
-  "end bottom"
-];
-export {
-  t as placements
-};
-//# sourceMappingURL=placement.es.js.map

package/dist/constants/placement.es.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"placement.es.js","sources":["../../src/constants/placement.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\r\n\r\nexport const placements: Placement[] = [\r\n \"bottom\",\r\n \"bottom left\",\r\n \"bottom right\",\r\n \"bottom start\",\r\n \"bottom end\",\r\n \"top\",\r\n \"top left\",\r\n \"top right\",\r\n \"top start\",\r\n \"top end\",\r\n \"left\",\r\n \"left top\",\r\n \"left bottom\",\r\n \"start\",\r\n \"start top\",\r\n \"start bottom\",\r\n \"right\",\r\n \"right top\",\r\n \"right bottom\",\r\n \"end\",\r\n \"end top\",\r\n \"end bottom\",\r\n];\r\n"],"names":["placements"],"mappings":"AAEO,MAAMA,IAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/design/colors.cjs.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R={BLACK:"#121212",WHITE:"#FFFFFF"},I={PRIMARY:"#E26014",PRIMARY_LIGHT:"#FBE5D7",PRIMARY_SUPER_LIGHT:"#FFF7F0",SECONDARY:"#2a9edb",SECONDARY_LIGHT:"#b5d9ff",SECONDARY_SUPER_LIGHT:"#d9e7fa"},A={SUPER_DARK:"#2d1304",DARK:"#5a2608",MEDIUM:"#883a0c",MEDIUM_LIGHT:"#b54d10",LIGHT:"#e88043",LIGHTEST:"#eea072",SUPER_LIGHT:"#f9dfd0",WHITE:"#fcfbfa"},E={SUPER_DARK:"#991b1b",DARK:"#a80724",MEDIUM:"#e23f5c",LIGHT:"#f16880",SUPER_LIGHT:"#ffe1e1"},S={DARK:"#8b5600",MEDIUM:"#b37208",LIGHT:"#ffac23",SUPER_LIGHT:"#fff0c9"},D={DARK:"#247800",MEDIUM:"#339a07",LIGHT:"#66cf39",SUPER_LIGHT:"#deffd1"};exports.BACKGROUNDS=R;exports.BRAND=I;exports.BRAND_PRIMARY_SCALE=A;exports.DANGER=E;exports.SUCCESS=D;exports.WARNING=S;
2	- //# sourceMappingURL=colors.cjs.js.map

package/dist/design/colors.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"colors.cjs.js","sources":["../../src/design/colors.ts"],"sourcesContent":["import { ProtonColorScale, ProtonPalette } from \"./types\";\r\n\r\n/* Base Colors */\r\n\r\nexport const BACKGROUNDS = {\r\n BLACK: \"#121212\",\r\n WHITE: \"#FFFFFF\",\r\n};\r\n\r\nexport const BRAND: ProtonPalette[\"BRAND\"] = {\r\n PRIMARY: \"#E26014\",\r\n PRIMARY_LIGHT: \"#FBE5D7\",\r\n PRIMARY_SUPER_LIGHT: \"#FFF7F0\",\r\n SECONDARY: \"#2a9edb\",\r\n SECONDARY_LIGHT: \"#b5d9ff\",\r\n SECONDARY_SUPER_LIGHT: \"#d9e7fa\",\r\n};\r\n\r\nexport const BRAND_PRIMARY_SCALE: ProtonColorScale = {\r\n SUPER_DARK: \"#2d1304\",\r\n DARK: \"#5a2608\",\r\n MEDIUM: \"#883a0c\",\r\n MEDIUM_LIGHT: \"#b54d10\",\r\n LIGHT: \"#e88043\",\r\n LIGHTEST: \"#eea072\",\r\n SUPER_LIGHT: \"#f9dfd0\",\r\n WHITE: \"#fcfbfa\",\r\n};\r\n\r\n/* Semantic Colors */\r\n\r\nexport const DANGER: Partial<ProtonColorScale> = {\r\n SUPER_DARK: \"#991b1b\",\r\n DARK: \"#a80724\",\r\n MEDIUM: \"#e23f5c\",\r\n LIGHT: \"#f16880\",\r\n SUPER_LIGHT: \"#ffe1e1\",\r\n};\r\n\r\nexport const WARNING: Partial<ProtonColorScale> = {\r\n DARK: \"#8b5600\",\r\n MEDIUM: \"#b37208\",\r\n LIGHT: \"#ffac23\",\r\n SUPER_LIGHT: \"#fff0c9\",\r\n};\r\n\r\nexport const SUCCESS: Partial<ProtonColorScale> = {\r\n DARK: \"#247800\",\r\n MEDIUM: \"#339a07\",\r\n LIGHT: \"#66cf39\",\r\n SUPER_LIGHT: \"#deffd1\",\r\n};\r\n"],"names":["BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE","DANGER","WARNING","SUCCESS"],"mappings":"gFAIO,MAAMA,EAAc,CACzB,MAAO,UACP,MAAO,SACT,EAEaC,EAAgC,CAC3C,QAAS,UACT,cAAe,UACf,oBAAqB,UACrB,UAAW,UACX,gBAAiB,UACjB,sBAAuB,SACzB,EAEaC,EAAwC,CACnD,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAIaC,EAAoC,CAC/C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAqC,CAChD,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAqC,CAChD,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf"}