@ngrok/mantle 0.1.38 → 0.1.40

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.
@@ -3,6 +3,14 @@ import { ComponentProps } from 'react';
3
3
  import { DayPicker } from 'react-day-picker';
4
4
 
5
5
  type CalendarProps = ComponentProps<typeof DayPicker>;
6
+ /**
7
+ * A calendar component that allows users to select a date or a range of dates.
8
+ *
9
+ * @preview This component is in `preview` mode which means the API is not stable and may change.
10
+ * There may also be bugs! Please file an issue if you find any! <3
11
+ *
12
+ * https://github.com/ngrok-oss/mantle/issues
13
+ */
6
14
  declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
7
15
  declare namespace Calendar {
8
16
  var displayName: string;
@@ -1 +1 @@
1
- {"version":3,"sources":["../packages/calendar/src/calendar.tsx"],"sourcesContent":["import { CaretLeft } from \"@phosphor-icons/react/dist/icons/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/dist/icons/CaretRight\";\nimport type { ComponentProps } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { buttonVariants } from \"../../button/src/button\";\nimport { cx } from \"../../cx\";\n\ntype CalendarProps = ComponentProps<typeof DayPicker>;\n\nfunction Calendar({ className, classNames, showOutsideDays = false, ...props }: CalendarProps) {\n\treturn (\n\t\t<DayPicker\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\tclassName={cx(\"\", className)}\n\t\t\tclassNames={{\n\t\t\t\tmonths: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n\t\t\t\tmonth: \"space-y-4\",\n\t\t\t\tcaption: \"flex justify-center pt-1 relative items-center\",\n\t\t\t\tcaption_label: \"text-sm font-medium\",\n\t\t\t\tnav: \"flex items-center\",\n\t\t\t\tnav_button: cx(buttonVariants({ appearance: \"ghost\", priority: \"neutral\" }), \"sm:h-7 sm:w-7 h-7 w-7\"),\n\t\t\t\tnav_button_previous: \"absolute left-0\",\n\t\t\t\tnav_button_next: \"absolute right-0\",\n\t\t\t\ttable: \"w-full border-collapse space-y-1\",\n\t\t\t\thead_row: \"flex\",\n\t\t\t\thead_cell: \"text-body w-7 text-[0.8rem] text-center font-normal\",\n\t\t\t\trow: \"flex w-full mt-1\",\n\t\t\t\tcell: cx(\n\t\t\t\t\t\"overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 sm:h-7 sm:w-7 h-7 w-7 \",\n\t\t\t\t\tprops.mode === \"range\"\n\t\t\t\t\t\t? \"first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n\t\t\t\t\t\t: \"\",\n\t\t\t\t),\n\t\t\t\tday: \"day size-full rounded-md [&:not([aria-selected],_[disabled])]:hover:bg-filled-accent/15\",\n\t\t\t\tday_range_start: \"day-range-start [&:not(.day-range-end)]:rounded-r-none\",\n\t\t\t\tday_range_end: \"day-range-end [&:not(.day-range-start)]:rounded-l-none\",\n\t\t\t\tday_selected: \"[&:not([disabled])]:bg-filled-accent text-on-filled [&:not([disabled])]:hover:bg-filled-accent\",\n\t\t\t\tday_today:\n\t\t\t\t\t\"[&:not([aria-selected],_[disabled])]:text-accent-600 font-medium [&:not([aria-selected],_[disabled])]:bg-filled-accent/10\",\n\t\t\t\tday_outside: \"day-outside aria-selected:text-on-filled opacity-50 text-muted\",\n\t\t\t\tday_disabled: \"text-muted opacity-50\",\n\t\t\t\tday_range_middle:\n\t\t\t\t\t\"day-range-middle [&:not([disabled])]:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none [&:not([disabled])]:aria-selected:hover:bg-filled-accent/25\",\n\t\t\t\tday_hidden: \"invisible\",\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tcomponents={{\n\t\t\t\tIconLeft: () => <CaretLeft className=\"h-4 w-4 shrink-0\" weight=\"bold\" />,\n\t\t\t\tIconRight: () => <CaretRight className=\"h-4 w-4 shrink-0\" weight=\"bold\" />,\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCalendar.displayName = \"Calendar\";\n\nexport { Calendar };\n\nexport type { CalendarProps };\n"],"mappings":"oKAAA,OAAS,aAAAA,MAAiB,6CAC1B,OAAS,cAAAC,MAAkB,8CAE3B,OAAS,aAAAC,MAAiB,mBA4CN,cAAAC,MAAA,oBAtCpB,SAASC,EAAS,CAAE,UAAAC,EAAW,WAAAC,EAAY,gBAAAC,EAAkB,GAAO,GAAGC,CAAM,EAAkB,CAC9F,OACCL,EAACM,EAAA,CACA,gBAAiBF,EACjB,UAAWG,EAAG,GAAIL,CAAS,EAC3B,WAAY,CACX,OAAQ,gEACR,MAAO,YACP,QAAS,iDACT,cAAe,sBACf,IAAK,oBACL,WAAYK,EAAGC,EAAe,CAAE,WAAY,QAAS,SAAU,SAAU,CAAC,EAAG,uBAAuB,EACpG,oBAAqB,kBACrB,gBAAiB,mBACjB,MAAO,mCACP,SAAU,OACV,UAAW,sDACX,IAAK,mBACL,KAAMD,EACL,kHACAF,EAAM,OAAS,QACZ,yFACA,EACJ,EACA,IAAK,0FACL,gBAAiB,yDACjB,cAAe,yDACf,aAAc,iGACd,UACC,4HACD,YAAa,iEACb,aAAc,wBACd,iBACC,4KACD,WAAY,YACZ,GAAGF,CACJ,EACA,WAAY,CACX,SAAU,IAAMH,EAACS,EAAA,CAAU,UAAU,mBAAmB,OAAO,OAAO,EACtE,UAAW,IAAMT,EAACU,EAAA,CAAW,UAAU,mBAAmB,OAAO,OAAO,CACzE,EACC,GAAGL,EACL,CAEF,CACAJ,EAAS,YAAc","names":["CaretLeft","CaretRight","DayPicker","jsx","Calendar","className","classNames","showOutsideDays","props","DayPicker","cx","buttonVariants","CaretLeft","CaretRight"]}
1
+ {"version":3,"sources":["../packages/calendar/src/calendar.tsx"],"sourcesContent":["import { CaretLeft } from \"@phosphor-icons/react/dist/icons/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/dist/icons/CaretRight\";\nimport type { ComponentProps } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { buttonVariants } from \"../../button/src/button\";\nimport { cx } from \"../../cx\";\n\ntype CalendarProps = ComponentProps<typeof DayPicker>;\n\n/**\n * A calendar component that allows users to select a date or a range of dates.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nfunction Calendar({ className, classNames, showOutsideDays = false, ...props }: CalendarProps) {\n\treturn (\n\t\t<DayPicker\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\tclassName={cx(\"\", className)}\n\t\t\tclassNames={{\n\t\t\t\tmonths: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n\t\t\t\tmonth: \"space-y-4\",\n\t\t\t\tcaption: \"flex justify-center pt-1 relative items-center\",\n\t\t\t\tcaption_label: \"text-sm font-medium\",\n\t\t\t\tnav: \"flex items-center\",\n\t\t\t\tnav_button: cx(buttonVariants({ appearance: \"ghost\", priority: \"neutral\" }), \"sm:h-7 sm:w-7 h-7 w-7\"),\n\t\t\t\tnav_button_previous: \"absolute left-0\",\n\t\t\t\tnav_button_next: \"absolute right-0\",\n\t\t\t\ttable: \"w-full border-collapse space-y-1\",\n\t\t\t\thead_row: \"flex\",\n\t\t\t\thead_cell: \"text-body w-7 text-[0.8rem] text-center font-normal\",\n\t\t\t\trow: \"flex w-full mt-1\",\n\t\t\t\tcell: cx(\n\t\t\t\t\t\"overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 sm:h-7 sm:w-7 h-7 w-7 \",\n\t\t\t\t\tprops.mode === \"range\"\n\t\t\t\t\t\t? \"first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n\t\t\t\t\t\t: \"\",\n\t\t\t\t),\n\t\t\t\tday: \"day size-full rounded-md [&:not([aria-selected],_[disabled])]:hover:bg-filled-accent/15\",\n\t\t\t\tday_range_start: \"day-range-start [&:not(.day-range-end)]:rounded-r-none\",\n\t\t\t\tday_range_end: \"day-range-end [&:not(.day-range-start)]:rounded-l-none\",\n\t\t\t\tday_selected: \"[&:not([disabled])]:bg-filled-accent text-on-filled [&:not([disabled])]:hover:bg-filled-accent\",\n\t\t\t\tday_today:\n\t\t\t\t\t\"[&:not([aria-selected],_[disabled])]:text-accent-600 font-medium [&:not([aria-selected],_[disabled])]:bg-filled-accent/10\",\n\t\t\t\tday_outside: \"day-outside aria-selected:text-on-filled opacity-50 text-muted\",\n\t\t\t\tday_disabled: \"text-muted opacity-50\",\n\t\t\t\tday_range_middle:\n\t\t\t\t\t\"day-range-middle [&:not([disabled])]:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none [&:not([disabled])]:aria-selected:hover:bg-filled-accent/25\",\n\t\t\t\tday_hidden: \"invisible\",\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tcomponents={{\n\t\t\t\tIconLeft: () => <CaretLeft className=\"h-4 w-4 shrink-0\" weight=\"bold\" />,\n\t\t\t\tIconRight: () => <CaretRight className=\"h-4 w-4 shrink-0\" weight=\"bold\" />,\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCalendar.displayName = \"Calendar\";\n\nexport {\n\t//,\n\tCalendar,\n};\n\nexport type {\n\t//,\n\tCalendarProps,\n};\n"],"mappings":"oKAAA,OAAS,aAAAA,MAAiB,6CAC1B,OAAS,cAAAC,MAAkB,8CAE3B,OAAS,aAAAC,MAAiB,mBAoDN,cAAAC,MAAA,oBAtCpB,SAASC,EAAS,CAAE,UAAAC,EAAW,WAAAC,EAAY,gBAAAC,EAAkB,GAAO,GAAGC,CAAM,EAAkB,CAC9F,OACCL,EAACM,EAAA,CACA,gBAAiBF,EACjB,UAAWG,EAAG,GAAIL,CAAS,EAC3B,WAAY,CACX,OAAQ,gEACR,MAAO,YACP,QAAS,iDACT,cAAe,sBACf,IAAK,oBACL,WAAYK,EAAGC,EAAe,CAAE,WAAY,QAAS,SAAU,SAAU,CAAC,EAAG,uBAAuB,EACpG,oBAAqB,kBACrB,gBAAiB,mBACjB,MAAO,mCACP,SAAU,OACV,UAAW,sDACX,IAAK,mBACL,KAAMD,EACL,kHACAF,EAAM,OAAS,QACZ,yFACA,EACJ,EACA,IAAK,0FACL,gBAAiB,yDACjB,cAAe,yDACf,aAAc,iGACd,UACC,4HACD,YAAa,iEACb,aAAc,wBACd,iBACC,4KACD,WAAY,YACZ,GAAGF,CACJ,EACA,WAAY,CACX,SAAU,IAAMH,EAACS,EAAA,CAAU,UAAU,mBAAmB,OAAO,OAAO,EACtE,UAAW,IAAMT,EAACU,EAAA,CAAW,UAAU,mBAAmB,OAAO,OAAO,CACzE,EACC,GAAGL,EACL,CAEF,CACAJ,EAAS,YAAc","names":["CaretLeft","CaretRight","DayPicker","jsx","Calendar","className","classNames","showOutsideDays","props","DayPicker","cx","buttonVariants","CaretLeft","CaretRight"]}
package/dist/dialog.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as m}from"./chunk-Q6UDWWVP.js";import"./chunk-VCISMRMX.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import{a as l}from"./chunk-A5H52ODC.js";import{X as P}from"@phosphor-icons/react/X";import*as e from"@radix-ui/react-dialog";import{forwardRef as r}from"react";import{jsx as i,jsxs as N}from"react/jsx-runtime";var u=e.Root,x=e.Trigger,g=e.Portal,C=e.Close,n=r(({className:o,...t},a)=>i(e.Overlay,{ref:a,className:l("fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0",o),...t}));n.displayName=e.Overlay.displayName;var d=r(({className:o,children:t,...a},s)=>N(g,{children:[i(n,{}),i("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:i(e.Content,{className:l("flex max-h-full w-full max-w-lg flex-1 flex-col","rounded-xl border border-dialog bg-dialog 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",o),ref:s,...a,children:t})})]}));d.displayName=e.Content.displayName;var p=({className:o,children:t,...a})=>i("div",{className:l("relative flex shrink-0 items-center justify-between gap-2 border-b border-dialog-muted px-6 py-4 text-strong","has-[.icon-button]:pr-4",o),...a,children:t});p.displayName="DialogHeader";var b=({size:o="md",type:t="button",label:a="Close Dialog",appearance:s="ghost",...y})=>i(e.Close,{asChild:!0,children:i(m,{appearance:s,icon:i(P,{}),label:a,size:o,type:t,...y})}),D=({className:o,...t})=>i("div",{className:l("scrollbar flex-1 overflow-y-auto p-6 text-body",o),...t});D.displayName="DialogBody";var c=({className:o,...t})=>i("div",{className:l("flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-6 py-4",o),...t});c.displayName="DialogFooter";var f=r(({className:o,...t},a)=>i(e.Title,{ref:a,className:l("truncate text-lg font-medium text-strong",o),...t}));f.displayName=e.Title.displayName;var v=r(({className:o,...t},a)=>i(e.Description,{ref:a,className:l("text-muted",o),...t}));v.displayName=e.Description.displayName;export{u as Dialog,D as DialogBody,C as DialogClose,b as DialogCloseIconButton,d as DialogContent,v as DialogDescription,c as DialogFooter,p as DialogHeader,n as DialogOverlay,g as DialogPortal,f as DialogTitle,x as DialogTrigger};
1
+ import{a as m}from"./chunk-Q6UDWWVP.js";import"./chunk-VCISMRMX.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import{a as l}from"./chunk-A5H52ODC.js";import{X as u}from"@phosphor-icons/react/X";import*as e from"@radix-ui/react-dialog";import{forwardRef as r}from"react";import{jsx as i,jsxs as N}from"react/jsx-runtime";var P=e.Root,x=e.Trigger,g=e.Portal,C=e.Close,s=r(({className:o,...t},a)=>i(e.Overlay,{ref:a,className:l("fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0",o),...t}));s.displayName=e.Overlay.displayName;var d=r(({className:o,children:t,...a},n)=>N(g,{children:[i(s,{}),i("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:i(e.Content,{className:l("flex max-h-full w-full max-w-lg flex-1 flex-col","outline-none focus-within:outline-none","rounded-xl border border-dialog bg-dialog 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",o),ref:n,...a,children:t})})]}));d.displayName=e.Content.displayName;var p=({className:o,children:t,...a})=>i("div",{className:l("relative flex shrink-0 items-center justify-between gap-2 border-b border-dialog-muted px-6 py-4 text-strong","has-[.icon-button]:pr-4",o),...a,children:t});p.displayName="DialogHeader";var b=({size:o="md",type:t="button",label:a="Close Dialog",appearance:n="ghost",...y})=>i(e.Close,{asChild:!0,children:i(m,{appearance:n,icon:i(u,{}),label:a,size:o,type:t,...y})}),D=({className:o,...t})=>i("div",{className:l("scrollbar flex-1 overflow-y-auto p-6 text-body",o),...t});D.displayName="DialogBody";var c=({className:o,...t})=>i("div",{className:l("flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-6 py-4",o),...t});c.displayName="DialogFooter";var f=r(({className:o,...t},a)=>i(e.Title,{ref:a,className:l("truncate text-lg font-medium text-strong",o),...t}));f.displayName=e.Title.displayName;var v=r(({className:o,...t},a)=>i(e.Description,{ref:a,className:l("text-muted",o),...t}));v.displayName=e.Description.displayName;export{P as Dialog,D as DialogBody,C as DialogClose,b as DialogCloseIconButton,d as DialogContent,v as DialogDescription,c as DialogFooter,p as DialogHeader,s as DialogOverlay,g as DialogPortal,f as DialogTitle,x as DialogTrigger};
2
2
  //# sourceMappingURL=dialog.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../packages/dialog/src/dialog.tsx"],"sourcesContent":["import { X } from \"@phosphor-icons/react/X\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { IconButton, type IconButtonProps } from \"../../button\";\nimport { cx } from \"../../cx\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = forwardRef<\n\tElementRef<typeof DialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = forwardRef<ElementRef<\"div\">, ComponentPropsWithoutRef<typeof DialogPrimitive.Content>>(\n\t({ className, children, ...props }, ref) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full max-w-lg flex-1 flex-col\",\n\t\t\t\t\t\t\"rounded-xl border border-dialog bg-dialog shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"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\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"relative flex shrink-0 items-center justify-between gap-2 border-b border-dialog-muted px-6 py-4 text-strong\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nDialogHeader.displayName = \"DialogHeader\";\n\ntype DialogCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\nconst DialogCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: DialogCloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton appearance={appearance} icon={<X />} label={label} size={size} type={type} {...props} />\n\t</DialogPrimitive.Close>\n);\n\nconst DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cx(\"scrollbar flex-1 overflow-y-auto p-6 text-body\", className)} {...props} />\n);\nDialogBody.displayName = \"DialogBody\";\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\"flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-6 py-4\", className)}\n\t\t{...props}\n\t/>\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = forwardRef<\n\tElementRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title ref={ref} className={cx(\"truncate text-lg font-medium text-strong\", className)} {...props} />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = forwardRef<\n\tElementRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description ref={ref} className={cx(\"text-muted\", className)} {...props} />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n\tDialog,\n\tDialogBody,\n\tDialogClose,\n\tDialogCloseIconButton,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogOverlay,\n\tDialogPortal,\n\tDialogTitle,\n\tDialogTrigger,\n};\n"],"mappings":"gMAAA,OAAS,KAAAA,MAAS,0BAClB,UAAYC,MAAqB,yBACjC,OAAS,cAAAC,MAAkB,QAiB1B,cAAAC,EAaC,QAAAC,MAbD,oBAZD,IAAMC,EAAyB,OAEzBC,EAAgC,UAEhCC,EAA+B,SAE/BC,EAA8B,QAE9BC,EAAgBC,EAGpB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,UAAhB,CACA,IAAKU,EACL,UAAWC,EACV,iKACAH,CACD,EACC,GAAGC,EACL,CACA,EACDH,EAAc,YAA8B,UAAQ,YAEpD,IAAMM,EAAgBL,EACrB,CAAC,CAAE,UAAAC,EAAW,SAAAK,EAAU,GAAGJ,CAAM,EAAGC,IACnCT,EAACG,EAAA,CACA,UAAAJ,EAACM,EAAA,EAAc,EACfN,EAAC,OAAI,UAAU,sDACd,SAAAA,EAAiB,UAAhB,CACA,UAAWW,EACV,kDACA,wFACA,2KACAH,CACD,EACA,IAAKE,EACJ,GAAGD,EAEH,SAAAI,EACF,EACD,GACD,CAEF,EACAD,EAAc,YAA8B,UAAQ,YAEpD,IAAME,EAAe,CAAC,CAAE,UAAAN,EAAW,SAAAK,EAAU,GAAGJ,CAAM,IACrDT,EAAC,OACA,UAAWW,EACV,+GACA,0BACAH,CACD,EACC,GAAGC,EAEH,SAAAI,EACF,EAEDC,EAAa,YAAc,eAG3B,IAAMC,EAAwB,CAAC,CAC9B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,eACR,WAAAC,EAAa,QACb,GAAGV,CACJ,IACCT,EAAiB,QAAhB,CAAsB,QAAO,GAC7B,SAAAA,EAACoB,EAAA,CAAW,WAAYD,EAAY,KAAMnB,EAACqB,EAAA,EAAE,EAAI,MAAOH,EAAO,KAAMF,EAAM,KAAMC,EAAO,GAAGR,EAAO,EACnG,EAGKa,EAAa,CAAC,CAAE,UAAAd,EAAW,GAAGC,CAAM,IACzCT,EAAC,OAAI,UAAWW,EAAG,iDAAkDH,CAAS,EAAI,GAAGC,EAAO,EAE7Fa,EAAW,YAAc,aAEzB,IAAMC,EAAe,CAAC,CAAE,UAAAf,EAAW,GAAGC,CAAM,IAC3CT,EAAC,OACA,UAAWW,EAAG,8EAA+EH,CAAS,EACrG,GAAGC,EACL,EAEDc,EAAa,YAAc,eAE3B,IAAMC,EAAcjB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,QAAhB,CAAsB,IAAKU,EAAK,UAAWC,EAAG,2CAA4CH,CAAS,EAAI,GAAGC,EAAO,CAClH,EACDe,EAAY,YAA8B,QAAM,YAEhD,IAAMC,EAAoBlB,EAGxB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,cAAhB,CAA4B,IAAKU,EAAK,UAAWC,EAAG,aAAcH,CAAS,EAAI,GAAGC,EAAO,CAC1F,EACDgB,EAAkB,YAA8B,cAAY","names":["X","DialogPrimitive","forwardRef","jsx","jsxs","Dialog","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","forwardRef","className","props","ref","cx","DialogContent","children","DialogHeader","DialogCloseIconButton","size","type","label","appearance","IconButton","X","DialogBody","DialogFooter","DialogTitle","DialogDescription"]}
