npm - @ngrok/mantle - Versions diffs - 0.5.0 → 0.7.0 - Mend

@ngrok/mantle 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/assets/mantle.css +9 -9
package/dist/input.d.ts +0 -10
package/dist/input.js +1 -1
package/dist/input.js.map +1 -1
package/dist/progress.js +1 -1
package/dist/progress.js.map +1 -1
package/dist/theme-provider.js +2 -2
package/dist/theme-provider.js.map +1 -1
package/package.json +8 -8

package/assets/mantle.css CHANGED Viewed

@@ -3,35 +3,35 @@
 	font-family: EuclidSquare;
 	font-style: normal;
 	font-weight: normal;
-	src: url("https://cdn.ngrok.com/static/fonts/euclid-square/EuclidSquare-Regular-WebS.woff") format("woff");
+	src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-Regular-WebS.woff") format("woff");
 }
 @font-face {
 	font-family: EuclidSquare;
 	font-style: italic;
 	font-weight: normal;
-	src: url("https://cdn.ngrok.com/static/fonts/euclid-square/EuclidSquare-RegularItalic-WebS.woff") format("woff");
+	src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-RegularItalic-WebS.woff") format("woff");
 }
 @font-face {
 	font-family: EuclidSquare;
 	font-style: normal;
 	font-weight: 500;
-	src: url("https://cdn.ngrok.com/static/fonts/euclid-square/EuclidSquare-Medium-WebS.woff") format("woff");
+	src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-Medium-WebS.woff") format("woff");
 }
 @font-face {
 	font-family: EuclidSquare;
 	font-style: normal;
 	font-weight: 600;
-	src: url("https://cdn.ngrok.com/static/fonts/euclid-square/EuclidSquare-Semibold-WebS.woff") format("woff");
+	src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-Semibold-WebS.woff") format("woff");
 }
 @font-face {
 	font-family: EuclidSquare;
 	font-style: italic;
 	font-weight: 500;
-	src: url("https://cdn.ngrok.com/static/fonts/euclid-square/EuclidSquare-MediumItalic-WebS.woff") format("woff");
+	src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-MediumItalic-WebS.woff") format("woff");
 }
 /* IBM Plex Mono */
@@ -40,14 +40,14 @@
 	font-family: IBMPlexMono;
 	font-style: normal;
 	font-weight: normal;
-	src: url("https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-Text.woff") format("woff");
+	src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-Text.woff") format("woff");
 }
 @font-face {
 	font-family: IBMPlexMono;
 	font-style: italic;
 	font-weight: normal;
-	src: url("https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-TextItalic.woff") format("woff");
+	src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-TextItalic.woff") format("woff");
 }
 /* semibold is actually 600, but mapping it to 500 works better across AntD */
@@ -55,14 +55,14 @@
 	font-family: IBMPlexMono;
 	font-style: normal;
 	font-weight: 500;
-	src: url("https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff") format("woff");
+	src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff") format("woff");
 }
 @font-face {
 	font-family: IBMPlexMono;
 	font-style: italic;
 	font-weight: 500;
-	src: url("https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff") format("woff");
+	src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff") format("woff");
 }
 @tailwind base;

package/dist/input.d.ts CHANGED Viewed

@@ -21,11 +21,6 @@ type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComple
 declare const InputCapture: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & react.RefAttributes<HTMLInputElement>>;
 type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
-    /**
-     * Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.
-     * @default false
-     */
-    maskHiddenValue?: boolean;
     /**
      * Callback for when the visibility of the password value changes.
      */
@@ -37,11 +32,6 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
     showValue?: boolean;
 };
 declare const PasswordInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
-    /**
-     * Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.
-     * @default false
-     */
-    maskHiddenValue?: boolean;
     /**
      * Callback for when the visibility of the password value changes.
      */

package/dist/input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{a as H}from"./chunk-ERBZR6SY.js";import{a as w}from"./chunk-5E73VWJX.js";import{a as y}from"./chunk-EW5CFGXT.js";import{CheckCircle as E}from"@phosphor-icons/react/CheckCircle";import{Warning as L}from"@phosphor-icons/react/Warning";import{WarningDiamond as W}from"@phosphor-icons/react/WarningDiamond";import A from"clsx";import{createContext as N,forwardRef as C,useContext as V,useRef as k}from"react";import{jsx as e,jsxs as P}from"react/jsx-runtime";var I=C(({children:t,className:n,...a},i)=>{let o=!!t,p=k(null);return o?e(x,{className:n,forwardedRef:i,innerRef:p,...a,children:t}):e(x,{...a,className:n,forwardedRef:i,innerRef:p,children:e(f,{...a})})});I.displayName="Input";var f=C(({"aria-invalid":t,className:n,validation:a,...i},o)=>{let{"aria-invalid":p,forwardedRef:d,innerRef:r,validation:c,...u}=V(g),l=c??a,m=p??t??l==="error",s={...u,...i,type:i.type??u.type??"text"};return e("div",{className:"min-w-0 flex-1 text-left",children:e("input",{"aria-invalid":m,"data-validation":l||void 0,className:y("bg-form placeholder:text-placeholder w-full focus:outline-none",n),ref:w(o,d,r),...s})})});f.displayName="InputCapture";var g=N({validation:void 0,innerRef:{current:null}}),x=({"aria-invalid":t,"aria-disabled":n,children:a,className:i,disabled:o,forwardedRef:p,innerRef:d,style:r,type:c,validation:u,...l})=>{let s=t!=null&&t!=="false"?"error":typeof u=="function"?u():u,h=t??s==="error";return e(g.Provider,{value:{"aria-invalid":t,"aria-disabled":n,disabled:o,type:c,validation:s,...l,forwardedRef:p,innerRef:d},children:P("div",{"aria-invalid":h,"aria-disabled":o??n,"data-validation":s||void 0,className:y("h-11 text-base sm:h-9 sm: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-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4","aria-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-6 sm:[&_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",i),onClick:()=>{d?.current?.focus()},style:r,children:[a,e(F,{name:l.name,validation:s})]})})};var F=({name:t,validation:n})=>{switch(n){case"error":return P("div",{className:"text-danger-600 pointer-events-none order-last select-none",children:[e("span",{className:"sr-only",children:A("The value entered for the",t,"input has failed validation.")}),e(L,{"aria-hidden":!0,weight:"fill"})]});case"success":return e("div",{className:"text-success-600 pointer-events-none order-last select-none",children:e(E,{weight:"fill"})});case"warning":return e("div",{className:"text-warning-600 pointer-events-none order-last select-none",children:e(W,{weight:"fill"})});default:return null}};import{Eye as B}from"@phosphor-icons/react/Eye";import{EyeClosed as O}from"@phosphor-icons/react/EyeClosed";import j from"clsx";import{forwardRef as z,useEffect as S,useState as T}from"react";import{jsx as M,jsxs as b}from"react/jsx-runtime";var R=z(({maskHiddenValue:t=!1,onBlur:n,onFocus:a,onValueVisibilityChange:i,showValue:o=!1,...p},d)=>{let[r,c]=T(o),u=r?"text":"password",l=r?B:O;S(()=>{c(o)},[o]);let[m,s]=T(!1);return b(I,{onBlur:v=>{s(!1),n?.(v)},onFocus:v=>{s(!0),a?.(v)},type:u,ref:d,...p,children:[M(f,{className:j(t&&!r&&!m&&"max-w-6")}),b("button",{type:"button",tabIndex:-1,className:"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0",onClick:()=>{c(!r),i?.(!r)},children:[b("span",{className:"sr-only",children:["Turn password visibility ",r?"off":"on"]}),M(l,{"aria-hidden":!0})]})]})});R.displayName="PasswordInput";export{I as Input,f as InputCapture,R as PasswordInput,H as isInput};
+import{a as R}from"./chunk-ERBZR6SY.js";import{a as h}from"./chunk-5E73VWJX.js";import{a as v}from"./chunk-EW5CFGXT.js";import{CheckCircle as M}from"@phosphor-icons/react/CheckCircle";import{Warning as E}from"@phosphor-icons/react/Warning";import{WarningDiamond as H}from"@phosphor-icons/react/WarningDiamond";import L from"clsx";import{createContext as W,forwardRef as x,useContext as A,useRef as N}from"react";import{jsx as o,jsxs as g}from"react/jsx-runtime";var c=x(({children:t,className:e,...r},i)=>{let n=!!t,a=N(null);return n?o(w,{className:e,forwardedRef:i,innerRef:a,...r,children:t}):o(w,{...r,className:e,forwardedRef:i,innerRef:a,children:o(f,{...r})})});c.displayName="Input";var f=x(({"aria-invalid":t,className:e,validation:r,...i},n)=>{let{"aria-invalid":a,forwardedRef:p,innerRef:d,validation:m,...u}=A(C),s=m??r,b=(typeof s=="function"?s():s)||void 0,l=a??t??s==="error",I={...u,...i,type:i.type??u.type??"text"};return o("input",{"aria-invalid":l,"data-validation":b,className:v("placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left focus:outline-none",e),ref:h(n,p,d),...I})});f.displayName="InputCapture";var C=W({validation:void 0,innerRef:{current:null}}),w=({"aria-invalid":t,"aria-disabled":e,children:r,className:i,disabled:n,forwardedRef:a,innerRef:p,style:d,type:m,validation:u,...s})=>{let l=t!=null&&t!=="false"?"error":typeof u=="function"?u():u,I=t??l==="error";return o(C.Provider,{value:{"aria-invalid":t,"aria-disabled":e,disabled:n,type:m,validation:l,...s,forwardedRef:a,innerRef:p},children:g("div",{"aria-invalid":I,"aria-disabled":n??e,"data-validation":l||void 0,className:v("h-11 text-base sm:h-9 sm: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-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4","aria-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-6 sm:[&_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",i),onClick:()=>{p?.current?.focus()},style:d,children:[r,o(V,{name:s.name,validation:l})]})})};var V=({name:t,validation:e})=>{switch(e){case"error":return g("div",{className:"text-danger-600 pointer-events-none order-last select-none",children:[o("span",{className:"sr-only",children:L("The value entered for the",t,"input has failed validation.")}),o(E,{"aria-hidden":!0,weight:"fill"})]});case"success":return o("div",{className:"text-success-600 pointer-events-none order-last select-none",children:o(M,{weight:"fill"})});case"warning":return o("div",{className:"text-warning-600 pointer-events-none order-last select-none",children:o(H,{weight:"fill"})});default:return null}};import{Eye as O}from"@phosphor-icons/react/Eye";import{EyeClosed as j}from"@phosphor-icons/react/EyeClosed";import{forwardRef as B,useEffect as k,useState as F}from"react";import{jsx as P,jsxs as y}from"react/jsx-runtime";var T=B(({onValueVisibilityChange:t,showValue:e=!1,...r},i)=>{let[n,a]=F(e),p=n?"text":"password",d=n?O:j;return k(()=>{a(e)},[e]),y(c,{type:p,ref:i,...r,children:[P(f,{}),y("button",{type:"button",tabIndex:-1,className:"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0",onClick:()=>{a(!n),t?.(!n)},children:[y("span",{className:"sr-only",children:["Turn password visibility ",n?"off":"on"]}),P(d,{"aria-hidden":!0})]})]})});T.displayName="PasswordInput";export{c as Input,f as InputCapture,T as PasswordInput,R as isInput};
 //# sourceMappingURL=input.js.map

