@apipass/design-system 1.24.0 → 2.0.0

package/dist/lib/ui/components/KeyValue/KeyValue.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),I=require("../../../vendor/clsx/dist/clsx.cjs");;/* empty css               */const f=require("../../icons/IconPlus.cjs"),q=require("../../icons/IconTrash.cjs"),v=require("../../primitives/Input/Input.cjs"),d=require("../../primitives/IconButton/IconButton.cjs");function w({pairs:r,onChange:t,keyPlaceholder:o,valuePlaceholder:c,addRowButtonLabel:j,removeRowButtonLabel:m,isDisabled:u,className:h}){function i(n,l){t(r.map((s,a)=>a===n?{...s,...l}:s))}function x(){t([...r,{key:"",value:""}])}function y(n){t(r.filter((l,s)=>s!==n))}return e.jsx("div",{className:I.clsx(h,"key-value-group"),children:r.map((n,l)=>{const s=l===r.length-1;return e.jsxs("div",{className:"key-value-row",children:[e.jsx("div",{className:"key-value-row-field",children:e.jsx(v.InputField,{"aria-label":o,placeholder:o,value:n.key,isDisabled:u,onChange:a=>i(l,{key:a})})}),e.jsx("div",{className:"key-value-row-field",children:e.jsx(v.InputField,{"aria-label":c,placeholder:c,value:n.value,isDisabled:u,onChange:a=>i(l,{value:a})})}),e.jsx("div",{className:"key-value-row-action",children:s?e.jsx(d.IconButton,{"aria-label":j,variant:"subtle",size:"small",isDisabled:u,onPress:x,children:e.jsx(f.IconPlus,{size:"16"})}):e.jsx(d.IconButton,{"aria-label":m,variant:"subtle",size:"small",isDisabled:u,onPress:()=>y(l),children:e.jsx(q.IconTrash,{size:"16"})})})]},l)})})}exports.KeyValue=w;
+//# sourceMappingURL=KeyValue.cjs.map

package/dist/lib/ui/components/KeyValue/KeyValue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValue.cjs","sources":["../../../../../src/ui/components/KeyValue/KeyValue.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconPlus, IconTrash } from \"icons\";\nimport { IconButton, InputField } from \"primitives\";\nimport \"./keyValue.css\";\n\nexport type KeyValuePair = {\n  key: string;\n  value: string;\n};\n\nexport type KeyValueProps = {\n  pairs: KeyValuePair[];\n  onChange: (pairs: KeyValuePair[]) => void;\n  keyPlaceholder: string;\n  valuePlaceholder: string;\n  addRowButtonLabel: string;\n  removeRowButtonLabel: string;\n  isDisabled?: boolean;\n  className?: string;\n};\n\nexport function KeyValue({\n  pairs,\n  onChange,\n  keyPlaceholder,\n  valuePlaceholder,\n  addRowButtonLabel,\n  removeRowButtonLabel,\n  isDisabled,\n  className,\n}: KeyValueProps) {\n  function updatePair(index: number, patch: Partial<KeyValuePair>) {\n    onChange(pairs.map((pair, i) => (i === index ? { ...pair, ...patch } : pair)));\n  }\n\n  function addRow() {\n    onChange([...pairs, { key: \"\", value: \"\" }]);\n  }\n\n  function removeRow(index: number) {\n    onChange(pairs.filter((_, i) => i !== index));\n  }\n\n  return (\n    <div className={clsx(className, \"key-value-group\")}>\n      {pairs.map((pair, index) => {\n        const isLastRow = index === pairs.length - 1;\n        return (\n          <div className=\"key-value-row\" key={index}>\n            <div className=\"key-value-row-field\">\n              <InputField\n                aria-label={keyPlaceholder}\n                placeholder={keyPlaceholder}\n                value={pair.key}\n                isDisabled={isDisabled}\n                onChange={(key) => updatePair(index, { key })}\n              />\n            </div>\n            <div className=\"key-value-row-field\">\n              <InputField\n                aria-label={valuePlaceholder}\n                placeholder={valuePlaceholder}\n                value={pair.value}\n                isDisabled={isDisabled}\n                onChange={(value) => updatePair(index, { value })}\n              />\n            </div>\n            <div className=\"key-value-row-action\">\n              {isLastRow ? (\n                <IconButton\n                  aria-label={addRowButtonLabel}\n                  variant=\"subtle\"\n                  size=\"small\"\n                  isDisabled={isDisabled}\n                  onPress={addRow}\n                >\n                  <IconPlus size=\"16\" />\n                </IconButton>\n              ) : (\n                <IconButton\n                  aria-label={removeRowButtonLabel}\n                  variant=\"subtle\"\n                  size=\"small\"\n                  isDisabled={isDisabled}\n                  onPress={() => removeRow(index)}\n                >\n                  <IconTrash size=\"16\" />\n                </IconButton>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["KeyValue","pairs","onChange","keyPlaceholder","valuePlaceholder","addRowButtonLabel","removeRowButtonLabel","isDisabled","className","updatePair","index","patch","pair","i","addRow","removeRow","_","jsx","clsx","isLastRow","jsxs","InputField","key","value","IconButton","IconPlus","IconTrash"],"mappings":"4XAqBO,SAASA,EAAS,CACvB,MAAAC,EACA,SAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,qBAAAC,EACA,WAAAC,EACA,UAAAC,CACF,EAAkB,CAChB,SAASC,EAAWC,EAAeC,EAA8B,CAC/DT,EAASD,EAAM,IAAI,CAACW,EAAMC,IAAOA,IAAMH,EAAQ,CAAE,GAAGE,EAAM,GAAGD,CAAA,EAAUC,CAAK,CAAC,CAC/E,CAEA,SAASE,GAAS,CAChBZ,EAAS,CAAC,GAAGD,EAAO,CAAE,IAAK,GAAI,MAAO,EAAA,CAAI,CAAC,CAC7C,CAEA,SAASc,EAAUL,EAAe,CAChCR,EAASD,EAAM,OAAO,CAACe,EAAGH,IAAMA,IAAMH,CAAK,CAAC,CAC9C,CAEA,OACEO,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,KAAKV,EAAW,iBAAiB,EAC9C,SAAAP,EAAM,IAAI,CAACW,EAAMF,IAAU,CAC1B,MAAMS,EAAYT,IAAUT,EAAM,OAAS,EAC3C,OACEmB,EAAAA,KAAC,MAAA,CAAI,UAAU,gBACb,SAAA,CAAAH,EAAAA,IAAC,MAAA,CAAI,UAAU,sBACb,SAAAA,EAAAA,IAACI,EAAAA,WAAA,CACC,aAAYlB,EACZ,YAAaA,EACb,MAAOS,EAAK,IACZ,WAAAL,EACA,SAAWe,GAAQb,EAAWC,EAAO,CAAE,IAAAY,EAAK,CAAA,CAAA,EAEhD,EACAL,EAAAA,IAAC,MAAA,CAAI,UAAU,sBACb,SAAAA,EAAAA,IAACI,EAAAA,WAAA,CACC,aAAYjB,EACZ,YAAaA,EACb,MAAOQ,EAAK,MACZ,WAAAL,EACA,SAAWgB,GAAUd,EAAWC,EAAO,CAAE,MAAAa,EAAO,CAAA,CAAA,EAEpD,EACAN,EAAAA,IAAC,MAAA,CAAI,UAAU,uBACZ,SAAAE,EACCF,EAAAA,IAACO,EAAAA,WAAA,CACC,aAAYnB,EACZ,QAAQ,SACR,KAAK,QACL,WAAAE,EACA,QAASO,EAET,SAAAG,EAAAA,IAACQ,EAAAA,SAAA,CAAS,KAAK,IAAA,CAAK,CAAA,CAAA,EAGtBR,EAAAA,IAACO,EAAAA,WAAA,CACC,aAAYlB,EACZ,QAAQ,SACR,KAAK,QACL,WAAAC,EACA,QAAS,IAAMQ,EAAUL,CAAK,EAE9B,SAAAO,EAAAA,IAACS,EAAAA,UAAA,CAAU,KAAK,IAAA,CAAK,CAAA,CAAA,CACvB,CAEJ,CAAA,CAAA,EAzCkChB,CA0CpC,CAEJ,CAAC,CAAA,CACH,CAEJ"}

