@audius/harmony 0.5.0 → 0.5.2

package/dist/components/modal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/modal/types.ts"],"sourcesContent":["import { HTMLAttributes, ReactNode } from 'react'\n\nimport { IconComponent } from '../icon'\nimport { FlexProps } from '../layout/Flex'\nimport { ScrollbarProps } from '../scrollbar'\n\nexport enum Anchor {\n  CENTER = 'CENTER',\n  TOP = 'TOP',\n  BOTTOM = 'BOTTOM'\n}\n\nexport type ModalProps = {\n  /**\n   * Optional unique key to assign to the modal.\n   * If not provided, it is auto-generated.\n   */\n  modalKey?: string\n\n  /**\n   * Modal contents\n   */\n  children: ReactNode\n\n  /**\n   * Callback fired when the modal is closed\n   * Should set isOpen accordingly\n   */\n  onClose: () => void\n\n  /**\n   * Callback fired when the modal children are removed from the dom.\n   */\n  onClosed?: () => void\n\n  /**\n   * Whether or not the modal is open\n   */\n  isOpen: boolean\n\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  showTitleHeader?: boolean\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  title?: ReactNode\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  subtitle?: string\n\n  /**\n   * Whether to dismiss on a click outside the modal\n   */\n  dismissOnClickOutside?: boolean\n\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  showDismissButton?: boolean\n\n  /**\n   * Manually set z-index.\n   *\n   * By default, the z-index is 10000 and the modal background shadow is\n   * set to z-index - 1 so that the modal appears on top of the shadow.\n   *\n   * If you would like to nest modals, it's important to increase the z-index by\n   * 2 for every modal so that the parent modal lives behind the child modal's shadow.\n   */\n  zIndex?: number\n\n  /** @deprecated */\n  allowScroll?: boolean\n\n  // Classnames\n\n  wrapperClassName?: string\n\n  /**\n   *  Set max-width on bodyClass to set the modal width\n   */\n  bodyClassName?: string\n\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  titleClassName?: string\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  subtitleClassName?: string\n  /**\n   * @deprecated in favor of composability - use ModalHeader sub-component instead.\n   */\n  headerContainerClassName?: string\n\n  anchor?: Anchor\n  verticalAnchorOffset?: number\n\n  /**\n   * Horizontal padding between modal edges and viewport edge\n   */\n  horizontalPadding?: number\n\n  /**\n   * @deprecated in favor of composability - use ModalContent sub-component instead\n   */\n  contentHorizontalPadding?: number\n\n  /**\n   * Optional aria description for the dialog.\n   * If not provided, it is auto-generated.\n   */\n  'aria-describedby'?: string\n\n  /**\n   * Optional aria label for the dialog.\n   * If not provided, it is auto-generated.\n   */\n  'aria-labelledby'?: string\n  /**\n   * If provided, conform to standard modal widths\n   * (only small currently implemented)\n   */\n  size?: 'small' | 'medium' | 'large'\n  className?: string\n}\n\nexport type ModalContentProps = ScrollbarProps\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement> & {\n  dismissButtonClassName?: string\n  showDismissButton?: boolean\n  onClose?: () => void\n  children: ReactNode\n}\n\nexport type ModalTitleProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n  subtitleClassName?: string\n  /**\n   * @deprecated use Icon prop instead\n   */\n  icon?: ReactNode\n  Icon?: IconComponent\n  iconClassName?: string\n  title: ReactNode\n  titleClassName?: string\n  subtitle?: ReactNode\n  titleId?: string\n  subtitleId?: string\n}\n\nexport type ModalFooterProps = FlexProps\n"],"names":[],"mappings":"IAMY,OAIX;AAJD,CAAA,UAAY,MAAM,EAAA;AAChB,IAAA,MAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,MAAA,CAAA,KAAA,CAAA,GAAA,KAAW,CAAA;AACX,IAAA,MAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACnB,CAAC,EAJW,MAAM,KAAN,MAAM,GAIjB,EAAA,CAAA,CAAA;;;;"}

package/dist/components/music-badge/MusicBadge.d.ts

@@ -0,0 +1,25 @@
+import { ComponentPropsWithoutRef } from 'react';
+import type { IconComponent } from "../icon";
+import { SpecialColors } from "../../foundations";
+export type MusicBadgeVariant = 'default' | 'accent';
+export type MusicBadgeSize = 's' | 'm';
+export type MusicBadgeProps = {
+    /**
+     * The type of the MusicBadge
+     */
+    variant?: MusicBadgeVariant;
+    /**
+     * The size of the MusicBadge
+     */
+    size?: 's' | 'm';
+    /**
+     * The icon to display in the left of the MusicBadge
+     */
+    icon?: IconComponent;
+    /**
+     * Override the colors of the MusicBadge
+     */
+    color?: SpecialColors;
+} & ComponentPropsWithoutRef<'div'>;
+export declare const MusicBadge: (props: MusicBadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MusicBadge.d.ts.map

package/dist/components/music-badge/MusicBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MusicBadge.d.ts","sourceRoot":"","sources":["../../../src/components/music-badge/MusicBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAKhD,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgC;AAC7D,OAAO,EAAE,aAAa,EAAE,0BAA4B;AAKpD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,CAAA;AACpD,MAAM,MAAM,cAAc,GAAG,GAAG,GAAG,GAAG,CAAA;AAEtC,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,UAAU,UAAW,eAAe,qDA0DhD,CAAA"}

package/dist/components/music-badge/MusicBadge.js

@@ -0,0 +1,40 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useTheme } from '@emotion/react';
+import Color from 'color';
+import { Flex } from '../layout/Flex/Flex.js';
+import { Text } from '../text/Text.js';
+
+var MusicBadge = function (props) {
+    var _a = props.variant, variant = _a === void 0 ? 'default' : _a, _b = props.size, size = _b === void 0 ? 'm' : _b, Icon = props.icon, colorProp = props.color, children = props.children;
+    var color = useTheme().color;
+    var gap = size === 'm' ? 's' : 'xs';
+    var height = size === 'm' ? '2xl' : 'xl';
+    var backgroundColor = colorProp
+        ? color.special[colorProp]
+        : variant === 'default'
+            ? color.background.default
+            : color.background.accent;
+    var textColor = colorProp
+        ? color.special[colorProp]
+        : variant === 'default'
+            ? color.text.default
+            : color.text.accent;
+    var iconColor = colorProp
+        ? color.special[colorProp]
+        : variant === 'default'
+            ? color.icon.default
+            : color.icon.accent;
+    var borderColor = colorProp
+        ? Color(color.special[colorProp]).fade(0.5).toString()
+        : variant === 'default'
+            ? color.border.strong
+            : color.border.accent;
+    return (jsxs(Flex, __assign({ alignItems: 'center', justifyContent: 'center', borderRadius: 's', border: 'strong', gap: gap, h: height, ph: size, css: {
+            backgroundColor: Color(backgroundColor).fade(0.92).toString(),
+            borderColor: borderColor
+        } }, { children: [Icon ? jsx(Icon, { size: size, fill: iconColor }) : null, jsx(Text, __assign({ variant: 'label', size: size, css: { color: textColor, whiteSpace: 'nowrap' } }, { children: children }))] })));
+};
+
+export { MusicBadge };
+//# sourceMappingURL=MusicBadge.js.map

package/dist/components/music-badge/MusicBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MusicBadge.js","sources":["../../../src/components/music-badge/MusicBadge.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport Color from 'color'\n\nimport type { IconComponent } from '~harmony/components/icon'\nimport { SpecialColors } from '~harmony/foundations'\n\nimport { Flex } from '../layout/Flex'\nimport { Text } from '../text/Text'\n\nexport type MusicBadgeVariant = 'default' | 'accent'\nexport type MusicBadgeSize = 's' | 'm'\n\nexport type MusicBadgeProps = {\n  /**\n   * The type of the MusicBadge\n   */\n  variant?: MusicBadgeVariant\n  /**\n   * The size of the MusicBadge\n   */\n  size?: 's' | 'm'\n  /**\n   * The icon to display in the left of the MusicBadge\n   */\n  icon?: IconComponent\n  /**\n   * Override the colors of the MusicBadge\n   */\n  color?: SpecialColors\n} & ComponentPropsWithoutRef<'div'>\n\nexport const MusicBadge = (props: MusicBadgeProps) => {\n  const {\n    variant = 'default',\n    size = 'm',\n    icon: Icon,\n    color: colorProp,\n    children\n  } = props\n  const { color } = useTheme()\n\n  const gap = size === 'm' ? 's' : 'xs'\n  const height = size === 'm' ? '2xl' : 'xl'\n\n  const backgroundColor = colorProp\n    ? color.special[colorProp]\n    : variant === 'default'\n      ? color.background.default\n      : color.background.accent\n  const textColor = colorProp\n    ? color.special[colorProp]\n    : variant === 'default'\n      ? color.text.default\n      : color.text.accent\n  const iconColor = colorProp\n    ? color.special[colorProp]\n    : variant === 'default'\n      ? color.icon.default\n      : color.icon.accent\n  const borderColor = colorProp\n    ? Color(color.special[colorProp]).fade(0.5).toString()\n    : variant === 'default'\n      ? color.border.strong\n      : color.border.accent\n\n  return (\n    <Flex\n      alignItems='center'\n      justifyContent='center'\n      borderRadius='s'\n      border='strong'\n      gap={gap}\n      h={height}\n      ph={size}\n      css={{\n        backgroundColor: Color(backgroundColor).fade(0.92).toString(),\n        borderColor\n      }}\n    >\n      {Icon ? <Icon size={size} fill={iconColor} /> : null}\n      <Text\n        variant='label'\n        size={size}\n        css={{ color: textColor, whiteSpace: 'nowrap' }}\n      >\n        {children}\n      </Text>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAiCO,IAAM,UAAU,GAAG,UAAC,KAAsB,EAAA;AAE7C,IAAA,IAAA,EAKE,GAAA,KAAK,CALY,OAAA,EAAnB,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,GAAA,EAAA,EACnB,EAIE,GAAA,KAAK,CAJG,IAAA,EAAV,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,GAAG,GAAA,EAAA,EACJ,IAAI,GAGR,KAAK,CAAA,IAHG,EACH,SAAS,GAEd,KAAK,CAAA,KAFS,EAChB,QAAQ,GACN,KAAK,SADC,CACD;AACD,IAAA,IAAA,KAAK,GAAK,QAAQ,EAAE,MAAf,CAAe;AAE5B,IAAA,IAAM,GAAG,GAAG,IAAI,KAAK,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AACrC,IAAA,IAAM,MAAM,GAAG,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,IAAI,CAAA;IAE1C,IAAM,eAAe,GAAG,SAAS;AAC/B,UAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;UACxB,OAAO,KAAK,SAAS;AACrB,cAAE,KAAK,CAAC,UAAU,CAAC,OAAO;AAC1B,cAAE,KAAK,CAAC,UAAU,CAAC,MAAM,CAAA;IAC7B,IAAM,SAAS,GAAG,SAAS;AACzB,UAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;UACxB,OAAO,KAAK,SAAS;AACrB,cAAE,KAAK,CAAC,IAAI,CAAC,OAAO;AACpB,cAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAA;IACvB,IAAM,SAAS,GAAG,SAAS;AACzB,UAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;UACxB,OAAO,KAAK,SAAS;AACrB,cAAE,KAAK,CAAC,IAAI,CAAC,OAAO;AACpB,cAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAA;IACvB,IAAM,WAAW,GAAG,SAAS;AAC3B,UAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE;UACpD,OAAO,KAAK,SAAS;AACrB,cAAE,KAAK,CAAC,MAAM,CAAC,MAAM;AACrB,cAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAA;AAEzB,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,YAAY,EAAC,GAAG,EAChB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAE,GAAG,EACR,CAAC,EAAE,MAAM,EACT,EAAE,EAAE,IAAI,EACR,GAAG,EAAE;AACH,YAAA,eAAe,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;AAC7D,YAAA,WAAW,EAAA,WAAA;SACZ,EAEA,EAAA,EAAA,QAAA,EAAA,CAAA,IAAI,GAAGC,IAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAI,CAAA,GAAG,IAAI,EACpDA,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAE9C,QAAQ,EAAA,CAAA,CACJ,CACF,EAAA,CAAA,CAAA,EACR;AACH;;;;"}

package/dist/components/music-badge/index.d.ts

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

package/dist/components/music-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/music-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/dist/components/nav-item/NavItem.d.ts

@@ -0,0 +1,7 @@
+import type { NavItemProps } from './types';
+/**
+ * A navigation item component, typically used in sidebars or navigation menus.
+ * Supports default, hover, and selected states, as well as optional left and right icons.
+ */
+export declare const NavItem: ({ children, leftIcon: LeftIcon, rightIcon: RightIcon, isSelected, onClick, textSize, hasNotification, leftOverride, variant, isChild, ...props }: NavItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NavItem.d.ts.map

package/dist/components/nav-item/NavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../../src/components/nav-item/NavItem.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C;;;GAGG;AACH,eAAO,MAAM,OAAO,qJAYjB,YAAY,qDA2Fd,CAAA"}

package/dist/components/nav-item/NavItem.js

@@ -0,0 +1,54 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { useMemo } from 'react';
+import { useTheme } from '@emotion/react';
+import { motion } from '../../foundations/motion/motion.js';
+import { Flex } from '../layout/Flex/Flex.js';
+import { NotificationCount } from '../notification-count/NotificationCount.js';
+import { Text } from '../text/Text.js';
+
+/**
+ * A navigation item component, typically used in sidebars or navigation menus.
+ * Supports default, hover, and selected states, as well as optional left and right icons.
+ */
+var NavItem = function (_a) {
+    var children = _a.children, LeftIcon = _a.leftIcon, RightIcon = _a.rightIcon, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.textSize, textSize = _c === void 0 ? 'l' : _c, _d = _a.hasNotification, hasNotification = _d === void 0 ? false : _d, leftOverride = _a.leftOverride, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.isChild, isChild = _f === void 0 ? false : _f, props = __rest(_a, ["children", "leftIcon", "rightIcon", "isSelected", "onClick", "textSize", "hasNotification", "leftOverride", "variant", "isChild"]);
+    var color = useTheme().color;
+    var hasLeftIcon = !!LeftIcon;
+    var hasRightIcon = !!RightIcon;
+    var backgroundColor = isSelected ? color.secondary.s400 : undefined;
+    var textAndIconColor = isSelected ? 'white' : 'default';
+    var insetBorderColor = isSelected
+        ? 'none'
+        : "inset 0 0 0 1px ".concat(color.border.default);
+    var leftIconWithNotification = useMemo(function () {
+        var icon = hasLeftIcon ? (jsx(LeftIcon, { size: 'l', color: textAndIconColor })) : null;
+        if (hasNotification && !!icon) {
+            return (jsx(NotificationCount, __assign({ size: 's', isSelected: isSelected }, { children: icon })));
+        }
+        return icon;
+    }, [hasNotification, hasLeftIcon, LeftIcon, textAndIconColor, isSelected]);
+    return (jsx(Flex, __assign({ alignItems: 'center', gap: 's', pl: 's', pr: 's', w: '240px', css: {
+            cursor: 'pointer',
+            transition: "background-color ".concat(motion.hover)
+        } }, props, { onClick: onClick }, { children: jsxs(Flex, __assign({ alignItems: 'center', flex: 1, gap: 'm', p: 's', borderRadius: 'm', css: {
+                backgroundColor: backgroundColor,
+                transition: "opacity ".concat(motion.quick),
+                '&:hover': {
+                    backgroundColor: isSelected ? undefined : color.background.surface2,
+                    boxShadow: insetBorderColor
+                },
+                '&:active': {
+                    opacity: !isSelected ? 0.8 : undefined,
+                    transition: "opacity ".concat(motion.quick)
+                }
+            } }, { children: [jsxs(Flex, __assign({ alignItems: 'center', gap: variant === 'compact' ? 'xs' : 'm', flex: 1, h: variant === 'compact' ? 'unit5' : 'unit6', pv: 's', css: {
+                        maxWidth: '240px'
+                    } }, { children: [leftOverride || leftIconWithNotification, jsx(Text, __assign({ variant: 'title', size: textSize, strength: 'weak', lineHeight: 'single', color: textAndIconColor, ellipses: true, css: {
+                                flex: 1,
+                                marginLeft: isChild ? 'm' : undefined
+                            } }, { children: children }))] })), hasRightIcon ? RightIcon : null] })) })));
+};
+
+export { NavItem };
+//# sourceMappingURL=NavItem.js.map

package/dist/components/nav-item/NavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.js","sources":["../../../src/components/nav-item/NavItem.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { useTheme } from '@emotion/react'\n\nimport { motion } from '../../foundations/motion'\nimport { Flex } from '../layout/Flex'\nimport { NotificationCount } from '../notification-count'\nimport { Text } from '../text/Text'\n\nimport type { NavItemProps } from './types'\n\n/**\n * A navigation item component, typically used in sidebars or navigation menus.\n * Supports default, hover, and selected states, as well as optional left and right icons.\n */\nexport const NavItem = ({\n  children,\n  leftIcon: LeftIcon,\n  rightIcon: RightIcon,\n  isSelected = false,\n  onClick,\n  textSize = 'l',\n  hasNotification = false,\n  leftOverride,\n  variant = 'default',\n  isChild = false,\n  ...props\n}: NavItemProps) => {\n  const { color } = useTheme()\n\n  const hasLeftIcon = !!LeftIcon\n  const hasRightIcon = !!RightIcon\n\n  const backgroundColor = isSelected ? color.secondary.s400 : undefined\n\n  const textAndIconColor = isSelected ? 'white' : 'default'\n  const insetBorderColor = isSelected\n    ? 'none'\n    : `inset 0 0 0 1px ${color.border.default}`\n\n  const leftIconWithNotification = useMemo(() => {\n    const icon = hasLeftIcon ? (\n      <LeftIcon size='l' color={textAndIconColor} />\n    ) : null\n\n    if (hasNotification && !!icon) {\n      return (\n        <NotificationCount size='s' isSelected={isSelected}>\n          {icon}\n        </NotificationCount>\n      )\n    }\n    return icon\n  }, [hasNotification, hasLeftIcon, LeftIcon, textAndIconColor, isSelected])\n\n  return (\n    <Flex\n      alignItems='center'\n      gap='s'\n      pl='s'\n      pr='s'\n      w='240px'\n      css={{\n        cursor: 'pointer',\n        transition: `background-color ${motion.hover}`\n      }}\n      {...props}\n      onClick={onClick}\n    >\n      <Flex\n        alignItems='center'\n        flex={1}\n        gap='m'\n        p='s'\n        borderRadius='m'\n        css={{\n          backgroundColor,\n          transition: `opacity ${motion.quick}`,\n          '&:hover': {\n            backgroundColor: isSelected ? undefined : color.background.surface2,\n            boxShadow: insetBorderColor\n          },\n          '&:active': {\n            opacity: !isSelected ? 0.8 : undefined,\n            transition: `opacity ${motion.quick}`\n          }\n        }}\n      >\n        <Flex\n          alignItems='center'\n          gap={variant === 'compact' ? 'xs' : 'm'}\n          flex={1}\n          h={variant === 'compact' ? 'unit5' : 'unit6'}\n          pv='s'\n          css={{\n            maxWidth: '240px'\n          }}\n        >\n          {leftOverride || leftIconWithNotification}\n          <Text\n            variant='title'\n            size={textSize}\n            strength='weak'\n            lineHeight='single'\n            color={textAndIconColor}\n            ellipses\n            css={{\n              flex: 1,\n              marginLeft: isChild ? 'm' : undefined\n            }}\n          >\n            {children}\n          </Text>\n        </Flex>\n        {hasRightIcon ? RightIcon : null}\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/nav-item/index.d.ts

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

package/dist/components/nav-item/index.d.ts.map

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

package/dist/components/nav-item/types.d.ts

@@ -0,0 +1,28 @@
+import { MouseEvent, ReactNode } from 'react';
+import { WithCSS } from '../../foundations';
+import { IconComponent } from '../icon';
+import { FlexProps } from '../layout';
+import { TextSize } from '../text';
+export type NavItemProps = WithCSS<{
+    /** The label text of the navigation item. */
+    children: ReactNode;
+    /** The name of the icon to display on the left side of the label. */
+    leftIcon?: IconComponent;
+    /** Override the left icon with a custom component. */
+    leftOverride?: ReactNode;
+    /** The name of the icon to display on the right side of the label. */
+    rightIcon?: ReactNode;
+    /** Whether the navigation item is currently selected. */
+    isSelected?: boolean;
+    /** The callback function to be called when the navigation item is clicked. */
+    onClick?: (event?: MouseEvent<Element>) => void;
+    /** The size of the text to display. */
+    textSize?: TextSize;
+    /** Whether the navigation item has a notification count. */
+    hasNotification?: boolean;
+    /** The variant of the nav item. */
+    variant?: 'default' | 'compact';
+    /** Whether the nav item is a child of a parent expandable nav item. */
+    isChild?: boolean;
+}> & FlexProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/nav-item/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/nav-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IACjC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAA;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,sDAAsD;IACtD,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,sEAAsE;IACtE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IAC/C,uCAAuC;IACvC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC,GACA,SAAS,CAAA"}

package/dist/components/notification-count/NotificationCount.d.ts

@@ -0,0 +1,7 @@
+import type { NotificationCountProps } from './types';
+/**
+ * A small badge that displays a notification count and can wrap an icon, typically used with icons or buttons
+ * to indicate unread or pending notifications.
+ */
+export declare const NotificationCount: ({ count, size, children, isSelected, hasBorder, ...props }: NotificationCountProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NotificationCount.d.ts.map

package/dist/components/notification-count/NotificationCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCount.d.ts","sourceRoot":"","sources":["../../../src/components/notification-count/NotificationCount.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,+DAO3B,sBAAsB,qDAyExB,CAAA"}

package/dist/components/notification-count/NotificationCount.js

@@ -0,0 +1,51 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useTheme } from '@emotion/react';
+import { formatCount } from '../../utils/formatCount.js';
+import { Flex } from '../layout/Flex/Flex.js';
+import { Text } from '../text/Text.js';
+
+/**
+ * A small badge that displays a notification count and can wrap an icon, typically used with icons or buttons
+ * to indicate unread or pending notifications.
+ */
+var NotificationCount = function (_a) {
+    var count = _a.count, size = _a.size, children = _a.children, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, _c = _a.hasBorder, hasBorder = _c === void 0 ? true : _c, props = __rest(_a, ["count", "size", "children", "isSelected", "hasBorder"]);
+    var _d = useTheme(), spacing = _d.spacing, color = _d.color;
+    var getDimension = function (size) {
+        var borderAdjustment = hasBorder ? 2 : 0;
+        switch (size) {
+            case 's':
+                return spacing.unit2 + borderAdjustment;
+            case 'm':
+                return spacing.unit4 + borderAdjustment;
+            default:
+                return spacing.unit5 + borderAdjustment;
+        }
+    };
+    var getBorderColor = function () {
+        if (!hasBorder)
+            return 'none';
+        return isSelected ? color.secondary.s400 : color.background.surface1;
+    };
+    var containerStyles = children
+        ? {
+            position: 'relative'
+        }
+        : {};
+    var badgeStyles = __assign({ minWidth: getDimension(size), backgroundColor: isSelected
+            ? color.background.surface1
+            : color.primary.p300, border: hasBorder ? "1px solid ".concat(getBorderColor()) : 'none' }, (children && {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        transform: 'translate(5%, -10%)'
+    }));
+    var textStyles = __assign({}, (isSelected && {
+        color: color.neutral.n950
+    }));
+    return (jsxs(Flex, __assign({ className: 'parent', alignItems: 'center', justifyContent: 'center', css: containerStyles, inline: true }, props, { children: [children, jsx(Flex, __assign({ as: 'span', h: getDimension(size), ph: 'xs', direction: 'column', justifyContent: 'center', alignItems: 'center', gap: 's', borderRadius: 'circle', css: badgeStyles }, { children: jsx(Text, __assign({ variant: 'label', size: 'xs', css: textStyles, color: 'white' }, { children: count !== undefined ? formatCount(count) : '' })) }))] })));
+};
+
+export { NotificationCount };
+//# sourceMappingURL=NotificationCount.js.map

package/dist/components/notification-count/NotificationCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCount.js","sources":["../../../src/components/notification-count/NotificationCount.tsx"],"sourcesContent":["import { useTheme, CSSObject } from '@emotion/react'\n\nimport { formatCount } from '~harmony/utils/formatCount'\n\nimport { Flex } from '../layout/Flex'\nimport { Text } from '../text/Text'\n\nimport type { NotificationCountProps } from './types'\n\n/**\n * A small badge that displays a notification count and can wrap an icon, typically used with icons or buttons\n * to indicate unread or pending notifications.\n */\nexport const NotificationCount = ({\n  count,\n  size,\n  children,\n  isSelected = false,\n  hasBorder = true,\n  ...props\n}: NotificationCountProps) => {\n  const { spacing, color } = useTheme()\n\n  const getDimension = (size?: NotificationCountProps['size']) => {\n    const borderAdjustment = hasBorder ? 2 : 0\n    switch (size) {\n      case 's':\n        return spacing.unit2 + borderAdjustment\n      case 'm':\n        return spacing.unit4 + borderAdjustment\n      default:\n        return spacing.unit5 + borderAdjustment\n    }\n  }\n\n  const getBorderColor = () => {\n    if (!hasBorder) return 'none'\n    return isSelected ? color.secondary.s400 : color.background.surface1\n  }\n\n  const containerStyles: CSSObject = children\n    ? {\n        position: 'relative'\n      }\n    : {}\n\n  const badgeStyles: CSSObject = {\n    minWidth: getDimension(size),\n    backgroundColor: isSelected\n      ? color.background.surface1\n      : color.primary.p300,\n    border: hasBorder ? `1px solid ${getBorderColor()}` : 'none',\n    ...(children && {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      transform: 'translate(5%, -10%)'\n    })\n  }\n\n  const textStyles: CSSObject = {\n    ...(isSelected && {\n      color: color.neutral.n950\n    })\n  }\n\n  return (\n    <Flex\n      className='parent'\n      alignItems='center'\n      justifyContent='center'\n      css={containerStyles}\n      inline\n      {...props}\n    >\n      {children}\n      <Flex\n        as='span'\n        h={getDimension(size)}\n        ph='xs'\n        direction='column'\n        justifyContent='center'\n        alignItems='center'\n        gap='s'\n        borderRadius='circle'\n        css={badgeStyles}\n      >\n        <Text variant='label' size='xs' css={textStyles} color='white'>\n          {count !== undefined ? formatCount(count) : ''}\n        </Text>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/notification-count/index.d.ts

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

package/dist/components/notification-count/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/notification-count/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,YAAY,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/notification-count/types.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type NotificationCountProps = {
+    /**
+     * The notification count to display
+     */
+    count?: number;
+    /**
+     * The size of the notification count.
+     * @default undefined
+     */
+    size?: 's' | 'm';
+    /**
+     * Whether the parent item is selected
+     */
+    isSelected?: boolean;
+    /**
+     * Whether to display a border around the notification dot
+     * @default false
+     */
+    hasBorder?: boolean;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/notification-count/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/notification-count/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3D,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA"}

package/dist/components/pill/Pill.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { CSSObject } from '@emotion/react';
+import { BaseButtonProps } from '../button/BaseButton/types';
+export type PillProps = BaseButtonProps & {
+    variant?: 'default' | 'active' | 'primary' | 'custom';
+};
+/**
+ * The Pill button is located in the sidebar and is used to open the
+ * Add Playlist/Add Folder popover menu.
+ * It can also be used in the NEW pill in the notification card.
+ */
+export declare const Pill: (props: {
+    iconLeft?: import("..").IconComponent | null | undefined;
+    iconRight?: import("..").IconComponent | null | undefined;
+    isStaticIcon?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    widthToHideText?: number | undefined;
+    minWidth?: number | undefined;
+    fullWidth?: boolean | undefined;
+    styles?: {
+        button?: CSSObject | undefined;
+        icon?: CSSObject | undefined;
+    } | undefined;
+    asChild?: boolean | undefined;
+    slotted?: boolean | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    _isHovered?: boolean | undefined;
+    _isPressed?: boolean | undefined;
+} & {
+    variant?: "default" | "active" | "primary" | "custom" | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=Pill.d.ts.map

package/dist/components/pill/Pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAA;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAG5D,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACxC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;CACtD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;0JAmEhB,CAAA"}

package/dist/components/pill/Pill.js

@@ -0,0 +1,63 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useTheme } from '@emotion/react';
+import { BaseButton } from '../button/BaseButton/BaseButton.js';
+import { Text } from '../text/Text.js';
+
+/**
+ * The Pill button is located in the sidebar and is used to open the
+ * Add Playlist/Add Folder popover menu.
+ * It can also be used in the NEW pill in the notification card.
+ */
+var Pill = forwardRef(function (props, ref) {
+    var _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, other = __rest(props, ["variant", "children"]);
+    var onClick = other.onClick;
+    var _b = useTheme(), color = _b.color, spacing = _b.spacing, cornerRadius = _b.cornerRadius;
+    var backgroundColors = {
+        default: color.background.surface2,
+        active: color.background.accent,
+        primary: color.background.primary,
+        custom: undefined
+    };
+    var hoverBackgroundColors = {
+        default: color.background.accent,
+        active: color.background.accent,
+        primary: color.background.accent,
+        custom: undefined
+    };
+    var textColors = {
+        default: color.text.subdued,
+        active: color.text.white,
+        primary: color.text.white,
+        custom: color.text.white
+    };
+    var hoverTextColors = {
+        default: color.text.white,
+        active: color.text.white,
+        primary: color.text.white,
+        custom: color.text.white
+    };
+    var buttonCss = {
+        gap: spacing['2xs'],
+        paddingInline: 6,
+        paddingBlock: spacing.xs,
+        borderWidth: 0,
+        borderRadius: cornerRadius.circle,
+        backgroundColor: backgroundColors[variant],
+        color: textColors[variant],
+        '&:hover': {
+            backgroundColor: hoverBackgroundColors[variant],
+            color: hoverTextColors[variant]
+        },
+        pointerEvents: onClick ? 'auto' : 'none'
+    };
+    var iconCss = {
+        height: 10,
+        width: 10
+    };
+    return (jsx(BaseButton, __assign({ ref: ref, styles: { button: buttonCss, icon: iconCss }, asChild: !onClick }, other, { children: jsx(Text, __assign({ variant: 'label', size: 's' }, { children: children })) })));
+});
+
+export { Pill };
+//# sourceMappingURL=Pill.js.map

package/dist/components/pill/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","sources":["../../../src/components/pill/Pill.tsx"],"sourcesContent":["import { Ref, forwardRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { BaseButton } from '../button/BaseButton/BaseButton'\nimport { BaseButtonProps } from '../button/BaseButton/types'\nimport { Text } from '../text'\n\nexport type PillProps = BaseButtonProps & {\n  variant?: 'default' | 'active' | 'primary' | 'custom'\n}\n\n/**\n * The Pill button is located in the sidebar and is used to open the\n * Add Playlist/Add Folder popover menu.\n * It can also be used in the NEW pill in the notification card.\n */\nexport const Pill = forwardRef(\n  (props: PillProps, ref: Ref<HTMLButtonElement>) => {\n    const { variant = 'default', children, ...other } = props\n    const { onClick } = other\n    const { color, spacing, cornerRadius } = useTheme()\n\n    const backgroundColors = {\n      default: color.background.surface2,\n      active: color.background.accent,\n      primary: color.background.primary,\n      custom: undefined\n    }\n\n    const hoverBackgroundColors = {\n      default: color.background.accent,\n      active: color.background.accent,\n      primary: color.background.accent,\n      custom: undefined\n    }\n\n    const textColors = {\n      default: color.text.subdued,\n      active: color.text.white,\n      primary: color.text.white,\n      custom: color.text.white\n    }\n\n    const hoverTextColors = {\n      default: color.text.white,\n      active: color.text.white,\n      primary: color.text.white,\n      custom: color.text.white\n    }\n\n    const buttonCss: CSSObject = {\n      gap: spacing['2xs'],\n      paddingInline: 6,\n      paddingBlock: spacing.xs,\n      borderWidth: 0,\n      borderRadius: cornerRadius.circle,\n      backgroundColor: backgroundColors[variant],\n      color: textColors[variant],\n      '&:hover': {\n        backgroundColor: hoverBackgroundColors[variant],\n        color: hoverTextColors[variant]\n      },\n      pointerEvents: onClick ? 'auto' : 'none'\n    }\n\n    const iconCss = {\n      height: 10,\n      width: 10\n    }\n\n    return (\n      <BaseButton\n        ref={ref}\n        styles={{ button: buttonCss, icon: iconCss }}\n        asChild={!onClick}\n        {...other}\n      >\n        <Text variant='label' size='s'>\n          {children}\n        </Text>\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pill/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/popup/Popup.d.ts

@@ -0,0 +1,15 @@
+import { SetStateAction } from 'react';
+import { ModalState } from "../../utils/modalState";
+import type { PopupProps } from './types';
+/**
+ * A popup is an in-place container that shows on top of the UI. A popup does
+ * not impact the rest of the UI (e.g. dimming background or shifting elements).
+ * It differs from modals, which do take over the whole UI and are usually
+ * center-screened.
+ */
+export declare const Popup: (props: PopupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export declare const PopupInternal: (props: PopupProps & {
+    popupState: ModalState;
+    setPopupState: (value: SetStateAction<ModalState>) => void;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=Popup.d.ts.map

package/dist/components/popup/Popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,cAAc,EAKf,MAAM,OAAO,CAAA;AAUd,OAAO,EAAE,UAAU,EAAE,+BAAiC;AAMtD,OAAO,KAAK,EAAE,UAAU,EAAU,MAAM,SAAS,CAAA;AAmHjD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,0KAwBhB,CAAA;AAEF,eAAO,MAAM,aAAa;gBAGV,UAAU;2BACC,eAAe,UAAU,CAAC,KAAK,IAAI;uJA2R5D,CAAA"}