1
+ {"version":3,"sources":["../packages/dialog/src/dialog.tsx"],"sourcesContent":["import { X } from \"@phosphor-icons/react/X\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { IconButton, type IconButtonProps } from \"../../button\";\nimport { cx } from \"../../cx\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = forwardRef<\n\tElementRef<typeof DialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = forwardRef<ElementRef<\"div\">, ComponentPropsWithoutRef<typeof DialogPrimitive.Content>>(\n\t({ className, children, ...props }, ref) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full max-w-lg flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-none focus-within:outline-none\",\n\t\t\t\t\t\t\"rounded-xl border border-dialog bg-dialog shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"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\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"relative flex shrink-0 items-center justify-between gap-2 border-b border-dialog-muted px-6 py-4 text-strong\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nDialogHeader.displayName = \"DialogHeader\";\n\ntype DialogCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\nconst DialogCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: DialogCloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton appearance={appearance} icon={<X />} label={label} size={size} type={type} {...props} />\n\t</DialogPrimitive.Close>\n);\n\nconst DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cx(\"scrollbar flex-1 overflow-y-auto p-6 text-body\", className)} {...props} />\n);\nDialogBody.displayName = \"DialogBody\";\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\"flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-6 py-4\", className)}\n\t\t{...props}\n\t/>\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = forwardRef<\n\tElementRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title ref={ref} className={cx(\"truncate text-lg font-medium text-strong\", className)} {...props} />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = forwardRef<\n\tElementRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description ref={ref} className={cx(\"text-muted\", className)} {...props} />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n\tDialog,\n\tDialogBody,\n\tDialogClose,\n\tDialogCloseIconButton,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogOverlay,\n\tDialogPortal,\n\tDialogTitle,\n\tDialogTrigger,\n};\n"],"mappings":"gMAAA,OAAS,KAAAA,MAAS,0BAClB,UAAYC,MAAqB,yBACjC,OAAS,cAAAC,MAAkB,QAiB1B,cAAAC,EAaC,QAAAC,MAbD,oBAZD,IAAMC,EAAyB,OAEzBC,EAAgC,UAEhCC,EAA+B,SAE/BC,EAA8B,QAE9BC,EAAgBC,EAGpB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,UAAhB,CACA,IAAKU,EACL,UAAWC,EACV,iKACAH,CACD,EACC,GAAGC,EACL,CACA,EACDH,EAAc,YAA8B,UAAQ,YAEpD,IAAMM,EAAgBL,EACrB,CAAC,CAAE,UAAAC,EAAW,SAAAK,EAAU,GAAGJ,CAAM,EAAGC,IACnCT,EAACG,EAAA,CACA,UAAAJ,EAACM,EAAA,EAAc,EACfN,EAAC,OAAI,UAAU,sDACd,SAAAA,EAAiB,UAAhB,CACA,UAAWW,EACV,kDACA,yCACA,wFACA,2KACAH,CACD,EACA,IAAKE,EACJ,GAAGD,EAEH,SAAAI,EACF,EACD,GACD,CAEF,EACAD,EAAc,YAA8B,UAAQ,YAEpD,IAAME,EAAe,CAAC,CAAE,UAAAN,EAAW,SAAAK,EAAU,GAAGJ,CAAM,IACrDT,EAAC,OACA,UAAWW,EACV,+GACA,0BACAH,CACD,EACC,GAAGC,EAEH,SAAAI,EACF,EAEDC,EAAa,YAAc,eAG3B,IAAMC,EAAwB,CAAC,CAC9B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,eACR,WAAAC,EAAa,QACb,GAAGV,CACJ,IACCT,EAAiB,QAAhB,CAAsB,QAAO,GAC7B,SAAAA,EAACoB,EAAA,CAAW,WAAYD,EAAY,KAAMnB,EAACqB,EAAA,EAAE,EAAI,MAAOH,EAAO,KAAMF,EAAM,KAAMC,EAAO,GAAGR,EAAO,EACnG,EAGKa,EAAa,CAAC,CAAE,UAAAd,EAAW,GAAGC,CAAM,IACzCT,EAAC,OAAI,UAAWW,EAAG,iDAAkDH,CAAS,EAAI,GAAGC,EAAO,EAE7Fa,EAAW,YAAc,aAEzB,IAAMC,EAAe,CAAC,CAAE,UAAAf,EAAW,GAAGC,CAAM,IAC3CT,EAAC,OACA,UAAWW,EAAG,8EAA+EH,CAAS,EACrG,GAAGC,EACL,EAEDc,EAAa,YAAc,eAE3B,IAAMC,EAAcjB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,QAAhB,CAAsB,IAAKU,EAAK,UAAWC,EAAG,2CAA4CH,CAAS,EAAI,GAAGC,EAAO,CAClH,EACDe,EAAY,YAA8B,QAAM,YAEhD,IAAMC,EAAoBlB,EAGxB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB,cAAhB,CAA4B,IAAKU,EAAK,UAAWC,EAAG,aAAcH,CAAS,EAAI,GAAGC,EAAO,CAC1F,EACDgB,EAAkB,YAA8B,cAAY","names":["X","DialogPrimitive","forwardRef","jsx","jsxs","Dialog","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","forwardRef","className","props","ref","cx","DialogContent","children","DialogHeader","DialogCloseIconButton","size","type","label","appearance","IconButton","X","DialogBody","DialogFooter","DialogTitle","DialogDescription"]}
package/dist/popover.d.ts CHANGED
@@ -1,8 +1,34 @@
1
1
  import * as react from 'react';
