@audius/harmony 0.3.5 → 0.4.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@audius/harmony",
-  "version": "0.3.5",
+  "version": "0.4.2",
   "description": "The Audius Design System",
   "license": "ISC",
   "author": "Audius",

package/dist/components/loading-spinner/LoadingSpinner.module.css.js

@@ -1,4 +0,0 @@
-var styles = {"container":"LoadingSpinner-module_container__a7gv-"};
-
-export { styles as default };
-//# sourceMappingURL=LoadingSpinner.module.css.js.map

package/dist/components/loading-spinner/LoadingSpinner.module.css.js.map

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

package/dist/icons/GradientDefs.d.ts

@@ -1,2 +0,0 @@
-export declare const GradientDefs: () => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=GradientDefs.d.ts.map

package/dist/icons/GradientDefs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GradientDefs.d.ts","sourceRoot":"","sources":["../../src/icons/GradientDefs.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,wDAmBxB,CAAA"}

package/dist/icons/GradientDefs.js

@@ -1,12 +0,0 @@
-import { __assign } from '../_virtual/_tslib.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { useTheme } from '@emotion/react';
-
-// Global svg devs to reference for gradient fills
-var GradientDefs = function () {
-    var color = useTheme().color;
-    return (jsx("svg", __assign({ style: { position: 'fixed', top: '-1000px' } }, { children: jsx("defs", { children: jsxs("linearGradient", __assign({ x1: '85.847289%', y1: '85.847289%', x2: '-8.9070096%', y2: '8.9070096%', id: 'harmony-gradient' }, { children: [jsx("stop", { stopColor: color.special.gradientStop1, offset: '0%' }), jsx("stop", { stopColor: color.special.gradientStop2, offset: '100%' })] })) }) })));
-};
-
-export { GradientDefs };
-//# sourceMappingURL=GradientDefs.js.map

package/dist/icons/GradientDefs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GradientDefs.js","sources":["../../src/icons/GradientDefs.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react'\n\n// Global svg devs to reference for gradient fills\nexport const GradientDefs = () => {\n  const { color } = useTheme()\n\n  return (\n    <svg style={{ position: 'fixed', top: '-1000px' }}>\n      <defs>\n        <linearGradient\n          x1='85.847289%'\n          y1='85.847289%'\n          x2='-8.9070096%'\n          y2='8.9070096%'\n          id='harmony-gradient'\n        >\n          <stop stopColor={color.special.gradientStop1} offset='0%' />\n          <stop stopColor={color.special.gradientStop2} offset='100%' />\n        </linearGradient>\n      </defs>\n    </svg>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAEA;AACa,IAAA,YAAY,GAAG,YAAA;AAClB,IAAA,IAAA,KAAK,GAAK,QAAQ,EAAE,MAAf,CAAe;AAE5B,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,EAC/C,EAAA,EAAA,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EACEC,IACE,CAAA,gBAAA,EAAA,QAAA,CAAA,EAAA,EAAE,EAAC,YAAY,EACf,EAAE,EAAC,YAAY,EACf,EAAE,EAAC,aAAa,EAChB,EAAE,EAAC,YAAY,EACf,EAAE,EAAC,kBAAkB,EAErB,EAAA,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,EAAE,MAAM,EAAC,IAAI,GAAG,EAC5DA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,EAAE,MAAM,EAAC,MAAM,EAAG,CAAA,CAAA,EAAA,CAAA,CAC/C,EACZ,CAAA,EAAA,CAAA,CACH,EACP;AACH;;;;"}