@ngrok/mantle 0.60.1 → 0.60.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/alert-dialog.js +1 -1
- package/dist/badge.js +1 -1
- package/dist/badge.js.map +1 -1
- package/dist/{chunk-EE3FMPPW.js → chunk-BR4ZHK5A.js} +2 -2
- package/dist/{chunk-EVAIBP32.js → chunk-JATU64S7.js} +2 -2
- package/dist/{chunk-EVAIBP32.js.map → chunk-JATU64S7.js.map} +1 -1
- package/dist/chunk-PEGWGFY7.js +2 -0
- package/dist/chunk-PEGWGFY7.js.map +1 -0
- package/dist/chunk-UGWSBMHH.js +2 -0
- package/dist/chunk-UGWSBMHH.js.map +1 -0
- package/dist/combobox.js +1 -1
- package/dist/combobox.js.map +1 -1
- package/dist/command.js +1 -1
- package/dist/dialog.js +1 -1
- package/dist/dropdown-menu.js +1 -1
- package/dist/dropdown-menu.js.map +1 -1
- package/dist/icons.js +1 -1
- package/dist/icons.js.map +1 -1
- package/dist/mantle.css +18 -2
- package/dist/pagination.js +1 -1
- package/dist/select.js +1 -1
- package/dist/sheet.js +1 -1
- package/dist/theme.d.ts +1 -23
- package/dist/theme.js +1 -1
- package/dist/toast.d.ts +13 -0
- package/dist/toast.js +1 -1
- package/package.json +10 -10
- package/dist/chunk-UKS7NFNC.js +0 -2
- package/dist/chunk-UKS7NFNC.js.map +0 -1
- package/dist/chunk-VBNDWNIJ.js +0 -2
- package/dist/chunk-VBNDWNIJ.js.map +0 -1
- /package/dist/{chunk-EE3FMPPW.js.map → chunk-BR4ZHK5A.js.map} +0 -0
package/dist/alert-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as y,b as A,c as u,d as c,e as D,f as C,g as P,h as v}from"./chunk-OE4YWO7O.js";import{d as f}from"./chunk-
|
|
1
|
+
import{a as y,b as A,c as u,d as c,e as D,f as C,g as P,h as v}from"./chunk-OE4YWO7O.js";import{d as f}from"./chunk-UGWSBMHH.js";import"./chunk-PEGWGFY7.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{a as d}from"./chunk-M6TUHYJA.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import{a as p}from"./chunk-UNFO4DZV.js";import{a as g}from"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{InfoIcon as H}from"@phosphor-icons/react/Info";import{WarningIcon as k}from"@phosphor-icons/react/Warning";import{createContext as M,forwardRef as n,useContext as $,useMemo as q}from"react";import E from"tiny-invariant";import{jsx as i,jsxs as J}from"react/jsx-runtime";var x=M(null);function N(){let t=$(x);return E(t,"AlertDialog child component used outside of AlertDialog parent!"),t}function h({priority:t,...e}){let o=q(()=>({priority:t}),[t]);return i(x.Provider,{value:o,children:i(y,{...e})})}h.displayName="AlertDialog";var R=A;R.displayName="AlertDialogTrigger";var b=u;b.displayName="AlertDialogPortal";var W=n(({className:t,...e},o)=>i(D,{className:a("data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs",t),...e,ref:o}));W.displayName="AlertDialogOverlay";var I=n(({className:t,onInteractOutside:e,onPointerDownOutside:o,preferredWidth:l="max-w-md",...r},m)=>J(b,{children:[i(W,{}),i("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:i(C,{ref:m,className:a("flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start","outline-hidden focus-within:outline-hidden","p-6","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",l,t),onInteractOutside:s=>{f(s),e?.(s)},onPointerDownOutside:s=>{f(s),o?.(s)},...r})})]}));I.displayName="AlertDialogContent";var O=n(({asChild:t=!1,className:e,...o},l)=>i(t?p:"div",{className:a("flex-1 space-y-4",e),ref:l,...o}));O.displayName="AlertDialogBody";var w=n(({asChild:t=!1,className:e,...o},l)=>i(t?p:"div",{className:a("flex flex-col space-y-2 text-center sm:text-start",e),...o}));w.displayName="AlertDialogHeader";var B=n(({asChild:t=!1,className:e,...o},l)=>i(t?p:"div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...o}));B.displayName="AlertDialogFooter";var T=n(({className:t,...e},o)=>i(P,{ref:o,className:a("text-strong text-center text-lg font-medium sm:text-start",t),...e}));T.displayName="AlertDialogTitle";var z=n(({className:t,...e},o)=>i(v,{ref:o,className:a("text-body text-center text-sm font-normal sm:text-start",t),...e}));z.displayName="AlertDialogDescription";var S=n(({appearance:t="filled",...e},o)=>{let l=N(),r="default";return l.priority==="danger"&&(r="danger"),i(d,{appearance:t,priority:r,ref:o,...e})});S.displayName="AlertDialogAction";var j=n(({appearance:t="outlined",className:e,priority:o="neutral",...l},r)=>i(c,{asChild:!0,children:i(d,{appearance:t,className:a("mt-2 sm:mt-0",e),priority:o,ref:r,...l})}));j.displayName="AlertDialogCancel";var V=n(({className:t,svg:e,...o},l)=>{let r=N(),m=r.priority==="danger"?"text-danger-600":"text-accent-600",s=r.priority==="danger"?i(k,{}):i(H,{});return i(g,{ref:l,className:a("size-12 sm:size-7",m,t),svg:e??s,...o})});V.displayName="AlertDialogIcon";var F=c;F.displayName="AlertDialogClose";var G={Root:h,Action:S,Body:O,Cancel:j,Close:F,Content:I,Description:z,Footer:B,Header:w,Icon:V,Title:T,Trigger:R};export{G as AlertDialog};
|
|
2
2
|
//# sourceMappingURL=alert-dialog.js.map
|
package/dist/badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as d}from"./chunk-UNFO4DZV.js";import{a as o}from"./chunk-NZ6DRFAL.js";import{a as c}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as h,isValidElement as k}from"react";import n from"tiny-invariant";import{Fragment as P,jsx as s,jsxs as m}from"react/jsx-runtime";var u=({appearance:t,asChild:e=!1,children:l,className:b,color:g="neutral",icon:r,...i})=>{let x=B(g,t),y=N(g,t),p=c("inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs",r&&"ps-1",x,y,b);if(e){let a=C.only(l);n(k(a),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let f=a.props?.children;return s(d,{className:p,...i,children:h(a,{},m(P,{children:[r&&s(o,{className:"size-4",svg:r}),f]}))})}return m("span",{className:p,...i,children:[r&&s(o,{className:"size-4",svg:r}),l]})};u.displayName="Badge";var w={amber:"bg-amber-500/20",blue:"bg-blue-500/20",cyan:"bg-cyan-500/20",emerald:"bg-emerald-500/20",fuchsia:"bg-fuchsia-500/20",gray:"bg-gray-500/20",green:"bg-green-500/20",indigo:"bg-indigo-500/20",lime:"bg-lime-500/20",orange:"bg-orange-500/20",pink:"bg-pink-500/20",purple:"bg-purple-500/20",red:"bg-red-500/20",rose:"bg-rose-500/20",sky:"bg-sky-500/20",teal:"bg-teal-500/20",violet:"bg-violet-500/20",yellow:"bg-yellow-500/20",accent:"bg-accent-500/20",danger:"bg-danger-500/20",neutral:"bg-neutral-500/20",success:"bg-success-500/20",warning:"bg-warning-500/20"};function B(t,e){
|
|
1
|
+
import{a as d}from"./chunk-UNFO4DZV.js";import{a as o}from"./chunk-NZ6DRFAL.js";import{a as c}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as h,isValidElement as k}from"react";import n from"tiny-invariant";import{Fragment as P,jsx as s,jsxs as m}from"react/jsx-runtime";var u=({appearance:t,asChild:e=!1,children:l,className:b,color:g="neutral",icon:r,...i})=>{let x=B(g,t),y=N(g,t),p=c("inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs",r&&"ps-1",x,y,b);if(e){let a=C.only(l);n(k(a),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let f=a.props?.children;return s(d,{className:p,...i,children:h(a,{},m(P,{children:[r&&s(o,{className:"size-4",svg:r}),f]}))})}return m("span",{className:p,...i,children:[r&&s(o,{className:"size-4",svg:r}),l]})};u.displayName="Badge";var w={amber:"bg-amber-500/20",blue:"bg-blue-500/20",cyan:"bg-cyan-500/20",emerald:"bg-emerald-500/20",fuchsia:"bg-fuchsia-500/20",gray:"bg-gray-500/20",green:"bg-green-500/20",indigo:"bg-indigo-500/20",lime:"bg-lime-500/20",orange:"bg-orange-500/20",pink:"bg-pink-500/20",purple:"bg-purple-500/20",red:"bg-red-500/20",rose:"bg-rose-500/20",sky:"bg-sky-500/20",teal:"bg-teal-500/20",violet:"bg-violet-500/20",yellow:"bg-yellow-500/20",accent:"bg-accent-500/20",danger:"bg-danger-500/20",neutral:"bg-neutral-500/20",success:"bg-success-500/20",warning:"bg-warning-500/20"};function B(t,e){if(e==="muted")return w[t];n(!1,`Invalid appearance: ${String(e)}`)}var v={amber:"text-amber-700",blue:"text-blue-700",cyan:"text-cyan-700",emerald:"text-emerald-700",fuchsia:"text-fuchsia-700",gray:"text-gray-700",green:"text-green-700",indigo:"text-indigo-700",lime:"text-lime-700",orange:"text-orange-700",pink:"text-pink-700",purple:"text-purple-700",red:"text-red-700",rose:"text-rose-700",sky:"text-sky-700",teal:"text-teal-700",violet:"text-violet-700",yellow:"text-yellow-700",accent:"text-accent-700",danger:"text-danger-700",neutral:"text-neutral-700",success:"text-success-700",warning:"text-warning-700"};function N(t,e){if(e==="muted")return v[t];n(!1,`Invalid appearance: ${String(e)}`)}export{u as Badge};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
package/dist/badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import {\n\tChildren,\n\ttype ComponentProps,\n\ttype ReactNode,\n\tcloneElement,\n\tisValidElement,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = ComponentProps<\"span\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t\t */\n\t\tcolor?: Color;\n\t\t/**\n\t\t * The icon to render inside the badge.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The visual style of the badge.\n\t\t */\n\t\tappearance: Appearance;\n\t};\n\n/**\n * A Badge is a non-interactive component used to highlight important\n * information or to visually indicate the status of an item.\n *\n * @see https://mantle.ngrok.com/components/badge#api\n *\n * @example\n * ```tsx\n * <Badge appearance=\"muted\" color=\"success\">\n * Succeeded\n * </Badge>\n * ```\n */\nconst Badge = ({\n\tappearance,\n\tasChild = false,\n\tchildren,\n\tclassName,\n\tcolor = \"neutral\",\n\ticon,\n\t...props\n}: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\tconst badgeClasses = cx(\n\t\t\"inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs\",\n\t\ticon && \"ps-1\",\n\t\tbgColor,\n\t\ttextColor,\n\t\tclassName,\n\t);\n\n\tif (asChild) {\n\t\tconst singleChild = Children.only(children);\n\t\tinvariant(\n\t\t\tisValidElement<BadgeProps>(singleChild),\n\t\t\t\"When using `asChild`, Badge must be passed a single child as a JSX tag.\",\n\t\t);\n\t\tconst grandchildren = singleChild.props?.children;\n\n\t\treturn (\n\t\t\t<Slot className={badgeClasses} {...props}>\n\t\t\t\t{cloneElement(\n\t\t\t\t\tsingleChild,\n\t\t\t\t\t{},\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t</>,\n\t\t\t\t)}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span className={badgeClasses} {...props}>\n\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\nBadge.displayName = \"Badge\";\n\n// MARK: - Exports\n\nexport {\n\t//,\n\tBadge,\n};\n\nexport type {\n\t//,\n\tBadgeProps,\n};\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"wHAAA,OACC,YAAAA,EAGA,gBAAAC,EACA,kBAAAC,MACM,QACP,OAAOC,MAAe,iBAwEjB,mBAAAC,EACU,OAAAC,EADV,QAAAC,MAAA,oBAjCL,IAAMC,EAAQ,CAAC,CACd,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,UACR,KAAAC,EACA,GAAGC,CACJ,IAAkB,CACjB,IAAMC,EAAUC,EAAeJ,EAAOJ,CAAU,EAC1CS,EAAYC,EAAiBN,EAAOJ,CAAU,EAE9CW,EAAeC,EACpB,yGACAP,GAAQ,OACRE,EACAE,EACAN,CACD,EAEA,GAAIF,EAAS,CACZ,IAAMY,EAAcC,EAAS,KAAKZ,CAAQ,EAC1Ca,EACCC,EAA2BH,CAAW,EACtC,yEACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCK,EAACC,EAAA,CAAK,UAAWR,EAAe,GAAGL,EACjC,SAAAc,EACAP,EACA,CAAC,EACDQ,EAAAC,EAAA,CACE,UAAAjB,GAAQa,EAACK,EAAA,CAAQ,UAAU,SAAS,IAAKlB,EAAM,EAC/CY,GACF,CACD,EACD,CAEF,CAEA,OACCI,EAAC,QAAK,UAAWV,EAAe,GAAGL,EACjC,UAAAD,GAAQa,EAACK,EAAA,CAAQ,UAAU,SAAS,IAAKlB,EAAM,EAC/CH,GACF,CAEF,EACAH,EAAM,YAAc,QAgBpB,IAAMyB,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,QAAS,oBACT,QAAS,oBACT,QAAS,mBACV,EAEA,SAASC,EAAeC,EAAcC,EAAwB,CAC7D,
|
|
1
|
+
{"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import {\n\tChildren,\n\ttype ComponentProps,\n\ttype ReactNode,\n\tcloneElement,\n\tisValidElement,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = ComponentProps<\"span\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t\t */\n\t\tcolor?: Color;\n\t\t/**\n\t\t * The icon to render inside the badge.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The visual style of the badge.\n\t\t */\n\t\tappearance: Appearance;\n\t};\n\n/**\n * A Badge is a non-interactive component used to highlight important\n * information or to visually indicate the status of an item.\n *\n * @see https://mantle.ngrok.com/components/badge#api\n *\n * @example\n * ```tsx\n * <Badge appearance=\"muted\" color=\"success\">\n * Succeeded\n * </Badge>\n * ```\n */\nconst Badge = ({\n\tappearance,\n\tasChild = false,\n\tchildren,\n\tclassName,\n\tcolor = \"neutral\",\n\ticon,\n\t...props\n}: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\tconst badgeClasses = cx(\n\t\t\"inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs\",\n\t\ticon && \"ps-1\",\n\t\tbgColor,\n\t\ttextColor,\n\t\tclassName,\n\t);\n\n\tif (asChild) {\n\t\tconst singleChild = Children.only(children);\n\t\tinvariant(\n\t\t\tisValidElement<BadgeProps>(singleChild),\n\t\t\t\"When using `asChild`, Badge must be passed a single child as a JSX tag.\",\n\t\t);\n\t\tconst grandchildren = singleChild.props?.children;\n\n\t\treturn (\n\t\t\t<Slot className={badgeClasses} {...props}>\n\t\t\t\t{cloneElement(\n\t\t\t\t\tsingleChild,\n\t\t\t\t\t{},\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t</>,\n\t\t\t\t)}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span className={badgeClasses} {...props}>\n\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\nBadge.displayName = \"Badge\";\n\n// MARK: - Exports\n\nexport {\n\t//,\n\tBadge,\n};\n\nexport type {\n\t//,\n\tBadgeProps,\n};\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"wHAAA,OACC,YAAAA,EAGA,gBAAAC,EACA,kBAAAC,MACM,QACP,OAAOC,MAAe,iBAwEjB,mBAAAC,EACU,OAAAC,EADV,QAAAC,MAAA,oBAjCL,IAAMC,EAAQ,CAAC,CACd,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,UACR,KAAAC,EACA,GAAGC,CACJ,IAAkB,CACjB,IAAMC,EAAUC,EAAeJ,EAAOJ,CAAU,EAC1CS,EAAYC,EAAiBN,EAAOJ,CAAU,EAE9CW,EAAeC,EACpB,yGACAP,GAAQ,OACRE,EACAE,EACAN,CACD,EAEA,GAAIF,EAAS,CACZ,IAAMY,EAAcC,EAAS,KAAKZ,CAAQ,EAC1Ca,EACCC,EAA2BH,CAAW,EACtC,yEACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCK,EAACC,EAAA,CAAK,UAAWR,EAAe,GAAGL,EACjC,SAAAc,EACAP,EACA,CAAC,EACDQ,EAAAC,EAAA,CACE,UAAAjB,GAAQa,EAACK,EAAA,CAAQ,UAAU,SAAS,IAAKlB,EAAM,EAC/CY,GACF,CACD,EACD,CAEF,CAEA,OACCI,EAAC,QAAK,UAAWV,EAAe,GAAGL,EACjC,UAAAD,GAAQa,EAACK,EAAA,CAAQ,UAAU,SAAS,IAAKlB,EAAM,EAC/CH,GACF,CAEF,EACAH,EAAM,YAAc,QAgBpB,IAAMyB,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,QAAS,oBACT,QAAS,oBACT,QAAS,mBACV,EAEA,SAASC,EAAeC,EAAcC,EAAwB,CAC7D,GAAQA,IACF,QACJ,OAAOH,EAAmBE,CAAK,EAE/BE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAE/D,CAEA,IAAME,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,QAAS,mBACT,QAAS,mBACT,QAAS,kBACV,EAEA,SAASC,EAAiBJ,EAAcC,EAAwB,CAC/D,GAAQA,IACF,QACJ,OAAOE,EAAqBH,CAAK,EAEjCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAE/D","names":["Children","cloneElement","isValidElement","invariant","Fragment","jsx","jsxs","Badge","appearance","asChild","children","className","color","icon","props","bgColor","computeBgColor","textColor","computeTextColor","badgeClasses","cx","singleChild","Children","invariant","isValidElement","grandchildren","jsx","Slot","cloneElement","jsxs","Fragment","SvgOnly","mutedBgColorLookup","computeBgColor","color","appearance","invariant","textColorMutedLookup","computeTextColor"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-OE4YWO7O.js";import{d as p}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-OE4YWO7O.js";import{d as p}from"./chunk-UGWSBMHH.js";import{c as g}from"./chunk-3AUCEZTZ.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as F}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=P;N.displayName="DialogTrigger";var d=D;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var c=r(({className:o,...t},i)=>e(u,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",o),...t}));c.displayName="DialogOverlay";var h=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>F(d,{children:[e(c,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(v,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",s,t),onInteractOutside:n=>{p(n),i?.(n)},onPointerDownOutside:n=>{p(n),l?.(n)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(g,{appearance:l,icon:e(k,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=r(({className:o,...t},i)=>e(y,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=r(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var E={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:c,Portal:d,Title:O,Trigger:N};export{E as a};
|
|
2
|
+
//# sourceMappingURL=chunk-BR4ZHK5A.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as h}from"./chunk-YKYEISYH.js";import{a as P}from"./chunk-MF2QITTY.js";import{a as d}from"./chunk-2NIR7PCL.js";import{a as r}from"./chunk-PFXFESEN.js";import{CaretDownIcon as b}from"@phosphor-icons/react/CaretDown";import{CaretUpIcon as z}from"@phosphor-icons/react/CaretUp";import{CheckIcon as D}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as H,forwardRef as n,useContext as M}from"react";import{jsx as t,jsxs as g}from"react/jsx-runtime";var y=H({}),C=n(({"aria-invalid":o,children:a,id:i,validation:l,onBlur:
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{b as h}from"./chunk-YKYEISYH.js";import{a as P}from"./chunk-MF2QITTY.js";import{a as d}from"./chunk-2NIR7PCL.js";import{a as r}from"./chunk-PFXFESEN.js";import{CaretDownIcon as b}from"@phosphor-icons/react/CaretDown";import{CaretUpIcon as z}from"@phosphor-icons/react/CaretUp";import{CheckIcon as D}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as H,forwardRef as n,useContext as M}from"react";import{jsx as t,jsxs as g}from"react/jsx-runtime";var y=H({}),C=n(({"aria-invalid":o,children:a,id:i,validation:l,onBlur:c,onValueChange:p,onChange:u,...s},m)=>t(e.Root,{...s,onValueChange:f=>{u?.(f),p?.(f)},children:t(y.Provider,{value:{"aria-invalid":o,id:i,validation:l,onBlur:c,ref:m},children:a})}));C.displayName="Select";var x=e.Group;x.displayName="SelectGroup";var w=e.Value;w.displayName="SelectValue";var I=n(({"aria-invalid":o,className:a,children:i,id:l,validation:c,...p},u)=>{let s=M(y),m=s["aria-invalid"]??o,f=m!=null&&m!=="false",v=s.validation??c,S=f?"error":typeof v=="function"?v():v,V=m??S==="error",E=s.id??l;return g(e.Trigger,{"aria-invalid":V,className:r("h-9 text-sm","border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left","hover:border-neutral-400","focus:outline-hidden focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger",a),"data-validation":S||void 0,id:E,ref:P(u,s.ref),...p,children:[i,t(e.Icon,{asChild:!0,children:t(d,{svg:t(b,{weight:"bold"}),className:"size-4"})})]})});I.displayName="SelectTrigger";var N=n(({className:o,...a},i)=>t(e.ScrollUpButton,{ref:i,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:t(d,{svg:t(z,{weight:"bold"}),className:"size-4"})}));N.displayName="SelectScrollUpButton";var R=n(({className:o,...a},i)=>t(e.ScrollDownButton,{ref:i,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:t(d,{svg:t(b,{weight:"bold"}),className:"size-4"})}));R.displayName="SelectScrollDownButton";var T=n(({className:o,children:a,position:i="popper",width:l="trigger",...c},p)=>t(e.Portal,{children:g(e.Content,{ref:p,className:r("border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md","bg-popover",i==="popper"&&"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]",l==="trigger"&&"w-[var(--radix-select-trigger-width)]",o),position:i,...c,children:[t(N,{}),t(e.Viewport,{className:r("p-1",i==="popper"&&"h-[var(--radix-select-trigger-height)] w-full"),children:a}),t(R,{})]})}));T.displayName="SelectContent";var B=n(({className:o,...a},i)=>t(e.Label,{ref:i,className:r("px-2 py-1.5 text-sm font-medium",o),...a}));B.displayName="SelectLabel";var W=n(({className:o,children:a,icon:i,...l},c)=>g(e.Item,{ref:c,className:r("relative flex gap-2 w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-hidden","focus:bg-popover-hover","data-disabled:pointer-events-none data-disabled:opacity-50","data-state-checked:bg-filled-accent data-state-checked:text-on-filled","focus:data-state-checked:bg-filled-accent",o),...l,children:[i&&t(d,{svg:i}),t(e.ItemText,{children:a}),t(e.ItemIndicator,{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:t(d,{svg:t(D,{weight:"bold"}),className:"size-4"})})]}));W.displayName="SelectItem";var L=n(({className:o,...a},i)=>t(h,{ref:i,className:r("-mx-1 my-1 h-px w-auto",o),...a}));L.displayName="SelectSeparator";var q={Root:C,Content:T,Group:x,Item:W,Label:B,Separator:L,Trigger:I,Value:w};export{q as a};
|
|
2
|
+
//# sourceMappingURL=chunk-JATU64S7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUpIcon } from \"@phosphor-icons/react/CaretUp\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tFocusEvent,\n\tPropsWithChildren,\n\tReactNode,\n\tRef,\n\tSelectHTMLAttributes,\n} from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype WithAriaInvalid = Pick<\n\tSelectHTMLAttributes<HTMLSelectElement>,\n\t\"aria-invalid\"\n>;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = PropsWithChildren & {\n\tautoComplete?: string;\n\tdefaultOpen?: boolean;\n\tdefaultValue?: string;\n\tdir?: \"ltr\" | \"rtl\";\n\tdisabled?: boolean;\n\tform?: string;\n\tid?: string;\n\tname?: string;\n\t/**\n\t * Event handler called when Select blurs.\n\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t */\n\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Event handler called when the value changes.\n\t * @deprecated Use `onValueChange` instead.\n\t */\n\tonChange?: (value: string) => void;\n\tonOpenChange?(open: boolean): void;\n\tonValueChange?(value: string): void;\n\topen?: boolean;\n\trequired?: boolean;\n\tvalue?: string;\n} & WithValidation &\n\tWithAriaInvalid;\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select#api-select\n *\n * @example\n * ```tsx\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Group>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Group>\n * <Select.Separator />\n * <Select.Group>\n * <Select.Label>Veggies</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n * </Select.Group>\n * </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Root = forwardRef<HTMLButtonElement, SelectProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tchildren,\n\t\t\tid,\n\t\t\tvalidation,\n\t\t\tonBlur,\n\t\t\tonValueChange,\n\t\t\tonChange,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root\n\t\t\t\t{...props}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tonChange?.(value);\n\t\t\t\t\tonValueChange?.(value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectContext.Provider\n\t\t\t\t\tvalue={{ \"aria-invalid\": _ariaInvalid, id, validation, onBlur, ref }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Group>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Group>\n * <Select.Group>\n * <Select.Label>Veggies</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n * </Select.Group>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-group\n */\nconst Group = SelectPrimitive.Group;\nGroup.displayName = \"SelectGroup\";\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-value\n */\nconst Value = SelectPrimitive.Value;\nValue.displayName = \"SelectValue\";\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<\n\ttypeof SelectPrimitive.Trigger\n> &\n\tWithAriaInvalid &\n\tWithValidation;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n *\n * @see https://mantle.ngrok.com/components/select#api-select-trigger\n *\n * @example\n * ```tsx\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Trigger>,\n\tSelectTriggerProps\n>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInValidProp,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tid: propId,\n\t\t\tvalidation: propValidation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst _ariaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst _validation = ctx.validation ?? propValidation;\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst id = ctx.id ?? propId;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-9 text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"SelectTrigger\";\n\n/**\n * The button that scrolls the select content up.\n * @private\n */\nconst SelectScrollUpButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretUpIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/**\n * The button that scrolls the select content down.\n * @private\n */\nconst SelectScrollDownButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<\n\ttypeof SelectPrimitive.Content\n> & {\n\t/**\n\t * The width of the content. Defaults to the width of the trigger.\n\t * If set to \"content\", the content will use the intrinsic content width; it will be the width of the longest/widest item.\n\t * @default \"trigger\"\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-content\n */\nconst Content = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Content>,\n\tSelectContentProps\n>(\n\t(\n\t\t{ className, children, position = \"popper\", width = \"trigger\", ...props },\n\t\tref,\n\t) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md\",\n\t\t\t\t\t\"bg-popover\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]\",\n\t\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-select-trigger-width)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"p-1\",\n\t\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\t\"h-[var(--radix-select-trigger-height)] w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Group>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Group>\n * <Select.Group>\n * <Select.Label>Veggies</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n * </Select.Group>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-label\n */\nconst Label = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-semibold\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"SelectLabel\";\n\ntype SelectItemProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\n\ticon?: ReactNode;\n};\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n * Displays the children as the option's text.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-item\n */\nconst Item = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Item>,\n\tSelectItemProps\n>(({ className, children, icon, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex gap-2 w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-hidden\",\n\t\t\t\"focus:bg-popover-hover\",\n\t\t\t\"data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\"data-state-checked:bg-filled-accent data-state-checked:text-on-filled\",\n\t\t\t\"focus:data-state-checked:bg-filled-accent\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{icon && <Icon svg={icon} />}\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items or groups of items in the select content.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Group>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Group>\n * <Select.Separator />\n * <Select.Group>\n * <Select.Label>Veggies</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n * </Select.Group>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-separator\n */\nconst SelectSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tclassName={cx(\"-mx-1 my-1 h-px w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nSelectSeparatorComponent.displayName = \"SelectSeparator\";\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select\n *\n * @example\n * ```tsx\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Group>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Group>\n * <Select.Separator />\n * <Select.Group>\n * <Select.Label>Veggies</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n * </Select.Group>\n * </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Select = {\n\t/**\n\t * Displays a list of options for the user to pick from—triggered by a button.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Group>\n\t * <Select.Label>Fruits</Select.Label>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Group>\n\t * <Select.Separator />\n\t * <Select.Group>\n\t * <Select.Label>Veggies</Select.Label>\n\t * <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t * </Select.Group>\n\t * </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The component that pops out when the select is open as a portal adjacent to the trigger button.\n\t * It contains a scrolling viewport of the select items.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-content\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tContent,\n\t/**\n\t * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n\t * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-group\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Group>\n\t * <Select.Label>Fruits</Select.Label>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Group>\n\t * <Select.Group>\n\t * <Select.Label>Veggies</Select.Label>\n\t * <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t * </Select.Group>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tGroup,\n\t/**\n\t * An option within a select menu. Similar to an html `<option>` element.\n\t * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n\t * Displays the children as the option's text.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-item\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tItem,\n\t/**\n\t * Used to render the label of a group. It won't be focusable using arrow keys.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-label\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Group>\n\t * <Select.Label>Fruits</Select.Label>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Group>\n\t * <Select.Group>\n\t * <Select.Label>Veggies</Select.Label>\n\t * <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t * </Select.Group>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tLabel,\n\t/**\n\t * Used to visually separate items or groups of items in the select content.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-separator\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Group>\n\t * <Select.Label>Fruits</Select.Label>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Group>\n\t * <Select.Separator />\n\t * <Select.Group>\n\t * <Select.Label>Veggies</Select.Label>\n\t * <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t * </Select.Group>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tSeparator: SelectSeparatorComponent,\n\t/**\n\t * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-value\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tSelect,\n};\n"],"mappings":"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","names":["CaretDownIcon","CaretUpIcon","CheckIcon","SelectPrimitive","createContext","forwardRef","useContext","jsx","jsxs","SelectContext","createContext","Root","forwardRef","_ariaInvalid","children","id","validation","onBlur","onValueChange","onChange","props","ref","value","Group","Value","Trigger","ariaInValidProp","className","propId","propValidation","ctx","useContext","isInvalid","_validation","ariaInvalid","cx","composeRefs","Icon","CaretDownIcon","SelectScrollUpButton","CaretUpIcon","SelectScrollDownButton","Content","position","width","Label","Item","icon","CheckIcon","SelectSeparatorComponent","Separator","Select"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUpIcon } from \"@phosphor-icons/react/CaretUp\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tFocusEvent,\n\tPropsWithChildren,\n\tReactNode,\n\tRef,\n\tSelectHTMLAttributes,\n} from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype WithAriaInvalid = Pick<\n\tSelectHTMLAttributes<HTMLSelectElement>,\n\t\"aria-invalid\"\n>;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = PropsWithChildren & {\n\tautoComplete?: string;\n\tdefaultOpen?: boolean;\n\tdefaultValue?: string;\n\tdir?: \"ltr\" | \"rtl\";\n\tdisabled?: boolean;\n\tform?: string;\n\tid?: string;\n\tname?: string;\n\t/**\n\t * Event handler called when Select blurs.\n\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t */\n\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Event handler called when the value changes.\n\t * @deprecated Use `onValueChange` instead.\n\t */\n\tonChange?: (value: string) => void;\n\tonOpenChange?(open: boolean): void;\n\tonValueChange?(value: string): void;\n\topen?: boolean;\n\trequired?: boolean;\n\tvalue?: string;\n} & WithValidation &\n\tWithAriaInvalid;\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select#api-select\n *\n * @example\n * ```tsx\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Group>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Group>\n * <Select.Separator />\n * <Select.Group>\n * <Select.Label>Veggies</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n * </Select.Group>\n * </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Root = forwardRef<HTMLButtonElement, SelectProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tchildren,\n\t\t\tid,\n\t\t\tvalidation,\n\t\t\tonBlur,\n\t\t\tonValueChange,\n\t\t\tonChange,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root\n\t\t\t\t{...props}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tonChange?.(value);\n\t\t\t\t\tonValueChange?.(value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectContext.Provider\n\t\t\t\t\tvalue={{ \"aria-invalid\": _ariaInvalid, id, validation, onBlur, ref }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Group>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Group>\n * <Select.Group>\n * <Select.Label>Veggies</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n * </Select.Group>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-group\n */\nconst Group = SelectPrimitive.Group;\nGroup.displayName = \"SelectGroup\";\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-value\n */\nconst Value = SelectPrimitive.Value;\nValue.displayName = \"SelectValue\";\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<\n\ttypeof SelectPrimitive.Trigger\n> &\n\tWithAriaInvalid &\n\tWithValidation;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n *\n * @see https://mantle.ngrok.com/components/select#api-select-trigger\n *\n * @example\n * ```tsx\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Trigger>,\n\tSelectTriggerProps\n>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInValidProp,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tid: propId,\n\t\t\tvalidation: propValidation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst _ariaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst _validation = ctx.validation ?? propValidation;\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst id = ctx.id ?? propId;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-9 text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"SelectTrigger\";\n\n/**\n * The button that scrolls the select content up.\n * @private\n */\nconst SelectScrollUpButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretUpIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/**\n * The button that scrolls the select content down.\n * @private\n */\nconst SelectScrollDownButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<\n\ttypeof SelectPrimitive.Content\n> & {\n\t/**\n\t * The width of the content. Defaults to the width of the trigger.\n\t * If set to \"content\", the content will use the intrinsic content width; it will be the width of the longest/widest item.\n\t * @default \"trigger\"\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-content\n */\nconst Content = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Content>,\n\tSelectContentProps\n>(\n\t(\n\t\t{ className, children, position = \"popper\", width = \"trigger\", ...props },\n\t\tref,\n\t) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md\",\n\t\t\t\t\t\"bg-popover\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]\",\n\t\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-select-trigger-width)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"p-1\",\n\t\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\t\"h-[var(--radix-select-trigger-height)] w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Group>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Group>\n * <Select.Group>\n * <Select.Label>Veggies</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n * </Select.Group>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-label\n */\nconst Label = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"SelectLabel\";\n\ntype SelectItemProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\n\ticon?: ReactNode;\n};\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n * Displays the children as the option's text.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-item\n */\nconst Item = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Item>,\n\tSelectItemProps\n>(({ className, children, icon, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex gap-2 w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-hidden\",\n\t\t\t\"focus:bg-popover-hover\",\n\t\t\t\"data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\"data-state-checked:bg-filled-accent data-state-checked:text-on-filled\",\n\t\t\t\"focus:data-state-checked:bg-filled-accent\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{icon && <Icon svg={icon} />}\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items or groups of items in the select content.\n *\n * @example\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Group>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Group>\n * <Select.Separator />\n * <Select.Group>\n * <Select.Label>Veggies</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n * </Select.Group>\n * </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-separator\n */\nconst SelectSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tclassName={cx(\"-mx-1 my-1 h-px w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nSelectSeparatorComponent.displayName = \"SelectSeparator\";\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select\n *\n * @example\n * ```tsx\n * <Select.Root>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Select a fruit\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Group>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Item value=\"cherry\">Cherry</Select.Item>\n * </Select.Group>\n * <Select.Separator />\n * <Select.Group>\n * <Select.Label>Veggies</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n * </Select.Group>\n * </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Select = {\n\t/**\n\t * Displays a list of options for the user to pick from—triggered by a button.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Group>\n\t * <Select.Label>Fruits</Select.Label>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Group>\n\t * <Select.Separator />\n\t * <Select.Group>\n\t * <Select.Label>Veggies</Select.Label>\n\t * <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t * </Select.Group>\n\t * </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The component that pops out when the select is open as a portal adjacent to the trigger button.\n\t * It contains a scrolling viewport of the select items.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-content\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tContent,\n\t/**\n\t * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n\t * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-group\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Group>\n\t * <Select.Label>Fruits</Select.Label>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Group>\n\t * <Select.Group>\n\t * <Select.Label>Veggies</Select.Label>\n\t * <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t * </Select.Group>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tGroup,\n\t/**\n\t * An option within a select menu. Similar to an html `<option>` element.\n\t * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n\t * Displays the children as the option's text.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-item\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tItem,\n\t/**\n\t * Used to render the label of a group. It won't be focusable using arrow keys.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-label\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Group>\n\t * <Select.Label>Fruits</Select.Label>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Group>\n\t * <Select.Group>\n\t * <Select.Label>Veggies</Select.Label>\n\t * <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t * </Select.Group>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tLabel,\n\t/**\n\t * Used to visually separate items or groups of items in the select content.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-separator\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Group>\n\t * <Select.Label>Fruits</Select.Label>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Group>\n\t * <Select.Separator />\n\t * <Select.Group>\n\t * <Select.Label>Veggies</Select.Label>\n\t * <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t * <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t * </Select.Group>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tSeparator: SelectSeparatorComponent,\n\t/**\n\t * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-value\n\t *\n\t * @example\n\t * <Select.Root>\n\t * <Select.Trigger>\n\t * <Select.Value placeholder=\"Select a fruit\" />\n\t * </Select.Trigger>\n\t * <Select.Content>\n\t * <Select.Item value=\"apple\">Apple</Select.Item>\n\t * <Select.Item value=\"banana\">Banana</Select.Item>\n\t * <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t * </Select.Content>\n\t * </Select.Root>\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tSelect,\n};\n"],"mappings":"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","names":["CaretDownIcon","CaretUpIcon","CheckIcon","SelectPrimitive","createContext","forwardRef","useContext","jsx","jsxs","SelectContext","createContext","Root","forwardRef","_ariaInvalid","children","id","validation","onBlur","onValueChange","onChange","props","ref","value","Group","Value","Trigger","ariaInValidProp","className","propId","propValidation","ctx","useContext","isInvalid","_validation","ariaInvalid","cx","composeRefs","Icon","CaretDownIcon","SelectScrollUpButton","CaretUpIcon","SelectScrollDownButton","Content","position","width","Label","Item","icon","CheckIcon","SelectSeparatorComponent","Separator","Select"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as F}from"./chunk-6J7D73WA.js";import{b as f}from"./chunk-NJNFZ2EG.js";import{a as U}from"./chunk-PFXFESEN.js";import{Fragment as j,jsx as A}from"react/jsx-runtime";var J="https://assets.ngrok.com",z=`${J}/fonts`,X=["/euclid-square/EuclidSquare-Regular-WebS.woff","/euclid-square/EuclidSquare-RegularItalic-WebS.woff","/euclid-square/EuclidSquare-Medium-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"];function Z(e){let t=e.startsWith("/")?e:`/${e}`;return`${z}${t}`}var _=()=>A(j,{children:X.map(e=>A("link",{rel:"preload",href:Z(e),as:"font",type:"font/woff",crossOrigin:"anonymous"},e))});_.displayName="PreloadCoreFonts";var k=["light","dark","light-high-contrast","dark-high-contrast"],I=["system",...k],ve=e=>e;function w(e){return typeof e!="string"?!1:I.includes(e)}var ye=e=>e;function L(e){return typeof e!="string"?!1:k.includes(e)}import{createContext as ee,useContext as Q,useEffect as te,useMemo as K,useRef as ne,useState as oe}from"react";import re from"tiny-invariant";import{Fragment as pe,jsx as x,jsxs as Te}from"react/jsx-runtime";var M="(prefers-color-scheme: dark)",S="(prefers-contrast: more)",g="mantle-ui-theme",C="system",se=["system",()=>null],B=ee(se);function ie({children:e}){let[t,o]=oe(()=>{let n=D({cookie:f()?document.cookie:null});return W(n),n}),r=ne(null);te(()=>{function n(c){let m=c??D({cookie:document.cookie});o(m),W(m)}n();try{"BroadcastChannel"in window&&(r.current=new BroadcastChannel(g),r.current.onmessage=c=>{let m=c?.data?.theme;w(m)&&n(m)})}catch{}function u(c){c.key===`${g}__ping`&&n()}window.addEventListener("storage",u);let a=window.matchMedia(M),p=window.matchMedia(S);function l(){n()}function v(){document.visibilityState==="visible"&&n()}return a.addEventListener("change",l),p.addEventListener("change",l),window.addEventListener("pageshow",l),document.addEventListener("visibilitychange",v),()=>{window.removeEventListener("storage",u),a.removeEventListener("change",l),p.removeEventListener("change",l),window.removeEventListener("pageshow",l),document.removeEventListener("visibilitychange",v);try{r.current?.close()}catch{}r.current=null}},[]);let i=K(()=>[t,n=>{ue(n),o(n),W(n),le(n,{broadcastChannel:r.current,pingKey:`${g}__ping`})}],[t]);return x(B.Provider,{value:i,children:e})}ie.displayName="ThemeProvider";function xe(){let e=Q(B);return re(e,"useTheme must be used within a ThemeProvider"),e}function W(e){if(!f())return;let t=window.document.documentElement,o=window.matchMedia(M).matches,r=window.matchMedia(S).matches,i=O(e,{prefersDarkMode:o,prefersHighContrast:r}),n=t.dataset.theme,u=t.dataset.appliedTheme,a=w(n)?n:void 0,p=L(u)?u:void 0;a===e&&p===i||(t.classList.remove(...k),t.classList.add(i),t.dataset.theme=e,t.dataset.appliedTheme=i)}function He(){if(!f())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=w(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:L(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function O(e,{prefersDarkMode:t,prefersHighContrast:o}){return e==="system"?ae({prefersDarkMode:t,prefersHighContrast:o}):e}function Re(){let e=Q(B),t=e!=null?e[0]:"system",o=F(M),r=F(S);return O(t,{prefersDarkMode:o,prefersHighContrast:r})}function ae({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function me(e){let{storageKey:t,defaultTheme:o,themes:r,resolvedThemes:i,prefersDarkModeMediaQuery:n,prefersHighContrastMediaQuery:u}=e;function a(s){return typeof s=="string"&&r.includes(s)}function p(s){let h=document.cookie;if(!h)return null;try{let E=h.split(";").find($=>$.trim().startsWith(`${s}=`))?.split("=")[1];return E?decodeURIComponent(E):null}catch{return null}}function l(s,h){let d=new Date;d.setFullYear(d.getFullYear()+1);let R=location.hostname,E=location.protocol,N=R==="ngrok.com"||R.endsWith(".ngrok.com")?"; domain=.ngrok.com":"",$=E==="https:"?"; Secure":"";return`${s}=${encodeURIComponent(h)}; expires=${d.toUTCString()}; path=/${N}; SameSite=Lax${$}`}function v(s,h){try{document.cookie=l(s,h)}catch{}}function c(s,h,d){return s==="system"?d?h?"dark-high-contrast":"light-high-contrast":h?"dark":"light":s}let m=null,y=null,P=null;try{m=p(t)}catch{}if(a(m))P=m;else{try{y=window.localStorage?.getItem(t)??null}catch{}a(y)&&(P=y)}let b=a(P)?P:o,Y=matchMedia(n).matches,G=matchMedia(u).matches,H=c(b,Y,G),T=document.documentElement;if(T.dataset.appliedTheme!==H||T.dataset.theme!==b){for(let s of i)T.classList.remove(s);T.classList.add(H),T.dataset.theme=b,T.dataset.appliedTheme=H}let q=a(m);try{if(a(y)&&!q){v(t,y);try{window.localStorage.removeItem(t)}catch{}}else q||v(t,b)}catch{}}function ce(){let e={storageKey:g,defaultTheme:C,themes:I,resolvedThemes:k,prefersDarkModeMediaQuery:M,prefersHighContrastMediaQuery:S};return`(${me.toString()})(${JSON.stringify(e)})`}var V=({nonce:e})=>x("script",{dangerouslySetInnerHTML:{__html:ce()},nonce:e,suppressHydrationWarning:!0});V.displayName="PreventWrongThemeFlashScript";var he=({nonce:e})=>Te(pe,{children:[x(V,{nonce:e}),x(_,{})]});he.displayName="MantleThemeHeadContent";function $e(e={}){let{className:t=""}=e??{};return K(()=>{let o,r;if(!f())o=C,r="light";else{let i=window.matchMedia(M).matches,n=window.matchMedia(S).matches;o=D({cookie:document.cookie}),r=O(o,{prefersDarkMode:i,prefersHighContrast:n})}return{className:U(t,r),"data-applied-theme":r,"data-theme":o}},[t])}function D({cookie:e}){if(!e)return C;try{let r=e.split(";").find(n=>n.trim().startsWith(`${g}=`))?.split("=")[1],i=r?globalThis.decodeURIComponent(r):null;return w(i)?i:C}catch{return C}}function le(e,t){let{broadcastChannel:o,pingKey:r}=t;try{if(o){o.postMessage({theme:e,timestamp:Date.now()});return}}catch{}try{localStorage.setItem(r,JSON.stringify({theme:e,timestamp:Date.now()}))}catch{}}function de(e){let t=new Date;t.setFullYear(t.getFullYear()+1);let{hostname:o,protocol:r}=window.location,i=o==="ngrok.com"||o.endsWith(".ngrok.com")?"; domain=.ngrok.com":"",n=r==="https:"?"; Secure":"";return`${g}=${encodeURIComponent(e)}; expires=${t.toUTCString()}; path=/${i}; SameSite=Lax${n}`}function ue(e){if(f())try{document.cookie=de(e)}catch{}}export{J as a,Z as b,_ as c,k as d,I as e,ve as f,w as g,ye as h,L as i,ie as j,xe as k,He as l,Re as m,ce as n,he as o,$e as p,D as q};
|
|
2
|
+
//# sourceMappingURL=chunk-PEGWGFY7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/theme/fonts.tsx","../src/components/theme/themes.ts","../src/components/theme/theme-provider.tsx"],"sourcesContent":["/**\n * @fileoverview Helpers for preloading ngrok brand fonts from the CDN.\n * All font URLs resolve to `${assetsCdnOrigin}/fonts`.\n */\n\n/**\n * The origin for the assets CDN where custom ngrok fonts and assets are hosted.\n *\n * Keep this stable across the app so we can preconnect/DNS-prefetch consistently.\n * @public\n */\nconst assetsCdnOrigin = \"https://assets.ngrok.com\";\n\n/**\n * Base path for font assets on the CDN.\n * @internal\n */\nconst cdnBase = `${assetsCdnOrigin}/fonts`;\n\n/**\n * Canonical list of core font paths (relative to the CDN fonts base).\n */\nconst coreFonts = [\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-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 FontPath = `/${string}` | (string & {});\n\n/**\n * Builds an absolute CDN URL for a given font.\n *\n * @returns {`https://assets.ngrok.com/fonts${T}`} An absolute, literal-typed CDN URL.\n *\n * @example\n * const href = fontHref(\"/euclid-square/EuclidSquare-Regular-WebS.woff\");\n * // -> \"https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-Regular-WebS.woff\"\n */\nfunction fontHref<T extends FontPath = FontPath>(font: T) {\n\tconst path = font.startsWith(\"/\") ? font : `/${font}`;\n\treturn `${cdnBase}${path}` as const;\n}\n\n/**\n * Preload core fonts used in the mantle theme.\n *\n * Include this as early as possible in the document `<head>` so text renders\n * with the intended face without layout shifts. Uses `crossOrigin=\"anonymous\"`\n * so the browser can cache and reuse the font across origins.\n *\n * @remarks\n * For best performance, pair this with preconnect/dns-prefetch hints to the CDN.\n *\n * This is automatically included in `<MantleThemeHeadContent />`.\n *\n * @example\n * ```tsx\n * <head>\n * <meta charSet=\"utf-8\" />\n * <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n *\n * // Preconnect and DNS-prefetch to the assets CDN\n * // either here or in app root headers\n * <link rel=\"preconnect\" href={assetsCdnOrigin} crossOrigin=\"anonymous\" />\n * <link rel=\"dns-prefetch\" href={assetsCdnOrigin} />\n *\n * <PreventWrongThemeFlashScript />\n * <PreloadCoreFonts />\n * // ... other head elements ...\n * </head>\n * ```\n */\nconst PreloadCoreFonts = () => (\n\t<>\n\t\t{coreFonts.map((font) => (\n\t\t\t<link\n\t\t\t\tkey={font}\n\t\t\t\trel=\"preload\"\n\t\t\t\thref={fontHref(font)}\n\t\t\t\tas=\"font\"\n\t\t\t\ttype=\"font/woff\"\n\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t/>\n\t\t))}\n\t</>\n);\nPreloadCoreFonts.displayName = \"PreloadCoreFonts\";\n\nexport {\n\t//,\n\tassetsCdnOrigin,\n\tfontHref,\n\tPreloadCoreFonts,\n};\n","/**\n * resolvedThemes is a tuple of valid themes that have been resolved from \"system\" to a specific theme.\n */\nconst resolvedThemes = [\n\t\"light\",\n\t\"dark\",\n\t\"light-high-contrast\",\n\t\"dark-high-contrast\",\n] 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) =>\n\tvalue;\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\nexport {\n\t//,\n\tthemes,\n\tresolvedThemes,\n\t$resolvedTheme,\n\t$theme,\n\tisResolvedTheme,\n\tisTheme,\n};\n\nexport type {\n\t//,\n\tTheme,\n\tResolvedTheme,\n};\n","\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { useMatchesMediaQuery } from \"../../hooks/use-matches-media-query.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { canUseDOM } from \"../browser-only/browser-only.js\";\nimport { PreloadCoreFonts } from \"./fonts.js\";\nimport {\n\ttype ResolvedTheme,\n\ttype Theme,\n\tisResolvedTheme,\n\tisTheme,\n\tresolvedThemes,\n\tthemes,\n} from \"./themes.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 * THEME_STORAGE_KEY is the key used to store the theme in cookies.\n */\nconst THEME_STORAGE_KEY = \"mantle-ui-theme\";\n\n/**\n * DEFAULT_THEME is the initial theme to apply if no value is found in storage.\n * {@link themes}\n */\nconst DEFAULT_THEME = \"system\" satisfies 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 | null>(\n\tinitialState,\n);\n\ntype ThemeProviderProps = PropsWithChildren;\n\n/**\n * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.\n *\n * @see https://mantle.ngrok.com/components/theme-provider#api-theme-provider\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"system\" storageKey=\"app-theme\">\n * <App />\n * </ThemeProvider>\n * ```\n */\nfunction ThemeProvider({ children }: ThemeProviderProps) {\n\t// Init once from cookie and apply immediately to avoid flashes\n\tconst [theme, setTheme] = useState<Theme>(() => {\n\t\tconst storedTheme = getStoredTheme({\n\t\t\tcookie: canUseDOM() ? document.cookie : null,\n\t\t});\n\t\tapplyThemeToHtml(storedTheme);\n\t\treturn storedTheme;\n\t});\n\n\tconst broadcastChannelRef = useRef<BroadcastChannel | null>(null);\n\n\tuseEffect(() => {\n\t\tfunction syncThemeFromCookie(next?: Theme) {\n\t\t\tconst newTheme = next ?? getStoredTheme({ cookie: document.cookie });\n\t\t\tsetTheme(newTheme);\n\t\t\tapplyThemeToHtml(newTheme);\n\t\t}\n\n\t\t// initial sync in case defaultTheme or storageKey changed\n\t\tsyncThemeFromCookie();\n\n\t\t// add cross-tab listeners (prefer broadcast channel, use localStorage as fallback)\n\t\ttry {\n\t\t\tif (\"BroadcastChannel\" in window) {\n\t\t\t\tbroadcastChannelRef.current = new BroadcastChannel(THEME_STORAGE_KEY);\n\t\t\t\tbroadcastChannelRef.current.onmessage = (event) => {\n\t\t\t\t\tconst value: unknown = event?.data?.theme;\n\t\t\t\t\tif (isTheme(value)) {\n\t\t\t\t\t\tsyncThemeFromCookie(value);\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t}\n\t\t} catch (_) {}\n\n\t\tfunction onStorage(event: StorageEvent) {\n\t\t\tif (event.key === `${THEME_STORAGE_KEY}__ping`) {\n\t\t\t\tsyncThemeFromCookie();\n\t\t\t}\n\t\t}\n\t\twindow.addEventListener(\"storage\", onStorage);\n\n\t\t// add media query listeners for system theme changes\n\t\tconst prefersDarkMql = window.matchMedia(prefersDarkModeMediaQuery);\n\t\tconst prefersHighContrastMql = window.matchMedia(\n\t\t\tprefersHighContrastMediaQuery,\n\t\t);\n\n\t\tfunction onChange() {\n\t\t\tsyncThemeFromCookie();\n\t\t}\n\n\t\tfunction onVisibilityChange() {\n\t\t\tif (document.visibilityState === \"visible\") {\n\t\t\t\tsyncThemeFromCookie();\n\t\t\t}\n\t\t}\n\n\t\tprefersDarkMql.addEventListener(\"change\", onChange);\n\t\tprefersHighContrastMql.addEventListener(\"change\", onChange);\n\n\t\t// pageshow fires on bfcache restore (event.persisted === true) and some restore-from-freeze cases.\n\t\twindow.addEventListener(\"pageshow\", onChange);\n\n\t\t// visibilitychange to handle coming back to a tab\n\t\tdocument.addEventListener(\"visibilitychange\", onVisibilityChange);\n\n\t\t// don't forget to clean up your slop!\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"storage\", onStorage);\n\t\t\tprefersDarkMql.removeEventListener(\"change\", onChange);\n\t\t\tprefersHighContrastMql.removeEventListener(\"change\", onChange);\n\t\t\twindow.removeEventListener(\"pageshow\", onChange);\n\t\t\tdocument.removeEventListener(\"visibilitychange\", onVisibilityChange);\n\n\t\t\ttry {\n\t\t\t\tbroadcastChannelRef.current?.close();\n\t\t\t} catch (_) {}\n\t\t\tbroadcastChannelRef.current = null;\n\t\t};\n\t}, []);\n\n\tconst value: ThemeProviderState = useMemo(\n\t\t() => [\n\t\t\ttheme,\n\t\t\t(next: Theme) => {\n\t\t\t\tsetCookie(next);\n\t\t\t\tsetTheme(next);\n\t\t\t\tapplyThemeToHtml(next);\n\t\t\t\tnotifyOtherTabs(next, {\n\t\t\t\t\tbroadcastChannel: broadcastChannelRef.current,\n\t\t\t\t\tpingKey: `${THEME_STORAGE_KEY}__ping`,\n\t\t\t\t});\n\t\t\t},\n\t\t],\n\t\t[theme],\n\t);\n\n\treturn (\n\t\t<ThemeProviderContext.Provider value={value}>\n\t\t\t{children}\n\t\t</ThemeProviderContext.Provider>\n\t);\n}\nThemeProvider.displayName = \"ThemeProvider\";\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 applyThemeToHtml(theme: Theme) {\n\tif (!canUseDOM()) {\n\t\treturn;\n\t}\n\n\tconst html = window.document.documentElement;\n\n\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst prefersHighContrast = window.matchMedia(\n\t\tprefersHighContrastMediaQuery,\n\t).matches;\n\n\tconst resolvedTheme = resolveTheme(theme, {\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t});\n\n\tconst htmlTheme = html.dataset.theme;\n\tconst htmlAppliedTheme = html.dataset.appliedTheme;\n\n\tconst currentTheme = isTheme(htmlTheme) ? htmlTheme : undefined;\n\tconst currentResolvedTheme = isResolvedTheme(htmlAppliedTheme)\n\t\t? htmlAppliedTheme\n\t\t: undefined;\n\n\tif (currentTheme === theme && currentResolvedTheme === resolvedTheme) {\n\t\t// nothing to do: input theme and resolved class already match\n\t\treturn;\n\t}\n\n\t// Clear any stale theme class, then apply the new one\n\thtml.classList.remove(...resolvedThemes); // ✅ remove all potential theme classes\n\thtml.classList.add(resolvedTheme);\n\thtml.dataset.theme = theme;\n\thtml.dataset.appliedTheme = resolvedTheme;\n}\n\n/**\n * Read the theme and applied theme from the `<html>` element.\n */\nfunction readThemeFromHtmlElement() {\n\tif (!canUseDOM()) {\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)\n\t\t? htmlElement.dataset.theme\n\t\t: undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme)\n\t\t? htmlElement.dataset.appliedTheme\n\t\t: 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{\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t}: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({\n\t\t\tprefersDarkMode,\n\t\t\tprefersHighContrast,\n\t\t});\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 themeContext = useContext(ThemeProviderContext);\n\tconst theme = themeContext != null ? themeContext[0] : \"system\";\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(\n\t\tprefersHighContrastMediaQuery,\n\t);\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 *\n * @example\n * ```tsx\n * const theme = determineThemeFromMediaQuery({\n * prefersDarkMode: true,\n * prefersHighContrast: false\n * });\n * // Returns: \"dark\"\n *\n * const themeWithContrast = determineThemeFromMediaQuery({\n * prefersDarkMode: false,\n * prefersHighContrast: true\n * });\n * // Returns: \"light-high-contrast\"\n * ```\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\n/**\n * Script that runs synchronously to prevent FOUC by applying the correct theme\n * before the page renders. This is the actual function that gets stringified and inlined.\n */\nfunction preventThemeFlash(args: {\n\tstorageKey: string;\n\tdefaultTheme: Theme;\n\tthemes: readonly Theme[];\n\tresolvedThemes: readonly ResolvedTheme[];\n\tprefersDarkModeMediaQuery: string;\n\tprefersHighContrastMediaQuery: string;\n}) {\n\tconst {\n\t\tstorageKey,\n\t\tdefaultTheme,\n\t\tthemes,\n\t\tresolvedThemes,\n\t\tprefersDarkModeMediaQuery,\n\t\tprefersHighContrastMediaQuery,\n\t} = args;\n\n\tfunction isTheme(value: unknown): value is Theme {\n\t\treturn typeof value === \"string\" && themes.includes(value as Theme);\n\t}\n\n\tfunction getThemeFromCookie(name: string): string | null {\n\t\tconst cookie = document.cookie;\n\t\tif (!cookie) {\n\t\t\treturn null;\n\t\t}\n\n\t\ttry {\n\t\t\tconst cookies = cookie.split(\";\");\n\t\t\tconst themeCookie = cookies.find((c) => c.trim().startsWith(`${name}=`));\n\t\t\tconst cookieValue = themeCookie?.split(\"=\")[1];\n\t\t\tconst storedTheme = cookieValue ? decodeURIComponent(cookieValue) : null;\n\t\t\treturn storedTheme;\n\t\t} catch (_) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tfunction buildCookie(name: string, val: string): string {\n\t\tconst expires = new Date();\n\t\texpires.setFullYear(expires.getFullYear() + 1);\n\t\tconst hostname = location.hostname;\n\t\tconst protocol = location.protocol;\n\t\tconst domainAttribute =\n\t\t\thostname === \"ngrok.com\" || hostname.endsWith(\".ngrok.com\")\n\t\t\t\t? \"; domain=.ngrok.com\"\n\t\t\t\t: \"\";\n\t\tconst secureAttribute = protocol === \"https:\" ? \"; Secure\" : \"\";\n\t\treturn `${name}=${encodeURIComponent(val)}; expires=${expires.toUTCString()}; path=/${domainAttribute}; SameSite=Lax${secureAttribute}`;\n\t}\n\n\tfunction writeCookie(name: string, val: string): void {\n\t\ttry {\n\t\t\tdocument.cookie = buildCookie(name, val);\n\t\t} catch (_) {}\n\t}\n\n\tfunction resolveThemeValue(\n\t\ttheme: Theme,\n\t\tisDark: boolean,\n\t\tisHighContrast: boolean,\n\t): ResolvedTheme {\n\t\tif (theme === \"system\") {\n\t\t\tif (isHighContrast) {\n\t\t\t\treturn isDark ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t\t}\n\t\t\treturn isDark ? \"dark\" : \"light\";\n\t\t}\n\t\treturn theme;\n\t}\n\n\t// 1) Read preference: cookie first, fallback to localStorage (migration support)\n\tlet cookieTheme: string | null = null;\n\tlet lsTheme: string | null = null;\n\tlet storedTheme: Theme | null = null;\n\n\ttry {\n\t\tcookieTheme = getThemeFromCookie(storageKey);\n\t} catch (_) {}\n\n\tif (isTheme(cookieTheme)) {\n\t\tstoredTheme = cookieTheme;\n\t} else {\n\t\ttry {\n\t\t\tlsTheme = window.localStorage?.getItem(storageKey) ?? null;\n\t\t} catch (_) {}\n\t\tif (isTheme(lsTheme)) {\n\t\t\tstoredTheme = lsTheme;\n\t\t}\n\t}\n\n\tconst preference = isTheme(storedTheme) ? storedTheme : defaultTheme;\n\n\t// 2) Resolve theme based on media queries\n\tconst isDark = matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst isHighContrast = matchMedia(prefersHighContrastMediaQuery).matches;\n\tconst resolvedTheme = resolveThemeValue(preference, isDark, isHighContrast);\n\n\tconst html = document.documentElement;\n\t// 3) Apply theme to DOM (same order as applyThemeToHtml)\n\tif (\n\t\thtml.dataset.appliedTheme !== resolvedTheme ||\n\t\thtml.dataset.theme !== preference\n\t) {\n\t\t// Remove all theme classes\n\t\tfor (const themeClass of resolvedThemes as readonly string[]) {\n\t\t\thtml.classList.remove(themeClass);\n\t\t}\n\t\t// Add resolved theme class\n\t\thtml.classList.add(resolvedTheme);\n\t\t// Set data attributes\n\t\thtml.dataset.theme = preference;\n\t\thtml.dataset.appliedTheme = resolvedTheme;\n\t}\n\n\t// 4) Handle persistence/migration synchronously to prevent FOUC\n\tconst hadValidCookie = isTheme(cookieTheme);\n\ttry {\n\t\tif (isTheme(lsTheme) && !hadValidCookie) {\n\t\t\t// Migrate from localStorage to cookie\n\t\t\twriteCookie(storageKey, lsTheme);\n\t\t\ttry {\n\t\t\t\twindow.localStorage.removeItem(storageKey);\n\t\t\t} catch (_) {}\n\t\t} else if (!hadValidCookie) {\n\t\t\t// Set default cookie if none existed\n\t\t\twriteCookie(storageKey, preference);\n\t\t}\n\t} catch (_) {}\n}\n\n/**\n * preventWrongThemeFlashScriptContent generates a script that prevents the wrong theme from flashing on initial page load.\n * It checks cookies for a stored theme, and if none is found, it sets the default theme.\n * It also applies the correct theme to the `<html>` element based on the user's media query preferences.\n */\nfunction preventWrongThemeFlashScriptContent() {\n\tconst args = {\n\t\tstorageKey: THEME_STORAGE_KEY,\n\t\tdefaultTheme: DEFAULT_THEME,\n\t\tthemes,\n\t\tresolvedThemes,\n\t\tprefersDarkModeMediaQuery,\n\t\tprefersHighContrastMediaQuery,\n\t} as const satisfies Parameters<typeof preventThemeFlash>[0];\n\n\treturn `(${preventThemeFlash.toString()})(${JSON.stringify(args)})`;\n}\n\ntype MantleThemeHeadContentProps = {\n\t/**\n\t * An optional CSP nonce to allowlist this inline script. Using this can help\n\t * you to avoid using the CSP `unsafe-inline` directive, which disables\n\t * XSS protection and would allowlist all inline scripts or styles.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce\n\t */\n\tnonce?: string;\n};\n\nexport type PreventWrongThemeFlashScriptProps = MantleThemeHeadContentProps;\n\n/**\n * Renders an inline script that prevents Flash of Unstyled Content (FOUC) or the\n * wrong theme flashing on first paint.\n *\n * Use this when you want full control of the `<head>` contents. For a packaged,\n * one-stop solution that also handles font preloads, use {@link MantleThemeHeadContent}.\n * To add font preloads alongside this script, pair it with {@link PreloadCoreFonts}.\n *\n * Place this as early as possible in the `<head>`.\n *\n * @example\n * ```tsx\n * <head>\n * <PreventWrongThemeFlashScript nonce={nonce} />\n * <PreloadCoreFonts />\n * </head>\n * ```\n *\n * @param nonce - Optional CSP nonce to allowlist the inline script under a strict CSP.\n * @returns {JSX.Element} A script tag injected before first paint.\n * @see PreloadCoreFonts\n * @see MantleThemeHeadContent\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce\n */\nconst PreventWrongThemeFlashScript = ({\n\tnonce,\n}: PreventWrongThemeFlashScriptProps) => (\n\t<script\n\t\tdangerouslySetInnerHTML={{\n\t\t\t__html: preventWrongThemeFlashScriptContent(),\n\t\t}}\n\t\tnonce={nonce}\n\t\tsuppressHydrationWarning\n\t/>\n);\nPreventWrongThemeFlashScript.displayName = \"PreventWrongThemeFlashScript\";\n\n/**\n * Renders the Mantle theme `<head>` content:\n * - an inline script to prevent FOUC / wrong-theme flash, and\n * - preload links for the core fonts.\n *\n * Use this when you want the one-liner that “just works.”\n * If you prefer fine-grained control, use {@link PreventWrongThemeFlashScript}\n * and {@link PreloadCoreFonts} directly.\n *\n * Place this as early as possible in the `<head>` so it runs before first paint\n * and fonts start fetching ASAP.\n *\n * @example\n * ```tsx\n * <head>\n * // Performance hints for the CDN (recommended)\n * <link rel=\"preconnect\" href={assetsCdnOrigin} crossOrigin=\"anonymous\" />\n * <link rel=\"dns-prefetch\" href={assetsCdnOrigin} />\n *\n * <MantleThemeHeadContent nonce={nonce} />\n * </head>\n * ```\n *\n * @param nonce - Optional CSP nonce to allowlist the inline script under a strict CSP.\n * @returns JSX.Element fragment containing the script and font preloads.\n * @see PreventWrongThemeFlashScript\n * @see PreloadCoreFonts\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce\n */\nconst MantleThemeHeadContent = ({ nonce }: MantleThemeHeadContentProps) => (\n\t<>\n\t\t<PreventWrongThemeFlashScript nonce={nonce} />\n\t\t<PreloadCoreFonts />\n\t</>\n);\nMantleThemeHeadContent.displayName = \"MantleThemeHeadContent\";\n\ntype InitialThemeProps = {\n\tclassName: string;\n\t\"data-applied-theme\": ResolvedTheme;\n\t\"data-theme\": Theme;\n};\n\ntype UseInitialHtmlThemePropsOptions = {\n\tclassName?: string;\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(\n\tprops: UseInitialHtmlThemePropsOptions = {},\n): InitialThemeProps {\n\tconst { className = \"\" } = props ?? {};\n\n\treturn useMemo(() => {\n\t\tlet initialTheme: Theme;\n\t\tlet resolvedTheme: ResolvedTheme;\n\n\t\tif (!canUseDOM()) {\n\t\t\tinitialTheme = DEFAULT_THEME;\n\t\t\tresolvedTheme = \"light\"; // assume \"light\" for SSR\n\t\t} else {\n\t\t\tconst prefersDarkMode = window.matchMedia(\n\t\t\t\tprefersDarkModeMediaQuery,\n\t\t\t).matches;\n\t\t\tconst prefersHighContrast = window.matchMedia(\n\t\t\t\tprefersHighContrastMediaQuery,\n\t\t\t).matches;\n\t\t\tinitialTheme = getStoredTheme({ cookie: document.cookie });\n\t\t\tresolvedTheme = resolveTheme(initialTheme, {\n\t\t\t\tprefersDarkMode,\n\t\t\t\tprefersHighContrast,\n\t\t\t});\n\t\t}\n\n\t\treturn {\n\t\t\tclassName: cx(className, resolvedTheme),\n\t\t\t\"data-applied-theme\": resolvedTheme,\n\t\t\t\"data-theme\": initialTheme,\n\t\t};\n\t}, [className]);\n}\n\ntype GetStoredThemeOptions = {\n\t/**\n\t * raw Cookie header (SSR) or document.cookie (client)\n\t */\n\tcookie: string | null | undefined;\n};\n\n/**\n * Returns the persisted UI theme from a Cookie header string.\n *\n * Looks for a cookie named by {@link THEME_STORAGE_KEY} and returns its value **iff**\n * it’s a valid `Theme` per `isTheme`. Otherwise, falls back to\n * {@link DEFAULT_THEME}. This function never throws; malformed encodings or\n * missing cookies quietly return the default.\n *\n * @example\n * getStoredTheme({ cookie: `${THEME_STORAGE_KEY}=dark; session=abc` }) // \"dark\"\n * @example\n * getStoredTheme({ cookie: \"\" }) // DEFAULT_THEME\n */\nfunction getStoredTheme({ cookie }: GetStoredThemeOptions): Theme {\n\tif (!cookie) {\n\t\treturn DEFAULT_THEME;\n\t}\n\n\ttry {\n\t\tconst cookies = cookie.split(\";\");\n\t\tconst themeCookie = cookies.find((cookie) =>\n\t\t\tcookie.trim().startsWith(`${THEME_STORAGE_KEY}=`),\n\t\t);\n\t\tconst cookieValue = themeCookie?.split(\"=\")[1];\n\t\tconst storedTheme = cookieValue\n\t\t\t? globalThis.decodeURIComponent(cookieValue)\n\t\t\t: null;\n\n\t\treturn isTheme(storedTheme) ? storedTheme : DEFAULT_THEME;\n\t} catch (_) {\n\t\treturn DEFAULT_THEME;\n\t}\n}\n\nexport {\n\tMantleThemeHeadContent,\n\tPreventWrongThemeFlashScript,\n\tThemeProvider,\n\t//,\n\tgetStoredTheme,\n\tpreventWrongThemeFlashScriptContent,\n\treadThemeFromHtmlElement,\n\tuseAppliedTheme,\n\tuseInitialHtmlThemeProps,\n\tuseTheme,\n};\n\n/**\n * Notifies other open tabs (same origin) that the theme changed.\n *\n * Prefers a shared {@link BroadcastChannel} for immediate, reliable delivery.\n * Falls back to writing a unique “ping” value to `localStorage`, which triggers\n * the cross-tab `storage` event. Both mechanisms only work across the same origin.\n *\n * Uses a timestamp to ensure the storage value always changes so the event fires.\n *\n * @remarks\n * - Same-origin only: BroadcastChannel and the `storage` event do not cross subdomains\n * or different schemes/ports. For cross-subdomain sync, use a postMessage hub or server push.\n * - This function is fire-and-forget and intentionally swallows errors.\n * - Receivers should re-read the cookie/source of truth and then apply the theme;\n * don’t trust the payload blindly.\n *\n * @example\n * // Sender (inside your setter)\n * notifyOtherTabs(nextTheme, {\n * broadcastChannel: broadcastChannelRef.current,\n * pingKey: `${storageKey}__ping`,\n * });\n *\n * @example\n * // Receiver (setup once per tab)\n * const bc = new BroadcastChannel(storageKey);\n * bc.onmessage = () => syncThemeFromCookie();\n * window.addEventListener('storage', (e) => {\n * if (e.key === `${storageKey}__ping`) syncThemeFromCookie();\n * });\n */\nfunction notifyOtherTabs(\n\ttheme: Theme,\n\toptions: {\n\t\tbroadcastChannel: BroadcastChannel | null;\n\t\tpingKey: `${string}__ping`;\n\t},\n) {\n\tconst { broadcastChannel, pingKey } = options;\n\n\t// first try BroadcastChannel\n\ttry {\n\t\tif (broadcastChannel) {\n\t\t\tbroadcastChannel.postMessage({\n\t\t\t\ttheme,\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\t} catch (_) {}\n\n\t// fallback to storage event: write a \"ping\" key (not the real storageKey)\n\ttry {\n\t\tlocalStorage.setItem(\n\t\t\tpingKey,\n\t\t\tJSON.stringify({ theme, timestamp: Date.now() }),\n\t\t);\n\t} catch (_) {}\n}\n\nfunction buildThemeCookie(value: string) {\n\tconst expires = new Date();\n\texpires.setFullYear(expires.getFullYear() + 1); // 1 year expiration\n\n\t// Only set .ngrok.com domain for ngrok domains, otherwise let it default to current domain\n\tconst { hostname, protocol } = window.location;\n\tconst domainAttribute =\n\t\thostname === \"ngrok.com\" || hostname.endsWith(\".ngrok.com\")\n\t\t\t? \"; domain=.ngrok.com\"\n\t\t\t: \"\";\n\tconst secureAttribute = protocol === \"https:\" ? \"; Secure\" : \"\";\n\n\treturn `${THEME_STORAGE_KEY}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/${domainAttribute}; SameSite=Lax${secureAttribute}` as const;\n}\n\n/**\n * Sets a cookie with appropriate domain for the current hostname.\n * Uses .ngrok.com for ngrok domains, otherwise no domain (current domain only).\n */\nfunction setCookie(value: string) {\n\tif (!canUseDOM()) {\n\t\treturn;\n\t}\n\n\ttry {\n\t\tdocument.cookie = buildThemeCookie(value);\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n}\n"],"mappings":"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","names":["Fragment","jsx","assetsCdnOrigin","cdnBase","coreFonts","fontHref","font","path","PreloadCoreFonts","resolvedThemes","themes","$theme","value","isTheme","$resolvedTheme","isResolvedTheme","createContext","useContext","useEffect","useMemo","useRef","useState","invariant","Fragment","jsx","jsxs","prefersDarkModeMediaQuery","prefersHighContrastMediaQuery","THEME_STORAGE_KEY","DEFAULT_THEME","initialState","ThemeProviderContext","createContext","ThemeProvider","children","theme","setTheme","useState","storedTheme","getStoredTheme","canUseDOM","applyThemeToHtml","broadcastChannelRef","useRef","useEffect","syncThemeFromCookie","next","newTheme","event","value","isTheme","onStorage","prefersDarkMql","prefersHighContrastMql","onChange","onVisibilityChange","useMemo","setCookie","notifyOtherTabs","useTheme","context","useContext","invariant","html","prefersDarkMode","prefersHighContrast","resolvedTheme","resolveTheme","htmlTheme","htmlAppliedTheme","currentTheme","currentResolvedTheme","isResolvedTheme","resolvedThemes","readThemeFromHtmlElement","htmlElement","determineThemeFromMediaQuery","useAppliedTheme","themeContext","useMatchesMediaQuery","preventThemeFlash","args","storageKey","defaultTheme","themes","getThemeFromCookie","name","cookie","cookieValue","c","buildCookie","val","expires","hostname","protocol","domainAttribute","secureAttribute","writeCookie","resolveThemeValue","isDark","isHighContrast","cookieTheme","lsTheme","preference","themeClass","hadValidCookie","preventWrongThemeFlashScriptContent","PreventWrongThemeFlashScript","nonce","MantleThemeHeadContent","PreloadCoreFonts","useInitialHtmlThemeProps","props","className","initialTheme","cx","notifyOtherTabs","theme","options","broadcastChannel","pingKey","buildThemeCookie","value","expires","hostname","protocol","domainAttribute","secureAttribute","THEME_STORAGE_KEY","setCookie","canUseDOM"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{m as y}from"./chunk-PEGWGFY7.js";import{a as p}from"./chunk-2NIR7PCL.js";import{a as d}from"./chunk-UNFO4DZV.js";import{a as n}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as x}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as w}from"@phosphor-icons/react/Info";import{WarningIcon as I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as N}from"@phosphor-icons/react/WarningDiamond";import{createContext as P,forwardRef as l,useContext as f}from"react";import*as c from"sonner";import{jsx as s,jsxs as k}from"react/jsx-runtime";var A=({className:t,containerAriaLabel:e,dir:o,duration_ms:r=4e3,position:i="top-center",style:a})=>{let m=y();return s(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto *:duration-200",t),containerAriaLabel:e,dir:o,duration:r,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};A.displayName="Toaster";var g=P("");function L(t,e){let o=e?.duration_ms;return typeof o=="number"&&o<=0&&(o=Number.POSITIVE_INFINITY),c.toast.custom(r=>s(g.Provider,{value:r,children:t}),{duration:o,...e?.id?{id:e.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=l(({asChild:t,children:e,className:o,priority:r,...i},a)=>{let m=t?d:"div";return s(T.Provider,{value:{priority:r},children:k(m,{className:n("relative flex items-start gap-2 text-sm","p-3 pl-3.75","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",o),ref:a,...i,children:[s(S,{priority:r}),e]})})});v.displayName="Toast";var h=l(({className:t,svg:e,...o},r)=>{let i=f(T);switch(i.priority){case"danger":return s(p,{className:n("text-danger-600",t),ref:r,svg:e??s(I,{weight:"fill"}),...o});case"warning":return s(p,{className:n("text-warning-600",t),ref:r,svg:e??s(N,{weight:"fill"}),...o});case"success":return s(p,{className:n("text-success-600",t),ref:r,svg:e??s(x,{weight:"fill"}),...o});case"info":return s(p,{className:n("text-accent-600",t),ref:r,svg:s(w,{weight:"fill"}),...o});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=l(({asChild:t,className:e,onClick:o,...r},i)=>{let a=f(g);return s(t?d:"button",{className:n("shrink-0","data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs",e),onClick:u=>{o?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...r})});C.displayName="ToastAction";var b=l(({asChild:t,className:e,...o},r)=>s(t?d:"p",{className:n("text-strong flex-1 text-sm font-body",e),ref:r,...o}));b.displayName="ToastMessage";var z={Root:v,Action:C,Icon:h,Message:b};function U(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var R={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function S({className:t,priority:e,...o}){return s("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[e],t),...o})}export{A as a,L as b,z as c,U as d};
|
|
2
|
+
//# sourceMappingURL=chunk-UGWSBMHH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n} from \"react\";\nimport * as ToastPrimitive from \"sonner\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { WithStyleProps } from \"../../types/with-style-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as IconComponent } from \"../icon/icon.js\";\nimport type { SvgOnlyProps } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\n\ntype ToasterPrimitiveProps = ComponentProps<typeof ToastPrimitive.Toaster>;\ntype ToasterPrimitiveTheme = ToasterPrimitiveProps[\"theme\"];\n\ntype ToasterProps = WithStyleProps &\n\tPick<ToasterPrimitiveProps, \"containerAriaLabel\" | \"dir\" | \"position\"> & {\n\t\t/**\n\t\t * Time in milliseconds that should elapse before automatically dismissing toasts.\n\t\t * When set here, this will be the default duration for all toasts.\n\t\t * @default 4000\n\t\t */\n\t\tduration_ms?: number;\n\t};\n\n/**\n * A container for displaying all toasts.\n *\n * Only one `<Toaster />` should be rendered in an app a time, preferably at the\n * root level of the app.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toaster\n *\n * @example\n * ```tsx\n * <Toaster\n * position=\"top-right\"\n * duration_ms={5000}\n * />\n * ```\n */\nconst Toaster = ({\n\t//,\n\tclassName,\n\tcontainerAriaLabel,\n\tdir,\n\tduration_ms = 4000,\n\tposition = \"top-center\",\n\tstyle,\n}: ToasterProps) => {\n\tconst theme = useAppliedTheme();\n\n\treturn (\n\t\t<ToastPrimitive.Toaster\n\t\t\tclassName={cx(\n\t\t\t\t\"toaster overlay-prompt pointer-events-auto *:duration-200\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tcontainerAriaLabel={containerAriaLabel}\n\t\t\tdir={dir}\n\t\t\tduration={duration_ms}\n\t\t\tgap={12}\n\t\t\tposition={position ?? \"top-center\"}\n\t\t\tstyle={style}\n\t\t\ttheme={theme as ToasterPrimitiveTheme} // we have additional themes that are not in the sonner types, so we need to cast for now\n\t\t\ttoastOptions={{\n\t\t\t\tunstyled: true,\n\t\t\t}}\n\t\t/>\n\t);\n};\nToaster.displayName = \"Toaster\";\n\nconst ToastIdContext = createContext<string | number>(\"\");\n\ntype MakeToastOptions = {\n\t/**\n\t * Time in milliseconds that should elapse before automatically closing the toast.\n\t * Will default to the `<Toaster />`'s `duration_ms` if not provided.\n\t *\n\t * You can keep the toast open until manually dismissed by passing a value <= 0 or Number.POSITIVE_INFINITY\n\t */\n\tduration_ms?: number;\n\t/**\n\t * An optional custom ID for this toast. If not given, a unique ID is provided for you.\n\t */\n\tid?: string;\n};\n\n/**\n * Create a toast. Provide a `<Toast.Root>` component as the `children` to be rendered\n * inside the `<Toaster />` section.\n *\n * @see https://mantle.ngrok.com/components/toast#api-make-toast\n *\n * @example\n * ```tsx\n * // Basic toast with auto-dismiss (default 4000ms, inherits from `<Toaster>`)\n * makeToast(\n * <Toast.Root priority=\"success\">\n * <Toast.Icon />\n * <Toast.Message>Operation completed successfully!</Toast.Message>\n * <Toast.Action>Dismiss</Toast.Action>\n * </Toast.Root>\n * );\n *\n * // Toast that stays open until manually dismissed\n * makeToast(\n * <Toast.Root priority=\"warning\">\n * <Toast.Icon />\n * <Toast.Message>Action required</Toast.Message>\n * <Toast.Action>Dismiss</Toast.Action>\n * </Toast.Root>,\n * { duration_ms: Number.POSITIVE_INFINITY }\n * );\n * ```\n */\nfunction makeToast(children: ReactNode, options?: MakeToastOptions) {\n\tlet duration = options?.duration_ms;\n\tif (typeof duration === \"number\" && duration <= 0) {\n\t\tduration = Number.POSITIVE_INFINITY;\n\t}\n\n\treturn ToastPrimitive.toast.custom(\n\t\t(toastId) => (\n\t\t\t<ToastIdContext.Provider value={toastId}>\n\t\t\t\t{children}\n\t\t\t</ToastIdContext.Provider>\n\t\t),\n\t\t{\n\t\t\t//\n\t\t\tduration,\n\t\t\t// If a custom ID is provided, use it, else use the toastId provided by the sonner library\n\t\t\t// don't set an ID to `undefined` as it breaks the sonner library\n\t\t\t...(options?.id ? { id: options.id } : {}),\n\t\t\tunstyled: true,\n\t\t},\n\t);\n}\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype ToastState = {\n\tpriority: Priority;\n};\n\nconst ToastStateContext = createContext<ToastState>({\n\tpriority: \"info\",\n});\n\ntype ToastProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\tpriority: Priority;\n\t};\n\n/**\n * A succinct message with a priority that is displayed temporarily.\n * Toasts are used to provide feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n * <Toast.Icon />\n * <Toast.Message>Changes saved successfully!</Toast.Message>\n * <Toast.Action>Undo</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ToastProps>(\n\t({ asChild, children, className, priority, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<ToastStateContext.Provider value={{ priority }}>\n\t\t\t\t<Component\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"relative flex items-start gap-2 text-sm\",\n\t\t\t\t\t\t\"p-3 pl-3.75\",\n\t\t\t\t\t\t\"bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg\",\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Do not apply overflow-hidden because we want the priority bar accent\n\t\t\t\t\t\t * to overlap the toast border, else the border flows over the\n\t\t\t\t\t\t * priority bar.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<PriorityBarAccent priority={priority} />\n\t\t\t\t\t{children}\n\t\t\t\t</Component>\n\t\t\t</ToastStateContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Toast\";\n\ntype ToastIconProps = Partial<SvgOnlyProps>;\n\n/**\n * An icon that visually represents the priority of the toast.\n * If you do not provide an icon, the default icon and color for the priority is used.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-icon\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"warning\">\n * <Toast.Icon />\n * <Toast.Message>Warning message</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, ToastIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastStateContext);\n\n\t\tswitch (ctx.priority) {\n\t\t\tcase \"danger\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-danger-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"warning\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-warning-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningDiamondIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"success\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-success-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <CheckCircleIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"info\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\t//\n\t\t\t\t\t\tclassName={cx(\"text-accent-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={<InfoIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tthrow new Error(`Unreachable Case: ${ctx.priority}`);\n\t\t}\n\t},\n);\nIcon.displayName = \"ToastIcon\";\n\ntype ToastActionProps = ComponentProps<\"button\"> & WithAsChild;\n\n/**\n * A button that dismisses the toast when clicked.\n * You can prevent the toast from being dismissed `onClick` by calling `event.preventDefault()`\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-action\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"info\">\n * <Toast.Icon />\n * <Toast.Message>File uploaded successfully</Toast.Message>\n * <Toast.Action>View File</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ToastActionProps>(\n\t({ asChild, className, onClick, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastIdContext);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t//,\n\t\t\t\t\t\"shrink-0\",\n\t\t\t\t\t// 👇 wiggle the bits so that icon buttons toast actions are aligned with the toast icon\n\t\t\t\t\t\"data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tToastPrimitive.toast.dismiss(ctx);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"ToastAction\";\n\ntype ToastMessageProps = ComponentProps<\"p\"> & WithAsChild;\n\n/**\n * The message content of the toast.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-message\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n * <Toast.Icon />\n * <Toast.Message>Your changes have been saved</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Message = forwardRef<ComponentRef<\"p\">, ToastMessageProps>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"p\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t//\n\t\t\t\tclassName={cx(\"text-strong flex-1 text-sm font-body\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nMessage.displayName = \"ToastMessage\";\n\n/**\n * A succinct message that is displayed temporarily. Toasts are used to provide\n * feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast\n *\n * @example\n * ```tsx\n * makeToast(\n * <Toast.Root priority=\"success\">\n * <Toast.Icon />\n * <Toast.Message>Operation completed successfully!</Toast.Message>\n * <Toast.Action>Dismiss</Toast.Action>\n * </Toast.Root>\n * );\n * ```\n */\nconst Toast = {\n\t/**\n\t * A succinct message with a priority that is displayed temporarily.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t * <Toast.Icon />\n\t * <Toast.Message>Changes saved successfully!</Toast.Message>\n\t * <Toast.Action>Undo</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that dismisses the toast when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-action\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"info\">\n\t * <Toast.Icon />\n\t * <Toast.Message>File uploaded successfully</Toast.Message>\n\t * <Toast.Action>View File</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * An icon that visually represents the priority of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"warning\">\n\t * <Toast.Icon />\n\t * <Toast.Message>Warning message</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The message content of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-message\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t * <Toast.Icon />\n\t * <Toast.Message>Your changes have been saved</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tMessage,\n} as const;\n\nexport {\n\t//,\n\tmakeToast,\n\tToast,\n\tToaster,\n};\n\nexport type {\n\t//,\n\tPriority,\n};\n\n/**\n * @private\n *\n * Allows any mantle floating prompt (e.g. toasts and notifications) to be interacted with\n * even when a modaled view (e.g. dialog, sheet, etc) is open and a focus trap is active.\n *\n * Without this, interacting with the prompt would close the modaled view.\n *\n * @example\n * ```tsx\n * <Dialog.Root onInteractOutside={preventCloseOnPromptInteraction}>\n * <Dialog.Content>\n * <p>Dialog content</p>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nexport function preventCloseOnPromptInteraction(\n\tevent: CustomEvent | PointerEvent | MouseEvent | TouchEvent | FocusEvent,\n) {\n\tif (!(event.target instanceof Element)) {\n\t\treturn;\n\t}\n\n\tif (event.target.closest(\".overlay-prompt\")) {\n\t\tevent.preventDefault();\n\t}\n}\n\nconst priorityBackgroundColor = {\n\tinfo: \"bg-accent-600\",\n\twarning: \"bg-warning-600\",\n\tsuccess: \"bg-success-600\",\n\tdanger: \"bg-danger-600\",\n} as const satisfies Record<Priority, string>;\n\ntype PriorityBarAccentProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n\tpriority: Priority;\n};\n\n/**\n * @private\n *\n * A colored bar that visually represents the priority of the toast.\n */\nfunction PriorityBarAccent({\n\tclassName,\n\tpriority,\n\t...props\n}: PriorityBarAccentProps) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t//\n\t\t\t\t\"z-1 absolute -inset-px right-auto w-1.5 rounded-l\",\n\t\t\t\tpriorityBackgroundColor[priority],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"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","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","createContext","forwardRef","useContext","ToastPrimitive","jsx","jsxs","Toaster","className","containerAriaLabel","dir","duration_ms","position","style","theme","useAppliedTheme","cx","ToastIdContext","createContext","makeToast","children","options","duration","toastId","ToastStateContext","createContext","Root","forwardRef","asChild","children","className","priority","props","ref","Component","Slot","jsx","jsxs","cx","PriorityBarAccent","Icon","svg","ctx","useContext","WarningIcon","WarningDiamondIcon","CheckCircleIcon","InfoIcon","Action","onClick","ToastIdContext","event","Message","Toast","preventCloseOnPromptInteraction","event","priorityBackgroundColor","PriorityBarAccent","className","priority","props","jsx","cx"]}
|
package/dist/combobox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as f}from"./chunk-YKYEISYH.js";import{a as l}from"./chunk-UNFO4DZV.js";import{a as s}from"./chunk-PFXFESEN.js";import*as i from"@ariakit/react";import{createContext as I,forwardRef as b}from"react";import{jsx as t}from"react/jsx-runtime";var c=({children:o,...e})=>t(i.ComboboxProvider,{...e,children:o});c.displayName="Combobox";var x=b(({"aria-invalid":o,autoComplete:e="list",autoSelect:a="always",className:n,validation:r,...m},d)=>{let p=o!=null&&o!=="false"?"error":typeof r=="function"?r():r;return t(i.Combobox,{"aria-invalid":o??p==="error",autoComplete:e,autoSelect:a,className:s("pointer-coarse:text-base h-9 text-sm","bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong","placeholder:text-placeholder","aria-disabled:opacity-50","hover:border-neutral-400","focus:outline-hidden focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger","autofill:shadow-[var(--color-blue-50)] autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]",n),"data-validation":p||void 0,ref:d,...m})});x.displayName="ComboboxInput";var C=b(({asChild:o=!1,children:e,className:a,sameWidth:n=!0,unmountOnHide:r=!0,...m},d)=>t(i.ComboboxPopover,{className:s("border-popover bg-popover relative z-50 max-h-96 min-w-[8rem] scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 focus:outline-hidden",a),ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,sameWidth:n,unmountOnHide:r,...m,children:e}));C.displayName="ComboboxContent";var w=I(void 0),v=b(({asChild:o=!1,children:e,className:a,focusOnHover:n=!0,value:r,...m},d)=>t(w.Provider,{value:r,children:t(i.ComboboxItem,{className:s("cursor-pointer rounded px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center","data-active-item:bg-popover-hover","aria-disabled:opacity-50",a),focusOnHover:n,ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,value:r,...m,children:e})}));v.displayName="ComboboxItem";var P=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroup,{className:s("",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));P.displayName="ComboboxGroup";var y=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroupLabel,{className:s("text-muted px-2 py-1 text-xs font-medium",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));y.displayName="ComboboxGroupLabel";var g=b(({asChild:o=!1,className:e,...a},n)=>t(i.ComboboxItemValue,{className:s("*:data-[user-value]:font-
|
|
1
|
+
import{b as f}from"./chunk-YKYEISYH.js";import{a as l}from"./chunk-UNFO4DZV.js";import{a as s}from"./chunk-PFXFESEN.js";import*as i from"@ariakit/react";import{createContext as I,forwardRef as b}from"react";import{jsx as t}from"react/jsx-runtime";var c=({children:o,...e})=>t(i.ComboboxProvider,{...e,children:o});c.displayName="Combobox";var x=b(({"aria-invalid":o,autoComplete:e="list",autoSelect:a="always",className:n,validation:r,...m},d)=>{let p=o!=null&&o!=="false"?"error":typeof r=="function"?r():r;return t(i.Combobox,{"aria-invalid":o??p==="error",autoComplete:e,autoSelect:a,className:s("pointer-coarse:text-base h-9 text-sm","bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong","placeholder:text-placeholder","aria-disabled:opacity-50","hover:border-neutral-400","focus:outline-hidden focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger","autofill:shadow-[var(--color-blue-50)] autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]",n),"data-validation":p||void 0,ref:d,...m})});x.displayName="ComboboxInput";var C=b(({asChild:o=!1,children:e,className:a,sameWidth:n=!0,unmountOnHide:r=!0,...m},d)=>t(i.ComboboxPopover,{className:s("border-popover bg-popover relative z-50 max-h-96 min-w-[8rem] scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 focus:outline-hidden",a),ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,sameWidth:n,unmountOnHide:r,...m,children:e}));C.displayName="ComboboxContent";var w=I(void 0),v=b(({asChild:o=!1,children:e,className:a,focusOnHover:n=!0,value:r,...m},d)=>t(w.Provider,{value:r,children:t(i.ComboboxItem,{className:s("cursor-pointer rounded px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center","data-active-item:bg-popover-hover","aria-disabled:opacity-50",a),focusOnHover:n,ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,value:r,...m,children:e})}));v.displayName="ComboboxItem";var P=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroup,{className:s("",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));P.displayName="ComboboxGroup";var y=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroupLabel,{className:s("text-muted px-2 py-1 text-xs font-medium",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));y.displayName="ComboboxGroupLabel";var g=b(({asChild:o=!1,className:e,...a},n)=>t(i.ComboboxItemValue,{className:s("*:data-[user-value]:font-medium flex-1 shrink-0 text-strong font-normal",e),ref:n,render:o?({ref:r,...m})=>t(l,{ref:r,...m}):void 0,...a}));g.displayName="ComboboxItemValue";var h=b(({className:o,...e},a)=>t(f,{ref:a,className:s("-mx-1.25 my-1 w-auto",o),...e}));h.displayName="ComboboxSeparator";var G={Root:c,Content:C,Group:P,GroupLabel:y,Input:x,Item:v,ItemValue:g,Separator:h};export{G as Combobox};
|
|
2
2
|
//# sourceMappingURL=combobox.js.map
|