2
2
  import * as PopoverPrimitive from '@radix-ui/react-popover';
3
3
 
4
+ /**
5
+ * A popover is a floating overlay that appears above other elements on the page.
6
+ * Displays rich content in a portal, triggered by a button.
7
+ * This is the root, stateful component that manages the open/closed state of the popover.
8
+ *
9
+ * @preview This component is in `preview` mode which means the API is not stable and may change.
10
+ * There may also be bugs! Please file an issue if you find any! <3
11
+ *
12
+ * https://github.com/ngrok-oss/mantle/issues
13
+ */
4
14
  declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;
15
+ /**
16
+ * The trigger button that opens the popover.
17
+ *
18
+ * @preview This component is in `preview` mode which means the API is not stable and may change.
19
+ * There may also be bugs! Please file an issue if you find any! <3
20
+ *
21
+ * https://github.com/ngrok-oss/mantle/issues
22
+ */
5
23
  declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
24
+ /**
25
+ * The content to render inside the popover.
26
+ *
27
+ * @preview This component is in `preview` mode which means the API is not stable and may change.
28
+ * There may also be bugs! Please file an issue if you find any! <3
29
+ *
30
+ * https://github.com/ngrok-oss/mantle/issues
31
+ */
6
32
  declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
7
33
 
