@ngrok/mantle 0.79.3 → 0.81.0

package/dist/qr-code.d.ts

@@ -1,4 +1,4 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { ComponentProps } from "react";
 //#region src/components/qr-code/qr-code.d.ts
 /**
@@ -29,21 +29,117 @@ type QrCodeRootProps = ComponentProps<"div"> & WithAsChild & {
    */
   quietZone?: number;
 };
+/**
+ * The root container of a QR code. Encodes `value` (via the dependency-free
+ * `uqr` encoder) and renders a positioned white tile around the QR `Frame`,
+ * sharing the encoded path with the other parts via context.
+ *
+ * Set the error correction level via `ecc`. When you place a logo in an
+ * `Overlay`, use `ecc="H"` so the covered modules can still be recovered by a
+ * scanner. Tighten the surrounding whitespace with `quietZone` (defaults to the
+ * spec-recommended `4` light modules).
+ *
+ * The default styling is black modules on a white tile in every theme (never
+ * theme-aware tokens). Consumers can override those styles, but inverting a QR
+ * code's colors makes it unreliable for many scanners.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/qr-code
+ *
+ * @example
+ * ```tsx
+ * <QrCode.Root value="https://ngrok.com" ecc="H">
+ *   <QrCode.Frame>
+ *     <QrCode.Pattern />
+ *   </QrCode.Frame>
+ *   <QrCode.Overlay>
+ *     <NgrokLettermarkIcon className="size-7" />
+ *   </QrCode.Overlay>
+ * </QrCode.Root>
+ * ```
+ */
+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`.
  */
 type QrCodeFrameProps = ComponentProps<"svg">;
+/**
+ * The `svg` frame that holds the QR `Pattern`. Defaults to a square `size-48`
+ * and scales the encoded pattern to fit via its `viewBox`, so resize the whole
+ * code by passing a different size to `className` (e.g. `className="size-64"`).
+ *
+ * Does not support `asChild`: the QR pattern must live inside an `svg`, so the
+ * frame element is fixed and cannot be swapped.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/qr-code
+ *
+ * @example
+ * ```tsx
+ * <QrCode.Root value="https://ngrok.com" ecc="H">
+ *   <QrCode.Frame>
+ *     <QrCode.Pattern />
+ *   </QrCode.Frame>
+ *   <QrCode.Overlay>
+ *     <NgrokLettermarkIcon className="size-7" />
+ *   </QrCode.Overlay>
+ * </QrCode.Root>
+ * ```
+ */
+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.
  */
 type QrCodePatternProps = ComponentProps<"path">;
+/**
+ * The encoded QR modules, rendered as a single `path` inside the `Frame`.
+ * Defaults to black fill (`fill-static-black`) so the code stays scannable in
+ * every theme.
+ *
+ * Does not support `asChild`: the modules are a fixed `path` and cannot be
+ * swapped for another element.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/qr-code
+ *
+ * @example
+ * ```tsx
+ * <QrCode.Root value="https://ngrok.com" ecc="H">
+ *   <QrCode.Frame>
+ *     <QrCode.Pattern />
+ *   </QrCode.Frame>
+ *   <QrCode.Overlay>
+ *     <NgrokLettermarkIcon className="size-7" />
+ *   </QrCode.Overlay>
+ * </QrCode.Root>
+ * ```
+ */
+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.
  */
 type QrCodeOverlayProps = ComponentProps<"div"> & WithAsChild;
+/**
+ * An overlay centered on top of the QR code, typically holding a brand logo
+ * (e.g. `NgrokLettermarkIcon`). Renders a white, rounded "punch-out" so the
+ * logo stays legible over the modules beneath it. Because the overlay hides the
+ * center modules, use a higher `ecc` (e.g. `"H"`) on the `Root`.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/qr-code
+ *
+ * @example
+ * ```tsx
+ * <QrCode.Root value="https://ngrok.com" ecc="H">
+ *   <QrCode.Frame>
+ *     <QrCode.Pattern />
+ *   </QrCode.Frame>
+ *   <QrCode.Overlay>
+ *     <NgrokLettermarkIcon className="size-7" />
+ *   </QrCode.Overlay>
+ * </QrCode.Root>
+ * ```
+ */
+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.
@@ -95,7 +191,7 @@ declare const QrCode: {
    * </QrCode.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<QrCodeRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root;
   /**
    * The `svg` frame that holds the QR `Pattern`. Defaults to `size-48`; resize
    * the whole code by passing a different size to `className`.
@@ -114,7 +210,7 @@ declare const QrCode: {
    * </QrCode.Root>
    * ```
    */
