@ngrok/mantle 0.1.21 → 0.1.22

package/dist/chunk-RSEHGHQT.js

@@ -0,0 +1,2 @@
+import{a as w}from"./chunk-NREABJ6Y.js";import{a as f}from"./chunk-A5H52ODC.js";import{Warning as R}from"@phosphor-icons/react/Warning";import{createContext as E,forwardRef as v,useContext as L,useRef as g}from"react";import{jsx as i,jsxs as C}from"react/jsx-runtime";var m=v(({children:t,className:s,...r},p)=>{let e=!!t,n=g(null);return e?i(x,{className:s,forwardedRef:p,innerRef:n,...r,children:t}):i(x,{...r,className:s,forwardedRef:p,innerRef:n,children:i(d,{...r})})});m.displayName="Input";var d=v(({"aria-invalid":t,className:s,invalid:r=!1,...p},e)=>{let{"aria-invalid":n,invalid:l,forwardedRef:o,innerRef:a,...u}=L(P),I=n??l??t??r,c={...u,...p,type:p.type??u.type??"text"};return i("div",{className:f("min-w-0 flex-1"),children:i("input",{"aria-invalid":I,className:f("w-full bg-form placeholder:text-placeholder focus:outline-none",s),ref:w(e,o,a),...c})})});d.displayName="InputCapture";var P=E({invalid:!1,innerRef:{current:null}}),x=({"aria-invalid":t,children:s,className:r,forwardedRef:p,innerRef:e,invalid:n,style:l,type:o,...a})=>{let u=t??n;return i(P.Provider,{value:{"aria-invalid":t,invalid:n,type:o,...a,forwardedRef:p,innerRef:e},children:C("div",{"aria-invalid":u,className:f("relative flex h-11 w-full items-center gap-1.5 rounded-md border bg-form px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 sm:h-9 sm:text-sm","has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-6 sm:[&_svg]:size-5","border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent",u&&"border-danger-600 pe-2.5 focus-within:border-danger-600 focus-within:ring-focus-danger",r),onClick:()=>{e?.current?.focus()},style:l,children:[s,n&&C("div",{className:"pointer-events-none order-last select-none text-danger-600",children:[i("span",{className:"sr-only",children:["The value entered for the",a.name,"input has failed validation."].filter(Boolean).join(" ")}),i(R,{"aria-hidden":!0,weight:"fill"})]})]})})};import{Eye as W}from"@phosphor-icons/react/Eye";import{EyeClosed as A}from"@phosphor-icons/react/EyeClosed";import N from"clsx";import{forwardRef as B,useEffect as k,useState as T}from"react";import{jsx as M,jsxs as h}from"react/jsx-runtime";var H=B(({maskHiddenValue:t=!1,onBlur:s,onFocus:r,onValueVisibilityChange:p,showValue:e=!1,...n},l)=>{let[o,a]=T(e),u=o?"text":"password",I=o?W:A;k(()=>{a(e)},[e]);let[c,b]=T(!1);return h(m,{onBlur:y=>{b(!1),s?.(y)},onFocus:y=>{b(!0),r?.(y)},type:u,ref:l,...n,children:[M(d,{className:N(t&&!o&&!c&&"max-w-6")}),h("button",{type:"button",tabIndex:-1,className:"ml-1 cursor-pointer bg-inherit p-0 text-body hover:text-strong",onClick:()=>{a(!o),p?.(!o)},children:[h("span",{className:"sr-only",children:["Turn password visibility ",o?"off":"on"]}),M(I,{"aria-hidden":!0})]})]})});H.displayName="PasswordInput";function F(t){return t!=null&&t instanceof HTMLInputElement}export{m as a,d as b,H as c,F as d};
+//# sourceMappingURL=chunk-RSEHGHQT.js.map

package/dist/chunk-RSEHGHQT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/input/src/input.tsx","../packages/input/src/password-input.tsx","../packages/input/src/is-input.ts"],"sourcesContent":["import { Warning } from \"@phosphor-icons/react/Warning\";\nimport type { ElementRef, ForwardedRef, InputHTMLAttributes, MutableRefObject, PropsWithChildren } from \"react\";\nimport { createContext, forwardRef, useContext, useRef } from \"react\";\nimport { composeRefs } from \"../../compose-refs\";\nimport { cx } from \"../../cx\";\nimport type { WithAutoComplete, WithInputType, WithInvalid } from \"./types\";\n\ntype BaseProps = WithAutoComplete & WithInputType & WithInvalid;\n\n/**\n * The props for the `Input` component.\n */\ntype InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> & BaseProps & PropsWithChildren;\n\n/**\n * Used to create interactive controls for web-based forms in order to accept data from the user\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(({ children, className, ...props }, forwardedRef) => {\n\tconst hasChildren = Boolean(children);\n\tconst innerRef = useRef<ElementRef<\"input\">>(null);\n\n\tif (hasChildren) {\n\t\treturn (\n\t\t\t<InputContainer className={className} forwardedRef={forwardedRef} innerRef={innerRef} {...props}>\n\t\t\t\t{children}\n\t\t\t</InputContainer>\n\t\t);\n\t}\n\n\treturn (\n\t\t<InputContainer {...props} className={className} forwardedRef={forwardedRef} innerRef={innerRef}>\n\t\t\t<InputCapture {...props} />\n\t\t</InputContainer>\n\t);\n});\nInput.displayName = \"Input\";\n\ntype InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> & BaseProps;\n\n/**\n * The actual <input /> element that captures user input.\n */\nconst InputCapture = forwardRef<HTMLInputElement, InputCaptureProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, invalid = false, ...restProps }, ref) => {\n\t\tconst {\n\t\t\t\"aria-invalid\": ctxAriaInvalid,\n\t\t\tinvalid: ctxInvalid,\n\t\t\tforwardedRef: ctxForwardedRef,\n\t\t\tinnerRef: ctxInnerRef,\n\t\t\t...ctx\n\t\t} = useContext(InputContext);\n\t\tconst ariaInvalid = ctxAriaInvalid ?? ctxInvalid ?? _ariaInvalid ?? invalid;\n\t\tconst props = { ...ctx, ...restProps, type: restProps.type ?? ctx.type ?? \"text\" };\n\n\t\treturn (\n\t\t\t// <input\n\t\t\t// \taria-invalid={ariaInvalid}\n\t\t\t// \tclassName={cx(\"min-w-0 flex-1 bg-form placeholder:text-placeholder focus:outline-none\", className)}\n\t\t\t// \tref={composeRefs(ref, ctxForwardedRef, ctxInnerRef)}\n\t\t\t// \t{...props}\n\t\t\t// />\n\t\t\t<div className={cx(\"min-w-0 flex-1\")}>\n\t\t\t\t<input\n\t\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\t\tclassName={cx(\"w-full bg-form placeholder:text-placeholder focus:outline-none\", className)}\n\t\t\t\t\tref={composeRefs(ref, ctxForwardedRef, ctxInnerRef)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n);\nInputCapture.displayName = \"InputCapture\";\n\ntype InputContextType = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps & {\n\t\t/**\n\t\t * inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * forwarded ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef?: ForwardedRef<HTMLInputElement>;\n\t};\n\nconst InputContext = createContext<InputContextType>({ invalid: false, innerRef: { current: null } });\n\ntype InputContainerProps = InputHTMLAttributes<HTMLInputElement> &\n\tBaseProps & {\n\t\t/**\n\t\t * @private inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * @private ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef: ForwardedRef<HTMLInputElement>;\n\t};\n\n/**\n * The container for the input element.\n */\nconst InputContainer = ({\n\t\"aria-invalid\": _ariaInvalid,\n\tchildren,\n\tclassName,\n\tforwardedRef,\n\tinnerRef,\n\tinvalid,\n\tstyle,\n\ttype,\n\t...props\n}: InputContainerProps) => {\n\tconst ariaInvalid = _ariaInvalid ?? invalid;\n\n\treturn (\n\t\t<InputContext.Provider\n\t\t\tvalue={{\n\t\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\t\tinvalid,\n\t\t\t\ttype,\n\t\t\t\t...props,\n\t\t\t\tforwardedRef,\n\t\t\t\tinnerRef,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative flex h-11 w-full items-center gap-1.5 rounded-md border bg-form px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 sm:h-9 sm:text-sm\",\n\t\t\t\t\t\"has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-6 sm:[&_svg]:size-5\",\n\t\t\t\t\t\"border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent\",\n\t\t\t\t\tariaInvalid && \"border-danger-600 pe-2.5 focus-within:border-danger-600 focus-within:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t}}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{invalid && (\n\t\t\t\t\t<div className=\"pointer-events-none order-last select-none text-danger-600\">\n\t\t\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\t\t\t{[\"The value entered for the\", props.name, \"input has failed validation.\"].filter(Boolean).join(\" \")}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<Warning aria-hidden weight=\"fill\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</InputContext.Provider>\n\t);\n};\n\nexport { Input, InputCapture };\nexport type { InputProps, InputCaptureProps };\n","import { Eye } from \"@phosphor-icons/react/Eye\";\nimport { EyeClosed } from \"@phosphor-icons/react/EyeClosed\";\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Input, InputCapture } from \"./input\";\nimport type { InputType, WithAutoComplete, WithInvalid } from \"./types\";\n\ntype PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tWithInvalid &\n\tWithAutoComplete & {\n\t\t/**\n\t\t * Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.\n\t\t * @default false\n\t\t */\n\t\tmaskHiddenValue?: boolean;\n\t\t/**\n\t\t * Callback for when the visibility of the password value changes.\n\t\t */\n\t\tonValueVisibilityChange?: (visible: boolean) => void;\n\t\t/**\n\t\t * Show/hide the password value as a controlled state.\n\t\t * @default false\n\t\t */\n\t\tshowValue?: boolean;\n\t};\n\ntype PasswordInputType = Extract<InputType, \"text\" | \"password\">;\n\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n\t({ maskHiddenValue = false, onBlur, onFocus, onValueVisibilityChange, showValue = false, ...props }, ref) => {\n\t\tconst [showPassword, setShowPassword] = useState<boolean>(showValue);\n\t\tconst type: PasswordInputType = showPassword ? \"text\" : \"password\";\n\t\tconst EyeCon = showPassword ? Eye : EyeClosed;\n\n\t\tuseEffect(() => {\n\t\t\tsetShowPassword(showValue);\n\t\t}, [showValue]);\n\n\t\tconst [isFocused, setIsFocused] = useState(false);\n\t\tconst shouldMaskHiddenValue = maskHiddenValue && !showPassword && !isFocused;\n\n\t\treturn (\n\t\t\t<Input\n\t\t\t\tonBlur={(event) => {\n\t\t\t\t\tsetIsFocused(false);\n\t\t\t\t\tonBlur?.(event);\n\t\t\t\t}}\n\t\t\t\tonFocus={(event) => {\n\t\t\t\t\tsetIsFocused(true);\n\t\t\t\t\tonFocus?.(event);\n\t\t\t\t}}\n\t\t\t\ttype={type}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<InputCapture className={clsx(shouldMaskHiddenValue && \"max-w-6\")} />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tclassName=\"ml-1 cursor-pointer bg-inherit p-0 text-body hover:text-strong\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetShowPassword(!showPassword);\n\t\t\t\t\t\tonValueVisibilityChange?.(!showPassword);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"sr-only\">Turn password visibility {showPassword ? \"off\" : \"on\"}</span>\n\t\t\t\t\t<EyeCon aria-hidden />\n\t\t\t\t</button>\n\t\t\t</Input>\n\t\t);\n\t},\n);\nPasswordInput.displayName = \"PasswordInput\";\n\nexport { PasswordInput };\nexport type { PasswordInputProps };\n","/**\n * Type guard for an HTMLInputElement.\n */\nexport function isInput(value: unknown): value is HTMLInputElement {\n\treturn value != null && value instanceof HTMLInputElement;\n}\n"],"mappings":"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","names":["Warning","createContext","forwardRef","useContext","useRef","jsx","jsxs","Input","forwardRef","children","className","props","forwardedRef","hasChildren","innerRef","useRef","InputContainer","InputCapture","_ariaInvalid","invalid","restProps","ref","ctxAriaInvalid","ctxInvalid","ctxForwardedRef","ctxInnerRef","ctx","useContext","InputContext","ariaInvalid","cx","composeRefs","createContext","style","type","Warning","Eye","EyeClosed","clsx","forwardRef","useEffect","useState","jsx","jsxs","PasswordInput","forwardRef","maskHiddenValue","onBlur","onFocus","onValueVisibilityChange","showValue","props","ref","showPassword","setShowPassword","useState","type","EyeCon","Eye","EyeClosed","useEffect","isFocused","setIsFocused","Input","event","InputCapture","clsx","isInput","value"]}

