@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/AvatarGroup.js

@@ -1,13 +1,118 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, avatarSizeMapping } from './Avatar';
-/**
- * A component for showing a group of Avatar's
- */
-export const AvatarGroup = ({ avatars, maxShownProfiles = 5, size = 'tiny' }) => {
-    const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
-    const diameter = avatarSizeMapping[size];
-    const stackingOverlap = 0.5; // given as a percentage
-    const notDisplayedProfiles = avatars.length - maxShownProfiles;
-    const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1);
-    return (_jsxs("div", { className: "row relative", style: { height: diameter + 'px' }, children: [_jsx("div", { style: { width: avatarGroupWidth + 'px' }, children: displayedProfiles.map((avatar, index) => (_jsx("div", { className: "absolute", style: { left: (index * diameter * stackingOverlap) + 'px', zIndex: maxShownProfiles - index }, children: _jsx(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size: size }) }, index))) }), notDisplayedProfiles > 0 && (_jsx("div", { className: "truncate row items-center", style: { fontSize: (diameter / 2) + 'px', marginLeft: (1 + diameter / 16) + 'px' }, children: _jsxs("span", { children: ["+ ", notDisplayedProfiles] }) }))] }));
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/AvatarGroup.tsx
+var AvatarGroup_exports = {};
+__export(AvatarGroup_exports, {
+  AvatarGroup: () => AvatarGroup
+});
+module.exports = __toCommonJS(AvatarGroup_exports);
+
+// src/components/Avatar.tsx
+var import_image = __toESM(require("next/image"));
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var avatarSizeMapping = {
+  tiny: 24,
+  small: 32,
+  medium: 48,
+  large: 64
+};
+var Avatar = ({ avatarUrl, alt, size = "medium", className = "" }) => {
+  avatarUrl = "https://cdn.helpwave.de/boringavatar.svg";
+  const avtarSize = {
+    tiny: 24,
+    small: 32,
+    medium: 48,
+    large: 64
+  }[size];
+  const style = {
+    width: avtarSize + "px",
+    height: avtarSize + "px",
+    maxWidth: avtarSize + "px",
+    maxHeight: avtarSize + "px",
+    minWidth: avtarSize + "px",
+    minHeight: avtarSize + "px"
+  };
+  return (
+    // TODO transparent or white background later
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(`rounded-full bg-primary`, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_image.default,
+      {
+        className: "rounded-full border border-gray-200",
+        style,
+        src: avatarUrl,
+        alt,
+        width: avtarSize,
+        height: avtarSize
+      }
+    ) })
+  );
+};
+
+// src/components/AvatarGroup.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AvatarGroup = ({
+  avatars,
+  maxShownProfiles = 5,
+  size = "tiny"
+}) => {
+  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
+  const diameter = avatarSizeMapping[size];
+  const stackingOverlap = 0.5;
+  const notDisplayedProfiles = avatars.length - maxShownProfiles;
+  const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "row relative", style: { height: diameter + "px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "absolute",
+        style: { left: index * diameter * stackingOverlap + "px", zIndex: maxShownProfiles - index },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size })
+      },
+      index
+    )) }),
+    notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "truncate row items-center",
+        style: { fontSize: diameter / 2 + "px", marginLeft: 1 + diameter / 16 + "px" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+          "+ ",
+          notDisplayedProfiles
+        ] })
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AvatarGroup
+});
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/components/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/AvatarGroup.tsx","../../src/components/Avatar.tsx"],"sourcesContent":["import type { AvatarProps, AvatarSize } from './Avatar'\nimport { Avatar, avatarSizeMapping } from './Avatar'\n\nexport type AvatarGroupProps = {\n  avatars: Omit<AvatarProps, 'size'>[],\n  maxShownProfiles?: number,\n  size?: AvatarSize,\n}\n\n/**\n * A component for showing a group of Avatar's\n */\nexport const AvatarGroup = ({\n                              avatars,\n                              maxShownProfiles = 5,\n                              size = 'tiny'\n                            }: AvatarGroupProps) => {\n  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)\n  const diameter = avatarSizeMapping[size]\n  const stackingOverlap = 0.5 // given as a percentage\n  const notDisplayedProfiles = avatars.length - maxShownProfiles\n  const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1)\n  return (\n    <div className=\"row relative\" style={{ height: diameter + 'px' }}>\n      <div style={{ width: avatarGroupWidth + 'px' }}>\n        {displayedProfiles.map((avatar, index) => (\n          <div\n            key={index}\n            className=\"absolute\"\n            style={{ left: (index * diameter * stackingOverlap) + 'px', zIndex: maxShownProfiles - index }}\n          >\n            <Avatar avatarUrl={avatar.avatarUrl} alt={avatar.alt} size={size}/>\n          </div>\n        ))}\n      </div>\n      {\n        notDisplayedProfiles > 0 && (\n          <div\n            className=\"truncate row items-center\"\n            style={{ fontSize: (diameter / 2) + 'px', marginLeft: (1 + diameter / 16) + 'px' }}\n          >\n            <span>+ {notDisplayedProfiles}</span>\n          </div>\n        )\n      }\n    </div>\n  )\n}\n","import Image from 'next/image'\nimport clsx from 'clsx'\n\nexport const avtarSizeList = ['tiny', 'small', 'medium', 'large'] as const\nexport type AvatarSize = typeof avtarSizeList[number]\nexport const avatarSizeMapping: Record<AvatarSize, number> = {\n  tiny: 24,\n  small: 32,\n  medium: 48,\n  large: 64\n}\n\nexport type AvatarProps = {\n  avatarUrl: string,\n  alt: string,\n  size?: AvatarSize,\n  className?: string,\n}\n\n/**\n * A component for showing a profile picture\n */\nconst Avatar = ({ avatarUrl, alt, size = 'medium', className = '' }: AvatarProps) => {\n  // TODO remove later\n  avatarUrl = 'https://cdn.helpwave.de/boringavatar.svg'\n\n  const avtarSize = {\n    tiny: 24,\n    small: 32,\n    medium: 48,\n    large: 64,\n  }[size]\n\n  const style = {\n    width: avtarSize + 'px',\n    height: avtarSize + 'px',\n    maxWidth: avtarSize + 'px',\n    maxHeight: avtarSize + 'px',\n    minWidth: avtarSize + 'px',\n    minHeight: avtarSize + 'px',\n  }\n\n  return (\n    // TODO transparent or white background later\n    <div className={clsx(`rounded-full bg-primary`, className)} style={style}>\n      <Image\n        className=\"rounded-full border border-gray-200\"\n        style={style}\n        src={avatarUrl}\n        alt={alt}\n        width={avtarSize}\n        height={avtarSize}\n      />\n    </div>\n  )\n}\n\nexport { Avatar }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,kBAAiB;AA4CX;AAxCC,IAAM,oBAAgD;AAAA,EAC3D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAYA,IAAM,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,UAAU,YAAY,GAAG,MAAmB;AAEnF,cAAY;AAEZ,QAAM,YAAY;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,EAAE,IAAI;AAEN,QAAM,QAAQ;AAAA,IACZ,OAAO,YAAY;AAAA,IACnB,QAAQ,YAAY;AAAA,IACpB,UAAU,YAAY;AAAA,IACtB,WAAW,YAAY;AAAA,IACvB,UAAU,YAAY;AAAA,IACtB,WAAW,YAAY;AAAA,EACzB;AAEA;AAAA;AAAA,IAEE,4CAAC,SAAI,eAAW,YAAAA,SAAK,2BAA2B,SAAS,GAAG,OAC1D;AAAA,MAAC,aAAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV,GACF;AAAA;AAEJ;;;ADxBY,IAAAC,sBAAA;AAnBL,IAAM,cAAc,CAAC;AAAA,EACE;AAAA,EACA,mBAAmB;AAAA,EACnB,OAAO;AACT,MAAwB;AAClD,QAAM,oBAAoB,QAAQ,SAAS,mBAAmB,UAAU,QAAQ,MAAM,GAAG,gBAAgB;AACzG,QAAM,WAAW,kBAAkB,IAAI;AACvC,QAAM,kBAAkB;AACxB,QAAM,uBAAuB,QAAQ,SAAS;AAC9C,QAAM,mBAAmB,YAAY,mBAAmB,kBAAkB,SAAS,KAAK;AACxF,SACE,8CAAC,SAAI,WAAU,gBAAe,OAAO,EAAE,QAAQ,WAAW,KAAK,GAC7D;AAAA,iDAAC,SAAI,OAAO,EAAE,OAAO,mBAAmB,KAAK,GAC1C,4BAAkB,IAAI,CAAC,QAAQ,UAC9B;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QACV,OAAO,EAAE,MAAO,QAAQ,WAAW,kBAAmB,MAAM,QAAQ,mBAAmB,MAAM;AAAA,QAE7F,uDAAC,UAAO,WAAW,OAAO,WAAW,KAAK,OAAO,KAAK,MAAW;AAAA;AAAA,MAJ5D;AAAA,IAKP,CACD,GACH;AAAA,IAEE,uBAAuB,KACrB;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,UAAW,WAAW,IAAK,MAAM,YAAa,IAAI,WAAW,KAAM,KAAK;AAAA,QAEjF,wDAAC,UAAK;AAAA;AAAA,UAAG;AAAA,WAAqB;AAAA;AAAA,IAChC;AAAA,KAGN;AAEJ;","names":["clsx","Image","import_jsx_runtime"]}

