@d4gger/design-system 3.0.1 → 4.0.1

package/dist/components/qrCode/QrCode.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/qrCode/QrCode.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { QRCodeSVG } from 'qrcode.react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { qrCodePropDefs } from './qrCode.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype QRCodeOwnProps = GetPropDefTypes<typeof qrCodePropDefs>\n\ninterface QRCodeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'>, QRCodeOwnProps {\n  value: string\n  level?: 'L' | 'M' | 'Q' | 'H'\n  marginSize?: number\n  fgColor?: string\n  bgColor?: string\n}\n\nconst sizeMap: Record<string, number> = {\n  sm: 128,\n  md: 192,\n  lg: 256,\n}\n\nconst QRCode = React.forwardRef<HTMLDivElement, QRCodeProps>((props, forwardedRef) => {\n  const size = props.size ?? 'md'\n  const {\n    asChild,\n    className,\n    value,\n    level = 'M',\n    marginSize = 0,\n    fgColor,\n    bgColor,\n    ...restProps\n  } = extractProps(props, qrCodePropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const resolvedSize = sizeMap[size] ?? 192\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-qr-code', className)}\n      data-slot=\"qr-code\"\n      data-size={size}\n    >\n      <QRCodeSVG\n        value={value}\n        size={resolvedSize}\n        level={level}\n        marginSize={marginSize}\n        fgColor={fgColor ?? 'var(--dsx-color-on-surface)'}\n        bgColor={bgColor ?? 'var(--dsx-color-surface-raised)'}\n      />\n    </Comp>\n  )\n})\nQRCode.displayName = 'QRCode'\n\nexport { QRCode }\nexport type { QRCodeOwnProps, QRCodeProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AACrB,oBAA0B;AAE1B,0BAA6B;AAC7B,oBAA+B;AA2CzB;AA7BN,MAAM,UAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,SAAS,MAAM,WAAwC,CAAC,OAAO,iBAAiB;AACpF,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,4BAAc;AACtC,QAAM,OAAO,UAAU,yBAAO;AAC9B,QAAM,eAAe,QAAQ,IAAI,KAAK;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,eAAe,SAAS;AAAA,MAC9C,aAAU;AAAA,MACV,aAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,SAAS,WAAW;AAAA;AAAA,MACtB;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,OAAO,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { QRCodeSVG } from 'qrcode.react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { qrCodePropDefs } from './qrCode.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype QRCodeOwnProps = GetPropDefTypes<typeof qrCodePropDefs>\n\ninterface QRCodeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'>, QRCodeOwnProps {\n  value: string\n  level?: 'L' | 'M' | 'Q' | 'H'\n  marginSize?: number\n  fgColor?: string\n  bgColor?: string\n}\n\nconst sizeMap: Record<string, number> = {\n  sm: 128,\n  md: 192,\n  lg: 256,\n}\n\nconst QRCode = React.forwardRef<HTMLDivElement, QRCodeProps>((props, forwardedRef) => {\n  const size = props.size ?? 'md'\n  const {\n    asChild,\n    className,\n    value,\n    level = 'M',\n    marginSize = 0,\n    fgColor,\n    bgColor,\n    children,\n    ...restProps\n  } = extractProps(props, qrCodePropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const resolvedSize = sizeMap[size] ?? 192\n  const matrix = (\n    <QRCodeSVG\n      value={value}\n      size={resolvedSize}\n      level={level}\n      marginSize={marginSize}\n      fgColor={fgColor ?? 'var(--dsx-color-on-surface)'}\n      bgColor={bgColor ?? 'var(--dsx-color-surface-raised)'}\n    />\n  )\n\n  return (\n    <Comp\n      role=\"img\"\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-qr-code', className)}\n      data-slot=\"qr-code\"\n      data-size={size}\n    >\n      {asChild && React.isValidElement(children)\n        ? React.cloneElement(children, undefined, matrix)\n        : matrix}\n    </Comp>\n  )\n})\nQRCode.displayName = 'QRCode'\n\nexport { QRCode }\nexport type { QRCodeOwnProps, QRCodeProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AACrB,oBAA0B;AAE1B,0BAA6B;AAC7B,oBAA+B;AAoC3B;AAtBJ,MAAM,UAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,SAAS,MAAM,WAAwC,CAAC,OAAO,iBAAiB;AACpF,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,4BAAc;AACtC,QAAM,OAAO,UAAU,yBAAO;AAC9B,QAAM,eAAe,QAAQ,IAAI,KAAK;AACtC,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,SAAS,WAAW;AAAA;AAAA,EACtB;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,eAAe,SAAS;AAAA,MAC9C,aAAU;AAAA,MACV,aAAW;AAAA,MAEV,qBAAW,MAAM,eAAe,QAAQ,IACrC,MAAM,aAAa,UAAU,QAAW,MAAM,IAC9C;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,OAAO,cAAc;",
   "names": ["classNames"]
 }

package/dist/components/qrCode/QrCode.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"QrCode.d.cts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAiCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"QrCode.d.cts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAwCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/qrCode/QrCode.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"QrCode.d.mts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAiCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"QrCode.d.mts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAwCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/qrCode/QrCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QrCode.d.ts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAiCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"QrCode.d.ts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAwCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/qrCode/QrCode.js