package/dist/input.d.ts

@@ -20,7 +20,42 @@ type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComple
  */
 declare const InputCapture: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithInvalid & react.RefAttributes<HTMLInputElement>>;
 
-type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithInvalid & WithAutoComplete;
-declare const PasswordInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithInvalid & WithAutoComplete & react.RefAttributes<HTMLInputElement>>;
+type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithInvalid & WithAutoComplete & {
+    /**
+     * Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.
+     * @default false
+     */
+    maskHiddenValue?: boolean;
+    /**
+     * Callback for when the visibility of the password value changes.
+     */
+    onValueVisibilityChange?: (visible: boolean) => void;
+    /**
+     * Show/hide the password value as a controlled state.
+     * @default false
+     */
+    showValue?: boolean;
+};
+declare const PasswordInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithInvalid & WithAutoComplete & {
+    /**
+     * Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.
+     * @default false
+     */
+    maskHiddenValue?: boolean | undefined;
+    /**
+     * Callback for when the visibility of the password value changes.
+     */
+    onValueVisibilityChange?: ((visible: boolean) => void) | undefined;
+    /**
+     * Show/hide the password value as a controlled state.
+     * @default false
+     */
+    showValue?: boolean | undefined;
+} & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Type guard for an HTMLInputElement.
+ */
+declare function isInput(value: unknown): value is HTMLInputElement;
 
-export { Input, InputCapture, type InputCaptureProps, type InputProps, PasswordInput, type PasswordInputProps, WithAutoComplete, WithInputType, WithInvalid };
+export { Input, InputCapture, type InputCaptureProps, type InputProps, PasswordInput, type PasswordInputProps, WithAutoComplete, WithInputType, WithInvalid, isInput };

package/dist/input.js

