@audius/harmony 0.5.0 → 0.5.2

package/dist/components/popup-menu/PopupMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupMenu.js","sources":["../../../src/components/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef, useState, MouseEvent } from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport cn from 'classnames'\n\nimport { Box } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Popup } from '../popup'\n\nimport { PopupMenuItem, PopupMenuProps } from './types'\n\n/**\n * A menu that shows on top of the UI. Ideal for overflow menus, dropdowns, etc\n */\nexport const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(\n  function PopupMenu(props, ref) {\n    const {\n      items,\n      onClose,\n      renderMenu,\n      renderTrigger,\n      dismissOnMouseLeave,\n      hideCloseButton,\n      title,\n      className,\n      zIndex,\n      containerRef,\n      anchorOrigin,\n      transformOrigin,\n      id,\n      fixed,\n      overrideIconColor\n    } = props\n\n    const { spacing, typography, color } = useTheme()\n    const clickInsideRef = useRef<any>(null)\n    const anchorRef = useRef<HTMLElement>(null)\n\n    const [isPopupVisible, setIsPopupVisible] = useState<boolean>(false)\n\n    const triggerPopup = useCallback(\n      (onMouseEnter?: boolean) => {\n        if (onMouseEnter && isPopupVisible) return\n        setIsPopupVisible(!isPopupVisible)\n      },\n      [isPopupVisible, setIsPopupVisible]\n    )\n\n    const handlePopupClose = useCallback(() => {\n      setIsPopupVisible(false)\n      if (onClose) onClose()\n    }, [setIsPopupVisible, onClose])\n\n    const handleMenuItemClick = useCallback(\n      (item: PopupMenuItem) => (e: MouseEvent<HTMLElement>) => {\n        e.stopPropagation()\n        item.onClick(e)\n        handlePopupClose()\n      },\n      [handlePopupClose]\n    )\n\n    const triggerId = id ? `${id}-trigger` : undefined\n\n    const triggerProps = {\n      'aria-controls': isPopupVisible ? id : undefined,\n      'aria-haspopup': true,\n      'aria-expanded': isPopupVisible ? ('true' as const) : undefined,\n      id: triggerId\n    }\n\n    const popupCss = {\n      margin: spacing.s,\n      padding: spacing.s,\n      border: `1px solid ${color.border.strong}`\n    }\n\n    const menuItemCss = {\n      fontSize: typography.size.m,\n      fontWeight: typography.weight.demiBold,\n      color: color.text.default,\n      cursor: 'pointer',\n      '&:hover': {\n        color: color.text.white,\n        background: color.secondary.s300,\n        path: {\n          fill: color.icon.white\n        }\n      },\n      '&.destructive': {\n        color: color.status.error,\n        '&:hover': {\n          background: color.status.error,\n          color: color.icon.white\n        }\n      }\n    }\n\n    const iconCss = {\n      path: {\n        fill: overrideIconColor ? undefined : color.text.default\n      }\n    }\n\n    return (\n      <Box ref={clickInsideRef}>\n        {renderTrigger(anchorRef, triggerPopup, triggerProps)}\n        <Popup\n          anchorRef={anchorRef}\n          checkIfClickInside={(target: EventTarget) => {\n            if (target instanceof Element && clickInsideRef) {\n              return clickInsideRef.current.contains(target)\n            }\n            return false\n          }}\n          isVisible={isPopupVisible}\n          showHeader={Boolean(title)}\n          hideCloseButton={hideCloseButton}\n          onClose={handlePopupClose}\n          ref={ref}\n          title={title ?? ''}\n          zIndex={zIndex}\n          containerRef={containerRef}\n          transformOrigin={transformOrigin}\n          anchorOrigin={anchorOrigin}\n          className={className}\n          css={popupCss}\n          dismissOnMouseLeave={dismissOnMouseLeave}\n          fixed={fixed}\n        >\n          {renderMenu ? (\n            renderMenu(items)\n          ) : (\n            <Box\n              as='ul'\n              role='menu'\n              aria-labelledby={triggerId}\n              tabIndex={-1}\n              css={{ all: 'unset' }}\n            >\n              {items.map((item, i) => (\n                <Flex\n                  as='li'\n                  key={typeof item.text === 'string' ? item.text : i}\n                  role='menuitem'\n                  className={cn(item.className, {\n                    destructive: item.destructive\n                  })}\n                  onClick={handleMenuItemClick(item)}\n                  tabIndex={i === 0 ? 0 : -1}\n                  css={menuItemCss}\n                  alignItems='center'\n                  gap='s'\n                  p='s'\n                  ph='m'\n                  borderRadius='s'\n                >\n                  {item.icon ? (\n                    <Flex\n                      css={iconCss}\n                      className={item.iconClassName}\n                      alignItems='center'\n                      justifyContent='center'\n                      w='unit5'\n                      h='unit5'\n                    >\n                      {item.icon}\n                    </Flex>\n                  ) : null}\n                  {item.text}\n                </Flex>\n              ))}\n            </Box>\n          )}\n        </Popup>\n      </Box>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/popup-menu/index.d.ts

@@ -0,0 +1,3 @@
+export { PopupMenu } from './PopupMenu';
+export { type PopupMenuItem, type PopupMenuProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/popup-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popup-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/popup-menu/types.d.ts

@@ -0,0 +1,67 @@
+import { ComponentProps, MouseEvent } from 'react';
+import { PopupProps } from '../popup';
+type ApplicablePopupProps = Pick<PopupProps, 'title' | 'className' | 'hideCloseButton' | 'zIndex' | 'containerRef' | 'transformOrigin' | 'anchorOrigin' | 'fixed'>;
+export type PopupMenuProps = {
+    /**
+     * The items to display in the menu
+     */
+    items: PopupMenuItem[];
+    /**
+     * A callback triggered when the menu is closed
+     */
+    onClose?: () => void;
+    /**
+     * An optional function that controls how the menu is rendered
+     */
+    renderMenu?: (menuItems: PopupMenuItem[]) => JSX.Element;
+    /**
+     * Whether to dismiss the popup on mouse leave
+     */
+    dismissOnMouseLeave?: boolean;
+    /**
+     * An optional override for the icon color
+     */
+    overrideIconColor?: boolean;
+    /**
+     * A render function that will be provided:
+     * - An anchorRef for positioning the menu
+     * - A triggerPopup function that will show/hide the popup
+     */
+    renderTrigger: (anchorRef: React.MutableRefObject<any>, triggerPopup: (onMouseEnter?: boolean) => void, triggerProps: Pick<ComponentProps<'button'>, 'aria-controls' | 'aria-haspopup' | 'aria-expanded' | 'id'>) => React.ReactNode;
+    /**
+     * Providing an id is necessary for proper a11y
+     */
+    id?: string;
+} & ApplicablePopupProps;
+export type PopupMenuItem = {
+    /**
+     * An optional className to apply to the item
+     */
+    className?: string;
+    /**
+     * An optional icon to display with the menu item
+     */
+    icon?: React.ReactNode;
+    /**
+     * An optional className to apply to the icon
+     */
+    iconClassName?: string;
+    /**
+     * A function triggered when the menu item is clicked
+     */
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The text of the menu item
+     */
+    text: string | React.ReactNode;
+    /**
+     * The optional description of the menu item
+     */
+    subtext?: string | React.ReactNode;
+    /**
+     * Optional bool to tell if the option is dangerous
+     */
+    destructive?: boolean;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/popup-menu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/popup-menu/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,KAAK,oBAAoB,GAAG,IAAI,CAC9B,UAAU,EACR,OAAO,GACP,WAAW,GACX,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,OAAO,CACV,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,EAAE,aAAa,EAAE,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,GAAG,CAAC,OAAO,CAAA;IAExD;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;OAIG;IACH,aAAa,EAAE,CACb,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,EACtC,YAAY,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,EAC9C,YAAY,EAAE,IAAI,CAChB,cAAc,CAAC,QAAQ,CAAC,EACxB,eAAe,GAAG,eAAe,GAAG,eAAe,GAAG,IAAI,CAC3D,KACE,KAAK,CAAC,SAAS,CAAA;IACpB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,GAAG,oBAAoB,CAAA;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAEjD;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAElC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA"}

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,3 @@
+import { ProgressBarProps } from './types';
+export declare const ProgressBar: (props: ProgressBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/progress-bar/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAiB,MAAM,SAAS,CAAA;AAYzD,eAAO,MAAM,WAAW,UAAW,gBAAgB,qDA+DlD,CAAA"}

package/dist/components/progress-bar/ProgressBar.js

@@ -0,0 +1,38 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import cn from 'classnames';
+import styles from './ProgressBar.module.css.js';
+
+var getBigInt = function (num) {
+    if (typeof num === 'bigint')
+        return num;
+    return BigInt(Math.round(num));
+};
+function clampBigInt(value, min, max) {
+    return value < min ? min : value > max ? max : value;
+}
+// @beta - This component was directly ported from stems and subject to change
+var ProgressBar = function (props) {
+    var _a, _b, _c;
+    var className = props.className, sliderClassName = props.sliderClassName, sliderBarClassName = props.sliderBarClassName, _d = props.min, min = _d === void 0 ? 0 : _d, _e = props.max, max = _e === void 0 ? 100 : _e, value = props.value, _f = props.showLabels, showLabels = _f === void 0 ? false : _f, MinWrapper = props.minWrapper, MaxWrapper = props.maxWrapper, other = __rest(props, ["className", "sliderClassName", "sliderBarClassName", "min", "max", "value", "showLabels", "minWrapper", "maxWrapper"]);
+    var _g = useState(0), sliderWidth = _g[0], setSliderWidth = _g[1];
+    var percentage = useMemo(function () {
+        var minBigInt = getBigInt(min);
+        var maxBigInt = getBigInt(max);
+        var valBigInt = getBigInt(value);
+        var clampedValue = clampBigInt(valBigInt - minBigInt, BigInt(0), maxBigInt);
+        return Number((clampedValue * BigInt(100)) / (maxBigInt - minBigInt));
+    }, [max, min, value]);
+    useEffect(function () {
+        setSliderWidth(percentage);
+    }, [percentage]);
+    return (jsxs("div", __assign({ className: cn(styles.container, (_a = {}, _a[className] = !!className, _a)), role: 'progressbar', "aria-valuenow": percentage }, other, { children: [jsx("div", __assign({ className: cn(styles.slider, (_b = {},
+                    _b[sliderClassName] = !!sliderClassName,
+                    _b)) }, { children: jsx("div", { className: cn(styles.sliderBar, (_c = {},
+                        _c[sliderBarClassName] = !!sliderBarClassName,
+                        _c)), style: { width: "".concat(sliderWidth, "%") } }) })), showLabels && (jsxs("div", __assign({ className: styles.labels }, { children: [jsx("div", __assign({ className: styles.minLabel }, { children: MinWrapper ? jsx(MinWrapper, { value: min }) : String(min) })), jsx("div", __assign({ className: styles.maxLabel }, { children: MaxWrapper ? jsx(MaxWrapper, { value: max }) : String(max) }))] })))] })));
+};
+
+export { ProgressBar };
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/progress-bar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './ProgressBar.module.css'\nimport { ProgressBarProps, ProgressValue } from './types'\n\nconst getBigInt = (num: ProgressValue): bigint => {\n  if (typeof num === 'bigint') return num\n  return BigInt(Math.round(num))\n}\n\nfunction clampBigInt(value: bigint, min: bigint, max: bigint): bigint {\n  return value < min ? min : value > max ? max : value\n}\n\n// @beta - This component was directly ported from stems and subject to change\nexport const ProgressBar = (props: ProgressBarProps) => {\n  const {\n    className,\n    sliderClassName,\n    sliderBarClassName,\n    min = 0,\n    max = 100,\n    value,\n    showLabels = false,\n    minWrapper: MinWrapper,\n    maxWrapper: MaxWrapper,\n    ...other\n  } = props\n  const [sliderWidth, setSliderWidth] = useState(0)\n\n  const percentage = useMemo(() => {\n    const minBigInt = getBigInt(min)\n    const maxBigInt = getBigInt(max)\n    const valBigInt = getBigInt(value)\n\n    const clampedValue = clampBigInt(\n      valBigInt - minBigInt,\n      BigInt(0),\n      maxBigInt\n    )\n    return Number((clampedValue * BigInt(100)) / (maxBigInt - minBigInt))\n  }, [max, min, value])\n\n  useEffect(() => {\n    setSliderWidth(percentage)\n  }, [percentage])\n\n  return (\n    <div\n      className={cn(styles.container, { [className!]: !!className })}\n      role='progressbar'\n      aria-valuenow={percentage}\n      {...other}\n    >\n      <div\n        className={cn(styles.slider, {\n          [sliderClassName!]: !!sliderClassName\n        })}\n      >\n        <div\n          className={cn(styles.sliderBar, {\n            [sliderBarClassName!]: !!sliderBarClassName\n          })}\n          style={{ width: `${sliderWidth}%` }}\n        ></div>\n      </div>\n      {showLabels && (\n        <div className={styles.labels}>\n          <div className={styles.minLabel}>\n            {MinWrapper ? <MinWrapper value={min} /> : String(min)}\n          </div>\n          <div className={styles.maxLabel}>\n            {MaxWrapper ? <MaxWrapper value={max} /> : String(max)}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAOA,IAAM,SAAS,GAAG,UAAC,GAAkB,EAAA;IACnC,IAAI,OAAO,GAAG,KAAK,QAAQ;AAAE,QAAA,OAAO,GAAG,CAAA;IACvC,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;AAChC,CAAC,CAAA;AAED,SAAS,WAAW,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAA;IAC1D,OAAO,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,CAAA;AACtD,CAAC;AAED;AACO,IAAM,WAAW,GAAG,UAAC,KAAuB,EAAA;;AAE/C,IAAA,IAAA,SAAS,GAUP,KAAK,CAAA,SAVE,EACT,eAAe,GASb,KAAK,CATQ,eAAA,EACf,kBAAkB,GAQhB,KAAK,CAAA,kBARW,EAClB,EAAA,GAOE,KAAK,CAAA,GAPA,EAAP,GAAG,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,CAAC,GAAA,EAAA,EACP,EAME,GAAA,KAAK,CANE,GAAA,EAAT,GAAG,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,GAAG,GAAA,EAAA,EACT,KAAK,GAKH,KAAK,CAAA,KALF,EACL,EAAA,GAIE,KAAK,CAAA,UAJW,EAAlB,UAAU,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,KAAA,EACN,UAAU,GAGpB,KAAK,CAHe,UAAA,EACV,UAAU,GAEpB,KAAK,CAAA,UAFe,EACnB,KAAK,GACN,MAAA,CAAA,KAAK,EAXH,CAAA,WAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,KAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAWL,CADS,CACD;IACH,IAAA,EAAA,GAAgC,QAAQ,CAAC,CAAC,CAAC,EAA1C,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,cAAc,GAAA,EAAA,CAAA,CAAA,CAAe,CAAA;IAEjD,IAAM,UAAU,GAAG,OAAO,CAAC,YAAA;AACzB,QAAA,IAAM,SAAS,GAAG,SAAS,CAAC,GAAG,CAAC,CAAA;AAChC,QAAA,IAAM,SAAS,GAAG,SAAS,CAAC,GAAG,CAAC,CAAA;AAChC,QAAA,IAAM,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;AAElC,QAAA,IAAM,YAAY,GAAG,WAAW,CAC9B,SAAS,GAAG,SAAS,EACrB,MAAM,CAAC,CAAC,CAAC,EACT,SAAS,CACV,CAAA;AACD,QAAA,OAAO,MAAM,CAAC,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,SAAS,GAAG,SAAS,CAAC,CAAC,CAAA;KACtE,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,CAAA;AAErB,IAAA,SAAS,CAAC,YAAA;QACR,cAAc,CAAC,UAAU,CAAC,CAAA;AAC5B,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;AAEhB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EACE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,GAAI,EAAA,GAAA,EAAA,EAAA,EAAA,CAAC,SAAU,CAAA,GAAG,CAAC,CAAC,SAAS,EAAG,EAAA,EAAA,EAC9D,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,UAAU,EACrB,EAAA,KAAK,EAET,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EACE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;AACzB,oBAAA,EAAA,CAAC,eAAgB,CAAA,GAAG,CAAC,CAAC,eAAe;AACrC,oBAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,EAEFA,aACE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC5B,wBAAA,EAAA,CAAC,kBAAmB,CAAA,GAAG,CAAC,CAAC,kBAAkB;AAC3C,wBAAA,EAAA,EAAA,EACF,KAAK,EAAE,EAAE,KAAK,EAAE,UAAG,WAAW,EAAA,GAAA,CAAG,EAAE,EAAA,CAC9B,IACH,EACL,UAAU,KACTD,uBAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAC3B,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC5B,EAAA,EAAA,QAAA,EAAA,UAAU,GAAGA,IAAC,UAAU,EAAA,EAAC,KAAK,EAAE,GAAG,EAAI,CAAA,GAAG,MAAM,CAAC,GAAG,CAAC,EAClD,CAAA,CAAA,EACNA,GAAK,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC5B,EAAA,EAAA,QAAA,EAAA,UAAU,GAAGA,GAAC,CAAA,UAAU,IAAC,KAAK,EAAE,GAAG,EAAA,CAAI,GAAG,MAAM,CAAC,GAAG,CAAC,EAAA,CAAA,CAClD,KACF,CACP,CAAA,EAAA,CAAA,CACG,EACP;AACH;;;;"}

package/dist/components/progress-bar/ProgressBar.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"container":"ProgressBar-module_container__fENfH","slider":"ProgressBar-module_slider__z--Qf","sliderBar":"ProgressBar-module_sliderBar__kNzXs","labels":"ProgressBar-module_labels__zstfU","minLabel":"ProgressBar-module_minLabel__YYQ8n","maxLabel":"ProgressBar-module_maxLabel__mMtj2"};
+
+export { styles as default };
+//# sourceMappingURL=ProgressBar.module.css.js.map

package/dist/components/progress-bar/ProgressBar.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/progress-bar/index.d.ts

@@ -0,0 +1,3 @@
+export { ProgressBar } from './ProgressBar';
+export { type ProgressBarProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/progress-bar/types.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export type ProgressValue = number | bigint;
+export type ProgressBarProps = {
+    className?: string;
+    sliderClassName?: string;
+    sliderBarClassName?: string;
+    min?: ProgressValue;
+    max?: ProgressValue;
+    value: ProgressValue;
+    showLabels?: boolean;
+    minWrapper?: React.ComponentType<{
+        value: ProgressValue;
+    }>;
+    maxWrapper?: React.ComponentType<{
+        value: ProgressValue;
+    }>;
+    'aria-labelledby'?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/progress-bar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAA;AAE3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,GAAG,CAAC,EAAE,aAAa,CAAA;IACnB,GAAG,CAAC,EAAE,aAAa,CAAA;IACnB,KAAK,EAAE,aAAa,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,aAAa,CAAA;KAAE,CAAC,CAAA;IAC1D,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,aAAa,CAAA;KAAE,CAAC,CAAA;IAC1D,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA"}

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type RadioProps = ComponentPropsWithoutRef<'input'> & {
+    inputClassName?: string;
+    error?: boolean;
+};
+/**
+ * Radio buttons allow a user to select a single option from a list of predefined options.
+ * TODO: Add label + icon support
+ */
+export declare const Radio: (props: RadioProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAMhD,MAAM,MAAM,UAAU,GAAG,wBAAwB,CAAC,OAAO,CAAC,GAAG;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,UAAW,UAAU,qDAoEtC,CAAA"}

package/dist/components/radio/Radio.js

@@ -0,0 +1,43 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useTheme } from '@emotion/react';
+import { useRadioGroup } from '../radio-group/useRadioGroup.js';
+
+/**
+ * Radio buttons allow a user to select a single option from a list of predefined options.
+ * TODO: Add label + icon support
+ */
+var Radio = function (props) {
+    var className = props.className, inputClassName = props.inputClassName, onChangeProp = props.onChange, nameProp = props.name, checkedProp = props.checked, disabled = props.disabled, error = props.error, other = __rest(props, ["className", "inputClassName", "onChange", "name", "checked", "disabled", "error"]);
+    var _a = useTheme(), spacing = _a.spacing, color = _a.color;
+    var _b = useRadioGroup({
+        name: nameProp,
+        checked: checkedProp,
+        value: other.value,
+        onChange: onChangeProp
+    }), name = _b.name, checked = _b.checked, onChange = _b.onChange;
+    var rootCss = {
+        position: 'relative',
+        height: spacing.unit6,
+        width: spacing.unit6,
+        '::before': __assign(__assign(__assign({ position: 'absolute', width: spacing.unit6, height: spacing.unit6, borderRadius: '50%', content: "' '", background: color.neutral.n200, boxShadow: 'inset 2px 2px 2px rgba(0, 0, 0, 0.1)', boxSizing: 'border-box' }, (checked && {
+            background: color.special.white,
+            border: "6px solid ".concat(color.secondary.secondary)
+        })), (disabled && {
+            background: color.neutral.n150
+        })), (error && {
+            border: "2px solid ".concat(color.status.danger)
+        }))
+    };
+    var inputCss = {
+        opacity: 0,
+        margin: 0,
+        width: '100%',
+        height: '100%',
+        cursor: disabled ? 'default' : 'pointer'
+    };
+    return (jsx("div", __assign({ css: rootCss, className: className }, { children: jsx("input", __assign({ css: inputCss, className: inputClassName, name: name, checked: checked, type: 'radio', onChange: onChange, disabled: disabled }, other)) })));
+};
+
+export { Radio };
+//# sourceMappingURL=Radio.js.map

package/dist/components/radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { useRadioGroup } from '../radio-group/useRadioGroup'\n\nexport type RadioProps = ComponentPropsWithoutRef<'input'> & {\n  inputClassName?: string\n  error?: boolean\n}\n\n/**\n * Radio buttons allow a user to select a single option from a list of predefined options.\n * TODO: Add label + icon support\n */\nexport const Radio = (props: RadioProps) => {\n  const {\n    className,\n    inputClassName,\n    onChange: onChangeProp,\n    name: nameProp,\n    checked: checkedProp,\n    disabled,\n    error,\n    ...other\n  } = props\n  const { spacing, color } = useTheme()\n\n  const { name, checked, onChange } = useRadioGroup({\n    name: nameProp,\n    checked: checkedProp,\n    value: other.value,\n    onChange: onChangeProp\n  })\n\n  const rootCss: CSSObject = {\n    position: 'relative',\n    height: spacing.unit6,\n    width: spacing.unit6,\n    '::before': {\n      position: 'absolute',\n      width: spacing.unit6,\n      height: spacing.unit6,\n      borderRadius: '50%',\n      content: \"' '\",\n      background: color.neutral.n200,\n      boxShadow: 'inset 2px 2px 2px rgba(0, 0, 0, 0.1)',\n      boxSizing: 'border-box',\n      ...(checked && {\n        background: color.special.white,\n        border: `6px solid ${color.secondary.secondary}`\n      }),\n      ...(disabled && {\n        background: color.neutral.n150\n      }),\n      ...(error && {\n        border: `2px solid ${color.status.danger}`\n      })\n    }\n  }\n\n  const inputCss = {\n    opacity: 0,\n    margin: 0,\n    width: '100%',\n    height: '100%',\n    cursor: disabled ? 'default' : 'pointer'\n  }\n\n  return (\n    <div css={rootCss} className={className}>\n      <input\n        css={inputCss}\n        className={inputClassName}\n        name={name}\n        checked={checked}\n        type='radio'\n        onChange={onChange}\n        disabled={disabled}\n        {...other}\n      />\n    </div>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;AAWA;;;AAGG;AACI,IAAM,KAAK,GAAG,UAAC,KAAiB,EAAA;AAEnC,IAAA,IAAA,SAAS,GAQP,KAAK,UARE,EACT,cAAc,GAOZ,KAAK,CAAA,cAPO,EACJ,YAAY,GAMpB,KAAK,CAAA,QANe,EAChB,QAAQ,GAKZ,KAAK,CALO,IAAA,EACL,WAAW,GAIlB,KAAK,CAJa,OAAA,EACpB,QAAQ,GAGN,KAAK,SAHC,EACR,KAAK,GAEH,KAAK,CAAA,KAFF,EACF,KAAK,GAAA,MAAA,CACN,KAAK,EATH,CAAA,WAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,EAAA,OAAA,CASL,CADS,CACD;IACH,IAAA,EAAA,GAAqB,QAAQ,EAAE,EAA7B,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAe,CAAA;IAE/B,IAAA,EAAA,GAA8B,aAAa,CAAC;AAChD,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,WAAW;QACpB,KAAK,EAAE,KAAK,CAAC,KAAK;AAClB,QAAA,QAAQ,EAAE,YAAY;KACvB,CAAC,EALM,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAK7B,CAAA;AAEF,IAAA,IAAM,OAAO,GAAc;AACzB,QAAA,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;QACrB,KAAK,EAAE,OAAO,CAAC,KAAK;AACpB,QAAA,UAAU,+BACR,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,MAAM,EAAE,OAAO,CAAC,KAAK,EACrB,YAAY,EAAE,KAAK,EACnB,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAC9B,SAAS,EAAE,sCAAsC,EACjD,SAAS,EAAE,YAAY,EACpB,GAAC,OAAO,IAAI;AACb,YAAA,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;AAC/B,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,SAAS,CAAC,SAAS,CAAE;SACjD,EAAC,GACE,QAAQ,IAAI;AACd,YAAA,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;SAC/B,EAAC,GACE,KAAK,IAAI;AACX,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAE;AAC3C,SAAA,EACF;KACF,CAAA;AAED,IAAA,IAAM,QAAQ,GAAG;AACf,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS;KACzC,CAAA;AAED,IAAA,QACEA,GAAK,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,gBACrCA,GACE,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EACd,KAAK,CACT,CAAA,EAAA,CAAA,CACE,EACP;AACH;;;;"}

package/dist/components/radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/dist/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent, ReactNode } from 'react';
+import { FlexProps } from '../layout';
+export type RadioGroupProps = {
+    name: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    children?: ReactNode;
+    defaultValue?: string;
+    value?: string | null;
+} & FlexProps;
+export declare const RadioGroup: (props: RadioGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/radio-group/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAA;AAGnE,OAAO,EAAQ,SAAS,EAAE,MAAM,WAAW,CAAA;AAI3C,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,GAAG,SAAS,CAAA;AAEb,eAAO,MAAM,UAAU,UAAW,eAAe,qDAwChD,CAAA"}

package/dist/components/radio-group/RadioGroup.js

@@ -0,0 +1,35 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import { useControlled } from '../../hooks/useControlled.js';
+import '../layout/Box/Box.js';
+import '@emotion/react';
+import { Flex } from '../layout/Flex/Flex.js';
+import '../layout/Paper/Paper.js';
+import { RadioGroupContext } from './RadioGroupContext.js';
+
+var RadioGroup = function (props) {
+    var name = props.name, onChange = props.onChange, children = props.children, valueProp = props.value, defaultValue = props.defaultValue, other = __rest(props, ["name", "onChange", "children", "value", "defaultValue"]);
+    var _a = useControlled({
+        controlledProp: valueProp,
+        defaultValue: defaultValue,
+        componentName: 'RadioButtonGroup'
+    }), value = _a[0], setValueState = _a[1];
+    var isChanging = useRef(false);
+    var handleChange = useCallback(function (e) {
+        // Prevent concurrent changes
+        if (isChanging.current)
+            return;
+        isChanging.current = true;
+        setValueState(e.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        // Reset the lock after a short delay
+        requestAnimationFrame(function () {
+            isChanging.current = false;
+        });
+    }, [setValueState, onChange]);
+    return (jsx(RadioGroupContext.Provider, __assign({ value: { name: name, onChange: handleChange, value: value } }, { children: jsx(Flex, __assign({ role: 'radiogroup', direction: 'column' }, other, { children: children })) })));
+};
+
+export { RadioGroup };
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/radio-group/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { ChangeEvent, ReactNode, useCallback, useRef } from 'react'\n\nimport { useControlled } from '../../hooks/useControlled'\nimport { Flex, FlexProps } from '../layout'\n\nimport { RadioGroupContext } from './RadioGroupContext'\n\nexport type RadioGroupProps = {\n  name: string\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n  children?: ReactNode\n  defaultValue?: string\n  value?: string | null\n} & FlexProps\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const {\n    name,\n    onChange,\n    children,\n    value: valueProp,\n    defaultValue,\n    ...other\n  } = props\n  const [value, setValueState] = useControlled({\n    controlledProp: valueProp,\n    defaultValue,\n    componentName: 'RadioButtonGroup'\n  })\n\n  const isChanging = useRef(false)\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      // Prevent concurrent changes\n      if (isChanging.current) return\n\n      isChanging.current = true\n      setValueState(e.target.value)\n      onChange?.(e)\n\n      // Reset the lock after a short delay\n      requestAnimationFrame(() => {\n        isChanging.current = false\n      })\n    },\n    [setValueState, onChange]\n  )\n  return (\n    <RadioGroupContext.Provider value={{ name, onChange: handleChange, value }}>\n      <Flex role='radiogroup' direction='column' {...other}>\n        {children}\n      </Flex>\n    </RadioGroupContext.Provider>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AAeO,IAAM,UAAU,GAAG,UAAC,KAAsB,EAAA;AAE7C,IAAA,IAAA,IAAI,GAMF,KAAK,CAAA,IANH,EACJ,QAAQ,GAKN,KAAK,CALC,QAAA,EACR,QAAQ,GAIN,KAAK,CAJC,QAAA,EACD,SAAS,GAGd,KAAK,CAAA,KAHS,EAChB,YAAY,GAEV,KAAK,CAAA,YAFK,EACT,KAAK,GACN,MAAA,CAAA,KAAK,EAPH,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,EAAA,cAAA,CAOL,CADS,CACD;IACH,IAAA,EAAA,GAAyB,aAAa,CAAC;AAC3C,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAE,kBAAkB;AAClC,KAAA,CAAC,EAJK,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,QAIzB,CAAA;AAEF,IAAA,IAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;AAEhC,IAAA,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,CAAgC,EAAA;;QAE/B,IAAI,UAAU,CAAC,OAAO;YAAE,OAAM;AAE9B,QAAA,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;AACzB,QAAA,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAC7B,QAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,CAAC,CAAC,CAAA;;AAGb,QAAA,qBAAqB,CAAC,YAAA;AACpB,YAAA,UAAU,CAAC,OAAO,GAAG,KAAK,CAAA;AAC5B,SAAC,CAAC,CAAA;AACJ,KAAC,EACD,CAAC,aAAa,EAAE,QAAQ,CAAC,CAC1B,CAAA;AACD,IAAA,QACEA,GAAC,CAAA,iBAAiB,CAAC,QAAQ,aAAC,KAAK,EAAE,EAAE,IAAI,MAAA,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAA,KAAA,EAAE,EAAA,EAAA,EAAA,QAAA,EACxEA,IAAC,IAAI,EAAA,QAAA,CAAA,EAAC,IAAI,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,IAAK,KAAK,EAAA,EAAA,QAAA,EACjD,QAAQ,EACJ,CAAA,CAAA,EAAA,CAAA,CACoB,EAC9B;AACH;;;;"}

package/dist/components/radio-group/RadioGroupContext.d.ts

@@ -0,0 +1,8 @@
+import { ChangeEvent } from 'react';
+export type RadioGroupContextValue = {
+    name?: string;
+    value?: string | null;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;
+//# sourceMappingURL=RadioGroupContext.d.ts.map

package/dist/components/radio-group/RadioGroupContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupContext.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,OAAO,CAAA;AAElD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CACrD,CAAA;AAED,eAAO,MAAM,iBAAiB,6DAElB,CAAA"}

package/dist/components/radio-group/RadioGroupContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+var RadioGroupContext = createContext(undefined);
+
+export { RadioGroupContext };
+//# sourceMappingURL=RadioGroupContext.js.map

package/dist/components/radio-group/RadioGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupContext.js","sources":["../../../src/components/radio-group/RadioGroupContext.ts"],"sourcesContent":["import { ChangeEvent, createContext } from 'react'\n\nexport type RadioGroupContextValue = {\n  name?: string\n  value?: string | null\n  onChange: (e: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const RadioGroupContext = createContext<\n  RadioGroupContextValue | undefined\n>(undefined)\n"],"names":[],"mappings":";;IAQa,iBAAiB,GAAG,aAAa,CAE5C,SAAS;;;;"}

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+export { RadioGroup, type RadioGroupProps } from './RadioGroup';
+export { RadioGroupContext, type RadioGroupContextValue } from './RadioGroupContext';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/radio-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC5B,MAAM,qBAAqB,CAAA"}

package/dist/components/radio-group/useRadioGroup.d.ts

@@ -0,0 +1,14 @@
+import { ChangeEventHandler } from 'react';
+type RadioGroupProps = {
+    name?: string;
+    checked?: boolean;
+    value?: any;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+export declare const useRadioGroup: (props: RadioGroupProps) => {
+    name: string | undefined;
+    checked: boolean | undefined;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+};
+export {};
+//# sourceMappingURL=useRadioGroup.d.ts.map

package/dist/components/radio-group/useRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/useRadioGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,OAAO,CAAA;AAInE,KAAK,eAAe,GAAG;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;CAChD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,eAAe;;;;CAuBnD,CAAA"}

package/dist/components/radio-group/useRadioGroup.js

@@ -0,0 +1,26 @@
+import { useContext, useCallback } from 'react';
+import { RadioGroupContext } from './RadioGroupContext.js';
+
+var useRadioGroup = function (props) {
+    var nameProp = props.name, checkedProp = props.checked, value = props.value, onChange = props.onChange;
+    var radioGroup = useContext(RadioGroupContext);
+    var name = nameProp;
+    var checked = checkedProp;
+    if (radioGroup) {
+        if (typeof name === 'undefined') {
+            name = radioGroup.name;
+        }
+        if (typeof checked === 'undefined') {
+            checked = String(value) === String(radioGroup.value);
+        }
+    }
+    var handleChange = useCallback(function (e) {
+        var _a;
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        (_a = radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.onChange) === null || _a === void 0 ? void 0 : _a.call(radioGroup, e);
+    }, [onChange, radioGroup]);
+    return { name: name, checked: checked, onChange: handleChange };
+};
+
+export { useRadioGroup };
+//# sourceMappingURL=useRadioGroup.js.map

package/dist/components/radio-group/useRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadioGroup.js","sources":["../../../src/components/radio-group/useRadioGroup.ts"],"sourcesContent":["import { ChangeEventHandler, useCallback, useContext } from 'react'\n\nimport { RadioGroupContext } from './RadioGroupContext'\n\ntype RadioGroupProps = {\n  name?: string\n  checked?: boolean\n  value?: any\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport const useRadioGroup = (props: RadioGroupProps) => {\n  const { name: nameProp, checked: checkedProp, value, onChange } = props\n  const radioGroup = useContext(RadioGroupContext)\n  let name = nameProp\n  let checked = checkedProp\n  if (radioGroup) {\n    if (typeof name === 'undefined') {\n      name = radioGroup.name\n    }\n    if (typeof checked === 'undefined') {\n      checked = String(value) === String(radioGroup.value)\n    }\n  }\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      onChange?.(e)\n      radioGroup?.onChange?.(e)\n    },\n    [onChange, radioGroup]\n  )\n\n  return { name, checked, onChange: handleChange }\n}\n"],"names":[],"mappings":";;;AAWO,IAAM,aAAa,GAAG,UAAC,KAAsB,EAAA;AAC1C,IAAA,IAAM,QAAQ,GAA4C,KAAK,KAAjD,EAAW,WAAW,GAAsB,KAAK,CAAA,OAA3B,EAAE,KAAK,GAAe,KAAK,CAApB,KAAA,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAU;AACvE,IAAA,IAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAChD,IAAI,IAAI,GAAG,QAAQ,CAAA;IACnB,IAAI,OAAO,GAAG,WAAW,CAAA;AACzB,IAAA,IAAI,UAAU,EAAE;AACd,QAAA,IAAI,OAAO,IAAI,KAAK,WAAW,EAAE;AAC/B,YAAA,IAAI,GAAG,UAAU,CAAC,IAAI,CAAA;AACvB,SAAA;AACD,QAAA,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;AAClC,YAAA,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;AACrD,SAAA;AACF,KAAA;AAED,IAAA,IAAM,YAAY,GAAyC,WAAW,CACpE,UAAC,CAAC,EAAA;;AACA,QAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,CAAC,CAAC,CAAA;QACb,CAAA,EAAA,GAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAG,CAAC,CAAC,CAAA;AAC3B,KAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAA;IAED,OAAO,EAAE,IAAI,EAAA,IAAA,EAAE,OAAO,EAAA,OAAA,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAA;AAClD;;;;"}

package/dist/components/scrollbar/Scrollbar.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+export declare const useScrollbarRef: () => RefObject<HTMLElement | null> | null;
+/**
+ * A container with a custom scrollbar, meant to be used for small scrolling areas within a
+ * page/view (e.g. a scrolling navigation bar), not the entire page itself.
+ * `Scrollbar` uses react-perfect-scrollbar (https://www.npmjs.com/package/react-perfect-scrollbar)
+ * under the hood. For advanced use cases, refer to the documentation.
+ */
+export declare const Scrollbar: (props: import("react-perfect-scrollbar").ScrollBarProps & {
+    forward?: boolean | undefined;
+    isHidden?: boolean | undefined;
+} & import("react").RefAttributes<PerfectScrollbar>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=Scrollbar.d.ts.map

package/dist/components/scrollbar/Scrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,SAAS,EACV,MAAM,OAAO,CAAA;AAId,OAAO,gBAAgB,MAAM,yBAAyB,CAAA;AAYtD,eAAO,MAAM,eAAe,4CAE3B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS;;;yJA8ErB,CAAA"}

package/dist/components/scrollbar/Scrollbar.js

@@ -0,0 +1,74 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { createContext, forwardRef, useRef, useId, useEffect, useCallback, useContext } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
+import cn from 'classnames';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import useMeasure from 'react-use-measure';
+import styles from './Scrollbar.module.css.js';
+
+var ScrollbarContext = createContext({
+    scrollBarRef: null
+});
+var useScrollbarRef = function () {
+    return useContext(ScrollbarContext).scrollBarRef;
+};
+/**
+ * A container with a custom scrollbar, meant to be used for small scrolling areas within a
+ * page/view (e.g. a scrolling navigation bar), not the entire page itself.
+ * `Scrollbar` uses react-perfect-scrollbar (https://www.npmjs.com/package/react-perfect-scrollbar)
+ * under the hood. For advanced use cases, refer to the documentation.
+ */
+var Scrollbar = forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, className = _a.className, id = _a.id, forward = _a.forward, isHidden = _a.isHidden, props = __rest(_a, ["children", "className", "id", "forward", "isHidden"]);
+    // Do not remove:
+    // useMeasure ref is required for infinite scrolling to work
+    var ref = useMeasure({ polyfill: ResizeObserver })[0];
+    var containerRef = useRef(null);
+    var timerRef = useRef(null);
+    var reactId = useId();
+    var elementId = id || reactId;
+    useEffect(function () {
+        return function () {
+            if (timerRef.current !== null) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
+    var hideScrollbar = useCallback(function () {
+        var element = document.getElementById(elementId);
+        if (element) {
+            element.classList.remove('scrollbar--hovered-visible');
+        }
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+        }
+    }, [elementId, timerRef]);
+    var showScrollbar = useCallback(function () {
+        if (isHidden)
+            return;
+        var element = document.getElementById(elementId);
+        if (element) {
+            element.classList.add('scrollbar--hovered-visible');
+        }
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(function () {
+            var element = document.getElementById(elementId);
+            if (element) {
+                element.classList.remove('scrollbar--hovered-visible');
+            }
+        }, 1400);
+    }, [elementId, timerRef, isHidden]);
+    useEffect(function () {
+        if (isHidden) {
+            hideScrollbar();
+        }
+    }, [isHidden, hideScrollbar]);
+    var content = forward ? (children) : (jsx("div", __assign({ ref: ref, className: styles.scrollbar }, { children: children })));
+    return (jsx(ScrollbarContext.Provider, __assign({ value: { scrollBarRef: containerRef } }, { children: jsx(PerfectScrollbar, __assign({}, props, { ref: forwardedRef, containerRef: function (ref) { return (containerRef.current = ref); }, id: elementId, className: cn(styles.scrollbar, className), onMouseEnter: showScrollbar, onMouseLeave: hideScrollbar }, { children: content })) })));
+});
+
+export { Scrollbar, useScrollbarRef };
+//# sourceMappingURL=Scrollbar.js.map

package/dist/components/scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  forwardRef,\n  Ref,\n  useCallback,\n  useId,\n  createContext,\n  useContext,\n  RefObject\n} from 'react'\n\nimport { ResizeObserver } from '@juggle/resize-observer'\nimport cn from 'classnames'\nimport PerfectScrollbar from 'react-perfect-scrollbar'\nimport useMeasure from 'react-use-measure'\n\nimport styles from './Scrollbar.module.css'\nimport { ScrollbarProps } from './types'\n\nconst ScrollbarContext = createContext<{\n  scrollBarRef: RefObject<HTMLElement | null> | null\n}>({\n  scrollBarRef: null\n})\n\nexport const useScrollbarRef = () => {\n  return useContext(ScrollbarContext).scrollBarRef\n}\n\n/**\n * A container with a custom scrollbar, meant to be used for small scrolling areas within a\n * page/view (e.g. a scrolling navigation bar), not the entire page itself.\n * `Scrollbar` uses react-perfect-scrollbar (https://www.npmjs.com/package/react-perfect-scrollbar)\n * under the hood. For advanced use cases, refer to the documentation.\n */\nexport const Scrollbar = forwardRef(\n  (\n    { children, className, id, forward, isHidden, ...props }: ScrollbarProps,\n    forwardedRef: Ref<PerfectScrollbar>\n  ) => {\n    // Do not remove:\n    // useMeasure ref is required for infinite scrolling to work\n    const [ref] = useMeasure({ polyfill: ResizeObserver })\n    const containerRef = useRef<HTMLElement | null>(null)\n    const timerRef = useRef<NodeJS.Timeout | null>(null)\n    const reactId = useId()\n    const elementId = id || reactId\n\n    useEffect(() => {\n      return () => {\n        if (timerRef.current !== null) {\n          clearTimeout(timerRef.current)\n        }\n      }\n    }, [])\n\n    const hideScrollbar = useCallback(() => {\n      const element = document.getElementById(elementId)\n      if (element) {\n        element.classList.remove('scrollbar--hovered-visible')\n      }\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current)\n      }\n    }, [elementId, timerRef])\n\n    const showScrollbar = useCallback(() => {\n      if (isHidden) return\n      const element = document.getElementById(elementId)\n      if (element) {\n        element.classList.add('scrollbar--hovered-visible')\n      }\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current)\n      }\n      timerRef.current = setTimeout(() => {\n        const element = document.getElementById(elementId)\n        if (element) {\n          element.classList.remove('scrollbar--hovered-visible')\n        }\n      }, 1400)\n    }, [elementId, timerRef, isHidden])\n\n    useEffect(() => {\n      if (isHidden) {\n        hideScrollbar()\n      }\n    }, [isHidden, hideScrollbar])\n\n    const content = forward ? (\n      children\n    ) : (\n      <div ref={ref} className={styles.scrollbar}>\n        {children}\n      </div>\n    )\n\n    return (\n      <ScrollbarContext.Provider value={{ scrollBarRef: containerRef }}>\n        <PerfectScrollbar\n          {...props}\n          ref={forwardedRef}\n          containerRef={(ref) => (containerRef.current = ref)}\n          id={elementId}\n          className={cn(styles.scrollbar, className)}\n          onMouseEnter={showScrollbar}\n          onMouseLeave={hideScrollbar}\n        >\n          {content}\n        </PerfectScrollbar>\n      </ScrollbarContext.Provider>\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/scrollbar/Scrollbar.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"scrollbar":"Scrollbar-module_scrollbar__S-zEj"};
+
+export { styles as default };
+//# sourceMappingURL=Scrollbar.module.css.js.map

package/dist/components/scrollbar/Scrollbar.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/scrollbar/index.d.ts

@@ -0,0 +1,3 @@
+export { Scrollbar, useScrollbarRef } from './Scrollbar';
+export { type ScrollbarProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/scrollbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/scrollbar/types.d.ts

@@ -0,0 +1,11 @@
+import { ScrollBarProps as PerfectScrollbarProps } from 'react-perfect-scrollbar';
+export type ScrollbarProps = PerfectScrollbarProps & {
+    forward?: boolean;
+    /**
+     * Whether or not to hide the scrollbars. Useful if you are rendering
+     * a scroll bar inside something that is changing sizes and you need
+     * to wait for the size to be stable before showing scrollbars.
+     */
+    isHidden?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/scrollbar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAEjF,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG;IACnD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA"}

package/dist/components/scrubber/Scrubber.d.ts

@@ -0,0 +1,7 @@
+import { ScrubberProps } from './types';
+/**
+ * @beta - This component was directly ported from stems and subject to change
+ * Wraps the `<Slider />` component and provides timestamp indicators.
+ */
+export declare const Scrubber: ({ mediaKey, isPlaying, isDisabled, isMobile, includeTimestamps, elapsedSeconds, totalSeconds, playbackRate, getAudioPosition, getTotalTime, onScrub, onScrubRelease, includeExpandedTargets, style, className }: ScrubberProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Scrubber.d.ts.map

package/dist/components/scrubber/Scrubber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/Scrubber.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAKvC;;;GAGG;AACH,eAAO,MAAM,QAAQ,oNAgBlB,aAAa,qDAgEf,CAAA"}