@@ -20,29 +20,32 @@ const QRCode = React.forwardRef((props, forwardedRef) => {
     marginSize = 0,
     fgColor,
     bgColor,
+    children,
     ...restProps
   } = extractProps(props, qrCodePropDefs);
   const Comp = asChild ? Slot : "div";
   const resolvedSize = sizeMap[size] ?? 192;
+  const matrix = /* @__PURE__ */ jsx(
+    QRCodeSVG,
+    {
+      value,
+      size: resolvedSize,
+      level,
+      marginSize,
+      fgColor: fgColor ?? "var(--dsx-color-on-surface)",
+      bgColor: bgColor ?? "var(--dsx-color-surface-raised)"
+    }
+  );
   return /* @__PURE__ */ jsx(
     Comp,
     {
+      role: "img",
       ...restProps,
       ref: forwardedRef,
       className: classNames("dsx-qr-code", className),
       "data-slot": "qr-code",
       "data-size": size,
-      children: /* @__PURE__ */ jsx(
-        QRCodeSVG,
-        {
-          value,
-          size: resolvedSize,
-          level,
-          marginSize,
-          fgColor: fgColor ?? "var(--dsx-color-on-surface)",
-          bgColor: bgColor ?? "var(--dsx-color-surface-raised)"
-        }
-      )
+      children: asChild && React.isValidElement(children) ? React.cloneElement(children, void 0, matrix) : matrix
     }
   );
 });

package/dist/components/qrCode/QrCode.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/qrCode/QrCode.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { QRCodeSVG } from 'qrcode.react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { qrCodePropDefs } from './qrCode.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype QRCodeOwnProps = GetPropDefTypes<typeof qrCodePropDefs>\n\ninterface QRCodeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'>, QRCodeOwnProps {\n  value: string\n  level?: 'L' | 'M' | 'Q' | 'H'\n  marginSize?: number\n  fgColor?: string\n  bgColor?: string\n}\n\nconst sizeMap: Record<string, number> = {\n  sm: 128,\n  md: 192,\n  lg: 256,\n}\n\nconst QRCode = React.forwardRef<HTMLDivElement, QRCodeProps>((props, forwardedRef) => {\n  const size = props.size ?? 'md'\n  const {\n    asChild,\n    className,\n    value,\n    level = 'M',\n    marginSize = 0,\n    fgColor,\n    bgColor,\n    ...restProps\n  } = extractProps(props, qrCodePropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const resolvedSize = sizeMap[size] ?? 192\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-qr-code', className)}\n      data-slot=\"qr-code\"\n      data-size={size}\n    >\n      <QRCodeSVG\n        value={value}\n        size={resolvedSize}\n        level={level}\n        marginSize={marginSize}\n        fgColor={fgColor ?? 'var(--dsx-color-on-surface)'}\n        bgColor={bgColor ?? 'var(--dsx-color-surface-raised)'}\n      />\n    </Comp>\n  )\n})\nQRCode.displayName = 'QRCode'\n\nexport { QRCode }\nexport type { QRCodeOwnProps, QRCodeProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AA2CzB;AA7BN,MAAM,UAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,SAAS,MAAM,WAAwC,CAAC,OAAO,iBAAiB;AACpF,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,cAAc;AACtC,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,eAAe,QAAQ,IAAI,KAAK;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,eAAe,SAAS;AAAA,MAC9C,aAAU;AAAA,MACV,aAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,SAAS,WAAW;AAAA;AAAA,MACtB;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,OAAO,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { QRCodeSVG } from 'qrcode.react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { qrCodePropDefs } from './qrCode.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype QRCodeOwnProps = GetPropDefTypes<typeof qrCodePropDefs>\n\ninterface QRCodeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'>, QRCodeOwnProps {\n  value: string\n  level?: 'L' | 'M' | 'Q' | 'H'\n  marginSize?: number\n  fgColor?: string\n  bgColor?: string\n}\n\nconst sizeMap: Record<string, number> = {\n  sm: 128,\n  md: 192,\n  lg: 256,\n}\n\nconst QRCode = React.forwardRef<HTMLDivElement, QRCodeProps>((props, forwardedRef) => {\n  const size = props.size ?? 'md'\n  const {\n    asChild,\n    className,\n    value,\n    level = 'M',\n    marginSize = 0,\n    fgColor,\n    bgColor,\n    children,\n    ...restProps\n  } = extractProps(props, qrCodePropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const resolvedSize = sizeMap[size] ?? 192\n  const matrix = (\n    <QRCodeSVG\n      value={value}\n      size={resolvedSize}\n      level={level}\n      marginSize={marginSize}\n      fgColor={fgColor ?? 'var(--dsx-color-on-surface)'}\n      bgColor={bgColor ?? 'var(--dsx-color-surface-raised)'}\n    />\n  )\n\n  return (\n    <Comp\n      role=\"img\"\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-qr-code', className)}\n      data-slot=\"qr-code\"\n      data-size={size}\n    >\n      {asChild && React.isValidElement(children)\n        ? React.cloneElement(children, undefined, matrix)\n        : matrix}\n    </Comp>\n  )\n})\nQRCode.displayName = 'QRCode'\n\nexport { QRCode }\nexport type { QRCodeOwnProps, QRCodeProps }\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAoC3B;AAtBJ,MAAM,UAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,SAAS,MAAM,WAAwC,CAAC,OAAO,iBAAiB;AACpF,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,cAAc;AACtC,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,eAAe,QAAQ,IAAI,KAAK;AACtC,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,SAAS,WAAW;AAAA;AAAA,EACtB;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,eAAe,SAAS;AAAA,MAC9C,aAAU;AAAA,MACV,aAAW;AAAA,MAEV,qBAAW,MAAM,eAAe,QAAQ,IACrC,MAAM,aAAa,UAAU,QAAW,MAAM,IAC9C;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,OAAO,cAAc;",
   "names": []
 }