package/dist/components/AvatarGroup.mjs

@@ -0,0 +1,81 @@
+// src/components/Avatar.tsx
+import Image from "next/image";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var avatarSizeMapping = {
+  tiny: 24,
+  small: 32,
+  medium: 48,
+  large: 64
+};
+var Avatar = ({ avatarUrl, alt, size = "medium", className = "" }) => {
+  avatarUrl = "https://cdn.helpwave.de/boringavatar.svg";
+  const avtarSize = {
+    tiny: 24,
+    small: 32,
+    medium: 48,
+    large: 64
+  }[size];
+  const style = {
+    width: avtarSize + "px",
+    height: avtarSize + "px",
+    maxWidth: avtarSize + "px",
+    maxHeight: avtarSize + "px",
+    minWidth: avtarSize + "px",
+    minHeight: avtarSize + "px"
+  };
+  return (
+    // TODO transparent or white background later
+    /* @__PURE__ */ jsx("div", { className: clsx(`rounded-full bg-primary`, className), style, children: /* @__PURE__ */ jsx(
+      Image,
+      {
+        className: "rounded-full border border-gray-200",
+        style,
+        src: avatarUrl,
+        alt,
+        width: avtarSize,
+        height: avtarSize
+      }
+    ) })
+  );
+};
+
+// src/components/AvatarGroup.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var AvatarGroup = ({
+  avatars,
+  maxShownProfiles = 5,
+  size = "tiny"
+}) => {
+  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
+  const diameter = avatarSizeMapping[size];
+  const stackingOverlap = 0.5;
+  const notDisplayedProfiles = avatars.length - maxShownProfiles;
+  const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1);
+  return /* @__PURE__ */ jsxs("div", { className: "row relative", style: { height: diameter + "px" }, children: [
+    /* @__PURE__ */ jsx2("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "absolute",
+        style: { left: index * diameter * stackingOverlap + "px", zIndex: maxShownProfiles - index },
+        children: /* @__PURE__ */ jsx2(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size })
+      },
+      index
+    )) }),
+    notDisplayedProfiles > 0 && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "truncate row items-center",
+        style: { fontSize: diameter / 2 + "px", marginLeft: 1 + diameter / 16 + "px" },
+        children: /* @__PURE__ */ jsxs("span", { children: [
+          "+ ",
+          notDisplayedProfiles
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  AvatarGroup
+};
+//# sourceMappingURL=AvatarGroup.mjs.map

package/dist/components/AvatarGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Avatar.tsx","../../src/components/AvatarGroup.tsx"],"sourcesContent":["import Image from 'next/image'\nimport clsx from 'clsx'\n\nexport const avtarSizeList = ['tiny', 'small', 'medium', 'large'] as const\nexport type AvatarSize = typeof avtarSizeList[number]\nexport const avatarSizeMapping: Record<AvatarSize, number> = {\n  tiny: 24,\n  small: 32,\n  medium: 48,\n  large: 64\n}\n\nexport type AvatarProps = {\n  avatarUrl: string,\n  alt: string,\n  size?: AvatarSize,\n  className?: string,\n}\n\n/**\n * A component for showing a profile picture\n */\nconst Avatar = ({ avatarUrl, alt, size = 'medium', className = '' }: AvatarProps) => {\n  // TODO remove later\n  avatarUrl = 'https://cdn.helpwave.de/boringavatar.svg'\n\n  const avtarSize = {\n    tiny: 24,\n    small: 32,\n    medium: 48,\n    large: 64,\n  }[size]\n\n  const style = {\n    width: avtarSize + 'px',\n    height: avtarSize + 'px',\n    maxWidth: avtarSize + 'px',\n    maxHeight: avtarSize + 'px',\n    minWidth: avtarSize + 'px',\n    minHeight: avtarSize + 'px',\n  }\n\n  return (\n    // TODO transparent or white background later\n    <div className={clsx(`rounded-full bg-primary`, className)} style={style}>\n      <Image\n        className=\"rounded-full border border-gray-200\"\n        style={style}\n        src={avatarUrl}\n        alt={alt}\n        width={avtarSize}\n        height={avtarSize}\n      />\n    </div>\n  )\n}\n\nexport { Avatar }\n","import type { AvatarProps, AvatarSize } from './Avatar'\nimport { Avatar, avatarSizeMapping } from './Avatar'\n\nexport type AvatarGroupProps = {\n  avatars: Omit<AvatarProps, 'size'>[],\n  maxShownProfiles?: number,\n  size?: AvatarSize,\n}\n\n/**\n * A component for showing a group of Avatar's\n */\nexport const AvatarGroup = ({\n                              avatars,\n                              maxShownProfiles = 5,\n                              size = 'tiny'\n                            }: AvatarGroupProps) => {\n  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)\n  const diameter = avatarSizeMapping[size]\n  const stackingOverlap = 0.5 // given as a percentage\n  const notDisplayedProfiles = avatars.length - maxShownProfiles\n  const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1)\n  return (\n    <div className=\"row relative\" style={{ height: diameter + 'px' }}>\n      <div style={{ width: avatarGroupWidth + 'px' }}>\n        {displayedProfiles.map((avatar, index) => (\n          <div\n            key={index}\n            className=\"absolute\"\n            style={{ left: (index * diameter * stackingOverlap) + 'px', zIndex: maxShownProfiles - index }}\n          >\n            <Avatar avatarUrl={avatar.avatarUrl} alt={avatar.alt} size={size}/>\n          </div>\n        ))}\n      </div>\n      {\n        notDisplayedProfiles > 0 && (\n          <div\n            className=\"truncate row items-center\"\n            style={{ fontSize: (diameter / 2) + 'px', marginLeft: (1 + diameter / 16) + 'px' }}\n          >\n            <span>+ {notDisplayedProfiles}</span>\n          </div>\n        )\n      }\n    </div>\n  )\n}\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AA4CX;AAxCC,IAAM,oBAAgD;AAAA,EAC3D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAYA,IAAM,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,UAAU,YAAY,GAAG,MAAmB;AAEnF,cAAY;AAEZ,QAAM,YAAY;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,EAAE,IAAI;AAEN,QAAM,QAAQ;AAAA,IACZ,OAAO,YAAY;AAAA,IACnB,QAAQ,YAAY;AAAA,IACpB,UAAU,YAAY;AAAA,IACtB,WAAW,YAAY;AAAA,IACvB,UAAU,YAAY;AAAA,IACtB,WAAW,YAAY;AAAA,EACzB;AAEA;AAAA;AAAA,IAEE,oBAAC,SAAI,WAAW,KAAK,2BAA2B,SAAS,GAAG,OAC1D;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV,GACF;AAAA;AAEJ;;;ACxBY,gBAAAA,MAUA,YAVA;AAnBL,IAAM,cAAc,CAAC;AAAA,EACE;AAAA,EACA,mBAAmB;AAAA,EACnB,OAAO;AACT,MAAwB;AAClD,QAAM,oBAAoB,QAAQ,SAAS,mBAAmB,UAAU,QAAQ,MAAM,GAAG,gBAAgB;AACzG,QAAM,WAAW,kBAAkB,IAAI;AACvC,QAAM,kBAAkB;AACxB,QAAM,uBAAuB,QAAQ,SAAS;AAC9C,QAAM,mBAAmB,YAAY,mBAAmB,kBAAkB,SAAS,KAAK;AACxF,SACE,qBAAC,SAAI,WAAU,gBAAe,OAAO,EAAE,QAAQ,WAAW,KAAK,GAC7D;AAAA,oBAAAA,KAAC,SAAI,OAAO,EAAE,OAAO,mBAAmB,KAAK,GAC1C,4BAAkB,IAAI,CAAC,QAAQ,UAC9B,gBAAAA;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QACV,OAAO,EAAE,MAAO,QAAQ,WAAW,kBAAmB,MAAM,QAAQ,mBAAmB,MAAM;AAAA,QAE7F,0BAAAA,KAAC,UAAO,WAAW,OAAO,WAAW,KAAK,OAAO,KAAK,MAAW;AAAA;AAAA,MAJ5D;AAAA,IAKP,CACD,GACH;AAAA,IAEE,uBAAuB,KACrB,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,UAAW,WAAW,IAAK,MAAM,YAAa,IAAI,WAAW,KAAM,KAAK;AAAA,QAEjF,+BAAC,UAAK;AAAA;AAAA,UAAG;AAAA,WAAqB;AAAA;AAAA,IAChC;AAAA,KAGN;AAEJ;","names":["jsx"]}

package/dist/components/BreadCrumb.d.mts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Crumb = {
+    display: string;
+    link: string;
+};
+type BreadCrumbProps = {
+    crumbs: Crumb[];
+    linkClassName?: string;
+    containerClassName?: string;
+};
+/**
+ * A component for showing a hierarchical link structure with an independent link on each element
+ *
+ * e.g. Organizations/Ward/<id>
+ */
+declare const BreadCrumb: ({ crumbs, linkClassName, containerClassName }: BreadCrumbProps) => react_jsx_runtime.JSX.Element;
+
+export { BreadCrumb, type Crumb };

package/dist/components/BreadCrumb.d.ts

@@ -1,4 +1,6 @@
-export type Crumb = {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Crumb = {
     display: string;
     link: string;
 };
@@ -12,5 +14,6 @@ type BreadCrumbProps = {
  *
  * e.g. Organizations/Ward/<id>
  */
-export declare const BreadCrumb: ({ crumbs, linkClassName, containerClassName }: BreadCrumbProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const BreadCrumb: ({ crumbs, linkClassName, containerClassName }: BreadCrumbProps) => react_jsx_runtime.JSX.Element;
+
+export { BreadCrumb, type Crumb };

package/dist/components/BreadCrumb.js

@@ -1,12 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from 'next/link';
-import clsx from 'clsx';
-/**
- * A component for showing a hierarchical link structure with an independent link on each element
- *
- * e.g. Organizations/Ward/<id>
- */
-export const BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
-    const color = 'text-description';
-    return (_jsx("div", { className: clsx('row', containerClassName), children: crumbs.map((crumb, index) => (_jsxs("div", { children: [_jsx(Link, { href: crumb.link, className: clsx(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 }), children: crumb.display }), index !== crumbs.length - 1 && _jsx("span", { className: clsx(`px-1`, color), children: "/" })] }, index))) }));
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/BreadCrumb.tsx
+var BreadCrumb_exports = {};
+__export(BreadCrumb_exports, {
+  BreadCrumb: () => BreadCrumb
+});
+module.exports = __toCommonJS(BreadCrumb_exports);
+var import_link = __toESM(require("next/link"));
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
+  const color = "text-description";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)("row", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: crumb.link, className: (0, import_clsx.default)(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 }), children: crumb.display }),
+    index !== crumbs.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(`px-1`, color), children: "/" })
+  ] }, index)) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BreadCrumb
+});
+//# sourceMappingURL=BreadCrumb.js.map