@@ -1,2 +1,2 @@
-import{a as c}from"./chunk-NREABJ6Y.js";import{a as m}from"./chunk-A5H52ODC.js";import{Warning as T}from"@phosphor-icons/react/Warning";import{createContext as R,forwardRef as C,useContext as M,useRef as g}from"react";import{jsx as i,jsxs as h}from"react/jsx-runtime";var d=C(({children:e,className:o,...t},n)=>{let p=!!e,r=g(null);return p?i(y,{className:o,forwardedRef:n,innerRef:r,...t,children:e}):i(y,{...t,className:o,forwardedRef:n,innerRef:r,children:i(u,{...t})})});d.displayName="Input";var u=C(({"aria-invalid":e,className:o,invalid:t=!1,...n},p)=>{let{"aria-invalid":r,invalid:s,forwardedRef:f,innerRef:l,...a}=M(w),P=r??s??e??t,v={...a,...n,type:n.type??a.type??"text"};return i("input",{"aria-invalid":P,className:m("min-w-0 flex-1 bg-form placeholder:text-placeholder focus:outline-none",o),ref:c(p,f,l),...v})});u.displayName="InputCapture";var w=R({invalid:!1,innerRef:{current:null}}),y=({"aria-invalid":e,children:o,className:t,forwardedRef:n,innerRef:p,invalid:r,style:s,type:f,...l})=>{let a=e??r;return i(w.Provider,{value:{"aria-invalid":e,invalid:r,type:f,...l,forwardedRef:n,innerRef:p},children:h("div",{"aria-invalid":a,className:m("flex h-11 w-full items-center gap-1.5 rounded-md border bg-form px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 sm:h-9 sm:text-sm","has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-6 sm:[&_svg]:size-5","border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent",a&&"border-danger-600 pe-2.5 focus-within:border-danger-600 focus-within:ring-focus-danger",t),onClick:()=>{p?.current?.focus()},style:s,children:[o,r&&h("div",{className:"pointer-events-none order-last select-none text-danger-600",children:[i("span",{className:"sr-only",children:["The value entered for the",l.name,"input has failed validation."].filter(Boolean).join(" ")}),i(T,{"aria-hidden":!0,weight:"fill"})]})]})})};import{Eye as E}from"@phosphor-icons/react/Eye";import{EyeClosed as H}from"@phosphor-icons/react/EyeClosed";import{forwardRef as L,useState as W}from"react";import{jsx as b,jsxs as I}from"react/jsx-runtime";var x=L((e,o)=>{let[t,n]=W(!1);return I(d,{type:t?"text":"password",ref:o,...e,children:[b(u,{}),I("button",{type:"button",tabIndex:-1,className:"ml-1 cursor-pointer bg-inherit p-0 text-body hover:text-strong",onClick:()=>{n(s=>!s)},children:[I("span",{className:"sr-only",children:["Turn password visibility ",t?"off":"on"]}),b(t?E:H,{"aria-hidden":!0})]})]})});x.displayName="PasswordInput";export{d as Input,u as InputCapture,x as PasswordInput};
+import{a,b,c,d}from"./chunk-RSEHGHQT.js";import"./chunk-NREABJ6Y.js";import"./chunk-A5H52ODC.js";export{a as Input,b as InputCapture,c as PasswordInput,d as isInput};
 //# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/input/src/input.tsx","../packages/input/src/password-input.tsx"],"sourcesContent":["import { Warning } from \"@phosphor-icons/react/Warning\";\nimport type { ElementRef, ForwardedRef, InputHTMLAttributes, MutableRefObject, PropsWithChildren } from \"react\";\nimport { createContext, forwardRef, useContext, useRef } from \"react\";\nimport { composeRefs } from \"../../compose-refs\";\nimport { cx } from \"../../cx\";\nimport type { WithAutoComplete, WithInputType, WithInvalid } from \"./types\";\n\ntype BaseProps = WithAutoComplete & WithInputType & WithInvalid;\n\n/**\n * The props for the `Input` component.\n */\ntype InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> & BaseProps & PropsWithChildren;\n\n/**\n * Used to create interactive controls for web-based forms in order to accept data from the user\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(({ children, className, ...props }, forwardedRef) => {\n\tconst hasChildren = Boolean(children);\n\tconst innerRef = useRef<ElementRef<\"input\">>(null);\n\n\tif (hasChildren) {\n\t\treturn (\n\t\t\t<InputContainer className={className} forwardedRef={forwardedRef} innerRef={innerRef} {...props}>\n\t\t\t\t{children}\n\t\t\t</InputContainer>\n\t\t);\n\t}\n\n\treturn (\n\t\t<InputContainer {...props} className={className} forwardedRef={forwardedRef} innerRef={innerRef}>\n\t\t\t<InputCapture {...props} />\n\t\t</InputContainer>\n\t);\n});\nInput.displayName = \"Input\";\n\ntype InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> & BaseProps;\n\n/**\n * The actual <input /> element that captures user input.\n */\nconst InputCapture = forwardRef<HTMLInputElement, InputCaptureProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, invalid = false, ...restProps }, ref) => {\n\t\tconst {\n\t\t\t\"aria-invalid\": ctxAriaInvalid,\n\t\t\tinvalid: ctxInvalid,\n\t\t\tforwardedRef: ctxForwardedRef,\n\t\t\tinnerRef: ctxInnerRef,\n\t\t\t...ctx\n\t\t} = useContext(InputContext);\n\t\tconst ariaInvalid = ctxAriaInvalid ?? ctxInvalid ?? _ariaInvalid ?? invalid;\n\t\tconst props = { ...ctx, ...restProps, type: restProps.type ?? ctx.type ?? \"text\" };\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={cx(\"min-w-0 flex-1 bg-form placeholder:text-placeholder focus:outline-none\", className)}\n\t\t\t\tref={composeRefs(ref, ctxForwardedRef, ctxInnerRef)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInputCapture.displayName = \"InputCapture\";\n\ntype InputContextType = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps & {\n\t\t/**\n\t\t * inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * forwarded ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef?: ForwardedRef<HTMLInputElement>;\n\t};\n\nconst InputContext = createContext<InputContextType>({ invalid: false, innerRef: { current: null } });\n\ntype InputContainerProps = InputHTMLAttributes<HTMLInputElement> &\n\tBaseProps & {\n\t\t/**\n\t\t * @private inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * @private ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef: ForwardedRef<HTMLInputElement>;\n\t};\n\n/**\n * The container for the input element.\n */\nconst InputContainer = ({\n\t\"aria-invalid\": _ariaInvalid,\n\tchildren,\n\tclassName,\n\tforwardedRef,\n\tinnerRef,\n\tinvalid,\n\tstyle,\n\ttype,\n\t...props\n}: InputContainerProps) => {\n\tconst ariaInvalid = _ariaInvalid ?? invalid;\n\n\treturn (\n\t\t<InputContext.Provider\n\t\t\tvalue={{\n\t\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\t\tinvalid,\n\t\t\t\ttype,\n\t\t\t\t...props,\n\t\t\t\tforwardedRef,\n\t\t\t\tinnerRef,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex h-11 w-full items-center gap-1.5 rounded-md border bg-form px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 sm:h-9 sm:text-sm\",\n\t\t\t\t\t\"has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-6 sm:[&_svg]:size-5\",\n\t\t\t\t\t\"border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent\",\n\t\t\t\t\tariaInvalid && \"border-danger-600 pe-2.5 focus-within:border-danger-600 focus-within:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t}}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{invalid && (\n\t\t\t\t\t<div className=\"pointer-events-none order-last select-none text-danger-600\">\n\t\t\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\t\t\t{[\"The value entered for the\", props.name, \"input has failed validation.\"].filter(Boolean).join(\" \")}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<Warning aria-hidden weight=\"fill\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</InputContext.Provider>\n\t);\n};\n\nexport { Input, InputCapture };\nexport type { InputProps, InputCaptureProps };\n","import { Eye } from \"@phosphor-icons/react/Eye\";\nimport { EyeClosed } from \"@phosphor-icons/react/EyeClosed\";\nimport { forwardRef, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Input, InputCapture } from \"./input\";\nimport type { InputType, WithAutoComplete, WithInvalid } from \"./types\";\n\ntype PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tWithInvalid &\n\tWithAutoComplete;\n\ntype PasswordInputType = Extract<InputType, \"text\" | \"password\">;\n\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((props, ref) => {\n\tconst [showPassword, setShowPassword] = useState<boolean>(false);\n\tconst type: PasswordInputType = showPassword ? \"text\" : \"password\";\n\tconst EyeCon = showPassword ? Eye : EyeClosed;\n\n\treturn (\n\t\t<Input type={type} ref={ref} {...props}>\n\t\t\t<InputCapture />\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\tclassName=\"ml-1 cursor-pointer bg-inherit p-0 text-body hover:text-strong\"\n\t\t\t\tonClick={() => {\n\t\t\t\t\tsetShowPassword((s) => !s);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span className=\"sr-only\">Turn password visibility {showPassword ? \"off\" : \"on\"}</span>\n\t\t\t\t<EyeCon aria-hidden />\n\t\t\t</button>\n\t\t</Input>\n\t);\n});\nPasswordInput.displayName = \"PasswordInput\";\n\nexport { PasswordInput };\nexport type { PasswordInputProps };\n"],"mappings":"gFAAA,OAAS,WAAAA,MAAe,gCAExB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,EAAY,UAAAC,MAAc,QAqB3D,cAAAC,EAgHE,QAAAC,MAhHF,oBANH,IAAMC,EAAQC,EAAyC,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAiB,CAC3G,IAAMC,EAAc,EAAQJ,EACtBK,EAAWC,EAA4B,IAAI,EAEjD,OAAIF,EAEFR,EAACW,EAAA,CAAe,UAAWN,EAAW,aAAcE,EAAc,SAAUE,EAAW,GAAGH,EACxF,SAAAF,EACF,EAKDJ,EAACW,EAAA,CAAgB,GAAGL,EAAO,UAAWD,EAAW,aAAcE,EAAc,SAAUE,EACtF,SAAAT,EAACY,EAAA,CAAc,GAAGN,EAAO,EAC1B,CAEF,CAAC,EACDJ,EAAM,YAAc,QAOpB,IAAMU,EAAeT,EACpB,CAAC,CAAE,eAAgBU,EAAc,UAAAR,EAAW,QAAAS,EAAU,GAAO,GAAGC,CAAU,EAAGC,IAAQ,CACpF,GAAM,CACL,eAAgBC,EAChB,QAASC,EACT,aAAcC,EACd,SAAUC,EACV,GAAGC,CACJ,EAAIC,EAAWC,CAAY,EACrBC,EAAcP,GAAkBC,GAAcL,GAAgBC,EAC9DR,EAAQ,CAAE,GAAGe,EAAK,GAAGN,EAAW,KAAMA,EAAU,MAAQM,EAAI,MAAQ,MAAO,EAEjF,OACCrB,EAAC,SACA,eAAcwB,EACd,UAAWC,EAAG,yEAA0EpB,CAAS,EACjG,IAAKqB,EAAYV,EAAKG,EAAiBC,CAAW,EACjD,GAAGd,EACL,CAEF,CACD,EACAM,EAAa,YAAc,eAc3B,IAAMW,EAAeI,EAAgC,CAAE,QAAS,GAAO,SAAU,CAAE,QAAS,IAAK,CAAE,CAAC,EAiB9FhB,EAAiB,CAAC,CACvB,eAAgBE,EAChB,SAAAT,EACA,UAAAC,EACA,aAAAE,EACA,SAAAE,EACA,QAAAK,EACA,MAAAc,EACA,KAAAC,EACA,GAAGvB,CACJ,IAA2B,CAC1B,IAAMkB,EAAcX,GAAgBC,EAEpC,OACCd,EAACuB,EAAa,SAAb,CACA,MAAO,CACN,eAAgBV,EAChB,QAAAC,EACA,KAAAe,EACA,GAAGvB,EACH,aAAAC,EACA,SAAAE,CACD,EAEA,SAAAR,EAAC,OACA,eAAcuB,EACd,UAAWC,EACV,6SACA,qIACA,wFACAD,GAAe,yFACfnB,CACD,EACA,QAAS,IAAM,CACdI,GAAU,SAAS,MAAM,CAC1B,EACA,MAAOmB,EAEN,UAAAxB,EACAU,GACAb,EAAC,OAAI,UAAU,6DACd,UAAAD,EAAC,QAAK,UAAU,UACd,UAAC,4BAA6BM,EAAM,KAAM,8BAA8B,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACpG,EACAN,EAAC8B,EAAA,CAAQ,cAAW,GAAC,OAAO,OAAO,GACpC,GAEF,EACD,CAEF,ECjJA,OAAS,OAAAC,MAAW,4BACpB,OAAS,aAAAC,MAAiB,kCAC1B,OAAS,cAAAC,EAAY,YAAAC,MAAgB,QAkBlC,cAAAC,EASC,QAAAC,MATD,oBAPH,IAAMC,EAAgBC,EAAiD,CAACC,EAAOC,IAAQ,CACtF,GAAM,CAACC,EAAcC,CAAe,EAAIC,EAAkB,EAAK,EAI/D,OACCP,EAACQ,EAAA,CAAM,KAJwBH,EAAe,OAAS,WAIpC,IAAKD,EAAM,GAAGD,EAChC,UAAAJ,EAACU,EAAA,EAAa,EACdT,EAAC,UACA,KAAK,SACL,SAAU,GACV,UAAU,iEACV,QAAS,IAAM,CACdM,EAAiB,GAAM,CAAC,CAAC,CAC1B,EAEA,UAAAN,EAAC,QAAK,UAAU,UAAU,sCAA0BK,EAAe,MAAQ,MAAK,EAChFN,EAdYM,EAAeK,EAAMC,EAchC,CAAO,cAAW,GAAC,GACrB,GACD,CAEF,CAAC,EACDV,EAAc,YAAc","names":["Warning","createContext","forwardRef","useContext","useRef","jsx","jsxs","Input","forwardRef","children","className","props","forwardedRef","hasChildren","innerRef","useRef","InputContainer","InputCapture","_ariaInvalid","invalid","restProps","ref","ctxAriaInvalid","ctxInvalid","ctxForwardedRef","ctxInnerRef","ctx","useContext","InputContext","ariaInvalid","cx","composeRefs","createContext","style","type","Warning","Eye","EyeClosed","forwardRef","useState","jsx","jsxs","PasswordInput","forwardRef","props","ref","showPassword","setShowPassword","useState","Input","InputCapture","Eye","EyeClosed"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/radio-group.d.ts