package/dist/lib/ui/components/KeyValue/KeyValue.js

@@ -0,0 +1,77 @@
+import { jsx as e, jsxs as y } from "react/jsx-runtime";
+import { clsx as k } from "../../../vendor/clsx/dist/clsx.js";
+/* empty css             */
+import { IconPlus as N } from "../../icons/IconPlus.js";
+import { IconTrash as z } from "../../icons/IconTrash.js";
+import { InputField as s } from "../../primitives/Input/Input.js";
+import { IconButton as v } from "../../primitives/IconButton/IconButton.js";
+function F({
+  pairs: o,
+  onChange: i,
+  keyPlaceholder: m,
+  valuePlaceholder: c,
+  addRowButtonLabel: f,
+  removeRowButtonLabel: d,
+  isDisabled: n,
+  className: h
+}) {
+  function u(a, l) {
+    i(o.map((r, t) => t === a ? { ...r, ...l } : r));
+  }
+  function p() {
+    i([...o, { key: "", value: "" }]);
+  }
+  function w(a) {
+    i(o.filter((l, r) => r !== a));
+  }
+  return /* @__PURE__ */ e("div", { className: k(h, "key-value-group"), children: o.map((a, l) => {
+    const r = l === o.length - 1;
+    return /* @__PURE__ */ y("div", { className: "key-value-row", children: [
+      /* @__PURE__ */ e("div", { className: "key-value-row-field", children: /* @__PURE__ */ e(
+        s,
+        {
+          "aria-label": m,
+          placeholder: m,
+          value: a.key,
+          isDisabled: n,
+          onChange: (t) => u(l, { key: t })
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "key-value-row-field", children: /* @__PURE__ */ e(
+        s,
+        {
+          "aria-label": c,
+          placeholder: c,
+          value: a.value,
+          isDisabled: n,
+          onChange: (t) => u(l, { value: t })
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "key-value-row-action", children: r ? /* @__PURE__ */ e(
+        v,
+        {
+          "aria-label": f,
+          variant: "subtle",
+          size: "small",
+          isDisabled: n,
+          onPress: p,
+          children: /* @__PURE__ */ e(N, { size: "16" })
+        }
+      ) : /* @__PURE__ */ e(
+        v,
+        {
+          "aria-label": d,
+          variant: "subtle",
+          size: "small",
+          isDisabled: n,
+          onPress: () => w(l),
+          children: /* @__PURE__ */ e(z, { size: "16" })
+        }
+      ) })
+    ] }, l);
+  }) });
+}
+export {
+  F as KeyValue
+};
+//# sourceMappingURL=KeyValue.js.map

package/dist/lib/ui/components/KeyValue/KeyValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValue.js","sources":["../../../../../src/ui/components/KeyValue/KeyValue.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconPlus, IconTrash } from \"icons\";\nimport { IconButton, InputField } from \"primitives\";\nimport \"./keyValue.css\";\n\nexport type KeyValuePair = {\n  key: string;\n  value: string;\n};\n\nexport type KeyValueProps = {\n  pairs: KeyValuePair[];\n  onChange: (pairs: KeyValuePair[]) => void;\n  keyPlaceholder: string;\n  valuePlaceholder: string;\n  addRowButtonLabel: string;\n  removeRowButtonLabel: string;\n  isDisabled?: boolean;\n  className?: string;\n};\n\nexport function KeyValue({\n  pairs,\n  onChange,\n  keyPlaceholder,\n  valuePlaceholder,\n  addRowButtonLabel,\n  removeRowButtonLabel,\n  isDisabled,\n  className,\n}: KeyValueProps) {\n  function updatePair(index: number, patch: Partial<KeyValuePair>) {\n    onChange(pairs.map((pair, i) => (i === index ? { ...pair, ...patch } : pair)));\n  }\n\n  function addRow() {\n    onChange([...pairs, { key: \"\", value: \"\" }]);\n  }\n\n  function removeRow(index: number) {\n    onChange(pairs.filter((_, i) => i !== index));\n  }\n\n  return (\n    <div className={clsx(className, \"key-value-group\")}>\n      {pairs.map((pair, index) => {\n        const isLastRow = index === pairs.length - 1;\n        return (\n          <div className=\"key-value-row\" key={index}>\n            <div className=\"key-value-row-field\">\n              <InputField\n                aria-label={keyPlaceholder}\n                placeholder={keyPlaceholder}\n                value={pair.key}\n                isDisabled={isDisabled}\n                onChange={(key) => updatePair(index, { key })}\n              />\n            </div>\n            <div className=\"key-value-row-field\">\n              <InputField\n                aria-label={valuePlaceholder}\n                placeholder={valuePlaceholder}\n                value={pair.value}\n                isDisabled={isDisabled}\n                onChange={(value) => updatePair(index, { value })}\n              />\n            </div>\n            <div className=\"key-value-row-action\">\n              {isLastRow ? (\n                <IconButton\n                  aria-label={addRowButtonLabel}\n                  variant=\"subtle\"\n                  size=\"small\"\n                  isDisabled={isDisabled}\n                  onPress={addRow}\n                >\n                  <IconPlus size=\"16\" />\n                </IconButton>\n              ) : (\n                <IconButton\n                  aria-label={removeRowButtonLabel}\n                  variant=\"subtle\"\n                  size=\"small\"\n                  isDisabled={isDisabled}\n                  onPress={() => removeRow(index)}\n                >\n                  <IconTrash size=\"16\" />\n                </IconButton>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["KeyValue","pairs","onChange","keyPlaceholder","valuePlaceholder","addRowButtonLabel","removeRowButtonLabel","isDisabled","className","updatePair","index","patch","pair","i","addRow","removeRow","_","jsx","clsx","isLastRow","jsxs","InputField","key","value","IconButton","IconPlus","IconTrash"],"mappings":";;;;;;;AAqBO,SAASA,EAAS;AAAA,EACvB,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AACF,GAAkB;AAChB,WAASC,EAAWC,GAAeC,GAA8B;AAC/D,IAAAT,EAASD,EAAM,IAAI,CAACW,GAAMC,MAAOA,MAAMH,IAAQ,EAAE,GAAGE,GAAM,GAAGD,EAAA,IAAUC,CAAK,CAAC;AAAA,EAC/E;AAEA,WAASE,IAAS;AAChB,IAAAZ,EAAS,CAAC,GAAGD,GAAO,EAAE,KAAK,IAAI,OAAO,GAAA,CAAI,CAAC;AAAA,EAC7C;AAEA,WAASc,EAAUL,GAAe;AAChC,IAAAR,EAASD,EAAM,OAAO,CAACe,GAAGH,MAAMA,MAAMH,CAAK,CAAC;AAAA,EAC9C;AAEA,SACE,gBAAAO,EAAC,OAAA,EAAI,WAAWC,EAAKV,GAAW,iBAAiB,GAC9C,UAAAP,EAAM,IAAI,CAACW,GAAMF,MAAU;AAC1B,UAAMS,IAAYT,MAAUT,EAAM,SAAS;AAC3C,WACE,gBAAAmB,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,MAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA,gBAAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,cAAYlB;AAAA,UACZ,aAAaA;AAAA,UACb,OAAOS,EAAK;AAAA,UACZ,YAAAL;AAAA,UACA,UAAU,CAACe,MAAQb,EAAWC,GAAO,EAAE,KAAAY,GAAK;AAAA,QAAA;AAAA,MAAA,GAEhD;AAAA,MACA,gBAAAL,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA,gBAAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,cAAYjB;AAAA,UACZ,aAAaA;AAAA,UACb,OAAOQ,EAAK;AAAA,UACZ,YAAAL;AAAA,UACA,UAAU,CAACgB,MAAUd,EAAWC,GAAO,EAAE,OAAAa,GAAO;AAAA,QAAA;AAAA,MAAA,GAEpD;AAAA,MACA,gBAAAN,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAAE,IACC,gBAAAF;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,cAAYnB;AAAA,UACZ,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,YAAAE;AAAA,UACA,SAASO;AAAA,UAET,UAAA,gBAAAG,EAACQ,GAAA,EAAS,MAAK,KAAA,CAAK;AAAA,QAAA;AAAA,MAAA,IAGtB,gBAAAR;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,cAAYlB;AAAA,UACZ,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,YAAAC;AAAA,UACA,SAAS,MAAMQ,EAAUL,CAAK;AAAA,UAE9B,UAAA,gBAAAO,EAACS,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,QAAA;AAAA,MAAA,EACvB,CAEJ;AAAA,IAAA,EAAA,GAzCkChB,CA0CpC;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

package/dist/lib/ui/primitives/Navigation/Navigation.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),e=require("../../../vendor/clsx/dist/clsx.cjs");;/* empty css                 */const s=require("../../utils/AnchorOrButton.cjs");function v({className:t,direction:n="row",...i}){const a=e.clsx(t,"navigation",`navigation-direction-${n}`);return o.jsx("nav",{className:a,...i})}function g({className:t,isSelected:n,...i}){const a=e.clsx(t,"navigation-pill");return o.jsx(s.AnchorOrButton,{"data-selected":n||void 0,className:a,...i})}function d({children:t,className:n,isSelected:i,icon:a,direction:c="column",size:r="medium",...u}){const l=e.clsx(n,"navigation-button",`navigation-button-direction-${c}`,`navigation-button-size-${r}`);return o.jsxs(s.AnchorOrButton,{"data-selected":i||void 0,className:l,...u,children:[a,t]})}exports.Navigation=v;exports.NavigationButton=d;exports.NavigationPill=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../../../vendor/clsx/dist/clsx.cjs");;/* empty css                 */const l=require("../../utils/AnchorOrButton.cjs");function v({className:t,direction:n="row",...i}){const o=e.clsx(t,"navigation",`navigation-direction-${n}`);return a.jsx("nav",{className:o,...i})}function g({children:t,className:n,isSelected:i,icon:o,direction:s="column",size:r="medium",...c}){const u=e.clsx(n,"navigation-button",`navigation-button-direction-${s}`,`navigation-button-size-${r}`);return a.jsxs(l.AnchorOrButton,{"data-selected":i||void 0,className:u,...c,children:[o,t]})}exports.Navigation=v;exports.NavigationButton=g;
 //# sourceMappingURL=Navigation.cjs.map

package/dist/lib/ui/primitives/Navigation/Navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.cjs","sources":["../../../../../src/ui/primitives/Navigation/Navigation.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { AnchorOrButton, AnchorOrButtonProps } from \"utils\";\nimport \"./navigation.css\";\n\nexport type NavigationProps = ComponentPropsWithoutRef<\"nav\"> & {\n  direction?: \"column\" | \"row\";\n};\nexport function Navigation({\n  className,\n  direction = \"row\",\n  ...props\n}: NavigationProps) {\n  const classNames = clsx(\n    className,\n    \"navigation\",\n    `navigation-direction-${direction}`,\n  );\n  return <nav className={classNames} {...props} />;\n}\n\nexport type NavigationPillProps = AnchorOrButtonProps & {\n  isSelected?: boolean;\n};\nexport function NavigationPill({\n  className,\n  isSelected,\n  ...props\n}: NavigationPillProps) {\n  const classNames = clsx(className, \"navigation-pill\");\n  return (\n    <AnchorOrButton\n      data-selected={isSelected || undefined}\n      className={classNames}\n      {...props}\n    />\n  );\n}\n\nexport type NavigationButtonProps = AnchorOrButtonProps & {\n  isSelected?: boolean;\n  icon?: ReactNode;\n  size?: \"small\" | \"medium\";\n  direction?: \"column\" | \"row\";\n};\nexport function NavigationButton({\n  children,\n  className,\n  isSelected,\n  icon,\n  direction = \"column\",\n  size = \"medium\",\n  ...props\n}: NavigationButtonProps) {\n  const classNames = clsx(\n    className,\n    \"navigation-button\",\n    `navigation-button-direction-${direction}`,\n    `navigation-button-size-${size}`,\n  );\n  return (\n    <AnchorOrButton\n      data-selected={isSelected || undefined}\n      className={classNames}\n      {...props}\n    >\n      {icon}\n      {children}\n    </AnchorOrButton>\n  );\n}\n"],"names":["Navigation","className","direction","props","classNames","clsx","jsx","NavigationPill","isSelected","AnchorOrButton","NavigationButton","children","icon","size","jsxs"],"mappings":"uPAQO,SAASA,EAAW,CACzB,UAAAC,EACA,UAAAC,EAAY,MACZ,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAaC,EAAAA,KACjBJ,EACA,aACA,wBAAwBC,CAAS,EAAA,EAEnC,OAAOI,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAa,GAAGD,EAAO,CAChD,CAKO,SAASI,EAAe,CAC7B,UAAAN,EACA,WAAAO,EACA,GAAGL,CACL,EAAwB,CACtB,MAAMC,EAAaC,EAAAA,KAAKJ,EAAW,iBAAiB,EACpD,OACEK,EAAAA,IAACG,EAAAA,eAAA,CACC,gBAAeD,GAAc,OAC7B,UAAWJ,EACV,GAAGD,CAAA,CAAA,CAGV,CAQO,SAASO,EAAiB,CAC/B,SAAAC,EACA,UAAAV,EACA,WAAAO,EACA,KAAAI,EACA,UAAAV,EAAY,SACZ,KAAAW,EAAO,SACP,GAAGV,CACL,EAA0B,CACxB,MAAMC,EAAaC,EAAAA,KACjBJ,EACA,oBACA,+BAA+BC,CAAS,GACxC,0BAA0BW,CAAI,EAAA,EAEhC,OACEC,EAAAA,KAACL,EAAAA,eAAA,CACC,gBAAeD,GAAc,OAC7B,UAAWJ,EACV,GAAGD,EAEH,SAAA,CAAAS,EACAD,CAAA,CAAA,CAAA,CAGP"}
+{"version":3,"file":"Navigation.cjs","sources":["../../../../../src/ui/primitives/Navigation/Navigation.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { AnchorOrButton, AnchorOrButtonProps } from \"utils\";\nimport \"./navigation.css\";\n\nexport type NavigationProps = ComponentPropsWithoutRef<\"nav\"> & {\n  direction?: \"column\" | \"row\";\n};\nexport function Navigation({\n  className,\n  direction = \"row\",\n  ...props\n}: NavigationProps) {\n  const classNames = clsx(\n    className,\n    \"navigation\",\n    `navigation-direction-${direction}`,\n  );\n  return <nav className={classNames} {...props} />;\n}\n\nexport type NavigationButtonProps = AnchorOrButtonProps & {\n  isSelected?: boolean;\n  icon?: ReactNode;\n  size?: \"small\" | \"medium\";\n  direction?: \"column\" | \"row\";\n};\nexport function NavigationButton({\n  children,\n  className,\n  isSelected,\n  icon,\n  direction = \"column\",\n  size = \"medium\",\n  ...props\n}: NavigationButtonProps) {\n  const classNames = clsx(\n    className,\n    \"navigation-button\",\n    `navigation-button-direction-${direction}`,\n    `navigation-button-size-${size}`,\n  );\n  return (\n    <AnchorOrButton\n      data-selected={isSelected || undefined}\n      className={classNames}\n      {...props}\n    >\n      {icon}\n      {children}\n    </AnchorOrButton>\n  );\n}\n"],"names":["Navigation","className","direction","props","classNames","clsx","jsx","NavigationButton","children","isSelected","icon","size","jsxs","AnchorOrButton"],"mappings":"uPAQO,SAASA,EAAW,CACzB,UAAAC,EACA,UAAAC,EAAY,MACZ,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAaC,EAAAA,KACjBJ,EACA,aACA,wBAAwBC,CAAS,EAAA,EAEnC,OAAOI,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAa,GAAGD,EAAO,CAChD,CAQO,SAASI,EAAiB,CAC/B,SAAAC,EACA,UAAAP,EACA,WAAAQ,EACA,KAAAC,EACA,UAAAR,EAAY,SACZ,KAAAS,EAAO,SACP,GAAGR,CACL,EAA0B,CACxB,MAAMC,EAAaC,EAAAA,KACjBJ,EACA,oBACA,+BAA+BC,CAAS,GACxC,0BAA0BS,CAAI,EAAA,EAEhC,OACEC,EAAAA,KAACC,EAAAA,eAAA,CACC,gBAAeJ,GAAc,OAC7B,UAAWL,EACV,GAAGD,EAEH,SAAA,CAAAO,EACAF,CAAA,CAAA,CAAA,CAGP"}

