@unoff/ui 1.21.0

package/dist/components/lists/actions-list/ActionsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsList.js","sources":["../../../../src/components/lists/actions-list/ActionsList.tsx"],"sourcesContent":["import React from 'react'\nimport { DropdownOption } from '@tps/list.types'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Icon from '@components/assets/icon/Icon.tsx'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './actions-list.scss'\n\nexport interface ActionsListProps {\n  /**\n   * List of options to display\n   */\n  options: Array<DropdownOption>\n  /**\n   * ID of the currently selected option\n   */\n  selected?: string\n  /**\n   * Direction for submenu expansion\n   * @default 'RIGHT'\n   */\n  direction?: 'LEFT' | 'RIGHT'\n  /**\n   * Whether the list should be scrollable\n   * @default false\n   */\n  shouldScroll?: boolean\n  /**\n   * ID of the container element\n   */\n  containerId?: string\n  /**\n   * Preview tooltip configuration\n   */\n  preview?: {\n    /** Preview image URL */\n    image: string\n    /** Preview text */\n    text: string | React.ReactNode\n    /** Preview position */\n    pin?: 'TOP' | 'BOTTOM'\n  }\n  /**\n   * Callback when the list is cancelled\n   * @default () => null\n   */\n  onCancellation?: () => void\n  /**\n   * Ref to the menu element\n   */\n  menuRef?: React.RefObject<HTMLUListElement>\n  /**\n   * Ref to the submenu element\n   */\n  subMenuRef?: React.RefObject<HTMLUListElement>\n}\n\nexport interface ActionsListStates {\n  openedGroup: string\n  listScrollOffset: number\n  listScrollAmount: number\n  listClientHeight?: number\n  shift: number\n  isVisible: boolean\n}\n\nexport default class ActionsList extends React.Component<\n  ActionsListProps,\n  ActionsListStates\n> {\n  private scrollInterval: number | null\n  private subMenuContainerRef: React.RefObject<HTMLDivElement>\n\n  static defaultProps: Partial<ActionsListProps> = {\n    direction: 'RIGHT',\n    shouldScroll: false,\n    onCancellation: () => null,\n  }\n\n  constructor(props: ActionsListProps) {\n    super(props)\n    this.state = {\n      openedGroup: 'EMPTY',\n      listScrollOffset: 0,\n      listScrollAmount: 1,\n      listClientHeight: 1,\n      shift: 0,\n      isVisible: true,\n    }\n    this.scrollInterval = null\n    this.subMenuContainerRef = React.createRef<HTMLDivElement>()\n  }\n\n  componentDidUpdate(\n    prevProps: Readonly<ActionsListProps>,\n    prevState: Readonly<ActionsListStates>\n  ) {\n    const { shouldScroll } = this.props\n    const { openedGroup } = this.state\n    const list = document.getElementsByClassName(\n      'select-menu__menu'\n    )[0] as HTMLElement\n\n    if (prevProps.shouldScroll !== shouldScroll)\n      this.setState({\n        listScrollOffset: list.scrollTop,\n        listScrollAmount: list.scrollHeight - list.clientHeight,\n        listClientHeight: list.clientHeight,\n      })\n\n    if (prevState.openedGroup !== openedGroup) {\n      const subMenuElement = this.subMenuContainerRef.current\n      if (subMenuElement) {\n        const rect = subMenuElement.getBoundingClientRect()\n        if (rect.x < 0) this.setState({ shift: -rect.x + 8 })\n        if (rect.x + rect.width > window.innerWidth)\n          this.setState({\n            shift: window.innerWidth - rect.x - rect.width - 8,\n          })\n        this.setState({ isVisible: true })\n      }\n    }\n  }\n\n  // Direct Actions\n  focusFirstMenuItem = () => {\n    const { menuRef } = this.props\n\n    setTimeout(() => {\n      const menuElement = menuRef?.current\n      if (menuElement) {\n        const firstItem = menuElement.querySelector(\n          'li[tabindex=\"0\"]:not([data-is-blocked=\"true\"])'\n        ) as HTMLElement\n        if (firstItem) firstItem.focus()\n      }\n    }, 0)\n  }\n\n  focusFirstSubMenuItem = () => {\n    const { subMenuRef } = this.props\n\n    setTimeout(() => {\n      const subMenuElement = subMenuRef?.current\n      if (subMenuElement) {\n        const firstItem = subMenuElement.querySelector(\n          'li[tabindex=\"0\"]:not([data-is-blocked=\"true\"])'\n        ) as HTMLElement\n        if (firstItem) firstItem.focus()\n      }\n    }, 0)\n  }\n\n  onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    const target = e.target as HTMLElement\n    this.setState({\n      listScrollOffset: target.scrollTop,\n      listScrollAmount: target.scrollHeight - target.clientHeight,\n    })\n\n    if (target.scrollTop === 0) this.stopScrolling()\n    if (target.scrollTop === target.scrollHeight - target.clientHeight)\n      this.stopScrolling()\n  }\n\n  startScrolling = (direction: 'UP' | 'DOWN') => {\n    const list = document.getElementsByClassName('select-menu__menu')[0]\n\n    const scroll = () => {\n      if (list) {\n        if (direction === 'UP' && list.scrollTop > 0) list.scrollTop -= 4\n        else if (\n          direction === 'DOWN' &&\n          list.scrollTop < list.scrollHeight - list.clientHeight\n        )\n          list.scrollTop += 4\n\n        this.scrollInterval = requestAnimationFrame(scroll)\n      }\n    }\n\n    this.scrollInterval = requestAnimationFrame(scroll)\n  }\n\n  stopScrolling = () => {\n    if (this.scrollInterval) {\n      cancelAnimationFrame(this.scrollInterval)\n      this.scrollInterval = null\n    }\n  }\n\n  // Template\n  SubMenu = (options: Array<DropdownOption> | undefined) => {\n    const { subMenuRef } = this.props\n    const { shift, isVisible } = this.state\n\n    return (\n      <div\n        className=\"select-menu__submenu\"\n        role=\"menu\"\n        style={{\n          visibility: isVisible ? 'visible' : 'hidden',\n        }}\n        aria-hidden={!isVisible}\n        ref={this.subMenuContainerRef}\n      >\n        <ul\n          className=\"select-menu__menu select-menu__menu--active\"\n          ref={subMenuRef}\n          role=\"menu\"\n          style={{\n            transform: `translateX(${shift}px)`,\n          }}\n        >\n          {options?.map((option, index) => {\n            const isActive =\n                option.isActive !== undefined ? option.isActive : true,\n              isBlocked =\n                option.isBlocked !== undefined ? option.isBlocked : false,\n              isNew = option.isNew !== undefined ? option.isNew : false,\n              children = option.children !== undefined ? option.children : []\n\n            const activeChildren = children.filter(\n              (child) => child.isActive !== false\n            )\n\n            if (isActive && activeChildren.length > 0)\n              return this.MenuGroup(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n            else if (isActive && activeChildren.length === 0)\n              return this.MenuSubOption(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n          })}\n        </ul>\n      </div>\n    )\n  }\n\n  MenuTitle = (option: DropdownOption, index: number) => {\n    return (\n      <li\n        key={`menu-option-${index}`}\n        data-role={'TITLE'}\n        className={doClassnames([\n          'select-menu__item',\n          'select-menu__item--disabled',\n        ])}\n        aria-disabled=\"true\"\n      >\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n          aria-hidden=\"true\"\n        >\n          {option.label}\n        </span>\n      </li>\n    )\n  }\n\n  MenuSeparator = (index: number) => {\n    return (\n      <li\n        key={`menu-separator-${index}`}\n        data-role={'SEPARATOR'}\n      >\n        <hr />\n      </li>\n    )\n  }\n\n  MenuOption = (option: DropdownOption, index: number) => {\n    const { selected, preview, onCancellation } = this.props\n\n    return (\n      <li\n        key={`menu-option-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1 && 'select-menu__item--selected',\n          option.isBlocked && 'select-menu__item--blocked',\n        ])}\n        data-value={option.value}\n        data-is-blocked={option.isBlocked}\n        data-feature={option.feature}\n        data-role={'OPTION'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-current={\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1\n            ? 'true'\n            : undefined\n        }\n        aria-disabled={option.isBlocked}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked) {\n            option.action && option.action(e)\n            onCancellation?.()\n          }\n          if (e.key === 'Escape') onCancellation?.()\n\n          return null\n        }}\n        onMouseDown={(e) => {\n          !option.isBlocked ? option.action?.(e) : undefined\n          onCancellation?.()\n        }}\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        {selected?.split(', ').filter((value) => value === option.value)\n          .length === 1 && (\n          <span className=\"select-menu__item__tick\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"check\"\n            />\n          </span>\n        )}\n\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n      </li>\n    )\n  }\n\n  MenuGroup = (option: DropdownOption, index: number) => {\n    const { preview, onCancellation } = this.props\n    const { openedGroup } = this.state\n\n    return (\n      <li\n        key={`menu-group-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          option.isBlocked && ' select-menu__item--blocked',\n        ])}\n        style={{\n          zIndex: openedGroup === option.value ? 2 : 'auto',\n        }}\n        data-is-blocked={option.isBlocked}\n        data-role={'GROUP'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-disabled={option.isBlocked}\n        aria-haspopup=\"true\"\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked)\n            return this.setState({ openedGroup: option.value ?? 'EMPTY' }, () =>\n              this.focusFirstSubMenuItem()\n            )\n          if (e.key === 'Escape') onCancellation?.()\n\n          return null\n        }}\n        onMouseEnter={() =>\n          this.setState({ openedGroup: option.value ?? 'EMPTY' })\n        }\n        onMouseLeave={() => this.setState({ openedGroup: 'EMPTY' })}\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n        <span className=\"select-menu__item__caret\">\n          <Icon\n            type=\"PICTO\"\n            iconName=\"caret-right\"\n          />\n        </span>\n        {openedGroup === option.value && this.SubMenu(option.children)}\n      </li>\n    )\n  }\n\n  MenuSubOption = (option: DropdownOption, index: number) => {\n    const { selected, preview, onCancellation } = this.props\n\n    return (\n      <li\n        key={`menu-suboption-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1 && 'select-menu__item--selected',\n          option.isBlocked && 'select-menu__item--blocked',\n        ])}\n        data-value={option.value}\n        data-is-blocked={option.isBlocked}\n        data-feature={option.feature}\n        data-role={'OPTION'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-current={\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1\n            ? 'true'\n            : undefined\n        }\n        aria-disabled={option.isBlocked}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked) {\n            option.action && option.action(e)\n            onCancellation?.()\n          }\n          if (e.key === 'Escape')\n            this.setState({ openedGroup: 'EMPTY' }, () =>\n              this.focusFirstMenuItem()\n            )\n\n          return null\n        }}\n        onMouseDown={!option.isBlocked ? option.action : undefined}\n      >\n        {selected?.split(', ').filter((value) => value === option.value)\n          .length === 1 && (\n          <span className=\"select-menu__item__tick\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"check\"\n            />\n          </span>\n        )}\n        <span\n          className={doClassnames([\n            texts['type--small'],\n            texts.type,\n            'select-menu__item__label',\n          ])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n      </li>\n    )\n  }\n\n  render() {\n    const { options, direction, shouldScroll, menuRef } = this.props\n    const { listScrollOffset, listScrollAmount } = this.state\n\n    return (\n      <div\n        className=\"select-menu\"\n        style={{\n          height: shouldScroll ? '100%' : 'auto',\n        }}\n      >\n        {shouldScroll && listScrollOffset !== 0 && listScrollAmount !== 0 && (\n          <div\n            className=\"select-menu__spot select-menu__spot--top\"\n            onMouseEnter={() => this.startScrolling('UP')}\n            onMouseLeave={this.stopScrolling}\n          >\n            <Icon\n              type=\"PICTO\"\n              iconName=\"chevron-up\"\n            />\n          </div>\n        )}\n        <ul\n          className={doClassnames([\n            'select-menu__menu',\n            'select-menu__menu--active',\n            direction === 'RIGHT'\n              ? 'select-menu__menu--right'\n              : 'select-menu__menu--left',\n            shouldScroll && 'select-menu__menu--scrolling',\n          ])}\n          onScroll={this.onScroll}\n          ref={menuRef}\n        >\n          {options?.map((option, index) => {\n            const isActive =\n                option.isActive !== undefined ? option.isActive : true,\n              isBlocked =\n                option.isBlocked !== undefined ? option.isBlocked : false,\n              isNew = option.isNew !== undefined ? option.isNew : false,\n              children = option.children !== undefined ? option.children : []\n\n            if (isActive && option.type === 'SEPARATOR')\n              return this.MenuSeparator(index)\n            if (isActive && option.type === 'TITLE')\n              return this.MenuTitle(option, index)\n            if (isActive && option.type === 'OPTION')\n              return this.MenuOption(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n            if (isActive && option.type === 'GROUP' && children) {\n              const activeChildren = children.filter(\n                (child) => child.isActive !== false\n              )\n\n              if (activeChildren.length > 1)\n                return this.MenuGroup(\n                  { ...option, isActive, isBlocked, isNew, children },\n                  index\n                )\n              else if (activeChildren.length === 1)\n                return this.MenuOption(\n                  {\n                    ...activeChildren[0],\n                    isActive: activeChildren[0].isActive,\n                    isBlocked: activeChildren[0].isBlocked,\n                    isNew: activeChildren[0].isNew,\n                  },\n                  index\n                )\n              else return null\n            }\n            return null\n          })}\n        </ul>\n        {shouldScroll &&\n          listScrollAmount !== listScrollOffset &&\n          listScrollAmount !== 0 && (\n            <div\n              className=\"select-menu__spot select-menu__spot--bottom\"\n              onMouseEnter={() => this.startScrolling('DOWN')}\n              onMouseLeave={this.stopScrolling}\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName=\"chevron-down\"\n              />\n            </div>\n          )}\n      </div>\n    )\n  }\n}\n"],"names":["ActionsList","React","props","prevProps","prevState","shouldScroll","openedGroup","list","subMenuElement","rect","menuRef","menuElement","firstItem","subMenuRef","target","direction","scroll","options","shift","isVisible","jsx","option","index","isActive","isBlocked","isNew","children","activeChildren","child","doClassnames","texts","selected","preview","onCancellation","jsxs","value","e","Icon","Chip","listScrollOffset","listScrollAmount"],"mappings":"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"}

package/dist/components/lists/color-item/ColorItem.d.ts

@@ -0,0 +1,27 @@
+
+export type ColorItemProps = {
+    /**
+     * Unique identifier for the color item
+     */
+    id?: string;
+    /**
+     * Name of the color
+     */
+    name: string;
+    /**
+     * Hex color value
+     */
+    hex: string;
+    /**
+     * Whether the item can be removed
+     * @default false
+     */
+    canBeRemoved?: boolean;
+    /**
+     * Remove button handler
+     */
+    onRemoveColor?: React.ReactEventHandler;
+};
+declare const ColorItem: (props: ColorItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ColorItem;
+//# sourceMappingURL=ColorItem.d.ts.map

package/dist/components/lists/color-item/ColorItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorItem.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/color-item/ColorItem.tsx"],"names":[],"mappings":";AAKA,OAAO,mBAAmB,CAAA;AAE1B,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;CACxC,CAAA;AAED,QAAA,MAAM,SAAS,UAAW,cAAc,4CAkDvC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/components/lists/color-item/ColorItem.js

@@ -0,0 +1,70 @@
+import '../../../assets/ColorItem.css';
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import o from "../../../styles/texts/texts.module.js";
+import f from "../../tags/color-chip/ColorChip.js";
+import u from "../../actions/button/Button.js";
+import { t as m } from "../../../do-classnames-DSDFCvzy.js";
+const N = (a) => {
+  const { name: l, hex: t, id: n, canBeRemoved: r = !1, onRemoveColor: c } = a, [d, i] = p(!1);
+  return /* @__PURE__ */ s(
+    "li",
+    {
+      className: "color-item",
+      "data-id": n,
+      onMouseEnter: () => {
+        r && i(!0);
+      },
+      onMouseLeave: () => {
+        r && i(!1);
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "color-item__left",
+            role: "group",
+            children: /* @__PURE__ */ s(
+              "div",
+              {
+                className: "color-item__info",
+                role: "presentation",
+                children: [
+                  /* @__PURE__ */ e(
+                    f,
+                    {
+                      color: t,
+                      isRounded: !0
+                    }
+                  ),
+                  /* @__PURE__ */ e("div", { className: m([o.type, o["type--truncated"]]), children: l }),
+                  /* @__PURE__ */ e("div", { className: m([o.type, o["type--secondary"]]), children: t.toUpperCase() })
+                ]
+              }
+            )
+          }
+        ),
+        d && /* @__PURE__ */ e(
+          "div",
+          {
+            className: "color-item__right",
+            role: "group",
+            children: /* @__PURE__ */ e(
+              u,
+              {
+                type: "icon",
+                icon: "minus",
+                feature: "REMOVE_COLOR",
+                action: c
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  N as default
+};
+//# sourceMappingURL=ColorItem.js.map

package/dist/components/lists/color-item/ColorItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorItem.js","sources":["../../../../src/components/lists/color-item/ColorItem.tsx"],"sourcesContent":["import { useState } from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport ColorChip from '@components/tags/color-chip/ColorChip'\nimport Button from '@components/actions/button/Button'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './color-item.scss'\n\nexport type ColorItemProps = {\n  /**\n   * Unique identifier for the color item\n   */\n  id?: string\n  /**\n   * Name of the color\n   */\n  name: string\n  /**\n   * Hex color value\n   */\n  hex: string\n  /**\n   * Whether the item can be removed\n   * @default false\n   */\n  canBeRemoved?: boolean\n  /**\n   * Remove button handler\n   */\n  onRemoveColor?: React.ReactEventHandler\n}\n\nconst ColorItem = (props: ColorItemProps) => {\n  const { name, hex, id, canBeRemoved = false, onRemoveColor } = props\n  const [isRemovePermitted, setIsRemovePermitted] = useState(false)\n\n  return (\n    <li\n      className=\"color-item\"\n      data-id={id}\n      onMouseEnter={() => {\n        if (canBeRemoved) setIsRemovePermitted(true)\n      }}\n      onMouseLeave={() => {\n        if (canBeRemoved) setIsRemovePermitted(false)\n      }}\n    >\n      <div\n        className=\"color-item__left\"\n        role=\"group\"\n      >\n        <div\n          className=\"color-item__info\"\n          role=\"presentation\"\n        >\n          <ColorChip\n            color={hex}\n            isRounded\n          />\n          <div className={doClassnames([texts.type, texts['type--truncated']])}>\n            {name}\n          </div>\n          <div className={doClassnames([texts.type, texts['type--secondary']])}>\n            {hex.toUpperCase()}\n          </div>\n        </div>\n      </div>\n      {isRemovePermitted && (\n        <div\n          className=\"color-item__right\"\n          role=\"group\"\n        >\n          <Button\n            type=\"icon\"\n            icon=\"minus\"\n            feature=\"REMOVE_COLOR\"\n            action={onRemoveColor}\n          />\n        </div>\n      )}\n    </li>\n  )\n}\n\nexport default ColorItem\n"],"names":["ColorItem","props","name","hex","id","canBeRemoved","onRemoveColor","isRemovePermitted","setIsRemovePermitted","useState","jsxs","jsx","ColorChip","doClassnames","texts","Button"],"mappings":";;;;;;AA+BA,MAAMA,IAAY,CAACC,MAA0B;AAC3C,QAAM,EAAE,MAAAC,GAAM,KAAAC,GAAK,IAAAC,GAAI,cAAAC,IAAe,IAAO,eAAAC,MAAkBL,GACzD,CAACM,GAAmBC,CAAoB,IAAIC,EAAS,EAAK;AAEhE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,WAASN;AAAA,MACT,cAAc,MAAM;AAClB,QAAIC,OAAmC,EAAI;AAAA,MAC7C;AAAA,MACA,cAAc,MAAM;AAClB,QAAIA,OAAmC,EAAK;AAAA,MAC9C;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,MAAK;AAAA,gBAEL,UAAA;AAAA,kBAAA,gBAAAC;AAAA,oBAACC;AAAA,oBAAA;AAAA,sBACC,OAAOT;AAAA,sBACP,WAAS;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEX,gBAAAQ,EAAC,OAAA,EAAI,WAAWE,EAAa,CAACC,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC,GAChE,UAAAZ,EAAA,CACH;AAAA,kBACA,gBAAAS,EAAC,OAAA,EAAI,WAAWE,EAAa,CAACC,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC,GAChE,UAAAX,EAAI,cAAY,CACnB;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAEDI,KACC,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA,gBAAAA;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,QAAQT;AAAA,cAAA;AAAA,YAAA;AAAA,UACV;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/lists/draggable-item/DraggableItem.d.ts

@@ -0,0 +1,110 @@
+import { default as React } from 'react';
+
+export interface DraggableItemProps {
+    /**
+     * Unique identifier for the item
+     */
+    id: string;
+    /**
+     * Index position in the list
+     */
+    index: number;
+    /**
+     * Whether the item can be removed
+     * @default true
+     */
+    canBeRemoved?: boolean;
+    /**
+     * Primary content slot
+     */
+    primarySlot: React.ReactNode;
+    /**
+     * Secondary content configuration
+     */
+    secondarySlot?: {
+        /** Title for the secondary content */
+        title: string;
+        /** Content node */
+        node: React.ReactNode;
+    };
+    /**
+     * Action buttons slot
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Whether the item is selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Title for the options panel
+     */
+    optionsTitle?: string;
+    /**
+     * Helper texts for buttons
+     */
+    helpers?: {
+        /** Helper for remove button */
+        remove?: string;
+        /** Helper for more options button */
+        more?: string;
+    };
+    /**
+     * Whether to show drop guide above
+     * @default false
+     */
+    guideAbove?: boolean;
+    /**
+     * Whether to show drop guide below
+     * @default false
+     */
+    guideBelow?: boolean;
+    /**
+     * Whether the item is blocked
+     * @default false
+     */
+    isBlocked?: boolean;
+    /**
+     * Selection change handler
+     */
+    onChangeSelection: React.MouseEventHandler<HTMLLIElement>;
+    /**
+     * Cancel selection handler
+     */
+    onCancelSelection: React.MouseEventHandler<Element> & React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Refold options handler
+     */
+    onRefoldOptions?: () => void;
+    /**
+     * Drag state change handler
+     */
+    onDragChange: (id: string | undefined, hasGuideAbove: boolean, hasGuideBelow: boolean, position: number) => void;
+    /**
+     * Drop outside handler
+     */
+    onDropOutside: (e: React.DragEvent<HTMLLIElement>) => void;
+    /**
+     * Order change handler
+     */
+    onChangeOrder: (e: React.DragEvent<HTMLLIElement>) => void;
+    /**
+     * Remove item handler
+     */
+    onRemove: React.MouseEventHandler<Element> & React.KeyboardEventHandler<Element>;
+}
+export interface DraggableItemStates {
+    isDragged: boolean;
+    hasMoreOptions: boolean;
+}
+export default class DraggableItem extends React.Component<DraggableItemProps, DraggableItemStates> {
+    private moreButtonRef;
+    static defaultProps: Partial<DraggableItemProps>;
+    constructor(props: DraggableItemProps);
+    onDragStart: (e: React.DragEvent<HTMLLIElement>) => void;
+    onDragEnd: (e: React.DragEvent<HTMLLIElement>) => void;
+    onDragOver: (e: React.DragEvent<HTMLLIElement>) => void;
+    onDrop: (e: React.DragEvent<HTMLLIElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=DraggableItem.d.ts.map

package/dist/components/lists/draggable-item/DraggableItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableItem.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/draggable-item/DraggableItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,uBAAuB,CAAA;AAE9B,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE;QACd,sCAAsC;QACtC,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;KACtB,CAAA;IACD;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,+BAA+B;QAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,qCAAqC;QACrC,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAA;IACzD;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,GACjD,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC3C;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;OAEG;IACH,YAAY,EAAE,CACZ,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,aAAa,EAAE,OAAO,EACtB,aAAa,EAAE,OAAO,EACtB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAA;IACT;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IAC1D;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IAC1D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,GACxC,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAA;CACtC;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,cAAc,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAS,CACxD,kBAAkB,EAClB,mBAAmB,CACpB;IACC,OAAO,CAAC,aAAa,CAAyB;IAE9C,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAM/C;gBAEW,KAAK,EAAE,kBAAkB;IAUrC,WAAW,MAAO,eAAe,CAAC,aAAa,CAAC,UAa/C;IAED,SAAS,MAAO,eAAe,CAAC,aAAa,CAAC,UAO7C;IAED,UAAU,MAAO,eAAe,CAAC,aAAa,CAAC,UAwB9C;IAED,MAAM,MAAO,eAAe,CAAC,aAAa,CAAC,UAK1C;IAGD,MAAM;CA0HP"}

package/dist/components/lists/draggable-item/DraggableItem.js

@@ -0,0 +1,176 @@
+import '../../../assets/DraggableItem.css';
+import { jsxs as p, jsx as g } from "react/jsx-runtime";
+import m from "react";
+import S from "../../slots/draggable-window/DraggableWindow.js";
+import h from "../../actions/button/Button.js";
+import { r as y } from "../../../do-map-2nhWP1KI.js";
+import { t as B } from "../../../do-classnames-DSDFCvzy.js";
+class A extends m.Component {
+  moreButtonRef;
+  static defaultProps = {
+    canBeRemoved: !0,
+    selected: !1,
+    guideAbove: !1,
+    guideBelow: !1,
+    isBlocked: !1
+  };
+  constructor(e) {
+    super(e), this.state = {
+      isDragged: !1,
+      hasMoreOptions: !1
+    }, this.moreButtonRef = m.createRef();
+  }
+  // Direct Actions
+  onDragStart = (e) => {
+    const t = e.currentTarget.cloneNode(!0);
+    this.setState({ isDragged: !0 }), t.style.opacity = "0", t.style.position = "absolute", t.id = "ghost", t.style.pointerEvents = "none", document.body.appendChild(t), e.dataTransfer && (e.dataTransfer.setDragImage(t, 0, 0), e.dataTransfer.effectAllowed = "move");
+  };
+  onDragEnd = (e) => {
+    const { onDropOutside: t, onDragChange: o } = this.props;
+    this.setState({ isDragged: !1 }), o("", !1, !1, 0), t(e), document.querySelector("#ghost")?.remove();
+  };
+  onDragOver = (e) => {
+    const { onDragChange: t } = this.props;
+    e.preventDefault();
+    const o = e.currentTarget, c = o.getBoundingClientRect(), a = o.clientHeight, l = e.clientY - c.top, i = y(l, 0, a, 0, a);
+    i >= -1 && i <= a / 2 ? t(
+      o.dataset.id,
+      !0,
+      !1,
+      parseFloat(o.dataset.position ?? "0")
+    ) : i > a / 2 && i <= a && t(
+      o.dataset.id,
+      !1,
+      !0,
+      parseFloat(o.dataset.position ?? "0")
+    );
+  };
+  onDrop = (e) => {
+    const { onChangeOrder: t } = this.props;
+    e.preventDefault(), t(e);
+  };
+  // Render
+  render() {
+    const {
+      id: e,
+      index: t,
+      canBeRemoved: o,
+      primarySlot: c,
+      secondarySlot: a,
+      actionsSlot: l,
+      selected: i,
+      optionsTitle: u,
+      helpers: d,
+      guideAbove: v,
+      guideBelow: D,
+      isBlocked: n,
+      onRemove: b,
+      onChangeSelection: R,
+      onCancelSelection: C,
+      onRefoldOptions: E
+    } = this.props, { isDragged: f, hasMoreOptions: r } = this.state;
+    return /* @__PURE__ */ p(
+      "li",
+      {
+        "data-id": e,
+        "data-position": t,
+        className: B([
+          "draggable-item",
+          f && "draggable-item--dragged",
+          v && "draggable-item--above",
+          D && "draggable-item--below"
+        ]),
+        draggable: !r && !n ? i : !1,
+        "aria-grabbed": f,
+        "aria-current": i ? "true" : void 0,
+        onMouseDown: (s) => {
+          !r && !n && R(s);
+        },
+        onDragStart: (s) => {
+          !r && !n && this.onDragStart(s);
+        },
+        onDragEnd: (s) => {
+          !r && !n && this.onDragEnd(s);
+        },
+        onDragOver: (s) => {
+          !r && !n && this.onDragOver(s);
+        },
+        onDrop: (s) => {
+          !r && !n && this.onDrop(s);
+        },
+        children: [
+          /* @__PURE__ */ p(
+            "div",
+            {
+              className: "draggable-item__primary",
+              role: "group",
+              children: [
+                /* @__PURE__ */ g(
+                  "div",
+                  {
+                    className: "draggable-item__left",
+                    role: "presentation",
+                    children: c
+                  }
+                ),
+                /* @__PURE__ */ p(
+                  "div",
+                  {
+                    className: "draggable-item__right",
+                    role: "group",
+                    children: [
+                      a !== void 0 && /* @__PURE__ */ g(
+                        h,
+                        {
+                          ref: this.moreButtonRef,
+                          type: "icon",
+                          icon: "ellipses",
+                          state: r ? "selected" : void 0,
+                          helper: d?.more !== void 0 ? {
+                            label: d.more
+                          } : void 0,
+                          action: () => {
+                            this.setState({ hasMoreOptions: !r });
+                          }
+                        }
+                      ),
+                      l !== void 0 && l,
+                      /* @__PURE__ */ g(
+                        h,
+                        {
+                          type: "icon",
+                          icon: "minus",
+                          helper: d?.remove !== void 0 ? {
+                            label: d.remove
+                          } : void 0,
+                          feature: "REMOVE_ITEM",
+                          isDisabled: !o,
+                          action: o ? b : () => null
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          r && a !== void 0 && /* @__PURE__ */ g(
+            S,
+            {
+              title: a.title !== void 0 ? a.title : u,
+              onClose: () => this.setState({
+                hasMoreOptions: !1
+              }),
+              triggerRef: this.moreButtonRef,
+              children: a.node
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+export {
+  A as default
+};
+//# sourceMappingURL=DraggableItem.js.map

package/dist/components/lists/draggable-item/DraggableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableItem.js","sources":["../../../../src/components/lists/draggable-item/DraggableItem.tsx"],"sourcesContent":["import React from 'react'\nimport DraggableWindow from '@components/slots/draggable-window/DraggableWindow'\nimport Button from '@components/actions/button/Button'\nimport { doClassnames, doMap } from '@a_ng_d/figmug-utils'\nimport './draggable-item.scss'\n\nexport interface DraggableItemProps {\n  /**\n   * Unique identifier for the item\n   */\n  id: string\n  /**\n   * Index position in the list\n   */\n  index: number\n  /**\n   * Whether the item can be removed\n   * @default true\n   */\n  canBeRemoved?: boolean\n  /**\n   * Primary content slot\n   */\n  primarySlot: React.ReactNode\n  /**\n   * Secondary content configuration\n   */\n  secondarySlot?: {\n    /** Title for the secondary content */\n    title: string\n    /** Content node */\n    node: React.ReactNode\n  }\n  /**\n   * Action buttons slot\n   */\n  actionsSlot?: React.ReactNode\n  /**\n   * Whether the item is selected\n   * @default false\n   */\n  selected?: boolean\n  /**\n   * Title for the options panel\n   */\n  optionsTitle?: string\n  /**\n   * Helper texts for buttons\n   */\n  helpers?: {\n    /** Helper for remove button */\n    remove?: string\n    /** Helper for more options button */\n    more?: string\n  }\n  /**\n   * Whether to show drop guide above\n   * @default false\n   */\n  guideAbove?: boolean\n  /**\n   * Whether to show drop guide below\n   * @default false\n   */\n  guideBelow?: boolean\n  /**\n   * Whether the item is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Selection change handler\n   */\n  onChangeSelection: React.MouseEventHandler<HTMLLIElement>\n  /**\n   * Cancel selection handler\n   */\n  onCancelSelection: React.MouseEventHandler<Element> &\n    React.FocusEventHandler<HTMLInputElement>\n  /**\n   * Refold options handler\n   */\n  onRefoldOptions?: () => void\n  /**\n   * Drag state change handler\n   */\n  onDragChange: (\n    id: string | undefined,\n    hasGuideAbove: boolean,\n    hasGuideBelow: boolean,\n    position: number\n  ) => void\n  /**\n   * Drop outside handler\n   */\n  onDropOutside: (e: React.DragEvent<HTMLLIElement>) => void\n  /**\n   * Order change handler\n   */\n  onChangeOrder: (e: React.DragEvent<HTMLLIElement>) => void\n  /**\n   * Remove item handler\n   */\n  onRemove: React.MouseEventHandler<Element> &\n    React.KeyboardEventHandler<Element>\n}\n\nexport interface DraggableItemStates {\n  isDragged: boolean\n  hasMoreOptions: boolean\n}\n\nexport default class DraggableItem extends React.Component<\n  DraggableItemProps,\n  DraggableItemStates\n> {\n  private moreButtonRef: React.RefObject<Button>\n\n  static defaultProps: Partial<DraggableItemProps> = {\n    canBeRemoved: true,\n    selected: false,\n    guideAbove: false,\n    guideBelow: false,\n    isBlocked: false,\n  }\n\n  constructor(props: DraggableItemProps) {\n    super(props)\n    this.state = {\n      isDragged: false,\n      hasMoreOptions: false,\n    }\n    this.moreButtonRef = React.createRef()\n  }\n\n  // Direct Actions\n  onDragStart = (e: React.DragEvent<HTMLLIElement>) => {\n    const clone = e.currentTarget.cloneNode(true)\n\n    this.setState({ isDragged: true })\n    ;(clone as HTMLElement).style.opacity = '0'\n    ;(clone as HTMLElement).style.position = 'absolute'\n    ;(clone as HTMLElement).id = 'ghost'\n    ;(clone as HTMLElement).style.pointerEvents = 'none'\n    document.body.appendChild(clone)\n    if (e.dataTransfer) {\n      e.dataTransfer.setDragImage(clone as Element, 0, 0)\n      e.dataTransfer.effectAllowed = 'move'\n    }\n  }\n\n  onDragEnd = (e: React.DragEvent<HTMLLIElement>) => {\n    const { onDropOutside, onDragChange } = this.props\n\n    this.setState({ isDragged: false })\n    onDragChange('', false, false, 0)\n    onDropOutside(e)\n    document.querySelector('#ghost')?.remove()\n  }\n\n  onDragOver = (e: React.DragEvent<HTMLLIElement>) => {\n    const { onDragChange } = this.props\n\n    e.preventDefault()\n    const target = e.currentTarget\n    const rect = target.getBoundingClientRect()\n    const height: number = target.clientHeight\n    const y: number = e.clientY - rect.top\n    const refY: number = doMap(y, 0, height, 0, height)\n\n    if (refY >= -1 && refY <= height / 2)\n      onDragChange(\n        target.dataset.id,\n        true,\n        false,\n        parseFloat(target.dataset.position ?? '0')\n      )\n    else if (refY > height / 2 && refY <= height)\n      onDragChange(\n        target.dataset.id,\n        false,\n        true,\n        parseFloat(target.dataset.position ?? '0')\n      )\n  }\n\n  onDrop = (e: React.DragEvent<HTMLLIElement>) => {\n    const { onChangeOrder } = this.props\n\n    e.preventDefault()\n    onChangeOrder(e)\n  }\n\n  // Render\n  render() {\n    const {\n      id,\n      index,\n      canBeRemoved,\n      primarySlot,\n      secondarySlot,\n      actionsSlot,\n      selected,\n      optionsTitle,\n      helpers,\n      guideAbove,\n      guideBelow,\n      isBlocked,\n      onRemove,\n      onChangeSelection,\n      onCancelSelection,\n      onRefoldOptions,\n    } = this.props\n\n    const { isDragged, hasMoreOptions } = this.state\n\n    return (\n      <li\n        data-id={id}\n        data-position={index}\n        className={doClassnames([\n          'draggable-item',\n          isDragged && 'draggable-item--dragged',\n          guideAbove && 'draggable-item--above',\n          guideBelow && 'draggable-item--below',\n        ])}\n        draggable={!hasMoreOptions && !isBlocked ? selected : false}\n        aria-grabbed={isDragged}\n        aria-current={selected ? 'true' : undefined}\n        onMouseDown={(e) => {\n          if (!hasMoreOptions && !isBlocked) onChangeSelection(e)\n        }}\n        onDragStart={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDragStart(e)\n        }}\n        onDragEnd={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDragEnd(e)\n        }}\n        onDragOver={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDragOver(e)\n        }}\n        onDrop={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDrop(e)\n        }}\n      >\n        <div\n          className=\"draggable-item__primary\"\n          role=\"group\"\n        >\n          <div\n            className=\"draggable-item__left\"\n            role=\"presentation\"\n          >\n            {primarySlot}\n          </div>\n          <div\n            className=\"draggable-item__right\"\n            role=\"group\"\n          >\n            {secondarySlot !== undefined && (\n              <Button\n                ref={this.moreButtonRef}\n                type=\"icon\"\n                icon=\"ellipses\"\n                state={hasMoreOptions ? 'selected' : undefined}\n                helper={\n                  helpers?.more !== undefined\n                    ? {\n                        label: helpers.more,\n                      }\n                    : undefined\n                }\n                action={() => {\n                  onCancelSelection\n                  onRefoldOptions\n                  this.setState({ hasMoreOptions: !hasMoreOptions })\n                }}\n              />\n            )}\n            {actionsSlot !== undefined && actionsSlot}\n            <Button\n              type=\"icon\"\n              icon=\"minus\"\n              helper={\n                helpers?.remove !== undefined\n                  ? {\n                      label: helpers.remove,\n                    }\n                  : undefined\n              }\n              feature=\"REMOVE_ITEM\"\n              isDisabled={!canBeRemoved}\n              action={canBeRemoved ? onRemove : () => null}\n            />\n          </div>\n        </div>\n        {hasMoreOptions && secondarySlot !== undefined && (\n          <DraggableWindow\n            title={\n              secondarySlot.title !== undefined\n                ? secondarySlot.title\n                : optionsTitle\n            }\n            onClose={() =>\n              this.setState({\n                hasMoreOptions: false,\n              })\n            }\n            triggerRef={this.moreButtonRef}\n          >\n            {secondarySlot.node}\n          </DraggableWindow>\n        )}\n      </li>\n    )\n  }\n}\n"],"names":["DraggableItem","React","props","clone","onDropOutside","onDragChange","target","rect","height","y","refY","doMap","onChangeOrder","id","index","canBeRemoved","primarySlot","secondarySlot","actionsSlot","selected","optionsTitle","helpers","guideAbove","guideBelow","isBlocked","onRemove","onChangeSelection","onCancelSelection","onRefoldOptions","isDragged","hasMoreOptions","jsxs","doClassnames","e","jsx","Button","DraggableWindow"],"mappings":";;;;;;AAgHA,MAAqBA,UAAsBC,EAAM,UAG/C;AAAA,EACQ;AAAA,EAER,OAAO,eAA4C;AAAA,IACjD,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAGb,YAAYC,GAA2B;AACrC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,WAAW;AAAA,MACX,gBAAgB;AAAA,IAAA,GAElB,KAAK,gBAAgBD,EAAM,UAAA;AAAA,EAC7B;AAAA;AAAA,EAGA,cAAc,CAAC,MAAsC;AACnD,UAAME,IAAQ,EAAE,cAAc,UAAU,EAAI;AAE5C,SAAK,SAAS,EAAE,WAAW,GAAA,CAAM,GAC/BA,EAAsB,MAAM,UAAU,KACtCA,EAAsB,MAAM,WAAW,YACvCA,EAAsB,KAAK,SAC3BA,EAAsB,MAAM,gBAAgB,QAC9C,SAAS,KAAK,YAAYA,CAAK,GAC3B,EAAE,iBACJ,EAAE,aAAa,aAAaA,GAAkB,GAAG,CAAC,GAClD,EAAE,aAAa,gBAAgB;AAAA,EAEnC;AAAA,EAEA,YAAY,CAAC,MAAsC;AACjD,UAAM,EAAE,eAAAC,GAAe,cAAAC,EAAA,IAAiB,KAAK;AAE7C,SAAK,SAAS,EAAE,WAAW,GAAA,CAAO,GAClCA,EAAa,IAAI,IAAO,IAAO,CAAC,GAChCD,EAAc,CAAC,GACf,SAAS,cAAc,QAAQ,GAAG,OAAA;AAAA,EACpC;AAAA,EAEA,aAAa,CAAC,MAAsC;AAClD,UAAM,EAAE,cAAAC,MAAiB,KAAK;AAE9B,MAAE,eAAA;AACF,UAAMC,IAAS,EAAE,eACXC,IAAOD,EAAO,sBAAA,GACdE,IAAiBF,EAAO,cACxBG,IAAY,EAAE,UAAUF,EAAK,KAC7BG,IAAeC,EAAMF,GAAG,GAAGD,GAAQ,GAAGA,CAAM;AAElD,IAAIE,KAAQ,MAAMA,KAAQF,IAAS,IACjCH;AAAA,MACEC,EAAO,QAAQ;AAAA,MACf;AAAA,MACA;AAAA,MACA,WAAWA,EAAO,QAAQ,YAAY,GAAG;AAAA,IAAA,IAEpCI,IAAOF,IAAS,KAAKE,KAAQF,KACpCH;AAAA,MACEC,EAAO,QAAQ;AAAA,MACf;AAAA,MACA;AAAA,MACA,WAAWA,EAAO,QAAQ,YAAY,GAAG;AAAA,IAAA;AAAA,EAE/C;AAAA,EAEA,SAAS,CAAC,MAAsC;AAC9C,UAAM,EAAE,eAAAM,MAAkB,KAAK;AAE/B,MAAE,eAAA,GACFA,EAAc,CAAC;AAAA,EACjB;AAAA;AAAA,EAGA,SAAS;AACP,UAAM;AAAA,MACJ,IAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,eAAAC;AAAA,MACA,aAAAC;AAAA,MACA,UAAAC;AAAA,MACA,cAAAC;AAAA,MACA,SAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA,IACE,KAAK,OAEH,EAAE,WAAAC,GAAW,gBAAAC,EAAA,IAAmB,KAAK;AAE3C,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAASlB;AAAA,QACT,iBAAeC;AAAA,QACf,WAAWkB,EAAa;AAAA,UACtB;AAAA,UACAH,KAAa;AAAA,UACbP,KAAc;AAAA,UACdC,KAAc;AAAA,QAAA,CACf;AAAA,QACD,WAAW,CAACO,KAAkB,CAACN,IAAYL,IAAW;AAAA,QACtD,gBAAcU;AAAA,QACd,gBAAcV,IAAW,SAAS;AAAA,QAClC,aAAa,CAACc,MAAM;AAClB,UAAI,CAACH,KAAkB,CAACN,OAA6BS,CAAC;AAAA,QACxD;AAAA,QACA,aAAa,CAACA,MAAM;AAClB,UAAI,CAACH,KAAkB,CAACN,KAAW,KAAK,YAAYS,CAAC;AAAA,QACvD;AAAA,QACA,WAAW,CAACA,MAAM;AAChB,UAAI,CAACH,KAAkB,CAACN,KAAW,KAAK,UAAUS,CAAC;AAAA,QACrD;AAAA,QACA,YAAY,CAACA,MAAM;AACjB,UAAI,CAACH,KAAkB,CAACN,KAAW,KAAK,WAAWS,CAAC;AAAA,QACtD;AAAA,QACA,QAAQ,CAACA,MAAM;AACb,UAAI,CAACH,KAAkB,CAACN,KAAW,KAAK,OAAOS,CAAC;AAAA,QAClD;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEL,UAAA;AAAA,gBAAA,gBAAAG;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,MAAK;AAAA,oBAEJ,UAAAlB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEH,gBAAAe;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,MAAK;AAAA,oBAEJ,UAAA;AAAA,sBAAAd,MAAkB,UACjB,gBAAAiB;AAAA,wBAACC;AAAA,wBAAA;AAAA,0BACC,KAAK,KAAK;AAAA,0BACV,MAAK;AAAA,0BACL,MAAK;AAAA,0BACL,OAAOL,IAAiB,aAAa;AAAA,0BACrC,QACET,GAAS,SAAS,SACd;AAAA,4BACE,OAAOA,EAAQ;AAAA,0BAAA,IAEjB;AAAA,0BAEN,QAAQ,MAAM;AAGZ,iCAAK,SAAS,EAAE,gBAAgB,CAACS,GAAgB;AAAA,0BACnD;AAAA,wBAAA;AAAA,sBAAA;AAAA,sBAGHZ,MAAgB,UAAaA;AAAA,sBAC9B,gBAAAgB;AAAA,wBAACC;AAAA,wBAAA;AAAA,0BACC,MAAK;AAAA,0BACL,MAAK;AAAA,0BACL,QACEd,GAAS,WAAW,SAChB;AAAA,4BACE,OAAOA,EAAQ;AAAA,0BAAA,IAEjB;AAAA,0BAEN,SAAQ;AAAA,0BACR,YAAY,CAACN;AAAA,0BACb,QAAQA,IAAeU,IAAW,MAAM;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBAC1C;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEDK,KAAkBb,MAAkB,UACnC,gBAAAiB;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,OACEnB,EAAc,UAAU,SACpBA,EAAc,QACdG;AAAA,cAEN,SAAS,MACP,KAAK,SAAS;AAAA,gBACZ,gBAAgB;AAAA,cAAA,CACjB;AAAA,cAEH,YAAY,KAAK;AAAA,cAEhB,UAAAH,EAAc;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.d.ts

@@ -0,0 +1,19 @@
+
+export type KeyboardShortcutItemProps = {
+    /**
+     * Label describing the action
+     */
+    label: string;
+    /**
+     * Array of keyboard shortcut combinations
+     */
+    shortcuts: Array<Array<string>>;
+    /**
+     * Separator between multiple shortcuts
+     * @default ''
+     */
+    separator?: string;
+};
+declare const KeyboardShortcutItem: (props: KeyboardShortcutItemProps) => import("react/jsx-runtime").JSX.Element;
+export default KeyboardShortcutItem;
+//# sourceMappingURL=KeyboardShortcutItem.d.ts.map

package/dist/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcutItem.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.tsx"],"names":[],"mappings":"AAEA,OAAO,+BAA+B,CAAA;AAEtC,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,oBAAoB,UAAW,yBAAyB,4CA+D7D,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.js

@@ -0,0 +1,75 @@
+import '../../../assets/KeyboardShortcutItem.css';
+import { jsxs as o, jsx as e, Fragment as l } from "react/jsx-runtime";
+import r from "../../../styles/texts/texts.module.js";
+import { t as i } from "../../../do-classnames-DSDFCvzy.js";
+const y = (n) => {
+  const { label: c, shortcuts: t = [], separator: m = "" } = n;
+  return /* @__PURE__ */ o("li", { className: "keyboard-shortcut-item", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "keyboard-shortcut-item__label",
+        role: "presentation",
+        children: /* @__PURE__ */ e(
+          "span",
+          {
+            className: r.type,
+            role: "presentation",
+            children: c
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "keyboard-shortcut-item__keys",
+        role: "group",
+        children: /* @__PURE__ */ o(l, { children: [
+          t[0].map((a, s) => /* @__PURE__ */ e(
+            "span",
+            {
+              className: i([
+                "keyboard-shortcut-item__key",
+                r.type
+              ]),
+              role: "presentation",
+              children: a
+            },
+            s
+          )),
+          t[1] !== void 0 && /* @__PURE__ */ o(l, { children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: i([
+                  "keyboard-shortcut-item__separator",
+                  r.type
+                ]),
+                role: "presentation",
+                "aria-hidden": "true",
+                children: m
+              }
+            ),
+            t[1].map((a, s) => /* @__PURE__ */ e(
+              "span",
+              {
+                className: i([
+                  "keyboard-shortcut-item__key",
+                  r.type
+                ]),
+                role: "presentation",
+                children: a
+              },
+              s
+            ))
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  y as default
+};
+//# sourceMappingURL=KeyboardShortcutItem.js.map

package/dist/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcutItem.js","sources":["../../../../src/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.tsx"],"sourcesContent":["import texts from '@styles/texts/texts.module.scss'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './keyboard-shortcut-item.scss'\n\nexport type KeyboardShortcutItemProps = {\n  /**\n   * Label describing the action\n   */\n  label: string\n  /**\n   * Array of keyboard shortcut combinations\n   */\n  shortcuts: Array<Array<string>>\n  /**\n   * Separator between multiple shortcuts\n   * @default ''\n   */\n  separator?: string\n}\n\nconst KeyboardShortcutItem = (props: KeyboardShortcutItemProps) => {\n  const { label, shortcuts = [], separator = '' } = props\n\n  return (\n    <li className=\"keyboard-shortcut-item\">\n      <div\n        className=\"keyboard-shortcut-item__label\"\n        role=\"presentation\"\n      >\n        <span\n          className={texts.type}\n          role=\"presentation\"\n        >\n          {label}\n        </span>\n      </div>\n      <div\n        className=\"keyboard-shortcut-item__keys\"\n        role=\"group\"\n      >\n        <>\n          {shortcuts[0].map((shortcut, index) => (\n            <span\n              className={doClassnames([\n                'keyboard-shortcut-item__key',\n                texts.type,\n              ])}\n              key={index}\n              role=\"presentation\"\n            >\n              {shortcut}\n            </span>\n          ))}\n          {shortcuts[1] !== undefined && (\n            <>\n              <span\n                className={doClassnames([\n                  'keyboard-shortcut-item__separator',\n                  texts.type,\n                ])}\n                role=\"presentation\"\n                aria-hidden=\"true\"\n              >\n                {separator}\n              </span>\n              {shortcuts[1].map((shortcut, index) => (\n                <span\n                  className={doClassnames([\n                    'keyboard-shortcut-item__key',\n                    texts.type,\n                  ])}\n                  key={index}\n                  role=\"presentation\"\n                >\n                  {shortcut}\n                </span>\n              ))}\n            </>\n          )}\n        </>\n      </div>\n    </li>\n  )\n}\n\nexport default KeyboardShortcutItem\n"],"names":["KeyboardShortcutItem","props","label","shortcuts","separator","jsxs","jsx","texts","Fragment","shortcut","index","doClassnames"],"mappings":";;;AAoBA,MAAMA,IAAuB,CAACC,MAAqC;AACjE,QAAM,EAAE,OAAAC,GAAO,WAAAC,IAAY,CAAA,GAAI,WAAAC,IAAY,OAAOH;AAElD,SACE,gBAAAI,EAAC,MAAA,EAAG,WAAU,0BACZ,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QAEL,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAM;AAAA,YACjB,MAAK;AAAA,YAEJ,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAEF,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QAEL,UAAA,gBAAAD,EAAAG,GAAA,EACG,UAAA;AAAA,UAAAL,EAAU,CAAC,EAAE,IAAI,CAACM,GAAUC,MAC3B,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWK,EAAa;AAAA,gBACtB;AAAA,gBACAJ,EAAM;AAAA,cAAA,CACP;AAAA,cAED,MAAK;AAAA,cAEJ,UAAAE;AAAA,YAAA;AAAA,YAHIC;AAAA,UAAA,CAKR;AAAA,UACAP,EAAU,CAAC,MAAM,UAChB,gBAAAE,EAAAG,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWK,EAAa;AAAA,kBACtB;AAAA,kBACAJ,EAAM;AAAA,gBAAA,CACP;AAAA,gBACD,MAAK;AAAA,gBACL,eAAY;AAAA,gBAEX,UAAAH;AAAA,cAAA;AAAA,YAAA;AAAA,YAEFD,EAAU,CAAC,EAAE,IAAI,CAACM,GAAUC,MAC3B,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWK,EAAa;AAAA,kBACtB;AAAA,kBACAJ,EAAM;AAAA,gBAAA,CACP;AAAA,gBAED,MAAK;AAAA,gBAEJ,UAAAE;AAAA,cAAA;AAAA,cAHIC;AAAA,YAAA,CAKR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/lists/members-list/MembersList.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+
+export interface MembersListProps {
+    /**
+     * Array of member information
+     */
+    members: Array<{
+        /** Avatar image URL */
+        avatar: string;
+        /** Full name of the member */
+        fullName: string;
+    }>;
+    /**
+     * Maximum number of avatars to display
+     */
+    numberOfAvatarsDisplayed: number;
+    /**
+     * Whether to use inverted color scheme
+     * @default false
+     */
+    isInverted?: boolean;
+}
+export interface MembersListState {
+    activeTooltipIndex: number | null;
+    isMembersListVisible: boolean;
+}
+export default class MembersList extends React.Component<MembersListProps, MembersListState> {
+    static defaultProps: Partial<MembersListProps>;
+    constructor(props: MembersListProps);
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=MembersList.d.ts.map

package/dist/components/lists/members-list/MembersList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MembersList.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/members-list/MembersList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,uBAAuB;QACvB,MAAM,EAAE,MAAM,CAAA;QACd,8BAA8B;QAC9B,QAAQ,EAAE,MAAM,CAAA;KACjB,CAAC,CAAA;IACF;;OAEG;IACH,wBAAwB,EAAE,MAAM,CAAA;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,oBAAoB,EAAE,OAAO,CAAA;CAC9B;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CACtD,gBAAgB,EAChB,gBAAgB,CACjB;IACC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAE7C;gBAEW,KAAK,EAAE,gBAAgB;IAQnC,MAAM;CA0FP"}