@audius/harmony 0.5.0 → 0.5.2

package/dist/components/button/FilterButton/FilterButtonKeyHandler.d.ts

@@ -0,0 +1,18 @@
+import { RefObject, ReactNode } from 'react';
+import { FilterButtonOptionType } from './types';
+type FilterButtonKeyHandlerProps<Value extends string> = {
+    children: (activeValue: Value | null) => ReactNode;
+    disabled?: boolean;
+    onChange: (value: Value) => void;
+    optionRefs: RefObject<HTMLButtonElement[]>;
+    options: FilterButtonOptionType<Value>[];
+    scrollRef: RefObject<HTMLDivElement>;
+};
+/**
+ * Handles key events for the popup inside the FilterButton component
+ *
+ * Calls the `children` function with the currently active value
+ */
+export declare const FilterButtonKeyHandler: <Value extends string>(props: FilterButtonKeyHandlerProps<Value>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterButtonKeyHandler.d.ts.map

package/dist/components/button/FilterButton/FilterButtonKeyHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonKeyHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/FilterButtonKeyHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,SAAS,EAAa,MAAM,OAAO,CAAA;AAEjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEhD,KAAK,2BAA2B,CAAC,KAAK,SAAS,MAAM,IAAI;IACvD,QAAQ,EAAE,CAAC,WAAW,EAAE,KAAK,GAAG,IAAI,KAAK,SAAS,CAAA;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC1C,OAAO,EAAE,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAA;IACxC,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;CACrC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,uHAmFlC,CAAA"}

package/dist/components/button/FilterButton/FilterButtonOption.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FilterButtonOptionType } from './types';
+type FilterButtonOptionProps<Value extends string> = {
+    activeValue?: Value | null;
+    isActive?: boolean;
+    option: FilterButtonOptionType<Value>;
+    onChange: (option: Value) => void;
+};
+export declare const FilterButtonOption: <Value extends string>(props: FilterButtonOptionProps<Value> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export {};
+//# sourceMappingURL=FilterButtonOption.d.ts.map

package/dist/components/button/FilterButton/FilterButtonOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonOption.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/FilterButtonOption.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEhD,KAAK,uBAAuB,CAAC,KAAK,SAAS,MAAM,IAAI;IACnD,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,CAAA;IACrC,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,kBAAkB,uNAmF7B,CAAA"}

package/dist/components/button/FilterButton/FilterButtonOption.js

@@ -0,0 +1,57 @@
+import { __assign } from '../../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef, useCallback } from 'react';
+import { Text } from '../../text/Text.js';
+import '../../../foundations/color/semantic.js';
+import '../../../foundations/color/color.js';
+import { useTheme } from '@emotion/react';
+import '../../../foundations/theme/theme.js';
+import { BaseButton } from '../BaseButton/BaseButton.js';
+
+var FilterButtonOption = forwardRef(function (props, ref) {
+    var _a, _b, _c;
+    var activeValue = props.activeValue, option = props.option, onChange = props.onChange, isActive = props.isActive;
+    var _d = useTheme(), color = _d.color, cornerRadius = _d.cornerRadius, spacing = _d.spacing, typography = _d.typography;
+    // Popup Styles
+    var optionIconCss = {
+        width: spacing.unit4,
+        height: spacing.unit4
+    };
+    var activeOptionCss = {
+        transform: 'none',
+        backgroundColor: color.secondary.s300,
+        color: color.static.white
+    };
+    var optionCss = {
+        background: 'transparent',
+        border: 'none',
+        color: color.text.default,
+        fontWeight: typography.weight.medium,
+        gap: spacing.s,
+        paddingLeft: spacing.m,
+        paddingRight: spacing.m,
+        paddingTop: spacing.s,
+        paddingBottom: spacing.s,
+        width: '100%',
+        borderRadius: cornerRadius.s,
+        justifyContent: 'flex-start',
+        '&:hover': activeOptionCss,
+        '&:hover .helperText': {
+            color: color.static.white
+        },
+        '&:active': {
+            transform: 'none'
+        }
+    };
+    var handleChange = useCallback(function (e) {
+        e.stopPropagation();
+        onChange(option.value);
+    }, [option.value, onChange]);
+    return (jsxs(BaseButton, __assign({ ref: ref, iconLeft: option.icon, styles: {
+            button: __assign(__assign({}, optionCss), (option.value === activeValue || isActive ? activeOptionCss : {})),
+            icon: optionIconCss
+        }, "aria-label": (_a = option.label) !== null && _a !== void 0 ? _a : option.value, role: 'option', onClick: handleChange }, { children: [(_b = option.leadingElement) !== null && _b !== void 0 ? _b : null, jsx(Text, __assign({ variant: 'body', strength: 'strong' }, { children: (_c = option.label) !== null && _c !== void 0 ? _c : option.value })), option.helperText ? (jsx(Text, __assign({ variant: 'body', strength: 'strong', color: option.value === activeValue ? 'white' : 'subdued', className: 'helperText' }, { children: option.helperText }))) : null] }), option.value));
+});
+
+export { FilterButtonOption };
+//# sourceMappingURL=FilterButtonOption.js.map

package/dist/components/button/FilterButton/FilterButtonOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonOption.js","sources":["../../../../src/components/button/FilterButton/FilterButtonOption.tsx"],"sourcesContent":["import { forwardRef, MouseEventHandler, Ref, useCallback } from 'react'\n\nimport { CSSObject } from '@emotion/react'\n\nimport { Text } from '~harmony/components/text/Text'\nimport { useTheme } from '~harmony/foundations'\n\nimport { BaseButton } from '../BaseButton/BaseButton'\n\nimport { FilterButtonOptionType } from './types'\n\ntype FilterButtonOptionProps<Value extends string> = {\n  activeValue?: Value | null\n  isActive?: boolean\n  option: FilterButtonOptionType<Value>\n  onChange: (option: Value) => void\n}\n\nexport const FilterButtonOption = forwardRef(function <Value extends string>(\n  props: FilterButtonOptionProps<Value>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const { activeValue, option, onChange, isActive } = props\n  const { color, cornerRadius, spacing, typography } = useTheme()\n\n  // Popup Styles\n  const optionIconCss: CSSObject = {\n    width: spacing.unit4,\n    height: spacing.unit4\n  }\n\n  const activeOptionCss: CSSObject = {\n    transform: 'none',\n    backgroundColor: color.secondary.s300,\n    color: color.static.white\n  }\n\n  const optionCss: CSSObject = {\n    background: 'transparent',\n    border: 'none',\n    color: color.text.default,\n    fontWeight: typography.weight.medium,\n    gap: spacing.s,\n    paddingLeft: spacing.m,\n    paddingRight: spacing.m,\n    paddingTop: spacing.s,\n    paddingBottom: spacing.s,\n    width: '100%',\n    borderRadius: cornerRadius.s,\n    justifyContent: 'flex-start',\n\n    '&:hover': activeOptionCss,\n    '&:hover .helperText': {\n      color: color.static.white\n    },\n\n    '&:active': {\n      transform: 'none'\n    }\n  }\n\n  const handleChange = useCallback<MouseEventHandler>(\n    (e) => {\n      e.stopPropagation()\n      onChange(option.value)\n    },\n    [option.value, onChange]\n  )\n\n  return (\n    <BaseButton\n      ref={ref}\n      key={option.value}\n      iconLeft={option.icon}\n      styles={{\n        button: {\n          ...optionCss,\n          ...(option.value === activeValue || isActive ? activeOptionCss : {})\n        },\n        icon: optionIconCss\n      }}\n      aria-label={option.label ?? option.value}\n      role='option'\n      onClick={handleChange}\n    >\n      {option.leadingElement ?? null}\n      <Text variant='body' strength='strong'>\n        {option.label ?? option.value}\n      </Text>\n      {option.helperText ? (\n        <Text\n          variant='body'\n          strength='strong'\n          color={option.value === activeValue ? 'white' : 'subdued'}\n          className='helperText'\n        >\n          {option.helperText}\n        </Text>\n      ) : null}\n    </BaseButton>\n  )\n})\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/button/FilterButton/FilterButtonOptionsList.d.ts

@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+import { CSSObject } from '@emotion/react';
+import { FilterButtonOptionType } from './types';
+type OptionsListProps<Value extends string> = {
+    options: FilterButtonOptionType<Value>[];
+    isOpen: boolean;
+    optionRefs: RefObject<HTMLButtonElement[]>;
+    scrollRef: RefObject<HTMLDivElement | null>;
+    onChange: (value: Value) => void;
+};
+type VirtualizedOptionsListProps<Value extends string> = {
+    options: FilterButtonOptionType<Value>[];
+    optionRefs: RefObject<HTMLButtonElement[]>;
+    onChange: (value: Value) => void;
+    height: CSSObject['height'];
+    width: CSSObject['width'];
+};
+export declare const VirtualizedOptionsList: <Value extends string>({ options, optionRefs, onChange, height, width }: VirtualizedOptionsListProps<Value>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OptionsList: <Value extends string>({ options, isOpen, optionRefs, scrollRef, onChange }: OptionsListProps<Value>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterButtonOptionsList.d.ts.map

package/dist/components/button/FilterButton/FilterButtonOptionsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonOptionsList.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/FilterButtonOptionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAM1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEhD,KAAK,gBAAgB,CAAC,KAAK,SAAS,MAAM,IAAI;IAC5C,OAAO,EAAE,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAA;IACxC,MAAM,EAAE,OAAO,CAAA;IACf,UAAU,EAAE,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC1C,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC,CAAA;AAED,KAAK,2BAA2B,CAAC,KAAK,SAAS,MAAM,IAAI;IACvD,OAAO,EAAE,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAA;IACxC,UAAU,EAAE,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC3B,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,sBAAsB,kKA6ClC,CAAA;AAED,eAAO,MAAM,WAAW,2JAkCvB,CAAA"}

package/dist/components/button/FilterButton/FilterButtonOptionsList.js

@@ -0,0 +1,43 @@
+import { __assign } from '../../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { List } from 'react-virtualized';
+import { MenuItem } from '../../internal/MenuItem.js';
+import { OptionKeyHandler } from '../../internal/OptionKeyHandler.js';
+
+var VirtualizedOptionsList = function (_a) {
+    var options = _a.options, optionRefs = _a.optionRefs, onChange = _a.onChange, _b = _a.height, height = _b === void 0 ? 100 : _b, _c = _a.width, width = _c === void 0 ? 100 : _c;
+    var _d = useState(50), rowHeight = _d[0], setRowHeight = _d[1];
+    useEffect(function () {
+        var _a, _b;
+        if ((_a = optionRefs.current) === null || _a === void 0 ? void 0 : _a[0]) {
+            setRowHeight((_b = optionRefs.current) === null || _b === void 0 ? void 0 : _b[0].offsetHeight);
+        }
+    }, [optionRefs]);
+    var renderItem = useCallback(function (_a) {
+        var index = _a.index, style = _a.style;
+        var option = options[index];
+        return (jsx(MenuItem, __assign({ style: style, variant: 'option', ref: function (el) {
+                if (optionRefs && optionRefs.current && el) {
+                    optionRefs.current[index] = el;
+                }
+            } }, option, { onChange: onChange }), option.value));
+    }, [onChange, optionRefs, options]);
+    return (jsx(List, { width: Number(width), height: Number(height), rowCount: options.length, rowHeight: rowHeight, rowRenderer: renderItem }));
+};
+var OptionsList = function (_a) {
+    var options = _a.options, isOpen = _a.isOpen, optionRefs = _a.optionRefs, scrollRef = _a.scrollRef, onChange = _a.onChange;
+    return (jsx(OptionKeyHandler, __assign({ options: options, disabled: !isOpen, onChange: onChange, optionRefs: optionRefs, scrollRef: scrollRef }, { children: function (activeValue) {
+            return options.map(function (option, index) {
+                var _a;
+                return (jsx(MenuItem, __assign({ variant: 'option', ref: function (el) {
+                        if (optionRefs && optionRefs.current && el) {
+                            optionRefs.current[index] = el;
+                        }
+                    } }, option, { label: (_a = option.label) !== null && _a !== void 0 ? _a : option.value, onChange: onChange, isActive: option.value === activeValue }), option.value));
+            });
+        } })));
+};
+
+export { OptionsList, VirtualizedOptionsList };
+//# sourceMappingURL=FilterButtonOptionsList.js.map

package/dist/components/button/FilterButton/FilterButtonOptionsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonOptionsList.js","sources":["../../../../src/components/button/FilterButton/FilterButtonOptionsList.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, RefObject } from 'react'\n\nimport { CSSObject } from '@emotion/react'\nimport { List, ListRowProps } from 'react-virtualized'\n\nimport { MenuItem } from '~harmony/components/internal/MenuItem'\nimport { OptionKeyHandler } from '~harmony/components/internal/OptionKeyHandler'\n\nimport { FilterButtonOptionType } from './types'\n\ntype OptionsListProps<Value extends string> = {\n  options: FilterButtonOptionType<Value>[]\n  isOpen: boolean\n  optionRefs: RefObject<HTMLButtonElement[]>\n  scrollRef: RefObject<HTMLDivElement | null>\n  onChange: (value: Value) => void\n}\n\ntype VirtualizedOptionsListProps<Value extends string> = {\n  options: FilterButtonOptionType<Value>[]\n  optionRefs: RefObject<HTMLButtonElement[]>\n  onChange: (value: Value) => void\n  height: CSSObject['height']\n  width: CSSObject['width']\n}\n\nexport const VirtualizedOptionsList = <Value extends string>({\n  options,\n  optionRefs,\n  onChange,\n  height = 100,\n  width = 100\n}: VirtualizedOptionsListProps<Value>) => {\n  const [rowHeight, setRowHeight] = useState(50)\n  useEffect(() => {\n    if (optionRefs.current?.[0]) {\n      setRowHeight(optionRefs.current?.[0].offsetHeight)\n    }\n  }, [optionRefs])\n\n  const renderItem = useCallback(\n    ({ index, style }: ListRowProps) => {\n      const option = options[index]\n\n      return (\n        <MenuItem\n          style={style}\n          variant='option'\n          ref={(el) => {\n            if (optionRefs && optionRefs.current && el) {\n              optionRefs.current[index] = el\n            }\n          }}\n          key={option.value}\n          {...option}\n          onChange={onChange}\n        />\n      )\n    },\n    [onChange, optionRefs, options]\n  )\n\n  return (\n    <List\n      width={Number(width)}\n      height={Number(height)}\n      rowCount={options.length}\n      rowHeight={rowHeight}\n      rowRenderer={renderItem}\n    />\n  )\n}\n\nexport const OptionsList = <Value extends string>({\n  options,\n  isOpen,\n  optionRefs,\n  scrollRef,\n  onChange\n}: OptionsListProps<Value>) => {\n  return (\n    <OptionKeyHandler\n      options={options}\n      disabled={!isOpen}\n      onChange={onChange}\n      optionRefs={optionRefs}\n      scrollRef={scrollRef}\n    >\n      {(activeValue) =>\n        options.map((option, index) => (\n          <MenuItem\n            variant='option'\n            ref={(el) => {\n              if (optionRefs && optionRefs.current && el) {\n                optionRefs.current[index] = el\n              }\n            }}\n            key={option.value}\n            {...option}\n            label={option.label ?? option.value}\n            onChange={onChange}\n            isActive={option.value === activeValue}\n          />\n        ))\n      }\n    </OptionKeyHandler>\n  )\n}\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/button/FilterButton/types.d.ts

@@ -0,0 +1,120 @@
+import { ReactNode } from 'react';
+import { CSSObject } from '@emotion/react';
+import { IconComponent } from "../../icon";
+import { TextInputProps } from "../../input";
+import { MenuContentProps, MenuProps } from "../../internal/Menu";
+export type FilterButtonSize = 'default' | 'small';
+export type FilterButtonVariant = 'fillContainer' | 'replaceLabel';
+export type FilterButtonOptionType<Value extends string> = {
+    value: Value;
+    /**
+     * The label to display. If not provided, uses the value.
+     */
+    label?: string;
+    icon?: IconComponent;
+    /**
+     * A leading element to display before the option label. Useful for icons/emojis
+     */
+    leadingElement?: JSX.Element;
+    /**
+     * A leading element to display before the filter button label
+     */
+    labelLeadingElement?: JSX.Element;
+    /**
+     * Text to display after the element
+     */
+    helperText?: string;
+};
+type ChildrenProps<Value> = {
+    /**
+     * Callback when a value is selected
+     */
+    onChange: (value: Value) => void;
+    options: ReactNode;
+    setIsOpen: (isOpen: boolean) => void;
+};
+export type FilterButtonProps<Value extends string = string> = {
+    value?: Value | null;
+    /**
+     * Callback when a value is selected
+     */
+    onChange?: (value: Value) => void;
+    /**
+     * Selection options
+     * e.g. { label: 'Option A', icon: IconRadar }
+     */
+    options?: FilterButtonOptionType<Value>[];
+    /**
+     * Children render prop. This can be used to render a dropdown component
+     * for example
+     */
+    children?: (props: ChildrenProps<Value>) => ReactNode;
+    /**
+     * The text that appears on the button component.
+     * If no label is provided, a different Icon can be specified
+     * to contextually inform users.
+     */
+    label?: string;
+    /**
+     * If no label is provided, specify an optional aria-label
+     */
+    'aria-label'?: string;
+    /**
+     * The button size
+     * @default FilterButtonSize.DEFAULT
+     */
+    size?: FilterButtonSize;
+    /**
+     * The type of filter button
+     * @default 'fillContainer'
+     */
+    variant?: FilterButtonVariant;
+    /**
+     * Optional icon element to include on the left side of the button
+     */
+    iconLeft?: IconComponent;
+    /**
+     * Optional icon element to include on the right side of the button
+     */
+    iconRight?: IconComponent | null;
+    /**
+     * What to do when the filter button is opened
+     */
+    onOpen?: () => void;
+    /**
+     * If provided, will be called when the selected value is reset
+     */
+    onReset?: () => void;
+    /**
+     * What to do when the button is clicked
+     * This will override the default behavior of toggling isOpen
+     */
+    onClick?: () => void;
+    /**
+     * Whether interaction is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optional leading element to include on the left side of the button
+     */
+    leadingElement?: ReactNode;
+    /**
+     * Show a text input to filter the options
+     */
+    showFilterInput?: boolean;
+    filterInputProps?: TextInputProps;
+    /**
+     * Label to display above options
+     */
+    optionsLabel?: string;
+    menuProps?: Partial<MenuProps> & Partial<MenuContentProps> & {
+        css?: CSSObject;
+    };
+    renderLabel?: (label: string) => ReactNode;
+    /**
+     * Whether or not to virtualize the options
+     */
+    virtualized?: boolean;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/button/FilterButton/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,EAAE,aAAa,EAAE,mBAAgC;AACxD,OAAO,EAAE,cAAc,EAAE,oBAAiC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,4BAAyC;AAE/E,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,CAAA;AAElD,MAAM,MAAM,mBAAmB,GAC3B,eAAe,GACf,cAAc,CAAA;AAElB,MAAM,MAAM,sBAAsB,CAAC,KAAK,SAAS,MAAM,IAAI;IACzD,KAAK,EAAE,KAAK,CAAA;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACjC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,KAAK,aAAa,CAAC,KAAK,IAAI;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,OAAO,EAAE,SAAS,CAAA;IAClB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI;IAC7D,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAA;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,SAAS,CAAA;IAErD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAA;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAA;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAEhC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAA;IAE1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,gBAAgB,CAAC,EAAE,cAAc,CAAA;IAEjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAC5B,OAAO,CAAC,gBAAgB,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,SAAS,CAAA;KAAE,CAAA;IAEjD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA"}

package/dist/components/button/FollowButton/FollowButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { FollowButtonProps } from './types';
+/**
+ * Special button for following or unfollowing a user.
+ */
+export declare const FollowButton: (props: FollowButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=FollowButton.d.ts.map

package/dist/components/button/FollowButton/FollowButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FollowButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FollowButton/FollowButton.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAqBhD;;GAEG;AACH,eAAO,MAAM,YAAY,oLAsKxB,CAAA"}

package/dist/components/button/FollowButton/FollowButton.js

@@ -0,0 +1,192 @@
+import { __rest, __assign } from '../../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef, useState, useCallback, useEffect } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Flex } from '../../layout/Flex/Flex.js';
+import { Text } from '../../text/Text.js';
+import { useControlled } from '../../../hooks/useControlled.js';
+import '@emotion/css';
+import { IconUserFollow } from '../../../icons/individual/IconUserFollow.js';
+import { IconUserFollowing } from '../../../icons/individual/IconUserFollowing.js';
+import { IconUserUnfollow } from '../../../icons/individual/IconUserUnfollow.js';
+import '../../layout/Box/Box.js';
+import '../../skeleton/Skeleton.js';
+import '../../common/HiddenInput.js';
+import '../../radio-group/RadioGroupContext.js';
+import '../../input/TextInput/TextInput.js';
+import '../../input/TextInput/types.js';
+import '../../input/PasswordInput/PasswordInput.js';
+import '../../input/TokenAmountInput/TokenAmountInput.js';
+import '../../input/TextArea/TextArea.js';
+import '../../layout/Paper/Paper.js';
+import '../Button/Button.js';
+import '../PlainButton/PlainButton.js';
+import '../IconButton/IconButton.js';
+import '../UnstyledButton.js';
+import '../FilterButton/FilterButton.js';
+import '../FilterButton/FilterButtonOption.js';
+import '../BaseButton/BaseButton.js';
+import '@react-spring/web';
+import 'classnames';
+import '../../text-link/TextLink.js';
+import '../../switch/Switch.js';
+import '@juggle/resize-observer';
+import 'react-merge-refs';
+import 'react-use-measure';
+import '../../scrollbar/Scrollbar.js';
+import '../../popup/Popup.js';
+import '../../popup-menu/PopupMenu.js';
+import '../../modal/Modal.js';
+import '../../modal/ModalContext.js';
+import 'react-spring/renderprops.cjs';
+import '../../modal/ModalHeader.js';
+import '../../modal/ModalFooter.js';
+import '../../modal/types.js';
+import 'lodash';
+import 'numeral';
+import '../../../contexts/MediaContext.js';
+import 'color';
+import 'lottie-react';
+import '../../pill/Pill.js';
+import '../../select/Select/Select.js';
+import '../../checkbox/Checkbox.js';
+import '../../hover-card/HoverCard.js';
+import '../../../foundations/color/semantic.js';
+import '../../../foundations/color/color.js';
+import '../../../foundations/theme/theme.js';
+import '../../../hooks/useHotKeys.js';
+import '../../internal/MenuItem.js';
+import 'react-dom';
+
+var defaultMessages = {
+    follow: 'Follow',
+    following: 'Following',
+    unfollow: 'Unfollow'
+};
+var InputRoot = styled.input({
+    cursor: 'inherit',
+    position: 'absolute',
+    opacity: 0,
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    margin: 0,
+    padding: 0,
+    zIndex: 1
+});
+/**
+ * Special button for following or unfollowing a user.
+ */
+var FollowButton = forwardRef(function (props, ref) {
+    var _a = props.variant, variant = _a === void 0 ? 'default' : _a, _b = props.isFollowing, isFollowing = _b === void 0 ? false : _b, onUnfollow = props.onUnfollow, onFollow = props.onFollow, _c = props.size, size = _c === void 0 ? 'default' : _c, _d = props.fullWidth, fullWidth = _d === void 0 ? true : _d, messagesProp = props.messages, other = __rest(props, ["variant", "isFollowing", "onUnfollow", "onFollow", "size", "fullWidth", "messages"]);
+    var messages = __assign(__assign({}, defaultMessages), messagesProp);
+    var type = other.type;
+    var _e = useControlled({
+        componentName: 'FollowButton',
+        controlledProp: isFollowing,
+        defaultValue: undefined,
+        stateName: 'following'
+    }), value = _e[0], setValueState = _e[1];
+    // Track hover manually to swap text and icon
+    var _f = useState(false), isHovering = _f[0], setIsHovering = _f[1];
+    var _g = useState(false), isPressing = _g[0], setIsPressing = _g[1];
+    var handleMouseEnter = useCallback(function () {
+        setIsHovering(true);
+    }, []);
+    var handleMouseDown = useCallback(function () {
+        setIsPressing(true);
+    }, []);
+    var handleMouseLeave = useCallback(function () {
+        setIsHovering(false);
+    }, []);
+    var handleMouseUp = useCallback(function () {
+        setIsPressing(false);
+    }, []);
+    var handlePressIn = useCallback(function () {
+        setIsHovering(true);
+        setIsPressing(true);
+    }, []);
+    var handlePressOut = useCallback(function () {
+        setIsHovering(false);
+        setIsPressing(false);
+    }, []);
+    useEffect(function () { }, [value]);
+    var handleClick = useCallback(function () {
+        if (value) {
+            onUnfollow === null || onUnfollow === void 0 ? void 0 : onUnfollow();
+        }
+        else {
+            onFollow === null || onFollow === void 0 ? void 0 : onFollow();
+        }
+        setValueState(!value);
+    }, [value, setValueState, onUnfollow, onFollow]);
+    var checkedValue = value;
+    var Icon = IconUserFollow;
+    var text = messages.follow;
+    if (checkedValue && !isHovering) {
+        Icon = IconUserFollowing;
+        text = messages.following;
+    }
+    else if (checkedValue && isHovering && !isPressing) {
+        Icon = IconUserUnfollow;
+        text = messages.unfollow;
+    }
+    var _h = useTheme(), color = _h.color, cornerRadius = _h.cornerRadius, motion = _h.motion, shadows = _h.shadows;
+    var textColor = checkedValue || isHovering || isPressing ? 'white' : 'active';
+    var borderRadius = variant === 'pill' ? cornerRadius['2xl'] : cornerRadius.s;
+    var rootCss = {
+        cursor: 'pointer',
+        minWidth: size === 'small' ? 128 : 152,
+        width: fullWidth ? '100%' : undefined,
+        userSelect: 'none',
+        borderRadius: borderRadius,
+        backgroundColor: checkedValue
+            ? color.primary.primary
+            : color.special.white,
+        boxShadow: shadows.near,
+        border: "1px solid ".concat(color.primary.primary),
+        transition: "\n        transform ".concat(motion.hover, ",\n        border-color ").concat(motion.hover, ",\n        background-color ").concat(motion.hover, ",\n        color ").concat(motion.hover, "\n      "),
+        '&:hover': {
+            borderWidth: 0,
+            backgroundColor: color.primary.p300,
+            boxShadow: shadows.mid
+        },
+        '&:active': {
+            backgroundColor: color.primary.p500,
+            borderWidth: 0,
+            boxShadow: 'none'
+        }
+    };
+    // Handles case where user mouses down, moves cursor, and mouses up
+    useEffect(function () {
+        if (isPressing) {
+            document.addEventListener('mouseup', handleMouseUp);
+            return function () {
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+        return undefined;
+    }, [isPressing, handleMouseUp]);
+    var rootProps = {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onTouchStart: handlePressIn,
+        onTouchEnd: handlePressOut
+    };
+    var buttonProps = type === 'checkbox' ? undefined : other;
+    var inputProps = type === 'checkbox' ? other : undefined;
+    return (jsxs(Flex
+    // @ts-ignore flex not smart enough
+    , __assign({ 
+        // @ts-ignore flex not smart enough
+        ref: ref, as: type === 'checkbox' ? 'label' : 'button', h: size === 'small' ? 28 : 32, direction: 'row', alignItems: 'center', justifyContent: 'center', gap: 'xs', pv: 's', css: rootCss, 
+        // @ts-ignore flex not smart enough
+        onClick: handleClick }, buttonProps, rootProps, { children: [jsx(Icon, { height: 18, width: 18, color: textColor }), jsx(Text, __assign({ variant: 'label', tag: 'span', size: size === 'small' ? 's' : 'l', strength: 'default', color: textColor }, { children: text })), type === 'checkbox' ? (jsx(InputRoot, __assign({}, inputProps, { checked: isFollowing }))) : null] })));
+});
+
+export { FollowButton };
+//# sourceMappingURL=FollowButton.js.map

package/dist/components/button/FollowButton/FollowButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FollowButton.js","sources":["../../../../src/components/button/FollowButton/FollowButton.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, forwardRef, Ref } from 'react'\n\nimport { useTheme, type CSSObject } from '@emotion/react'\nimport styled from '@emotion/styled'\n\nimport type { IconComponent } from '~harmony/components/icon'\nimport { Flex } from '~harmony/components/layout/Flex'\nimport { Text } from '~harmony/components/text'\nimport { useControlled } from '~harmony/hooks/useControlled'\nimport {\n  IconUserFollowing,\n  IconUserFollow,\n  IconUserUnfollow\n} from '~harmony/icons'\n\nimport type { FollowButtonProps } from './types'\n\nconst defaultMessages = {\n  follow: 'Follow',\n  following: 'Following',\n  unfollow: 'Unfollow'\n}\n\nconst InputRoot = styled.input({\n  cursor: 'inherit',\n  position: 'absolute',\n  opacity: 0,\n  width: '100%',\n  height: '100%',\n  top: 0,\n  left: 0,\n  margin: 0,\n  padding: 0,\n  zIndex: 1\n})\n\n/**\n * Special button for following or unfollowing a user.\n */\nexport const FollowButton = forwardRef(\n  (props: FollowButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const {\n      variant = 'default',\n      isFollowing = false,\n      onUnfollow,\n      onFollow,\n      size = 'default',\n      fullWidth = true,\n      messages: messagesProp,\n      ...other\n    } = props\n    const messages = { ...defaultMessages, ...messagesProp }\n    const { type } = other\n    const [value, setValueState] = useControlled({\n      componentName: 'FollowButton',\n      controlledProp: isFollowing,\n      defaultValue: undefined,\n      stateName: 'following'\n    })\n\n    // Track hover manually to swap text and icon\n    const [isHovering, setIsHovering] = useState(false)\n    const [isPressing, setIsPressing] = useState(false)\n\n    const handleMouseEnter = useCallback(() => {\n      setIsHovering(true)\n    }, [])\n\n    const handleMouseDown = useCallback(() => {\n      setIsPressing(true)\n    }, [])\n\n    const handleMouseLeave = useCallback(() => {\n      setIsHovering(false)\n    }, [])\n\n    const handleMouseUp = useCallback(() => {\n      setIsPressing(false)\n    }, [])\n\n    const handlePressIn = useCallback(() => {\n      setIsHovering(true)\n      setIsPressing(true)\n    }, [])\n\n    const handlePressOut = useCallback(() => {\n      setIsHovering(false)\n      setIsPressing(false)\n    }, [])\n\n    useEffect(() => {}, [value])\n\n    const handleClick = useCallback(() => {\n      if (value) {\n        onUnfollow?.()\n      } else {\n        onFollow?.()\n      }\n      setValueState(!value)\n    }, [value, setValueState, onUnfollow, onFollow])\n\n    const checkedValue = value\n    let Icon: IconComponent = IconUserFollow\n    let text = messages.follow\n    if (checkedValue && !isHovering) {\n      Icon = IconUserFollowing\n      text = messages.following\n    } else if (checkedValue && isHovering && !isPressing) {\n      Icon = IconUserUnfollow\n      text = messages.unfollow\n    }\n\n    const { color, cornerRadius, motion, shadows } = useTheme()\n\n    const textColor =\n      checkedValue || isHovering || isPressing ? 'white' : 'active'\n\n    const borderRadius =\n      variant === 'pill' ? cornerRadius['2xl'] : cornerRadius.s\n\n    const rootCss: CSSObject = {\n      cursor: 'pointer',\n      minWidth: size === 'small' ? 128 : 152,\n      width: fullWidth ? '100%' : undefined,\n      userSelect: 'none',\n      borderRadius,\n      backgroundColor: checkedValue\n        ? color.primary.primary\n        : color.special.white,\n      boxShadow: shadows.near,\n      border: `1px solid ${color.primary.primary}`,\n      transition: `\n        transform ${motion.hover},\n        border-color ${motion.hover},\n        background-color ${motion.hover},\n        color ${motion.hover}\n      `,\n      '&:hover': {\n        borderWidth: 0,\n        backgroundColor: color.primary.p300,\n        boxShadow: shadows.mid\n      },\n      '&:active': {\n        backgroundColor: color.primary.p500,\n        borderWidth: 0,\n        boxShadow: 'none'\n      }\n    }\n\n    // Handles case where user mouses down, moves cursor, and mouses up\n    useEffect(() => {\n      if (isPressing) {\n        document.addEventListener('mouseup', handleMouseUp)\n        return () => {\n          document.removeEventListener('mouseup', handleMouseUp)\n        }\n      }\n      return undefined\n    }, [isPressing, handleMouseUp])\n\n    const rootProps = {\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n      onMouseDown: handleMouseDown,\n      onMouseUp: handleMouseUp,\n      onTouchStart: handlePressIn,\n      onTouchEnd: handlePressOut\n    }\n\n    const buttonProps = type === 'checkbox' ? undefined : other\n    const inputProps = type === 'checkbox' ? other : undefined\n\n    return (\n      <Flex\n        // @ts-ignore flex not smart enough\n        ref={ref}\n        as={type === 'checkbox' ? 'label' : 'button'}\n        h={size === 'small' ? 28 : 32}\n        direction='row'\n        alignItems='center'\n        justifyContent='center'\n        gap='xs'\n        pv='s'\n        css={rootCss}\n        // @ts-ignore flex not smart enough\n        onClick={handleClick}\n        {...buttonProps}\n        {...rootProps}\n      >\n        <Icon height={18} width={18} color={textColor} />\n        <Text\n          variant='label'\n          tag='span'\n          size={size === 'small' ? 's' : 'l'}\n          strength='default'\n          color={textColor}\n        >\n          {text}\n        </Text>\n        {type === 'checkbox' ? (\n          <InputRoot {...inputProps} checked={isFollowing} />\n        ) : null}\n      </Flex>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/button/FollowButton/types.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithoutRef } from 'react';
+type InputProps = ({
+    type: 'checkbox';
+} & Omit<ComponentPropsWithoutRef<'input'>, 'chiildren' | 'size'>) | ({
+    type?: 'button' | undefined;
+} & Omit<ComponentPropsWithoutRef<'button'>, 'children'>);
+export type FollowButtonProps = {
+    /**
+     * Swap between the default (squared) and pill (rounded) forms.
+     * @default default
+     */
+    variant?: 'default' | 'pill';
+    /**
+     * Swap between the default and small sizes.
+     * @default default
+     */
+    size?: 'default' | 'small';
+    /**
+     * The current state of the button
+     */
+    isFollowing?: boolean;
+    /**
+     * Callback for when a follow is triggered.
+     */
+    onFollow?: () => void;
+    /**
+     * Callback for when an unfollow is triggered.
+     */
+    onUnfollow?: () => void;
+    fullWidth?: boolean;
+    messages?: {
+        follow?: string;
+        following?: string;
+        unfollow?: string;
+    };
+} & InputProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/button/FollowButton/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FollowButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAErD,KAAK,UAAU,GACX,CAAC;IACC,IAAI,EAAE,UAAU,CAAA;CACjB,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,GAClE,CAAC;IACC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAC5B,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC,CAAA;AAE7D,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAE5B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAE1B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IAEvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE;QACT,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;CACF,GAAG,UAAU,CAAA"}

package/dist/components/button/IconButton/IconButton.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { type CSSObject } from '@emotion/react';
+import type { IconComponent, IconProps } from '../../icon';
+import type { BaseButtonProps } from '../BaseButton/types';
+export type IconButtonProps = {
+    icon: IconComponent;
+    ripple?: boolean;
+    'aria-label': string;
+    iconCss?: CSSObject;
+    isActive?: boolean;
+    activeColor?: IconProps['color'];
+} & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> & BaseButtonProps;
+/**
+ * The icon component allows you to pass in an icon and
+ * apply color and sizing properties.
+ */
+export declare const IconButton: (props: {
+    icon: IconComponent;
+    ripple?: boolean | undefined;
+    'aria-label': string;
+    iconCss?: CSSObject | undefined;
+    isActive?: boolean | undefined;
+    activeColor?: IconProps['color'];
+} & Pick<IconProps, "color" | "size" | "shadow" | "height" | "width"> & {
+    iconLeft?: IconComponent | null | undefined;
+    iconRight?: 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;
+} & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=IconButton.d.ts.map