package/dist/lib/ui/primitives/Navigation/Navigation.js

@@ -1,57 +1,42 @@
-import { jsx as s, jsxs as u } from "react/jsx-runtime";
-import { clsx as o } from "../../../vendor/clsx/dist/clsx.js";
+import { jsx as m, jsxs as u } from "react/jsx-runtime";
+import { clsx as a } from "../../../vendor/clsx/dist/clsx.js";
 /* empty css               */
-import { AnchorOrButton as e } from "../../utils/AnchorOrButton.js";
+import { AnchorOrButton as v } from "../../utils/AnchorOrButton.js";
 function f({
   className: t,
   direction: n = "row",
-  ...i
+  ...o
 }) {
-  const a = o(
+  const i = a(
     t,
     "navigation",
     `navigation-direction-${n}`
   );
-  return /* @__PURE__ */ s("nav", { className: a, ...i });
+  return /* @__PURE__ */ m("nav", { className: i, ...o });
 }
 function p({
-  className: t,
-  isSelected: n,
-  ...i
-}) {
-  const a = o(t, "navigation-pill");
-  return /* @__PURE__ */ s(
-    e,
-    {
-      "data-selected": n || void 0,
-      className: a,
-      ...i
-    }
-  );
-}
-function x({
   children: t,
   className: n,
-  isSelected: i,
-  icon: a,
-  direction: c = "column",
-  size: r = "medium",
-  ...m
+  isSelected: o,
+  icon: i,
+  direction: r = "column",
+  size: s = "medium",
+  ...c
 }) {
-  const l = o(
+  const e = a(
     n,
     "navigation-button",
-    `navigation-button-direction-${c}`,
-    `navigation-button-size-${r}`
+    `navigation-button-direction-${r}`,
+    `navigation-button-size-${s}`
   );
   return /* @__PURE__ */ u(
-    e,
+    v,
     {
-      "data-selected": i || void 0,
-      className: l,
-      ...m,
+      "data-selected": o || void 0,
+      className: e,
+      ...c,
       children: [
-        a,
+        i,
         t
       ]
     }
@@ -59,7 +44,6 @@ function x({
 }
 export {
   f as Navigation,
-  x as NavigationButton,
-  p as NavigationPill
+  p as NavigationButton
 };
 //# sourceMappingURL=Navigation.js.map

package/dist/lib/ui/primitives/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../src/ui/primitives/Navigation/Navigation.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { AnchorOrButton, AnchorOrButtonProps } from \"utils\";\nimport \"./navigation.css\";\n\nexport type NavigationProps = ComponentPropsWithoutRef<\"nav\"> & {\n  direction?: \"column\" | \"row\";\n};\nexport function Navigation({\n  className,\n  direction = \"row\",\n  ...props\n}: NavigationProps) {\n  const classNames = clsx(\n    className,\n    \"navigation\",\n    `navigation-direction-${direction}`,\n  );\n  return <nav className={classNames} {...props} />;\n}\n\nexport type NavigationPillProps = AnchorOrButtonProps & {\n  isSelected?: boolean;\n};\nexport function NavigationPill({\n  className,\n  isSelected,\n  ...props\n}: NavigationPillProps) {\n  const classNames = clsx(className, \"navigation-pill\");\n  return (\n    <AnchorOrButton\n      data-selected={isSelected || undefined}\n      className={classNames}\n      {...props}\n    />\n  );\n}\n\nexport type NavigationButtonProps = AnchorOrButtonProps & {\n  isSelected?: boolean;\n  icon?: ReactNode;\n  size?: \"small\" | \"medium\";\n  direction?: \"column\" | \"row\";\n};\nexport function NavigationButton({\n  children,\n  className,\n  isSelected,\n  icon,\n  direction = \"column\",\n  size = \"medium\",\n  ...props\n}: NavigationButtonProps) {\n  const classNames = clsx(\n    className,\n    \"navigation-button\",\n    `navigation-button-direction-${direction}`,\n    `navigation-button-size-${size}`,\n  );\n  return (\n    <AnchorOrButton\n      data-selected={isSelected || undefined}\n      className={classNames}\n      {...props}\n    >\n      {icon}\n      {children}\n    </AnchorOrButton>\n  );\n}\n"],"names":["Navigation","className","direction","props","classNames","clsx","jsx","NavigationPill","isSelected","AnchorOrButton","NavigationButton","children","icon","size","jsxs"],"mappings":";;;;AAQO,SAASA,EAAW;AAAA,EACzB,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAaC;AAAA,IACjBJ;AAAA,IACA;AAAA,IACA,wBAAwBC,CAAS;AAAA,EAAA;AAEnC,SAAO,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAa,GAAGD,GAAO;AAChD;AAKO,SAASI,EAAe;AAAA,EAC7B,WAAAN;AAAA,EACA,YAAAO;AAAA,EACA,GAAGL;AACL,GAAwB;AACtB,QAAMC,IAAaC,EAAKJ,GAAW,iBAAiB;AACpD,SACE,gBAAAK;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,iBAAeD,KAAc;AAAA,MAC7B,WAAWJ;AAAA,MACV,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGV;AAQO,SAASO,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,WAAAV;AAAA,EACA,YAAAO;AAAA,EACA,MAAAI;AAAA,EACA,WAAAV,IAAY;AAAA,EACZ,MAAAW,IAAO;AAAA,EACP,GAAGV;AACL,GAA0B;AACxB,QAAMC,IAAaC;AAAA,IACjBJ;AAAA,IACA;AAAA,IACA,+BAA+BC,CAAS;AAAA,IACxC,0BAA0BW,CAAI;AAAA,EAAA;AAEhC,SACE,gBAAAC;AAAA,IAACL;AAAA,IAAA;AAAA,MACC,iBAAeD,KAAc;AAAA,MAC7B,WAAWJ;AAAA,MACV,GAAGD;AAAA,MAEH,UAAA;AAAA,QAAAS;AAAA,QACAD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/ui/primitives/Navigation/Navigation.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { AnchorOrButton, AnchorOrButtonProps } from \"utils\";\nimport \"./navigation.css\";\n\nexport type NavigationProps = ComponentPropsWithoutRef<\"nav\"> & {\n  direction?: \"column\" | \"row\";\n};\nexport function Navigation({\n  className,\n  direction = \"row\",\n  ...props\n}: NavigationProps) {\n  const classNames = clsx(\n    className,\n    \"navigation\",\n    `navigation-direction-${direction}`,\n  );\n  return <nav className={classNames} {...props} />;\n}\n\nexport type NavigationButtonProps = AnchorOrButtonProps & {\n  isSelected?: boolean;\n  icon?: ReactNode;\n  size?: \"small\" | \"medium\";\n  direction?: \"column\" | \"row\";\n};\nexport function NavigationButton({\n  children,\n  className,\n  isSelected,\n  icon,\n  direction = \"column\",\n  size = \"medium\",\n  ...props\n}: NavigationButtonProps) {\n  const classNames = clsx(\n    className,\n    \"navigation-button\",\n    `navigation-button-direction-${direction}`,\n    `navigation-button-size-${size}`,\n  );\n  return (\n    <AnchorOrButton\n      data-selected={isSelected || undefined}\n      className={classNames}\n      {...props}\n    >\n      {icon}\n      {children}\n    </AnchorOrButton>\n  );\n}\n"],"names":["Navigation","className","direction","props","classNames","clsx","jsx","NavigationButton","children","isSelected","icon","size","jsxs","AnchorOrButton"],"mappings":";;;;AAQO,SAASA,EAAW;AAAA,EACzB,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAaC;AAAA,IACjBJ;AAAA,IACA;AAAA,IACA,wBAAwBC,CAAS;AAAA,EAAA;AAEnC,SAAO,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAa,GAAGD,GAAO;AAChD;AAQO,SAASI,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,WAAAP;AAAA,EACA,YAAAQ;AAAA,EACA,MAAAC;AAAA,EACA,WAAAR,IAAY;AAAA,EACZ,MAAAS,IAAO;AAAA,EACP,GAAGR;AACL,GAA0B;AACxB,QAAMC,IAAaC;AAAA,IACjBJ;AAAA,IACA;AAAA,IACA,+BAA+BC,CAAS;AAAA,IACxC,0BAA0BS,CAAI;AAAA,EAAA;AAEhC,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,iBAAeJ,KAAc;AAAA,MAC7B,WAAWL;AAAA,MACV,GAAGD;AAAA,MAEH,UAAA;AAAA,QAAAO;AAAA,QACAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/lib/ui/primitives/NavigationPill/NavigationPill.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("../../../vendor/clsx/dist/clsx.cjs"),t=require("react-aria-components");;/* empty css                     */function e({className:i,...a}){const s=n.clsx(i,"navigation-pill");return l.jsx(t.Tab,{className:s,...a})}function o({className:i,...a}){const s=n.clsx(i,"navigation-pill-list");return l.jsx(t.TabList,{className:s,...a})}function c({className:i,...a}){const s=n.clsx(i,"navigation-pill-panel");return l.jsx(t.TabPanel,{className:s,...a})}function r({className:i,...a}){const s=n.clsx(i,"navigation-pills");return l.jsx(t.Tabs,{className:s,...a})}exports.NavigationPill=e;exports.NavigationPillList=o;exports.NavigationPillPanel=c;exports.NavigationPills=r;
+//# sourceMappingURL=NavigationPill.cjs.map

package/dist/lib/ui/primitives/NavigationPill/NavigationPill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationPill.cjs","sources":["../../../../../src/ui/primitives/NavigationPill/NavigationPill.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  type TabListProps as RACTabListProps,\n  type TabPanelProps as RACTabPanelProps,\n  type TabProps as RACTabProps,\n  type TabsProps as RACTabsProps,\n} from \"react-aria-components\";\nimport \"./navigationPill.css\";\n\nexport type NavigationPillProps = RACTabProps;\nexport function NavigationPill({ className, ...props }: NavigationPillProps) {\n  const classNames = clsx(className, \"navigation-pill\");\n  return <RACTab className={classNames} {...props} />;\n}\n\nexport type NavigationPillListProps<T> = RACTabListProps<T>;\nexport function NavigationPillList<T extends object>({\n  className,\n  ...props\n}: NavigationPillListProps<T>) {\n  const classNames = clsx(className, \"navigation-pill-list\");\n  return <RACTabList className={classNames} {...props} />;\n}\n\nexport type NavigationPillPanelProps = RACTabPanelProps;\nexport function NavigationPillPanel({\n  className,\n  ...props\n}: NavigationPillPanelProps) {\n  const classNames = clsx(className, \"navigation-pill-panel\");\n  return <RACTabPanel className={classNames} {...props} />;\n}\n\nexport type NavigationPillsProps = RACTabsProps;\nexport function NavigationPills({ className, ...props }: NavigationPillsProps) {\n  const classNames = clsx(className, \"navigation-pills\");\n  return <RACTabs className={classNames} {...props} />;\n}\n"],"names":["NavigationPill","className","props","classNames","clsx","jsx","RACTab","NavigationPillList","RACTabList","NavigationPillPanel","RACTabPanel","NavigationPills","RACTabs"],"mappings":"4OAcO,SAASA,EAAe,CAAE,UAAAC,EAAW,GAAGC,GAA8B,CAC3E,MAAMC,EAAaC,EAAAA,KAAKH,EAAW,iBAAiB,EACpD,OAAOI,EAAAA,IAACC,EAAAA,IAAA,CAAO,UAAWH,EAAa,GAAGD,EAAO,CACnD,CAGO,SAASK,EAAqC,CACnD,UAAAN,EACA,GAAGC,CACL,EAA+B,CAC7B,MAAMC,EAAaC,EAAAA,KAAKH,EAAW,sBAAsB,EACzD,OAAOI,EAAAA,IAACG,EAAAA,QAAA,CAAW,UAAWL,EAAa,GAAGD,EAAO,CACvD,CAGO,SAASO,EAAoB,CAClC,UAAAR,EACA,GAAGC,CACL,EAA6B,CAC3B,MAAMC,EAAaC,EAAAA,KAAKH,EAAW,uBAAuB,EAC1D,OAAOI,EAAAA,IAACK,EAAAA,SAAA,CAAY,UAAWP,EAAa,GAAGD,EAAO,CACxD,CAGO,SAASS,EAAgB,CAAE,UAAAV,EAAW,GAAGC,GAA+B,CAC7E,MAAMC,EAAaC,EAAAA,KAAKH,EAAW,kBAAkB,EACrD,OAAOI,EAAAA,IAACO,EAAAA,KAAA,CAAQ,UAAWT,EAAa,GAAGD,EAAO,CACpD"}

