@plexui/ui 0.19.0 → 0.20.0

package/dist/es/components/Image/Image.js

@@ -2,21 +2,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useState } from "react";
-import s from "./Image.module.css";
+import { mergeRefs } from "react-merge-refs";
+import s from "@plexui/styles/components/Image/Image.module.css";
 const loadedSrcs = new Set();
-export const Image = ({ src, className, draggable = false, onLoad, onError, forceRenderAfterLoadFail = false, ...restProps }) => {
-    const [loaded, setLoaded] = useState(() => src && loadedSrcs.has(src));
-    const [failed, setFailed] = useState(false);
+export const Image = ({ src, className, draggable = false, onLoad, onError, forceRenderAfterLoadFail = false, ref, ...restProps }) => {
+    // Track load/fail per src so a new src starts fresh after an error
+    const [loadedSrc, setLoadedSrc] = useState();
+    const [failedSrc, setFailedSrc] = useState();
+    const loaded = !!src && (loadedSrc === src || loadedSrcs.has(src));
+    const failed = !!src && failedSrc === src;
     const considerLoaded = loaded || (failed && forceRenderAfterLoadFail);
+    // An image that loaded before hydration fired its load event before React
+    // listened for it, and React does not replay it: read the element instead
+    const markLoadedIfComplete = (img) => {
+        if (img && src && !loaded && img.complete && img.naturalWidth > 0) {
+            setLoadedSrc(src);
+            loadedSrcs.add(src);
+        }
+    };
     if (!src || (!forceRenderAfterLoadFail && failed)) {
         return null;
     }
-    return (_jsx("img", { ...restProps, src: src, className: clsx(s.Image, className), onLoad: (evt) => {
-            setLoaded(true);
+    return (_jsx("img", { ...restProps, ref: mergeRefs([ref, markLoadedIfComplete]), src: src, className: clsx(s.Image, className), onLoad: (evt) => {
+            setLoadedSrc(src);
             loadedSrcs.add(src);
             onLoad?.(evt);
         }, onError: (evt) => {
-            setFailed(true);
+            setFailedSrc(src);
             onError?.(evt);
         }, "data-loaded": considerLoaded ? "" : undefined, draggable: draggable }));
 };

package/dist/es/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAuB,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,CAAC,MAAM,oBAAoB,CAAA;AAElC,MAAM,UAAU,GAAG,IAAI,GAAG,EAAU,CAAA;AAEpC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,GAAG,EACH,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,OAAO,EACP,wBAAwB,GAAG,KAAK,EAChC,GAAG,SAAS,EAIb,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,MAAM,IAAI,wBAAwB,CAAC,CAAA;IAErE,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,wBAAwB,IAAI,MAAM,CAAC,EAAE,CAAC;QAClD,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,iBACM,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,EACnC,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE;YACd,SAAS,CAAC,IAAI,CAAC,CAAA;YACf,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;YACnB,MAAM,EAAE,CAAC,GAAG,CAAC,CAAA;QACf,CAAC,EACD,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;YACf,SAAS,CAAC,IAAI,CAAC,CAAA;YACf,OAAO,EAAE,CAAC,GAAG,CAAC,CAAA;QAChB,CAAC,iBACY,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps, useState } from \"react\"\nimport s from \"./Image.module.css\"\n\nconst loadedSrcs = new Set<string>()\n\nexport const Image = ({\n  src,\n  className,\n  draggable = false,\n  onLoad,\n  onError,\n  forceRenderAfterLoadFail = false,\n  ...restProps\n}: ComponentProps<\"img\"> & {\n  /** Force the image tag to be placed in the DOM even if load failed (resulting in broken image display) */\n  forceRenderAfterLoadFail?: boolean\n}) => {\n  const [loaded, setLoaded] = useState(() => src && loadedSrcs.has(src))\n  const [failed, setFailed] = useState(false)\n  const considerLoaded = loaded || (failed && forceRenderAfterLoadFail)\n\n  if (!src || (!forceRenderAfterLoadFail && failed)) {\n    return null\n  }\n\n  return (\n    <img\n      {...restProps}\n      src={src}\n      className={clsx(s.Image, className)}\n      onLoad={(evt) => {\n        setLoaded(true)\n        loadedSrcs.add(src)\n        onLoad?.(evt)\n      }}\n      onError={(evt) => {\n        setFailed(true)\n        onError?.(evt)\n      }}\n      data-loaded={considerLoaded ? \"\" : undefined}\n      draggable={draggable}\n    />\n  )\n}\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAuB,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,CAAC,MAAM,kDAAkD,CAAA;AAEhE,MAAM,UAAU,GAAG,IAAI,GAAG,EAAU,CAAA;AAEpC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,GAAG,EACH,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,OAAO,EACP,wBAAwB,GAAG,KAAK,EAChC,GAAG,EACH,GAAG,SAAS,EAIb,EAAE,EAAE;IACH,mEAAmE;IACnE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAU,CAAA;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAU,CAAA;IACpD,MAAM,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,GAAG,IAAI,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;IAClE,MAAM,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,SAAS,KAAK,GAAG,CAAA;IACzC,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,MAAM,IAAI,wBAAwB,CAAC,CAAA;IAErE,0EAA0E;IAC1E,0EAA0E;IAC1E,MAAM,oBAAoB,GAAG,CAAC,GAA4B,EAAE,EAAE;QAC5D,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;YAClE,YAAY,CAAC,GAAG,CAAC,CAAA;YACjB,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QACrB,CAAC;IACH,CAAC,CAAA;IAED,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,wBAAwB,IAAI,MAAM,CAAC,EAAE,CAAC;QAClD,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,iBACM,SAAS,EACb,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,oBAAoB,CAAC,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,EACnC,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE;YACd,YAAY,CAAC,GAAG,CAAC,CAAA;YACjB,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;YACnB,MAAM,EAAE,CAAC,GAAG,CAAC,CAAA;QACf,CAAC,EACD,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;YACf,YAAY,CAAC,GAAG,CAAC,CAAA;YACjB,OAAO,EAAE,CAAC,GAAG,CAAC,CAAA;QAChB,CAAC,iBACY,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport s from \"@plexui/styles/components/Image/Image.module.css\"\n\nconst loadedSrcs = new Set<string>()\n\nexport const Image = ({\n  src,\n  className,\n  draggable = false,\n  onLoad,\n  onError,\n  forceRenderAfterLoadFail = false,\n  ref,\n  ...restProps\n}: ComponentProps<\"img\"> & {\n  /** Force the image tag to be placed in the DOM even if load failed (resulting in broken image display) */\n  forceRenderAfterLoadFail?: boolean\n}) => {\n  // Track load/fail per src so a new src starts fresh after an error\n  const [loadedSrc, setLoadedSrc] = useState<string>()\n  const [failedSrc, setFailedSrc] = useState<string>()\n  const loaded = !!src && (loadedSrc === src || loadedSrcs.has(src))\n  const failed = !!src && failedSrc === src\n  const considerLoaded = loaded || (failed && forceRenderAfterLoadFail)\n\n  // An image that loaded before hydration fired its load event before React\n  // listened for it, and React does not replay it: read the element instead\n  const markLoadedIfComplete = (img: HTMLImageElement | null) => {\n    if (img && src && !loaded && img.complete && img.naturalWidth > 0) {\n      setLoadedSrc(src)\n      loadedSrcs.add(src)\n    }\n  }\n\n  if (!src || (!forceRenderAfterLoadFail && failed)) {\n    return null\n  }\n\n  return (\n    <img\n      {...restProps}\n      ref={mergeRefs([ref, markLoadedIfComplete])}\n      src={src}\n      className={clsx(s.Image, className)}\n      onLoad={(evt) => {\n        setLoadedSrc(src)\n        loadedSrcs.add(src)\n        onLoad?.(evt)\n      }}\n      onError={(evt) => {\n        setFailedSrc(src)\n        onError?.(evt)\n      }}\n      data-loaded={considerLoaded ? \"\" : undefined}\n      draggable={draggable}\n    />\n  )\n}\n"]}

package/dist/es/components/Image/index.js

@@ -1,2 +1,2 @@
-export { Image } from "./Image";
+export { Image } from "./Image.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Indicator/CircularProgress.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useState } from "react";
-import { useSimulatedProgress } from "../../hooks/useSimulatedProgress";
-import { toCssVariables } from "../../lib/helpers";
-import s from "./CircularProgress.module.css";
+import { useSimulatedProgress } from "../../hooks/useSimulatedProgress.js";
+import { toCssVariables } from "../../lib/helpers.js";
+import s from "@plexui/styles/components/Indicator/CircularProgress.module.css";
 export const CircularProgress = ({ maxDuration = 15000, // 15 seconds
 done = false, className, progress: propProgress, size, strokeWidth, trackActiveColor, trackColor, style, ...restProps }) => {
     const [currentTime] = useState(new Date());

package/dist/es/components/Indicator/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","sourceRoot":"","sources":["../../../../src/components/Indicator/CircularProgress.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAuB,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,CAAC,MAAM,+BAA+B,CAAA;AAgC7C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,WAAW,GAAG,KAAK,EAAE,aAAa;AAClC,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,KAAK,EACL,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;IAC1C,MAAM,qBAAqB,GAAG,YAAY,KAAK,SAAS,IAAI,IAAI,CAAA;IAChE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,CAAC,WAAW,EAAE,WAAW,EAAE,qBAAqB,CAAC,CAAA;IAChG,MAAM,QAAQ,GAAG,YAAY,IAAI,iBAAiB,CAAA;IAElD,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,EACvC,KAAK,EACH,KAAK;YACL,cAAc,CAAC;gBACb,wBAAwB,EAAE,IAAI;gBAC9B,0BAA0B,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS;gBAC9E,sCAAsC,EAAE,gBAAgB;gBACxD,+BAA+B,EAAE,UAAU;aAC5C,CAAC,aAGJ,cAAK,OAAO,EAAC,WAAW,EAAC,SAAS,EAAE,CAAC,CAAC,KAAK,sCACzC,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,GAAG,GACxC,EACN,cACE,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,CAAC,CAAC,aAAa,EAC1B,KAAK,EAAE;oBACL,gBAAgB,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC;iBAC7C,sCAGD,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,GAAG,GACxC,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useState, type ComponentProps } from \"react\"\nimport { useSimulatedProgress } from \"../../hooks/useSimulatedProgress\"\n\nimport { toCssVariables } from \"../../lib/helpers\"\nimport s from \"./CircularProgress.module.css\"\n\nexport type CircularProgressProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n  /**\n   * Maximum duration to use for simulated upload progress in ms\n   * @default 15000\n   */\n  maxDuration?: number\n  /**\n   * Sets the progress to full and resolves the simulated timer\n   * @default false\n   */\n  done?: boolean\n  /**\n   * Sets the progress to full and resolves the simulated timer\n   * @default false\n   */\n  progress?: number\n  /** Size of the indicator, in pixels\n   * @default 28px\n   */\n  size?: number | string\n  /** Stroke width of the indicator, in pixels, between 1 and 4\n   * @default 2\n   */\n  strokeWidth?: number\n  /** Color of the active progress track (stroke) */\n  trackActiveColor?: string\n  /** Color of the base track (background stroke) */\n  trackColor?: string\n}\n\nexport const CircularProgress = ({\n  maxDuration = 15000, // 15 seconds\n  done = false,\n  className,\n  progress: propProgress,\n  size,\n  strokeWidth,\n  trackActiveColor,\n  trackColor,\n  style,\n  ...restProps\n}: CircularProgressProps) => {\n  const [currentTime] = useState(new Date())\n  const simulatedProgressDone = propProgress !== undefined || done\n  const simulatedProgress = useSimulatedProgress(+currentTime, maxDuration, simulatedProgressDone)\n  const progress = propProgress ?? simulatedProgress\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(s.Container, className)}\n      style={\n        style ||\n        toCssVariables({\n          \"circular-progress-size\": size,\n          \"circular-progress-stroke\": strokeWidth ? Math.min(4, strokeWidth) : undefined,\n          \"circular-progress-track-active-color\": trackActiveColor,\n          \"circular-progress-track-color\": trackColor,\n        })\n      }\n    >\n      <svg viewBox=\"0 0 20 20\" className={s.Track} data-no-autosize>\n        <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" />\n      </svg>\n      <svg\n        viewBox=\"0 0 20 20\"\n        className={s.TrackProgress}\n        style={{\n          strokeDashoffset: 50 - 50 * (progress / 100),\n        }}\n        data-no-autosize\n      >\n        <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" />\n      </svg>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"CircularProgress.js","sourceRoot":"","sources":["../../../../src/components/Indicator/CircularProgress.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAuB,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,CAAC,MAAM,iEAAiE,CAAA;AAgC/E,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,WAAW,GAAG,KAAK,EAAE,aAAa;AAClC,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,KAAK,EACL,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;IAC1C,MAAM,qBAAqB,GAAG,YAAY,KAAK,SAAS,IAAI,IAAI,CAAA;IAChE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,CAAC,WAAW,EAAE,WAAW,EAAE,qBAAqB,CAAC,CAAA;IAChG,MAAM,QAAQ,GAAG,YAAY,IAAI,iBAAiB,CAAA;IAElD,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,EACvC,KAAK,EACH,KAAK;YACL,cAAc,CAAC;gBACb,wBAAwB,EAAE,IAAI;gBAC9B,0BAA0B,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS;gBAC9E,sCAAsC,EAAE,gBAAgB;gBACxD,+BAA+B,EAAE,UAAU;aAC5C,CAAC,aAGJ,cAAK,OAAO,EAAC,WAAW,EAAC,SAAS,EAAE,CAAC,CAAC,KAAK,sCACzC,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,GAAG,GACxC,EACN,cACE,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,CAAC,CAAC,aAAa,EAC1B,KAAK,EAAE;oBACL,gBAAgB,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC;iBAC7C,sCAGD,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,GAAG,GACxC,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useState, type ComponentProps } from \"react\"\nimport { useSimulatedProgress } from \"../../hooks/useSimulatedProgress\"\n\nimport { toCssVariables } from \"../../lib/helpers\"\nimport s from \"@plexui/styles/components/Indicator/CircularProgress.module.css\"\n\nexport type CircularProgressProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n  /**\n   * Maximum duration to use for simulated upload progress in ms\n   * @default 15000\n   */\n  maxDuration?: number\n  /**\n   * Sets the progress to full and resolves the simulated timer\n   * @default false\n   */\n  done?: boolean\n  /**\n   * Sets the progress to full and resolves the simulated timer\n   * @default false\n   */\n  progress?: number\n  /** Size of the indicator, in pixels\n   * @default 28px\n   */\n  size?: number | string\n  /** Stroke width of the indicator, in pixels, between 1 and 4\n   * @default 2\n   */\n  strokeWidth?: number\n  /** Color of the active progress track (stroke) */\n  trackActiveColor?: string\n  /** Color of the base track (background stroke) */\n  trackColor?: string\n}\n\nexport const CircularProgress = ({\n  maxDuration = 15000, // 15 seconds\n  done = false,\n  className,\n  progress: propProgress,\n  size,\n  strokeWidth,\n  trackActiveColor,\n  trackColor,\n  style,\n  ...restProps\n}: CircularProgressProps) => {\n  const [currentTime] = useState(new Date())\n  const simulatedProgressDone = propProgress !== undefined || done\n  const simulatedProgress = useSimulatedProgress(+currentTime, maxDuration, simulatedProgressDone)\n  const progress = propProgress ?? simulatedProgress\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(s.Container, className)}\n      style={\n        style ||\n        toCssVariables({\n          \"circular-progress-size\": size,\n          \"circular-progress-stroke\": strokeWidth ? Math.min(4, strokeWidth) : undefined,\n          \"circular-progress-track-active-color\": trackActiveColor,\n          \"circular-progress-track-color\": trackColor,\n        })\n      }\n    >\n      <svg viewBox=\"0 0 20 20\" className={s.Track} data-no-autosize>\n        <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" />\n      </svg>\n      <svg\n        viewBox=\"0 0 20 20\"\n        className={s.TrackProgress}\n        style={{\n          strokeDashoffset: 50 - 50 * (progress / 100),\n        }}\n        data-no-autosize\n      >\n        <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" />\n      </svg>\n    </div>\n  )\n}\n"]}

package/dist/es/components/Indicator/LoadingDots.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import s from "./LoadingDots.module.css";
+import s from "@plexui/styles/components/Indicator/LoadingDots.module.css";
 export const LoadingDots = ({ className, ...restProps }) => {
     return (_jsxs("div", { className: clsx(s.LoadingDots, className), ...restProps, children: [_jsx("div", { className: s.Dot }), _jsx("div", { className: s.Dot }), _jsx("div", { className: s.Dot })] }));
 };

package/dist/es/components/Indicator/LoadingDots.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingDots.js","sourceRoot":"","sources":["../../../../src/components/Indicator/LoadingDots.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,CAAC,MAAM,0BAA0B,CAAA;AAIxC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,SAAS,EAAoB,EAAE,EAAE;IAC3E,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,KAAM,SAAS,aAC3D,cAAK,SAAS,EAAE,CAAC,CAAC,GAAG,GAAI,EACzB,cAAK,SAAS,EAAE,CAAC,CAAC,GAAG,GAAI,EACzB,cAAK,SAAS,EAAE,CAAC,CAAC,GAAG,GAAI,IACrB,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport type { ComponentProps } from \"react\"\nimport s from \"./LoadingDots.module.css\"\n\nexport type LoadingDotsProps = Omit<ComponentProps<\"div\">, \"children\">\n\nexport const LoadingDots = ({ className, ...restProps }: LoadingDotsProps) => {\n  return (\n    <div className={clsx(s.LoadingDots, className)} {...restProps}>\n      <div className={s.Dot} />\n      <div className={s.Dot} />\n      <div className={s.Dot} />\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"LoadingDots.js","sourceRoot":"","sources":["../../../../src/components/Indicator/LoadingDots.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,CAAC,MAAM,4DAA4D,CAAA;AAI1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,SAAS,EAAoB,EAAE,EAAE;IAC3E,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,KAAM,SAAS,aAC3D,cAAK,SAAS,EAAE,CAAC,CAAC,GAAG,GAAI,EACzB,cAAK,SAAS,EAAE,CAAC,CAAC,GAAG,GAAI,EACzB,cAAK,SAAS,EAAE,CAAC,CAAC,GAAG,GAAI,IACrB,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport type { ComponentProps } from \"react\"\nimport s from \"@plexui/styles/components/Indicator/LoadingDots.module.css\"\n\nexport type LoadingDotsProps = Omit<ComponentProps<\"div\">, \"children\">\n\nexport const LoadingDots = ({ className, ...restProps }: LoadingDotsProps) => {\n  return (\n    <div className={clsx(s.LoadingDots, className)} {...restProps}>\n      <div className={s.Dot} />\n      <div className={s.Dot} />\n      <div className={s.Dot} />\n    </div>\n  )\n}\n"]}