8
34
  export { Popover, PopoverContent, PopoverTrigger };
package/dist/popover.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as e}from"./chunk-A5H52ODC.js";import*as o from"@radix-ui/react-popover";import{forwardRef as d}from"react";import{jsx as t}from"react/jsx-runtime";var s=o.Root,P=o.Trigger,r=d(({className:i,align:a="center",sideOffset:p=4,...n},m)=>t(o.Portal,{children:t(o.Content,{ref:m,align:a,sideOffset:p,className:e("text-popover-foreground z-50 w-72 rounded-md border border-popover bg-popover p-4 shadow-md outline-none data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",i),...n})}));r.displayName=o.Content.displayName;export{s as Popover,r as PopoverContent,P as PopoverTrigger};
1
+ import{a as e}from"./chunk-A5H52ODC.js";import*as o from"@radix-ui/react-popover";import{forwardRef as m}from"react";import{jsx as t}from"react/jsx-runtime";var s=o.Root,P=o.Trigger,r=m(({className:i,align:a="center",sideOffset:p=4,...n},d)=>t(o.Portal,{children:t(o.Content,{ref:d,align:a,sideOffset:p,className:e("text-popover-foreground z-50 w-72 rounded-md border border-popover bg-popover p-4 shadow-md outline-none data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",i),...n})}));r.displayName="PopoverContent";export{s as Popover,r as PopoverContent,P as PopoverTrigger};
2
2
  //# sourceMappingURL=popover.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../packages/popover/src/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cx } from \"../../cx\";\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverContent = forwardRef<\n\tElementRef<typeof PopoverPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<PopoverPrimitive.Portal>\n\t\t<PopoverPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"text-popover-foreground z-50 w-72 rounded-md border border-popover bg-popover p-4 shadow-md outline-none data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport { Popover, PopoverTrigger, PopoverContent };\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAazB,cAAAC,MAAA,oBATF,IAAMC,EAA2B,OAE3BC,EAAkC,UAElCC,EAAiBC,EAGrB,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAQ,SAAU,WAAAC,EAAa,EAAG,GAAGC,CAAM,EAAGC,IAC7DT,EAAkB,SAAjB,CACA,SAAAA,EAAkB,UAAjB,CACA,IAAKS,EACL,MAAOH,EACP,WAAYC,EACZ,UAAWG,EACV,waACAL,CACD,EACC,GAAGG,EACL,EACD,CACA,EACDL,EAAe,YAA+B,UAAQ","names":["PopoverPrimitive","forwardRef","jsx","Popover","PopoverTrigger","PopoverContent","forwardRef","className","align","sideOffset","props","ref","cx"]}
