jaci-ui 0.9.1 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.9.2
+
+### Patch Changes
+
+- 894b4e8: Update Storybook and compatible workspace tooling dependencies to their latest patch releases.
+- 10446a3: Fix `Button.render` with native and framework link elements, including Next.js client boundaries.
+- cdcfb85: Improve QRCode finder contrast in dark themes and add native SVG download support.
+- 77a1b9f: Improve QRCode's native SVG download link accessibility and preserve the QR code's image semantics.
+
 ## 0.9.1
 
 ### Patch Changes

package/README.md

@@ -84,10 +84,10 @@ import { AspectRatio, Code, Figure, Image, Kbd, Quote, Stat, StatGroup } from "j
 </StatGroup.Root>;
 ```
 
-### Mídia e utilitários visuais
+### Media and visual utilities
 
-`Carousel` oferece slides acessíveis com navegação por teclado, indicadores, swipe e autoplay
-opcional. Sempre forneça um `aria-label` no root e texto alternativo nas imagens:
+`Carousel` provides accessible slides with keyboard navigation, indicators, swipe support and
+optional autoplay. Always provide an `aria-label` on the root and alternative text for images:
 
 ```tsx
 <Carousel.Root aria-label="Featured projects" loop>
@@ -108,8 +108,8 @@ opcional. Sempre forneça um `aria-label` no root e texto alternativo nas imagen
 </Carousel.Root>
 ```
 
-`QRCode` gera SVG no servidor e no cliente, com módulos circulares e olhos quadrados
-arredondados. O valor pode ser controlado diretamente pela aplicação:
+`QRCode` generates SVG on the server and client, with circular modules and rounded square eyes.
+The application can control the value directly:
 
 ```tsx
 <QRCode
@@ -117,10 +117,15 @@ arredondados. O valor pode ser controlado diretamente pela aplicação:
   size={240}
   errorCorrectionLevel="Q"
   label="Jaci UI website"
+  download="jaci-ui-qr.svg"
+  downloadLabel="Download Jaci UI QR code"
 />
 ```
 
-Para downloads, `DownloadTrigger` é um link HTML comum e não faz fetch nem cria `Blob`:
+When `download` is provided, the SVG exposes a native link for downloading the code without
+using browser APIs during SSR.
+
+For downloads, `DownloadTrigger` is a regular HTML link: it does not fetch or create a `Blob`:
 
 ```tsx
 <DownloadTrigger href="/files/report.pdf" download="report.pdf">