package/dist/components/resizable.css

@@ -10,6 +10,8 @@
   display: flex;
   width: 100%;
   height: 100%;
+  min-width: 0;
+  min-height: 0;
 }
 
 .dsx-resizable-group[data-orientation='horizontal'] {
@@ -32,6 +34,7 @@
   align-items: center;
   justify-content: center;
   position: relative;
+  z-index: var(--dsx-z-index-elevated);
   background-color: transparent;
   user-select: none;
   touch-action: none;
@@ -59,7 +62,7 @@
 }
 
 .dsx-resizable-group[data-orientation='horizontal'] > .dsx-resizable-handle {
-  width: var(--dsx-resizable-handle-thickness-active);
+  width: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: col-resize;
 }
 
@@ -69,7 +72,7 @@
 }
 
 .dsx-resizable-group[data-orientation='vertical'] > .dsx-resizable-handle {
-  height: var(--dsx-resizable-handle-thickness-active);
+  height: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: row-resize;
 }
 
@@ -106,7 +109,7 @@
 }
 
 .dsx-resizable-group-direction-horizontal > .dsx-resizable-handle {
-  width: var(--dsx-resizable-handle-thickness-active);
+  width: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: col-resize;
 }
 
@@ -116,7 +119,7 @@
 }
 
 .dsx-resizable-group-direction-vertical > .dsx-resizable-handle {
-  height: var(--dsx-resizable-handle-thickness-active);
+  height: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: row-resize;
 }
 
@@ -134,6 +137,19 @@
   border-radius: var(--dsx-resizable-grip-radius);
 }
 
+.dsx-resizable-handle:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+  z-index: var(--dsx-z-index-elevated);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-resizable-handle,
+  .dsx-resizable-handle::before {
+    transition: none;
+  }
+}
+
 .dsx-resizable-group-direction-horizontal > .dsx-resizable-handle-grip .dsx-resizable-handle__grip {
   width: var(--dsx-space-xs);
   height: var(--dsx-size-xs);

package/dist/components/rich-text-editor.css

@@ -41,11 +41,15 @@
   box-shadow: none;
 }
 
-.dsx-rich-text-editor__toolbar {
+.dsx-rich-text-editor__toolbar.dsx-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--dsx-space-xs);
+  gap: var(--dsx-space-sm) var(--dsx-space-md);
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   background: var(--dsx-color-surface-editor-toolbar);
@@ -56,13 +60,15 @@
 
 .dsx-rich-text-editor__toolbar-group {
   display: inline-flex;
+  flex-wrap: wrap;
+  max-width: 100%;
   min-width: 0;
   align-items: center;
   gap: var(--dsx-space-xs);
-  padding: var(--dsx-space-xs);
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-panel-border-translucent);
+  padding: 0;
+  border: 0;
   border-radius: var(--dsx-rounded-md);
-  background: var(--dsx-effect-gray-alpha-3);
+  background: transparent;
 }
 
 .dsx-rich-text-editor__toolbar-label {
@@ -76,13 +82,14 @@
 }
 
 .dsx-rich-text-editor__toolbar-button {
-  min-height: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
-  min-width: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+  min-height: var(--dsx-density-control-height-lg);
+  min-width: var(--dsx-density-control-height-lg);
   padding-inline: var(--dsx-space-xs);
   white-space: nowrap;
 }
 
-.dsx-rich-text-editor__toolbar-button[data-active='true'] {
+.dsx-rich-text-editor__toolbar-button[data-active='true'],
+.dsx-rich-text-editor__toolbar-button[aria-pressed='true'] {
   background: var(--dsx-color-high-contrast);
   color: var(--dsx-color-on-high-contrast);
 }
@@ -111,6 +118,7 @@
   position: absolute;
   inset-block-start: var(--dsx-space-md);
   inset-inline-start: var(--dsx-space-md);
+  inset-inline-end: var(--dsx-space-md);
   pointer-events: none;
   color: var(--dsx-color-on-surface-variant);
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
@@ -123,6 +131,8 @@
 }
 
 .dsx-rich-text-editor__prosemirror {
+  min-width: 0;
+  overflow-wrap: anywhere;
   min-height: var(--dsx-rich-text-editor-min-height, 220px);
   padding: var(--dsx-space-md);
   outline: none;
@@ -180,7 +190,7 @@
   margin: var(--dsx-space-md) 0;
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   padding-inline-start: var(--dsx-space-lg);
-  border-inline-start: var(--dsx-border-width-lg) solid var(--dsx-color-primary);
+  border-inline-start: var(--dsx-border-width-sm) solid var(--dsx-color-accent-border);
   border-radius: 0 var(--dsx-rounded-md) var(--dsx-rounded-md) 0;
   background: var(--dsx-effect-hover-primary);
   color: var(--dsx-color-on-surface-variant);
@@ -198,9 +208,9 @@
 .dsx-rich-text-editor__prosemirror code {
   border-radius: var(--dsx-rounded-sm);
   padding: var(--dsx-space-0-5) var(--dsx-space-xs);
-  background: var(--dsx-color-background);
-  color: var(--dsx-color-primary-container);
-  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  background: var(--dsx-code-soft-background);
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-code-font-family);
   font-size: 0.92em;
 }
 
@@ -209,8 +219,8 @@
   margin: var(--dsx-space-md) 0;
   padding: var(--dsx-space-md);
   border-radius: var(--dsx-rounded-md);