-  readonly Frame: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+  readonly Frame: typeof Frame;
   /**
    * The encoded QR modules, rendered as a `path` inside the `Frame`. Defaults
    * to black fill so the code stays scannable in every theme.
@@ -133,7 +229,7 @@ declare const QrCode: {
    * </QrCode.Root>
    * ```
    */
-  readonly Pattern: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGPathElement>, "ref"> & import("react").RefAttributes<SVGPathElement>>;
+  readonly Pattern: typeof Pattern;
   /**
    * An overlay centered on top of the QR code, typically holding a brand logo.
    * Renders a white rounded "punch-out" so the logo stays legible. Use a higher
@@ -153,7 +249,7 @@ declare const QrCode: {
    * </QrCode.Root>
    * ```
    */
-  readonly Overlay: import("react").ForwardRefExoticComponent<Omit<QrCodeOverlayProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Overlay: typeof Overlay;
 };
 //#endregion
 export { QrCode, type QrCodeErrorCorrection, type QrCodeFrameProps, type QrCodeOverlayProps, type QrCodePatternProps, type QrCodeRootProps };

package/dist/qr-code.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.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};
+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

@@ -1,7 +1,39 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import { HTMLAttributes, ReactNode } from "react";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { HTMLAttributes, PropsWithChildren, ReactNode, Ref } from "react";
 import { RadioGroupProps, RadioProps } from "@headlessui/react";
 //#region src/components/radio-group/radio-group.d.ts
+type RadioGroupProps$1 = PropsWithChildren<Omit<RadioGroupProps, "as" | "children">> & {
+  ref?: Ref<HTMLElement>;
+};
+/**
+ * A group of radio items. It manages the state of the children radios. Unstyled and simple.
+ * Used as the root component for grouping related radio items where only one can be selected.
+ *
+ * The recommended Field composition is `Field.Set` + `Field.Legend` + `RadioGroup.Root`,
+ * which uses fieldset semantics so all radios share a single accessible name from the
+ * legend. As an alternative, when individual items render inside a `Field.Control`,
+ * each item picks up `aria-invalid` and `aria-errormessage` from `FieldControlContext`.
+ * Note: `aria-describedby` is owned by Headless UI's Radio primitive and does not
+ * propagate through `FieldControlContext`, so helper text wired via `Field.Description`
+ * will not be associated automatically in that alternative composition.
+ *
+ * @see https://mantle.ngrok.com/components/forms/radio-group#radiogrouproot
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup.Root value={value} onChange={setValue}>
+ *   <RadioGroup.Item value="option1">
+ *     <RadioGroup.Indicator />
+ *     <span>Option 1</span>
+ *   </RadioGroup.Item>
+ *   <RadioGroup.Item value="option2">
+ *     <RadioGroup.Indicator />
+ *     <span>Option 2</span>
+ *   </RadioGroup.Item>
+ * </RadioGroup.Root>
+ * ```
+ */
+declare const Root: ({ ref, ...props }: RadioGroupProps$1) => import("react").JSX.Element;
 /**
  * The shape of the radio state context.
  */
@@ -12,6 +44,31 @@ type RadioStateContextValue = {
   focus: boolean;
   hover: boolean;
 };
+type RadioItemProps = Omit<RadioProps, "children"> & PropsWithChildren & {
+  ref?: Ref<HTMLDivElement>;
+};
+/**
+ * A simple radio item that can be used inside a radio group. The "conventional" use-case.
+ * Must be a child of `RadioGroup`.
+ *
+ * When rendered inside `Field.Control` (an alternative to the recommended
+ * `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#radiogroupitem
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup.Root value={value} onChange={setValue}>
+ *   <RadioGroup.Item value="option1">
+ *     <RadioGroup.Indicator />
+ *     <span>Option 1</span>
+ *   </RadioGroup.Item>
+ * </RadioGroup.Root>
+ * ```
+ */
+declare const Item: ({ children, className, ref, ...props }: RadioItemProps) => import("react").JSX.Element;
 type RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
   children?: ReactNode | ((context: RadioStateContextValue) => ReactNode);
 };
@@ -33,28 +90,60 @@ 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.
+ */
+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`.
+ *
+ * When rendered inside `Field.Control` (an alternative to the recommended
+ * `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.
+ */
+declare const ListItem: ({ children, className, ref, ...props }: RadioListItemProps) => import("react").JSX.Element;
 type RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;
