@audius/harmony 0.5.0 → 0.5.2

package/dist/utils/createResponsiveStyles.js

@@ -0,0 +1,68 @@
+/**
+ * Creates a single merged style object based on the current media breakpoints.
+ * Applies base styles first, then overrides with styles for the active breakpoint
+ * (mobile, tablet, or desktop). Style values can be objects or functions
+ * receiving the media state for complex logic.
+ *
+ * Priority: base -> mobile -> tablet -> desktop (later stages override earlier ones)
+ *
+ * @param media - The media context object from useMedia()
+ * @param config - Style configuration for different breakpoints
+ * @returns A merged CSS object with styles applied according to breakpoints
+ */
+var createResponsiveStyle = function (media, config) {
+    var finalStyles = {};
+    var applyStyles = function (styleSource) {
+        if (!styleSource)
+            return;
+        if (typeof styleSource === 'function') {
+            Object.assign(finalStyles, styleSource(media));
+        }
+        else if (typeof styleSource === 'object') {
+            Object.assign(finalStyles, styleSource);
+        }
+    };
+    // Apply base styles first
+    applyStyles(config.base);
+    // Apply breakpoint-specific styles, allowing overrides
+    if (media.isMobile)
+        applyStyles(config.mobile);
+    if (media.isTablet)
+        applyStyles(config.tablet);
+    if (media.isDesktop)
+        applyStyles(config.desktop);
+    return finalStyles;
+};
+/**
+ * Creates multiple responsive style objects as a convenience for components
+ * that need several different styled elements.
+ *
+ * Each style configuration follows the same pattern as createResponsiveStyle,
+ * with base, mobile, tablet, and desktop style definitions.
+ *
+ * @example
+ * ```
+ * const styles = createResponsiveStyles(media, {
+ *   buttonStyles: { base: {...}, mobile: {...} },
+ *   headerStyles: { base: {...}, tablet: {...} }
+ * })
+ *
+ * // Usage
+ * <Button css={styles.buttonStyles}>Click me</Button>
+ * <Header css={styles.headerStyles}>Title</Header>
+ * ```
+ *
+ * @param media - The media context object from useMedia()
+ * @param configs - Object with named style configurations
+ * @returns Object with the same keys, but values processed into responsive styles
+ */
+var createResponsiveStyles = function (media, configs) {
+    var result = {};
+    for (var key in configs) {
+        result[key] = createResponsiveStyle(media, configs[key]);
+    }
+    return result;
+};
+
+export { createResponsiveStyle, createResponsiveStyles };
+//# sourceMappingURL=createResponsiveStyles.js.map