package/dist/es/components/Indicator/LoadingIndicator.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { toCssVariables } from "../../lib/helpers";
-import s from "./LoadingIndicator.module.css";
+import { toCssVariables } from "../../lib/helpers.js";
+import s from "@plexui/styles/components/Indicator/LoadingIndicator.module.css";
 export const LoadingIndicator = ({ className, size, strokeWidth, style, ...restProps }) => {
     return (_jsx("span", { ...restProps, className: clsx(s.LoadingIndicator, className), style: style ||
             toCssVariables({

package/dist/es/components/Indicator/LoadingIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.js","sourceRoot":"","sources":["../../../../src/components/Indicator/LoadingIndicator.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,CAAC,MAAM,+BAA+B,CAAA;AAe7C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,EACT,IAAI,EACJ,WAAW,EACX,KAAK,EACL,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAC9C,KAAK,EACH,KAAK;YACL,cAAc,CAAC;gBACb,gBAAgB,EAAE,IAAI;gBACtB,kBAAkB,EAAE,WAAW;aAChC,CAAC,GAEJ,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport type { ComponentProps } from \"react\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport s from \"./LoadingIndicator.module.css\"\n\nexport type LoadingIndicatorProps = {\n  /** Classname applied to the indicator */\n  className?: string\n  /** Size of the indicator, in pixels\n   * @default 1em\n   */\n  size?: number | string\n  /** Stroke width of the indicator, in pixels\n   * @default 2\n   */\n  strokeWidth?: number\n} & Omit<ComponentProps<\"span\">, \"children\">\n\nexport const LoadingIndicator = ({\n  className,\n  size,\n  strokeWidth,\n  style,\n  ...restProps\n}: LoadingIndicatorProps) => {\n  return (\n    <span\n      {...restProps}\n      className={clsx(s.LoadingIndicator, className)}\n      style={\n        style ||\n        toCssVariables({\n          \"indicator-size\": size,\n          \"indicator-stroke\": strokeWidth,\n        })\n      }\n    />\n  )\n}\n"]}
+{"version":3,"file":"LoadingIndicator.js","sourceRoot":"","sources":["../../../../src/components/Indicator/LoadingIndicator.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,CAAC,MAAM,iEAAiE,CAAA;AAe/E,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,EACT,IAAI,EACJ,WAAW,EACX,KAAK,EACL,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAC9C,KAAK,EACH,KAAK;YACL,cAAc,CAAC;gBACb,gBAAgB,EAAE,IAAI;gBACtB,kBAAkB,EAAE,WAAW;aAChC,CAAC,GAEJ,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport type { ComponentProps } from \"react\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport s from \"@plexui/styles/components/Indicator/LoadingIndicator.module.css\"\n\nexport type LoadingIndicatorProps = {\n  /** Classname applied to the indicator */\n  className?: string\n  /** Size of the indicator, in pixels\n   * @default 1em\n   */\n  size?: number | string\n  /** Stroke width of the indicator, in pixels\n   * @default 2\n   */\n  strokeWidth?: number\n} & Omit<ComponentProps<\"span\">, \"children\">\n\nexport const LoadingIndicator = ({\n  className,\n  size,\n  strokeWidth,\n  style,\n  ...restProps\n}: LoadingIndicatorProps) => {\n  return (\n    <span\n      {...restProps}\n      className={clsx(s.LoadingIndicator, className)}\n      style={\n        style ||\n        toCssVariables({\n          \"indicator-size\": size,\n          \"indicator-stroke\": strokeWidth,\n        })\n      }\n    />\n  )\n}\n"]}

package/dist/es/components/Indicator/index.js

@@ -1,4 +1,4 @@
-export { CircularProgress } from "./CircularProgress";
-export { LoadingDots } from "./LoadingDots";
-export { LoadingIndicator } from "./LoadingIndicator";
+export { CircularProgress } from "./CircularProgress.js";
+export { LoadingDots } from "./LoadingDots.js";
+export { LoadingIndicator } from "./LoadingIndicator.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Input/Input.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useEffect, useId, useRef, useState } from "react";
 import { mergeRefs } from "react-merge-refs";
-import {} from "../../types";
-import { X } from "../Icon";
-import s from "./Input.module.css";
+import {} from "../../types.js";
+import { X } from "../Icon/index.js";
+import s from "@plexui/styles/components/Input/Input.module.css";
 const InputRoot = (props) => {
     const inputRef = useRef(null);
     const inputIdSuffix = useId();
@@ -42,8 +42,12 @@ const InputRoot = (props) => {
         const { clientX, clientY } = evt;
         // "Before" the input: top/left
         const isBefore = clientY < top || clientX < left;
+        // email, number and other types without the selection API throw on setSelectionRange
+        const hasSelection = input.selectionStart !== null;
         // If this is the first click, clear the selection.
         if (evt.detail === 1) {
+            if (!hasSelection)
+                return;
             if (isBefore) {
                 input.setSelectionRange(0, 0);
             }
@@ -54,6 +58,8 @@ const InputRoot = (props) => {
         }
         // If this is the second click, select the first or last word
         else if (evt.detail === 2) {
+            if (!hasSelection)
+                return;
             // Split the textarea value into words and non-word characters
             const words = input.value.match(/\w+|[^\w\s]/g) || [];
             const selectedWord = isBefore ? words.at(0) : words.at(-1);
@@ -75,19 +81,24 @@ const InputRoot = (props) => {
             inputRef.current?.select();
         }
     }, [autoSelect]);
+    // The clear button unmounts once the value is gone, so keep focus in the input
+    const handleClear = (evt) => {
+        inputRef.current?.focus();
+        onClear?.(evt);
+    };
     const handleAnimationStart = (evt) => {
         onAnimationStart?.(evt);
         if (evt.animationName === "native-autofill-in") {
             onAutofill?.();
         }
     };
-    return (_jsxs("div", { className: clsx(s.Container, className), "data-slot": "input", "data-variant": variant, "data-size": size, "data-gutter-size": gutterSize, "data-focused": focused, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-pill": pill ? "" : undefined, "data-optically-align": opticallyAlign, "data-has-start-adornment": StartAdornment ? "" : undefined, "data-has-end-adornment": EndAdornment || showClearButton ? "" : undefined, onMouseDown: handleMouseDown, children: [StartAdornment, _jsx("input", { ...restProps, ref: mergeRefs([ref, inputRef]), id: id || (allowAutofillExtensions ? undefined : onePasswordPreventionId), className: s.Input, type: type, name: name, value: value, defaultValue: defaultValue, readOnly: readOnly, disabled: disabled, onFocus: (evt) => {
+    return (_jsxs("div", { className: clsx(s.Container, className), "data-slot": "input", "data-variant": variant, "data-size": size, "data-gutter-size": gutterSize, "data-focused": focused, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-pill": pill ? "" : undefined, "data-optically-align": opticallyAlign, "data-has-start-adornment": StartAdornment ? "" : undefined, "data-has-end-adornment": EndAdornment || showClearButton ? "" : undefined, onMouseDown: handleMouseDown, children: [StartAdornment, _jsx("input", { ...restProps, ref: mergeRefs([ref, inputRef]), id: id || (allowAutofillExtensions ? undefined : onePasswordPreventionId), className: s.Input, type: type, autoComplete: autoComplete, "aria-invalid": restProps["aria-invalid"] ?? (invalid || undefined), name: name, value: value, defaultValue: defaultValue, readOnly: readOnly, disabled: disabled, onFocus: (evt) => {
                     setFocused(true);
                     onFocus?.(evt);
                 }, onBlur: (evt) => {
                     setFocused(false);
                     onBlur?.(evt);
-                }, onAnimationStart: handleAnimationStart, "data-lpignore": allowAutofillExtensions ? undefined : true, "data-1p-ignore": allowAutofillExtensions ? undefined : true }), showClearButton && (_jsx("button", { type: "button", "aria-label": "Clear input", className: s.Clear, onClick: onClear, children: _jsx(X, {}) })), EndAdornment] }));
+                }, onAnimationStart: handleAnimationStart, "data-lpignore": allowAutofillExtensions ? undefined : true, "data-1p-ignore": allowAutofillExtensions ? undefined : true }), showClearButton && (_jsx("button", { type: "button", "aria-label": "Clear input", className: s.Clear, onClick: handleClear, children: _jsx(X, {}) })), EndAdornment] }));
 };
 const InputAdornmentButton = ({ className, type = "button", color, ref, ...restProps }) => (_jsx("button", { ref: ref, type: type, className: clsx(s.AdornmentButton, className), "data-color": color, ...restProps }));
 export const Input = InputRoot;

