@audius/harmony 0.5.0 → 0.5.2

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

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+export type TooltipMount = 'parent' | 'page' | 'body';
+export type TooltipProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Determines if the tooltip should display
+     */
+    disabled?: boolean;
+    /**
+     * Where the tooltip gets mounted
+     */
+    mount?: TooltipMount;
+    /**
+     * Whether the tooltip should have a custom container/mount.
+     * Takes precedence over `mount`
+     */
+    getPopupContainer?: () => ParentNode | null;
+    /**
+     * Delay in seconds before showing tooltip on mouse enter
+     */
+    mouseEnterDelay?: number;
+    /**
+     * Delay in seconds before hiding tooltip on mouse leave
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * Placement of the tooltip relative to the trigger element
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Should the tooltip go away when clicking on the underlying element?
+     */
+    shouldDismissOnClick?: boolean;
+    /**
+     * Whether there is a fixed max width, causing content to wrap onto the next line
+     */
+    shouldWrapContent?: boolean;
+    /**
+     * Text to appear in tooltip
+     */
+    text?: ReactNode;
+    /**
+     * Color variant of the tooltip
+     */
+    color?: 'primary' | 'secondary' | 'white';
+    /**
+     * Optional z-index for the tooltip
+     */
+    zIndex?: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,gBAAgB,GACxB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,GACb,SAAS,GACT,YAAY,GACZ,UAAU,GACV,aAAa,CAAA;AAEjB,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAErD,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,UAAU,GAAG,IAAI,CAAA;IAC3C;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA"}