package/dist/utils/createResponsiveStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createResponsiveStyles.js","sources":["../../src/utils/createResponsiveStyles.ts"],"sourcesContent":["import { CSSObject } from '@emotion/react'\n\nimport { useMedia } from '../hooks/useMedia'\n\n// Use ReturnType to get the actual MediaContextType from useMedia hook\ntype MediaContextType = ReturnType<typeof useMedia>\n\ntype ResponsiveStyleValue = CSSObject | ((media: MediaContextType) => CSSObject)\n\ntype ResponsiveStyleConfig = {\n  base?: ResponsiveStyleValue\n  mobile?: ResponsiveStyleValue\n  tablet?: ResponsiveStyleValue\n  desktop?: ResponsiveStyleValue\n}\n\ntype NamedResponsiveStylesConfig = {\n  [styleKey: string]: ResponsiveStyleConfig\n}\n\n/**\n * Creates a single merged style object based on the current media breakpoints.\n * Applies base styles first, then overrides with styles for the active breakpoint\n * (mobile, tablet, or desktop). Style values can be objects or functions\n * receiving the media state for complex logic.\n *\n * Priority: base -> mobile -> tablet -> desktop (later stages override earlier ones)\n *\n * @param media - The media context object from useMedia()\n * @param config - Style configuration for different breakpoints\n * @returns A merged CSS object with styles applied according to breakpoints\n */\nexport const createResponsiveStyle = (\n  media: MediaContextType,\n  config: ResponsiveStyleConfig\n): CSSObject => {\n  const finalStyles: CSSObject = {}\n\n  const applyStyles = (styleSource: ResponsiveStyleValue | undefined) => {\n    if (!styleSource) return\n    if (typeof styleSource === 'function') {\n      Object.assign(finalStyles, styleSource(media))\n    } else if (typeof styleSource === 'object') {\n      Object.assign(finalStyles, styleSource)\n    }\n  }\n\n  // Apply base styles first\n  applyStyles(config.base)\n\n  // Apply breakpoint-specific styles, allowing overrides\n  if (media.isMobile) applyStyles(config.mobile)\n  if (media.isTablet) applyStyles(config.tablet)\n  if (media.isDesktop) applyStyles(config.desktop)\n\n  return finalStyles\n}\n\n/**\n * Creates multiple responsive style objects as a convenience for components\n * that need several different styled elements.\n *\n * Each style configuration follows the same pattern as createResponsiveStyle,\n * with base, mobile, tablet, and desktop style definitions.\n *\n * @example\n * ```\n * const styles = createResponsiveStyles(media, {\n *   buttonStyles: { base: {...}, mobile: {...} },\n *   headerStyles: { base: {...}, tablet: {...} }\n * })\n *\n * // Usage\n * <Button css={styles.buttonStyles}>Click me</Button>\n * <Header css={styles.headerStyles}>Title</Header>\n * ```\n *\n * @param media - The media context object from useMedia()\n * @param configs - Object with named style configurations\n * @returns Object with the same keys, but values processed into responsive styles\n */\nexport const createResponsiveStyles = <T extends NamedResponsiveStylesConfig>(\n  media: MediaContextType,\n  configs: T\n): { [K in keyof T]: CSSObject } => {\n  const result = {} as { [K in keyof T]: CSSObject }\n\n  for (const key in configs) {\n    result[key] = createResponsiveStyle(media, configs[key])\n  }\n\n  return result\n}\n"],"names":[],"mappings":"AAoBA;;;;;;;;;;;AAWG;AACU,IAAA,qBAAqB,GAAG,UACnC,KAAuB,EACvB,MAA6B,EAAA;IAE7B,IAAM,WAAW,GAAc,EAAE,CAAA;IAEjC,IAAM,WAAW,GAAG,UAAC,WAA6C,EAAA;AAChE,QAAA,IAAI,CAAC,WAAW;YAAE,OAAM;AACxB,QAAA,IAAI,OAAO,WAAW,KAAK,UAAU,EAAE;YACrC,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA;AAC/C,SAAA;AAAM,aAAA,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;AAC1C,YAAA,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;AACxC,SAAA;AACH,KAAC,CAAA;;AAGD,IAAA,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;;IAGxB,IAAI,KAAK,CAAC,QAAQ;AAAE,QAAA,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAC9C,IAAI,KAAK,CAAC,QAAQ;AAAE,QAAA,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAC9C,IAAI,KAAK,CAAC,SAAS;AAAE,QAAA,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AAEhD,IAAA,OAAO,WAAW,CAAA;AACpB,EAAC;AAED;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACU,IAAA,sBAAsB,GAAG,UACpC,KAAuB,EACvB,OAAU,EAAA;IAEV,IAAM,MAAM,GAAG,EAAmC,CAAA;AAElD,IAAA,KAAK,IAAM,GAAG,IAAI,OAAO,EAAE;AACzB,QAAA,MAAM,CAAC,GAAG,CAAC,GAAG,qBAAqB,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;AACzD,KAAA;AAED,IAAA,OAAO,MAAM,CAAA;AACf;;;;"}