-  background: var(--dsx-color-background);
-  color: var(--dsx-color-on-background);
+  background: var(--dsx-code-soft-background);
+  color: var(--dsx-color-on-surface);
 }
 
 .dsx-rich-text-editor__prosemirror pre code {
@@ -219,6 +229,19 @@
   color: inherit;
 }
 
+.dsx-rich-text-editor__prosemirror img {
+  max-width: 100%;
+  height: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-rich-text-editor,
+  .dsx-rich-text-editor__toolbar,
+  .dsx-rich-text-editor__area {
+    transition: none;
+  }
+}
+
 .dsx-rich-text-editor__status {
   display: flex;
   align-items: center;
@@ -249,3 +272,16 @@
   background: var(--dsx-color-high-contrast);
   color: var(--dsx-color-on-high-contrast);
 }
+.dsx-rich-text-editor__toolbar-group:empty { display: none; }
+.dsx-editor-tools__popover { display: grid; gap: var(--dsx-space-sm); min-width: 0; width: min(var(--dsx-dialog-content-width-sm), var(--radix-popover-content-available-width)); }
+.dsx-editor-tools__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-sm); }
+.dsx-editor-tools__popover.dsx-editor-tools__link { width: min(var(--dsx-rich-text-editor-link-popover-width), var(--radix-popover-content-available-width)); }
+.dsx-editor-tools__link .dsx-popover__title { font-family: var(--dsx-typography-label-large-font-family), sans-serif; font-size: var(--dsx-typography-label-large-font-size); line-height: var(--dsx-typography-label-large-line-height); }
+.dsx-editor-tools__link .dsx-button { min-height: var(--dsx-size-2xl); }
+.dsx-editor-tools__choices { display: grid; gap: var(--dsx-space-xs); max-height: var(--radix-popover-content-available-height); overflow-y: auto; min-width: 0; }
+.dsx-editor-tools__choices .dsx-button { justify-content: flex-start; text-align: start; white-space: normal; }
+.dsx-editor-tools__choices small { display: block; color: var(--dsx-color-on-surface-variant); overflow-wrap: anywhere; }
+.dsx-editor-token { display: inline; padding: var(--dsx-space-0-5) var(--dsx-space-xs); border: var(--dsx-border-width-sm) solid var(--dsx-color-accent-border); border-radius: var(--dsx-rounded-sm); background: var(--dsx-color-primary-container); color: var(--dsx-color-on-primary-container); white-space: normal; }
+.dsx-editor-token--unknown { border-style: dashed; border-color: var(--dsx-color-error); color: var(--dsx-color-error); background: var(--dsx-color-surface); }
+.dsx-rich-text-editor__prosemirror h4 { font-size: var(--dsx-typography-label-large-font-size); line-height: var(--dsx-typography-label-large-line-height); }
+.dsx-editor-tools__suggestions { display: flex; flex-wrap: wrap; width: 100%; align-items: center; gap: var(--dsx-space-sm); padding: var(--dsx-space-sm); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface-raised); }

package/dist/components/richTextEditor/EditorTools.cjs

