@ngrok/mantle 0.25.1 → 0.25.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/calendar.js +1 -1
- package/dist/calendar.js.map +1 -1
- package/dist/popover.d.ts +11 -1
- package/dist/popover.js +1 -1
- package/dist/popover.js.map +1 -1
- package/package.json +1 -1
package/dist/calendar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import{a as o}from"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as e}from"./chunk-AZ56JGNY.js";import{CaretLeft as m}from"@phosphor-icons/react/CaretLeft";import{CaretRight as p}from"@phosphor-icons/react/CaretRight";import{DayPicker as f}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function n({className:d,classNames:i,showOutsideDays:l=!1,...r}){return t(f,{animate:!1,components:{Chevron:s=>{let c=s.orientation==="left"?t(m,{}):t(p,{});return t(o,{svg:c,className:"size-4"})}},classNames:{root:e("isolate",d),button_next:e(a({appearance:"ghost",priority:"neutral"}),"size-7 absolute right-0"),button_previous:e(a({appearance:"ghost",priority:"neutral"}),"size-7 absolute left-0"),caption_label:"text-sm font-medium",day:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md",r.mode==="range"?"first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md":""),day_button:"day size-full rounded-md [&:not([aria-selected],[disabled])]:hover:bg-filled-accent/15",disabled:"text-muted opacity-50",hidden:"invisible",month:"space-y-4",month_caption:"flex justify-center pt-1 relative items-center",month_grid:"w-full border-collapse space-y-1",months:"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative",nav:"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10",outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",range_middle:"day-range-middle [&:not([disabled])]:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none [&:not([disabled])]:aria-selected:hover:bg-filled-accent/25",range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",selected:"[&:not([disabled])]:bg-filled-accent text-on-filled [&:not([disabled])]:hover:bg-filled-accent",today:"[&:not([aria-selected],_[disabled])]:text-accent-600 font-medium [&:not([aria-selected],_[disabled])]:bg-filled-accent/10 rounded-md",week:"flex w-full mt-1",weekday:"text-body w-7 text-[0.8rem] text-center font-normal",weekdays:"flex",...i},showOutsideDays:l,...r})}n.displayName="Calendar";export{n as Calendar};
|
|
1
|
+
import{a}from"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import{a as o}from"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as e}from"./chunk-AZ56JGNY.js";import{CaretLeft as m}from"@phosphor-icons/react/CaretLeft";import{CaretRight as p}from"@phosphor-icons/react/CaretRight";import{DayPicker as f}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function n({className:d,classNames:i,showOutsideDays:l=!1,...r}){return t(f,{animate:!1,components:{Chevron:s=>{let c=s.orientation==="left"?t(m,{}):t(p,{});return t(o,{svg:c,className:"size-4"})}},classNames:{root:e("isolate",d),button_next:e(a({appearance:"ghost",priority:"neutral"}),"size-7 absolute right-0"),button_previous:e(a({appearance:"ghost",priority:"neutral"}),"size-7 absolute left-0"),caption_label:"text-sm font-medium",day:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md",r.mode==="range"?"first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md":""),day_button:"day size-full rounded-md [&:not([aria-selected],[disabled])]:hover:bg-filled-accent/15",disabled:"text-muted opacity-50",hidden:"invisible",month:"space-y-4",month_caption:"flex justify-center pt-1 relative items-center",month_grid:"w-full border-collapse space-y-1",months:"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min",nav:"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10",outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",range_middle:"day-range-middle [&:not([disabled])]:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none [&:not([disabled])]:aria-selected:hover:bg-filled-accent/25",range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",selected:"[&:not([disabled])]:bg-filled-accent text-on-filled [&:not([disabled])]:hover:bg-filled-accent",today:"[&:not([aria-selected],_[disabled])]:text-accent-600 font-medium [&:not([aria-selected],_[disabled])]:bg-filled-accent/10 rounded-md",week:"flex w-full mt-1",weekday:"text-body w-7 text-[0.8rem] text-center font-normal",weekdays:"flex",...i},showOutsideDays:l,...r})}n.displayName="Calendar";export{n as Calendar};
|
|
2
2
|
//# sourceMappingURL=calendar.js.map
|
package/dist/calendar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeft } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/CaretRight\";\nimport type { ComponentProps } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { buttonVariants } from \"../button/button.js\";\nimport { Icon } from \"../icon/icon.js\";\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({\n\tclassName,\n\tclassNames,\n\tshowOutsideDays = false,\n\t...props\n}: CalendarProps) {\n\treturn (\n\t\t<DayPicker\n\t\t\tanimate={false}\n\t\t\tcomponents={{\n\t\t\t\tChevron: (iconProps) => {\n\t\t\t\t\tconst icon =\n\t\t\t\t\t\ticonProps.orientation === \"left\" ? <CaretLeft /> : <CaretRight />;\n\n\t\t\t\t\treturn <Icon svg={icon} className=\"size-4\" />;\n\t\t\t\t},\n\t\t\t}}\n\t\t\tclassNames={{\n\t\t\t\troot: cx(\"isolate\", className),\n\t\t\t\tbutton_next: cx(\n\t\t\t\t\tbuttonVariants({ appearance: \"ghost\", priority: \"neutral\" }),\n\t\t\t\t\t\"size-7 absolute right-0\",\n\t\t\t\t),\n\t\t\t\tbutton_previous: cx(\n\t\t\t\t\tbuttonVariants({ appearance: \"ghost\", priority: \"neutral\" }),\n\t\t\t\t\t\"size-7 absolute left-0\",\n\t\t\t\t),\n\t\t\t\tcaption_label: \"text-sm font-medium\",\n\t\t\t\tday: cx(\n\t\t\t\t\t\"overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md\",\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_button:\n\t\t\t\t\t\"day size-full rounded-md [&:not([aria-selected],[disabled])]:hover:bg-filled-accent/15\",\n\t\t\t\tdisabled: \"text-muted opacity-50\",\n\t\t\t\thidden: \"invisible\",\n\t\t\t\tmonth: \"space-y-4\",\n\t\t\t\tmonth_caption: \"flex justify-center pt-1 relative items-center\",\n\t\t\t\tmonth_grid: \"w-full border-collapse space-y-1\",\n\t\t\t\tmonths:\n\t\t\t\t\t\"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative\",\n\t\t\t\tnav: \"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10\",\n\t\t\t\toutside:\n\t\t\t\t\t\"day-outside aria-selected:text-on-filled opacity-50 text-muted\",\n\t\t\t\trange_end: \"day-range-end [&:not(.day-range-start)]:rounded-l-none\",\n\t\t\t\trange_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\trange_start: \"day-range-start [&:not(.day-range-end)]:rounded-r-none\",\n\t\t\t\tselected:\n\t\t\t\t\t\"[&:not([disabled])]:bg-filled-accent text-on-filled [&:not([disabled])]:hover:bg-filled-accent\",\n\t\t\t\ttoday:\n\t\t\t\t\t\"[&:not([aria-selected],_[disabled])]:text-accent-600 font-medium [&:not([aria-selected],_[disabled])]:bg-filled-accent/10 rounded-md\",\n\t\t\t\tweek: \"flex w-full mt-1\",\n\t\t\t\tweekday: \"text-body w-7 text-[0.8rem] text-center font-normal\",\n\t\t\t\tweekdays: \"flex\",\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tshowOutsideDays={showOutsideDays}\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\nexport type {\n\t//,\n\tDateRange,\n} from \"react-day-picker\";\n"],"mappings":"mOAEA,OAAS,aAAAA,MAAiB,kCAC1B,OAAS,cAAAC,MAAkB,mCAE3B,OAAS,aAAAC,MAAiB,mBA2Be,cAAAC,MAAA,oBAZzC,SAASC,EAAS,CACjB,UAAAC,EACA,WAAAC,EACA,gBAAAC,EAAkB,GAClB,GAAGC,CACJ,EAAkB,CACjB,OACCL,EAACM,EAAA,CACA,QAAS,GACT,WAAY,CACX,QAAUC,GAAc,CACvB,IAAMC,EACLD,EAAU,cAAgB,OAASP,EAACS,EAAA,EAAU,EAAKT,EAACU,EAAA,EAAW,EAEhE,OAAOV,EAACW,EAAA,CAAK,IAAKH,EAAM,UAAU,SAAS,CAC5C,CACD,EACA,WAAY,CACX,KAAMI,EAAG,UAAWV,CAAS,EAC7B,YAAaU,EACZC,EAAe,CAAE,WAAY,QAAS,SAAU,SAAU,CAAC,EAC3D,yBACD,EACA,gBAAiBD,EAChBC,EAAe,CAAE,WAAY,QAAS,SAAU,SAAU,CAAC,EAC3D,wBACD,EACA,cAAe,sBACf,IAAKD,EACJ,6GACAP,EAAM,OAAS,QACZ,yFACA,EACJ,EACA,WACC,yFACD,SAAU,wBACV,OAAQ,YACR,MAAO,YACP,cAAe,iDACf,WAAY,mCACZ,OACC,
|
|
1
|
+
{"version":3,"sources":["../src/components/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeft } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/CaretRight\";\nimport type { ComponentProps } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { buttonVariants } from \"../button/button.js\";\nimport { Icon } from \"../icon/icon.js\";\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({\n\tclassName,\n\tclassNames,\n\tshowOutsideDays = false,\n\t...props\n}: CalendarProps) {\n\treturn (\n\t\t<DayPicker\n\t\t\tanimate={false}\n\t\t\tcomponents={{\n\t\t\t\tChevron: (iconProps) => {\n\t\t\t\t\tconst icon =\n\t\t\t\t\t\ticonProps.orientation === \"left\" ? <CaretLeft /> : <CaretRight />;\n\n\t\t\t\t\treturn <Icon svg={icon} className=\"size-4\" />;\n\t\t\t\t},\n\t\t\t}}\n\t\t\tclassNames={{\n\t\t\t\troot: cx(\"isolate\", className),\n\t\t\t\tbutton_next: cx(\n\t\t\t\t\tbuttonVariants({ appearance: \"ghost\", priority: \"neutral\" }),\n\t\t\t\t\t\"size-7 absolute right-0\",\n\t\t\t\t),\n\t\t\t\tbutton_previous: cx(\n\t\t\t\t\tbuttonVariants({ appearance: \"ghost\", priority: \"neutral\" }),\n\t\t\t\t\t\"size-7 absolute left-0\",\n\t\t\t\t),\n\t\t\t\tcaption_label: \"text-sm font-medium\",\n\t\t\t\tday: cx(\n\t\t\t\t\t\"overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md\",\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_button:\n\t\t\t\t\t\"day size-full rounded-md [&:not([aria-selected],[disabled])]:hover:bg-filled-accent/15\",\n\t\t\t\tdisabled: \"text-muted opacity-50\",\n\t\t\t\thidden: \"invisible\",\n\t\t\t\tmonth: \"space-y-4\",\n\t\t\t\tmonth_caption: \"flex justify-center pt-1 relative items-center\",\n\t\t\t\tmonth_grid: \"w-full border-collapse space-y-1\",\n\t\t\t\tmonths:\n\t\t\t\t\t\"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min\",\n\t\t\t\tnav: \"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10\",\n\t\t\t\toutside:\n\t\t\t\t\t\"day-outside aria-selected:text-on-filled opacity-50 text-muted\",\n\t\t\t\trange_end: \"day-range-end [&:not(.day-range-start)]:rounded-l-none\",\n\t\t\t\trange_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\trange_start: \"day-range-start [&:not(.day-range-end)]:rounded-r-none\",\n\t\t\t\tselected:\n\t\t\t\t\t\"[&:not([disabled])]:bg-filled-accent text-on-filled [&:not([disabled])]:hover:bg-filled-accent\",\n\t\t\t\ttoday:\n\t\t\t\t\t\"[&:not([aria-selected],_[disabled])]:text-accent-600 font-medium [&:not([aria-selected],_[disabled])]:bg-filled-accent/10 rounded-md\",\n\t\t\t\tweek: \"flex w-full mt-1\",\n\t\t\t\tweekday: \"text-body w-7 text-[0.8rem] text-center font-normal\",\n\t\t\t\tweekdays: \"flex\",\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tshowOutsideDays={showOutsideDays}\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\nexport type {\n\t//,\n\tDateRange,\n} from \"react-day-picker\";\n"],"mappings":"mOAEA,OAAS,aAAAA,MAAiB,kCAC1B,OAAS,cAAAC,MAAkB,mCAE3B,OAAS,aAAAC,MAAiB,mBA2Be,cAAAC,MAAA,oBAZzC,SAASC,EAAS,CACjB,UAAAC,EACA,WAAAC,EACA,gBAAAC,EAAkB,GAClB,GAAGC,CACJ,EAAkB,CACjB,OACCL,EAACM,EAAA,CACA,QAAS,GACT,WAAY,CACX,QAAUC,GAAc,CACvB,IAAMC,EACLD,EAAU,cAAgB,OAASP,EAACS,EAAA,EAAU,EAAKT,EAACU,EAAA,EAAW,EAEhE,OAAOV,EAACW,EAAA,CAAK,IAAKH,EAAM,UAAU,SAAS,CAC5C,CACD,EACA,WAAY,CACX,KAAMI,EAAG,UAAWV,CAAS,EAC7B,YAAaU,EACZC,EAAe,CAAE,WAAY,QAAS,SAAU,SAAU,CAAC,EAC3D,yBACD,EACA,gBAAiBD,EAChBC,EAAe,CAAE,WAAY,QAAS,SAAU,SAAU,CAAC,EAC3D,wBACD,EACA,cAAe,sBACf,IAAKD,EACJ,6GACAP,EAAM,OAAS,QACZ,yFACA,EACJ,EACA,WACC,yFACD,SAAU,wBACV,OAAQ,YACR,MAAO,YACP,cAAe,iDACf,WAAY,mCACZ,OACC,6EACD,IAAK,sEACL,QACC,iEACD,UAAW,yDACX,aACC,4KACD,YAAa,yDACb,SACC,iGACD,MACC,uIACD,KAAM,mBACN,QAAS,sDACT,SAAU,OACV,GAAGF,CACJ,EACA,gBAAiBC,EAChB,GAAGC,EACL,CAEF,CACAJ,EAAS,YAAc","names":["CaretLeft","CaretRight","DayPicker","jsx","Calendar","className","classNames","showOutsideDays","props","DayPicker","iconProps","icon","CaretLeft","CaretRight","Icon","cx","buttonVariants"]}
|
package/dist/popover.d.ts
CHANGED
|
@@ -47,6 +47,16 @@ declare const PopoverClose: react.ForwardRefExoticComponent<PopoverPrimitive.Pop
|
|
|
47
47
|
*
|
|
48
48
|
* https://github.com/ngrok-oss/mantle/issues
|
|
49
49
|
*/
|
|
50
|
-
declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> &
|
|
50
|
+
declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
51
|
+
/**
|
|
52
|
+
* The preferred width of the `PopoverContent` as a tailwind `max-w-` class.
|
|
53
|
+
*
|
|
54
|
+
* By default, a `Popover`'s content width is responsive with a default
|
|
55
|
+
* preferred width: the maximum width of the `PopoverContent`
|
|
56
|
+
*
|
|
57
|
+
* @default `max-w-72`
|
|
58
|
+
*/
|
|
59
|
+
preferredWidth?: `max-w-${string}`;
|
|
60
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
51
61
|
|
|
52
62
|
export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
|
package/dist/popover.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as t}from"./chunk-AZ56JGNY.js";import*as o from"@radix-ui/react-popover";import{forwardRef as
|
|
1
|
+
import{a as t}from"./chunk-AZ56JGNY.js";import*as o from"@radix-ui/react-popover";import{forwardRef as C}from"react";import{jsx as r}from"react/jsx-runtime";var i=o.Root;i.displayName="Popover";var p=o.Trigger;p.displayName="PopoverTrigger";var a=o.Anchor;a.displayName="PopoverAnchor";var n=o.Close;n.displayName="PopoverClose";var s=C(({align:P="center",className:d,onClick:m,preferredWidth:v="max-w-72",sideOffset:f=4,...l},c)=>r(o.Portal,{children:r(o.Content,{align:P,className:t("text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-none",v,d),onClick:e=>{e.stopPropagation(),m?.(e)},ref:c,sideOffset:f,...l})}));s.displayName="PopoverContent";export{i as Popover,a as PopoverAnchor,n as PopoverClose,s as PopoverContent,p as PopoverTrigger};
|
|
2
2
|
//# sourceMappingURL=popover.js.map
|
package/dist/popover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\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;\nPopover.displayName = \"Popover\";\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;\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\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 PopoverAnchor = PopoverPrimitive.Anchor;\nPopoverAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open 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 PopoverClose = PopoverPrimitive.Close;\nPopoverClose.displayName = \"PopoverClose\";\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<\
|
|
1
|
+
{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\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;\nPopover.displayName = \"Popover\";\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;\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\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 PopoverAnchor = PopoverPrimitive.Anchor;\nPopoverAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open 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 PopoverClose = PopoverPrimitive.Close;\nPopoverClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<\n\ttypeof PopoverPrimitive.Content\n> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\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<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-none\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nPopoverContent.displayName = \"PopoverContent\";\n\nexport {\n\t//,\n\tPopover,\n\tPopoverAnchor,\n\tPopoverClose,\n\tPopoverContent,\n\tPopoverTrigger,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAsFxB,cAAAC,MAAA,oBAxEH,IAAMC,EAA2B,OACjCA,EAAQ,YAAc,UAUtB,IAAMC,EAAkC,UACxCA,EAAe,YAAc,iBAU7B,IAAMC,EAAiC,SACvCA,EAAc,YAAc,gBAU5B,IAAMC,EAAgC,QACtCA,EAAa,YAAc,eAwB3B,IAAMC,EAAiBC,EACtB,CACC,CAEC,MAAAC,EAAQ,SACR,UAAAC,EACA,QAAAC,EACA,eAAAC,EAAiB,WACjB,WAAAC,EAAa,EACb,GAAGC,CACJ,EACAC,IAEAb,EAAkB,SAAjB,CACA,SAAAA,EAAkB,UAAjB,CACA,MAAOO,EACP,UAAWO,EACV,maACAJ,EACAF,CACD,EACA,QAAUO,GAAU,CAKnBA,EAAM,gBAAgB,EACtBN,IAAUM,CAAK,CAChB,EACA,IAAKF,EACL,WAAYF,EACX,GAAGC,EACL,EACD,CAEF,EACAP,EAAe,YAAc","names":["PopoverPrimitive","forwardRef","jsx","Popover","PopoverTrigger","PopoverAnchor","PopoverClose","PopoverContent","forwardRef","align","className","onClick","preferredWidth","sideOffset","props","ref","cx","event"]}
|