package/dist/input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/input/input.tsx","../src/components/input/password-input.tsx"],"sourcesContent":["import { CheckCircle } from \"@phosphor-icons/react/CheckCircle\";\nimport { Warning } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamond } from \"@phosphor-icons/react/WarningDiamond\";\nimport clsx from \"clsx\";\nimport type { ElementRef, ForwardedRef, InputHTMLAttributes, MutableRefObject, PropsWithChildren } 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 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\"> & BaseProps & PropsWithChildren;\n\n/\n Used to create interactive controls for web-based forms in order to accept data from the user\n /\nconst Input = forwardRef<HTMLInputElement, InputProps>(({ children, className, ...props }, forwardedRef) => {\n\tconst hasChildren = Boolean(children);\n\tconst innerRef = useRef<ElementRef<\"input\">>(null);\n\n\tif (hasChildren) {\n\t\treturn (\n\t\t\t<InputContainer className={className} forwardedRef={forwardedRef} innerRef={innerRef} {...props}>\n\t\t\t\t{children}\n\t\t\t</InputContainer>\n\t\t);\n\t}\n\n\treturn (\n\t\t<InputContainer {...props} className={className} forwardedRef={forwardedRef} innerRef={innerRef}>\n\t\t\t<InputCapture {...props} />\n\t\t</InputContainer>\n\t);\n});\nInput.displayName = \"Input\";\n\ntype InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" \| \"type\"> & BaseProps;\n\n/\n The actual <input /> element that captures user input.\n /\nconst InputCapture = forwardRef<HTMLInputElement, InputCaptureProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, 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 ariaInvalid = ctxAriaInvalid ?? _ariaInvalid ?? validation === \"error\";\n\t\tconst props = { ...ctx, ...restProps, type: restProps.type ?? ctx.type ?? \"text\" };\n\n\t\treturn (\n\t\t\t<div className=\"min-w-0 flex-1 text-left\">\n\t\t\t\t<input\n\t\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\t\tdata-validation={validation \|\| undefined}\n\t\t\t\t\tclassName={cx(\"bg-form placeholder:text-placeholder w-full focus:outline-none\", className)}\n\t\t\t\t\tref={composeRefs(ref, ctxForwardedRef, ctxInnerRef)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n);\nInputCapture.displayName = \"InputCapture\";\n\ntype InputContextType = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" \| \"type\"> &\n\tBaseProps & {\n\t\t/\n\t\t inner ref for the input element, controlled by `Input`\n\t\t /\n\t\tinnerRef: MutableRefObject<HTMLInputElement \| null>;\n\t\t/\n\t\t forwarded ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t /\n\t\tforwardedRef?: ForwardedRef<HTMLInputElement>;\n\t};\n\nconst InputContext = createContext<InputContextType>({ validation: undefined, innerRef: { current: null } });\n\ntype InputContainerProps = InputHTMLAttributes<HTMLInputElement> &\n\tBaseProps & {\n\t\t/\n\t\t @private inner ref for the input element, controlled by `Input`\n\t\t /\n\t\tinnerRef: MutableRefObject<HTMLInputElement \| null>;\n\t\t/\n\t\t @private ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t /\n\t\tforwardedRef: ForwardedRef<HTMLInputElement>;\n\t};\n\n/\n The container for the input element.\n /\nconst InputContainer = ({\n\t\"aria-invalid\": _ariaInvalid,\n\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 ? \"error\" : typeof _validation === \"function\" ? _validation() : _validation;\n\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\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\taria-invalid={ariaInvalid}\n\t\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\t\tdata-validation={validation \|\| undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-11 text-base sm:h-9 sm: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-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4\",\n\t\t\t\t\t\"aria-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-6 sm:[&_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\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t}}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<ValidationFeedback name={props.name} validation={validation} />\n\t\t\t</div>\n\t\t</InputContext.Provider>\n\t);\n};\n\nexport { Input, InputCapture };\nexport type { InputProps, InputCaptureProps };\n\nconst ValidationFeedback = ({ name, validation }: { name?: string; validation: Validation \| undefined }) => {\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\">{clsx(\"The value entered for the\", name, \"input has failed validation.\")}</span>\n\t\t\t\t\t<Warning 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<CheckCircle 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<WarningDiamond weight=\"fill\" />\n\t\t\t\t</div>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\n","import { Eye } from \"@phosphor-icons/react/Eye\";\nimport { EyeClosed } from \"@phosphor-icons/react/EyeClosed\";\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Input, InputCapture } from \"./input.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 Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.\n\t\t * @default false\n\t\t /\n\t\tmaskHiddenValue?: boolean;\n\t\t/\n\t\t Callback for when the visibility of the password value changes.\n\t\t /\n\t\tonValueVisibilityChange?: (visible: boolean) => void;\n\t\t/\n\t\t Show/hide the password value as a controlled state.\n\t\t * @default false\n\t\t */\n\t\tshowValue?: boolean;\n\t};\n\ntype PasswordInputType = Extract<InputType, \"text\" \| \"password\">;\n\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n\t({ maskHiddenValue = false, onBlur, onFocus, onValueVisibilityChange, showValue = false, ...props }, ref) => {\n\t\tconst [showPassword, setShowPassword] = useState<boolean>(showValue);\n\t\tconst type: PasswordInputType = showPassword ? \"text\" : \"password\";\n\t\tconst EyeCon = showPassword ? Eye : EyeClosed;\n\n\t\tuseEffect(() => {\n\t\t\tsetShowPassword(showValue);\n\t\t}, [showValue]);\n\n\t\tconst [isFocused, setIsFocused] = useState(false);\n\t\tconst shouldMaskHiddenValue = maskHiddenValue && !showPassword && !isFocused;\n\n\t\treturn (\n\t\t\t<Input\n\t\t\t\tonBlur={(event) => {\n\t\t\t\t\tsetIsFocused(false);\n\t\t\t\t\tonBlur?.(event);\n\t\t\t\t}}\n\t\t\t\tonFocus={(event) => {\n\t\t\t\t\tsetIsFocused(true);\n\t\t\t\t\tonFocus?.(event);\n\t\t\t\t}}\n\t\t\t\ttype={type}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<InputCapture className={clsx(shouldMaskHiddenValue && \"max-w-6\")} />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tclassName=\"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<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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","names":["CheckCircle","Warning","WarningDiamond","clsx","createContext","forwardRef","useContext","useRef","jsx","jsxs","Input","forwardRef","children","className","props","forwardedRef","hasChildren","innerRef","useRef","InputContainer","InputCapture","_ariaInvalid","_validation","restProps","ref","ctxAriaInvalid","ctxForwardedRef","ctxInnerRef","ctxValidation","ctx","useContext","InputContext","validation","ariaInvalid","cx","composeRefs","createContext","_ariaDisabled","disabled","style","type","ValidationFeedback","ValidationFeedback","name","validation","jsxs","jsx","clsx","Warning","CheckCircle","WarningDiamond","Eye","EyeClosed","clsx","forwardRef","useEffect","useState","jsx","jsxs","PasswordInput","forwardRef","maskHiddenValue","onBlur","onFocus","onValueVisibilityChange","showValue","props","ref","showPassword","setShowPassword","useState","type","EyeCon","Eye","EyeClosed","useEffect","isFocused","setIsFocused","Input","event","InputCapture","clsx"]}
1	+ {"version":3,"sources":["../src/components/input/input.tsx","../src/components/input/password-input.tsx"],"sourcesContent":["import { CheckCircle } from \"@phosphor-icons/react/CheckCircle\";\nimport { Warning } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamond } from \"@phosphor-icons/react/WarningDiamond\";\nimport clsx from \"clsx\";\nimport type { ElementRef, ForwardedRef, InputHTMLAttributes, MutableRefObject, PropsWithChildren } 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 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\"> & BaseProps & PropsWithChildren;\n\n/\n Used to create interactive controls for web-based forms in order to accept data from the user\n /\nconst Input = forwardRef<HTMLInputElement, InputProps>(({ children, className, ...props }, forwardedRef) => {\n\tconst hasChildren = Boolean(children);\n\tconst innerRef = useRef<ElementRef<\"input\">>(null);\n\n\tif (hasChildren) {\n\t\treturn (\n\t\t\t<InputContainer className={className} forwardedRef={forwardedRef} innerRef={innerRef} {...props}>\n\t\t\t\t{children}\n\t\t\t</InputContainer>\n\t\t);\n\t}\n\n\treturn (\n\t\t<InputContainer {...props} className={className} forwardedRef={forwardedRef} innerRef={innerRef}>\n\t\t\t<InputCapture {...props} />\n\t\t</InputContainer>\n\t);\n});\nInput.displayName = \"Input\";\n\ntype InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" \| \"type\"> & BaseProps;\n\n/\n The actual <input /> element that captures user input.\n /\nconst InputCapture = forwardRef<HTMLInputElement, InputCaptureProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, 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 = (typeof validation === \"function\" ? validation() : validation) \|\| undefined;\n\t\tconst ariaInvalid = ctxAriaInvalid ?? _ariaInvalid ?? validation === \"error\";\n\t\tconst props = { ...ctx, ...restProps, type: restProps.type ?? ctx.type ?? \"text\" };\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\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 focus:outline-none\",\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>({ validation: undefined, innerRef: { current: null } });\n\ntype InputContainerProps = InputHTMLAttributes<HTMLInputElement> &\n\tBaseProps & {\n\t\t/\n\t\t @private inner ref for the input element, controlled by `Input`\n\t\t /\n\t\tinnerRef: MutableRefObject<HTMLInputElement \| null>;\n\t\t/\n\t\t @private ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t /\n\t\tforwardedRef: ForwardedRef<HTMLInputElement>;\n\t};\n\n/\n The container for the input element.\n /\nconst InputContainer = ({\n\t\"aria-invalid\": _ariaInvalid,\n\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 ? \"error\" : typeof _validation === \"function\" ? _validation() : _validation;\n\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\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\taria-invalid={ariaInvalid}\n\t\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\t\tdata-validation={validation \|\| undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-11 text-base sm:h-9 sm: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-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4\",\n\t\t\t\t\t\"aria-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-6 sm:[&_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\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t}}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<ValidationFeedback name={props.name} validation={validation} />\n\t\t\t</div>\n\t\t</InputContext.Provider>\n\t);\n};\n\nexport { Input, InputCapture };\nexport type { InputProps, InputCaptureProps };\n\nconst ValidationFeedback = ({ name, validation }: { name?: string; validation: Validation \| undefined }) => {\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\">{clsx(\"The value entered for the\", name, \"input has failed validation.\")}</span>\n\t\t\t\t\t<Warning 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<CheckCircle 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<WarningDiamond weight=\"fill\" />\n\t\t\t\t</div>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\n","import { Eye } from \"@phosphor-icons/react/Eye\";\nimport { EyeClosed } from \"@phosphor-icons/react/EyeClosed\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\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\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 ? Eye : EyeClosed;\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<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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","names":["CheckCircle","Warning","WarningDiamond","clsx","createContext","forwardRef","useContext","useRef","jsx","jsxs","Input","forwardRef","children","className","props","forwardedRef","hasChildren","innerRef","useRef","InputContainer","InputCapture","_ariaInvalid","_validation","restProps","ref","ctxAriaInvalid","ctxForwardedRef","ctxInnerRef","ctxValidation","ctx","useContext","InputContext","validation","validationValue","ariaInvalid","cx","composeRefs","createContext","_ariaDisabled","disabled","style","type","ValidationFeedback","ValidationFeedback","name","validation","jsxs","jsx","clsx","Warning","CheckCircle","WarningDiamond","Eye","EyeClosed","forwardRef","useEffect","useState","jsx","jsxs","PasswordInput","forwardRef","onValueVisibilityChange","showValue","props","ref","showPassword","setShowPassword","useState","type","EyeCon","Eye","EyeClosed","useEffect","Input","InputCapture"]}

package/dist/progress.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{a as x}from"./chunk-ZBC4B4EM.js";import{a as l}from"./chunk-EW5CFGXT.js";import y from"clsx";import{createContext as P,useContext as v,useMemo as k}from"react";import{jsx as o,jsxs as p}from"react/jsx-runtime";var c=100,b=P({max:c,strokeWidth:"0.25rem",value:0}),N=({children:e,className:t,max:r=c,strokeWidth:n=4,value:a,...u})=>{let s=S(r)?r:c,i=w(a,s)?a:a==null?0:"indeterminate",m=g(n),f=d(i)?i:void 0,h=k(()=>({max:s,strokeWidth:m,value:i}),[s,m,i]);return o(b.Provider,{value:h,children:p("svg",{"aria-valuemax":s,"aria-valuemin":0,"aria-valuenow":f,className:y(i==="indeterminate"&&"animation-duration-[15s] transform-gpu animate-spin",l("size-6 text-gray-200 dark:text-gray-300",t)),"data-max":s,"data-min":0,"data-value":f,height:"100%",role:"progressbar",width:"100%",...u,children:[o("circle",{cx:"50%",cy:"50%",fill:"transparent",r:`calc(50% - ${m/2}px)`,stroke:"currentColor",strokeWidth:m}),e]})})},V=.6,C=({className:e,...t})=>{let r=x(),n=v(b),a=(n.value=="indeterminate"?V:n.value/n.max)*100,u=g(n.strokeWidth);return p("g",{className:l("text-accent-600",e),...t,children:[n.value=="indeterminate"&&o("defs",{children:p("linearGradient",{id:r,children:[o("stop",{className:"stop-opacity-100 stop-color-current",offset:"0%"}),o("stop",{className:"stop-opacity-0 stop-color-current",offset:"95%"})]})}),o("circle",{cx:"50%",cy:"50%",fill:"transparent",pathLength:100,r:`calc(50% - ${u/2}px)`,stroke:n.value=="indeterminate"?`url(#${r})`:"currentColor",strokeDasharray:100,strokeDashoffset:100-a,strokeLinecap:"round",strokeWidth:u,"transform-origin":"center",transform:"rotate(-90)"})]})};function W(e,{min:t,max:r}){return Math.min(r,Math.max(t,e))}function g(e){let t=4;if(e==null)return t;typeof e=="number"?t=e:e.endsWith("rem")?t=Number(e.replace("rem",""))*16:t=Number(e);let r=Number.isNaN(t)?4:t;return W(r,{min:1,max:12})}function d(e){return typeof e=="number"}function w(e,t){return d(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function S(e){return d(e)&&!Number.isNaN(e)&&e>0}export{N as ProgressDonut,C as ProgressDonutIndicator};
+import{a as f}from"./chunk-ZBC4B4EM.js";import{a as l}from"./chunk-EW5CFGXT.js";import v from"clsx";import{createContext as P,useContext as y,useMemo as k}from"react";import{jsx as o,jsxs as d}from"react/jsx-runtime";var c=100,b=P({max:c,strokeWidth:"0.25rem",value:0}),N=({children:e,className:t,max:r=c,strokeWidth:n=4,value:a,...u})=>{let s=D(r)?r:c,i=w(a,s)?a:a==null?0:"indeterminate",m=g(n),x=p(i)?i:void 0,h=k(()=>({max:s,strokeWidth:m,value:i}),[s,m,i]);return o(b.Provider,{value:h,children:d("svg",{"aria-valuemax":s,"aria-valuemin":0,"aria-valuenow":x,className:v(i==="indeterminate"&&"animation-duration-[15s] transform-gpu animate-spin",l("size-6 text-gray-200 dark:text-gray-300",t)),"data-max":s,"data-min":0,"data-value":x,height:"100%",role:"progressbar",width:"100%",...u,children:[o("circle",{cx:"50%",cy:"50%",fill:"transparent",r:`calc(50% - ${m/2}px)`,stroke:"currentColor",strokeWidth:m}),e]})})},V=.6,C=({className:e,...t})=>{let r=f(),n=y(b),a=(n.value=="indeterminate"?V:n.value/n.max)*100,u=g(n.strokeWidth);return d("g",{className:l("text-accent-600",e),...t,children:[n.value=="indeterminate"&&o("defs",{children:d("linearGradient",{id:r,children:[o("stop",{className:"stop-opacity-100 stop-color-current",offset:"0%"}),o("stop",{className:"stop-opacity-0 stop-color-current",offset:"95%"})]})}),o("circle",{cx:"50%",cy:"50%",fill:"transparent",pathLength:100,r:`calc(50% - ${u/2}px)`,stroke:n.value=="indeterminate"?`url(#${r})`:"currentColor",strokeDasharray:100,strokeDashoffset:100-a,strokeLinecap:"round",strokeWidth:u,"transform-origin":"center",transform:"rotate(-90)"})]})};function W(e,{min:t,max:r}){return Math.min(r,Math.max(t,e))}function g(e){let t=4;if(e==null)return t;typeof e=="number"?t=e:e.endsWith("rem")?t=Number(e.replace("rem",""))*16:t=Number(e);let r=Number.isNaN(t)?4:t;return W(r,{min:1,max:12})}function p(e){return typeof e=="number"}function w(e,t){return p(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function D(e){return p(e)&&!Number.isNaN(e)&&e>0}export{N as ProgressDonut,C as ProgressDonutIndicator};
 //# sourceMappingURL=progress.js.map

package/dist/progress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/progress/progress-donut.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport type { ComponentProps, HTMLAttributes } from \"react\";\nimport { useRandomStableId } from \"../../hooks/use-random-stable-id.js\";\nimport ~~type~~ { ~~WithStyleProps } from \"../../types/with-style-props.js\";\nimport {~~ cx } from \"../../utils/cx/cx.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number \| RemValue;\ntype ValueType = number \| \"indeterminate\";\n\n/*\n The default maximum value of the progress bar.\n /\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst ProgressContext = createContext<ProgressContextValue>({\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n});\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t\"viewBox\" \| \"role\" \| \"aria-valuemax\" \| \"aria-valuemin\" \| \"aria-valuenow\" \| \"width\" \| \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/\n\t The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t \n\t @default 100\n\t /\n\tmax?: number \| undefined;\n\t/\n\t The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t \n\t @default 0.25rem (4px)\n\t /\n\tstrokeWidth?: StrokeWidth;\n\t/\n\t The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t \n\t @default 0\n\t /\n\tvalue?: ValueType \| undefined;\n};\n\n/\n A simple circular progress bar.\n /\nconst ProgressDonut = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (isValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\") satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(_strokeWidth);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\tvalue === \"indeterminate\" && \"animation-duration-[15s] transform-gpu animate-spin\",\n\t\t\t\t\tcx(\"size-6 text-gray-200 dark:text-gray-300\", className),\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tr={`calc(50% - ${strokeWidthPx / 2}px)`}\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\n\n/\n Length (value) of the progress indicator tail when the progress bar is indeterminate.\n /\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/\n The indicator for the circular progress bar.\n /\nconst ProgressDonutIndicator = ({ className, ...props }: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useRandomStableId();\n\tconst ctx = useContext(ProgressContext);\n\tconst percentage = (ctx.value == \"indeterminate\" ? indeterminateTailPercent : ctx.value / ctx.max) 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value == \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tr={`calc(50% - ${strokeWidthPx / 2}px)`}\n\t\t\t\tstroke={ctx.value == \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\ttransform-origin=\"center\"\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\n\nexport {\n\t//,\n\tProgressDonut,\n\tProgressDonutIndicator,\n};\n\n/*\n Clamp a value between a minimum and maximum value.\n /\nfunction clamp(value: number, { min, max }: { min: number; max: number }): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/\n Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n /\nexport function deriveStrokeWidthPx(strokeWidth: number \| string \| undefined): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/*\n Check if a value is a number.\n /\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/\n Check if a value is a valid number within the range of 0 to `max`.\n /\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/\n Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n"],"mappings":"gFAAA,OAAOA,MAAU,OACjB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,WAAAC,MAAe,~~QAuFhD~~,OAgBC,OAAAC,EAhBD,QAAAC,MAAA,oBA1EH,IAAMC,EAAa,IAQbC,EAAkBC,EAAoC,CAC3D,IAAKF,EACL,YAAa,UACb,MAAO,CACR,CAAC,EAsCKG,EAAgB,CAAC,CACtB,SAAAC,EACA,UAAAC,EACA,IAAKC,EAAON,EACZ,YAAaO,EAAe,EAC5B,MAAOC,EACP,GAAGC,CACJ,IAAa,CACZ,IAAMC,EAAMC,EAAiBL,CAAI,EAAIA,EAAON,EACtCY,EAASC,EAAmBL,EAAQE,CAAG,EAAIF,EAASA,GAAU,KAAO,EAAI,gBACzEM,EAAgBC,EAAoBR,CAAY,EAChDS,EAAWC,EAASL,CAAK,EAAIA,EAAQ,OAErCM,EAA4BC,EACjC,KAAO,CACN,IAAAT,EACA,YAAaI,EACb,MAAAF,CACD,GACA,CAACF,EAAKI,EAAeF,CAAK,CAC3B,EAEA,OACCd,EAACG,EAAgB,SAAhB,CAAyB,MAAOiB,EAChC,SAAAnB,EAAC,OACA,gBAAeW,EACf,gBAAe,EACf,gBAAeM,EACf,UAAWI,EACVR,IAAU,iBAAmB,sDAC7BS,EAAG,0CAA2ChB,CAAS,CACxD,EACA,WAAUK,EACV,WAAU,EACV,aAAYM,EACZ,OAAO,OACP,KAAK,cACL,MAAM,OACL,GAAGP,EAEJ,UAAAX,EAAC,UACA,GAAG,MACH,GAAG,MACH,KAAK,cACL,EAAG,cAAcgB,EAAgB,CAAC,MAClC,OAAO,eACP,YAAaA,EACd,EACCV,GACF,EACD,CAEF,EAKMkB,EAA2B,GAO3BC,EAAyB,CAAC,CAAE,UAAAlB,EAAW,GAAGI,CAAM,IAAmC,CACxF,IAAMe,EAAaC,EAAkB,EAC/BP,EAAMQ,EAAWzB,CAAe,EAChC0B,GAAcT,EAAI,OAAS,gBAAkBI,EAA2BJ,EAAI,MAAQA,EAAI,KAAO,IAC/FJ,EAAgBC,EAAoBG,EAAI,WAAW,EAEzD,OACCnB,EAAC,KAAE,UAAWsB,EAAG,kBAAmBhB,CAAS,EAAI,GAAGI,EAClD,UAAAS,EAAI,OAAS,iBACbpB,EAAC,QACA,SAAAC,EAAC,kBAAe,GAAIyB,EACnB,UAAA1B,EAAC,QAAK,UAAU,sCAAsC,OAAO,KAAK,EAClEA,EAAC,QAAK,UAAU,oCAAoC,OAAO,MAAM,GAClE,EACD,EAEDA,EAAC,UACA,GAAG,MACH,GAAG,MACH,KAAK,cACL,WAAY,IACZ,EAAG,cAAcgB,EAAgB,CAAC,MAClC,OAAQI,EAAI,OAAS,gBAAkB,QAAQM,CAAU,IAAM,eAC/D,gBAAiB,IACjB,iBAAkB,IAAMG,EACxB,cAAc,QACd,YAAab,EACb,mBAAiB,SACjB,UAAU,cACX,GACD,CAEF,EAWA,SAASc,EAAMC,EAAe,CAAE,IAAAC,EAAK,IAAAC,CAAI,EAAyC,CACjF,OAAO,KAAK,IAAIA,EAAK,KAAK,IAAID,EAAKD,CAAK,CAAC,CAC1C,CAOO,SAASG,EAAoBC,EAAkD,CACrF,IAAIJ,EAAQ,EACZ,GAAII,GAAe,KAClB,OAAOJ,EAGJ,OAAOI,GAAgB,SAC1BJ,EAAQI,EACEA,EAAY,SAAS,KAAK,EACpCJ,EAAQ,OAAOI,EAAY,QAAQ,MAAO,EAAE,CAAC,EAAI,GAEjDJ,EAAQ,OAAOI,CAAW,EAG3B,IAAMC,EAAS,OAAO,MAAML,CAAK,EAAI,EAAIA,EACzC,OAAOD,EAAMM,EAAQ,CAAE,IAAK,EAAG,IAAK,EAAG,CAAC,CACzC,CAKA,SAASC,EAASN,EAAiC,CAClD,OAAO,OAAOA,GAAU,QACzB,CAKA,SAASO,EAAmBP,EAAgBE,EAA8B,CACzE,OAAOI,EAASN,CAAK,GAAK,CAAC,OAAO,MAAMA,CAAK,GAAKA,GAASE,GAAOF,GAAS,CAC5E,CAKA,SAASQ,EAAiBR,EAAiC,CAC1D,OAAOM,EAASN,CAAK,GAAK,CAAC,OAAO,MAAMA,CAAK,GAAKA,EAAQ,CAC3D","names":["clsx","createContext","useContext","useMemo","jsx","jsxs","defaultMax","ProgressContext","createContext","ProgressDonut","children","className","_max","_strokeWidth","_value","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","valueNow","isNumber","ctx","useMemo","clsx","cx","indeterminateTailPercent","ProgressDonutIndicator","gradientId","useRandomStableId","useContext","percentage","clamp","value","min","max","deriveStrokeWidthPx","strokeWidth","stroke","isNumber","isValidValueNumber","isValidMaxNumber"]}
1	+ {"version":3,"sources":["../src/components/progress/progress-donut.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport type { ComponentProps, HTMLAttributes } from \"react\";\nimport { useRandomStableId } from \"../../hooks/use-random-stable-id.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number \| RemValue;\ntype ValueType = number \| \"indeterminate\";\n\n/*\n The default maximum value of the progress bar.\n /\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst ProgressContext = createContext<ProgressContextValue>({\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n});\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t\"viewBox\" \| \"role\" \| \"aria-valuemax\" \| \"aria-valuemin\" \| \"aria-valuenow\" \| \"width\" \| \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/\n\t The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t \n\t @default 100\n\t /\n\tmax?: number \| undefined;\n\t/\n\t The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t \n\t @default 0.25rem (4px)\n\t /\n\tstrokeWidth?: StrokeWidth;\n\t/\n\t The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t \n\t @default 0\n\t /\n\tvalue?: ValueType \| undefined;\n};\n\n/\n A simple circular progress bar.\n /\nconst ProgressDonut = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (isValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\") satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(_strokeWidth);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\tvalue === \"indeterminate\" && \"animation-duration-[15s] transform-gpu animate-spin\",\n\t\t\t\t\tcx(\"size-6 text-gray-200 dark:text-gray-300\", className),\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tr={`calc(50% - ${strokeWidthPx / 2}px)`}\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\n\n/\n Length (value) of the progress indicator tail when the progress bar is indeterminate.\n /\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/\n The indicator for the circular progress bar.\n /\nconst ProgressDonutIndicator = ({ className, ...props }: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useRandomStableId();\n\tconst ctx = useContext(ProgressContext);\n\tconst percentage = (ctx.value == \"indeterminate\" ? indeterminateTailPercent : ctx.value / ctx.max) 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value == \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tr={`calc(50% - ${strokeWidthPx / 2}px)`}\n\t\t\t\tstroke={ctx.value == \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\ttransform-origin=\"center\"\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\n\nexport {\n\t//,\n\tProgressDonut,\n\tProgressDonutIndicator,\n};\n\n/*\n Clamp a value between a minimum and maximum value.\n /\nfunction clamp(value: number, { min, max }: { min: number; max: number }): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/\n Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n /\nexport function deriveStrokeWidthPx(strokeWidth: number \| string \| undefined): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/*\n Check if a value is a number.\n /\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/\n Check if a value is a valid number within the range of 0 to `max`.\n /\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/\n Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n"],"mappings":"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","names":["clsx","createContext","useContext","useMemo","jsx","jsxs","defaultMax","ProgressContext","createContext","ProgressDonut","children","className","_max","_strokeWidth","_value","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","valueNow","isNumber","ctx","useMemo","clsx","cx","indeterminateTailPercent","ProgressDonutIndicator","gradientId","useRandomStableId","useContext","percentage","clamp","value","min","max","deriveStrokeWidthPx","strokeWidth","stroke","isNumber","isValidValueNumber","isValidMaxNumber"]}

package/dist/theme-provider.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{a as g}from"./chunk-D3XF6J5A.js";import E from"clsx";import{createContext as N,useContext as W,useEffect as x,useMemo as C,useState as B}from"react";import _ from"tiny-invariant";import{Fragment as k,jsx as i,jsxs as b}from"react/jsx-runtime";var M="https://cdn.ngrok.com",q=`${M}/static/fonts`,R=["/euclid-square/EuclidSquare-Regular-WebS.woff","/euclid-square/EuclidSquare-RegularItalic-WebS.woff","/euclid-square/EuclidSquare-Medium-WebS.woff","/euclid-square/EuclidSquare-Semibold-WebS.woff","/euclid-square/EuclidSquare-MediumItalic-WebS.woff","/ibm-plex-mono/IBMPlexMono-Text.woff","/ibm-plex-mono/IBMPlexMono-TextItalic.woff","/ibm-plex-mono/IBMPlexMono-SemiBold.woff","/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff"],D=e=>`${q}${e}`,y=({includeNunitoSans:e=!1})=>b(k,{children:[i("link",{rel:"preconnect",href:M}),R.map(t=>i("link",{rel:"preload",href:D(t),as:"font",type:"font/woff",crossOrigin:"anonymous"},t)),e&&i(L,{})]});function L(){return b(k,{children:[i("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),i("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"}),i("link",{href:"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap",rel:"stylesheet"})]})}import{Fragment as X,jsx as w,jsxs as Z}from"react/jsx-runtime";var h="(prefers-color-scheme: dark)",l="(prefers-contrast: more)",v=["light","dark","light-high-contrast","dark-high-contrast"],p=["system",...v],O=e=>e;function S(e){return typeof e!="string"?!1:p.includes(e)}var A=e=>e;function H(e){return typeof e!="string"?!1:v.includes(e)}var f="mantle-ui-theme",Q=["system",()=>null],I=N(Q),u=()=>typeof window<"u";function c(e,t="system"){let o=t??"system";if(u()){let s=null;try{s="localStorage"in window?window.localStorage.getItem(e):null}catch{}return S(s)?s:o}return o}function z({children:e,defaultTheme:t="system",storageKey:o=f}){let[s,r]=B(()=>{let n=c(o,t);return a(n),n});x(()=>{let n=c(o,t);r(n),a(n)},[t,o]),x(()=>{let n=window.matchMedia(h),m=window.matchMedia(l),d=()=>{c(o,t)==="system"&&a("system")};return n.addEventListener("change",d),m.addEventListener("change",d),()=>{n.removeEventListener("change",d),m.removeEventListener("change",d)}},[t,o]);let T=C(()=>[s,n=>{try{"localStorage"in window&&window.localStorage.setItem(o,n)}catch{}r(n),a(n)}],[o,s]);return w(I.Provider,{value:T,children:e})}function F(){let e=W(I);return _(e,"useTheme must be used within a ThemeProvider"),e}function a(e){if(!u())return;let t=window.document.documentElement;t.classList.remove(...p);let o=window.matchMedia(h).matches,s=window.matchMedia(l).matches,r=P(e,{prefersDarkMode:o,prefersHighContrast:s});t.classList.add(r),t.dataset.appliedTheme=r,t.dataset.theme=e}function G(){if(!u())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=S(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:H(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function P(e,{prefersDarkMode:t,prefersHighContrast:o}){return e==="system"?U({prefersDarkMode:t,prefersHighContrast:o}):e}function J(){let[e]=F(),t=g(h),o=g(l);return P(e,{prefersDarkMode:t,prefersHighContrast:o})}function U({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function $({defaultTheme:e="system",storageKey:t=f}){return`
+import{a as g}from"./chunk-D3XF6J5A.js";import E from"clsx";import{createContext as N,useContext as W,useEffect as x,useMemo as C,useState as B}from"react";import _ from"tiny-invariant";import{Fragment as k,jsx as a,jsxs as b}from"react/jsx-runtime";var M="https://assets.ngrok.com",q=`${M}/fonts`,R=["/euclid-square/EuclidSquare-Regular-WebS.woff","/euclid-square/EuclidSquare-RegularItalic-WebS.woff","/euclid-square/EuclidSquare-Medium-WebS.woff","/euclid-square/EuclidSquare-Semibold-WebS.woff","/euclid-square/EuclidSquare-MediumItalic-WebS.woff","/ibm-plex-mono/IBMPlexMono-Text.woff","/ibm-plex-mono/IBMPlexMono-TextItalic.woff","/ibm-plex-mono/IBMPlexMono-SemiBold.woff","/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff"],D=e=>`${q}${e}`,y=({includeNunitoSans:e=!1})=>b(k,{children:[a("link",{rel:"preconnect",href:M}),R.map(t=>a("link",{rel:"preload",href:D(t),as:"font",type:"font/woff",crossOrigin:"anonymous"},t)),e&&a(L,{})]});function L(){return b(k,{children:[a("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),a("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"}),a("link",{href:"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap",rel:"stylesheet"})]})}import{Fragment as X,jsx as w,jsxs as Z}from"react/jsx-runtime";var h="(prefers-color-scheme: dark)",l="(prefers-contrast: more)",v=["light","dark","light-high-contrast","dark-high-contrast"],p=["system",...v],O=e=>e;function S(e){return typeof e!="string"?!1:p.includes(e)}var A=e=>e;function H(e){return typeof e!="string"?!1:v.includes(e)}var f="mantle-ui-theme",Q=["system",()=>null],I=N(Q),u=()=>typeof window<"u";function c(e,t="system"){let o=t??"system";if(u()){let s=null;try{s="localStorage"in window?window.localStorage.getItem(e):null}catch{}return S(s)?s:o}return o}function z({children:e,defaultTheme:t="system",storageKey:o=f}){let[s,r]=B(()=>{let n=c(o,t);return i(n),n});x(()=>{let n=c(o,t);r(n),i(n)},[t,o]),x(()=>{let n=window.matchMedia(h),m=window.matchMedia(l),d=()=>{c(o,t)==="system"&&i("system")};return n.addEventListener("change",d),m.addEventListener("change",d),()=>{n.removeEventListener("change",d),m.removeEventListener("change",d)}},[t,o]);let T=C(()=>[s,n=>{try{"localStorage"in window&&window.localStorage.setItem(o,n)}catch{}r(n),i(n)}],[o,s]);return w(I.Provider,{value:T,children:e})}function F(){let e=W(I);return _(e,"useTheme must be used within a ThemeProvider"),e}function i(e){if(!u())return;let t=window.document.documentElement;t.classList.remove(...p);let o=window.matchMedia(h).matches,s=window.matchMedia(l).matches,r=P(e,{prefersDarkMode:o,prefersHighContrast:s});t.classList.add(r),t.dataset.appliedTheme=r,t.dataset.theme=e}function G(){if(!u())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=S(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:H(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function P(e,{prefersDarkMode:t,prefersHighContrast:o}){return e==="system"?U({prefersDarkMode:t,prefersHighContrast:o}):e}function J(){let[e]=F(),t=g(h),o=g(l);return P(e,{prefersDarkMode:t,prefersHighContrast:o})}function U({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function $({defaultTheme:e="system",storageKey:t=f}){return`
 (function() {
 	const themes = ${JSON.stringify(p)};
 	const isTheme = (value) => typeof value === "string" && themes.includes(value);
@@ -30,5 +30,5 @@ import{a as g}from"./chunk-D3XF6J5A.js";import E from"clsx";import{createContext
 	htmlElement.dataset.appliedTheme = initialTheme;
 	htmlElement.dataset.theme = themePreference;
 })();
-`.trim()}var Y=({defaultTheme:e="system",storageKey:t=f,includeNunitoSans:o=!1})=>Z(X,{children:[w("script",{dangerouslySetInnerHTML:{__html:$({defaultTheme:e,storageKey:t})}}),w(y,{includeNunitoSans:o})]});function V(e){let{className:t="",defaultTheme:o="system",storageKey:s=f}=e??{};return C(()=>{if(!u())return{className:E(t),"data-applied-theme":"system","data-theme":"system"};let r=window.matchMedia(h).matches,T=window.matchMedia(l).matches,n=c(s,o),m=P(n,{prefersDarkMode:r,prefersHighContrast:T});return{className:E(t,m),"data-applied-theme":m,"data-theme":n}},[t,o,s])}export{A as $resolvedTheme,O as $theme,Y as MantleThemeHeadContent,y as PreloadFonts,z as ThemeProvider,a as applyTheme,H as isResolvedTheme,S as isTheme,$ as preventWrongThemeFlashScriptContent,G as readThemeFromHtmlElement,v as resolvedThemes,p as themes,J as useAppliedTheme,V as useInitialHtmlThemeProps,F as useTheme};
+`.trim()}var Y=({defaultTheme:e="system",storageKey:t=f,includeNunitoSans:o=!1})=>Z(X,{children:[w("script",{dangerouslySetInnerHTML:{__html:$({defaultTheme:e,storageKey:t})}}),w(y,{includeNunitoSans:o})]});function V(e){let{className:t="",defaultTheme:o="system",storageKey:s=f}=e??{};return C(()=>{if(!u())return{className:E(t),"data-applied-theme":"system","data-theme":"system"};let r=window.matchMedia(h).matches,T=window.matchMedia(l).matches,n=c(s,o),m=P(n,{prefersDarkMode:r,prefersHighContrast:T});return{className:E(t,m),"data-applied-theme":m,"data-theme":n}},[t,o,s])}export{A as $resolvedTheme,O as $theme,Y as MantleThemeHeadContent,y as PreloadFonts,z as ThemeProvider,i as applyTheme,H as isResolvedTheme,S as isTheme,$ as preventWrongThemeFlashScriptContent,G as readThemeFromHtmlElement,v as resolvedThemes,p as themes,J as useAppliedTheme,V as useInitialHtmlThemeProps,F as useTheme};
 //# sourceMappingURL=theme-provider.js.map

package/dist/theme-provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/theme-provider/theme-provider.tsx","../src/components/theme-provider/preload-fonts.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { useMatchesMediaQuery } from \"../../hooks/use-matches-media-query.js\";\nimport { PreloadFonts } from \"./preload-fonts.js\";\n\n/*\n prefersDarkModeMediaQuery is the media query used to detect if the user prefers dark mode.\n /\nconst prefersDarkModeMediaQuery = \"(prefers-color-scheme: dark)\";\n\n/\n prefersHighContrastMediaQuery is the media query used to detect if the user prefers high contrast mode.\n /\nconst prefersHighContrastMediaQuery = \"(prefers-contrast: more)\";\n\n/\n resolvedThemes is a tuple of valid themes that have been resolved from \"system\" to a specific theme.\n /\nconst resolvedThemes = [\"light\", \"dark\", \"light-high-contrast\", \"dark-high-contrast\"] as const;\n\n/\n ResolvedTheme is a type that represents a theme that has been resolved from \"system\" to a specific theme.\n /\ntype ResolvedTheme = (typeof resolvedThemes)[number];\n\n/\n themes is a tuple of valid themes.\n /\nconst themes = [\"system\", ...resolvedThemes] as const;\n\n/\n Theme is a string literal type that represents a valid theme.\n /\ntype Theme = (typeof themes)[number];\n\n/\n $theme is a helper which translates the Theme type into a string literal type.\n /\nconst $theme = <T extends Theme = Theme>(value: T) => value;\n\n/\n Type predicate that checks if a value is a valid theme.\n /\nfunction isTheme(value: unknown): value is Theme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn themes.includes(value as Theme);\n}\n\n/\n $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.\n /\nconst $resolvedTheme = <T extends ResolvedTheme = ResolvedTheme>(value: T) => value;\n\n/\n Type predicate that checks if a value is a valid resolved theme.\n /\nfunction isResolvedTheme(value: unknown): value is ResolvedTheme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn resolvedThemes.includes(value as ResolvedTheme);\n}\n\n/\n DEFAULT_STORAGE_KEY is the default key used to store the theme in localStorage.\n /\nconst DEFAULT_STORAGE_KEY = \"mantle-ui-theme\";\n\n/\n ThemeProviderState is the shape of the state returned by the ThemeProviderContext.\n /\ntype ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];\n\n/\n Initial state for the ThemeProviderContext.\n /\nconst initialState: ThemeProviderState = [\"system\", () => null];\n\n/\n ThemeProviderContext is a React Context that provides the current theme and a function to set the theme.\n /\nconst ThemeProviderContext = createContext<ThemeProviderState>(initialState);\n\n/\n isBrowser returns true if the code is running in a browser environment.\n /\nconst isBrowser = () => typeof window !== \"undefined\";\n\n/\n Gets the stored theme from localStorage or returns the default theme if no theme is stored.\n /\nfunction getStoredTheme(storageKey: string, defaultTheme: Theme = \"system\") {\n\tconst fallbackTheme = defaultTheme ?? \"system\";\n\tif (isBrowser()) {\n\t\tlet storedTheme: string \| null = null;\n\t\ttry {\n\t\t\tstoredTheme = \"localStorage\" in window ? window.localStorage.getItem(storageKey) : null;\n\t\t} catch (_) {}\n\t\treturn isTheme(storedTheme) ? storedTheme : fallbackTheme;\n\t}\n\treturn fallbackTheme;\n}\n\ntype ThemeProviderProps = PropsWithChildren & {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n};\n\n/\n ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.\n /\nfunction ThemeProvider({ children, defaultTheme = \"system\", storageKey = DEFAULT_STORAGE_KEY }: ThemeProviderProps) {\n\tconst [theme, setTheme] = useState<Theme>(() => {\n\t\tconst initialTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tapplyTheme(initialTheme);\n\t\treturn initialTheme;\n\t});\n\n\tuseEffect(() => {\n\t\tconst storedTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tsetTheme(storedTheme);\n\t\tapplyTheme(storedTheme);\n\t}, [defaultTheme, storageKey]);\n\n\tuseEffect(() => {\n\t\tconst prefersDarkMql = window.matchMedia(prefersDarkModeMediaQuery);\n\t\tconst prefersHighContrastMql = window.matchMedia(prefersHighContrastMediaQuery);\n\n\t\tconst onChange = () => {\n\t\t\tconst storedTheme = getStoredTheme(storageKey, defaultTheme);\n\n\t\t\t// If the stored theme is not \"system\", then the user has explicitly set a theme and we should not\n\t\t\t// automatically change the theme when the user's system preferences change.\n\t\t\tif (storedTheme !== \"system\") {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tapplyTheme(\"system\");\n\t\t};\n\n\t\tprefersDarkMql.addEventListener(\"change\", onChange);\n\t\tprefersHighContrastMql.addEventListener(\"change\", onChange);\n\n\t\treturn () => {\n\t\t\tprefersDarkMql.removeEventListener(\"change\", onChange);\n\t\t\tprefersHighContrastMql.removeEventListener(\"change\", onChange);\n\t\t};\n\t}, [defaultTheme, storageKey]);\n\n\tconst value: ThemeProviderState = useMemo(\n\t\t() => [\n\t\t\ttheme,\n\t\t\t(theme: Theme) => {\n\t\t\t\ttry {\n\t\t\t\t\tif (\"localStorage\" in window) {\n\t\t\t\t\t\twindow.localStorage.setItem(storageKey, theme);\n\t\t\t\t\t}\n\t\t\t\t} catch (_) {}\n\t\t\t\tsetTheme(theme);\n\t\t\t\tapplyTheme(theme);\n\t\t\t},\n\t\t],\n\t\t[storageKey, theme],\n\t);\n\n\treturn <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;\n}\n\n/\n useTheme returns the current theme and a function to set the theme.\n \n @note This function will throw an error if used outside of a ThemeProvider context tree.\n /\nfunction useTheme() {\n\tconst context = useContext(ThemeProviderContext);\n\n\tinvariant(context, \"useTheme must be used within a ThemeProvider\");\n\n\treturn context;\n}\n\n/\n Applies the given theme to the `<html>` element.\n /\nfunction applyTheme(theme: Theme) {\n\tif (!isBrowser()) {\n\t\treturn;\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\tconst newTheme = resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\n\thtmlElement.classList.add(newTheme);\n\thtmlElement.dataset.appliedTheme = newTheme;\n\thtmlElement.dataset.theme = theme;\n}\n\n/\n Read the theme and applied theme from the `<html>` element.\n /\nfunction readThemeFromHtmlElement() {\n\tif (!isBrowser()) {\n\t\treturn {\n\t\t\tappliedTheme: undefined,\n\t\t\ttheme: undefined,\n\t\t};\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\tconst theme = isTheme(htmlElement.dataset.theme) ? htmlElement.dataset.theme : undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme) ? htmlElement.dataset.appliedTheme : undefined;\n\n\treturn {\n\t\tappliedTheme,\n\t\ttheme,\n\t};\n}\n\n/\n If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n /\nfunction resolveTheme(\n\ttheme: Theme,\n\t{ prefersDarkMode, prefersHighContrast }: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({ prefersDarkMode, prefersHighContrast });\n\t}\n\n\treturn theme;\n}\n\n/\n If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n /\nfunction useAppliedTheme() {\n\tconst [theme] = useTheme();\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(prefersHighContrastMediaQuery);\n\n\treturn resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\n}\n\n/\n determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.\n * @private\n /\nexport function determineThemeFromMediaQuery({\n\tprefersDarkMode,\n\tprefersHighContrast,\n}: {\n\tprefersDarkMode: boolean;\n\tprefersHighContrast: boolean;\n}): ResolvedTheme {\n\tif (prefersHighContrast) {\n\t\treturn prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t}\n\n\treturn prefersDarkMode ? \"dark\" : \"light\";\n}\n\nfunction preventWrongThemeFlashScriptContent({\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n}: {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n}) {\n\treturn `\n(function() {\n\tconst themes = ${JSON.stringify(themes)};\n\tconst isTheme = (value) => typeof value === \"string\" && themes.includes(value);\n\tconst fallbackTheme = \"${defaultTheme}\" ?? \"system\";\n\tlet maybeStoredTheme = null;\n\ttry {\n\t\tmaybeStoredTheme = \"localStorage\" in window ? window.localStorage.getItem(\"${storageKey}\") : null;\n\t} catch (_) {}\n\tconst hasStoredTheme = isTheme(maybeStoredTheme);\n\tif (!hasStoredTheme && \"localStorage\" in window) {\n\t\ttry {\n\t\t\twindow.localStorage.setItem(\"${storageKey}\", fallbackTheme);\n\t\t} catch (_) {}\n\t}\n\tconst themePreference = hasStoredTheme ? maybeStoredTheme : fallbackTheme;\n\tconst prefersDarkMode = window.matchMedia(\"${prefersDarkModeMediaQuery}\").matches;\n\tconst prefersHighContrast = window.matchMedia(\"${prefersHighContrastMediaQuery}\").matches;\n\tlet initialTheme = themePreference;\n\tif (initialTheme === \"system\") {\n\t\tif (prefersHighContrast) {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t} else {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark\" : \"light\";\n\t\t}\n\t}\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\thtmlElement.classList.add(initialTheme);\n\thtmlElement.dataset.appliedTheme = initialTheme;\n\thtmlElement.dataset.theme = themePreference;\n})();\n`.trim();\n}\n\ntype MantleThemeHeadContentProps = {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n} & ComponentProps<typeof PreloadFonts>;\n\n/\n MantleThemeHeadContent is a React component that prevents the wrong theme from flashing on initial page load.\n * Render as high as possible in the <head> element.\n /\nconst MantleThemeHeadContent = ({\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n\tincludeNunitoSans = false,\n}: MantleThemeHeadContentProps) => (\n\t<>\n\t\t<script\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t__html: preventWrongThemeFlashScriptContent({ defaultTheme, storageKey }),\n\t\t\t}}\n\t\t/>\n\t\t<PreloadFonts includeNunitoSans={includeNunitoSans} />\n\t</>\n);\n\ntype InitialThemeProps = {\n\tclassName: string;\n\t\"data-applied-theme\": Omit<Theme, \"system\">;\n\t\"data-theme\": Theme;\n};\n\n/\n useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.\n /\nfunction useInitialHtmlThemeProps(props?: {\n\tclassName?: string;\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n}): InitialThemeProps {\n\tconst { className = \"\", defaultTheme = \"system\", storageKey = DEFAULT_STORAGE_KEY } = props ?? {};\n\n\treturn useMemo(() => {\n\t\tif (!isBrowser()) {\n\t\t\treturn {\n\t\t\t\tclassName: clsx(className),\n\t\t\t\t\"data-applied-theme\": \"system\",\n\t\t\t\t\"data-theme\": \"system\",\n\t\t\t};\n\t\t}\n\n\t\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\t\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\t\tconst initialTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tconst reolvedTheme = resolveTheme(initialTheme, { prefersDarkMode, prefersHighContrast });\n\n\t\treturn {\n\t\t\tclassName: clsx(className, reolvedTheme),\n\t\t\t\"data-applied-theme\": reolvedTheme,\n\t\t\t\"data-theme\": initialTheme,\n\t\t};\n\t}, [className, defaultTheme, storageKey]);\n}\n\nexport {\n\t//,\n\t$resolvedTheme,\n\t$theme,\n\tapplyTheme,\n\tisResolvedTheme,\n\tisTheme,\n\tMantleThemeHeadContent,\n\tpreventWrongThemeFlashScriptContent,\n\treadThemeFromHtmlElement,\n\tresolvedThemes,\n\tThemeProvider,\n\tthemes,\n\tuseAppliedTheme,\n\tuseInitialHtmlThemeProps,\n\tuseTheme,\n};\n\nexport type {\n\t//,\n\tResolvedTheme,\n\tTheme,\n\tThemeProviderProps,\n};\n","const cdnOrigin = \"https://cdn.ngrok.com\";\nconst cdnBase = `${cdnOrigin}/static/fonts`;\n\nconst fonts = [\n\t\"/euclid-square/EuclidSquare-Regular-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-RegularItalic-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Medium-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Semibold-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-MediumItalic-WebS.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-Text.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-TextItalic.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBold.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff\",\n] as const;\n\ntype Font = (typeof fonts)[number];\n\nconst fontHref = <T extends Font = Font>(font: T) => `${cdnBase}${font}` as const;\n\ntype Props = {\n\t/\n\t If set, will also preload and include the optional Nunito Sans font from Google Fonts.\n\t * @default false\n\t /\n\tincludeNunitoSans?: boolean;\n};\n\n/\n Preload custom fonts used in the theme. This should be added to the head of the document in your application, preferably as high as possible.\n * Normally you won't use this directly, but instead use the `MantleThemeHeadContent` component which includes this.\n */\nconst PreloadFonts = ({ includeNunitoSans = false }: Props) => (\n\t<>\n\t\t<link rel=\"preconnect\" href={cdnOrigin} />\n\t\t{fonts.map((font) => (\n\t\t\t<link key={font} rel=\"preload\" href={fontHref(font)} as=\"font\" type=\"font/woff\" crossOrigin=\"anonymous\" />\n\t\t))}\n\t\t{includeNunitoSans && <NunitoSans />}\n\t</>\n);\n\nexport {\n\t//,\n\tPreloadFonts,\n};\n\nfunction NunitoSans() {\n\treturn (\n\t\t<>\n\t\t\t<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n\t\t\t<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"anonymous\" />\n\t\t\t<link\n\t\t\t\thref=\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap\"\n\t\t\t\trel=\"stylesheet\"\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"mappings":"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","names":["clsx","createContext","useContext","useEffect","useMemo","useState","invariant","Fragment","jsx","jsxs","cdnOrigin","cdnBase","fonts","fontHref","font","PreloadFonts","includeNunitoSans","NunitoSans","NunitoSans","jsxs","Fragment","jsx","Fragment","jsx","jsxs","prefersDarkModeMediaQuery","prefersHighContrastMediaQuery","resolvedThemes","themes","$theme","value","isTheme","$resolvedTheme","isResolvedTheme","DEFAULT_STORAGE_KEY","initialState","ThemeProviderContext","createContext","isBrowser","getStoredTheme","storageKey","defaultTheme","fallbackTheme","storedTheme","ThemeProvider","children","theme","setTheme","useState","initialTheme","applyTheme","useEffect","prefersDarkMql","prefersHighContrastMql","onChange","useMemo","useTheme","context","useContext","invariant","htmlElement","prefersDarkMode","prefersHighContrast","newTheme","resolveTheme","readThemeFromHtmlElement","determineThemeFromMediaQuery","useAppliedTheme","useMatchesMediaQuery","preventWrongThemeFlashScriptContent","MantleThemeHeadContent","includeNunitoSans","PreloadFonts","useInitialHtmlThemeProps","props","className","clsx","reolvedTheme"]}
1	+ {"version":3,"sources":["../src/components/theme-provider/theme-provider.tsx","../src/components/theme-provider/preload-fonts.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { useMatchesMediaQuery } from \"../../hooks/use-matches-media-query.js\";\nimport { PreloadFonts } from \"./preload-fonts.js\";\n\n/*\n prefersDarkModeMediaQuery is the media query used to detect if the user prefers dark mode.\n /\nconst prefersDarkModeMediaQuery = \"(prefers-color-scheme: dark)\";\n\n/\n prefersHighContrastMediaQuery is the media query used to detect if the user prefers high contrast mode.\n /\nconst prefersHighContrastMediaQuery = \"(prefers-contrast: more)\";\n\n/\n resolvedThemes is a tuple of valid themes that have been resolved from \"system\" to a specific theme.\n /\nconst resolvedThemes = [\"light\", \"dark\", \"light-high-contrast\", \"dark-high-contrast\"] as const;\n\n/\n ResolvedTheme is a type that represents a theme that has been resolved from \"system\" to a specific theme.\n /\ntype ResolvedTheme = (typeof resolvedThemes)[number];\n\n/\n themes is a tuple of valid themes.\n /\nconst themes = [\"system\", ...resolvedThemes] as const;\n\n/\n Theme is a string literal type that represents a valid theme.\n /\ntype Theme = (typeof themes)[number];\n\n/\n $theme is a helper which translates the Theme type into a string literal type.\n /\nconst $theme = <T extends Theme = Theme>(value: T) => value;\n\n/\n Type predicate that checks if a value is a valid theme.\n /\nfunction isTheme(value: unknown): value is Theme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn themes.includes(value as Theme);\n}\n\n/\n $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.\n /\nconst $resolvedTheme = <T extends ResolvedTheme = ResolvedTheme>(value: T) => value;\n\n/\n Type predicate that checks if a value is a valid resolved theme.\n /\nfunction isResolvedTheme(value: unknown): value is ResolvedTheme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn resolvedThemes.includes(value as ResolvedTheme);\n}\n\n/\n DEFAULT_STORAGE_KEY is the default key used to store the theme in localStorage.\n /\nconst DEFAULT_STORAGE_KEY = \"mantle-ui-theme\";\n\n/\n ThemeProviderState is the shape of the state returned by the ThemeProviderContext.\n /\ntype ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];\n\n/\n Initial state for the ThemeProviderContext.\n /\nconst initialState: ThemeProviderState = [\"system\", () => null];\n\n/\n ThemeProviderContext is a React Context that provides the current theme and a function to set the theme.\n /\nconst ThemeProviderContext = createContext<ThemeProviderState>(initialState);\n\n/\n isBrowser returns true if the code is running in a browser environment.\n /\nconst isBrowser = () => typeof window !== \"undefined\";\n\n/\n Gets the stored theme from localStorage or returns the default theme if no theme is stored.\n /\nfunction getStoredTheme(storageKey: string, defaultTheme: Theme = \"system\") {\n\tconst fallbackTheme = defaultTheme ?? \"system\";\n\tif (isBrowser()) {\n\t\tlet storedTheme: string \| null = null;\n\t\ttry {\n\t\t\tstoredTheme = \"localStorage\" in window ? window.localStorage.getItem(storageKey) : null;\n\t\t} catch (_) {}\n\t\treturn isTheme(storedTheme) ? storedTheme : fallbackTheme;\n\t}\n\treturn fallbackTheme;\n}\n\ntype ThemeProviderProps = PropsWithChildren & {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n};\n\n/\n ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.\n /\nfunction ThemeProvider({ children, defaultTheme = \"system\", storageKey = DEFAULT_STORAGE_KEY }: ThemeProviderProps) {\n\tconst [theme, setTheme] = useState<Theme>(() => {\n\t\tconst initialTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tapplyTheme(initialTheme);\n\t\treturn initialTheme;\n\t});\n\n\tuseEffect(() => {\n\t\tconst storedTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tsetTheme(storedTheme);\n\t\tapplyTheme(storedTheme);\n\t}, [defaultTheme, storageKey]);\n\n\tuseEffect(() => {\n\t\tconst prefersDarkMql = window.matchMedia(prefersDarkModeMediaQuery);\n\t\tconst prefersHighContrastMql = window.matchMedia(prefersHighContrastMediaQuery);\n\n\t\tconst onChange = () => {\n\t\t\tconst storedTheme = getStoredTheme(storageKey, defaultTheme);\n\n\t\t\t// If the stored theme is not \"system\", then the user has explicitly set a theme and we should not\n\t\t\t// automatically change the theme when the user's system preferences change.\n\t\t\tif (storedTheme !== \"system\") {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tapplyTheme(\"system\");\n\t\t};\n\n\t\tprefersDarkMql.addEventListener(\"change\", onChange);\n\t\tprefersHighContrastMql.addEventListener(\"change\", onChange);\n\n\t\treturn () => {\n\t\t\tprefersDarkMql.removeEventListener(\"change\", onChange);\n\t\t\tprefersHighContrastMql.removeEventListener(\"change\", onChange);\n\t\t};\n\t}, [defaultTheme, storageKey]);\n\n\tconst value: ThemeProviderState = useMemo(\n\t\t() => [\n\t\t\ttheme,\n\t\t\t(theme: Theme) => {\n\t\t\t\ttry {\n\t\t\t\t\tif (\"localStorage\" in window) {\n\t\t\t\t\t\twindow.localStorage.setItem(storageKey, theme);\n\t\t\t\t\t}\n\t\t\t\t} catch (_) {}\n\t\t\t\tsetTheme(theme);\n\t\t\t\tapplyTheme(theme);\n\t\t\t},\n\t\t],\n\t\t[storageKey, theme],\n\t);\n\n\treturn <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;\n}\n\n/\n useTheme returns the current theme and a function to set the theme.\n \n @note This function will throw an error if used outside of a ThemeProvider context tree.\n /\nfunction useTheme() {\n\tconst context = useContext(ThemeProviderContext);\n\n\tinvariant(context, \"useTheme must be used within a ThemeProvider\");\n\n\treturn context;\n}\n\n/\n Applies the given theme to the `<html>` element.\n /\nfunction applyTheme(theme: Theme) {\n\tif (!isBrowser()) {\n\t\treturn;\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\tconst newTheme = resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\n\thtmlElement.classList.add(newTheme);\n\thtmlElement.dataset.appliedTheme = newTheme;\n\thtmlElement.dataset.theme = theme;\n}\n\n/\n Read the theme and applied theme from the `<html>` element.\n /\nfunction readThemeFromHtmlElement() {\n\tif (!isBrowser()) {\n\t\treturn {\n\t\t\tappliedTheme: undefined,\n\t\t\ttheme: undefined,\n\t\t};\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\tconst theme = isTheme(htmlElement.dataset.theme) ? htmlElement.dataset.theme : undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme) ? htmlElement.dataset.appliedTheme : undefined;\n\n\treturn {\n\t\tappliedTheme,\n\t\ttheme,\n\t};\n}\n\n/\n If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n /\nfunction resolveTheme(\n\ttheme: Theme,\n\t{ prefersDarkMode, prefersHighContrast }: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({ prefersDarkMode, prefersHighContrast });\n\t}\n\n\treturn theme;\n}\n\n/\n If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n /\nfunction useAppliedTheme() {\n\tconst [theme] = useTheme();\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(prefersHighContrastMediaQuery);\n\n\treturn resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\n}\n\n/\n determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.\n * @private\n /\nexport function determineThemeFromMediaQuery({\n\tprefersDarkMode,\n\tprefersHighContrast,\n}: {\n\tprefersDarkMode: boolean;\n\tprefersHighContrast: boolean;\n}): ResolvedTheme {\n\tif (prefersHighContrast) {\n\t\treturn prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t}\n\n\treturn prefersDarkMode ? \"dark\" : \"light\";\n}\n\nfunction preventWrongThemeFlashScriptContent({\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n}: {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n}) {\n\treturn `\n(function() {\n\tconst themes = ${JSON.stringify(themes)};\n\tconst isTheme = (value) => typeof value === \"string\" && themes.includes(value);\n\tconst fallbackTheme = \"${defaultTheme}\" ?? \"system\";\n\tlet maybeStoredTheme = null;\n\ttry {\n\t\tmaybeStoredTheme = \"localStorage\" in window ? window.localStorage.getItem(\"${storageKey}\") : null;\n\t} catch (_) {}\n\tconst hasStoredTheme = isTheme(maybeStoredTheme);\n\tif (!hasStoredTheme && \"localStorage\" in window) {\n\t\ttry {\n\t\t\twindow.localStorage.setItem(\"${storageKey}\", fallbackTheme);\n\t\t} catch (_) {}\n\t}\n\tconst themePreference = hasStoredTheme ? maybeStoredTheme : fallbackTheme;\n\tconst prefersDarkMode = window.matchMedia(\"${prefersDarkModeMediaQuery}\").matches;\n\tconst prefersHighContrast = window.matchMedia(\"${prefersHighContrastMediaQuery}\").matches;\n\tlet initialTheme = themePreference;\n\tif (initialTheme === \"system\") {\n\t\tif (prefersHighContrast) {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t} else {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark\" : \"light\";\n\t\t}\n\t}\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\thtmlElement.classList.add(initialTheme);\n\thtmlElement.dataset.appliedTheme = initialTheme;\n\thtmlElement.dataset.theme = themePreference;\n})();\n`.trim();\n}\n\ntype MantleThemeHeadContentProps = {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n} & ComponentProps<typeof PreloadFonts>;\n\n/\n MantleThemeHeadContent is a React component that prevents the wrong theme from flashing on initial page load.\n * Render as high as possible in the <head> element.\n /\nconst MantleThemeHeadContent = ({\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n\tincludeNunitoSans = false,\n}: MantleThemeHeadContentProps) => (\n\t<>\n\t\t<script\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t__html: preventWrongThemeFlashScriptContent({ defaultTheme, storageKey }),\n\t\t\t}}\n\t\t/>\n\t\t<PreloadFonts includeNunitoSans={includeNunitoSans} />\n\t</>\n);\n\ntype InitialThemeProps = {\n\tclassName: string;\n\t\"data-applied-theme\": Omit<Theme, \"system\">;\n\t\"data-theme\": Theme;\n};\n\n/\n useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.\n /\nfunction useInitialHtmlThemeProps(props?: {\n\tclassName?: string;\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n}): InitialThemeProps {\n\tconst { className = \"\", defaultTheme = \"system\", storageKey = DEFAULT_STORAGE_KEY } = props ?? {};\n\n\treturn useMemo(() => {\n\t\tif (!isBrowser()) {\n\t\t\treturn {\n\t\t\t\tclassName: clsx(className),\n\t\t\t\t\"data-applied-theme\": \"system\",\n\t\t\t\t\"data-theme\": \"system\",\n\t\t\t};\n\t\t}\n\n\t\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\t\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\t\tconst initialTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tconst reolvedTheme = resolveTheme(initialTheme, { prefersDarkMode, prefersHighContrast });\n\n\t\treturn {\n\t\t\tclassName: clsx(className, reolvedTheme),\n\t\t\t\"data-applied-theme\": reolvedTheme,\n\t\t\t\"data-theme\": initialTheme,\n\t\t};\n\t}, [className, defaultTheme, storageKey]);\n}\n\nexport {\n\t//,\n\t$resolvedTheme,\n\t$theme,\n\tapplyTheme,\n\tisResolvedTheme,\n\tisTheme,\n\tMantleThemeHeadContent,\n\tpreventWrongThemeFlashScriptContent,\n\treadThemeFromHtmlElement,\n\tresolvedThemes,\n\tThemeProvider,\n\tthemes,\n\tuseAppliedTheme,\n\tuseInitialHtmlThemeProps,\n\tuseTheme,\n};\n\nexport type {\n\t//,\n\tResolvedTheme,\n\tTheme,\n\tThemeProviderProps,\n};\n","const cdnOrigin = \"https://assets.ngrok.com\";\nconst cdnBase = `${cdnOrigin}/fonts`;\n\nconst fonts = [\n\t\"/euclid-square/EuclidSquare-Regular-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-RegularItalic-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Medium-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Semibold-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-MediumItalic-WebS.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-Text.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-TextItalic.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBold.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff\",\n] as const;\n\ntype Font = (typeof fonts)[number];\n\nconst fontHref = <T extends Font = Font>(font: T) => `${cdnBase}${font}` as const;\n\ntype Props = {\n\t/\n\t If set, will also preload and include the optional Nunito Sans font from Google Fonts.\n\t * @default false\n\t /\n\tincludeNunitoSans?: boolean;\n};\n\n/\n Preload custom fonts used in the theme. This should be added to the head of the document in your application, preferably as high as possible.\n * Normally you won't use this directly, but instead use the `MantleThemeHeadContent` component which includes this.\n */\nconst PreloadFonts = ({ includeNunitoSans = false }: Props) => (\n\t<>\n\t\t<link rel=\"preconnect\" href={cdnOrigin} />\n\t\t{fonts.map((font) => (\n\t\t\t<link key={font} rel=\"preload\" href={fontHref(font)} as=\"font\" type=\"font/woff\" crossOrigin=\"anonymous\" />\n\t\t))}\n\t\t{includeNunitoSans && <NunitoSans />}\n\t</>\n);\n\nexport {\n\t//,\n\tPreloadFonts,\n};\n\nfunction NunitoSans() {\n\treturn (\n\t\t<>\n\t\t\t<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n\t\t\t<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"anonymous\" />\n\t\t\t<link\n\t\t\t\thref=\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap\"\n\t\t\t\trel=\"stylesheet\"\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"mappings":"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","names":["clsx","createContext","useContext","useEffect","useMemo","useState","invariant","Fragment","jsx","jsxs","cdnOrigin","cdnBase","fonts","fontHref","font","PreloadFonts","includeNunitoSans","NunitoSans","NunitoSans","jsxs","Fragment","jsx","Fragment","jsx","jsxs","prefersDarkModeMediaQuery","prefersHighContrastMediaQuery","resolvedThemes","themes","$theme","value","isTheme","$resolvedTheme","isResolvedTheme","DEFAULT_STORAGE_KEY","initialState","ThemeProviderContext","createContext","isBrowser","getStoredTheme","storageKey","defaultTheme","fallbackTheme","storedTheme","ThemeProvider","children","theme","setTheme","useState","initialTheme","applyTheme","useEffect","prefersDarkMql","prefersHighContrastMql","onChange","useMemo","useTheme","context","useContext","invariant","htmlElement","prefersDarkMode","prefersHighContrast","newTheme","resolveTheme","readThemeFromHtmlElement","determineThemeFromMediaQuery","useAppliedTheme","useMatchesMediaQuery","preventWrongThemeFlashScriptContent","MantleThemeHeadContent","includeNunitoSans","PreloadFonts","useInitialHtmlThemeProps","props","className","clsx","reolvedTheme"]}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -47,17 +47,17 @@
   "devDependencies": {
     "@phosphor-icons/react": "2.1.7",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.16.11",
-    "@types/prismjs": "1.26.4",
-    "@types/react": "18.3.11",
+    "@types/node": "20.17.0",
+    "@types/prismjs": "1.26.5",
+    "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "4.3.2",
+    "@vitejs/plugin-react": "4.3.3",
     "@vitest/ui": "2.1.3",
     "autoprefixer": "10.4.20",
-    "browserslist": "4.24.0",
+    "browserslist": "4.24.2",
     "date-fns": "3.6.0",
     "jsdom": "25.0.1",
     "postcss": "8.4.47",
@@ -67,7 +67,7 @@
     "tailwindcss": "3.4.14",
     "tsup": "8.3.0",
     "typescript": "5.6.3",
-    "vite": "5.4.9",
+    "vite": "5.4.10",
     "vitest": "2.1.3",
     "zod": "3.23.8",
     "@cfg/tsconfig": "1.0.0"