package/dist/components/BreadCrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/BreadCrumb.tsx"],"sourcesContent":["import Link from 'next/link'\nimport clsx from 'clsx'\n\nexport type Crumb = {\n  display: string,\n  link: string,\n}\n\ntype BreadCrumbProps = {\n  crumbs: Crumb[],\n  linkClassName?: string,\n  containerClassName?: string,\n}\n\n/**\n * A component for showing a hierarchical link structure with an independent link on each element\n *\n * e.g. Organizations/Ward/<id>\n */\nexport const BreadCrumb = ({ crumbs, linkClassName, containerClassName }: BreadCrumbProps) => {\n  const color = 'text-description'\n\n  return (\n    <div className={clsx('row', containerClassName)}>\n      {crumbs.map((crumb, index) => (\n        <div key={index}>\n          <Link href={crumb.link} className={clsx(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 })}>\n            {crumb.display}\n          </Link>\n          {index !== crumbs.length - 1 && <span className={clsx(`px-1`, color)}>/</span>}\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,kBAAiB;AAwBT;AAND,IAAM,aAAa,CAAC,EAAE,QAAQ,eAAe,mBAAmB,MAAuB;AAC5F,QAAM,QAAQ;AAEd,SACE,4CAAC,SAAI,eAAW,YAAAA,SAAK,OAAO,kBAAkB,GAC3C,iBAAO,IAAI,CAAC,OAAO,UAClB,6CAAC,SACC;AAAA,gDAAC,YAAAC,SAAA,EAAK,MAAM,MAAM,MAAM,eAAW,YAAAD,SAAK,eAAe,EAAE,CAAC,GAAG,KAAK,sBAAsB,GAAG,UAAU,OAAO,SAAS,EAAE,CAAC,GACrH,gBAAM,SACT;AAAA,IACC,UAAU,OAAO,SAAS,KAAK,4CAAC,UAAK,eAAW,YAAAA,SAAK,QAAQ,KAAK,GAAG,eAAC;AAAA,OAJ/D,KAKV,CACD,GACH;AAEJ;","names":["clsx","Link"]}

package/dist/components/BreadCrumb.mjs

@@ -0,0 +1,15 @@
+// src/components/BreadCrumb.tsx
+import Link from "next/link";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
+  const color = "text-description";
+  return /* @__PURE__ */ jsx("div", { className: clsx("row", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Link, { href: crumb.link, className: clsx(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 }), children: crumb.display }),
+    index !== crumbs.length - 1 && /* @__PURE__ */ jsx("span", { className: clsx(`px-1`, color), children: "/" })
+  ] }, index)) });
+};
+export {
+  BreadCrumb
+};
+//# sourceMappingURL=BreadCrumb.mjs.map