@@ -128,19 +133,19 @@ Para downloads, `DownloadTrigger` é um link HTML comum e não faz fetch nem cri
 </DownloadTrigger>
 ```
 
-Em URLs cross-origin, o nome e a própria autorização do download continuam sujeitos às regras
-do navegador e aos headers do servidor.
+For cross-origin URLs, the filename and the download authorization remain subject to browser
+rules and server headers.
 
-Use `Separator` para uma linha semântica ou decorativa entre seções e `Spacer` quando precisar
-apenas de espaço, sem linha:
+Use `Separator` for a semantic or decorative line between sections, and `Spacer` when only
+space—not a line—is needed:
 
 ```tsx
 <Separator orientation="horizontal" />
 <Spacer axis="vertical" size="lg" />
 ```
 
-Todos esses componentes continuam compatíveis com SSR e React 18/19. `Carousel` é o único novo
-módulo interativo; os demais não acessam APIs do navegador durante importação ou renderização.
+These components support SSR and React 18/19. Interactive modules declare their client boundary
+where required and do not access browser APIs during import or server rendering.
 
 `AspectRatio` fills the available inline size of its parent. In shrink-to-fit or flex
 layouts, give the parent an explicit `width`/`max-width` so the ratio has a measurable

package/dist/components/button/button.cjs

@@ -16,7 +16,7 @@ function content(children, loading, startIcon, endIcon) {
 		!loading ? endIcon : void 0
 	] });
 }
-const Button = (0, react.forwardRef)(function Button({ children, className, variant = "outline", size = "md", fullWidth = false, loading = false, startIcon, endIcon, disabled, render, type = "button", ...props }, ref) {
+const Button = (0, react.forwardRef)(function Button({ children, className, variant = "outline", size = "md", fullWidth = false, loading = false, startIcon, endIcon, disabled, onClick: buttonOnClick, render, type = "button", ...props }, ref) {
 	const buttonClassName = require_cx.cx(require_button.button({
 		variant,
 		size,
@@ -24,7 +24,12 @@ const Button = (0, react.forwardRef)(function Button({ children, className, vari
 	}), className);
 	const childrenWithIcons = content(children, loading, startIcon, endIcon);
 	if (render) {
-		const renderedProps = render.props;
+		const renderedProps = render.props ?? {};
+		const renderedOnClick = renderedProps.onClick;
+		const handleRenderedClick = disabled || loading ? (event) => event.preventDefault() : (event) => {
+			renderedOnClick?.(event);
+			if (!event.defaultPrevented) buttonOnClick?.(event);
+		};
 		return (0, react.cloneElement)(render, {
 			...props,
 			"aria-busy": loading || void 0,
@@ -33,7 +38,7 @@ const Button = (0, react.forwardRef)(function Button({ children, className, vari
 			"data-jaci-component": "button",
 			"data-slot": "button",
 			children: childrenWithIcons,
-			onClick: disabled || loading ? void 0 : renderedProps.onClick
+			onClick: handleRenderedClick
 		});
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -43,6 +48,7 @@ const Button = (0, react.forwardRef)(function Button({ children, className, vari
 		"data-jaci-component": "button",
 		"data-slot": "button",
 		disabled: disabled || loading,
+		onClick: buttonOnClick,
 		ref,
 		type,
 		children: childrenWithIcons

package/dist/components/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","names":["Spinner","cx","button"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cloneElement, forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { button } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\ntype RenderableButtonProps = Record<string, unknown> & {\n  children?: ReactNode | undefined;\n  className?: string | undefined;\n  onClick?: MouseEventHandler<HTMLElement> | undefined;\n};\n\nexport interface ButtonProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"color\" | \"children\"> {\n  children?: ReactNode;\n  variant?: \"outline\" | \"solid\" | \"ghost\" | \"danger\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  fullWidth?: boolean;\n  loading?: boolean;\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  render?: ReactElement<RenderableButtonProps>;\n}\n\nfunction content(children: ReactNode, loading: boolean, startIcon: ReactNode, endIcon: ReactNode) {\n  return (\n    <>\n      {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : startIcon}\n      {children}\n      {!loading ? endIcon : undefined}\n    </>\n  );\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    children,\n    className,\n    variant = \"outline\",\n    size = \"md\",\n    fullWidth = false,\n    loading = false,\n    startIcon,\n    endIcon,\n    disabled,\n    render,\n    type = \"button\",\n    ...props\n  },\n  ref,\n) {\n  const buttonClassName = cx(button({ variant, size, fullWidth }), className);\n  const childrenWithIcons = content(children, loading, startIcon, endIcon);\n\n  if (render) {\n    const renderedProps = render.props as {\n      className?: string;\n      children?: ReactNode;\n      onClick?: MouseEventHandler<HTMLElement>;\n    };\n\n    return cloneElement(render, {\n      ...props,\n      \"aria-busy\": loading || undefined,\n      \"aria-disabled\": disabled || loading || undefined,\n      className: cx(buttonClassName, renderedProps.className),\n      \"data-jaci-component\": \"button\",\n      \"data-slot\": \"button\",\n      children: childrenWithIcons,\n      onClick: disabled || loading ? undefined : renderedProps.onClick,\n    });\n  }\n\n  return (\n    <button\n      {...props}\n      aria-busy={loading || undefined}\n      className={buttonClassName}\n      data-jaci-component=\"button\"\n      data-slot=\"button\"\n      disabled={disabled || loading}\n      ref={ref}\n      type={type}\n    >\n      {childrenWithIcons}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;AA2BA,SAAS,QAAQ,UAAqB,SAAkB,WAAsB,SAAoB;CAChG,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;EAC9D;EACA,CAAC,UAAU,UAAU,KAAA;CACtB,EAAA,CAAA;AAEN;AAEA,MAAa,UAAA,GAAA,MAAA,WAAA,CAAoD,SAAS,OACxE,EACE,UACA,WACA,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,QACA,OAAO,UACP,GAAG,SAEL,KACA;CACA,MAAM,kBAAkBC,WAAAA,GAAGC,eAAAA,OAAO;EAAE;EAAS;EAAM;CAAU,CAAC,GAAG,SAAS;CAC1E,MAAM,oBAAoB,QAAQ,UAAU,SAAS,WAAW,OAAO;CAEvE,IAAI,QAAQ;EACV,MAAM,gBAAgB,OAAO;EAM7B,QAAA,GAAA,MAAA,aAAA,CAAoB,QAAQ;GAC1B,GAAG;GACH,aAAa,WAAW,KAAA;GACxB,iBAAiB,YAAY,WAAW,KAAA;GACxC,WAAWD,WAAAA,GAAG,iBAAiB,cAAc,SAAS;GACtD,uBAAuB;GACvB,aAAa;GACb,UAAU;GACV,SAAS,YAAY,UAAU,KAAA,IAAY,cAAc;EAC3D,CAAC;CACH;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACJ,aAAW,WAAW,KAAA;EACtB,WAAW;EACX,uBAAoB;EACpB,aAAU;EACV,UAAU,YAAY;EACjB;EACC;YAEL;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"button.cjs","names":["Spinner","cx","button"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cloneElement, forwardRef } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { button } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\ntype RenderableButtonProps = Record<string, unknown> & {\n  children?: ReactNode | undefined;\n  className?: string | undefined;\n  onClick?: MouseEventHandler<HTMLElement> | undefined;\n};\n\nexport interface ButtonProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"color\" | \"children\"> {\n  children?: ReactNode;\n  variant?: \"outline\" | \"solid\" | \"ghost\" | \"danger\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  fullWidth?: boolean;\n  loading?: boolean;\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  render?: ReactElement<RenderableButtonProps>;\n}\n\nfunction content(children: ReactNode, loading: boolean, startIcon: ReactNode, endIcon: ReactNode) {\n  return (\n    <>\n      {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : startIcon}\n      {children}\n      {!loading ? endIcon : undefined}\n    </>\n  );\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    children,\n    className,\n    variant = \"outline\",\n    size = \"md\",\n    fullWidth = false,\n    loading = false,\n    startIcon,\n    endIcon,\n    disabled,\n    onClick: buttonOnClick,\n    render,\n    type = \"button\",\n    ...props\n  },\n  ref,\n) {\n  const buttonClassName = cx(button({ variant, size, fullWidth }), className);\n  const childrenWithIcons = content(children, loading, startIcon, endIcon);\n\n  if (render) {\n    // Some framework adapters (notably React Server Component boundaries) can\n    // provide a React element whose props are unavailable until cloning. Keep\n    // the render path tolerant of that representation.\n    const renderedProps = render.props ?? {};\n    const renderedOnClick = renderedProps.onClick as MouseEventHandler<HTMLElement> | undefined;\n    const handleRenderedClick: MouseEventHandler<HTMLElement> | undefined =\n      disabled || loading\n        ? (event) => event.preventDefault()\n        : (event) => {\n            renderedOnClick?.(event);\n            if (!event.defaultPrevented) {\n              buttonOnClick?.(event as unknown as MouseEvent<HTMLButtonElement>);\n            }\n          };\n\n    return cloneElement(render, {\n      ...props,\n      \"aria-busy\": loading || undefined,\n      \"aria-disabled\": disabled || loading || undefined,\n      className: cx(buttonClassName, renderedProps.className),\n      \"data-jaci-component\": \"button\",\n      \"data-slot\": \"button\",\n      children: childrenWithIcons,\n      onClick: handleRenderedClick,\n    });\n  }\n\n  return (\n    <button\n      {...props}\n      aria-busy={loading || undefined}\n      className={buttonClassName}\n      data-jaci-component=\"button\"\n      data-slot=\"button\"\n      disabled={disabled || loading}\n      onClick={buttonOnClick}\n      ref={ref}\n      type={type}\n    >\n      {childrenWithIcons}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;AAiCA,SAAS,QAAQ,UAAqB,SAAkB,WAAsB,SAAoB;CAChG,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;EAC9D;EACA,CAAC,UAAU,UAAU,KAAA;CACtB,EAAA,CAAA;AAEN;AAEA,MAAa,UAAA,GAAA,MAAA,WAAA,CAAoD,SAAS,OACxE,EACE,UACA,WACA,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,SAAS,eACT,QACA,OAAO,UACP,GAAG,SAEL,KACA;CACA,MAAM,kBAAkBC,WAAAA,GAAGC,eAAAA,OAAO;EAAE;EAAS;EAAM;CAAU,CAAC,GAAG,SAAS;CAC1E,MAAM,oBAAoB,QAAQ,UAAU,SAAS,WAAW,OAAO;CAEvE,IAAI,QAAQ;EAIV,MAAM,gBAAgB,OAAO,SAAS,CAAC;EACvC,MAAM,kBAAkB,cAAc;EACtC,MAAM,sBACJ,YAAY,WACP,UAAU,MAAM,eAAe,KAC/B,UAAU;GACT,kBAAkB,KAAK;GACvB,IAAI,CAAC,MAAM,kBACT,gBAAgB,KAAiD;EAErE;EAEN,QAAA,GAAA,MAAA,aAAA,CAAoB,QAAQ;GAC1B,GAAG;GACH,aAAa,WAAW,KAAA;GACxB,iBAAiB,YAAY,WAAW,KAAA;GACxC,WAAWD,WAAAA,GAAG,iBAAiB,cAAc,SAAS;GACtD,uBAAuB;GACvB,aAAa;GACb,UAAU;GACV,SAAS;EACX,CAAC;CACH;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACJ,aAAW,WAAW,KAAA;EACtB,WAAW;EACX,uBAAoB;EACpB,aAAU;EACV,UAAU,YAAY;EACtB,SAAS;EACJ;EACC;YAEL;CACK,CAAA;AAEZ,CAAC"}

package/dist/components/button/button.js

@@ -16,7 +16,7 @@ function content(children, loading, startIcon, endIcon) {
 		!loading ? endIcon : void 0
 	] });
 }
-const Button = forwardRef(function Button({ children, className, variant = "outline", size = "md", fullWidth = false, loading = false, startIcon, endIcon, disabled, render, type = "button", ...props }, ref) {
+const Button = forwardRef(function Button({ children, className, variant = "outline", size = "md", fullWidth = false, loading = false, startIcon, endIcon, disabled, onClick: buttonOnClick, render, type = "button", ...props }, ref) {
 	const buttonClassName = cx(button({
 		variant,
 		size,
@@ -24,7 +24,12 @@ const Button = forwardRef(function Button({ children, className, variant = "outl
 	}), className);
 	const childrenWithIcons = content(children, loading, startIcon, endIcon);
 	if (render) {
-		const renderedProps = render.props;
+		const renderedProps = render.props ?? {};
+		const renderedOnClick = renderedProps.onClick;
+		const handleRenderedClick = disabled || loading ? (event) => event.preventDefault() : (event) => {
+			renderedOnClick?.(event);
+			if (!event.defaultPrevented) buttonOnClick?.(event);
+		};
 		return cloneElement(render, {
 			...props,
 			"aria-busy": loading || void 0,
@@ -33,7 +38,7 @@ const Button = forwardRef(function Button({ children, className, variant = "outl
 			"data-jaci-component": "button",
 			"data-slot": "button",
 			children: childrenWithIcons,
-			onClick: disabled || loading ? void 0 : renderedProps.onClick
+			onClick: handleRenderedClick
 		});
 	}
 	return /* @__PURE__ */ jsx("button", {
@@ -43,6 +48,7 @@ const Button = forwardRef(function Button({ children, className, variant = "outl
 		"data-jaci-component": "button",
 		"data-slot": "button",
 		disabled: disabled || loading,
+		onClick: buttonOnClick,
 		ref,
 		type,
 		children: childrenWithIcons

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cloneElement, forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { button } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\ntype RenderableButtonProps = Record<string, unknown> & {\n  children?: ReactNode | undefined;\n  className?: string | undefined;\n  onClick?: MouseEventHandler<HTMLElement> | undefined;\n};\n\nexport interface ButtonProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"color\" | \"children\"> {\n  children?: ReactNode;\n  variant?: \"outline\" | \"solid\" | \"ghost\" | \"danger\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  fullWidth?: boolean;\n  loading?: boolean;\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  render?: ReactElement<RenderableButtonProps>;\n}\n\nfunction content(children: ReactNode, loading: boolean, startIcon: ReactNode, endIcon: ReactNode) {\n  return (\n    <>\n      {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : startIcon}\n      {children}\n      {!loading ? endIcon : undefined}\n    </>\n  );\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    children,\n    className,\n    variant = \"outline\",\n    size = \"md\",\n    fullWidth = false,\n    loading = false,\n    startIcon,\n    endIcon,\n    disabled,\n    render,\n    type = \"button\",\n    ...props\n  },\n  ref,\n) {\n  const buttonClassName = cx(button({ variant, size, fullWidth }), className);\n  const childrenWithIcons = content(children, loading, startIcon, endIcon);\n\n  if (render) {\n    const renderedProps = render.props as {\n      className?: string;\n      children?: ReactNode;\n      onClick?: MouseEventHandler<HTMLElement>;\n    };\n\n    return cloneElement(render, {\n      ...props,\n      \"aria-busy\": loading || undefined,\n      \"aria-disabled\": disabled || loading || undefined,\n      className: cx(buttonClassName, renderedProps.className),\n      \"data-jaci-component\": \"button\",\n      \"data-slot\": \"button\",\n      children: childrenWithIcons,\n      onClick: disabled || loading ? undefined : renderedProps.onClick,\n    });\n  }\n\n  return (\n    <button\n      {...props}\n      aria-busy={loading || undefined}\n      className={buttonClassName}\n      data-jaci-component=\"button\"\n      data-slot=\"button\"\n      disabled={disabled || loading}\n      ref={ref}\n      type={type}\n    >\n      {childrenWithIcons}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;AA2BA,SAAS,QAAQ,UAAqB,SAAkB,WAAsB,SAAoB;CAChG,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,UAAU,oBAAC,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;EAC9D;EACA,CAAC,UAAU,UAAU,KAAA;CACtB,EAAA,CAAA;AAEN;AAEA,MAAa,SAAS,WAA2C,SAAS,OACxE,EACE,UACA,WACA,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,QACA,OAAO,UACP,GAAG,SAEL,KACA;CACA,MAAM,kBAAkB,GAAG,OAAO;EAAE;EAAS;EAAM;CAAU,CAAC,GAAG,SAAS;CAC1E,MAAM,oBAAoB,QAAQ,UAAU,SAAS,WAAW,OAAO;CAEvE,IAAI,QAAQ;EACV,MAAM,gBAAgB,OAAO;EAM7B,OAAO,aAAa,QAAQ;GAC1B,GAAG;GACH,aAAa,WAAW,KAAA;GACxB,iBAAiB,YAAY,WAAW,KAAA;GACxC,WAAW,GAAG,iBAAiB,cAAc,SAAS;GACtD,uBAAuB;GACvB,aAAa;GACb,UAAU;GACV,SAAS,YAAY,UAAU,KAAA,IAAY,cAAc;EAC3D,CAAC;CACH;CAEA,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,aAAW,WAAW,KAAA;EACtB,WAAW;EACX,uBAAoB;EACpB,aAAU;EACV,UAAU,YAAY;EACjB;EACC;YAEL;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cloneElement, forwardRef } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { button } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\ntype RenderableButtonProps = Record<string, unknown> & {\n  children?: ReactNode | undefined;\n  className?: string | undefined;\n  onClick?: MouseEventHandler<HTMLElement> | undefined;\n};\n\nexport interface ButtonProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"color\" | \"children\"> {\n  children?: ReactNode;\n  variant?: \"outline\" | \"solid\" | \"ghost\" | \"danger\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  fullWidth?: boolean;\n  loading?: boolean;\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  render?: ReactElement<RenderableButtonProps>;\n}\n\nfunction content(children: ReactNode, loading: boolean, startIcon: ReactNode, endIcon: ReactNode) {\n  return (\n    <>\n      {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : startIcon}\n      {children}\n      {!loading ? endIcon : undefined}\n    </>\n  );\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    children,\n    className,\n    variant = \"outline\",\n    size = \"md\",\n    fullWidth = false,\n    loading = false,\n    startIcon,\n    endIcon,\n    disabled,\n    onClick: buttonOnClick,\n    render,\n    type = \"button\",\n    ...props\n  },\n  ref,\n) {\n  const buttonClassName = cx(button({ variant, size, fullWidth }), className);\n  const childrenWithIcons = content(children, loading, startIcon, endIcon);\n\n  if (render) {\n    // Some framework adapters (notably React Server Component boundaries) can\n    // provide a React element whose props are unavailable until cloning. Keep\n    // the render path tolerant of that representation.\n    const renderedProps = render.props ?? {};\n    const renderedOnClick = renderedProps.onClick as MouseEventHandler<HTMLElement> | undefined;\n    const handleRenderedClick: MouseEventHandler<HTMLElement> | undefined =\n      disabled || loading\n        ? (event) => event.preventDefault()\n        : (event) => {\n            renderedOnClick?.(event);\n            if (!event.defaultPrevented) {\n              buttonOnClick?.(event as unknown as MouseEvent<HTMLButtonElement>);\n            }\n          };\n\n    return cloneElement(render, {\n      ...props,\n      \"aria-busy\": loading || undefined,\n      \"aria-disabled\": disabled || loading || undefined,\n      className: cx(buttonClassName, renderedProps.className),\n      \"data-jaci-component\": \"button\",\n      \"data-slot\": \"button\",\n      children: childrenWithIcons,\n      onClick: handleRenderedClick,\n    });\n  }\n\n  return (\n    <button\n      {...props}\n      aria-busy={loading || undefined}\n      className={buttonClassName}\n      data-jaci-component=\"button\"\n      data-slot=\"button\"\n      disabled={disabled || loading}\n      onClick={buttonOnClick}\n      ref={ref}\n      type={type}\n    >\n      {childrenWithIcons}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;AAiCA,SAAS,QAAQ,UAAqB,SAAkB,WAAsB,SAAoB;CAChG,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,UAAU,oBAAC,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;EAC9D;EACA,CAAC,UAAU,UAAU,KAAA;CACtB,EAAA,CAAA;AAEN;AAEA,MAAa,SAAS,WAA2C,SAAS,OACxE,EACE,UACA,WACA,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,SAAS,eACT,QACA,OAAO,UACP,GAAG,SAEL,KACA;CACA,MAAM,kBAAkB,GAAG,OAAO;EAAE;EAAS;EAAM;CAAU,CAAC,GAAG,SAAS;CAC1E,MAAM,oBAAoB,QAAQ,UAAU,SAAS,WAAW,OAAO;CAEvE,IAAI,QAAQ;EAIV,MAAM,gBAAgB,OAAO,SAAS,CAAC;EACvC,MAAM,kBAAkB,cAAc;EACtC,MAAM,sBACJ,YAAY,WACP,UAAU,MAAM,eAAe,KAC/B,UAAU;GACT,kBAAkB,KAAK;GACvB,IAAI,CAAC,MAAM,kBACT,gBAAgB,KAAiD;EAErE;EAEN,OAAO,aAAa,QAAQ;GAC1B,GAAG;GACH,aAAa,WAAW,KAAA;GACxB,iBAAiB,YAAY,WAAW,KAAA;GACxC,WAAW,GAAG,iBAAiB,cAAc,SAAS;GACtD,uBAAuB;GACvB,aAAa;GACb,UAAU;GACV,SAAS;EACX,CAAC;CACH;CAEA,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,aAAW,WAAW,KAAA;EACtB,WAAW;EACX,uBAAoB;EACpB,aAAU;EACV,UAAU,YAAY;EACtB,SAAS;EACJ;EACC;YAEL;CACK,CAAA;AAEZ,CAAC"}

package/dist/components/qr-code/qr-code.cjs

@@ -14,6 +14,7 @@ function Finder({ x, y, color, background }) {
 		"data-slot": "qr-code-eye",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				"data-slot": "qr-code-eye-frame",
 				fill: color,
 				height: "7",
 				rx: "1",
@@ -22,6 +23,7 @@ function Finder({ x, y, color, background }) {
 				y
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				"data-slot": "qr-code-eye-cutout",
 				fill: background,
 				height: "5",
 				rx: "0.75",
@@ -30,6 +32,7 @@ function Finder({ x, y, color, background }) {
 				y: y + 1
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				"data-slot": "qr-code-eyeball",
 				fill: color,
 				height: "3",
 				rx: "0.5",
@@ -40,66 +43,108 @@ function Finder({ x, y, color, background }) {
 		]
 	});
 }
-const QRCode = (0, react.forwardRef)(function QRCode({ background = "transparent", className, errorCorrectionLevel = "Q", fallback, foreground = "currentColor", label = "QR code", margin = 2, size = 192, style, value, ...props }, ref) {
+function escapeXml(value) {
+	return value.replace(/[&<>'"]/g, (character) => {
+		return {
+			"&": "&amp;",
+			"<": "&lt;",
+			">": "&gt;",
+			"'": "&apos;",
+			"\"": "&quot;"
+		}[character] ?? character;
+	});
+}
+function createDownloadSvg({ background, dots, foreground, finderBackground, label, margin, moduleCount }) {
+	const viewBoxSize = moduleCount + margin * 2;
+	const backgroundMarkup = background === "transparent" ? "" : `<rect fill="${escapeXml(background)}" height="${viewBoxSize}" width="${viewBoxSize}" x="0" y="0"/>`;
+	const dotsMarkup = dots.map(([row, column]) => `<circle cx="${margin + column + .5}" cy="${margin + row + .5}" fill="${escapeXml(foreground)}" r="0.43"/>`).join("");
+	const finderMarkup = (x, y) => `<g><rect fill="${escapeXml(foreground)}" height="7" rx="1" width="7" x="${x}" y="${y}"/><rect fill="${escapeXml(finderBackground)}" height="5" rx="0.75" width="5" x="${x + 1}" y="${y + 1}"/><rect fill="${escapeXml(foreground)}" height="3" rx="0.5" width="3" x="${x + 2}" y="${y + 2}"/></g>`;
+	return `<svg xmlns="http://www.w3.org/2000/svg" aria-label="${escapeXml(label)}" role="img" viewBox="0 0 ${viewBoxSize} ${viewBoxSize}">${backgroundMarkup}${dotsMarkup}${finderMarkup(margin, margin)}${finderMarkup(margin + moduleCount - 7, margin)}${finderMarkup(margin, margin + moduleCount - 7)}</svg>`;
+}
+const QRCode = (0, react.forwardRef)(function QRCode({ background = "#ffffff", className, download = false, downloadLabel = "Download QR code", errorCorrectionLevel = "Q", fallback, foreground = "#18181b", label = "QR code", margin = 2, size = 192, style, value, ...props }, ref) {
 	const safeSize = Number.isFinite(size) && size > 0 ? size : 192;
 	const safeMargin = Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 2;
-	const finderBackground = background === "transparent" ? "white" : background;
+	const finderBackground = background === "transparent" ? "var(--jaci-colors-surface-raised)" : background;
 	try {
 		const code = qrcode.create(value, { errorCorrectionLevel });
 		const moduleCount = code.modules.size;
 		const viewBoxSize = moduleCount + safeMargin * 2;
 		const modules = [];
-		for (let row = 0; row < moduleCount; row += 1) for (let column = 0; column < moduleCount; column += 1) if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) modules.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-			cx: safeMargin + column + .5,
-			cy: safeMargin + row + .5,
-			"data-slot": "qr-code-dot",
-			fill: foreground,
-			r: "0.43"
-		}, `${row}-${column}`));
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		const dotCoordinates = [];
+		for (let row = 0; row < moduleCount; row += 1) for (let column = 0; column < moduleCount; column += 1) if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) {
+			dotCoordinates.push([row, column]);
+			modules.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: safeMargin + column + .5,
+				cy: safeMargin + row + .5,
+				"data-slot": "qr-code-dot",
+				fill: foreground,
+				r: "0.43"
+			}, `${row}-${column}`));
+		}
+		const downloadHref = download && `data:image/svg+xml;charset=utf-8,${encodeURIComponent(createDownloadSvg({
+			background,
+			dots: dotCoordinates,
+			foreground,
+			finderBackground: background === "transparent" ? "#ffffff" : background,
+			label,
+			margin: safeMargin,
+			moduleCount
+		}))}`;
+		const downloadFilename = typeof download === "string" ? download : "qrcode.svg";
+		const visualCode = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			background !== "transparent" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				fill: background,
+				height: viewBoxSize,
+				width: viewBoxSize,
+				x: "0",
+				y: "0"
+			}) : null,
+			modules,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Finder, {
+				background: finderBackground,
+				color: foreground,
+				x: safeMargin,
+				y: safeMargin
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Finder, {
+				background: finderBackground,
+				color: foreground,
+				x: safeMargin + moduleCount - 7,
+				y: safeMargin
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Finder, {
+				background: finderBackground,
+				color: foreground,
+				x: safeMargin,
+				y: safeMargin + moduleCount - 7
+			})
+		] });
+		const svg = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 			...props,
 			ref,
-			"aria-label": label,
+			"aria-hidden": downloadHref ? true : void 0,
+			"aria-label": downloadHref ? void 0 : label,
 			className: require_cx.cx(require_qr_code.qrCode(), className),
 			"data-dot-shape": "circle",
+			"data-download": download ? "true" : void 0,
 			"data-eye-shape": "rounded-square",
 			"data-jaci-component": "qr-code",
 			"data-slot": "qr-code",
 			height: safeSize,
-			role: "img",
+			role: downloadHref ? void 0 : "img",
 			style,
 			viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
 			width: safeSize,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: label }),
-				background !== "transparent" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-					fill: background,
-					height: viewBoxSize,
-					width: viewBoxSize,
-					x: "0",
-					y: "0"
-				}) : null,
-				modules,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Finder, {
-					background: finderBackground,
-					color: foreground,
-					x: safeMargin,
-					y: safeMargin
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Finder, {
-					background: finderBackground,
-					color: foreground,
-					x: safeMargin + moduleCount - 7,
-					y: safeMargin
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Finder, {
-					background: finderBackground,
-					color: foreground,
-					x: safeMargin,
-					y: safeMargin + moduleCount - 7
-				})
-			]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: label }), visualCode]
 		});
+		return downloadHref ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			"aria-label": downloadLabel,
+			"data-jaci-component": "qr-code-download",
+			"data-slot": "qr-code-download",
+			download: downloadFilename,
+			href: downloadHref,
+			children: svg
+		}) : svg;
 	} catch {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"aria-label": label,

package/dist/components/qr-code/qr-code.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"qr-code.cjs","names":["QRCodeEncoder","cx","qrCode"],"sources":["../../../src/components/qr-code/qr-code.tsx"],"sourcesContent":["import * as QRCodeEncoder from \"qrcode\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { qrCode } from \"../../styled-system/recipes\";\n\nexport type QRCodeErrorCorrectionLevel = \"L\" | \"M\" | \"Q\" | \"H\";\n\nexport interface QRCodeProps extends Omit<ComponentPropsWithoutRef<\"svg\">, \"children\"> {\n  value: string;\n  size?: number;\n  margin?: number;\n  errorCorrectionLevel?: QRCodeErrorCorrectionLevel;\n  foreground?: string;\n  background?: string;\n  label?: string;\n  fallback?: ReactNode;\n}\n\nfunction isFinderCell(row: number, column: number, size: number) {\n  return (\n    (row < 7 && column < 7) || (row < 7 && column >= size - 7) || (row >= size - 7 && column < 7)\n  );\n}\n\nfunction Finder({\n  x,\n  y,\n  color,\n  background,\n}: {\n  x: number;\n  y: number;\n  color: string;\n  background: string;\n}) {\n  return (\n    <g data-slot=\"qr-code-eye\">\n      <rect fill={color} height=\"7\" rx=\"1\" width=\"7\" x={x} y={y} />\n      <rect fill={background} height=\"5\" rx=\"0.75\" width=\"5\" x={x + 1} y={y + 1} />\n      <rect fill={color} height=\"3\" rx=\"0.5\" width=\"3\" x={x + 2} y={y + 2} />\n    </g>\n  );\n}\n\nexport const QRCode = forwardRef<SVGSVGElement, QRCodeProps>(function QRCode(\n  {\n    background = \"transparent\",\n    className,\n    errorCorrectionLevel = \"Q\",\n    fallback,\n    foreground = \"currentColor\",\n    label = \"QR code\",\n    margin = 2,\n    size = 192,\n    style,\n    value,\n    ...props\n  },\n  ref,\n) {\n  const safeSize = Number.isFinite(size) && size > 0 ? size : 192;\n  const safeMargin = Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 2;\n  // Finder patterns need a contrasting quiet area between the frame and the\n  // eyeball. Keep the overall SVG transparent by default, but use a white\n  // cutout when no background was supplied so the code remains scannable.\n  const finderBackground = background === \"transparent\" ? \"white\" : background;\n\n  try {\n    const code = QRCodeEncoder.create(value, { errorCorrectionLevel });\n    const moduleCount = code.modules.size;\n    const viewBoxSize = moduleCount + safeMargin * 2;\n    const modules: ReactNode[] = [];\n\n    for (let row = 0; row < moduleCount; row += 1) {\n      for (let column = 0; column < moduleCount; column += 1) {\n        if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) {\n          modules.push(\n            <circle\n              cx={safeMargin + column + 0.5}\n              cy={safeMargin + row + 0.5}\n              data-slot=\"qr-code-dot\"\n              fill={foreground}\n              key={`${row}-${column}`}\n              r=\"0.43\"\n            />,\n          );\n        }\n      }\n    }\n\n    return (\n      <svg\n        {...props}\n        ref={ref}\n        aria-label={label}\n        className={cx(qrCode(), className)}\n        data-dot-shape=\"circle\"\n        data-eye-shape=\"rounded-square\"\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        height={safeSize}\n        role=\"img\"\n        style={style}\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        width={safeSize}\n      >\n        <title>{label}</title>\n        {background !== \"transparent\" ? (\n          <rect fill={background} height={viewBoxSize} width={viewBoxSize} x=\"0\" y=\"0\" />\n        ) : null}\n        {modules}\n        <Finder background={finderBackground} color={foreground} x={safeMargin} y={safeMargin} />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin + moduleCount - 7}\n          y={safeMargin}\n        />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin}\n          y={safeMargin + moduleCount - 7}\n        />\n      </svg>\n    );\n  } catch {\n    return (\n      <span\n        aria-label={label}\n        className={cx(qrCode(), className)}\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        data-status=\"error\"\n        role=\"img\"\n      >\n        {fallback ?? \"Unable to generate QR code\"}\n      </span>\n    );\n  }\n});\n"],"mappings":"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"}
+{"version":3,"file":"qr-code.cjs","names":["QRCodeEncoder","cx","qrCode"],"sources":["../../../src/components/qr-code/qr-code.tsx"],"sourcesContent":["import * as QRCodeEncoder from \"qrcode\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { qrCode } from \"../../styled-system/recipes\";\n\nexport type QRCodeErrorCorrectionLevel = \"L\" | \"M\" | \"Q\" | \"H\";\n\nexport interface QRCodeProps\n  extends Omit<ComponentPropsWithoutRef<\"svg\">, \"children\" | \"download\"> {\n  value: string;\n  size?: number;\n  margin?: number;\n  errorCorrectionLevel?: QRCodeErrorCorrectionLevel;\n  foreground?: string;\n  background?: string;\n  label?: string;\n  fallback?: ReactNode;\n  /** Enables a native SVG download link inside the rendered code. */\n  download?: boolean | string;\n  downloadLabel?: string;\n}\n\nfunction isFinderCell(row: number, column: number, size: number) {\n  return (\n    (row < 7 && column < 7) || (row < 7 && column >= size - 7) || (row >= size - 7 && column < 7)\n  );\n}\n\nfunction Finder({\n  x,\n  y,\n  color,\n  background,\n}: {\n  x: number;\n  y: number;\n  color: string;\n  background: string;\n}) {\n  return (\n    <g data-slot=\"qr-code-eye\">\n      <rect data-slot=\"qr-code-eye-frame\" fill={color} height=\"7\" rx=\"1\" width=\"7\" x={x} y={y} />\n      <rect\n        data-slot=\"qr-code-eye-cutout\"\n        fill={background}\n        height=\"5\"\n        rx=\"0.75\"\n        width=\"5\"\n        x={x + 1}\n        y={y + 1}\n      />\n      <rect\n        data-slot=\"qr-code-eyeball\"\n        fill={color}\n        height=\"3\"\n        rx=\"0.5\"\n        width=\"3\"\n        x={x + 2}\n        y={y + 2}\n      />\n    </g>\n  );\n}\n\nfunction escapeXml(value: string) {\n  return value.replace(/[&<>'\"]/g, (character) => {\n    const entities: Record<string, string> = {\n      \"&\": \"&amp;\",\n      \"<\": \"&lt;\",\n      \">\": \"&gt;\",\n      \"'\": \"&apos;\",\n      '\"': \"&quot;\",\n    };\n    return entities[character] ?? character;\n  });\n}\n\nfunction createDownloadSvg({\n  background,\n  dots,\n  foreground,\n  finderBackground,\n  label,\n  margin,\n  moduleCount,\n}: {\n  background: string;\n  dots: readonly [number, number][];\n  foreground: string;\n  finderBackground: string;\n  label: string;\n  margin: number;\n  moduleCount: number;\n}) {\n  const viewBoxSize = moduleCount + margin * 2;\n  const backgroundMarkup =\n    background === \"transparent\"\n      ? \"\"\n      : `<rect fill=\"${escapeXml(background)}\" height=\"${viewBoxSize}\" width=\"${viewBoxSize}\" x=\"0\" y=\"0\"/>`;\n  const dotsMarkup = dots\n    .map(\n      ([row, column]) =>\n        `<circle cx=\"${margin + column + 0.5}\" cy=\"${margin + row + 0.5}\" fill=\"${escapeXml(foreground)}\" r=\"0.43\"/>`,\n    )\n    .join(\"\");\n  const finderMarkup = (x: number, y: number) =>\n    `<g><rect fill=\"${escapeXml(foreground)}\" height=\"7\" rx=\"1\" width=\"7\" x=\"${x}\" y=\"${y}\"/><rect fill=\"${escapeXml(finderBackground)}\" height=\"5\" rx=\"0.75\" width=\"5\" x=\"${x + 1}\" y=\"${y + 1}\"/><rect fill=\"${escapeXml(foreground)}\" height=\"3\" rx=\"0.5\" width=\"3\" x=\"${x + 2}\" y=\"${y + 2}\"/></g>`;\n\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"${escapeXml(label)}\" role=\"img\" viewBox=\"0 0 ${viewBoxSize} ${viewBoxSize}\">${backgroundMarkup}${dotsMarkup}${finderMarkup(margin, margin)}${finderMarkup(margin + moduleCount - 7, margin)}${finderMarkup(margin, margin + moduleCount - 7)}</svg>`;\n}\n\nexport const QRCode = forwardRef<SVGSVGElement, QRCodeProps>(function QRCode(\n  {\n    // A QR code needs a deterministic high-contrast base. Inheriting\n    // `currentColor` or a transparent surface can make finder layers merge\n    // in dark scopes, so the defaults intentionally remain black on white.\n    background = \"#ffffff\",\n    className,\n    download = false,\n    downloadLabel = \"Download QR code\",\n    errorCorrectionLevel = \"Q\",\n    fallback,\n    foreground = \"#18181b\",\n    label = \"QR code\",\n    margin = 2,\n    size = 192,\n    style,\n    value,\n    ...props\n  },\n  ref,\n) {\n  const safeSize = Number.isFinite(size) && size > 0 ? size : 192;\n  const safeMargin = Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 2;\n  const finderBackground =\n    background === \"transparent\" ? \"var(--jaci-colors-surface-raised)\" : background;\n\n  try {\n    const code = QRCodeEncoder.create(value, { errorCorrectionLevel });\n    const moduleCount = code.modules.size;\n    const viewBoxSize = moduleCount + safeMargin * 2;\n    const modules: ReactNode[] = [];\n    const dotCoordinates: [number, number][] = [];\n\n    for (let row = 0; row < moduleCount; row += 1) {\n      for (let column = 0; column < moduleCount; column += 1) {\n        if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) {\n          dotCoordinates.push([row, column]);\n          modules.push(\n            <circle\n              cx={safeMargin + column + 0.5}\n              cy={safeMargin + row + 0.5}\n              data-slot=\"qr-code-dot\"\n              fill={foreground}\n              key={`${row}-${column}`}\n              r=\"0.43\"\n            />,\n          );\n        }\n      }\n    }\n\n    const downloadHref =\n      download &&\n      `data:image/svg+xml;charset=utf-8,${encodeURIComponent(\n        createDownloadSvg({\n          background,\n          dots: dotCoordinates,\n          foreground,\n          finderBackground: background === \"transparent\" ? \"#ffffff\" : background,\n          label,\n          margin: safeMargin,\n          moduleCount,\n        }),\n      )}`;\n    const downloadFilename = typeof download === \"string\" ? download : \"qrcode.svg\";\n    const visualCode = (\n      <>\n        {background !== \"transparent\" ? (\n          <rect fill={background} height={viewBoxSize} width={viewBoxSize} x=\"0\" y=\"0\" />\n        ) : null}\n        {modules}\n        <Finder background={finderBackground} color={foreground} x={safeMargin} y={safeMargin} />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin + moduleCount - 7}\n          y={safeMargin}\n        />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin}\n          y={safeMargin + moduleCount - 7}\n        />\n      </>\n    );\n\n    const svg = (\n      <svg\n        {...props}\n        ref={ref}\n        aria-hidden={downloadHref ? true : undefined}\n        aria-label={downloadHref ? undefined : label}\n        className={cx(qrCode(), className)}\n        data-dot-shape=\"circle\"\n        data-download={download ? \"true\" : undefined}\n        data-eye-shape=\"rounded-square\"\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        height={safeSize}\n        role={downloadHref ? undefined : \"img\"}\n        style={style}\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        width={safeSize}\n      >\n        <title>{label}</title>\n        {visualCode}\n      </svg>\n    );\n\n    return downloadHref ? (\n      <a\n        aria-label={downloadLabel}\n        data-jaci-component=\"qr-code-download\"\n        data-slot=\"qr-code-download\"\n        download={downloadFilename}\n        href={downloadHref}\n      >\n        {svg}\n      </a>\n    ) : (\n      svg\n    );\n  } catch {\n    return (\n      <span\n        aria-label={label}\n        className={cx(qrCode(), className)}\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        data-status=\"error\"\n        role=\"img\"\n      >\n        {fallback ?? \"Unable to generate QR code\"}\n      </span>\n    );\n  }\n});\n"],"mappings":";;;;;;;;AAwBA,SAAS,aAAa,KAAa,QAAgB,MAAc;CAC/D,OACG,MAAM,KAAK,SAAS,KAAO,MAAM,KAAK,UAAU,OAAO,KAAO,OAAO,OAAO,KAAK,SAAS;AAE/F;AAEA,SAAS,OAAO,EACd,GACA,GACA,OACA,cAMC;CACD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,KAAD;EAAG,aAAU;YAAb;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,aAAU;IAAoB,MAAM;IAAO,QAAO;IAAI,IAAG;IAAI,OAAM;IAAO;IAAM;GAAI,CAAA;GAC1F,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,aAAU;IACV,MAAM;IACN,QAAO;IACP,IAAG;IACH,OAAM;IACN,GAAG,IAAI;IACP,GAAG,IAAI;GACR,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,aAAU;IACV,MAAM;IACN,QAAO;IACP,IAAG;IACH,OAAM;IACN,GAAG,IAAI;IACP,GAAG,IAAI;GACR,CAAA;EACA;;AAEP;AAEA,SAAS,UAAU,OAAe;CAChC,OAAO,MAAM,QAAQ,aAAa,cAAc;EAQ9C,OAAO;GANL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,MAAK;EAEO,EAAE,cAAc;CAChC,CAAC;AACH;AAEA,SAAS,kBAAkB,EACzB,YACA,MACA,YACA,kBACA,OACA,QACA,eASC;CACD,MAAM,cAAc,cAAc,SAAS;CAC3C,MAAM,mBACJ,eAAe,gBACX,KACA,eAAe,UAAU,UAAU,EAAE,YAAY,YAAY,WAAW,YAAY;CAC1F,MAAM,aAAa,KAChB,KACE,CAAC,KAAK,YACL,eAAe,SAAS,SAAS,GAAI,QAAQ,SAAS,MAAM,GAAI,UAAU,UAAU,UAAU,EAAE,aACpG,CAAC,CACA,KAAK,EAAE;CACV,MAAM,gBAAgB,GAAW,MAC/B,kBAAkB,UAAU,UAAU,EAAE,mCAAmC,EAAE,OAAO,EAAE,iBAAiB,UAAU,gBAAgB,EAAE,sCAAsC,IAAI,EAAE,OAAO,IAAI,EAAE,iBAAiB,UAAU,UAAU,EAAE,qCAAqC,IAAI,EAAE,OAAO,IAAI,EAAE;CAE7R,OAAO,uDAAuD,UAAU,KAAK,EAAE,4BAA4B,YAAY,GAAG,YAAY,IAAI,mBAAmB,aAAa,aAAa,QAAQ,MAAM,IAAI,aAAa,SAAS,cAAc,GAAG,MAAM,IAAI,aAAa,QAAQ,SAAS,cAAc,CAAC,EAAE;AAC3S;AAEA,MAAa,UAAA,GAAA,MAAA,WAAA,CAAgD,SAAS,OACpE,EAIE,aAAa,WACb,WACA,WAAW,OACX,gBAAgB,oBAChB,uBAAuB,KACvB,UACA,aAAa,WACb,QAAQ,WACR,SAAS,GACT,OAAO,KACP,OACA,OACA,GAAG,SAEL,KACA;CACA,MAAM,WAAW,OAAO,SAAS,IAAI,KAAK,OAAO,IAAI,OAAO;CAC5D,MAAM,aAAa,OAAO,SAAS,MAAM,KAAK,UAAU,IAAI,KAAK,MAAM,MAAM,IAAI;CACjF,MAAM,mBACJ,eAAe,gBAAgB,sCAAsC;CAEvE,IAAI;EACF,MAAM,OAAOA,OAAc,OAAO,OAAO,EAAE,qBAAqB,CAAC;EACjE,MAAM,cAAc,KAAK,QAAQ;EACjC,MAAM,cAAc,cAAc,aAAa;EAC/C,MAAM,UAAuB,CAAC;EAC9B,MAAM,iBAAqC,CAAC;EAE5C,KAAK,IAAI,MAAM,GAAG,MAAM,aAAa,OAAO,GAC1C,KAAK,IAAI,SAAS,GAAG,SAAS,aAAa,UAAU,GACnD,IAAI,KAAK,QAAQ,IAAI,KAAK,MAAM,KAAK,CAAC,aAAa,KAAK,QAAQ,WAAW,GAAG;GAC5E,eAAe,KAAK,CAAC,KAAK,MAAM,CAAC;GACjC,QAAQ,KACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACE,IAAI,aAAa,SAAS;IAC1B,IAAI,aAAa,MAAM;IACvB,aAAU;IACV,MAAM;IAEN,GAAE;GACH,GAFM,GAAG,IAAI,GAAG,QAEhB,CACH;EACF;EAIJ,MAAM,eACJ,YACA,oCAAoC,mBAClC,kBAAkB;GAChB;GACA,MAAM;GACN;GACA,kBAAkB,eAAe,gBAAgB,YAAY;GAC7D;GACA,QAAQ;GACR;EACF,CAAC,CACH;EACF,MAAM,mBAAmB,OAAO,aAAa,WAAW,WAAW;EACnE,MAAM,aACJ,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;GACG,eAAe,gBACd,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,MAAM;IAAY,QAAQ;IAAa,OAAO;IAAa,GAAE;IAAI,GAAE;GAAK,CAAA,IAC5E;GACH;GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAQ,YAAY;IAAkB,OAAO;IAAY,GAAG;IAAY,GAAG;GAAa,CAAA;GACxF,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,YAAY;IACZ,OAAO;IACP,GAAG,aAAa,cAAc;IAC9B,GAAG;GACJ,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,YAAY;IACZ,OAAO;IACP,GAAG;IACH,GAAG,aAAa,cAAc;GAC/B,CAAA;EACD,EAAA,CAAA;EAGJ,MAAM,MACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GACE,GAAI;GACC;GACL,eAAa,eAAe,OAAO,KAAA;GACnC,cAAY,eAAe,KAAA,IAAY;GACvC,WAAWC,WAAAA,GAAGC,gBAAAA,OAAO,GAAG,SAAS;GACjC,kBAAe;GACf,iBAAe,WAAW,SAAS,KAAA;GACnC,kBAAe;GACf,uBAAoB;GACpB,aAAU;GACV,QAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAC1B;GACP,SAAS,OAAO,YAAY,GAAG;GAC/B,OAAO;aAfT,CAiBE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD,EAAA,UAAQ,MAAa,CAAA,GACpB,UACE;;EAGP,OAAO,eACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GACE,cAAY;GACZ,uBAAoB;GACpB,aAAU;GACV,UAAU;GACV,MAAM;aAEL;EACA,CAAA,IAEH;CAEJ,QAAQ;EACN,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,cAAY;GACZ,WAAWD,WAAAA,GAAGC,gBAAAA,OAAO,GAAG,SAAS;GACjC,uBAAoB;GACpB,aAAU;GACV,eAAY;GACZ,MAAK;aAEJ,YAAY;EACT,CAAA;CAEV;AACF,CAAC"}

