@ngrok/mantle 0.79.3 → 0.80.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,129 @@ 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;
+  displayName: string;
+};
 /**
  * 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;
+  displayName: string;
+};
 /**
  * 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;
+  displayName: string;
+};
 /**
  * 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;
+  displayName: string;
+};
 /**
  * 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 +203,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 +222,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 +241,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 +261,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=({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};

package/dist/radio-group.d.ts

@@ -1,7 +1,42 @@
-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;
+  displayName: string;
+};
 /**
  * The shape of the radio state context.
  */
@@ -12,6 +47,34 @@ 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;
+  displayName: string;
+};
 type RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
   children?: ReactNode | ((context: RadioStateContextValue) => ReactNode);
 };
@@ -37,7 +100,40 @@ declare const Indicator: {
   ({ children, className, ...props }: RadioIndicatorProps): import("react").JSX.Element;
   displayName: string;
 };
+/**
+ * A group of radio list items. Use RadioGroup.ListItem as direct children.
+ */
+declare const List: {
+  ({ className, ref, ...props }: RadioGroupProps$1): import("react").JSX.Element;
+  displayName: string;
+};
+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;
+  displayName: string;
+};
 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;
+  displayName: string;
+};
 /**
  * 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`.
@@ -46,6 +142,29 @@ declare const ItemContent: {
   ({ asChild, children, className, ...props }: RadioItemContentProps): import("react").JSX.Element;
   displayName: string;
 };
+/**
+ * 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;
+  displayName: string;
+};
+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;
+  displayName: string;
+};
 type RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;
 /**
  * A sandbox container for input elements composed within radio group items.
@@ -114,9 +233,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 +250,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 +276,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 +325,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 +368,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 +394,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 +410,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-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};

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};

package/dist/select-SR_9-bxA.js

@@ -0,0 +1 @@
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-CGgMKpJg.js";import{a as r,r as i}from"./validation-Bpptk_9t.js";import{t as a}from"./field-context-BR01g789.js";import{n as o}from"./separator-bpE_kooz.js";import{CaretDownIcon as s}from"@phosphor-icons/react/CaretDown";import{createContext as c,useContext as l,useMemo as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckIcon as p}from"@phosphor-icons/react/Check";import{CaretUpIcon as m}from"@phosphor-icons/react/CaretUp";import*as h from"@radix-ui/react-select";const g=c({}),_=({"aria-invalid":e,children:t,id:n,validation:r,onBlur:i,onValueChange:a,onChange:o,ref:s,...c})=>{let l=u(()=>({"aria-invalid":e,id:n,validation:r,onBlur:i,ref:s}),[e,n,r,i,s]);return d(h.Root,{...c,onValueChange:e=>{o?.(e),a?.(e)},children:d(g.Provider,{value:l,children:t})})};_.displayName=`Select`;const v=({className:e,ref:n,...r})=>d(h.Group,{ref:n,"data-slot":`select-group`,className:t(`space-y-px`,e),...r});v.displayName=`SelectGroup`;const y=h.Value;y.displayName=`SelectValue`;const b=({"aria-invalid":o,className:c,children:u,id:p,ref:m,validation:_,...v})=>{let y=l(g),b=l(a),x=r(),{ariaInvalid:S,validation:C}=i({"aria-invalid":b?b[`aria-invalid`]:y[`aria-invalid`]??o,validation:y.validation??_??x}),w=b?b.id:y.id??p;return f(h.Trigger,{"data-slot":`select-trigger`,className:t(`h-9 text-sm`,`border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,c),"data-validation":C||void 0,id:w,ref:e(m,y.ref),...v,...b?{"aria-describedby":b[`aria-describedby`],"aria-errormessage":b[`aria-errormessage`]}:void 0,"aria-invalid":S,children:[u,d(h.Icon,{asChild:!0,children:d(n,{svg:d(s,{weight:`bold`}),className:`size-4`})})]})};b.displayName=`SelectTrigger`;const x=({className:e,ref:r,...i})=>d(h.ScrollUpButton,{ref:r,className:t(`flex cursor-default items-center justify-center py-1`,e),...i,children:d(n,{svg:d(m,{weight:`bold`}),className:`size-4`})}),S=({className:e,ref:r,...i})=>d(h.ScrollDownButton,{ref:r,className:t(`flex cursor-default items-center justify-center py-1`,e),...i,children:d(n,{svg:d(s,{weight:`bold`}),className:`size-4`})}),C=({className:e,children:n,position:r=`popper`,ref:i,width:a=`trigger`,...o})=>d(h.Portal,{children:f(h.Content,{ref:i,"data-slot":`select-content`,className:t(`border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md`,`bg-popover font-sans`,r===`popper`&&`data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)`,a===`trigger`&&`w-(--radix-select-trigger-width)`,e),position:r,...o,children:[d(x,{}),d(h.Viewport,{className:t(`p-1 space-y-px`,r===`popper`&&`h-(--radix-select-trigger-height) w-full`),children:n}),d(S,{})]})});C.displayName=`SelectContent`;const w=({className:e,ref:n,...r})=>d(h.Label,{ref:n,"data-slot":`select-label`,className:t(`px-2 py-1.5 text-sm font-medium`,e),...r});w.displayName=`SelectLabel`;const T=({className:e,children:r,icon:i,ref:a,...o})=>f(h.Item,{ref:a,"data-slot":`select-item`,className:t(`relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden`,`focus:bg-active-menu-item`,`data-disabled:pointer-events-none data-disabled:opacity-50`,`data-state-checked:bg-selected-menu-item`,`focus:data-state-checked:bg-active-selected-menu-item`,e),...o,children:[i&&d(n,{svg:i}),d(h.ItemText,{children:r}),d(h.ItemIndicator,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:d(n,{svg:d(p,{weight:`bold`}),className:`size-4 text-accent-600`})})]});T.displayName=`SelectItem`;const E=({className:e,ref:n,...r})=>d(o,{ref:n,"data-slot":`select-separator`,className:t(`-mx-1 my-1 h-px w-auto`,e),...r});E.displayName=`SelectSeparator`;const D={Root:_,Content:C,Group:v,Item:T,Label:w,Separator:E,Trigger:b,Value:y};export{D as t};