1
+ {"version":3,"sources":["../packages/popover/src/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cx } from \"../../cx\";\n\n/**\n * A popover is a floating overlay that appears above other elements on the page.\n * Displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst Popover = PopoverPrimitive.Root;\n\n/**\n * The trigger button that opens the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\n/**\n * The content to render inside the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverContent = forwardRef<\n\tElementRef<typeof PopoverPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<PopoverPrimitive.Portal>\n\t\t<PopoverPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"text-popover-foreground z-50 w-72 rounded-md border border-popover bg-popover p-4 shadow-md outline-none data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = \"PopoverContent\";\n\nexport {\n\t//,\n\tPopover,\n\tPopoverTrigger,\n\tPopoverContent,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAuCzB,cAAAC,MAAA,oBAzBF,IAAMC,EAA2B,OAU3BC,EAAkC,UAUlCC,EAAiBC,EAGrB,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAQ,SAAU,WAAAC,EAAa,EAAG,GAAGC,CAAM,EAAGC,IAC7DT,EAAkB,SAAjB,CACA,SAAAA,EAAkB,UAAjB,CACA,IAAKS,EACL,MAAOH,EACP,WAAYC,EACZ,UAAWG,EACV,waACAL,CACD,EACC,GAAGG,EACL,EACD,CACA,EACDL,EAAe,YAAc","names":["PopoverPrimitive","forwardRef","jsx","Popover","PopoverTrigger","PopoverContent","forwardRef","className","align","sideOffset","props","ref","cx"]}
package/dist/sheet.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as d}from"./chunk-Q6UDWWVP.js";import"./chunk-VCISMRMX.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import{a}from"./chunk-A5H52ODC.js";import{X as u}from"@phosphor-icons/react/X";import*as e from"@radix-ui/react-dialog";import{cva as y}from"class-variance-authority";import{forwardRef as n}from"react";import{jsx as r,jsxs as H}from"react/jsx-runtime";var P=e.Root,b=e.Trigger,g=e.Close,p=e.Portal,m=n(({className:t,...o},i)=>r(e.Overlay,{className:a("fixed inset-0 z-40 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0",t),...o,ref:i}));m.displayName=e.Overlay.displayName;var C=y("fixed z-40 flex flex-col bg-dialog shadow-lg transition ease-in-out data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{top:"inset-x-0 top-0 border-b border-dialog data-state-closed:slide-out-to-top data-state-open:slide-in-from-top",bottom:"inset-x-0 bottom-0 border-t border-dialog data-state-closed:slide-out-to-bottom data-state-open:slide-in-from-bottom",left:"inset-y-0 left-0 h-full w-full border-r border-dialog data-state-closed:slide-out-to-left data-state-open:slide-in-from-left sm:max-w-[30rem]",right:"inset-y-0 right-0 h-full w-full border-l border-dialog data-state-closed:slide-out-to-right data-state-open:slide-in-from-right sm:max-w-[30rem]"}},defaultVariants:{side:"right"}}),h=n(({side:t="right",className:o,children:i,...s},l)=>H(p,{children:[r(m,{}),r(e.Content,{ref:l,className:a(C({side:t}),o),...s,children:i})]}));h.displayName=e.Content.displayName;var x=({size:t="md",type:o="button",label:i="Close Sheet",appearance:s="ghost",...l})=>r(e.Close,{asChild:!0,children:r(d,{appearance:s,icon:r(u,{}),label:i,size:t,type:o,...l})}),T=({className:t,...o})=>r("div",{className:a("scrollbar flex-1 overflow-y-auto p-6 text-body",t),...o}),N=({className:t,...o})=>r("div",{className:a("flex shrink-0 flex-col gap-2 border-b border-dialog-muted py-4 pl-6 pr-4","has-[.icon-button]:pr-4",t),...o}),R=({className:t,...o})=>r("div",{className:a("flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-6 py-2.5",t),...o}),f=n(({className:t,...o},i)=>r(e.Title,{ref:i,className:a("flex-1 truncate text-lg font-medium text-strong",t),...o}));f.displayName=e.Title.displayName;var S=n(({children:t,className:o,...i},s)=>r("div",{className:a("flex items-center justify-between gap-2",o),...i,ref:s,children:t}));S.displayName="SheetTitleGroup";var c=n(({className:t,...o},i)=>r(e.Description,{ref:i,className:a("text-sm text-body",t),...o}));c.displayName=e.Description.displayName;var v=n(({children:t,className:o,...i},s)=>r("div",{className:a("flex h-full items-center gap-2",o),...i,ref:s,children:t}));v.displayName="SheetActions";export{P as Sheet,v as SheetActions,T as SheetBody,g as SheetClose,x as SheetCloseIconButton,h as SheetContent,c as SheetDescription,R as SheetFooter,N as SheetHeader,m as SheetOverlay,p as SheetPortal,f as SheetTitle,S as SheetTitleGroup,b as SheetTrigger};
1
+ import{a as d}from"./chunk-Q6UDWWVP.js";import"./chunk-VCISMRMX.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import{a}from"./chunk-A5H52ODC.js";import{X as u}from"@phosphor-icons/react/X";import*as e from"@radix-ui/react-dialog";import{cva as y}from"class-variance-authority";import{forwardRef as n}from"react";import{jsx as r,jsxs as H}from"react/jsx-runtime";var P=e.Root,b=e.Trigger,g=e.Close,p=e.Portal,m=n(({className:t,...o},i)=>r(e.Overlay,{className:a("fixed inset-0 z-40 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0",t),...o,ref:i}));m.displayName=e.Overlay.displayName;var C=y("fixed z-40 flex flex-col bg-dialog 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:{top:"inset-x-0 top-0 border-b border-dialog data-state-closed:slide-out-to-top data-state-open:slide-in-from-top",bottom:"inset-x-0 bottom-0 border-t border-dialog data-state-closed:slide-out-to-bottom data-state-open:slide-in-from-bottom",left:"inset-y-0 left-0 h-full w-full border-r border-dialog data-state-closed:slide-out-to-left data-state-open:slide-in-from-left sm:max-w-[30rem]",right:"inset-y-0 right-0 h-full w-full border-l border-dialog data-state-closed:slide-out-to-right data-state-open:slide-in-from-right sm:max-w-[30rem]"}},defaultVariants:{side:"right"}}),h=n(({side:t="right",className:o,children:i,...s},l)=>H(p,{children:[r(m,{}),r(e.Content,{ref:l,className:a(C({side:t}),o),...s,children:i})]}));h.displayName=e.Content.displayName;var x=({size:t="md",type:o="button",label:i="Close Sheet",appearance:s="ghost",...l})=>r(e.Close,{asChild:!0,children:r(d,{appearance:s,icon:r(u,{}),label:i,size:t,type:o,...l})}),T=({className:t,...o})=>r("div",{className:a("scrollbar flex-1 overflow-y-auto p-6 text-body",t),...o}),N=({className:t,...o})=>r("div",{className:a("flex shrink-0 flex-col gap-2 border-b border-dialog-muted py-4 pl-6 pr-4","has-[.icon-button]:pr-4",t),...o}),R=({className:t,...o})=>r("div",{className:a("flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-6 py-2.5",t),...o}),f=n(({className:t,...o},i)=>r(e.Title,{ref:i,className:a("flex-1 truncate text-lg font-medium text-strong",t),...o}));f.displayName=e.Title.displayName;var c=n(({children:t,className:o,...i},s)=>r("div",{className:a("flex items-center justify-between gap-2",o),...i,ref:s,children:t}));c.displayName="SheetTitleGroup";var S=n(({className:t,...o},i)=>r(e.Description,{ref:i,className:a("text-sm text-body",t),...o}));S.displayName=e.Description.displayName;var v=n(({children:t,className:o,...i},s)=>r("div",{className:a("flex h-full items-center gap-2",o),...i,ref:s,children:t}));v.displayName="SheetActions";export{P as Sheet,v as SheetActions,T as SheetBody,g as SheetClose,x as SheetCloseIconButton,h as SheetContent,S as SheetDescription,R as SheetFooter,N as SheetHeader,m as SheetOverlay,p as SheetPortal,f as SheetTitle,c as SheetTitleGroup,b as SheetTrigger};
2
2
  //# sourceMappingURL=sheet.js.map
