@ixo/ui 0.0.1

package/dist/index-DVsDIbAX.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const export_components = require("./components-CZzxFRC3.cjs");
+const UsersSolid = require("./UsersSolid-Cr_JcwNT.cjs");
+function Header({ user, onClose, onHeaderClick, icon, title, moreMenu, action }) {
+  const wrapperRef = react.useRef(null);
+  const handleHeaderClick = react.useCallback(
+    (e) => {
+      if (onHeaderClick && export_components.isValidClick(e, wrapperRef.current)) {
+        onHeaderClick();
+      }
+    },
+    [onHeaderClick]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      role: onHeaderClick ? "button" : void 0,
+      tabIndex: onHeaderClick ? 0 : void 0,
+      onClick: onHeaderClick ? handleHeaderClick : void 0,
+      css: ({ spacing, bg, radius }) => ({
+        display: "flex",
+        border: "none",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: spacing * 2,
+        backgroundColor: bg.card,
+        borderTopLeftRadius: radius.medium,
+        borderTopRightRadius: radius.medium,
+        cursor: onHeaderClick ? "pointer" : void 0
+      }),
+      children: [
+        user ? /* @__PURE__ */ jsxRuntime.jsxs(export_components.Spacer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(export_components.Avatar, { src: user.avatarSrc || "", did: user.did, size: 40 }),
+          /* @__PURE__ */ jsxRuntime.jsxs(export_components.Spacer, { vertical: true, alignItems: "start", distance: 0, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(export_components.Spacer, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(export_components.Typography.Text, { children: user.name }),
+              user.badge ? /* @__PURE__ */ jsxRuntime.jsx(export_components.Tag, { value: user.badge, bgColor: "selected", textColor: "secondary" }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(export_components.Typography.Text, { size: "xs", children: user.description })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: title ? /* @__PURE__ */ jsxRuntime.jsx(export_components.Tag, { value: title, icon, bgColor: "selected" }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}) }),
+        onClose || moreMenu || action ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            css: ({ spacing }) => ({
+              display: "flex",
+              gap: spacing,
+              alignItems: "center"
+            }),
+            children: [
+              moreMenu ? /* @__PURE__ */ jsxRuntime.jsx(export_components.MoreMenu, { items: moreMenu.items, controlColor: "secondary" }) : null,
+              action ? /* @__PURE__ */ jsxRuntime.jsx(export_components.IconButton, { icon: action.icon, size: 20, onClick: action.onClick }) : null,
+              onClose ? /* @__PURE__ */ jsxRuntime.jsx(export_components.IconButton, { icon: UsersSolid.Close, size: 20, colorDefault: "secondary", onClick: onClose }) : null
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", {})
+      ]
+    }
+  );
+}
+exports.default = Header;
+//# sourceMappingURL=index-DVsDIbAX.cjs.map

package/dist/index-DVsDIbAX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DVsDIbAX.cjs","sources":["../src/components/ActionCard/components/Header/index.tsx"],"sourcesContent":["import { ReactElement, useCallback, MouseEvent, useRef } from \"react\";\n\nimport { Avatar } from \"../../../Avatar\";\nimport { IconButton } from \"../../../IconButton\";\nimport { MoreMenu } from \"../../../MoreMenu\";\nimport { Spacer } from \"../../../Spacer\";\nimport { Tag } from \"../../../Tag\";\nimport { Typography } from \"../../../Typography\";\nimport { Close } from \"../../../../icons\";\n\nimport { Props } from \"./types\";\nimport { isValidClick } from \"../../../../utils/dom\";\n\nexport default function Header({ user, onClose, onHeaderClick, icon, title, moreMenu, action }: Props): ReactElement {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const handleHeaderClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (onHeaderClick && isValidClick(e, wrapperRef.current)) {\n        onHeaderClick();\n      }\n    },\n    [onHeaderClick]\n  );\n\n  return (\n    <div\n      ref={wrapperRef}\n      role={onHeaderClick ? \"button\" : undefined}\n      tabIndex={onHeaderClick ? 0 : undefined}\n      onClick={onHeaderClick ? handleHeaderClick : undefined}\n      css={({ spacing, bg, radius }) => ({\n        display: \"flex\",\n        border: \"none\",\n        justifyContent: \"space-between\",\n        alignItems: \"center\",\n        padding: spacing * 2,\n        backgroundColor: bg.card,\n        borderTopLeftRadius: radius.medium,\n        borderTopRightRadius: radius.medium,\n        cursor: onHeaderClick ? \"pointer\" : undefined\n      })}\n    >\n      {user ? (\n        <Spacer>\n          <Avatar src={user.avatarSrc || \"\"} did={user.did} size={40} />\n          <Spacer vertical alignItems=\"start\" distance={0}>\n            <Spacer>\n              <Typography.Text>{user.name}</Typography.Text>\n              {user.badge ? <Tag value={user.badge} bgColor=\"selected\" textColor=\"secondary\" /> : null}\n            </Spacer>\n            <Typography.Text size=\"xs\">{user.description}</Typography.Text>\n          </Spacer>\n        </Spacer>\n      ) : (\n        <>{title ? <Tag value={title} icon={icon} bgColor=\"selected\" /> : <span />}</>\n      )}\n      {onClose || moreMenu || action ? (\n        <div\n          css={({ spacing }) => ({\n            display: \"flex\",\n            gap: spacing,\n            alignItems: \"center\"\n          })}\n        >\n          {moreMenu ? <MoreMenu items={moreMenu.items} controlColor=\"secondary\" /> : null}\n          {action ? <IconButton icon={action.icon} size={20} onClick={action.onClick} /> : null}\n          {onClose ? <IconButton icon={Close} size={20} colorDefault=\"secondary\" onClick={onClose} /> : null}\n        </div>\n      ) : (\n        <span />\n      )}\n    </div>\n  );\n}\n"],"names":["useRef","useCallback","isValidClick","jsxs","Spacer","jsx","Avatar","Typography","Tag","Fragment","MoreMenu","IconButton","Close"],"mappings":";;;;;;AAaA,SAAwB,OAAO,EAAE,MAAM,SAAS,eAAe,MAAM,OAAO,UAAU,UAA+B;AACnH,QAAM,aAAaA,MAAAA,OAAuB,IAAI;AAE9C,QAAM,oBAAoBC,MAAAA;AAAAA,IACxB,CAAC,MAA+B;AAC9B,UAAI,iBAAiBC,kBAAAA,aAAa,GAAG,WAAW,OAAO,GAAG;AACxD,sBAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,aAAa;AAAA,EAAA;AAGhB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAM,gBAAgB,WAAW;AAAA,MACjC,UAAU,gBAAgB,IAAI;AAAA,MAC9B,SAAS,gBAAgB,oBAAoB;AAAA,MAC7C,KAAK,CAAC,EAAE,SAAS,IAAI,cAAc;AAAA,QACjC,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,SAAS,UAAU;AAAA,QACnB,iBAAiB,GAAG;AAAA,QACpB,qBAAqB,OAAO;AAAA,QAC5B,sBAAsB,OAAO;AAAA,QAC7B,QAAQ,gBAAgB,YAAY;AAAA,MAAA;AAAA,MAGrC,UAAA;AAAA,QAAA,uCACEC,0BAAA,EACC,UAAA;AAAA,UAAAC,2BAAAA,IAACC,kBAAAA,QAAA,EAAO,KAAK,KAAK,aAAa,IAAI,KAAK,KAAK,KAAK,MAAM,GAAA,CAAI;AAAA,0CAC3DF,kBAAAA,QAAA,EAAO,UAAQ,MAAC,YAAW,SAAQ,UAAU,GAC5C,UAAA;AAAA,YAAAD,gCAACC,kBAAAA,QAAA,EACC,UAAA;AAAA,cAAAC,2BAAAA,IAACE,kBAAAA,WAAW,MAAX,EAAiB,UAAA,KAAK,MAAK;AAAA,cAC3B,KAAK,QAAQF,2BAAAA,IAACG,kBAAAA,KAAA,EAAI,OAAO,KAAK,OAAO,SAAQ,YAAW,WAAU,YAAA,CAAY,IAAK;AAAA,YAAA,GACtF;AAAA,2CACCD,kBAAAA,WAAW,MAAX,EAAgB,MAAK,MAAM,eAAK,YAAA,CAAY;AAAA,UAAA,EAAA,CAC/C;AAAA,QAAA,GACF,IAEAF,2BAAAA,IAAAI,qBAAA,EAAG,UAAA,QAAQJ,2BAAAA,IAACG,kBAAAA,KAAA,EAAI,OAAO,OAAO,MAAY,SAAQ,WAAA,CAAW,IAAKH,2BAAAA,IAAC,UAAK,GAAG;AAAA,QAE5E,WAAW,YAAY,SACtBF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK,CAAC,EAAE,eAAe;AAAA,cACrB,SAAS;AAAA,cACT,KAAK;AAAA,cACL,YAAY;AAAA,YAAA;AAAA,YAGb,UAAA;AAAA,cAAA,0CAAYO,kBAAAA,UAAA,EAAS,OAAO,SAAS,OAAO,cAAa,aAAY,IAAK;AAAA,cAC1E,SAASL,2BAAAA,IAACM,kBAAAA,YAAA,EAAW,MAAM,OAAO,MAAM,MAAM,IAAI,SAAS,OAAO,QAAA,CAAS,IAAK;AAAA,cAChF,UAAUN,2BAAAA,IAACM,kBAAAA,YAAA,EAAW,MAAMC,WAAAA,OAAO,MAAM,IAAI,cAAa,aAAY,SAAS,QAAA,CAAS,IAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,mCAG/F,QAAA,CAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAId;;"}