package/dist/es/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { type ControlSize, type SemanticColor, type Sizes, type Variants } from \"../../types\"\nimport { X } from \"../Icon\"\nimport s from \"./Input.module.css\"\n\nexport type InputProps = {\n  /**\n   * Visual style of the input\n   * @default outline\n   */\n  variant?: Variants<\"outline\" | \"soft\">\n  /**\n   * Controls the size of the input\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   *\n   * @default md\n   */\n  size?: ControlSize\n  /**\n   * Controls gutter on the edges of the input, defaults to value from `size`.\n   *\n   * | 2xs    | xs     | sm     | md     | lg     | xl     |\n   * | ------ | ------ | ------ | ------ | ------ | ------ |\n   * | `6px`  | `8px`  | `10px` | `12px` | `14px` | `16px` |\n   */\n  gutterSize?: Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">\n  /**\n   * Disables the select visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Mark the input as invalid\n   * @default false\n   */\n  invalid?: boolean\n  /**\n   * Allow autofill extensions to appear in the input\n   * @default false\n   */\n  allowAutofillExtensions?: boolean\n  /**\n   * Select all contents of the input when mounted.\n   * @default false\n   */\n  autoSelect?: boolean\n  /** Callback invoked when the input is autofilled by the browser */\n  onAutofill?: () => void\n  /** Content rendered at the start of the input */\n  startAdornment?: React.ReactNode\n  /** Content rendered at the end of the input */\n  endAdornment?: React.ReactNode\n  /**\n   * Callback invoked when the clear button is clicked.\n   * When provided, displays a clear button that appears when the input has a value.\n   */\n  onClear?: () => void\n  /**\n   * Determines if the button should be a fully rounded pill shape\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Applies a negative margin using the current gutter to optically align the input\n   * with surrounding content.\n   */\n  opticallyAlign?: \"start\" | \"end\"\n  /** Ref for the input */\n  ref?: React.Ref<HTMLInputElement | null>\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"disabled\" | \"size\">\n\nconst InputRoot = (props: InputProps) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const inputIdSuffix = useId()\n  // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n  // Allow user to override this for connecting to labels.\n  const onePasswordPreventionId = `search-ui-input-${inputIdSuffix}`\n  const {\n    id,\n    name,\n    type = \"text\",\n    variant = \"outline\",\n    size = \"md\",\n    gutterSize,\n    className,\n    autoComplete,\n    disabled = false,\n    readOnly = false,\n    invalid = false,\n    // Default to `true` when type=\"password\" or presence of `name`\n    allowAutofillExtensions = type === \"password\" || !!name,\n    onFocus,\n    onBlur,\n    onAnimationStart,\n    onAutofill,\n    autoSelect,\n    startAdornment: StartAdornment,\n    endAdornment: EndAdornment,\n    onClear,\n    pill,\n    opticallyAlign,\n    ref,\n    value,\n    defaultValue,\n    ...restProps\n  } = props\n\n  // Determine if clear button should be shown\n  const hasValue = value !== undefined ? !!value : !!defaultValue\n  const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n  // Redirect clicks on the container and adornments\n  const handleMouseDown = (evt: React.MouseEvent<HTMLDivElement>) => {\n    const input = inputRef.current\n    // Bail out if the target is not an element or the textarea is not found\n    if (!evt.target || !(evt.target instanceof Element) || !input) {\n      return\n    }\n    // Bail out if the target is inside the textarea\n    if (input.contains(evt.target)) {\n      return\n    }\n    // Bail out if the target is a button\n    if (evt.target.closest(\"button, [type='button'], [role='button'], [role='menuitem']\")) {\n      return\n    }\n\n    evt.preventDefault()\n    // If the textarea is not focused, focus it\n    if (document.activeElement !== input) {\n      input.focus()\n    }\n\n    const { left, top } = input.getBoundingClientRect()\n    const { clientX, clientY } = evt\n    // \"Before\" the input: top/left\n    const isBefore = clientY < top || clientX < left\n\n    // If this is the first click, clear the selection.\n    if (evt.detail === 1) {\n      if (isBefore) {\n        input.setSelectionRange(0, 0)\n      } else {\n        const length = input.value.length\n        input.setSelectionRange(length, length)\n      }\n    }\n    // If this is the second click, select the first or last word\n    else if (evt.detail === 2) {\n      // Split the textarea value into words and non-word characters\n      const words = input.value.match(/\\w+|[^\\w\\s]/g) || []\n      const selectedWord = isBefore ? words.at(0) : words.at(-1)\n      if (selectedWord) {\n        const wordIndex = isBefore\n          ? input.value.indexOf(selectedWord)\n          : input.value.lastIndexOf(selectedWord)\n        input.setSelectionRange(wordIndex, wordIndex + selectedWord.length)\n      }\n    }\n    // If this is the third click or greater, select the entire input\n    else {\n      input.select()\n    }\n  }\n\n  const [focused, setFocused] = useState<boolean>(false)\n\n  useEffect(() => {\n    if (autoSelect) {\n      inputRef.current?.select()\n    }\n  }, [autoSelect])\n\n  const handleAnimationStart = (evt: React.AnimationEvent<HTMLInputElement>) => {\n    onAnimationStart?.(evt)\n    if (evt.animationName === \"native-autofill-in\") {\n      onAutofill?.()\n    }\n  }\n\n  return (\n    <div\n      className={clsx(s.Container, className)}\n      data-slot=\"input\"\n      data-variant={variant}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      data-focused={focused}\n      data-disabled={disabled ? \"\" : undefined}\n      data-readonly={readOnly ? \"\" : undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-pill={pill ? \"\" : undefined}\n      data-optically-align={opticallyAlign}\n      data-has-start-adornment={StartAdornment ? \"\" : undefined}\n      data-has-end-adornment={EndAdornment || showClearButton ? \"\" : undefined}\n      onMouseDown={handleMouseDown}\n    >\n      {StartAdornment}\n      <input\n        {...restProps}\n        ref={mergeRefs([ref, inputRef])}\n        id={id || (allowAutofillExtensions ? undefined : onePasswordPreventionId)}\n        className={s.Input}\n        type={type}\n        name={name}\n        value={value}\n        defaultValue={defaultValue}\n        readOnly={readOnly}\n        disabled={disabled}\n        onFocus={(evt) => {\n          setFocused(true)\n          onFocus?.(evt)\n        }}\n        onBlur={(evt) => {\n          setFocused(false)\n          onBlur?.(evt)\n        }}\n        onAnimationStart={handleAnimationStart}\n        // Prevent LastPass and 1Password from appearing\n        data-lpignore={allowAutofillExtensions ? undefined : true}\n        data-1p-ignore={allowAutofillExtensions ? undefined : true}\n      />\n      {showClearButton && (\n        <button type=\"button\" aria-label=\"Clear input\" className={s.Clear} onClick={onClear}>\n          <X />\n        </button>\n      )}\n      {EndAdornment}\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  AdornmentButton — canonical inline action button for Input slots   */\n/*  (mic toggle, visibility toggle, copy, etc.). Sizes itself off the  */\n/*  parent Input via --input-clear-size / --input-clear-pill-offset    */\n/*  so it stays visually consistent with the built-in clear button.    */\n/* ------------------------------------------------------------------ */\n\nexport type InputAdornmentButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"ref\" | \"color\"\n> & {\n  ref?: React.Ref<HTMLButtonElement>\n  /**\n   * Applies a semantic color tint to the pressed (`aria-pressed=\"true\"`) state\n   * — the same palette Button accepts. Default `aria-pressed` keeps the\n   * neutral primary-soft tint.\n   */\n  color?: SemanticColor\n}\n\nconst InputAdornmentButton = ({\n  className,\n  type = \"button\",\n  color,\n  ref,\n  ...restProps\n}: InputAdornmentButtonProps) => (\n  <button\n    ref={ref}\n    type={type}\n    className={clsx(s.AdornmentButton, className)}\n    data-color={color}\n    {...restProps}\n  />\n)\n\ntype InputComponent = typeof InputRoot & {\n  AdornmentButton: typeof InputAdornmentButton\n}\n\nexport const Input = InputRoot as InputComponent\nInput.AdornmentButton = InputAdornmentButton\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { type ControlSize, type SemanticColor, type Sizes, type Variants } from \"../../types\"\nimport { X } from \"../Icon\"\nimport s from \"@plexui/styles/components/Input/Input.module.css\"\n\nexport type InputProps = {\n  /**\n   * Visual style of the input\n   * @default outline\n   */\n  variant?: Variants<\"outline\" | \"soft\" | \"ghost\">\n  /**\n   * Controls the size of the input\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   *\n   * @default md\n   */\n  size?: ControlSize\n  /**\n   * Controls gutter on the edges of the input, defaults to value from `size`.\n   *\n   * | 2xs    | xs     | sm     | md     | lg     | xl     |\n   * | ------ | ------ | ------ | ------ | ------ | ------ |\n   * | `6px`  | `8px`  | `10px` | `12px` | `14px` | `16px` |\n   */\n  gutterSize?: Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">\n  /**\n   * Disables the select visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Mark the input as invalid\n   * @default false\n   */\n  invalid?: boolean\n  /**\n   * Allow autofill extensions to appear in the input\n   * @default false\n   */\n  allowAutofillExtensions?: boolean\n  /**\n   * Select all contents of the input when mounted.\n   * @default false\n   */\n  autoSelect?: boolean\n  /** Callback invoked when the input is autofilled by the browser */\n  onAutofill?: () => void\n  /** Content rendered at the start of the input */\n  startAdornment?: React.ReactNode\n  /** Content rendered at the end of the input */\n  endAdornment?: React.ReactNode\n  /**\n   * Callback invoked when the clear button is clicked.\n   * When provided, displays a clear button that appears when the input has a value.\n   */\n  onClear?: () => void\n  /**\n   * Determines if the button should be a fully rounded pill shape\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Applies a negative margin using the current gutter to optically align the input\n   * with surrounding content.\n   */\n  opticallyAlign?: \"start\" | \"end\"\n  /** Ref for the input */\n  ref?: React.Ref<HTMLInputElement | null>\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"disabled\" | \"size\">\n\nconst InputRoot = (props: InputProps) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const inputIdSuffix = useId()\n  // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n  // Allow user to override this for connecting to labels.\n  const onePasswordPreventionId = `search-ui-input-${inputIdSuffix}`\n  const {\n    id,\n    name,\n    type = \"text\",\n    variant = \"outline\",\n    size = \"md\",\n    gutterSize,\n    className,\n    autoComplete,\n    disabled = false,\n    readOnly = false,\n    invalid = false,\n    // Default to `true` when type=\"password\" or presence of `name`\n    allowAutofillExtensions = type === \"password\" || !!name,\n    onFocus,\n    onBlur,\n    onAnimationStart,\n    onAutofill,\n    autoSelect,\n    startAdornment: StartAdornment,\n    endAdornment: EndAdornment,\n    onClear,\n    pill,\n    opticallyAlign,\n    ref,\n    value,\n    defaultValue,\n    ...restProps\n  } = props\n\n  // Determine if clear button should be shown\n  const hasValue = value !== undefined ? !!value : !!defaultValue\n  const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n  // Redirect clicks on the container and adornments\n  const handleMouseDown = (evt: React.MouseEvent<HTMLDivElement>) => {\n    const input = inputRef.current\n    // Bail out if the target is not an element or the textarea is not found\n    if (!evt.target || !(evt.target instanceof Element) || !input) {\n      return\n    }\n    // Bail out if the target is inside the textarea\n    if (input.contains(evt.target)) {\n      return\n    }\n    // Bail out if the target is a button\n    if (evt.target.closest(\"button, [type='button'], [role='button'], [role='menuitem']\")) {\n      return\n    }\n\n    evt.preventDefault()\n    // If the textarea is not focused, focus it\n    if (document.activeElement !== input) {\n      input.focus()\n    }\n\n    const { left, top } = input.getBoundingClientRect()\n    const { clientX, clientY } = evt\n    // \"Before\" the input: top/left\n    const isBefore = clientY < top || clientX < left\n    // email, number and other types without the selection API throw on setSelectionRange\n    const hasSelection = input.selectionStart !== null\n\n    // If this is the first click, clear the selection.\n    if (evt.detail === 1) {\n      if (!hasSelection) return\n      if (isBefore) {\n        input.setSelectionRange(0, 0)\n      } else {\n        const length = input.value.length\n        input.setSelectionRange(length, length)\n      }\n    }\n    // If this is the second click, select the first or last word\n    else if (evt.detail === 2) {\n      if (!hasSelection) return\n      // Split the textarea value into words and non-word characters\n      const words = input.value.match(/\\w+|[^\\w\\s]/g) || []\n      const selectedWord = isBefore ? words.at(0) : words.at(-1)\n      if (selectedWord) {\n        const wordIndex = isBefore\n          ? input.value.indexOf(selectedWord)\n          : input.value.lastIndexOf(selectedWord)\n        input.setSelectionRange(wordIndex, wordIndex + selectedWord.length)\n      }\n    }\n    // If this is the third click or greater, select the entire input\n    else {\n      input.select()\n    }\n  }\n\n  const [focused, setFocused] = useState<boolean>(false)\n\n  useEffect(() => {\n    if (autoSelect) {\n      inputRef.current?.select()\n    }\n  }, [autoSelect])\n\n  // The clear button unmounts once the value is gone, so keep focus in the input\n  const handleClear = (evt: React.MouseEvent<HTMLButtonElement>) => {\n    inputRef.current?.focus()\n    ;(onClear as React.MouseEventHandler<HTMLButtonElement> | undefined)?.(evt)\n  }\n\n  const handleAnimationStart = (evt: React.AnimationEvent<HTMLInputElement>) => {\n    onAnimationStart?.(evt)\n    if (evt.animationName === \"native-autofill-in\") {\n      onAutofill?.()\n    }\n  }\n\n  return (\n    <div\n      className={clsx(s.Container, className)}\n      data-slot=\"input\"\n      data-variant={variant}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      data-focused={focused}\n      data-disabled={disabled ? \"\" : undefined}\n      data-readonly={readOnly ? \"\" : undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-pill={pill ? \"\" : undefined}\n      data-optically-align={opticallyAlign}\n      data-has-start-adornment={StartAdornment ? \"\" : undefined}\n      data-has-end-adornment={EndAdornment || showClearButton ? \"\" : undefined}\n      onMouseDown={handleMouseDown}\n    >\n      {StartAdornment}\n      <input\n        {...restProps}\n        ref={mergeRefs([ref, inputRef])}\n        id={id || (allowAutofillExtensions ? undefined : onePasswordPreventionId)}\n        className={s.Input}\n        type={type}\n        autoComplete={autoComplete}\n        // Expose the visual invalid state to assistive tech; an explicit aria-invalid wins\n        aria-invalid={restProps[\"aria-invalid\"] ?? (invalid || undefined)}\n        name={name}\n        value={value}\n        defaultValue={defaultValue}\n        readOnly={readOnly}\n        disabled={disabled}\n        onFocus={(evt) => {\n          setFocused(true)\n          onFocus?.(evt)\n        }}\n        onBlur={(evt) => {\n          setFocused(false)\n          onBlur?.(evt)\n        }}\n        onAnimationStart={handleAnimationStart}\n        // Prevent LastPass and 1Password from appearing\n        data-lpignore={allowAutofillExtensions ? undefined : true}\n        data-1p-ignore={allowAutofillExtensions ? undefined : true}\n      />\n      {showClearButton && (\n        <button type=\"button\" aria-label=\"Clear input\" className={s.Clear} onClick={handleClear}>\n          <X />\n        </button>\n      )}\n      {EndAdornment}\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  AdornmentButton — canonical inline action button for Input slots   */\n/*  (mic toggle, visibility toggle, copy, etc.). Sizes itself off the  */\n/*  parent Input via --input-clear-size / --input-clear-pill-offset    */\n/*  so it stays visually consistent with the built-in clear button.    */\n/* ------------------------------------------------------------------ */\n\nexport type InputAdornmentButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"ref\" | \"color\"\n> & {\n  ref?: React.Ref<HTMLButtonElement>\n  /**\n   * Applies a semantic color tint to the pressed (`aria-pressed=\"true\"`) state\n   * — the same palette Button accepts. Default `aria-pressed` keeps the\n   * neutral primary-soft tint.\n   */\n  color?: SemanticColor\n}\n\nconst InputAdornmentButton = ({\n  className,\n  type = \"button\",\n  color,\n  ref,\n  ...restProps\n}: InputAdornmentButtonProps) => (\n  <button\n    ref={ref}\n    type={type}\n    className={clsx(s.AdornmentButton, className)}\n    data-color={color}\n    {...restProps}\n  />\n)\n\ntype InputComponent = typeof InputRoot & {\n  AdornmentButton: typeof InputAdornmentButton\n}\n\nexport const Input = InputRoot as InputComponent\nInput.AdornmentButton = InputAdornmentButton\n"]}