@@ -7,7 +7,7 @@ import { W as WithAsChild } from './as-child-Cvu56SuO.js';
 /**
  * A group of radio items. It manages the state of the children radios. Unstyled and simple.
  */
-declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "as" | "children"> & {
+declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "children" | "as"> & {
     children?: ReactNode;
 } & react.RefAttributes<HTMLElement>>;
 /**
@@ -42,7 +42,7 @@ declare const RadioIndicator: ({ children, className, ...props }: RadioIndicator
 /**
  * A group of radio list items. Use RadioListItem as direct children.
  */
-declare const RadioGroupList: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "as" | "children"> & {
+declare const RadioGroupList: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "children" | "as"> & {
     children?: ReactNode;
 } & react.RefAttributes<HTMLElement>>;
 /**
@@ -66,7 +66,7 @@ declare const RadioItemContent: ({ asChild, children, className, ...props }: Rad
 /**
  * An inline group of radio buttons. Use RadioButton as direct children.
  */
-declare const RadioButtonGroup: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "as" | "children"> & {
+declare const RadioButtonGroup: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "children" | "as"> & {
     children?: ReactNode;
 } & react.RefAttributes<HTMLElement>>;
 /**
@@ -75,5 +75,11 @@ declare const RadioButtonGroup: react.ForwardRefExoticComponent<Omit<RadioGroupP
 declare const RadioButton: react.ForwardRefExoticComponent<Omit<RadioProps, "children"> & {
     children?: ReactNode;
 } & react.RefAttributes<HTMLDivElement>>;
+type RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * A sandbox container for input elements composed within radio group items.
+ * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.
+ */
+declare const RadioInputSandbox: ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => react_jsx_runtime.JSX.Element;
 
-export { RadioButton, RadioButtonGroup, RadioCard, RadioGroup, RadioGroupList, RadioIndicator, RadioItem, RadioItemContent, RadioListItem };
+export { RadioButton, RadioButtonGroup, RadioCard, RadioGroup, RadioGroupList, RadioIndicator, RadioInputSandbox, RadioItem, RadioItemContent, RadioListItem };

package/dist/radio-group.js

@@ -1,2 +1,2 @@
-import{a as s}from"./chunk-A5H52ODC.js";import{Radio as c,RadioGroup as v}from"@headlessui/react";import{Slot as P}from"@radix-ui/react-slot";import l from"clsx";import{createContext as C,forwardRef as i,useContext as m}from"react";import{Fragment as u,jsx as a}from"react/jsx-runtime";var p=i((e,o)=>a(v,{...e,ref:o}));p.displayName="RadioGroup";var n=C({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),f=i(({children:e,className:o,...r},t)=>a(c,{className:s("group/radio flex cursor-default gap-2 py-1 text-base focus:outline-none aria-enabled:cursor-pointer sm:text-sm [&_label]:cursor-inherit",o),as:"div",...r,ref:t,children:d=>a(n.Provider,{value:d,children:e})}));f.displayName="RadioItem";var I=({checked:e,disabled:o,focus:r,hover:t})=>a("span",{className:s("flex size-4 items-center justify-center rounded-full border border-form",o&&"cursor-default opacity-50",e&&"border-accent-500 bg-accent-500",r&&!o&&"border-accent-600 ring-4 ring-focus-accent",t&&"border-accent-600"),children:e&&a("span",{className:"size-2 rounded-full bg-[#fff]"})}),G=({children:e,className:o,...r})=>{let t=m(n);return a("div",{className:s("radio-indicator inline-flex size-6 select-none items-center justify-center sm:size-5",o),...r,children:e==null?a(I,{...t}):typeof e=="function"?e(t):e})},R=i(({className:e,...o},r)=>a(p,{className:l("-space-y-px",e),...o,ref:r}));R.displayName="RadioGroupList";var b=i(({children:e,className:o,...r},t)=>a(c,{as:"div",className:s("group/radio relative flex select-none gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 enabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:d=>a(u,{children:a(n.Provider,{value:d,children:e})})}));b.displayName="RadioListItem";var h=i(({children:e,className:o,...r},t)=>a(c,{as:"div",className:l("group/radio relative rounded-md border border-card bg-card p-4 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600",o),...r,ref:t,children:d=>a(u,{children:a(n.Provider,{value:d,children:e})})}));h.displayName="RadioCard";var N=({asChild:e=!1,children:o,className:r,...t})=>{let d=m(n);return a(e?P:"div",{className:l("min-w-0 flex-1",d.disabled&&"opacity-50",r),...t,children:o})},y=i(({className:e,...o},r)=>a(p,{className:l("flex flex-row flex-nowrap -space-x-px",e),...o,ref:r}));y.displayName="RadioButtonGroup";var x=i(({children:e,className:o,...r},t)=>a(c,{as:"div",className:s("group/radio relative flex flex-1 select-none items-center justify-center gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md","aria-disabled:opacity-50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 enabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:d=>a(u,{children:a(n.Provider,{value:d,children:e})})}));x.displayName="RadioButton";export{x as RadioButton,y as RadioButtonGroup,h as RadioCard,p as RadioGroup,R as RadioGroupList,G as RadioIndicator,f as RadioItem,N as RadioItemContent,b as RadioListItem};
+import{d as y}from"./chunk-RSEHGHQT.js";import"./chunk-NREABJ6Y.js";import{a as c}from"./chunk-A5H52ODC.js";import{Radio as u,RadioGroup as H}from"@headlessui/react";import{Slot as N}from"@radix-ui/react-slot";import m from"clsx";import{Children as k,cloneElement as L,createContext as E,forwardRef as n,isValidElement as S,useContext as R,useRef as T}from"react";import{Fragment as b,jsx as a}from"react/jsx-runtime";var f=n((e,o)=>a(H,{...e,ref:o}));f.displayName="RadioGroup";var l=E({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),x=n(({children:e,className:o,...r},t)=>a(u,{className:c("group/radio flex cursor-default gap-2 py-1 text-base focus:outline-none aria-enabled:cursor-pointer sm:text-sm [&_label]:cursor-inherit",o),as:"div",...r,ref:t,children:d=>a(l.Provider,{value:d,children:e})}));x.displayName="RadioItem";var z=({checked:e,disabled:o,focus:r,hover:t})=>a("span",{className:c("flex size-4 items-center justify-center rounded-full border border-form",o&&"cursor-default opacity-50",e&&"border-accent-500 bg-accent-500",r&&!o&&"border-accent-600 ring-4 ring-focus-accent",t&&"border-accent-600"),children:e&&a("span",{className:"size-2 rounded-full bg-[#fff]"})}),M=({children:e,className:o,...r})=>{let t=R(l);return a("div",{className:c("radio-indicator inline-flex size-6 select-none items-center justify-center sm:size-5",o),...r,children:e==null?a(z,{...t}):typeof e=="function"?e(t):e})},P=n(({className:e,...o},r)=>a(f,{className:m("-space-y-px",e),...o,ref:r}));P.displayName="RadioGroupList";var v=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:c("group/radio relative flex select-none gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 enabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:d=>a(b,{children:a(l.Provider,{value:d,children:e})})}));v.displayName="RadioListItem";var C=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:m("group/radio relative rounded-md border border-card bg-card p-4 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600",o),...r,ref:t,children:d=>a(b,{children:a(l.Provider,{value:d,children:e})})}));C.displayName="RadioCard";var w=({asChild:e=!1,children:o,className:r,...t})=>{let d=R(l);return a(e?N:"div",{className:m("min-w-0 flex-1",d.disabled&&"opacity-50",r),...t,children:o})},I=n(({className:e,...o},r)=>a(f,{className:m("flex flex-row flex-nowrap -space-x-px",e),...o,ref:r}));I.displayName="RadioButtonGroup";var g=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:c("group/radio relative flex flex-1 select-none items-center justify-center gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md","aria-disabled:opacity-50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 enabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:d=>a(b,{children:a(l.Provider,{value:d,children:e})})}));g.displayName="RadioButton";var B=({children:e,onClick:o,onKeyDown:r,...t})=>{let d=T(null),s=R(l),p=k.only(e),G=s.disabled||!s.checked;return a("div",{ref:d,"aria-disabled":s.disabled,onKeyDown:i=>{if(s.disabled){i.stopPropagation(),i.preventDefault();return}switch(i.key){case"Enter":case"Tab":break;default:i.stopPropagation()}r?.(i)},onClick:i=>{if(s.disabled){i.stopPropagation(),i.preventDefault();return}let h=i.target;y(h)&&window.requestAnimationFrame(()=>{h.focus()}),o?.(i)},...t,children:S(p)?L(p,{disabled:s.disabled||p.props.disabled,tabIndex:G?-1:p.props.tabIndex}):null})};export{g as RadioButton,I as RadioButtonGroup,C as RadioCard,f as RadioGroup,P as RadioGroupList,M as RadioIndicator,B as RadioInputSandbox,x as RadioItem,w as RadioItemContent,v as RadioListItem};
 //# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/radio-group/src/radio-group.tsx"],"sourcesContent":["import { Radio as HeadlessRadio, RadioGroup as HeadlessRadioGroup } from \"@headlessui/react\";\nimport type { RadioGroupProps as HeadlessRadioGroupProps, RadioProps as HeadlessRadioProps } from \"@headlessui/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ElementRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { WithAsChild } from \"../../types\";\n\ntype RadioGroupProps = PropsWithChildren<Omit<HeadlessRadioGroupProps, \"as\" | \"children\">>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n */\nconst RadioGroup = forwardRef<ElementRef<typeof HeadlessRadioGroup>, RadioGroupProps>((props, ref) => (\n\t<HeadlessRadioGroup {...props} ref={ref} />\n));\nRadioGroup.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n */\nconst RadioItem = forwardRef<ElementRef<\"div\">, RadioItemProps>(({ children, className, ...props }, ref) => (\n\t<HeadlessRadio\n\t\tclassName={cx(\n\t\t\t\"group/radio flex cursor-default gap-2 py-1 text-base focus:outline-none aria-enabled:cursor-pointer sm:text-sm [&_label]:cursor-inherit\",\n\t\t\tclassName,\n\t\t)}\n\t\tas=\"div\"\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{(ctx) => <RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>}\n\t</HeadlessRadio>\n));\nRadioItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({ checked, disabled, focus, hover }: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"flex size-4 items-center justify-center rounded-full border border-form\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-500 bg-accent-500\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-4 ring-focus-accent\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-[#fff]\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n */\nconst RadioIndicator = ({ children, className, ...props }: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\"radio-indicator inline-flex size-6 select-none items-center justify-center sm:size-5\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\n/**\n * A group of radio list items. Use RadioListItem as direct children.\n */\nconst RadioGroupList = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"-space-y-px\", className)} {...props} ref={ref} />;\n});\nRadioGroupList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroupList`.\n */\nconst RadioListItem = forwardRef<ElementRef<\"div\">, RadioListItemProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex select-none gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst RadioCard = forwardRef<ElementRef<\"div\">, RadioCardProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={clsx(\n\t\t\t\t\"group/radio relative rounded-md border border-card bg-card p-4 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n */\nconst RadioItemContent = ({ asChild = false, children, className, ...props }: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={clsx(\"min-w-0 flex-1\", ctx.disabled && \"opacity-50\", className)} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\n/**\n * An inline group of radio buttons. Use RadioButton as direct children.\n */\nconst RadioButtonGroup = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)} {...props} ref={ref} />;\n});\nRadioButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioButtonGroup`.\n */\nconst RadioButton = forwardRef<ElementRef<\"div\">, RadioButtonProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex flex-1 select-none items-center justify-center gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\"aria-disabled:opacity-50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioButton.displayName = \"RadioButton\";\n\nexport {\n\t//\n\tRadioButton,\n\tRadioButtonGroup,\n\tRadioCard,\n\tRadioGroup,\n\tRadioGroupList,\n\tRadioIndicator,\n\tRadioItem,\n\tRadioItemContent,\n\tRadioListItem,\n};\n"],"mappings":"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","names":["HeadlessRadio","HeadlessRadioGroup","Slot","clsx","createContext","forwardRef","useContext","Fragment","jsx","RadioGroup","forwardRef","props","ref","HeadlessRadioGroup","RadioStateContext","createContext","RadioItem","children","className","HeadlessRadio","cx","ctx","DefaultRadioIndicator","checked","disabled","focus","hover","RadioIndicator","useContext","RadioGroupList","clsx","RadioListItem","RadioCard","RadioItemContent","asChild","Slot","RadioButtonGroup","RadioButton"]}
+{"version":3,"sources":["../packages/radio-group/src/radio-group.tsx"],"sourcesContent":["import { Radio as HeadlessRadio, RadioGroup as HeadlessRadioGroup } from \"@headlessui/react\";\nimport type { RadioGroupProps as HeadlessRadioGroupProps, RadioProps as HeadlessRadioProps } from \"@headlessui/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useRef } from \"react\";\nimport type { ElementRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport { cx } from \"../../cx\";\nimport { isInput } from \"../../input\";\nimport type { WithAsChild } from \"../../types\";\n\ntype RadioGroupProps = PropsWithChildren<Omit<HeadlessRadioGroupProps, \"as\" | \"children\">>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n */\nconst RadioGroup = forwardRef<ElementRef<typeof HeadlessRadioGroup>, RadioGroupProps>((props, ref) => (\n\t<HeadlessRadioGroup {...props} ref={ref} />\n));\nRadioGroup.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n */\nconst RadioItem = forwardRef<ElementRef<\"div\">, RadioItemProps>(({ children, className, ...props }, ref) => (\n\t<HeadlessRadio\n\t\tclassName={cx(\n\t\t\t\"group/radio flex cursor-default gap-2 py-1 text-base focus:outline-none aria-enabled:cursor-pointer sm:text-sm [&_label]:cursor-inherit\",\n\t\t\tclassName,\n\t\t)}\n\t\tas=\"div\"\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{(ctx) => <RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>}\n\t</HeadlessRadio>\n));\nRadioItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({ checked, disabled, focus, hover }: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"flex size-4 items-center justify-center rounded-full border border-form\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-500 bg-accent-500\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-4 ring-focus-accent\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-[#fff]\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n */\nconst RadioIndicator = ({ children, className, ...props }: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\"radio-indicator inline-flex size-6 select-none items-center justify-center sm:size-5\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\n/**\n * A group of radio list items. Use RadioListItem as direct children.\n */\nconst RadioGroupList = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"-space-y-px\", className)} {...props} ref={ref} />;\n});\nRadioGroupList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroupList`.\n */\nconst RadioListItem = forwardRef<ElementRef<\"div\">, RadioListItemProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex select-none gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst RadioCard = forwardRef<ElementRef<\"div\">, RadioCardProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={clsx(\n\t\t\t\t\"group/radio relative rounded-md border border-card bg-card p-4 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n */\nconst RadioItemContent = ({ asChild = false, children, className, ...props }: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={clsx(\"min-w-0 flex-1\", ctx.disabled && \"opacity-50\", className)} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\n/**\n * An inline group of radio buttons. Use RadioButton as direct children.\n */\nconst RadioButtonGroup = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)} {...props} ref={ref} />;\n});\nRadioButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioButtonGroup`.\n */\nconst RadioButton = forwardRef<ElementRef<\"div\">, RadioButtonProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex flex-1 select-none items-center justify-center gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\"aria-disabled:opacity-50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst RadioInputSandbox = ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-disabled={ctx.disabled}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\n\nexport {\n\t//\n\tRadioButton,\n\tRadioButtonGroup,\n\tRadioCard,\n\tRadioGroup,\n\tRadioGroupList,\n\tRadioIndicator,\n\tRadioInputSandbox,\n\tRadioItem,\n\tRadioItemContent,\n\tRadioListItem,\n};\n"],"mappings":"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","names":["HeadlessRadio","HeadlessRadioGroup","Slot","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","useRef","Fragment","jsx","RadioGroup","forwardRef","props","ref","HeadlessRadioGroup","RadioStateContext","createContext","RadioItem","children","className","HeadlessRadio","cx","ctx","DefaultRadioIndicator","checked","disabled","focus","hover","RadioIndicator","useContext","RadioGroupList","clsx","RadioListItem","RadioCard","RadioItemContent","asChild","Slot","RadioButtonGroup","RadioButton","RadioInputSandbox","onClick","onKeyDown","useRef","singleChild","Children","shouldPreventTabIndex","event","target","isInput","isValidElement","cloneElement"]}

package/dist/select.d.ts

@@ -1,21 +1,24 @@
 import * as _radix_ui_react_separator from '@radix-ui/react-separator';
 import * as react from 'react';
-import { SelectHTMLAttributes, ComponentPropsWithoutRef } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FocusEvent, SelectHTMLAttributes } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { W as WithInvalid } from './types-nznA3HrJ.js';
 
 type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid">;
-type SelectProps = Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, "onValueChange"> & WithInvalid & WithAriaInvalid & {
-    /**
-     * Event handler called when the value changes.
-     */
-    onChange?: (value: string) => void;
-};
 /**
  * Displays a list of options for the user to pick from—triggered by a button.
  */
-declare const Select: ({ "aria-invalid": _ariaInvalid, children, invalid, onChange, ...props }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Select: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectProps, "onValueChange"> & WithInvalid & WithAriaInvalid & {
+    /**
+     * Event handler called when the value changes.
+     */
+    onChange?: ((value: string) => void) | undefined;
+    /**
+     * Event handler called when Select blurs.
+     * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur
+     */
+    onBlur?: ((event: FocusEvent<HTMLButtonElement>) => void) | undefined;
+} & react.RefAttributes<HTMLButtonElement>>;
 /**
  * A group of related options within a select menu. Similar to an html `<optgroup>` element.
  * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.

package/dist/select.js

@@ -1,2 +1,2 @@
-import{b as p}from"./chunk-R3JOSY7M.js";import{a}from"./chunk-A5H52ODC.js";import{CaretDown as f}from"@phosphor-icons/react/CaretDown";import{CaretUp as w}from"@phosphor-icons/react/CaretUp";import{Check as I}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as R,forwardRef as n,useContext as N}from"react";import{jsx as i,jsxs as m}from"react/jsx-runtime";var S=R({}),W=({"aria-invalid":r,children:o,invalid:t,onChange:l,...c})=>i(e.Root,{...c,onValueChange:l,children:i(S.Provider,{value:{"aria-invalid":r,invalid:t},children:o})}),T=e.Group,B=e.Value,v=n(({"aria-invalid":r,className:o,children:t,invalid:l,...c},s)=>{let{"aria-invalid":x,invalid:C}=N(S),d=x??C??r??l;return m(e.Trigger,{"aria-invalid":d,ref:s,className:a("flex h-11 w-full items-center justify-between rounded-md border border-form bg-form px-3 py-2 text-strong placeholder:text-placeholder hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus:border-accent-600 focus:outline-none focus:ring-4 focus:ring-focus-accent focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible:active:border-accent-600 disabled:pointer-events-none disabled:opacity-50 aria-expanded:border-accent-600 aria-expanded:ring-4 aria-expanded:ring-focus-accent sm:h-9 sm:text-sm [&>span]:line-clamp-1 [&>span]:text-left",d&&"border-danger-600 focus:border-danger-600 focus:ring-focus-danger aria-expanded:border-danger-600 aria-expanded:ring-focus-danger",o),...c,children:[t,i(e.Icon,{asChild:!0,children:i(f,{className:"size-4 shrink-0",weight:"bold"})})]})});v.displayName="SelectTrigger";var u=n(({className:r,...o},t)=>i(e.ScrollUpButton,{ref:t,className:a("flex cursor-default items-center justify-center py-1",r),...o,children:i(w,{className:"size-4 shrink-0",weight:"bold"})}));u.displayName="SelectScrollUpButton";var g=n(({className:r,...o},t)=>i(e.ScrollDownButton,{ref:t,className:a("flex cursor-default items-center justify-center py-1",r),...o,children:i(f,{className:"size-4 shrink-0",weight:"bold"})}));g.displayName="SelectScrollDownButton";var P=n(({className:r,children:o,position:t="popper",width:l,...c},s)=>i(e.Portal,{children:m(e.Content,{ref:s,className:a("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-popover shadow-md data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95","bg-popover",t==="popper"&&"max-h-[var(--radix-select-content-available-height)] data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2",l==="trigger"&&"w-[var(--radix-select-trigger-width)]",r),position:t,...c,children:[i(u,{}),i(e.Viewport,{className:a("p-1",t==="popper"&&"h-[var(--radix-select-trigger-height)] w-full"),children:o}),i(g,{})]})}));P.displayName="SelectContent";var h=n(({className:r,...o},t)=>i(e.Label,{ref:t,className:a("px-2 py-1.5 text-sm font-semibold",r),...o}));h.displayName="SelectLabel";var b=n(({className:r,children:o,...t},l)=>m(e.Item,{ref:l,className:a("relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-popover-hover data-state-checked:bg-filled-accent data-state-checked:text-on-filled data-disabled:pointer-events-none data-disabled:opacity-50",r),...t,children:[i(e.ItemText,{children:o}),i(e.ItemIndicator,{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:i(I,{className:"size-4 shrink-0",weight:"bold"})})]}));b.displayName="SelectItem";var y=n(({className:r,...o},t)=>i(p,{ref:t,className:a("-mx-1 my-1 h-px w-auto",r),...o}));y.displayName="SelectSeparator";export{W as Select,P as SelectContent,T as SelectGroup,b as SelectItem,h as SelectLabel,y as SelectSeparator,v as SelectTrigger,B as SelectValue};
+import{a as f}from"./chunk-NREABJ6Y.js";import{b as S}from"./chunk-R3JOSY7M.js";import{a as l}from"./chunk-A5H52ODC.js";import{CaretDown as v}from"@phosphor-icons/react/CaretDown";import{CaretUp as R}from"@phosphor-icons/react/CaretUp";import{Check as I}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as N,forwardRef as a,useContext as T}from"react";import{jsx as i,jsxs as d}from"react/jsx-runtime";var u=N({}),g=a(({"aria-invalid":o,children:r,invalid:t,onBlur:n,onChange:c,...s},m)=>i(e.Root,{...s,onValueChange:c,children:i(u.Provider,{value:{"aria-invalid":o,invalid:t,onBlur:n,ref:m},children:r})}));g.displayName="Select";var B=e.Group,W=e.Value,P=a(({"aria-invalid":o,className:r,children:t,invalid:n,...c},s)=>{let m=T(u),p=m["aria-invalid"]??m.invalid??o??n;return d(e.Trigger,{"aria-invalid":p,className:l("flex h-11 w-full items-center justify-between rounded-md border border-form bg-form px-3 py-2 text-strong placeholder:text-placeholder hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus:border-accent-600 focus:outline-none focus:ring-4 focus:ring-focus-accent focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible:active:border-accent-600 disabled:pointer-events-none disabled:opacity-50 aria-expanded:border-accent-600 aria-expanded:ring-4 aria-expanded:ring-focus-accent sm:h-9 sm:text-sm [&>span]:line-clamp-1 [&>span]:text-left",p&&"border-danger-600 focus:border-danger-600 focus:ring-focus-danger aria-expanded:border-danger-600 aria-expanded:ring-focus-danger",r),ref:f(s,m.ref),...c,children:[t,i(e.Icon,{asChild:!0,children:i(v,{className:"size-4 shrink-0",weight:"bold"})})]})});P.displayName="SelectTrigger";var h=a(({className:o,...r},t)=>i(e.ScrollUpButton,{ref:t,className:l("flex cursor-default items-center justify-center py-1",o),...r,children:i(R,{className:"size-4 shrink-0",weight:"bold"})}));h.displayName="SelectScrollUpButton";var y=a(({className:o,...r},t)=>i(e.ScrollDownButton,{ref:t,className:l("flex cursor-default items-center justify-center py-1",o),...r,children:i(v,{className:"size-4 shrink-0",weight:"bold"})}));y.displayName="SelectScrollDownButton";var b=a(({className:o,children:r,position:t="popper",width:n,...c},s)=>i(e.Portal,{children:d(e.Content,{ref:s,className:l("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-popover shadow-md data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95","bg-popover",t==="popper"&&"max-h-[var(--radix-select-content-available-height)] data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2",n==="trigger"&&"w-[var(--radix-select-trigger-width)]",o),position:t,...c,children:[i(h,{}),i(e.Viewport,{className:l("p-1",t==="popper"&&"h-[var(--radix-select-trigger-height)] w-full"),children:r}),i(y,{})]})}));b.displayName="SelectContent";var x=a(({className:o,...r},t)=>i(e.Label,{ref:t,className:l("px-2 py-1.5 text-sm font-semibold",o),...r}));x.displayName="SelectLabel";var C=a(({className:o,children:r,...t},n)=>d(e.Item,{ref:n,className:l("relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-popover-hover data-state-checked:bg-filled-accent data-state-checked:text-on-filled data-disabled:pointer-events-none data-disabled:opacity-50",o),...t,children:[i(e.ItemText,{children:r}),i(e.ItemIndicator,{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:i(I,{className:"size-4 shrink-0",weight:"bold"})})]}));C.displayName="SelectItem";var w=a(({className:o,...r},t)=>i(S,{ref:t,className:l("-mx-1 my-1 h-px w-auto",o),...r}));w.displayName="SelectSeparator";export{g as Select,b as SelectContent,B as SelectGroup,C as SelectItem,x as SelectLabel,w as SelectSeparator,P as SelectTrigger,W as SelectValue};
 //# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/select/src/select.tsx"],"sourcesContent":["import { CaretDown } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUp } from \"@phosphor-icons/react/CaretUp\";\nimport { Check } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type { ComponentPropsWithoutRef, ElementRef, SelectHTMLAttributes } from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { WithInvalid } from \"../../input\";\nimport { Separator } from \"../../separator\";\n\ntype WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, \"aria-invalid\">;\ntype SelectContextType = WithInvalid & WithAriaInvalid;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, \"onValueChange\"> &\n\tWithInvalid &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Event handler called when the value changes.\n\t\t */\n\t\tonChange?: (value: string) => void;\n\t};\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n */\nconst Select = ({ \"aria-invalid\": _ariaInvalid, children, invalid, onChange, ...props }: SelectProps) => {\n\treturn (\n\t\t<SelectPrimitive.Root {...props} onValueChange={onChange}>\n\t\t\t<SelectContext.Provider value={{ \"aria-invalid\": _ariaInvalid, invalid }}>{children}</SelectContext.Provider>\n\t\t</SelectPrimitive.Root>\n\t);\n};\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n */\nconst SelectGroup = SelectPrimitive.Group;\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n */\nconst SelectValue = SelectPrimitive.Value;\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & WithAriaInvalid & WithInvalid;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n */\nconst SelectTrigger = forwardRef<ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, children, invalid, ...props }, ref) => {\n\t\tconst { \"aria-invalid\": ctxAriaInvalid, invalid: ctxInvalid } = useContext(SelectContext);\n\t\tconst ariaInvalid = ctxAriaInvalid ?? ctxInvalid ?? _ariaInvalid ?? invalid;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex h-11 w-full items-center justify-between rounded-md border border-form bg-form px-3 py-2 text-strong placeholder:text-placeholder hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus:border-accent-600 focus:outline-none focus:ring-4 focus:ring-focus-accent focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible:active:border-accent-600 disabled:pointer-events-none disabled:opacity-50 aria-expanded:border-accent-600 aria-expanded:ring-4 aria-expanded:ring-focus-accent sm:h-9 sm:text-sm [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\tariaInvalid &&\n\t\t\t\t\t\t\"border-danger-600 focus:border-danger-600 focus:ring-focus-danger aria-expanded:border-danger-600 aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\nconst SelectScrollUpButton = forwardRef<\n\tElementRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<CaretUp className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\nconst SelectScrollDownButton = forwardRef<\n\tElementRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n */\nconst SelectContent = forwardRef<ElementRef<typeof SelectPrimitive.Content>, SelectContentProps>(\n\t({ className, children, position = \"popper\", width, ...props }, ref) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-popover shadow-md data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\"bg-popover\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"max-h-[var(--radix-select-content-available-height)] data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2\",\n\t\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-select-trigger-width)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\"p-1\", position === \"popper\" && \"h-[var(--radix-select-trigger-height)] w-full\")}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nSelectContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n */\nconst SelectLabel = forwardRef<\n\tElementRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label ref={ref} className={cx(\"px-2 py-1.5 text-sm font-semibold\", className)} {...props} />\n));\nSelectLabel.displayName = \"SelectLabel\";\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Contains a `value` prop that will be passed to the `onChange` handler of the `Select` component when selected.\n * Displays the children as the option's text.\n */\nconst SelectItem = forwardRef<\n\tElementRef<typeof SelectPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-popover-hover data-state-checked:bg-filled-accent data-state-checked:text-on-filled data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<Check className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items in the select.\n */\nconst SelectSeparator = forwardRef<ElementRef<typeof Separator>, ComponentPropsWithoutRef<typeof Separator>>(\n\t({ className, ...props }, ref) => (\n\t\t<Separator ref={ref} className={cx(\"-mx-1 my-1 h-px w-auto\", className)} {...props} />\n\t),\n);\nSelectSeparator.displayName = \"SelectSeparator\";\n\nexport {\n\tSelect,\n\tSelectGroup,\n\tSelectValue,\n\tSelectTrigger,\n\tSelectContent,\n\tSelectLabel,\n\tSelectItem,\n\tSelectSeparator,\n\tSelectScrollUpButton,\n\tSelectScrollDownButton,\n};\n"],"mappings":"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","names":["CaretDown","CaretUp","Check","SelectPrimitive","createContext","forwardRef","useContext","jsx","jsxs","SelectContext","createContext","Select","_ariaInvalid","children","invalid","onChange","props","SelectGroup","SelectValue","SelectTrigger","forwardRef","className","ref","ctxAriaInvalid","ctxInvalid","useContext","ariaInvalid","cx","CaretDown","SelectScrollUpButton","CaretUp","SelectScrollDownButton","SelectContent","position","width","SelectLabel","SelectItem","Check","SelectSeparator","Separator"]}
+{"version":3,"sources":["../packages/select/src/select.tsx"],"sourcesContent":["import { CaretDown } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUp } from \"@phosphor-icons/react/CaretUp\";\nimport { Check } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type { ComponentPropsWithoutRef, ElementRef, FocusEvent, Ref, SelectHTMLAttributes } from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../compose-refs\";\nimport { cx } from \"../../cx\";\nimport type { WithInvalid } from \"../../input\";\nimport { Separator } from \"../../separator\";\n\ntype WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, \"aria-invalid\">;\ntype SelectContextType = WithInvalid &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t};\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, \"onValueChange\"> &\n\tWithInvalid &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Event handler called when the value changes.\n\t\t */\n\t\tonChange?: (value: string) => void;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t};\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(\n\t({ \"aria-invalid\": _ariaInvalid, children, invalid, onBlur, onChange, ...props }, ref) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root {...props} onValueChange={onChange}>\n\t\t\t\t<SelectContext.Provider value={{ \"aria-invalid\": _ariaInvalid, invalid, onBlur, ref }}>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nSelect.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n */\nconst SelectGroup = SelectPrimitive.Group;\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n */\nconst SelectValue = SelectPrimitive.Value;\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & WithAriaInvalid & WithInvalid;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n */\nconst SelectTrigger = forwardRef<ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, children, invalid: _invalid, ...props }, ref) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst invalid = ctx[\"aria-invalid\"] ?? ctx.invalid ?? _ariaInvalid ?? _invalid;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={invalid}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex h-11 w-full items-center justify-between rounded-md border border-form bg-form px-3 py-2 text-strong placeholder:text-placeholder hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus:border-accent-600 focus:outline-none focus:ring-4 focus:ring-focus-accent focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible:active:border-accent-600 disabled:pointer-events-none disabled:opacity-50 aria-expanded:border-accent-600 aria-expanded:ring-4 aria-expanded:ring-focus-accent sm:h-9 sm:text-sm [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\tinvalid &&\n\t\t\t\t\t\t\"border-danger-600 focus:border-danger-600 focus:ring-focus-danger aria-expanded:border-danger-600 aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\nconst SelectScrollUpButton = forwardRef<\n\tElementRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<CaretUp className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\nconst SelectScrollDownButton = forwardRef<\n\tElementRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n */\nconst SelectContent = forwardRef<ElementRef<typeof SelectPrimitive.Content>, SelectContentProps>(\n\t({ className, children, position = \"popper\", width, ...props }, ref) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-popover shadow-md data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\"bg-popover\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"max-h-[var(--radix-select-content-available-height)] data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2\",\n\t\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-select-trigger-width)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\"p-1\", position === \"popper\" && \"h-[var(--radix-select-trigger-height)] w-full\")}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nSelectContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n */\nconst SelectLabel = forwardRef<\n\tElementRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label ref={ref} className={cx(\"px-2 py-1.5 text-sm font-semibold\", className)} {...props} />\n));\nSelectLabel.displayName = \"SelectLabel\";\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Contains a `value` prop that will be passed to the `onChange` handler of the `Select` component when selected.\n * Displays the children as the option's text.\n */\nconst SelectItem = forwardRef<\n\tElementRef<typeof SelectPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-popover-hover data-state-checked:bg-filled-accent data-state-checked:text-on-filled data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<Check className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items in the select.\n */\nconst SelectSeparator = forwardRef<ElementRef<typeof Separator>, ComponentPropsWithoutRef<typeof Separator>>(\n\t({ className, ...props }, ref) => (\n\t\t<Separator ref={ref} className={cx(\"-mx-1 my-1 h-px w-auto\", className)} {...props} />\n\t),\n);\nSelectSeparator.displayName = \"SelectSeparator\";\n\nexport {\n\tSelect,\n\tSelectGroup,\n\tSelectValue,\n\tSelectTrigger,\n\tSelectContent,\n\tSelectLabel,\n\tSelectItem,\n\tSelectSeparator,\n\tSelectScrollUpButton,\n\tSelectScrollDownButton,\n};\n"],"mappings":"wHAAA,OAAS,aAAAA,MAAiB,kCAC1B,OAAS,WAAAC,MAAe,gCACxB,OAAS,SAAAC,MAAa,8BACtB,UAAYC,MAAqB,yBAEjC,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAkB,QA2ClD,cAAAC,EA+BD,QAAAC,MA/BC,oBAvBJ,IAAMC,EAAgBC,EAAiC,CAAC,CAAC,EAmBnDC,EAASC,EACd,CAAC,CAAE,eAAgBC,EAAc,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAEhFZ,EAAiB,OAAhB,CAAsB,GAAGW,EAAO,cAAeD,EAC/C,SAAAV,EAACE,EAAc,SAAd,CAAuB,MAAO,CAAE,eAAgBI,EAAc,QAAAE,EAAS,OAAAC,EAAQ,IAAAG,CAAI,EAClF,SAAAL,EACF,EACD,CAGH,EACAH,EAAO,YAAc,SAMrB,IAAMS,EAA8B,QAK9BC,EAA8B,QAO9BC,EAAgBV,EACrB,CAAC,CAAE,eAAgBC,EAAc,UAAAU,EAAW,SAAAT,EAAU,QAASU,EAAU,GAAGN,CAAM,EAAGC,IAAQ,CAC5F,IAAMM,EAAMC,EAAWjB,CAAa,EAC9BM,EAAUU,EAAI,cAAc,GAAKA,EAAI,SAAWZ,GAAgBW,EAEtE,OACChB,EAAiB,UAAhB,CACA,eAAcO,EACd,UAAWY,EACV,soBACAZ,GACC,oIACDQ,CACD,EACA,IAAKK,EAAYT,EAAKM,EAAI,GAAG,EAC5B,GAAGP,EAEH,UAAAJ,EACDP,EAAiB,OAAhB,CAAqB,QAAO,GAC5B,SAAAA,EAACsB,EAAA,CAAU,UAAU,kBAAkB,OAAO,OAAO,EACtD,GACD,CAEF,CACD,EACAP,EAAc,YAAc,gBAE5B,IAAMQ,EAAuBlB,EAG3B,CAAC,CAAE,UAAAW,EAAW,GAAGL,CAAM,EAAGC,IAC3BZ,EAAiB,iBAAhB,CACA,IAAKY,EACL,UAAWQ,EAAG,uDAAwDJ,CAAS,EAC9E,GAAGL,EAEJ,SAAAX,EAACwB,EAAA,CAAQ,UAAU,kBAAkB,OAAO,OAAO,EACpD,CACA,EACDD,EAAqB,YAAc,uBAEnC,IAAME,EAAyBpB,EAG7B,CAAC,CAAE,UAAAW,EAAW,GAAGL,CAAM,EAAGC,IAC3BZ,EAAiB,mBAAhB,CACA,IAAKY,EACL,UAAWQ,EAAG,uDAAwDJ,CAAS,EAC9E,GAAGL,EAEJ,SAAAX,EAACsB,EAAA,CAAU,UAAU,kBAAkB,OAAO,OAAO,EACtD,CACA,EACDG,EAAuB,YAAc,yBAUrC,IAAMC,EAAgBrB,EACrB,CAAC,CAAE,UAAAW,EAAW,SAAAT,EAAU,SAAAoB,EAAW,SAAU,MAAAC,EAAO,GAAGjB,CAAM,EAAGC,IAC/DZ,EAAiB,SAAhB,CACA,SAAAC,EAAiB,UAAhB,CACA,IAAKW,EACL,UAAWQ,EACV,8ZACA,aACAO,IAAa,UACZ,+KACDC,IAAU,WAAa,wCACvBZ,CACD,EACA,SAAUW,EACT,GAAGhB,EAEJ,UAAAX,EAACuB,EAAA,EAAqB,EACtBvB,EAAiB,WAAhB,CACA,UAAWoB,EAAG,MAAOO,IAAa,UAAY,+CAA+C,EAE5F,SAAApB,EACF,EACAP,EAACyB,EAAA,EAAuB,GACzB,EACD,CAEF,EACAC,EAAc,YAAc,gBAK5B,IAAMG,EAAcxB,EAGlB,CAAC,CAAE,UAAAW,EAAW,GAAGL,CAAM,EAAGC,IAC3BZ,EAAiB,QAAhB,CAAsB,IAAKY,EAAK,UAAWQ,EAAG,oCAAqCJ,CAAS,EAAI,GAAGL,EAAO,CAC3G,EACDkB,EAAY,YAAc,cAO1B,IAAMC,EAAazB,EAGjB,CAAC,CAAE,UAAAW,EAAW,SAAAT,EAAU,GAAGI,CAAM,EAAGC,IACrCX,EAAiB,OAAhB,CACA,IAAKW,EACL,UAAWQ,EACV,qQACAJ,CACD,EACC,GAAGL,EAEJ,UAAAX,EAAiB,WAAhB,CAA0B,SAAAO,EAAS,EACpCP,EAAiB,gBAAhB,CAA8B,UAAU,gEACxC,SAAAA,EAAC+B,EAAA,CAAM,UAAU,kBAAkB,OAAO,OAAO,EAClD,GACD,CACA,EACDD,EAAW,YAAc,aAKzB,IAAME,EAAkB3B,EACvB,CAAC,CAAE,UAAAW,EAAW,GAAGL,CAAM,EAAGC,IACzBZ,EAACiC,EAAA,CAAU,IAAKrB,EAAK,UAAWQ,EAAG,yBAA0BJ,CAAS,EAAI,GAAGL,EAAO,CAEtF,EACAqB,EAAgB,YAAc","names":["CaretDown","CaretUp","Check","SelectPrimitive","createContext","forwardRef","useContext","jsx","jsxs","SelectContext","createContext","Select","forwardRef","_ariaInvalid","children","invalid","onBlur","onChange","props","ref","SelectGroup","SelectValue","SelectTrigger","className","_invalid","ctx","useContext","cx","composeRefs","CaretDown","SelectScrollUpButton","CaretUp","SelectScrollDownButton","SelectContent","position","width","SelectLabel","SelectItem","Check","SelectSeparator","Separator"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",