package/dist/utils/formatCount.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Formats a count into a more readable string representation.
+ * For counts over 1000, it converts the number into a format with a suffix (K for thousands, M for millions, etc.)
+ * For example:
+ * - 375 => "375"
+ * - 4,210 => "4.21K"
+ * - 443,123 => "443K"
+ * - 4,001,000 => "4M"
+ * If the count is 0, it returns "0".
+ * This function is pulled over from the common package because we don't use the common package in Harmony.
+ */
+export declare const formatCount: (count: number, decimals?: number) => string;
+//# sourceMappingURL=formatCount.d.ts.map

package/dist/utils/formatCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatCount.d.ts","sourceRoot":"","sources":["../../src/utils/formatCount.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,UAAW,MAAM,aAAY,MAAM,WAmB1D,CAAA"}

package/dist/utils/formatCount.js

@@ -0,0 +1,43 @@
+import numeral from 'numeral';
+
+/**
+ * Formats a count into a more readable string representation.
+ * For counts over 1000, it converts the number into a format with a suffix (K for thousands, M for millions, etc.)
+ * For example:
+ * - 375 => "375"
+ * - 4,210 => "4.21K"
+ * - 443,123 => "443K"
+ * - 4,001,000 => "4M"
+ * If the count is 0, it returns "0".
+ * This function is pulled over from the common package because we don't use the common package in Harmony.
+ */
+var formatCount = function (count, decimals) {
+    if (decimals === void 0) { decimals = 0; }
+    if (count >= 1000) {
+        var countStr = count.toString();
+        if (countStr.length % 3 === 0) {
+            return numeral(count).format('0a').toUpperCase();
+        }
+        else if (countStr.length % 3 === 1 && countStr[2] !== '0') {
+            return numeral(count).format('0.00a').toUpperCase();
+        }
+        else if (countStr.length % 3 === 1 && countStr[1] !== '0') {
+            return numeral(count).format('0.0a').toUpperCase();
+        }
+        else if (countStr.length % 3 === 2 && countStr[2] !== '0') {
+            return numeral(count).format('0.0a').toUpperCase();
+        }
+        else {
+            return numeral(count).format('0a').toUpperCase();
+        }
+    }
+    else if (!count) {
+        return '0';
+    }
+    else {
+        return "".concat(count.toFixed(decimals));
+    }
+};
+
+export { formatCount };
+//# sourceMappingURL=formatCount.js.map