package/dist/sheet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../packages/sheet/src/sheet.tsx"],"sourcesContent":["import { X } from \"@phosphor-icons/react/X\";\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from \"react\";\nimport { IconButton, type IconButtonProps } from \"../../button\";\nimport { cx } from \"../../cx\";\n\nconst Sheet = SheetPrimitive.Root;\n\nconst SheetTrigger = SheetPrimitive.Trigger;\n\nconst SheetClose = SheetPrimitive.Close;\n\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = forwardRef<\n\tElementRef<typeof SheetPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Overlay\n\t\tclassName={cx(\n\t\t\t\"fixed inset-0 z-40 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst SheetVariants = cva(\n\t\"fixed z-40 flex flex-col bg-dialog shadow-lg transition ease-in-out data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in\",\n\t{\n\t\tvariants: {\n\t\t\tside: {\n\t\t\t\ttop: \"inset-x-0 top-0 border-b border-dialog data-state-closed:slide-out-to-top data-state-open:slide-in-from-top\",\n\t\t\t\tbottom:\n\t\t\t\t\t\"inset-x-0 bottom-0 border-t border-dialog data-state-closed:slide-out-to-bottom data-state-open:slide-in-from-bottom\",\n\t\t\t\tleft: \"inset-y-0 left-0 h-full w-full border-r border-dialog data-state-closed:slide-out-to-left data-state-open:slide-in-from-left sm:max-w-[30rem]\",\n\t\t\t\tright:\n\t\t\t\t\t\"inset-y-0 right-0 h-full w-full border-l border-dialog data-state-closed:slide-out-to-right data-state-open:slide-in-from-right sm:max-w-[30rem]\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tside: \"right\",\n\t\t},\n\t},\n);\n\ntype SheetContentProps = {} & ComponentPropsWithoutRef<typeof SheetPrimitive.Content> &\n\tVariantProps<typeof SheetVariants>;\n\nconst SheetContent = forwardRef<ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(\n\t({ side = \"right\", className, children, ...props }, ref) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content ref={ref} className={cx(SheetVariants({ side }), className)} {...props}>\n\t\t\t\t{children}\n\t\t\t</SheetPrimitive.Content>\n\t\t</SheetPortal>\n\t),\n);\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\ntype SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\nconst SheetCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Sheet\",\n\tappearance = \"ghost\",\n\t...props\n}: SheetCloseIconButtonProps) => (\n\t<SheetPrimitive.Close asChild>\n\t\t<IconButton appearance={appearance} icon={<X />} label={label} size={size} type={type} {...props} />\n\t</SheetPrimitive.Close>\n);\n\nconst SheetBody = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cx(\"scrollbar flex-1 overflow-y-auto p-6 text-body\", className)} {...props} />\n);\n\nconst SheetHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"flex shrink-0 flex-col gap-2 border-b border-dialog-muted py-4 pl-6 pr-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nconst SheetFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\"flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-6 py-2.5\", className)}\n\t\t{...props}\n\t/>\n);\n\nconst SheetTitle = forwardRef<\n\tElementRef<typeof SheetPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"flex-1 truncate text-lg font-medium text-strong\", className)}\n\t\t{...props}\n\t/>\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetTitleGroup = forwardRef<ElementRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div className={cx(\"flex items-center justify-between gap-2\", className)} {...props} ref={ref}>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nSheetTitleGroup.displayName = \"SheetTitleGroup\";\n\nconst SheetDescription = forwardRef<\n\tElementRef<typeof SheetPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Description ref={ref} className={cx(\"text-sm text-body\", className)} {...props} />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nconst SheetActions = forwardRef<ElementRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div className={cx(\"flex h-full items-center gap-2\", className)} {...props} ref={ref}>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nSheetActions.displayName = \"SheetActions\";\n\nexport {\n\tSheet,\n\tSheetActions,\n\tSheetBody,\n\tSheetClose,\n\tSheetCloseIconButton,\n\tSheetContent,\n\tSheetDescription,\n\tSheetFooter,\n\tSheetHeader,\n\tSheetOverlay,\n\tSheetPortal,\n\tSheetTitle,\n\tSheetTitleGroup,\n\tSheetTrigger,\n};\n"],"mappings":"2LAAA,OAAS,KAAAA,MAAS,0BAClB,UAAYC,MAAoB,yBAChC,OAAS,OAAAC,MAA8B,2BACvC,OAAS,cAAAC,MAAkB,QAiB1B,cAAAC,EAmCC,QAAAC,MAnCD,oBAZD,IAAMC,EAAuB,OAEvBC,EAA8B,UAE9BC,EAA4B,QAE5BC,EAA6B,SAE7BC,EAAeC,EAGnB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAgB,UAAf,CACA,UAAWW,EACV,iKACAH,CACD,EACC,GAAGC,EACJ,IAAKC,EACN,CACA,EACDJ,EAAa,YAA6B,UAAQ,YAElD,IAAMM,EAAgBC,EACrB,2LACA,CACC,SAAU,CACT,KAAM,CACL,IAAK,8GACL,OACC,uHACD,KAAM,gJACN,MACC,kJACF,CACD,EACA,gBAAiB,CAChB,KAAM,OACP,CACD,CACD,EAKMC,EAAeP,EACpB,CAAC,CAAE,KAAAQ,EAAO,QAAS,UAAAP,EAAW,SAAAQ,EAAU,GAAGP,CAAM,EAAGC,IACnDT,EAACI,EAAA,CACA,UAAAL,EAACM,EAAA,EAAa,EACdN,EAAgB,UAAf,CAAuB,IAAKU,EAAK,UAAWC,EAAGC,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGP,CAAS,EAAI,GAAGC,EACvF,SAAAO,EACF,GACD,CAEF,EACAF,EAAa,YAA6B,UAAQ,YAGlD,IAAMG,EAAuB,CAAC,CAC7B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,cACR,WAAAC,EAAa,QACb,GAAGZ,CACJ,IACCT,EAAgB,QAAf,CAAqB,QAAO,GAC5B,SAAAA,EAACsB,EAAA,CAAW,WAAYD,EAAY,KAAMrB,EAACuB,EAAA,EAAE,EAAI,MAAOH,EAAO,KAAMF,EAAM,KAAMC,EAAO,GAAGV,EAAO,EACnG,EAGKe,EAAY,CAAC,CAAE,UAAAhB,EAAW,GAAGC,CAAM,IACxCT,EAAC,OAAI,UAAWW,EAAG,iDAAkDH,CAAS,EAAI,GAAGC,EAAO,EAGvFgB,EAAc,CAAC,CAAE,UAAAjB,EAAW,GAAGC,CAAM,IAC1CT,EAAC,OACA,UAAWW,EACV,2EACA,0BACAH,CACD,EACC,GAAGC,EACL,EAGKiB,EAAc,CAAC,CAAE,UAAAlB,EAAW,GAAGC,CAAM,IAC1CT,EAAC,OACA,UAAWW,EAAG,gFAAiFH,CAAS,EACvG,GAAGC,EACL,EAGKkB,EAAapB,EAGjB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAgB,QAAf,CACA,IAAKU,EACL,UAAWC,EAAG,kDAAmDH,CAAS,EACzE,GAAGC,EACL,CACA,EACDkB,EAAW,YAA6B,QAAM,YAE9C,IAAMC,EAAkBrB,EACvB,CAAC,CAAE,SAAAS,EAAU,UAAAR,EAAW,GAAGC,CAAM,EAAGC,IACnCV,EAAC,OAAI,UAAWW,EAAG,0CAA2CH,CAAS,EAAI,GAAGC,EAAO,IAAKC,EACxF,SAAAM,EACF,CAEF,EACAY,EAAgB,YAAc,kBAE9B,IAAMC,EAAmBtB,EAGvB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAgB,cAAf,CAA2B,IAAKU,EAAK,UAAWC,EAAG,oBAAqBH,CAAS,EAAI,GAAGC,EAAO,CAChG,EACDoB,EAAiB,YAA6B,cAAY,YAE1D,IAAMC,EAAevB,EACpB,CAAC,CAAE,SAAAS,EAAU,UAAAR,EAAW,GAAGC,CAAM,EAAGC,IACnCV,EAAC,OAAI,UAAWW,EAAG,iCAAkCH,CAAS,EAAI,GAAGC,EAAO,IAAKC,EAC/E,SAAAM,EACF,CAEF,EACAc,EAAa,YAAc","names":["X","SheetPrimitive","cva","forwardRef","jsx","jsxs","Sheet","SheetTrigger","SheetClose","SheetPortal","SheetOverlay","forwardRef","className","props","ref","cx","SheetVariants","cva","SheetContent","side","children","SheetCloseIconButton","size","type","label","appearance","IconButton","X","SheetBody","SheetHeader","SheetFooter","SheetTitle","SheetTitleGroup","SheetDescription","SheetActions"]}
1
+ {"version":3,"sources":["../packages/sheet/src/sheet.tsx"],"sourcesContent":["import { X } from \"@phosphor-icons/react/X\";\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from \"react\";\nimport { IconButton, type IconButtonProps } from \"../../button\";\nimport { cx } from \"../../cx\";\n\nconst Sheet = SheetPrimitive.Root;\n\nconst SheetTrigger = SheetPrimitive.Trigger;\n\nconst SheetClose = SheetPrimitive.Close;\n\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = forwardRef<\n\tElementRef<typeof SheetPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Overlay\n\t\tclassName={cx(\n\t\t\t\"fixed inset-0 z-40 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst SheetVariants = cva(\n\t\"fixed z-40 flex flex-col bg-dialog 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\",\n\t{\n\t\tvariants: {\n\t\t\tside: {\n\t\t\t\ttop: \"inset-x-0 top-0 border-b border-dialog data-state-closed:slide-out-to-top data-state-open:slide-in-from-top\",\n\t\t\t\tbottom:\n\t\t\t\t\t\"inset-x-0 bottom-0 border-t border-dialog data-state-closed:slide-out-to-bottom data-state-open:slide-in-from-bottom\",\n\t\t\t\tleft: \"inset-y-0 left-0 h-full w-full border-r border-dialog data-state-closed:slide-out-to-left data-state-open:slide-in-from-left sm:max-w-[30rem]\",\n\t\t\t\tright:\n\t\t\t\t\t\"inset-y-0 right-0 h-full w-full border-l border-dialog data-state-closed:slide-out-to-right data-state-open:slide-in-from-right sm:max-w-[30rem]\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tside: \"right\",\n\t\t},\n\t},\n);\n\ntype SheetContentProps = {} & ComponentPropsWithoutRef<typeof SheetPrimitive.Content> &\n\tVariantProps<typeof SheetVariants>;\n\nconst SheetContent = forwardRef<ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(\n\t({ side = \"right\", className, children, ...props }, ref) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content ref={ref} className={cx(SheetVariants({ side }), className)} {...props}>\n\t\t\t\t{children}\n\t\t\t</SheetPrimitive.Content>\n\t\t</SheetPortal>\n\t),\n);\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\ntype SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\nconst SheetCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Sheet\",\n\tappearance = \"ghost\",\n\t...props\n}: SheetCloseIconButtonProps) => (\n\t<SheetPrimitive.Close asChild>\n\t\t<IconButton appearance={appearance} icon={<X />} label={label} size={size} type={type} {...props} />\n\t</SheetPrimitive.Close>\n);\n\nconst SheetBody = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cx(\"scrollbar flex-1 overflow-y-auto p-6 text-body\", className)} {...props} />\n);\n\nconst SheetHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"flex shrink-0 flex-col gap-2 border-b border-dialog-muted py-4 pl-6 pr-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nconst SheetFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\"flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-6 py-2.5\", className)}\n\t\t{...props}\n\t/>\n);\n\nconst SheetTitle = forwardRef<\n\tElementRef<typeof SheetPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"flex-1 truncate text-lg font-medium text-strong\", className)}\n\t\t{...props}\n\t/>\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetTitleGroup = forwardRef<ElementRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div className={cx(\"flex items-center justify-between gap-2\", className)} {...props} ref={ref}>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nSheetTitleGroup.displayName = \"SheetTitleGroup\";\n\nconst SheetDescription = forwardRef<\n\tElementRef<typeof SheetPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Description ref={ref} className={cx(\"text-sm text-body\", className)} {...props} />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nconst SheetActions = forwardRef<ElementRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div className={cx(\"flex h-full items-center gap-2\", className)} {...props} ref={ref}>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nSheetActions.displayName = \"SheetActions\";\n\nexport {\n\tSheet,\n\tSheetActions,\n\tSheetBody,\n\tSheetClose,\n\tSheetCloseIconButton,\n\tSheetContent,\n\tSheetDescription,\n\tSheetFooter,\n\tSheetHeader,\n\tSheetOverlay,\n\tSheetPortal,\n\tSheetTitle,\n\tSheetTitleGroup,\n\tSheetTrigger,\n};\n"],"mappings":"2LAAA,OAAS,KAAAA,MAAS,0BAClB,UAAYC,MAAoB,yBAChC,OAAS,OAAAC,MAA8B,2BACvC,OAAS,cAAAC,MAAkB,QAiB1B,cAAAC,EAmCC,QAAAC,MAnCD,oBAZD,IAAMC,EAAuB,OAEvBC,EAA8B,UAE9BC,EAA4B,QAE5BC,EAA6B,SAE7BC,EAAeC,EAGnB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAgB,UAAf,CACA,UAAWW,EACV,iKACAH,CACD,EACC,GAAGC,EACJ,IAAKC,EACN,CACA,EACDJ,EAAa,YAA6B,UAAQ,YAElD,IAAMM,EAAgBC,EACrB,kOACA,CACC,SAAU,CACT,KAAM,CACL,IAAK,8GACL,OACC,uHACD,KAAM,gJACN,MACC,kJACF,CACD,EACA,gBAAiB,CAChB,KAAM,OACP,CACD,CACD,EAKMC,EAAeP,EACpB,CAAC,CAAE,KAAAQ,EAAO,QAAS,UAAAP,EAAW,SAAAQ,EAAU,GAAGP,CAAM,EAAGC,IACnDT,EAACI,EAAA,CACA,UAAAL,EAACM,EAAA,EAAa,EACdN,EAAgB,UAAf,CAAuB,IAAKU,EAAK,UAAWC,EAAGC,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGP,CAAS,EAAI,GAAGC,EACvF,SAAAO,EACF,GACD,CAEF,EACAF,EAAa,YAA6B,UAAQ,YAGlD,IAAMG,EAAuB,CAAC,CAC7B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,cACR,WAAAC,EAAa,QACb,GAAGZ,CACJ,IACCT,EAAgB,QAAf,CAAqB,QAAO,GAC5B,SAAAA,EAACsB,EAAA,CAAW,WAAYD,EAAY,KAAMrB,EAACuB,EAAA,EAAE,EAAI,MAAOH,EAAO,KAAMF,EAAM,KAAMC,EAAO,GAAGV,EAAO,EACnG,EAGKe,EAAY,CAAC,CAAE,UAAAhB,EAAW,GAAGC,CAAM,IACxCT,EAAC,OAAI,UAAWW,EAAG,iDAAkDH,CAAS,EAAI,GAAGC,EAAO,EAGvFgB,EAAc,CAAC,CAAE,UAAAjB,EAAW,GAAGC,CAAM,IAC1CT,EAAC,OACA,UAAWW,EACV,2EACA,0BACAH,CACD,EACC,GAAGC,EACL,EAGKiB,EAAc,CAAC,CAAE,UAAAlB,EAAW,GAAGC,CAAM,IAC1CT,EAAC,OACA,UAAWW,EAAG,gFAAiFH,CAAS,EACvG,GAAGC,EACL,EAGKkB,EAAapB,EAGjB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAgB,QAAf,CACA,IAAKU,EACL,UAAWC,EAAG,kDAAmDH,CAAS,EACzE,GAAGC,EACL,CACA,EACDkB,EAAW,YAA6B,QAAM,YAE9C,IAAMC,EAAkBrB,EACvB,CAAC,CAAE,SAAAS,EAAU,UAAAR,EAAW,GAAGC,CAAM,EAAGC,IACnCV,EAAC,OAAI,UAAWW,EAAG,0CAA2CH,CAAS,EAAI,GAAGC,EAAO,IAAKC,EACxF,SAAAM,EACF,CAEF,EACAY,EAAgB,YAAc,kBAE9B,IAAMC,EAAmBtB,EAGvB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAgB,cAAf,CAA2B,IAAKU,EAAK,UAAWC,EAAG,oBAAqBH,CAAS,EAAI,GAAGC,EAAO,CAChG,EACDoB,EAAiB,YAA6B,cAAY,YAE1D,IAAMC,EAAevB,EACpB,CAAC,CAAE,SAAAS,EAAU,UAAAR,EAAW,GAAGC,CAAM,EAAGC,IACnCV,EAAC,OAAI,UAAWW,EAAG,iCAAkCH,CAAS,EAAI,GAAGC,EAAO,IAAKC,EAC/E,SAAAM,EACF,CAEF,EACAc,EAAa,YAAc","names":["X","SheetPrimitive","cva","forwardRef","jsx","jsxs","Sheet","SheetTrigger","SheetClose","SheetPortal","SheetOverlay","forwardRef","className","props","ref","cx","SheetVariants","cva","SheetContent","side","children","SheetCloseIconButton","size","type","label","appearance","IconButton","X","SheetBody","SheetHeader","SheetFooter","SheetTitle","SheetTitleGroup","SheetDescription","SheetActions"]}
package/dist/tooltip.d.ts CHANGED
@@ -6,10 +6,42 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
6
6
 