package/dist/es/components/Input/index.js

@@ -1,2 +1,2 @@
-export { Input } from "./Input";
+export { Input } from "./Input.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/InputGroup/InputGroup.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createContext, useContext, } from "react";
+import {} from "../../types.js";
+import { Button } from "../Button/index.js";
+import s from "@plexui/styles/components/InputGroup/InputGroup.module.css";
+const InputGroupContext = createContext(null);
+const CONTROL_SELECTOR = "[data-slot='input-group-control']";
+/** Button size for each group size: the closest Button that fits inside the control */
+const BUTTON_SIZE = {
+    "3xs": "3xs",
+    "2xs": "3xs",
+    "xs": "3xs",
+    "sm": "3xs",
+    "md": "2xs",
+    "lg": "sm",
+    "xl": "md",
+    "2xl": "lg",
+    "3xl": "xl",
+};
+const InputGroupRoot = ({ variant = "outline", size = "md", pill = false, disabled = false, invalid = false, className, onMouseDown, ref, ...restProps }) => {
+    // Clicks on the frame, icons and text focus the control, as in Input
+    const handleMouseDown = (evt) => {
+        onMouseDown?.(evt);
+        const control = evt.currentTarget.querySelector(CONTROL_SELECTOR);
+        const { target } = evt;
+        if (evt.defaultPrevented || !control || !(target instanceof Element) || control.contains(target)) {
+            return;
+        }
+        // Buttons, links, menus and other controls in the addons take their own clicks
+        if (target.closest("button, a, input, textarea, select, [role='button'], [role='menuitem']")) {
+            return;
+        }
+        evt.preventDefault();
+        control.focus();
+    };
+    return (_jsx(InputGroupContext.Provider, { value: { size, pill, disabled, invalid }, children: _jsx("div", { ref: ref, role: "group", "data-slot": "input-group", "data-variant": variant, "data-size": size, "data-pill": pill ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, className: clsx(s.InputGroup, className), onMouseDown: handleMouseDown, ...restProps }) }));
+};
+const InputGroupInput = ({ type = "text", disabled, className, ref, ...restProps }) => {
+    const group = useContext(InputGroupContext);
+    return (_jsx("input", { ref: ref, type: type, "data-slot": "input-group-control", className: clsx(s.Control, className), disabled: disabled ?? group?.disabled, "aria-invalid": restProps["aria-invalid"] ?? (group?.invalid || undefined), ...restProps }));
+};
+const InputGroupTextarea = ({ rows = 3, disabled, className, ref, ...restProps }) => {
+    const group = useContext(InputGroupContext);
+    return (_jsx("textarea", { ref: ref, rows: rows, "data-slot": "input-group-control", className: clsx(s.Control, className), disabled: disabled ?? group?.disabled, "aria-invalid": restProps["aria-invalid"] ?? (group?.invalid || undefined), ...restProps }));
+};
+const InputGroupAddon = ({ align = "inline-start", className, ref, ...restProps }) => (_jsx("div", { ref: ref, "data-slot": "input-group-addon", "data-align": align, className: clsx(s.Addon, className), ...restProps }));
+const InputGroupButton = ({ color = "secondary", variant = "ghost", pill, disabled, className, ...restProps }) => {
+    const group = useContext(InputGroupContext);
+    return (_jsx(Button, { color: color, variant: variant, size: BUTTON_SIZE[group?.size ?? "md"], pill: pill ?? group?.pill, disabled: disabled ?? group?.disabled, className: clsx(s.Button, className), ...restProps }));
+};
+const InputGroupText = ({ className, ref, ...restProps }) => (_jsx("span", { ref: ref, "data-slot": "input-group-text", className: clsx(s.Text, className), ...restProps }));
+export const InputGroup = InputGroupRoot;
+InputGroup.Input = InputGroupInput;
+InputGroup.Textarea = InputGroupTextarea;
+InputGroup.Addon = InputGroupAddon;
+InputGroup.Button = InputGroupButton;
+InputGroup.Text = InputGroupText;
+//# sourceMappingURL=InputGroup.js.map