package/dist/utils/formatCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatCount.js","sources":["../../src/utils/formatCount.ts"],"sourcesContent":["import numeral from 'numeral'\n\n/**\n * Formats a count into a more readable string representation.\n * For counts over 1000, it converts the number into a format with a suffix (K for thousands, M for millions, etc.)\n * For example:\n * - 375 => \"375\"\n * - 4,210 => \"4.21K\"\n * - 443,123 => \"443K\"\n * - 4,001,000 => \"4M\"\n * If the count is 0, it returns \"0\".\n * This function is pulled over from the common package because we don't use the common package in Harmony.\n */\nexport const formatCount = (count: number, decimals: number = 0) => {\n  if (count >= 1000) {\n    const countStr = count.toString()\n    if (countStr.length % 3 === 0) {\n      return numeral(count).format('0a').toUpperCase()\n    } else if (countStr.length % 3 === 1 && countStr[2] !== '0') {\n      return numeral(count).format('0.00a').toUpperCase()\n    } else if (countStr.length % 3 === 1 && countStr[1] !== '0') {\n      return numeral(count).format('0.0a').toUpperCase()\n    } else if (countStr.length % 3 === 2 && countStr[2] !== '0') {\n      return numeral(count).format('0.0a').toUpperCase()\n    } else {\n      return numeral(count).format('0a').toUpperCase()\n    }\n  } else if (!count) {\n    return '0'\n  } else {\n    return `${count.toFixed(decimals)}`\n  }\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;AAUG;AACU,IAAA,WAAW,GAAG,UAAC,KAAa,EAAE,QAAoB,EAAA;AAApB,IAAA,IAAA,QAAA,KAAA,KAAA,CAAA,EAAA,EAAA,QAAoB,GAAA,CAAA,CAAA,EAAA;IAC7D,IAAI,KAAK,IAAI,IAAI,EAAE;AACjB,QAAA,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;AACjC,QAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,EAAE;AAC7B,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAA;AACjD,SAAA;AAAM,aAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AAC3D,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAA;AACpD,SAAA;AAAM,aAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AAC3D,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAA;AACnD,SAAA;AAAM,aAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AAC3D,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAA;AACnD,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAA;AACjD,SAAA;AACF,KAAA;SAAM,IAAI,CAAC,KAAK,EAAE;AACjB,QAAA,OAAO,GAAG,CAAA;AACX,KAAA;AAAM,SAAA;QACL,OAAO,EAAA,CAAA,MAAA,CAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAE,CAAA;AACpC,KAAA;AACH;;;;"}

package/dist/utils/formatTrackTimestamp.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Pretty formats a track timestamp.
+ * Ex. input 65 -> output 1:05
+ */
+export declare const formatTrackTimestamp: (timestampSecs: number) => string;
+//# sourceMappingURL=formatTrackTimestamp.d.ts.map

package/dist/utils/formatTrackTimestamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatTrackTimestamp.d.ts","sourceRoot":"","sources":["../../src/utils/formatTrackTimestamp.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,kBAAmB,MAAM,WAUzD,CAAA"}

package/dist/utils/formatTrackTimestamp.js

@@ -0,0 +1,19 @@
+/**
+ * Pretty formats a track timestamp.
+ * Ex. input 65 -> output 1:05
+ */
+var formatTrackTimestamp = function (timestampSecs) {
+    var hours = Math.floor(timestampSecs / (60 * 60));
+    var minutes = Math.floor((timestampSecs / 60) % 60);
+    var seconds = "".concat(Math.floor(timestampSecs) % 60).padStart(2, '0');
+    if (hours > 0) {
+        var paddedMinutes = minutes.toString().padStart(2, '0');
+        return "".concat(hours, ":").concat(paddedMinutes, ":").concat(seconds);
+    }
+    else {
+        return "".concat(minutes, ":").concat(seconds);
+    }
+};
+
+export { formatTrackTimestamp };
+//# sourceMappingURL=formatTrackTimestamp.js.map

package/dist/utils/formatTrackTimestamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatTrackTimestamp.js","sources":["../../src/utils/formatTrackTimestamp.ts"],"sourcesContent":["/**\n * Pretty formats a track timestamp.\n * Ex. input 65 -> output 1:05\n */\nexport const formatTrackTimestamp = (timestampSecs: number) => {\n  const hours = Math.floor(timestampSecs / (60 * 60))\n  const minutes = Math.floor((timestampSecs / 60) % 60)\n  const seconds = `${Math.floor(timestampSecs) % 60}`.padStart(2, '0')\n  if (hours > 0) {\n    const paddedMinutes = minutes.toString().padStart(2, '0')\n    return `${hours}:${paddedMinutes}:${seconds}`\n  } else {\n    return `${minutes}:${seconds}`\n  }\n}\n"],"names":[],"mappings":"AAAA;;;AAGG;AACI,IAAM,oBAAoB,GAAG,UAAC,aAAqB,EAAA;AACxD,IAAA,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAA;AACnD,IAAA,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,EAAE,IAAI,EAAE,CAAC,CAAA;AACrD,IAAA,IAAM,OAAO,GAAG,EAAA,CAAA,MAAA,CAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,CAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;IACpE,IAAI,KAAK,GAAG,CAAC,EAAE;AACb,QAAA,IAAM,aAAa,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;AACzD,QAAA,OAAO,UAAG,KAAK,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,aAAa,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,OAAO,CAAE,CAAA;AAC9C,KAAA;AAAM,SAAA;AACL,QAAA,OAAO,EAAG,CAAA,MAAA,CAAA,OAAO,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,OAAO,CAAE,CAAA;AAC/B,KAAA;AACH;;;;"}

package/dist/utils/getScrollParent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Gets the scroll parent of an HTML element
+ * From SO: https://stackoverflow.com/a/42543908/11435157
+ * @param node
+ * @returns the scroll parent
+ */
+export declare const getScrollParent: (node: HTMLElement) => Element | undefined;
+//# sourceMappingURL=getScrollParent.d.ts.map

package/dist/utils/getScrollParent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScrollParent.d.ts","sourceRoot":"","sources":["../../src/utils/getScrollParent.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,SAAU,WAAW,wBAgChD,CAAA"}

package/dist/utils/getScrollParent.js

@@ -0,0 +1,39 @@
+/**
+ * Gets the scroll parent of an HTML element
+ * From SO: https://stackoverflow.com/a/42543908/11435157
+ * @param node
+ * @returns the scroll parent
+ */
+var getScrollParent = function (node) {
+    var regex = /(auto|scroll)/;
+    var parents = function (_node, ps) {
+        if (_node.parentNode === null) {
+            return ps;
+        }
+        return parents(_node.parentNode, ps.concat([_node]));
+    };
+    var style = function (_node, prop) {
+        return getComputedStyle(_node, null).getPropertyValue(prop);
+    };
+    var overflow = function (_node) {
+        return style(_node, 'overflow') +
+            style(_node, 'overflow-y') +
+            style(_node, 'overflow-x');
+    };
+    var scroll = function (_node) { return regex.test(overflow(_node)); };
+    var scrollParent = function (_node) {
+        if (!_node.parentNode)
+            return;
+        var ps = parents(_node.parentNode, []);
+        for (var i = 0; i < ps.length; i += 1) {
+            if (scroll(ps[i])) {
+                return ps[i];
+            }
+        }
+        return document.scrollingElement || document.documentElement;
+    };
+    return scrollParent(node);
+};
+
+export { getScrollParent };
+//# sourceMappingURL=getScrollParent.js.map

package/dist/utils/getScrollParent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScrollParent.js","sources":["../../src/utils/getScrollParent.ts"],"sourcesContent":["/**\n * Gets the scroll parent of an HTML element\n * From SO: https://stackoverflow.com/a/42543908/11435157\n * @param node\n * @returns the scroll parent\n */\nexport const getScrollParent = (node: HTMLElement) => {\n  const regex = /(auto|scroll)/\n  const parents = (_node: HTMLElement, ps: HTMLElement[]): HTMLElement[] => {\n    if (_node.parentNode === null) {\n      return ps\n    }\n    return parents(_node.parentNode as HTMLElement, ps.concat([_node]))\n  }\n\n  const style = (_node: HTMLElement, prop: string) =>\n    getComputedStyle(_node, null).getPropertyValue(prop)\n  const overflow = (_node: HTMLElement) =>\n    style(_node, 'overflow') +\n    style(_node, 'overflow-y') +\n    style(_node, 'overflow-x')\n  const scroll = (_node: HTMLElement) => regex.test(overflow(_node))\n\n  const scrollParent = (_node: HTMLElement) => {\n    if (!_node.parentNode) return\n\n    const ps = parents(_node.parentNode as HTMLElement, [])\n\n    for (let i = 0; i < ps.length; i += 1) {\n      if (scroll(ps[i])) {\n        return ps[i]\n      }\n    }\n\n    return document.scrollingElement || document.documentElement\n  }\n\n  return scrollParent(node)\n}\n"],"names":[],"mappings":"AAAA;;;;;AAKG;AACI,IAAM,eAAe,GAAG,UAAC,IAAiB,EAAA;IAC/C,IAAM,KAAK,GAAG,eAAe,CAAA;AAC7B,IAAA,IAAM,OAAO,GAAG,UAAC,KAAkB,EAAE,EAAiB,EAAA;AACpD,QAAA,IAAI,KAAK,CAAC,UAAU,KAAK,IAAI,EAAE;AAC7B,YAAA,OAAO,EAAE,CAAA;AACV,SAAA;AACD,QAAA,OAAO,OAAO,CAAC,KAAK,CAAC,UAAyB,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;AACrE,KAAC,CAAA;AAED,IAAA,IAAM,KAAK,GAAG,UAAC,KAAkB,EAAE,IAAY,EAAA;QAC7C,OAAA,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAA;AAApD,KAAoD,CAAA;IACtD,IAAM,QAAQ,GAAG,UAAC,KAAkB,EAAA;AAClC,QAAA,OAAA,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC;AACxB,YAAA,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC;AAC1B,YAAA,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC,CAAA;AAF1B,KAE0B,CAAA;AAC5B,IAAA,IAAM,MAAM,GAAG,UAAC,KAAkB,EAAA,EAAK,OAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA,EAAA,CAAA;IAElE,IAAM,YAAY,GAAG,UAAC,KAAkB,EAAA;QACtC,IAAI,CAAC,KAAK,CAAC,UAAU;YAAE,OAAM;QAE7B,IAAM,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,UAAyB,EAAE,EAAE,CAAC,CAAA;AAEvD,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;AACrC,YAAA,IAAI,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;AACjB,gBAAA,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;AACb,aAAA;AACF,SAAA;AAED,QAAA,OAAO,QAAQ,CAAC,gBAAgB,IAAI,QAAQ,CAAC,eAAe,CAAA;AAC9D,KAAC,CAAA;AAED,IAAA,OAAO,YAAY,CAAC,IAAI,CAAC,CAAA;AAC3B;;;;"}

package/dist/utils/index.d.ts

@@ -0,0 +1,8 @@
+export * from './formatTrackTimestamp';
+export * from './getScrollParent';
+export * from './modalState';
+export * from './styles';
+export * from './formatCount';
+export * from './createResponsiveStyles';
+export * from './makeResponsiveStyles';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA"}

package/dist/utils/makeResponsiveStyles.d.ts

@@ -0,0 +1,48 @@
+import { CSSObject, useTheme } from '@emotion/react';
+import { useMedia } from '../contexts/MediaContext';
+type MediaContext = ReturnType<typeof useMedia>;
+type Theme = ReturnType<typeof useTheme>;
+/**
+ * StylesOptions provides common objects needed for responsive style creation
+ */
+export type StylesOptions = {
+    media: MediaContext;
+    theme: Theme;
+};
+/**
+ * Creates a custom hook for responsive styles that automatically injects
+ * the media context and theme.
+ *
+ * Similar to makeStyles but specifically for responsive layout with built-in
+ * media query support.
+ *
+ * @example
+ * ```
+ * // Define your styles
+ * const useMyStyles = makeResponsiveStyles(({ media, theme }) => ({
+ *   container: {
+ *     base: { color: theme.colors.primary },
+ *     mobile: { flexDirection: 'column' },
+ *     tablet: { flexDirection: 'row' }
+ *   },
+ *   title: {
+ *     base: { fontSize: theme.typography.xl },
+ *     mobile: (currentMedia) => ({
+ *       ...(currentMedia.isExtraSmall && { fontSize: theme.typography.l })
+ *     })
+ *   }
+ * }))
+ *
+ * // Use in your component
+ * function MyComponent() {
+ *   const styles = useMyStyles()
+ *   return <div css={styles.container}>...</div>
+ * }
+ * ```
+ *
+ * @param stylesCreator A function that takes media and theme objects and returns style configurations
+ * @returns A custom hook that returns the processed styles
+ */
+export declare const makeResponsiveStyles: <Styles extends Record<string, CSSObject>>(stylesCreator: (options: StylesOptions) => Record<string, any>) => () => Styles;
+export {};
+//# sourceMappingURL=makeResponsiveStyles.d.ts.map

package/dist/utils/makeResponsiveStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeResponsiveStyles.d.ts","sourceRoot":"","sources":["../../src/utils/makeResponsiveStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAInD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAC/C,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAExC;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,YAAY,CAAA;IACnB,KAAK,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,oBAAoB,sEACN,aAAa,KAAK,OAAO,MAAM,EAAE,GAAG,CAAC,iBAW/D,CAAA"}

package/dist/utils/makeResponsiveStyles.js

@@ -0,0 +1,51 @@
+import { useTheme } from '@emotion/react';
+import { useMedia } from '../contexts/MediaContext.js';
+import { createResponsiveStyles } from './createResponsiveStyles.js';
+
+/**
+ * Creates a custom hook for responsive styles that automatically injects
+ * the media context and theme.
+ *
+ * Similar to makeStyles but specifically for responsive layout with built-in
+ * media query support.
+ *
+ * @example
+ * ```
+ * // Define your styles
+ * const useMyStyles = makeResponsiveStyles(({ media, theme }) => ({
+ *   container: {
+ *     base: { color: theme.colors.primary },
+ *     mobile: { flexDirection: 'column' },
+ *     tablet: { flexDirection: 'row' }
+ *   },
+ *   title: {
+ *     base: { fontSize: theme.typography.xl },
+ *     mobile: (currentMedia) => ({
+ *       ...(currentMedia.isExtraSmall && { fontSize: theme.typography.l })
+ *     })
+ *   }
+ * }))
+ *
+ * // Use in your component
+ * function MyComponent() {
+ *   const styles = useMyStyles()
+ *   return <div css={styles.container}>...</div>
+ * }
+ * ```
+ *
+ * @param stylesCreator A function that takes media and theme objects and returns style configurations
+ * @returns A custom hook that returns the processed styles
+ */
+var makeResponsiveStyles = function (stylesCreator) {
+    // Return a hook that can be used in components
+    return function useStyles() {
+        var media = useMedia();
+        var theme = useTheme();
+        // Process the style configurations through createResponsiveStyles
+        var styleConfigs = stylesCreator({ media: media, theme: theme });
+        return createResponsiveStyles(media, styleConfigs);
+    };
+};
+
+export { makeResponsiveStyles };
+//# sourceMappingURL=makeResponsiveStyles.js.map

package/dist/utils/makeResponsiveStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeResponsiveStyles.js","sources":["../../src/utils/makeResponsiveStyles.ts"],"sourcesContent":["import { CSSObject, useTheme } from '@emotion/react'\n\nimport { useMedia } from '../contexts/MediaContext'\n\nimport { createResponsiveStyles } from './createResponsiveStyles'\n\ntype MediaContext = ReturnType<typeof useMedia>\ntype Theme = ReturnType<typeof useTheme>\n\n/**\n * StylesOptions provides common objects needed for responsive style creation\n */\nexport type StylesOptions = {\n  media: MediaContext\n  theme: Theme\n}\n\n/**\n * Creates a custom hook for responsive styles that automatically injects\n * the media context and theme.\n *\n * Similar to makeStyles but specifically for responsive layout with built-in\n * media query support.\n *\n * @example\n * ```\n * // Define your styles\n * const useMyStyles = makeResponsiveStyles(({ media, theme }) => ({\n *   container: {\n *     base: { color: theme.colors.primary },\n *     mobile: { flexDirection: 'column' },\n *     tablet: { flexDirection: 'row' }\n *   },\n *   title: {\n *     base: { fontSize: theme.typography.xl },\n *     mobile: (currentMedia) => ({\n *       ...(currentMedia.isExtraSmall && { fontSize: theme.typography.l })\n *     })\n *   }\n * }))\n *\n * // Use in your component\n * function MyComponent() {\n *   const styles = useMyStyles()\n *   return <div css={styles.container}>...</div>\n * }\n * ```\n *\n * @param stylesCreator A function that takes media and theme objects and returns style configurations\n * @returns A custom hook that returns the processed styles\n */\nexport const makeResponsiveStyles = <Styles extends Record<string, CSSObject>>(\n  stylesCreator: (options: StylesOptions) => Record<string, any>\n) => {\n  // Return a hook that can be used in components\n  return function useStyles(): Styles {\n    const media = useMedia()\n    const theme = useTheme()\n\n    // Process the style configurations through createResponsiveStyles\n    const styleConfigs = stylesCreator({ media, theme })\n    return createResponsiveStyles(media, styleConfigs) as Styles\n  }\n}\n"],"names":[],"mappings":";;;;AAiBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCG;AACI,IAAM,oBAAoB,GAAG,UAClC,aAA8D,EAAA;;AAG9D,IAAA,OAAO,SAAS,SAAS,GAAA;AACvB,QAAA,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;AACxB,QAAA,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;;AAGxB,QAAA,IAAM,YAAY,GAAG,aAAa,CAAC,EAAE,KAAK,EAAA,KAAA,EAAE,KAAK,EAAA,KAAA,EAAE,CAAC,CAAA;AACpD,QAAA,OAAO,sBAAsB,CAAC,KAAK,EAAE,YAAY,CAAW,CAAA;AAC9D,KAAC,CAAA;AACH;;;;"}

package/dist/utils/modalState.d.ts

@@ -0,0 +1,2 @@
+export type ModalState = 'opening' | 'open' | 'closing' | 'closed';
+//# sourceMappingURL=modalState.d.ts.map

package/dist/utils/modalState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalState.d.ts","sourceRoot":"","sources":["../../src/utils/modalState.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAA"}

package/dist/utils/styles.d.ts

@@ -0,0 +1,7 @@
+/** Converts a camelCased variable name such as `primaryDark1` to an
+ * equivalent CSS variable name (`--primary-dark-1`). Useful for passing
+ * values like color names to a component to be converted to a CSS
+ * property set via `style`
+ */
+export declare const toCSSVariableName: (name: string) => string;
+//# sourceMappingURL=styles.d.ts.map

package/dist/utils/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,SAAU,MAAM,WAE7C,CAAA"}

package/dist/utils/styles.js

@@ -0,0 +1,13 @@
+import { kebabCase } from 'lodash';
+
+/** Converts a camelCased variable name such as `primaryDark1` to an
+ * equivalent CSS variable name (`--primary-dark-1`). Useful for passing
+ * values like color names to a component to be converted to a CSS
+ * property set via `style`
+ */
+var toCSSVariableName = function (name) {
+    return "--harmony-".concat(kebabCase(name));
+};
+
+export { toCSSVariableName };
+//# sourceMappingURL=styles.js.map

package/dist/utils/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../src/utils/styles.ts"],"sourcesContent":["import { kebabCase } from 'lodash'\n\n/** Converts a camelCased variable name such as `primaryDark1` to an\n * equivalent CSS variable name (`--primary-dark-1`). Useful for passing\n * values like color names to a component to be converted to a CSS\n * property set via `style`\n */\nexport const toCSSVariableName = (name: string) => {\n  return `--harmony-${kebabCase(name)}`\n}\n"],"names":[],"mappings":";;AAEA;;;;AAIG;AACI,IAAM,iBAAiB,GAAG,UAAC,IAAY,EAAA;AAC5C,IAAA,OAAO,oBAAa,SAAS,CAAC,IAAI,CAAC,CAAE,CAAA;AACvC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@audius/harmony",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "The Audius Design System",
   "license": "ISC",
   "author": "Audius",
@@ -21,7 +21,8 @@
     "stylelint": "stylelint 'src/**/*.css'",
     "stylelint:fix": "npm run stylelint -- --fix",
     "typecheck": "tsc --noEmit",
-    "verify": "concurrently \"npm:typecheck\" \"npm:lint\" \"npm:stylelint\""
+    "verify": "concurrently \"npm:typecheck\" \"npm:lint\" \"npm:stylelint\"",
+    "prepack": "turbo run build"
   },
   "devDependencies": {
     "@babel/preset-env": "7.22.15",