@@ -0,0 +1,226 @@
+"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);
+var EditorTools_exports = {};
+__export(EditorTools_exports, {
+  EditorTools: () => EditorTools
+});
+module.exports = __toCommonJS(EditorTools_exports);
+var React = __toESM(require("react"), 1);
+var import_state = require("@tiptap/pm/state");
+var import_Button = require("../button/Button");
+var import_Icon = require("../icon/Icon");
+var import_Toolbar = require("../toolbar/Toolbar");
+var import_DropdownMenu = require("../dropdownMenu/DropdownMenu");
+var import_Popover = require("../popover/Popover");
+var import_TextField = require("../textField/TextField");
+var import_VisuallyHidden = require("../visuallyHidden/VisuallyHidden");
+var import_MentionSuggestions = require("./MentionSuggestions");
+var import_jsx_runtime = require("react/jsx-runtime");
+const defaults = ["style", "bold", "italic", "strike", "code", "bulletList", "orderedList", "blockquote", "codeBlock", "link", "clear", "history"];
+function Control({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Toolbar.Toolbar.Button, { asChild: true, disabled: props.disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "sm", variant: "ghost", className: "dsx-rich-text-editor__toolbar-button", ...props, children }) });
+}
+function TokenPicker({ editor, disabled, records, kind }) {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [active, setActive] = React.useState(0);
+  const listId = React.useId();
+  const matches = records.filter((record) => `${record.label} ${"key" in record ? record.key : record.id}`.toLowerCase().includes(query.toLowerCase()));
+  const insert = (index) => {
+    const record = matches[index];
+    if (!record) return;
+    editor.chain().focus().insertContent({ type: kind === "variable" ? "dsxVariable" : "dsxMention", attrs: "key" in record ? { key: record.key } : { userId: record.id } }).run();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Popover.Popover, { open, onOpenChange: (next) => {
+    setOpen(next);
+    setQuery("");
+    setActive(0);
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Control, { disabled, children: kind === "variable" ? "Variable" : "Mention" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Popover.Popover.Content, { className: "dsx-editor-tools__popover", align: "start", onCloseAutoFocus: (event) => {
+      event.preventDefault();
+      editor.commands.focus();
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Title, { children: kind === "variable" ? "Insert variable" : "Mention someone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Description, { children: kind === "variable" ? "Insert a key. Its value is resolved by your application." : "Select a person to insert their stable identity." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.TextField, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.TextField.Input, { "aria-label": kind === "variable" ? "Search variables" : "Search people", role: "combobox", "aria-expanded": "true", "aria-controls": listId, "aria-activedescendant": matches.length ? `${listId}-${active}` : void 0, value: query, onChange: (event) => {
+        setQuery(event.target.value);
+        setActive(0);
+      }, onKeyDown: (event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          setActive((index) => Math.max(0, Math.min(matches.length - 1, index + (event.key === "ArrowDown" ? 1 : -1))));
+        }
+        if (event.key === "Enter") {
+          event.preventDefault();
+          insert(active);
+        }
+      } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: listId, role: "listbox", "aria-label": kind === "variable" ? "Variables" : "People", className: "dsx-editor-tools__choices", children: [
+        matches.map((record, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { id: `${listId}-${index}`, role: "option", "aria-selected": active === index, type: "button", variant: active === index ? "secondary" : "ghost", size: "lg", onClick: () => insert(index), onPointerMove: () => setActive(index), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          record.label,
+          "sensitive" in record && record.sensitive ? " \xB7 Sensitive" : "",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: "key" in record ? record.key : record.id })
+        ] }) }, "key" in record ? record.key : record.id)),
+        !matches.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "status", children: "No matches" }) : null
+      ] })
+    ] })
+  ] });
+}
+function LinkControl({ editor, disabled }) {
+  const [open, setOpen] = React.useState(false);
+  const [url, setUrl] = React.useState("");
+  const [error, setError] = React.useState("");
+  const urlId = React.useId();
+  const selection = React.useRef({ from: 1, to: 1 });
+  const save = () => {
+    let href;
+    try {
+      const parsed = new URL(url);
+      if (!["https:", "http:", "mailto:", "tel:"].includes(parsed.protocol)) throw new Error();
+      href = parsed.href;
+    } catch {
+      setError("Enter a valid https, http, mailto or tel URL.");
+      return;
+    }
+    const chain = editor.chain().focus().setTextSelection(selection.current);
+    if (selection.current.from === selection.current.to && !editor.isActive("link")) chain.insertContent({ type: "text", text: href, marks: [{ type: "link", attrs: { href } }] }).run();
+    else chain.extendMarkRange("link").setLink({ href }).run();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Popover.Popover, { open, onOpenChange: (next) => {
+    if (next) {
+      selection.current = { from: editor.state.selection.from, to: editor.state.selection.to };
+      setUrl(editor.getAttributes("link").href ?? "");
+      setError("");
+    }
+    ;
+    setOpen(next);
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Control, { disabled, "aria-label": "Link", "aria-pressed": editor.isActive("link"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "link", size: "sm" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Popover.Popover.Content, { className: "dsx-editor-tools__popover dsx-editor-tools__link", align: "start", onCloseAutoFocus: (event) => {
+      event.preventDefault();
+      editor.commands.focus();
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Title, { children: "Edit link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Description, { children: "Link the selected text or insert a URL at the caret." }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.TextField, { id: urlId, label: "URL", errorText: error || void 0, invalid: Boolean(error), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.TextField.Input, { value: url, onChange: (event) => {
+        setUrl(event.target.value);
+        setError("");
+      }, onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          save();
+        }
+      } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-editor-tools__actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "md", onClick: save, children: "Save link" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "md", variant: "outline", disabled: !editor.isActive("link"), onClick: () => {
+          editor.chain().focus().setTextSelection(selection.current).extendMarkRange("link").unsetLink().run();
+          setOpen(false);
+        }, children: "Remove link" })
+      ] })
+    ] })
+  ] });
+}
+function EditorTools({ editor, disabled, tools = defaults, headingLevels, insertItems = [], variables = [], mentions = [] }) {
+  const [, refresh] = React.useReducer((value) => value + 1, 0);
+  React.useEffect(() => {
+    if (!editor) return;
+    editor.on("transaction", refresh);
+    return () => {
+      editor.off("transaction", refresh);
+    };
+  }, [editor]);
+  const available = (tool, name) => tools.includes(tool) && (!name || Boolean(editor?.schema.nodes[name] || editor?.schema.marks[name]));
+  const levels = headingLevels ?? editor?.extensionManager.extensions.find((extension) => extension.name === "heading")?.options.levels ?? [1, 2, 3];
+  const format = (label, icon, name, run) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Control, { disabled, "aria-label": label, "aria-pressed": editor?.isActive(name), onMouseDown: (event) => event.preventDefault(), onClick: run, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: icon, size: "sm" }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    available("style") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "Block style", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Control, { disabled, children: [
+        "Text style ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "chevron-down", size: "sm" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu.Content, { onCloseAutoFocus: (event) => {
+        event.preventDefault();
+        editor?.commands.focus();
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Item, { onSelect: () => editor?.chain().focus().setParagraph().run(), children: "Paragraph" }),
+        editor?.schema.nodes.heading ? levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu.Item, { onSelect: () => editor.chain().focus().toggleHeading({ level }).run(), children: [
+          "Heading ",
+          level
+        ] }, level)) : null,
+        available("blockquote", "blockquote") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Item, { onSelect: () => editor?.chain().focus().toggleBlockquote().run(), children: "Quote block" }) : null,
+        available("codeBlock", "codeBlock") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Item, { onSelect: () => editor?.chain().focus().toggleCodeBlock().run(), children: "Code block" }) : null
+      ] })
+    ] }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "Text style", children: [
+      available("bold", "bold") ? format("Bold", "bold", "bold", () => editor?.chain().focus().toggleBold().run()) : null,
+      available("italic", "italic") ? format("Italic", "italic", "italic", () => editor?.chain().focus().toggleItalic().run()) : null,
+      available("strike", "strike") ? format("Strikethrough", "strikethrough", "strike", () => editor?.chain().focus().toggleStrike().run()) : null,
+      available("code", "code") ? format("Inline code", "code", "code", () => editor?.chain().focus().toggleCode().run()) : null,
+      available("bulletList", "bulletList") ? format("Bulleted list", "list", "bulletList", () => editor?.chain().focus().toggleBulletList().run()) : null,
+      available("orderedList", "orderedList") ? format("Numbered list", "list-ordered", "orderedList", () => editor?.chain().focus().toggleOrderedList().run()) : null
+    ] }),
+    editor ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "Insert", children: [
+      available("link", "link") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkControl, { editor, disabled }) : null,
+      insertItems.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Control, { disabled, children: [
+          "Insert ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "plus", size: "sm" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Content, { onCloseAutoFocus: (event) => {
+          event.preventDefault();
+          editor.commands.focus();
+        }, children: insertItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Item, { onSelect: () => {
+          if (editor.state.selection instanceof import_state.NodeSelection) editor.commands.command(({ tr }) => {
+            const paragraph = editor.schema.nodes.paragraph;
+            if (!paragraph) return false;
+            let point = tr.doc.resolve(tr.selection.to);
+            while (point.depth > 0 && !point.parent.canReplaceWith(point.index(), point.index(), paragraph)) point = tr.doc.resolve(point.after());
+            tr.insert(point.pos, paragraph.create());
+            tr.setSelection(import_state.TextSelection.create(tr.doc, point.pos + 1));
+            return true;
+          });
+          item.insert(editor);
+        }, children: item.label }, item.id)) })
+      ] }) : null,
+      variables.length && editor.schema.nodes.dsxVariable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenPicker, { editor, disabled, kind: "variable", records: variables }) : null,
+      mentions.length && editor.schema.nodes.dsxMention ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenPicker, { editor, disabled, kind: "mention", records: mentions }) : null,
+      available("clear") ? format("Clear formatting", "eraser", "", () => editor.chain().focus().clearNodes().unsetAllMarks().run()) : null
+    ] }) : null,
+    available("history") ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "History", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Control, { disabled: disabled || !editor?.can().undo(), "aria-label": "Undo", onMouseDown: (event) => event.preventDefault(), onClick: () => editor?.chain().focus().undo().run(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "undo", size: "sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Control, { disabled: disabled || !editor?.can().redo(), "aria-label": "Redo", onMouseDown: (event) => event.preventDefault(), onClick: () => editor?.chain().focus().redo().run(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "redo", size: "sm" }) })
+    ] }) : null,
+    editor && mentions.length && editor.schema.nodes.dsxMention ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MentionSuggestions.MentionSuggestions, { editor, mentions }) : null
+  ] });
+}
+//# sourceMappingURL=EditorTools.cjs.map

