@ngrok/mantle 0.73.5 → 0.75.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion.d.ts +1 -1
- package/dist/agent.json +4 -2
- package/dist/alert-dialog.d.ts +2 -2
- package/dist/alert.d.ts +2 -2
- package/dist/alert.js.map +1 -1
- package/dist/anchor-CcTY5SIz.js.map +1 -1
- package/dist/badge.d.ts +1 -1
- package/dist/button.d.ts +1 -1
- package/dist/calendar.d.ts +1 -1
- package/dist/checkbox.d.ts +1 -1
- package/dist/code-block.d.ts +1 -1
- package/dist/code-block.js.map +1 -1
- package/dist/combobox.d.ts +1 -1
- package/dist/command.d.ts +10 -10
- package/dist/data-table.d.ts +8 -8
- package/dist/data-table.js.map +1 -1
- package/dist/dialog.d.ts +6 -6
- package/dist/{dropdown-menu-BgYk4L8o.d.ts → dropdown-menu-BqdyTFLu.d.ts} +2 -2
- package/dist/dropdown-menu.d.ts +1 -1
- package/dist/empty.d.ts +5 -5
- package/dist/field.d.ts +1 -1
- package/dist/field.js.map +1 -1
- package/dist/flag.d.ts +1 -1
- package/dist/hooks.js.map +1 -1
- package/dist/hover-card.d.ts +1 -1
- package/dist/{icon-button-ntupABbM.d.ts → icon-button-Ct3A7aoj.d.ts} +2 -2
- package/dist/icons.d.ts +6 -6
- package/dist/kbd.d.ts +1 -1
- package/dist/llms.txt +3 -1
- package/dist/main.d.ts +1 -1
- package/dist/multi-select.d.ts +2 -2
- package/dist/multi-select.js.map +1 -1
- package/dist/otp-input.js.map +1 -1
- package/dist/pagination.d.ts +1 -1
- package/dist/{primitive-D_-h74Kt.d.ts → primitive-FoWela9a.d.ts} +2 -2
- package/dist/progress.d.ts +4 -4
- package/dist/qr-code.d.ts +159 -0
- package/dist/qr-code.js +2 -0
- package/dist/qr-code.js.map +1 -0
- package/dist/radio-group.d.ts +3 -3
- package/dist/resolve-pre-rendered-props-C-vrNxH1.js.map +1 -1
- package/dist/separator-Bqjy77rG.js.map +1 -1
- package/dist/separator.d.ts +1 -1
- package/dist/sheet.d.ts +6 -6
- package/dist/skip-to-main-link.d.ts +1 -1
- package/dist/skip-to-main-link.js.map +1 -1
- package/dist/slider.d.ts +1 -1
- package/dist/split-button.d.ts +2 -2
- package/dist/tabs.d.ts +1 -1
- package/dist/theme-provider-MMwxHEfw.js.map +1 -1
- package/dist/theme.d.ts +4 -4
- package/dist/toast.d.ts +1 -1
- package/dist/tooltip.d.ts +3 -3
- package/dist/use-matches-media-query-CMSxHR9n.js.map +1 -1
- package/dist/use-prefers-reduced-motion-CWIoFA6W.js.map +1 -1
- package/dist/well.d.ts +34 -0
- package/dist/well.js +2 -0
- package/dist/well.js.map +1 -0
- package/package.json +35 -24
package/dist/progress.d.ts
CHANGED
|
@@ -100,7 +100,7 @@ declare const ProgressDonut: {
|
|
|
100
100
|
value: _value,
|
|
101
101
|
indeterminateRotationSpeed,
|
|
102
102
|
...props
|
|
103
|
-
}: Props): import("react
|
|
103
|
+
}: Props): import("react").JSX.Element;
|
|
104
104
|
displayName: string;
|
|
105
105
|
};
|
|
106
106
|
/**
|
|
@@ -123,7 +123,7 @@ declare const ProgressDonut: {
|
|
|
123
123
|
({
|
|
124
124
|
className,
|
|
125
125
|
...props
|
|
126
|
-
}: ProgressDonutIndicatorProps): import("react
|
|
126
|
+
}: ProgressDonutIndicatorProps): import("react").JSX.Element;
|
|
127
127
|
displayName: string;
|
|
128
128
|
};
|
|
129
129
|
};
|
|
@@ -178,7 +178,7 @@ declare function Root({
|
|
|
178
178
|
max: _max,
|
|
179
179
|
value: _value,
|
|
180
180
|
...props
|
|
181
|
-
}: RootProps): import("react
|
|
181
|
+
}: RootProps): import("react").JSX.Element;
|
|
182
182
|
declare namespace Root {
|
|
183
183
|
var displayName: string;
|
|
184
184
|
}
|
|
@@ -207,7 +207,7 @@ declare function Indicator({
|
|
|
207
207
|
className,
|
|
208
208
|
style,
|
|
209
209
|
...props
|
|
210
|
-
}: IndicatorProps): import("react
|
|
210
|
+
}: IndicatorProps): import("react").JSX.Element;
|
|
211
211
|
declare namespace Indicator {
|
|
212
212
|
var displayName: string;
|
|
213
213
|
}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { t as WithAsChild } from "./as-child-uN_018tj.js";
|
|
2
|
+
import { ComponentProps } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/qr-code/qr-code.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* QR error correction level — the share of the code that can be damaged or
|
|
7
|
+
* obscured while staying scannable: `"L"` ~7%, `"M"` ~15%, `"Q"` ~25%, `"H"`
|
|
8
|
+
* ~30%. Higher levels produce a denser code.
|
|
9
|
+
*/
|
|
10
|
+
type QrCodeErrorCorrection = "L" | "M" | "Q" | "H";
|
|
11
|
+
/**
|
|
12
|
+
* Props for `QrCode.Root`, the provider and positioned tile that encodes the QR
|
|
13
|
+
* value for child parts.
|
|
14
|
+
*/
|
|
15
|
+
type QrCodeRootProps = ComponentProps<"div"> & WithAsChild & {
|
|
16
|
+
/** The string to encode (e.g. a URL or `otpauth://` MFA URI). */value: string;
|
|
17
|
+
/**
|
|
18
|
+
* The error correction level. Defaults to `"L"`. Use `"H"` when an
|
|
19
|
+
* `Overlay` covers center modules so the code stays scannable.
|
|
20
|
+
*/
|
|
21
|
+
ecc?: QrCodeErrorCorrection; /** The pixel size of each module, affecting internal resolution. */
|
|
22
|
+
pixelSize?: number;
|
|
23
|
+
/**
|
|
24
|
+
* Width of the quiet zone — the light-module margin baked into the encoded
|
|
25
|
+
* grid around the code, not cosmetic CSS padding. Defaults to `4`, the QR
|
|
26
|
+
* spec's recommended margin for reliable scanning. Lower values tighten the
|
|
27
|
+
* surrounding whitespace but can hurt scannability; avoid `0`.
|
|
28
|
+
*/
|
|
29
|
+
quietZone?: number;
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Props for `QrCode.Frame`, the fixed SVG element that sizes the encoded QR
|
|
33
|
+
* pattern with its `viewBox`.
|
|
34
|
+
*/
|
|
35
|
+
type QrCodeFrameProps = ComponentProps<"svg">;
|
|
36
|
+
/**
|
|
37
|
+
* Props for `QrCode.Pattern`, the fixed SVG `path` element that renders the
|
|
38
|
+
* encoded dark modules.
|
|
39
|
+
*/
|
|
40
|
+
type QrCodePatternProps = ComponentProps<"path">;
|
|
41
|
+
/**
|
|
42
|
+
* Props for `QrCode.Overlay`, the optional centered logo container rendered on
|
|
43
|
+
* top of the QR pattern.
|
|
44
|
+
*/
|
|
45
|
+
type QrCodeOverlayProps = ComponentProps<"div"> & WithAsChild;
|
|
46
|
+
/**
|
|
47
|
+
* A QR code. Compose `QrCode.Root` with a `QrCode.Frame` wrapping a
|
|
48
|
+
* `QrCode.Pattern`, and optionally a `QrCode.Overlay` for a centered logo.
|
|
49
|
+
* Encoding is handled by the dependency-free `uqr` library; the render logic is
|
|
50
|
+
* owned by mantle (no headless runtime).
|
|
51
|
+
*
|
|
52
|
+
* `Root` and `Overlay` support the `asChild` prop for polymorphic composition.
|
|
53
|
+
* `Frame` and `Pattern` render fixed SVG elements and do not.
|
|
54
|
+
*
|
|
55
|
+
* @see https://mantle.ngrok.com/components/qr-code
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* Composition:
|
|
59
|
+
* ```
|
|
60
|
+
* QrCode.Root
|
|
61
|
+
* ├── QrCode.Frame
|
|
62
|
+
* │ └── QrCode.Pattern
|
|
63
|
+
* └── QrCode.Overlay
|
|
64
|
+
* ```
|
|
65
|
+
*
|
|
66
|
+
* @example
|
|
67
|
+
* ```tsx
|
|
68
|
+
* <QrCode.Root value="https://ngrok.com" ecc="H">
|
|
69
|
+
* <QrCode.Frame>
|
|
70
|
+
* <QrCode.Pattern />
|
|
71
|
+
* </QrCode.Frame>
|
|
72
|
+
* <QrCode.Overlay>
|
|
73
|
+
* <NgrokLettermarkIcon className="size-7" />
|
|
74
|
+
* </QrCode.Overlay>
|
|
75
|
+
* </QrCode.Root>
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
declare const QrCode: {
|
|
79
|
+
/**
|
|
80
|
+
* The root container of a QR code. Encodes `value` and renders a positioned
|
|
81
|
+
* white tile. Set `ecc` (e.g. `"H"` when using an `Overlay`).
|
|
82
|
+
*
|
|
83
|
+
* @see https://mantle.ngrok.com/components/qr-code
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* ```tsx
|
|
87
|
+
* <QrCode.Root value="https://ngrok.com" ecc="H">
|
|
88
|
+
* <QrCode.Frame>
|
|
89
|
+
* <QrCode.Pattern />
|
|
90
|
+
* </QrCode.Frame>
|
|
91
|
+
* <QrCode.Overlay>
|
|
92
|
+
* <NgrokLettermarkIcon className="size-7" />
|
|
93
|
+
* </QrCode.Overlay>
|
|
94
|
+
* </QrCode.Root>
|
|
95
|
+
* ```
|
|
96
|
+
*/
|
|
97
|
+
readonly Root: import("react").ForwardRefExoticComponent<Omit<QrCodeRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
98
|
+
/**
|
|
99
|
+
* The `svg` frame that holds the QR `Pattern`. Defaults to `size-48`; resize
|
|
100
|
+
* the whole code by passing a different size to `className`.
|
|
101
|
+
*
|
|
102
|
+
* @see https://mantle.ngrok.com/components/qr-code
|
|
103
|
+
*
|
|
104
|
+
* @example
|
|
105
|
+
* ```tsx
|
|
106
|
+
* <QrCode.Root value="https://ngrok.com" ecc="H">
|
|
107
|
+
* <QrCode.Frame>
|
|
108
|
+
* <QrCode.Pattern />
|
|
109
|
+
* </QrCode.Frame>
|
|
110
|
+
* <QrCode.Overlay>
|
|
111
|
+
* <NgrokLettermarkIcon className="size-7" />
|
|
112
|
+
* </QrCode.Overlay>
|
|
113
|
+
* </QrCode.Root>
|
|
114
|
+
* ```
|
|
115
|
+
*/
|
|
116
|
+
readonly Frame: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
|
|
117
|
+
/**
|
|
118
|
+
* The encoded QR modules, rendered as a `path` inside the `Frame`. Defaults
|
|
119
|
+
* to black fill so the code stays scannable in every theme.
|
|
120
|
+
*
|
|
121
|
+
* @see https://mantle.ngrok.com/components/qr-code
|
|
122
|
+
*
|
|
123
|
+
* @example
|
|
124
|
+
* ```tsx
|
|
125
|
+
* <QrCode.Root value="https://ngrok.com" ecc="H">
|
|
126
|
+
* <QrCode.Frame>
|
|
127
|
+
* <QrCode.Pattern />
|
|
128
|
+
* </QrCode.Frame>
|
|
129
|
+
* <QrCode.Overlay>
|
|
130
|
+
* <NgrokLettermarkIcon className="size-7" />
|
|
131
|
+
* </QrCode.Overlay>
|
|
132
|
+
* </QrCode.Root>
|
|
133
|
+
* ```
|
|
134
|
+
*/
|
|
135
|
+
readonly Pattern: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGPathElement>, "ref"> & import("react").RefAttributes<SVGPathElement>>;
|
|
136
|
+
/**
|
|
137
|
+
* An overlay centered on top of the QR code, typically holding a brand logo.
|
|
138
|
+
* Renders a white rounded "punch-out" so the logo stays legible. Use a higher
|
|
139
|
+
* `ecc` on the `Root` when an overlay is present.
|
|
140
|
+
*
|
|
141
|
+
* @see https://mantle.ngrok.com/components/qr-code
|
|
142
|
+
*
|
|
143
|
+
* @example
|
|
144
|
+
* ```tsx
|
|
145
|
+
* <QrCode.Root value="https://ngrok.com" ecc="H">
|
|
146
|
+
* <QrCode.Frame>
|
|
147
|
+
* <QrCode.Pattern />
|
|
148
|
+
* </QrCode.Frame>
|
|
149
|
+
* <QrCode.Overlay>
|
|
150
|
+
* <NgrokLettermarkIcon className="size-7" />
|
|
151
|
+
* </QrCode.Overlay>
|
|
152
|
+
* </QrCode.Root>
|
|
153
|
+
* ```
|
|
154
|
+
*/
|
|
155
|
+
readonly Overlay: import("react").ForwardRefExoticComponent<Omit<QrCodeOverlayProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
156
|
+
};
|
|
157
|
+
//#endregion
|
|
158
|
+
export { QrCode, type QrCodeErrorCorrection, type QrCodeFrameProps, type QrCodeOverlayProps, type QrCodePatternProps, type QrCodeRootProps };
|
|
159
|
+
//# sourceMappingURL=qr-code.d.ts.map
|
package/dist/qr-code.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{t as e}from"./cx-CBSnSC36.js";import{t}from"./slot-CV5fmqFr.js";import{createContext as n,forwardRef as r,useContext as i,useMemo as a}from"react";import o from"tiny-invariant";import{jsx as s}from"react/jsx-runtime";import{encode as c}from"uqr";const l=n(null);function u(e,t){o(Number.isFinite(e)&&e>0,"`QrCode.Root` pixelSize must be a finite number greater than 0."),o(Number.isInteger(t)&&t>=0,"`QrCode.Root` quietZone must be a non-negative integer.")}function d(){let e=i(l);return o(e,"`QrCode.Frame` and `QrCode.Pattern` must be rendered inside a `QrCode.Root`."),e}function f(e,t){let n=[];return e.forEach((e,r)=>{e.forEach((e,i)=>{if(e){let e=i*t,a=r*t;n.push(`M${e},${a}h${t}v${t}h-${t}z`)}})}),n.join(``)}const p=r(({value:n,ecc:r=`L`,pixelSize:i=10,quietZone:o=4,asChild:d,className:p,children:m,...h},g)=>{u(i,o);let _=a(()=>c(n,{ecc:r,border:o}),[n,r,o]),v=a(()=>f(_.data,i),[_,i]),y=a(()=>({path:v,dimension:_.size*i}),[v,_.size,i]),b=d?t:`div`;return s(l.Provider,{value:y,children:s(b,{ref:g,...h,"data-slot":`qr-code`,className:e(`relative inline-flex bg-static-white text-static-black`,p),children:m})})});p.displayName=`QrCode`;const m=r(({className:t,children:n,...r},i)=>{let{dimension:a}=d();return s(`svg`,{ref:i,...r,"data-slot":`qr-code-frame`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 ${a} ${a}`,shapeRendering:`crispEdges`,className:e(`block size-48`,t),children:n})});m.displayName=`QrCodeFrame`;const h=r(({className:t,...n},r)=>{let{path:i}=d();return s(`path`,{ref:r,...n,"data-slot":`qr-code-pattern`,d:i,className:e(`fill-static-black`,t)})});h.displayName=`QrCodePattern`;const g=r(({asChild:n,className:r,...i},a)=>s(n?t:`div`,{ref:a,...i,"data-slot":`qr-code-overlay`,className:e(`absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-md bg-static-white text-static-black p-1.5`,r)}));g.displayName=`QrCodeOverlay`;const _={Root:p,Frame:m,Pattern:h,Overlay:g};export{_ as QrCode};
|
|
2
|
+
//# sourceMappingURL=qr-code.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qr-code.js","names":[],"sources":["../src/components/qr-code/qr-code.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { encode } from \"uqr\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/**\n * The encoded geometry shared from `QrCode.Root` to the SVG rendering parts.\n */\ntype QrCodeContextValue = {\n\t/** The `d` attribute for the QR `Pattern` path. */\n\tpath: string;\n\t/** The width/height of the (square) QR `Frame` viewBox. */\n\tdimension: number;\n};\n\nconst QrCodeContext = createContext<QrCodeContextValue | null>(null);\n\n/**\n * Validates sizing props before they reach `uqr` or SVG coordinate math.\n *\n * @throws When `pixelSize` is not a finite positive number, or `quietZone` is\n * not a non-negative integer.\n *\n * @example\n * ```ts\n * assertValidRootProps(10, 4);\n * ```\n */\nfunction assertValidRootProps(pixelSize: number, quietZone: number): void {\n\tinvariant(\n\t\tNumber.isFinite(pixelSize) && pixelSize > 0,\n\t\t\"`QrCode.Root` pixelSize must be a finite number greater than 0.\",\n\t);\n\tinvariant(\n\t\tNumber.isInteger(quietZone) && quietZone >= 0,\n\t\t\"`QrCode.Root` quietZone must be a non-negative integer.\",\n\t);\n}\n\n/**\n * Reads the QR code context provided by `QrCode.Root`. Throws a clear error when\n * a part is rendered outside of a `QrCode.Root`.\n *\n * @example\n * ```tsx\n * const { dimension, path } = useQrCodeContext();\n * ```\n */\nfunction useQrCodeContext(): QrCodeContextValue {\n\tconst context = useContext(QrCodeContext);\n\tinvariant(\n\t\tcontext,\n\t\t\"`QrCode.Frame` and `QrCode.Pattern` must be rendered inside a `QrCode.Root`.\",\n\t);\n\treturn context;\n}\n\n/**\n * Builds the SVG `path` `d` attribute for a QR code by emitting one square\n * (`M x,y h s v s h-s z`) per dark module in the encoded grid, scaled by\n * `pixelSize`. Returns an empty string when there are no dark modules.\n *\n * @example\n * ```ts\n * buildPath([[true, false], [false, true]], 10);\n * // \"M0,0h10v10h-10zM10,10h10v10h-10z\"\n * ```\n */\nfunction buildPath(modules: ReadonlyArray<ReadonlyArray<boolean>>, pixelSize: number): string {\n\tconst rects: string[] = [];\n\tmodules.forEach((columns, row) => {\n\t\tcolumns.forEach((isDark, col) => {\n\t\t\tif (isDark) {\n\t\t\t\tconst x = col * pixelSize;\n\t\t\t\tconst y = row * pixelSize;\n\t\t\t\trects.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`);\n\t\t\t}\n\t\t});\n\t});\n\treturn rects.join(\"\");\n}\n\n/**\n * QR error correction level — the share of the code that can be damaged or\n * obscured while staying scannable: `\"L\"` ~7%, `\"M\"` ~15%, `\"Q\"` ~25%, `\"H\"`\n * ~30%. Higher levels produce a denser code.\n */\ntype QrCodeErrorCorrection = \"L\" | \"M\" | \"Q\" | \"H\";\n\n/**\n * Props for `QrCode.Root`, the provider and positioned tile that encodes the QR\n * value for child parts.\n */\ntype QrCodeRootProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\t/** The string to encode (e.g. a URL or `otpauth://` MFA URI). */\n\t\tvalue: string;\n\t\t/**\n\t\t * The error correction level. Defaults to `\"L\"`. Use `\"H\"` when an\n\t\t * `Overlay` covers center modules so the code stays scannable.\n\t\t */\n\t\tecc?: QrCodeErrorCorrection;\n\t\t/** The pixel size of each module, affecting internal resolution. */\n\t\tpixelSize?: number;\n\t\t/**\n\t\t * Width of the quiet zone — the light-module margin baked into the encoded\n\t\t * grid around the code, not cosmetic CSS padding. Defaults to `4`, the QR\n\t\t * spec's recommended margin for reliable scanning. Lower values tighten the\n\t\t * surrounding whitespace but can hurt scannability; avoid `0`.\n\t\t */\n\t\tquietZone?: number;\n\t};\n\n/**\n * The root container of a QR code. Encodes `value` (via the dependency-free\n * `uqr` encoder) and renders a positioned white tile around the QR `Frame`,\n * sharing the encoded path with the other parts via context.\n *\n * Set the error correction level via `ecc`. When you place a logo in an\n * `Overlay`, use `ecc=\"H\"` so the covered modules can still be recovered by a\n * scanner. Tighten the surrounding whitespace with `quietZone` (defaults to the\n * spec-recommended `4` light modules).\n *\n * The default styling is black modules on a white tile in every theme (never\n * theme-aware tokens). Consumers can override those styles, but inverting a QR\n * code's colors makes it unreliable for many scanners.\n *\n * @see https://mantle.ngrok.com/components/qr-code\n *\n * @example\n * ```tsx\n * <QrCode.Root value=\"https://ngrok.com\" ecc=\"H\">\n * <QrCode.Frame>\n * <QrCode.Pattern />\n * </QrCode.Frame>\n * <QrCode.Overlay>\n * <NgrokLettermarkIcon className=\"size-7\" />\n * </QrCode.Overlay>\n * </QrCode.Root>\n * ```\n */\nconst Root = forwardRef<HTMLDivElement, QrCodeRootProps>(\n\t(\n\t\t{ value, ecc = \"L\", pixelSize = 10, quietZone = 4, asChild, className, children, ...props },\n\t\tref,\n\t) => {\n\t\tassertValidRootProps(pixelSize, quietZone);\n\n\t\t// The quiet zone is the QR spec's required margin (light modules on each\n\t\t// side). It's part of the code itself — the scannable margin — not cosmetic\n\t\t// padding. The spec recommends 4; lowering it tightens the whitespace at\n\t\t// the cost of scannability.\n\t\tconst encoded = useMemo(\n\t\t\t() => encode(value, { ecc, border: quietZone }),\n\t\t\t[value, ecc, quietZone],\n\t\t);\n\t\tconst path = useMemo(() => buildPath(encoded.data, pixelSize), [encoded, pixelSize]);\n\t\tconst context = useMemo<QrCodeContextValue>(\n\t\t\t() => ({ path, dimension: encoded.size * pixelSize }),\n\t\t\t[path, encoded.size, pixelSize],\n\t\t);\n\n\t\tconst Comp = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<QrCodeContext.Provider value={context}>\n\t\t\t\t<Comp\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdata-slot=\"qr-code\"\n\t\t\t\t\tclassName={cx(\"relative inline-flex bg-static-white text-static-black\", className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Comp>\n\t\t\t</QrCodeContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"QrCode\";\n\n/**\n * Props for `QrCode.Frame`, the fixed SVG element that sizes the encoded QR\n * pattern with its `viewBox`.\n */\ntype QrCodeFrameProps = ComponentProps<\"svg\">;\n\n/**\n * The `svg` frame that holds the QR `Pattern`. Defaults to a square `size-48`\n * and scales the encoded pattern to fit via its `viewBox`, so resize the whole\n * code by passing a different size to `className` (e.g. `className=\"size-64\"`).\n *\n * Does not support `asChild`: the QR pattern must live inside an `svg`, so the\n * frame element is fixed and cannot be swapped.\n *\n * @see https://mantle.ngrok.com/components/qr-code\n *\n * @example\n * ```tsx\n * <QrCode.Root value=\"https://ngrok.com\" ecc=\"H\">\n * <QrCode.Frame>\n * <QrCode.Pattern />\n * </QrCode.Frame>\n * <QrCode.Overlay>\n * <NgrokLettermarkIcon className=\"size-7\" />\n * </QrCode.Overlay>\n * </QrCode.Root>\n * ```\n */\nconst Frame = forwardRef<SVGSVGElement, QrCodeFrameProps>(\n\t({ className, children, ...props }, ref) => {\n\t\tconst { dimension } = useQrCodeContext();\n\n\t\treturn (\n\t\t\t<svg\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tdata-slot=\"qr-code-frame\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox={`0 0 ${dimension} ${dimension}`}\n\t\t\t\tshapeRendering=\"crispEdges\"\n\t\t\t\tclassName={cx(\"block size-48\", className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t);\n\t},\n);\nFrame.displayName = \"QrCodeFrame\";\n\n/**\n * Props for `QrCode.Pattern`, the fixed SVG `path` element that renders the\n * encoded dark modules.\n */\ntype QrCodePatternProps = ComponentProps<\"path\">;\n\n/**\n * The encoded QR modules, rendered as a single `path` inside the `Frame`.\n * Defaults to black fill (`fill-static-black`) so the code stays scannable in\n * every theme.\n *\n * Does not support `asChild`: the modules are a fixed `path` and cannot be\n * swapped for another element.\n *\n * @see https://mantle.ngrok.com/components/qr-code\n *\n * @example\n * ```tsx\n * <QrCode.Root value=\"https://ngrok.com\" ecc=\"H\">\n * <QrCode.Frame>\n * <QrCode.Pattern />\n * </QrCode.Frame>\n * <QrCode.Overlay>\n * <NgrokLettermarkIcon className=\"size-7\" />\n * </QrCode.Overlay>\n * </QrCode.Root>\n * ```\n */\nconst Pattern = forwardRef<SVGPathElement, QrCodePatternProps>(({ className, ...props }, ref) => {\n\tconst { path } = useQrCodeContext();\n\n\treturn (\n\t\t<path\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tdata-slot=\"qr-code-pattern\"\n\t\t\td={path}\n\t\t\tclassName={cx(\"fill-static-black\", className)}\n\t\t/>\n\t);\n});\nPattern.displayName = \"QrCodePattern\";\n\n/**\n * Props for `QrCode.Overlay`, the optional centered logo container rendered on\n * top of the QR pattern.\n */\ntype QrCodeOverlayProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * An overlay centered on top of the QR code, typically holding a brand logo\n * (e.g. `NgrokLettermarkIcon`). Renders a white, rounded \"punch-out\" so the\n * logo stays legible over the modules beneath it. Because the overlay hides the\n * center modules, use a higher `ecc` (e.g. `\"H\"`) on the `Root`.\n *\n * @see https://mantle.ngrok.com/components/qr-code\n *\n * @example\n * ```tsx\n * <QrCode.Root value=\"https://ngrok.com\" ecc=\"H\">\n * <QrCode.Frame>\n * <QrCode.Pattern />\n * </QrCode.Frame>\n * <QrCode.Overlay>\n * <NgrokLettermarkIcon className=\"size-7\" />\n * </QrCode.Overlay>\n * </QrCode.Root>\n * ```\n */\nconst Overlay = forwardRef<HTMLDivElement, QrCodeOverlayProps>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tdata-slot=\"qr-code-overlay\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-md bg-static-white text-static-black p-1.5\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t/>\n\t\t);\n\t},\n);\nOverlay.displayName = \"QrCodeOverlay\";\n\n/**\n * A QR code. Compose `QrCode.Root` with a `QrCode.Frame` wrapping a\n * `QrCode.Pattern`, and optionally a `QrCode.Overlay` for a centered logo.\n * Encoding is handled by the dependency-free `uqr` library; the render logic is\n * owned by mantle (no headless runtime).\n *\n * `Root` and `Overlay` support the `asChild` prop for polymorphic composition.\n * `Frame` and `Pattern` render fixed SVG elements and do not.\n *\n * @see https://mantle.ngrok.com/components/qr-code\n *\n * @example\n * Composition:\n * ```\n * QrCode.Root\n * ├── QrCode.Frame\n * │ └── QrCode.Pattern\n * └── QrCode.Overlay\n * ```\n *\n * @example\n * ```tsx\n * <QrCode.Root value=\"https://ngrok.com\" ecc=\"H\">\n * <QrCode.Frame>\n * <QrCode.Pattern />\n * </QrCode.Frame>\n * <QrCode.Overlay>\n * <NgrokLettermarkIcon className=\"size-7\" />\n * </QrCode.Overlay>\n * </QrCode.Root>\n * ```\n */\nconst QrCode = {\n\t/**\n\t * The root container of a QR code. Encodes `value` and renders a positioned\n\t * white tile. Set `ecc` (e.g. `\"H\"` when using an `Overlay`).\n\t *\n\t * @see https://mantle.ngrok.com/components/qr-code\n\t *\n\t * @example\n\t * ```tsx\n\t * <QrCode.Root value=\"https://ngrok.com\" ecc=\"H\">\n\t * <QrCode.Frame>\n\t * <QrCode.Pattern />\n\t * </QrCode.Frame>\n\t * <QrCode.Overlay>\n\t * <NgrokLettermarkIcon className=\"size-7\" />\n\t * </QrCode.Overlay>\n\t * </QrCode.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The `svg` frame that holds the QR `Pattern`. Defaults to `size-48`; resize\n\t * the whole code by passing a different size to `className`.\n\t *\n\t * @see https://mantle.ngrok.com/components/qr-code\n\t *\n\t * @example\n\t * ```tsx\n\t * <QrCode.Root value=\"https://ngrok.com\" ecc=\"H\">\n\t * <QrCode.Frame>\n\t * <QrCode.Pattern />\n\t * </QrCode.Frame>\n\t * <QrCode.Overlay>\n\t * <NgrokLettermarkIcon className=\"size-7\" />\n\t * </QrCode.Overlay>\n\t * </QrCode.Root>\n\t * ```\n\t */\n\tFrame,\n\t/**\n\t * The encoded QR modules, rendered as a `path` inside the `Frame`. Defaults\n\t * to black fill so the code stays scannable in every theme.\n\t *\n\t * @see https://mantle.ngrok.com/components/qr-code\n\t *\n\t * @example\n\t * ```tsx\n\t * <QrCode.Root value=\"https://ngrok.com\" ecc=\"H\">\n\t * <QrCode.Frame>\n\t * <QrCode.Pattern />\n\t * </QrCode.Frame>\n\t * <QrCode.Overlay>\n\t * <NgrokLettermarkIcon className=\"size-7\" />\n\t * </QrCode.Overlay>\n\t * </QrCode.Root>\n\t * ```\n\t */\n\tPattern,\n\t/**\n\t * An overlay centered on top of the QR code, typically holding a brand logo.\n\t * Renders a white rounded \"punch-out\" so the logo stays legible. Use a higher\n\t * `ecc` on the `Root` when an overlay is present.\n\t *\n\t * @see https://mantle.ngrok.com/components/qr-code\n\t *\n\t * @example\n\t * ```tsx\n\t * <QrCode.Root value=\"https://ngrok.com\" ecc=\"H\">\n\t * <QrCode.Frame>\n\t * <QrCode.Pattern />\n\t * </QrCode.Frame>\n\t * <QrCode.Overlay>\n\t * <NgrokLettermarkIcon className=\"size-7\" />\n\t * </QrCode.Overlay>\n\t * </QrCode.Root>\n\t * ```\n\t */\n\tOverlay,\n} as const;\n\nexport {\n\t//,\n\tbuildPath,\n\tQrCode,\n};\n\nexport type {\n\t//,\n\tQrCodeErrorCorrection,\n\tQrCodeFrameProps,\n\tQrCodeOverlayProps,\n\tQrCodePatternProps,\n\tQrCodeRootProps,\n};\n"],"mappings":"6PAoBA,MAAM,EAAgB,EAAyC,IAAI,EAanE,SAAS,EAAqB,EAAmB,EAAyB,CACzE,EACC,OAAO,SAAS,CAAS,GAAK,EAAY,EAC1C,iEACD,EACA,EACC,OAAO,UAAU,CAAS,GAAK,GAAa,EAC5C,yDACD,CACD,CAWA,SAAS,GAAuC,CAC/C,IAAM,EAAU,EAAW,CAAa,EAKxC,OAJA,EACC,EACA,8EACD,EACO,CACR,CAaA,SAAS,EAAU,EAAgD,EAA2B,CAC7F,IAAM,EAAkB,CAAC,EAUzB,OATA,EAAQ,SAAS,EAAS,IAAQ,CACjC,EAAQ,SAAS,EAAQ,IAAQ,CAChC,GAAI,EAAQ,CACX,IAAM,EAAI,EAAM,EACV,EAAI,EAAM,EAChB,EAAM,KAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAU,GAAG,EAAU,IAAI,EAAU,EAAE,CACjE,CACD,CAAC,CACF,CAAC,EACM,EAAM,KAAK,EAAE,CACrB,CA6DA,MAAM,EAAO,GAEX,CAAE,QAAO,MAAM,IAAK,YAAY,GAAI,YAAY,EAAG,UAAS,YAAW,WAAU,GAAG,GACpF,IACI,CACJ,EAAqB,EAAW,CAAS,EAMzC,IAAM,EAAU,MACT,EAAO,EAAO,CAAE,MAAK,OAAQ,CAAU,CAAC,EAC9C,CAAC,EAAO,EAAK,CAAS,CACvB,EACM,EAAO,MAAc,EAAU,EAAQ,KAAM,CAAS,EAAG,CAAC,EAAS,CAAS,CAAC,EAC7E,EAAU,OACR,CAAE,OAAM,UAAW,EAAQ,KAAO,CAAU,GACnD,CAAC,EAAM,EAAQ,KAAM,CAAS,CAC/B,EAEM,EAAO,EAAU,EAAO,MAE9B,OACC,EAAC,EAAc,SAAf,CAAwB,MAAO,WAC9B,EAAC,EAAD,CACM,MACL,GAAI,EACJ,YAAU,UACV,UAAW,EAAG,yDAA0D,CAAS,EAEhF,UACI,CAAA,CACiB,CAAA,CAE1B,CACD,EACA,EAAK,YAAc,SA8BnB,MAAM,EAAQ,GACZ,CAAE,YAAW,WAAU,GAAG,GAAS,IAAQ,CAC3C,GAAM,CAAE,aAAc,EAAiB,EAEvC,OACC,EAAC,MAAD,CACM,MACL,GAAI,EACJ,YAAU,gBACV,MAAM,6BACN,QAAS,OAAO,EAAU,GAAG,IAC7B,eAAe,aACf,UAAW,EAAG,gBAAiB,CAAS,EAEvC,UACG,CAAA,CAEP,CACD,EACA,EAAM,YAAc,cA8BpB,MAAM,EAAU,GAAgD,CAAE,YAAW,GAAG,GAAS,IAAQ,CAChG,GAAM,CAAE,QAAS,EAAiB,EAElC,OACC,EAAC,OAAD,CACM,MACL,GAAI,EACJ,YAAU,kBACV,EAAG,EACH,UAAW,EAAG,oBAAqB,CAAS,CAC5C,CAAA,CAEH,CAAC,EACD,EAAQ,YAAc,gBA4BtB,MAAM,EAAU,GACd,CAAE,UAAS,YAAW,GAAG,GAAS,IAIjC,EAHY,EAAU,EAAO,MAG7B,CACM,MACL,GAAI,EACJ,YAAU,kBACV,UAAW,EACV,kJACA,CACD,CACA,CAAA,CAGJ,EACA,EAAQ,YAAc,gBAkCtB,MAAM,EAAS,CAmBd,OAmBA,QAmBA,UAoBA,SACD"}
|
package/dist/radio-group.d.ts
CHANGED
|
@@ -148,7 +148,7 @@ declare const RadioGroup: {
|
|
|
148
148
|
children,
|
|
149
149
|
className,
|
|
150
150
|
...props
|
|
151
|
-
}: RadioIndicatorProps): import("react
|
|
151
|
+
}: RadioIndicatorProps): import("react").JSX.Element;
|
|
152
152
|
displayName: string;
|
|
153
153
|
};
|
|
154
154
|
/**
|
|
@@ -177,7 +177,7 @@ declare const RadioGroup: {
|
|
|
177
177
|
onClick,
|
|
178
178
|
onKeyDown,
|
|
179
179
|
...props
|
|
180
|
-
}: RadioInputSandboxProps): import("react
|
|
180
|
+
}: RadioInputSandboxProps): import("react").JSX.Element;
|
|
181
181
|
displayName: string;
|
|
182
182
|
};
|
|
183
183
|
/**
|
|
@@ -220,7 +220,7 @@ declare const RadioGroup: {
|
|
|
220
220
|
children,
|
|
221
221
|
className,
|
|
222
222
|
...props
|
|
223
|
-
}: RadioItemContentProps): import("react
|
|
223
|
+
}: RadioItemContentProps): import("react").JSX.Element;
|
|
224
224
|
displayName: string;
|
|
225
225
|
};
|
|
226
226
|
/**
|