package/dist/components/BreadCrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/BreadCrumb.tsx"],"sourcesContent":["import Link from 'next/link'\nimport clsx from 'clsx'\n\nexport type Crumb = {\n  display: string,\n  link: string,\n}\n\ntype BreadCrumbProps = {\n  crumbs: Crumb[],\n  linkClassName?: string,\n  containerClassName?: string,\n}\n\n/**\n * A component for showing a hierarchical link structure with an independent link on each element\n *\n * e.g. Organizations/Ward/<id>\n */\nexport const BreadCrumb = ({ crumbs, linkClassName, containerClassName }: BreadCrumbProps) => {\n  const color = 'text-description'\n\n  return (\n    <div className={clsx('row', containerClassName)}>\n      {crumbs.map((crumb, index) => (\n        <div key={index}>\n          <Link href={crumb.link} className={clsx(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 })}>\n            {crumb.display}\n          </Link>\n          {index !== crumbs.length - 1 && <span className={clsx(`px-1`, color)}>/</span>}\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";AAAA,OAAO,UAAU;AACjB,OAAO,UAAU;AAwBT,SACE,KADF;AAND,IAAM,aAAa,CAAC,EAAE,QAAQ,eAAe,mBAAmB,MAAuB;AAC5F,QAAM,QAAQ;AAEd,SACE,oBAAC,SAAI,WAAW,KAAK,OAAO,kBAAkB,GAC3C,iBAAO,IAAI,CAAC,OAAO,UAClB,qBAAC,SACC;AAAA,wBAAC,QAAK,MAAM,MAAM,MAAM,WAAW,KAAK,eAAe,EAAE,CAAC,GAAG,KAAK,sBAAsB,GAAG,UAAU,OAAO,SAAS,EAAE,CAAC,GACrH,gBAAM,SACT;AAAA,IACC,UAAU,OAAO,SAAS,KAAK,oBAAC,UAAK,WAAW,KAAK,QAAQ,KAAK,GAAG,eAAC;AAAA,OAJ/D,KAKV,CACD,GACH;AAEJ;","names":[]}

package/dist/components/Button.d.mts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react';
+
+type SolidButtonColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'warning' | 'negative';
+type OutlineButtonColor = 'primary';
+type TextButtonColor = 'negative' | 'neutral';
+type ButtonSizes = 'small' | 'medium' | 'large';
+/**
+ * The shard properties between all button types
+ */
+type ButtonProps = PropsWithChildren<{
+    /**
+     * @default 'medium'
+     */
+    size?: ButtonSizes;
+}> & ButtonHTMLAttributes<Element>;
+declare const ButtonSizePaddings: Record<ButtonSizes, string>;
+type ButtonWithIconsProps = ButtonProps & {
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+};
+type SolidButtonProps = ButtonWithIconsProps & {
+    color?: SolidButtonColor;
+};
+type OutlineButtonProps = ButtonWithIconsProps & {
+    color?: OutlineButtonColor;
+};
+type TextButtonProps = ButtonWithIconsProps & {
+    color?: TextButtonColor;
+};
+/**
+ * A button with a solid background and different sizes
+ */
+declare const SolidButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: SolidButtonProps) => react_jsx_runtime.JSX.Element;
+/**
+ * A button with an outline border and different sizes
+ */
+declare const OutlineButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: OutlineButtonProps) => react_jsx_runtime.JSX.Element;
+/**
+ * A text that is a button that can have different sizes
+ */
+declare const TextButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: TextButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { type ButtonProps, ButtonSizePaddings, OutlineButton, type OutlineButtonColor, type OutlineButtonProps, SolidButton, type SolidButtonColor, type SolidButtonProps, TextButton, type TextButtonColor, type TextButtonProps };

package/dist/components/Button.d.ts

@@ -1,41 +1,44 @@
-import type { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react';
-export type SolidButtonColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'warning' | 'negative';
-export type OutlineButtonColor = 'primary';
-export type TextButtonColor = 'negative' | 'neutral';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react';
+
+type SolidButtonColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'warning' | 'negative';
+type OutlineButtonColor = 'primary';
+type TextButtonColor = 'negative' | 'neutral';
 type ButtonSizes = 'small' | 'medium' | 'large';
 /**
  * The shard properties between all button types
  */
-export type ButtonProps = PropsWithChildren<{
+type ButtonProps = PropsWithChildren<{
     /**
      * @default 'medium'
      */
     size?: ButtonSizes;
 }> & ButtonHTMLAttributes<Element>;
-export declare const ButtonSizePaddings: Record<ButtonSizes, string>;
+declare const ButtonSizePaddings: Record<ButtonSizes, string>;
 type ButtonWithIconsProps = ButtonProps & {
     startIcon?: ReactNode;
     endIcon?: ReactNode;
 };
-export type SolidButtonProps = ButtonWithIconsProps & {
+type SolidButtonProps = ButtonWithIconsProps & {
     color?: SolidButtonColor;
 };
-export type OutlineButtonProps = ButtonWithIconsProps & {
+type OutlineButtonProps = ButtonWithIconsProps & {
     color?: OutlineButtonColor;
 };
-export type TextButtonProps = ButtonWithIconsProps & {
+type TextButtonProps = ButtonWithIconsProps & {
     color?: TextButtonColor;
 };
 /**
  * A button with a solid background and different sizes
  */
-declare const SolidButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: SolidButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const SolidButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: SolidButtonProps) => react_jsx_runtime.JSX.Element;
 /**
  * A button with an outline border and different sizes
  */
-declare const OutlineButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: OutlineButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const OutlineButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: OutlineButtonProps) => react_jsx_runtime.JSX.Element;
 /**
  * A text that is a button that can have different sizes
  */
-declare const TextButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;
-export { SolidButton, OutlineButton, TextButton };
+declare const TextButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: TextButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { type ButtonProps, ButtonSizePaddings, OutlineButton, type OutlineButtonColor, type OutlineButtonProps, SolidButton, type SolidButtonColor, type SolidButtonProps, TextButton, type TextButtonColor, type TextButtonProps };