package/dist/lib/ui/primitives/NavigationPill/NavigationPill.js

@@ -0,0 +1,33 @@
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as l } from "../../../vendor/clsx/dist/clsx.js";
+import { Tab as t, TabList as o, TabPanel as c, Tabs as e } from "react-aria-components";
+/* empty css                   */
+function g({ className: a, ...i }) {
+  const s = l(a, "navigation-pill");
+  return /* @__PURE__ */ n(t, { className: s, ...i });
+}
+function u({
+  className: a,
+  ...i
+}) {
+  const s = l(a, "navigation-pill-list");
+  return /* @__PURE__ */ n(o, { className: s, ...i });
+}
+function v({
+  className: a,
+  ...i
+}) {
+  const s = l(a, "navigation-pill-panel");
+  return /* @__PURE__ */ n(c, { className: s, ...i });
+}
+function f({ className: a, ...i }) {
+  const s = l(a, "navigation-pills");
+  return /* @__PURE__ */ n(e, { className: s, ...i });
+}
+export {
+  g as NavigationPill,
+  u as NavigationPillList,
+  v as NavigationPillPanel,
+  f as NavigationPills
+};
+//# sourceMappingURL=NavigationPill.js.map

package/dist/lib/ui/primitives/NavigationPill/NavigationPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationPill.js","sources":["../../../../../src/ui/primitives/NavigationPill/NavigationPill.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  type TabListProps as RACTabListProps,\n  type TabPanelProps as RACTabPanelProps,\n  type TabProps as RACTabProps,\n  type TabsProps as RACTabsProps,\n} from \"react-aria-components\";\nimport \"./navigationPill.css\";\n\nexport type NavigationPillProps = RACTabProps;\nexport function NavigationPill({ className, ...props }: NavigationPillProps) {\n  const classNames = clsx(className, \"navigation-pill\");\n  return <RACTab className={classNames} {...props} />;\n}\n\nexport type NavigationPillListProps<T> = RACTabListProps<T>;\nexport function NavigationPillList<T extends object>({\n  className,\n  ...props\n}: NavigationPillListProps<T>) {\n  const classNames = clsx(className, \"navigation-pill-list\");\n  return <RACTabList className={classNames} {...props} />;\n}\n\nexport type NavigationPillPanelProps = RACTabPanelProps;\nexport function NavigationPillPanel({\n  className,\n  ...props\n}: NavigationPillPanelProps) {\n  const classNames = clsx(className, \"navigation-pill-panel\");\n  return <RACTabPanel className={classNames} {...props} />;\n}\n\nexport type NavigationPillsProps = RACTabsProps;\nexport function NavigationPills({ className, ...props }: NavigationPillsProps) {\n  const classNames = clsx(className, \"navigation-pills\");\n  return <RACTabs className={classNames} {...props} />;\n}\n"],"names":["NavigationPill","className","props","classNames","clsx","jsx","RACTab","NavigationPillList","RACTabList","NavigationPillPanel","RACTabPanel","NavigationPills","RACTabs"],"mappings":";;;;AAcO,SAASA,EAAe,EAAE,WAAAC,GAAW,GAAGC,KAA8B;AAC3E,QAAMC,IAAaC,EAAKH,GAAW,iBAAiB;AACpD,SAAO,gBAAAI,EAACC,GAAA,EAAO,WAAWH,GAAa,GAAGD,GAAO;AACnD;AAGO,SAASK,EAAqC;AAAA,EACnD,WAAAN;AAAA,EACA,GAAGC;AACL,GAA+B;AAC7B,QAAMC,IAAaC,EAAKH,GAAW,sBAAsB;AACzD,SAAO,gBAAAI,EAACG,GAAA,EAAW,WAAWL,GAAa,GAAGD,GAAO;AACvD;AAGO,SAASO,EAAoB;AAAA,EAClC,WAAAR;AAAA,EACA,GAAGC;AACL,GAA6B;AAC3B,QAAMC,IAAaC,EAAKH,GAAW,uBAAuB;AAC1D,SAAO,gBAAAI,EAACK,GAAA,EAAY,WAAWP,GAAa,GAAGD,GAAO;AACxD;AAGO,SAASS,EAAgB,EAAE,WAAAV,GAAW,GAAGC,KAA+B;AAC7E,QAAMC,IAAaC,EAAKH,GAAW,kBAAkB;AACrD,SAAO,gBAAAI,EAACO,GAAA,EAAQ,WAAWT,GAAa,GAAGD,GAAO;AACpD;"}

