@ngrok/mantle 0.80.0 → 0.81.1

package/dist/progress.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./types-D85fCNV3.js";import{t as n}from"./clsx-DUGZgXfJ.js";import{createContext as r,useContext as i,useId as a,useMemo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-progress";function u(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function d(e){return typeof e==`number`}function f(e,t){return d(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function p(e){return d(e)&&!Number.isNaN(e)&&e>0}const m={max:100,strokeWidth:`0.25rem`,value:0},h=r(m),g=({children:n,className:r,max:i=100,strokeWidth:a=4,value:l,indeterminateRotationSpeed:u,...g})=>{let _=p(i)?i:100,v=f(l,_)?l:l==null?0:`indeterminate`,x=y(a??m.strokeWidth),S=d(v)?v:void 0,C=b(x),w=o(()=>({max:_,strokeWidth:x,value:v}),[_,x,v]);return s(h.Provider,{value:w,children:c(`svg`,{"data-slot":`progress-donut`,"aria-valuemax":_,"aria-valuemin":0,"aria-valuenow":S,className:e(`size-6 text-gray-200 dark:text-gray-300`,v===`indeterminate`&&[`animate-spin`,u??`animation-duration-[15s]`],r),"data-max":_,"data-min":0,"data-value":S,height:`100%`,role:`progressbar`,width:`100%`,...g,children:[s(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:x,style:t({"--radius":C})}),n]})})};g.displayName=`ProgressDonut`;const _=({className:r,...o})=>{let l=a(),u=i(h)??m,d=(u.value===`indeterminate`?.6:u.value/u.max)*100,f=y(u.strokeWidth),p=b(f);return c(`g`,{"data-slot":`progress-donut-indicator`,className:e(`text-accent-600`,r),...o,children:[u.value===`indeterminate`&&s(`defs`,{children:c(`linearGradient`,{id:l,children:[s(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),s(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),s(`circle`,{className:n(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:u.value===`indeterminate`?`url(#${l})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-d,strokeLinecap:`round`,strokeWidth:f,style:t({"--radius":p}),transform:`rotate(-90)`})]})};_.displayName=`ProgressDonutIndicator`;const v={Root:g,Indicator:_};function y(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),u(Number.isNaN(t)?4:t,{min:1,max:12}))}function b(e){return`calc(50% - ${e/2}px)`}const x=r({max:100,value:0});function S({className:t,children:n,max:r=100,value:i,...a}){let c=p(r)?r:100,u=f(i,c)?i:i==null?0:`indeterminate`,m=d(u)?u:void 0,h=o(()=>({max:c,value:u}),[c,u]);return s(x.Provider,{value:h,children:s(l.Root,{"data-slot":`progress-bar`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:c,...a,children:n})})}function C({className:t,style:n,...r}){let a=i(x),{max:o}=a,c=(o-(a.value===`indeterminate`?0:a.value))/o*100;return s(l.Indicator,{"data-slot":`progress-bar-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...n,transform:`translateX(-${c}%)`},...r})}const w={Root:S,Indicator:C};export{w as ProgressBar,v as ProgressDonut};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./types-D85fCNV3.js";import{t as n}from"./clsx-DUGZgXfJ.js";import{createContext as r,useContext as i,useId as a,useMemo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-progress";function u(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function d(e){return typeof e==`number`}function f(e,t){return d(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function p(e){return d(e)&&!Number.isNaN(e)&&e>0}const m={max:100,strokeWidth:`0.25rem`,value:0},h=r(m),g={Root:({children:n,className:r,max:i=100,strokeWidth:a=4,value:l,indeterminateRotationSpeed:u,...g})=>{let y=p(i)?i:100,b=f(l,y)?l:l==null?0:`indeterminate`,x=_(a??m.strokeWidth),S=d(b)?b:void 0,C=v(x),w=o(()=>({max:y,strokeWidth:x,value:b}),[y,x,b]);return s(h.Provider,{value:w,children:c(`svg`,{"data-slot":`progress-donut`,"aria-valuemax":y,"aria-valuemin":0,"aria-valuenow":S,className:e(`size-6 text-gray-200 dark:text-gray-300`,b===`indeterminate`&&[`animate-spin`,u??`animation-duration-[15s]`],r),"data-max":y,"data-min":0,"data-value":S,height:`100%`,role:`progressbar`,width:`100%`,...g,children:[s(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:x,style:t({"--radius":C})}),n]})})},Indicator:({className:r,...o})=>{let l=a(),u=i(h)??m,d=(u.value===`indeterminate`?.6:u.value/u.max)*100,f=_(u.strokeWidth),p=v(f);return c(`g`,{"data-slot":`progress-donut-indicator`,className:e(`text-accent-600`,r),...o,children:[u.value===`indeterminate`&&s(`defs`,{children:c(`linearGradient`,{id:l,children:[s(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),s(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),s(`circle`,{className:n(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:u.value===`indeterminate`?`url(#${l})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-d,strokeLinecap:`round`,strokeWidth:f,style:t({"--radius":p}),transform:`rotate(-90)`})]})}};function _(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),u(Number.isNaN(t)?4:t,{min:1,max:12}))}function v(e){return`calc(50% - ${e/2}px)`}const y=r({max:100,value:0});function b({className:t,children:n,max:r=100,value:i,...a}){let c=p(r)?r:100,u=f(i,c)?i:i==null?0:`indeterminate`,m=d(u)?u:void 0,h=o(()=>({max:c,value:u}),[c,u]);return s(y.Provider,{value:h,children:s(l.Root,{"data-slot":`progress-bar`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:c,...a,children:n})})}function x({className:t,style:n,...r}){let a=i(y),{max:o}=a,c=(o-(a.value===`indeterminate`?0:a.value))/o*100;return s(l.Indicator,{"data-slot":`progress-bar-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...n,transform:`translateX(-${c}%)`},...r})}const S={Root:b,Indicator:x};export{S as ProgressBar,g as ProgressDonut};

package/dist/qr-code.d.ts

@@ -57,10 +57,7 @@ type QrCodeRootProps = ComponentProps<"div"> & WithAsChild & {
  * </QrCode.Root>
  * ```
  */
-declare const Root: {
-  ({ value, ecc, pixelSize, quietZone, asChild, className, children, ref, ...props }: QrCodeRootProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Root: ({ value, ecc, pixelSize, quietZone, asChild, className, children, ref, ...props }: QrCodeRootProps) => import("react").JSX.Element;
 /**
  * Props for `QrCode.Frame`, the fixed SVG element that sizes the encoded QR
  * pattern with its `viewBox`.
@@ -88,10 +85,7 @@ type QrCodeFrameProps = ComponentProps<"svg">;
  * </QrCode.Root>
  * ```
  */
-declare const Frame: {
-  ({ className, children, ref, ...props }: QrCodeFrameProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Frame: ({ className, children, ref, ...props }: QrCodeFrameProps) => import("react").JSX.Element;
 /**
  * Props for `QrCode.Pattern`, the fixed SVG `path` element that renders the
  * encoded dark modules.
@@ -119,10 +113,7 @@ type QrCodePatternProps = ComponentProps<"path">;
  * </QrCode.Root>
  * ```
  */
-declare const Pattern: {
-  ({ className, ref, ...props }: QrCodePatternProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Pattern: ({ className, ref, ...props }: QrCodePatternProps) => import("react").JSX.Element;
 /**
  * Props for `QrCode.Overlay`, the optional centered logo container rendered on
  * top of the QR pattern.
@@ -148,10 +139,7 @@ type QrCodeOverlayProps = ComponentProps<"div"> & WithAsChild;
  * </QrCode.Root>
  * ```
  */
-declare const Overlay: {
-  ({ asChild, className, ref, ...props }: QrCodeOverlayProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Overlay: ({ asChild, className, ref, ...props }: QrCodeOverlayProps) => import("react").JSX.Element;
 /**
  * A QR code. Compose `QrCode.Root` with a `QrCode.Frame` wrapping a
  * `QrCode.Pattern`, and optionally a `QrCode.Overlay` for a centered logo.

package/dist/qr-code.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{createContext as n,useContext as r,useMemo as i}from"react";import a from"tiny-invariant";import{jsx as o}from"react/jsx-runtime";import{encode as s}from"uqr";const c=n(null);function l(e,t){a(Number.isFinite(e)&&e>0,"`QrCode.Root` pixelSize must be a finite number greater than 0."),a(Number.isInteger(t)&&t>=0,"`QrCode.Root` quietZone must be a non-negative integer.")}function u(){let e=r(c);return a(e,"`QrCode.Frame` and `QrCode.Pattern` must be rendered inside a `QrCode.Root`."),e}function d(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 f=({value:n,ecc:r=`L`,pixelSize:a=10,quietZone:u=4,asChild:f,className:p,children:m,ref:h,...g})=>{l(a,u);let _=i(()=>s(n,{ecc:r,border:u}),[n,r,u]),v=i(()=>d(_.data,a),[_,a]),y=i(()=>({path:v,dimension:_.size*a}),[v,_.size,a]),b=f?t:`div`;return o(c.Provider,{value:y,children:o(b,{ref:h,...g,"data-slot":`qr-code`,className:e(`relative inline-flex bg-static-white text-static-black`,p),children:m})})};f.displayName=`QrCode`;const p=({className:t,children:n,ref:r,...i})=>{let{dimension:a}=u();return o(`svg`,{ref:r,...i,"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})};p.displayName=`QrCodeFrame`;const m=({className:t,ref:n,...r})=>{let{path:i}=u();return o(`path`,{ref:n,...r,"data-slot":`qr-code-pattern`,d:i,className:e(`fill-static-black`,t)})};m.displayName=`QrCodePattern`;const h=({asChild:n,className:r,ref:i,...a})=>o(n?t:`div`,{ref:i,...a,"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)});h.displayName=`QrCodeOverlay`;const g={Root:f,Frame:p,Pattern:m,Overlay:h};export{g as QrCode};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{createContext as n,useContext as r,useMemo as i}from"react";import a from"tiny-invariant";import{jsx as o}from"react/jsx-runtime";import{encode as s}from"uqr";const c=n(null);function l(e,t){a(Number.isFinite(e)&&e>0,"`QrCode.Root` pixelSize must be a finite number greater than 0."),a(Number.isInteger(t)&&t>=0,"`QrCode.Root` quietZone must be a non-negative integer.")}function u(){let e=r(c);return a(e,"`QrCode.Frame` and `QrCode.Pattern` must be rendered inside a `QrCode.Root`."),e}function d(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 f={Root:({value:n,ecc:r=`L`,pixelSize:a=10,quietZone:u=4,asChild:f,className:p,children:m,ref:h,...g})=>{l(a,u);let _=i(()=>s(n,{ecc:r,border:u}),[n,r,u]),v=i(()=>d(_.data,a),[_,a]),y=i(()=>({path:v,dimension:_.size*a}),[v,_.size,a]),b=f?t:`div`;return o(c.Provider,{value:y,children:o(b,{ref:h,...g,"data-slot":`qr-code`,className:e(`relative inline-flex bg-static-white text-static-black`,p),children:m})})},Frame:({className:t,children:n,ref:r,...i})=>{let{dimension:a}=u();return o(`svg`,{ref:r,...i,"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})},Pattern:({className:t,ref:n,...r})=>{let{path:i}=u();return o(`path`,{ref:n,...r,"data-slot":`qr-code-pattern`,d:i,className:e(`fill-static-black`,t)})},Overlay:({asChild:n,className:r,ref:i,...a})=>o(n?t:`div`,{ref:i,...a,"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)})};export{f as QrCode};

package/dist/radio-group.d.ts

@@ -33,10 +33,7 @@ type RadioGroupProps$1 = PropsWithChildren<Omit<RadioGroupProps, "as" | "childre
  * </RadioGroup.Root>
  * ```
  */
-declare const Root: {
-  ({ ref, ...props }: RadioGroupProps$1): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Root: ({ ref, ...props }: RadioGroupProps$1) => import("react").JSX.Element;
 /**
  * The shape of the radio state context.
  */
@@ -71,10 +68,7 @@ type RadioItemProps = Omit<RadioProps, "children"> & PropsWithChildren & {
  * </RadioGroup.Root>
  * ```
  */
-declare const Item: {
-  ({ children, className, ref, ...props }: RadioItemProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Item: ({ children, className, ref, ...props }: RadioItemProps) => import("react").JSX.Element;
 type RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
   children?: ReactNode | ((context: RadioStateContextValue) => ReactNode);
 };
@@ -96,17 +90,31 @@ type RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
  * </RadioGroup.Item>
  * ```
  */
-declare const Indicator: {
-  ({ children, className, ...props }: RadioIndicatorProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Indicator: ({ children, className, ...props }: RadioIndicatorProps) => import("react").JSX.Element;
 /**
  * A group of radio list items. Use RadioGroup.ListItem as direct children.
+ *
+ * @see https://mantle.ngrok.com/components/forms/radio-group#radiogrouplist
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup.Root defaultValue="option1">
+ *   <RadioGroup.List>
+ *     <RadioGroup.ListItem value="option1">
+ *       <RadioGroup.ItemContent>
+ *         <Text>Option 1</Text>
+ *       </RadioGroup.ItemContent>
+ *     </RadioGroup.ListItem>
+ *     <RadioGroup.ListItem value="option2">
+ *       <RadioGroup.ItemContent>
+ *         <Text>Option 2</Text>
+ *       </RadioGroup.ItemContent>
+ *     </RadioGroup.ListItem>
+ *   </RadioGroup.List>
+ * </RadioGroup.Root>
+ * ```
  */
-declare const List: {
-  ({ className, ref, ...props }: RadioGroupProps$1): import("react").JSX.Element;
-  displayName: string;
-};
+declare const List: ({ className, ref, ...props }: RadioGroupProps$1) => import("react").JSX.Element;
 type RadioListItemProps = RadioItemProps;
 /**
  * A radio list item that is used inside a `RadioGroup.List`.
@@ -115,11 +123,30 @@ type RadioListItemProps = RadioItemProps;
  * `Field.Set` / `Field.Legend` composition), picks up `aria-invalid` and
  * `aria-errormessage` from `FieldControlContext`. `aria-describedby` is owned
  * by Headless UI's Radio primitive and does not propagate.
+ *
+ * @see https://mantle.ngrok.com/components/forms/radio-group#radiogrouplistitem
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup.Root defaultValue="item1">
+ *   <RadioGroup.List>
+ *     <RadioGroup.ListItem value="item1">
+ *       <RadioGroup.ItemContent>
+ *         <Text>List Item 1</Text>
+ *         <Text size="sm" className="text-muted">First option</Text>
+ *       </RadioGroup.ItemContent>
+ *     </RadioGroup.ListItem>
+ *     <RadioGroup.ListItem value="item2">
+ *       <RadioGroup.ItemContent>
+ *         <Text>List Item 2</Text>
+ *         <Text size="sm" className="text-muted">Second option</Text>
+ *       </RadioGroup.ItemContent>
+ *     </RadioGroup.ListItem>
+ *   </RadioGroup.List>
+ * </RadioGroup.Root>
+ * ```
  */
-declare const ListItem: {
-  ({ children, className, ref, ...props }: RadioListItemProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const ListItem: ({ children, className, ref, ...props }: RadioListItemProps) => import("react").JSX.Element;
 type RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;
 type RadioCardProps = RadioItemProps;
 /**
@@ -129,29 +156,69 @@ type RadioCardProps = RadioItemProps;
  * `Field.Set` / `Field.Legend` composition), picks up `aria-invalid` and
  * `aria-errormessage` from `FieldControlContext`. `aria-describedby` is owned
  * by Headless UI's Radio primitive and does not propagate.
+ *
+ * @see https://mantle.ngrok.com/components/forms/radio-group#radiogroupcard
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup.Root defaultValue="basic">
+ *   <div className="space-y-3">
+ *     <RadioGroup.Card value="basic">
+ *       <RadioGroup.ItemContent>
+ *         <Text weight="strong">Basic Plan</Text>
+ *         <Text>$10/month</Text>
+ *       </RadioGroup.ItemContent>
+ *     </RadioGroup.Card>
+ *     <RadioGroup.Card value="pro">
+ *       <RadioGroup.ItemContent>
+ *         <Text weight="strong">Pro Plan</Text>
+ *         <Text>$25/month</Text>
+ *       </RadioGroup.ItemContent>
+ *     </RadioGroup.Card>
+ *   </div>
+ * </RadioGroup.Root>
+ * ```
  */
-declare const Card: {
-  ({ children, className, ref, ...props }: RadioCardProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Card: ({ children, className, ref, ...props }: RadioCardProps) => import("react").JSX.Element;
 /**
  * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.
  * Use it as a child of `RadioGroup.Item`, `RadioGroup.ListItem`, or `RadioGroup.Card`.
+ *
+ * @see https://mantle.ngrok.com/components/forms/radio-group#radiogroupitemcontent
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup.Root defaultValue="option1">
+ *   <RadioGroup.Item value="option1">
+ *     <RadioGroup.Indicator />
+ *     <RadioGroup.ItemContent>
+ *       <Text weight="strong">Option 1</Text>
+ *       <Text size="sm">Description for option 1</Text>
+ *     </RadioGroup.ItemContent>
+ *   </RadioGroup.Item>
+ * </RadioGroup.Root>
+ * ```
  */
-declare const ItemContent: {
-  ({ asChild, children, className, ...props }: RadioItemContentProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const ItemContent: ({ asChild, children, className, ...props }: RadioItemContentProps) => import("react").JSX.Element;
 /**
  * An inline group of radio buttons. Use RadioGroup.Button as direct children.
  * Renders the radio group itself (it wraps `Root`) — use it *in place of*
  * `RadioGroup.Root`, never nested inside one, or the buttons bind to an
  * inner, uncontrolled group and outer `value`/`onChange` props are ignored.
+ *
+ * @see https://mantle.ngrok.com/components/forms/radio-group#radiogroupbuttongroup
+ *
+ * @example
+ * ```tsx
+ * <Label id="size-label">Size</Label>
+ * <RadioGroup.ButtonGroup aria-labelledby="size-label" defaultValue="small">
+ *   <RadioGroup.Button value="small">Small</RadioGroup.Button>
+ *   <RadioGroup.Button value="medium">Medium</RadioGroup.Button>
+ *   <RadioGroup.Button value="large">Large</RadioGroup.Button>
+ * </RadioGroup.ButtonGroup>
+ * ```
  */
-declare const ButtonGroup: {
-  ({ className, ref, ...props }: RadioGroupProps$1): import("react").JSX.Element;
-  displayName: string;
-};
+declare const ButtonGroup: ({ className, ref, ...props }: RadioGroupProps$1) => import("react").JSX.Element;
 type RadioButtonProps = RadioItemProps;
 /**
  * A radio button that is used inside a `RadioGroup.ButtonGroup`.
@@ -160,20 +227,42 @@ type RadioButtonProps = RadioItemProps;
  * `Field.Set` / `Field.Legend` composition), picks up `aria-invalid` and
  * `aria-errormessage` from `FieldControlContext`. `aria-describedby` is owned
  * by Headless UI's Radio primitive and does not propagate.
+ *
+ * @see https://mantle.ngrok.com/components/forms/radio-group#radiogroupbutton
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup.ButtonGroup defaultValue="option1">
+ *   <RadioGroup.Button value="option1">Option 1</RadioGroup.Button>
+ *   <RadioGroup.Button value="option2">Option 2</RadioGroup.Button>
+ *   <RadioGroup.Button value="option3">Option 3</RadioGroup.Button>
+ * </RadioGroup.ButtonGroup>
+ * ```
  */
-declare const Button: {
-  ({ children, className, ref, ...props }: RadioButtonProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Button: ({ children, className, ref, ...props }: RadioButtonProps) => import("react").JSX.Element;
 type RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;
 /**
  * A sandbox container for input elements composed within radio group items.
  * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.
+ *
+ * @see https://mantle.ngrok.com/components/forms/radio-group#radiogroupinputsandbox
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup.Root defaultValue="custom">
+ *   <RadioGroup.Item value="custom">
+ *     <RadioGroup.Indicator />
+ *     <RadioGroup.ItemContent>
+ *       <Text>Custom amount</Text>
+ *       <RadioGroup.InputSandbox>
+ *         <Input type="number" placeholder="Enter amount" />
+ *       </RadioGroup.InputSandbox>
+ *     </RadioGroup.ItemContent>
+ *   </RadioGroup.Item>
+ * </RadioGroup.Root>
+ * ```
  */
-declare const InputSandbox: {
-  ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const InputSandbox: ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => import("react").JSX.Element;
 /**
  * A group of radio items. It manages the state of the children radios.
  *

package/dist/radio-group.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{t as n}from"./clsx-DUGZgXfJ.js";import{t as r}from"./field-context-BR01g789.js";import{t as i}from"./is-input-CXmS0OFN.js";import{Children as a,cloneElement as o,createContext as s,isValidElement as c,useContext as l,useRef as u}from"react";import{jsx as d}from"react/jsx-runtime";import{Radio as f,RadioGroup as p}from"@headlessui/react";const m=({ref:e,...t})=>d(p,{"data-slot":`radio-group`,...t,ref:e});m.displayName=`RadioGroup`;const h=s({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),g=({children:t,className:n,ref:i,...a})=>{let o=l(r);return d(f,{"data-slot":`radio-group-item`,className:e(`group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden`,n),as:`div`,...a,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,ref:i,children:e=>d(h.Provider,{value:e,children:t})})};g.displayName=`RadioItem`;const _=({checked:t,disabled:n,focus:r,hover:i})=>d(`span`,{className:e(`border-form flex size-4 items-center justify-center rounded-full border shrink-0`,n&&`cursor-default opacity-50`,t&&`border-accent-600 bg-accent-600`,r&&!n&&`border-accent-600 ring-focus-accent ring-4`,i&&`border-accent-600`),children:t&&d(`span`,{className:`size-2 rounded-full bg-white shrink-0`})}),v=({children:t,className:n,...r})=>{let i=l(h);return d(`div`,{"data-slot":`radio-group-indicator`,className:e(`radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0`,n),...r,children:t==null?d(_,{...i}):typeof t==`function`?t(i):t})};v.displayName=`RadioIndicator`;const y=({className:e,ref:t,...r})=>d(m,{"data-slot":`radio-group-list`,className:n(`-space-y-px`,e),...r,ref:t});y.displayName=`RadioGroupList`;const b=({children:t,className:n,ref:i,...a})=>{let o=l(r);return d(f,{as:`div`,"data-slot":`radio-group-list-item`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...a,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,children:e=>d(h.Provider,{value:e,children:t})})};b.displayName=`RadioListItem`;const x=({children:e,className:t,ref:i,...a})=>{let o=l(r);return d(f,{as:`div`,"data-slot":`radio-group-card`,className:n(`group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-600/50 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-600 high-contrast:aria-checked:border-accent-600`,t),...a,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,ref:i,children:t=>d(h.Provider,{value:t,children:e})})};x.displayName=`RadioCard`;const S=({asChild:e=!1,children:r,className:i,...a})=>{let o=l(h);return d(e?t:`div`,{"data-slot":`radio-group-item-content`,className:n(`min-w-0 flex-1`,o.disabled&&`opacity-50`,i),...a,children:r})};S.displayName=`RadioItemContent`;const C=({className:e,ref:t,...r})=>d(m,{"data-slot":`radio-group-button-group`,className:n(`flex flex-row flex-nowrap -space-x-px`,e),...r,ref:t});C.displayName=`RadioButtonGroup`;const w=({children:t,className:n,ref:i,...a})=>{let o=l(r);return d(f,{as:`div`,"data-slot":`radio-group-button`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm`,`h-9`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md`,`not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50`,`aria-checked:z-1 aria-checked:border-accent-600/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...a,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,children:e=>d(h.Provider,{value:e,children:t})})};w.displayName=`RadioButton`;const T=({children:e,onClick:t,onKeyDown:n,...r})=>{let s=u(null),f=l(h),p=a.only(e),m=f.disabled||!f.checked;return d(`div`,{role:`none`,"data-slot":`radio-group-input-sandbox`,ref:s,onKeyDown:e=>{if(f.disabled){e.stopPropagation(),e.preventDefault();return}switch(e.key){case`Enter`:case`Tab`:break;default:e.stopPropagation()}n?.(e)},onClick:e=>{if(f.disabled){e.stopPropagation(),e.preventDefault();return}let n=e.target;i(n)&&window.requestAnimationFrame(()=>{n.focus()}),t?.(e)},...r,children:c(p)?o(p,{disabled:f.disabled||p.props.disabled,tabIndex:m?-1:p.props.tabIndex}):null})};T.displayName=`RadioInputSandbox`;const E={Button:w,ButtonGroup:C,Card:x,Indicator:v,InputSandbox:T,Item:g,ItemContent:S,List:y,ListItem:b,Root:m};export{E as RadioGroup};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{t as n}from"./clsx-DUGZgXfJ.js";import{t as r}from"./field-B1wqeZr4.js";import{t as i}from"./input-CXmS0OFN.js";import{Children as a,cloneElement as o,createContext as s,isValidElement as c,useContext as l,useRef as u}from"react";import{jsx as d}from"react/jsx-runtime";import{Radio as f,RadioGroup as p}from"@headlessui/react";const m=({ref:e,...t})=>d(p,{"data-slot":`radio-group`,...t,ref:e}),h=s({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),g=({children:t,className:n,ref:i,...a})=>{let o=l(r);return d(f,{"data-slot":`radio-group-item`,className:e(`group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden`,n),as:`div`,...a,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,ref:i,children:e=>d(h.Provider,{value:e,children:t})})},_=({checked:t,disabled:n,focus:r,hover:i})=>d(`span`,{className:e(`border-form flex size-4 items-center justify-center rounded-full border shrink-0`,n&&`cursor-default opacity-50`,t&&`border-accent-600 bg-accent-600`,r&&!n&&`border-accent-600 ring-focus-accent ring-4`,i&&`border-accent-600`),children:t&&d(`span`,{className:`size-2 rounded-full bg-white shrink-0`})}),v={Button:({children:t,className:n,ref:i,...a})=>{let o=l(r);return d(f,{as:`div`,"data-slot":`radio-group-button`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm`,`h-9`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md`,`not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50`,`aria-checked:z-1 aria-checked:border-accent-600/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...a,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,children:e=>d(h.Provider,{value:e,children:t})})},ButtonGroup:({className:e,ref:t,...r})=>d(m,{"data-slot":`radio-group-button-group`,className:n(`flex flex-row flex-nowrap -space-x-px`,e),...r,ref:t}),Card:({children:e,className:t,ref:i,...a})=>{let o=l(r);return d(f,{as:`div`,"data-slot":`radio-group-card`,className:n(`group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-600/50 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-600 high-contrast:aria-checked:border-accent-600`,t),...a,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,ref:i,children:t=>d(h.Provider,{value:t,children:e})})},Indicator:({children:t,className:n,...r})=>{let i=l(h);return d(`div`,{"data-slot":`radio-group-indicator`,className:e(`radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0`,n),...r,children:t==null?d(_,{...i}):typeof t==`function`?t(i):t})},InputSandbox:({children:e,onClick:t,onKeyDown:n,...r})=>{let s=u(null),f=l(h),p=a.only(e),m=f.disabled||!f.checked;return d(`div`,{role:`none`,"data-slot":`radio-group-input-sandbox`,ref:s,onKeyDown:e=>{if(f.disabled){e.stopPropagation(),e.preventDefault();return}switch(e.key){case`Enter`:case`Tab`:break;default:e.stopPropagation()}n?.(e)},onClick:e=>{if(f.disabled){e.stopPropagation(),e.preventDefault();return}let n=e.target;i(n)&&window.requestAnimationFrame(()=>{n.focus()}),t?.(e)},...r,children:c(p)?o(p,{disabled:f.disabled||p.props.disabled,tabIndex:m?-1:p.props.tabIndex}):null})},Item:g,ItemContent:({asChild:e=!1,children:r,className:i,...a})=>{let o=l(h);return d(e?t:`div`,{"data-slot":`radio-group-item-content`,className:n(`min-w-0 flex-1`,o.disabled&&`opacity-50`,i),...a,children:r})},List:({className:e,ref:t,...r})=>d(m,{"data-slot":`radio-group-list`,className:n(`-space-y-px`,e),...r,ref:t}),ListItem:({children:t,className:n,ref:i,...a})=>{let o=l(r);return d(f,{as:`div`,"data-slot":`radio-group-list-item`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...a,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,children:e=>d(h.Provider,{value:e,children:t})})},Root:m};export{v as RadioGroup};

package/dist/sandboxed-on-click.d.ts

@@ -25,7 +25,7 @@ type EventProps = BaseProps & {
  * Props for the sandboxed onClick container. Spread this on the element you want
  * to prevent the click event from bubbling out of.
  *
- * @see https://mantle.ngrok.com/components/primitives/sandboxed-on-click#sandboxedonclick
+ * @see https://mantle.ngrok.com/components/primitives/sandboxed-on-click
  */
 declare const sandboxedOnClickProps: ({ allowClickEventDefault, onClick }?: EventProps) => {
   /**
@@ -43,7 +43,7 @@ type Props = ComponentProps<"div"> & WithAsChild & BaseProps;
 /**
  * A container that prevents the click event from bubbling out of it.
  *
- * @see https://mantle.ngrok.com/components/primitives/sandboxed-on-click#sandboxedonclick
+ * @see https://mantle.ngrok.com/components/primitives/sandboxed-on-click
  *
  * @example
  * ```tsx