package/dist/components/qr-code/qr-code.d.cts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 //#region src/components/qr-code/qr-code.d.ts
 type QRCodeErrorCorrectionLevel = "L" | "M" | "Q" | "H";
-interface QRCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "children"> {
+interface QRCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "children" | "download"> {
   value: string;
   size?: number;
   margin?: number;
@@ -10,6 +10,9 @@ interface QRCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "children">
   background?: string;
   label?: string;
   fallback?: ReactNode;
+  /** Enables a native SVG download link inside the rendered code. */
+  download?: boolean | string;
+  downloadLabel?: string;
 }
 declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<SVGSVGElement>>;
 //#endregion

package/dist/components/qr-code/qr-code.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 //#region src/components/qr-code/qr-code.d.ts
 type QRCodeErrorCorrectionLevel = "L" | "M" | "Q" | "H";
-interface QRCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "children"> {
+interface QRCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "children" | "download"> {
   value: string;
   size?: number;
   margin?: number;
@@ -10,6 +10,9 @@ interface QRCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "children">
   background?: string;
   label?: string;
   fallback?: ReactNode;
+  /** Enables a native SVG download link inside the rendered code. */
+  download?: boolean | string;
+  downloadLabel?: string;
 }
 declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<SVGSVGElement>>;
 //#endregion

package/dist/components/qr-code/qr-code.js

@@ -1,7 +1,7 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { qrCode } from "../../styled-system/recipes/qr-code.js";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as QRCodeEncoder from "qrcode";
 //#region src/components/qr-code/qr-code.tsx
 function isFinderCell(row, column, size) {
@@ -12,6 +12,7 @@ function Finder({ x, y, color, background }) {
 		"data-slot": "qr-code-eye",
 		children: [
 			/* @__PURE__ */ jsx("rect", {
+				"data-slot": "qr-code-eye-frame",
 				fill: color,
 				height: "7",
 				rx: "1",
@@ -20,6 +21,7 @@ function Finder({ x, y, color, background }) {
 				y
 			}),
 			/* @__PURE__ */ jsx("rect", {
+				"data-slot": "qr-code-eye-cutout",
 				fill: background,
 				height: "5",
 				rx: "0.75",
@@ -28,6 +30,7 @@ function Finder({ x, y, color, background }) {
 				y: y + 1
 			}),
 			/* @__PURE__ */ jsx("rect", {
+				"data-slot": "qr-code-eyeball",
 				fill: color,
 				height: "3",
 				rx: "0.5",
@@ -38,66 +41,108 @@ function Finder({ x, y, color, background }) {
 		]
 	});
 }
-const QRCode = forwardRef(function QRCode({ background = "transparent", className, errorCorrectionLevel = "Q", fallback, foreground = "currentColor", label = "QR code", margin = 2, size = 192, style, value, ...props }, ref) {
+function escapeXml(value) {
+	return value.replace(/[&<>'"]/g, (character) => {
+		return {
+			"&": "&amp;",
+			"<": "&lt;",
+			">": "&gt;",
+			"'": "&apos;",
+			"\"": "&quot;"
+		}[character] ?? character;
+	});
+}
+function createDownloadSvg({ background, dots, foreground, finderBackground, label, margin, moduleCount }) {
+	const viewBoxSize = moduleCount + margin * 2;
+	const backgroundMarkup = background === "transparent" ? "" : `<rect fill="${escapeXml(background)}" height="${viewBoxSize}" width="${viewBoxSize}" x="0" y="0"/>`;
+	const dotsMarkup = dots.map(([row, column]) => `<circle cx="${margin + column + .5}" cy="${margin + row + .5}" fill="${escapeXml(foreground)}" r="0.43"/>`).join("");
+	const finderMarkup = (x, y) => `<g><rect fill="${escapeXml(foreground)}" height="7" rx="1" width="7" x="${x}" y="${y}"/><rect fill="${escapeXml(finderBackground)}" height="5" rx="0.75" width="5" x="${x + 1}" y="${y + 1}"/><rect fill="${escapeXml(foreground)}" height="3" rx="0.5" width="3" x="${x + 2}" y="${y + 2}"/></g>`;
+	return `<svg xmlns="http://www.w3.org/2000/svg" aria-label="${escapeXml(label)}" role="img" viewBox="0 0 ${viewBoxSize} ${viewBoxSize}">${backgroundMarkup}${dotsMarkup}${finderMarkup(margin, margin)}${finderMarkup(margin + moduleCount - 7, margin)}${finderMarkup(margin, margin + moduleCount - 7)}</svg>`;
+}
+const QRCode = forwardRef(function QRCode({ background = "#ffffff", className, download = false, downloadLabel = "Download QR code", errorCorrectionLevel = "Q", fallback, foreground = "#18181b", label = "QR code", margin = 2, size = 192, style, value, ...props }, ref) {
 	const safeSize = Number.isFinite(size) && size > 0 ? size : 192;
 	const safeMargin = Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 2;
-	const finderBackground = background === "transparent" ? "white" : background;
+	const finderBackground = background === "transparent" ? "var(--jaci-colors-surface-raised)" : background;
 	try {
 		const code = QRCodeEncoder.create(value, { errorCorrectionLevel });
 		const moduleCount = code.modules.size;
 		const viewBoxSize = moduleCount + safeMargin * 2;
 		const modules = [];
-		for (let row = 0; row < moduleCount; row += 1) for (let column = 0; column < moduleCount; column += 1) if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) modules.push(/* @__PURE__ */ jsx("circle", {
-			cx: safeMargin + column + .5,
-			cy: safeMargin + row + .5,
-			"data-slot": "qr-code-dot",
-			fill: foreground,
-			r: "0.43"
-		}, `${row}-${column}`));
-		return /* @__PURE__ */ jsxs("svg", {
+		const dotCoordinates = [];
+		for (let row = 0; row < moduleCount; row += 1) for (let column = 0; column < moduleCount; column += 1) if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) {
+			dotCoordinates.push([row, column]);
+			modules.push(/* @__PURE__ */ jsx("circle", {
+				cx: safeMargin + column + .5,
+				cy: safeMargin + row + .5,
+				"data-slot": "qr-code-dot",
+				fill: foreground,
+				r: "0.43"
+			}, `${row}-${column}`));
+		}
+		const downloadHref = download && `data:image/svg+xml;charset=utf-8,${encodeURIComponent(createDownloadSvg({
+			background,
+			dots: dotCoordinates,
+			foreground,
+			finderBackground: background === "transparent" ? "#ffffff" : background,
+			label,
+			margin: safeMargin,
+			moduleCount
+		}))}`;
+		const downloadFilename = typeof download === "string" ? download : "qrcode.svg";
+		const visualCode = /* @__PURE__ */ jsxs(Fragment, { children: [
+			background !== "transparent" ? /* @__PURE__ */ jsx("rect", {
+				fill: background,
+				height: viewBoxSize,
+				width: viewBoxSize,
+				x: "0",
+				y: "0"
+			}) : null,
+			modules,
+			/* @__PURE__ */ jsx(Finder, {
+				background: finderBackground,
+				color: foreground,
+				x: safeMargin,
+				y: safeMargin
+			}),
+			/* @__PURE__ */ jsx(Finder, {
+				background: finderBackground,
+				color: foreground,
+				x: safeMargin + moduleCount - 7,
+				y: safeMargin
+			}),
+			/* @__PURE__ */ jsx(Finder, {
+				background: finderBackground,
+				color: foreground,
+				x: safeMargin,
+				y: safeMargin + moduleCount - 7
+			})
+		] });
+		const svg = /* @__PURE__ */ jsxs("svg", {
 			...props,
 			ref,
-			"aria-label": label,
+			"aria-hidden": downloadHref ? true : void 0,
+			"aria-label": downloadHref ? void 0 : label,
 			className: cx(qrCode(), className),
 			"data-dot-shape": "circle",
+			"data-download": download ? "true" : void 0,
 			"data-eye-shape": "rounded-square",
 			"data-jaci-component": "qr-code",
 			"data-slot": "qr-code",
 			height: safeSize,
-			role: "img",
+			role: downloadHref ? void 0 : "img",
 			style,
 			viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
 			width: safeSize,
-			children: [
-				/* @__PURE__ */ jsx("title", { children: label }),
-				background !== "transparent" ? /* @__PURE__ */ jsx("rect", {
-					fill: background,
-					height: viewBoxSize,
-					width: viewBoxSize,
-					x: "0",
-					y: "0"
-				}) : null,
-				modules,
-				/* @__PURE__ */ jsx(Finder, {
-					background: finderBackground,
-					color: foreground,
-					x: safeMargin,
-					y: safeMargin
-				}),
-				/* @__PURE__ */ jsx(Finder, {
-					background: finderBackground,
-					color: foreground,
-					x: safeMargin + moduleCount - 7,
-					y: safeMargin
-				}),
-				/* @__PURE__ */ jsx(Finder, {
-					background: finderBackground,
-					color: foreground,
-					x: safeMargin,
-					y: safeMargin + moduleCount - 7
-				})
-			]
+			children: [/* @__PURE__ */ jsx("title", { children: label }), visualCode]
 		});
+		return downloadHref ? /* @__PURE__ */ jsx("a", {
+			"aria-label": downloadLabel,
+			"data-jaci-component": "qr-code-download",
+			"data-slot": "qr-code-download",
+			download: downloadFilename,
+			href: downloadHref,
+			children: svg
+		}) : svg;
 	} catch {
 		return /* @__PURE__ */ jsx("span", {
 			"aria-label": label,

package/dist/components/qr-code/qr-code.js.map

@@ -1 +1 @@
-{"version":3,"file":"qr-code.js","names":[],"sources":["../../../src/components/qr-code/qr-code.tsx"],"sourcesContent":["import * as QRCodeEncoder from \"qrcode\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { qrCode } from \"../../styled-system/recipes\";\n\nexport type QRCodeErrorCorrectionLevel = \"L\" | \"M\" | \"Q\" | \"H\";\n\nexport interface QRCodeProps extends Omit<ComponentPropsWithoutRef<\"svg\">, \"children\"> {\n  value: string;\n  size?: number;\n  margin?: number;\n  errorCorrectionLevel?: QRCodeErrorCorrectionLevel;\n  foreground?: string;\n  background?: string;\n  label?: string;\n  fallback?: ReactNode;\n}\n\nfunction isFinderCell(row: number, column: number, size: number) {\n  return (\n    (row < 7 && column < 7) || (row < 7 && column >= size - 7) || (row >= size - 7 && column < 7)\n  );\n}\n\nfunction Finder({\n  x,\n  y,\n  color,\n  background,\n}: {\n  x: number;\n  y: number;\n  color: string;\n  background: string;\n}) {\n  return (\n    <g data-slot=\"qr-code-eye\">\n      <rect fill={color} height=\"7\" rx=\"1\" width=\"7\" x={x} y={y} />\n      <rect fill={background} height=\"5\" rx=\"0.75\" width=\"5\" x={x + 1} y={y + 1} />\n      <rect fill={color} height=\"3\" rx=\"0.5\" width=\"3\" x={x + 2} y={y + 2} />\n    </g>\n  );\n}\n\nexport const QRCode = forwardRef<SVGSVGElement, QRCodeProps>(function QRCode(\n  {\n    background = \"transparent\",\n    className,\n    errorCorrectionLevel = \"Q\",\n    fallback,\n    foreground = \"currentColor\",\n    label = \"QR code\",\n    margin = 2,\n    size = 192,\n    style,\n    value,\n    ...props\n  },\n  ref,\n) {\n  const safeSize = Number.isFinite(size) && size > 0 ? size : 192;\n  const safeMargin = Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 2;\n  // Finder patterns need a contrasting quiet area between the frame and the\n  // eyeball. Keep the overall SVG transparent by default, but use a white\n  // cutout when no background was supplied so the code remains scannable.\n  const finderBackground = background === \"transparent\" ? \"white\" : background;\n\n  try {\n    const code = QRCodeEncoder.create(value, { errorCorrectionLevel });\n    const moduleCount = code.modules.size;\n    const viewBoxSize = moduleCount + safeMargin * 2;\n    const modules: ReactNode[] = [];\n\n    for (let row = 0; row < moduleCount; row += 1) {\n      for (let column = 0; column < moduleCount; column += 1) {\n        if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) {\n          modules.push(\n            <circle\n              cx={safeMargin + column + 0.5}\n              cy={safeMargin + row + 0.5}\n              data-slot=\"qr-code-dot\"\n              fill={foreground}\n              key={`${row}-${column}`}\n              r=\"0.43\"\n            />,\n          );\n        }\n      }\n    }\n\n    return (\n      <svg\n        {...props}\n        ref={ref}\n        aria-label={label}\n        className={cx(qrCode(), className)}\n        data-dot-shape=\"circle\"\n        data-eye-shape=\"rounded-square\"\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        height={safeSize}\n        role=\"img\"\n        style={style}\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        width={safeSize}\n      >\n        <title>{label}</title>\n        {background !== \"transparent\" ? (\n          <rect fill={background} height={viewBoxSize} width={viewBoxSize} x=\"0\" y=\"0\" />\n        ) : null}\n        {modules}\n        <Finder background={finderBackground} color={foreground} x={safeMargin} y={safeMargin} />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin + moduleCount - 7}\n          y={safeMargin}\n        />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin}\n          y={safeMargin + moduleCount - 7}\n        />\n      </svg>\n    );\n  } catch {\n    return (\n      <span\n        aria-label={label}\n        className={cx(qrCode(), className)}\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        data-status=\"error\"\n        role=\"img\"\n      >\n        {fallback ?? \"Unable to generate QR code\"}\n      </span>\n    );\n  }\n});\n"],"mappings":";;;;;;AAoBA,SAAS,aAAa,KAAa,QAAgB,MAAc;CAC/D,OACG,MAAM,KAAK,SAAS,KAAO,MAAM,KAAK,UAAU,OAAO,KAAO,OAAO,OAAO,KAAK,SAAS;AAE/F;AAEA,SAAS,OAAO,EACd,GACA,GACA,OACA,cAMC;CACD,OACE,qBAAC,KAAD;EAAG,aAAU;YAAb;GACE,oBAAC,QAAD;IAAM,MAAM;IAAO,QAAO;IAAI,IAAG;IAAI,OAAM;IAAO;IAAM;GAAI,CAAA;GAC5D,oBAAC,QAAD;IAAM,MAAM;IAAY,QAAO;IAAI,IAAG;IAAO,OAAM;IAAI,GAAG,IAAI;IAAG,GAAG,IAAI;GAAI,CAAA;GAC5E,oBAAC,QAAD;IAAM,MAAM;IAAO,QAAO;IAAI,IAAG;IAAM,OAAM;IAAI,GAAG,IAAI;IAAG,GAAG,IAAI;GAAI,CAAA;EACrE;;AAEP;AAEA,MAAa,SAAS,WAAuC,SAAS,OACpE,EACE,aAAa,eACb,WACA,uBAAuB,KACvB,UACA,aAAa,gBACb,QAAQ,WACR,SAAS,GACT,OAAO,KACP,OACA,OACA,GAAG,SAEL,KACA;CACA,MAAM,WAAW,OAAO,SAAS,IAAI,KAAK,OAAO,IAAI,OAAO;CAC5D,MAAM,aAAa,OAAO,SAAS,MAAM,KAAK,UAAU,IAAI,KAAK,MAAM,MAAM,IAAI;CAIjF,MAAM,mBAAmB,eAAe,gBAAgB,UAAU;CAElE,IAAI;EACF,MAAM,OAAO,cAAc,OAAO,OAAO,EAAE,qBAAqB,CAAC;EACjE,MAAM,cAAc,KAAK,QAAQ;EACjC,MAAM,cAAc,cAAc,aAAa;EAC/C,MAAM,UAAuB,CAAC;EAE9B,KAAK,IAAI,MAAM,GAAG,MAAM,aAAa,OAAO,GAC1C,KAAK,IAAI,SAAS,GAAG,SAAS,aAAa,UAAU,GACnD,IAAI,KAAK,QAAQ,IAAI,KAAK,MAAM,KAAK,CAAC,aAAa,KAAK,QAAQ,WAAW,GACzE,QAAQ,KACN,oBAAC,UAAD;GACE,IAAI,aAAa,SAAS;GAC1B,IAAI,aAAa,MAAM;GACvB,aAAU;GACV,MAAM;GAEN,GAAE;EACH,GAFM,GAAG,IAAI,GAAG,QAEhB,CACH;EAKN,OACE,qBAAC,OAAD;GACE,GAAI;GACC;GACL,cAAY;GACZ,WAAW,GAAG,OAAO,GAAG,SAAS;GACjC,kBAAe;GACf,kBAAe;GACf,uBAAoB;GACpB,aAAU;GACV,QAAQ;GACR,MAAK;GACE;GACP,SAAS,OAAO,YAAY,GAAG;GAC/B,OAAO;aAbT;IAeE,oBAAC,SAAD,EAAA,UAAQ,MAAa,CAAA;IACpB,eAAe,gBACd,oBAAC,QAAD;KAAM,MAAM;KAAY,QAAQ;KAAa,OAAO;KAAa,GAAE;KAAI,GAAE;IAAK,CAAA,IAC5E;IACH;IACD,oBAAC,QAAD;KAAQ,YAAY;KAAkB,OAAO;KAAY,GAAG;KAAY,GAAG;IAAa,CAAA;IACxF,oBAAC,QAAD;KACE,YAAY;KACZ,OAAO;KACP,GAAG,aAAa,cAAc;KAC9B,GAAG;IACJ,CAAA;IACD,oBAAC,QAAD;KACE,YAAY;KACZ,OAAO;KACP,GAAG;KACH,GAAG,aAAa,cAAc;IAC/B,CAAA;GACE;;CAET,QAAQ;EACN,OACE,oBAAC,QAAD;GACE,cAAY;GACZ,WAAW,GAAG,OAAO,GAAG,SAAS;GACjC,uBAAoB;GACpB,aAAU;GACV,eAAY;GACZ,MAAK;aAEJ,YAAY;EACT,CAAA;CAEV;AACF,CAAC"}
+{"version":3,"file":"qr-code.js","names":[],"sources":["../../../src/components/qr-code/qr-code.tsx"],"sourcesContent":["import * as QRCodeEncoder from \"qrcode\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { qrCode } from \"../../styled-system/recipes\";\n\nexport type QRCodeErrorCorrectionLevel = \"L\" | \"M\" | \"Q\" | \"H\";\n\nexport interface QRCodeProps\n  extends Omit<ComponentPropsWithoutRef<\"svg\">, \"children\" | \"download\"> {\n  value: string;\n  size?: number;\n  margin?: number;\n  errorCorrectionLevel?: QRCodeErrorCorrectionLevel;\n  foreground?: string;\n  background?: string;\n  label?: string;\n  fallback?: ReactNode;\n  /** Enables a native SVG download link inside the rendered code. */\n  download?: boolean | string;\n  downloadLabel?: string;\n}\n\nfunction isFinderCell(row: number, column: number, size: number) {\n  return (\n    (row < 7 && column < 7) || (row < 7 && column >= size - 7) || (row >= size - 7 && column < 7)\n  );\n}\n\nfunction Finder({\n  x,\n  y,\n  color,\n  background,\n}: {\n  x: number;\n  y: number;\n  color: string;\n  background: string;\n}) {\n  return (\n    <g data-slot=\"qr-code-eye\">\n      <rect data-slot=\"qr-code-eye-frame\" fill={color} height=\"7\" rx=\"1\" width=\"7\" x={x} y={y} />\n      <rect\n        data-slot=\"qr-code-eye-cutout\"\n        fill={background}\n        height=\"5\"\n        rx=\"0.75\"\n        width=\"5\"\n        x={x + 1}\n        y={y + 1}\n      />\n      <rect\n        data-slot=\"qr-code-eyeball\"\n        fill={color}\n        height=\"3\"\n        rx=\"0.5\"\n        width=\"3\"\n        x={x + 2}\n        y={y + 2}\n      />\n    </g>\n  );\n}\n\nfunction escapeXml(value: string) {\n  return value.replace(/[&<>'\"]/g, (character) => {\n    const entities: Record<string, string> = {\n      \"&\": \"&amp;\",\n      \"<\": \"&lt;\",\n      \">\": \"&gt;\",\n      \"'\": \"&apos;\",\n      '\"': \"&quot;\",\n    };\n    return entities[character] ?? character;\n  });\n}\n\nfunction createDownloadSvg({\n  background,\n  dots,\n  foreground,\n  finderBackground,\n  label,\n  margin,\n  moduleCount,\n}: {\n  background: string;\n  dots: readonly [number, number][];\n  foreground: string;\n  finderBackground: string;\n  label: string;\n  margin: number;\n  moduleCount: number;\n}) {\n  const viewBoxSize = moduleCount + margin * 2;\n  const backgroundMarkup =\n    background === \"transparent\"\n      ? \"\"\n      : `<rect fill=\"${escapeXml(background)}\" height=\"${viewBoxSize}\" width=\"${viewBoxSize}\" x=\"0\" y=\"0\"/>`;\n  const dotsMarkup = dots\n    .map(\n      ([row, column]) =>\n        `<circle cx=\"${margin + column + 0.5}\" cy=\"${margin + row + 0.5}\" fill=\"${escapeXml(foreground)}\" r=\"0.43\"/>`,\n    )\n    .join(\"\");\n  const finderMarkup = (x: number, y: number) =>\n    `<g><rect fill=\"${escapeXml(foreground)}\" height=\"7\" rx=\"1\" width=\"7\" x=\"${x}\" y=\"${y}\"/><rect fill=\"${escapeXml(finderBackground)}\" height=\"5\" rx=\"0.75\" width=\"5\" x=\"${x + 1}\" y=\"${y + 1}\"/><rect fill=\"${escapeXml(foreground)}\" height=\"3\" rx=\"0.5\" width=\"3\" x=\"${x + 2}\" y=\"${y + 2}\"/></g>`;\n\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"${escapeXml(label)}\" role=\"img\" viewBox=\"0 0 ${viewBoxSize} ${viewBoxSize}\">${backgroundMarkup}${dotsMarkup}${finderMarkup(margin, margin)}${finderMarkup(margin + moduleCount - 7, margin)}${finderMarkup(margin, margin + moduleCount - 7)}</svg>`;\n}\n\nexport const QRCode = forwardRef<SVGSVGElement, QRCodeProps>(function QRCode(\n  {\n    // A QR code needs a deterministic high-contrast base. Inheriting\n    // `currentColor` or a transparent surface can make finder layers merge\n    // in dark scopes, so the defaults intentionally remain black on white.\n    background = \"#ffffff\",\n    className,\n    download = false,\n    downloadLabel = \"Download QR code\",\n    errorCorrectionLevel = \"Q\",\n    fallback,\n    foreground = \"#18181b\",\n    label = \"QR code\",\n    margin = 2,\n    size = 192,\n    style,\n    value,\n    ...props\n  },\n  ref,\n) {\n  const safeSize = Number.isFinite(size) && size > 0 ? size : 192;\n  const safeMargin = Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 2;\n  const finderBackground =\n    background === \"transparent\" ? \"var(--jaci-colors-surface-raised)\" : background;\n\n  try {\n    const code = QRCodeEncoder.create(value, { errorCorrectionLevel });\n    const moduleCount = code.modules.size;\n    const viewBoxSize = moduleCount + safeMargin * 2;\n    const modules: ReactNode[] = [];\n    const dotCoordinates: [number, number][] = [];\n\n    for (let row = 0; row < moduleCount; row += 1) {\n      for (let column = 0; column < moduleCount; column += 1) {\n        if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) {\n          dotCoordinates.push([row, column]);\n          modules.push(\n            <circle\n              cx={safeMargin + column + 0.5}\n              cy={safeMargin + row + 0.5}\n              data-slot=\"qr-code-dot\"\n              fill={foreground}\n              key={`${row}-${column}`}\n              r=\"0.43\"\n            />,\n          );\n        }\n      }\n    }\n\n    const downloadHref =\n      download &&\n      `data:image/svg+xml;charset=utf-8,${encodeURIComponent(\n        createDownloadSvg({\n          background,\n          dots: dotCoordinates,\n          foreground,\n          finderBackground: background === \"transparent\" ? \"#ffffff\" : background,\n          label,\n          margin: safeMargin,\n          moduleCount,\n        }),\n      )}`;\n    const downloadFilename = typeof download === \"string\" ? download : \"qrcode.svg\";\n    const visualCode = (\n      <>\n        {background !== \"transparent\" ? (\n          <rect fill={background} height={viewBoxSize} width={viewBoxSize} x=\"0\" y=\"0\" />\n        ) : null}\n        {modules}\n        <Finder background={finderBackground} color={foreground} x={safeMargin} y={safeMargin} />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin + moduleCount - 7}\n          y={safeMargin}\n        />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin}\n          y={safeMargin + moduleCount - 7}\n        />\n      </>\n    );\n\n    const svg = (\n      <svg\n        {...props}\n        ref={ref}\n        aria-hidden={downloadHref ? true : undefined}\n        aria-label={downloadHref ? undefined : label}\n        className={cx(qrCode(), className)}\n        data-dot-shape=\"circle\"\n        data-download={download ? \"true\" : undefined}\n        data-eye-shape=\"rounded-square\"\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        height={safeSize}\n        role={downloadHref ? undefined : \"img\"}\n        style={style}\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        width={safeSize}\n      >\n        <title>{label}</title>\n        {visualCode}\n      </svg>\n    );\n\n    return downloadHref ? (\n      <a\n        aria-label={downloadLabel}\n        data-jaci-component=\"qr-code-download\"\n        data-slot=\"qr-code-download\"\n        download={downloadFilename}\n        href={downloadHref}\n      >\n        {svg}\n      </a>\n    ) : (\n      svg\n    );\n  } catch {\n    return (\n      <span\n        aria-label={label}\n        className={cx(qrCode(), className)}\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        data-status=\"error\"\n        role=\"img\"\n      >\n        {fallback ?? \"Unable to generate QR code\"}\n      </span>\n    );\n  }\n});\n"],"mappings":"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"}

package/dist/styles.css

@@ -10872,12 +10872,12 @@
 
 @layer utilities{
 
-  .jaci-bg_white {
-    background: var(--jaci-colors-white);
+  .jaci-bg_var\(--jaci-colors-surface-raised\) {
+    background: var(--jaci-colors-surface-raised);
 }
 
-  .jaci-bg_transparent {
-    background: var(--jaci-colors-transparent);
+  .jaci-bg_\#ffffff {
+    background: #ffffff;
 }
 
   .jaci-gap_8px {
@@ -10896,8 +10896,8 @@
     page: 1px;
 }
 
-  .jaci-c_currentColor {
-    color: currentColor;
+  .jaci-c_\#18181b {
+    color: #18181b;
 }
 
   .jaci-translate-x_2 {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jaci-ui",
   "description": "Accessible, themeable React components by Jaci UI",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "license": "MIT",
   "author": {
     "name": "Richard Borges",
@@ -86,13 +86,13 @@
     "access": "public"
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.11.4",
+    "@pandacss/dev": "^1.11.5",
     "@types/qrcode": "^1.5.6",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "jsdom": "^27.4.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "tsdown": "^0.22.4"
   },
   "scripts": {