package/dist/lib/ui/primitives/Tab/Tab.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("../../../vendor/clsx/dist/clsx.cjs"),c=require("react-aria-components");;/* empty css          */function r({className:s,...a}){const e=n.clsx(s,"tab");return t.jsx(c.Tab,{className:e,...a})}function l({className:s,...a}){const e=n.clsx(s,"tab-list");return t.jsx(c.TabList,{className:e,...a})}function b({className:s,...a}){const e=n.clsx(s,"tab-panel");return t.jsx(c.TabPanel,{className:e,...a})}function i({className:s,...a}){const e=n.clsx(s,"tabs");return t.jsx(c.Tabs,{className:e,...a})}exports.Tab=r;exports.TabList=l;exports.TabPanel=b;exports.Tabs=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("../../../vendor/clsx/dist/clsx.cjs"),n=require("react-aria-components");;/* empty css          */const i=require("../../icons/IconX.cjs");function o({className:e,children:a,onClose:t,closeButtonLabel:l,...r}){const b=c.clsx(e,"tab");return s.jsx(n.Tab,{className:b,"aria-label":a,...r,children:s.jsxs(s.Fragment,{children:[s.jsx("span",{className:"tab-label",children:a}),s.jsx(n.Button,{className:"tab-close","aria-label":l,onPress:t,children:s.jsx(i.IconX,{size:"16"})})]})})}function u({className:e,...a}){const t=c.clsx(e,"tab-list");return s.jsx(n.TabList,{className:t,...a})}function m({className:e,...a}){const t=c.clsx(e,"tab-panel");return s.jsx(n.TabPanel,{className:t,...a})}function x({className:e,...a}){const t=c.clsx(e,"tabs");return s.jsx(n.Tabs,{className:t,...a})}exports.Tab=o;exports.TabList=u;exports.TabPanel=m;exports.Tabs=x;
 //# sourceMappingURL=Tab.cjs.map