package/dist/es/components/InputGroup/InputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.js","sourceRoot":"","sources":["../../../../src/components/InputGroup/InputGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport {\n  createContext,\n  useContext,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from \"react\"\nimport { type ControlSize, type Variants } from \"../../types\"\nimport { Button, type ButtonProps } from \"../Button\"\nimport s from \"@plexui/styles/components/InputGroup/InputGroup.module.css\"\n\ntype InputGroupContextValue = {\n  size: ControlSize\n  pill: boolean\n  disabled: boolean\n  invalid: boolean\n}\n\nconst InputGroupContext = createContext<InputGroupContextValue | null>(null)\n\nconst CONTROL_SELECTOR = \"[data-slot='input-group-control']\"\n\n/** Button size for each group size: the closest Button that fits inside the control */\nconst BUTTON_SIZE: Record<ControlSize, ControlSize> = {\n  \"3xs\": \"3xs\",\n  \"2xs\": \"3xs\",\n  \"xs\": \"3xs\",\n  \"sm\": \"3xs\",\n  \"md\": \"2xs\",\n  \"lg\": \"sm\",\n  \"xl\": \"md\",\n  \"2xl\": \"lg\",\n  \"3xl\": \"xl\",\n}\n\n/* ------------------------------------------------------------------ */\n/*  Root                                                               */\n/* ------------------------------------------------------------------ */\n\nexport type InputGroupProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Visual style of the group\n   * @default outline\n   */\n  variant?: Variants<\"outline\" | \"soft\">\n  /**\n   * Controls the size of the group, on the same scale as Input\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   *\n   * @default md\n   */\n  size?: ControlSize\n  /**\n   * Fully rounded group, with pill buttons inside\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Disables the control and the buttons inside the group\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Mark the group as invalid\n   * @default false\n   */\n  invalid?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nconst InputGroupRoot = ({\n  variant = \"outline\",\n  size = \"md\",\n  pill = false,\n  disabled = false,\n  invalid = false,\n  className,\n  onMouseDown,\n  ref,\n  ...restProps\n}: InputGroupProps) => {\n  // Clicks on the frame, icons and text focus the control, as in Input\n  const handleMouseDown = (evt: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDown?.(evt)\n    const control = evt.currentTarget.querySelector<HTMLElement>(CONTROL_SELECTOR)\n    const { target } = evt\n    if (evt.defaultPrevented || !control || !(target instanceof Element) || control.contains(target)) {\n      return\n    }\n    // Buttons, links, menus and other controls in the addons take their own clicks\n    if (target.closest(\"button, a, input, textarea, select, [role='button'], [role='menuitem']\")) {\n      return\n    }\n    evt.preventDefault()\n    control.focus()\n  }\n\n  return (\n    <InputGroupContext.Provider value={{ size, pill, disabled, invalid }}>\n      <div\n        ref={ref}\n        role=\"group\"\n        data-slot=\"input-group\"\n        data-variant={variant}\n        data-size={size}\n        data-pill={pill ? \"\" : undefined}\n        data-disabled={disabled ? \"\" : undefined}\n        data-invalid={invalid ? \"\" : undefined}\n        className={clsx(s.InputGroup, className)}\n        onMouseDown={handleMouseDown}\n        {...restProps}\n      />\n    </InputGroupContext.Provider>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  Input / Textarea: the native control, framed by the group          */\n/* ------------------------------------------------------------------ */\n\nexport type InputGroupInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"size\"> & {\n  ref?: Ref<HTMLInputElement>\n}\n\nconst InputGroupInput = ({ type = \"text\", disabled, className, ref, ...restProps }: InputGroupInputProps) => {\n  const group = useContext(InputGroupContext)\n  return (\n    <input\n      ref={ref}\n      type={type}\n      data-slot=\"input-group-control\"\n      className={clsx(s.Control, className)}\n      disabled={disabled ?? group?.disabled}\n      // Expose the group's invalid state to assistive tech; an explicit aria-invalid wins\n      aria-invalid={restProps[\"aria-invalid\"] ?? (group?.invalid || undefined)}\n      {...restProps}\n    />\n  )\n}\n\nexport type InputGroupTextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  ref?: Ref<HTMLTextAreaElement>\n}\n\nconst InputGroupTextarea = ({ rows = 3, disabled, className, ref, ...restProps }: InputGroupTextareaProps) => {\n  const group = useContext(InputGroupContext)\n  return (\n    <textarea\n      ref={ref}\n      rows={rows}\n      data-slot=\"input-group-control\"\n      className={clsx(s.Control, className)}\n      disabled={disabled ?? group?.disabled}\n      aria-invalid={restProps[\"aria-invalid\"] ?? (group?.invalid || undefined)}\n      {...restProps}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  Addon: icons, text and buttons beside, above or below the control  */\n/* ------------------------------------------------------------------ */\n\nexport type InputGroupAddonAlign = \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\"\n\nexport type InputGroupAddonProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Where the addon sits: before or after the control on its line, or as a\n   * row above or below it. Inline addons suit `InputGroup.Input`, block\n   * addons suit `InputGroup.Textarea` and labels.\n   * @default \"inline-start\"\n   */\n  align?: InputGroupAddonAlign\n  ref?: Ref<HTMLDivElement>\n}\n\nconst InputGroupAddon = ({ align = \"inline-start\", className, ref, ...restProps }: InputGroupAddonProps) => (\n  <div\n    ref={ref}\n    data-slot=\"input-group-addon\"\n    data-align={align}\n    className={clsx(s.Addon, className)}\n    {...restProps}\n  />\n)\n\n/* ------------------------------------------------------------------ */\n/*  Button: a ghost Button sized from the group                        */\n/* ------------------------------------------------------------------ */\n\nexport type InputGroupButtonProps = Omit<ButtonProps, \"color\" | \"size\"> & {\n  /**\n   * Color for the button\n   * @default secondary\n   */\n  color?: ButtonProps[\"color\"]\n}\n\nconst InputGroupButton = ({\n  color = \"secondary\",\n  variant = \"ghost\",\n  pill,\n  disabled,\n  className,\n  ...restProps\n}: InputGroupButtonProps) => {\n  const group = useContext(InputGroupContext)\n  return (\n    <Button\n      color={color}\n      variant={variant}\n      size={BUTTON_SIZE[group?.size ?? \"md\"]}\n      pill={pill ?? group?.pill}\n      disabled={disabled ?? group?.disabled}\n      className={clsx(s.Button, className)}\n      {...restProps}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  Text: plain text inside an addon (prefixes, units, counters)       */\n/* ------------------------------------------------------------------ */\n\nexport type InputGroupTextProps = HTMLAttributes<HTMLSpanElement> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nconst InputGroupText = ({ className, ref, ...restProps }: InputGroupTextProps) => (\n  <span ref={ref} data-slot=\"input-group-text\" className={clsx(s.Text, className)} {...restProps} />\n)\n\n/* ------------------------------------------------------------------ */\n/*  Export: compound API                                               */\n/* ------------------------------------------------------------------ */\n\ntype InputGroupComponent = typeof InputGroupRoot & {\n  Input: typeof InputGroupInput\n  Textarea: typeof InputGroupTextarea\n  Addon: typeof InputGroupAddon\n  Button: typeof InputGroupButton\n  Text: typeof InputGroupText\n}\n\nexport const InputGroup = InputGroupRoot as InputGroupComponent\nInputGroup.Input = InputGroupInput\nInputGroup.Textarea = InputGroupTextarea\nInputGroup.Addon = InputGroupAddon\nInputGroup.Button = InputGroupButton\nInputGroup.Text = InputGroupText\n"]}

