@ngrok/mantle 0.60.0 → 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.
Files changed (42) hide show
  1. package/dist/alert-dialog.js +1 -1
  2. package/dist/alert.js +1 -1
  3. package/dist/badge.js +1 -1
  4. package/dist/badge.js.map +1 -1
  5. package/dist/button.js +1 -1
  6. package/dist/calendar.js +1 -1
  7. package/dist/chunk-3AUCEZTZ.js +2 -0
  8. package/dist/chunk-3AUCEZTZ.js.map +1 -0
  9. package/dist/{chunk-4IX2UWKO.js → chunk-BR4ZHK5A.js} +2 -2
  10. package/dist/{chunk-EVAIBP32.js → chunk-JATU64S7.js} +2 -2
  11. package/dist/{chunk-EVAIBP32.js.map → chunk-JATU64S7.js.map} +1 -1
  12. package/dist/{chunk-DRVKSKOI.js → chunk-M6TUHYJA.js} +2 -2
  13. package/dist/{chunk-DRVKSKOI.js.map → chunk-M6TUHYJA.js.map} +1 -1
  14. package/dist/chunk-PEGWGFY7.js +2 -0
  15. package/dist/chunk-PEGWGFY7.js.map +1 -0
  16. package/dist/chunk-UGWSBMHH.js +2 -0
  17. package/dist/chunk-UGWSBMHH.js.map +1 -0
  18. package/dist/combobox.js +1 -1
  19. package/dist/combobox.js.map +1 -1
  20. package/dist/command.js +1 -1
  21. package/dist/data-table.js +1 -1
  22. package/dist/dialog.js +1 -1
  23. package/dist/dropdown-menu.js +1 -1
  24. package/dist/dropdown-menu.js.map +1 -1
  25. package/dist/icons.js +1 -1
  26. package/dist/icons.js.map +1 -1
  27. package/dist/mantle.css +18 -2
  28. package/dist/pagination.js +1 -1
  29. package/dist/select.js +1 -1
  30. package/dist/sheet.js +1 -1
  31. package/dist/theme.d.ts +1 -23
  32. package/dist/theme.js +1 -1
  33. package/dist/toast.d.ts +13 -0
  34. package/dist/toast.js +1 -1
  35. package/package.json +10 -10
  36. package/dist/chunk-BRV6XRNS.js +0 -2
  37. package/dist/chunk-BRV6XRNS.js.map +0 -1
  38. package/dist/chunk-UKS7NFNC.js +0 -2
  39. package/dist/chunk-UKS7NFNC.js.map +0 -1
  40. package/dist/chunk-VBNDWNIJ.js +0 -2
  41. package/dist/chunk-VBNDWNIJ.js.map +0 -1
  42. /package/dist/{chunk-4IX2UWKO.js.map → chunk-BR4ZHK5A.js.map} +0 -0
