@solibo/solibo-ui 0.5.16 → 1.0.0

package/dist/components/iframe/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/iframe/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { type ComponentPropsWithoutRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Dialog } from '../dialog';\nimport styles from './styles.module.css';\n\nconst MIN_AUTO_HEIGHT = 120;\nconst MAX_AUTO_HEIGHT = 12000;\nconst AUTO_HEIGHT_BUFFER = 8;\n\nexport type IframeProps = Omit<ComponentPropsWithoutRef<'iframe'>, 'src' | 'srcDoc' | 'title'> & {\n  accessibleLabel: string;\n  autoResize?: boolean;\n  closeFullscreenLabel?: string;\n  fullscreenLabel?: string;\n  hasFullscreenView?: boolean;\n  srcDoc: string;\n};\n\nexport const Iframe = ({\n  accessibleLabel,\n  autoResize = false,\n  className,\n  closeFullscreenLabel = 'Close fullscreen',\n  fullscreenLabel = 'View in fullscreen',\n  hasFullscreenView = true,\n  loading = 'lazy',\n  onLoad,\n  referrerPolicy = 'no-referrer',\n  sandbox = '',\n  srcDoc,\n  style,\n  ...props\n}: IframeProps) => {\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const measurementFrameRef = useRef<number | null>(null);\n  const followUpMeasurementTimeoutRef = useRef<number | null>(null);\n  const [measuredHeight, setMeasuredHeight] = useState(MIN_AUTO_HEIGHT);\n  const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);\n\n  const clearScheduledMeasurements = useCallback(() => {\n    if (measurementFrameRef.current !== null) {\n      window.cancelAnimationFrame(measurementFrameRef.current);\n      measurementFrameRef.current = null;\n    }\n\n    if (followUpMeasurementTimeoutRef.current !== null) {\n      window.clearTimeout(followUpMeasurementTimeoutRef.current);\n      followUpMeasurementTimeoutRef.current = null;\n    }\n  }, []);\n\n  const measureSize = useCallback(() => {\n    if (!autoResize) return;\n\n    const iframe = iframeRef.current;\n    const iframeDocument = iframe?.contentDocument;\n    if (!iframe || !iframeDocument) return;\n\n    const renderedHeight = iframe.style.height;\n\n    try {\n      // measure from a stable viewport height so content sized with percentages or\n      // viewport units cannot feed the iframe's previous height back into itself\n      iframe.style.height = `${MIN_AUTO_HEIGHT}px`;\n\n      const content =\n        iframeDocument.querySelector<HTMLElement>('[data-iframe-content]') ?? iframeDocument.body;\n      const contentRect = content.getBoundingClientRect();\n      const { body, documentElement } = iframeDocument;\n      const height = Math.min(\n        Math.max(\n          Math.ceil(\n            Math.max(\n              content.scrollHeight,\n              content.offsetHeight,\n              contentRect.height,\n              body.scrollHeight,\n              body.offsetHeight,\n              documentElement.scrollHeight,\n              documentElement.offsetHeight\n            ) + AUTO_HEIGHT_BUFFER\n          ),\n          MIN_AUTO_HEIGHT\n        ),\n        MAX_AUTO_HEIGHT\n      );\n\n      setMeasuredHeight(height);\n    } catch {\n      // cross-origin iframe content cannot be measured; retain minimum height\n    } finally {\n      iframe.style.height = renderedHeight;\n    }\n  }, [autoResize]);\n\n  const scheduleSizeMeasurement = useCallback(() => {\n    if (!autoResize || measurementFrameRef.current !== null) return;\n\n    measurementFrameRef.current = window.requestAnimationFrame(() => {\n      measurementFrameRef.current = null;\n      measureSize();\n\n      if (followUpMeasurementTimeoutRef.current !== null) {\n        window.clearTimeout(followUpMeasurementTimeoutRef.current);\n      }\n\n      followUpMeasurementTimeoutRef.current = window.setTimeout(() => {\n        followUpMeasurementTimeoutRef.current = null;\n        measureSize();\n      }, 250);\n    });\n  }, [autoResize, measureSize]);\n\n  const handleLoad: NonNullable<IframeProps['onLoad']> = (event) => {\n    scheduleSizeMeasurement();\n\n    const iframeDocument = iframeRef.current?.contentDocument;\n    Array.from(iframeDocument?.images ?? []).forEach((image) => {\n      if (image.complete) return;\n      image.addEventListener('load', scheduleSizeMeasurement, { once: true });\n      image.addEventListener('error', scheduleSizeMeasurement, { once: true });\n    });\n    iframeDocument?.fonts?.ready.then(scheduleSizeMeasurement).catch(() => undefined);\n\n    onLoad?.(event);\n  };\n\n  useEffect(() => {\n    if (!autoResize) return undefined;\n\n    clearScheduledMeasurements();\n    setMeasuredHeight(MIN_AUTO_HEIGHT);\n    scheduleSizeMeasurement();\n\n    return clearScheduledMeasurements;\n  }, [autoResize, clearScheduledMeasurements, scheduleSizeMeasurement, srcDoc]);\n\n  useEffect(() => {\n    if (!autoResize) return undefined;\n\n    window.addEventListener('resize', scheduleSizeMeasurement);\n    window.visualViewport?.addEventListener('resize', scheduleSizeMeasurement);\n\n    return () => {\n      window.removeEventListener('resize', scheduleSizeMeasurement);\n      window.visualViewport?.removeEventListener('resize', scheduleSizeMeasurement);\n    };\n  }, [autoResize, scheduleSizeMeasurement]);\n\n  return (\n    <div className={styles.wrapper}>\n      {hasFullscreenView && (\n        <div className={styles.toolbar}>\n          <Button\n            aria-expanded={isFullscreenOpen}\n            aria-haspopup='dialog'\n            onClick={() => setIsFullscreenOpen(true)}\n            variant='tertiary'\n          >\n            {fullscreenLabel}\n          </Button>\n        </div>\n      )}\n      <iframe\n        {...props}\n        className={cx(styles.iframe, className)}\n        loading={loading}\n        onLoad={handleLoad}\n        ref={iframeRef}\n        referrerPolicy={referrerPolicy}\n        sandbox={sandbox}\n        srcDoc={srcDoc}\n        style={\n          autoResize\n            ? {\n                ...style,\n                height: measuredHeight,\n                minHeight: MIN_AUTO_HEIGHT,\n              }\n            : style\n        }\n        title={accessibleLabel}\n      />\n      {isFullscreenOpen && (\n        <Dialog\n          aria-label={`${accessibleLabel} fullscreen`}\n          className={styles['fullscreen-dialog']}\n          onKeyDown={(event) => {\n            if (event.key === 'Escape') setIsFullscreenOpen(false);\n          }}\n          open\n          setOpen={setIsFullscreenOpen}\n        >\n          <div className={styles['fullscreen-toolbar']}>\n            <Button\n              autoFocus\n              onClick={() => setIsFullscreenOpen(false)}\n            >\n              {closeFullscreenLabel}\n            </Button>\n          </div>\n          <iframe\n            {...props}\n            className={cx(styles.iframe, styles['fullscreen-iframe'], className)}\n            loading='eager'\n            referrerPolicy={referrerPolicy}\n            sandbox={sandbox}\n            srcDoc={srcDoc}\n            title={`${accessibleLabel} fullscreen`}\n          />\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["MIN_AUTO_HEIGHT","MAX_AUTO_HEIGHT","AUTO_HEIGHT_BUFFER","Iframe","accessibleLabel","autoResize","className","closeFullscreenLabel","fullscreenLabel","hasFullscreenView","loading","onLoad","referrerPolicy","sandbox","srcDoc","style","props","iframeRef","useRef","measurementFrameRef","followUpMeasurementTimeoutRef","measuredHeight","setMeasuredHeight","useState","isFullscreenOpen","setIsFullscreenOpen","clearScheduledMeasurements","useCallback","current","window","cancelAnimationFrame","clearTimeout","measureSize","iframe","iframeDocument","contentDocument","renderedHeight","height","content","querySelector","body","contentRect","getBoundingClientRect","documentElement","Math","min","max","ceil","scrollHeight","offsetHeight","scheduleSizeMeasurement","requestAnimationFrame","setTimeout","handleLoad","event","Array","from","images","forEach","image","complete","addEventListener","once","fonts","ready","then","catch","useEffect","visualViewport","removeEventListener","styles","wrapper","toolbar","jsx","Button","cx","minHeight","jsxs","Dialog","key"],"mappings":"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"}

package/dist/components/iframe/index.js

@@ -0,0 +1,93 @@
+import { jsxs as I, jsx as s } from "react/jsx-runtime";
+import { t as N } from "../../classix-DG18itHa.js";
+import { useRef as v, useState as O, useCallback as H, useEffect as C } from "react";
+import { Button as S } from "../button/index.js";
+import { Dialog as L } from "../dialog/index.js";
+import '../../assets/index18.css';const K = "_wrapper_2h6kn_1", X = "_toolbar_2h6kn_6", D = "_iframe_2h6kn_16", o = {
+  wrapper: K,
+  toolbar: X,
+  "fullscreen-toolbar": "_fullscreen-toolbar_2h6kn_7",
+  iframe: D,
+  "fullscreen-dialog": "_fullscreen-dialog_2h6kn_22",
+  "fullscreen-iframe": "_fullscreen-iframe_2h6kn_39"
+}, u = 120, J = 12e3, Q = 8, R = ({
+  accessibleLabel: d,
+  autoResize: n = !1,
+  className: y,
+  closeFullscreenLabel: U = "Close fullscreen",
+  fullscreenLabel: B = "View in fullscreen",
+  hasFullscreenView: G = !0,
+  loading: V = "lazy",
+  onLoad: h,
+  referrerPolicy: E = "no-referrer",
+  sandbox: k = "",
+  srcDoc: p,
+  style: M,
+  ...T
+}) => {
+  const w = v(null), i = v(null), l = v(null), [$, F] = O(u), [A, f] = O(!1), g = H(() => {
+    i.current !== null && (window.cancelAnimationFrame(i.current), i.current = null), l.current !== null && (window.clearTimeout(l.current), l.current = null);
+  }, []), _ = H(() => {
+    if (!n) return;
+    const e = w.current, r = e == null ? void 0 : e.contentDocument;
+    if (!e || !r) return;
+    const m = e.style.height;
+    try {
+      e.style.height = `${u}px`;
+      const c = r.querySelector("[data-iframe-content]") ?? r.body, a = c.getBoundingClientRect(), {
+        body: b,
+        documentElement: x
+      } = r, q = Math.min(Math.max(Math.ceil(Math.max(c.scrollHeight, c.offsetHeight, a.height, b.scrollHeight, b.offsetHeight, x.scrollHeight, x.offsetHeight) + Q), u), J);
+      F(q);
+    } catch {
+    } finally {
+      e.style.height = m;
+    }
+  }, [n]), t = H(() => {
+    !n || i.current !== null || (i.current = window.requestAnimationFrame(() => {
+      i.current = null, _(), l.current !== null && window.clearTimeout(l.current), l.current = window.setTimeout(() => {
+        l.current = null, _();
+      }, 250);
+    }));
+  }, [n, _]), j = (e) => {
+    var m, c;
+    t();
+    const r = (m = w.current) == null ? void 0 : m.contentDocument;
+    Array.from((r == null ? void 0 : r.images) ?? []).forEach((a) => {
+      a.complete || (a.addEventListener("load", t, {
+        once: !0
+      }), a.addEventListener("error", t, {
+        once: !0
+      }));
+    }), (c = r == null ? void 0 : r.fonts) == null || c.ready.then(t).catch(() => {
+    }), h == null || h(e);
+  };
+  return C(() => {
+    if (n)
+      return g(), F(u), t(), g;
+  }, [n, g, t, p]), C(() => {
+    var e;
+    if (n)
+      return window.addEventListener("resize", t), (e = window.visualViewport) == null || e.addEventListener("resize", t), () => {
+        var r;
+        window.removeEventListener("resize", t), (r = window.visualViewport) == null || r.removeEventListener("resize", t);
+      };
+  }, [n, t]), /* @__PURE__ */ I("div", { className: o.wrapper, "data-component": "iframe", children: [
+    G && /* @__PURE__ */ s("div", { className: o.toolbar, children: /* @__PURE__ */ s(S, { "aria-expanded": A, "aria-haspopup": "dialog", onClick: () => f(!0), variant: "tertiary", children: B }) }),
+    /* @__PURE__ */ s("iframe", { ...T, className: N(o.iframe, y), loading: V, onLoad: j, ref: w, referrerPolicy: E, sandbox: k, srcDoc: p, style: n ? {
+      ...M,
+      height: $,
+      minHeight: u
+    } : M, title: d }),
+    A && /* @__PURE__ */ I(L, { "aria-label": `${d} fullscreen`, className: o["fullscreen-dialog"], onKeyDown: (e) => {
+      e.key === "Escape" && f(!1);
+    }, open: !0, setOpen: f, children: [
+      /* @__PURE__ */ s("div", { className: o["fullscreen-toolbar"], children: /* @__PURE__ */ s(S, { autoFocus: !0, onClick: () => f(!1), children: U }) }),
+      /* @__PURE__ */ s("iframe", { ...T, className: N(o.iframe, o["fullscreen-iframe"], y), loading: "eager", referrerPolicy: E, sandbox: k, srcDoc: p, title: `${d} fullscreen` })
+    ] })
+  ] });
+};
+export {
+  R as Iframe
+};
+//# sourceMappingURL=index.js.map

package/dist/components/iframe/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/iframe/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { type ComponentPropsWithoutRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Dialog } from '../dialog';\nimport styles from './styles.module.css';\n\nconst MIN_AUTO_HEIGHT = 120;\nconst MAX_AUTO_HEIGHT = 12000;\nconst AUTO_HEIGHT_BUFFER = 8;\n\nexport type IframeProps = Omit<ComponentPropsWithoutRef<'iframe'>, 'src' | 'srcDoc' | 'title'> & {\n  accessibleLabel: string;\n  autoResize?: boolean;\n  closeFullscreenLabel?: string;\n  fullscreenLabel?: string;\n  hasFullscreenView?: boolean;\n  srcDoc: string;\n};\n\nexport const Iframe = ({\n  accessibleLabel,\n  autoResize = false,\n  className,\n  closeFullscreenLabel = 'Close fullscreen',\n  fullscreenLabel = 'View in fullscreen',\n  hasFullscreenView = true,\n  loading = 'lazy',\n  onLoad,\n  referrerPolicy = 'no-referrer',\n  sandbox = '',\n  srcDoc,\n  style,\n  ...props\n}: IframeProps) => {\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const measurementFrameRef = useRef<number | null>(null);\n  const followUpMeasurementTimeoutRef = useRef<number | null>(null);\n  const [measuredHeight, setMeasuredHeight] = useState(MIN_AUTO_HEIGHT);\n  const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);\n\n  const clearScheduledMeasurements = useCallback(() => {\n    if (measurementFrameRef.current !== null) {\n      window.cancelAnimationFrame(measurementFrameRef.current);\n      measurementFrameRef.current = null;\n    }\n\n    if (followUpMeasurementTimeoutRef.current !== null) {\n      window.clearTimeout(followUpMeasurementTimeoutRef.current);\n      followUpMeasurementTimeoutRef.current = null;\n    }\n  }, []);\n\n  const measureSize = useCallback(() => {\n    if (!autoResize) return;\n\n    const iframe = iframeRef.current;\n    const iframeDocument = iframe?.contentDocument;\n    if (!iframe || !iframeDocument) return;\n\n    const renderedHeight = iframe.style.height;\n\n    try {\n      // measure from a stable viewport height so content sized with percentages or\n      // viewport units cannot feed the iframe's previous height back into itself\n      iframe.style.height = `${MIN_AUTO_HEIGHT}px`;\n\n      const content =\n        iframeDocument.querySelector<HTMLElement>('[data-iframe-content]') ?? iframeDocument.body;\n      const contentRect = content.getBoundingClientRect();\n      const { body, documentElement } = iframeDocument;\n      const height = Math.min(\n        Math.max(\n          Math.ceil(\n            Math.max(\n              content.scrollHeight,\n              content.offsetHeight,\n              contentRect.height,\n              body.scrollHeight,\n              body.offsetHeight,\n              documentElement.scrollHeight,\n              documentElement.offsetHeight\n            ) + AUTO_HEIGHT_BUFFER\n          ),\n          MIN_AUTO_HEIGHT\n        ),\n        MAX_AUTO_HEIGHT\n      );\n\n      setMeasuredHeight(height);\n    } catch {\n      // cross-origin iframe content cannot be measured; retain minimum height\n    } finally {\n      iframe.style.height = renderedHeight;\n    }\n  }, [autoResize]);\n\n  const scheduleSizeMeasurement = useCallback(() => {\n    if (!autoResize || measurementFrameRef.current !== null) return;\n\n    measurementFrameRef.current = window.requestAnimationFrame(() => {\n      measurementFrameRef.current = null;\n      measureSize();\n\n      if (followUpMeasurementTimeoutRef.current !== null) {\n        window.clearTimeout(followUpMeasurementTimeoutRef.current);\n      }\n\n      followUpMeasurementTimeoutRef.current = window.setTimeout(() => {\n        followUpMeasurementTimeoutRef.current = null;\n        measureSize();\n      }, 250);\n    });\n  }, [autoResize, measureSize]);\n\n  const handleLoad: NonNullable<IframeProps['onLoad']> = (event) => {\n    scheduleSizeMeasurement();\n\n    const iframeDocument = iframeRef.current?.contentDocument;\n    Array.from(iframeDocument?.images ?? []).forEach((image) => {\n      if (image.complete) return;\n      image.addEventListener('load', scheduleSizeMeasurement, { once: true });\n      image.addEventListener('error', scheduleSizeMeasurement, { once: true });\n    });\n    iframeDocument?.fonts?.ready.then(scheduleSizeMeasurement).catch(() => undefined);\n\n    onLoad?.(event);\n  };\n\n  useEffect(() => {\n    if (!autoResize) return undefined;\n\n    clearScheduledMeasurements();\n    setMeasuredHeight(MIN_AUTO_HEIGHT);\n    scheduleSizeMeasurement();\n\n    return clearScheduledMeasurements;\n  }, [autoResize, clearScheduledMeasurements, scheduleSizeMeasurement, srcDoc]);\n\n  useEffect(() => {\n    if (!autoResize) return undefined;\n\n    window.addEventListener('resize', scheduleSizeMeasurement);\n    window.visualViewport?.addEventListener('resize', scheduleSizeMeasurement);\n\n    return () => {\n      window.removeEventListener('resize', scheduleSizeMeasurement);\n      window.visualViewport?.removeEventListener('resize', scheduleSizeMeasurement);\n    };\n  }, [autoResize, scheduleSizeMeasurement]);\n\n  return (\n    <div className={styles.wrapper}>\n      {hasFullscreenView && (\n        <div className={styles.toolbar}>\n          <Button\n            aria-expanded={isFullscreenOpen}\n            aria-haspopup='dialog'\n            onClick={() => setIsFullscreenOpen(true)}\n            variant='tertiary'\n          >\n            {fullscreenLabel}\n          </Button>\n        </div>\n      )}\n      <iframe\n        {...props}\n        className={cx(styles.iframe, className)}\n        loading={loading}\n        onLoad={handleLoad}\n        ref={iframeRef}\n        referrerPolicy={referrerPolicy}\n        sandbox={sandbox}\n        srcDoc={srcDoc}\n        style={\n          autoResize\n            ? {\n                ...style,\n                height: measuredHeight,\n                minHeight: MIN_AUTO_HEIGHT,\n              }\n            : style\n        }\n        title={accessibleLabel}\n      />\n      {isFullscreenOpen && (\n        <Dialog\n          aria-label={`${accessibleLabel} fullscreen`}\n          className={styles['fullscreen-dialog']}\n          onKeyDown={(event) => {\n            if (event.key === 'Escape') setIsFullscreenOpen(false);\n          }}\n          open\n          setOpen={setIsFullscreenOpen}\n        >\n          <div className={styles['fullscreen-toolbar']}>\n            <Button\n              autoFocus\n              onClick={() => setIsFullscreenOpen(false)}\n            >\n              {closeFullscreenLabel}\n            </Button>\n          </div>\n          <iframe\n            {...props}\n            className={cx(styles.iframe, styles['fullscreen-iframe'], className)}\n            loading='eager'\n            referrerPolicy={referrerPolicy}\n            sandbox={sandbox}\n            srcDoc={srcDoc}\n            title={`${accessibleLabel} fullscreen`}\n          />\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["MIN_AUTO_HEIGHT","MAX_AUTO_HEIGHT","AUTO_HEIGHT_BUFFER","Iframe","accessibleLabel","autoResize","className","closeFullscreenLabel","fullscreenLabel","hasFullscreenView","loading","onLoad","referrerPolicy","sandbox","srcDoc","style","props","iframeRef","useRef","measurementFrameRef","followUpMeasurementTimeoutRef","measuredHeight","setMeasuredHeight","useState","isFullscreenOpen","setIsFullscreenOpen","clearScheduledMeasurements","useCallback","current","window","cancelAnimationFrame","clearTimeout","measureSize","iframe","iframeDocument","contentDocument","renderedHeight","height","content","querySelector","body","contentRect","getBoundingClientRect","documentElement","Math","min","max","ceil","scrollHeight","offsetHeight","scheduleSizeMeasurement","requestAnimationFrame","setTimeout","handleLoad","event","Array","from","images","forEach","image","complete","addEventListener","once","fonts","ready","then","catch","useEffect","visualViewport","removeEventListener","styles","wrapper","toolbar","jsx","Button","cx","minHeight","jsxs","Dialog","key"],"mappings":"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"}

package/dist/components/image/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index5.css');const d=require("react/jsx-runtime"),c=require("react"),o="_image_14j8z_1",y={image:o};function S({fadeDurationMs:n=250,showOnError:r=!0,onLoad:a,onError:i,style:l,...t}){const u=c.useRef(null),[m,s]=c.useState(!1);c.useEffect(()=>{s(!1)},[t.src,t.srcSet]),c.useEffect(()=>{const e=u.current;e&&e.complete&&e.naturalWidth>0&&s(!0)},[t.src,t.srcSet]);const f=e=>{s(!0),a==null||a(e)},g=e=>{r&&s(!0),i==null||i(e)};return d.jsx("img",{...t,className:y.image,onLoad:f,onError:g,ref:u,style:{...l,opacity:m?1:0,"--duration-override":`${n}ms`},"data-component":"image"})}exports.Image=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const d=require("react/jsx-runtime"),c=require("react"),o="_image_14j8z_1",y={image:o};function S({fadeDurationMs:n=250,showOnError:r=!0,onLoad:a,onError:i,style:l,...t}){const u=c.useRef(null),[m,s]=c.useState(!1);c.useEffect(()=>{s(!1)},[t.src,t.srcSet]),c.useEffect(()=>{const e=u.current;e&&e.complete&&e.naturalWidth>0&&s(!0)},[t.src,t.srcSet]);const f=e=>{s(!0),a==null||a(e)},g=e=>{r&&s(!0),i==null||i(e)};return d.jsx("img",{...t,className:y.image,onLoad:f,onError:g,ref:u,style:{...l,opacity:m?1:0,"--duration-override":`${n}ms`},"data-component":"image"})}exports.Image=S;
 //# sourceMappingURL=index.cjs.map

package/dist/components/image/index.js

@@ -1,6 +1,6 @@
 import { jsx as g } from "react/jsx-runtime";
 import { useRef as o, useState as h, useEffect as m } from "react";
-import '../../assets/index5.css';const y = "_image_14j8z_1", S = {
+import '../../assets/index17.css';const y = "_image_14j8z_1", S = {
   image: y
 };
 function x({

package/dist/components/input/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("../../classix-5H4IWnMA.cjs"),l=require("react"),P=require("../../icons-s-lGsxio.cjs"),T=require("../../utils-DBzf7CFq.cjs"),u=require("../../styles.module-BON5Bi9g.cjs");function b({className:C,defaultCountryCode:h="+47",disabled:a=!1,icon:i,label:m,placeholder:v,ref:g,required:c,type:t="text",...e}){const[r,x]=l.useState(""),[o,S]=l.useState(""),{onChange:N,value:j,...q}=e,{touched:p,onBlur:f}=T.useTouched(j===""),y=i&&t!=="radio"&&t!=="datetime-local"?{"--icon-svg":P.iconSVG(i,!0)}:void 0;l.useEffect(()=>{if(typeof e.onChange=="function"&&t==="tel"){const s={name:e.name,value:o?(r||h).split(" ").join("")+o.split(" ").join(""):void 0};e.onChange({target:s,currentTarget:s})}},[r,o]),l.useEffect(()=>{t==="tel"&&!e.value&&(S(""),x(""))},[e.value,t]);const I=n.jsxs(n.Fragment,{children:[n.jsx("input",{disabled:a,hidden:!0,onChange:N,pattern:void 0,placeholder:v,ref:g,type:t,value:j}),n.jsx("input",{type:"text",className:d.t(u.inputStyles.code,u.inputStyles.input),disabled:a,maxLength:5,onChange:s=>x(s.target.value),placeholder:h,value:r}),n.jsx("input",{type:"tel",className:d.t(u.inputStyles.input,p&&u.inputStyles.touched),"data-icon":i?"true":void 0,disabled:a,maxLength:14,name:void 0,onChange:s=>S(s.target.value),onBlur:f,pattern:e.pattern,required:c,style:y,value:o,...q})]});return n.jsxs("label",{className:u.inputStyles.label,"data-component":"input",children:[m&&n.jsx("span",{"data-required":c||void 0,children:m}),t==="tel"?I:n.jsx("input",{ref:g,className:d.t(u.inputStyles.input,C,p&&u.inputStyles.touched),"data-icon":i?"true":void 0,disabled:a,onBlur:f,placeholder:v,required:c,style:y,type:t,...e})]})}exports.Input=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("react");require("../../icons-DYCSlAoX.cjs");const e=require("../../index-iItPktfX.cjs");require("../../use-touched-D_TJ8wDc.cjs");exports.Input=e.Input;
 //# sourceMappingURL=index.cjs.map

package/dist/components/input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithRef<'input'> & {\n  defaultCountryCode?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  label?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  type?:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'radio'\n    | 'search'\n    | 'tel'\n    | 'text';\n};\n\nexport function Input({\n  className,\n  defaultCountryCode = '+47',\n  disabled = false,\n  icon,\n  label,\n  placeholder,\n  ref,\n  required,\n  type = 'text',\n  ...props\n}: InputProps) {\n  const [countryCode, setCountryCode] = useState('');\n  const [phoneNumber, setPhoneNumber] = useState('');\n  const { onChange, value, ...restProps } = props;\n  const { touched, onBlur } = useTouched(value === '');\n\n  type withVars =\n    | (React.CSSProperties & {\n        '--icon-svg'?: string;\n      })\n    | undefined;\n\n  const withVars: withVars =\n    icon && type !== 'radio' && type !== 'datetime-local'\n      ? {\n          '--icon-svg': iconSVG(icon, true),\n        }\n      : undefined;\n\n  useEffect(() => {\n    if (typeof props.onChange === 'function' && type === 'tel') {\n      const target = {\n        name: props.name,\n        value: phoneNumber\n          ? (countryCode || defaultCountryCode).split(' ').join('') +\n            phoneNumber.split(' ').join('')\n          : undefined,\n      } as unknown as HTMLInputElement;\n      // eslint-disable-next-line\n      (props.onChange as any)({ target, currentTarget: target });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [countryCode, phoneNumber]);\n\n  useEffect(() => {\n    if (type === 'tel' && !props.value) {\n      setPhoneNumber('');\n      setCountryCode('');\n    }\n  }, [props.value, type]);\n\n  const telephoneInput = (\n    <>\n      <input\n        disabled={disabled}\n        hidden\n        onChange={onChange}\n        pattern={undefined}\n        placeholder={placeholder}\n        ref={ref}\n        type={type}\n        value={value}\n      />\n      <input\n        type='text'\n        className={cx(styles.code, styles.input)}\n        disabled={disabled}\n        maxLength={5}\n        onChange={(e) => setCountryCode(e.target.value)}\n        placeholder={defaultCountryCode}\n        value={countryCode}\n      />\n      <input\n        type='tel'\n        className={cx(styles.input, touched && styles.touched)}\n        data-icon={icon ? 'true' : undefined}\n        disabled={disabled}\n        maxLength={14}\n        name={undefined}\n        onChange={(e) => setPhoneNumber(e.target.value)}\n        onBlur={onBlur}\n        pattern={props.pattern}\n        required={required}\n        style={withVars}\n        value={phoneNumber}\n        {...restProps}\n      />\n    </>\n  );\n\n  return (\n    <label className={styles.label}>\n      {label && <span data-required={required || undefined}>{label}</span>}\n      {type === 'tel' ? (\n        telephoneInput\n      ) : (\n        <input\n          ref={ref}\n          className={cx(styles.input, className, touched && styles.touched)}\n          data-icon={icon ? 'true' : undefined}\n          disabled={disabled}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          required={required}\n          style={withVars}\n          type={type}\n          {...props}\n        />\n      )}\n    </label>\n  );\n}\n"],"names":["Input","className","defaultCountryCode","disabled","icon","label","placeholder","ref","required","type","props","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","cx","styles","code","input","e","pattern"],"mappings":"0SA2BO,SAASA,EAAM,CACpBC,UAAAA,EACAC,mBAAAA,EAAqB,MACrBC,SAAAA,EAAW,GACXC,KAAAA,EACAC,MAAAA,EACAC,YAAAA,EACAC,IAAAA,EACAC,SAAAA,EACAC,KAAAA,EAAO,OACP,GAAGC,CACO,EAAG,CACb,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAE,EAC3C,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAE,EAC3C,CAAEG,SAAAA,EAAUC,MAAAA,EAAO,GAAGC,CAAAA,EAAcR,EACpC,CAAES,QAAAA,EAASC,OAAAA,CAAAA,EAAWC,EAAAA,WAAWJ,IAAU,EAAE,EAQ7CK,EACJlB,GAAQK,IAAS,SAAWA,IAAS,iBACjC,CACE,aAAcc,EAAAA,QAAQnB,EAAM,EAAI,CAAA,EAElCoB,OAENC,EAAAA,UAAU,IAAM,CACd,GAAI,OAAOf,EAAMM,UAAa,YAAcP,IAAS,MAAO,CAC1D,MAAMiB,EAAS,CACbC,KAAMjB,EAAMiB,KACZV,MAAOH,GACFH,GAAeT,GAAoB0B,MAAM,GAAG,EAAEC,KAAK,EAAE,EACtDf,EAAYc,MAAM,GAAG,EAAEC,KAAK,EAAE,EAC9BL,MAAAA,EAGLd,EAAMM,SAAiB,CAAEU,OAAAA,EAAQI,cAAeJ,CAAAA,CAAQ,CAC3D,CAEF,EAAG,CAACf,EAAaG,CAAW,CAAC,EAE7BW,EAAAA,UAAU,IAAM,CACVhB,IAAS,OAAS,CAACC,EAAMO,QAC3BF,EAAe,EAAE,EACjBH,EAAe,EAAE,EAErB,EAAG,CAACF,EAAMO,MAAOR,CAAI,CAAC,EAEtB,MAAMsB,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACC,SAAA/B,EACA,OAAM,GACN,SAAAa,EACA,QAASQ,OACT,YAAAlB,EACA,IAAAC,EACA,KAAAE,EACA,MAAAQ,CAAA,CAAa,EAEfiB,EAAAA,IAAC,QAAA,CACC,KAAK,OACL,UAAWC,IAAGC,EAAAA,YAAOC,KAAMD,EAAAA,YAAOE,KAAK,EACvC,SAAAnC,EACA,UAAW,EACX,SAAWoC,GAAM3B,EAAe2B,EAAEb,OAAOT,KAAK,EAC9C,YAAaf,EACb,MAAOS,CAAAA,CAAY,QAEpB,QAAA,CACC,KAAK,MACL,UAAWwB,EAAAA,EAAGC,EAAAA,YAAOE,MAAOnB,GAAWiB,EAAAA,YAAOjB,OAAO,EACrD,YAAWf,EAAO,OAASoB,OAC3B,SAAArB,EACA,UAAW,GACX,KAAMqB,OACN,SAAWe,GAAMxB,EAAewB,EAAEb,OAAOT,KAAK,EAC9C,OAAAG,EACA,QAASV,EAAM8B,QACf,SAAAhC,EACA,MAAOc,EACP,MAAOR,EACP,GAAII,CAAAA,CAAU,CAAA,EAElB,EAGF,cACG,QAAA,CAAM,UAAWkB,EAAAA,YAAO/B,MAAM,iBAAA,QAC5BA,SAAAA,CAAAA,GAAS6B,EAAAA,IAAC,OAAA,CAAK,gBAAe1B,GAAYgB,OAAYnB,SAAAA,EAAM,EAC5DI,IAAS,MACRsB,EAEAG,EAAAA,IAAC,QAAA,CACC,IAAA3B,EACA,UAAW4B,EAAAA,EAAGC,EAAAA,YAAOE,MAAOrC,EAAWkB,GAAWiB,EAAAA,YAAOjB,OAAO,EAChE,YAAWf,EAAO,OAASoB,OAC3B,SAAArB,EACA,OAAAiB,EACA,YAAAd,EACA,SAAAE,EACA,MAAOc,EACP,KAAAb,EACA,GAAIC,CAAAA,CAAM,CAAA,EAGhB,CAEJ"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/input/index.js

@@ -1,56 +1,10 @@
-import { jsxs as j, Fragment as w, jsx as o } from "react/jsx-runtime";
-import { t as s } from "../../classix-DG18itHa.js";
-import { useState as S, useEffect as I } from "react";
-import { i as B } from "../../icons-D6XjzxSX.js";
-import { u as E } from "../../utils--n2yqjCy.js";
-import { i as n } from "../../styles.module-DbpbMZGd.js";
-function A({
-  className: L,
-  defaultCountryCode: m = "+47",
-  disabled: u = !1,
-  icon: i,
-  label: h,
-  placeholder: d,
-  ref: v,
-  required: c,
-  type: t = "text",
-  ...e
-}) {
-  const [l, g] = S(""), [r, f] = S(""), {
-    onChange: P,
-    value: p,
-    ...T
-  } = e, {
-    touched: x,
-    onBlur: C
-  } = E(p === ""), N = i && t !== "radio" && t !== "datetime-local" ? {
-    "--icon-svg": B(i, !0)
-  } : void 0;
-  I(() => {
-    if (typeof e.onChange == "function" && t === "tel") {
-      const a = {
-        name: e.name,
-        value: r ? (l || m).split(" ").join("") + r.split(" ").join("") : void 0
-      };
-      e.onChange({
-        target: a,
-        currentTarget: a
-      });
-    }
-  }, [l, r]), I(() => {
-    t === "tel" && !e.value && (f(""), g(""));
-  }, [e.value, t]);
-  const V = /* @__PURE__ */ j(w, { children: [
-    /* @__PURE__ */ o("input", { disabled: u, hidden: !0, onChange: P, pattern: void 0, placeholder: d, ref: v, type: t, value: p }),
-    /* @__PURE__ */ o("input", { type: "text", className: s(n.code, n.input), disabled: u, maxLength: 5, onChange: (a) => g(a.target.value), placeholder: m, value: l }),
-    /* @__PURE__ */ o("input", { type: "tel", className: s(n.input, x && n.touched), "data-icon": i ? "true" : void 0, disabled: u, maxLength: 14, name: void 0, onChange: (a) => f(a.target.value), onBlur: C, pattern: e.pattern, required: c, style: N, value: r, ...T })
-  ] });
-  return /* @__PURE__ */ j("label", { className: n.label, "data-component": "input", children: [
-    h && /* @__PURE__ */ o("span", { "data-required": c || void 0, children: h }),
-    t === "tel" ? V : /* @__PURE__ */ o("input", { ref: v, className: s(n.input, L, x && n.touched), "data-icon": i ? "true" : void 0, disabled: u, onBlur: C, placeholder: d, required: c, style: N, type: t, ...e })
-  ] });
-}
+import "react/jsx-runtime";
+import "../../classix-DG18itHa.js";
+import "react";
+import "../../icons-CKzd_L4D.js";
+import { I as a } from "../../index-DS2cY2g4.js";
+import "../../use-touched-DXIJVVzz.js";
 export {
-  A as Input
+  a as Input
 };
 //# sourceMappingURL=index.js.map

package/dist/components/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithRef<'input'> & {\n  defaultCountryCode?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  label?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  type?:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'radio'\n    | 'search'\n    | 'tel'\n    | 'text';\n};\n\nexport function Input({\n  className,\n  defaultCountryCode = '+47',\n  disabled = false,\n  icon,\n  label,\n  placeholder,\n  ref,\n  required,\n  type = 'text',\n  ...props\n}: InputProps) {\n  const [countryCode, setCountryCode] = useState('');\n  const [phoneNumber, setPhoneNumber] = useState('');\n  const { onChange, value, ...restProps } = props;\n  const { touched, onBlur } = useTouched(value === '');\n\n  type withVars =\n    | (React.CSSProperties & {\n        '--icon-svg'?: string;\n      })\n    | undefined;\n\n  const withVars: withVars =\n    icon && type !== 'radio' && type !== 'datetime-local'\n      ? {\n          '--icon-svg': iconSVG(icon, true),\n        }\n      : undefined;\n\n  useEffect(() => {\n    if (typeof props.onChange === 'function' && type === 'tel') {\n      const target = {\n        name: props.name,\n        value: phoneNumber\n          ? (countryCode || defaultCountryCode).split(' ').join('') +\n            phoneNumber.split(' ').join('')\n          : undefined,\n      } as unknown as HTMLInputElement;\n      // eslint-disable-next-line\n      (props.onChange as any)({ target, currentTarget: target });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [countryCode, phoneNumber]);\n\n  useEffect(() => {\n    if (type === 'tel' && !props.value) {\n      setPhoneNumber('');\n      setCountryCode('');\n    }\n  }, [props.value, type]);\n\n  const telephoneInput = (\n    <>\n      <input\n        disabled={disabled}\n        hidden\n        onChange={onChange}\n        pattern={undefined}\n        placeholder={placeholder}\n        ref={ref}\n        type={type}\n        value={value}\n      />\n      <input\n        type='text'\n        className={cx(styles.code, styles.input)}\n        disabled={disabled}\n        maxLength={5}\n        onChange={(e) => setCountryCode(e.target.value)}\n        placeholder={defaultCountryCode}\n        value={countryCode}\n      />\n      <input\n        type='tel'\n        className={cx(styles.input, touched && styles.touched)}\n        data-icon={icon ? 'true' : undefined}\n        disabled={disabled}\n        maxLength={14}\n        name={undefined}\n        onChange={(e) => setPhoneNumber(e.target.value)}\n        onBlur={onBlur}\n        pattern={props.pattern}\n        required={required}\n        style={withVars}\n        value={phoneNumber}\n        {...restProps}\n      />\n    </>\n  );\n\n  return (\n    <label className={styles.label}>\n      {label && <span data-required={required || undefined}>{label}</span>}\n      {type === 'tel' ? (\n        telephoneInput\n      ) : (\n        <input\n          ref={ref}\n          className={cx(styles.input, className, touched && styles.touched)}\n          data-icon={icon ? 'true' : undefined}\n          disabled={disabled}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          required={required}\n          style={withVars}\n          type={type}\n          {...props}\n        />\n      )}\n    </label>\n  );\n}\n"],"names":["Input","className","defaultCountryCode","disabled","icon","label","placeholder","ref","required","type","props","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","cx","styles","code","input","e","pattern"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/link/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index38.css');const s=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),m="_link_xhd9q_1",o="_primary_xhd9q_7",c="_danger_xhd9q_13",_="_minimal_xhd9q_21",n={link:m,primary:o,danger:c,minimal:_},d=({children:i,className:r,to:e="#",variant:t="primary",...a})=>s.jsx("a",{className:l.t(r,n.link,n[t]),href:e,...a,"data-component":"link",children:i});exports.Link=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index47.css');const s=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),m="_link_xhd9q_1",o="_primary_xhd9q_7",c="_danger_xhd9q_13",_="_minimal_xhd9q_21",n={link:m,primary:o,danger:c,minimal:_},d=({children:i,className:r,to:e="#",variant:t="primary",...a})=>s.jsx("a",{className:l.t(r,n.link,n[t]),href:e,...a,"data-component":"link",children:i});exports.Link=d;
 //# sourceMappingURL=index.cjs.map

package/dist/components/link/index.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { t as _ } from "../../classix-DG18itHa.js";
-import '../../assets/index38.css';const s = "_link_xhd9q_1", l = "_primary_xhd9q_7", e = "_danger_xhd9q_13", c = "_minimal_xhd9q_21", n = {
+import '../../assets/index47.css';const s = "_link_xhd9q_1", l = "_primary_xhd9q_7", e = "_danger_xhd9q_13", c = "_minimal_xhd9q_21", n = {
   link: s,
   primary: l,
   danger: e,

package/dist/components/list/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index39.css');const f=require("react/jsx-runtime"),h=require("../../classix-5H4IWnMA.cjs"),l=require("react");function p(e){return l.isValidElement(e)&&e.type===l.Fragment}function _(e,n=[]){return l.Children.forEach(e,s=>{p(s)?_(s.props.children,n):n.push(s)}),n}function y(e,{wrapper:n="li"}={}){return _(e).filter(t=>t!==null).map((t,r)=>{if(l.isValidElement(t)&&t.type===n)return t;const i=l.isValidElement(t)&&t.key!=null?t.key:r;return l.createElement(n,{key:i},t)})}const E="_horizontal_1w5i6_1",x="_list_1w5i6_12",N="_columns_1w5i6_53",o={horizontal:E,list:x,columns:N};function g({children:e,className:n,columns:s=1,horizontal:a,ordered:t,style:r,...i}){const c=Number.isFinite(s)?Math.max(1,Math.floor(s)):1,u=h.t(n,o.list,c>1&&o.columns,a&&o.horizontal),m={...r,"--list-columns":c};return t?f.jsx("ol",{className:u,style:m,...i,"data-component":"list",children:y(e)}):f.jsx("ul",{className:u,style:m,...i,"data-component":"list",children:y(e)})}exports.List=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index48.css');const r=require("react/jsx-runtime"),j=require("../../classix-5H4IWnMA.cjs"),l=require("react");function E(n){return l.isValidElement(n)&&n.type===l.Fragment}function x(n,s=[]){return l.Children.forEach(n,e=>{E(e)?x(e.props.children,s):s.push(e)}),s}function h(n,{wrapper:s="li"}={}){return x(n).filter(t=>t!==null).map((t,c)=>{if(l.isValidElement(t)&&t.type===s)return t;const a=l.isValidElement(t)&&t.key!=null?t.key:c;return l.createElement(s,{key:a},t)})}const N="_controls_1lnsr_1",d="_horizontal_1lnsr_6",g="_list_1lnsr_17",p="_columns_1lnsr_58",o={controls:N,horizontal:d,list:g,columns:p};function z({children:n,className:s,columns:e=1,controls:i,horizontal:t,ordered:c,style:a,...u}){const m=Number.isFinite(e)?Math.max(1,Math.floor(e)):1,f=j.t(s,o.list,m>1&&o.columns,t&&o.horizontal),_={...a,"--list-columns":m},y=c?r.jsx("ol",{className:f,style:_,...u,children:h(n)}):r.jsx("ul",{className:f,style:_,...u,children:h(n)});return i==null?y:r.jsxs(r.Fragment,{children:[r.jsx("div",{className:o.controls,children:i}),y]})}exports.List=z;
 //# sourceMappingURL=index.cjs.map

package/dist/components/list/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/lib/helpers.tsx","../../../src/components/list/index.tsx"],"sourcesContent":["import React, { JSX } from 'react';\n\ntype WrapOptions<T extends keyof JSX.IntrinsicElements = 'li'> = {\n  wrapper?: T;\n};\n\nfunction isFragmentElement(\n  node: React.ReactNode\n): node is React.ReactElement<{ children?: React.ReactNode }> {\n  return React.isValidElement(node) && node.type === React.Fragment;\n}\n\nfunction flattenChildren(children: React.ReactNode, out: React.ReactNode[] = []) {\n  React.Children.forEach(children, (child) => {\n    if (isFragmentElement(child)) {\n      flattenChildren(child.props.children, out);\n    } else {\n      out.push(child);\n    }\n  });\n  return out;\n}\n\nexport function wrapChildren<T extends keyof JSX.IntrinsicElements = 'li'>(\n  children: React.ReactNode,\n  { wrapper = 'li' as T }: WrapOptions<T> = {}\n) {\n  const flat = flattenChildren(children);\n\n  const filterNull = flat.filter((child) => child !== null);\n\n  return filterNull.map((child, i) => {\n    if (React.isValidElement(child) && child.type === wrapper) {\n      return child;\n    }\n\n    const key = React.isValidElement(child) && child.key != null ? child.key : i;\n\n    return React.createElement(wrapper, { key }, child);\n  });\n}\n","import cx from 'classix';\n\nimport { wrapChildren } from '@/lib/helpers';\n\nimport styles from './styles.module.css';\n\nexport type ListProps = React.ComponentPropsWithoutRef<'ul'> & {\n  columns?: number;\n  horizontal?: boolean;\n  ordered?: boolean;\n};\n\nexport function List({\n  children,\n  className,\n  columns = 1,\n  horizontal,\n  ordered,\n  style,\n  ...props\n}: ListProps) {\n  const cols = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;\n\n  const classes = cx(\n    className,\n    styles.list,\n    cols > 1 && styles.columns,\n    horizontal && styles.horizontal\n  );\n\n  type withVars = React.CSSProperties & {\n    '--list-columns'?: number;\n  };\n\n  const withVars: withVars = {\n    ...style,\n    '--list-columns': cols,\n  };\n\n  return ordered ? (\n    <ol\n      className={classes}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ol>\n  ) : (\n    <ul\n      className={classes}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ul>\n  );\n}\n"],"names":["isFragmentElement","node","React","isValidElement","type","Fragment","flattenChildren","children","out","Children","forEach","child","props","push","wrapChildren","wrapper","filter","map","i","key","createElement","List","className","columns","horizontal","ordered","style","cols","Number","isFinite","Math","max","floor","classes","cx","styles","list","withVars","jsx"],"mappings":"gLAMA,SAASA,EACPC,EAC4D,CAC5D,OAAOC,EAAMC,eAAeF,CAAI,GAAKA,EAAKG,OAASF,EAAMG,QAC3D,CAEA,SAASC,EAAgBC,EAA2BC,EAAyB,GAAI,CAC/EN,OAAAA,EAAMO,SAASC,QAAQH,EAAWI,GAAU,CACtCX,EAAkBW,CAAK,EACzBL,EAAgBK,EAAMC,MAAML,SAAUC,CAAG,EAEzCA,EAAIK,KAAKF,CAAK,CAElB,CAAC,EACMH,CACT,CAEO,SAASM,EACdP,EACA,CAAEQ,QAAAA,EAAU,IAA0B,EAAI,GAC1C,CAKA,OAJaT,EAAgBC,CAAQ,EAEbS,OAAQL,GAAUA,IAAU,IAAI,EAEtCM,IAAI,CAACN,EAAOO,IAAM,CAClC,GAAIhB,EAAMC,eAAeQ,CAAK,GAAKA,EAAMP,OAASW,EAChD,OAAOJ,EAGT,MAAMQ,EAAMjB,EAAMC,eAAeQ,CAAK,GAAKA,EAAMQ,KAAO,KAAOR,EAAMQ,IAAMD,EAE3E,OAAOhB,EAAMkB,cAAcL,EAAS,CAAEI,IAAAA,CAAAA,EAAOR,CAAK,CACpD,CAAC,CACH,0GC5BO,SAASU,EAAK,CACnBd,SAAAA,EACAe,UAAAA,EACAC,QAAAA,EAAU,EACVC,WAAAA,EACAC,QAAAA,EACAC,MAAAA,EACA,GAAGd,CACM,EAAG,CACZ,MAAMe,EAAOC,OAAOC,SAASN,CAAO,EAAIO,KAAKC,IAAI,EAAGD,KAAKE,MAAMT,CAAO,CAAC,EAAI,EAErEU,EAAUC,EAAAA,EACdZ,EACAa,EAAOC,KACPT,EAAO,GAAKQ,EAAOZ,QACnBC,GAAcW,EAAOX,UACvB,EAMMa,EAAqB,CACzB,GAAGX,EACH,iBAAkBC,CAAAA,EAGpB,OAAOF,EACLa,EAAAA,IAAC,KAAA,CACC,UAAWL,EACX,MAAOI,EACP,GAAIzB,EAAM,iBAAA,OAETE,SAAAA,EAAaP,CAAQ,CAAA,CACxB,EAEA+B,EAAAA,IAAC,KAAA,CACC,UAAWL,EACX,MAAOI,EACP,GAAIzB,EAAM,iBAAA,OAETE,SAAAA,EAAaP,CAAQ,CAAA,CACxB,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/lib/wrap-children.tsx","../../../src/components/list/index.tsx"],"sourcesContent":["import React, { JSX } from 'react';\n\ntype WrapOptions<T extends keyof JSX.IntrinsicElements = 'li'> = {\n  wrapper?: T;\n};\n\nfunction isFragmentElement(\n  node: React.ReactNode\n): node is React.ReactElement<{ children?: React.ReactNode }> {\n  return React.isValidElement(node) && node.type === React.Fragment;\n}\n\nfunction flattenChildren(children: React.ReactNode, out: React.ReactNode[] = []) {\n  React.Children.forEach(children, (child) => {\n    if (isFragmentElement(child)) {\n      flattenChildren(child.props.children, out);\n    } else {\n      out.push(child);\n    }\n  });\n  return out;\n}\n\nexport function wrapChildren<T extends keyof JSX.IntrinsicElements = 'li'>(\n  children: React.ReactNode,\n  { wrapper = 'li' as T }: WrapOptions<T> = {}\n) {\n  const flat = flattenChildren(children);\n\n  const filterNull = flat.filter((child) => child !== null);\n\n  return filterNull.map((child, i) => {\n    if (React.isValidElement(child) && child.type === wrapper) {\n      return child;\n    }\n\n    const key = React.isValidElement(child) && child.key != null ? child.key : i;\n\n    return React.createElement(wrapper, { key }, child);\n  });\n}\n","import cx from 'classix';\n\nimport { wrapChildren } from '@/lib/wrap-children';\n\nimport styles from './styles.module.css';\n\nexport type ListProps = React.ComponentPropsWithoutRef<'ul'> & {\n  columns?: number;\n  controls?: React.ReactNode;\n  horizontal?: boolean;\n  ordered?: boolean;\n};\n\nexport function List({\n  children,\n  className,\n  columns = 1,\n  controls,\n  horizontal,\n  ordered,\n  style,\n  ...props\n}: ListProps) {\n  const cols = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;\n\n  const classes = cx(\n    className,\n    styles.list,\n    cols > 1 && styles.columns,\n    horizontal && styles.horizontal\n  );\n\n  type withVars = React.CSSProperties & {\n    '--list-columns'?: number;\n  };\n\n  const withVars: withVars = {\n    ...style,\n    '--list-columns': cols,\n  };\n\n  const list = ordered ? (\n    <ol\n      className={classes}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ol>\n  ) : (\n    <ul\n      className={classes}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ul>\n  );\n\n  if (controls === undefined || controls === null) return list;\n\n  return (\n    <>\n      <div className={styles.controls}>{controls}</div>\n      {list}\n    </>\n  );\n}\n"],"names":["isFragmentElement","node","React","isValidElement","type","Fragment","flattenChildren","children","out","Children","forEach","child","props","push","wrapChildren","wrapper","filter","map","i","key","createElement","List","className","columns","controls","horizontal","ordered","style","cols","Number","isFinite","Math","max","floor","classes","cx","styles","list","withVars","jsx","jsxs"],"mappings":"gLAMA,SAASA,EACPC,EAC4D,CAC5D,OAAOC,EAAMC,eAAeF,CAAI,GAAKA,EAAKG,OAASF,EAAMG,QAC3D,CAEA,SAASC,EAAgBC,EAA2BC,EAAyB,GAAI,CAC/EN,OAAAA,EAAMO,SAASC,QAAQH,EAAWI,GAAU,CACtCX,EAAkBW,CAAK,EACzBL,EAAgBK,EAAMC,MAAML,SAAUC,CAAG,EAEzCA,EAAIK,KAAKF,CAAK,CAElB,CAAC,EACMH,CACT,CAEO,SAASM,EACdP,EACA,CAAEQ,QAAAA,EAAU,IAA0B,EAAI,GAC1C,CAKA,OAJaT,EAAgBC,CAAQ,EAEbS,OAAQL,GAAUA,IAAU,IAAI,EAEtCM,IAAI,CAACN,EAAOO,IAAM,CAClC,GAAIhB,EAAMC,eAAeQ,CAAK,GAAKA,EAAMP,OAASW,EAChD,OAAOJ,EAGT,MAAMQ,EAAMjB,EAAMC,eAAeQ,CAAK,GAAKA,EAAMQ,KAAO,KAAOR,EAAMQ,IAAMD,EAE3E,OAAOhB,EAAMkB,cAAcL,EAAS,CAAEI,IAAAA,CAAAA,EAAOR,CAAK,CACpD,CAAC,CACH,2IC3BO,SAASU,EAAK,CACnBd,SAAAA,EACAe,UAAAA,EACAC,QAAAA,EAAU,EACVC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,MAAAA,EACA,GAAGf,CACM,EAAG,CACZ,MAAMgB,EAAOC,OAAOC,SAASP,CAAO,EAAIQ,KAAKC,IAAI,EAAGD,KAAKE,MAAMV,CAAO,CAAC,EAAI,EAErEW,EAAUC,EAAAA,EACdb,EACAc,EAAOC,KACPT,EAAO,GAAKQ,EAAOb,QACnBE,GAAcW,EAAOX,UACvB,EAMMa,EAAqB,CACzB,GAAGX,EACH,iBAAkBC,CAAAA,EAGdS,EAAOX,EACXa,MAAC,KAAA,CACC,UAAWL,EACX,MAAOI,EACP,GAAI1B,EAEHE,SAAAA,EAAaP,CAAQ,EACxB,EAEAgC,EAAAA,IAAC,KAAA,CACC,UAAWL,EACX,MAAOI,EACP,GAAI1B,EAEHE,SAAAA,EAAaP,CAAQ,CAAA,CACxB,EAGF,OAA8BiB,GAAa,KAAaa,EAGtDG,EAAAA,KAAAnC,WAAA,CACE,SAAA,CAAAkC,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAOZ,SAAWA,SAAAA,EAAS,EAC1Ca,CAAAA,EACH,CAEJ"}

package/dist/components/list/index.js

@@ -1,47 +1,52 @@
-import { jsx as f } from "react/jsx-runtime";
-import { t as y } from "../../classix-DG18itHa.js";
-import s from "react";
-import '../../assets/index39.css';function h(n) {
-  return s.isValidElement(n) && n.type === s.Fragment;
+import { jsx as c, jsxs as E, Fragment as N } from "react/jsx-runtime";
+import { t as d } from "../../classix-DG18itHa.js";
+import e from "react";
+import '../../assets/index48.css';function x(n) {
+  return e.isValidElement(n) && n.type === e.Fragment;
 }
-function p(n, e = []) {
-  return s.Children.forEach(n, (l) => {
-    h(l) ? p(l.props.children, e) : e.push(l);
-  }), e;
+function p(n, l = []) {
+  return e.Children.forEach(n, (s) => {
+    x(s) ? p(s.props.children, l) : l.push(s);
+  }), l;
 }
-function _(n, {
-  wrapper: e = "li"
+function y(n, {
+  wrapper: l = "li"
 } = {}) {
-  return p(n).filter((t) => t !== null).map((t, r) => {
-    if (s.isValidElement(t) && t.type === e)
+  return p(n).filter((t) => t !== null).map((t, i) => {
+    if (e.isValidElement(t) && t.type === l)
       return t;
-    const o = s.isValidElement(t) && t.key != null ? t.key : r;
-    return s.createElement(e, {
-      key: o
+    const a = e.isValidElement(t) && t.key != null ? t.key : i;
+    return e.createElement(l, {
+      key: a
     }, t);
   });
 }
-const E = "_horizontal_1w5i6_1", N = "_list_1w5i6_12", w = "_columns_1w5i6_53", i = {
-  horizontal: E,
-  list: N,
-  columns: w
+const z = "_controls_1lnsr_1", F = "_horizontal_1lnsr_6", V = "_list_1lnsr_17", g = "_columns_1lnsr_58", o = {
+  controls: z,
+  horizontal: F,
+  list: V,
+  columns: g
 };
-function x({
+function v({
   children: n,
-  className: e,
-  columns: l = 1,
-  horizontal: a,
-  ordered: t,
-  style: r,
-  ...o
+  className: l,
+  columns: s = 1,
+  controls: r,
+  horizontal: t,
+  ordered: i,
+  style: a,
+  ...m
 }) {
-  const m = Number.isFinite(l) ? Math.max(1, Math.floor(l)) : 1, c = y(e, i.list, m > 1 && i.columns, a && i.horizontal), u = {
-    ...r,
-    "--list-columns": m
-  };
-  return t ? /* @__PURE__ */ f("ol", { className: c, style: u, ...o, "data-component": "list", children: _(n) }) : /* @__PURE__ */ f("ul", { className: c, style: u, ...o, "data-component": "list", children: _(n) });
+  const u = Number.isFinite(s) ? Math.max(1, Math.floor(s)) : 1, f = d(l, o.list, u > 1 && o.columns, t && o.horizontal), _ = {
+    ...a,
+    "--list-columns": u
+  }, h = i ? /* @__PURE__ */ c("ol", { className: f, style: _, ...m, children: y(n) }) : /* @__PURE__ */ c("ul", { className: f, style: _, ...m, children: y(n) });
+  return r == null ? h : /* @__PURE__ */ E(N, { children: [
+    /* @__PURE__ */ c("div", { className: o.controls, children: r }),
+    h
+  ] });
 }
 export {
-  x as List
+  v as List
 };
 //# sourceMappingURL=index.js.map

package/dist/components/list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/lib/helpers.tsx","../../../src/components/list/index.tsx"],"sourcesContent":["import React, { JSX } from 'react';\n\ntype WrapOptions<T extends keyof JSX.IntrinsicElements = 'li'> = {\n  wrapper?: T;\n};\n\nfunction isFragmentElement(\n  node: React.ReactNode\n): node is React.ReactElement<{ children?: React.ReactNode }> {\n  return React.isValidElement(node) && node.type === React.Fragment;\n}\n\nfunction flattenChildren(children: React.ReactNode, out: React.ReactNode[] = []) {\n  React.Children.forEach(children, (child) => {\n    if (isFragmentElement(child)) {\n      flattenChildren(child.props.children, out);\n    } else {\n      out.push(child);\n    }\n  });\n  return out;\n}\n\nexport function wrapChildren<T extends keyof JSX.IntrinsicElements = 'li'>(\n  children: React.ReactNode,\n  { wrapper = 'li' as T }: WrapOptions<T> = {}\n) {\n  const flat = flattenChildren(children);\n\n  const filterNull = flat.filter((child) => child !== null);\n\n  return filterNull.map((child, i) => {\n    if (React.isValidElement(child) && child.type === wrapper) {\n      return child;\n    }\n\n    const key = React.isValidElement(child) && child.key != null ? child.key : i;\n\n    return React.createElement(wrapper, { key }, child);\n  });\n}\n","import cx from 'classix';\n\nimport { wrapChildren } from '@/lib/helpers';\n\nimport styles from './styles.module.css';\n\nexport type ListProps = React.ComponentPropsWithoutRef<'ul'> & {\n  columns?: number;\n  horizontal?: boolean;\n  ordered?: boolean;\n};\n\nexport function List({\n  children,\n  className,\n  columns = 1,\n  horizontal,\n  ordered,\n  style,\n  ...props\n}: ListProps) {\n  const cols = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;\n\n  const classes = cx(\n    className,\n    styles.list,\n    cols > 1 && styles.columns,\n    horizontal && styles.horizontal\n  );\n\n  type withVars = React.CSSProperties & {\n    '--list-columns'?: number;\n  };\n\n  const withVars: withVars = {\n    ...style,\n    '--list-columns': cols,\n  };\n\n  return ordered ? (\n    <ol\n      className={classes}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ol>\n  ) : (\n    <ul\n      className={classes}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ul>\n  );\n}\n"],"names":["isFragmentElement","node","React","isValidElement","type","Fragment","flattenChildren","children","out","Children","forEach","child","props","push","wrapChildren","wrapper","filter","map","i","key","createElement","List","className","columns","horizontal","ordered","style","cols","Number","isFinite","Math","max","floor","classes","cx","styles","list","withVars","jsx"],"mappings":";;;AAMA,SAASA,EACPC,GAC4D;AAC5D,SAAOC,EAAMC,eAAeF,CAAI,KAAKA,EAAKG,SAASF,EAAMG;AAC3D;AAEA,SAASC,EAAgBC,GAA2BC,IAAyB,IAAI;AAC/EN,SAAAA,EAAMO,SAASC,QAAQH,GAAWI,CAAAA,MAAU;AAC1C,IAAIX,EAAkBW,CAAK,IACzBL,EAAgBK,EAAMC,MAAML,UAAUC,CAAG,IAEzCA,EAAIK,KAAKF,CAAK;AAAA,EAElB,CAAC,GACMH;AACT;AAEO,SAASM,EACdP,GACA;AAAA,EAAEQ,SAAAA,IAAU;AAA0B,IAAI,IAC1C;AAKA,SAJaT,EAAgBC,CAAQ,EAEbS,OAAQL,CAAAA,MAAUA,MAAU,IAAI,EAEtCM,IAAI,CAACN,GAAOO,MAAM;AAClC,QAAIhB,EAAMC,eAAeQ,CAAK,KAAKA,EAAMP,SAASW;AAChD,aAAOJ;AAGT,UAAMQ,IAAMjB,EAAMC,eAAeQ,CAAK,KAAKA,EAAMQ,OAAO,OAAOR,EAAMQ,MAAMD;AAE3E,WAAOhB,EAAMkB,cAAcL,GAAS;AAAA,MAAEI,KAAAA;AAAAA,IAAAA,GAAOR,CAAK;AAAA,EACpD,CAAC;AACH;;;;;;AC5BO,SAASU,EAAK;AAAA,EACnBd,UAAAA;AAAAA,EACAe,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACA,GAAGd;AACM,GAAG;AACZ,QAAMe,IAAOC,OAAOC,SAASN,CAAO,IAAIO,KAAKC,IAAI,GAAGD,KAAKE,MAAMT,CAAO,CAAC,IAAI,GAErEU,IAAUC,EACdZ,GACAa,EAAOC,MACPT,IAAO,KAAKQ,EAAOZ,SACnBC,KAAcW,EAAOX,UACvB,GAMMa,IAAqB;AAAA,IACzB,GAAGX;AAAAA,IACH,kBAAkBC;AAAAA,EAAAA;AAGpB,SAAOF,IACL,gBAAAa,EAAC,MAAA,EACC,WAAWL,GACX,OAAOI,GACP,GAAIzB,GAAM,kBAAA,QAETE,UAAAA,EAAaP,CAAQ,EAAA,CACxB,IAEA,gBAAA+B,EAAC,MAAA,EACC,WAAWL,GACX,OAAOI,GACP,GAAIzB,GAAM,kBAAA,QAETE,UAAAA,EAAaP,CAAQ,EAAA,CACxB;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/lib/wrap-children.tsx","../../../src/components/list/index.tsx"],"sourcesContent":["import React, { JSX } from 'react';\n\ntype WrapOptions<T extends keyof JSX.IntrinsicElements = 'li'> = {\n  wrapper?: T;\n};\n\nfunction isFragmentElement(\n  node: React.ReactNode\n): node is React.ReactElement<{ children?: React.ReactNode }> {\n  return React.isValidElement(node) && node.type === React.Fragment;\n}\n\nfunction flattenChildren(children: React.ReactNode, out: React.ReactNode[] = []) {\n  React.Children.forEach(children, (child) => {\n    if (isFragmentElement(child)) {\n      flattenChildren(child.props.children, out);\n    } else {\n      out.push(child);\n    }\n  });\n  return out;\n}\n\nexport function wrapChildren<T extends keyof JSX.IntrinsicElements = 'li'>(\n  children: React.ReactNode,\n  { wrapper = 'li' as T }: WrapOptions<T> = {}\n) {\n  const flat = flattenChildren(children);\n\n  const filterNull = flat.filter((child) => child !== null);\n\n  return filterNull.map((child, i) => {\n    if (React.isValidElement(child) && child.type === wrapper) {\n      return child;\n    }\n\n    const key = React.isValidElement(child) && child.key != null ? child.key : i;\n\n    return React.createElement(wrapper, { key }, child);\n  });\n}\n","import cx from 'classix';\n\nimport { wrapChildren } from '@/lib/wrap-children';\n\nimport styles from './styles.module.css';\n\nexport type ListProps = React.ComponentPropsWithoutRef<'ul'> & {\n  columns?: number;\n  controls?: React.ReactNode;\n  horizontal?: boolean;\n  ordered?: boolean;\n};\n\nexport function List({\n  children,\n  className,\n  columns = 1,\n  controls,\n  horizontal,\n  ordered,\n  style,\n  ...props\n}: ListProps) {\n  const cols = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;\n\n  const classes = cx(\n    className,\n    styles.list,\n    cols > 1 && styles.columns,\n    horizontal && styles.horizontal\n  );\n\n  type withVars = React.CSSProperties & {\n    '--list-columns'?: number;\n  };\n\n  const withVars: withVars = {\n    ...style,\n    '--list-columns': cols,\n  };\n\n  const list = ordered ? (\n    <ol\n      className={classes}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ol>\n  ) : (\n    <ul\n      className={classes}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ul>\n  );\n\n  if (controls === undefined || controls === null) return list;\n\n  return (\n    <>\n      <div className={styles.controls}>{controls}</div>\n      {list}\n    </>\n  );\n}\n"],"names":["isFragmentElement","node","React","isValidElement","type","Fragment","flattenChildren","children","out","Children","forEach","child","props","push","wrapChildren","wrapper","filter","map","i","key","createElement","List","className","columns","controls","horizontal","ordered","style","cols","Number","isFinite","Math","max","floor","classes","cx","styles","list","withVars","jsx","jsxs"],"mappings":";;;AAMA,SAASA,EACPC,GAC4D;AAC5D,SAAOC,EAAMC,eAAeF,CAAI,KAAKA,EAAKG,SAASF,EAAMG;AAC3D;AAEA,SAASC,EAAgBC,GAA2BC,IAAyB,IAAI;AAC/EN,SAAAA,EAAMO,SAASC,QAAQH,GAAWI,CAAAA,MAAU;AAC1C,IAAIX,EAAkBW,CAAK,IACzBL,EAAgBK,EAAMC,MAAML,UAAUC,CAAG,IAEzCA,EAAIK,KAAKF,CAAK;AAAA,EAElB,CAAC,GACMH;AACT;AAEO,SAASM,EACdP,GACA;AAAA,EAAEQ,SAAAA,IAAU;AAA0B,IAAI,IAC1C;AAKA,SAJaT,EAAgBC,CAAQ,EAEbS,OAAQL,CAAAA,MAAUA,MAAU,IAAI,EAEtCM,IAAI,CAACN,GAAOO,MAAM;AAClC,QAAIhB,EAAMC,eAAeQ,CAAK,KAAKA,EAAMP,SAASW;AAChD,aAAOJ;AAGT,UAAMQ,IAAMjB,EAAMC,eAAeQ,CAAK,KAAKA,EAAMQ,OAAO,OAAOR,EAAMQ,MAAMD;AAE3E,WAAOhB,EAAMkB,cAAcL,GAAS;AAAA,MAAEI,KAAAA;AAAAA,IAAAA,GAAOR,CAAK;AAAA,EACpD,CAAC;AACH;;;;;;;AC3BO,SAASU,EAAK;AAAA,EACnBd,UAAAA;AAAAA,EACAe,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACA,GAAGf;AACM,GAAG;AACZ,QAAMgB,IAAOC,OAAOC,SAASP,CAAO,IAAIQ,KAAKC,IAAI,GAAGD,KAAKE,MAAMV,CAAO,CAAC,IAAI,GAErEW,IAAUC,EACdb,GACAc,EAAOC,MACPT,IAAO,KAAKQ,EAAOb,SACnBE,KAAcW,EAAOX,UACvB,GAMMa,IAAqB;AAAA,IACzB,GAAGX;AAAAA,IACH,kBAAkBC;AAAAA,EAAAA,GAGdS,IAAOX,IACX,gBAAAa,EAAC,MAAA,EACC,WAAWL,GACX,OAAOI,GACP,GAAI1B,GAEHE,UAAAA,EAAaP,CAAQ,GACxB,IAEA,gBAAAgC,EAAC,MAAA,EACC,WAAWL,GACX,OAAOI,GACP,GAAI1B,GAEHE,UAAAA,EAAaP,CAAQ,EAAA,CACxB;AAGF,SAA8BiB,KAAa,OAAaa,IAGtD,gBAAAG,EAAAnC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAkC,EAAC,OAAA,EAAI,WAAWH,EAAOZ,UAAWA,UAAAA,GAAS;AAAA,IAC1Ca;AAAAA,EAAAA,GACH;AAEJ;"}

package/dist/components/loading/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index40.css');const t=require("react/jsx-runtime"),i=require("../../classix-5H4IWnMA.cjs"),d="_loading_2k531_23",l="_spin_2k531_1",_="_ping_2k531_39",r="_sticky_2k531_65",n={loading:d,default:"_default_2k531_28",spin:l,ping:_,sticky:r},g=({variant:o="default",size:s,sticky:a=!1,...e})=>{const c={"--border-size":s?s/8+"px":void 0,"--size":s?s+"px":void 0};return t.jsx("div",{className:i.t(n.loading,a&&n.sticky),"data-component":"loading",children:t.jsx("span",{className:i.t(n.loading,n[o]),style:c,...e})})};exports.Loading=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index49.css');const t=require("react/jsx-runtime"),d=require("../../classix-5H4IWnMA.cjs"),c="_loading_1d5zd_23",l="_spin_1d5zd_1",_="_ping_1d5zd_39",r="_sticky_1d5zd_65",n={loading:c,default:"_default_1d5zd_28",spin:l,ping:_,sticky:r},g=({variant:i="default",size:s,sticky:o=!1,...a})=>{const e={"--border-size":s?s/8+"px":void 0,"--size":s?s+"px":void 0};return t.jsx("div",{className:d.t(n.loading,o&&n.sticky),"data-component":"loading",children:t.jsx("span",{className:d.t(n.loading,n[i]),style:e,...a})})};exports.Loading=g;
 //# sourceMappingURL=index.cjs.map

package/dist/components/loading/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/loading/index.tsx"],"sourcesContent":["import { cx } from 'classix';\n\nimport styles from './styles.module.css';\n\nexport type LoadingProps = {\n  size?: number;\n  sticky?: boolean;\n  variant?: 'default' | 'ping';\n};\n\n/**\n *  Loader `size` needs to be divisible by `8` to ensure proper scaling (or by `unit` for golden ratio).\n */\n\nexport const Loading = ({ variant = 'default', size, sticky = false, ...props }: LoadingProps) => {\n  type withVars = React.CSSProperties & {\n    '--border-size'?: string;\n    '--size'?: string;\n  };\n\n  const withVars: withVars = {\n    '--border-size': size ? size / 8 + 'px' : undefined,\n    '--size': size ? size + 'px' : undefined,\n  };\n\n  return (\n    <div className={cx(styles.loading, sticky && styles.sticky)}>\n      <span\n        className={cx(styles.loading, styles[variant])}\n        style={withVars}\n        {...props}\n      />\n    </div>\n  );\n};\n"],"names":["Loading","variant","size","sticky","props","withVars","undefined","jsx","cx","styles","loading"],"mappings":"8SAcaA,EAAUA,CAAC,CAAEC,QAAAA,EAAU,UAAWC,KAAAA,EAAMC,OAAAA,EAAS,GAAO,GAAGC,CAAoB,IAAM,CAMhG,MAAMC,EAAqB,CACzB,gBAAiBH,EAAOA,EAAO,EAAI,KAAOI,OAC1C,SAAUJ,EAAOA,EAAO,KAAOI,MAAAA,EAGjC,OACEC,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,EAAGC,EAAOC,QAASP,GAAUM,EAAON,MAAM,EAAE,iBAAA,UAC1D,SAAAI,MAAC,QACC,UAAWC,EAAAA,EAAGC,EAAOC,QAASD,EAAOR,CAAO,CAAC,EAC7C,MAAOI,EACP,GAAID,CAAAA,CAAM,CAAA,CAEd,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/loading/index.tsx"],"sourcesContent":["import { cx } from 'classix';\n\nimport styles from './styles.module.css';\n\nexport type LoadingProps = {\n  size?: number;\n  sticky?: boolean;\n  variant?: 'default' | 'ping';\n};\n\nexport const Loading = ({ variant = 'default', size, sticky = false, ...props }: LoadingProps) => {\n  type withVars = React.CSSProperties & {\n    '--border-size'?: string;\n    '--size'?: string;\n  };\n\n  const withVars: withVars = {\n    '--border-size': size ? size / 8 + 'px' : undefined,\n    '--size': size ? size + 'px' : undefined,\n  };\n\n  return (\n    <div className={cx(styles.loading, sticky && styles.sticky)}>\n      <span\n        className={cx(styles.loading, styles[variant])}\n        style={withVars}\n        {...props}\n      />\n    </div>\n  );\n};\n"],"names":["Loading","variant","size","sticky","props","withVars","undefined","jsx","cx","styles","loading"],"mappings":"8SAUaA,EAAUA,CAAC,CAAEC,QAAAA,EAAU,UAAWC,KAAAA,EAAMC,OAAAA,EAAS,GAAO,GAAGC,CAAoB,IAAM,CAMhG,MAAMC,EAAqB,CACzB,gBAAiBH,EAAOA,EAAO,EAAI,KAAOI,OAC1C,SAAUJ,EAAOA,EAAO,KAAOI,MAAAA,EAGjC,OACEC,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,EAAGC,EAAOC,QAASP,GAAUM,EAAON,MAAM,EAAE,iBAAA,UAC1D,SAAAI,MAAC,QACC,UAAWC,EAAAA,EAAGC,EAAOC,QAASD,EAAOR,CAAO,CAAC,EAC7C,MAAOI,EACP,GAAID,CAAAA,CAAM,CAAA,CAEd,CAEJ"}

package/dist/components/loading/index.js

@@ -1,24 +1,24 @@
-import { jsx as s } from "react/jsx-runtime";
-import { t } from "../../classix-DG18itHa.js";
-import '../../assets/index40.css';const l = "_loading_2k531_23", _ = "_spin_2k531_1", p = "_ping_2k531_39", e = "_sticky_2k531_65", o = {
+import { jsx as o } from "react/jsx-runtime";
+import { t as s } from "../../classix-DG18itHa.js";
+import '../../assets/index49.css';const l = "_loading_1d5zd_23", _ = "_spin_1d5zd_1", p = "_ping_1d5zd_39", e = "_sticky_1d5zd_65", n = {
   loading: l,
-  default: "_default_2k531_28",
+  default: "_default_1d5zd_28",
   spin: _,
   ping: p,
   sticky: e
-}, k = ({
-  variant: i = "default",
-  size: n,
-  sticky: a = !1,
-  ...d
+}, m = ({
+  variant: t = "default",
+  size: d,
+  sticky: i = !1,
+  ...a
 }) => {
   const c = {
-    "--border-size": n ? n / 8 + "px" : void 0,
-    "--size": n ? n + "px" : void 0
+    "--border-size": d ? d / 8 + "px" : void 0,
+    "--size": d ? d + "px" : void 0
   };
-  return /* @__PURE__ */ s("div", { className: t(o.loading, a && o.sticky), "data-component": "loading", children: /* @__PURE__ */ s("span", { className: t(o.loading, o[i]), style: c, ...d }) });
+  return /* @__PURE__ */ o("div", { className: s(n.loading, i && n.sticky), "data-component": "loading", children: /* @__PURE__ */ o("span", { className: s(n.loading, n[t]), style: c, ...a }) });
 };
 export {
-  k as Loading
+  m as Loading
 };
 //# sourceMappingURL=index.js.map

package/dist/components/loading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/loading/index.tsx"],"sourcesContent":["import { cx } from 'classix';\n\nimport styles from './styles.module.css';\n\nexport type LoadingProps = {\n  size?: number;\n  sticky?: boolean;\n  variant?: 'default' | 'ping';\n};\n\n/**\n *  Loader `size` needs to be divisible by `8` to ensure proper scaling (or by `unit` for golden ratio).\n */\n\nexport const Loading = ({ variant = 'default', size, sticky = false, ...props }: LoadingProps) => {\n  type withVars = React.CSSProperties & {\n    '--border-size'?: string;\n    '--size'?: string;\n  };\n\n  const withVars: withVars = {\n    '--border-size': size ? size / 8 + 'px' : undefined,\n    '--size': size ? size + 'px' : undefined,\n  };\n\n  return (\n    <div className={cx(styles.loading, sticky && styles.sticky)}>\n      <span\n        className={cx(styles.loading, styles[variant])}\n        style={withVars}\n        {...props}\n      />\n    </div>\n  );\n};\n"],"names":["Loading","variant","size","sticky","props","withVars","undefined","jsx","cx","styles","loading"],"mappings":";;;;;;;;GAcaA,IAAUA,CAAC;AAAA,EAAEC,SAAAA,IAAU;AAAA,EAAWC,MAAAA;AAAAA,EAAMC,QAAAA,IAAS;AAAA,EAAO,GAAGC;AAAoB,MAAM;AAMhG,QAAMC,IAAqB;AAAA,IACzB,iBAAiBH,IAAOA,IAAO,IAAI,OAAOI;AAAAA,IAC1C,UAAUJ,IAAOA,IAAO,OAAOI;AAAAA,EAAAA;AAGjC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAOC,SAASP,KAAUM,EAAON,MAAM,GAAE,kBAAA,WAC1D,UAAA,gBAAAI,EAAC,UACC,WAAWC,EAAGC,EAAOC,SAASD,EAAOR,CAAO,CAAC,GAC7C,OAAOI,GACP,GAAID,EAAAA,CAAM,EAAA,CAEd;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/loading/index.tsx"],"sourcesContent":["import { cx } from 'classix';\n\nimport styles from './styles.module.css';\n\nexport type LoadingProps = {\n  size?: number;\n  sticky?: boolean;\n  variant?: 'default' | 'ping';\n};\n\nexport const Loading = ({ variant = 'default', size, sticky = false, ...props }: LoadingProps) => {\n  type withVars = React.CSSProperties & {\n    '--border-size'?: string;\n    '--size'?: string;\n  };\n\n  const withVars: withVars = {\n    '--border-size': size ? size / 8 + 'px' : undefined,\n    '--size': size ? size + 'px' : undefined,\n  };\n\n  return (\n    <div className={cx(styles.loading, sticky && styles.sticky)}>\n      <span\n        className={cx(styles.loading, styles[variant])}\n        style={withVars}\n        {...props}\n      />\n    </div>\n  );\n};\n"],"names":["Loading","variant","size","sticky","props","withVars","undefined","jsx","cx","styles","loading"],"mappings":";;;;;;;;GAUaA,IAAUA,CAAC;AAAA,EAAEC,SAAAA,IAAU;AAAA,EAAWC,MAAAA;AAAAA,EAAMC,QAAAA,IAAS;AAAA,EAAO,GAAGC;AAAoB,MAAM;AAMhG,QAAMC,IAAqB;AAAA,IACzB,iBAAiBH,IAAOA,IAAO,IAAI,OAAOI;AAAAA,IAC1C,UAAUJ,IAAOA,IAAO,OAAOI;AAAAA,EAAAA;AAGjC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAOC,SAASP,KAAUM,EAAON,MAAM,GAAE,kBAAA,WAC1D,UAAA,gBAAAI,EAAC,UACC,WAAWC,EAAGC,EAAOC,SAASD,EAAOR,CAAO,CAAC,GAC7C,OAAOI,GACP,GAAID,EAAAA,CAAM,EAAA,CAEd;AAEJ;"}

package/dist/components/menu/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index15.css');const r=require("react/jsx-runtime"),m=require("../../classix-5H4IWnMA.cjs"),f=require("react"),b=require("../button/index.cjs"),p=require("../icon/index.cjs"),h=require("../list/index.cjs"),j=require("../popover/index.cjs"),v="_list_z7awx_3",y="_item_z7awx_15",w="_active_z7awx_38",D="_danger_z7awx_47",l={list:v,item:y,active:w,danger:D};function q(o){return o.filter(s=>!!(s&&!s.disabled))}const k=({close:o,initialFocus:s,items:u,menuAccessibleLabel:d,onItemSelect:c})=>{const a=f.useRef([]),t=f.useCallback(e=>{const n=q(a.current);if(n.length===0)return;if(e==="first"){n[0].focus();return}if(e==="last"){n[n.length-1].focus();return}const i=n.indexOf(document.activeElement),g=e==="next"?(i+1)%n.length:(i-1+n.length)%n.length;n[g].focus()},[]);f.useEffect(()=>{t(s??"first")},[t,s]);const x=e=>{if(e.key==="ArrowDown"){e.preventDefault(),t("next");return}if(e.key==="ArrowUp"){e.preventDefault(),t("previous");return}if(e.key==="Home"){e.preventDefault(),t("first");return}e.key==="End"&&(e.preventDefault(),t("last"))},_=e=>{var n;(n=e.onSelect)==null||n.call(e),c==null||c(e),o()};return r.jsx(h.List,{"aria-label":d,className:l.list,onKeyDown:x,role:"menu","data-component":"menupanel",children:u.map((e,n)=>r.jsx("li",{role:"none",children:r.jsxs(b.Button,{"aria-current":e.isActive?"true":void 0,"aria-label":e.accessibleLabel,className:m.t(l.item,e.isActive&&l.active,e.isDanger&&l.danger),disabled:e.disabled,onClick:()=>_(e),ref:i=>{a.current[n]=i},role:"menuitem",variant:"tertiary",children:[e.icon&&r.jsx(p.Icon,{fill:!0,gap:"right",name:e.icon,size:"small"}),r.jsx("span",{children:e.label})]})},e.id??n))})},z=({items:o,menuAccessibleLabel:s="Menu",onItemSelect:u,position:d="left",triggerAccessibleLabel:c="Open menu"})=>r.jsx(j.Popover,{position:d,triggerAccessibleLabel:c,triggerAriaHasPopup:"menu",triggerButtonContent:r.jsx(p.Icon,{name:"dots",size:"medium"}),"data-component":"menu",children:({close:a,initialFocus:t})=>r.jsx(k,{close:a,initialFocus:t,items:o,menuAccessibleLabel:s,onItemSelect:u})});exports.Menu=z;
+//# sourceMappingURL=index.cjs.map

package/dist/components/menu/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n  accessibleLabel?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  id?: string;\n  isActive?: boolean;\n  isDanger?: boolean;\n  label: React.ReactNode;\n  onSelect?: () => void;\n};\n\nexport type MenuProps = {\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n  position?: 'left' | 'right';\n  triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n  close: PopoverRenderProps['close'];\n  initialFocus?: PopoverInitialFocus;\n};\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n  return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n  close,\n  initialFocus,\n  items,\n  menuAccessibleLabel,\n  onItemSelect,\n}: MenuPanelProps) => {\n  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  const focusItem = useCallback((target: MenuFocusTarget) => {\n    const focusableItems = getFocusableItems(itemRefs.current);\n\n    if (focusableItems.length === 0) {\n      return;\n    }\n\n    if (target === 'first') {\n      focusableItems[0].focus();\n      return;\n    }\n\n    if (target === 'last') {\n      focusableItems[focusableItems.length - 1].focus();\n      return;\n    }\n\n    const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n    const nextIndex =\n      target === 'next'\n        ? (currentIndex + 1) % focusableItems.length\n        : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n    focusableItems[nextIndex].focus();\n  }, []);\n\n  useEffect(() => {\n    focusItem(initialFocus ?? 'first');\n  }, [focusItem, initialFocus]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      focusItem('next');\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      focusItem('previous');\n      return;\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      focusItem('first');\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      focusItem('last');\n    }\n  };\n\n  const handleItemSelect = (item: MenuItem) => {\n    item.onSelect?.();\n    onItemSelect?.(item);\n    close();\n  };\n\n  return (\n    <List\n      aria-label={menuAccessibleLabel}\n      className={styles.list}\n      onKeyDown={handleKeyDown}\n      role='menu'\n    >\n      {items.map((item, index) => (\n        <li\n          key={item.id ?? index}\n          role='none'\n        >\n          <Button\n            aria-current={item.isActive ? 'true' : undefined}\n            aria-label={item.accessibleLabel}\n            className={cx(\n              styles.item,\n              item.isActive && styles.active,\n              item.isDanger && styles.danger\n            )}\n            disabled={item.disabled}\n            onClick={() => handleItemSelect(item)}\n            ref={(node) => {\n              itemRefs.current[index] = node;\n            }}\n            role='menuitem'\n            variant='tertiary'\n          >\n            {item.icon && (\n              <Icon\n                fill\n                gap='right'\n                name={item.icon}\n                size='small'\n              />\n            )}\n            <span>{item.label}</span>\n          </Button>\n        </li>\n      ))}\n    </List>\n  );\n};\n\nexport const Menu = ({\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  position = 'left',\n  triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n  return (\n    <Popover\n      position={position}\n      triggerAccessibleLabel={triggerAccessibleLabel}\n      triggerAriaHasPopup='menu'\n      triggerButtonContent={\n        <Icon\n          name='dots'\n          size='medium'\n        />\n      }\n    >\n      {({ close, initialFocus }) => (\n        <MenuPanel\n          close={close}\n          initialFocus={initialFocus}\n          items={items}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onItemSelect={onItemSelect}\n        />\n      )}\n    </Popover>\n  );\n};\n"],"names":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","jsxs","Button","isActive","undefined","accessibleLabel","cx","active","isDanger","danger","node","icon","Icon","label","id","Menu","position","triggerAccessibleLabel","Popover"],"mappings":"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"}