7
7
  /**
8
8
  * Wraps your app to provide global functionality to your tooltips.
9
+ * Only one instance of this component should be rendered in your app, preferably at the root.
10
+ *
11
+ * @preview This component is in `preview` mode which means the API is not stable and may change.
12
+ * There may also be bugs! Please file an issue if you find any! <3
13
+ *
14
+ * https://github.com/ngrok-oss/mantle/issues
9
15
  */
10
16
  declare const TooltipProvider: ({ delayDuration, ...props }: ComponentPropsWithoutRef<typeof Provider>) => react_jsx_runtime.JSX.Element;
17
+ /**
18
+ * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
19
+ * This is the root, stateful component that manages the open/closed state of the tooltip.
20
+ * Will throw if you have not wrapped your app in a `TooltipProvider`.
21
+ *
22
+ * @preview This component is in `preview` mode which means the API is not stable and may change.
23
+ * There may also be bugs! Please file an issue if you find any! <3
24
+ *
25
+ * https://github.com/ngrok-oss/mantle/issues
26
+ */
11
27
  declare const Tooltip: react.FC<_radix_ui_react_tooltip.TooltipProps>;
28
+ /**
29
+ * The trigger button that opens the tooltip.
30
+ *
31
+ * @preview This component is in `preview` mode which means the API is not stable and may change.
32
+ * There may also be bugs! Please file an issue if you find any! <3
33
+ *
34
+ * https://github.com/ngrok-oss/mantle/issues
35
+ */
12
36
  declare const TooltipTrigger: react.ForwardRefExoticComponent<_radix_ui_react_tooltip.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