package/dist/es/components/InputGroup/index.js

@@ -0,0 +1,2 @@
+export { InputGroup, } from "./InputGroup.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/InputGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/InputGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,GAQX,MAAM,cAAc,CAAA","sourcesContent":["export {\n  InputGroup,\n  type InputGroupAddonAlign,\n  type InputGroupAddonProps,\n  type InputGroupButtonProps,\n  type InputGroupInputProps,\n  type InputGroupProps,\n  type InputGroupTextareaProps,\n  type InputGroupTextProps,\n} from \"./InputGroup\"\n"]}

package/dist/es/components/Kbd/Kbd.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import s from "@plexui/styles/components/Kbd/Kbd.module.css";
+/** A key or a shortcut, such as ⌘K, in a tooltip, a menu item or a sentence. */
+export const Kbd = ({ size = "sm", variant = "soft", className, ...restProps }) => {
+    return _jsx("kbd", { className: clsx(s.Kbd, className), "data-size": size, "data-variant": variant, ...restProps });
+};
+/** Keys pressed together: a row of `Kbd`. */
+const Group = ({ className, ...restProps }) => {
+    return _jsx("span", { className: clsx(s.Group, className), ...restProps });
+};
+Kbd.Group = Group;
+//# sourceMappingURL=Kbd.js.map

package/dist/es/components/Kbd/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../../../src/components/Kbd/Kbd.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,CAAC,MAAM,8CAA8C,CAAA;AAgB5D,gFAAgF;AAChF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAY,EAAE,EAAE;IAC1F,OAAO,cAAK,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,eAAa,IAAI,kBAAgB,OAAO,KAAM,SAAS,GAAI,CAAA;AAC1G,CAAC,CAAA;AAID,6CAA6C;AAC7C,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,SAAS,EAAiB,EAAE,EAAE;IAC3D,OAAO,eAAM,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAAA;AACrE,CAAC,CAAA;AAED,GAAG,CAAC,KAAK,GAAG,KAAK,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport type { ComponentProps } from \"react\"\nimport s from \"@plexui/styles/components/Kbd/Kbd.module.css\"\n\nexport type KbdProps = ComponentProps<\"kbd\"> & {\n  /**\n   * Height and text size: `xs` 16px, `sm` 20px, `md` 24px\n   * @default sm\n   */\n  size?: \"xs\" | \"sm\" | \"md\"\n  /**\n   * `soft` fills the key, `outline` draws its edge. Both mix the text color,\n   * so the key reads on any surface.\n   * @default soft\n   */\n  variant?: \"soft\" | \"outline\"\n}\n\n/** A key or a shortcut, such as ⌘K, in a tooltip, a menu item or a sentence. */\nexport const Kbd = ({ size = \"sm\", variant = \"soft\", className, ...restProps }: KbdProps) => {\n  return <kbd className={clsx(s.Kbd, className)} data-size={size} data-variant={variant} {...restProps} />\n}\n\nexport type KbdGroupProps = ComponentProps<\"span\">\n\n/** Keys pressed together: a row of `Kbd`. */\nconst Group = ({ className, ...restProps }: KbdGroupProps) => {\n  return <span className={clsx(s.Group, className)} {...restProps} />\n}\n\nKbd.Group = Group\n"]}

package/dist/es/components/Kbd/index.js

@@ -0,0 +1,2 @@
+export { Kbd } from "./Kbd.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Kbd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Kbd/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqC,MAAM,OAAO,CAAA","sourcesContent":["export { Kbd, type KbdGroupProps, type KbdProps } from \"./Kbd\"\n"]}

package/dist/es/components/Label/Label.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import {} from "react";
 import { Label as RadixLabel } from "radix-ui";
-import s from "./Label.module.css";
+import s from "@plexui/styles/components/Label/Label.module.css";
 export const Label = ({ className, children, ...restProps }) => {
     return (_jsx(RadixLabel.Root, { className: clsx(s.Label, className), ...restProps, children: children }));
 };

package/dist/es/components/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,CAAC,MAAM,oBAAoB,CAAA;AAMlC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAc,EAAE,EAAE;IACzE,OAAO,CACL,KAAC,UAAU,CAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,SAAS,YAChE,QAAQ,GACO,CACnB,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps } from \"react\"\nimport { Label as RadixLabel } from \"radix-ui\"\nimport s from \"./Label.module.css\"\n\nexport type LabelProps = ComponentProps<typeof RadixLabel.Root> & {\n  className?: string\n}\n\nexport const Label = ({ className, children, ...restProps }: LabelProps) => {\n  return (\n    <RadixLabel.Root className={clsx(s.Label, className)} {...restProps}>\n      {children}\n    </RadixLabel.Root>\n  )\n}\n"]}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,CAAC,MAAM,kDAAkD,CAAA;AAMhE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAc,EAAE,EAAE;IACzE,OAAO,CACL,KAAC,UAAU,CAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,SAAS,YAChE,QAAQ,GACO,CACnB,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps } from \"react\"\nimport { Label as RadixLabel } from \"radix-ui\"\nimport s from \"@plexui/styles/components/Label/Label.module.css\"\n\nexport type LabelProps = ComponentProps<typeof RadixLabel.Root> & {\n  className?: string\n}\n\nexport const Label = ({ className, children, ...restProps }: LabelProps) => {\n  return (\n    <RadixLabel.Root className={clsx(s.Label, className)} {...restProps}>\n      {children}\n    </RadixLabel.Root>\n  )\n}\n"]}

package/dist/es/components/Label/index.js

@@ -1,2 +1,2 @@
-export { Label } from "./Label";
+export { Label } from "./Label.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Markdown/Markdown.js

@@ -6,14 +6,14 @@ import ReactMarkdown from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import remarkDirective from "remark-directive";
 import remarkGfm from "remark-gfm";
