@ngrok/mantle 0.71.1 → 0.73.0

package/README.md

@@ -72,39 +72,6 @@ const result = await highlighter.highlight({
 });
 ```
 
-## Scaffolding a New Component
-
-If you're contributing a new mantle component and use [Claude Code](https://claude.com/claude-code), run the `/scaffold-component` slash command to scaffold one end-to-end (component files, package.json export, docs page, route, navigation entry, and changeset):
-
-```
-/scaffold-component <component-name>
-```
-
-See [`.claude/commands/scaffold-component.md`](https://github.com/ngrok-oss/mantle/blob/main/.claude/commands/scaffold-component.md) for the full step-by-step reference — it's also useful if you'd rather scaffold by hand.
-
-To validate that an existing component's docs, JSDoc, and scaffold wiring match the conventions (and auto-fix common drift), run `/audit-component`:
-
-```
-/audit-component <component-name>
-```
-
-Omit the name (or pass `all`) to sweep every component. See [`.claude/commands/audit-component.md`](https://github.com/ngrok-oss/mantle/blob/main/.claude/commands/audit-component.md) for the full checklist.
-
-## Git Hooks
-
-Pre-commit hooks run automatically via [husky](https://typicode.github.io/husky/) and [lint-staged](https://github.com/lint-staged/lint-staged). On every commit, staged files are formatted with oxfmt and linted with oxlint.
-
-### Opting Out
-
-If you need to skip the pre-commit hook locally (e.g., WIP commits, rebasing), set the `SKIP_HOOKS` env var:
-
-```bash
-SKIP_HOOKS=1 git commit -m "wip"
-```
-
-> [!NOTE]
-> This is a **local opt-out only**. CI will always run formatting and linting checks against your branch, so any issues will still be caught before merge.
-
 ## Related Packages
 
 | Package                                   | Description                                                                            | Links                                                                                                                                                                            |

package/dist/accordion.d.ts

@@ -1,4 +1,4 @@
-import { n as IconProps } from "./icon-DKMJm20j.js";
+import { n as IconProps } from "./icon-D_BMDi_q.js";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef } from "react";

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.71.1",
+	"version": "0.73.0",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",
@@ -37,6 +37,7 @@
 		"@ngrok/mantle/dialog",
 		"@ngrok/mantle/dropdown-menu",
 		"@ngrok/mantle/empty",
+		"@ngrok/mantle/field",
 		"@ngrok/mantle/flag",
 		"@ngrok/mantle/highlight-utils",
 		"@ngrok/mantle/hooks",

package/dist/alert-dialog.d.ts

@@ -1,7 +1,7 @@
-import { t as SvgAttributes } from "./types-DoV0R5Ja.js";
-import { t as DeepNonNullable } from "./deep-non-nullable-VFm1T3JZ.js";
-import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
-import { t as Root$1 } from "./primitive-tyw4V7Vf.js";
+import { t as SvgAttributes } from "./types-DnghL1WE.js";
+import { t as DeepNonNullable } from "./deep-non-nullable-CT7hWCFG.js";
+import { t as WithAsChild } from "./as-child-C2PttRwz.js";
+import { t as Root$1 } from "./primitive-Ed9cel2r.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -205,7 +205,7 @@ declare const AlertDialog: {
   readonly Action: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
+    priority?: "danger" | "neutral" | "default" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -215,7 +215,7 @@ declare const AlertDialog: {
   }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
+    priority?: "danger" | "neutral" | "default" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -300,7 +300,7 @@ declare const AlertDialog: {
   readonly Cancel: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
+    priority?: "danger" | "neutral" | "default" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -310,7 +310,7 @@ declare const AlertDialog: {
   }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
+    priority?: "danger" | "neutral" | "default" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";

package/dist/alert.d.ts

@@ -1,6 +1,6 @@
-import { t as SvgAttributes } from "./types-DoV0R5Ja.js";
-import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
-import { n as IconButtonProps } from "./icon-button-BnK4K7YK.js";
+import { t as SvgAttributes } from "./types-DnghL1WE.js";
+import { t as WithAsChild } from "./as-child-C2PttRwz.js";
+import { n as IconButtonProps } from "./icon-button-Dty-yfE2.js";
 import * as _$react from "react";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/anchor.d.ts

@@ -1,4 +1,4 @@
-import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
+import { t as WithAsChild } from "./as-child-C2PttRwz.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 

package/dist/{as-child-DQHfEmYB.d.ts → as-child-C2PttRwz.d.ts}

@@ -28,4 +28,4 @@ type WithAsChild = {
  */
 //#endregion
 export { WithAsChild as t };
-//# sourceMappingURL=as-child-DQHfEmYB.d.ts.map
+//# sourceMappingURL=as-child-C2PttRwz.d.ts.map

package/dist/badge.d.ts

@@ -1,5 +1,5 @@
-import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
-import { t as Color } from "./index-DkMUaYsw.js";
+import { t as WithAsChild } from "./as-child-C2PttRwz.js";
+import { t as Color } from "./index-CVk4t5hk.js";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/{button-Bq0x5Pv4.d.ts → button-CoGmk7_d.d.ts}

@@ -1,5 +1,5 @@
-import { t as DeepNonNullable } from "./deep-non-nullable-VFm1T3JZ.js";
-import { t as VariantProps$1 } from "./variant-props-DUmSIQK8.js";
+import { t as DeepNonNullable } from "./deep-non-nullable-CT7hWCFG.js";
+import { t as VariantProps$1 } from "./variant-props-B4io4uA_.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _$class_variance_authority0 from "class-variance-authority";
@@ -9,7 +9,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 declare const buttonVariants: (props?: ({
   appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "default" | "danger" | "neutral" | null | undefined;
+  priority?: "danger" | "neutral" | "default" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonVariants = VariantProps$1<typeof buttonVariants>;
 /**
@@ -93,7 +93,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
 declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
   appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "default" | "danger" | "neutral" | null | undefined;
+  priority?: "danger" | "neutral" | "default" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
   /**
    * An icon to render inside the button. If the `state` is `"pending"`, then
@@ -139,7 +139,7 @@ declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttri
 }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
   appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "default" | "danger" | "neutral" | null | undefined;
+  priority?: "danger" | "neutral" | "default" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
   /**
    * An icon to render inside the button. If the `state` is `"pending"`, then
@@ -172,4 +172,4 @@ declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttri
 }, "ref">) & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-Bq0x5Pv4.d.ts.map
+//# sourceMappingURL=button-CoGmk7_d.d.ts.map

package/dist/button.d.ts

@@ -1,4 +1,4 @@
-import { n as IconButtonProps, t as IconButton } from "./icon-button-BnK4K7YK.js";
-import { n as ButtonProps, t as Button } from "./button-Bq0x5Pv4.js";
-import { n as ButtonGroupProps, t as ButtonGroup } from "./index-DOJUH34Z.js";
+import { n as IconButtonProps, t as IconButton } from "./icon-button-Dty-yfE2.js";
+import { n as ButtonProps, t as Button } from "./button-CoGmk7_d.js";
+import { n as ButtonGroupProps, t as ButtonGroup } from "./index-DIBURJqf.js";
 export { Button, ButtonGroup, ButtonGroupProps, ButtonProps, IconButton, IconButtonProps };

package/dist/card.d.ts

@@ -1,4 +1,4 @@
-import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
+import { t as WithAsChild } from "./as-child-C2PttRwz.js";
 import * as _$react from "react";
 import { ComponentProps, HTMLAttributes } from "react";
 

package/dist/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { o as WithValidation } from "./types-DG0WQLTL.js";
+import { o as WithValidation } from "./validation-DF1z7YDr.js";
 import * as _$react from "react";
 
 //#region src/components/checkbox/checkbox.d.ts

package/dist/checkbox.js

@@ -1,2 +1,2 @@
-import{t as e}from"./compose-refs-DZ3cPi47.js";import{forwardRef as t,useEffect as n,useRef as r,useState as i}from"react";import a from"clsx";import{jsx as o}from"react/jsx-runtime";const s=e=>e===`indeterminate`,c=t(({"aria-invalid":t,className:c,checked:l,defaultChecked:u,defaultValue:d=`on`,onClick:f,readOnly:p,validation:m,...h},g)=>{let _=r(null),[v]=i(u),y=t!=null&&t!==`false`?`error`:typeof m==`function`?m():m,b=t??y===`error`;return n(()=>{_.current&&(_.current.indeterminate=s(l))},[l]),n(()=>{_.current&&(_.current.indeterminate=s(v))},[v]),o(`input`,{"aria-checked":s(l)?`mixed`:l,"aria-invalid":b,"data-slot":`checkbox`,className:a(`border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50`,`bg-center bg-no-repeat focus:outline-hidden`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon`,`indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon`,`data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger`,`where:block where:size-4 where:p-0`,c),checked:s(l)?void 0:l,"data-validation":y||void 0,defaultChecked:s(v)?void 0:v,defaultValue:d,onClick:e=>{if(p){e.preventDefault();return}f?.(e)},readOnly:p,ref:e(_,g),type:`checkbox`,...h})});c.displayName=`Checkbox`;export{c as Checkbox};
+import{t as e}from"./compose-refs-DZ3cPi47.js";import{a as t,r as n}from"./validation-BYME8rWN.js";import{forwardRef as r,useEffect as i,useRef as a,useState as o}from"react";import s from"clsx";import{jsx as c}from"react/jsx-runtime";const l=e=>e===`indeterminate`,u=r(({"aria-invalid":r,className:u,checked:d,defaultChecked:f,defaultValue:p=`on`,onClick:m,readOnly:h,validation:g,..._},v)=>{let y=a(null),[b]=o(f),x=t(),{ariaInvalid:S,validation:C}=n({"aria-invalid":r,validation:g??x});return i(()=>{y.current&&(y.current.indeterminate=l(d))},[d]),i(()=>{y.current&&(y.current.indeterminate=l(b))},[b]),c(`input`,{"aria-checked":l(d)?`mixed`:d,"aria-invalid":S,"data-slot":`checkbox`,className:s(`border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50`,`bg-center bg-no-repeat focus:outline-hidden`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon`,`indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon`,`data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger`,`where:block where:size-4 where:p-0`,u),checked:l(d)?void 0:d,"data-validation":C||void 0,defaultChecked:l(b)?void 0:b,defaultValue:p,onClick:e=>{if(h){e.preventDefault();return}m?.(e)},readOnly:h,ref:e(y,v),type:`checkbox`,..._})});u.displayName=`Checkbox`;export{u as Checkbox};
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["clsx"],"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport type { WithValidation } from \"../input/index.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n *     <Checkbox name=\"terms\" id=\"terms\" />\n *     Accept terms and conditions\n *   </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-slot=\"checkbox\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={isIndeterminate(defaultChecked) ? undefined : defaultChecked}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"uLAUA,MAAM,EAAmB,GACxB,IAAY,gBA8BP,EAAW,GAEf,CACC,eAAgB,EAChB,YACA,QAAS,EACT,eAAgB,EAChB,eAAe,KACf,UACA,WACA,WAAY,EACZ,GAAG,GAEJ,IACI,CACJ,IAAM,EAAW,EAA8B,KAAK,CAC9C,CAAC,GAAkB,EAAS,EAAgB,CAE5C,EADY,GAAgB,MAAQ,IAAiB,QAExD,QACA,OAAO,GAAgB,WACtB,GAAa,CACb,EACE,EAAc,GAAgB,IAAe,QAcnD,OAZA,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,EAAS,GAEzD,CAAC,EAAS,CAAC,CAEd,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,EAAe,GAE/D,CAAC,EAAe,CAAC,CAGnB,EAAC,QAAD,CACC,eAAc,EAAgB,EAAS,CAAG,QAAU,EACpD,eAAc,EACd,YAAU,WACV,UAAWA,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACA,EACA,CACD,QAAS,EAAgB,EAAS,CAAG,IAAA,GAAY,EACjD,kBAAiB,GAAc,IAAA,GAC/B,eAAgB,EAAgB,EAAe,CAAG,IAAA,GAAY,EAChD,eACd,QAAU,GAAU,CACnB,GAAI,EAAU,CACb,EAAM,gBAAgB,CACtB,OAED,IAAU,EAAM,EAEP,WACV,IAAK,EAAY,EAAU,EAAI,CAC/B,KAAK,WACL,GAAI,EACH,CAAA,EAGJ,CACD,EAAS,YAAc"}
+{"version":3,"file":"checkbox.js","names":["clsx"],"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { WithValidation } from \"../field/validation.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n *     <Checkbox name=\"terms\" id=\"terms\" />\n *     Accept terms and conditions\n *   </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst fieldValidation = useFieldValidation();\n\t\tconst { ariaInvalid, validation } = parseValidation({\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tvalidation: _validation ?? fieldValidation,\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-slot=\"checkbox\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={isIndeterminate(defaultChecked) ? undefined : defaultChecked}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"2OAWA,MAAM,EAAmB,GACxB,IAAY,gBA8BP,EAAW,GAEf,CACC,eAAgB,EAChB,YACA,QAAS,EACT,eAAgB,EAChB,eAAe,KACf,UACA,WACA,WAAY,EACZ,GAAG,GAEJ,IACI,CACJ,IAAM,EAAW,EAA8B,KAAK,CAC9C,CAAC,GAAkB,EAAS,EAAgB,CAC5C,EAAkB,GAAoB,CACtC,CAAE,cAAa,cAAe,EAAgB,CACnD,eAAgB,EAChB,WAAY,GAAe,EAC3B,CAAC,CAcF,OAZA,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,EAAS,GAEzD,CAAC,EAAS,CAAC,CAEd,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,EAAe,GAE/D,CAAC,EAAe,CAAC,CAGnB,EAAC,QAAD,CACC,eAAc,EAAgB,EAAS,CAAG,QAAU,EACpD,eAAc,EACd,YAAU,WACV,UAAWA,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACA,EACA,CACD,QAAS,EAAgB,EAAS,CAAG,IAAA,GAAY,EACjD,kBAAiB,GAAc,IAAA,GAC/B,eAAgB,EAAgB,EAAe,CAAG,IAAA,GAAY,EAChD,eACd,QAAU,GAAU,CACnB,GAAI,EAAU,CACb,EAAM,gBAAgB,CACtB,OAED,IAAU,EAAM,EAEP,WACV,IAAK,EAAY,EAAU,EAAI,CAC/B,KAAK,WACL,GAAI,EACH,CAAA,EAGJ,CACD,EAAS,YAAc"}

package/dist/code-block.d.ts

@@ -1,6 +1,6 @@
-import { t as SvgAttributes } from "./types-DoV0R5Ja.js";
-import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
-import { C as Indentation, D as isSupportedLanguage, E as SupportedLanguage, M as LineRange, O as parseLanguage, S as normalizeIndentation, T as isIndentation, _ as MantleCodeBlockValue, a as Mode, c as ResolvedPreRenderedCodeBlockProps, d as parseMetastring, f as resolvePreRenderedCodeBlockProps, g as parseCodeBlockShowLineNumbers, h as parseCodeBlockLineNumberStart, i as MetaInput, j as decorateHighlightedHtml, k as supportedLanguages, l as defaultMeta, m as parseCodeBlockHighlightLines, n as DefaultMeta, o as ResolvePreRenderedCodeBlockPropsInput, p as tokenizeMetastring, r as Meta, s as ResolvePreRenderedCodeBlockPropsResult, t as CodeBlockPreElementInput, u as normalizeValue, v as MantleCodeOptions, w as inferIndentation, x as mantleCode, y as createMantleCodeBlockValue } from "./resolve-pre-rendered-props-CNUnH1fU.js";
+import { t as SvgAttributes } from "./types-DnghL1WE.js";
+import { t as WithAsChild } from "./as-child-C2PttRwz.js";
+import { A as FoldStrategy, B as computeJsonFoldRanges, C as Indentation, D as FoldExplanation, E as ComputeFoldRangesInput, F as isSupportedLanguage, H as finalizeFoldRanges, I as parseLanguage, L as supportedLanguages, M as computeFoldRanges, N as foldStrategyFor, O as FoldLine, P as SupportedLanguage, S as normalizeIndentation, T as isIndentation, U as LineRange, V as FoldableRange, _ as MantleCodeBlockValue, a as Mode, c as ResolvedPreRenderedCodeBlockProps, d as parseMetastring, f as resolvePreRenderedCodeBlockProps, g as parseCodeBlockShowLineNumbers, h as parseCodeBlockLineNumberStart, i as MetaInput, j as FoldToken, k as FoldScope, l as defaultMeta, m as parseCodeBlockHighlightLines, n as DefaultMeta, o as ResolvePreRenderedCodeBlockPropsInput, p as tokenizeMetastring, r as Meta, s as ResolvePreRenderedCodeBlockPropsResult, t as CodeBlockPreElementInput, u as normalizeValue, v as MantleCodeOptions, w as inferIndentation, x as mantleCode, y as createMantleCodeBlockValue, z as decorateHighlightedHtml } from "./resolve-pre-rendered-props-DxvamgE6.js";
 import * as _$react from "react";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -32,16 +32,6 @@ type CodeBlockCodeProps = Omit<ComponentProps<"pre">, "children"> & {
    */
   value: MantleCodeBlockValue;
 };
-type CodeBlockCopyButtonProps = Omit<ComponentProps<"button">, "children" | "type"> & {
-  /**
-   * Callback fired when the copy button is clicked, passes the copied text as an argument.
-   */
-  onCopy?: (value: string) => void;
-  /**
-   * Callback fired when an error occurs during copying.
-   */
-  onCopyError?: (error: unknown) => void;
-};
 type CodeBlockExpanderButtonProps = Omit<ComponentProps<"button">, "children" | "aria-controls" | "aria-expanded"> & WithAsChild;
 type CodeBlockIconProps = Omit<SvgAttributes, "children"> & ({
   /**
@@ -236,7 +226,43 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly CopyButton: _$react.ForwardRefExoticComponent<Omit<CodeBlockCopyButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+  readonly CopyButton: _$react.ForwardRefExoticComponent<(Omit<Omit<_$react.DetailedHTMLProps<_$react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "type"> & {
+    asChild: true;
+    children: ReactNode;
+  } & {
+    /**
+     * The accessible label for the copy button. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.
+     *
+     * @default "Copy code"
+     */
+    label?: string;
+    /**
+     * Callback fired when the copy button is clicked, passes the copied text as an argument.
+     */
+    onCopy?: (value: string) => void;
+    /**
+     * Callback fired when an error occurs during copying.
+     */
+    onCopyError?: (error: unknown) => void;
+  }, "ref"> | Omit<Omit<_$react.DetailedHTMLProps<_$react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "type"> & {
+    asChild?: false | undefined;
+    children?: undefined;
+  } & {
+    /**
+     * The accessible label for the copy button. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.
+     *
+     * @default "Copy code"
+     */
+    label?: string;
+    /**
+     * Callback fired when the copy button is clicked, passes the copied text as an argument.
+     */
+    onCopy?: (value: string) => void;
+    /**
+     * Callback fired when an error occurs during copying.
+     */
+    onCopyError?: (error: unknown) => void;
+  }, "ref">) & _$react.RefAttributes<HTMLButtonElement>>;
   /**
    * The optional expander button for collapsible code blocks.
    *
@@ -423,5 +449,5 @@ declare function escapeHtml(value: string): string;
  */
 declare function hasMoreThanNLines(value: string, maxLines: number): boolean;
 //#endregion
-export { CodeBlock, type CodeBlockPreElementInput, type DefaultMeta, type Indentation, type LineRange, type MantleCodeBlockValue, type MantleCodeOptions, type Meta, type MetaInput, type Mode, type ResolvePreRenderedCodeBlockPropsInput, type ResolvePreRenderedCodeBlockPropsResult, type ResolvedPreRenderedCodeBlockProps, type SupportedLanguage, createMantleCodeBlockValue, decorateHighlightedHtml, defaultMeta, escapeHtml, hasMoreThanNLines, inferIndentation, isIndentation, isSupportedLanguage, mantleCode, normalizeIndentation, normalizeValue, parseCodeBlockHighlightLines, parseCodeBlockLineNumberStart, parseCodeBlockShowLineNumbers, parseLanguage, parseMetastring, resolvePreRenderedCodeBlockProps, supportedLanguages, tokenizeMetastring };
+export { CodeBlock, type CodeBlockPreElementInput, type ComputeFoldRangesInput, type DefaultMeta, type FoldExplanation, type FoldLine, type FoldScope, type FoldStrategy, type FoldToken, type FoldableRange, type Indentation, type LineRange, type MantleCodeBlockValue, type MantleCodeOptions, type Meta, type MetaInput, type Mode, type ResolvePreRenderedCodeBlockPropsInput, type ResolvePreRenderedCodeBlockPropsResult, type ResolvedPreRenderedCodeBlockProps, type SupportedLanguage, computeFoldRanges, computeJsonFoldRanges, createMantleCodeBlockValue, decorateHighlightedHtml, defaultMeta, escapeHtml, finalizeFoldRanges, foldStrategyFor, hasMoreThanNLines, inferIndentation, isIndentation, isSupportedLanguage, mantleCode, normalizeIndentation, normalizeValue, parseCodeBlockHighlightLines, parseCodeBlockLineNumberStart, parseCodeBlockShowLineNumbers, parseLanguage, parseMetastring, resolvePreRenderedCodeBlockProps, supportedLanguages, tokenizeMetastring };
 //# sourceMappingURL=code-block.d.ts.map

package/dist/code-block.js

@@ -1,3 +1,3 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./icon-button-ZKN0sRIJ.js";import{t as i}from"./use-copy-to-clipboard-C7vsjJe-.js";import{t as a}from"./traffic-policy-file-C6LHYrIU.js";import{a as o,c as s,d as c,f as l,g as u,h as d,i as f,l as p,m,n as h,o as g,p as _,r as v,s as y,t as b,u as x,v as S}from"./resolve-pre-rendered-props-C-kiaLHj.js";import{CaretDownIcon as C}from"@phosphor-icons/react/CaretDown";import{createContext as w,forwardRef as T,useCallback as E,useContext as D,useEffect as O,useId as ee,useLayoutEffect as te,useMemo as k,useRef as A,useState as j}from"react";import M from"tiny-invariant";import{jsx as N,jsxs as P}from"react/jsx-runtime";import{CheckIcon as F}from"@phosphor-icons/react/Check";import{CopyIcon as I}from"@phosphor-icons/react/Copy";import{FileTextIcon as L}from"@phosphor-icons/react/FileText";import{TerminalIcon as ne}from"@phosphor-icons/react/Terminal";import{Content as re,List as ie,Root as ae,Trigger as oe}from"@radix-ui/react-tabs";function R(e){let t=-1;for(let n=0;n<e.length;n++){let r=e[n];if(r===`&`||r===`<`||r===`>`||r===`"`||r===`'`){t=n;break}}if(t===-1)return e;let n=e.slice(0,t);for(let r=t;r<e.length;r++){let t=e[r];switch(t){case`&`:n+=`&amp;`;break;case`<`:n+=`&lt;`;break;case`>`:n+=`&gt;`;break;case`"`:n+=`&quot;`;break;case`'`:n+=`&#39;`;break;default:n+=t}}return n}const z=w(null);function B(){let e=D(z);return M(e!=null,`CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.`),e}const V=T(({asChild:t=!1,className:r,defaultTab:i,activeTab:a,onActiveTabChange:o,...s},c)=>{let l=A(``),[u,d]=j(!1),[f,p]=j(!1),[m,h]=j(void 0),g=E(e=>{h(t=>(M(t==null,`You can only render a single CodeBlock.Code within a CodeBlock.`),e))},[]),_=E(e=>{h(t=>{M(t===e,`You can only render a single CodeBlock.Code within a CodeBlock.`)})},[]),v=k(()=>({codeId:m,copyTextRef:l,hasCodeExpander:u,isCodeExpanded:f,registerCodeId:g,setHasCodeExpander:d,setIsCodeExpanded:p,unregisterCodeId:_}),[m,u,f,g,_]),y=i!=null||a!=null,b=N(t?n:`div`,{"data-slot":`code-block`,className:e(`text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-card font-mono`,`[&_svg]:shrink-0`,r),ref:c,...s});return N(z.Provider,{value:v,children:y?N(ae,{asChild:!0,defaultValue:i,value:a,onValueChange:o,children:b}):b})});V.displayName=`CodeBlock`;const H=T(({asChild:t=!1,className:r,...i},a)=>N(t?n:`div`,{"data-slot":`code-block-body`,className:e(`relative`,r),ref:a,...i}));H.displayName=`CodeBlockBody`;const se=/SHIKI_VAL_(\d+)/g;function ce(e){return e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`)}const U=new Map;function le(e){if(e==null||e.length===0)return se;let t=U.get(e);return t??(U.size>=500&&U.clear(),t=RegExp(`${ce(e)}(\\d+)__`,`g`),U.set(e,t)),t}function W(e,t,n,r){if(n==null){if(!e.includes(`SHIKI_VAL_`))return e}else if(!e.includes(n))return e;return e.replaceAll(le(n),(e,n)=>{let i=Number.parseInt(n,10);return Number.isNaN(i)||i<0||i>=t.length?e:r(t[i])})}function ue(e,t,n){return W(e,t,n,e=>R(String(e)))}function de(e,t,n){return W(e,t,n,e=>String(e))}const G=T(({className:t,style:n,tabIndex:r,value:i,...a},o)=>{let s=ee(),{copyTextRef:c,hasCodeExpander:l,isCodeExpanded:u,registerCodeId:d,unregisterCodeId:f}=B(),{language:p,code:m,"~preValToken":h,"~preVals":g,"~highlightLines":_,"~lineNumberStart":v,"~preHtml":y,"~showLineNumbers":b}=i,x=_,S=v??1,C=b??!1,w=k(()=>g!=null&&g.length>0?de(m,g,h):m,[h,g,m]);te(()=>{c.current=w},[c,w]),O(()=>(d(s),()=>{f(s)}),[s,d,f]);let T=k(()=>{if(y!=null)return g!=null&&g.length>0?ue(y,g,h):y},[y,h,g]),E=T!=null,D=T??R(w);return N(`pre`,{"data-slot":`code-block-code`,"aria-expanded":l?u:void 0,className:e(`scrollbar overflow-x-auto overflow-y-hidden py-4`,!E&&`pr-14`,`data-[mantle-line-numbers~='false']:pl-4`,`text-mono m-0 font-mono`,`aria-collapsed:max-h-[13.6rem]`,t),"data-highlighted":E?`true`:`false`,"data-lang":p,"data-mantle-highlight-lines":E&&x!=null&&x.length>0?x.join(`,`):void 0,"data-mantle-line-number-start":E&&C?String(S):`1`,"data-mantle-line-numbers":E&&C?`true`:`false`,id:s,ref:o,style:{...n,"--mantle-line-number-start":String(S),tabSize:2,MozTabSize:2},tabIndex:r??-1,...a,children:N(`code`,{className:`text-size-inherit block min-w-full w-max`,dangerouslySetInnerHTML:{__html:D}})})});G.displayName=`CodeBlockCode`;const K=T(({asChild:t=!1,className:r,...i},a)=>N(t?n:`div`,{"data-slot":`code-block-header`,className:e(`flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700`,r),ref:a,...i}));K.displayName=`CodeBlockHeader`;const q=T(({asChild:t=!1,className:r,...i},a)=>N(t?n:`h3`,{"data-slot":`code-block-title`,ref:a,className:e(`text-mono m-0 font-mono font-normal`,r),...i}));q.displayName=`CodeBlockTitle`;const J=T(({className:e,onCopy:t,onCopyError:n,onClick:a,...o},s)=>{let{copyTextRef:c}=B(),l=i(),[u,d]=j(!1),f=A(void 0);return O(()=>()=>{f.current!=null&&clearTimeout(f.current)},[]),N(`span`,{"data-slot":`code-block-copy-button`,className:`absolute right-3 top-3 z-10 inline-flex size-7 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] bg-card`,children:N(r,{type:`button`,appearance:`ghost`,size:`sm`,label:`Copy code`,icon:N(u?F:I,{}),className:e,ref:s,onClick:async e=>{try{if(a?.(e),e.defaultPrevented){f.current!=null&&clearTimeout(f.current);return}let n=c.current;await l(n),t?.(n),d(!0),f.current!=null&&clearTimeout(f.current),f.current=setTimeout(()=>{d(!1)},2e3)}catch(e){n?.(e)}},...o})})});J.displayName=`CodeBlockCopyButton`;const Y=T(({asChild:r=!1,className:i,onClick:a,...o},s)=>{let{codeId:c,isCodeExpanded:l,setIsCodeExpanded:u,setHasCodeExpander:d}=B();return O(()=>(d(!0),()=>{d(!1)}),[d]),P(r?n:`button`,{...o,"data-slot":`code-block-expander-button`,"aria-controls":c,"aria-expanded":l,className:e(`flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-card px-4 py-2 font-sans text-gray-700 hover:bg-gray-100`,i),ref:s,type:`button`,onClick:e=>{u(e=>!e),a?.(e)},children:[l?`Show less`:`Show more`,` `,N(t,{svg:N(C,{weight:`bold`}),className:e(`size-4`,l&&`rotate-180`,`transition-all duration-150`)})]})});Y.displayName=`CodeBlockExpanderButton`;function X({className:e,preset:n,svg:r,...i}){let o=r;if(n!=null)switch(n){case`file`:o=N(L,{weight:`fill`});break;case`cli`:o=N(ne,{weight:`fill`});break;case`traffic-policy`:o=N(a,{});break}return N(t,{"data-slot":`code-block-icon`,className:e,svg:o,...i})}X.displayName=`CodeBlockIcon`;const Z=T(({className:t,...n},r)=>N(ie,{"data-slot":`code-block-tab-list`,className:e(`flex items-center gap-1`,t),ref:r,...n}));Z.displayName=`CodeBlockTabList`;const Q=T(({className:t,...n},r)=>N(oe,{"data-slot":`code-block-tab-trigger`,className:e(`cursor-pointer rounded px-1.5 py-0.5 text-xs font-medium`,`text-gray-600 outline-hidden`,`hover:text-gray-900`,`data-[state=active]:bg-neutral-500/15 data-[state=active]:text-strong`,`focus-visible:ring-focus-accent focus-visible:ring-4`,t),ref:r,...n}));Q.displayName=`CodeBlockTabTrigger`;const $=T((e,t)=>N(re,{"data-slot":`code-block-tab-content`,ref:t,...e}));$.displayName=`CodeBlockTabContent`;const fe={Root:V,Body:H,Code:G,CopyButton:J,ExpanderButton:Y,Header:K,Icon:X,TabContent:$,TabList:Z,TabTrigger:Q,Title:q};function pe(e,t){let n=1;if(n>t)return!0;for(let r=0;r<e.length;r++)if(e[r]===`
-`&&(n+=1,n>t))return!0;return!1}export{fe as CodeBlock,u as createMantleCodeBlockValue,d as decorateHighlightedHtml,b as defaultMeta,R as escapeHtml,pe as hasMoreThanNLines,_ as inferIndentation,m as isIndentation,p as isSupportedLanguage,S as mantleCode,l as normalizeIndentation,h as normalizeValue,g as parseCodeBlockHighlightLines,y as parseCodeBlockLineNumberStart,s as parseCodeBlockShowLineNumbers,x as parseLanguage,v as parseMetastring,f as resolvePreRenderedCodeBlockProps,c as supportedLanguages,o as tokenizeMetastring};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./icon-button-ZKN0sRIJ.js";import{t as i}from"./compose-refs-DZ3cPi47.js";import{t as a}from"./use-copy-to-clipboard-CTgtLjUg.js";import{t as o}from"./traffic-policy-file-BwHHdhWJ.js";import{S as s,_ as c,a as l,b as u,c as d,d as f,f as p,g as m,h,i as g,l as _,m as v,n as y,o as b,p as x,r as S,s as C,t as w,u as T,v as E,y as D}from"./resolve-pre-rendered-props-BfWe69-w.js";import{CaretDownIcon as O}from"@phosphor-icons/react/CaretDown";import{createContext as k,forwardRef as A,useCallback as j,useContext as ee,useEffect as M,useId as te,useLayoutEffect as ne,useMemo as N,useRef as P,useState as F}from"react";import I from"tiny-invariant";import{jsx as L,jsxs as re}from"react/jsx-runtime";import{CheckIcon as ie}from"@phosphor-icons/react/Check";import{CopyIcon as ae}from"@phosphor-icons/react/Copy";import{FileTextIcon as oe}from"@phosphor-icons/react/FileText";import{TerminalIcon as se}from"@phosphor-icons/react/Terminal";import{Content as ce,List as le,Root as ue,Trigger as de}from"@radix-ui/react-tabs";function R(e){let t=-1;for(let n=0;n<e.length;n++){let r=e[n];if(r===`&`||r===`<`||r===`>`||r===`"`||r===`'`){t=n;break}}if(t===-1)return e;let n=e.slice(0,t);for(let r=t;r<e.length;r++){let t=e[r];switch(t){case`&`:n+=`&amp;`;break;case`<`:n+=`&lt;`;break;case`>`:n+=`&gt;`;break;case`"`:n+=`&quot;`;break;case`'`:n+=`&#39;`;break;default:n+=t}}return n}const z=new WeakMap;function B(e){let t=new Set;if(e==null||e===``)return t;for(let n of e.split(` `))n!==``&&t.add(n);return t}function fe(e){let t=z.get(e);if(t!=null&&he(t))return t;let n=new Map,r=new WeakMap,i=e.querySelectorAll(`[data-fold-regions]`);for(let e=0;e<i.length;e+=1){let t=i[e];if(!(t instanceof HTMLElement))continue;let a=B(t.dataset.foldRegions);if(a.size!==0){r.set(t,a);for(let e of a){let r=n.get(e);r??(r=[],n.set(e,r)),r.push(t)}}}let a={regionToLines:n,lineToRegions:r};return z.set(e,a),a}function pe(e){z.delete(e)}function me(e){pe(e),e.removeAttribute(`data-folded-regions`)}function he(e){for(let t of e.regionToLines.values()){if(t.length===0)continue;let e=t[0];if(e!=null)return e.isConnected}return!0}function ge(e,t,n){let r=!1;for(let e of n)if(t.has(e)){r=!0;break}r?e.dataset.foldHidden=`true`:delete e.dataset.foldHidden}function _e(e){let t=e.dataset.foldLine;if(t==null||t===``)return!1;let n=e.closest(`[data-slot='code-block-code']`)?.querySelector(`code`);if(n==null)return!1;let r=B(n.getAttribute(`data-folded-regions`)),i=!r.has(t);i?r.add(t):r.delete(t),r.size===0?n.removeAttribute(`data-folded-regions`):n.setAttribute(`data-folded-regions`,[...r].join(` `)),e.setAttribute(`aria-expanded`,i?`false`:`true`);let{regionToLines:a,lineToRegions:o}=fe(n),s=a.get(t);if(s!=null)for(let e of s){let t=o.get(e);t!=null&&ge(e,r,t)}return!0}function ve(e){let t=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.mantle-code-fold-toggle`);n instanceof HTMLButtonElement&&_e(n)};return e.addEventListener(`click`,t),()=>{e.removeEventListener(`click`,t)}}const ye=k(null);function V(){let e=ee(ye);return I(e!=null,`CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.`),e}const H=A(({asChild:t=!1,className:r,defaultTab:i,activeTab:a,onActiveTabChange:o,...s},c)=>{let l=P(``),[u,d]=F(!1),[f,p]=F(!1),[m,h]=F(void 0),g=j(e=>{h(t=>(I(t==null,`You can only render a single CodeBlock.Code within a CodeBlock.`),e))},[]),_=j(e=>{h(t=>{I(t===e,`You can only render a single CodeBlock.Code within a CodeBlock.`)})},[]),v=N(()=>({codeId:m,copyTextRef:l,hasCodeExpander:u,isCodeExpanded:f,registerCodeId:g,setHasCodeExpander:d,setIsCodeExpanded:p,unregisterCodeId:_}),[m,u,f,g,_]),y=i!=null||a!=null,b=L(t?n:`div`,{"data-slot":`code-block`,className:e(`text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-card font-mono`,`[&_svg]:shrink-0`,r),ref:c,...s});return L(ye.Provider,{value:v,children:y?L(ue,{asChild:!0,defaultValue:i,value:a,onValueChange:o,children:b}):b})});H.displayName=`CodeBlock`;const U=A(({asChild:t=!1,className:r,...i},a)=>L(t?n:`div`,{"data-slot":`code-block-body`,className:e(`relative`,r),ref:a,...i}));U.displayName=`CodeBlockBody`;const be=/SHIKI_VAL_(\d+)/g;function xe(e){return e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`)}const W=new Map;function Se(e){if(e==null||e.length===0)return be;let t=W.get(e);return t??(W.size>=500&&W.clear(),t=RegExp(`${xe(e)}(\\d+)__`,`g`),W.set(e,t)),t}function G(e,t,n,r){if(n==null){if(!e.includes(`SHIKI_VAL_`))return e}else if(!e.includes(n))return e;return e.replaceAll(Se(n),(e,n)=>{let i=Number.parseInt(n,10);return Number.isNaN(i)||i<0||i>=t.length?e:r(t[i])})}function Ce(e,t,n){return G(e,t,n,e=>R(String(e)))}function we(e,t,n){return G(e,t,n,e=>String(e))}const K=A(({className:t,style:n,value:r,...a},o)=>{let s=te(),c=P(null),{copyTextRef:l,hasCodeExpander:u,isCodeExpanded:d,registerCodeId:f,unregisterCodeId:p}=V(),{language:m,code:h,"~preValToken":g,"~preVals":_,"~highlightLines":v,"~lineNumberStart":y,"~preHtml":b,"~showLineNumbers":x}=r,S=v,C=y??1,w=x??!1,T=N(()=>_!=null&&_.length>0?we(h,_,g):h,[g,_,h]);ne(()=>{l.current=T},[l,T]),M(()=>(f(s),()=>{p(s)}),[s,f,p]);let E=N(()=>{if(b!=null)return _!=null&&_.length>0?Ce(b,_,g):b},[b,g,_]);M(()=>{let e=c.current;if(e==null)return;let t=e.querySelector(`code`);return t!=null&&me(t),ve(e)},[E]);let D=E!=null,O=E??R(T),k=N(()=>({__html:O}),[O]);return L(`pre`,{"data-slot":`code-block-code`,"aria-expanded":u?d:void 0,className:e(`scrollbar overflow-x-auto overflow-y-hidden py-4`,!D&&`pr-14`,`data-[mantle-line-numbers~='false']:pl-4`,`text-mono m-0 font-mono outline-hidden`,`aria-collapsed:max-h-[13.6rem]`,t),"data-highlighted":D?`true`:`false`,"data-lang":m,"data-mantle-highlight-lines":D&&S!=null&&S.length>0?S.join(`,`):void 0,"data-mantle-line-number-start":D&&w?String(C):`1`,"data-mantle-line-numbers":D&&w?`true`:`false`,id:s,ref:i(c,o),style:{...n,"--mantle-line-number-start":String(C),tabSize:2,MozTabSize:2},...a,children:L(`code`,{className:`text-size-inherit block min-w-full w-max`,dangerouslySetInnerHTML:k})})});K.displayName=`CodeBlockCode`;const q=A(({asChild:t=!1,className:r,...i},a)=>L(t?n:`div`,{"data-slot":`code-block-header`,className:e(`flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700`,r),ref:a,...i}));q.displayName=`CodeBlockHeader`;const J=A(({asChild:t=!1,className:r,...i},a)=>L(t?n:`h3`,{"data-slot":`code-block-title`,ref:a,className:e(`text-mono m-0 font-mono font-normal`,r),...i}));J.displayName=`CodeBlockTitle`;const Y=A(({className:e,label:t=`Copy code`,onCopy:n,onCopyError:i,onClick:o,...s},c)=>{let{copyTextRef:l}=V(),u=a(),[d,f]=F(!1),p=P(void 0);return M(()=>()=>{p.current!=null&&clearTimeout(p.current)},[]),L(`span`,{"data-slot":`code-block-copy-button`,className:`absolute right-3 top-3 z-10 inline-flex size-7 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] bg-card`,children:L(r,{type:`button`,appearance:`ghost`,size:`sm`,label:t,icon:L(d?ie:ae,{}),className:e,ref:c,onClick:async e=>{try{if(o?.(e),e.defaultPrevented){p.current!=null&&clearTimeout(p.current);return}let t=l.current;await u(t),n?.(t),f(!0),p.current!=null&&clearTimeout(p.current),p.current=setTimeout(()=>{f(!1)},2e3)}catch(e){i?.(e)}},...s})})});Y.displayName=`CodeBlockCopyButton`;const X=A(({asChild:r=!1,className:i,onClick:a,...o},s)=>{let{codeId:c,isCodeExpanded:l,setIsCodeExpanded:u,setHasCodeExpander:d}=V();return M(()=>(d(!0),()=>{d(!1)}),[d]),re(r?n:`button`,{...o,"data-slot":`code-block-expander-button`,"aria-controls":c,"aria-expanded":l,className:e(`flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-card px-4 py-2 font-sans text-gray-700 hover:bg-gray-100`,i),ref:s,type:`button`,onClick:e=>{u(e=>!e),a?.(e)},children:[l?`Show less`:`Show more`,` `,L(t,{svg:L(O,{weight:`bold`}),className:e(`size-4`,l&&`rotate-180`,`transition-all duration-150`)})]})});X.displayName=`CodeBlockExpanderButton`;function Z({className:e,preset:n,svg:r,...i}){let a=r;if(n!=null)switch(n){case`file`:a=L(oe,{weight:`fill`});break;case`cli`:a=L(se,{weight:`fill`});break;case`traffic-policy`:a=L(o,{});break}return L(t,{"data-slot":`code-block-icon`,className:e,svg:a,...i})}Z.displayName=`CodeBlockIcon`;const Q=A(({className:t,...n},r)=>L(le,{"data-slot":`code-block-tab-list`,className:e(`flex items-center gap-1`,t),ref:r,...n}));Q.displayName=`CodeBlockTabList`;const Te=A(({className:t,...n},r)=>L(de,{"data-slot":`code-block-tab-trigger`,className:e(`cursor-pointer rounded px-1.5 py-0.5 text-xs font-medium`,`text-gray-600 outline-hidden`,`hover:text-gray-900`,`data-[state=active]:bg-neutral-500/15 data-[state=active]:text-strong`,`focus-visible:ring-focus-accent focus-visible:ring-4`,t),ref:r,...n}));Te.displayName=`CodeBlockTabTrigger`;const $=A((e,t)=>L(ce,{"data-slot":`code-block-tab-content`,ref:t,...e}));$.displayName=`CodeBlockTabContent`;const Ee={Root:H,Body:U,Code:K,CopyButton:Y,ExpanderButton:X,Header:q,Icon:Z,TabContent:$,TabList:Q,TabTrigger:Te,Title:J};function De(e,t){let n=1;if(n>t)return!0;for(let r=0;r<e.length;r++)if(e[r]===`
+`&&(n+=1,n>t))return!0;return!1}export{Ee as CodeBlock,h as computeFoldRanges,c as computeJsonFoldRanges,u as createMantleCodeBlockValue,D as decorateHighlightedHtml,w as defaultMeta,R as escapeHtml,E as finalizeFoldRanges,m as foldStrategyFor,De as hasMoreThanNLines,x as inferIndentation,v as isIndentation,_ as isSupportedLanguage,s as mantleCode,p as normalizeIndentation,y as normalizeValue,b as parseCodeBlockHighlightLines,C as parseCodeBlockLineNumberStart,d as parseCodeBlockShowLineNumbers,T as parseLanguage,S as parseMetastring,g as resolvePreRenderedCodeBlockProps,f as supportedLanguages,l as tokenizeMetastring};
 //# sourceMappingURL=code-block.js.map