@skdx/react 0.27.0 → 0.29.0

package/dist/progress/ProgressIndicator.d.ts

@@ -1,10 +1,9 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ProgressIndicatorProps } from './types.js';
 /**
- * The visual fill of a `Progress` bar. Mirrors the root's `data-state` /
- * `data-value` / `data-max` and sets a `--skdx-progress` CSS custom property
- * (a percentage) so width/transform can be driven purely from CSS. Must be
- * used inside a `Progress`.
+ * The visual progress bar fill; sets `--skdx-progress` (and
+ * `--skdx-progress-buffer` if given) for CSS-driven sizing, and mirrors the
+ * root's band as `data-range` under `role="meter"`.
  *
  * @example
  * ```tsx
@@ -13,4 +12,7 @@ import type { ProgressIndicatorProps } from './types.js';
  * </Progress>
  * ```
  */
-export declare const ProgressIndicator: React.ForwardRefExoticComponent<Omit<ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressIndicator: {
+    ({ ref: forwardedRef, ...props }: ProgressIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/progress/ProgressLabel.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { ProgressLabelProps } from './types.cjs';
+/**
+ * The bar's visible name, rendered as a `<span>` and wired via `aria-labelledby`.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={66}>
+ *   <ProgressLabel>Uploading report</ProgressLabel>
+ *   <ProgressIndicator />
+ * </Progress>
+ * ```
+ */
+export declare const ProgressLabel: {
+    ({ ref: forwardedRef, ...props }: ProgressLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/progress/ProgressLabel.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { ProgressLabelProps } from './types.js';
+/**
+ * The bar's visible name, rendered as a `<span>` and wired via `aria-labelledby`.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={66}>
+ *   <ProgressLabel>Uploading report</ProgressLabel>
+ *   <ProgressIndicator />
+ * </Progress>
+ * ```
+ */
+export declare const ProgressLabel: {
+    ({ ref: forwardedRef, ...props }: ProgressLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/progress/ProgressValue.d.cts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { ProgressValueProps } from './types.cjs';
+/**
+ * The visible readout, hidden from accessibility and rendering nothing while indeterminate.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={66}>
+ *   <ProgressLabel>Uploading report</ProgressLabel>
+ *   <ProgressValue />
+ * </Progress>
+ * ```
+ */
+export declare const ProgressValue: {
+    ({ children, ref: forwardedRef, ...props }: ProgressValueProps): React.ReactNode;
+    displayName: string;
+};

package/dist/progress/ProgressValue.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { ProgressValueProps } from './types.js';
+/**
+ * The visible readout, hidden from accessibility and rendering nothing while indeterminate.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={66}>
+ *   <ProgressLabel>Uploading report</ProgressLabel>
+ *   <ProgressValue />
+ * </Progress>
+ * ```
+ */
+export declare const ProgressValue: {
+    ({ children, ref: forwardedRef, ...props }: ProgressValueProps): React.ReactNode;
+    displayName: string;
+};

package/dist/progress/index.d.cts

@@ -1,5 +1,2 @@
-export * from './Progress.cjs';
-export { ProgressIndicator } from './ProgressIndicator.cjs';
-export { ProgressCircle } from './ProgressCircle.cjs';
-export { ProgressCircleIndicator } from './ProgressCircleIndicator.cjs';
-export type { ProgressProps, ProgressIndicatorProps, ProgressCircleProps, ProgressCircleIndicatorProps, } from './types.cjs';
+export { Progress } from './Progress.cjs';
+export type { ProgressProps } from './types.cjs';

package/dist/progress/index.d.ts

@@ -1,5 +1,2 @@
-export * from './Progress.js';
-export { ProgressIndicator } from './ProgressIndicator.js';
-export { ProgressCircle } from './ProgressCircle.js';
-export { ProgressCircleIndicator } from './ProgressCircleIndicator.js';
-export type { ProgressProps, ProgressIndicatorProps, ProgressCircleProps, ProgressCircleIndicatorProps, } from './types.js';
+export { Progress } from './Progress.js';
+export type { ProgressProps } from './types.js';

package/dist/progress/primitives.d.cts

@@ -0,0 +1,21 @@
+/**
+ * Primitives for composing a Progress bar: parts the recipe uses.
+ *
+ * @example
+ * ```tsx
+ * import { Progress, ProgressIndicator, ProgressLabel, ProgressValue } from '@skdx/react/primitives/progress';
+ *
+ * <Progress value={66}>
+ *   <ProgressLabel>Uploading report</ProgressLabel>
+ *   <ProgressValue />
+ *   <ProgressIndicator />
+ * </Progress>
+ * ```
+ */
+export { Progress } from './Progress.cjs';
+export { ProgressLabel } from './ProgressLabel.cjs';
+export { ProgressValue } from './ProgressValue.cjs';
+export { ProgressIndicator } from './ProgressIndicator.cjs';
+export { ProgressCircle } from './ProgressCircle.cjs';
+export { ProgressCircleIndicator } from './ProgressCircleIndicator.cjs';
+export type { ProgressProps, ProgressLabelProps, ProgressValueProps, ProgressIndicatorProps, ProgressCircleProps, ProgressCircleIndicatorProps, } from './types.cjs';

package/dist/progress/primitives.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Primitives for composing a Progress bar: parts the recipe uses.
+ *
+ * @example
+ * ```tsx
+ * import { Progress, ProgressIndicator, ProgressLabel, ProgressValue } from '@skdx/react/primitives/progress';
+ *
+ * <Progress value={66}>
+ *   <ProgressLabel>Uploading report</ProgressLabel>
+ *   <ProgressValue />
+ *   <ProgressIndicator />
+ * </Progress>
+ * ```
+ */
+export { Progress } from './Progress.js';
+export { ProgressLabel } from './ProgressLabel.js';
+export { ProgressValue } from './ProgressValue.js';
+export { ProgressIndicator } from './ProgressIndicator.js';
+export { ProgressCircle } from './ProgressCircle.js';
+export { ProgressCircleIndicator } from './ProgressCircleIndicator.js';
+export type { ProgressProps, ProgressLabelProps, ProgressValueProps, ProgressIndicatorProps, ProgressCircleProps, ProgressCircleIndicatorProps, } from './types.js';

package/dist/progress/types.d.cts

@@ -1,34 +1,132 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** @internal Shared value/max distributed from {@link Progress} to {@link ProgressIndicator} via context. Not part of the public API. */
+/** What the element is: a task's progress, or a static scalar within a known range. */
+export type ProgressRole = 'progressbar' | 'meter';
+/** Which band of the range the value falls in under `role="meter"`, once `low`/`high`/`optimum` are supplied. */
+export type ProgressRange = 'optimum' | 'suboptimal' | 'poor';
+/** @internal Shared value/range distributed from {@link Progress} to its parts via context. */
 export interface ProgressContextValue {
     value: number | null;
+    min: number;
     max: number;
+    buffer: number | null;
+    /** What the root renders as, which decides whether the parts publish a band. */
+    role: ProgressRole;
+    /** The band the value falls in under `role="meter"`; `undefined` without a threshold, and always under `progressbar`. */
+    range: ProgressRange | undefined;
+    /** The id the {@link ProgressLabel} takes, and the root points `aria-labelledby` at while one is mounted. */
+    labelId: string;
+    /** Registers the presence of a {@link ProgressLabel}, so the root only wires `aria-labelledby` when one exists. */
+    setHasLabel: (hasLabel: boolean) => void;
+    /** The formatted readout, shared with {@link ProgressValue} so the visible string and `aria-valuetext` cannot drift. */
+    valueLabel: string | undefined;
 }
-/** Props for the {@link Progress} root. */
-export interface ProgressProps extends PrimitivePropsWithRef<'div'> {
+/** Props for the {@link Progress} root; `role` is the component's own axis, not the free-form ARIA attribute. */
+export interface ProgressProps extends Omit<PrimitivePropsWithRef<'div'>, 'role'> {
     /**
-     * Current value. `null` renders an indeterminate progress bar.
+     * Current value. `null` renders an indeterminate progress bar, and reads as `min` under `role="meter"`.
      * @default null
      */
-    value?: number | null;
+    value?: number | null | undefined;
     /**
-     * Maximum value that `value` is measured against.
+     * What the element is: a task in flight (`progressbar`), or a static scalar within a known range (`meter`).
+     * @default 'progressbar'
+     */
+    role?: ProgressRole | undefined;
+    /**
+     * Upper edge of the low band; with `high` and `optimum` it decides `data-range`. Read only under `role="meter"`.
+     * @default undefined — no band is derived unless one threshold is supplied.
+     */
+    low?: number | undefined;
+    /**
+     * Lower edge of the high band, the counterpart to `low`. Read only under `role="meter"`.
+     * @default undefined — no band is derived unless one threshold is supplied.
+     */
+    high?: number | undefined;
+    /**
+     * Where in the range the ideal value sits, deciding which side of `low`/`high` counts as optimum. Read only under `role="meter"`.
+     * @default undefined — the midpoint of the range.
+     */
+    optimum?: number | undefined;
+    /**
+     * Lower bound of the range, reflected as `aria-valuemin`.
+     * @default 0
+     */
+    min?: number | undefined;
+    /**
+     * Upper bound of the range that `value` is measured against.
      * @default 100
      */
-    max?: number;
+    max?: number | undefined;
+    /**
+     * A second, further-along value — bytes fetched ahead of bytes played —
+     * published by {@link ProgressIndicator} as `--skdx-progress-buffer`. Ignored under `role="meter"`.
+     * @default null
+     */
+    buffer?: number | null | undefined;
+    /**
+     * Formats the `aria-valuetext` and the {@link ProgressValue} readout.
+     * @default undefined — falls back to a rounded percentage of the position within `[min, max]`.
+     */
+    getValueLabel?: ((value: number, min: number, max: number) => string) | undefined;
     /**
-     * Formats the `aria-valuetext`. Defaults to a percentage.
-     * @default undefined — falls back to a rounded percentage of value/max.
+     * `Intl.NumberFormat` options the value is formatted with for
+     * `aria-valuetext` and the {@link ProgressValue} readout.
+     * @default undefined — falls back to a rounded percentage of the position within [min, max].
      */
-    getValueLabel?: (value: number, max: number) => string;
+    formatOptions?: Intl.NumberFormatOptions | undefined;
+    /**
+     * BCP-47 locale used for formatting the value, keeping server and browser renders consistent.
+     * @default undefined — the runtime locale.
+     */
+    locale?: string | undefined;
+    /**
+     * Renders the derived circular ring anatomy instead of the linear bar.
+     * @default false
+     */
+    circular?: boolean | undefined;
+    /**
+     * Visible caption, rendered into a derived `ProgressLabel` and wired to
+     * `aria-labelledby`.
+     * @default undefined — no label element is rendered.
+     */
+    label?: string | undefined;
+    /**
+     * Renders a derived `ProgressValue` readout alongside the bar or ring.
+     * @default false
+     */
+    showValue?: boolean | undefined;
+    /**
+     * Forces the indeterminate state regardless of `value` — equivalent to
+     * passing `value={null}`. Ignored under `role="meter"`, which always has a value.
+     * @default false
+     */
+    indeterminate?: boolean | undefined;
+    /**
+     * Outer diameter of the derived ring, in unitless SVG user units; applies
+     * only when `circular` is set.
+     * @default 48
+     */
+    diameter?: number | undefined;
+    /**
+     * Stroke width of the derived ring, in the same units as `diameter`;
+     * applies only when `circular` is set.
+     * @default 4
+     */
+    strokeWidth?: number | undefined;
 }
 /** Props for {@link ProgressIndicator}, the fill/bar element inside `Progress`. */
 export interface ProgressIndicatorProps extends PrimitivePropsWithRef<'div'> {
 }
-/** @internal Ring geometry distributed from {@link ProgressCircle} to {@link ProgressCircleIndicator} via context. Not part of the public API. */
+/** Props for {@link ProgressLabel}, the bar's visible name. */
+export interface ProgressLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link ProgressValue}, the visible readout inside `Progress`. */
+export interface ProgressValueProps extends PrimitivePropsWithRef<'span'> {
+}
+/** @internal Ring geometry distributed from {@link ProgressCircle} to {@link ProgressCircleIndicator} via context. */
 export interface ProgressCircleContextValue {
-    size: number;
-    thickness: number;
+    diameter: number;
+    strokeWidth: number;
     radius: number;
     circumference: number;
 }
@@ -36,18 +134,16 @@ export interface ProgressCircleContextValue {
 export interface ProgressCircleProps extends PrimitivePropsWithRef<'div'> {
     /**
      * Outer diameter of the ring, in unitless SVG user units — the number you
-     * also put in your own `viewBox="0 0 size size"`. Unitless rather than a CSS
-     * length because it feeds `stroke-dasharray`/`stroke-dashoffset`, which are
-     * path lengths, not lengths CSS can convert.
-     * @default 48 — a ring that reads at body-text scale, so the default renders visibly with no config.
+     * also put in your own `viewBox="0 0 diameter diameter"`.
+     * @default 48
      */
-    size?: number;
+    diameter?: number | undefined;
     /**
-     * Stroke width of the ring, in the same unitless units as `size`. Insets the
-     * radius by half its value so the stroke stays inside the `size` box.
-     * @default 4 — about a twelfth of the default `size`, thick enough to see and thin enough not to close the hole.
+     * Stroke width of the ring, in the same unitless units as `diameter`;
+     * insets the radius by half its value so the stroke stays inside the box.
+     * @default 4
      */
-    thickness?: number;
+    strokeWidth?: number | undefined;
 }
 /** Props for {@link ProgressCircleIndicator}, the swept arc inside `ProgressCircle`. */
 export interface ProgressCircleIndicatorProps extends PrimitivePropsWithRef<'div'> {

package/dist/progress/types.d.ts

@@ -1,34 +1,132 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared value/max distributed from {@link Progress} to {@link ProgressIndicator} via context. Not part of the public API. */
+/** What the element is: a task's progress, or a static scalar within a known range. */
+export type ProgressRole = 'progressbar' | 'meter';
+/** Which band of the range the value falls in under `role="meter"`, once `low`/`high`/`optimum` are supplied. */
+export type ProgressRange = 'optimum' | 'suboptimal' | 'poor';
+/** @internal Shared value/range distributed from {@link Progress} to its parts via context. */
 export interface ProgressContextValue {
     value: number | null;
+    min: number;
     max: number;
+    buffer: number | null;
+    /** What the root renders as, which decides whether the parts publish a band. */
+    role: ProgressRole;
+    /** The band the value falls in under `role="meter"`; `undefined` without a threshold, and always under `progressbar`. */
+    range: ProgressRange | undefined;
+    /** The id the {@link ProgressLabel} takes, and the root points `aria-labelledby` at while one is mounted. */
+    labelId: string;
+    /** Registers the presence of a {@link ProgressLabel}, so the root only wires `aria-labelledby` when one exists. */
+    setHasLabel: (hasLabel: boolean) => void;
+    /** The formatted readout, shared with {@link ProgressValue} so the visible string and `aria-valuetext` cannot drift. */
+    valueLabel: string | undefined;
 }
-/** Props for the {@link Progress} root. */
-export interface ProgressProps extends PrimitivePropsWithRef<'div'> {
+/** Props for the {@link Progress} root; `role` is the component's own axis, not the free-form ARIA attribute. */
+export interface ProgressProps extends Omit<PrimitivePropsWithRef<'div'>, 'role'> {
     /**
-     * Current value. `null` renders an indeterminate progress bar.
+     * Current value. `null` renders an indeterminate progress bar, and reads as `min` under `role="meter"`.
      * @default null
      */
-    value?: number | null;
+    value?: number | null | undefined;
     /**
-     * Maximum value that `value` is measured against.
+     * What the element is: a task in flight (`progressbar`), or a static scalar within a known range (`meter`).
+     * @default 'progressbar'
+     */
+    role?: ProgressRole | undefined;
+    /**
+     * Upper edge of the low band; with `high` and `optimum` it decides `data-range`. Read only under `role="meter"`.
+     * @default undefined — no band is derived unless one threshold is supplied.
+     */
+    low?: number | undefined;
+    /**
+     * Lower edge of the high band, the counterpart to `low`. Read only under `role="meter"`.
+     * @default undefined — no band is derived unless one threshold is supplied.
+     */
+    high?: number | undefined;
+    /**
+     * Where in the range the ideal value sits, deciding which side of `low`/`high` counts as optimum. Read only under `role="meter"`.
+     * @default undefined — the midpoint of the range.
+     */
+    optimum?: number | undefined;
+    /**
+     * Lower bound of the range, reflected as `aria-valuemin`.
+     * @default 0
+     */
+    min?: number | undefined;
+    /**
+     * Upper bound of the range that `value` is measured against.
      * @default 100
      */
-    max?: number;
+    max?: number | undefined;
+    /**
+     * A second, further-along value — bytes fetched ahead of bytes played —
+     * published by {@link ProgressIndicator} as `--skdx-progress-buffer`. Ignored under `role="meter"`.
+     * @default null
+     */
+    buffer?: number | null | undefined;
+    /**
+     * Formats the `aria-valuetext` and the {@link ProgressValue} readout.
+     * @default undefined — falls back to a rounded percentage of the position within `[min, max]`.
+     */
+    getValueLabel?: ((value: number, min: number, max: number) => string) | undefined;
     /**
-     * Formats the `aria-valuetext`. Defaults to a percentage.
-     * @default undefined — falls back to a rounded percentage of value/max.
+     * `Intl.NumberFormat` options the value is formatted with for
+     * `aria-valuetext` and the {@link ProgressValue} readout.
+     * @default undefined — falls back to a rounded percentage of the position within [min, max].
      */
-    getValueLabel?: (value: number, max: number) => string;
+    formatOptions?: Intl.NumberFormatOptions | undefined;
+    /**
+     * BCP-47 locale used for formatting the value, keeping server and browser renders consistent.
+     * @default undefined — the runtime locale.
+     */
+    locale?: string | undefined;
+    /**
+     * Renders the derived circular ring anatomy instead of the linear bar.
+     * @default false
+     */
+    circular?: boolean | undefined;
+    /**
+     * Visible caption, rendered into a derived `ProgressLabel` and wired to
+     * `aria-labelledby`.
+     * @default undefined — no label element is rendered.
+     */
+    label?: string | undefined;
+    /**
+     * Renders a derived `ProgressValue` readout alongside the bar or ring.
+     * @default false
+     */
+    showValue?: boolean | undefined;
+    /**
+     * Forces the indeterminate state regardless of `value` — equivalent to
+     * passing `value={null}`. Ignored under `role="meter"`, which always has a value.
+     * @default false
+     */
+    indeterminate?: boolean | undefined;
+    /**
+     * Outer diameter of the derived ring, in unitless SVG user units; applies
+     * only when `circular` is set.
+     * @default 48
+     */
+    diameter?: number | undefined;
+    /**
+     * Stroke width of the derived ring, in the same units as `diameter`;
+     * applies only when `circular` is set.
+     * @default 4
+     */
+    strokeWidth?: number | undefined;
 }
 /** Props for {@link ProgressIndicator}, the fill/bar element inside `Progress`. */
 export interface ProgressIndicatorProps extends PrimitivePropsWithRef<'div'> {
 }
-/** @internal Ring geometry distributed from {@link ProgressCircle} to {@link ProgressCircleIndicator} via context. Not part of the public API. */
+/** Props for {@link ProgressLabel}, the bar's visible name. */
+export interface ProgressLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link ProgressValue}, the visible readout inside `Progress`. */
+export interface ProgressValueProps extends PrimitivePropsWithRef<'span'> {
+}
+/** @internal Ring geometry distributed from {@link ProgressCircle} to {@link ProgressCircleIndicator} via context. */
 export interface ProgressCircleContextValue {
-    size: number;
-    thickness: number;
+    diameter: number;
+    strokeWidth: number;
     radius: number;
     circumference: number;
 }
@@ -36,18 +134,16 @@ export interface ProgressCircleContextValue {
 export interface ProgressCircleProps extends PrimitivePropsWithRef<'div'> {
     /**
      * Outer diameter of the ring, in unitless SVG user units — the number you
-     * also put in your own `viewBox="0 0 size size"`. Unitless rather than a CSS
-     * length because it feeds `stroke-dasharray`/`stroke-dashoffset`, which are
-     * path lengths, not lengths CSS can convert.
-     * @default 48 — a ring that reads at body-text scale, so the default renders visibly with no config.
+     * also put in your own `viewBox="0 0 diameter diameter"`.
+     * @default 48
      */
-    size?: number;
+    diameter?: number | undefined;
     /**
-     * Stroke width of the ring, in the same unitless units as `size`. Insets the
-     * radius by half its value so the stroke stays inside the `size` box.
-     * @default 4 — about a twelfth of the default `size`, thick enough to see and thin enough not to close the hole.
+     * Stroke width of the ring, in the same unitless units as `diameter`;
+     * insets the radius by half its value so the stroke stays inside the box.
+     * @default 4
      */
-    thickness?: number;
+    strokeWidth?: number | undefined;
 }
 /** Props for {@link ProgressCircleIndicator}, the swept arc inside `ProgressCircle`. */
 export interface ProgressCircleIndicatorProps extends PrimitivePropsWithRef<'div'> {

package/dist/qr-code/QrCode.cjs

@@ -1 +1,2 @@
-"use strict";var le=Object.create;var E=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var be=(e,r)=>{for(var t in r)E(e,t,{get:r[t],enumerable:!0})},O=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of ue(r))!de.call(e,o)&&o!==t&&E(e,o,{get:()=>r[o],enumerable:!(n=fe(r,o))||n.enumerable});return e};var M=(e,r,t)=>(t=e!=null?le(me(e)):{},O(r||!e||!e.__esModule?E(t,"default",{value:e,enumerable:!0}):t,e)),pe=e=>O(E({},"__esModule",{value:!0}),e);var Ve={};be(Ve,{QrCode:()=>U,QrCodeFrame:()=>_,QrCodeOverlay:()=>B,QrCodePattern:()=>V});module.exports=pe(Ve);var x=M(require("react"),1),K=require("../utils/createContext.cjs"),X=require("../utils/part.cjs"),J=require("../utils/primitive.cjs"),Z=require("../utils/useCallbackRef.cjs"),j=require("../utils/visuallyHidden.cjs");var Ce={L:1,M:0,Q:3,H:2},v={L:0,M:1,Q:2,H:3},g=[[-1,7,10,15,20,26,18,20,24,30,18,20,24,26,30,22,24,28,30,28,28,28,28,30,30,26,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,10,16,26,18,24,16,18,22,22,26,30,22,22,24,24,28,28,26,26,26,26,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28],[-1,13,22,18,26,18,24,18,22,20,24,28,26,24,20,30,24,28,28,26,30,28,30,30,30,30,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,17,28,22,16,22,28,26,26,24,28,24,28,22,24,24,30,28,28,26,28,30,24,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]],$=[[-1,1,1,1,1,1,2,2,2,2,4,4,4,4,4,6,6,6,6,7,8,8,9,9,10,12,12,12,13,14,15,16,17,18,19,19,20,21,22,24,25],[-1,1,1,1,2,2,4,4,4,5,5,5,8,9,9,10,10,11,13,14,16,17,17,18,20,21,23,25,26,28,29,31,33,35,37,38,40,43,45,47,49],[-1,1,1,2,2,4,4,6,6,8,8,8,10,12,16,12,17,16,18,21,20,23,23,25,27,29,34,34,35,38,40,43,45,48,51,53,56,59,62,65,68],[-1,1,1,2,4,4,4,5,6,8,8,11,11,16,16,18,16,19,21,25,25,25,34,30,32,35,37,40,42,45,48,51,54,57,60,63,66,70,74,77,81]],q=1,I=40,ye=3,he=3,xe=40,Pe=10;function D(e){return e*4+17}function Qe(e){let r=(16*e+128)*e+64;if(e>=2){let t=Math.floor(e/7)+2;r-=(25*t-10)*t-55,e>=7&&(r-=36)}return r}function T(e){return Math.floor(Qe(e)/8)}function z(e,r){let t=v[r],n=g[t][e]*$[t][e];return(T(e)-n)*8}function we(e){if(e===1)return[];let r=Math.floor(e/7)+2,t=e===32?26:Math.ceil((e*4+4)/(r*2-2))*2,n=[6];for(let o=D(e)-7;n.length<r;o-=t)n.splice(1,0,o);return n}var L=new Uint8Array(512),S=new Uint8Array(256);{let e=1;for(let r=0;r<255;r++)L[r]=e,S[e]=r,e<<=1,e&256&&(e^=285);for(let r=255;r<512;r++)L[r]=L[r-255]}function N(e,r){return e===0||r===0?0:L[S[e]+S[r]]}function Ee(e){let r=new Uint8Array(e);r[e-1]=1;let t=1;for(let n=0;n<e;n++){for(let o=0;o<e;o++){let a=N(r[o]??0,t);r[o]=o+1<e?a^(r[o+1]??0):a}t=N(t,2)}return r}function Me(e,r){let t=new Uint8Array(r.length);for(let n of e){let o=n^(t[0]??0);t.copyWithin(0,1),t[t.length-1]=0;for(let a=0;a<t.length;a++)t[a]=(t[a]??0)^N(r[a]??0,o)}return t}function H(e,r,t){let n=e;for(let o=0;o<t;o++)n=n<<1^(n>>>t-1)*r;return n}function Le(e,r){let t=Ce[e]<<3|r;return((t<<10|H(t,1335,10))^21522)&32767}function Re(e){return(e<<12|H(e,7973,12))&262143}function F(e){return e<=9?8:16}function h(e,r,t){for(let n=t-1;n>=0;n--)e.push(r>>>n&1)}function Ae(e,r,t){let n=z(r,t),o=[];h(o,4,4),h(o,e.length,F(r));for(let s of e)h(o,s,8);h(o,0,Math.min(4,n-o.length)),h(o,0,(8-o.length%8)%8);for(let s=236;o.length<n;s^=253)h(o,s,8);let a=new Uint8Array(o.length/8);for(let s=0;s<o.length;s++){let i=s>>>3;a[i]=(a[i]??0)|o[s]<<7-(s&7)}return a}function ke(e,r,t){let n=v[t],o=$[n][r],a=g[n][r],s=T(r),i=o-s%o,c=Math.floor(s/o)-a,l=Ee(a),p=[];for(let f=0,b=0;f<o;f++){let y=c+(f<i?0:1),Q=e.subarray(b,b+y);b+=y,p.push({data:Q,ecc:Me(Q,l)})}let d=new Uint8Array(s),u=0;for(let f=0;f<=c;f++)for(let b of p)f<b.data.length&&(d[u++]=b.data[f]);for(let f=0;f<a;f++)for(let b of p)d[u++]=b.ecc[f];return d}var W=[(e,r)=>(e+r)%2===0,(e,r)=>r%2===0,e=>e%3===0,(e,r)=>(e+r)%3===0,(e,r)=>(Math.floor(r/2)+Math.floor(e/3))%2===0,(e,r)=>e*r%2+e*r%3===0,(e,r)=>(e*r%2+e*r%3)%2===0,(e,r)=>((e+r)%2+e*r%3)%2===0];function Se(e){let r=D(e),t=()=>Array.from({length:r},()=>new Array(r).fill(!1));return{size:r,modules:t(),isFunction:t()}}function m(e,r,t,n){e.modules[t][r]=n,e.isFunction[t][r]=!0}var C=(e,r)=>(e>>>r&1)!==0;function A(e,r,t){for(let n=-4;n<=4;n++)for(let o=-4;o<=4;o++){let a=r+o,s=t+n;if(a<0||a>=e.size||s<0||s>=e.size)continue;let i=Math.max(Math.abs(o),Math.abs(n));m(e,a,s,i!==2&&i!==4)}}function Ne(e,r,t){for(let n=-2;n<=2;n++)for(let o=-2;o<=2;o++)m(e,r+o,t+n,Math.max(Math.abs(o),Math.abs(n))!==1)}function G(e,r,t){let n=Le(r,t),{size:o}=e;for(let a=0;a<=5;a++)m(e,8,a,C(n,a));m(e,8,7,C(n,6)),m(e,8,8,C(n,7)),m(e,7,8,C(n,8));for(let a=9;a<15;a++)m(e,14-a,8,C(n,a));for(let a=0;a<8;a++)m(e,o-1-a,8,C(n,a));for(let a=8;a<15;a++)m(e,8,o-15+a,C(n,a));m(e,8,o-8,!0)}function Ge(e,r){if(r<7)return;let t=Re(r);for(let n=0;n<18;n++){let o=C(t,n),a=e.size-11+n%3,s=Math.floor(n/3);m(e,a,s,o),m(e,s,a,o)}}function ze(e,r,t){let{size:n}=e;for(let s=0;s<n;s++)m(e,6,s,s%2===0),m(e,s,6,s%2===0);A(e,3,3),A(e,n-4,3),A(e,3,n-4);let o=we(r),a=o.length-1;for(let s=0;s<=a;s++)for(let i=0;i<=a;i++)s===0&&i===0||s===0&&i===a||s===a&&i===0||Ne(e,o[s],o[i]);G(e,t,0),Ge(e,r)}function Fe(e,r){let{size:t}=e,n=0;for(let o=t-1;o>=1;o-=2){o===6&&(o=5);for(let a=0;a<t;a++)for(let s=0;s<2;s++){let i=o-s,l=(o+1&2)===0?t-1-a:a;e.isFunction[l][i]||n>=r.length*8||(e.modules[l][i]=C(r[n>>>3],7-(n&7)),n++)}}}function k(e,r){let t=W[r];for(let n=0;n<e.size;n++)for(let o=0;o<e.size;o++)!e.isFunction[n][o]&&t(o,n)&&(e.modules[n][o]=!e.modules[n][o])}function Ue(e){let{size:r,modules:t}=e,n=0;for(let i of[!0,!1])for(let c=0;c<r;c++){let l=u=>i?t[c][u]:t[u][c],p=l(0),d=1;for(let u=1;u<r;u++)l(u)===p?(d++,d===5?n+=ye:d>5&&(n+=1)):(p=l(u),d=1);for(let u=0;u+10<r;u++){let f=0,b=0;for(let y=0;y<11;y++){let Q=l(u+y)?1:0;f=f<<1|Q,b|=Q<<y}(f===1488||b===1488)&&(n+=xe)}}for(let i=0;i+1<r;i++)for(let c=0;c+1<r;c++){let l=t[i][c];l===t[i][c+1]&&l===t[i+1][c]&&l===t[i+1][c+1]&&(n+=he)}let o=0;for(let i of t)for(let c of i)c&&o++;let a=r*r,s=Math.floor(Math.abs(o*2-a)*10/a);return n+s*Pe}function _e(e,r){for(let t=q;t<=I;t++)if(4+F(t)+e*8<=z(t,r))return t;return null}function Y(e,r,t){let n=new TextEncoder().encode(e),o;if(t===void 0?o=_e(n.length,r):!Number.isInteger(t)||t<q||t>I?o=null:o=4+F(t)+n.length*8<=z(t,r)?t:null,o===null)return null;let a=Se(o);ze(a,o,r),Fe(a,ke(Ae(n,o,r),o,r));let s=0,i=1/0;for(let c=0;c<W.length;c++){k(a,c),G(a,r,c);let l=Ue(a);l<i&&(i=l,s=c),k(a,c)}return k(a,s),G(a,r,s),a.modules}var w=require("react/jsx-runtime"),[Be,P]=(0,K.createSafeContext)("QrCode"),U=x.forwardRef(({value:e,errorCorrection:r="M",version:t,encoding:n="byte",onEncodeError:o,hiddenLabel:a=!0,children:s,...i},c)=>{let l=x.useMemo(()=>Y(e,r,t),[e,r,t]),p=(0,Z.useCallbackRef)(o);if(x.useEffect(()=>{l===null&&p(new Error(`[skandadx] QrCode cannot encode a ${e.length}-character value at error correction "${r}"`+(t===void 0?" within version 40.":` at version ${t}.`)))},[l,e,r,t,p]),l===null)return null;let d=l.length;return(0,w.jsx)(Be,{matrix:l,size:d,value:e,children:(0,w.jsxs)(J.Primitive.div,{"data-skdx-qr-code":"",...i,...(0,X.skdxPart)("qr-code","root",i.className),ref:c,style:{"--skdx-qr-code-size":d,...i.style},children:[s,a?(0,w.jsx)(j.VisuallyHidden,{children:e}):null]})})});U.displayName="QrCode";var ee=M(require("react"),1),re=require("../utils/part.cjs"),te=require("../utils/primitive.cjs");var oe=require("react/jsx-runtime"),_=ee.forwardRef((e,r)=>{let{size:t}=P("QrCodeFrame"),n=e["aria-label"]!==void 0||e["aria-labelledby"]!==void 0;return(0,oe.jsx)(te.Primitive.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:`0 0 ${t} ${t}`,shapeRendering:"crispEdges",role:n?"img":void 0,"aria-hidden":n?void 0:!0,"data-skdx-qr-code-frame":"",...e,...(0,re.skdxPart)("qr-code","frame",e.className),ref:r})});_.displayName="QrCodeFrame";var ne=M(require("react"),1),ae=require("../utils/part.cjs");var se=require("react/jsx-runtime"),B=ne.forwardRef(({size:e=7,...r},t)=>{let{size:n}=P("QrCodeOverlay"),o=(n-e)/2;return(0,se.jsx)("g",{transform:`translate(${o} ${o})`,"data-skdx-qr-code-overlay":"",...r,...(0,ae.skdxPart)("qr-code","overlay",r.className),ref:t})});B.displayName="QrCodeOverlay";var R=M(require("react"),1),ie=require("../utils/part.cjs");var ce=require("react/jsx-runtime"),V=R.forwardRef((e,r)=>{let{matrix:t}=P("QrCodePattern"),n=R.useMemo(()=>{let o="";for(let a=0;a<t.length;a++){let s=t[a];for(let i=0;i<s.length;i++)s[i]&&(o+=`M${i} ${a}h1v1h-1z`)}return o},[t]);return(0,ce.jsx)("path",{d:n,"data-skdx-qr-code-pattern":"",...e,...(0,ie.skdxPart)("qr-code","pattern",e.className),ref:r})});V.displayName="QrCodePattern";0&&(module.exports={QrCode,QrCodeFrame,QrCodeOverlay,QrCodePattern});
+'use client';
+"use strict";var D=Object.create;var f=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var X=(e,o)=>{for(var r in o)f(e,r,{get:o[r],enumerable:!0})},v=(e,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of B(o))!U.call(e,t)&&t!==r&&f(e,t,{get:()=>o[t],enumerable:!(a=W(o,t))||a.enumerable});return e};var G=(e,o,r)=>(r=e!=null?D(J(e)):{},v(o||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),I=e=>v(f({},"__esModule",{value:!0}),e);var Y={};X(Y,{QrCode:()=>u,QrCodeFrame:()=>c,QrCodeOverlay:()=>p,QrCodePattern:()=>C,QrCodeProvider:()=>M,useQrCodeContext:()=>d});module.exports=I(Y);var y=G(require("react"),1),O=require("../utils/createContext.cjs"),F=require("../utils/part.cjs"),z=require("../utils/primitive.cjs"),H=require("../utils/qr-encoder.cjs"),V=require("../utils/useCallbackRef.cjs"),q=require("../utils/visuallyHidden.cjs");var R=require("../utils/part.cjs"),b=require("../utils/primitive.cjs");var h=require("react/jsx-runtime"),c=({children:e,ref:o,...r})=>{let{size:a}=d("QrCodeFrame"),t=r["aria-label"]!==void 0||r["aria-labelledby"]!==void 0;return(0,h.jsx)(b.Primitive.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:`0 0 ${a} ${a}`,shapeRendering:"crispEdges",role:t?"img":void 0,"aria-hidden":t?void 0:!0,...r,...(0,R.skdxPart)("qr-code","frame",r.className),ref:o,children:e})};c.displayName="QrCodeFrame";var N=require("../utils/dev-mode.cjs"),w=require("../utils/part.cjs");var $=require("react/jsx-runtime");function K(e){(0,N.isDevMode)()&&e!=="H"&&(g||(g=!0,console.warn(`[skandadx] QrCodeOverlay covers modules the symbol needs, and the QrCode above it is at error correction "${e}". Only "H" carries enough redundancy (~30%) to reconstruct them \u2014 set errorCorrection="H" on the QrCode root, or drop the overlay.`)))}var g=!1,p=({extent:e=7,children:o,ref:r,...a})=>{let{size:t,errorCorrection:Q}=d("QrCodeOverlay"),l=(t-e)/2;return K(Q),(0,$.jsx)("g",{transform:`translate(${l} ${l})`,...a,...(0,w.skdxPart)("qr-code","overlay",a.className),ref:r,children:o})};p.displayName="QrCodeOverlay";var E=require("../utils/part.cjs");var S=require("react/jsx-runtime");function T(e){let o="";for(let r=0;r<e.length;r++){let a=e[r];for(let t=0;t<a.length;t++)a[t]&&(o+=`M${t} ${r}h1v1h-1z`)}return o}var C=({ref:e,...o})=>{let{matrix:r}=d("QrCodePattern");return(0,S.jsx)("path",{d:T(r),...o,...(0,E.skdxPart)("qr-code","pattern",o.className),ref:e})};C.displayName="QrCodePattern";var m=require("react/jsx-runtime"),k=({overlay:e,"aria-label":o,"aria-labelledby":r})=>(0,m.jsxs)(c,{"aria-label":o,"aria-labelledby":r,children:[(0,m.jsx)(C,{fill:"currentColor"}),e?(0,m.jsx)(p,{children:e}):null]});var i=require("react/jsx-runtime"),[M,d]=(0,O.createSafeContext)("QrCode"),u=({value:e,errorCorrection:o="M",version:r,onEncodeError:a,hiddenLabel:t=!0,overlay:Q,children:l,ref:A,...n})=>{let s=y.useMemo(()=>(0,H.encodeQr)(e,o,r),[e,o,r]),P=(0,V.useCallbackRef)(a);if(y.useEffect(()=>{s===null&&P(new Error(`[skandadx] QrCode cannot encode a ${e.length}-character value at error correction "${o}"`+(r===void 0?" within version 40.":` at version ${r}.`)))},[s,e,o,r,P]),s===null)return null;let x=s.length;return(0,i.jsx)(M,{matrix:s,size:x,value:e,errorCorrection:o,children:(0,i.jsxs)(z.Primitive.div,{...n,...(0,F.skdxPart)("qr-code","root",n.className),ref:A,style:{"--skdx-qr-code-size":x,...n.style},children:[l??(0,i.jsx)(k,{overlay:Q,"aria-label":n["aria-label"],"aria-labelledby":n["aria-labelledby"]}),t===!1?null:(0,i.jsx)(q.VisuallyHidden,{children:t===!0?e:t})]})})};u.displayName="QrCode";0&&(module.exports={QrCode,QrCodeFrame,QrCodeOverlay,QrCodePattern,QrCodeProvider,useQrCodeContext});

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

@@ -1,41 +1,17 @@
 import * as React from 'react';
 import type { QrCodeContextValue, QrCodeProps } from './types.cjs';
-export declare const QrCodeProvider: {
-    (props: QrCodeContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useQrCodeContext: (consumerName: string) => QrCodeContextValue;
+export declare const QrCodeProvider: React.FC<QrCodeContextValue & {
+    children: React.ReactNode;
+}>, useQrCodeContext: (consumerName: string) => QrCodeContextValue;
 /**
- * Root of a QR code: encodes `value` once and hands the resulting module
- * matrix to `QrCodeFrame` / `QrCodePattern` / `QrCodeOverlay` via context.
- * Renders a `Primitive.div` carrying `--skdx-qr-code-size` — the module count,
- * e.g. `29` — as an inline custom property, so a consumer can size the symbol
- * from CSS (`width: calc(var(--skdx-qr-code-size) * 4px)`) without reading the
- * version back out in JavaScript.
- *
- * **The encode is memoized on `value` + `errorCorrection` + `version`.** A QR
- * encode is ~8 full passes over up to 177² modules for mask selection; doing it
- * on every render is the bug this component ships with everywhere.
- *
- * By default the root also renders `value` as visually hidden text: a QR code
- * is a dead end for anyone without a camera, and the payload is usually a URL
- * they would otherwise never reach. See {@link QrCodeProps.hiddenLabel}.
- *
- * When `value` will not fit — over capacity, or a pinned `version` too small —
- * `onEncodeError` fires and the root renders **nothing**. A partial or clipped
- * symbol would scan to the wrong destination, which is worse than no symbol.
+ * Root of a QR code: encodes `value` into a matrix and provides it via context to child parts.
  *
  * @example
  * ```tsx
- * <QrCode value="https://example.com" errorCorrection="H">
- *   <QrCodeFrame aria-label="Link to example.com">
- *     <QrCodePattern fill="currentColor" />
- *     <QrCodeOverlay size={7}>
- *       <image href={logo} width={7} height={7} />
- *     </QrCodeOverlay>
- *   </QrCodeFrame>
- * </QrCode>
+ * <QrCode value="https://example.com" errorCorrection="H" overlay={<image href={logo} width={7} height={7} />} />
  * ```
  */
-export declare const QrCode: React.ForwardRefExoticComponent<Omit<QrCodeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const QrCode: {
+    ({ value, errorCorrection, version, onEncodeError, hiddenLabel, overlay, children, ref: forwardedRef, ...props }: QrCodeProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,41 +1,17 @@
 import * as React from 'react';
 import type { QrCodeContextValue, QrCodeProps } from './types.js';
-export declare const QrCodeProvider: {
-    (props: QrCodeContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useQrCodeContext: (consumerName: string) => QrCodeContextValue;
+export declare const QrCodeProvider: React.FC<QrCodeContextValue & {
+    children: React.ReactNode;
+}>, useQrCodeContext: (consumerName: string) => QrCodeContextValue;
 /**
- * Root of a QR code: encodes `value` once and hands the resulting module
- * matrix to `QrCodeFrame` / `QrCodePattern` / `QrCodeOverlay` via context.
- * Renders a `Primitive.div` carrying `--skdx-qr-code-size` — the module count,
- * e.g. `29` — as an inline custom property, so a consumer can size the symbol
- * from CSS (`width: calc(var(--skdx-qr-code-size) * 4px)`) without reading the
- * version back out in JavaScript.
- *
- * **The encode is memoized on `value` + `errorCorrection` + `version`.** A QR
- * encode is ~8 full passes over up to 177² modules for mask selection; doing it
- * on every render is the bug this component ships with everywhere.
- *
- * By default the root also renders `value` as visually hidden text: a QR code
- * is a dead end for anyone without a camera, and the payload is usually a URL
- * they would otherwise never reach. See {@link QrCodeProps.hiddenLabel}.
- *
- * When `value` will not fit — over capacity, or a pinned `version` too small —
- * `onEncodeError` fires and the root renders **nothing**. A partial or clipped
- * symbol would scan to the wrong destination, which is worse than no symbol.
+ * Root of a QR code: encodes `value` into a matrix and provides it via context to child parts.
  *
  * @example
  * ```tsx
- * <QrCode value="https://example.com" errorCorrection="H">
- *   <QrCodeFrame aria-label="Link to example.com">
- *     <QrCodePattern fill="currentColor" />
- *     <QrCodeOverlay size={7}>
- *       <image href={logo} width={7} height={7} />
- *     </QrCodeOverlay>
- *   </QrCodeFrame>
- * </QrCode>
+ * <QrCode value="https://example.com" errorCorrection="H" overlay={<image href={logo} width={7} height={7} />} />
  * ```
  */
-export declare const QrCode: React.ForwardRefExoticComponent<Omit<QrCodeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const QrCode: {
+    ({ value, errorCorrection, version, onEncodeError, hiddenLabel, overlay, children, ref: forwardedRef, ...props }: QrCodeProps): React.ReactNode;
+    displayName: string;
+};