-import { CodeBlock, CodeBlockBase } from "../CodeBlock/CodeBlock";
-import { CollapsibleCodeBlock } from "../CodeBlock/CollapsibleCodeBlock";
-import { TextLink } from "../TextLink/TextLink";
-import { reactMarkdownRemarkDirective } from "./directives";
-import s from "./Markdown.module.css";
-import { defaultUrlTransform } from "./urlTransform";
-import { useMathPlugins } from "./useMathPlugins";
-import { useParseMarkdownPre } from "./useParseMarkdownPre";
+import { CodeBlock, CodeBlockBase } from "../CodeBlock/CodeBlock.js";
+import { CollapsibleCodeBlock } from "../CodeBlock/CollapsibleCodeBlock.js";
+import { TextLink } from "../TextLink/TextLink.js";
+import { reactMarkdownRemarkDirective } from "./directives.js";
+import s from "@plexui/styles/components/Markdown/Markdown.module.css";
+import { defaultUrlTransform } from "./urlTransform.js";
+import { useMathPlugins } from "./useMathPlugins.js";
+import { useParseMarkdownPre } from "./useParseMarkdownPre.js";
 const supportsLookbehind = (() => {
     try {
         new RegExp("(?<=a)b");

package/dist/es/components/Markdown/Markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.js","sourceRoot":"","sources":["../../../../src/components/Markdown/Markdown.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAgD,MAAM,OAAO,CAAA;AACvF,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,YAAY,MAAM,eAAe,CAAA;AACxC,OAAO,eAAe,MAAM,kBAAkB,CAAA;AAC9C,OAAO,SAAS,MAAM,YAAY,CAAA;AAElC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,4BAA4B,EAA0B,MAAM,cAAc,CAAA;AACnF,OAAO,CAAC,MAAM,uBAAuB,CAAA;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE;IAC/B,IAAI,CAAC;QACH,IAAI,MAAM,CAAC,SAAS,CAAC,CAAA;QACrB,OAAO,IAAI,CAAA;IACb,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAA;IACd,CAAC;AACH,CAAC,CAAC,EAAE,CAAA;AA6BJ,MAAM,UAAU,QAAQ,CAAC,EACvB,QAAQ,EACR,UAAU,EACV,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,EACrB,UAAU,EAAE,eAAe,EAC3B,aAAa,EACb,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,QAAQ,EACR,YAAY,GAAG,mBAAmB,EAClC,SAAS,EACT,kBAAkB,GAAG,IAAI,EACzB,qBAAqB,GAAG,IAAI,GACd;IACd,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IAC/C,MAAM,cAAc,GAAG;QACrB,GAAG,iBAAiB;QACpB,GAAG,CAAC,qBAAqB,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,IAAI,CAAC;QACrE,GAAG,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,kCAAkC,CAAC;QACnE,GAAG,eAAe;KACnB,CAAA;IACD,MAAM,UAAU,GACd,UAAU,EAAE,MAAM,CAAC,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE;QACpC,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,GAAG,SAAS,CAAC,MAAM,CAAA;QAC/C,OAAO,GAAG,CAAA;IACZ,CAAC,EAAE,cAAc,CAAC,IAAI,cAAc,CAAA;IAEtC,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,iBAAiB,GAAG;YACxB,eAAe;YACf,4BAA4B;YAC5B,GAAG,WAAW,CAAC,aAAa;SAC7B,CAAA;QAED,IAAI,aAAa,EAAE,CAAC;YAClB,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QACtC,CAAC;QAED,6EAA6E;QAC7E,qCAAqC;QACrC,IAAI,kBAAkB,EAAE,CAAC;YACvB,+DAA+D;YAC/D,8CAA8C;YAC9C,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;QAC7D,CAAC;QAED,OAAO,CAAC,GAAG,iBAAiB,EAAE,GAAG,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC,CAAA;IACzD,CAAC,EAAE,CAAC,WAAW,CAAC,aAAa,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAA;IAE7D,OAAO,CACL,KAAC,aAAa,IACZ,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,eAAe,EAAE,SAAS,CAAC,EAC7C,aAAa,EAAE,mBAAmB,EAClC,aAAa,EAAE,CAAC,GAAG,CAAC,aAAa,IAAI,EAAE,CAAC,EAAE,GAAG,WAAW,CAAC,aAAa,CAAC,EACvE,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,YAEzB,QAAQ,GACK,CACjB,CAAA;AACH,CAAC;AAED,MAAM,GAAG,GAAsB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IACzD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IACxD,OAAO,CACL,KAAC,SAAS,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,YAChD,IAAI,GACK,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAsB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACjE,eAAM,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAQ,CAClE,CAAA;AAED,MAAM,MAAM,GAAsB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACzE,KAAC,QAAQ,IAAC,EAAE,EAAC,GAAG,KAAK,KAAK,YACvB,QAAQ,GACA,CACZ,CAAA;AAED,+CAA+C;AAC/C,MAAM,SAAS,GAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC1E,OAAO,CACL,gBAAQ,IAAI,YACT,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACnC,mEAAmE;QACnE,0EAA0E;QAC1E,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,eAAS,CAAC,CAAI,CAAC,CAAC,CAAC,KAAK,CAC1C,GACE,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAsC;IAC3D,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,GAAG;IACR,CAAC,EAAE,MAAM;IACT,EAAE,EAAE,SAAS;CACd,CAAA;AAED,MAAM,oBAAoB,GAAsB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1E,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IACxD,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,YACjC,KAAC,aAAa,CAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,YAAG,IAAI,GAAsB,GACrD,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,kCAAkC,GAAsC;IAC5E,GAAG,EAAE,oBAAoB;CACjB,CAAA;AAEV,MAAM,cAAc,GAAsB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IACpE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IACxD,OAAO,CACL,KAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,YAC3D,IAAI,GACgB,CACxB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,iCAAiC,GAAsC;IAC3E,GAAG,EAAE,cAAc;CACX,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Children, useMemo, type ComponentProps, type FC, type ReactNode } from \"react\"\nimport ReactMarkdown from \"react-markdown\"\nimport remarkBreaks from \"remark-breaks\"\nimport remarkDirective from \"remark-directive\"\nimport remarkGfm from \"remark-gfm\"\n\nimport { CodeBlock, CodeBlockBase } from \"../CodeBlock/CodeBlock\"\nimport { CollapsibleCodeBlock } from \"../CodeBlock/CollapsibleCodeBlock\"\nimport { TextLink } from \"../TextLink/TextLink\"\nimport { reactMarkdownRemarkDirective, type MarkdownDirective } from \"./directives\"\nimport s from \"./Markdown.module.css\"\nimport { defaultUrlTransform } from \"./urlTransform\"\nimport { useMathPlugins } from \"./useMathPlugins\"\nimport { useParseMarkdownPre } from \"./useParseMarkdownPre\"\n\nconst supportsLookbehind = (() => {\n  try {\n    new RegExp(\"(?<=a)b\")\n    return true\n  } catch {\n    return false\n  }\n})()\n\nexport type MarkdownComponent = FC<{\n  children?: ReactNode\n  className?: string\n  node: Record<string, unknown>\n}>\n\nexport type MarkdownProps = {\n  children: string\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  directives?: MarkdownDirective<any>[]\n  /** Determines if remark-math plugins should be loaded for rendering LaTeX */\n  includeMath?: boolean\n  /** Determines whether single newlines should insert <br> tags */\n  breakNewLines?: boolean\n  components?: Record<string, MarkdownComponent>\n  remarkPlugins?: ComponentProps<typeof ReactMarkdown>[\"remarkPlugins\"]\n  rehypePlugins?: ComponentProps<typeof ReactMarkdown>[\"rehypePlugins\"]\n  allowedElements?: ComponentProps<typeof ReactMarkdown>[\"allowedElements\"]\n  disallowedElements?: ComponentProps<typeof ReactMarkdown>[\"disallowedElements\"]\n  urlTransform?: ComponentProps<typeof ReactMarkdown>[\"urlTransform\"]\n  skipHtml?: boolean\n  className?: string\n  copyableCodeBlocks?: boolean\n  /** Determines if code blocks should use the collapsible view with \"View Code\" button */\n  collapsibleCodeBlocks?: boolean\n}\n\nexport function Markdown({\n  children,\n  directives,\n  includeMath = false,\n  breakNewLines = false,\n  components: propsComponents,\n  remarkPlugins,\n  rehypePlugins,\n  allowedElements,\n  disallowedElements,\n  skipHtml,\n  urlTransform = defaultUrlTransform,\n  className,\n  copyableCodeBlocks = true,\n  collapsibleCodeBlocks = true,\n}: MarkdownProps) {\n  const mathPlugins = useMathPlugins(includeMath)\n  const baseComponents = {\n    ...COMMON_COMPONENTS,\n    ...(collapsibleCodeBlocks ? COLLAPSIBLE_CODE_BLOCK_COMPONENTS : null),\n    ...(copyableCodeBlocks ? null : NON_COPYABLE_CODE_BLOCK_COMPONENTS),\n    ...propsComponents,\n  }\n  const components =\n    directives?.reduce((acc, directive) => {\n      acc[directive.directiveName] = directive.render\n      return acc\n    }, baseComponents) ?? baseComponents\n\n  const mergedRemarkPlugins = useMemo(() => {\n    const baseRemarkPlugins = [\n      remarkDirective,\n      reactMarkdownRemarkDirective,\n      ...mathPlugins.remarkPlugins,\n    ]\n\n    if (breakNewLines) {\n      baseRemarkPlugins.push(remarkBreaks)\n    }\n\n    // remark-gfm requires lookbehind support, which will throw in <= Safari 16.4\n    // with no easily available polyfill.\n    if (supportsLookbehind) {\n      // Do not treat single tilde as strikethrough to allow for more\n      // conversational use cases such as \"~$20-$30\"\n      baseRemarkPlugins.push([remarkGfm, { singleTilde: false }])\n    }\n\n    return [...baseRemarkPlugins, ...(remarkPlugins ?? [])]\n  }, [mathPlugins.remarkPlugins, remarkPlugins, breakNewLines])\n\n  return (\n    <ReactMarkdown\n      className={clsx(s.MarkdownContent, className)}\n      remarkPlugins={mergedRemarkPlugins}\n      rehypePlugins={[...(rehypePlugins ?? []), ...mathPlugins.rehypePlugins]}\n      components={components}\n      allowedElements={allowedElements}\n      disallowedElements={disallowedElements}\n      skipHtml={skipHtml}\n      urlTransform={urlTransform}\n    >\n      {children}\n    </ReactMarkdown>\n  )\n}\n\nconst Pre: MarkdownComponent = ({ children, className }) => {\n  const { code, language } = useParseMarkdownPre(children)\n  return (\n    <CodeBlock language={language} className={className}>\n      {code}\n    </CodeBlock>\n  )\n}\n\nconst InlineCode: MarkdownComponent = ({ children, className }) => (\n  <code className={clsx(s.InlineCode, className)}>{children}</code>\n)\n\nconst Anchor: MarkdownComponent = ({ children, node: _node, ...props }) => (\n  <TextLink as=\"a\" {...props}>\n    {children}\n  </TextLink>\n)\n\n// Sourced from common markdown implementations\nconst TableCell: MarkdownComponent = ({ node: _node, children, ...rest }) => {\n  return (\n    <td {...rest}>\n      {Children.map(children, (child, i) =>\n        // ReactMarkdown does not support <br> tags in tables without using\n        // remark-html (which may not be safe), so we need to manually handle them\n        child === \"<br>\" ? <br key={i} /> : child,\n      )}\n    </td>\n  )\n}\n\nconst COMMON_COMPONENTS: Record<string, MarkdownComponent> = {\n  code: InlineCode,\n  pre: Pre,\n  a: Anchor,\n  td: TableCell,\n}\n\nconst NonCopyableCodeBlock: MarkdownComponent = ({ children, className }) => {\n  const { code, language } = useParseMarkdownPre(children)\n  return (\n    <CodeBlockBase className={className}>\n      <CodeBlockBase.Code language={language}>{code}</CodeBlockBase.Code>\n    </CodeBlockBase>\n  )\n}\n\nconst NON_COPYABLE_CODE_BLOCK_COMPONENTS: Record<string, MarkdownComponent> = {\n  pre: NonCopyableCodeBlock,\n} as const\n\nconst CollapsiblePre: MarkdownComponent = ({ children, className }) => {\n  const { code, language } = useParseMarkdownPre(children)\n  return (\n    <CollapsibleCodeBlock language={language} className={className}>\n      {code}\n    </CollapsibleCodeBlock>\n  )\n}\n\nconst COLLAPSIBLE_CODE_BLOCK_COMPONENTS: Record<string, MarkdownComponent> = {\n  pre: CollapsiblePre,\n} as const\n"]}
+{"version":3,"file":"Markdown.js","sourceRoot":"","sources":["../../../../src/components/Markdown/Markdown.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Children, useMemo, type ComponentProps, type FC, type ReactNode } from \"react\"\nimport ReactMarkdown from \"react-markdown\"\nimport remarkBreaks from \"remark-breaks\"\nimport remarkDirective from \"remark-directive\"\nimport remarkGfm from \"remark-gfm\"\n\nimport { CodeBlock, CodeBlockBase } from \"../CodeBlock/CodeBlock\"\nimport { CollapsibleCodeBlock } from \"../CodeBlock/CollapsibleCodeBlock\"\nimport { TextLink } from \"../TextLink/TextLink\"\nimport { reactMarkdownRemarkDirective, type MarkdownDirective } from \"./directives\"\nimport s from \"@plexui/styles/components/Markdown/Markdown.module.css\"\nimport { defaultUrlTransform } from \"./urlTransform\"\nimport { useMathPlugins } from \"./useMathPlugins\"\nimport { useParseMarkdownPre } from \"./useParseMarkdownPre\"\n\nconst supportsLookbehind = (() => {\n  try {\n    new RegExp(\"(?<=a)b\")\n    return true\n  } catch {\n    return false\n  }\n})()\n\nexport type MarkdownComponent = FC<{\n  children?: ReactNode\n  className?: string\n  node: Record<string, unknown>\n}>\n\nexport type MarkdownProps = {\n  children: string\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  directives?: MarkdownDirective<any>[]\n  /** Determines if remark-math plugins should be loaded for rendering LaTeX */\n  includeMath?: boolean\n  /** Determines whether single newlines should insert <br> tags */\n  breakNewLines?: boolean\n  components?: Record<string, MarkdownComponent>\n  remarkPlugins?: ComponentProps<typeof ReactMarkdown>[\"remarkPlugins\"]\n  rehypePlugins?: ComponentProps<typeof ReactMarkdown>[\"rehypePlugins\"]\n  allowedElements?: ComponentProps<typeof ReactMarkdown>[\"allowedElements\"]\n  disallowedElements?: ComponentProps<typeof ReactMarkdown>[\"disallowedElements\"]\n  urlTransform?: ComponentProps<typeof ReactMarkdown>[\"urlTransform\"]\n  skipHtml?: boolean\n  className?: string\n  copyableCodeBlocks?: boolean\n  /** Determines if code blocks should use the collapsible view with \"View Code\" button */\n  collapsibleCodeBlocks?: boolean\n}\n\nexport function Markdown({\n  children,\n  directives,\n  includeMath = false,\n  breakNewLines = false,\n  components: propsComponents,\n  remarkPlugins,\n  rehypePlugins,\n  allowedElements,\n  disallowedElements,\n  skipHtml,\n  urlTransform = defaultUrlTransform,\n  className,\n  copyableCodeBlocks = true,\n  collapsibleCodeBlocks = true,\n}: MarkdownProps) {\n  const mathPlugins = useMathPlugins(includeMath)\n  const baseComponents = {\n    ...COMMON_COMPONENTS,\n    ...(collapsibleCodeBlocks ? COLLAPSIBLE_CODE_BLOCK_COMPONENTS : null),\n    ...(copyableCodeBlocks ? null : NON_COPYABLE_CODE_BLOCK_COMPONENTS),\n    ...propsComponents,\n  }\n  const components =\n    directives?.reduce((acc, directive) => {\n      acc[directive.directiveName] = directive.render\n      return acc\n    }, baseComponents) ?? baseComponents\n\n  const mergedRemarkPlugins = useMemo(() => {\n    const baseRemarkPlugins = [\n      remarkDirective,\n      reactMarkdownRemarkDirective,\n      ...mathPlugins.remarkPlugins,\n    ]\n\n    if (breakNewLines) {\n      baseRemarkPlugins.push(remarkBreaks)\n    }\n\n    // remark-gfm requires lookbehind support, which will throw in <= Safari 16.4\n    // with no easily available polyfill.\n    if (supportsLookbehind) {\n      // Do not treat single tilde as strikethrough to allow for more\n      // conversational use cases such as \"~$20-$30\"\n      baseRemarkPlugins.push([remarkGfm, { singleTilde: false }])\n    }\n\n    return [...baseRemarkPlugins, ...(remarkPlugins ?? [])]\n  }, [mathPlugins.remarkPlugins, remarkPlugins, breakNewLines])\n\n  return (\n    <ReactMarkdown\n      className={clsx(s.MarkdownContent, className)}\n      remarkPlugins={mergedRemarkPlugins}\n      rehypePlugins={[...(rehypePlugins ?? []), ...mathPlugins.rehypePlugins]}\n      components={components}\n      allowedElements={allowedElements}\n      disallowedElements={disallowedElements}\n      skipHtml={skipHtml}\n      urlTransform={urlTransform}\n    >\n      {children}\n    </ReactMarkdown>\n  )\n}\n\nconst Pre: MarkdownComponent = ({ children, className }) => {\n  const { code, language } = useParseMarkdownPre(children)\n  return (\n    <CodeBlock language={language} className={className}>\n      {code}\n    </CodeBlock>\n  )\n}\n\nconst InlineCode: MarkdownComponent = ({ children, className }) => (\n  <code className={clsx(s.InlineCode, className)}>{children}</code>\n)\n\nconst Anchor: MarkdownComponent = ({ children, node: _node, ...props }) => (\n  <TextLink as=\"a\" {...props}>\n    {children}\n  </TextLink>\n)\n\n// Sourced from common markdown implementations\nconst TableCell: MarkdownComponent = ({ node: _node, children, ...rest }) => {\n  return (\n    <td {...rest}>\n      {Children.map(children, (child, i) =>\n        // ReactMarkdown does not support <br> tags in tables without using\n        // remark-html (which may not be safe), so we need to manually handle them\n        child === \"<br>\" ? <br key={i} /> : child,\n      )}\n    </td>\n  )\n}\n\nconst COMMON_COMPONENTS: Record<string, MarkdownComponent> = {\n  code: InlineCode,\n  pre: Pre,\n  a: Anchor,\n  td: TableCell,\n}\n\nconst NonCopyableCodeBlock: MarkdownComponent = ({ children, className }) => {\n  const { code, language } = useParseMarkdownPre(children)\n  return (\n    <CodeBlockBase className={className}>\n      <CodeBlockBase.Code language={language}>{code}</CodeBlockBase.Code>\n    </CodeBlockBase>\n  )\n}\n\nconst NON_COPYABLE_CODE_BLOCK_COMPONENTS: Record<string, MarkdownComponent> = {\n  pre: NonCopyableCodeBlock,\n} as const\n\nconst CollapsiblePre: MarkdownComponent = ({ children, className }) => {\n  const { code, language } = useParseMarkdownPre(children)\n  return (\n    <CollapsibleCodeBlock language={language} className={className}>\n      {code}\n    </CollapsibleCodeBlock>\n  )\n}\n\nconst COLLAPSIBLE_CODE_BLOCK_COMPONENTS: Record<string, MarkdownComponent> = {\n  pre: CollapsiblePre,\n} as const\n"]}