@@ -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-UKS7NFNC.js";import"./chunk-VBNDWNIJ.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{a as d}from"./chunk-DRVKSKOI.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};
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/alert.js CHANGED
@@ -1,2 +1,2 @@
1
- import{c as m}from"./chunk-BRV6XRNS.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import{a as l}from"./chunk-UNFO4DZV.js";import{a as d}from"./chunk-NZ6DRFAL.js";import{a as i}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as C}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as P}from"@phosphor-icons/react/Info";import{WarningIcon as I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as N}from"@phosphor-icons/react/WarningDiamond";import{XIcon as h}from"@phosphor-icons/react/X";import{cva as w}from"class-variance-authority";import{createContext as R,forwardRef as c,useContext as D,useMemo as T}from"react";import B from"tiny-invariant";import{jsx as r}from"react/jsx-runtime";var u=R(null);function f(){let t=D(u);return B(t,"useAlertContext hook used outside of Alert parent!"),t}var H=w("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",info:"border-accent-500/50 bg-accent-500/10 text-accent-700",success:"border-success-500/50 bg-success-500/10 text-success-700",warning:"border-warning-500/50 bg-warning-500/10 text-warning-700"},appearance:{banner:"border-x-0 border-t-0 rounded-none z-50 sticky",default:""}},compoundVariants:[{priority:"danger",appearance:"banner",className:""},{priority:"info",appearance:"banner",className:""},{priority:"success",appearance:"banner",className:""},{priority:"warning",appearance:"banner",className:""}]}),g=c(({appearance:t="default",className:o,priority:e,...n},s)=>{let a=T(()=>({priority:e}),[e]);return r(u.Provider,{value:a,children:r("div",{ref:s,className:i(H({appearance:t,priority:e}),o),...n})})});g.displayName="Alert";var M={danger:r(I,{}),info:r(P,{}),success:r(C,{}),warning:r(N,{})},y=c(({className:t,svg:o,...e},n)=>{let s=f(),a=M[s.priority];return r(d,{ref:n,className:i("size-5",t),svg:o??a,...e})});y.displayName="AlertIcon";var x=c(({className:t,...o},e)=>r("div",{ref:e,className:i("min-w-0 flex-1 has-[[data-alert-dismiss]]:pr-6",t),...o}));x.displayName="AlertContent";var A=c(({asChild:t=!1,className:o,...e},n)=>r(t?l:"h5",{ref:n,className:i("font-medium",o),...e}));A.displayName="AlertTitle";var b=c(({asChild:t=!1,className:o,...e},n)=>r(t?l:"div",{ref:n,className:i("text-sm",o),...e}));b.displayName="AlertDescription";var v=({size:t="sm",type:o="button",label:e="Dismiss Alert",appearance:n="ghost",className:s,...a})=>{let p=f();return r(m,{appearance:n,icon:r(h,{}),label:e,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute",{"text-danger-700 not-disabled:hover:text-danger-800 not-disabled:active:text-danger-900":p.priority==="danger","text-accent-700 not-disabled:hover:text-accent-800 not-disabled:active:text-accent-900":p.priority==="info","text-success-700 not-disabled:hover:text-success-800 not-disabled:active:text-success-900":p.priority==="success","text-warning-700 not-disabled:hover:text-warning-800 not-disabled:active:text-warning-900":p.priority==="warning"},s),type:o,...a})};v.displayName="AlertDismissIconButton";var V={Root:g,Content:x,Description:b,DismissIconButton:v,Icon:y,Title:A};export{V as Alert};
1
+ import{c as m}from"./chunk-3AUCEZTZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import{a as l}from"./chunk-UNFO4DZV.js";import{a as d}from"./chunk-NZ6DRFAL.js";import{a as i}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as C}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as P}from"@phosphor-icons/react/Info";import{WarningIcon as I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as N}from"@phosphor-icons/react/WarningDiamond";import{XIcon as h}from"@phosphor-icons/react/X";import{cva as w}from"class-variance-authority";import{createContext as R,forwardRef as c,useContext as D,useMemo as T}from"react";import B from"tiny-invariant";import{jsx as r}from"react/jsx-runtime";var u=R(null);function f(){let t=D(u);return B(t,"useAlertContext hook used outside of Alert parent!"),t}var H=w("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",info:"border-accent-500/50 bg-accent-500/10 text-accent-700",success:"border-success-500/50 bg-success-500/10 text-success-700",warning:"border-warning-500/50 bg-warning-500/10 text-warning-700"},appearance:{banner:"border-x-0 border-t-0 rounded-none z-50 sticky",default:""}},compoundVariants:[{priority:"danger",appearance:"banner",className:""},{priority:"info",appearance:"banner",className:""},{priority:"success",appearance:"banner",className:""},{priority:"warning",appearance:"banner",className:""}]}),g=c(({appearance:t="default",className:o,priority:e,...n},s)=>{let a=T(()=>({priority:e}),[e]);return r(u.Provider,{value:a,children:r("div",{ref:s,className:i(H({appearance:t,priority:e}),o),...n})})});g.displayName="Alert";var M={danger:r(I,{}),info:r(P,{}),success:r(C,{}),warning:r(N,{})},y=c(({className:t,svg:o,...e},n)=>{let s=f(),a=M[s.priority];return r(d,{ref:n,className:i("size-5",t),svg:o??a,...e})});y.displayName="AlertIcon";var x=c(({className:t,...o},e)=>r("div",{ref:e,className:i("min-w-0 flex-1 has-[[data-alert-dismiss]]:pr-6",t),...o}));x.displayName="AlertContent";var A=c(({asChild:t=!1,className:o,...e},n)=>r(t?l:"h5",{ref:n,className:i("font-medium",o),...e}));A.displayName="AlertTitle";var b=c(({asChild:t=!1,className:o,...e},n)=>r(t?l:"div",{ref:n,className:i("text-sm",o),...e}));b.displayName="AlertDescription";var v=({size:t="sm",type:o="button",label:e="Dismiss Alert",appearance:n="ghost",className:s,...a})=>{let p=f();return r(m,{appearance:n,icon:r(h,{}),label:e,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute",{"text-danger-700 not-disabled:hover:text-danger-800 not-disabled:active:text-danger-900":p.priority==="danger","text-accent-700 not-disabled:hover:text-accent-800 not-disabled:active:text-accent-900":p.priority==="info","text-success-700 not-disabled:hover:text-success-800 not-disabled:active:text-success-900":p.priority==="success","text-warning-700 not-disabled:hover:text-warning-800 not-disabled:active:text-warning-900":p.priority==="warning"},s),type:o,...a})};v.displayName="AlertDismissIconButton";var V={Root:g,Content:x,Description:b,DismissIconButton:v,Icon:y,Title:A};export{V as Alert};
2
2
  //# sourceMappingURL=alert.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){switch(e){case"muted":return w[t];default: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){switch(e){case"muted":return v[t];default:n(!1,`Invalid appearance: ${String(e)}`)}}export{u as Badge};
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,OAAQA,EAAY,CACnB,IAAK,QACJ,OAAOH,EAAmBE,CAAK,EAChC,QACCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAC9D,CACD,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,OAAQA,EAAY,CACnB,IAAK,QACJ,OAAOE,EAAqBH,CAAK,EAClC,QACCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAC9D,CACD","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
+ {"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"]}
package/dist/button.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as c}from"./chunk-GC6NS32Q.js";import{c as a}from"./chunk-BRV6XRNS.js";import{a as b}from"./chunk-DRVKSKOI.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{b as Button,c as ButtonGroup,a as IconButton};
1
+ import{a as c}from"./chunk-GC6NS32Q.js";import{c as a}from"./chunk-3AUCEZTZ.js";import{a as b}from"./chunk-M6TUHYJA.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{b as Button,c as ButtonGroup,a as IconButton};
2
2
  //# sourceMappingURL=button.js.map
