@ngrok/mantle 0.1.39 → 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.
- package/dist/calendar.d.ts +8 -0
- package/dist/calendar.js.map +1 -1
- package/dist/popover.d.ts +26 -0
- package/dist/popover.js +1 -1
- package/dist/popover.js.map +1 -1
- package/dist/tooltip.d.ts +32 -0
- package/dist/tooltip.js.map +1 -1
- package/package.json +1 -1
package/dist/calendar.d.ts
CHANGED
|
@@ -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;
|
package/dist/calendar.js.map
CHANGED
|
@@ -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 {
|
|
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/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
|
|
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
|
package/dist/popover.js.map
CHANGED
|
@@ -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 =
|
|
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/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 };
|
package/dist/tooltip.js.map
CHANGED
|
@@ -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 {
|
|
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"]}
|