package/dist/es/components/Markdown/directives.js

@@ -1,7 +1,7 @@
 import {} from "react";
 import { visit } from "unist-util-visit";
-import { createId } from "../../lib/ids";
-import { decodeBase64, encodeBase64 } from "../../lib/safeBase64";
+import { createId } from "../../lib/ids.js";
+import { decodeBase64, encodeBase64 } from "../../lib/safeBase64.js";
 export function createMarkdownDirective({ render, name, mode, }) {
     const prefix = `OaiMdDirective_${name}`;
     const uniqueName = createId(prefix, prefix.length + 6);

package/dist/es/components/Markdown/index.js

@@ -1,6 +1,5 @@
-/* eslint-disable react-refresh/only-export-components */
-export { createMarkdownDirective } from "./directives";
-export { Markdown } from "./Markdown";
-export { defaultUrlTransform } from "./urlTransform";
-export { useParseMarkdownPre } from "./useParseMarkdownPre";
+export { createMarkdownDirective } from "./directives.js";
+export { Markdown } from "./Markdown.js";
+export { defaultUrlTransform } from "./urlTransform.js";
+export { useParseMarkdownPre } from "./useParseMarkdownPre.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Markdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Markdown/index.tsx"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EAAE,QAAQ,EAA8C,MAAM,YAAY,CAAA;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA","sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nexport { createMarkdownDirective } from \"./directives\"\nexport { Markdown, type MarkdownComponent, type MarkdownProps } from \"./Markdown\"\nexport { defaultUrlTransform } from \"./urlTransform\"\n\nexport { useParseMarkdownPre } from \"./useParseMarkdownPre\"\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Markdown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EAAE,QAAQ,EAA8C,MAAM,YAAY,CAAA;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA","sourcesContent":["export { createMarkdownDirective } from \"./directives\"\nexport { Markdown, type MarkdownComponent, type MarkdownProps } from \"./Markdown\"\nexport { defaultUrlTransform } from \"./urlTransform\"\n\nexport { useParseMarkdownPre } from \"./useParseMarkdownPre\"\n"]}