@ngrok/mantle 0.76.11 → 0.77.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/agent.json +4 -1
- package/dist/alert-dialog.js +1 -1
- package/dist/browser-only-CPH56Xw_.js +1 -0
- package/dist/browser-only.js +1 -1
- package/dist/checkbox-Apow0ipK.js +1 -0
- package/dist/checkbox.d.ts +4 -0
- package/dist/checkbox.js +1 -1
- package/dist/choice-D6S38dPs.js +1 -0
- package/dist/choice.d.ts +251 -0
- package/dist/choice.js +1 -0
- package/dist/code-block.js +1 -1
- package/dist/command.js +1 -1
- package/dist/{copy-to-clipboard-Baw30q9O.js → copy-to-clipboard-BsCQ9m6K.js} +1 -1
- package/dist/{dialog-Cp0S2jsG.js → dialog-uyJcNks7.js} +1 -1
- package/dist/dialog.js +1 -1
- package/dist/field.js +1 -1
- package/dist/hooks.d.ts +127 -67
- package/dist/hooks.js +1 -1
- package/dist/icons.js +1 -1
- package/dist/{in-view-BC3wmz-a.d.ts → in-view-bItE1fkG.d.ts} +20 -4
- package/dist/input-B3TS9yAP.js +1 -0
- package/dist/input.d.ts +1 -46
- package/dist/input.js +1 -1
- package/dist/label-PY0qM0G5.d.ts +69 -0
- package/dist/label.d.ts +1 -68
- package/dist/list.d.ts +337 -0
- package/dist/list.js +1 -0
- package/dist/llms.txt +4 -1
- package/dist/multi-select.js +1 -1
- package/dist/pagination.js +1 -1
- package/dist/{primitive-BFUir4UB.js → primitive-BuVqb6zf.js} +1 -1
- package/dist/{select-xfyY5Vt1.js → select-Bxq_N-_o.js} +1 -1
- package/dist/select.js +1 -1
- package/dist/selectable-list.d.ts +711 -0
- package/dist/selectable-list.js +1 -0
- package/dist/sheet.js +1 -1
- package/dist/switch.d.ts +4 -0
- package/dist/tabs.js +1 -1
- package/dist/{theme-provider-BNFS3Acf.js → theme-provider-C5XYi2-H.js} +1 -1
- package/dist/theme.d.ts +3 -3
- package/dist/theme.js +1 -1
- package/dist/{toast-Bwno5LUs.js → toast-CZBWjXcP.js} +1 -1
- package/dist/toast.js +1 -1
- package/dist/types-CTam1uIW.d.ts +47 -0
- package/dist/use-copy-to-clipboard-DqQ0_N3E.js +1 -0
- package/dist/{use-prefers-reduced-motion-CWIoFA6W.js → use-prefers-reduced-motion-DBqNw1wB.js} +1 -1
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +1 -1
- package/dist/virtual-PBNiHjMK.js +1 -0
- package/package.json +64 -332
- package/dist/browser-only-BSl_hruR.js +0 -1
- package/dist/use-copy-to-clipboard-BLpquU9d.js +0 -1
package/dist/agent.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ngrok/mantle",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.77.0",
|
|
4
4
|
"origin": "https://mantle.ngrok.com",
|
|
5
5
|
"endpoints": {
|
|
6
6
|
"docs": "https://mantle.ngrok.com/",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"@ngrok/mantle/calendar",
|
|
27
27
|
"@ngrok/mantle/card",
|
|
28
28
|
"@ngrok/mantle/checkbox",
|
|
29
|
+
"@ngrok/mantle/choice",
|
|
29
30
|
"@ngrok/mantle/code",
|
|
30
31
|
"@ngrok/mantle/code-block",
|
|
31
32
|
"@ngrok/mantle/color",
|
|
@@ -47,6 +48,7 @@
|
|
|
47
48
|
"@ngrok/mantle/input",
|
|
48
49
|
"@ngrok/mantle/kbd",
|
|
49
50
|
"@ngrok/mantle/label",
|
|
51
|
+
"@ngrok/mantle/list",
|
|
50
52
|
"@ngrok/mantle/main",
|
|
51
53
|
"@ngrok/mantle/media-object",
|
|
52
54
|
"@ngrok/mantle/multi-select",
|
|
@@ -58,6 +60,7 @@
|
|
|
58
60
|
"@ngrok/mantle/radio-group",
|
|
59
61
|
"@ngrok/mantle/sandboxed-on-click",
|
|
60
62
|
"@ngrok/mantle/select",
|
|
63
|
+
"@ngrok/mantle/selectable-list",
|
|
61
64
|
"@ngrok/mantle/separator",
|
|
62
65
|
"@ngrok/mantle/sheet",
|
|
63
66
|
"@ngrok/mantle/skeleton",
|
package/dist/alert-dialog.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-C1UYP5We.js";import{t}from"./svg-only-CSOaF1tL.js";import{t as n}from"./slot-DT_E5BQx.js";import{t as r}from"./button-C9GW9nAr.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-
|
|
1
|
+
import{t as e}from"./cx-C1UYP5We.js";import{t}from"./svg-only-CSOaF1tL.js";import{t as n}from"./slot-DT_E5BQx.js";import{t as r}from"./button-C9GW9nAr.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-BuVqb6zf.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({priority:e,...t}){let n=h(()=>({priority:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=p(({...e},t)=>_(a,{ref:t,"data-slot":`alert-dialog-trigger`,...e}));w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(o,{"data-slot":`alert-dialog-overlay`,className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:i,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`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`,n,t),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-footer`,className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N=p(({appearance:e=`filled`,...t},n)=>{let i=S(),a=`default`;return i.priority===`danger`&&(a=`danger`),_(r,{appearance:e,"data-slot":`alert-dialog-action`,priority:a,ref:n,...t})});N.displayName=`AlertDialogAction`;const P=p(({appearance:t=`outlined`,className:n,priority:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),priority:i,ref:o,...a})}));P.displayName=`AlertDialogCancel`;const F=p(({className:n,svg:r,...i},a)=>{let o=S(),s=o.priority===`danger`?`text-danger-600`:`text-accent-600`,c=o.priority===`danger`?_(b,{}):_(y,{});return _(t,{ref:a,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});F.displayName=`AlertDialogIcon`;const I=p(({...e},t)=>_(d,{ref:t,"data-slot":`alert-dialog-close`,...e}));I.displayName=`AlertDialogClose`;const L={Root:C,Action:N,Body:O,Cancel:P,Close:I,Content:D,Description:M,Footer:A,Header:k,Icon:F,Title:j,Trigger:w};export{L as AlertDialog};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useSyncExternalStore as e}from"react";function t(){return()=>{}}function n(){return!0}function r(){return!1}function i(){return e(t,n,r)}function a({children:e,fallback:t=null}){return i()?e():t}function o(){return typeof window<`u`&&typeof document<`u`}export{o as n,i as r,a as t};
|
package/dist/browser-only.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{n as e,t}from"./browser-only-
|
|
1
|
+
import{n as e,t}from"./browser-only-CPH56Xw_.js";export{t as BrowserOnly,e as canUseDOM};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./clsx-DUGZgXfJ.js";import{a as n,r}from"./validation-DCyx-ceH.js";import{forwardRef as i,useEffect as a,useRef as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";const l=e=>e===`indeterminate`,u=i(({"aria-invalid":i,className:u,checked:d,defaultChecked:f,defaultValue:p=`on`,onClick:m,readOnly:h,validation:g,..._},v)=>{let y=o(null),[b]=s(f),x=n(),{ariaInvalid:S,validation:C}=r({"aria-invalid":i,validation:g??x}),w=d??b;a(()=>{y.current&&(y.current.indeterminate=l(w))},[w]);let T=d==null?{defaultChecked:l(b)?void 0:b}:{checked:l(d)?!1:d};return c(`input`,{"aria-checked":l(d)?`mixed`:d,"aria-invalid":S,"data-slot":`checkbox`,className:t(`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),...T,"data-validation":C||void 0,defaultValue:p,onClick:e=>{if(h){e.preventDefault();return}m?.(e)},readOnly:h,ref:e(y,v),type:`checkbox`,..._})});u.displayName=`Checkbox`;function d({allSelected:e,someSelected:t}){return e?!0:t?`indeterminate`:!1}export{d as n,u as t};
|
package/dist/checkbox.d.ts
CHANGED
|
@@ -6,6 +6,10 @@ type CheckedState = boolean | "indeterminate";
|
|
|
6
6
|
* A form control that allows the user to toggle between checked and not checked.
|
|
7
7
|
* Supports indeterminate state.
|
|
8
8
|
*
|
|
9
|
+
* Pair it with a [`Label`](/components/label) for a single-line caption, or
|
|
10
|
+
* compose it inside [`Choice`](/components/choice) for a titled, multi-line
|
|
11
|
+
* label with a supplementary description.
|
|
12
|
+
*
|
|
9
13
|
* @see https://mantle.ngrok.com/components/checkbox
|
|
10
14
|
*
|
|
11
15
|
* @example
|
package/dist/checkbox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{n as e,t}from"./checkbox-Apow0ipK.js";export{t as Checkbox,e as selectAllChecked};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{t as n}from"./field-context-4k1kI7Bo.js";import{t as r}from"./label-BLXfnQmn.js";import{cloneElement as i,createContext as a,forwardRef as o,isValidElement as s,useContext as c,useId as l,useMemo as u}from"react";import d from"tiny-invariant";import{jsx as f}from"react/jsx-runtime";const p=a(null);function m(e){let t=c(p);return d(t,`Choice.${e} must be rendered inside Choice.Root.`),t}const h=o(({"aria-describedby":t,"aria-errormessage":r,"aria-invalid":i,children:a,className:o,disabled:s=!1,id:d,name:m,...h},g)=>{let _=c(n),v=_?.id,y=_?.name,b=_?.[`aria-describedby`],x=_?.[`aria-invalid`],S=_?.[`aria-errormessage`],C=l(),w=l(),T=v??d??C,E=[b??t,w].filter(Boolean).join(` `)||void 0,D=u(()=>({controlId:T,descriptionId:w,disabled:s,controlProps:{id:T,name:y??m,disabled:s,"aria-describedby":E,"aria-invalid":x??i,"aria-errormessage":S??r}}),[T,w,s,E,y,m,x,i,S,r]);return f(p.Provider,{value:D,children:f(`div`,{ref:g,"data-slot":`choice`,className:e(`flex w-full items-start gap-2`,o),...h,children:a})})});h.displayName=`Choice`;const g=o(({children:t,className:n,...r},a)=>{let{controlProps:o}=m(`Indicator`),c=s(t)?i(t,{...o,disabled:o.disabled||t.props.disabled===!0,name:o.name??t.props.name,"aria-invalid":o[`aria-invalid`]??t.props[`aria-invalid`],"aria-errormessage":o[`aria-errormessage`]??t.props[`aria-errormessage`]}):t;return f(`span`,{ref:a,"data-slot":`choice-indicator`,className:e(`flex h-lh shrink-0 items-center text-sm`,n),...r,children:c})});g.displayName=`ChoiceIndicator`;const _=o(({asChild:n,className:r,...i},a)=>f(n?t:`div`,{ref:a,"data-slot":`choice-content`,className:e(`flex min-w-0 flex-1 flex-col gap-0.5`,r),...i}));_.displayName=`ChoiceContent`;const v=o(({className:t,...n},i)=>{let{controlId:a,disabled:o}=m(`Label`);return f(r,{ref:i,"data-slot":`choice-label`,className:e(o&&`opacity-50`,t),...n,htmlFor:a,disabled:o})});v.displayName=`ChoiceLabel`;const y=o(({asChild:n,className:r,...i},a)=>{let{disabled:o}=m(`Title`);return f(n?t:`p`,{ref:a,"data-slot":`choice-title`,className:e(`text-strong text-sm font-medium font-sans`,o&&`opacity-50`,r),...i})});y.displayName=`ChoiceTitle`;const b=o(({asChild:n,className:r,...i},a)=>{let{descriptionId:o,disabled:s}=m(`Description`);return f(n?t:`p`,{ref:a,id:o,"data-slot":`choice-description`,className:e(`text-body text-sm leading-4`,s&&`opacity-50`,r),...i})});b.displayName=`ChoiceDescription`;const x={Root:h,Indicator:g,Content:_,Label:v,Title:y,Description:b};export{x as t};
|
package/dist/choice.d.ts
ADDED
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
import { t as WithAsChild } from "./as-child-uN_018tj.js";
|
|
2
|
+
import { t as Label } from "./label-PY0qM0G5.js";
|
|
3
|
+
import { ComponentProps, ReactNode } from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/choice/choice.d.ts
|
|
6
|
+
/**
|
|
7
|
+
* Props for `Choice.Root`. Extends `<div>` props (minus `id`, narrowed below)
|
|
8
|
+
* with the disabled / id / name controls. Inside a `Field.Control`, the field's
|
|
9
|
+
* `id` / `name` / `aria-*` take precedence over these.
|
|
10
|
+
*
|
|
11
|
+
* @see https://mantle.ngrok.com/components/choice
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Choice.Root name="notify">
|
|
16
|
+
* <Choice.Indicator>
|
|
17
|
+
* <Checkbox />
|
|
18
|
+
* </Choice.Indicator>
|
|
19
|
+
* <Choice.Content>
|
|
20
|
+
* <Choice.Label>Email</Choice.Label>
|
|
21
|
+
* <Choice.Description>Get notified by email.</Choice.Description>
|
|
22
|
+
* </Choice.Content>
|
|
23
|
+
* </Choice.Root>
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
type ChoiceRootProps = Omit<ComponentProps<"div">, "id"> & {
|
|
27
|
+
/** Marks the choice disabled — dims the text and is injected onto the control. */disabled?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Explicit control id. Defaults to a generated id, or — when composed inside a
|
|
30
|
+
* `Field.Control` — the field's id, so `Field.Label` and `Choice.Label` resolve
|
|
31
|
+
* to the same control.
|
|
32
|
+
*/
|
|
33
|
+
id?: string; /** Form value name for the control. Inherited from `Field` when composed within one. */
|
|
34
|
+
name?: string; /** `Choice.Indicator`, a `Choice.Content` (with `Label` / `Title` + `Description`). */
|
|
35
|
+
children: ReactNode;
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* Root of a `Choice`: the indicator-left / content-right layout for pairing a
|
|
39
|
+
* checkbox or radio with a titled, multi-line label. Owns the control's `id` and the
|
|
40
|
+
* description's `id`, and — when rendered inside a `Field.Control` — reads the
|
|
41
|
+
* field's `id` / `name` / `aria-*` from `FieldControlContext` and merges them
|
|
42
|
+
* into the props `Indicator` injects onto the control (the field's
|
|
43
|
+
* `aria-describedby` is concatenated with this `Choice`'s own description id).
|
|
44
|
+
* Outside a `Field` it falls back to its own generated ids, so the two compose
|
|
45
|
+
* but neither requires the other.
|
|
46
|
+
*
|
|
47
|
+
* @see https://mantle.ngrok.com/components/choice
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```tsx
|
|
51
|
+
* <Choice.Root name="notify">
|
|
52
|
+
* <Choice.Indicator>
|
|
53
|
+
* <Checkbox />
|
|
54
|
+
* </Choice.Indicator>
|
|
55
|
+
* <Choice.Content>
|
|
56
|
+
* <Choice.Label>Email</Choice.Label>
|
|
57
|
+
* <Choice.Description>Get notified by email.</Choice.Description>
|
|
58
|
+
* </Choice.Content>
|
|
59
|
+
* </Choice.Root>
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
declare const Root: import("react").ForwardRefExoticComponent<Omit<ChoiceRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
63
|
+
/**
|
|
64
|
+
* The left control slot of a `Choice` — drop the control here (a `Checkbox`, a
|
|
65
|
+
* radio indicator, a `Switch`, …). Its single element child is cloned with the
|
|
66
|
+
* shared `id` / `name` / `aria-*` / `disabled` from `Root`, so a control placed
|
|
67
|
+
* here is wired to `Choice.Label` and the description without the caller
|
|
68
|
+
* threading ids. A non-element child (or none) is rendered untouched.
|
|
69
|
+
*
|
|
70
|
+
* The slot is one line tall (`h-lh`) using the same `text-sm` line box as the
|
|
71
|
+
* title, and centers its child — so the control sits centered on the title's
|
|
72
|
+
* first line and stays put when the title wraps.
|
|
73
|
+
*
|
|
74
|
+
* @see https://mantle.ngrok.com/components/choice
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* ```tsx
|
|
78
|
+
* <Choice.Root name="notify">
|
|
79
|
+
* <Choice.Indicator>
|
|
80
|
+
* <Checkbox />
|
|
81
|
+
* </Choice.Indicator>
|
|
82
|
+
* <Choice.Content>
|
|
83
|
+
* <Choice.Label>Email</Choice.Label>
|
|
84
|
+
* <Choice.Description>Get notified by email.</Choice.Description>
|
|
85
|
+
* </Choice.Content>
|
|
86
|
+
* </Choice.Root>
|
|
87
|
+
* ```
|
|
88
|
+
*/
|
|
89
|
+
declare const Indicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
90
|
+
type ChoiceContentProps = ComponentProps<"div"> & WithAsChild;
|
|
91
|
+
/**
|
|
92
|
+
* The right column of a `Choice` — stacks a `Choice.Label` / `Choice.Title` over
|
|
93
|
+
* an optional `Choice.Description`. `min-w-0` so long titles truncate instead of
|
|
94
|
+
* pushing the row wide.
|
|
95
|
+
*
|
|
96
|
+
* @see https://mantle.ngrok.com/components/choice
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* ```tsx
|
|
100
|
+
* <Choice.Root name="notify">
|
|
101
|
+
* <Choice.Indicator>
|
|
102
|
+
* <Checkbox />
|
|
103
|
+
* </Choice.Indicator>
|
|
104
|
+
* <Choice.Content>
|
|
105
|
+
* <Choice.Label>Email</Choice.Label>
|
|
106
|
+
* <Choice.Description>Get notified by email.</Choice.Description>
|
|
107
|
+
* </Choice.Content>
|
|
108
|
+
* </Choice.Root>
|
|
109
|
+
* ```
|
|
110
|
+
*/
|
|
111
|
+
declare const Content: import("react").ForwardRefExoticComponent<Omit<ChoiceContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
112
|
+
/**
|
|
113
|
+
* Props for `Choice.Label`. The mantle `Label` props, minus `htmlFor` and
|
|
114
|
+
* `disabled` — those are owned by `Choice.Root` (the control id and the choice's
|
|
115
|
+
* disabled state) and are not part of the public surface, so consumer props can
|
|
116
|
+
* never override the label-to-control wiring.
|
|
117
|
+
*/
|
|
118
|
+
type ChoiceLabelProps = Omit<ComponentProps<typeof Label>, "htmlFor" | "disabled">;
|
|
119
|
+
/**
|
|
120
|
+
* The emphasized title of a `Choice`, rendered as a real `<label>` wired to the
|
|
121
|
+
* control by `htmlFor`, so clicking it toggles the control and it supplies the
|
|
122
|
+
* control's accessible name. Use this when the `Choice` owns the labeling (a
|
|
123
|
+
* standalone checkbox, a raw `<form>`, React-state-only).
|
|
124
|
+
*
|
|
125
|
+
* It is the mantle {@link Label} (not a re-implementation), so it keeps every
|
|
126
|
+
* base-label behavior — cursor, the double-click text-selection guard, and the
|
|
127
|
+
* auto `font-medium` — and mirrors how `Field.Label` reuses `Label`. When an
|
|
128
|
+
* ancestor already owns the labeling and click target (a fully-clickable list
|
|
129
|
+
* row or a Headless radio item), use `Choice.Title` instead — a label-less `<p>`
|
|
130
|
+
* (it accepts `asChild`) — so labels never nest or compete.
|
|
131
|
+
*
|
|
132
|
+
* @see https://mantle.ngrok.com/components/choice
|
|
133
|
+
*
|
|
134
|
+
* @example
|
|
135
|
+
* ```tsx
|
|
136
|
+
* <Choice.Root name="notify">
|
|
137
|
+
* <Choice.Indicator>
|
|
138
|
+
* <Checkbox />
|
|
139
|
+
* </Choice.Indicator>
|
|
140
|
+
* <Choice.Content>
|
|
141
|
+
* <Choice.Label>Email</Choice.Label>
|
|
142
|
+
* <Choice.Description>Get notified by email.</Choice.Description>
|
|
143
|
+
* </Choice.Content>
|
|
144
|
+
* </Choice.Root>
|
|
145
|
+
* ```
|
|
146
|
+
*/
|
|
147
|
+
declare const ChoiceLabel: import("react").ForwardRefExoticComponent<Omit<ChoiceLabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
|
|
148
|
+
/**
|
|
149
|
+
* The emphasized title of a `Choice`, label-styled but **not** a `<label>` —
|
|
150
|
+
* renders a `<p>`. Mirrors `Field.LabelText`. Use this when something else owns
|
|
151
|
+
* the control's labeling and click target: a fully-clickable list row or a
|
|
152
|
+
* Headless radio item. It avoids nesting two `<label>`s or splitting
|
|
153
|
+
* the click target. Pass `asChild` to supply your own element. For a standalone
|
|
154
|
+
* control — or inside a `Field` — where the title can be the label, use
|
|
155
|
+
* `Choice.Label`.
|
|
156
|
+
*
|
|
157
|
+
* @see https://mantle.ngrok.com/components/choice
|
|
158
|
+
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```tsx
|
|
161
|
+
* <Choice.Root id="onboarding-key">
|
|
162
|
+
* <Choice.Indicator>
|
|
163
|
+
* <Checkbox />
|
|
164
|
+
* </Choice.Indicator>
|
|
165
|
+
* <Choice.Content>
|
|
166
|
+
* <Choice.Title>Onboarding Key</Choice.Title>
|
|
167
|
+
* <Choice.Description>ng-3FaThZL***8xiA</Choice.Description>
|
|
168
|
+
* </Choice.Content>
|
|
169
|
+
* </Choice.Root>
|
|
170
|
+
* ```
|
|
171
|
+
*/
|
|
172
|
+
declare const Title: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
173
|
+
/**
|
|
174
|
+
* The de-emphasized supplementary line of a `Choice`, in the muted body color
|
|
175
|
+
* and wired to the control via `aria-describedby` (never a second label).
|
|
176
|
+
* Renders a `<p>`; pass `asChild` to supply your own element.
|
|
177
|
+
*
|
|
178
|
+
* @see https://mantle.ngrok.com/components/choice
|
|
179
|
+
*
|
|
180
|
+
* @example
|
|
181
|
+
* ```tsx
|
|
182
|
+
* <Choice.Root name="notify">
|
|
183
|
+
* <Choice.Indicator>
|
|
184
|
+
* <Checkbox />
|
|
185
|
+
* </Choice.Indicator>
|
|
186
|
+
* <Choice.Content>
|
|
187
|
+
* <Choice.Label>Email</Choice.Label>
|
|
188
|
+
* <Choice.Description>Get notified by email.</Choice.Description>
|
|
189
|
+
* </Choice.Content>
|
|
190
|
+
* </Choice.Root>
|
|
191
|
+
* ```
|
|
192
|
+
*/
|
|
193
|
+
declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
194
|
+
/**
|
|
195
|
+
* A reusable indicator-left / content-right layout for a single choice: a
|
|
196
|
+
* control (checkbox, radio, switch) beside an emphasized title and an optional
|
|
197
|
+
* de-emphasized description. Use it to pair a checkbox or radio with a rich,
|
|
198
|
+
* titled label, or reach for it directly to build your own choice-like rows.
|
|
199
|
+
*
|
|
200
|
+
* It is a pure layout + association primitive: it owns the control's `id` and
|
|
201
|
+
* the description's `id` and wires them together, but does **not** own the
|
|
202
|
+
* control's value — drop your own control into `Choice.Indicator`. Pick
|
|
203
|
+
* `Choice.Label` (a real `<label>`) when the `Choice` owns the labeling, or
|
|
204
|
+
* `Choice.Title` (label-less text) when an ancestor (a clickable row or a
|
|
205
|
+
* Headless radio item) already does.
|
|
206
|
+
*
|
|
207
|
+
* **Use it for choice-like layouts** — a checkbox or radio input that needs an
|
|
208
|
+
* associated label and an optional supplementary description. It is not a
|
|
209
|
+
* general-purpose layout primitive; for laying out non-control content, reach
|
|
210
|
+
* for a plain flex/grid or `MediaObject` instead.
|
|
211
|
+
*
|
|
212
|
+
* **Field interop.** Inside a `Field.Control`, `Choice.Root` reads the field's
|
|
213
|
+
* `id` / `name` / `aria-*` and merges its description into the control's
|
|
214
|
+
* `aria-describedby`. Outside a `Field` it uses its own generated ids — the two
|
|
215
|
+
* are aware of each other but neither is required.
|
|
216
|
+
*
|
|
217
|
+
* @see https://mantle.ngrok.com/components/choice
|
|
218
|
+
*
|
|
219
|
+
* @example
|
|
220
|
+
* Composition:
|
|
221
|
+
* ```
|
|
222
|
+
* Choice.Root
|
|
223
|
+
* ├── Choice.Indicator
|
|
224
|
+
* └── Choice.Content
|
|
225
|
+
* ├── Choice.Label (or Choice.Title — pick one)
|
|
226
|
+
* └── Choice.Description
|
|
227
|
+
* ```
|
|
228
|
+
*
|
|
229
|
+
* @example
|
|
230
|
+
* ```tsx
|
|
231
|
+
* <Choice.Root name="notify">
|
|
232
|
+
* <Choice.Indicator>
|
|
233
|
+
* <Checkbox />
|
|
234
|
+
* </Choice.Indicator>
|
|
235
|
+
* <Choice.Content>
|
|
236
|
+
* <Choice.Label>Email</Choice.Label>
|
|
237
|
+
* <Choice.Description>Get notified by email.</Choice.Description>
|
|
238
|
+
* </Choice.Content>
|
|
239
|
+
* </Choice.Root>
|
|
240
|
+
* ```
|
|
241
|
+
*/
|
|
242
|
+
declare const Choice: {
|
|
243
|
+
Root: typeof Root;
|
|
244
|
+
Indicator: typeof Indicator;
|
|
245
|
+
Content: typeof Content;
|
|
246
|
+
Label: typeof ChoiceLabel;
|
|
247
|
+
Title: typeof Title;
|
|
248
|
+
Description: typeof Description;
|
|
249
|
+
};
|
|
250
|
+
//#endregion
|
|
251
|
+
export { Choice, type ChoiceRootProps };
|
package/dist/choice.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./choice-D6S38dPs.js";export{e as Choice};
|
package/dist/code-block.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./icon-SUx16Sl3.js";import{t as r}from"./slot-DT_E5BQx.js";import{t as i}from"./icon-button-DiX9iZ9n.js";import{t as a}from"./use-copy-to-clipboard-
|
|
1
|
+
import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./icon-SUx16Sl3.js";import{t as r}from"./slot-DT_E5BQx.js";import{t as i}from"./icon-button-DiX9iZ9n.js";import{t as a}from"./use-copy-to-clipboard-DqQ0_N3E.js";import{t as o}from"./traffic-policy-file-0g5RXFqu.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-DwIF_M_K.js";import{CaretDownIcon as O}from"@phosphor-icons/react/CaretDown";import{createContext as ee,forwardRef as k,useCallback as A,useContext as te,useEffect as j,useId as ne,useLayoutEffect as re,useMemo as M,useRef as N,useState as P}from"react";import F from"tiny-invariant";import{jsx as I,jsxs as ie}from"react/jsx-runtime";import{CheckIcon as ae}from"@phosphor-icons/react/Check";import{CopyIcon as oe}from"@phosphor-icons/react/Copy";import{FileTextIcon as se}from"@phosphor-icons/react/FileText";import{TerminalIcon as ce}from"@phosphor-icons/react/Terminal";import{Content as le,List as ue,Root as de,Trigger as fe}from"@radix-ui/react-tabs";function L(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+=`&`;break;case`<`:n+=`<`;break;case`>`:n+=`>`;break;case`"`:n+=`"`;break;case`'`:n+=`'`;break;default:n+=t}}return n}const R=new WeakMap;function z(e){let t=new Set;if(e==null||e===``)return t;for(let n of e.split(` `))n!==``&&t.add(n);return t}function pe(e){let t=R.get(e);if(t!=null&&ge(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=z(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 R.set(e,a),a}function me(e){R.delete(e)}function he(e){me(e),e.removeAttribute(`data-folded-regions`)}function ge(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 _e(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 ve(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=z(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}=pe(n),s=a.get(t);if(s!=null)for(let e of s){let t=o.get(e);t!=null&&_e(e,r,t)}return!0}function ye(e){let t=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.mantle-code-fold-toggle`);n instanceof HTMLButtonElement&&ve(n)};return e.addEventListener(`click`,t),()=>{e.removeEventListener(`click`,t)}}const B=ee(null);function V(){let e=te(B);return F(e!=null,`CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.`),e}const H=k(({asChild:e=!1,className:n,defaultTab:i,activeTab:a,onActiveTabChange:o,...s},c)=>{let l=N(``),[u,d]=P(!1),[f,p]=P(!1),[m,h]=P(void 0),g=A(e=>{h(t=>(F(t==null,`You can only render a single CodeBlock.Code within a CodeBlock.`),e))},[]),_=A(e=>{h(t=>{F(t===e,`You can only render a single CodeBlock.Code within a CodeBlock.`)})},[]),v=M(()=>({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=I(e?r:`div`,{"data-slot":`code-block`,className:t(`text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-card font-mono`,`[&_svg]:shrink-0`,n),ref:c,...s});return I(B.Provider,{value:v,children:y?I(de,{asChild:!0,defaultValue:i,value:a,onValueChange:o,children:b}):b})});H.displayName=`CodeBlock`;const U=k(({asChild:e=!1,className:n,...i},a)=>I(e?r:`div`,{"data-slot":`code-block-body`,className:t(`relative`,n),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=>L(String(e)))}function we(e,t,n){return G(e,t,n,e=>String(e))}const K=k(({className:n,style:r,value:i,...a},o)=>{let s=ne(),c=N(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}=i,S=v,C=y??1,w=x??!1,T=M(()=>_!=null&&_.length>0?we(h,_,g):h,[g,_,h]);re(()=>{l.current=T},[l,T]),j(()=>(f(s),()=>{p(s)}),[s,f,p]);let E=M(()=>{if(b!=null)return _!=null&&_.length>0?Ce(b,_,g):b},[b,g,_]);j(()=>{let e=c.current;if(e==null)return;let t=e.querySelector(`code`);return t!=null&&he(t),ye(e)},[E]);let D=E!=null,O=E??L(T),ee=M(()=>({__html:O}),[O]);return I(`pre`,{"data-slot":`code-block-code`,"aria-expanded":u?d:void 0,className:t(`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]`,n),"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:e(c,o),style:{...r,"--mantle-line-number-start":String(C),tabSize:2,MozTabSize:2},...a,children:I(`code`,{className:`text-size-inherit block min-w-full w-max`,dangerouslySetInnerHTML:ee})})});K.displayName=`CodeBlockCode`;const q=k(({asChild:e=!1,className:n,...i},a)=>I(e?r:`div`,{"data-slot":`code-block-header`,className:t(`flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700`,n),ref:a,...i}));q.displayName=`CodeBlockHeader`;const J=k(({asChild:e=!1,className:n,...i},a)=>I(e?r:`h3`,{"data-slot":`code-block-title`,ref:a,className:t(`text-mono m-0 font-mono font-normal`,n),...i}));J.displayName=`CodeBlockTitle`;const Y=k(({className:e,label:t=`Copy code`,onCopy:n,onCopyError:r,onClick:o,...s},c)=>{let{copyTextRef:l}=V(),u=a(),[d,f]=P(!1),p=N(void 0);return j(()=>()=>{p.current!=null&&clearTimeout(p.current)},[]),I(`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:I(i,{type:`button`,appearance:`ghost`,size:`sm`,label:t,icon:I(d?ae:oe,{}),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){r?.(e)}},...s})})});Y.displayName=`CodeBlockCopyButton`;const X=k(({asChild:e=!1,className:i,onClick:a,...o},s)=>{let{codeId:c,isCodeExpanded:l,setIsCodeExpanded:u,setHasCodeExpander:d}=V();return j(()=>(d(!0),()=>{d(!1)}),[d]),ie(e?r:`button`,{...o,"data-slot":`code-block-expander-button`,"aria-controls":c,"aria-expanded":l,className:t(`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`,` `,I(n,{svg:I(O,{weight:`bold`}),className:t(`size-4`,l&&`rotate-180`,`transition-all duration-150`)})]})});X.displayName=`CodeBlockExpanderButton`;function Z({className:e,preset:t,svg:r,...i}){let a=r;if(t!=null)switch(t){case`file`:a=I(se,{weight:`fill`});break;case`cli`:a=I(ce,{weight:`fill`});break;case`traffic-policy`:a=I(o,{});break}return I(n,{"data-slot":`code-block-icon`,className:e,svg:a,...i})}Z.displayName=`CodeBlockIcon`;const Q=k(({className:e,...n},r)=>I(ue,{"data-slot":`code-block-tab-list`,className:t(`scroll-fade-x flex min-w-0 items-center gap-1 overflow-x-auto overscroll-x-none`,`-m-1 p-1`,e),ref:r,...n}));Q.displayName=`CodeBlockTabList`;const Te=k(({className:e,...n},r)=>I(fe,{"data-slot":`code-block-tab-trigger`,className:t(`shrink-0 cursor-pointer rounded px-1.5 py-0.5 text-xs font-medium whitespace-nowrap`,`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`,e),ref:r,...n}));Te.displayName=`CodeBlockTabTrigger`;const Ee=k((e,t)=>I(le,{"data-slot":`code-block-tab-content`,ref:t,...e}));Ee.displayName=`CodeBlockTabContent`;const De={Root:H,Body:U,Code:K,CopyButton:Y,ExpanderButton:X,Header:q,Icon:Z,TabContent:Ee,TabList:Q,TabTrigger:Te,Title:J},Oe=`var(--shiki-foreground)`;function ke(e){return e.replace(/[&<]/g,e=>e===`&`?`&`:`<`)}function Ae(e){return e===` `||e===` `||e===`
|
|
2
2
|
`||e===`\r`||e===`{`||e===`}`||e===`[`||e===`]`||e===`:`||e===`,`||e===`"`}function je(e,t,n){let r=e.length,i=[],a=`"`,o=t+1;for(;o<r;){let t=e[o];if(t===`\\`){let t=e[o+1]===`u`&&/^[0-9a-fA-F]{4}$/.test(e.slice(o+2,o+6))?6:2;a!==``&&(i.push({text:a,isEscape:!1}),a=``),i.push({text:e.slice(o,o+t),isEscape:!0}),o+=t;continue}if(t===`"`){a+=`"`,o+=1;break}a+=t,o+=1}a!==``&&i.push({text:a,isEscape:!1});let s=o;for(;s<r;){let t=e[s];if(t===` `||t===` `||t===`
|
|
3
3
|
`||t===`\r`){s+=1;continue}break}let c=e[s]===`:`?`var(--shiki-token-keyword)`:`var(--shiki-token-string-expression)`;for(let e of i)n(e.text,e.isEscape?`var(--shiki-token-escape, var(--shiki-token-constant))`:c);return o}function Me(e){for(let t=0;t<e.length;t+=1){let n=e[t];if(n!=null&&n.color==null){let r=Oe;for(let n=t+1;n<e.length;n+=1){let t=e[n];if(t!=null&&t.color!=null){r=t.color;break}}n.color=r}}let t=``,n=``,r=null,i=()=>{r!=null&&(t+=`<span style="color:${r}">${ke(n)}</span>`),n=``,r=null};for(let t of e)t!=null&&(t.color===r?n+=t.text:(i(),n=t.text,r=t.color));return i(),`<span class="line">${t}</span>`}function $(e){let t=[[]],n=t[0]??[],r=e.length,i=0,a=(e,t)=>{n.push({text:e,color:t})};for(;i<r;){let o=e[i];if(o===`
|
|
4
4
|
`||o===`\r`){o===`\r`&&e[i+1]===`
|
package/dist/command.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-C1UYP5We.js";import{n as t}from"./separator-CqohKk4z.js";import{t as n}from"./dialog-
|
|
1
|
+
import{t as e}from"./cx-C1UYP5We.js";import{n as t}from"./separator-CqohKk4z.js";import{t as n}from"./dialog-uyJcNks7.js";import{t as r}from"./kbd-D6k4Dnrf.js";import{forwardRef as i,useEffect as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MagnifyingGlassIcon as l}from"@phosphor-icons/react/MagnifyingGlass";import{Command as u,useCommandState as d}from"cmdk";const f=i(({className:t,...n},r)=>s(u,{ref:r,"data-slot":`command`,className:e(`bg-popover flex h-full w-full flex-col overflow-hidden rounded-md`,t),...n}));f.displayName=`Command`;const p=({children:t,className:r,description:i=`Search for a command to run...`,filter:a,shouldFilter:o,showCloseButton:l=!0,title:u=`Command Palette`})=>c(n.Content,{className:e(`overflow-hidden p-0 relative`,r),children:[c(n.Header,{className:`sr-only absolute`,children:[s(n.Title,{children:u}),s(n.Description,{children:i})]}),s(f,{className:`**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1`,filter:a,shouldFilter:o,children:t}),l&&s(`div`,{className:`absolute top-1.5 right-1.5`,children:s(n.CloseIconButton,{})})]});p.displayName=`CommandDialogContent`;const m=i(({className:t,...n},r)=>c(`div`,{ref:r,"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b border-popover px-3`,children:[s(l,{className:`size-5 shrink-0 opacity-50`}),s(u.Input,{"data-slot":`command-input`,className:e(`placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,t),...n})]}));m.displayName=`CommandInput`;const h=i(({className:t,...n},r)=>s(u.List,{ref:r,"data-slot":`command-list`,className:e(`max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar`,t),...n}));h.displayName=`CommandList`;const g=i(({className:t,...n},r)=>s(u.Empty,{ref:r,"data-slot":`command-empty`,className:e(`py-6 text-center text-sm`,t),...n}));g.displayName=`CommandEmpty`;const _=i(({className:t,...n},r)=>s(u.Group,{ref:r,"data-slot":`command-group`,className:e(`[&>[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&>[cmdk-group-heading]]:px-2 [&>[cmdk-group-heading]]:py-1.5 [&>[cmdk-group-heading]]:text-xs [&>[cmdk-group-heading]]:font-medium`,t),...n}));_.displayName=`CommandGroup`;const v=i(({className:n,...r},i)=>s(u.Separator,{ref:i,"data-slot":`command-separator`,asChild:!0,...r,children:s(t,{className:e(`-mx-1 my-1 w-auto`,n)})}));v.displayName=`CommandSeparator`;const y=i(({className:t,...n},r)=>s(u.Item,{ref:r,"data-slot":`command-item`,className:e(`data-[selected=true]:bg-active-menu-item [:where(&_svg)]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [:where(&_svg)]:size-5`,t),...n}));y.displayName=`CommandItem`;const b=i(({className:t,...n},r)=>s(`span`,{ref:r,"data-slot":`command-shortcut`,className:e(`text-muted ml-auto text-xs tracking-widest`,t),...n}));b.displayName=`CommandShortcut`;const x={Root:f,DialogRoot:n.Root,DialogTrigger:n.Trigger,DialogContent:p,Input:m,List:h,Empty:g,Group:_,Item:y,Shortcut:b,Separator:v};function S({className:t,...n}){let[i,l]=o(`⌃`);a(()=>{l(w())},[]);let u=i===`⌘`?`Command`:`Control`;return c(r,{...n,suppressHydrationWarning:!0,"data-slot":`meta-key`,className:e(i===`⌃`&&`font-medium`,t),children:[s(`span`,{className:`sr-only`,children:u}),i]})}function C(e){return`userAgentData`in e}function w(){if(typeof navigator>`u`)return`⌃`;let e=``;return C(navigator)&&(e=navigator.userAgentData.platform??``),e||=navigator.platform||navigator.userAgent||``,/mac|iphone|ipad|ipod/i.test(e)?`⌘`:`⌃`}export{x as Command,S as MetaKey,d as useCommandState};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{n as e}from"./browser-only-
|
|
1
|
+
import{n as e}from"./browser-only-CPH56Xw_.js";async function t(t){if(!e())throw Error(`copyToClipboard requires a DOM environment`);try{if(typeof navigator.clipboard?.writeText==`function`)await navigator.clipboard.writeText(t);else throw Error(`writeText not supported`)}catch(e){try{n(t)}catch{throw e}}}function n(e){let t=document.createElement(`textarea`);t.value=e,document.body.appendChild(t);try{if(t.select(),!document.execCommand(`copy`))throw Error(`document.execCommand("copy") failed`)}finally{document.body.removeChild(t)}}export{t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-C1UYP5We.js";import{t}from"./icon-button-DiX9iZ9n.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-
|
|
1
|
+
import{t as e}from"./cx-C1UYP5We.js";import{t}from"./icon-button-DiX9iZ9n.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-BuVqb6zf.js";import{forwardRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{XIcon as p}from"@phosphor-icons/react/X";const m=o;m.displayName=`Dialog`;const h=u((e,t)=>d(r,{ref:t,"data-slot":`dialog-trigger`,...e}));h.displayName=`DialogTrigger`;const g=n;g.displayName=`DialogPortal`;const _=u((e,t)=>d(l,{ref:t,"data-slot":`dialog-close`,...e}));_.displayName=`DialogClose`;const v=u(({className:t,...n},r)=>d(i,{ref:r,"data-slot":`dialog-overlay`,className:e(`bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs`,t),...n}));v.displayName=`DialogOverlay`;const y=u(({children:t,className:n,preferredWidth:r=`max-w-lg`,...i},o)=>f(g,{children:[d(v,{}),d(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:d(a,{"data-mantle-modal-content":!0,"data-slot":`dialog-content`,className:e(`flex max-h-full w-full flex-1 flex-col`,`outline-hidden focus-within:outline-hidden`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`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`,r,n),ref:o,...i,children:t})})]}));y.displayName=`DialogContent`;const b=({className:t,children:n,...r})=>d(`div`,{"data-slot":`dialog-header`,className:e(`border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4`,`has-[.icon-button]:pr-4`,t),...r,children:n});b.displayName=`DialogHeader`;const x=({size:e=`md`,type:n=`button`,label:r=`Close Dialog`,appearance:i=`ghost`,...a})=>d(l,{asChild:!0,children:d(t,{appearance:i,"data-slot":`dialog-close-icon-button`,icon:d(p,{}),label:r,size:e,type:n,...a})});x.displayName=`DialogCloseIconButton`;const S=({className:t,...n})=>d(`div`,{"data-slot":`dialog-body`,className:e(`scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6`,t),...n});S.displayName=`DialogBody`;const C=({className:t,...n})=>d(`div`,{"data-slot":`dialog-footer`,className:e(`border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-4`,t),...n});C.displayName=`DialogFooter`;const w=u(({className:t,...n},r)=>d(c,{ref:r,"data-slot":`dialog-title`,className:e(`text-strong truncate text-lg font-medium`,t),...n}));w.displayName=`DialogTitle`;const T=u(({className:t,...n},r)=>d(s,{ref:r,"data-slot":`dialog-description`,className:e(`text-muted`,t),...n}));T.displayName=`DialogDescription`;const E={Root:m,Body:S,Close:_,CloseIconButton:x,Content:y,Description:T,Footer:C,Header:b,Overlay:v,Portal:g,Title:w,Trigger:h};export{E as t};
|
package/dist/dialog.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{l as e}from"./primitive-
|
|
1
|
+
import{l as e}from"./primitive-BuVqb6zf.js";import{t}from"./dialog-uyJcNks7.js";export{t as Dialog,e as isDialogOverlayTarget};
|
package/dist/field.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./slot-DT_E5BQx.js";import{t as r}from"./icon-button-DiX9iZ9n.js";import{i,n as a,r as o,t as s}from"./validation-DCyx-ceH.js";import{t as
|
|
1
|
+
import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./slot-DT_E5BQx.js";import{t as r}from"./icon-button-DiX9iZ9n.js";import{i,n as a,r as o,t as s}from"./validation-DCyx-ceH.js";import{n as c,r as l,t as u}from"./field-context-4k1kI7Bo.js";import{t as d}from"./label-BLXfnQmn.js";import{t as f}from"./popover-Bq52EC7X.js";import{Children as p,Fragment as m,cloneElement as h,forwardRef as g,isValidElement as _,useCallback as v,useContext as y,useId as b,useMemo as x,useState as S}from"react";import C from"tiny-invariant";import{jsx as w}from"react/jsx-runtime";import{QuestionIcon as T}from"@phosphor-icons/react/Question";const E=e=>{let t=[],n=new Set;for(let r of e??[]){if(typeof r!=`string`)continue;let e=r.trim();e.length===0||n.has(e)||(n.add(e),t.push(e))}return t},D=e=>!(e==null||typeof e==`boolean`||typeof e==`string`&&e.trim().length===0),O=({children:e,errorItemType:t})=>{let n=!1;return p.forEach(e,e=>{if(!(n||e==null||typeof e==`boolean`)){if(typeof e==`string`){e.trim().length>0&&(n=!0);return}if(!_(e)){n=!0;return}if(e.type===t){n=D(e.props.children);return}if(e.type===m){n=O({children:e.props.children,errorItemType:t});return}n=!0}}),n},k=g(({className:e,...n},r)=>w(`fieldset`,{ref:r,"data-slot":`field-set`,className:t(`flex w-full min-w-0 flex-col gap-4 border-0 p-0`,e),...n}));k.displayName=`FieldSet`;const A=g(({className:e,...n},r)=>w(`legend`,{ref:r,"data-slot":`field-legend`,className:t(`text-strong mb-1.5 text-sm font-medium font-sans`,e),...n}));A.displayName=`FieldLegend`;const j=g(({htmlFor:e,...t},n)=>{let r=y(c);return w(d,{ref:n,htmlFor:e??r?.controlId,...t})});j.displayName=`FieldLabel`;const M=g(({asChild:e,className:r,...i},a)=>w(e?n:`p`,{ref:a,"data-slot":`field-label-text`,className:t(`text-strong text-sm font-medium font-sans`,r),...i}));M.displayName=`FieldLabelText`;const N=g(({asChild:e,className:r,...i},a)=>w(e?n:`div`,{ref:a,"data-slot":`field-label-row`,className:t(`flex items-center gap-1`,r),...i}));N.displayName=`FieldLabelRow`;const P=f.Root,F=w(T,{}),I=g(({appearance:e=`ghost`,className:n,icon:i=F,label:a,size:o=`xs`,type:s=`button`,...c},l)=>w(f.Trigger,{asChild:!0,children:w(r,{ref:l,appearance:e,className:t(`text-body -my-0.5`,n),icon:i,label:a,size:o,type:s,...c})}));I.displayName=`FieldHelpTrigger`;const L=g((e,t)=>w(f.Content,{ref:t,"data-slot":`field-help-content`,...e}));L.displayName=`FieldHelpContent`;const R=g(({asChild:e,children:r,className:i,...a},o)=>w(e?n:`span`,{ref:o,"data-slot":`field-optional`,className:t(`text-muted text-sm font-normal font-sans`,i),...a,children:r??`(Optional)`}));R.displayName=`FieldOptional`;const z=g(({asChild:e,className:r,...i},a)=>w(e?n:`div`,{ref:a,"data-slot":`field-group`,className:t(`flex w-full flex-col gap-4`,r),...i}));z.displayName=`FieldGroup`;const B=g(({asChild:e,children:r,className:a,name:o,validation:l,...u},d)=>{let f=e?n:`div`,p=b(),m=b(),h=b(),[g,_]=S(!1),y=i(l??(g?`error`:void 0)),C=v(()=>(_(!0),()=>{_(!1)}),[]),T=x(()=>({controlId:p,descriptionId:m,errorId:h,hasErrors:g,name:o,registerError:C,validation:y}),[p,m,h,g,o,C,y]);return w(c.Provider,{value:T,children:w(s,{validation:y,children:w(f,{ref:d,"data-slot":`field-item`,"data-validation":y,className:t(`flex w-full flex-col gap-1.5`,a),...u,children:r})})})});B.displayName=`FieldItem`;const V=g(({children:e,...t},r)=>{let i=y(c),a=l({context:i});return typeof e==`function`?w(s,{validation:a.validation,children:w(u.Provider,{value:i?a.ariaProps:null,children:e(a.ariaProps)})}):(C(_(e),`Field.Control expects a single React element child (or a render-prop function). Got a non-element value (string, array, fragment, null, or undefined). Wrap the control in a single element, or use the function child form: <Field.Control>{(props) => <YourControl {...props} />}</Field.Control>.`),w(s,{validation:a.validation,children:w(u.Provider,{value:i?a.ariaProps:null,children:w(n,{ref:r,...t,children:h(e,a.ariaProps)})})}))});V.displayName=`FieldControl`;const H=g(({asChild:e,className:r,...i},a)=>w(e?n:`p`,{ref:a,"data-slot":`field-description`,id:y(c)?.descriptionId,className:t(`text-body text-sm leading-4`,`[:where([data-slot=field-error-list]+&)]:-mt-1.5`,r),...i}));H.displayName=`FieldDescription`;const U=g(({children:e,className:n,...r},i)=>D(e)?w(`li`,{ref:i,"data-slot":`field-error`,className:t(`text-danger-600 text-sm leading-4`,n),...r,children:e}):null);U.displayName=`FieldErrorItem`;const W=g(({messages:e,...t},n)=>w(G,{ref:n,...t,children:E(e).map(e=>w(U,{children:e},e))}));W.displayName=`FieldErrors`;const G=g(({asChild:r,children:i,className:a,...o},s)=>{let l=O({children:i,errorItemType:U}),u=y(c),d=u?.registerError;return e(()=>{if(!(!l||d==null))return d()},[l,d]),l?w(r?n:`ul`,{ref:s,"data-slot":`field-error-list`,id:u?.errorId,role:`list`,className:t(`m-0 flex w-full flex-col list-none p-0`,a),...o,children:i}):null});G.displayName=`FieldErrorList`;const K={Item:B,Control:V,Group:z,Set:k,Legend:A,Label:j,LabelText:M,LabelRow:N,Help:P,HelpTrigger:I,HelpContent:L,Optional:R,Description:H,Errors:W,ErrorList:G,ErrorItem:U},q=e=>E(e?.map(e=>typeof e==`string`||!e?e:e.message));export{K as Field,a as isAriaInvalid,o as parseValidation,i as resolveValidation,q as toErrorMessages};
|