@ngrok/mantle 0.8.1 → 0.9.0
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/README.md +100 -1
- package/dist/badge.d.ts +3 -2
- package/dist/badge.js +1 -1
- package/dist/badge.js.map +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/tooltip.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,100 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ngrok-oss/mantle/HEAD/.github/mantle-dark.svg">
|
|
4
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ngrok-oss/mantle/HEAD/.github/mantle-light.svg">
|
|
5
|
+
<img alt="Mantle" src="https://raw.githubusercontent.com/ngrok-oss/mantle/HEAD/.github/mantle-light.svg" width="176" height="34" style="max-width: 100%;">
|
|
6
|
+
</picture>
|
|
7
|
+
</p>
|
|
8
|
+
<h1 align="center">
|
|
9
|
+
Mantle Design System
|
|
10
|
+
</h1>
|
|
11
|
+
|
|
12
|
+
[Mantle](https://mantle.ngrok.com) is [ngrok](https://ngrok.com/)’s UI library and design system. It’s inspired by [shadcn/ui](https://ui.shadcn.com) and uses [Radix](https://www.radix-ui.com) with [Tailwind](https://tailwindcss.com/) for styling. It’s documented using [Remix](https://remix.run/docs).
|
|
13
|
+
|
|
14
|
+
## Getting Started
|
|
15
|
+
|
|
16
|
+
Install `@ngrok/mantle` with your preferred package manager:
|
|
17
|
+
|
|
18
|
+
| package manager | command |
|
|
19
|
+
| --------------- | ---------------------------- |
|
|
20
|
+
| npm | npm install -E @ngrok/mantle |
|
|
21
|
+
| yarn | yarn add -E @ngrok/mantle |
|
|
22
|
+
| pnpm | pnpm add -E @ngrok/mantle |
|
|
23
|
+
| bun | bun add -E @ngrok/mantle |
|
|
24
|
+
|
|
25
|
+
Then, add the [preset](https://tailwindcss.com/docs/presets) and mantle content to your tailwind configuration.
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import { createRequire } from "node:module";
|
|
29
|
+
import { mantlePreset, resolveMantleContentGlob } from "@ngrok/mantle/tailwind-preset";
|
|
30
|
+
import type { Config } from "tailwindcss";
|
|
31
|
+
|
|
32
|
+
const require = createRequire(import.meta.url);
|
|
33
|
+
|
|
34
|
+
export default {
|
|
35
|
+
presets: [mantlePreset],
|
|
36
|
+
content: [resolveMantleContentGlob(require), "./app/**/*.tsx"], // 👈 don't forget to swap out app content glob here!
|
|
37
|
+
// ... the rest of your tailwind config!
|
|
38
|
+
} satisfies Config;
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Next, check out the [Overview & Setup](https://mantle.ngrok.com/) and [Theme Provider](https://mantle.ngrok.com/components/theme-provider) usage docs and start using mantle components in your application!
|
|
42
|
+
|
|
43
|
+
### Prerequisites
|
|
44
|
+
|
|
45
|
+
The following prerequisites are required to contribute to `@ngrok/mantle`.
|
|
46
|
+
We walk through the [tooling installation](#installation) steps below.
|
|
47
|
+
|
|
48
|
+
- [Node 20](https://nodejs.org/en/download)
|
|
49
|
+
- [pnpm 9](https://pnpm.io/installation#using-npm)
|
|
50
|
+
- [nvm](https://github.com/nvm-sh/nvm)
|
|
51
|
+
|
|
52
|
+
### Installation
|
|
53
|
+
|
|
54
|
+
Install the prerequisites through either the [automated](#automated-installation) or [manual](#manual-installation) installation guides.
|
|
55
|
+
|
|
56
|
+
#### Automated Installation
|
|
57
|
+
|
|
58
|
+
We use [direnv](https://direnv.net/) to assist you with setting up all of the required tooling.
|
|
59
|
+
Prefer to install and manage the tooling yourself? See [the manual installation instructions below](#manual-installation).
|
|
60
|
+
|
|
61
|
+
First, install `direnv`:
|
|
62
|
+
|
|
63
|
+
| OS | command |
|
|
64
|
+
| ------ | ----------------------- |
|
|
65
|
+
| macOS | brew install direnv |
|
|
66
|
+
| ubuntu | sudo apt install direnv |
|
|
67
|
+
|
|
68
|
+
For all other OSes, see the [direnv installation guide](https://direnv.net/docs/installation.html).
|
|
69
|
+
|
|
70
|
+
> [!NOTE]
|
|
71
|
+
> Don't forget to [set up direnv integration with your shell](https://direnv.net/docs/hook.html).
|
|
72
|
+
|
|
73
|
+
Next, clone the repo and move into the directory:
|
|
74
|
+
|
|
75
|
+
```sh
|
|
76
|
+
git clone git@github.com:ngrok-oss/mantle.git
|
|
77
|
+
cd frontend
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Next, run:
|
|
81
|
+
|
|
82
|
+
```sh
|
|
83
|
+
direnv allow
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
> [!WARNING]
|
|
87
|
+
> If `direnv allow` does nothing for you (you should see things happening!), consider following the [guides to integrate direnv with your shell](https://direnv.net/docs/hook.html) and then try `direnv allow` again! As a last resort, you can follow the [manual installation instructions up above](#manual-installation).
|
|
88
|
+
|
|
89
|
+
This will install `nvm` (if not already installed) as well as set the correct `node` and `pnpm` versions for you.
|
|
90
|
+
It will also run `pnpm install` at the end to install all `node_modules`.
|
|
91
|
+
|
|
92
|
+
#### Manual Installation
|
|
93
|
+
|
|
94
|
+
If you prefer to manually manage and install the tooling yourself, follow these steps:
|
|
95
|
+
|
|
96
|
+
1. Install [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) or your node version manager of choice.
|
|
97
|
+
2. Ensure that `node 20` is installed. With `nvm`, run `nvm install`.
|
|
98
|
+
3. Enable `pnpm` with `corepack`: `corepack enable pnpm`
|
|
99
|
+
4. Install `pnpm` with `corepack`: `corepack install`
|
|
100
|
+
5. Install project dependencies with `pnpm`: `pnpm install`
|
package/dist/badge.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { W as WithAsChild } from './as-child-Cvu56SuO.js';
|
|
3
4
|
import { Color } from './color.js';
|
|
4
5
|
|
|
5
6
|
declare const appearances: readonly ["muted"];
|
|
6
7
|
type Appearance = (typeof appearances)[number];
|
|
7
|
-
type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
|
|
8
|
+
type BadgeProps = HTMLAttributes<HTMLSpanElement> & WithAsChild & {
|
|
8
9
|
/**
|
|
9
10
|
* The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.
|
|
10
11
|
*/
|
|
@@ -21,6 +22,6 @@ type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
|
|
|
21
22
|
/**
|
|
22
23
|
* A Badge is a non-interactive component used to highlight important information or to visually indicate the status of an item.
|
|
23
24
|
*/
|
|
24
|
-
declare const Badge: ({ appearance, children, className, color, icon, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
|
|
25
|
+
declare const Badge: ({ appearance, asChild, children, className, color, icon, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
|
|
25
26
|
|
|
26
27
|
export { Badge, type BadgeProps };
|
package/dist/badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as s}from"./chunk-ZOQ33WW5.js";import{a as c}from"./chunk-EW5CFGXT.js";import{Slot as f}from"@radix-ui/react-slot";import{Children as y,cloneElement as h,isValidElement as C}from"react";import n from"tiny-invariant";import{Fragment as N,jsx as o,jsxs as d}from"react/jsx-runtime";var k=({appearance:t,asChild:e=!1,children:l,className:m,color:i="neutral",icon:r,...g})=>{let u=B(i,t),b=A(i,t),p=c("inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 text-sm font-medium sm:text-xs",r&&"ps-1",u,b,m);if(e){let a=y.only(l);n(C(a),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let x=a.props?.children;return o(f,{className:p,...g,children:h(a,{},d(N,{children:[r&&o(s,{className:"size-5 sm:size-4",svg:r}),x]}))})}return d("span",{className:p,...g,children:[r&&o(s,{className:"size-5 sm:size-4",svg:r}),l]})};var w={amber:"bg-amber-500/20",blue:"bg-blue-500/20",cyan:"bg-cyan-500/20",emerald:"bg-emerald-500/20",fuchsia:"bg-fuchsia-500/20",gray:"bg-gray-500/20",green:"bg-green-500/20",indigo:"bg-indigo-500/20",lime:"bg-lime-500/20",orange:"bg-orange-500/20",pink:"bg-pink-500/20",purple:"bg-purple-500/20",red:"bg-red-500/20",rose:"bg-rose-500/20",sky:"bg-sky-500/20",teal:"bg-teal-500/20",violet:"bg-violet-500/20",yellow:"bg-yellow-500/20",accent:"bg-accent-500/20",danger:"bg-danger-500/20",neutral:"bg-neutral-500/20",success:"bg-success-500/20",warning:"bg-warning-500/20"};function B(t,e){switch(e){case"muted":return w[t];default:n(!1,`Invalid appearance: ${String(e)}`)}}var v={amber:"text-amber-700",blue:"text-blue-700",cyan:"text-cyan-700",emerald:"text-emerald-700",fuchsia:"text-fuchsia-700",gray:"text-gray-700",green:"text-green-700",indigo:"text-indigo-700",lime:"text-lime-700",orange:"text-orange-700",pink:"text-pink-700",purple:"text-purple-700",red:"text-red-700",rose:"text-rose-700",sky:"text-sky-700",teal:"text-teal-700",violet:"text-violet-700",yellow:"text-yellow-700",accent:"text-accent-700",danger:"text-danger-700",neutral:"text-neutral-700",success:"text-success-700",warning:"text-warning-700"};function A(t,e){switch(e){case"muted":return v[t];default:n(!1,`Invalid appearance: ${String(e)}`)}}export{k as Badge};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
package/dist/badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { Children, cloneElement, isValidElement, type HTMLAttributes, type ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconBase } from \"../icon/_icon-base.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = HTMLAttributes<HTMLSpanElement> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t\t */\n\t\tcolor?: Color;\n\t\t/**\n\t\t * The icon to render inside the badge.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The visual style of the badge.\n\t\t */\n\t\tappearance: Appearance;\n\t};\n\n/**\n * A Badge is a non-interactive component used to highlight important information or to visually indicate the status of an item.\n */\nconst Badge = ({ appearance, asChild = false, children, className, color = \"neutral\", icon, ...props }: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\tconst badgeClasses = cx(\n\t\t\"inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 text-sm font-medium sm:text-xs\",\n\t\ticon && \"ps-1\",\n\t\tbgColor,\n\t\ttextColor,\n\t\tclassName,\n\t);\n\n\tif (asChild) {\n\t\tconst singleChild = Children.only(children);\n\t\tinvariant(\n\t\t\tisValidElement<BadgeProps>(singleChild),\n\t\t\t\"When using `asChild`, Badge must be passed a single child as a JSX tag.\",\n\t\t);\n\t\tconst grandchildren = singleChild.props?.children;\n\n\t\treturn (\n\t\t\t<Slot className={badgeClasses} {...props}>\n\t\t\t\t{cloneElement(\n\t\t\t\t\tsingleChild,\n\t\t\t\t\t{},\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && <IconBase className=\"size-5 sm:size-4\" svg={icon} />}\n\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t</>,\n\t\t\t\t)}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span className={badgeClasses} {...props}>\n\t\t\t{icon && <IconBase className=\"size-5 sm:size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\n\n// MARK: - Exports\n\nexport { Badge };\n\nexport type { BadgeProps };\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"gFAAA,OAAS,QAAAA,MAAY,uBACrB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,kBAAAC,MAA2D,QAC5F,OAAOC,MAAe,iBAqDjB,mBAAAC,EACU,OAAAC,EADV,QAAAC,MAAA,oBAzBL,IAAMC,EAAQ,CAAC,CAAE,WAAAC,EAAY,QAAAC,EAAU,GAAO,SAAAC,EAAU,UAAAC,EAAW,MAAAC,EAAQ,UAAW,KAAAC,EAAM,GAAGC,CAAM,IAAkB,CACtH,IAAMC,EAAUC,EAAeJ,EAAOJ,CAAU,EAC1CS,EAAYC,EAAiBN,EAAOJ,CAAU,EAE9CW,EAAeC,EACpB,oHACAP,GAAQ,OACRE,EACAE,EACAN,CACD,EAEA,GAAIF,EAAS,CACZ,IAAMY,EAAcC,EAAS,KAAKZ,CAAQ,EAC1Ca,EACCC,EAA2BH,CAAW,EACtC,yEACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCK,EAACC,EAAA,CAAK,UAAWR,EAAe,GAAGL,EACjC,SAAAc,EACAP,EACA,CAAC,EACDQ,EAAAC,EAAA,CACE,UAAAjB,GAAQa,EAACK,EAAA,CAAS,UAAU,mBAAmB,IAAKlB,EAAM,EAC1DY,GACF,CACD,EACD,CAEF,CAEA,OACCI,EAAC,QAAK,UAAWV,EAAe,GAAGL,EACjC,UAAAD,GAAQa,EAACK,EAAA,CAAS,UAAU,mBAAmB,IAAKlB,EAAM,EAC1DH,GACF,CAEF,EAUA,IAAMsB,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,QAAS,oBACT,QAAS,oBACT,QAAS,mBACV,EAEA,SAASC,EAAeC,EAAcC,EAAwB,CAC7D,OAAQA,EAAY,CACnB,IAAK,QACJ,OAAOH,EAAmBE,CAAK,EAChC,QACCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAC9D,CACD,CAEA,IAAME,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,QAAS,mBACT,QAAS,mBACT,QAAS,kBACV,EAEA,SAASC,EAAiBJ,EAAcC,EAAwB,CAC/D,OAAQA,EAAY,CACnB,IAAK,QACJ,OAAOE,EAAqBH,CAAK,EAClC,QACCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAC9D,CACD","names":["Slot","Children","cloneElement","isValidElement","invariant","Fragment","jsx","jsxs","Badge","appearance","asChild","children","className","color","icon","props","bgColor","computeBgColor","textColor","computeTextColor","badgeClasses","cx","singleChild","Children","invariant","isValidElement","grandchildren","jsx","Slot","cloneElement","jsxs","Fragment","IconBase","mutedBgColorLookup","computeBgColor","color","appearance","invariant","textColorMutedLookup","computeTextColor"]}
|
package/dist/tooltip.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e}from"./chunk-EW5CFGXT.js";import{Content as
|
|
1
|
+
import{a as e}from"./chunk-EW5CFGXT.js";import{Content as p,Provider as m,Root as f,Trigger as s}from"@radix-ui/react-tooltip";import{forwardRef as l}from"react";import{jsx as r}from"react/jsx-runtime";var T=({delayDuration:o=0,...t})=>r(m,{delayDuration:o??0,...t}),C=f,c=s,i=l(({children:o,className:t,sideOffset:n=4,...d},a)=>r(p,{ref:a,sideOffset:n,className:e("bg-tooltip text-tooltip 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 z-50 max-w-64 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow",t),...d,children:o}));i.displayName="TooltipContent";export{C as Tooltip,i as TooltipContent,T as TooltipProvider,c as TooltipTrigger};
|
|
2
2
|
//# sourceMappingURL=tooltip.js.map
|
package/dist/tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/tooltip/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 \"../../utils/cx/cx.js\";\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\"bg-tooltip text-tooltip 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 z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow\",\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,
|
|
1
|
+
{"version":3,"sources":["../src/components/tooltip/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 \"../../utils/cx/cx.js\";\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\"bg-tooltip text-tooltip 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 z-50 max-w-64 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow\",\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,2WACAJ,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"]}
|