@ngrok/mantle 0.27.2 → 0.27.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/alert-dialog.js +1 -1
- package/dist/badge.js +1 -1
- package/dist/badge.js.map +1 -1
- package/dist/chunk-EG5SROPQ.js +2 -0
- package/dist/chunk-EG5SROPQ.js.map +1 -0
- package/dist/chunk-PLUW72NW.js +2 -0
- package/dist/chunk-PLUW72NW.js.map +1 -0
- package/dist/{chunk-DDMTW6XB.js → chunk-UBD43AUE.js} +2 -2
- package/dist/{chunk-DOTYPWKO.js → chunk-XN5RN6JW.js} +4 -4
- package/dist/chunk-XN5RN6JW.js.map +1 -0
- package/dist/data-table.d.ts +4 -4
- package/dist/data-table.js +1 -1
- package/dist/data-table.js.map +1 -1
- package/dist/dialog.js +1 -1
- package/dist/icons.js +1 -1
- package/dist/sheet.js +1 -1
- package/dist/table.d.ts +268 -209
- package/dist/table.js +1 -1
- package/dist/tailwind-preset.cjs +1 -1
- package/dist/tailwind-preset.cjs.map +1 -1
- package/dist/tailwind-preset.js +1 -1
- package/dist/tailwind-preset.js.map +1 -1
- package/dist/theme-provider.js +1 -1
- package/dist/toast.js +1 -1
- package/package.json +18 -19
- package/dist/chunk-DD3VIOV5.js +0 -2
- package/dist/chunk-DD3VIOV5.js.map +0 -1
- package/dist/chunk-DOTYPWKO.js.map +0 -1
- package/dist/chunk-FHW7SSNY.js +0 -2
- package/dist/chunk-FHW7SSNY.js.map +0 -1
- /package/dist/{chunk-DDMTW6XB.js.map → chunk-UBD43AUE.js.map} +0 -0
package/dist/alert-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as A,b as D,c as y,d as g,e as u,f as C,g as P,h as v}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-
|
|
1
|
+
import{a as A,b as D,c as y,d as g,e as u,f as C,g as P,h as v}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-UBD43AUE.js";import"./chunk-XN5RN6JW.js";import"./chunk-D3XF6J5A.js";import{b as m}from"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import{a as f}from"./chunk-HDPLH5HC.js";import{a}from"./chunk-AZ56JGNY.js";import{Info as j}from"@phosphor-icons/react/Info";import{Warning as F}from"@phosphor-icons/react/Warning";import{Slot as d}from"@radix-ui/react-slot";import{createContext as H,forwardRef as n,useContext as V,useMemo as k}from"react";import M from"tiny-invariant";import{jsx as i,jsxs as G}from"react/jsx-runtime";var x=H(null);function N(){let t=V(x);return M(t,"AlertDialog child component used outside of AlertDialog parent!"),t}function R({priority:t,...e}){let o=k(()=>({priority:t}),[t]);return i(x.Provider,{value:o,children:i(A,{...e})})}R.displayName="AlertDialog";var $=D,q=y,h=n(({className:t,...e},o)=>i(u,{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-sm",t),...e,ref:o}));h.displayName="AlertDialogOverlay";var b=n(({className:t,onInteractOutside:e,onPointerDownOutside:o,preferredWidth:l="max-w-md",...r},p)=>G(q,{children:[i(h,{}),i("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:i(C,{ref:p,className:a("flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start","outline-none focus-within:outline-none","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=>{c(s),e?.(s)},onPointerDownOutside:s=>{c(s),o?.(s)},...r})})]}));b.displayName="AlertDialogContent";var W=n(({asChild:t=!1,className:e,...o},l)=>i(t?d:"div",{className:a("flex-1 space-y-4",e),ref:l,...o}));W.displayName="AlertDialogBody";var O=n(({asChild:t=!1,className:e,...o},l)=>i(t?d:"div",{className:a("flex flex-col space-y-2 text-center sm:text-start",e),...o}));O.displayName="AlertDialogHeader";var w=n(({asChild:t=!1,className:e,...o},l)=>i(t?d:"div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...o}));w.displayName="AlertDialogFooter";var B=n(({className:t,...e},o)=>i(P,{ref:o,className:a("text-strong text-center text-lg font-medium sm:text-start",t),...e}));B.displayName="AlertDialogTitle";var I=n(({className:t,...e},o)=>i(v,{ref:o,className:a("text-body text-center text-sm font-normal sm:text-start",t),...e}));I.displayName="AlertDialogDescription";var T=n(({appearance:t="filled",...e},o)=>{let l=N(),r="default";return l.priority==="danger"&&(r="danger"),i(m,{appearance:t,priority:r,ref:o,...e})});T.displayName="AlertDialogAction";var z=n(({appearance:t="outlined",className:e,priority:o="neutral",...l},r)=>i(g,{asChild:!0,children:i(m,{appearance:t,className:a("mt-2 sm:mt-0",e),priority:o,ref:r,...l})}));z.displayName="AlertDialogCancel";var S=n(({className:t,svg:e,...o},l)=>{let r=N(),p=r.priority==="danger"?"text-danger-600":"text-accent-600",s=r.priority==="danger"?i(F,{}):i(j,{});return i(f,{ref:l,className:a("size-12 sm:size-7",p,t),svg:e??s,...o})});S.displayName="AlertDialogIcon";var E=g;export{R as AlertDialog,T as AlertDialogAction,W as AlertDialogBody,z as AlertDialogCancel,E as AlertDialogClose,b as AlertDialogContent,I as AlertDialogDescription,w as AlertDialogFooter,O as AlertDialogHeader,S as AlertDialogIcon,B as AlertDialogTitle,$ as AlertDialogTrigger};
|
|
2
2
|
//# sourceMappingURL=alert-dialog.js.map
|
package/dist/badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as o}from"./chunk-HDPLH5HC.js";import{a as c}from"./chunk-AZ56JGNY.js";import{Slot as y}from"@radix-ui/react-slot";import{Children as f,cloneElement as C,isValidElement as h}from"react";import n from"tiny-invariant";import{Fragment as
|
|
1
|
+
import{a as o}from"./chunk-HDPLH5HC.js";import{a as c}from"./chunk-AZ56JGNY.js";import{Slot as y}from"@radix-ui/react-slot";import{Children as f,cloneElement as C,isValidElement as h}from"react";import n from"tiny-invariant";import{Fragment as A,jsx as s,jsxs as d}from"react/jsx-runtime";var k=({appearance:t,asChild:e=!1,children:l,className:m,color:g="neutral",icon:r,...i})=>{let u=v(g,t),b=P(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",u,b,m);if(e){let a=f.only(l);n(h(a),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let x=a.props?.children;return s(y,{className:p,...i,children:C(a,{},d(A,{children:[r&&s(o,{className:"size-4",svg:r}),x]}))})}return d("span",{className:p,...i,children:[r&&s(o,{className:"size-4",svg:r}),l]})};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 v(t,e){switch(e){case"muted":return w[t];default:n(!1,`Invalid appearance: ${String(e)}`)}}var B={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 P(t,e){switch(e){case"muted":return B[t];default:n(!1,`Invalid appearance: ${String(e)}`)}}export{k 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 { Slot } from \"@radix-ui/react-slot\";\nimport {\n\tChildren,\n\ttype ComponentProps,\n\ttype
|
|
1
|
+
{"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport {\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\";\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};\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":"gFAAA,OAAS,QAAAA,MAAY,uBACrB,OACC,YAAAC,EAGA,gBAAAC,EACA,kBAAAC,MACM,QACP,OAAOC,MAAe,iBAuEjB,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,EAgBA,IAAMsB,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":["Slot","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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as f}from"./chunk-MF2QITTY.js";import{a as n}from"./chunk-AZ56JGNY.js";import{forwardRef as s,useEffect as u,useMemo as v,useRef as h,useState as y}from"react";import{jsx as d}from"react/jsx-runtime";var T=s(({children:t,className:o,...r},e)=>{let a=O();return d("div",{className:n("group/table scrollbar overflow-x-auto rounded-lg border border-card bg-white dark:bg-gray-100 relative w-full",o),"data-sticky-active":a.state.hasOverflow&&!a.state.scrolledToEnd||void 0,"data-x-overflow":a.state.hasOverflow,"data-x-scroll-end":a.state.hasOverflow&&a.state.scrolledToEnd,ref:f(a.ref,e),...r,children:t})});T.displayName="TableRoot";var C=s(({children:t,className:o,...r},e)=>d("table",{ref:e,className:n("table-auto border-collapse caption-bottom w-full min-w-full text-left",o),...r,children:t}));C.displayName="Table";var p=s(({children:t,className:o,...r},e)=>d("thead",{ref:e,className:n("border-b border-card-muted","divide-y divide-card-muted","text-strong bg-base",o),...r,children:t}));p.displayName="TableHead";var w=s(({children:t,className:o,...r},e)=>d("tbody",{className:n("border-t border-card-muted","divide-y divide-card-muted","text-body",o),ref:e,...r,children:t}));w.displayName="TableBody";var R=s(({children:t,className:o,...r},e)=>d("tfoot",{ref:e,className:n("bg-gray-50/50 font-medium text-body","border-t border-card-muted","divide-y divide-card-muted",o),...r,children:t}));R.displayName="TableFoot";var N=s(({children:t,className:o,...r},e)=>d("tr",{ref:e,className:n("[&>td]:bg-card [&>td]:hover:bg-card-hover",o),...r,children:t}));N.displayName="TableRow";var k=s(({children:t,className:o,...r},e)=>d("th",{ref:e,className:n("h-12 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0",o),...r,children:t}));p.displayName="TableHead";var x=s(({children:t,className:o,...r},e)=>d("td",{ref:e,className:n("p-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-size-mono",o),...r,children:t}));x.displayName="TableCell";var g=s(({children:t,className:o,...r},e)=>d("caption",{ref:e,className:n("py-4 text-sm text-gray-500","border-t border-card-muted",o),...r,children:t}));g.displayName="TableCaption";function O(){let t=h(null),[o,r]=y({hasOverflow:!1,scrolledToEnd:!1});return u(()=>{let e=t.current;if(!e)return;let a=()=>{let i=e.scrollWidth>e.clientWidth,b=Math.abs(e.scrollWidth-e.scrollLeft-e.clientWidth)<1;r(l=>l.hasOverflow!==i||l.scrolledToEnd!==b?{hasOverflow:i,scrolledToEnd:b}:l)},c=new ResizeObserver(a);c.observe(e);let m=new MutationObserver(a);return m.observe(e,{childList:!0,subtree:!0}),e.addEventListener("scroll",a,{passive:!0}),a(),()=>{c.disconnect(),m.disconnect(),e.removeEventListener("scroll",a)}},[]),v(()=>({ref:t,state:o}),[o])}export{T as a,C as b,p as c,w as d,R as e,N as f,k as g,x as h,g as i};
|
|
2
|
+
//# sourceMappingURL=chunk-EG5SROPQ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * The `<TableRoot>` is the root container element for all `<Table>`s.\n * It provides styling and additional functionality, such as horizontal overflow\n * detection.\n *\n * Must be used as the parent of a `<Table>`.\n *\n * @example\n * ```tsx\n * <TableRoot>\n * <Table>\n * <TableCaption>A list of your recent invoices.</TableCaption>\n * <TableHead>\n * <TableRow>\n * <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n * <TableHeader>Status</TableHeader>\n * <TableHeader>Method</TableHeader>\n * <TableHeader className=\"text-right\">Amount</TableHeader>\n * </TableRow>\n * </TableHead>\n * <TableBody>\n * {invoices.map((invoice) => (\n * <TableRow key={invoice.invoice}>\n * <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n * <TableCell>{invoice.paymentStatus}</TableCell>\n * <TableCell>{invoice.paymentMethod}</TableCell>\n * <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n * </TableRow>\n * ))}\n * </TableBody>\n * <TableFoot>\n * <TableRow>\n * <TableCell colSpan={3}>Total</TableCell>\n * <TableCell className=\"text-right\">$2,500.00</TableCell>\n * </TableRow>\n * </TableFoot>\n * </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-root\n */\nconst TableRoot = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ children, className, ...props }, ref) => {\n\t\tconst horizontalOverflow =\n\t\t\tuseHorizontalOverflowObserver<ComponentRef<\"div\">>();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/table scrollbar overflow-x-auto rounded-lg border border-card bg-white dark:bg-gray-100 relative w-full\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-sticky-active={\n\t\t\t\t\t(horizontalOverflow.state.hasOverflow &&\n\t\t\t\t\t\t!horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\tundefined\n\t\t\t\t}\n\t\t\t\tdata-x-overflow={horizontalOverflow.state.hasOverflow}\n\t\t\t\tdata-x-scroll-end={\n\t\t\t\t\thorizontalOverflow.state.hasOverflow &&\n\t\t\t\t\thorizontalOverflow.state.scrolledToEnd\n\t\t\t\t}\n\t\t\t\tref={composeRefs(horizontalOverflow.ref, ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nTableRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table>` is a structured way to display data in rows and columns. The API\n * matches the HTML `<table>` element 1:1.\n *\n * Permitted content in this order:\n * 1. optional: `<TableCaption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<TableHead>`\n * 4. either one of the following:\n * - 0 or more: `<TableBody>`\n * - 0 or more: `<TableRow>`\n * 5. optional: `<TableFoot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table>`\n * generate rectangular boxes. Each box occupies a number of table cells\n * according to the following rules:\n * 1. The row boxes fill the table in the source code order from top to bottom.\n * Each row box occupies one row of cells.\n * 2. A row group box occupies one or more row boxes.\n * 3. Column boxes are placed next to each other in source code order.\n * Depending on the value of the dir attribute, the columns are laid in\n * left-to-right or right-to-left direction. A column box occupies one or\n * more columns of table cells.\n * 4. A column group box occupies one or more column boxes.\n * 5. A cell box may span over multiple rows and columns. User agents trim\n * cells to fit in the available number of rows and columns.\n * Table cells do have padding. Boxes that make up a table do not have margins.\n * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).\n *\n * @example\n * ```tsx\n * <TableRoot>\n * <Table>\n * <TableCaption>A list of your recent invoices.</TableCaption>\n * <TableHead>\n * <TableRow>\n * <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n * <TableHeader>Status</TableHeader>\n * <TableHeader>Method</TableHeader>\n * <TableHeader className=\"text-right\">Amount</TableHeader>\n * </TableRow>\n * </TableHead>\n * <TableBody>\n * {invoices.map((invoice) => (\n * <TableRow key={invoice.invoice}>\n * <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n * <TableCell>{invoice.paymentStatus}</TableCell>\n * <TableCell>{invoice.paymentMethod}</TableCell>\n * <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n * </TableRow>\n * ))}\n * </TableBody>\n * <TableFoot>\n * <TableRow>\n * <TableCell colSpan={3}>Total</TableCell>\n * <TableCell className=\"text-right\">$2,500.00</TableCell>\n * </TableRow>\n * </TableFoot>\n * </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table\n */\nconst Table = forwardRef<ComponentRef<\"table\">, ComponentProps<\"table\">>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"table-auto border-collapse caption-bottom w-full min-w-full text-left\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</table>\n\t\t);\n\t},\n);\nTable.displayName = \"Table\";\n\n/**\n * The `<TableHead>` is a container for the table's column headers.\n * Encapsulates a set of `<TableRow>`s, indicating that they comprise the head\n * of a table with information about the table's columns. This is usually in the\n * form of column headers (`<TableHeader>`).\n *\n * Must be used as a child of a `<Table>`. It should only come after any\n * `<TableCaption>` or `<colgroup>` and before any `<TableBody>` or `<TableFoot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>`\n *\n * @example\n * ```tsx\n * <TableRoot>\n * <Table>\n * <TableCaption>A list of your recent invoices.</TableCaption>\n * <TableHead>\n * <TableRow>\n * <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n * <TableHeader>Status</TableHeader>\n * <TableHeader>Method</TableHeader>\n * <TableHeader className=\"text-right\">Amount</TableHeader>\n * </TableRow>\n * </TableHead>\n * <TableBody>\n * {invoices.map((invoice) => (\n * <TableRow key={invoice.invoice}>\n * <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n * <TableCell>{invoice.paymentStatus}</TableCell>\n * <TableCell>{invoice.paymentMethod}</TableCell>\n * <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n * </TableRow>\n * ))}\n * </TableBody>\n * <TableFoot>\n * <TableRow>\n * <TableCell colSpan={3}>Total</TableCell>\n * <TableCell className=\"text-right\">$2,500.00</TableCell>\n * </TableRow>\n * </TableFoot>\n * </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst TableHead = forwardRef<ComponentRef<\"thead\">, ComponentProps<\"thead\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<thead\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"border-b border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"text-strong bg-base\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</thead>\n\t),\n);\nTableHead.displayName = \"TableHead\";\n\n/**\n * The `<TableBody>` encapsulates a set of `<TableRow>`s, indicating that they\n * comprise the body of a table's (main) data.\n *\n * Must be used as a child of a `<Table>` and only come after any\n * `<TableCaption>`, `<colgroup>`, or `<TableHead>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>`\n *\n * @example\n * ```tsx\n * <TableRoot>\n * <Table>\n * <TableCaption>A list of your recent invoices.</TableCaption>\n * <TableHead>\n * <TableRow>\n * <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n * <TableHeader>Status</TableHeader>\n * <TableHeader>Method</TableHeader>\n * <TableHeader className=\"text-right\">Amount</TableHeader>\n * </TableRow>\n * </TableHead>\n * <TableBody>\n * {invoices.map((invoice) => (\n * <TableRow key={invoice.invoice}>\n * <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n * <TableCell>{invoice.paymentStatus}</TableCell>\n * <TableCell>{invoice.paymentMethod}</TableCell>\n * <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n * </TableRow>\n * ))}\n * </TableBody>\n * <TableFoot>\n * <TableRow>\n * <TableCell colSpan={3}>Total</TableCell>\n * <TableCell className=\"text-right\">$2,500.00</TableCell>\n * </TableRow>\n * </TableFoot>\n * </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-body\n */\nconst TableBody = forwardRef<ComponentRef<\"tbody\">, ComponentProps<\"tbody\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tbody\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"border-t border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"text-body\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tbody>\n\t),\n);\nTableBody.displayName = \"TableBody\";\n\n/**\n * The `<TableFoot>` encapsulates a set of `<TableRow>`s, indicating that they\n * comprise the foot of a table with information about the table's columns. This\n * is usually a summary of the columns, e.g., a sum of the given numbers in a\n * column.\n *\n * Must be used as a child of a `<Table>` and only come after any\n * `<TableCaption>`, `<colgroup>`, `<TableHead>`, and `<TableBody>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>` elements\n *\n * @example\n * ```tsx\n * <TableRoot>\n * <Table>\n * <TableCaption>A list of your recent invoices.</TableCaption>\n * <TableHead>\n * <TableRow>\n * <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n * <TableHeader>Status</TableHeader>\n * <TableHeader>Method</TableHeader>\n * <TableHeader className=\"text-right\">Amount</TableHeader>\n * </TableRow>\n * </TableHead>\n * <TableBody>\n * {invoices.map((invoice) => (\n * <TableRow key={invoice.invoice}>\n * <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n * <TableCell>{invoice.paymentStatus}</TableCell>\n * <TableCell>{invoice.paymentMethod}</TableCell>\n * <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n * </TableRow>\n * ))}\n * </TableBody>\n * <TableFoot>\n * <TableRow>\n * <TableCell colSpan={3}>Total</TableCell>\n * <TableCell className=\"text-right\">$2,500.00</TableCell>\n * </TableRow>\n * </TableFoot>\n * </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-foot\n */\nconst TableFoot = forwardRef<ComponentRef<\"tfoot\">, ComponentProps<\"tfoot\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tfoot\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"bg-gray-50/50 font-medium text-body\",\n\t\t\t\t\"border-t border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tfoot>\n\t),\n);\nTableFoot.displayName = \"TableFoot\";\n\n/**\n * The `<TableRow>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<TableCell>` and `<TableHeader>` components.\n *\n * Must be used as a child of a `<TableHead>`, `<TableBody>`, or `<TableFoot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableHeader>` or `<TableCell>`\n *\n * @example\n * ```tsx\n * <TableRoot>\n * <Table>\n * <TableCaption>A list of your recent invoices.</TableCaption>\n * <TableHead>\n * <TableRow>\n * <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n * <TableHeader>Status</TableHeader>\n * <TableHeader>Method</TableHeader>\n * <TableHeader className=\"text-right\">Amount</TableHeader>\n * </TableRow>\n * </TableHead>\n * <TableBody>\n * {invoices.map((invoice) => (\n * <TableRow key={invoice.invoice}>\n * <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n * <TableCell>{invoice.paymentStatus}</TableCell>\n * <TableCell>{invoice.paymentMethod}</TableCell>\n * <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n * </TableRow>\n * ))}\n * </TableBody>\n * <TableFoot>\n * <TableRow>\n * <TableCell colSpan={3}>Total</TableCell>\n * <TableCell className=\"text-right\">$2,500.00</TableCell>\n * </TableRow>\n * </TableFoot>\n * </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-row\n */\nconst TableRow = forwardRef<ComponentRef<\"tr\">, ComponentProps<\"tr\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tr\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t// \"data-state-selected:bg-gray-200\",\n\t\t\t\t\"[&>td]:bg-card [&>td]:hover:bg-card-hover\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tr>\n\t),\n);\nTableRow.displayName = \"TableRow\";\n\n/**\n * The `<TableHeader>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<TableRow>`. The exact nature of this group\n * is defined by the scope and headers attributes.\n *\n * Must be used as a child of a `<TableRow>`.\n *\n * Permitted Content:\n * 1. Flow content, but with no header, footer, sectioning content, or heading\n * content descendants.\n *\n * @example\n * ```tsx\n * <TableRoot>\n * <Table>\n * <TableCaption>A list of your recent invoices.</TableCaption>\n * <TableHead>\n * <TableRow>\n * <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n * <TableHeader>Status</TableHeader>\n * <TableHeader>Method</TableHeader>\n * <TableHeader className=\"text-right\">Amount</TableHeader>\n * </TableRow>\n * </TableHead>\n * <TableBody>\n * {invoices.map((invoice) => (\n * <TableRow key={invoice.invoice}>\n * <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n * <TableCell>{invoice.paymentStatus}</TableCell>\n * <TableCell>{invoice.paymentMethod}</TableCell>\n * <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n * </TableRow>\n * ))}\n * </TableBody>\n * <TableFoot>\n * <TableRow>\n * <TableCell colSpan={3}>Total</TableCell>\n * <TableCell className=\"text-right\">$2,500.00</TableCell>\n * </TableRow>\n * </TableFoot>\n * </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst TableHeader = forwardRef<ComponentRef<\"th\">, ComponentProps<\"th\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<th\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"h-12 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</th>\n\t),\n);\nTableHead.displayName = \"TableHead\";\n\n/**\n * The `<TableCell>` defines a cell of a table that contains data and may be\n * used as a child of a `<TableRow>`.\n *\n * Must be used as a child of a `<TableRow>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <TableRoot>\n * <Table>\n * <TableCaption>A list of your recent invoices.</TableCaption>\n * <TableHead>\n * <TableRow>\n * <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n * <TableHeader>Status</TableHeader>\n * <TableHeader>Method</TableHeader>\n * <TableHeader className=\"text-right\">Amount</TableHeader>\n * </TableRow>\n * </TableHead>\n * <TableBody>\n * {invoices.map((invoice) => (\n * <TableRow key={invoice.invoice}>\n * <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n * <TableCell>{invoice.paymentStatus}</TableCell>\n * <TableCell>{invoice.paymentMethod}</TableCell>\n * <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n * </TableRow>\n * ))}\n * </TableBody>\n * <TableFoot>\n * <TableRow>\n * <TableCell colSpan={3}>Total</TableCell>\n * <TableCell className=\"text-right\">$2,500.00</TableCell>\n * </TableRow>\n * </TableFoot>\n * </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-cell\n */\nconst TableCell = forwardRef<ComponentRef<\"td\">, ComponentProps<\"td\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<td\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"p-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-size-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</td>\n\t),\n);\nTableCell.displayName = \"TableCell\";\n\n/**\n * The optional `<TableCaption>` specifies the caption (or title) of a table,\n * providing the table an accessible description.\n *\n * If used, must be the first child of a `<Table>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <TableRoot>\n * <Table>\n * <TableCaption>A list of your recent invoices.</TableCaption>\n * <TableHead>\n * <TableRow>\n * <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n * <TableHeader>Status</TableHeader>\n * <TableHeader>Method</TableHeader>\n * <TableHeader className=\"text-right\">Amount</TableHeader>\n * </TableRow>\n * </TableHead>\n * <TableBody>\n * {invoices.map((invoice) => (\n * <TableRow key={invoice.invoice}>\n * <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n * <TableCell>{invoice.paymentStatus}</TableCell>\n * <TableCell>{invoice.paymentMethod}</TableCell>\n * <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n * </TableRow>\n * ))}\n * </TableBody>\n * <TableFoot>\n * <TableRow>\n * <TableCell colSpan={3}>Total</TableCell>\n * <TableCell className=\"text-right\">$2,500.00</TableCell>\n * </TableRow>\n * </TableFoot>\n * </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-caption\n */\nconst TableCaption = forwardRef<\n\tComponentRef<\"caption\">,\n\tComponentProps<\"caption\">\n>(({ children, className, ...props }, ref) => (\n\t<caption\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"py-4 text-sm text-gray-500\",\n\t\t\t\"border-t border-card-muted\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</caption>\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n\t//,\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableFoot,\n\tTableHead,\n\tTableHeader,\n\tTableRoot,\n\tTableRow,\n};\n\n/**\n * A custom hook that observes the horizontal overflow of an element and determines\n * if it has overflow and if it is scrolled to the end.\n *\n * @private\n */\nfunction useHorizontalOverflowObserver<T extends HTMLElement>() {\n\tconst ref = useRef<T | null>(null);\n\tconst [state, setState] = useState({\n\t\thasOverflow: false,\n\t\tscrolledToEnd: false,\n\t});\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst checkState = () => {\n\t\t\tconst hasOverflow = element.scrollWidth > element.clientWidth;\n\t\t\tconst scrolledToEnd =\n\t\t\t\tMath.abs(\n\t\t\t\t\telement.scrollWidth - element.scrollLeft - element.clientWidth,\n\t\t\t\t) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (\n\t\t\t\t\tprevious.hasOverflow !== hasOverflow ||\n\t\t\t\t\tprevious.scrolledToEnd !== scrolledToEnd\n\t\t\t\t) {\n\t\t\t\t\treturn { hasOverflow, scrolledToEnd };\n\t\t\t\t}\n\t\t\t\treturn previous; // No state change\n\t\t\t});\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver(checkState);\n\t\tresizeObserver.observe(element);\n\n\t\tconst mutationObserver = new MutationObserver(checkState);\n\t\tmutationObserver.observe(element, { childList: true, subtree: true });\n\n\t\telement.addEventListener(\"scroll\", checkState, { passive: true });\n\n\t\tcheckState();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", checkState);\n\t\t};\n\t}, []);\n\n\treturn useMemo(() => ({ ref, state }), [state]);\n}\n"],"mappings":"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","names":["forwardRef","useEffect","useMemo","useRef","useState","jsx","TableRoot","forwardRef","children","className","props","ref","horizontalOverflow","useHorizontalOverflowObserver","cx","composeRefs","Table","TableHead","TableBody","TableFoot","TableRow","TableHeader","TableCell","TableCaption","useHorizontalOverflowObserver","ref","useRef","state","setState","useState","useEffect","element","checkState","hasOverflow","scrolledToEnd","previous","resizeObserver","mutationObserver","useMemo"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{m as r}from"./chunk-GYPSB3OK.js";import{SortAscending as o}from"@phosphor-icons/react/SortAscending";import{SortDescending as n}from"@phosphor-icons/react/SortDescending";import{jsx as i}from"react/jsx-runtime";var s=({mode:c,direction:t,...e})=>{switch(c){case"alphanumeric":switch(t){case"asc":return i(o,{...e});case"desc":return i(n,{...e});default:throw new Error(`Invalid alphanumeric sorting direction given: "${t}"`)}case"time":switch(r(t)){case"oldest-to-newest":return i(n,{...e});case"newest-to-oldest":return i(o,{...e});default:throw new Error(`Invalid time sorting direction given: "${t}"`)}}};s.displayName="Sort";export{s as a};
|
|
2
|
+
//# sourceMappingURL=chunk-PLUW72NW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/icons/sort.tsx"],"sourcesContent":["import { SortAscending } from \"@phosphor-icons/react/SortAscending\";\nimport { SortDescending } from \"@phosphor-icons/react/SortDescending\";\nimport {\n\t$timeSortingDirection,\n\ttype AlphanumericSortingDirection,\n\ttype SortingDirection,\n\ttype SortingMode,\n\ttype TimeSortingDirection,\n} from \"../../utils/sorting/direction.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\n\ntype Props = SvgAttributes &\n\t(\n\t\t| {\n\t\t\t\tmode: Extract<SortingMode, \"alphanumeric\">;\n\t\t\t\t/**\n\t\t\t\t * Sort by alphanumeric order in \"ascending\" (asc) or \"descending\" (desc) order.\n\t\t\t\t * @example \"asc\" for A-Z, 0-9\n\t\t\t\t * @example \"desc\" for Z-A, 0-9\n\t\t\t\t */\n\t\t\t\tdirection: AlphanumericSortingDirection;\n\t\t }\n\t\t| {\n\t\t\t\tmode: Extract<SortingMode, \"time\">;\n\t\t\t\t/**\n\t\t\t\t * Sort by time in \"newest-to-oldest\" (descending, desc) or \"oldest-to-newest\" (ascending, asc) order.\n\t\t\t\t * @example \"newest-to-oldest\" for newest first (aka descending, desc)\n\t\t\t\t * @example \"oldest-to-newest\" for oldest first (aka ascending, asc)\n\t\t\t\t */\n\t\t\t\tdirection: TimeSortingDirection | SortingDirection;\n\t\t }\n\t);\n\n/**\n * A sorting icon that can be used to indicate the sorting direction of a table column or list.\n * It is aware of the sorting mode (alphanumeric or time) and the sorting direction (ascending or descending).\n */\nconst Sort = ({ mode, direction, ...props }: Props) => {\n\tswitch (mode) {\n\t\tcase \"alphanumeric\": {\n\t\t\tswitch (direction) {\n\t\t\t\tcase \"asc\":\n\t\t\t\t\treturn <SortAscending {...props} />;\n\t\t\t\tcase \"desc\":\n\t\t\t\t\treturn <SortDescending {...props} />;\n\t\t\t\tdefault:\n\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t`Invalid alphanumeric sorting direction given: \"${direction}\"`,\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t\tcase \"time\": {\n\t\t\tconst timeSortingDirection = $timeSortingDirection(direction);\n\n\t\t\tswitch (timeSortingDirection) {\n\t\t\t\tcase \"oldest-to-newest\":\n\t\t\t\t\treturn <SortDescending {...props} />;\n\t\t\t\tcase \"newest-to-oldest\":\n\t\t\t\t\treturn <SortAscending {...props} />;\n\t\t\t\tdefault:\n\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t`Invalid time sorting direction given: \"${direction}\"`,\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n};\nSort.displayName = \"Sort\";\n\nexport {\n\t//,\n\tSort,\n};\n"],"mappings":"wCAAA,OAAS,iBAAAA,MAAqB,sCAC9B,OAAS,kBAAAC,MAAsB,uCAyCnB,cAAAC,MAAA,oBALZ,IAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAM,IAAa,CACtD,OAAQF,EAAM,CACb,IAAK,eACJ,OAAQC,EAAW,CAClB,IAAK,MACJ,OAAOH,EAACK,EAAA,CAAe,GAAGD,EAAO,EAClC,IAAK,OACJ,OAAOJ,EAACM,EAAA,CAAgB,GAAGF,EAAO,EACnC,QACC,MAAM,IAAI,MACT,kDAAkDD,CAAS,GAC5D,CACF,CAED,IAAK,OAGJ,OAF6BI,EAAsBJ,CAAS,EAE9B,CAC7B,IAAK,mBACJ,OAAOH,EAACM,EAAA,CAAgB,GAAGF,EAAO,EACnC,IAAK,mBACJ,OAAOJ,EAACK,EAAA,CAAe,GAAGD,EAAO,EAClC,QACC,MAAM,IAAI,MACT,0CAA0CD,CAAS,GACpD,CACF,CAEF,CACD,EACAF,EAAK,YAAc","names":["SortAscending","SortDescending","jsx","Sort","mode","direction","props","SortAscending","SortDescending","$timeSortingDirection"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{l as P}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{l as P}from"./chunk-XN5RN6JW.js";import{a as p}from"./chunk-7O36LG52.js";import{a as i}from"./chunk-AZ56JGNY.js";import{CheckCircle as v}from"@phosphor-icons/react/CheckCircle";import{Info as h}from"@phosphor-icons/react/Info";import{Warning as C}from"@phosphor-icons/react/Warning";import{WarningDiamond as b}from"@phosphor-icons/react/WarningDiamond";import{Slot as u}from"@radix-ui/react-slot";import{createContext as y,forwardRef as d,useContext as f}from"react";import*as m from"sonner";import{jsx as r,jsxs as A}from"react/jsx-runtime";var B=({className:t,containerAriaLabel:o,dir:e,duration_ms:s=4e3,position:n="top-center",style:a})=>{let c=P();return r(m.Toaster,{className:i("toaster overlay-prompt pointer-events-auto font-sans *:duration-200",t),containerAriaLabel:o,dir:e,duration:s,gap:12,position:n??"top-center",style:a,theme:c,toastOptions:{unstyled:!0}})},g=y("");function _(t,o){return m.toast.custom(e=>r(g.Provider,{value:e,children:t}),{duration:o?.duration_ms,...o?.id?{id:o.id}:{},unstyled:!0})}var T=y({priority:"info"}),j=d(({asChild:t,children:o,className:e,priority:s,...n},a)=>{let c=t?u:"div";return r(T.Provider,{value:{priority:s},children:A(c,{className:i("relative flex items-start gap-2 text-sm","p-3 pl-[0.9375rem]","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",e),ref:a,...n,children:[r(w,{priority:s}),o]})})}),D=d(({className:t,svg:o,...e},s)=>{let n=f(T);switch(n.priority){case"danger":return r(p,{className:i("text-danger-600",t),ref:s,svg:o??r(C,{weight:"fill"}),...e});case"warning":return r(p,{className:i("text-warning-600",t),ref:s,svg:o??r(b,{weight:"fill"}),...e});case"success":return r(p,{className:i("text-success-600",t),ref:s,svg:o??r(v,{weight:"fill"}),...e});case"info":return r(p,{className:i("text-accent-600",t),ref:s,svg:r(h,{weight:"fill"}),...e});default:throw new Error(`Unreachable Case: ${n.priority}`)}}),L=d(({asChild:t,className:o,onClick:e,...s},n)=>{let a=f(g);return r(t?u:"button",{className:i("shrink-0","data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-sm",o),onClick:l=>{e?.(l),!l.defaultPrevented&&m.toast.dismiss(a)},ref:n,...s})}),z=d(({asChild:t,className:o,...e},s)=>r(t?u:"p",{className:i("text-strong flex-1 text-sm",o),ref:s,...e}));function F(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var x={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function w({className:t,priority:o,...e}){return r("div",{"aria-hidden":!0,className:i("z-1 absolute -inset-px right-auto w-1.5 rounded-l",x[o],t),...e})}export{B as a,_ as b,j as c,D as d,L as e,z as f,F as g};
|
|
2
|
+
//# sourceMappingURL=chunk-UBD43AUE.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as T}from"./chunk-D3XF6J5A.js";import{Fragment as P,jsx as i,jsxs as k}from"react/jsx-runtime";var v="https://assets.ngrok.com",q=`${v}/fonts`,R=["/euclid-square/EuclidSquare-Regular-WebS.woff","/euclid-square/EuclidSquare-RegularItalic-WebS.woff","/euclid-square/EuclidSquare-Medium-WebS.woff","/euclid-square/EuclidSquare-Semibold-WebS.woff","/euclid-square/EuclidSquare-MediumItalic-WebS.woff","/ibm-plex-mono/IBMPlexMono-Text.woff","/ibm-plex-mono/IBMPlexMono-TextItalic.woff","/ibm-plex-mono/IBMPlexMono-SemiBold.woff","/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff"],$=e=>`${q}${e}`,M=({includeNunitoSans:e=!1})=>k(P,{children:[i("link",{rel:"preconnect",href:v}),R.map(t=>i("link",{rel:"preload",href:$(t),as:"font",type:"font/woff",crossOrigin:"anonymous"},t)),e&&i(D,{})]});function D(){return k(P,{children:[i("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),i("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"}),i("link",{href:"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap",rel:"stylesheet"})]})}import b from"clsx";import{createContext as F,useContext as C,useEffect as E,useMemo as x,useState as L}from"react";import N from"tiny-invariant";import{Fragment as
|
|
1
|
+
import{a as T}from"./chunk-D3XF6J5A.js";import{Fragment as P,jsx as i,jsxs as k}from"react/jsx-runtime";var v="https://assets.ngrok.com",q=`${v}/fonts`,R=["/euclid-square/EuclidSquare-Regular-WebS.woff","/euclid-square/EuclidSquare-RegularItalic-WebS.woff","/euclid-square/EuclidSquare-Medium-WebS.woff","/euclid-square/EuclidSquare-Semibold-WebS.woff","/euclid-square/EuclidSquare-MediumItalic-WebS.woff","/ibm-plex-mono/IBMPlexMono-Text.woff","/ibm-plex-mono/IBMPlexMono-TextItalic.woff","/ibm-plex-mono/IBMPlexMono-SemiBold.woff","/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff"],$=e=>`${q}${e}`,M=({includeNunitoSans:e=!1})=>k(P,{children:[i("link",{rel:"preconnect",href:v}),R.map(t=>i("link",{rel:"preload",href:$(t),as:"font",type:"font/woff",crossOrigin:"anonymous"},t)),e&&i(D,{})]});function D(){return k(P,{children:[i("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),i("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"}),i("link",{href:"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap",rel:"stylesheet"})]})}import b from"clsx";import{createContext as F,useContext as C,useEffect as E,useMemo as x,useState as L}from"react";import N from"tiny-invariant";import{Fragment as Q,jsx as g,jsxs as A}from"react/jsx-runtime";var m="(prefers-color-scheme: dark)",h="(prefers-contrast: more)",H=["light","dark","light-high-contrast","dark-high-contrast"],w=["system",...H],K=e=>e;function I(e){return typeof e!="string"?!1:w.includes(e)}var j=e=>e;function B(e){return typeof e!="string"?!1:H.includes(e)}var u="mantle-ui-theme",W=["system",()=>null],y=F(W),f=()=>typeof window<"u";function d(e,t="system"){let n=t??"system";if(f()){let s=null;try{s="localStorage"in window?window.localStorage.getItem(e):null}catch{}return I(s)?s:n}return n}function ee({children:e,defaultTheme:t="system",storageKey:n=u}){let[s,r]=L(()=>{let o=d(n,t);return c(o),o});E(()=>{let o=d(n,t);r(o),c(o)},[t,n]),E(()=>{let o=window.matchMedia(m),a=window.matchMedia(h),l=()=>{d(n,t)==="system"&&c("system")};return o.addEventListener("change",l),a.addEventListener("change",l),()=>{o.removeEventListener("change",l),a.removeEventListener("change",l)}},[t,n]);let p=x(()=>[s,o=>{try{"localStorage"in window&&window.localStorage.setItem(n,o)}catch{}r(o),c(o)}],[n,s]);return g(y.Provider,{value:p,children:e})}function te(){let e=C(y);return N(e,"useTheme must be used within a ThemeProvider"),e}function c(e){if(!f())return;let t=window.document.documentElement;t.classList.remove(...w);let n=window.matchMedia(m).matches,s=window.matchMedia(h).matches,r=S(e,{prefersDarkMode:n,prefersHighContrast:s});t.classList.add(r),t.dataset.appliedTheme=r,t.dataset.theme=e}function ne(){if(!f())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=I(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:B(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function S(e,{prefersDarkMode:t,prefersHighContrast:n}){return e==="system"?_({prefersDarkMode:t,prefersHighContrast:n}):e}function oe(){let e=C(y),t=e!=null?e[0]:"system",n=T(m),s=T(h);return S(t,{prefersDarkMode:n,prefersHighContrast:s})}function _({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function O({defaultTheme:e="system",storageKey:t=u}){return`
|
|
2
2
|
(function() {
|
|
3
3
|
const themes = ${JSON.stringify(w)};
|
|
4
4
|
const isTheme = (value) => typeof value === "string" && themes.includes(value);
|
|
@@ -15,7 +15,7 @@ import{a as T}from"./chunk-D3XF6J5A.js";import{Fragment as P,jsx as i,jsxs as k}
|
|
|
15
15
|
}
|
|
16
16
|
const themePreference = hasStoredTheme ? maybeStoredTheme : fallbackTheme;
|
|
17
17
|
const prefersDarkMode = window.matchMedia("${m}").matches;
|
|
18
|
-
const prefersHighContrast = window.matchMedia("${
|
|
18
|
+
const prefersHighContrast = window.matchMedia("${h}").matches;
|
|
19
19
|
let initialTheme = themePreference;
|
|
20
20
|
if (initialTheme === "system") {
|
|
21
21
|
if (prefersHighContrast) {
|
|
@@ -30,5 +30,5 @@ import{a as T}from"./chunk-D3XF6J5A.js";import{Fragment as P,jsx as i,jsxs as k}
|
|
|
30
30
|
htmlElement.dataset.appliedTheme = initialTheme;
|
|
31
31
|
htmlElement.dataset.theme = themePreference;
|
|
32
32
|
})();
|
|
33
|
-
`.trim()}var
|
|
34
|
-
//# sourceMappingURL=chunk-
|
|
33
|
+
`.trim()}var se=({defaultTheme:e="system",storageKey:t=u,includeNunitoSans:n=!1})=>A(Q,{children:[g("script",{dangerouslySetInnerHTML:{__html:O({defaultTheme:e,storageKey:t})}}),g(M,{includeNunitoSans:n})]});function re(e){let{className:t="",defaultTheme:n="system",storageKey:s=u}=e??{};return x(()=>{if(!f())return{className:b(t),"data-applied-theme":"system","data-theme":"system"};let r=window.matchMedia(m).matches,p=window.matchMedia(h).matches,o=d(s,n),a=S(o,{prefersDarkMode:r,prefersHighContrast:p});return{className:b(t,a),"data-applied-theme":a,"data-theme":o}},[t,n,s])}export{M as a,H as b,w as c,K as d,I as e,j as f,B as g,ee as h,te as i,c as j,ne as k,oe as l,O as m,se as n,re as o};
|
|
34
|
+
//# sourceMappingURL=chunk-XN5RN6JW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/theme-provider/preload-fonts.tsx","../src/components/theme-provider/theme-provider.tsx"],"sourcesContent":["const cdnOrigin = \"https://assets.ngrok.com\";\nconst cdnBase = `${cdnOrigin}/fonts`;\n\nconst fonts = [\n\t\"/euclid-square/EuclidSquare-Regular-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-RegularItalic-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Medium-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Semibold-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-MediumItalic-WebS.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-Text.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-TextItalic.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBold.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff\",\n] as const;\n\ntype Font = (typeof fonts)[number];\n\nconst fontHref = <T extends Font = Font>(font: T) =>\n\t`${cdnBase}${font}` as const;\n\ntype Props = {\n\t/**\n\t * If set, will also preload and include the optional Nunito Sans font from Google Fonts.\n\t * @default false\n\t */\n\tincludeNunitoSans?: boolean;\n};\n\n/**\n * Preload custom fonts used in the theme. This should be added to the head of the document in your application, preferably as high as possible.\n * Normally you won't use this directly, but instead use the `MantleThemeHeadContent` component which includes this.\n */\nconst PreloadFonts = ({ includeNunitoSans = false }: Props) => (\n\t<>\n\t\t<link rel=\"preconnect\" href={cdnOrigin} />\n\t\t{fonts.map((font) => (\n\t\t\t<link\n\t\t\t\tkey={font}\n\t\t\t\trel=\"preload\"\n\t\t\t\thref={fontHref(font)}\n\t\t\t\tas=\"font\"\n\t\t\t\ttype=\"font/woff\"\n\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t/>\n\t\t))}\n\t\t{includeNunitoSans && <NunitoSans />}\n\t</>\n);\n\nexport {\n\t//,\n\tPreloadFonts,\n};\n\nfunction NunitoSans() {\n\treturn (\n\t\t<>\n\t\t\t<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n\t\t\t<link\n\t\t\t\trel=\"preconnect\"\n\t\t\t\thref=\"https://fonts.gstatic.com\"\n\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t/>\n\t\t\t<link\n\t\t\t\thref=\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap\"\n\t\t\t\trel=\"stylesheet\"\n\t\t\t/>\n\t\t</>\n\t);\n}\n","import clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { useMatchesMediaQuery } from \"../../hooks/use-matches-media-query.js\";\nimport { PreloadFonts } from \"./preload-fonts.js\";\n\n/**\n * prefersDarkModeMediaQuery is the media query used to detect if the user prefers dark mode.\n */\nconst prefersDarkModeMediaQuery = \"(prefers-color-scheme: dark)\";\n\n/**\n * prefersHighContrastMediaQuery is the media query used to detect if the user prefers high contrast mode.\n */\nconst prefersHighContrastMediaQuery = \"(prefers-contrast: more)\";\n\n/**\n * resolvedThemes is a tuple of valid themes that have been resolved from \"system\" to a specific theme.\n */\nconst resolvedThemes = [\n\t\"light\",\n\t\"dark\",\n\t\"light-high-contrast\",\n\t\"dark-high-contrast\",\n] as const;\n\n/**\n * ResolvedTheme is a type that represents a theme that has been resolved from \"system\" to a specific theme.\n */\ntype ResolvedTheme = (typeof resolvedThemes)[number];\n\n/**\n * themes is a tuple of valid themes.\n */\nconst themes = [\"system\", ...resolvedThemes] as const;\n\n/**\n * Theme is a string literal type that represents a valid theme.\n */\ntype Theme = (typeof themes)[number];\n\n/**\n * $theme is a helper which translates the Theme type into a string literal type.\n */\nconst $theme = <T extends Theme = Theme>(value: T) => value;\n\n/**\n * Type predicate that checks if a value is a valid theme.\n */\nfunction isTheme(value: unknown): value is Theme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn themes.includes(value as Theme);\n}\n\n/**\n * $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.\n */\nconst $resolvedTheme = <T extends ResolvedTheme = ResolvedTheme>(value: T) =>\n\tvalue;\n\n/**\n * Type predicate that checks if a value is a valid resolved theme.\n */\nfunction isResolvedTheme(value: unknown): value is ResolvedTheme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn resolvedThemes.includes(value as ResolvedTheme);\n}\n\n/**\n * DEFAULT_STORAGE_KEY is the default key used to store the theme in localStorage.\n */\nconst DEFAULT_STORAGE_KEY = \"mantle-ui-theme\";\n\n/**\n * ThemeProviderState is the shape of the state returned by the ThemeProviderContext.\n */\ntype ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];\n\n/**\n * Initial state for the ThemeProviderContext.\n */\nconst initialState: ThemeProviderState = [\"system\", () => null];\n\n/**\n * ThemeProviderContext is a React Context that provides the current theme and a function to set the theme.\n */\nconst ThemeProviderContext = createContext<ThemeProviderState | null>(\n\tinitialState,\n);\n\n/**\n * isBrowser returns true if the code is running in a browser environment.\n */\nconst isBrowser = () => typeof window !== \"undefined\";\n\n/**\n * Gets the stored theme from localStorage or returns the default theme if no theme is stored.\n */\nfunction getStoredTheme(storageKey: string, defaultTheme: Theme = \"system\") {\n\tconst fallbackTheme = defaultTheme ?? \"system\";\n\tif (isBrowser()) {\n\t\tlet storedTheme: string | null = null;\n\t\ttry {\n\t\t\tstoredTheme =\n\t\t\t\t\"localStorage\" in window\n\t\t\t\t\t? window.localStorage.getItem(storageKey)\n\t\t\t\t\t: null;\n\t\t} catch (_) {}\n\t\treturn isTheme(storedTheme) ? storedTheme : fallbackTheme;\n\t}\n\treturn fallbackTheme;\n}\n\ntype ThemeProviderProps = PropsWithChildren & {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n};\n\n/**\n * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.\n */\nfunction ThemeProvider({\n\tchildren,\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n}: ThemeProviderProps) {\n\tconst [theme, setTheme] = useState<Theme>(() => {\n\t\tconst initialTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tapplyTheme(initialTheme);\n\t\treturn initialTheme;\n\t});\n\n\tuseEffect(() => {\n\t\tconst storedTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tsetTheme(storedTheme);\n\t\tapplyTheme(storedTheme);\n\t}, [defaultTheme, storageKey]);\n\n\tuseEffect(() => {\n\t\tconst prefersDarkMql = window.matchMedia(prefersDarkModeMediaQuery);\n\t\tconst prefersHighContrastMql = window.matchMedia(\n\t\t\tprefersHighContrastMediaQuery,\n\t\t);\n\n\t\tconst onChange = () => {\n\t\t\tconst storedTheme = getStoredTheme(storageKey, defaultTheme);\n\n\t\t\t// If the stored theme is not \"system\", then the user has explicitly set a theme and we should not\n\t\t\t// automatically change the theme when the user's system preferences change.\n\t\t\tif (storedTheme !== \"system\") {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tapplyTheme(\"system\");\n\t\t};\n\n\t\tprefersDarkMql.addEventListener(\"change\", onChange);\n\t\tprefersHighContrastMql.addEventListener(\"change\", onChange);\n\n\t\treturn () => {\n\t\t\tprefersDarkMql.removeEventListener(\"change\", onChange);\n\t\t\tprefersHighContrastMql.removeEventListener(\"change\", onChange);\n\t\t};\n\t}, [defaultTheme, storageKey]);\n\n\tconst value: ThemeProviderState = useMemo(\n\t\t() => [\n\t\t\ttheme,\n\t\t\t(theme: Theme) => {\n\t\t\t\ttry {\n\t\t\t\t\tif (\"localStorage\" in window) {\n\t\t\t\t\t\twindow.localStorage.setItem(storageKey, theme);\n\t\t\t\t\t}\n\t\t\t\t} catch (_) {}\n\t\t\t\tsetTheme(theme);\n\t\t\t\tapplyTheme(theme);\n\t\t\t},\n\t\t],\n\t\t[storageKey, theme],\n\t);\n\n\treturn (\n\t\t<ThemeProviderContext.Provider value={value}>\n\t\t\t{children}\n\t\t</ThemeProviderContext.Provider>\n\t);\n}\n\n/**\n * useTheme returns the current theme and a function to set the theme.\n *\n * @note This function will throw an error if used outside of a ThemeProvider context tree.\n */\nfunction useTheme() {\n\tconst context = useContext(ThemeProviderContext);\n\n\tinvariant(context, \"useTheme must be used within a ThemeProvider\");\n\n\treturn context;\n}\n\n/**\n * Applies the given theme to the `<html>` element.\n */\nfunction applyTheme(theme: Theme) {\n\tif (!isBrowser()) {\n\t\treturn;\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst prefersHighContrast = window.matchMedia(\n\t\tprefersHighContrastMediaQuery,\n\t).matches;\n\tconst newTheme = resolveTheme(theme, {\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t});\n\thtmlElement.classList.add(newTheme);\n\thtmlElement.dataset.appliedTheme = newTheme;\n\thtmlElement.dataset.theme = theme;\n}\n\n/**\n * Read the theme and applied theme from the `<html>` element.\n */\nfunction readThemeFromHtmlElement() {\n\tif (!isBrowser()) {\n\t\treturn {\n\t\t\tappliedTheme: undefined,\n\t\t\ttheme: undefined,\n\t\t};\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\tconst theme = isTheme(htmlElement.dataset.theme)\n\t\t? htmlElement.dataset.theme\n\t\t: undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme)\n\t\t? htmlElement.dataset.appliedTheme\n\t\t: undefined;\n\n\treturn {\n\t\tappliedTheme,\n\t\ttheme,\n\t};\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction resolveTheme(\n\ttheme: Theme,\n\t{\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t}: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({\n\t\t\tprefersDarkMode,\n\t\t\tprefersHighContrast,\n\t\t});\n\t}\n\n\treturn theme;\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction useAppliedTheme() {\n\tconst themeContext = useContext(ThemeProviderContext);\n\tconst theme = themeContext != null ? themeContext[0] : \"system\";\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(\n\t\tprefersHighContrastMediaQuery,\n\t);\n\n\treturn resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\n}\n\n/**\n * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.\n * @private\n */\nexport function determineThemeFromMediaQuery({\n\tprefersDarkMode,\n\tprefersHighContrast,\n}: {\n\tprefersDarkMode: boolean;\n\tprefersHighContrast: boolean;\n}): ResolvedTheme {\n\tif (prefersHighContrast) {\n\t\treturn prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t}\n\n\treturn prefersDarkMode ? \"dark\" : \"light\";\n}\n\nfunction preventWrongThemeFlashScriptContent({\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n}: {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n}) {\n\treturn `\n(function() {\n\tconst themes = ${JSON.stringify(themes)};\n\tconst isTheme = (value) => typeof value === \"string\" && themes.includes(value);\n\tconst fallbackTheme = \"${defaultTheme}\" ?? \"system\";\n\tlet maybeStoredTheme = null;\n\ttry {\n\t\tmaybeStoredTheme = \"localStorage\" in window ? window.localStorage.getItem(\"${storageKey}\") : null;\n\t} catch (_) {}\n\tconst hasStoredTheme = isTheme(maybeStoredTheme);\n\tif (!hasStoredTheme && \"localStorage\" in window) {\n\t\ttry {\n\t\t\twindow.localStorage.setItem(\"${storageKey}\", fallbackTheme);\n\t\t} catch (_) {}\n\t}\n\tconst themePreference = hasStoredTheme ? maybeStoredTheme : fallbackTheme;\n\tconst prefersDarkMode = window.matchMedia(\"${prefersDarkModeMediaQuery}\").matches;\n\tconst prefersHighContrast = window.matchMedia(\"${prefersHighContrastMediaQuery}\").matches;\n\tlet initialTheme = themePreference;\n\tif (initialTheme === \"system\") {\n\t\tif (prefersHighContrast) {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t} else {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark\" : \"light\";\n\t\t}\n\t}\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\thtmlElement.classList.add(initialTheme);\n\thtmlElement.dataset.appliedTheme = initialTheme;\n\thtmlElement.dataset.theme = themePreference;\n})();\n`.trim();\n}\n\ntype MantleThemeHeadContentProps = {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n} & ComponentProps<typeof PreloadFonts>;\n\n/**\n * MantleThemeHeadContent is a React component that prevents the wrong theme from flashing on initial page load.\n * Render as high as possible in the <head> element.\n */\nconst MantleThemeHeadContent = ({\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n\tincludeNunitoSans = false,\n}: MantleThemeHeadContentProps) => (\n\t<>\n\t\t<script\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t__html: preventWrongThemeFlashScriptContent({\n\t\t\t\t\tdefaultTheme,\n\t\t\t\t\tstorageKey,\n\t\t\t\t}),\n\t\t\t}}\n\t\t/>\n\t\t<PreloadFonts includeNunitoSans={includeNunitoSans} />\n\t</>\n);\n\ntype InitialThemeProps = {\n\tclassName: string;\n\t\"data-applied-theme\": Omit<Theme, \"system\">;\n\t\"data-theme\": Theme;\n};\n\n/**\n * useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.\n */\nfunction useInitialHtmlThemeProps(props?: {\n\tclassName?: string;\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n}): InitialThemeProps {\n\tconst {\n\t\tclassName = \"\",\n\t\tdefaultTheme = \"system\",\n\t\tstorageKey = DEFAULT_STORAGE_KEY,\n\t} = props ?? {};\n\n\treturn useMemo(() => {\n\t\tif (!isBrowser()) {\n\t\t\treturn {\n\t\t\t\tclassName: clsx(className),\n\t\t\t\t\"data-applied-theme\": \"system\",\n\t\t\t\t\"data-theme\": \"system\",\n\t\t\t};\n\t\t}\n\n\t\tconst prefersDarkMode = window.matchMedia(\n\t\t\tprefersDarkModeMediaQuery,\n\t\t).matches;\n\t\tconst prefersHighContrast = window.matchMedia(\n\t\t\tprefersHighContrastMediaQuery,\n\t\t).matches;\n\t\tconst initialTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tconst reolvedTheme = resolveTheme(initialTheme, {\n\t\t\tprefersDarkMode,\n\t\t\tprefersHighContrast,\n\t\t});\n\n\t\treturn {\n\t\t\tclassName: clsx(className, reolvedTheme),\n\t\t\t\"data-applied-theme\": reolvedTheme,\n\t\t\t\"data-theme\": initialTheme,\n\t\t};\n\t}, [className, defaultTheme, storageKey]);\n}\n\nexport {\n\t//,\n\t$resolvedTheme,\n\t$theme,\n\tapplyTheme,\n\tisResolvedTheme,\n\tisTheme,\n\tMantleThemeHeadContent,\n\tpreventWrongThemeFlashScriptContent,\n\treadThemeFromHtmlElement,\n\tresolvedThemes,\n\tThemeProvider,\n\tthemes,\n\tuseAppliedTheme,\n\tuseInitialHtmlThemeProps,\n\tuseTheme,\n};\n\nexport type {\n\t//,\n\tResolvedTheme,\n\tTheme,\n\tThemeProviderProps,\n};\n"],"mappings":"wCAiCC,mBAAAA,EACC,OAAAC,EADD,QAAAC,MAAA,oBAjCD,IAAMC,EAAY,2BACZC,EAAU,GAAGD,CAAS,SAEtBE,EAAQ,CACb,gDACA,sDACA,+CACA,iDACA,qDACA,uCACA,6CACA,2CACA,gDACD,EAIMC,EAAmCC,GACxC,GAAGH,CAAO,GAAGG,CAAI,GAcZC,EAAe,CAAC,CAAE,kBAAAC,EAAoB,EAAM,IACjDP,EAAAF,EAAA,CACC,UAAAC,EAAC,QAAK,IAAI,aAAa,KAAME,EAAW,EACvCE,EAAM,IAAKE,GACXN,EAAC,QAEA,IAAI,UACJ,KAAMK,EAASC,CAAI,EACnB,GAAG,OACH,KAAK,YACL,YAAY,aALPA,CAMN,CACA,EACAE,GAAqBR,EAACS,EAAA,EAAW,GACnC,EAQD,SAASC,GAAa,CACrB,OACCC,EAAAC,EAAA,CACC,UAAAC,EAAC,QAAK,IAAI,aAAa,KAAK,+BAA+B,EAC3DA,EAAC,QACA,IAAI,aACJ,KAAK,4BACL,YAAY,YACb,EACAA,EAAC,QACA,KAAK,uHACL,IAAI,aACL,GACD,CAEF,CCrEA,OAAOC,MAAU,OAEjB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,aAAAC,EAAW,WAAAC,EAAS,YAAAC,MAAgB,QACxE,OAAOC,MAAe,iBA0LpB,OAkLD,YAAAC,EAlLC,OAAAC,EAkLD,QAAAC,MAlLC,oBAnLF,IAAMC,EAA4B,+BAK5BC,EAAgC,2BAKhCC,EAAiB,CACtB,QACA,OACA,sBACA,oBACD,EAUMC,EAAS,CAAC,SAAU,GAAGD,CAAc,EAUrCE,EAAmCC,GAAaA,EAKtD,SAASC,EAAQD,EAAgC,CAChD,OAAI,OAAOA,GAAU,SACb,GAGDF,EAAO,SAASE,CAAc,CACtC,CAKA,IAAME,EAA2DF,GAChEA,EAKD,SAASG,EAAgBH,EAAwC,CAChE,OAAI,OAAOA,GAAU,SACb,GAGDH,EAAe,SAASG,CAAsB,CACtD,CAKA,IAAMI,EAAsB,kBAUtBC,EAAmC,CAAC,SAAU,IAAM,IAAI,EAKxDC,EAAuBC,EAC5BF,CACD,EAKMG,EAAY,IAAM,OAAO,OAAW,IAK1C,SAASC,EAAeC,EAAoBC,EAAsB,SAAU,CAC3E,IAAMC,EAAgBD,GAAgB,SACtC,GAAIH,EAAU,EAAG,CAChB,IAAIK,EAA6B,KACjC,GAAI,CACHA,EACC,iBAAkB,OACf,OAAO,aAAa,QAAQH,CAAU,EACtC,IACL,MAAY,CAAC,CACb,OAAOT,EAAQY,CAAW,EAAIA,EAAcD,CAC7C,CACA,OAAOA,CACR,CAUA,SAASE,GAAc,CACtB,SAAAC,EACA,aAAAJ,EAAe,SACf,WAAAD,EAAaN,CACd,EAAuB,CACtB,GAAM,CAACY,EAAOC,CAAQ,EAAIC,EAAgB,IAAM,CAC/C,IAAMC,EAAeV,EAAeC,EAAYC,CAAY,EAC5D,OAAAS,EAAWD,CAAY,EAChBA,CACR,CAAC,EAEDE,EAAU,IAAM,CACf,IAAMR,EAAcJ,EAAeC,EAAYC,CAAY,EAC3DM,EAASJ,CAAW,EACpBO,EAAWP,CAAW,CACvB,EAAG,CAACF,EAAcD,CAAU,CAAC,EAE7BW,EAAU,IAAM,CACf,IAAMC,EAAiB,OAAO,WAAW3B,CAAyB,EAC5D4B,EAAyB,OAAO,WACrC3B,CACD,EAEM4B,EAAW,IAAM,CACFf,EAAeC,EAAYC,CAAY,IAIvC,UAIpBS,EAAW,QAAQ,CACpB,EAEA,OAAAE,EAAe,iBAAiB,SAAUE,CAAQ,EAClDD,EAAuB,iBAAiB,SAAUC,CAAQ,EAEnD,IAAM,CACZF,EAAe,oBAAoB,SAAUE,CAAQ,EACrDD,EAAuB,oBAAoB,SAAUC,CAAQ,CAC9D,CACD,EAAG,CAACb,EAAcD,CAAU,CAAC,EAE7B,IAAMV,EAA4ByB,EACjC,IAAM,CACLT,EACCA,GAAiB,CACjB,GAAI,CACC,iBAAkB,QACrB,OAAO,aAAa,QAAQN,EAAYM,CAAK,CAE/C,MAAY,CAAC,CACbC,EAASD,CAAK,EACdI,EAAWJ,CAAK,CACjB,CACD,EACA,CAACN,EAAYM,CAAK,CACnB,EAEA,OACCvB,EAACa,EAAqB,SAArB,CAA8B,MAAON,EACpC,SAAAe,EACF,CAEF,CAOA,SAASW,IAAW,CACnB,IAAMC,EAAUC,EAAWtB,CAAoB,EAE/C,OAAAuB,EAAUF,EAAS,8CAA8C,EAE1DA,CACR,CAKA,SAASP,EAAWJ,EAAc,CACjC,GAAI,CAACR,EAAU,EACd,OAGD,IAAMsB,EAAc,OAAO,SAAS,gBACpCA,EAAY,UAAU,OAAO,GAAGhC,CAAM,EACtC,IAAMiC,EAAkB,OAAO,WAAWpC,CAAyB,EAAE,QAC/DqC,EAAsB,OAAO,WAClCpC,CACD,EAAE,QACIqC,EAAWC,EAAalB,EAAO,CACpC,gBAAAe,EACA,oBAAAC,CACD,CAAC,EACDF,EAAY,UAAU,IAAIG,CAAQ,EAClCH,EAAY,QAAQ,aAAeG,EACnCH,EAAY,QAAQ,MAAQd,CAC7B,CAKA,SAASmB,IAA2B,CACnC,GAAI,CAAC3B,EAAU,EACd,MAAO,CACN,aAAc,OACd,MAAO,MACR,EAGD,IAAMsB,EAAc,OAAO,SAAS,gBAC9Bd,EAAQf,EAAQ6B,EAAY,QAAQ,KAAK,EAC5CA,EAAY,QAAQ,MACpB,OAKH,MAAO,CACN,aALoB3B,EAAgB2B,EAAY,QAAQ,YAAY,EAClEA,EAAY,QAAQ,aACpB,OAIF,MAAAd,CACD,CACD,CAMA,SAASkB,EACRlB,EACA,CACC,gBAAAe,EACA,oBAAAC,CACD,EACC,CACD,OAAIhB,IAAU,SACNoB,EAA6B,CACnC,gBAAAL,EACA,oBAAAC,CACD,CAAC,EAGKhB,CACR,CAMA,SAASqB,IAAkB,CAC1B,IAAMC,EAAeV,EAAWtB,CAAoB,EAC9CU,EAAQsB,GAAgB,KAAOA,EAAa,CAAC,EAAI,SAEjDP,EAAkBQ,EAAqB5C,CAAyB,EAChEqC,EAAsBO,EAC3B3C,CACD,EAEA,OAAOsC,EAAalB,EAAO,CAAE,gBAAAe,EAAiB,oBAAAC,CAAoB,CAAC,CACpE,CAMO,SAASI,EAA6B,CAC5C,gBAAAL,EACA,oBAAAC,CACD,EAGkB,CACjB,OAAIA,EACID,EAAkB,qBAAuB,sBAG1CA,EAAkB,OAAS,OACnC,CAEA,SAASS,EAAoC,CAC5C,aAAA7B,EAAe,SACf,WAAAD,EAAaN,CACd,EAGG,CACF,MAAO;AAAA;AAAA,kBAEU,KAAK,UAAUN,CAAM,CAAC;AAAA;AAAA,0BAEda,CAAY;AAAA;AAAA;AAAA,+EAGyCD,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA,kCAKvDA,CAAU;AAAA;AAAA;AAAA;AAAA,8CAIEf,CAAyB;AAAA,kDACrBC,CAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAe7E,KAAK,CACP,CAWA,IAAM6C,GAAyB,CAAC,CAC/B,aAAA9B,EAAe,SACf,WAAAD,EAAaN,EACb,kBAAAsC,EAAoB,EACrB,IACChD,EAAAF,EAAA,CACC,UAAAC,EAAC,UACA,wBAAyB,CACxB,OAAQ+C,EAAoC,CAC3C,aAAA7B,EACA,WAAAD,CACD,CAAC,CACF,EACD,EACAjB,EAACkD,EAAA,CAAa,kBAAmBD,EAAmB,GACrD,EAYD,SAASE,GAAyBC,EAIZ,CACrB,GAAM,CACL,UAAAC,EAAY,GACZ,aAAAnC,EAAe,SACf,WAAAD,EAAaN,CACd,EAAIyC,GAAS,CAAC,EAEd,OAAOpB,EAAQ,IAAM,CACpB,GAAI,CAACjB,EAAU,EACd,MAAO,CACN,UAAWuC,EAAKD,CAAS,EACzB,qBAAsB,SACtB,aAAc,QACf,EAGD,IAAMf,EAAkB,OAAO,WAC9BpC,CACD,EAAE,QACIqC,EAAsB,OAAO,WAClCpC,CACD,EAAE,QACIuB,EAAeV,EAAeC,EAAYC,CAAY,EACtDqC,EAAed,EAAaf,EAAc,CAC/C,gBAAAY,EACA,oBAAAC,CACD,CAAC,EAED,MAAO,CACN,UAAWe,EAAKD,EAAWE,CAAY,EACvC,qBAAsBA,EACtB,aAAc7B,CACf,CACD,EAAG,CAAC2B,EAAWnC,EAAcD,CAAU,CAAC,CACzC","names":["Fragment","jsx","jsxs","cdnOrigin","cdnBase","fonts","fontHref","font","PreloadFonts","includeNunitoSans","NunitoSans","NunitoSans","jsxs","Fragment","jsx","clsx","createContext","useContext","useEffect","useMemo","useState","invariant","Fragment","jsx","jsxs","prefersDarkModeMediaQuery","prefersHighContrastMediaQuery","resolvedThemes","themes","$theme","value","isTheme","$resolvedTheme","isResolvedTheme","DEFAULT_STORAGE_KEY","initialState","ThemeProviderContext","createContext","isBrowser","getStoredTheme","storageKey","defaultTheme","fallbackTheme","storedTheme","ThemeProvider","children","theme","setTheme","useState","initialTheme","applyTheme","useEffect","prefersDarkMql","prefersHighContrastMql","onChange","useMemo","useTheme","context","useContext","invariant","htmlElement","prefersDarkMode","prefersHighContrast","newTheme","resolveTheme","readThemeFromHtmlElement","determineThemeFromMediaQuery","useAppliedTheme","themeContext","useMatchesMediaQuery","preventWrongThemeFlashScriptContent","MantleThemeHeadContent","includeNunitoSans","PreloadFonts","useInitialHtmlThemeProps","props","className","clsx","reolvedTheme"]}
|
package/dist/data-table.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { Table
|
|
1
|
+
import { Table, HeaderContext, Row } from '@tanstack/react-table';
|
|
2
2
|
export * from '@tanstack/react-table';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ComponentProps, ReactNode } from 'react';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
6
|
import { k as SortingMode } from './direction-veAOo2is.js';
|
|
7
7
|
import { B as Button } from './button-C8eGiHOm.js';
|
|
8
|
-
import {
|
|
8
|
+
import { TableRoot, TableCell, TableRow, TableHead, TableHeader } from './table.js';
|
|
9
9
|
import './deep-non-nullable-SmpSvoSd.js';
|
|
10
10
|
import 'class-variance-authority';
|
|
11
11
|
import 'class-variance-authority/types';
|
|
@@ -14,8 +14,8 @@ import './variant-props-oDo2u-We.js';
|
|
|
14
14
|
declare const sortDirections: readonly ["asc", "desc", "unsorted"];
|
|
15
15
|
type SortDirection = (typeof sortDirections)[number];
|
|
16
16
|
|
|
17
|
-
type DataTableProps<TData> = ComponentProps<typeof
|
|
18
|
-
table: Table
|
|
17
|
+
type DataTableProps<TData> = ComponentProps<typeof TableRoot> & {
|
|
18
|
+
table: Table<TData>;
|
|
19
19
|
};
|
|
20
20
|
declare function DataTable<TData>({ children, table, ...props }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
21
21
|
type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, "icon"> & Pick<HeaderContext<TData, TValue>, "column"> & ({
|
package/dist/data-table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as g,b as S,c as C,
|
|
1
|
+
import{a as g,b as S,c as x,d as C,f as c,g as d,h as T}from"./chunk-EG5SROPQ.js";import{a as y}from"./chunk-PLUW72NW.js";import{m as f}from"./chunk-GYPSB3OK.js";import"./chunk-MF2QITTY.js";import{b as m}from"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as s}from"./chunk-AZ56JGNY.js";export*from"@tanstack/react-table";import{flexRender as R}from"@tanstack/react-table";import{Fragment as h,createContext as M,useContext as j,useMemo as E}from"react";import F from"tiny-invariant";var O=["unsorted","asc","desc"],V=["unsorted","desc","asc"];function P(t,a){return A(a==="alphanumeric"?O:V,t)??"unsorted"}function A(t,a,e){if(t.length===0)return e;let n=t.findIndex(r=>r===a);if(n===-1)return e;let l=(n+1)%t.length;return t.at(l)??e}import{Fragment as W,jsx as o,jsxs as w}from"react/jsx-runtime";var H=M(null);function u(){let t=j(H);return F(t,"useDataTableContext should only be used within a DataTable child component"),t}function z({children:t,table:a,...e}){let n=E(()=>({table:a}),[a]);return o(H.Provider,{value:n,children:o(g,{...e,children:o(S,{children:t})})})}function L({children:t,className:a,column:e,disableSorting:n=!1,iconPlacement:l="end",sortingMode:r,sortIcon:B,onClick:v,..._}){let D=e.getIsSorted(),p=!n&&e.getCanSort(),i=p&&typeof D=="string"?D:"unsorted",k=B?.(i)??o(Q,{mode:r,direction:i});return w(m,{appearance:"ghost",className:s("flex justify-start w-full h-full rounded-none",a),"data-sort-direction":i,"data-table-header-action":!0,icon:k,iconPlacement:l,onClick:b=>{v?.(b),!b.defaultPrevented&&(!p||n||typeof r>"u"||U(e,r))},priority:"neutral",type:"button",..._,children:[p&&i!=="unsorted"&&w("span",{className:"sr-only",children:["Column sorted in"," ",r==="alphanumeric"?i==="asc"?"ascending":"descending":f(i)," ","order"]}),t]})}function $({children:t,className:a,...e}){return o(d,{className:s("has-[[data-table-header-action]]:px-0",a),...e,children:t})}var I=C;I.displayName="DataTableBody";function q(t){let{table:a}=u();return o(x,{...t,children:a.getHeaderGroups().map(e=>o(c,{children:e.headers.map(n=>o(h,{children:n.isPlaceholder?o(d,{},n.id):R(n.column.columnDef.header,n.getContext())},n.id))},e.id))})}function G(){let{table:t}=u(),a=t.getRowModel().rows;return o(W,{children:a.map(e=>o(N,{row:e},e.id))})}function N({row:t,...a}){return o(c,{...a,children:t.getVisibleCells().map(e=>o(h,{children:R(e.column.columnDef.cell,e.getContext())},e.id))})}function J({children:t,...a}){let{table:e}=u(),n=e.getAllColumns().length;return o(c,{...a,children:o(T,{colSpan:n,children:t})})}function K({children:t,className:a,...e}){return o(T,{className:s("sticky z-10 right-0 top-px -bottom-px group-data-[sticky-active]/table:[box-shadow:inset_10px_0_8px_-8px_hsl(0deg_0%_0%_/_15%)]",a),...e,children:o("div",{className:"flex justify-end",children:t})})}function Q({direction:t,mode:a,...e}){return t==="unsorted"||!a||!t?o("svg",{"aria-hidden":!0,...e}):o(y,{mode:a,direction:t,...e})}function U(t,a){if(!t.getCanSort())return;let e=t.getIsSorted();switch(P(typeof e=="string"?e:"unsorted",a)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}export{z as DataTable,K as DataTableActionCell,I as DataTableBody,J as DataTableEmptyRow,q as DataTableHead,$ as DataTableHeader,L as DataTableHeaderSortButton,N as DataTableRow,G as DataTableRows};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|
package/dist/data-table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-table/index.ts","../src/components/data-table/data-table.tsx","../src/components/data-table/helpers.ts"],"sourcesContent":["export * from \"@tanstack/react-table\";\n\nexport {\n\t//,\n\tDataTable,\n\tDataTableActionCell,\n\tDataTableBody,\n\tDataTableEmptyRow,\n\tDataTableHead,\n\tDataTableHeader,\n\tDataTableHeaderSortButton,\n\tDataTableRow,\n\tDataTableRows,\n} from \"./data-table.js\";\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Row,\n\ttype Table as TableInstance,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tFragment,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\t$timeSortingDirection,\n\ttype SortingMode,\n\tsortingDirections as baseSortingDirections,\n} from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Sort } from \"../icons/sort.js\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(\n\t\tcontext,\n\t\t\"useDataTableContext should only be used within a DataTable child component\",\n\t);\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof Table> & {\n\ttable: TableInstance<TData>;\n};\n\nfunction DataTable<TData>({\n\tchildren,\n\ttable,\n\t...props\n}: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(\n\t\t() => ({ table }),\n\t\t[table],\n\t);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<Table {...props}>{children}</Table>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<\n\tComponentProps<typeof Button>,\n\t\"icon\"\n> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table.\n * If the column is sortable, clicking the button will toggle the sorting\n * direction.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n * unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n * unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n * this is equivalent to the inverse of alphanumeric sorting, or\n * unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction DataTableHeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst _sortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tclassName={cx(\"flex justify-start w-full h-full rounded-none\", className)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof TableHeader>;\n\n/**\n * A header for a data table.\n * This is typically used to wrap the `DataTableHeaderSortButton` component.\n */\nfunction DataTableHeader<TData, TValue>({\n\tchildren,\n\tclassName,\n\t...props\n}: DataTableHeaderProps) {\n\treturn (\n\t\t<TableHeader\n\t\t\tclassName={cx(\"has-[[data-table-header-action]]:px-0\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</TableHeader>\n\t);\n}\n\nconst DataTableBody = TableBody;\nDataTableBody.displayName = \"DataTableBody\";\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof TableHead>, \"children\">;\n\nfunction DataTableHead<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<TableHead {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={header.id}>\n\t\t\t\t\t\t\t{header.isPlaceholder ? (\n\t\t\t\t\t\t\t\t<TableHeader key={header.id} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</TableRow>\n\t\t\t))}\n\t\t</TableHead>\n\t);\n}\n\nfunction DataTableRows<TData>() {\n\tconst { table } = useDataTableContext<TData>();\n\tconst rows = table.getRowModel().rows;\n\n\treturn (\n\t\t<>\n\t\t\t{rows.map((row) => (\n\t\t\t\t<DataTableRow key={row.id} row={row} />\n\t\t\t))}\n\t\t</>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<\n\tComponentProps<typeof TableRow>,\n\t\"children\"\n> & {\n\trow: Row<TData>;\n};\n\nfunction DataTableRow<TData>({ row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<TableRow {...props}>\n\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</TableRow>\n\t);\n}\n\ntype DataTableEmptyRowProps = ComponentProps<typeof TableRow>;\n\nfunction DataTableEmptyRow<TData>({\n\tchildren,\n\t...props\n}: DataTableEmptyRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<TableRow {...props}>\n\t\t\t<TableCell colSpan={numberOfColumns}>{children}</TableCell>\n\t\t</TableRow>\n\t);\n}\n\ntype DataTableActionCellProps = ComponentProps<typeof TableCell>;\n\nfunction DataTableActionCell({\n\tchildren,\n\tclassName,\n\t...props\n}: DataTableActionCellProps) {\n\treturn (\n\t\t<TableCell\n\t\t\tclassName={cx(\n\t\t\t\t\"sticky z-10 right-0 top-px -bottom-px group-data-[sticky-active]/table:[box-shadow:inset_10px_0_8px_-8px_hsl(0deg_0%_0%_/_15%)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex justify-end\">{children}</div>\n\t\t</TableCell>\n\t);\n}\n\nexport {\n\t//,\n\tDataTable,\n\tDataTableActionCell,\n\tDataTableBody,\n\tDataTableEmptyRow,\n\tDataTableHead,\n\tDataTableHeader,\n\tDataTableHeaderSortButton,\n\tDataTableRow,\n\tDataTableRows,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <Sort mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n * unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n * unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n * this is equivalent to the inverse of alphanumeric sorting, or\n * unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(\n\t\tcurrentSortDirection,\n\t\tsortingMode,\n\t);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n","import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\n\t\"unsorted\",\n\t\"asc\",\n\t\"desc\",\n] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\n\t\"unsorted\",\n\t\"desc\",\n\t\"asc\",\n] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(\n\tcurrentSortDirection: SortDirection,\n\tsortingMode: SortingMode,\n) {\n\tconst sortOrder =\n\t\tsortingMode === \"alphanumeric\"\n\t\t\t? alphanumericSortingOrder\n\t\t\t: timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(\n\tlist: T[],\n\tcurrentItem: T,\n\tfallback?: T | undefined,\n) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n"],"mappings":"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","names":["flexRender","Fragment","createContext","useContext","useMemo","invariant","alphanumericSortingOrder","timeSortingOrder","getNextSortDirection","currentSortDirection","sortingMode","getNextInCircularList","list","currentItem","fallback","currentItemIndex","item","nextIndex","Fragment","jsx","jsxs","DataTableContext","createContext","useDataTableContext","context","useContext","invariant","DataTable","children","table","props","useMemo","Table","DataTableHeaderSortButton","className","column","disableSorting","iconPlacement","sortingMode","propSortIcon","onClick","_sortDirection","canSort","sortDirection","sortIcon","DefaultSortIcon","Button","cx","event","toggleNextSortingDirection","$timeSortingDirection","DataTableHeader","TableHeader","DataTableBody","TableBody","DataTableHead","TableHead","headerGroup","TableRow","header","flexRender","DataTableRows","rows","row","DataTableRow","cell","DataTableEmptyRow","numberOfColumns","TableCell","DataTableActionCell","DefaultSortIcon","direction","mode","props","jsx","Sort","toggleNextSortingDirection","column","sortingMode","sortDirection","getNextSortDirection"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/data-table/index.ts","../src/components/data-table/data-table.tsx","../src/components/data-table/helpers.ts"],"sourcesContent":["export * from \"@tanstack/react-table\";\n\nexport {\n\t//,\n\tDataTable,\n\tDataTableActionCell,\n\tDataTableBody,\n\tDataTableEmptyRow,\n\tDataTableHead,\n\tDataTableHeader,\n\tDataTableHeaderSortButton,\n\tDataTableRow,\n\tDataTableRows,\n} from \"./data-table.js\";\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Row,\n\ttype Table as TableInstance,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\tFragment,\n\ttype ReactNode,\n\tcreateContext,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\t$timeSortingDirection,\n\ttype SortingMode,\n} from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Sort } from \"../icons/sort.js\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRoot,\n\tTableRow,\n} from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(\n\t\tcontext,\n\t\t\"useDataTableContext should only be used within a DataTable child component\",\n\t);\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof TableRoot> & {\n\ttable: TableInstance<TData>;\n};\n\nfunction DataTable<TData>({\n\tchildren,\n\ttable,\n\t...props\n}: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(\n\t\t() => ({ table }),\n\t\t[table],\n\t);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<TableRoot {...props}>\n\t\t\t\t<Table>{children}</Table>\n\t\t\t</TableRoot>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<\n\tComponentProps<typeof Button>,\n\t\"icon\"\n> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table.\n * If the column is sortable, clicking the button will toggle the sorting\n * direction.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n * unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n * unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n * this is equivalent to the inverse of alphanumeric sorting, or\n * unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction DataTableHeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst _sortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tclassName={cx(\"flex justify-start w-full h-full rounded-none\", className)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof TableHeader>;\n\n/**\n * A header for a data table.\n * This is typically used to wrap the `DataTableHeaderSortButton` component.\n */\nfunction DataTableHeader<TData, TValue>({\n\tchildren,\n\tclassName,\n\t...props\n}: DataTableHeaderProps) {\n\treturn (\n\t\t<TableHeader\n\t\t\tclassName={cx(\"has-[[data-table-header-action]]:px-0\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</TableHeader>\n\t);\n}\n\nconst DataTableBody = TableBody;\nDataTableBody.displayName = \"DataTableBody\";\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof TableHead>, \"children\">;\n\nfunction DataTableHead<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<TableHead {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={header.id}>\n\t\t\t\t\t\t\t{header.isPlaceholder ? (\n\t\t\t\t\t\t\t\t<TableHeader key={header.id} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</TableRow>\n\t\t\t))}\n\t\t</TableHead>\n\t);\n}\n\nfunction DataTableRows<TData>() {\n\tconst { table } = useDataTableContext<TData>();\n\tconst rows = table.getRowModel().rows;\n\n\treturn (\n\t\t<>\n\t\t\t{rows.map((row) => (\n\t\t\t\t<DataTableRow key={row.id} row={row} />\n\t\t\t))}\n\t\t</>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<\n\tComponentProps<typeof TableRow>,\n\t\"children\"\n> & {\n\trow: Row<TData>;\n};\n\nfunction DataTableRow<TData>({ row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<TableRow {...props}>\n\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</TableRow>\n\t);\n}\n\ntype DataTableEmptyRowProps = ComponentProps<typeof TableRow>;\n\nfunction DataTableEmptyRow<TData>({\n\tchildren,\n\t...props\n}: DataTableEmptyRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<TableRow {...props}>\n\t\t\t<TableCell colSpan={numberOfColumns}>{children}</TableCell>\n\t\t</TableRow>\n\t);\n}\n\ntype DataTableActionCellProps = ComponentProps<typeof TableCell>;\n\nfunction DataTableActionCell({\n\tchildren,\n\tclassName,\n\t...props\n}: DataTableActionCellProps) {\n\treturn (\n\t\t<TableCell\n\t\t\tclassName={cx(\n\t\t\t\t\"sticky z-10 right-0 top-px -bottom-px group-data-[sticky-active]/table:[box-shadow:inset_10px_0_8px_-8px_hsl(0deg_0%_0%_/_15%)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex justify-end\">{children}</div>\n\t\t</TableCell>\n\t);\n}\n\nexport {\n\t//,\n\tDataTable,\n\tDataTableActionCell,\n\tDataTableBody,\n\tDataTableEmptyRow,\n\tDataTableHead,\n\tDataTableHeader,\n\tDataTableHeaderSortButton,\n\tDataTableRow,\n\tDataTableRows,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <Sort mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n * unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n * unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n * this is equivalent to the inverse of alphanumeric sorting, or\n * unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(\n\t\tcurrentSortDirection,\n\t\tsortingMode,\n\t);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n","import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\n\t\"unsorted\",\n\t\"asc\",\n\t\"desc\",\n] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\n\t\"unsorted\",\n\t\"desc\",\n\t\"asc\",\n] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(\n\tcurrentSortDirection: SortDirection,\n\tsortingMode: SortingMode,\n) {\n\tconst sortOrder =\n\t\tsortingMode === \"alphanumeric\"\n\t\t\t? alphanumericSortingOrder\n\t\t\t: timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(\n\tlist: T[],\n\tcurrentItem: T,\n\tfallback?: T | undefined,\n) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n"],"mappings":"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","names":["flexRender","Fragment","createContext","useContext","useMemo","invariant","alphanumericSortingOrder","timeSortingOrder","getNextSortDirection","currentSortDirection","sortingMode","getNextInCircularList","list","currentItem","fallback","currentItemIndex","item","nextIndex","Fragment","jsx","jsxs","DataTableContext","createContext","useDataTableContext","context","useContext","invariant","DataTable","children","table","props","useMemo","TableRoot","Table","DataTableHeaderSortButton","className","column","disableSorting","iconPlacement","sortingMode","propSortIcon","onClick","_sortDirection","canSort","sortDirection","sortIcon","DefaultSortIcon","Button","cx","event","toggleNextSortingDirection","$timeSortingDirection","DataTableHeader","TableHeader","DataTableBody","TableBody","DataTableHead","TableHead","headerGroup","TableRow","header","flexRender","DataTableRows","rows","row","DataTableRow","cell","DataTableEmptyRow","numberOfColumns","TableCell","DataTableActionCell","DefaultSortIcon","direction","mode","props","jsx","Sort","toggleNextSortingDirection","column","sortingMode","sortDirection","getNextSortDirection"]}
|
package/dist/dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as P,b as v,c as u,d as m,e as p,f as d,g,h as D}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-
|
|
1
|
+
import{a as P,b as v,c as u,d as m,e as p,f as d,g,h as D}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-UBD43AUE.js";import"./chunk-XN5RN6JW.js";import"./chunk-D3XF6J5A.js";import{a as y}from"./chunk-XBVAQ3DV.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a}from"./chunk-AZ56JGNY.js";import{X as O}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as F}from"react/jsx-runtime";var T=P,W=v,C=u,z=m,f=r(({className:o,...t},i)=>e(p,{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-sm",o),...t}));f.displayName=p.displayName;var x=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:n,preferredWidth:s="max-w-lg",...B},I)=>F(C,{children:[e(f,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(d,{className:a("flex max-h-full w-full flex-1 flex-col","outline-none focus-within:outline-none","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:l=>{c(l),i?.(l)},onPointerDownOutside:l=>{c(l),n?.(l)},ref:I,...B,children:o})})]}));x.displayName=d.displayName;var N=({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});N.displayName="DialogHeader";var k=({size:o="md",type:t="button",label:i="Close Dialog",appearance:n="ghost",...s})=>e(m,{asChild:!0,children:e(y,{appearance:n,icon:e(O,{}),label:i,size:o,type:t,...s})}),b=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});b.displayName="DialogBody";var h=({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});h.displayName="DialogFooter";var R=r(({className:o,...t},i)=>e(g,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));R.displayName=g.displayName;var w=r(({className:o,...t},i)=>e(D,{ref:i,className:a("text-muted",o),...t}));w.displayName=D.displayName;export{T as Dialog,b as DialogBody,z as DialogClose,k as DialogCloseIconButton,x as DialogContent,w as DialogDescription,h as DialogFooter,N as DialogHeader,f as DialogOverlay,C as DialogPortal,R as DialogTitle,W as DialogTrigger};
|
|
2
2
|
//# sourceMappingURL=dialog.js.map
|
package/dist/icons.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as o}from"./chunk-GOXG4BVJ.js";import{a as r}from"./chunk-
|
|
1
|
+
import{a as o}from"./chunk-GOXG4BVJ.js";import{a as r}from"./chunk-PLUW72NW.js";import"./chunk-GYPSB3OK.js";export{r as Sort,o as TrafficPolicyFile};
|
|
2
2
|
//# sourceMappingURL=icons.js.map
|
package/dist/sheet.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as S,b as u,c as v,d as m,e as p,f as d,g as h,h as f}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-
|
|
1
|
+
import{a as S,b as u,c as v,d as m,e as p,f as d,g as h,h as f}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-UBD43AUE.js";import"./chunk-XN5RN6JW.js";import"./chunk-D3XF6J5A.js";import{a as P}from"./chunk-XBVAQ3DV.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as r}from"./chunk-AZ56JGNY.js";import{X as D}from"@phosphor-icons/react/X";import{cva as L}from"class-variance-authority";import{forwardRef as n}from"react";import{jsx as i,jsxs as k}from"react/jsx-runtime";var M=S,w=u,A=m,B=v,y=n(({className:e,...t},o)=>i(p,{className:r("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-40 backdrop-blur-sm",e),...t,ref:o}));y.displayName=p.displayName;var I=L("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-none transition ease-in-out focus-within:outline-none data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),C=n(({children:e,className:t,onInteractOutside:o,onPointerDownOutside:a,preferredWidth:l="sm:max-w-[30rem]",side:N="right",...R},H)=>k(B,{children:[i(y,{}),i(d,{className:r(I({side:N}),l,t),onInteractOutside:s=>{c(s),o?.(s)},onPointerDownOutside:s=>{c(s),a?.(s)},ref:H,...R,children:e})]}));C.displayName=d.displayName;var O=({size:e="md",type:t="button",label:o="Close Sheet",appearance:a="ghost",...l})=>i(m,{asChild:!0,children:i(P,{appearance:a,icon:i(D,{}),label:o,size:e,type:t,...l})}),W=({className:e,...t})=>i("div",{className:r("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t}),E=({className:e,...t})=>i("div",{className:r("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t}),V=({className:e,...t})=>i("div",{className:r("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t}),g=n(({className:e,...t},o)=>i(h,{ref:o,className:r("text-strong flex-1 truncate text-lg font-medium",e),...t}));g.displayName=h.displayName;var b=n(({children:e,className:t,...o},a)=>i("div",{className:r("flex items-center justify-between gap-2",t),...o,ref:a,children:e}));b.displayName="SheetTitleGroup";var T=n(({className:e,...t},o)=>i(f,{ref:o,className:r("text-body text-sm",e),...t}));T.displayName=f.displayName;var x=n(({children:e,className:t,...o},a)=>i("div",{className:r("flex h-full items-center gap-2",t),...o,ref:a,children:e}));x.displayName="SheetActions";export{M as Sheet,x as SheetActions,W as SheetBody,A as SheetClose,O as SheetCloseIconButton,C as SheetContent,T as SheetDescription,V as SheetFooter,E as SheetHeader,g as SheetTitle,b as SheetTitleGroup,w as SheetTrigger};
|
|
2
2
|
//# sourceMappingURL=sheet.js.map
|