package/dist/contexts/MediaContext.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export type MediaContextType = {
+    isExtraSmall: boolean;
+    isSmall: boolean;
+    isMedium: boolean;
+    isLarge: boolean;
+    isExtraLarge: boolean;
+    isAboveExtraSmall: boolean;
+    isAboveSmall: boolean;
+    isAboveMedium: boolean;
+    isAboveLarge: boolean;
+    isAboveExtraLarge: boolean;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    matchesQuery: (query: string) => boolean;
+};
+type MediaProviderProps = {
+    children: ReactNode;
+};
+/**
+ * Provider component that monitors media queries and makes responsive breakpoints
+ * available throughout the app via context.
+ */
+export declare const MediaProvider: ({ children }: MediaProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access media query state from the MediaContext.
+ * This hook should be used instead of the original useMedia hook
+ * to avoid creating multiple listeners in every component.
+ */
+export declare const useMedia: () => MediaContextType;
+export {};
+//# sourceMappingURL=MediaContext.d.ts.map

package/dist/contexts/MediaContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContext.d.ts","sourceRoot":"","sources":["../../src/contexts/MediaContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAW,MAAM,OAAO,CAAA;AAMrE,MAAM,MAAM,gBAAgB,GAAG;IAE7B,YAAY,EAAE,OAAO,CAAA;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,OAAO,CAAA;IAGrB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,OAAO,CAAA;IACtB,YAAY,EAAE,OAAO,CAAA;IACrB,iBAAiB,EAAE,OAAO,CAAA;IAG1B,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;IAGlB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;CACzC,CAAA;AAID,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,iBAAkB,kBAAkB,qDA2D7D,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,QAAO,gBAQ3B,CAAA"}

package/dist/contexts/MediaContext.js

@@ -0,0 +1,79 @@
+import { __assign } from '../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+import { useMedia as useMedia$1 } from 'react-use';
+import { breakpoints } from '../foundations/breakpoints/breakpoints.js';
+
+var MediaContext = createContext(null);
+/**
+ * Provider component that monitors media queries and makes responsive breakpoints
+ * available throughout the app via context.
+ */
+var MediaProvider = function (_a) {
+    var children = _a.children;
+    // Use react-use's useMedia hook for each breakpoint query
+    var isExtraSmall = useMedia$1(breakpoints.down.xs);
+    var isSmall = useMedia$1(breakpoints.down.sm);
+    var isMedium = useMedia$1(breakpoints.down.md);
+    var isLarge = useMedia$1(breakpoints.down.lg);
+    var isExtraLarge = useMedia$1(breakpoints.down.xl);
+    var isAboveExtraSmall = useMedia$1(breakpoints.up.xs);
+    var isAboveSmall = useMedia$1(breakpoints.up.sm);
+    var isAboveMedium = useMedia$1(breakpoints.up.md);
+    var isAboveLarge = useMedia$1(breakpoints.up.lg);
+    var isAboveExtraLarge = useMedia$1(breakpoints.up.xl);
+    // Derived properties
+    var isMobile = isSmall; // <= 768px
+    var isTablet = !isSmall && !isAboveMedium; // > 768px and <= 1024px
+    var isDesktop = isAboveMedium; // > 1024px
+    // Utility function for custom queries
+    var matchesQuery = function (query) {
+        return window.matchMedia(query).matches;
+    };
+    var value = useMemo(function () { return ({
+        isExtraSmall: isExtraSmall,
+        isSmall: isSmall,
+        isMedium: isMedium,
+        isLarge: isLarge,
+        isExtraLarge: isExtraLarge,
+        isAboveExtraSmall: isAboveExtraSmall,
+        isAboveSmall: isAboveSmall,
+        isAboveMedium: isAboveMedium,
+        isAboveLarge: isAboveLarge,
+        isAboveExtraLarge: isAboveExtraLarge,
+        isMobile: isMobile,
+        isTablet: isTablet,
+        isDesktop: isDesktop,
+        matchesQuery: matchesQuery
+    }); }, [
+        isExtraSmall,
+        isSmall,
+        isMedium,
+        isLarge,
+        isExtraLarge,
+        isAboveExtraSmall,
+        isAboveSmall,
+        isAboveMedium,
+        isAboveLarge,
+        isAboveExtraLarge,
+        isMobile,
+        isTablet,
+        isDesktop
+    ]);
+    return jsx(MediaContext.Provider, __assign({ value: value }, { children: children }));
+};
+/**
+ * Hook to access media query state from the MediaContext.
+ * This hook should be used instead of the original useMedia hook
+ * to avoid creating multiple listeners in every component.
+ */
+var useMedia = function () {
+    var context = useContext(MediaContext);
+    if (context === null) {
+        throw new Error('useMedia must be used within a MediaProvider');
+    }
+    return context;
+};
+
+export { MediaProvider, useMedia };
+//# sourceMappingURL=MediaContext.js.map

package/dist/contexts/MediaContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContext.js","sources":["../../src/contexts/MediaContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useMemo } from 'react'\n\nimport { useMedia as useMediaQuery } from 'react-use'\n\nimport { breakpoints } from '../foundations/breakpoints'\n\nexport type MediaContextType = {\n  // Specific size breakpoint checks\n  isExtraSmall: boolean // <= 480px\n  isSmall: boolean // <= 768px\n  isMedium: boolean // <= 1024px\n  isLarge: boolean // <= 1280px\n  isExtraLarge: boolean // <= 1440px\n\n  // Specific \"larger than\" checks\n  isAboveExtraSmall: boolean // > 480px\n  isAboveSmall: boolean // > 768px\n  isAboveMedium: boolean // > 1024px\n  isAboveLarge: boolean // > 1280px\n  isAboveExtraLarge: boolean // > 1440px\n\n  // Common device categories\n  isMobile: boolean // <= 768px\n  isTablet: boolean // > 768px and <= 1024px\n  isDesktop: boolean // > 1024px\n\n  // Utility function for custom queries\n  matchesQuery: (query: string) => boolean\n}\n\nconst MediaContext = createContext<MediaContextType | null>(null)\n\ntype MediaProviderProps = {\n  children: ReactNode\n}\n\n/**\n * Provider component that monitors media queries and makes responsive breakpoints\n * available throughout the app via context.\n */\nexport const MediaProvider = ({ children }: MediaProviderProps) => {\n  // Use react-use's useMedia hook for each breakpoint query\n  const isExtraSmall = useMediaQuery(breakpoints.down.xs)\n  const isSmall = useMediaQuery(breakpoints.down.sm)\n  const isMedium = useMediaQuery(breakpoints.down.md)\n  const isLarge = useMediaQuery(breakpoints.down.lg)\n  const isExtraLarge = useMediaQuery(breakpoints.down.xl)\n\n  const isAboveExtraSmall = useMediaQuery(breakpoints.up.xs)\n  const isAboveSmall = useMediaQuery(breakpoints.up.sm)\n  const isAboveMedium = useMediaQuery(breakpoints.up.md)\n  const isAboveLarge = useMediaQuery(breakpoints.up.lg)\n  const isAboveExtraLarge = useMediaQuery(breakpoints.up.xl)\n\n  // Derived properties\n  const isMobile = isSmall // <= 768px\n  const isTablet = !isSmall && !isAboveMedium // > 768px and <= 1024px\n  const isDesktop = isAboveMedium // > 1024px\n\n  // Utility function for custom queries\n  const matchesQuery = (query: string) => {\n    return window.matchMedia(query).matches\n  }\n\n  const value = useMemo(\n    () => ({\n      isExtraSmall,\n      isSmall,\n      isMedium,\n      isLarge,\n      isExtraLarge,\n      isAboveExtraSmall,\n      isAboveSmall,\n      isAboveMedium,\n      isAboveLarge,\n      isAboveExtraLarge,\n      isMobile,\n      isTablet,\n      isDesktop,\n      matchesQuery\n    }),\n    [\n      isExtraSmall,\n      isSmall,\n      isMedium,\n      isLarge,\n      isExtraLarge,\n      isAboveExtraSmall,\n      isAboveSmall,\n      isAboveMedium,\n      isAboveLarge,\n      isAboveExtraLarge,\n      isMobile,\n      isTablet,\n      isDesktop\n    ]\n  )\n\n  return <MediaContext.Provider value={value}>{children}</MediaContext.Provider>\n}\n\n/**\n * Hook to access media query state from the MediaContext.\n * This hook should be used instead of the original useMedia hook\n * to avoid creating multiple listeners in every component.\n */\nexport const useMedia = (): MediaContextType => {\n  const context = useContext(MediaContext)\n\n  if (context === null) {\n    throw new Error('useMedia must be used within a MediaProvider')\n  }\n\n  return context\n}\n"],"names":["useMediaQuery","_jsx"],"mappings":";;;;;;AA8BA,IAAM,YAAY,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAA;AAMjE;;;AAGG;AACI,IAAM,aAAa,GAAG,UAAC,EAAgC,EAAA;AAA9B,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;;IAEtC,IAAM,YAAY,GAAGA,UAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACvD,IAAM,OAAO,GAAGA,UAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAClD,IAAM,QAAQ,GAAGA,UAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACnD,IAAM,OAAO,GAAGA,UAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAClD,IAAM,YAAY,GAAGA,UAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAEvD,IAAM,iBAAiB,GAAGA,UAAa,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IAC1D,IAAM,YAAY,GAAGA,UAAa,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACrD,IAAM,aAAa,GAAGA,UAAa,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACtD,IAAM,YAAY,GAAGA,UAAa,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACrD,IAAM,iBAAiB,GAAGA,UAAa,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;;AAG1D,IAAA,IAAM,QAAQ,GAAG,OAAO,CAAA;IACxB,IAAM,QAAQ,GAAG,CAAC,OAAO,IAAI,CAAC,aAAa,CAAA;AAC3C,IAAA,IAAM,SAAS,GAAG,aAAa,CAAA;;IAG/B,IAAM,YAAY,GAAG,UAAC,KAAa,EAAA;QACjC,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAA;AACzC,KAAC,CAAA;AAED,IAAA,IAAM,KAAK,GAAG,OAAO,CACnB,YAAA,EAAM,QAAC;AACL,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,OAAO,EAAA,OAAA;AACP,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,OAAO,EAAA,OAAA;AACP,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,iBAAiB,EAAA,iBAAA;AACjB,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAA,aAAA;AACb,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,iBAAiB,EAAA,iBAAA;AACjB,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,SAAS,EAAA,SAAA;AACT,QAAA,YAAY,EAAA,YAAA;KACb,EAAC,EAAA,EACF;QACE,YAAY;QACZ,OAAO;QACP,QAAQ;QACR,OAAO;QACP,YAAY;QACZ,iBAAiB;QACjB,YAAY;QACZ,aAAa;QACb,YAAY;QACZ,iBAAiB;QACjB,QAAQ;QACR,QAAQ;QACR,SAAS;AACV,KAAA,CACF,CAAA;IAED,OAAOC,GAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,QAAA,CAAA,EAAC,KAAK,EAAE,KAAK,EAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAyB,CAAA;AAChF,EAAC;AAED;;;;AAIG;AACU,IAAA,QAAQ,GAAG,YAAA;AACtB,IAAA,IAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAExC,IAAI,OAAO,KAAK,IAAI,EAAE;AACpB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;AAChE,KAAA;AAED,IAAA,OAAO,OAAO,CAAA;AAChB;;;;"}

package/dist/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export { MediaProvider } from './MediaContext';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/css-entry.d.ts

@@ -0,0 +1,12 @@
+import './foundations/reset/reset.css';
+import './foundations/typography/avenir.css';
+import './foundations/typography/fonts.css';
+import './foundations/spacing/spacing.css';
+import './foundations/color/primitive.css';
+import './foundations/color/semantic.css';
+import './foundations/motion/motion.css';
+import './foundations/corner-radius/corner-radius.css';
+import './foundations/shadows/shadows.css';
+import './foundations/transforms/transforms.css';
+import './foundations/layers/layers.css';
+//# sourceMappingURL=css-entry.d.ts.map

package/dist/css-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-entry.d.ts","sourceRoot":"","sources":["../src/css-entry.ts"],"names":[],"mappings":"AAGA,OAAO,+BAA+B,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,mCAAmC,CAAA;AAC1C,OAAO,mCAAmC,CAAA;AAC1C,OAAO,kCAAkC,CAAA;AACzC,OAAO,iCAAiC,CAAA;AACxC,OAAO,+CAA+C,CAAA;AACtD,OAAO,mCAAmC,CAAA;AAC1C,OAAO,yCAAyC,CAAA;AAChD,OAAO,iCAAiC,CAAA"}

package/dist/foundations/breakpoints/breakpoints.d.ts

@@ -0,0 +1,124 @@
+/**
+ * Audius Breakpoint System
+ *
+ * Standard breakpoints for responsive design. These values align with common
+ * device sizes and are used throughout the application for consistent
+ * responsive behavior.
+ */
+export declare const breakpoints: {
+    values: {
+        /**
+         * Extra small devices (portrait phones)
+         */
+        xs: number;
+        /**
+         * Small devices (landscape phones)
+         */
+        sm: number;
+        /**
+         * Medium devices (tablets)
+         */
+        md: number;
+        /**
+         * Large devices (desktops)
+         */
+        lg: number;
+        /**
+         * Extra large devices (large desktops)
+         */
+        xl: number;
+    };
+    /**
+     * Media query strings for max-width (smaller than breakpoint)
+     */
+    down: {
+        /**
+         * @example (max-width: 480px)
+         * Smaller than xs breakpoint (mobile phones)
+         */
+        xs: string;
+        /**
+         * @example (max-width: 768px)
+         * Smaller than sm breakpoint (includes mobile phones and small tablets)
+         */
+        sm: string;
+        /**
+         * @example (max-width: 1024px)
+         * Smaller than md breakpoint (includes mobile phones, tablets, and small laptops)
+         */
+        md: string;
+        /**
+         * @example (max-width: 1280px)
+         * Smaller than lg breakpoint (includes all except large desktops)
+         */
+        lg: string;
+        /**
+         * @example (max-width: 1440px)
+         * Smaller than xl breakpoint
+         */
+        xl: string;
+    };
+    /**
+     * Media query strings for min-width (larger than breakpoint)
+     */
+    up: {
+        /**
+         * @example (min-width: 481px)
+         * Larger than xs breakpoint (tablets and above)
+         */
+        xs: string;
+        /**
+         * @example (min-width: 769px)
+         * Larger than sm breakpoint (desktops and above)
+         */
+        sm: string;
+        /**
+         * @example (min-width: 1025px)
+         * Larger than md breakpoint (larger desktops)
+         */
+        md: string;
+        /**
+         * @example (min-width: 1281px)
+         * Larger than lg breakpoint (large desktops)
+         */
+        lg: string;
+        /**
+         * @example (min-width: 1441px)
+         * Larger than xl breakpoint (extra large desktops)
+         */
+        xl: string;
+    };
+    /**
+     * Media query strings for ranges between breakpoints
+     */
+    between: {
+        /**
+         * @example (min-width: 481px) and (max-width: 768px)
+         * Between xs and sm breakpoints (small tablets)
+         */
+        xs_sm: string;
+        /**
+         * @example (min-width: 769px) and (max-width: 1024px)
+         * Between sm and md breakpoints (tablets)
+         */
+        sm_md: string;
+        /**
+         * @example (min-width: 1025px) and (max-width: 1280px)
+         * Between md and lg breakpoints (small desktops)
+         */
+        md_lg: string;
+        /**
+         * @example (min-width: 1281px) and (max-width: 1440px)
+         * Between lg and xl breakpoints (medium desktops)
+         */
+        lg_xl: string;
+    };
+    /**
+     * Helper function to create a custom media query
+     * @param minWidth minimum width in pixels
+     * @param maxWidth maximum width in pixels
+     * @returns media query string
+     */
+    createCustomQuery: (minWidth?: number, maxWidth?: number) => string;
+};
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/foundations/breakpoints/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/foundations/breakpoints/breakpoints.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,WAAW;;QAGpB;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;IAIL;;OAEG;;QAED;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;;IAIL;;OAEG;;QAED;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;;IAIL;;OAEG;;QAED;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;;IAIL;;;;;OAKG;mCAC4B,MAAM,aAAa,MAAM,KAAG,MAAM;CAYlE,CAAA"}

package/dist/foundations/breakpoints/breakpoints.js

@@ -0,0 +1,138 @@
+/**
+ * Audius Breakpoint System
+ *
+ * Standard breakpoints for responsive design. These values align with common
+ * device sizes and are used throughout the application for consistent
+ * responsive behavior.
+ */
+var breakpoints = {
+    // Maximum width values for each breakpoint
+    values: {
+        /**
+         * Extra small devices (portrait phones)
+         */
+        xs: 480,
+        /**
+         * Small devices (landscape phones)
+         */
+        sm: 768,
+        /**
+         * Medium devices (tablets)
+         */
+        md: 1024,
+        /**
+         * Large devices (desktops)
+         */
+        lg: 1280,
+        /**
+         * Extra large devices (large desktops)
+         */
+        xl: 1440
+    },
+    /**
+     * Media query strings for max-width (smaller than breakpoint)
+     */
+    down: {
+        /**
+         * @example (max-width: 480px)
+         * Smaller than xs breakpoint (mobile phones)
+         */
+        xs: "(max-width: 480px)",
+        /**
+         * @example (max-width: 768px)
+         * Smaller than sm breakpoint (includes mobile phones and small tablets)
+         */
+        sm: "(max-width: 768px)",
+        /**
+         * @example (max-width: 1024px)
+         * Smaller than md breakpoint (includes mobile phones, tablets, and small laptops)
+         */
+        md: "(max-width: 1024px)",
+        /**
+         * @example (max-width: 1280px)
+         * Smaller than lg breakpoint (includes all except large desktops)
+         */
+        lg: "(max-width: 1280px)",
+        /**
+         * @example (max-width: 1440px)
+         * Smaller than xl breakpoint
+         */
+        xl: "(max-width: 1440px)"
+    },
+    /**
+     * Media query strings for min-width (larger than breakpoint)
+     */
+    up: {
+        /**
+         * @example (min-width: 481px)
+         * Larger than xs breakpoint (tablets and above)
+         */
+        xs: "(min-width: 481px)",
+        /**
+         * @example (min-width: 769px)
+         * Larger than sm breakpoint (desktops and above)
+         */
+        sm: "(min-width: 769px)",
+        /**
+         * @example (min-width: 1025px)
+         * Larger than md breakpoint (larger desktops)
+         */
+        md: "(min-width: 1025px)",
+        /**
+         * @example (min-width: 1281px)
+         * Larger than lg breakpoint (large desktops)
+         */
+        lg: "(min-width: 1281px)",
+        /**
+         * @example (min-width: 1441px)
+         * Larger than xl breakpoint (extra large desktops)
+         */
+        xl: "(min-width: 1441px)"
+    },
+    /**
+     * Media query strings for ranges between breakpoints
+     */
+    between: {
+        /**
+         * @example (min-width: 481px) and (max-width: 768px)
+         * Between xs and sm breakpoints (small tablets)
+         */
+        xs_sm: "(min-width: 481px) and (max-width: 768px)",
+        /**
+         * @example (min-width: 769px) and (max-width: 1024px)
+         * Between sm and md breakpoints (tablets)
+         */
+        sm_md: "(min-width: 769px) and (max-width: 1024px)",
+        /**
+         * @example (min-width: 1025px) and (max-width: 1280px)
+         * Between md and lg breakpoints (small desktops)
+         */
+        md_lg: "(min-width: 1025px) and (max-width: 1280px)",
+        /**
+         * @example (min-width: 1281px) and (max-width: 1440px)
+         * Between lg and xl breakpoints (medium desktops)
+         */
+        lg_xl: "(min-width: 1281px) and (max-width: 1440px)"
+    },
+    /**
+     * Helper function to create a custom media query
+     * @param minWidth minimum width in pixels
+     * @param maxWidth maximum width in pixels
+     * @returns media query string
+     */
+    createCustomQuery: function (minWidth, maxWidth) {
+        if (minWidth && maxWidth) {
+            return "(min-width: ".concat(minWidth, "px) and (max-width: ").concat(maxWidth, "px)");
+        }
+        if (minWidth) {
+            return "(min-width: ".concat(minWidth, "px)");
+        }
+        if (maxWidth) {
+            return "(max-width: ".concat(maxWidth, "px)");
+        }
+        return '';
+    }
+};
+
+export { breakpoints };
+//# sourceMappingURL=breakpoints.js.map

package/dist/foundations/breakpoints/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sources":["../../../src/foundations/breakpoints/breakpoints.ts"],"sourcesContent":["/**\n * Audius Breakpoint System\n *\n * Standard breakpoints for responsive design. These values align with common\n * device sizes and are used throughout the application for consistent\n * responsive behavior.\n */\n\nexport const breakpoints = {\n  // Maximum width values for each breakpoint\n  values: {\n    /**\n     * Extra small devices (portrait phones)\n     */\n    xs: 480,\n    /**\n     * Small devices (landscape phones)\n     */\n    sm: 768,\n    /**\n     * Medium devices (tablets)\n     */\n    md: 1024,\n    /**\n     * Large devices (desktops)\n     */\n    lg: 1280,\n    /**\n     * Extra large devices (large desktops)\n     */\n    xl: 1440\n  },\n\n  /**\n   * Media query strings for max-width (smaller than breakpoint)\n   */\n  down: {\n    /**\n     * @example (max-width: 480px)\n     * Smaller than xs breakpoint (mobile phones)\n     */\n    xs: `(max-width: 480px)`,\n    /**\n     * @example (max-width: 768px)\n     * Smaller than sm breakpoint (includes mobile phones and small tablets)\n     */\n    sm: `(max-width: 768px)`,\n    /**\n     * @example (max-width: 1024px)\n     * Smaller than md breakpoint (includes mobile phones, tablets, and small laptops)\n     */\n    md: `(max-width: 1024px)`,\n    /**\n     * @example (max-width: 1280px)\n     * Smaller than lg breakpoint (includes all except large desktops)\n     */\n    lg: `(max-width: 1280px)`,\n    /**\n     * @example (max-width: 1440px)\n     * Smaller than xl breakpoint\n     */\n    xl: `(max-width: 1440px)`\n  },\n\n  /**\n   * Media query strings for min-width (larger than breakpoint)\n   */\n  up: {\n    /**\n     * @example (min-width: 481px)\n     * Larger than xs breakpoint (tablets and above)\n     */\n    xs: `(min-width: 481px)`,\n    /**\n     * @example (min-width: 769px)\n     * Larger than sm breakpoint (desktops and above)\n     */\n    sm: `(min-width: 769px)`,\n    /**\n     * @example (min-width: 1025px)\n     * Larger than md breakpoint (larger desktops)\n     */\n    md: `(min-width: 1025px)`,\n    /**\n     * @example (min-width: 1281px)\n     * Larger than lg breakpoint (large desktops)\n     */\n    lg: `(min-width: 1281px)`,\n    /**\n     * @example (min-width: 1441px)\n     * Larger than xl breakpoint (extra large desktops)\n     */\n    xl: `(min-width: 1441px)`\n  },\n\n  /**\n   * Media query strings for ranges between breakpoints\n   */\n  between: {\n    /**\n     * @example (min-width: 481px) and (max-width: 768px)\n     * Between xs and sm breakpoints (small tablets)\n     */\n    xs_sm: `(min-width: 481px) and (max-width: 768px)`,\n    /**\n     * @example (min-width: 769px) and (max-width: 1024px)\n     * Between sm and md breakpoints (tablets)\n     */\n    sm_md: `(min-width: 769px) and (max-width: 1024px)`,\n    /**\n     * @example (min-width: 1025px) and (max-width: 1280px)\n     * Between md and lg breakpoints (small desktops)\n     */\n    md_lg: `(min-width: 1025px) and (max-width: 1280px)`,\n    /**\n     * @example (min-width: 1281px) and (max-width: 1440px)\n     * Between lg and xl breakpoints (medium desktops)\n     */\n    lg_xl: `(min-width: 1281px) and (max-width: 1440px)`\n  },\n\n  /**\n   * Helper function to create a custom media query\n   * @param minWidth minimum width in pixels\n   * @param maxWidth maximum width in pixels\n   * @returns media query string\n   */\n  createCustomQuery: (minWidth?: number, maxWidth?: number): string => {\n    if (minWidth && maxWidth) {\n      return `(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`\n    }\n    if (minWidth) {\n      return `(min-width: ${minWidth}px)`\n    }\n    if (maxWidth) {\n      return `(max-width: ${maxWidth}px)`\n    }\n    return ''\n  }\n}\n"],"names":[],"mappings":"AAAA;;;;;;AAMG;AAEU,IAAA,WAAW,GAAG;;AAEzB,IAAA,MAAM,EAAE;AACN;;AAEG;AACH,QAAA,EAAE,EAAE,GAAG;AACP;;AAEG;AACH,QAAA,EAAE,EAAE,GAAG;AACP;;AAEG;AACH,QAAA,EAAE,EAAE,IAAI;AACR;;AAEG;AACH,QAAA,EAAE,EAAE,IAAI;AACR;;AAEG;AACH,QAAA,EAAE,EAAE,IAAI;AACT,KAAA;AAED;;AAEG;AACH,IAAA,IAAI,EAAE;AACJ;;;AAGG;AACH,QAAA,EAAE,EAAE,oBAAoB;AACxB;;;AAGG;AACH,QAAA,EAAE,EAAE,oBAAoB;AACxB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AACzB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AACzB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AAC1B,KAAA;AAED;;AAEG;AACH,IAAA,EAAE,EAAE;AACF;;;AAGG;AACH,QAAA,EAAE,EAAE,oBAAoB;AACxB;;;AAGG;AACH,QAAA,EAAE,EAAE,oBAAoB;AACxB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AACzB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AACzB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AAC1B,KAAA;AAED;;AAEG;AACH,IAAA,OAAO,EAAE;AACP;;;AAGG;AACH,QAAA,KAAK,EAAE,2CAA2C;AAClD;;;AAGG;AACH,QAAA,KAAK,EAAE,4CAA4C;AACnD;;;AAGG;AACH,QAAA,KAAK,EAAE,6CAA6C;AACpD;;;AAGG;AACH,QAAA,KAAK,EAAE,6CAA6C;AACrD,KAAA;AAED;;;;;AAKG;AACH,IAAA,iBAAiB,EAAE,UAAC,QAAiB,EAAE,QAAiB,EAAA;QACtD,IAAI,QAAQ,IAAI,QAAQ,EAAE;AACxB,YAAA,OAAO,cAAe,CAAA,MAAA,CAAA,QAAQ,EAAuB,sBAAA,CAAA,CAAA,MAAA,CAAA,QAAQ,QAAK,CAAA;AACnE,SAAA;AACD,QAAA,IAAI,QAAQ,EAAE;YACZ,OAAO,cAAA,CAAA,MAAA,CAAe,QAAQ,EAAA,KAAA,CAAK,CAAA;AACpC,SAAA;AACD,QAAA,IAAI,QAAQ,EAAE;YACZ,OAAO,cAAA,CAAA,MAAA,CAAe,QAAQ,EAAA,KAAA,CAAK,CAAA;AACpC,SAAA;AACD,QAAA,OAAO,EAAE,CAAA;KACV;;;;;"}

package/dist/foundations/breakpoints/index.d.ts

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

package/dist/foundations/breakpoints/index.d.ts.map

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