37
+ /**
38
+ * The content to render inside the tooltip.
39
+ *
40
+ * @preview This component is in `preview` mode which means the API is not stable and may change.
41
+ * There may also be bugs! Please file an issue if you find any! <3
42
+ *
43
+ * https://github.com/ngrok-oss/mantle/issues
44
+ */
13
45
  declare const TooltipContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tooltip.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
14
46
 
15
47
  export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
@@ -1 +1 @@
1
- {"version":3,"sources":["../packages/tooltip/src/tooltip.tsx"],"sourcesContent":["import { Content, Provider, Root, Trigger } from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cx } from \"../../cx\";\n\n/**\n * Wraps your app to provide global functionality to your tooltips.\n */\nconst TooltipProvider = ({ delayDuration = 0, ...props }: ComponentPropsWithoutRef<typeof Provider>) => (\n\t<Provider delayDuration={delayDuration ?? 0} {...props} />\n);\n\nconst Tooltip = Root;\n\nconst TooltipTrigger = Trigger;\n\nconst TooltipContent = forwardRef<ElementRef<typeof Content>, ComponentPropsWithoutRef<typeof Content>>(\n\t({ children, className, sideOffset = 4, ...props }, ref) => (\n\t\t<Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"z-50 overflow-hidden rounded-md bg-tooltip px-3 py-1.5 text-sm text-tooltip shadow animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95\",\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</Content>\n\t),\n);\nTooltipContent.displayName = \"TooltipContent\";\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"mappings":"wCAAA,OAAS,WAAAA,EAAS,YAAAC,EAAU,QAAAC,EAAM,WAAAC,MAAe,0BACjD,OAAS,cAAAC,MAAkB,QAQ1B,cAAAC,MAAA,oBADD,IAAMC,EAAkB,CAAC,CAAE,cAAAC,EAAgB,EAAG,GAAGC,CAAM,IACtDH,EAACI,EAAA,CAAS,cAAeF,GAAiB,EAAI,GAAGC,EAAO,EAGnDE,EAAUC,EAEVC,EAAiBC,EAEjBC,EAAiBC,EACtB,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGV,CAAM,EAAGW,IACnDd,EAACe,EAAA,CACA,IAAKD,EACL,WAAYD,EACZ,UAAWG,EACV,kWACAJ,CACD,EACC,GAAGT,EAEH,SAAAQ,EACF,CAEF,EACAF,EAAe,YAAc","names":["Content","Provider","Root","Trigger","forwardRef","jsx","TooltipProvider","delayDuration","props","Provider","Tooltip","Root","TooltipTrigger","Trigger","TooltipContent","forwardRef","children","className","sideOffset","ref","Content","cx"]}
1
+ {"version":3,"sources":["../packages/tooltip/src/tooltip.tsx"],"sourcesContent":["import { Content, Provider, Root, Trigger } from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cx } from \"../../cx\";\n\n/**\n * Wraps your app to provide global functionality to your tooltips.\n * Only one instance of this component should be rendered in your app, preferably at the root.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst TooltipProvider = ({ delayDuration = 0, ...props }: ComponentPropsWithoutRef<typeof Provider>) => (\n\t<Provider delayDuration={delayDuration ?? 0} {...props} />\n);\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst Tooltip = Root;\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst TooltipTrigger = Trigger;\n\n/**\n * The content to render inside the tooltip.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst TooltipContent = forwardRef<ElementRef<typeof Content>, ComponentPropsWithoutRef<typeof Content>>(\n\t({ children, className, sideOffset = 4, ...props }, ref) => (\n\t\t<Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"z-50 overflow-hidden rounded-md bg-tooltip px-3 py-1.5 text-sm text-tooltip shadow animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95\",\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</Content>\n\t),\n);\nTooltipContent.displayName = \"TooltipContent\";\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n};\n"],"mappings":"wCAAA,OAAS,WAAAA,EAAS,YAAAC,EAAU,QAAAC,EAAM,WAAAC,MAAe,0BACjD,OAAS,cAAAC,MAAkB,QAc1B,cAAAC,MAAA,oBADD,IAAMC,EAAkB,CAAC,CAAE,cAAAC,EAAgB,EAAG,GAAGC,CAAM,IACtDH,EAACI,EAAA,CAAS,cAAeF,GAAiB,EAAI,GAAGC,EAAO,EAanDE,EAAUC,EAUVC,EAAiBC,EAUjBC,EAAiBC,EACtB,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGV,CAAM,EAAGW,IACnDd,EAACe,EAAA,CACA,IAAKD,EACL,WAAYD,EACZ,UAAWG,EACV,kWACAJ,CACD,EACC,GAAGT,EAEH,SAAAQ,EACF,CAEF,EACAF,EAAe,YAAc","names":["Content","Provider","Root","Trigger","forwardRef","jsx","TooltipProvider","delayDuration","props","Provider","Tooltip","Root","TooltipTrigger","Trigger","TooltipContent","forwardRef","children","className","sideOffset","ref","Content","cx"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "mantle is ngrok's UI library and design system.",
4
4
  "author": "ngrok",
5
5
  "license": "MIT",
6
- "version": "0.1.38",
6
+ "version": "0.1.40",
7
7
  "homepage": "https://mantle.ngrok.com",
8
8
  "repository": {
9
9
  "type": "git",
@@ -24,7 +24,7 @@
24
24
  "node": ">=20.0.0"
25
25
  },
26
26
  "dependencies": {
27
- "@headlessui/react": "2.1.1",
27
+ "@headlessui/react": "2.1.2",
28
28
  "@radix-ui/react-dialog": "1.1.1",
29
29
  "@radix-ui/react-dropdown-menu": "2.1.1",
30
30
  "@radix-ui/react-popover": "1.1.1",
@@ -41,10 +41,10 @@
41
41
  "@uidotdev/usehooks": "2.4.1",
42
42
  "class-variance-authority": "0.7.0",
43
43
  "clsx": "2.1.1",
44
- "isbot": "5.1.11",
44
+ "isbot": "5.1.12",
45
45
  "prismjs": "1.29.0",
46
46
  "react-day-picker": "8.10.1",
47
- "tailwind-merge": "2.3.0",
47
+ "tailwind-merge": "2.4.0",
48
48
  "tailwindcss-animate": "1.0.7",
49
49
  "tiny-invariant": "1.3.3"
50
50
  },
@@ -53,18 +53,19 @@
53
53
  "@ianvs/prettier-plugin-sort-imports": "4.3.0",
54
54
  "@phosphor-icons/react": "2.1.7",
55
55
  "@remix-run/dev": "2.10.2",
56
- "@testing-library/dom": "10.3.0",
56
+ "@testing-library/dom": "10.3.1",
57
57
  "@testing-library/react": "16.0.0",
58
58
  "@testing-library/user-event": "14.5.2",
59
59
  "@types/bun": "latest",
60
- "@types/node": "20.14.9",
60
+ "@types/node": "20.14.10",
61
61
  "@types/prismjs": "1.26.4",
62
62
  "@types/react": "18.3.3",
63
63
  "@types/react-dom": "18.3.0",
64
64
  "@vitejs/plugin-react": "4.3.1",
65
- "@vitest/ui": "1.6.0",
65
+ "@vitest/ui": "2.0.2",
66
66
  "autoprefixer": "10.4.19",
67
- "browserslist": "4.23.1",
67
+ "browserslist": "4.23.2",
68
+ "bun-types": "1.1.18",
68
69
  "commander": "12.1.0",
69
70
  "copyfiles": "2.4.1",
70
71
  "date-fns": "3.6.0",
@@ -81,7 +82,7 @@
81
82
  "typescript": "5.5.3",
82
83
  "vite": "5.3.3",
83
84
  "vite-tsconfig-paths": "4.3.2",
84
- "vitest": "1.6.0",
85
+ "vitest": "2.0.2",
85
86
  "vitest-dom": "0.1.1",
86
87
  "zod": "3.23.8"
87
88
  },