@ngrok/mantle 0.79.2 → 0.80.0

package/dist/choice-Ct0KK8jw.d.ts

@@ -0,0 +1,269 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as Label } from "./label-C6YH9skg.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/choice/choice.d.ts
+/**
+ * Props for `Choice.Root`. Extends `<div>` props (minus `id`, narrowed below)
+ * with the disabled / id / name controls. Inside a `Field.Control`, the field's
+ * `id` / `name` / `aria-*` take precedence over these.
+ *
+ * @see https://mantle.ngrok.com/components/forms/choice
+ *
+ * @example
+ * ```tsx
+ * <Choice.Root name="notify">
+ *   <Choice.Indicator>
+ *     <Checkbox />
+ *   </Choice.Indicator>
+ *   <Choice.Content>
+ *     <Choice.Label>Email</Choice.Label>
+ *     <Choice.Description>Get notified by email.</Choice.Description>
+ *   </Choice.Content>
+ * </Choice.Root>
+ * ```
+ */
+type ChoiceRootProps = Omit<ComponentProps<"div">, "id"> & {
+  /** Marks the choice disabled — dims the text and is injected onto the control. */
+  disabled?: boolean;
+  /**
+   * Explicit control id. Defaults to a generated id, or — when composed inside a
+   * `Field.Control` — the field's id, so `Field.Label` and `Choice.Label` resolve
+   * to the same control.
+   */
+  id?: string;
+  /** Form value name for the control. Inherited from `Field` when composed within one. */
+  name?: string;
+  /** `Choice.Indicator`, a `Choice.Content` (with `Label` / `Title` + `Description`). */
+  children: ReactNode;
+};
+/**
+ * Root of a `Choice`: the indicator-left / content-right layout for pairing a
+ * checkbox or radio with a titled, multi-line label. Owns the control's `id` and the
+ * description's `id`, and — when rendered inside a `Field.Control` — reads the
+ * field's `id` / `name` / `aria-*` from `FieldControlContext` and merges them
+ * into the props `Indicator` injects onto the control (the field's
+ * `aria-describedby` is concatenated with this `Choice`'s own description id).
+ * Outside a `Field` it falls back to its own generated ids, so the two compose
+ * but neither requires the other.
+ *
+ * @see https://mantle.ngrok.com/components/forms/choice
+ *
+ * @example
+ * ```tsx
+ * <Choice.Root name="notify">
+ *   <Choice.Indicator>
+ *     <Checkbox />
+ *   </Choice.Indicator>
+ *   <Choice.Content>
+ *     <Choice.Label>Email</Choice.Label>
+ *     <Choice.Description>Get notified by email.</Choice.Description>
+ *   </Choice.Content>
+ * </Choice.Root>
+ * ```
+ */
+declare const Root: {
+  ({ "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, children, className, disabled, id, name, ref, ...props }: ChoiceRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+type ChoiceIndicatorProps = ComponentProps<"span">;
+/**
+ * The left control slot of a `Choice` — drop the control here (a `Checkbox`, a
+ * radio indicator, a `Switch`, …). Its single element child is cloned with the
+ * shared `id` / `name` / `aria-*` / `disabled` from `Root`, so a control placed
+ * here is wired to `Choice.Label` and the description without the caller
+ * threading ids. A non-element child (or none) is rendered untouched.
+ *
+ * The slot is one line tall (`h-lh`) using the same `text-sm` line box as the
+ * title, and centers its child — so the control sits centered on the title's
+ * first line and stays put when the title wraps.
+ *
+ * @see https://mantle.ngrok.com/components/forms/choice
+ *
+ * @example
+ * ```tsx
+ * <Choice.Root name="notify">
+ *   <Choice.Indicator>
+ *     <Checkbox />
+ *   </Choice.Indicator>
+ *   <Choice.Content>
+ *     <Choice.Label>Email</Choice.Label>
+ *     <Choice.Description>Get notified by email.</Choice.Description>
+ *   </Choice.Content>
+ * </Choice.Root>
+ * ```
+ */
+declare const Indicator: {
+  ({ children, className, ref, ...props }: ChoiceIndicatorProps): import("react").JSX.Element;
+  displayName: string;
+};
+type ChoiceContentProps = ComponentProps<"div"> & WithAsChild;
+/**
+ * The right column of a `Choice` — stacks a `Choice.Label` / `Choice.Title` over
+ * an optional `Choice.Description`. `min-w-0` so long titles truncate instead of
+ * pushing the row wide.
+ *
+ * @see https://mantle.ngrok.com/components/forms/choice
+ *
+ * @example
+ * ```tsx
+ * <Choice.Root name="notify">
+ *   <Choice.Indicator>
+ *     <Checkbox />
+ *   </Choice.Indicator>
+ *   <Choice.Content>
+ *     <Choice.Label>Email</Choice.Label>
+ *     <Choice.Description>Get notified by email.</Choice.Description>
+ *   </Choice.Content>
+ * </Choice.Root>
+ * ```
+ */
+declare const Content: {
+  ({ asChild, className, ref, ...props }: ChoiceContentProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * Props for `Choice.Label`. The mantle `Label` props, minus `htmlFor` and
+ * `disabled` — those are owned by `Choice.Root` (the control id and the choice's
+ * disabled state) and are not part of the public surface, so consumer props can
+ * never override the label-to-control wiring.
+ */
+type ChoiceLabelProps = Omit<ComponentProps<typeof Label>, "htmlFor" | "disabled">;
+/**
+ * The emphasized title of a `Choice`, rendered as a real `<label>` wired to the
+ * control by `htmlFor`, so clicking it toggles the control and it supplies the
+ * control's accessible name. Use this when the `Choice` owns the labeling (a
+ * standalone checkbox, a raw `<form>`, React-state-only).
+ *
+ * It is the mantle {@link Label} (not a re-implementation), so it keeps every
+ * base-label behavior — cursor, the double-click text-selection guard, and the
+ * auto `font-medium` — and mirrors how `Field.Label` reuses `Label`. When an
+ * ancestor already owns the labeling and click target (a fully-clickable list
+ * row or a Headless radio item), use `Choice.Title` instead — a label-less `<p>`
+ * (it accepts `asChild`) — so labels never nest or compete.
+ *
+ * @see https://mantle.ngrok.com/components/forms/choice
+ *
+ * @example
+ * ```tsx
+ * <Choice.Root name="notify">
+ *   <Choice.Indicator>
+ *     <Checkbox />
+ *   </Choice.Indicator>
+ *   <Choice.Content>
+ *     <Choice.Label>Email</Choice.Label>
+ *     <Choice.Description>Get notified by email.</Choice.Description>
+ *   </Choice.Content>
+ * </Choice.Root>
+ * ```
+ */
+declare const ChoiceLabel: ({ className, ref, ...props }: ChoiceLabelProps) => import("react").JSX.Element;
+/**
+ * The emphasized title of a `Choice`, label-styled but **not** a `<label>` —
+ * renders a `<p>`. Mirrors `Field.LabelText`. Use this when something else owns
+ * the control's labeling and click target: a fully-clickable list row or a
+ * Headless radio item. It avoids nesting two `<label>`s or splitting
+ * the click target. Pass `asChild` to supply your own element. For a standalone
+ * control — or inside a `Field` — where the title can be the label, use
+ * `Choice.Label`.
+ *
+ * @see https://mantle.ngrok.com/components/forms/choice
+ *
+ * @example
+ * ```tsx
+ * <Choice.Root id="onboarding-key">
+ *   <Choice.Indicator>
+ *     <Checkbox />
+ *   </Choice.Indicator>
+ *   <Choice.Content>
+ *     <Choice.Title>Onboarding Key</Choice.Title>
+ *     <Choice.Description>ng-3FaThZL***8xiA</Choice.Description>
+ *   </Choice.Content>
+ * </Choice.Root>
+ * ```
+ */
+declare const Title: {
+  ({ asChild, className, ref, ...props }: ComponentProps<"p"> & WithAsChild): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The de-emphasized supplementary line of a `Choice`, in the muted body color
+ * and wired to the control via `aria-describedby` (never a second label).
+ * Renders a `<p>`; pass `asChild` to supply your own element.
+ *
+ * @see https://mantle.ngrok.com/components/forms/choice
+ *
+ * @example
+ * ```tsx
+ * <Choice.Root name="notify">
+ *   <Choice.Indicator>
+ *     <Checkbox />
+ *   </Choice.Indicator>
+ *   <Choice.Content>
+ *     <Choice.Label>Email</Choice.Label>
+ *     <Choice.Description>Get notified by email.</Choice.Description>
+ *   </Choice.Content>
+ * </Choice.Root>
+ * ```
+ */
+declare const Description: {
+  ({ asChild, className, ref, ...props }: ComponentProps<"p"> & WithAsChild): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * A reusable indicator-left / content-right layout for a single choice: a
+ * control (checkbox, radio, switch) beside an emphasized title and an optional
+ * de-emphasized description. Use it to pair a checkbox or radio with a rich,
+ * titled label, or reach for it directly to build your own choice-like rows.
+ *
+ * It is a pure layout + association primitive: it owns the control's `id` and
+ * the description's `id` and wires them together, but does **not** own the
+ * control's value — drop your own control into `Choice.Indicator`. Pick
+ * `Choice.Label` (a real `<label>`) when the `Choice` owns the labeling, or
+ * `Choice.Title` (label-less text) when an ancestor (a clickable row or a
+ * Headless radio item) already does.
+ *
+ * **Use it for choice-like layouts** — a checkbox or radio input that needs an
+ * associated label and an optional supplementary description. It is not a
+ * general-purpose layout primitive; for laying out non-control content, reach
+ * for a plain flex/grid or `MediaObject` instead.
+ *
+ * **Field interop.** Inside a `Field.Control`, `Choice.Root` reads the field's
+ * `id` / `name` / `aria-*` and merges its description into the control's
+ * `aria-describedby`. Outside a `Field` it uses its own generated ids — the two
+ * are aware of each other but neither is required.
+ *
+ * @see https://mantle.ngrok.com/components/forms/choice
+ *
+ * @example
+ * Composition:
+ * ```
+ * Choice.Root
+ * ├── Choice.Indicator
+ * └── Choice.Content
+ *     ├── Choice.Label        (or Choice.Title — pick one)
+ *     └── Choice.Description
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Choice.Root name="notify">
+ *   <Choice.Indicator>
+ *     <Checkbox />
+ *   </Choice.Indicator>
+ *   <Choice.Content>
+ *     <Choice.Label>Email</Choice.Label>
+ *     <Choice.Description>Get notified by email.</Choice.Description>
+ *   </Choice.Content>
+ * </Choice.Root>
+ * ```
+ */
+declare const Choice: {
+  Root: typeof Root;
+  Indicator: typeof Indicator;
+  Content: typeof Content;
+  Label: typeof ChoiceLabel;
+  Title: typeof Title;
+  Description: typeof Description;
+};
+//#endregion
+export { ChoiceRootProps as n, Choice as t };

package/dist/choice.d.ts

@@ -1,253 +1,2 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import { t as Label } from "./label-v2-bv98k.js";
-import { ComponentProps, ReactNode } from "react";
-//#region src/components/choice/choice.d.ts
-/**
- * Props for `Choice.Root`. Extends `<div>` props (minus `id`, narrowed below)
- * with the disabled / id / name controls. Inside a `Field.Control`, the field's
- * `id` / `name` / `aria-*` take precedence over these.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-type ChoiceRootProps = Omit<ComponentProps<"div">, "id"> & {
-  /** Marks the choice disabled — dims the text and is injected onto the control. */
-  disabled?: boolean;
-  /**
-   * Explicit control id. Defaults to a generated id, or — when composed inside a
-   * `Field.Control` — the field's id, so `Field.Label` and `Choice.Label` resolve
-   * to the same control.
-   */
-  id?: string;
-  /** Form value name for the control. Inherited from `Field` when composed within one. */
-  name?: string;
-  /** `Choice.Indicator`, a `Choice.Content` (with `Label` / `Title` + `Description`). */
-  children: ReactNode;
-};
-/**
- * Root of a `Choice`: the indicator-left / content-right layout for pairing a
- * checkbox or radio with a titled, multi-line label. Owns the control's `id` and the
- * description's `id`, and — when rendered inside a `Field.Control` — reads the
- * field's `id` / `name` / `aria-*` from `FieldControlContext` and merges them
- * into the props `Indicator` injects onto the control (the field's
- * `aria-describedby` is concatenated with this `Choice`'s own description id).
- * Outside a `Field` it falls back to its own generated ids, so the two compose
- * but neither requires the other.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Root: import("react").ForwardRefExoticComponent<Omit<ChoiceRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/**
- * The left control slot of a `Choice` — drop the control here (a `Checkbox`, a
- * radio indicator, a `Switch`, …). Its single element child is cloned with the
- * shared `id` / `name` / `aria-*` / `disabled` from `Root`, so a control placed
- * here is wired to `Choice.Label` and the description without the caller
- * threading ids. A non-element child (or none) is rendered untouched.
- *
- * The slot is one line tall (`h-lh`) using the same `text-sm` line box as the
- * title, and centers its child — so the control sits centered on the title's
- * first line and stays put when the title wraps.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Indicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-type ChoiceContentProps = ComponentProps<"div"> & WithAsChild;
-/**
- * The right column of a `Choice` — stacks a `Choice.Label` / `Choice.Title` over
- * an optional `Choice.Description`. `min-w-0` so long titles truncate instead of
- * pushing the row wide.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Content: import("react").ForwardRefExoticComponent<Omit<ChoiceContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/**
- * Props for `Choice.Label`. The mantle `Label` props, minus `htmlFor` and
- * `disabled` — those are owned by `Choice.Root` (the control id and the choice's
- * disabled state) and are not part of the public surface, so consumer props can
- * never override the label-to-control wiring.
- */
-type ChoiceLabelProps = Omit<ComponentProps<typeof Label>, "htmlFor" | "disabled">;
-/**
- * The emphasized title of a `Choice`, rendered as a real `<label>` wired to the
- * control by `htmlFor`, so clicking it toggles the control and it supplies the
- * control's accessible name. Use this when the `Choice` owns the labeling (a
- * standalone checkbox, a raw `<form>`, React-state-only).
- *
- * It is the mantle {@link Label} (not a re-implementation), so it keeps every
- * base-label behavior — cursor, the double-click text-selection guard, and the
- * auto `font-medium` — and mirrors how `Field.Label` reuses `Label`. When an
- * ancestor already owns the labeling and click target (a fully-clickable list
- * row or a Headless radio item), use `Choice.Title` instead — a label-less `<p>`
- * (it accepts `asChild`) — so labels never nest or compete.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const ChoiceLabel: import("react").ForwardRefExoticComponent<Omit<ChoiceLabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-/**
- * The emphasized title of a `Choice`, label-styled but **not** a `<label>` —
- * renders a `<p>`. Mirrors `Field.LabelText`. Use this when something else owns
- * the control's labeling and click target: a fully-clickable list row or a
- * Headless radio item. It avoids nesting two `<label>`s or splitting
- * the click target. Pass `asChild` to supply your own element. For a standalone
- * control — or inside a `Field` — where the title can be the label, use
- * `Choice.Label`.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root id="onboarding-key">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Title>Onboarding Key</Choice.Title>
- *     <Choice.Description>ng-3FaThZL***8xiA</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Title: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-/**
- * The de-emphasized supplementary line of a `Choice`, in the muted body color
- * and wired to the control via `aria-describedby` (never a second label).
- * Renders a `<p>`; pass `asChild` to supply your own element.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-/**
- * A reusable indicator-left / content-right layout for a single choice: a
- * control (checkbox, radio, switch) beside an emphasized title and an optional
- * de-emphasized description. Use it to pair a checkbox or radio with a rich,
- * titled label, or reach for it directly to build your own choice-like rows.
- *
- * It is a pure layout + association primitive: it owns the control's `id` and
- * the description's `id` and wires them together, but does **not** own the
- * control's value — drop your own control into `Choice.Indicator`. Pick
- * `Choice.Label` (a real `<label>`) when the `Choice` owns the labeling, or
- * `Choice.Title` (label-less text) when an ancestor (a clickable row or a
- * Headless radio item) already does.
- *
- * **Use it for choice-like layouts** — a checkbox or radio input that needs an
- * associated label and an optional supplementary description. It is not a
- * general-purpose layout primitive; for laying out non-control content, reach
- * for a plain flex/grid or `MediaObject` instead.
- *
- * **Field interop.** Inside a `Field.Control`, `Choice.Root` reads the field's
- * `id` / `name` / `aria-*` and merges its description into the control's
- * `aria-describedby`. Outside a `Field` it uses its own generated ids — the two
- * are aware of each other but neither is required.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * Composition:
- * ```
- * Choice.Root
- * ├── Choice.Indicator
- * └── Choice.Content
- *     ├── Choice.Label        (or Choice.Title — pick one)
- *     └── Choice.Description
- * ```
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Choice: {
-  Root: typeof Root;
-  Indicator: typeof Indicator;
-  Content: typeof Content;
-  Label: typeof ChoiceLabel;
-  Title: typeof Title;
-  Description: typeof Description;
-};
-//#endregion
+import { n as ChoiceRootProps, t as Choice } from "./choice-Ct0KK8jw.js";
 export { Choice, type ChoiceRootProps };

package/dist/choice.js

@@ -1 +1 @@
-import{t as e}from"./choice-DOdyNzFC.js";export{e as Choice};
+import{t as e}from"./choice-Cc8dA5r8.js";export{e as Choice};