package/dist/lib/ui/primitives/Tab/Tab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.cjs","sources":["../../../../../src/ui/primitives/Tab/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  type TabListProps as RACTabListProps,\n  type TabPanelProps as RACTabPanelProps,\n  type TabProps as RACTabProps,\n  type TabsProps as RACTabsProps,\n} from \"react-aria-components\";\nimport \"./tab.css\";\n\nexport type TabProps = RACTabProps;\nexport function Tab({ className, ...props }: TabProps) {\n  const classNames = clsx(className, \"tab\");\n  return <RACTab className={classNames} {...props} />;\n}\n\nexport type TabListProps<T> = RACTabListProps<T>;\nexport function TabList<T extends object>({\n  className,\n  ...props\n}: TabListProps<T>) {\n  const classNames = clsx(className, \"tab-list\");\n  return <RACTabList className={classNames} {...props} />;\n}\n\nexport type TabPanelProps = RACTabPanelProps;\nexport function TabPanel({ className, ...props }: TabPanelProps) {\n  const classNames = clsx(className, \"tab-panel\");\n  return <RACTabPanel className={classNames} {...props} />;\n}\n\nexport type TabsProps = RACTabsProps;\nexport function Tabs({ className, ...props }: TabsProps) {\n  const classNames = clsx(className, \"tabs\");\n  return <RACTabs className={classNames} {...props} />;\n}\n"],"names":["Tab","className","props","classNames","clsx","jsx","RACTab","TabList","RACTabList","TabPanel","RACTabPanel","Tabs","RACTabs"],"mappings":"iOAcO,SAASA,EAAI,CAAE,UAAAC,EAAW,GAAGC,GAAmB,CACrD,MAAMC,EAAaC,EAAAA,KAAKH,EAAW,KAAK,EACxC,OAAOI,EAAAA,IAACC,EAAAA,IAAA,CAAO,UAAWH,EAAa,GAAGD,EAAO,CACnD,CAGO,SAASK,EAA0B,CACxC,UAAAN,EACA,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAaC,EAAAA,KAAKH,EAAW,UAAU,EAC7C,OAAOI,EAAAA,IAACG,EAAAA,QAAA,CAAW,UAAWL,EAAa,GAAGD,EAAO,CACvD,CAGO,SAASO,EAAS,CAAE,UAAAR,EAAW,GAAGC,GAAwB,CAC/D,MAAMC,EAAaC,EAAAA,KAAKH,EAAW,WAAW,EAC9C,OAAOI,EAAAA,IAACK,EAAAA,SAAA,CAAY,UAAWP,EAAa,GAAGD,EAAO,CACxD,CAGO,SAASS,EAAK,CAAE,UAAAV,EAAW,GAAGC,GAAoB,CACvD,MAAMC,EAAaC,EAAAA,KAAKH,EAAW,MAAM,EACzC,OAAOI,EAAAA,IAACO,EAAAA,KAAA,CAAQ,UAAWT,EAAa,GAAGD,EAAO,CACpD"}
+{"version":3,"file":"Tab.cjs","sources":["../../../../../src/ui/primitives/Tab/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { IconX } from \"icons\";\nimport {\n  Button as RACButton,\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  type PressEvent as RACPressEvent,\n  type TabListProps as RACTabListProps,\n  type TabPanelProps as RACTabPanelProps,\n  type TabProps as RACTabProps,\n  type TabsProps as RACTabsProps,\n} from \"react-aria-components\";\nimport \"./tab.css\";\n\nexport type TabProps = Omit<RACTabProps, \"children\"> & {\n  children: string;\n  onClose: (e: RACPressEvent) => void;\n  closeButtonLabel: string;\n};\nexport function Tab({\n  className,\n  children,\n  onClose,\n  closeButtonLabel,\n  ...props\n}: TabProps) {\n  const classNames = clsx(className, \"tab\");\n  return (\n    <RACTab className={classNames} aria-label={children} {...props}>\n      <>\n        <span className=\"tab-label\">{children}</span>\n        <RACButton\n          className=\"tab-close\"\n          aria-label={closeButtonLabel}\n          onPress={onClose}\n        >\n          <IconX size=\"16\" />\n        </RACButton>\n      </>\n    </RACTab>\n  );\n}\n\nexport type TabListProps<T> = RACTabListProps<T>;\nexport function TabList<T extends object>({\n  className,\n  ...props\n}: TabListProps<T>) {\n  const classNames = clsx(className, \"tab-list\");\n  return <RACTabList className={classNames} {...props} />;\n}\n\nexport type TabPanelProps = RACTabPanelProps;\nexport function TabPanel({ className, ...props }: TabPanelProps) {\n  const classNames = clsx(className, \"tab-panel\");\n  return <RACTabPanel className={classNames} {...props} />;\n}\n\nexport type TabsProps = RACTabsProps;\nexport function Tabs({ className, ...props }: TabsProps) {\n  const classNames = clsx(className, \"tabs\");\n  return <RACTabs className={classNames} {...props} />;\n}\n"],"names":["Tab","className","children","onClose","closeButtonLabel","props","classNames","clsx","jsx","RACTab","jsxs","Fragment","RACButton","IconX","TabList","RACTabList","TabPanel","RACTabPanel","Tabs","RACTabs"],"mappings":"0QAqBO,SAASA,EAAI,CAClB,UAAAC,EACA,SAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,GAAGC,CACL,EAAa,CACX,MAAMC,EAAaC,EAAAA,KAAKN,EAAW,KAAK,EACxC,OACEO,EAAAA,IAACC,EAAAA,KAAO,UAAWH,EAAY,aAAYJ,EAAW,GAAGG,EACvD,SAAAK,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,OAAA,CAAK,UAAU,YAAa,SAAAN,CAAA,CAAS,EACtCM,EAAAA,IAACI,EAAAA,OAAA,CACC,UAAU,YACV,aAAYR,EACZ,QAASD,EAET,SAAAK,EAAAA,IAACK,EAAAA,MAAA,CAAM,KAAK,IAAA,CAAK,CAAA,CAAA,CACnB,CAAA,CACF,CAAA,CACF,CAEJ,CAGO,SAASC,EAA0B,CACxC,UAAAb,EACA,GAAGI,CACL,EAAoB,CAClB,MAAMC,EAAaC,EAAAA,KAAKN,EAAW,UAAU,EAC7C,OAAOO,EAAAA,IAACO,EAAAA,QAAA,CAAW,UAAWT,EAAa,GAAGD,EAAO,CACvD,CAGO,SAASW,EAAS,CAAE,UAAAf,EAAW,GAAGI,GAAwB,CAC/D,MAAMC,EAAaC,EAAAA,KAAKN,EAAW,WAAW,EAC9C,OAAOO,EAAAA,IAACS,EAAAA,SAAA,CAAY,UAAWX,EAAa,GAAGD,EAAO,CACxD,CAGO,SAASa,EAAK,CAAE,UAAAjB,EAAW,GAAGI,GAAoB,CACvD,MAAMC,EAAaC,EAAAA,KAAKN,EAAW,MAAM,EACzC,OAAOO,EAAAA,IAACW,EAAAA,KAAA,CAAQ,UAAWb,EAAa,GAAGD,EAAO,CACpD"}

