@unoff/ui 1.21.0

package/dist/components/lists/tabs/Tabs.js

@@ -0,0 +1,165 @@
+import '../../../assets/Tabs.css';
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { useState as I, useRef as L, useEffect as C } from "react";
+import c from "../../../styles/texts/texts.module.js";
+import f from "../../tags/chip/Chip.js";
+import { Icon as T } from "../../assets/icon/Icon.js";
+import O from "../../actions/menu/Menu.js";
+import { t as a } from "../../../do-classnames-DSDFCvzy.js";
+const D = (h) => {
+  const {
+    tabs: r,
+    active: o,
+    direction: y = "HORIZONTAL",
+    isFlex: m = !1,
+    maxVisibleTabs: p = 3,
+    action: s
+  } = h, [v, _] = I(window.innerWidth), b = L(
+    `tabs-menu-${Math.random().toString(36).substr(2, 9)}`
+  );
+  if (C(() => {
+    const t = () => _(window.innerWidth);
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, []), r.length > 1) {
+    const t = v <= 460 ? "HORIZONTAL" : y;
+    if (v > 460)
+      return /* @__PURE__ */ n(
+        "div",
+        {
+          className: a([
+            "tabs",
+            t === "VERTICAL" && "tabs--vertical"
+          ]),
+          role: "tablist",
+          "aria-orientation": t === "VERTICAL" ? "vertical" : "horizontal",
+          children: r.map((e) => /* @__PURE__ */ l(
+            "div",
+            {
+              role: "tab",
+              className: a([
+                "tabs__tab",
+                o === e.id && "tabs__tab--active",
+                e.isUpdated && "tabs__tab--updated",
+                e.icon !== void 0 && "tabs__tab--with-icon",
+                m && t !== "VERTICAL" && "tabs__tab--flex"
+              ]),
+              "data-feature": e.id,
+              tabIndex: o === e.id ? -1 : 0,
+              onMouseDown: s,
+              onKeyDown: (i) => {
+                (i.key === "Enter" || i.key === " ") && s(i), i.key === "Escape" && i.target.blur();
+              },
+              children: [
+                e.icon !== void 0 && /* @__PURE__ */ n(
+                  T,
+                  {
+                    type: e.icon.type,
+                    iconName: e.icon.type === "PICTO" ? e.icon.name : void 0,
+                    iconLetter: e.icon.type === "LETTER" ? e.icon.name : void 0,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: a([c.type, c["type--truncated"]]),
+                    children: e.label
+                  }
+                ),
+                e.isNew && /* @__PURE__ */ n(f, { children: "New" })
+              ]
+            },
+            e.label.toLowerCase()
+          ))
+        }
+      );
+    const E = r.slice(0, p - 1), d = r.slice(p - 1), u = d.some(
+      (e) => e.id === o
+    );
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        id: b.current,
+        className: a([
+          "tabs",
+          t === "VERTICAL" && "tabs--vertical"
+        ]),
+        role: "tablist",
+        "aria-orientation": t === "VERTICAL" ? "vertical" : "horizontal",
+        children: [
+          E.map((e) => /* @__PURE__ */ l(
+            "div",
+            {
+              role: "tab",
+              className: a([
+                "tabs__tab",
+                o === e.id && "tabs__tab--active",
+                e.isUpdated && "tabs__tab--updated",
+                e.icon !== void 0 && "tabs__tab--with-icon",
+                m && t !== "VERTICAL" && "tabs__tab--flex"
+              ]),
+              "data-feature": e.id,
+              tabIndex: o === e.id ? -1 : 0,
+              onMouseDown: s,
+              onKeyDown: (i) => {
+                (i.key === "Enter" || i.key === " ") && s(i), i.key === "Escape" && i.target.blur();
+              },
+              children: [
+                e.icon !== void 0 && /* @__PURE__ */ n(
+                  T,
+                  {
+                    type: e.icon.type,
+                    iconName: e.icon.type === "PICTO" ? e.icon.name : void 0,
+                    iconLetter: e.icon.type === "LETTER" ? e.icon.name : void 0,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: a([c.type, c["type--truncated"]]),
+                    children: e.label
+                  }
+                ),
+                e.isNew && /* @__PURE__ */ n(f, { children: "New" })
+              ]
+            },
+            e.label.toLowerCase()
+          )),
+          d.length > 0 && /* @__PURE__ */ n(
+            O,
+            {
+              id: "tabs-overflow-menu",
+              type: "ICON",
+              icon: "ellipses",
+              options: d.map((e) => ({
+                label: e.label,
+                value: e.id,
+                type: "OPTION",
+                isNew: e.isNew,
+                action: (i) => {
+                  const w = {
+                    dataset: { feature: e.id }
+                  }, N = {
+                    ...i,
+                    target: w,
+                    currentTarget: w
+                  };
+                  s(N);
+                }
+              })),
+              selected: u ? o : void 0,
+              alignment: "BOTTOM_LEFT",
+              isNew: u
+            }
+          )
+        ]
+      }
+    );
+  }
+  return null;
+};
+export {
+  D as default
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/components/lists/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/lists/tabs/Tabs.tsx"],"sourcesContent":["import './tabs.scss'\nimport { useState, useRef, useEffect } from 'react'\nimport { IconList } from '@tps/icon.types'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Icon from '@components/assets/icon/Icon'\nimport Menu from '@components/actions/menu/Menu'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\n\nexport interface TabsProps {\n  /**\n   * Array of tab configurations\n   */\n  tabs: Array<{\n    /** Tab label */\n    label: string\n    /** Unique tab ID */\n    id: string\n    /** Optional icon */\n    icon?: {\n      type: 'PICTO' | 'LETTER'\n      name: IconList\n    }\n    /** Whether tab has been updated */\n    isUpdated: boolean\n    /** Whether to show a \"New\" badge */\n    isNew?: boolean\n  }>\n  /**\n   * ID of the active tab\n   */\n  active: string\n  /**\n   * Layout direction\n   * @default 'HORIZONTAL'\n   */\n  direction?: 'HORIZONTAL' | 'VERTICAL'\n  /**\n   * Whether tabs should use flex layout\n   * @default false\n   */\n  isFlex?: boolean\n  /**\n   * Maximum number of tabs to display before collapsing into menu\n   * @default 3\n   */\n  maxVisibleTabs?: number\n  /**\n   * Click handler\n   */\n  action: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\nconst Tabs = (props: TabsProps) => {\n  const {\n    tabs,\n    active,\n    direction = 'HORIZONTAL',\n    isFlex = false,\n    maxVisibleTabs = 3,\n    action,\n  } = props\n\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth)\n  const menuContainerId = useRef(\n    `tabs-menu-${Math.random().toString(36).substr(2, 9)}`\n  )\n\n  useEffect(() => {\n    const handleResize = () => setWindowWidth(window.innerWidth)\n    window.addEventListener('resize', handleResize)\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  if (tabs.length > 1) {\n    const effectiveDirection = windowWidth <= 460 ? 'HORIZONTAL' : direction\n\n    if (windowWidth > 460)\n      return (\n        <div\n          className={doClassnames([\n            'tabs',\n            effectiveDirection === 'VERTICAL' && 'tabs--vertical',\n          ])}\n          role=\"tablist\"\n          aria-orientation={\n            effectiveDirection === 'VERTICAL' ? 'vertical' : 'horizontal'\n          }\n        >\n          {tabs.map((tab) => (\n            <div\n              role=\"tab\"\n              key={tab.label.toLowerCase()}\n              className={doClassnames([\n                'tabs__tab',\n                active === tab.id && 'tabs__tab--active',\n                tab.isUpdated && 'tabs__tab--updated',\n                tab.icon !== undefined && 'tabs__tab--with-icon',\n                isFlex &&\n                  effectiveDirection !== 'VERTICAL' &&\n                  'tabs__tab--flex',\n              ])}\n              data-feature={tab.id}\n              tabIndex={active === tab.id ? -1 : 0}\n              onMouseDown={action}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') action(e)\n                if (e.key === 'Escape') (e.target as HTMLElement).blur()\n              }}\n            >\n              {tab.icon !== undefined && (\n                <Icon\n                  type={tab.icon.type}\n                  iconName={\n                    tab.icon.type === 'PICTO' ? tab.icon.name : undefined\n                  }\n                  iconLetter={\n                    tab.icon.type === 'LETTER' ? tab.icon.name : undefined\n                  }\n                  aria-hidden=\"true\"\n                />\n              )}\n              <span\n                className={doClassnames([texts.type, texts['type--truncated']])}\n              >\n                {tab.label}\n              </span>\n              {tab.isNew && <Chip>New</Chip>}\n            </div>\n          ))}\n        </div>\n      )\n\n    const responsiveVisibleTabs = tabs.slice(0, maxVisibleTabs - 1)\n    const responsiveOverflowTabs = tabs.slice(maxVisibleTabs - 1)\n\n    const activeInOverflow = responsiveOverflowTabs.some(\n      (tab) => tab.id === active\n    )\n\n    return (\n      <div\n        id={menuContainerId.current}\n        className={doClassnames([\n          'tabs',\n          effectiveDirection === 'VERTICAL' && 'tabs--vertical',\n        ])}\n        role=\"tablist\"\n        aria-orientation={\n          effectiveDirection === 'VERTICAL' ? 'vertical' : 'horizontal'\n        }\n      >\n        {responsiveVisibleTabs.map((tab) => (\n          <div\n            role=\"tab\"\n            key={tab.label.toLowerCase()}\n            className={doClassnames([\n              'tabs__tab',\n              active === tab.id && 'tabs__tab--active',\n              tab.isUpdated && 'tabs__tab--updated',\n              tab.icon !== undefined && 'tabs__tab--with-icon',\n              isFlex && effectiveDirection !== 'VERTICAL' && 'tabs__tab--flex',\n            ])}\n            data-feature={tab.id}\n            tabIndex={active === tab.id ? -1 : 0}\n            onMouseDown={action}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') action(e)\n              if (e.key === 'Escape') (e.target as HTMLElement).blur()\n            }}\n          >\n            {tab.icon !== undefined && (\n              <Icon\n                type={tab.icon.type}\n                iconName={tab.icon.type === 'PICTO' ? tab.icon.name : undefined}\n                iconLetter={\n                  tab.icon.type === 'LETTER' ? tab.icon.name : undefined\n                }\n                aria-hidden=\"true\"\n              />\n            )}\n            <span\n              className={doClassnames([texts.type, texts['type--truncated']])}\n            >\n              {tab.label}\n            </span>\n            {tab.isNew && <Chip>New</Chip>}\n          </div>\n        ))}\n\n        {responsiveOverflowTabs.length > 0 && (\n          <Menu\n            id=\"tabs-overflow-menu\"\n            type=\"ICON\"\n            icon=\"ellipses\"\n            options={responsiveOverflowTabs.map((tab) => ({\n              label: tab.label,\n              value: tab.id,\n              type: 'OPTION',\n              isNew: tab.isNew,\n              action: (e: React.MouseEvent | React.KeyboardEvent) => {\n                const mockTarget = {\n                  dataset: { feature: tab.id },\n                }\n\n                const mockEvent = {\n                  ...e,\n                  target: mockTarget,\n                  currentTarget: mockTarget,\n                } as unknown as React.MouseEvent & React.KeyboardEvent\n\n                action(mockEvent)\n              },\n            }))}\n            selected={activeInOverflow ? active : undefined}\n            alignment=\"BOTTOM_LEFT\"\n            isNew={activeInOverflow}\n          />\n        )}\n      </div>\n    )\n  }\n\n  return null\n}\n\nexport default Tabs\n"],"names":["Tabs","props","tabs","active","direction","isFlex","maxVisibleTabs","action","windowWidth","setWindowWidth","useState","menuContainerId","useRef","useEffect","handleResize","effectiveDirection","jsx","doClassnames","tab","jsxs","e","Icon","texts","Chip","responsiveVisibleTabs","responsiveOverflowTabs","activeInOverflow","Menu","mockTarget","mockEvent"],"mappings":"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"}

package/dist/components/slots/bar/Bar.d.ts

@@ -0,0 +1,65 @@
+import { default as React } from 'react';
+
+export interface BarProps {
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Content for the left section
+     */
+    leftPartSlot?: React.ReactElement | null;
+    /**
+     * Content for the center section (when used alone)
+     */
+    soloPartSlot?: React.ReactElement | null;
+    /**
+     * Content for the right section
+     */
+    rightPartSlot?: React.ReactElement | null;
+    /**
+     * Array of border positions
+     */
+    border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>;
+    /**
+     * Array of clip positions (for visual effects)
+     */
+    clip?: Array<'LEFT' | 'RIGHT' | 'SOLO'>;
+    /**
+     * Custom padding value
+     */
+    padding?: string;
+    /**
+     * Whether to use compact spacing
+     * @default false
+     */
+    isCompact?: boolean;
+    /**
+     * Whether the bar contains only text
+     * @default false
+     */
+    isOnlyText?: boolean;
+    /**
+     * Whether to use inverted color scheme
+     * @default false
+     */
+    isInverted?: boolean;
+    /**
+     * Whether to center the content
+     * @default false
+     */
+    isCentered?: boolean;
+    /**
+     * Whether to reflow on small screens
+     * @default false
+     */
+    shouldReflow?: boolean;
+}
+export default class Bar extends React.Component<BarProps> {
+    static defaultProps: Partial<BarProps>;
+    setBorder: (orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined) => {
+        [key: string]: React.CSSProperties;
+    };
+    render(): import("react/jsx-runtime").JSX.Element | null;
+}
+//# sourceMappingURL=Bar.d.ts.map

package/dist/components/slots/bar/Bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAA;IACvC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAMrC;IAED,SAAS,gBACM,MAAM,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG,SAAS;;MAcpE;IAED,MAAM;CA+EP"}

package/dist/components/slots/bar/Bar.js

@@ -0,0 +1,100 @@
+import '../../../assets/Bar.css';
+import { jsx as t, jsxs as v } from "react/jsx-runtime";
+import T from "react";
+import { t as g } from "../../../do-classnames-DSDFCvzy.js";
+class C extends T.Component {
+  static defaultProps = {
+    isCompact: !1,
+    isOnlyText: !1,
+    isInverted: !1,
+    isCentered: !1,
+    shouldReflow: !1
+  };
+  setBorder = (s) => {
+    const e = "var(--bar-border-width) solid var(--bar-border-color)", r = {};
+    return s && s.forEach((o) => {
+      o === "TOP" && (r.borderTop = e), o === "LEFT" && (r.borderLeft = e), o === "BOTTOM" && (r.borderBottom = e), o === "RIGHT" && (r.borderRight = e);
+    }), r;
+  };
+  render() {
+    const {
+      id: s,
+      isCompact: e,
+      isOnlyText: r,
+      isInverted: o,
+      isCentered: p,
+      shouldReflow: h,
+      border: c,
+      padding: n,
+      clip: l,
+      leftPartSlot: a,
+      soloPartSlot: i,
+      rightPartSlot: d
+    } = this.props, f = i != null, u = a != null, m = d != null;
+    if (!f && !u && !m) return null;
+    const b = g([
+      "bar",
+      e && "bar--compact",
+      r && "bar--text-only",
+      o && "bar--inverted",
+      p && "bar--centered",
+      h && "bar--reflow",
+      l && l.includes("LEFT") && "bar--clip-left",
+      l && l.includes("RIGHT") && "bar--clip-right",
+      l && l.includes("SOLO") && "bar--clip-solo"
+    ]);
+    return f ? /* @__PURE__ */ t(
+      "div",
+      {
+        id: s,
+        className: b,
+        style: {
+          ...this.setBorder(c),
+          padding: n
+        },
+        role: "toolbar",
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: "bar__solo",
+            role: "group",
+            children: i
+          }
+        )
+      }
+    ) : /* @__PURE__ */ v(
+      "div",
+      {
+        id: s,
+        className: b,
+        style: {
+          ...this.setBorder(c),
+          padding: n
+        },
+        role: "toolbar",
+        children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "bar__left",
+              role: "group",
+              children: a
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "bar__right",
+              role: "group",
+              children: d
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+export {
+  C as default
+};
+//# sourceMappingURL=Bar.js.map

package/dist/components/slots/bar/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","sources":["../../../../src/components/slots/bar/Bar.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './bar.scss'\n\nexport interface BarProps {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Content for the left section\n   */\n  leftPartSlot?: React.ReactElement | null\n  /**\n   * Content for the center section (when used alone)\n   */\n  soloPartSlot?: React.ReactElement | null\n  /**\n   * Content for the right section\n   */\n  rightPartSlot?: React.ReactElement | null\n  /**\n   * Array of border positions\n   */\n  border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>\n  /**\n   * Array of clip positions (for visual effects)\n   */\n  clip?: Array<'LEFT' | 'RIGHT' | 'SOLO'>\n  /**\n   * Custom padding value\n   */\n  padding?: string\n  /**\n   * Whether to use compact spacing\n   * @default false\n   */\n  isCompact?: boolean\n  /**\n   * Whether the bar contains only text\n   * @default false\n   */\n  isOnlyText?: boolean\n  /**\n   * Whether to use inverted color scheme\n   * @default false\n   */\n  isInverted?: boolean\n  /**\n   * Whether to center the content\n   * @default false\n   */\n  isCentered?: boolean\n  /**\n   * Whether to reflow on small screens\n   * @default false\n   */\n  shouldReflow?: boolean\n}\n\nexport default class Bar extends React.Component<BarProps> {\n  static defaultProps: Partial<BarProps> = {\n    isCompact: false,\n    isOnlyText: false,\n    isInverted: false,\n    isCentered: false,\n    shouldReflow: false,\n  }\n\n  setBorder = (\n    orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined\n  ) => {\n    const property =\n      'var(--bar-border-width) solid var(--bar-border-color)' as React.CSSProperties\n    const styles: { [key: string]: React.CSSProperties } = {}\n\n    if (!orientation) return styles\n    orientation.forEach((entry) => {\n      if (entry === 'TOP') styles.borderTop = property\n      if (entry === 'LEFT') styles.borderLeft = property\n      if (entry === 'BOTTOM') styles.borderBottom = property\n      if (entry === 'RIGHT') styles.borderRight = property\n    })\n    return styles\n  }\n\n  render() {\n    const {\n      id,\n      isCompact,\n      isOnlyText,\n      isInverted,\n      isCentered,\n      shouldReflow,\n      border,\n      padding,\n      clip,\n      leftPartSlot,\n      soloPartSlot,\n      rightPartSlot,\n    } = this.props\n\n    const hasValidSolo = soloPartSlot !== undefined && soloPartSlot !== null\n    const hasValidLeft = leftPartSlot !== undefined && leftPartSlot !== null\n    const hasValidRight = rightPartSlot !== undefined && rightPartSlot !== null\n\n    if (!hasValidSolo && !hasValidLeft && !hasValidRight) return null\n\n    const barClassName = doClassnames([\n      'bar',\n      isCompact && 'bar--compact',\n      isOnlyText && 'bar--text-only',\n      isInverted && 'bar--inverted',\n      isCentered && 'bar--centered',\n      shouldReflow && 'bar--reflow',\n      clip && clip.includes('LEFT') && 'bar--clip-left',\n      clip && clip.includes('RIGHT') && 'bar--clip-right',\n      clip && clip.includes('SOLO') && 'bar--clip-solo',\n    ])\n\n    if (hasValidSolo)\n      return (\n        <div\n          id={id}\n          className={barClassName}\n          style={{\n            ...this.setBorder(border),\n            padding: padding,\n          }}\n          role=\"toolbar\"\n        >\n          <div\n            className=\"bar__solo\"\n            role=\"group\"\n          >\n            {soloPartSlot}\n          </div>\n        </div>\n      )\n\n    return (\n      <div\n        id={id}\n        className={barClassName}\n        style={{\n          ...this.setBorder(border),\n          padding: padding,\n        }}\n        role=\"toolbar\"\n      >\n        <div\n          className=\"bar__left\"\n          role=\"group\"\n        >\n          {leftPartSlot}\n        </div>\n        <div\n          className=\"bar__right\"\n          role=\"group\"\n        >\n          {rightPartSlot}\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["Bar","React","orientation","property","styles","entry","id","isCompact","isOnlyText","isInverted","isCentered","shouldReflow","border","padding","clip","leftPartSlot","soloPartSlot","rightPartSlot","hasValidSolo","hasValidLeft","hasValidRight","barClassName","doClassnames","jsx","jsxs"],"mappings":";;;AA4DA,MAAqBA,UAAYC,EAAM,UAAoB;AAAA,EACzD,OAAO,eAAkC;AAAA,IACvC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAAA;AAAA,EAGhB,YAAY,CACVC,MACG;AACH,UAAMC,IACJ,yDACIC,IAAiD,CAAA;AAEvD,WAAKF,KACLA,EAAY,QAAQ,CAACG,MAAU;AAC7B,MAAIA,MAAU,UAAOD,EAAO,YAAYD,IACpCE,MAAU,WAAQD,EAAO,aAAaD,IACtCE,MAAU,aAAUD,EAAO,eAAeD,IAC1CE,MAAU,YAASD,EAAO,cAAcD;AAAA,IAC9C,CAAC,GACMC;AAAA,EACT;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ,IAAAE;AAAA,MACA,WAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,IAAA,IACE,KAAK,OAEHC,IAA6CF,KAAiB,MAC9DG,IAA6CJ,KAAiB,MAC9DK,IAA+CH,KAAkB;AAEvE,QAAI,CAACC,KAAgB,CAACC,KAAgB,CAACC,EAAe,QAAO;AAE7D,UAAMC,IAAeC,EAAa;AAAA,MAChC;AAAA,MACAf,KAAa;AAAA,MACbC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAgB;AAAA,MAChBG,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,MACjCA,KAAQA,EAAK,SAAS,OAAO,KAAK;AAAA,MAClCA,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,IAAA,CAClC;AAED,WAAII,IAEA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAjB;AAAA,QACA,WAAWe;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,IAKJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAlB;AAAA,QACA,WAAWe;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/components/slots/draggable-window/DraggableWindow.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { default as Button } from '../../actions/button/Button';
+
+export interface DraggableWindowProps {
+    /**
+     * Title of the window
+     * @default 'Options'
+     */
+    title?: string;
+    /**
+     * Content of the window
+     */
+    children: React.ReactNode;
+    /**
+     * Reference to the trigger button
+     */
+    triggerRef: React.RefObject<Button>;
+    /**
+     * Close handler
+     */
+    onClose: () => void;
+}
+declare const DraggableWindow: (props: DraggableWindowProps) => import("react/jsx-runtime").JSX.Element;
+export default DraggableWindow;
+//# sourceMappingURL=DraggableWindow.d.ts.map

package/dist/components/slots/draggable-window/DraggableWindow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableWindow.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/draggable-window/DraggableWindow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAE1D,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAItD,OAAO,yBAAyB,CAAA;AAEhC,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,QAAA,MAAM,eAAe,UAAW,oBAAoB,4CA2GnD,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/components/slots/draggable-window/DraggableWindow.js

@@ -0,0 +1,100 @@
+import '../../../assets/DraggableWindow.css';
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { useState as r, useRef as R, useEffect as m } from "react";
+import M from "../../assets/section-title/SectionTitle.js";
+import E from "../../actions/button/Button.js";
+import { t as O } from "../../../do-classnames-DSDFCvzy.js";
+import _ from "../bar/Bar.js";
+const N = (w) => {
+  const { title: d = "Options", children: p, triggerRef: s, onClose: v } = w, [n, c] = r(!1), [g, x] = r(!1), [o, u] = r({ x: 0, y: 0 }), [a, b] = r({ x: 0, y: 0 }), l = R(null);
+  m(() => {
+    if (s.current?.buttonRef?.current && l.current) {
+      const e = l.current.getBoundingClientRect(), i = s.current.buttonRef.current.getBoundingClientRect();
+      u({
+        x: i.left - e.width - 8,
+        y: 0
+      }), x(!0);
+    }
+  }, [s]);
+  const h = (e) => {
+    e.target instanceof HTMLElement && e.target.closest(".draggable-window__header") && (c(!0), b({
+      x: e.clientX - o.x,
+      y: e.clientY - o.y
+    }));
+  }, f = () => {
+    c(!1);
+  };
+  return m(() => {
+    const e = (i) => {
+      n && u({
+        x: i.clientX - a.x,
+        y: i.clientY - a.y
+      });
+    };
+    return n && (window.addEventListener("mousemove", e), window.addEventListener("mouseup", f)), () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", f);
+    };
+  }, [n, a]), /* @__PURE__ */ y(
+    "div",
+    {
+      className: O([
+        "draggable-window",
+        n && "draggable-window--dragging"
+      ]),
+      style: {
+        transform: `translate(${o.x}px, ${o.y}px)`,
+        visibility: g ? "visible" : "hidden"
+      },
+      onMouseDown: h,
+      ref: l,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-hidden": !g,
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "draggable-window__header",
+            role: "presentation",
+            children: /* @__PURE__ */ t(
+              _,
+              {
+                leftPartSlot: /* @__PURE__ */ t(
+                  M,
+                  {
+                    label: d,
+                    id: `draggable-window-title-${d}`
+                  }
+                ),
+                rightPartSlot: /* @__PURE__ */ t(
+                  E,
+                  {
+                    type: "icon",
+                    icon: "close",
+                    action: v
+                  }
+                ),
+                padding: "0 var(--size-pos-xxsmall)",
+                isCompact: !0,
+                shouldReflow: !1,
+                border: ["BOTTOM"]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "draggable-window__content",
+            role: "document",
+            children: p
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  N as default
+};
+//# sourceMappingURL=DraggableWindow.js.map

package/dist/components/slots/draggable-window/DraggableWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableWindow.js","sources":["../../../../src/components/slots/draggable-window/DraggableWindow.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\nimport SectionTitle from '@components/assets/section-title/SectionTitle'\nimport Button from '@components/actions/button/Button'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport Bar from '../bar/Bar'\n\nimport './draggable-window.scss'\n\nexport interface DraggableWindowProps {\n  /**\n   * Title of the window\n   * @default 'Options'\n   */\n  title?: string\n  /**\n   * Content of the window\n   */\n  children: React.ReactNode\n  /**\n   * Reference to the trigger button\n   */\n  triggerRef: React.RefObject<Button>\n  /**\n   * Close handler\n   */\n  onClose: () => void\n}\n\nconst DraggableWindow = (props: DraggableWindowProps) => {\n  const { title = 'Options', children, triggerRef, onClose } = props\n  const [isDragging, setIsDragging] = useState(false)\n  const [isOpen, setIsOpen] = useState(false)\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n  const [offset, setOffset] = useState({ x: 0, y: 0 })\n  const windowRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (triggerRef.current?.buttonRef?.current && windowRef.current) {\n      const windowRect = windowRef.current.getBoundingClientRect()\n      const triggerRect =\n        triggerRef.current.buttonRef.current.getBoundingClientRect()\n\n      setPosition({\n        x: triggerRect.left - windowRect.width - 8,\n        y: 0,\n      })\n      setIsOpen(true)\n    }\n  }, [triggerRef])\n\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (\n      e.target instanceof HTMLElement &&\n      e.target.closest('.draggable-window__header')\n    ) {\n      setIsDragging(true)\n      setOffset({\n        x: e.clientX - position.x,\n        y: e.clientY - position.y,\n      })\n    }\n  }\n\n  const handleMouseUp = () => {\n    setIsDragging(false)\n  }\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      if (isDragging)\n        setPosition({\n          x: e.clientX - offset.x,\n          y: e.clientY - offset.y,\n        })\n    }\n\n    if (isDragging) {\n      window.addEventListener('mousemove', handleMouseMove)\n      window.addEventListener('mouseup', handleMouseUp)\n    }\n\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('mouseup', handleMouseUp)\n    }\n  }, [isDragging, offset])\n\n  return (\n    <div\n      className={doClassnames([\n        'draggable-window',\n        isDragging && 'draggable-window--dragging',\n      ])}\n      style={{\n        transform: `translate(${position.x}px, ${position.y}px)`,\n        visibility: isOpen ? 'visible' : 'hidden',\n      }}\n      onMouseDown={handleMouseDown}\n      ref={windowRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-hidden={!isOpen}\n    >\n      <div\n        className=\"draggable-window__header\"\n        role=\"presentation\"\n      >\n        <Bar\n          leftPartSlot={\n            <SectionTitle\n              label={title}\n              id={`draggable-window-title-${title}`}\n            />\n          }\n          rightPartSlot={\n            <Button\n              type=\"icon\"\n              icon=\"close\"\n              action={onClose}\n            />\n          }\n          padding=\"0 var(--size-pos-xxsmall)\"\n          isCompact\n          shouldReflow={false}\n          border={['BOTTOM']}\n        />\n      </div>\n      <div\n        className=\"draggable-window__content\"\n        role=\"document\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport default DraggableWindow\n"],"names":["DraggableWindow","props","title","children","triggerRef","onClose","isDragging","setIsDragging","useState","isOpen","setIsOpen","position","setPosition","offset","setOffset","windowRef","useRef","useEffect","windowRect","triggerRect","handleMouseDown","handleMouseUp","handleMouseMove","e","jsxs","doClassnames","jsx","Bar","SectionTitle","Button"],"mappings":"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"}

package/dist/components/slots/drawer/Drawer.d.ts

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+
+interface Unit {
+    value?: number;
+    unit: 'PIXEL' | 'PERCENT' | 'AUTO';
+}
+export type DrawerProps = {
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Direction of the drawer layout
+     */
+    direction: 'VERTICAL' | 'HORIZONTAL';
+    /**
+     * Position of the drawer
+     */
+    pin: 'TOP' | 'BOTTOM' | 'LEFT' | 'RIGHT';
+    /**
+     * Default size of the drawer
+     */
+    defaultSize: Unit;
+    /**
+     * Maximum allowed size
+     */
+    maxSize: Unit;
+    /**
+     * Minimum allowed size
+     */
+    minSize: Unit;
+    /**
+     * Array of border positions
+     */
+    border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>;
+    /**
+     * Whether the content is scrollable
+     * @default false
+     */
+    isScrolling?: boolean;
+    /**
+     * Drawer content
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback when drawer collapses
+     */
+    onCollapse?: () => void;
+    /**
+     * Callback when drawer expands
+     */
+    onExpand?: () => void;
+};
+export type DrawerState = {
+    isDrawerCollapsed: boolean;
+    drawerSize: {
+        value?: number;
+        unit: 'PIXEL' | 'PERCENT' | 'AUTO';
+    };
+};
+export default class Drawer extends React.Component<DrawerProps, DrawerState> {
+    drawerRef: React.RefObject<HTMLDivElement>;
+    static defaultProps: Partial<DrawerProps>;
+    constructor(props: DrawerProps);
+    componentDidUpdate: (_: Readonly<DrawerProps>, prevState: Readonly<DrawerState>) => void;
+    clickHandler: (e: React.MouseEvent<HTMLDivElement>) => void;
+    setBorder: (orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined) => {
+        [key: string]: React.CSSProperties;
+    };
+    setUnit: (size: Unit) => string;
+    expandDrawer: () => void;
+    collapseDrawer: () => void;
+    onGrab: () => void;
+    onDrag: (e: MouseEvent) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/components/slots/drawer/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,eAAe,CAAA;AAEtB,UAAU,IAAI;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;CACnC;AAED,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,SAAS,EAAE,UAAU,GAAG,YAAY,CAAA;IACpC;;OAEG;IACH,GAAG,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC;;OAEG;IACH,WAAW,EAAE,IAAI,CAAA;IACjB;;OAEG;IACH,OAAO,EAAE,IAAI,CAAA;IACb;;OAEG;IACH,OAAO,EAAE,IAAI,CAAA;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,UAAU,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;KACnC,CAAA;CACF,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,WAAW,CAAC;IAC3E,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAE1C,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,WAAW,CAAC,CAExC;gBAEW,KAAK,EAAE,WAAW;IAa9B,kBAAkB,MACb,SAAS,WAAW,CAAC,aACb,SAAS,WAAW,CAAC,UASjC;IAGD,YAAY,MAAO,gBAAgB,CAAC,cAAc,CAAC,UAYlD;IAGD,SAAS,gBACM,MAAM,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG,SAAS;;MAapE;IAED,OAAO,SAAU,IAAI,YAGpB;IAED,YAAY,aAOX;IAED,cAAc,aAOb;IAED,MAAM,aAGL;IAED,MAAM,MAAO,UAAU,UAyDtB;IAGD,MAAM;CAuDP"}