+type RadioCardProps = RadioItemProps;
+/**
+ * A radio card item. Use it as a child of `RadioGroup`
+ *
+ * When rendered inside `Field.Control` (an alternative to the recommended
+ * `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.
+ */
+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`.
  */
-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.
+ */
+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`.
+ *
+ * When rendered inside `Field.Control` (an alternative to the recommended
+ * `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.
+ */
+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.
  */
-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.
  *
@@ -114,9 +203,7 @@ declare const RadioGroup: {
    * </RadioGroup.ButtonGroup>
    * ```
    */
-  readonly Button: import("react").ForwardRefExoticComponent<Omit<RadioProps, "children"> & {
-    children?: ReactNode | undefined;
-  } & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Button: typeof Button;
   /**
    * An inline group of radio buttons. Use RadioGroup.Button as direct children for horizontal radio layouts.
    * Renders the radio group itself — use it in place of `RadioGroup.Root`, never nested inside one.
@@ -133,9 +220,7 @@ declare const RadioGroup: {
    * </RadioGroup.ButtonGroup>
    * ```
    */
-  readonly ButtonGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroupProps, "as" | "children"> & {
-    children?: ReactNode | undefined;
-  } & import("react").RefAttributes<HTMLElement>>;
+  readonly ButtonGroup: typeof ButtonGroup;
   /**
    * A radio card item with enhanced styling. Use it as a child of RadioGroup for card-based radio options.
    *
@@ -161,9 +246,7 @@ declare const RadioGroup: {
    * </RadioGroup.Root>
    * ```
    */
-  readonly Card: import("react").ForwardRefExoticComponent<Omit<RadioProps, "children"> & {
-    children?: ReactNode | undefined;
-  } & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Card: typeof Card;
   /**
    * The selection indicator for any radio item. Shows the checked state with customizable appearance.
    *
@@ -212,9 +295,7 @@ declare const RadioGroup: {
    * </RadioGroup.Item>
    * ```
    */
-  readonly Item: import("react").ForwardRefExoticComponent<Omit<RadioProps, "children"> & {
-    children?: ReactNode | undefined;
-  } & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Item: typeof Item;
   /**
    * The content wrapper for any radio item. Use it to wrap labels, descriptions, or content of a radio item.
    *
@@ -257,9 +338,7 @@ declare const RadioGroup: {
    * </RadioGroup.Root>
    * ```
    */
-  readonly List: import("react").ForwardRefExoticComponent<Omit<RadioGroupProps, "as" | "children"> & {
-    children?: ReactNode | undefined;
-  } & import("react").RefAttributes<HTMLElement>>;
+  readonly List: typeof List;
   /**
    * A radio list item that is used inside a RadioGroup.List for connected list-style radio options.
    *
@@ -285,9 +364,7 @@ declare const RadioGroup: {
    * </RadioGroup.Root>
    * ```
    */
-  readonly ListItem: import("react").ForwardRefExoticComponent<Omit<RadioProps, "children"> & {
-    children?: ReactNode | undefined;
-  } & import("react").RefAttributes<HTMLDivElement>>;
+  readonly ListItem: typeof ListItem;
   /**
    * The root radio group component. Manages the state of the children radios where only one can be selected.
    *
@@ -303,9 +380,7 @@ declare const RadioGroup: {
    * </RadioGroup.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<RadioGroupProps, "as" | "children"> & {
-    children?: ReactNode | undefined;
-  } & import("react").RefAttributes<HTMLElement>>;
+  readonly Root: typeof Root;
 };
 //#endregion
 export { RadioGroup };

package/dist/radio-group.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.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,forwardRef as c,isValidElement as l,useContext as u,useRef as d}from"react";import{jsx as f}from"react/jsx-runtime";import{Radio as p,RadioGroup as m}from"@headlessui/react";const h=c((e,t)=>f(m,{"data-slot":`radio-group`,...e,ref:t}));h.displayName=`RadioGroup`;const g=s({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),_=c(({children:t,className:n,...i},a)=>{let o=u(r);return f(p,{"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`,...i,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,ref:a,children:e=>f(g.Provider,{value:e,children:t})})});_.displayName=`RadioItem`;const v=({checked:t,disabled:n,focus:r,hover:i})=>f(`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&&f(`span`,{className:`size-2 rounded-full bg-white shrink-0`})}),y=({children:t,className:n,...r})=>{let i=u(g);return f(`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?f(v,{...i}):typeof t==`function`?t(i):t})};y.displayName=`RadioIndicator`;const b=c(({className:e,...t},r)=>f(h,{"data-slot":`radio-group-list`,className:n(`-space-y-px`,e),...t,ref:r}));b.displayName=`RadioGroupList`;const x=c(({children:t,className:n,...i},a)=>{let o=u(r);return f(p,{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:a,...i,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,children:e=>f(g.Provider,{value:e,children:t})})});x.displayName=`RadioListItem`;const S=c(({children:e,className:t,...i},a)=>{let o=u(r);return f(p,{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),...i,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,ref:a,children:t=>f(g.Provider,{value:t,children:e})})});S.displayName=`RadioCard`;const C=({asChild:e=!1,children:r,className:i,...a})=>{let o=u(g);return f(e?t:`div`,{"data-slot":`radio-group-item-content`,className:n(`min-w-0 flex-1`,o.disabled&&`opacity-50`,i),...a,children:r})};C.displayName=`RadioItemContent`;const w=c(({className:e,...t},r)=>f(h,{"data-slot":`radio-group-button-group`,className:n(`flex flex-row flex-nowrap -space-x-px`,e),...t,ref:r}));w.displayName=`RadioButtonGroup`;const T=c(({children:t,className:n,...i},a)=>{let o=u(r);return f(p,{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:a,...i,...o?{"aria-describedby":o[`aria-describedby`],"aria-errormessage":o[`aria-errormessage`],"aria-invalid":o[`aria-invalid`]}:void 0,children:e=>f(g.Provider,{value:e,children:t})})});T.displayName=`RadioButton`;const E=({children:e,onClick:t,onKeyDown:n,...r})=>{let s=d(null),c=u(g),p=a.only(e),m=c.disabled||!c.checked;return f(`div`,{role:`none`,"data-slot":`radio-group-input-sandbox`,ref:s,onKeyDown:e=>{if(c.disabled){e.stopPropagation(),e.preventDefault();return}switch(e.key){case`Enter`:case`Tab`:break;default:e.stopPropagation()}n?.(e)},onClick:e=>{if(c.disabled){e.stopPropagation(),e.preventDefault();return}let n=e.target;i(n)&&window.requestAnimationFrame(()=>{n.focus()}),t?.(e)},...r,children:l(p)?o(p,{disabled:c.disabled||p.props.disabled,tabIndex:m?-1:p.props.tabIndex}):null})};E.displayName=`RadioInputSandbox`;const D={Button:T,ButtonGroup:w,Card:S,Indicator:y,InputSandbox:E,Item:_,ItemContent:C,List:b,ListItem:x,Root:h};export{D 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

@@ -1,4 +1,4 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { ComponentProps, MouseEventHandler } from "react";
 //#region src/components/sandboxed-on-click/sandboxed-on-click.d.ts
 type BaseProps = {
@@ -58,6 +58,6 @@ type Props = ComponentProps<"div"> & WithAsChild & BaseProps;
  * </TableRow>
  * ```
  */
-declare const SandboxedOnClick: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const SandboxedOnClick: ({ allowClickEventDefault, asChild, children, onClick, ref, ...props }: Props) => import("react").JSX.Element;
 //#endregion
 export { SandboxedOnClick, sandboxedOnClickProps };

package/dist/sandboxed-on-click.js

@@ -1 +1 @@
-import{t as e}from"./slot-DmPrjM7N.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";const r=({allowClickEventDefault:e=!1,onClick:t}={})=>({role:`presentation`,onClick:n=>{n.stopPropagation(),e||n.preventDefault(),t?.(n)}}),i=t(({allowClickEventDefault:t=!1,asChild:i=!1,children:a,onClick:o,...s},c)=>n(i?e:`div`,{ref:c,...s,...r({allowClickEventDefault:t,onClick:o}),children:a}));i.displayName=`SandboxedOnClick`;export{i as SandboxedOnClick,r as sandboxedOnClickProps};
+import{t as e}from"./slot-CDk0Bb9z.js";import{jsx as t}from"react/jsx-runtime";const n=({allowClickEventDefault:e=!1,onClick:t}={})=>({role:`presentation`,onClick:n=>{n.stopPropagation(),e||n.preventDefault(),t?.(n)}}),r=({allowClickEventDefault:r=!1,asChild:i=!1,children:a,onClick:o,ref:s,...c})=>t(i?e:`div`,{ref:s,...c,...n({allowClickEventDefault:r,onClick:o}),children:a});export{r as SandboxedOnClick,n as sandboxedOnClickProps};