package/dist/calendar.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a,b as o}from"./chunk-BRV6XRNS.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import{a as r}from"./chunk-2NIR7PCL.js";import"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import{a as e}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as p}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as f}from"@phosphor-icons/react/CaretRight";import{DayPicker as u}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function d({className:l,classNames:s,showOutsideDays:i=!1,...n}){return t(u,{animate:!1,components:{Chevron:c=>{let m=c.orientation==="left"?t(p,{}):t(f,{});return t(r,{svg:m,className:"size-4"})}},classNames:{root:e("isolate",l),button_next:e(a,o({appearance:"ghost",size:"sm"}),"absolute right-0"),button_previous:e(a,o({appearance:"ghost",size:"sm"}),"absolute left-0"),caption_label:"text-sm font-medium",day:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md",n.mode==="range"?"first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md":""),day_button:"day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15",disabled:"text-muted opacity-50",hidden:"invisible",month:"space-y-4",month_caption:"flex justify-center pt-1 relative items-center",month_grid:"w-full border-collapse space-y-1",months:"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min",nav:"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10",outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",range_middle:"day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25",range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",selected:"not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent",today:"not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md",week:"flex w-full mt-1",weekday:"text-body w-7 text-[0.8rem] text-center font-normal",weekdays:"flex",...s},showOutsideDays:i,...n})}d.displayName="Calendar";export{d as Calendar};
1
+ import{a,b as o}from"./chunk-3AUCEZTZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import{a as r}from"./chunk-2NIR7PCL.js";import"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import{a as e}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as p}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as f}from"@phosphor-icons/react/CaretRight";import{DayPicker as u}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function d({className:l,classNames:s,showOutsideDays:i=!1,...n}){return t(u,{animate:!1,components:{Chevron:c=>{let m=c.orientation==="left"?t(p,{}):t(f,{});return t(r,{svg:m,className:"size-4"})}},classNames:{root:e("isolate",l),button_next:e(a,o({appearance:"ghost",size:"sm"}),"absolute right-0"),button_previous:e(a,o({appearance:"ghost",size:"sm"}),"absolute left-0"),caption_label:"text-sm font-medium",day:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md",n.mode==="range"?"first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md":""),day_button:"day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15",disabled:"text-muted opacity-50",hidden:"invisible",month:"space-y-4",month_caption:"flex justify-center pt-1 relative items-center",month_grid:"w-full border-collapse space-y-1",months:"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min",nav:"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10",outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",range_middle:"day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25",range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",selected:"not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent",today:"not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md",week:"flex w-full mt-1",weekday:"text-body w-7 text-[0.8rem] text-center font-normal",weekdays:"flex",...s},showOutsideDays:i,...n})}d.displayName="Calendar";export{d as Calendar};
2
2
  //# sourceMappingURL=calendar.js.map
@@ -0,0 +1,2 @@
1
+ import{a as c}from"./chunk-3C5O3AQA.js";import{a as l}from"./chunk-2NIR7PCL.js";import{a as u}from"./chunk-UNFO4DZV.js";import{a}from"./chunk-PFXFESEN.js";import{CircleNotchIcon as I}from"@phosphor-icons/react/CircleNotch";import{cva as C}from"class-variance-authority";import{Children as H,cloneElement as M,forwardRef as T,isValidElement as V}from"react";import E from"tiny-invariant";import{Fragment as P,jsx as t,jsxs as z}from"react/jsx-runtime";var N=a("icon-button","inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border","focus:outline-hidden focus-visible:ring-4","disabled:cursor-default disabled:opacity-50","not-disabled:active:scale-97 ease-out transition-transform duration-150"),A=C(N,{variants:{appearance:{ghost:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent",outlined:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-6",sm:"size-7",md:"size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),L=T(({"aria-disabled":b,appearance:s,asChild:p=!1,children:o,className:m,disabled:f,icon:v,isLoading:e=!1,label:h,size:i,type:B,...g},y)=>{let n=c(b??f??e),x=e?t(I,{className:"animate-spin"}):v,r={"aria-disabled":n,className:a(A({appearance:s,isLoading:e,size:i}),m),"data-appearance":s,"data-disabled":n,"data-icon-button":!0,"data-loading":e,"data-size":i,disabled:n,ref:y,...g},d=z(P,{children:[t("span",{className:"sr-only",children:h}),t(l,{svg:x})]});return p?(E(V(o)&&H.only(o),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),t(u,{...r,children:M(o,{},d)})):t("button",{...r,type:B,children:d})});L.displayName="IconButton";export{N as a,A as b,L as c};
2
+ //# sourceMappingURL=chunk-3AUCEZTZ.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { cva } from \"class-variance-authority\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst baseIconButtonClasses = cx(\n\t\"icon-button\",\n\t\"inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border\",\n\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\"disabled:cursor-default disabled:opacity-50\",\n\t\"not-disabled:active:scale-97 ease-out transition-transform duration-150\",\n);\n\nconst iconButtonVariants = cva(baseIconButtonClasses, {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tghost:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\toutlined:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace the `icon` with a spinner.\n\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * The size of the IconButton.\n\t\t */\n\t\tsize: {\n\t\t\txs: \"size-6\",\n\t\t\tsm: \"size-7\",\n\t\t\tmd: \"size-9\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button#api-icon-button\n *\n * @example\n * ```tsx\n * <IconButton\n * type=\"button\"\n * icon={<TrashIcon />}\n * label=\"Delete item\"\n * appearance=\"ghost\"\n * size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\ticonButtonVariants({ appearance, isLoading, size }),\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-appearance\": appearance,\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tconst innerChildren = (\n\t\t\t<>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</>\n\t\t);\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, IconButton must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(children, {}, innerChildren)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t{innerChildren}\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport {\n\tbaseIconButtonClasses,\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"2JAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,OAAAC,MAAW,2BAEpB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBAkKnB,OAsBA,YAAAC,EAtBA,OAAAC,EAsBA,QAAAC,MAtBA,oBA3JH,IAAMC,EAAwBC,EAC7B,cACA,8GACA,4CACA,8CACA,yEACD,EAEMC,EAAqBC,EAAIH,EAAuB,CACrD,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CAAC,EA8FKI,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EACZf,EAACwB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAGKW,EAAc,CACnB,gBAAiBJ,EACjB,UAAWlB,EACVC,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAClDL,CACD,EACA,kBAAmBH,EACnB,gBAAiBY,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEMO,EACLzB,EAAAF,EAAA,CACC,UAAAC,EAAC,QAAK,UAAU,UAAW,SAAAgB,EAAM,EACjChB,EAAC2B,EAAA,CAAK,IAAKJ,EAAM,GAClB,EAGD,OAAIb,GACHkB,EACCC,EAAelB,CAAQ,GAAKmB,EAAS,KAAKnB,CAAQ,EAClD,8EACD,EAGCX,EAAC+B,EAAA,CAAM,GAAGN,EACR,SAAAO,EAAarB,EAAU,CAAC,EAAGe,CAAa,EAC1C,GAKD1B,EAAC,UAAQ,GAAGyB,EAAa,KAAMP,EAC7B,SAAAQ,EACF,CAEF,CACD,EACApB,EAAW,YAAc","names":["CircleNotchIcon","cva","Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","baseIconButtonClasses","cx","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","innerChildren","Icon","invariant","isValidElement","Children","Slot","cloneElement"]}
@@ -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-UKS7NFNC.js";import{c as g}from"./chunk-BRV6XRNS.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-4IX2UWKO.js.map
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:s,onValueChange:p,onChange:u,...c},m)=>t(e.Root,{...c,onValueChange:f=>{u?.(f),p?.(f)},children:t(y.Provider,{value:{"aria-invalid":o,id:i,validation:l,onBlur:s,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:s,...p},u)=>{let c=M(y),m=c["aria-invalid"]??o,f=m!=null&&m!=="false",v=c.validation??s,S=f?"error":typeof v=="function"?v():v,V=m??S==="error",E=c.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,c.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",...s},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,...s,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-semibold",o),...a}));B.displayName="SelectLabel";var W=n(({className:o,children:a,icon:i,...l},s)=>g(e.Item,{ref:s,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-EVAIBP32.js.map
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":"gKAEA,OAAS,iBAAAA,MAAqB,kCAC9B,OAAS,eAAAC,MAAmB,gCAC5B,OAAS,aAAAC,MAAiB,8BAC1B,UAAYC,MAAqB,yBAWjC,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAkB,QAuGlD,cAAAC,EAiHD,QAAAC,MAjHC,oBA/EJ,IAAMC,EAAgBC,EAAiC,CAAC,CAAC,EAyDnDC,EAAOC,EACZ,CACC,CACC,eAAgBC,EAChB,SAAAC,EACA,GAAAC,EACA,WAAAC,EACA,OAAAC,EACA,cAAAC,EACA,SAAAC,EACA,GAAGC,CACJ,EACAC,IAGCd,EAAiB,OAAhB,CACC,GAAGa,EACJ,cAAgBE,GAAU,CACzBH,IAAWG,CAAK,EAChBJ,IAAgBI,CAAK,CACtB,EAEA,SAAAf,EAACE,EAAc,SAAd,CACA,MAAO,CAAE,eAAgBI,EAAc,GAAAE,EAAI,WAAAC,EAAY,OAAAC,EAAQ,IAAAI,CAAI,EAElE,SAAAP,EACF,EACD,CAGH,EACAH,EAAK,YAAc,SA4BnB,IAAMY,EAAwB,QAC9BA,EAAM,YAAc,cAmBpB,IAAMC,EAAwB,QAC9BA,EAAM,YAAc,cA2BpB,IAAMC,EAAUb,EAIf,CACC,CACC,eAAgBc,EAChB,UAAAC,EACA,SAAAb,EACA,GAAIc,EACJ,WAAYC,EACZ,GAAGT,CACJ,EACAC,IACI,CACJ,IAAMS,EAAMC,EAAWtB,CAAa,EAC9BI,EAAeiB,EAAI,cAAc,GAAKJ,EACtCM,EAAYnB,GAAgB,MAAQA,IAAiB,QACrDoB,EAAcH,EAAI,YAAcD,EAChCb,EAAagB,EAChB,QACA,OAAOC,GAAgB,WACtBA,EAAY,EACZA,EACEC,EAAcrB,GAAgBG,IAAe,QAC7CD,EAAKe,EAAI,IAAMF,EAErB,OACCpB,EAAiB,UAAhB,CACA,eAAc0B,EACd,UAAWC,EACV,cACA,4QACA,2BACA,yDACA,kHACA,iQACA,iQACA,kPACAR,CACD,EACA,kBAAiBX,GAAc,OAC/B,GAAID,EACJ,IAAKqB,EAAYf,EAAKS,EAAI,GAAG,EAC5B,GAAGV,EAEH,UAAAN,EACDP,EAAiB,OAAhB,CAAqB,QAAO,GAC5B,SAAAA,EAAC8B,EAAA,CAAK,IAAK9B,EAAC+B,EAAA,CAAc,OAAO,OAAO,EAAI,UAAU,SAAS,EAChE,GACD,CAEF,CACD,EACAb,EAAQ,YAAc,gBAMtB,IAAMc,EAAuB3B,EAG3B,CAAC,CAAE,UAAAe,EAAW,GAAGP,CAAM,EAAGC,IAC3Bd,EAAiB,iBAAhB,CACA,IAAKc,EACL,UAAWc,EACV,uDACAR,CACD,EACC,GAAGP,EAEJ,SAAAb,EAAC8B,EAAA,CAAK,IAAK9B,EAACiC,EAAA,CAAY,OAAO,OAAO,EAAI,UAAU,SAAS,EAC9D,CACA,EACDD,EAAqB,YAAc,uBAMnC,IAAME,EAAyB7B,EAG7B,CAAC,CAAE,UAAAe,EAAW,GAAGP,CAAM,EAAGC,IAC3Bd,EAAiB,mBAAhB,CACA,IAAKc,EACL,UAAWc,EACV,uDACAR,CACD,EACC,GAAGP,EAEJ,SAAAb,EAAC8B,EAAA,CAAK,IAAK9B,EAAC+B,EAAA,CAAc,OAAO,OAAO,EAAI,UAAU,SAAS,EAChE,CACA,EACDG,EAAuB,YAAc,yBA+BrC,IAAMC,EAAU9B,EAIf,CACC,CAAE,UAAAe,EAAW,SAAAb,EAAU,SAAA6B,EAAW,SAAU,MAAAC,EAAQ,UAAW,GAAGxB,CAAM,EACxEC,IAEAd,EAAiB,SAAhB,CACA,SAAAC,EAAiB,UAAhB,CACA,IAAKa,EACL,UAAWc,EACV,8ZACA,aACAQ,IAAa,UACZ,+KACDC,IAAU,WAAa,wCACvBjB,CACD,EACA,SAAUgB,EACT,GAAGvB,EAEJ,UAAAb,EAACgC,EAAA,EAAqB,EACtBhC,EAAiB,WAAhB,CACA,UAAW4B,EACV,MACAQ,IAAa,UACZ,+CACF,EAEC,SAAA7B,EACF,EACAP,EAACkC,EAAA,EAAuB,GACzB,EACD,CAEF,EACAC,EAAQ,YAAc,gBA2BtB,IAAMG,EAAQjC,EAGZ,CAAC,CAAE,UAAAe,EAAW,GAAGP,CAAM,EAAGC,IAC3Bd,EAAiB,QAAhB,CACA,IAAKc,EACL,UAAWc,EAAG,oCAAqCR,CAAS,EAC3D,GAAGP,EACL,CACA,EACDyB,EAAM,YAAc,cAyBpB,IAAMC,EAAOlC,EAGX,CAAC,CAAE,UAAAe,EAAW,SAAAb,EAAU,KAAAiC,EAAM,GAAG3B,CAAM,EAAGC,IAC3Cb,EAAiB,OAAhB,CACA,IAAKa,EACL,UAAWc,EACV,qHACA,yBACA,6DACA,wEACA,4CACAR,CACD,EACC,GAAGP,EAEH,UAAA2B,GAAQxC,EAAC8B,EAAA,CAAK,IAAKU,EAAM,EAC1BxC,EAAiB,WAAhB,CAA0B,SAAAO,EAAS,EACpCP,EAAiB,gBAAhB,CAA8B,UAAU,gEACxC,SAAAA,EAAC8B,EAAA,CAAK,IAAK9B,EAACyC,EAAA,CAAU,OAAO,OAAO,EAAI,UAAU,SAAS,EAC5D,GACD,CACA,EACDF,EAAK,YAAc,aA4BnB,IAAMG,EAA2BrC,EAG/B,CAAC,CAAE,UAAAe,EAAW,GAAGP,CAAM,EAAGC,IAC3Bd,EAAC2C,EAAA,CACA,IAAK7B,EACL,UAAWc,EAAG,yBAA0BR,CAAS,EAChD,GAAGP,EACL,CACA,EACD6B,EAAyB,YAAc,kBA8BvC,IAAME,EAAS,CA6Bd,KAAAxC,EAmBA,QAAA+B,EA2BA,MAAAnB,EAoBA,KAAAuB,EA0BA,MAAAD,EA2BA,UAAWI,EAoBX,QAAAxB,EAkBA,MAAAD,CACD","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":"gKAEA,OAAS,iBAAAA,MAAqB,kCAC9B,OAAS,eAAAC,MAAmB,gCAC5B,OAAS,aAAAC,MAAiB,8BAC1B,UAAYC,MAAqB,yBAWjC,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAkB,QAuGlD,cAAAC,EAiHD,QAAAC,MAjHC,oBA/EJ,IAAMC,EAAgBC,EAAiC,CAAC,CAAC,EAyDnDC,EAAOC,EACZ,CACC,CACC,eAAgBC,EAChB,SAAAC,EACA,GAAAC,EACA,WAAAC,EACA,OAAAC,EACA,cAAAC,EACA,SAAAC,EACA,GAAGC,CACJ,EACAC,IAGCd,EAAiB,OAAhB,CACC,GAAGa,EACJ,cAAgBE,GAAU,CACzBH,IAAWG,CAAK,EAChBJ,IAAgBI,CAAK,CACtB,EAEA,SAAAf,EAACE,EAAc,SAAd,CACA,MAAO,CAAE,eAAgBI,EAAc,GAAAE,EAAI,WAAAC,EAAY,OAAAC,EAAQ,IAAAI,CAAI,EAElE,SAAAP,EACF,EACD,CAGH,EACAH,EAAK,YAAc,SA4BnB,IAAMY,EAAwB,QAC9BA,EAAM,YAAc,cAmBpB,IAAMC,EAAwB,QAC9BA,EAAM,YAAc,cA2BpB,IAAMC,EAAUb,EAIf,CACC,CACC,eAAgBc,EAChB,UAAAC,EACA,SAAAb,EACA,GAAIc,EACJ,WAAYC,EACZ,GAAGT,CACJ,EACAC,IACI,CACJ,IAAMS,EAAMC,EAAWtB,CAAa,EAC9BI,EAAeiB,EAAI,cAAc,GAAKJ,EACtCM,EAAYnB,GAAgB,MAAQA,IAAiB,QACrDoB,EAAcH,EAAI,YAAcD,EAChCb,EAAagB,EAChB,QACA,OAAOC,GAAgB,WACtBA,EAAY,EACZA,EACEC,EAAcrB,GAAgBG,IAAe,QAC7CD,EAAKe,EAAI,IAAMF,EAErB,OACCpB,EAAiB,UAAhB,CACA,eAAc0B,EACd,UAAWC,EACV,cACA,4QACA,2BACA,yDACA,kHACA,iQACA,iQACA,kPACAR,CACD,EACA,kBAAiBX,GAAc,OAC/B,GAAID,EACJ,IAAKqB,EAAYf,EAAKS,EAAI,GAAG,EAC5B,GAAGV,EAEH,UAAAN,EACDP,EAAiB,OAAhB,CAAqB,QAAO,GAC5B,SAAAA,EAAC8B,EAAA,CAAK,IAAK9B,EAAC+B,EAAA,CAAc,OAAO,OAAO,EAAI,UAAU,SAAS,EAChE,GACD,CAEF,CACD,EACAb,EAAQ,YAAc,gBAMtB,IAAMc,EAAuB3B,EAG3B,CAAC,CAAE,UAAAe,EAAW,GAAGP,CAAM,EAAGC,IAC3Bd,EAAiB,iBAAhB,CACA,IAAKc,EACL,UAAWc,EACV,uDACAR,CACD,EACC,GAAGP,EAEJ,SAAAb,EAAC8B,EAAA,CAAK,IAAK9B,EAACiC,EAAA,CAAY,OAAO,OAAO,EAAI,UAAU,SAAS,EAC9D,CACA,EACDD,EAAqB,YAAc,uBAMnC,IAAME,EAAyB7B,EAG7B,CAAC,CAAE,UAAAe,EAAW,GAAGP,CAAM,EAAGC,IAC3Bd,EAAiB,mBAAhB,CACA,IAAKc,EACL,UAAWc,EACV,uDACAR,CACD,EACC,GAAGP,EAEJ,SAAAb,EAAC8B,EAAA,CAAK,IAAK9B,EAAC+B,EAAA,CAAc,OAAO,OAAO,EAAI,UAAU,SAAS,EAChE,CACA,EACDG,EAAuB,YAAc,yBA+BrC,IAAMC,EAAU9B,EAIf,CACC,CAAE,UAAAe,EAAW,SAAAb,EAAU,SAAA6B,EAAW,SAAU,MAAAC,EAAQ,UAAW,GAAGxB,CAAM,EACxEC,IAEAd,EAAiB,SAAhB,CACA,SAAAC,EAAiB,UAAhB,CACA,IAAKa,EACL,UAAWc,EACV,8ZACA,aACAQ,IAAa,UACZ,+KACDC,IAAU,WAAa,wCACvBjB,CACD,EACA,SAAUgB,EACT,GAAGvB,EAEJ,UAAAb,EAACgC,EAAA,EAAqB,EACtBhC,EAAiB,WAAhB,CACA,UAAW4B,EACV,MACAQ,IAAa,UACZ,+CACF,EAEC,SAAA7B,EACF,EACAP,EAACkC,EAAA,EAAuB,GACzB,EACD,CAEF,EACAC,EAAQ,YAAc,gBA2BtB,IAAMG,EAAQjC,EAGZ,CAAC,CAAE,UAAAe,EAAW,GAAGP,CAAM,EAAGC,IAC3Bd,EAAiB,QAAhB,CACA,IAAKc,EACL,UAAWc,EAAG,kCAAmCR,CAAS,EACzD,GAAGP,EACL,CACA,EACDyB,EAAM,YAAc,cAyBpB,IAAMC,EAAOlC,EAGX,CAAC,CAAE,UAAAe,EAAW,SAAAb,EAAU,KAAAiC,EAAM,GAAG3B,CAAM,EAAGC,IAC3Cb,EAAiB,OAAhB,CACA,IAAKa,EACL,UAAWc,EACV,qHACA,yBACA,6DACA,wEACA,4CACAR,CACD,EACC,GAAGP,EAEH,UAAA2B,GAAQxC,EAAC8B,EAAA,CAAK,IAAKU,EAAM,EAC1BxC,EAAiB,WAAhB,CAA0B,SAAAO,EAAS,EACpCP,EAAiB,gBAAhB,CAA8B,UAAU,gEACxC,SAAAA,EAAC8B,EAAA,CAAK,IAAK9B,EAACyC,EAAA,CAAU,OAAO,OAAO,EAAI,UAAU,SAAS,EAC5D,GACD,CACA,EACDF,EAAK,YAAc,aA4BnB,IAAMG,EAA2BrC,EAG/B,CAAC,CAAE,UAAAe,EAAW,GAAGP,CAAM,EAAGC,IAC3Bd,EAAC2C,EAAA,CACA,IAAK7B,EACL,UAAWc,EAAG,yBAA0BR,CAAS,EAChD,GAAGP,EACL,CACA,EACD6B,EAAyB,YAAc,kBA8BvC,IAAME,EAAS,CA6Bd,KAAAxC,EAmBA,QAAA+B,EA2BA,MAAAnB,EAoBA,KAAAuB,EA0BA,MAAAD,EA2BA,UAAWI,EAoBX,QAAAxB,EAkBA,MAAAD,CACD","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,2 +1,2 @@
1
- import{a as p}from"./chunk-3C5O3AQA.js";import{a as d}from"./chunk-2NIR7PCL.js";import{a as u}from"./chunk-UNFO4DZV.js";import{a as b}from"./chunk-PFXFESEN.js";import{CircleNotchIcon as C}from"@phosphor-icons/react/CircleNotch";import{cva as N}from"class-variance-authority";import g from"clsx";import{Children as k,cloneElement as E,forwardRef as S,isValidElement as w}from"react";import I from"tiny-invariant";import{Fragment as j,jsx as o,jsxs as f}from"react/jsx-runtime";var R=N("",{variants:{appearance:{filled:"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium",ghost:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium",outlined:"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium",link:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent"},isLoading:{false:"",true:"opacity-50"},priority:{danger:"",default:"",neutral:""}},defaultVariants:{appearance:"outlined",isLoading:!1,priority:"default"},compoundVariants:[{appearance:"ghost",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent"},{appearance:"outlined",priority:"danger",class:"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700"},{appearance:"filled",priority:"danger",class:"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent"},{appearance:"link",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger"},{appearance:"ghost",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent"},{appearance:"outlined",priority:"neutral",class:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},{appearance:"filled",priority:"neutral",class:"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600"},{appearance:"link",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent"}]}),A=S(({"aria-disabled":v,appearance:n="outlined",asChild:m,children:e,className:h,disabled:x,icon:y,iconPlacement:a="start",isLoading:r=!1,priority:s="default",type:B,...P},V)=>{let i=p(v??x??r),t=r?o(C,{className:"animate-spin"}):y,c=t&&n!=="link",l={"aria-disabled":i,className:b("inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md","focus:outline-hidden focus-visible:ring-4","disabled:cursor-default disabled:opacity-50","not-disabled:active:scale-[0.97]",R({appearance:n,priority:s,isLoading:r}),c&&a==="start"&&"ps-2.5",c&&a==="end"&&"pe-2.5",h),"data-appearance":n,"data-disabled":i,"data-loading":r,"data-priority":s,disabled:i,ref:V,...P};return m?(I(w(e)&&k.only(e),"When using `asChild`, Button must be passed a single child as a JSX tag."),o(u,{...l,children:E(e,{},f(j,{children:[t&&o(d,{svg:t,className:g(a==="end"&&"order-last")}),e.props.children]}))})):f("button",{...l,type:B,children:[t&&o(d,{svg:t,className:g(a==="end"&&"order-last")}),e]})});A.displayName="Button";export{A as a};
2
- //# sourceMappingURL=chunk-DRVKSKOI.js.map
1
+ import{a as p}from"./chunk-3C5O3AQA.js";import{a as d}from"./chunk-2NIR7PCL.js";import{a as u}from"./chunk-UNFO4DZV.js";import{a as b}from"./chunk-PFXFESEN.js";import{CircleNotchIcon as C}from"@phosphor-icons/react/CircleNotch";import{cva as N}from"class-variance-authority";import g from"clsx";import{Children as k,cloneElement as E,forwardRef as S,isValidElement as w}from"react";import I from"tiny-invariant";import{Fragment as j,jsx as o,jsxs as f}from"react/jsx-runtime";var R=N("",{variants:{appearance:{filled:"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium",ghost:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium",outlined:"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium",link:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent"},isLoading:{false:"",true:"opacity-50"},priority:{danger:"",default:"",neutral:""}},defaultVariants:{appearance:"outlined",isLoading:!1,priority:"default"},compoundVariants:[{appearance:"ghost",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent"},{appearance:"outlined",priority:"danger",class:"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700"},{appearance:"filled",priority:"danger",class:"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent"},{appearance:"link",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger"},{appearance:"ghost",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent"},{appearance:"outlined",priority:"neutral",class:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},{appearance:"filled",priority:"neutral",class:"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600"},{appearance:"link",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent"}]}),A=S(({"aria-disabled":v,appearance:n="outlined",asChild:m,children:e,className:h,disabled:x,icon:y,iconPlacement:a="start",isLoading:r=!1,priority:s="default",type:B,...P},V)=>{let i=p(v??x??r),t=r?o(C,{className:"animate-spin"}):y,c=t&&n!=="link",l={"aria-disabled":i,className:b("inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md","focus:outline-hidden focus-visible:ring-4","disabled:cursor-default disabled:opacity-50","not-disabled:active:scale-97 ease-out transition-transform duration-150",R({appearance:n,priority:s,isLoading:r}),c&&a==="start"&&"ps-2.5",c&&a==="end"&&"pe-2.5",h),"data-appearance":n,"data-disabled":i,"data-loading":r,"data-priority":s,disabled:i,ref:V,...P};return m?(I(w(e)&&k.only(e),"When using `asChild`, Button must be passed a single child as a JSX tag."),o(u,{...l,children:E(e,{},f(j,{children:[t&&o(d,{svg:t,className:g(a==="end"&&"order-last")}),e.props.children]}))})):f("button",{...l,type:B,children:[t&&o(d,{svg:t,className:g(a==="end"&&"order-last")}),e]})});A.displayName="Button";export{A as a};
2
+ //# sourceMappingURL=chunk-M6TUHYJA.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/button/button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport type { VariantProps } from \"../../types/variant-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst buttonVariants = cva(\"\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tfilled:\n\t\t\t\t\"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\tghost:\n\t\t\t\t\"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\toutlined:\n\t\t\t\t\"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium\",\n\t\t\tlink: \"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace any `icon` with a spinner, or add one if an icon wasn't given.\n\t\t * It will also disable user interaction with the button and set `disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * Indicates the importance or impact level of the button, affecting its\n\t\t * color and styling to communicate its purpose to the user\n\t\t */\n\t\tpriority: {\n\t\t\tdanger: \"\",\n\t\t\tdefault: \"\",\n\t\t\tneutral: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tisLoading: false,\n\t\tpriority: \"default\",\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tappearance: \"ghost\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"outlined\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"filled\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"link\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass: \"text-danger-600 focus-visible:ring-focus-danger\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"ghost\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"outlined\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"filled\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"link\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass: \"text-strong focus-visible:ring-focus-accent\",\n\t\t},\n\t],\n});\n\ntype ButtonVariants = VariantProps<typeof buttonVariants>;\n\ntype ButtonAppearance = Pick<ButtonVariants, \"appearance\">[\"appearance\"];\ntype ButtonPriority = Pick<ButtonVariants, \"priority\">[\"priority\"];\n\n/**\n * The props for the `Button` component.\n */\ntype ButtonProps = ComponentProps<\"button\"> &\n\tButtonVariants & {\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present. If `state=\"pending\"`,\n\t\t * then the loading icon will also render on this side.\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ComponentProps<\"button\">[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<ComponentProps<\"button\">[\"type\"], undefined>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n *\n * @see https://mantle.ngrok.com/components/button#api-button\n *\n * @example\n * ```tsx\n * <Button type=\"button\" appearance=\"filled\" priority=\"default\">\n * Click me\n * </Button>\n * ```\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance = \"outlined\",\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\ticonPlacement = \"start\",\n\t\t\tisLoading = false,\n\t\t\tpriority = \"default\",\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\t/**\n\t\t * If the button has an icon and is not a link, add padding-start or padding-end to the button depending on the icon placement.\n\t\t */\n\t\tconst hasSpecialIconPadding = icon && appearance !== \"link\";\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\t\"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md\",\n\t\t\t\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\"not-disabled:active:scale-[0.97]\",\n\t\t\t\tbuttonVariants({ appearance, priority, isLoading }),\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"start\" && \"ps-2.5\",\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"end\" && \"pe-2.5\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-appearance\": appearance,\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-priority\": priority,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, Button must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\tsvg={icon}\n\t\t\t\t\t\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{children.props.children}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t{icon && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tsvg={icon}\n\t\t\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport {\n\t//,\n\tButton,\n};\n\nexport type {\n\t//,\n\tButtonAppearance,\n\tButtonPriority,\n\tButtonProps,\n};\n"],"mappings":"gKAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,OAAAC,MAAW,2BACpB,OAAOC,MAAU,OAEjB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBA2MnB,OA0CG,YAAAC,EA1CH,OAAAC,EA0CG,QAAAC,MA1CH,oBApMH,IAAMC,EAAiBC,EAAI,GAAI,CAC9B,SAAU,CAIT,WAAY,CACX,OACC,+OACD,MACC,yPACD,SACC,2UACD,KAAM,mHACP,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAKA,SAAU,CACT,OAAQ,GACR,QAAS,GACT,QAAS,EACV,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,UAAW,GACX,SAAU,SACX,EACA,iBAAkB,CACjB,CACC,WAAY,QACZ,SAAU,SACV,MACC,oNACF,EACA,CACC,WAAY,WACZ,SAAU,SACV,MACC,sSACF,EACA,CACC,WAAY,SACZ,SAAU,SACV,MACC,2LACF,EACA,CACC,WAAY,OACZ,SAAU,SACV,MAAO,iDACR,EACA,CACC,WAAY,QACZ,SAAU,UACV,MACC,0MACF,EACA,CACC,WAAY,WACZ,SAAU,UACV,MACC,wWACF,EACA,CACC,WAAY,SACZ,SAAU,UACV,MACC,gMACF,EACA,CACC,WAAY,OACZ,SAAU,UACV,MAAO,6CACR,CACD,CACD,CAAC,EA0FKC,EAASC,EACd,CACC,CACC,gBAAiBC,EACjB,WAAAC,EAAa,WACb,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,cAAAC,EAAgB,QAChB,UAAAC,EAAY,GACZ,SAAAC,EAAW,UACX,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaG,CAAS,EAClEO,EAAOP,EACZd,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAMKW,EAAwBF,GAAQd,IAAe,OAE/CiB,EAAc,CACnB,gBAAiBL,EACjB,UAAWM,EACV,+EACA,4CACA,8CACA,mCACAvB,EAAe,CAAE,WAAAK,EAAY,SAAAQ,EAAU,UAAAD,CAAU,CAAC,EAClDS,GAAyBV,IAAkB,SAAW,SACtDU,GAAyBV,IAAkB,OAAS,SACpDH,CACD,EACA,kBAAmBH,EACnB,gBAAiBY,EACjB,eAAgBL,EAChB,gBAAiBC,EACjB,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,OAAIT,GACHkB,EACCC,EAAelB,CAAQ,GAAKmB,EAAS,KAAKnB,CAAQ,EAClD,0EACD,EAGCT,EAAC6B,EAAA,CAAM,GAAGL,EACR,SAAAM,EACArB,EACA,CAAC,EACDR,EAAAF,EAAA,CACE,UAAAsB,GACArB,EAAC+B,EAAA,CACA,IAAKV,EACL,UAAWW,EAAKnB,IAAkB,OAAS,YAAY,EACxD,EAEAJ,EAAS,MAAM,UACjB,CACD,EACD,GAKDR,EAAC,UAAQ,GAAGuB,EAAa,KAAMR,EAC7B,UAAAK,GACArB,EAAC+B,EAAA,CACA,IAAKV,EACL,UAAWW,EAAKnB,IAAkB,OAAS,YAAY,EACxD,EAEAJ,GACF,CAEF,CACD,EACAL,EAAO,YAAc","names":["CircleNotchIcon","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","buttonVariants","cva","Button","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","iconPlacement","isLoading","priority","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","hasSpecialIconPadding","buttonProps","cx","invariant","isValidElement","Children","Slot","cloneElement","Icon","clsx"]}
1
+ {"version":3,"sources":["../src/components/button/button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport type { VariantProps } from \"../../types/variant-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst buttonVariants = cva(\"\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tfilled:\n\t\t\t\t\"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\tghost:\n\t\t\t\t\"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\toutlined:\n\t\t\t\t\"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium\",\n\t\t\tlink: \"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace any `icon` with a spinner, or add one if an icon wasn't given.\n\t\t * It will also disable user interaction with the button and set `disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * Indicates the importance or impact level of the button, affecting its\n\t\t * color and styling to communicate its purpose to the user\n\t\t */\n\t\tpriority: {\n\t\t\tdanger: \"\",\n\t\t\tdefault: \"\",\n\t\t\tneutral: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tisLoading: false,\n\t\tpriority: \"default\",\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tappearance: \"ghost\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"outlined\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"filled\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"link\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass: \"text-danger-600 focus-visible:ring-focus-danger\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"ghost\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"outlined\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"filled\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"link\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass: \"text-strong focus-visible:ring-focus-accent\",\n\t\t},\n\t],\n});\n\ntype ButtonVariants = VariantProps<typeof buttonVariants>;\n\ntype ButtonAppearance = Pick<ButtonVariants, \"appearance\">[\"appearance\"];\ntype ButtonPriority = Pick<ButtonVariants, \"priority\">[\"priority\"];\n\n/**\n * The props for the `Button` component.\n */\ntype ButtonProps = ComponentProps<\"button\"> &\n\tButtonVariants & {\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present. If `state=\"pending\"`,\n\t\t * then the loading icon will also render on this side.\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ComponentProps<\"button\">[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<ComponentProps<\"button\">[\"type\"], undefined>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n *\n * @see https://mantle.ngrok.com/components/button#api-button\n *\n * @example\n * ```tsx\n * <Button type=\"button\" appearance=\"filled\" priority=\"default\">\n * Click me\n * </Button>\n * ```\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance = \"outlined\",\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\ticonPlacement = \"start\",\n\t\t\tisLoading = false,\n\t\t\tpriority = \"default\",\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\t/**\n\t\t * If the button has an icon and is not a link, add padding-start or padding-end to the button depending on the icon placement.\n\t\t */\n\t\tconst hasSpecialIconPadding = icon && appearance !== \"link\";\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\t\"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md\",\n\t\t\t\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\"not-disabled:active:scale-97 ease-out transition-transform duration-150\",\n\t\t\t\tbuttonVariants({ appearance, priority, isLoading }),\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"start\" && \"ps-2.5\",\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"end\" && \"pe-2.5\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-appearance\": appearance,\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-priority\": priority,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, Button must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\tsvg={icon}\n\t\t\t\t\t\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{children.props.children}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t{icon && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tsvg={icon}\n\t\t\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport {\n\t//,\n\tButton,\n};\n\nexport type {\n\t//,\n\tButtonAppearance,\n\tButtonPriority,\n\tButtonProps,\n};\n"],"mappings":"gKAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,OAAAC,MAAW,2BACpB,OAAOC,MAAU,OAEjB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBA2MnB,OA0CG,YAAAC,EA1CH,OAAAC,EA0CG,QAAAC,MA1CH,oBApMH,IAAMC,EAAiBC,EAAI,GAAI,CAC9B,SAAU,CAIT,WAAY,CACX,OACC,+OACD,MACC,yPACD,SACC,2UACD,KAAM,mHACP,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAKA,SAAU,CACT,OAAQ,GACR,QAAS,GACT,QAAS,EACV,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,UAAW,GACX,SAAU,SACX,EACA,iBAAkB,CACjB,CACC,WAAY,QACZ,SAAU,SACV,MACC,oNACF,EACA,CACC,WAAY,WACZ,SAAU,SACV,MACC,sSACF,EACA,CACC,WAAY,SACZ,SAAU,SACV,MACC,2LACF,EACA,CACC,WAAY,OACZ,SAAU,SACV,MAAO,iDACR,EACA,CACC,WAAY,QACZ,SAAU,UACV,MACC,0MACF,EACA,CACC,WAAY,WACZ,SAAU,UACV,MACC,wWACF,EACA,CACC,WAAY,SACZ,SAAU,UACV,MACC,gMACF,EACA,CACC,WAAY,OACZ,SAAU,UACV,MAAO,6CACR,CACD,CACD,CAAC,EA0FKC,EAASC,EACd,CACC,CACC,gBAAiBC,EACjB,WAAAC,EAAa,WACb,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,cAAAC,EAAgB,QAChB,UAAAC,EAAY,GACZ,SAAAC,EAAW,UACX,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaG,CAAS,EAClEO,EAAOP,EACZd,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAMKW,EAAwBF,GAAQd,IAAe,OAE/CiB,EAAc,CACnB,gBAAiBL,EACjB,UAAWM,EACV,+EACA,4CACA,8CACA,0EACAvB,EAAe,CAAE,WAAAK,EAAY,SAAAQ,EAAU,UAAAD,CAAU,CAAC,EAClDS,GAAyBV,IAAkB,SAAW,SACtDU,GAAyBV,IAAkB,OAAS,SACpDH,CACD,EACA,kBAAmBH,EACnB,gBAAiBY,EACjB,eAAgBL,EAChB,gBAAiBC,EACjB,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,OAAIT,GACHkB,EACCC,EAAelB,CAAQ,GAAKmB,EAAS,KAAKnB,CAAQ,EAClD,0EACD,EAGCT,EAAC6B,EAAA,CAAM,GAAGL,EACR,SAAAM,EACArB,EACA,CAAC,EACDR,EAAAF,EAAA,CACE,UAAAsB,GACArB,EAAC+B,EAAA,CACA,IAAKV,EACL,UAAWW,EAAKnB,IAAkB,OAAS,YAAY,EACxD,EAEAJ,EAAS,MAAM,UACjB,CACD,EACD,GAKDR,EAAC,UAAQ,GAAGuB,EAAa,KAAMR,EAC7B,UAAAK,GACArB,EAAC+B,EAAA,CACA,IAAKV,EACL,UAAWW,EAAKnB,IAAkB,OAAS,YAAY,EACxD,EAEAJ,GACF,CAEF,CACD,EACAL,EAAO,YAAc","names":["CircleNotchIcon","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","buttonVariants","cva","Button","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","iconPlacement","isLoading","priority","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","hasSpecialIconPadding","buttonProps","cx","invariant","isValidElement","Children","Slot","cloneElement","Icon","clsx"]}
@@ -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