package/dist/lib/ui/primitives/Tab/Tab.js

@@ -1,30 +1,48 @@
-import { jsx as n } from "react/jsx-runtime";
-import { clsx as c } from "../../../vendor/clsx/dist/clsx.js";
-import { Tab as e, TabList as b, TabPanel as o, Tabs as r } from "react-aria-components";
+import { jsx as e, jsxs as o, Fragment as b } from "react/jsx-runtime";
+import { clsx as n } from "../../../vendor/clsx/dist/clsx.js";
+import { Tab as m, Button as i, TabList as T, TabPanel as N, Tabs as u } from "react-aria-components";
 /* empty css        */
-function u({ className: a, ...s }) {
-  const t = c(a, "tab");
-  return /* @__PURE__ */ n(e, { className: t, ...s });
+import { IconX as f } from "../../icons/IconX.js";
+function d({
+  className: s,
+  children: a,
+  onClose: t,
+  closeButtonLabel: l,
+  ...r
+}) {
+  const c = n(s, "tab");
+  return /* @__PURE__ */ e(m, { className: c, "aria-label": a, ...r, children: /* @__PURE__ */ o(b, { children: [
+    /* @__PURE__ */ e("span", { className: "tab-label", children: a }),
+    /* @__PURE__ */ e(
+      i,
+      {
+        className: "tab-close",
+        "aria-label": l,
+        onPress: t,
+        children: /* @__PURE__ */ e(f, { size: "16" })
+      }
+    )
+  ] }) });
 }
-function N({
-  className: a,
-  ...s
+function h({
+  className: s,
+  ...a
 }) {
-  const t = c(a, "tab-list");
-  return /* @__PURE__ */ n(b, { className: t, ...s });
+  const t = n(s, "tab-list");
+  return /* @__PURE__ */ e(T, { className: t, ...a });
 }
-function f({ className: a, ...s }) {
-  const t = c(a, "tab-panel");
-  return /* @__PURE__ */ n(o, { className: t, ...s });
+function j({ className: s, ...a }) {
+  const t = n(s, "tab-panel");
+  return /* @__PURE__ */ e(N, { className: t, ...a });
 }
-function p({ className: a, ...s }) {
-  const t = c(a, "tabs");
-  return /* @__PURE__ */ n(r, { className: t, ...s });
+function g({ className: s, ...a }) {
+  const t = n(s, "tabs");
+  return /* @__PURE__ */ e(u, { className: t, ...a });
 }
 export {
-  u as Tab,
-  N as TabList,
-  f as TabPanel,
-  p as Tabs
+  d as Tab,
+  h as TabList,
+  j as TabPanel,
+  g as Tabs
 };
 //# sourceMappingURL=Tab.js.map

package/dist/lib/ui/primitives/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../../src/ui/primitives/Tab/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  type TabListProps as RACTabListProps,\n  type TabPanelProps as RACTabPanelProps,\n  type TabProps as RACTabProps,\n  type TabsProps as RACTabsProps,\n} from \"react-aria-components\";\nimport \"./tab.css\";\n\nexport type TabProps = RACTabProps;\nexport function Tab({ className, ...props }: TabProps) {\n  const classNames = clsx(className, \"tab\");\n  return <RACTab className={classNames} {...props} />;\n}\n\nexport type TabListProps<T> = RACTabListProps<T>;\nexport function TabList<T extends object>({\n  className,\n  ...props\n}: TabListProps<T>) {\n  const classNames = clsx(className, \"tab-list\");\n  return <RACTabList className={classNames} {...props} />;\n}\n\nexport type TabPanelProps = RACTabPanelProps;\nexport function TabPanel({ className, ...props }: TabPanelProps) {\n  const classNames = clsx(className, \"tab-panel\");\n  return <RACTabPanel className={classNames} {...props} />;\n}\n\nexport type TabsProps = RACTabsProps;\nexport function Tabs({ className, ...props }: TabsProps) {\n  const classNames = clsx(className, \"tabs\");\n  return <RACTabs className={classNames} {...props} />;\n}\n"],"names":["Tab","className","props","classNames","clsx","jsx","RACTab","TabList","RACTabList","TabPanel","RACTabPanel","Tabs","RACTabs"],"mappings":";;;;AAcO,SAASA,EAAI,EAAE,WAAAC,GAAW,GAAGC,KAAmB;AACrD,QAAMC,IAAaC,EAAKH,GAAW,KAAK;AACxC,SAAO,gBAAAI,EAACC,GAAA,EAAO,WAAWH,GAAa,GAAGD,GAAO;AACnD;AAGO,SAASK,EAA0B;AAAA,EACxC,WAAAN;AAAA,EACA,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAaC,EAAKH,GAAW,UAAU;AAC7C,SAAO,gBAAAI,EAACG,GAAA,EAAW,WAAWL,GAAa,GAAGD,GAAO;AACvD;AAGO,SAASO,EAAS,EAAE,WAAAR,GAAW,GAAGC,KAAwB;AAC/D,QAAMC,IAAaC,EAAKH,GAAW,WAAW;AAC9C,SAAO,gBAAAI,EAACK,GAAA,EAAY,WAAWP,GAAa,GAAGD,GAAO;AACxD;AAGO,SAASS,EAAK,EAAE,WAAAV,GAAW,GAAGC,KAAoB;AACvD,QAAMC,IAAaC,EAAKH,GAAW,MAAM;AACzC,SAAO,gBAAAI,EAACO,GAAA,EAAQ,WAAWT,GAAa,GAAGD,GAAO;AACpD;"}
+{"version":3,"file":"Tab.js","sources":["../../../../../src/ui/primitives/Tab/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { IconX } from \"icons\";\nimport {\n  Button as RACButton,\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  type PressEvent as RACPressEvent,\n  type TabListProps as RACTabListProps,\n  type TabPanelProps as RACTabPanelProps,\n  type TabProps as RACTabProps,\n  type TabsProps as RACTabsProps,\n} from \"react-aria-components\";\nimport \"./tab.css\";\n\nexport type TabProps = Omit<RACTabProps, \"children\"> & {\n  children: string;\n  onClose: (e: RACPressEvent) => void;\n  closeButtonLabel: string;\n};\nexport function Tab({\n  className,\n  children,\n  onClose,\n  closeButtonLabel,\n  ...props\n}: TabProps) {\n  const classNames = clsx(className, \"tab\");\n  return (\n    <RACTab className={classNames} aria-label={children} {...props}>\n      <>\n        <span className=\"tab-label\">{children}</span>\n        <RACButton\n          className=\"tab-close\"\n          aria-label={closeButtonLabel}\n          onPress={onClose}\n        >\n          <IconX size=\"16\" />\n        </RACButton>\n      </>\n    </RACTab>\n  );\n}\n\nexport type TabListProps<T> = RACTabListProps<T>;\nexport function TabList<T extends object>({\n  className,\n  ...props\n}: TabListProps<T>) {\n  const classNames = clsx(className, \"tab-list\");\n  return <RACTabList className={classNames} {...props} />;\n}\n\nexport type TabPanelProps = RACTabPanelProps;\nexport function TabPanel({ className, ...props }: TabPanelProps) {\n  const classNames = clsx(className, \"tab-panel\");\n  return <RACTabPanel className={classNames} {...props} />;\n}\n\nexport type TabsProps = RACTabsProps;\nexport function Tabs({ className, ...props }: TabsProps) {\n  const classNames = clsx(className, \"tabs\");\n  return <RACTabs className={classNames} {...props} />;\n}\n"],"names":["Tab","className","children","onClose","closeButtonLabel","props","classNames","clsx","jsx","RACTab","jsxs","Fragment","RACButton","IconX","TabList","RACTabList","TabPanel","RACTabPanel","Tabs","RACTabs"],"mappings":";;;;;AAqBO,SAASA,EAAI;AAAA,EAClB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,GAAGC;AACL,GAAa;AACX,QAAMC,IAAaC,EAAKN,GAAW,KAAK;AACxC,SACE,gBAAAO,EAACC,KAAO,WAAWH,GAAY,cAAYJ,GAAW,GAAGG,GACvD,UAAA,gBAAAK,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAN,EAAA,CAAS;AAAA,IACtC,gBAAAM;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,cAAYR;AAAA,QACZ,SAASD;AAAA,QAET,UAAA,gBAAAK,EAACK,GAAA,EAAM,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,EAAA,CACF,EAAA,CACF;AAEJ;AAGO,SAASC,EAA0B;AAAA,EACxC,WAAAb;AAAA,EACA,GAAGI;AACL,GAAoB;AAClB,QAAMC,IAAaC,EAAKN,GAAW,UAAU;AAC7C,SAAO,gBAAAO,EAACO,GAAA,EAAW,WAAWT,GAAa,GAAGD,GAAO;AACvD;AAGO,SAASW,EAAS,EAAE,WAAAf,GAAW,GAAGI,KAAwB;AAC/D,QAAMC,IAAaC,EAAKN,GAAW,WAAW;AAC9C,SAAO,gBAAAO,EAACS,GAAA,EAAY,WAAWX,GAAa,GAAGD,GAAO;AACxD;AAGO,SAASa,EAAK,EAAE,WAAAjB,GAAW,GAAGI,KAAoB;AACvD,QAAMC,IAAaC,EAAKN,GAAW,MAAM;AACzC,SAAO,gBAAAO,EAACW,GAAA,EAAQ,WAAWb,GAAa,GAAGD,GAAO;AACpD;"}

package/dist/types/ui/components/KeyValue/KeyValue.d.ts

@@ -0,0 +1,16 @@
+import "./keyValue.css";
+export type KeyValuePair = {
+    key: string;
+    value: string;
+};
+export type KeyValueProps = {
+    pairs: KeyValuePair[];
+    onChange: (pairs: KeyValuePair[]) => void;
+    keyPlaceholder: string;
+    valuePlaceholder: string;
+    addRowButtonLabel: string;
+    removeRowButtonLabel: string;
+    isDisabled?: boolean;
+    className?: string;
+};
+export declare function KeyValue({ pairs, onChange, keyPlaceholder, valuePlaceholder, addRowButtonLabel, removeRowButtonLabel, isDisabled, className, }: KeyValueProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/index.d.ts

@@ -5,6 +5,7 @@ export * from "./charts/TimeSeriesChart/TimeSeriesChart";
 export * from "./ConfirmDialog/ConfirmDialog";
 export * from "./DataTable/DataTable";
 export * from "./FormModal/FormModal";
+export * from "./KeyValue/KeyValue";
 export * from "./PageHeader/PageHeader";
 export * from "./Sidebar/Sidebar";
 export * from "./Widget/Widget";

package/dist/types/ui/primitives/Navigation/Navigation.d.ts

@@ -5,10 +5,6 @@ export type NavigationProps = ComponentPropsWithoutRef<"nav"> & {
     direction?: "column" | "row";
 };
 export declare function Navigation({ className, direction, ...props }: NavigationProps): import("react/jsx-runtime").JSX.Element;
-export type NavigationPillProps = AnchorOrButtonProps & {
-    isSelected?: boolean;
-};
-export declare function NavigationPill({ className, isSelected, ...props }: NavigationPillProps): import("react/jsx-runtime").JSX.Element;
 export type NavigationButtonProps = AnchorOrButtonProps & {
     isSelected?: boolean;
     icon?: ReactNode;

package/dist/types/ui/primitives/NavigationPill/NavigationPill.d.ts

@@ -0,0 +1,10 @@
+import { type TabListProps as RACTabListProps, type TabPanelProps as RACTabPanelProps, type TabProps as RACTabProps, type TabsProps as RACTabsProps } from "react-aria-components";
+import "./navigationPill.css";
+export type NavigationPillProps = RACTabProps;
+export declare function NavigationPill({ className, ...props }: NavigationPillProps): import("react/jsx-runtime").JSX.Element;
+export type NavigationPillListProps<T> = RACTabListProps<T>;
+export declare function NavigationPillList<T extends object>({ className, ...props }: NavigationPillListProps<T>): import("react/jsx-runtime").JSX.Element;
+export type NavigationPillPanelProps = RACTabPanelProps;
+export declare function NavigationPillPanel({ className, ...props }: NavigationPillPanelProps): import("react/jsx-runtime").JSX.Element;
+export type NavigationPillsProps = RACTabsProps;
+export declare function NavigationPills({ className, ...props }: NavigationPillsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/Tab/Tab.d.ts

@@ -1,7 +1,11 @@
-import { type TabListProps as RACTabListProps, type TabPanelProps as RACTabPanelProps, type TabProps as RACTabProps, type TabsProps as RACTabsProps } from "react-aria-components";
+import { type PressEvent as RACPressEvent, type TabListProps as RACTabListProps, type TabPanelProps as RACTabPanelProps, type TabProps as RACTabProps, type TabsProps as RACTabsProps } from "react-aria-components";
 import "./tab.css";
-export type TabProps = RACTabProps;
-export declare function Tab({ className, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+export type TabProps = Omit<RACTabProps, "children"> & {
+    children: string;
+    onClose: (e: RACPressEvent) => void;
+    closeButtonLabel: string;
+};
+export declare function Tab({ className, children, onClose, closeButtonLabel, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
 export type TabListProps<T> = RACTabListProps<T>;
 export declare function TabList<T extends object>({ className, ...props }: TabListProps<T>): import("react/jsx-runtime").JSX.Element;
 export type TabPanelProps = RACTabPanelProps;

package/dist/types/ui/primitives/index.d.ts

@@ -21,6 +21,7 @@ export * from "./ListBox/ListBox";
 export * from "./Logo/Logo";
 export * from "./Menu/Menu";
 export * from "./Navigation/Navigation";
+export * from "./NavigationPill/NavigationPill";
 export * from "./Notification/Notification";
 export * from "./Pagination/Pagination";
 export * from "./Radio/Radio";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "1.24.0",
+  "version": "2.0.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [