@ngrok/mantle 0.68.5 → 0.68.6

package/dist/checkbox.d.ts

@@ -19,7 +19,7 @@ type CheckedState = boolean | "indeterminate";
  * </form>
  * ```
  */
-declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "checked" | "type"> & WithValidation & {
+declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "type" | "checked"> & WithValidation & {
   /**
    * The controlled checked state of the checkbox. Must be used in conjunction with onChange.
    */

package/dist/command.d.ts

@@ -178,7 +178,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "value" | "onChange" | "type"> & {
+  }, "key" | "asChild" | keyof _$react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & _$react.RefAttributes<HTMLInputElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
@@ -239,7 +239,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -262,7 +262,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "value" | "onSelect"> & {
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "onSelect" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/hooks.d.ts

@@ -1,5 +1,5 @@
 import { n as MarginType, o as useComposedRefs } from "./in-view-DS0PgFGa.js";
-import { RefObject, useEffect } from "react";
+import { RefObject, useLayoutEffect } from "react";
 
 //#region src/hooks/use-breakpoint.d.ts
 /**
@@ -177,7 +177,7 @@ declare function useIsHydrated(): boolean;
 /**
  * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.
  */
-declare const useIsomorphicLayoutEffect: typeof useEffect;
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 //#endregion
 //#region src/hooks/use-matches-media-query.d.ts
 /**

package/dist/hooks.js

@@ -1,2 +1,2 @@
-import{t as e}from"./use-matches-media-query-CojcYxlA.js";import{r as t}from"./browser-only-QPyyfLaB.js";import{n}from"./compose-refs-DeIsFv68.js";import{t as r}from"./use-copy-to-clipboard-B6wH6hDd.js";import{n as i,t as a}from"./use-prefers-reduced-motion-BcwST13S.js";import{t as o}from"./in-view-DiFJ28EF.js";import{useCallback as s,useEffect as c,useLayoutEffect as l,useMemo as u,useReducer as d,useRef as f,useState as p,useSyncExternalStore as m}from"react";const h=[`2xl`,`xl`,`lg`,`md`,`sm`,`xs`,`2xs`],g=[`default`,...h];function _(){return m(j,M,()=>`default`)}function v(e){return m(P(e),I(e),()=>!1)}const y={"2xl":`(min-width: 96rem)`,xl:`(min-width: 80rem)`,lg:`(min-width: 64rem)`,md:`(min-width: 48rem)`,sm:`(min-width: 40rem)`,xs:`(min-width: 30rem)`,"2xs":`(min-width: 22.5rem)`},b={"2xl":`(max-width: 95.99rem)`,xl:`(max-width: 79.99rem)`,lg:`(max-width: 63.99rem)`,md:`(max-width: 47.99rem)`,sm:`(max-width: 39.99rem)`,xs:`(max-width: 29.99rem)`,"2xs":`(max-width: 22.49rem)`};let x=null,S=null;function C(){return x||={"2xl":window.matchMedia(y[`2xl`]),xl:window.matchMedia(y.xl),lg:window.matchMedia(y.lg),md:window.matchMedia(y.md),sm:window.matchMedia(y.sm),xs:window.matchMedia(y.xs),"2xs":window.matchMedia(y[`2xs`])},x}function w(e){return S||={"2xl":window.matchMedia(b[`2xl`]),xl:window.matchMedia(b.xl),lg:window.matchMedia(b.lg),md:window.matchMedia(b.md),sm:window.matchMedia(b.sm),xs:window.matchMedia(b.xs),"2xs":window.matchMedia(b[`2xs`])},S[e]}let T=`default`;const E=new Set;let D=!1;function O(){let e=C();for(let t of h)if(e[t].matches)return t;return`default`}let k=!1;function A(){k||(k=!0,requestAnimationFrame(()=>{k=!1;let e=O();if(e!==T){T=e;for(let e of E)e()}}))}function j(e){if(E.add(e),!D){D=!0;let e=C();T=O();for(let t of Object.values(e))t.addEventListener(`change`,A)}return e(),()=>{if(E.delete(e),E.size===0&&D){D=!1;let e=C();for(let t of Object.values(e))t.removeEventListener(`change`,A)}}}function M(){return T}const N=new Map;function P(e){let t=N.get(e);return t||(t=t=>{let n=w(e),r=!1,i=()=>{r||(r=!0,requestAnimationFrame(()=>{r=!1,t()}))};return n.addEventListener(`change`,i),()=>{n.removeEventListener(`change`,i)}},N.set(e,t),t)}const F=new Map;function I(e){let t=F.get(e);return t||(t=()=>w(e).matches,F.set(e,t),t)}function L(e){let t=f(e);return c(()=>{t.current=e}),u(()=>((...e)=>t.current?.(...e)),[])}function R(e,t){let n=L(e),r=f(0);return c(()=>()=>window.clearTimeout(r.current),[]),s((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}const z=typeof window<`u`?l:c,B=(e=`mantle`)=>u(()=>V(e),[e]);function V(e=`mantle`){return[e.trim()||`mantle`,H()].join(`-`)}function H(){return Math.random().toString(36).substring(2,9)}function U(){let e=i();return u(()=>e?`auto`:`smooth`,[e])}function W(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[s,l]=p(a);return c(()=>{if(!e.current||i&&s)return;function a(){return l(!0),i?void 0:()=>l(!1)}let c={root:t&&t.current||void 0,margin:n,amount:r};return o(e.current,a,c)},[t,e,n,i,r]),s}function G(e,t){switch(t.type){case`push`:return{undoStack:[...e.undoStack,t.snapshot],redoStack:[]};case`undo`:{if(e.undoStack.length===0)return e;let n=e.undoStack.slice(0,-1);return e.undoStack[e.undoStack.length-1]===void 0?e:{undoStack:n,redoStack:[...e.redoStack,t.current]}}case`redo`:{if(e.redoStack.length===0)return e;let n=e.redoStack.slice(0,-1);return e.redoStack[e.redoStack.length-1]===void 0?e:{undoStack:[...e.undoStack,t.current],redoStack:n}}}}function K(){let[e,t]=d(G,{undoStack:[],redoStack:[]}),n=s(e=>{t({type:`push`,snapshot:e})},[]),r=s(n=>{let r=e.undoStack[e.undoStack.length-1];if(r!==void 0)return t({type:`undo`,current:n}),r},[e.undoStack]),i=s(n=>{let r=e.redoStack[e.redoStack.length-1];if(r!==void 0)return t({type:`redo`,current:n}),r},[e.redoStack]);return u(()=>({canUndo:e.undoStack.length>0,canRedo:e.redoStack.length>0,push:n,undo:r,redo:i}),[e.undoStack.length,e.redoStack.length,n,r,i])}export{g as breakpoints,a as getPrefersReducedMotion,_ as useBreakpoint,L as useCallbackRef,n as useComposedRefs,r as useCopyToClipboard,R as useDebouncedCallback,W as useInView,v as useIsBelowBreakpoint,t as useIsHydrated,z as useIsomorphicLayoutEffect,e as useMatchesMediaQuery,i as usePrefersReducedMotion,B as useRandomStableId,U as useScrollBehavior,K as useUndoRedo};
+import{t as e}from"./use-matches-media-query-CojcYxlA.js";import{r as t}from"./browser-only-QPyyfLaB.js";import{n}from"./compose-refs-DeIsFv68.js";import{t as r}from"./use-copy-to-clipboard-B6wH6hDd.js";import{n as i,t as a}from"./use-prefers-reduced-motion-BiG6QGkf.js";import{t as o}from"./in-view-DiFJ28EF.js";import{useCallback as s,useEffect as c,useLayoutEffect as l,useMemo as u,useReducer as d,useRef as f,useState as p,useSyncExternalStore as m}from"react";const h=[`2xl`,`xl`,`lg`,`md`,`sm`,`xs`,`2xs`],g=[`default`,...h];function _(){return m(j,M,()=>`default`)}function v(e){return m(P(e),I(e),()=>!1)}const y={"2xl":`(min-width: 96rem)`,xl:`(min-width: 80rem)`,lg:`(min-width: 64rem)`,md:`(min-width: 48rem)`,sm:`(min-width: 40rem)`,xs:`(min-width: 30rem)`,"2xs":`(min-width: 22.5rem)`},b={"2xl":`(max-width: 95.99rem)`,xl:`(max-width: 79.99rem)`,lg:`(max-width: 63.99rem)`,md:`(max-width: 47.99rem)`,sm:`(max-width: 39.99rem)`,xs:`(max-width: 29.99rem)`,"2xs":`(max-width: 22.49rem)`};let x=null,S=null;function C(){return x||={"2xl":window.matchMedia(y[`2xl`]),xl:window.matchMedia(y.xl),lg:window.matchMedia(y.lg),md:window.matchMedia(y.md),sm:window.matchMedia(y.sm),xs:window.matchMedia(y.xs),"2xs":window.matchMedia(y[`2xs`])},x}function w(e){return S||={"2xl":window.matchMedia(b[`2xl`]),xl:window.matchMedia(b.xl),lg:window.matchMedia(b.lg),md:window.matchMedia(b.md),sm:window.matchMedia(b.sm),xs:window.matchMedia(b.xs),"2xs":window.matchMedia(b[`2xs`])},S[e]}let T=`default`;const E=new Set;let D=!1;function O(){let e=C();for(let t of h)if(e[t].matches)return t;return`default`}let k=!1;function A(){k||(k=!0,requestAnimationFrame(()=>{k=!1;let e=O();if(e!==T){T=e;for(let e of E)e()}}))}function j(e){if(E.add(e),!D){D=!0;let e=C();T=O();for(let t of Object.values(e))t.addEventListener(`change`,A)}return e(),()=>{if(E.delete(e),E.size===0&&D){D=!1;let e=C();for(let t of Object.values(e))t.removeEventListener(`change`,A)}}}function M(){return T}const N=new Map;function P(e){let t=N.get(e);return t||(t=t=>{let n=w(e),r=!1,i=()=>{r||(r=!0,requestAnimationFrame(()=>{r=!1,t()}))};return n.addEventListener(`change`,i),()=>{n.removeEventListener(`change`,i)}},N.set(e,t),t)}const F=new Map;function I(e){let t=F.get(e);return t||(t=()=>w(e).matches,F.set(e,t),t)}function L(e){let t=f(e);return c(()=>{t.current=e}),u(()=>((...e)=>t.current?.(...e)),[])}function R(e,t){let n=L(e),r=f(0);return c(()=>()=>window.clearTimeout(r.current),[]),s((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}const z=typeof window<`u`?l:c,B=(e=`mantle`)=>u(()=>V(e),[e]);function V(e=`mantle`){return[e.trim()||`mantle`,H()].join(`-`)}function H(){return Math.random().toString(36).substring(2,9)}function U(){let e=i();return u(()=>e?`auto`:`smooth`,[e])}function W(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[s,l]=p(a);return c(()=>{if(!e.current||i&&s)return;function a(){return l(!0),i?void 0:()=>l(!1)}let c={root:t&&t.current||void 0,margin:n,amount:r};return o(e.current,a,c)},[t,e,n,i,r]),s}function G(e,t){switch(t.type){case`push`:return{undoStack:[...e.undoStack,t.snapshot],redoStack:[]};case`undo`:{if(e.undoStack.length===0)return e;let n=e.undoStack.slice(0,-1);return e.undoStack[e.undoStack.length-1]===void 0?e:{undoStack:n,redoStack:[...e.redoStack,t.current]}}case`redo`:{if(e.redoStack.length===0)return e;let n=e.redoStack.slice(0,-1);return e.redoStack[e.redoStack.length-1]===void 0?e:{undoStack:[...e.undoStack,t.current],redoStack:n}}}}function K(){let[e,t]=d(G,{undoStack:[],redoStack:[]}),n=s(e=>{t({type:`push`,snapshot:e})},[]),r=s(n=>{let r=e.undoStack[e.undoStack.length-1];if(r!==void 0)return t({type:`undo`,current:n}),r},[e.undoStack]),i=s(n=>{let r=e.redoStack[e.redoStack.length-1];if(r!==void 0)return t({type:`redo`,current:n}),r},[e.redoStack]);return u(()=>({canUndo:e.undoStack.length>0,canRedo:e.redoStack.length>0,push:n,undo:r,redo:i}),[e.undoStack.length,e.redoStack.length,n,r,i])}export{g as breakpoints,a as getPrefersReducedMotion,_ as useBreakpoint,L as useCallbackRef,n as useComposedRefs,r as useCopyToClipboard,R as useDebouncedCallback,W as useInView,v as useIsBelowBreakpoint,t as useIsHydrated,z as useIsomorphicLayoutEffect,e as useMatchesMediaQuery,i as usePrefersReducedMotion,B as useRandomStableId,U as useScrollBehavior,K as useUndoRedo};
 //# sourceMappingURL=hooks.js.map

package/dist/{index-DXuVn00J.d.ts → index-Bw97R9Kw.d.ts}

@@ -23,7 +23,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "
  * />
  * ```
  */