package/dist/components/richTextEditor/EditorTools.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/richTextEditor/EditorTools.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { NodeSelection, TextSelection } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/react'\ntype Level = 1 | 2 | 3 | 4 | 5 | 6\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Toolbar } from '../toolbar/Toolbar'\nimport { DropdownMenu } from '../dropdownMenu/DropdownMenu'\nimport { Popover } from '../popover/Popover'\nimport { TextField } from '../textField/TextField'\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\nimport { MentionSuggestions } from './MentionSuggestions'\nimport type { EditorVariable, EditorMention } from './editorTokens'\n\nexport type EditorTool = 'style' | 'bold' | 'italic' | 'strike' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'link' | 'clear' | 'history'\nexport interface EditorInsertItem { id: string; label: string; insert: (editor: Editor) => void }\nexport interface EditorToolsOptions {\n  tools?: readonly EditorTool[]\n  headingLevels?: readonly Level[]\n  insertItems?: readonly EditorInsertItem[]\n  variables?: readonly EditorVariable[]\n  mentions?: readonly EditorMention[]\n}\nconst defaults: EditorTool[] = ['style', 'bold', 'italic', 'strike', 'code', 'bulletList', 'orderedList', 'blockquote', 'codeBlock', 'link', 'clear', 'history']\nfunction Control({ children, ...props }: React.ComponentProps<typeof Button>) {\n  return <Toolbar.Button asChild disabled={props.disabled}><Button type=\"button\" size=\"sm\" variant=\"ghost\" className=\"dsx-rich-text-editor__toolbar-button\" {...props}>{children}</Button></Toolbar.Button>\n}\nfunction TokenPicker({ editor, disabled, records, kind }: { editor: Editor; disabled: boolean; records: readonly (EditorVariable | EditorMention)[]; kind: 'variable' | 'mention' }) {\n  const [open, setOpen] = React.useState(false)\n  const [query, setQuery] = React.useState('')\n  const [active, setActive] = React.useState(0)\n  const listId = React.useId()\n  const matches = records.filter(record => `${record.label} ${'key' in record ? record.key : record.id}`.toLowerCase().includes(query.toLowerCase()))\n  const insert = (index: number) => {\n    const record = matches[index]\n    if (!record) return\n    editor.chain().focus().insertContent({ type: kind === 'variable' ? 'dsxVariable' : 'dsxMention', attrs: 'key' in record ? { key: record.key } : { userId: record.id } }).run()\n    setOpen(false)\n  }\n  return <Popover open={open} onOpenChange={next => { setOpen(next); setQuery(''); setActive(0) }}>\n    <Popover.Trigger asChild><Control disabled={disabled}>{kind === 'variable' ? 'Variable' : 'Mention'}</Control></Popover.Trigger>\n    <Popover.Content className=\"dsx-editor-tools__popover\" align=\"start\" onCloseAutoFocus={event => { event.preventDefault(); editor.commands.focus() }}>\n      <Popover.Title>{kind === 'variable' ? 'Insert variable' : 'Mention someone'}</Popover.Title>\n      <Popover.Description>{kind === 'variable' ? 'Insert a key. Its value is resolved by your application.' : 'Select a person to insert their stable identity.'}</Popover.Description>\n      <TextField><TextField.Input aria-label={kind === 'variable' ? 'Search variables' : 'Search people'} role=\"combobox\" aria-expanded=\"true\" aria-controls={listId} aria-activedescendant={matches.length ? `${listId}-${active}` : undefined} value={query} onChange={event => { setQuery(event.target.value); setActive(0) }} onKeyDown={event => {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); setActive(index => Math.max(0, Math.min(matches.length - 1, index + (event.key === 'ArrowDown' ? 1 : -1)))) }\n        if (event.key === 'Enter') { event.preventDefault(); insert(active) }\n      }} /></TextField>\n      <div id={listId} role=\"listbox\" aria-label={kind === 'variable' ? 'Variables' : 'People'} className=\"dsx-editor-tools__choices\">\n        {matches.map((record, index) => <Button id={`${listId}-${index}`} key={'key' in record ? record.key : record.id} role=\"option\" aria-selected={active === index} type=\"button\" variant={active === index ? 'secondary' : 'ghost'} size=\"lg\" onClick={() => insert(index)} onPointerMove={() => setActive(index)}>\n          <span>{record.label}{'sensitive' in record && record.sensitive ? ' \u00B7 Sensitive' : ''}<small>{'key' in record ? record.key : record.id}</small></span>\n        </Button>)}\n        {!matches.length ? <span role=\"status\">No matches</span> : null}\n      </div>\n    </Popover.Content>\n  </Popover>\n}\nfunction LinkControl({ editor, disabled }: { editor: Editor; disabled: boolean }) {\n  const [open, setOpen] = React.useState(false)\n  const [url, setUrl] = React.useState('')\n  const [error, setError] = React.useState('')\n  const urlId = React.useId()\n  const selection = React.useRef({ from: 1, to: 1 })\n  const save = () => {\n    let href: string\n    try { const parsed = new URL(url); if (!['https:', 'http:', 'mailto:', 'tel:'].includes(parsed.protocol)) throw new Error(); href = parsed.href } catch { setError('Enter a valid https, http, mailto or tel URL.'); return }\n    const chain = editor.chain().focus().setTextSelection(selection.current)\n    if (selection.current.from === selection.current.to && !editor.isActive('link')) chain.insertContent({ type: 'text', text: href, marks: [{ type: 'link', attrs: { href } }] }).run()\n    else chain.extendMarkRange('link').setLink({ href }).run()\n    setOpen(false)\n  }\n  return <Popover open={open} onOpenChange={next => { if (next) { selection.current = { from: editor.state.selection.from, to: editor.state.selection.to }; setUrl(editor.getAttributes('link').href ?? ''); setError('') }; setOpen(next) }}>\n    <Popover.Trigger asChild><Control disabled={disabled} aria-label=\"Link\" aria-pressed={editor.isActive('link')}><Icon name=\"link\" size=\"sm\" /></Control></Popover.Trigger>\n    <Popover.Content className=\"dsx-editor-tools__popover dsx-editor-tools__link\" align=\"start\" onCloseAutoFocus={event => { event.preventDefault(); editor.commands.focus() }}>\n      <Popover.Title>Edit link</Popover.Title><VisuallyHidden asChild><Popover.Description>Link the selected text or insert a URL at the caret.</Popover.Description></VisuallyHidden>\n      <TextField id={urlId} label=\"URL\" errorText={error || undefined} invalid={Boolean(error)}><TextField.Input value={url} onChange={event => { setUrl(event.target.value); setError('') }} onKeyDown={event => { if (event.key === 'Enter') { event.preventDefault(); save() } }} /></TextField>\n      <div className=\"dsx-editor-tools__actions\"><Button type=\"button\" size=\"md\" onClick={save}>Save link</Button><Button type=\"button\" size=\"md\" variant=\"outline\" disabled={!editor.isActive('link')} onClick={() => { editor.chain().focus().setTextSelection(selection.current).extendMarkRange('link').unsetLink().run(); setOpen(false) }}>Remove link</Button></div>\n    </Popover.Content>\n  </Popover>\n}\nexport function EditorTools({ editor, disabled, tools = defaults, headingLevels, insertItems = [], variables = [], mentions = [] }: EditorToolsOptions & { editor: Editor | null; disabled: boolean }) {\n  const [, refresh] = React.useReducer(value => value + 1, 0)\n  React.useEffect(() => { if (!editor) return; editor.on('transaction', refresh); return () => { editor.off('transaction', refresh) } }, [editor])\n  const available = (tool: EditorTool, name?: string) => tools.includes(tool) && (!name || Boolean(editor?.schema.nodes[name] || editor?.schema.marks[name]))\n  const levels = headingLevels ?? editor?.extensionManager.extensions.find(extension => extension.name === 'heading')?.options.levels ?? [1, 2, 3]\n  const format = (label: string, icon: React.ComponentProps<typeof Icon>['name'], name: string, run: () => void) => <Control key={name} disabled={disabled} aria-label={label} aria-pressed={editor?.isActive(name)} onMouseDown={event => event.preventDefault()} onClick={run}><Icon name={icon} size=\"sm\" /></Control>\n  return <>\n    {available('style') ? <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"Block style\"><DropdownMenu><DropdownMenu.Trigger asChild><Control disabled={disabled}>Text style <Icon name=\"chevron-down\" size=\"sm\" /></Control></DropdownMenu.Trigger><DropdownMenu.Content onCloseAutoFocus={event => { event.preventDefault(); editor?.commands.focus() }}>\n      <DropdownMenu.Item onSelect={() => editor?.chain().focus().setParagraph().run()}>Paragraph</DropdownMenu.Item>\n      {editor?.schema.nodes.heading ? (levels as Level[]).map(level => <DropdownMenu.Item key={level} onSelect={() => editor.chain().focus().toggleHeading({ level }).run()}>Heading {level}</DropdownMenu.Item>) : null}\n      {available('blockquote', 'blockquote') ? <DropdownMenu.Item onSelect={() => editor?.chain().focus().toggleBlockquote().run()}>Quote block</DropdownMenu.Item> : null}\n      {available('codeBlock', 'codeBlock') ? <DropdownMenu.Item onSelect={() => editor?.chain().focus().toggleCodeBlock().run()}>Code block</DropdownMenu.Item> : null}\n    </DropdownMenu.Content></DropdownMenu></div> : null}\n    <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"Text style\">\n      {available('bold', 'bold') ? format('Bold', 'bold', 'bold', () => editor?.chain().focus().toggleBold().run()) : null}\n      {available('italic', 'italic') ? format('Italic', 'italic', 'italic', () => editor?.chain().focus().toggleItalic().run()) : null}\n      {available('strike', 'strike') ? format('Strikethrough', 'strikethrough', 'strike', () => editor?.chain().focus().toggleStrike().run()) : null}\n      {available('code', 'code') ? format('Inline code', 'code', 'code', () => editor?.chain().focus().toggleCode().run()) : null}\n      {available('bulletList', 'bulletList') ? format('Bulleted list', 'list', 'bulletList', () => editor?.chain().focus().toggleBulletList().run()) : null}\n      {available('orderedList', 'orderedList') ? format('Numbered list', 'list-ordered', 'orderedList', () => editor?.chain().focus().toggleOrderedList().run()) : null}\n    </div>\n    {editor ? <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"Insert\">\n      {available('link', 'link') ? <LinkControl editor={editor} disabled={disabled} /> : null}\n      {insertItems.length ? <DropdownMenu><DropdownMenu.Trigger asChild><Control disabled={disabled}>Insert <Icon name=\"plus\" size=\"sm\" /></Control></DropdownMenu.Trigger><DropdownMenu.Content onCloseAutoFocus={event => { event.preventDefault(); editor.commands.focus() }}>{insertItems.map(item => <DropdownMenu.Item key={item.id} onSelect={() => {\n        if (editor.state.selection instanceof NodeSelection) editor.commands.command(({ tr }) => {\n          const paragraph = editor.schema.nodes.paragraph\n          if (!paragraph) return false\n          let point = tr.doc.resolve(tr.selection.to)\n          while (point.depth > 0 && !point.parent.canReplaceWith(point.index(), point.index(), paragraph)) point = tr.doc.resolve(point.after())\n          tr.insert(point.pos, paragraph.create())\n          tr.setSelection(TextSelection.create(tr.doc, point.pos + 1))\n          return true\n        })\n        item.insert(editor)\n      }}>{item.label}</DropdownMenu.Item>)}</DropdownMenu.Content></DropdownMenu> : null}\n      {variables.length && editor.schema.nodes.dsxVariable ? <TokenPicker editor={editor} disabled={disabled} kind=\"variable\" records={variables} /> : null}\n      {mentions.length && editor.schema.nodes.dsxMention ? <TokenPicker editor={editor} disabled={disabled} kind=\"mention\" records={mentions} /> : null}\n      {available('clear') ? format('Clear formatting', 'eraser', '', () => editor.chain().focus().clearNodes().unsetAllMarks().run()) : null}\n    </div> : null}\n    {available('history') ? <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"History\"><Control disabled={disabled || !editor?.can().undo()} aria-label=\"Undo\" onMouseDown={event => event.preventDefault()} onClick={() => editor?.chain().focus().undo().run()}><Icon name=\"undo\" size=\"sm\" /></Control><Control disabled={disabled || !editor?.can().redo()} aria-label=\"Redo\" onMouseDown={event => event.preventDefault()} onClick={() => editor?.chain().focus().redo().run()}><Icon name=\"redo\" size=\"sm\" /></Control></div> : null}\n    {editor && mentions.length && editor.schema.nodes.dsxMention ? <MentionSuggestions editor={editor} mentions={mentions} /> : null}\n  </>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/richTextEditor/EditorTools.d.cts

@@ -0,0 +1,22 @@
+import type { Editor } from '@tiptap/react';
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+import type { EditorVariable, EditorMention } from './editorTokens.cjs';
+export type EditorTool = 'style' | 'bold' | 'italic' | 'strike' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'link' | 'clear' | 'history';
+export interface EditorInsertItem {
+    id: string;
+    label: string;
+    insert: (editor: Editor) => void;
+}
+export interface EditorToolsOptions {
+    tools?: readonly EditorTool[];
+    headingLevels?: readonly Level[];
+    insertItems?: readonly EditorInsertItem[];
+    variables?: readonly EditorVariable[];
+    mentions?: readonly EditorMention[];
+}
+export declare function EditorTools({ editor, disabled, tools, headingLevels, insertItems, variables, mentions }: EditorToolsOptions & {
+    editor: Editor | null;
+    disabled: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditorTools.d.cts.map