-declare const Input: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & {
+declare const Input: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & {
   children?: _$react.ReactNode | undefined;
 } & _$react.RefAttributes<HTMLInputElement>>;
 type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps;
@@ -41,7 +41,7 @@ type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComple
  * </Input>
  * ```
  */
-declare const InputCapture: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & _$react.RefAttributes<HTMLInputElement>>;
+declare const InputCapture: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & _$react.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/components/input/password-input.d.ts
 type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
@@ -70,7 +70,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
  * />
  * ```
  */
-declare const PasswordInput: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
+declare const PasswordInput: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithValidation & WithAutoComplete & {
   /**
    * Callback for when the visibility of the password value changes.
    */
@@ -100,4 +100,4 @@ declare const PasswordInput: _$react.ForwardRefExoticComponent<Omit<InputHTMLAtt
 declare function isInput(value: unknown): value is HTMLInputElement;
 //#endregion
 export { InputCapture as a, Input as i, PasswordInput as n, InputCaptureProps as o, PasswordInputProps as r, InputProps as s, isInput as t };
-//# sourceMappingURL=index-DXuVn00J.d.ts.map
+//# sourceMappingURL=index-Bw97R9Kw.d.ts.map

package/dist/input.d.ts

@@ -1,3 +1,3 @@
 import { a as WithInputType, i as WithAutoComplete, n as InputType, o as WithValidation, r as Validation, t as AutoComplete } from "./types-Cq6RWU7Q.js";
-import { a as InputCapture, i as Input, n as PasswordInput, o as InputCaptureProps, r as PasswordInputProps, s as InputProps, t as isInput } from "./index-DXuVn00J.js";
+import { a as InputCapture, i as Input, n as PasswordInput, o as InputCaptureProps, r as PasswordInputProps, s as InputProps, t as isInput } from "./index-Bw97R9Kw.js";
 export { AutoComplete, Input, InputCapture, InputCaptureProps, InputProps, InputType, PasswordInput, PasswordInputProps, Validation, WithAutoComplete, WithInputType, WithValidation, isInput };

package/dist/input.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./compose-refs-DeIsFv68.js";import{t as r}from"./is-input-CC_n6EGM.js";import{createContext as i,forwardRef as a,useContext as o,useEffect as s,useRef as c,useState as l}from"react";import u from"clsx";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckCircleIcon as p}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";import{EyeIcon as g}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as _}from"@phosphor-icons/react/EyeClosed";const v=a(({children:e,className:t,...n},r)=>{let i=!!e,a=c(null);return i?d(x,{className:t,forwardedRef:r,innerRef:a,...n,children:e}):d(x,{...n,className:t,forwardedRef:r,innerRef:a,children:d(y,{...n})})});v.displayName=`Input`;const y=a(({"aria-invalid":t,className:r,validation:i,...a},s)=>{let{"aria-invalid":c,forwardedRef:l,innerRef:u,validation:f,...p}=o(b),m=f??i,h=(typeof m==`function`?m():m)||void 0,g=c??t??m===`error`,_={...p,...a,type:a.type??p.type??`text`};return d(`input`,{"aria-invalid":g,"data-validation":h,className:e(`placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden`,r),ref:n(s,l,u),..._})});y.displayName=`InputCapture`;const b=i({validation:void 0,innerRef:{current:null}}),x=({"aria-invalid":t,"aria-disabled":n,children:r,className:i,disabled:a,forwardedRef:o,innerRef:s,style:c,type:l,validation:u,...p})=>{let m=t!=null&&t!==`false`?`error`:typeof u==`function`?u():u;return d(b.Provider,{value:{"aria-invalid":t,"aria-disabled":n,disabled:a,type:l,validation:m,...p,forwardedRef:o,innerRef:s},children:f(`div`,{role:`none`,"data-disabled":(a??n)||void 0,"data-validation":m||void 0,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4 focus-visible:outline-hidden focus-visible:ring-4`,`data-disabled:opacity-50`,`has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5`,`border-form text-strong has-focus-visible:border-accent-600 has-focus-visible:ring-focus-accent`,`data-validation-success:border-success-600 has-focus-visible:data-validation-success:border-success-600 has-focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 has-focus-visible:data-validation-error:border-danger-600 has-focus-visible:data-validation-error:ring-focus-danger`,`autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,i),onClick:()=>{s?.current?.focus()},onKeyDown:()=>{s?.current!==document.activeElement&&s?.current?.focus()},style:c,children:[r,d(S,{name:p.name,validation:m})]})})};x.displayName=`InputContainer`;const S=({name:e,validation:n})=>{switch(n){case`error`:return f(`div`,{className:`text-danger-600 pointer-events-none order-last select-none`,children:[d(`span`,{className:`sr-only`,children:u(`The value entered for the`,e,`input has failed validation.`)}),d(t,{svg:d(m,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return d(`div`,{className:`text-success-600 pointer-events-none order-last select-none`,children:d(t,{svg:d(p,{weight:`fill`})})});case`warning`:return d(`div`,{className:`text-warning-600 pointer-events-none order-last select-none`,children:d(t,{svg:d(h,{weight:`fill`})})});default:return null}};S.displayName=`ValidationFeedback`;const C=a(({onValueVisibilityChange:e,showValue:n=!1,...r},i)=>{let[a,o]=l(n),c=a?`text`:`password`,u=a?g:_;return s(()=>{o(n)},[n]),f(v,{type:c,ref:i,...r,children:[d(y,{}),f(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{o(!a),e?.(!a)},children:[f(`span`,{className:`sr-only`,children:[`Turn password visibility `,a?`off`:`on`]}),d(t,{svg:d(u,{"aria-hidden":!0})})]})]})});C.displayName=`PasswordInput`;export{v as Input,y as InputCapture,C as PasswordInput,r as isInput};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./compose-refs-DeIsFv68.js";import{t as r}from"./use-prefers-reduced-motion-BiG6QGkf.js";import{t as i}from"./is-input-6XDjihnJ.js";import{createContext as a,forwardRef as o,useContext as s,useEffect as c,useRef as l,useState as u}from"react";import d from"clsx";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{CheckCircleIcon as m}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as h}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as g}from"@phosphor-icons/react/WarningDiamond";import{EyeIcon as _}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as v}from"@phosphor-icons/react/EyeClosed";const y=o(({children:e,className:t,...n},r)=>{let i=!!e,a=l(null);return i?f(S,{className:t,forwardedRef:r,innerRef:a,...n,children:e}):f(S,{...n,className:t,forwardedRef:r,innerRef:a,children:f(b,{...n})})});y.displayName=`Input`;const b=o(({"aria-invalid":t,className:r,validation:i,...a},o)=>{let{"aria-invalid":c,forwardedRef:l,innerRef:u,validation:d,...p}=s(x),m=d??i,h=(typeof m==`function`?m():m)||void 0,g=c??t??m===`error`,_={...p,...a,type:a.type??p.type??`text`};return f(`input`,{"aria-invalid":g,"data-validation":h,className:e(`placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden`,r),ref:n(o,l,u),..._})});b.displayName=`InputCapture`;const x=a({validation:void 0,innerRef:{current:null}}),S=({"aria-invalid":t,"aria-disabled":n,children:r,className:i,disabled:a,forwardedRef:o,innerRef:s,style:c,type:l,validation:u,...d})=>{let m=t!=null&&t!==`false`?`error`:typeof u==`function`?u():u;return f(x.Provider,{value:{"aria-invalid":t,"aria-disabled":n,disabled:a,type:l,validation:m,...d,forwardedRef:o,innerRef:s},children:p(`div`,{role:`none`,"data-disabled":(a??n)||void 0,"data-validation":m||void 0,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4`,`data-disabled:opacity-50`,`has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5`,`border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent`,`data-validation-success:border-success-600 focus-within:data-validation-success:border-success-600 focus-within:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 focus-within:data-validation-warning:border-warning-600 focus-within:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 focus-within:data-validation-error:border-danger-600 focus-within:data-validation-error:ring-focus-danger`,`autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,i),onClick:()=>{s?.current?.focus()},onKeyDown:()=>{s?.current!==document.activeElement&&s?.current?.focus()},style:c,children:[r,f(C,{name:d.name,validation:m})]})})};S.displayName=`InputContainer`;const C=({name:e,validation:n})=>{switch(n){case`error`:return p(`div`,{className:`text-danger-600 pointer-events-none order-last select-none`,children:[f(`span`,{className:`sr-only`,children:d(`The value entered for the`,e,`input has failed validation.`)}),f(t,{svg:f(h,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return f(`div`,{className:`text-success-600 pointer-events-none order-last select-none`,children:f(t,{svg:f(m,{weight:`fill`})})});case`warning`:return f(`div`,{className:`text-warning-600 pointer-events-none order-last select-none`,children:f(t,{svg:f(g,{weight:`fill`})})});default:return null}};C.displayName=`ValidationFeedback`;const w=o(({onValueVisibilityChange:e,showValue:n=!1,...i},a)=>{let[o,s]=u(n),d=o?`text`:`password`,m=o?_:v,h=l(null),g=l(null);return c(()=>{s(n)},[n]),p(y,{type:d,ref:a,...i,children:[f(b,{}),p(`button`,{ref:h,type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{g.current&&=(g.current.cancel(),null);let t=!o;s(t),e?.(t);let n=h.current;n&&!r()&&(g.current=n.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),g.current.onfinish=()=>{g.current=null})},children:[p(`span`,{className:`sr-only`,children:[`Turn password visibility `,o?`off`:`on`]}),f(t,{svg:f(m,{"aria-hidden":!0})})]})]})});w.displayName=`PasswordInput`;export{y as Input,b as InputCapture,w as PasswordInput,i as isInput};
 //# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["clsx"],"sources":["../src/components/input/input.tsx","../src/components/input/password-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentRef,\n\tForwardedRef,\n\tInputHTMLAttributes,\n\tMutableRefObject,\n\tPropsWithChildren,\n} from \"react\";\nimport { createContext, forwardRef, useContext, useRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { Validation, WithAutoComplete, WithInputType, WithValidation } from \"./types.js\";\n\ntype BaseProps = WithAutoComplete & WithInputType & WithValidation;\n\n/**\n * The props for the `Input` component.\n */\ntype InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps &\n\tPropsWithChildren;\n\n/**\n * Used to create interactive controls for web-based forms in order to accept data from the user.\n * A versatile input element that supports various types, validation states, and can be composed with other elements.\n *\n * @see https://mantle.ngrok.com/components/input\n *\n * @example\n * ```tsx\n * <Input\n *   type=\"email\"\n *   placeholder=\"Enter your email\"\n *   validation=\"success\"\n * />\n * ```\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n\t({ children, className, ...props }, forwardedRef) => {\n\t\tconst hasChildren = Boolean(children);\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\n\t\tif (hasChildren) {\n\t\t\treturn (\n\t\t\t\t<InputContainer\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tforwardedRef={forwardedRef}\n\t\t\t\t\tinnerRef={innerRef}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</InputContainer>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<InputContainer\n\t\t\t\t{...props}\n\t\t\t\tclassName={className}\n\t\t\t\tforwardedRef={forwardedRef}\n\t\t\t\tinnerRef={innerRef}\n\t\t\t>\n\t\t\t\t<InputCapture {...props} />\n\t\t\t</InputContainer>\n\t\t);\n\t},\n);\nInput.displayName = \"Input\";\n\ntype InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps;\n\n/**\n * The actual <input /> element that captures user input.\n * Used internally by Input component or when you need direct control over the input element.\n *\n * @see https://mantle.ngrok.com/components/input\n *\n * @example\n * ```tsx\n * <Input>\n *   <InputCapture />\n *   <Icon svg={<SearchIcon />} />\n * </Input>\n * ```\n */\nconst InputCapture = forwardRef<HTMLInputElement, InputCaptureProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, validation: _validation, ...restProps }, ref) => {\n\t\tconst {\n\t\t\t\"aria-invalid\": ctxAriaInvalid,\n\t\t\tforwardedRef: ctxForwardedRef,\n\t\t\tinnerRef: ctxInnerRef,\n\t\t\tvalidation: ctxValidation,\n\t\t\t...ctx\n\t\t} = useContext(InputContext);\n\n\t\tconst validation = ctxValidation ?? _validation;\n\t\tconst validationValue =\n\t\t\t(typeof validation === \"function\" ? validation() : validation) || undefined;\n\t\tconst ariaInvalid = ctxAriaInvalid ?? _ariaInvalid ?? validation === \"error\";\n\t\tconst props = {\n\t\t\t...ctx,\n\t\t\t...restProps,\n\t\t\ttype: restProps.type ?? ctx.type ?? \"text\",\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validationValue}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\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>({\n\tvalidation: undefined,\n\tinnerRef: { current: null },\n});\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\t\"aria-disabled\": _ariaDisabled,\n\tchildren,\n\tclassName,\n\tdisabled,\n\tforwardedRef,\n\tinnerRef,\n\tstyle,\n\ttype,\n\tvalidation: _validation,\n\t...props\n}: InputContainerProps) => {\n\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\tconst validation = isInvalid\n\t\t? \"error\"\n\t\t: typeof _validation === \"function\"\n\t\t\t? _validation()\n\t\t\t: _validation;\n\treturn (\n\t\t<InputContext.Provider\n\t\t\tvalue={{\n\t\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\t\tdisabled,\n\t\t\t\ttype,\n\t\t\t\tvalidation,\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\trole=\"none\"\n\t\t\t\tdata-disabled={(disabled ?? _ariaDisabled) || undefined}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4 focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"data-disabled:opacity-50\",\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-5\",\n\t\t\t\t\t\"border-form text-strong has-focus-visible:border-accent-600 has-focus-visible:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 has-focus-visible:data-validation-success:border-success-600 has-focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 has-focus-visible:data-validation-error:border-danger-600 has-focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\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\tonKeyDown={() => {\n\t\t\t\t\tif (innerRef?.current !== document.activeElement) {\n\t\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t\t}\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<ValidationFeedback name={props.name} validation={validation} />\n\t\t\t</div>\n\t\t</InputContext.Provider>\n\t);\n};\nInputContainer.displayName = \"InputContainer\";\n\nexport { Input, InputCapture };\nexport type { InputProps, InputCaptureProps };\n\nconst ValidationFeedback = ({\n\tname,\n\tvalidation,\n}: {\n\tname?: string;\n\tvalidation: Validation | undefined;\n}) => {\n\tswitch (validation) {\n\t\tcase \"error\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-danger-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\t\t{clsx(\"The value entered for the\", name, \"input has failed validation.\")}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Icon svg={<WarningIcon aria-hidden weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"success\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-success-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<Icon svg={<CheckCircleIcon weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"warning\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-warning-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<Icon svg={<WarningDiamondIcon weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\nValidationFeedback.displayName = \"ValidationFeedback\";\n","\"use client\";\n\nimport { EyeIcon } from \"@phosphor-icons/react/Eye\";\nimport { EyeClosedIcon } from \"@phosphor-icons/react/EyeClosed\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Input, InputCapture } from \"./input.js\";\nimport type { InputType, WithAutoComplete, WithValidation } from \"./types.js\";\n\ntype PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tWithValidation &\n\tWithAutoComplete & {\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\n/**\n * A specialized input component for password entry with a toggle button to show/hide the password value.\n * Provides enhanced security UX by allowing users to verify their input while maintaining privacy.\n *\n * @see https://mantle.ngrok.com/components/input\n *\n * @example\n * ```tsx\n * <PasswordInput\n *   placeholder=\"Enter your password\"\n *   showValue={false}\n *   onValueVisibilityChange={(visible) => console.log('Password visible:', visible)}\n * />\n * ```\n */\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n\t({ 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 ? EyeIcon : EyeClosedIcon;\n\n\t\tuseEffect(() => {\n\t\t\tsetShowPassword(showValue);\n\t\t}, [showValue]);\n\n\t\treturn (\n\t\t\t<Input type={type} ref={ref} {...props}>\n\t\t\t\t<InputCapture />\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=\"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0\"\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<Icon svg={<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"],"mappings":"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"}
+{"version":3,"file":"input.js","names":["clsx"],"sources":["../src/components/input/input.tsx","../src/components/input/password-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentRef,\n\tForwardedRef,\n\tInputHTMLAttributes,\n\tMutableRefObject,\n\tPropsWithChildren,\n} from \"react\";\nimport { createContext, forwardRef, useContext, useRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { Validation, WithAutoComplete, WithInputType, WithValidation } from \"./types.js\";\n\ntype BaseProps = WithAutoComplete & WithInputType & WithValidation;\n\n/**\n * The props for the `Input` component.\n */\ntype InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps &\n\tPropsWithChildren;\n\n/**\n * Used to create interactive controls for web-based forms in order to accept data from the user.\n * A versatile input element that supports various types, validation states, and can be composed with other elements.\n *\n * @see https://mantle.ngrok.com/components/input\n *\n * @example\n * ```tsx\n * <Input\n *   type=\"email\"\n *   placeholder=\"Enter your email\"\n *   validation=\"success\"\n * />\n * ```\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n\t({ children, className, ...props }, forwardedRef) => {\n\t\tconst hasChildren = Boolean(children);\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\n\t\tif (hasChildren) {\n\t\t\treturn (\n\t\t\t\t<InputContainer\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tforwardedRef={forwardedRef}\n\t\t\t\t\tinnerRef={innerRef}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</InputContainer>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<InputContainer\n\t\t\t\t{...props}\n\t\t\t\tclassName={className}\n\t\t\t\tforwardedRef={forwardedRef}\n\t\t\t\tinnerRef={innerRef}\n\t\t\t>\n\t\t\t\t<InputCapture {...props} />\n\t\t\t</InputContainer>\n\t\t);\n\t},\n);\nInput.displayName = \"Input\";\n\ntype InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps;\n\n/**\n * The actual <input /> element that captures user input.\n * Used internally by Input component or when you need direct control over the input element.\n *\n * @see https://mantle.ngrok.com/components/input\n *\n * @example\n * ```tsx\n * <Input>\n *   <InputCapture />\n *   <Icon svg={<SearchIcon />} />\n * </Input>\n * ```\n */\nconst InputCapture = forwardRef<HTMLInputElement, InputCaptureProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, validation: _validation, ...restProps }, ref) => {\n\t\tconst {\n\t\t\t\"aria-invalid\": ctxAriaInvalid,\n\t\t\tforwardedRef: ctxForwardedRef,\n\t\t\tinnerRef: ctxInnerRef,\n\t\t\tvalidation: ctxValidation,\n\t\t\t...ctx\n\t\t} = useContext(InputContext);\n\n\t\tconst validation = ctxValidation ?? _validation;\n\t\tconst validationValue =\n\t\t\t(typeof validation === \"function\" ? validation() : validation) || undefined;\n\t\tconst ariaInvalid = ctxAriaInvalid ?? _ariaInvalid ?? validation === \"error\";\n\t\tconst props = {\n\t\t\t...ctx,\n\t\t\t...restProps,\n\t\t\ttype: restProps.type ?? ctx.type ?? \"text\",\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validationValue}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\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>({\n\tvalidation: undefined,\n\tinnerRef: { current: null },\n});\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\t\"aria-disabled\": _ariaDisabled,\n\tchildren,\n\tclassName,\n\tdisabled,\n\tforwardedRef,\n\tinnerRef,\n\tstyle,\n\ttype,\n\tvalidation: _validation,\n\t...props\n}: InputContainerProps) => {\n\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\tconst validation = isInvalid\n\t\t? \"error\"\n\t\t: typeof _validation === \"function\"\n\t\t\t? _validation()\n\t\t\t: _validation;\n\treturn (\n\t\t<InputContext.Provider\n\t\t\tvalue={{\n\t\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\t\tdisabled,\n\t\t\t\ttype,\n\t\t\t\tvalidation,\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\trole=\"none\"\n\t\t\t\tdata-disabled={(disabled ?? _ariaDisabled) || undefined}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4\",\n\t\t\t\t\t\"data-disabled:opacity-50\",\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-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\t\"data-validation-success:border-success-600 focus-within:data-validation-success:border-success-600 focus-within:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 focus-within:data-validation-warning:border-warning-600 focus-within:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 focus-within:data-validation-error:border-danger-600 focus-within:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\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\tonKeyDown={() => {\n\t\t\t\t\tif (innerRef?.current !== document.activeElement) {\n\t\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t\t}\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<ValidationFeedback name={props.name} validation={validation} />\n\t\t\t</div>\n\t\t</InputContext.Provider>\n\t);\n};\nInputContainer.displayName = \"InputContainer\";\n\nexport { Input, InputCapture };\nexport type { InputProps, InputCaptureProps };\n\nconst ValidationFeedback = ({\n\tname,\n\tvalidation,\n}: {\n\tname?: string;\n\tvalidation: Validation | undefined;\n}) => {\n\tswitch (validation) {\n\t\tcase \"error\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-danger-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\t\t{clsx(\"The value entered for the\", name, \"input has failed validation.\")}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Icon svg={<WarningIcon aria-hidden weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"success\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-success-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<Icon svg={<CheckCircleIcon weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"warning\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-warning-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<Icon svg={<WarningDiamondIcon weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\nValidationFeedback.displayName = \"ValidationFeedback\";\n","\"use client\";\n\nimport { EyeIcon } from \"@phosphor-icons/react/Eye\";\nimport { EyeClosedIcon } from \"@phosphor-icons/react/EyeClosed\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { getPrefersReducedMotion } from \"../../hooks/use-prefers-reduced-motion.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Input, InputCapture } from \"./input.js\";\nimport type { InputType, WithAutoComplete, WithValidation } from \"./types.js\";\n\ntype PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tWithValidation &\n\tWithAutoComplete & {\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\n/**\n * A specialized input component for password entry with a toggle button to show/hide the password value.\n * Provides enhanced security UX by allowing users to verify their input while maintaining privacy.\n *\n * @see https://mantle.ngrok.com/components/input\n *\n * @example\n * ```tsx\n * <PasswordInput\n *   placeholder=\"Enter your password\"\n *   showValue={false}\n *   onValueVisibilityChange={(visible) => console.log('Password visible:', visible)}\n * />\n * ```\n */\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n\t({ 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 ? EyeIcon : EyeClosedIcon;\n\t\tconst buttonRef = useRef<HTMLButtonElement>(null);\n\t\tconst animationRef = useRef<Animation | null>(null);\n\n\t\tuseEffect(() => {\n\t\t\tsetShowPassword(showValue);\n\t\t}, [showValue]);\n\n\t\treturn (\n\t\t\t<Input type={type} ref={ref} {...props}>\n\t\t\t\t<InputCapture />\n\t\t\t\t<button\n\t\t\t\t\tref={buttonRef}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tclassName=\"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t// Cancel any in-flight animation so rapid clicks are never blocked\n\t\t\t\t\t\tif (animationRef.current) {\n\t\t\t\t\t\t\tanimationRef.current.cancel();\n\t\t\t\t\t\t\tanimationRef.current = null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Toggle immediately so the state is always correct\n\t\t\t\t\t\tconst nextShowPassword = !showPassword;\n\t\t\t\t\t\tsetShowPassword(nextShowPassword);\n\t\t\t\t\t\tonValueVisibilityChange?.(nextShowPassword);\n\n\t\t\t\t\t\tconst button = buttonRef.current;\n\t\t\t\t\t\tif (button && !getPrefersReducedMotion()) {\n\t\t\t\t\t\t\tconst duration = 200;\n\t\t\t\t\t\t\tanimationRef.current = button.animate(\n\t\t\t\t\t\t\t\t[{ transform: \"scaleY(0)\" }, { transform: \"scaleY(1)\" }],\n\t\t\t\t\t\t\t\t{ duration, easing: \"ease-out\" },\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tanimationRef.current.onfinish = () => {\n\t\t\t\t\t\t\t\tanimationRef.current = null;\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}\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<Icon svg={<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"],"mappings":"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"}

package/dist/{is-input-CC_n6EGM.js → is-input-6XDjihnJ.js}

@@ -1,2 +1,2 @@
 function e(e){return e!=null&&e instanceof HTMLInputElement}export{e as t};
-//# sourceMappingURL=is-input-CC_n6EGM.js.map
+//# sourceMappingURL=is-input-6XDjihnJ.js.map

package/dist/{is-input-CC_n6EGM.js.map → is-input-6XDjihnJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"is-input-CC_n6EGM.js","names":[],"sources":["../src/components/input/is-input.ts"],"sourcesContent":["/**\n * Type guard for an HTMLInputElement.\n *\n * @example\n * ```tsx\n * function handleElement(element: HTMLElement) {\n *   if (isInput(element)) {\n *     // TypeScript now knows element is HTMLInputElement\n *     element.value = \"new value\";\n *     element.focus();\n *   }\n * }\n * ```\n */\nexport function isInput(value: unknown): value is HTMLInputElement {\n\treturn value != null && value instanceof HTMLInputElement;\n}\n"],"mappings":"AAcA,SAAgB,EAAQ,EAA2C,CAClE,OAAO,GAAS,MAAQ,aAAiB"}
+{"version":3,"file":"is-input-6XDjihnJ.js","names":[],"sources":["../src/components/input/is-input.ts"],"sourcesContent":["/**\n * Type guard for an HTMLInputElement.\n *\n * @example\n * ```tsx\n * function handleElement(element: HTMLElement) {\n *   if (isInput(element)) {\n *     // TypeScript now knows element is HTMLInputElement\n *     element.value = \"new value\";\n *     element.focus();\n *   }\n * }\n * ```\n */\nexport function isInput(value: unknown): value is HTMLInputElement {\n\treturn value != null && value instanceof HTMLInputElement;\n}\n"],"mappings":"AAcA,SAAgB,EAAQ,EAA2C,CAClE,OAAO,GAAS,MAAQ,aAAiB"}

package/dist/multi-select.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./compose-refs-DeIsFv68.js";import{n as i}from"./separator-BuP5aENE.js";import{t as a}from"./use-prefers-reduced-motion-BcwST13S.js";import{createContext as o,forwardRef as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{XIcon as g}from"@phosphor-icons/react/X";import{CheckIcon as _}from"@phosphor-icons/react/Check";import*as v from"@ariakit/react";import{LockIcon as y}from"@phosphor-icons/react/Lock";const b=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),x=[],S=o({current:null}),C=o({current:[]}),w=o({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),T=({children:e,defaultSelectedValue:t=[],...n})=>{let r=f(null),i=f(void 0),a=f(null),o=f([]),s=d(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return m(S.Provider,{value:r,children:m(w.Provider,{value:s,children:m(C.Provider,{value:o,children:m(v.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})};T.displayName=`MultiSelect`;const E=s(({"aria-invalid":t,className:n,children:i,onKeyDown:a,onMouseDown:o,validation:s,...c},u)=>{let d=l(S),{inputRef:f}=l(w),p=v.useComboboxContext(),h=t!=null&&t!==`false`?`error`:typeof s==`function`?s():s;return m(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:e(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,n),"data-validation":h||void 0,onKeyDown:e=>{e.key===`Escape`&&p?.getState().open&&(e.preventDefault(),p.hide()),a?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),f.current?.focus()),o?.(e)},ref:r(d,u),...c,children:i})});E.displayName=`MultiSelectTrigger`;const D=s(({className:n,value:i,onRemove:a,locked:o=!1,onKeyDown:s,...c},l)=>{let u=f(null);return h(`span`,{ref:r(u,l),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:e(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,n),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),z(e.currentTarget);return}s?.(e)},...c,children:[i,m(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:e(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&z(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:m(t,{svg:o?m(y,{}):m(g,{weight:`bold`}),className:`size-4`})})]})});D.displayName=`MultiSelectTag`;const O=({children:e,lockedValues:t=[]})=>{let n=v.useComboboxContext(),r=v.useStoreState(n,`selectedValue`),i=(b(r)?r:void 0)??x,a=f(i);a.current=i;let o=l(C);o.current=t;let s=d(()=>new Set(t),[t]),c=f(new Map),{onInputKeyDownRef:h,inputRef:g}=l(w),_=f(new Set);u(()=>()=>{_.current.forEach(cancelAnimationFrame)},[]);let y=e=>{let t;t=requestAnimationFrame(()=>{_.current.delete(t),e()}),_.current.add(t)},S=e=>{if(n){let t=n.getState().selectedValue;if(!b(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},T=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},E=()=>{g.current?.focus()},O=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&T(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?T(t+1):E();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&z(e);break}if(S(n),e.key===`Backspace`)if(t>0){let e=t-1;y(()=>T(e))}else y(()=>{a.current.length>0?T(0):E()});else y(()=>{t<a.current.length?T(t):E()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),E(),g.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&E();break}};return h.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),T(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&z(t)}else S(e)}},m(p,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&z(e);return}S(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>O(e,n),onClick:()=>T(n)};return e?e(r):m(D,{...r},t)})})};O.displayName=`MultiSelectTagValues`;const k=s(({className:t,onBlur:n,onChange:i,onFocus:a,onKeyDown:o,onValueChange:s,placeholder:c,...u},d)=>{let f=v.useComboboxContext(),{onInputKeyDownRef:p,inputRef:h}=l(w),g=v.useStoreState(f,`selectedValue`),_=((b(g)?g:void 0)?.length??0)>0;return m(v.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:e(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,t),onChange:e=>{s?.(e.target.value),i?.(e)},onKeyDown:e=>{p.current?.(e),o?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&f?.show(),n?.(e)},onFocus:e=>{f?.show(),a?.(e)},placeholder:_?void 0:c,ref:r(h,d),...u})});k.displayName=`MultiSelectInput`;const A=s(({asChild:t=!1,backdrop:r=!1,children:i,className:a,modal:o=!0,portalElement:s,sameWidth:u=!0,unmountOnHide:d=!0,...f},p)=>{let h=l(S),g=c(()=>h.current?.getBoundingClientRect()??null,[h]),_=c(e=>typeof s==`function`?s(e):s??h.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,h]),y=c(e=>!(e.target instanceof Node&&h.current?.contains(e.target)),[h]);return m(v.ComboboxPopover,{"data-slot":`multi-select-content`,className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,a),backdrop:r,getAnchorRect:g,gutter:4,hideOnInteractOutside:y,modal:o,portalElement:_,ref:p,render:t?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,sameWidth:u,unmountOnHide:d,...f,children:i})});A.displayName=`MultiSelectContent`;const j=s(({asChild:r=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,...u},d)=>{let f=l(C),p=s!=null&&f.current.includes(s);return h(v.ComboboxItem,{"data-slot":`multi-select-item`,className:e(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:d,render:r?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,m(v.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:m(t,{svg:m(_,{weight:`bold`}),className:`size-4 text-accent-600`})})]})});j.displayName=`MultiSelectItem`;const M=s(({asChild:e=!1,children:t,...r},i)=>m(v.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:i,render:e?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,...r,children:t}));M.displayName=`MultiSelectGroup`;const N=s(({asChild:t=!1,children:r,className:i,...a},o)=>m(v.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:o,render:t?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,...a,children:r}));N.displayName=`MultiSelectGroupLabel`;const P=s(({className:t,children:n,...r},i)=>m(`p`,{"data-slot":`multi-select-group-description`,className:e(`text-muted px-2 pb-1 text-xs`,t),ref:i,...r,children:n}));P.displayName=`MultiSelectGroupDescription`;const F=s(({className:t,...n},r)=>m(i,{"data-slot":`multi-select-separator`,ref:r,className:e(`my-1 w-auto`,t),...n}));F.displayName=`MultiSelectSeparator`;const I=s(({className:t,children:n,...r},i)=>m(`div`,{"data-slot":`multi-select-empty`,className:e(`mx-1 text-muted px-2 py-6 text-center text-sm`,t),ref:i,role:`presentation`,...r,children:n}));I.displayName=`MultiSelectEmpty`;const L=s(({className:t,children:n,...r},i)=>m(`div`,{ref:i,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:e(`bg-popover sticky bottom-0 border-t border-popover`,t),...r,children:n}));L.displayName=`MultiSelectContentFooter`;const R={Root:T,Trigger:E,TagValues:O,Input:k,Tag:D,Content:A,ContentFooter:L,Item:j,Group:M,GroupLabel:N,GroupDescription:P,Separator:F,Empty:I};function z(e){a()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{R as MultiSelect};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./compose-refs-DeIsFv68.js";import{n as i}from"./separator-BuP5aENE.js";import{t as a}from"./use-prefers-reduced-motion-BiG6QGkf.js";import{createContext as o,forwardRef as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{XIcon as g}from"@phosphor-icons/react/X";import{CheckIcon as _}from"@phosphor-icons/react/Check";import*as v from"@ariakit/react";import{LockIcon as y}from"@phosphor-icons/react/Lock";const b=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),x=[],S=o({current:null}),C=o({current:[]}),w=o({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),T=({children:e,defaultSelectedValue:t=[],...n})=>{let r=f(null),i=f(void 0),a=f(null),o=f([]),s=d(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return m(S.Provider,{value:r,children:m(w.Provider,{value:s,children:m(C.Provider,{value:o,children:m(v.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})};T.displayName=`MultiSelect`;const E=s(({"aria-invalid":t,className:n,children:i,onKeyDown:a,onMouseDown:o,validation:s,...c},u)=>{let d=l(S),{inputRef:f}=l(w),p=v.useComboboxContext(),h=t!=null&&t!==`false`?`error`:typeof s==`function`?s():s;return m(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:e(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,n),"data-validation":h||void 0,onKeyDown:e=>{e.key===`Escape`&&p?.getState().open&&(e.preventDefault(),p.hide()),a?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),f.current?.focus()),o?.(e)},ref:r(d,u),...c,children:i})});E.displayName=`MultiSelectTrigger`;const D=s(({className:n,value:i,onRemove:a,locked:o=!1,onKeyDown:s,...c},l)=>{let u=f(null);return h(`span`,{ref:r(u,l),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:e(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,n),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),z(e.currentTarget);return}s?.(e)},...c,children:[i,m(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:e(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&z(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:m(t,{svg:o?m(y,{}):m(g,{weight:`bold`}),className:`size-4`})})]})});D.displayName=`MultiSelectTag`;const O=({children:e,lockedValues:t=[]})=>{let n=v.useComboboxContext(),r=v.useStoreState(n,`selectedValue`),i=(b(r)?r:void 0)??x,a=f(i);a.current=i;let o=l(C);o.current=t;let s=d(()=>new Set(t),[t]),c=f(new Map),{onInputKeyDownRef:h,inputRef:g}=l(w),_=f(new Set);u(()=>()=>{_.current.forEach(cancelAnimationFrame)},[]);let y=e=>{let t;t=requestAnimationFrame(()=>{_.current.delete(t),e()}),_.current.add(t)},S=e=>{if(n){let t=n.getState().selectedValue;if(!b(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},T=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},E=()=>{g.current?.focus()},O=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&T(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?T(t+1):E();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&z(e);break}if(S(n),e.key===`Backspace`)if(t>0){let e=t-1;y(()=>T(e))}else y(()=>{a.current.length>0?T(0):E()});else y(()=>{t<a.current.length?T(t):E()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),E(),g.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&E();break}};return h.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),T(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&z(t)}else S(e)}},m(p,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&z(e);return}S(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>O(e,n),onClick:()=>T(n)};return e?e(r):m(D,{...r},t)})})};O.displayName=`MultiSelectTagValues`;const k=s(({className:t,onBlur:n,onChange:i,onFocus:a,onKeyDown:o,onValueChange:s,placeholder:c,...u},d)=>{let f=v.useComboboxContext(),{onInputKeyDownRef:p,inputRef:h}=l(w),g=v.useStoreState(f,`selectedValue`),_=((b(g)?g:void 0)?.length??0)>0;return m(v.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:e(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,t),onChange:e=>{s?.(e.target.value),i?.(e)},onKeyDown:e=>{p.current?.(e),o?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&f?.show(),n?.(e)},onFocus:e=>{f?.show(),a?.(e)},placeholder:_?void 0:c,ref:r(h,d),...u})});k.displayName=`MultiSelectInput`;const A=s(({asChild:t=!1,backdrop:r=!1,children:i,className:a,modal:o=!0,portalElement:s,sameWidth:u=!0,unmountOnHide:d=!0,...f},p)=>{let h=l(S),g=c(()=>h.current?.getBoundingClientRect()??null,[h]),_=c(e=>typeof s==`function`?s(e):s??h.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,h]),y=c(e=>!(e.target instanceof Node&&h.current?.contains(e.target)),[h]);return m(v.ComboboxPopover,{"data-slot":`multi-select-content`,className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,a),backdrop:r,getAnchorRect:g,gutter:4,hideOnInteractOutside:y,modal:o,portalElement:_,ref:p,render:t?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,sameWidth:u,unmountOnHide:d,...f,children:i})});A.displayName=`MultiSelectContent`;const j=s(({asChild:r=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,...u},d)=>{let f=l(C),p=s!=null&&f.current.includes(s);return h(v.ComboboxItem,{"data-slot":`multi-select-item`,className:e(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:d,render:r?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,m(v.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:m(t,{svg:m(_,{weight:`bold`}),className:`size-4 text-accent-600`})})]})});j.displayName=`MultiSelectItem`;const M=s(({asChild:e=!1,children:t,...r},i)=>m(v.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:i,render:e?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,...r,children:t}));M.displayName=`MultiSelectGroup`;const N=s(({asChild:t=!1,children:r,className:i,...a},o)=>m(v.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:o,render:t?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,...a,children:r}));N.displayName=`MultiSelectGroupLabel`;const P=s(({className:t,children:n,...r},i)=>m(`p`,{"data-slot":`multi-select-group-description`,className:e(`text-muted px-2 pb-1 text-xs`,t),ref:i,...r,children:n}));P.displayName=`MultiSelectGroupDescription`;const F=s(({className:t,...n},r)=>m(i,{"data-slot":`multi-select-separator`,ref:r,className:e(`my-1 w-auto`,t),...n}));F.displayName=`MultiSelectSeparator`;const I=s(({className:t,children:n,...r},i)=>m(`div`,{"data-slot":`multi-select-empty`,className:e(`mx-1 text-muted px-2 py-6 text-center text-sm`,t),ref:i,role:`presentation`,...r,children:n}));I.displayName=`MultiSelectEmpty`;const L=s(({className:t,children:n,...r},i)=>m(`div`,{ref:i,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:e(`bg-popover sticky bottom-0 border-t border-popover`,t),...r,children:n}));L.displayName=`MultiSelectContentFooter`;const R={Root:T,Trigger:E,TagValues:O,Input:k,Tag:D,Content:A,ContentFooter:L,Item:j,Group:M,GroupLabel:N,GroupDescription:P,Separator:F,Empty:I};function z(e){a()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{R as MultiSelect};
 //# sourceMappingURL=multi-select.js.map

package/dist/radio-group.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{t as n}from"./is-input-CC_n6EGM.js";import{Children as r,cloneElement as i,createContext as a,forwardRef as o,isValidElement as s,useContext as c,useRef as l}from"react";import u from"clsx";import{Fragment as d,jsx as f}from"react/jsx-runtime";import{Radio as p,RadioGroup as m}from"@headlessui/react";const h=o((e,t)=>f(m,{...e,ref:t}));h.displayName=`RadioGroup`;const g=a({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),_=o(({children:t,className:n,...r},i)=>f(p,{className:e(`group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden`,n),as:`div`,...r,ref:i,children:e=>f(g.Provider,{value:e,children:t})}));_.displayName=`RadioItem`;const v=({checked:t,disabled:n,focus:r,hover:i})=>f(`span`,{className:e(`border-form flex size-4 items-center justify-center rounded-full border shrink-0`,n&&`cursor-default opacity-50`,t&&`border-accent-600 bg-accent-600`,r&&!n&&`border-accent-600 ring-focus-accent ring-4`,i&&`border-accent-600`),children:t&&f(`span`,{className:`size-2 rounded-full bg-white shrink-0`})}),y=({children:t,className:n,...r})=>{let i=c(g);return f(`div`,{className:e(`radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0`,n),...r,children:t==null?f(v,{...i}):typeof t==`function`?t(i):t})};y.displayName=`RadioIndicator`;const b=o(({className:e,...t},n)=>f(h,{className:u(`-space-y-px`,e),...t,ref:n}));b.displayName=`RadioGroupList`;const x=o(({children:t,className:n,...r},i)=>f(p,{as:`div`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...r,children:e=>f(d,{children:f(g.Provider,{value:e,children:t})})}));x.displayName=`RadioListItem`;const S=o(({children:e,className:t,...n},r)=>f(p,{as:`div`,className:u(`group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-600/50 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-600 high-contrast:aria-checked:border-accent-600`,t),...n,ref:r,children:t=>f(d,{children:f(g.Provider,{value:t,children:e})})}));S.displayName=`RadioCard`;const C=({asChild:e=!1,children:n,className:r,...i})=>{let a=c(g);return f(e?t:`div`,{className:u(`min-w-0 flex-1`,a.disabled&&`opacity-50`,r),...i,children:n})};C.displayName=`RadioItemContent`;const w=o(({className:e,...t},n)=>f(h,{className:u(`flex flex-row flex-nowrap -space-x-px`,e),...t,ref:n}));w.displayName=`RadioButtonGroup`;const T=o(({children:t,className:n,...r},i)=>f(p,{as:`div`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm`,`h-9`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md`,`not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50`,`aria-checked:z-1 aria-checked:border-accent-600/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...r,children:e=>f(d,{children:f(g.Provider,{value:e,children:t})})}));T.displayName=`RadioButton`;const E=({children:e,onClick:t,onKeyDown:a,...o})=>{let u=l(null),d=c(g),p=r.only(e),m=d.disabled||!d.checked;return f(`div`,{role:`none`,ref:u,onKeyDown:e=>{if(d.disabled){e.stopPropagation(),e.preventDefault();return}switch(e.key){case`Enter`:case`Tab`:break;default:e.stopPropagation()}a?.(e)},onClick:e=>{if(d.disabled){e.stopPropagation(),e.preventDefault();return}let r=e.target;n(r)&&window.requestAnimationFrame(()=>{r.focus()}),t?.(e)},...o,children:s(p)?i(p,{disabled:d.disabled||p.props.disabled,tabIndex:m?-1:p.props.tabIndex}):null})};E.displayName=`RadioInputSandbox`;const D={Button:T,ButtonGroup:w,Card:S,Indicator:y,InputSandbox:E,Item:_,ItemContent:C,List:b,ListItem:x,Root:h};export{D as RadioGroup};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{t as n}from"./is-input-6XDjihnJ.js";import{Children as r,cloneElement as i,createContext as a,forwardRef as o,isValidElement as s,useContext as c,useRef as l}from"react";import u from"clsx";import{Fragment as d,jsx as f}from"react/jsx-runtime";import{Radio as p,RadioGroup as m}from"@headlessui/react";const h=o((e,t)=>f(m,{...e,ref:t}));h.displayName=`RadioGroup`;const g=a({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),_=o(({children:t,className:n,...r},i)=>f(p,{className:e(`group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden`,n),as:`div`,...r,ref:i,children:e=>f(g.Provider,{value:e,children:t})}));_.displayName=`RadioItem`;const v=({checked:t,disabled:n,focus:r,hover:i})=>f(`span`,{className:e(`border-form flex size-4 items-center justify-center rounded-full border shrink-0`,n&&`cursor-default opacity-50`,t&&`border-accent-600 bg-accent-600`,r&&!n&&`border-accent-600 ring-focus-accent ring-4`,i&&`border-accent-600`),children:t&&f(`span`,{className:`size-2 rounded-full bg-white shrink-0`})}),y=({children:t,className:n,...r})=>{let i=c(g);return f(`div`,{className:e(`radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0`,n),...r,children:t==null?f(v,{...i}):typeof t==`function`?t(i):t})};y.displayName=`RadioIndicator`;const b=o(({className:e,...t},n)=>f(h,{className:u(`-space-y-px`,e),...t,ref:n}));b.displayName=`RadioGroupList`;const x=o(({children:t,className:n,...r},i)=>f(p,{as:`div`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...r,children:e=>f(d,{children:f(g.Provider,{value:e,children:t})})}));x.displayName=`RadioListItem`;const S=o(({children:e,className:t,...n},r)=>f(p,{as:`div`,className:u(`group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md`,`aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600`,`aria-checked:z-1 aria-checked:border-accent-600/50 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-600 high-contrast:aria-checked:border-accent-600`,t),...n,ref:r,children:t=>f(d,{children:f(g.Provider,{value:t,children:e})})}));S.displayName=`RadioCard`;const C=({asChild:e=!1,children:n,className:r,...i})=>{let a=c(g);return f(e?t:`div`,{className:u(`min-w-0 flex-1`,a.disabled&&`opacity-50`,r),...i,children:n})};C.displayName=`RadioItemContent`;const w=o(({className:e,...t},n)=>f(h,{className:u(`flex flex-row flex-nowrap -space-x-px`,e),...t,ref:n}));w.displayName=`RadioButtonGroup`;const T=o(({children:t,className:n,...r},i)=>f(p,{as:`div`,className:e(`group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm`,`h-9`,`focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4`,`cursor-pointer aria-disabled:cursor-default focus:outline-hidden`,`first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md`,`not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50`,`aria-checked:z-1 aria-checked:border-accent-600/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600`,`has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2`,n),ref:i,...r,children:e=>f(d,{children:f(g.Provider,{value:e,children:t})})}));T.displayName=`RadioButton`;const E=({children:e,onClick:t,onKeyDown:a,...o})=>{let u=l(null),d=c(g),p=r.only(e),m=d.disabled||!d.checked;return f(`div`,{role:`none`,ref:u,onKeyDown:e=>{if(d.disabled){e.stopPropagation(),e.preventDefault();return}switch(e.key){case`Enter`:case`Tab`:break;default:e.stopPropagation()}a?.(e)},onClick:e=>{if(d.disabled){e.stopPropagation(),e.preventDefault();return}let r=e.target;n(r)&&window.requestAnimationFrame(()=>{r.focus()}),t?.(e)},...o,children:s(p)?i(p,{disabled:d.disabled||p.props.disabled,tabIndex:m?-1:p.props.tabIndex}):null})};E.displayName=`RadioInputSandbox`;const D={Button:T,ButtonGroup:w,Card:S,Indicator:y,InputSandbox:E,Item:_,ItemContent:C,List:b,ListItem:x,Root:h};export{D as RadioGroup};
 //# sourceMappingURL=radio-group.js.map

package/dist/tabs.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./booleanish-CBGdPL3Q.js";import{t as n}from"./compose-refs-DeIsFv68.js";import{t as r}from"./use-prefers-reduced-motion-BcwST13S.js";import{Children as i,cloneElement as a,createContext as o,forwardRef as s,isValidElement as c,useContext as l,useEffect as u,useRef as d}from"react";import f from"clsx";import p from"tiny-invariant";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{cva as _}from"class-variance-authority";import{Content as v,List as y,Root as b,Trigger as x}from"@radix-ui/react-tabs";const S=o({orientation:`horizontal`,appearance:`classic`}),C=s(({className:t,children:n,orientation:r=`horizontal`,appearance:i=`classic`,...a},o)=>h(b,{className:e(`flex gap-4`,r===`horizontal`?`flex-col`:`flex-row`,t),orientation:r,ref:o,...a,children:h(S.Provider,{value:{orientation:r,appearance:i},children:n})}));C.displayName=`Tabs`;const w=_(`flex`,{variants:{orientation:{horizontal:`scroll-fade-x flex-row items-center overflow-x-auto overscroll-x-none w-full min-w-0 pt-1 -mt-1 px-1 -mx-1`,vertical:`flex-col items-end gap-3.5 self-stretch`},appearance:{classic:``,pill:``}},compoundVariants:[{orientation:`horizontal`,appearance:`pill`,className:`gap-1 pb-1 -mb-1`},{orientation:`horizontal`,appearance:`classic`,className:`gap-6`},{orientation:`vertical`,appearance:`classic`,className:`border-r border-gray-200`}]}),T=s(({className:t,...i},a)=>{let{orientation:o,appearance:s}=l(S),c=d(null);return u(()=>{let e=c.current;if(!e||o!==`horizontal`)return;let t=new AbortController,n=0,i=()=>{e.toggleAttribute(`data-scroll-left`,e.scrollLeft>0),e.toggleAttribute(`data-scroll-right`,Math.ceil(e.scrollLeft)<n-1)},a=()=>{n=e.scrollWidth-e.clientWidth,i()};e.addEventListener(`scroll`,i,{passive:!0,signal:t.signal});let s=new MutationObserver(a);s.observe(e,{childList:!0,subtree:!0}),e.addEventListener(`focusin`,t=>{if(t.target instanceof Element&&t.target!==e){let e=r()?`auto`:`smooth`;t.target.scrollIntoView({behavior:e,inline:`center`,block:`nearest`})}},{signal:t.signal});let l=new ResizeObserver(a);return l.observe(e),a(),()=>{t.abort(),l.disconnect(),s.disconnect()}},[o]),h(y,{"aria-orientation":o,className:e(w({orientation:o,appearance:s}),t),ref:n(c,a),...i})});T.displayName=`TabsList`;const E=_(`absolute z-0`,{variants:{orientation:{horizontal:`bottom-0 left-0 right-0 h-0.75`,vertical:`-right-px bottom-0 top-0 w-0.75`},appearance:{classic:`group-data-state-active/tab-trigger:bg-neutral-950`,pill:`hidden`}}}),D=()=>{let{orientation:e,appearance:t}=l(S);return h(`span`,{"aria-hidden":!0,className:f(E({orientation:e,appearance:t}))})};D.displayName=`TabsTriggerDecoration`;const O=_(e(`group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600`,`ring-focus-accent outline-hidden`,`aria-disabled:cursor-default aria-disabled:opacity-50`,`focus-visible:ring-4`,`[&>svg]:shrink-0 [&>svg]:size-5`,`not-aria-disabled:hover:text-gray-900`),{variants:{orientation:{horizontal:`rounded-tl-md rounded-tr-md`,vertical:`rounded-bl-md rounded-tl-md pr-3`},appearance:{classic:e(`not-aria-disabled:hover:data-state-active:text-strong`,`data-state-active:text-strong`),pill:e(`not-aria-disabled:hover:data-state-active:text-strong`,`not-aria-disabled:hover:data-state-active:bg-neutral-500/15`,`data-state-active:text-strong`,`data-state-active:bg-neutral-500/15`,`rounded-full py-2 px-3`)}}}),k=s(({"aria-disabled":n,asChild:r=!1,children:o,className:s,disabled:u,...d},f)=>{let{orientation:_,appearance:v}=l(S),y=t(n??u),b={"aria-disabled":n??u,className:e(O({orientation:_,appearance:v}),s),disabled:y,...d};if(r){let e=i.only(o);p(c(e),"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.");let t=e.props?.children,n=y?{href:void 0,to:void 0}:{tabIndex:0};return h(x,{asChild:!0,...b,ref:f,children:a(y?h(`button`,{type:`button`}):e,n,g(m,{children:[h(D,{}),t]}))})}return g(x,{ref:f,...b,children:[h(D,{}),o]})});k.displayName=`TabsTrigger`;const A=({className:t,children:n,...r})=>h(`span`,{className:e(`rounded-full bg-neutral-500/20 px-1.5 text-xs font-medium text-gray-600`,`group-data-state-active/tab-trigger:bg-neutral-950/10 group-data-state-active/tab-trigger:text-strong group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-strong`,`group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700`,t),...r,children:n});A.displayName=`TabBadge`;const j=s(({className:t,...n},r)=>h(v,{ref:r,className:e(`focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4`,t),...n}));j.displayName=`TabsContent`;const M={Root:C,Content:j,List:T,Trigger:k,Badge:A};export{M as Tabs};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./booleanish-CBGdPL3Q.js";import{t as n}from"./compose-refs-DeIsFv68.js";import{t as r}from"./use-prefers-reduced-motion-BiG6QGkf.js";import{Children as i,cloneElement as a,createContext as o,forwardRef as s,isValidElement as c,useContext as l,useEffect as u,useRef as d}from"react";import f from"clsx";import p from"tiny-invariant";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{cva as _}from"class-variance-authority";import{Content as v,List as y,Root as b,Trigger as x}from"@radix-ui/react-tabs";const S=o({orientation:`horizontal`,appearance:`classic`}),C=s(({className:t,children:n,orientation:r=`horizontal`,appearance:i=`classic`,...a},o)=>h(b,{className:e(`flex gap-4`,r===`horizontal`?`flex-col`:`flex-row`,t),orientation:r,ref:o,...a,children:h(S.Provider,{value:{orientation:r,appearance:i},children:n})}));C.displayName=`Tabs`;const w=_(`flex`,{variants:{orientation:{horizontal:`scroll-fade-x flex-row items-center overflow-x-auto overscroll-x-none w-full min-w-0 pt-1 -mt-1 px-1 -mx-1`,vertical:`flex-col items-end gap-3.5 self-stretch`},appearance:{classic:``,pill:``}},compoundVariants:[{orientation:`horizontal`,appearance:`pill`,className:`gap-1 pb-1 -mb-1`},{orientation:`horizontal`,appearance:`classic`,className:`gap-6`},{orientation:`vertical`,appearance:`classic`,className:`border-r border-gray-200`}]}),T=s(({className:t,...i},a)=>{let{orientation:o,appearance:s}=l(S),c=d(null);return u(()=>{let e=c.current;if(!e||o!==`horizontal`)return;let t=new AbortController,n=0,i=()=>{e.toggleAttribute(`data-scroll-left`,e.scrollLeft>0),e.toggleAttribute(`data-scroll-right`,Math.ceil(e.scrollLeft)<n-1)},a=()=>{n=e.scrollWidth-e.clientWidth,i()};e.addEventListener(`scroll`,i,{passive:!0,signal:t.signal});let s=new MutationObserver(a);s.observe(e,{childList:!0,subtree:!0}),e.addEventListener(`focusin`,t=>{if(t.target instanceof Element&&t.target!==e){let e=r()?`auto`:`smooth`;t.target.scrollIntoView({behavior:e,inline:`center`,block:`nearest`})}},{signal:t.signal});let l=new ResizeObserver(a);return l.observe(e),a(),()=>{t.abort(),l.disconnect(),s.disconnect()}},[o]),h(y,{"aria-orientation":o,className:e(w({orientation:o,appearance:s}),t),ref:n(c,a),...i})});T.displayName=`TabsList`;const E=_(`absolute z-0`,{variants:{orientation:{horizontal:`bottom-0 left-0 right-0 h-0.75`,vertical:`-right-px bottom-0 top-0 w-0.75`},appearance:{classic:`group-data-state-active/tab-trigger:bg-neutral-950`,pill:`hidden`}}}),D=()=>{let{orientation:e,appearance:t}=l(S);return h(`span`,{"aria-hidden":!0,className:f(E({orientation:e,appearance:t}))})};D.displayName=`TabsTriggerDecoration`;const O=_(e(`group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600`,`ring-focus-accent outline-hidden`,`aria-disabled:cursor-default aria-disabled:opacity-50`,`focus-visible:ring-4`,`[&>svg]:shrink-0 [&>svg]:size-5`,`not-aria-disabled:hover:text-gray-900`),{variants:{orientation:{horizontal:`rounded-tl-md rounded-tr-md`,vertical:`rounded-bl-md rounded-tl-md pr-3`},appearance:{classic:e(`not-aria-disabled:hover:data-state-active:text-strong`,`data-state-active:text-strong`),pill:e(`not-aria-disabled:hover:data-state-active:text-strong`,`not-aria-disabled:hover:data-state-active:bg-neutral-500/15`,`data-state-active:text-strong`,`data-state-active:bg-neutral-500/15`,`rounded-full py-2 px-3`)}}}),k=s(({"aria-disabled":n,asChild:r=!1,children:o,className:s,disabled:u,...d},f)=>{let{orientation:_,appearance:v}=l(S),y=t(n??u),b={"aria-disabled":n??u,className:e(O({orientation:_,appearance:v}),s),disabled:y,...d};if(r){let e=i.only(o);p(c(e),"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.");let t=e.props?.children,n=y?{href:void 0,to:void 0}:{tabIndex:0};return h(x,{asChild:!0,...b,ref:f,children:a(y?h(`button`,{type:`button`}):e,n,g(m,{children:[h(D,{}),t]}))})}return g(x,{ref:f,...b,children:[h(D,{}),o]})});k.displayName=`TabsTrigger`;const A=({className:t,children:n,...r})=>h(`span`,{className:e(`rounded-full bg-neutral-500/20 px-1.5 text-xs font-medium text-gray-600`,`group-data-state-active/tab-trigger:bg-neutral-950/10 group-data-state-active/tab-trigger:text-strong group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-strong`,`group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700`,t),...r,children:n});A.displayName=`TabBadge`;const j=s(({className:t,...n},r)=>h(v,{ref:r,className:e(`focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4`,t),...n}));j.displayName=`TabsContent`;const M={Root:C,Content:j,List:T,Trigger:k,Badge:A};export{M as Tabs};
 //# sourceMappingURL=tabs.js.map

package/dist/{use-prefers-reduced-motion-BcwST13S.js → use-prefers-reduced-motion-BiG6QGkf.js}

@@ -1,2 +1,2 @@
 import{n as e}from"./browser-only-QPyyfLaB.js";import{useEffect as t,useState as n}from"react";const r=`(prefers-reduced-motion: no-preference)`;function i(){return e()?!window.matchMedia(r).matches:!0}function a(){let[e,a]=n(!0);return t(()=>{let e=window.matchMedia(r);a(i());function t(e){a(!e.matches)}return e.addEventListener(`change`,t),()=>{e.removeEventListener(`change`,t)}},[]),e}export{a as n,i as t};
-//# sourceMappingURL=use-prefers-reduced-motion-BcwST13S.js.map
+//# sourceMappingURL=use-prefers-reduced-motion-BiG6QGkf.js.map

package/dist/{use-prefers-reduced-motion-BcwST13S.js.map → use-prefers-reduced-motion-BiG6QGkf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"use-prefers-reduced-motion-BcwST13S.js","names":[],"sources":["../src/hooks/use-prefers-reduced-motion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Imperatively reads the current `prefers-reduced-motion` preference.\n * Useful in event handlers and plain functions where a hook cannot be called.\n *\n * Returns `true` when the user has opted out of animations.\n *\n * @remarks\n * Returns `true` (reduce motion) when called outside a browser environment (SSR),\n * matching the conservative default of {@link usePrefersReducedMotion}.\n */\nexport function getPrefersReducedMotion(): boolean {\n\tif (!canUseDOM()) {\n\t\treturn true;\n\t}\n\treturn !window.matchMedia(query).matches;\n}\n\n/**\n * Returns `true` when the user has opted out of animations (i.e., prefers reduced motion).\n *\n * Implementation notes:\n * - Uses the `(prefers-reduced-motion: no-preference)` media query and inverts it.\n *   This keeps the “default” mental model explicit: if the system hasn’t opted out,\n *   animations are allowed.\n * - Defaults to `true` (reduce motion) on the server/during SSR to avoid animating\n *   before hydration. The initial client effect reads the *real* preference and updates state.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const reduce = usePrefersReducedMotion();\n * const duration = reduce ? 0 : 200;\n *\n * @remarks\n * If you need to support very old browsers that lack `MediaQueryList.addEventListener`,\n * consider falling back to `addListener/removeListener`.\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(getPrefersReducedMotion());\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"+FAQA,MAAM,EAAQ,0CAYd,SAAgB,GAAmC,CAIlD,OAHK,GAAW,CAGT,CAAC,OAAO,WAAW,EAAM,CAAC,QAFzB,GAwBT,SAAgB,GAAmC,CAElD,GAAM,CAAC,EAAsB,GAA2B,EAAS,GAAK,CAoBtE,OAlBA,MAAgB,CACf,IAAM,EAAiB,OAAO,WAAW,EAAM,CAG/C,EAAwB,GAAyB,CAAC,CAGlD,SAAS,EAAS,EAA4B,CAC7C,EAAwB,CAAC,EAAM,QAAQ,CAKxC,OAFA,EAAe,iBAAiB,SAAU,EAAS,KAEtC,CACZ,EAAe,oBAAoB,SAAU,EAAS,GAErD,EAAE,CAAC,CAEC"}
+{"version":3,"file":"use-prefers-reduced-motion-BiG6QGkf.js","names":[],"sources":["../src/hooks/use-prefers-reduced-motion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Imperatively reads the current `prefers-reduced-motion` preference.\n * Useful in event handlers and plain functions where a hook cannot be called.\n *\n * Returns `true` when the user has opted out of animations.\n *\n * @remarks\n * Returns `true` (reduce motion) when called outside a browser environment (SSR),\n * matching the conservative default of {@link usePrefersReducedMotion}.\n */\nexport function getPrefersReducedMotion(): boolean {\n\tif (!canUseDOM()) {\n\t\treturn true;\n\t}\n\treturn !window.matchMedia(query).matches;\n}\n\n/**\n * Returns `true` when the user has opted out of animations (i.e., prefers reduced motion).\n *\n * Implementation notes:\n * - Uses the `(prefers-reduced-motion: no-preference)` media query and inverts it.\n *   This keeps the “default” mental model explicit: if the system hasn’t opted out,\n *   animations are allowed.\n * - Defaults to `true` (reduce motion) on the server/during SSR to avoid animating\n *   before hydration. The initial client effect reads the *real* preference and updates state.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const reduce = usePrefersReducedMotion();\n * const duration = reduce ? 0 : 200;\n *\n * @remarks\n * If you need to support very old browsers that lack `MediaQueryList.addEventListener`,\n * consider falling back to `addListener/removeListener`.\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(getPrefersReducedMotion());\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"+FAQA,MAAM,EAAQ,0CAYd,SAAgB,GAAmC,CAIlD,OAHK,GAAW,CAGT,CAAC,OAAO,WAAW,EAAM,CAAC,QAFzB,GAwBT,SAAgB,GAAmC,CAElD,GAAM,CAAC,EAAsB,GAA2B,EAAS,GAAK,CAoBtE,OAlBA,MAAgB,CACf,IAAM,EAAiB,OAAO,WAAW,EAAM,CAG/C,EAAwB,GAAyB,CAAC,CAGlD,SAAS,EAAS,EAA4B,CAC7C,EAAwB,CAAC,EAAM,QAAQ,CAKxC,OAFA,EAAe,iBAAiB,SAAU,EAAS,KAEtC,CACZ,EAAe,oBAAoB,SAAU,EAAS,GAErD,EAAE,CAAC,CAEC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.68.5",
+  "version": "0.68.6",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",