ionbase-ui 0.13.0 → 0.16.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 +28 -38
- package/dist/components/Link.d.ts.map +1 -1
- package/dist/components/Link.js +15 -2
- package/dist/components/Link.js.map +1 -1
- package/dist/components/Popover.d.ts +47 -0
- package/dist/components/Popover.d.ts.map +1 -0
- package/dist/components/Popover.js +71 -0
- package/dist/components/Popover.js.map +1 -0
- package/dist/components/Toast.d.ts +57 -0
- package/dist/components/Toast.d.ts.map +1 -0
- package/dist/components/Toast.js +81 -0
- package/dist/components/Toast.js.map +1 -0
- package/dist/components/dom-props.d.ts +30 -0
- package/dist/components/dom-props.d.ts.map +1 -1
- package/dist/components/dom-props.js +46 -0
- package/dist/components/dom-props.js.map +1 -1
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/styles/index.css +2 -0
- package/dist/styles/popover.css +185 -0
- package/dist/styles/toast.css +216 -0
- package/dist/styles/tokens/base.css +1 -1
- package/dist/styles/tokens/theme-dark.css +2 -2
- package/dist/tokens/index.d.ts +3 -3
- package/dist/tokens/index.js +3 -3
- package/dist/tokens/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -38,19 +38,30 @@ tokens but never fetches them: your framework knows its own font strategy
|
|
|
38
38
|
design system reaching out to a third-party host at CSS parse time is not a
|
|
39
39
|
decision it should make for you.
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
Two families are used by the shipped components and type scale:
|
|
42
42
|
|
|
43
|
-
| Family | Token
|
|
44
|
-
| ----------------- |
|
|
45
|
-
| **Host Grotesk** | `--font-family-sans`
|
|
46
|
-
| **STIX Two Text** | `--font-family-serif
|
|
47
|
-
| **Merriweather** | `--font-family-serif` | 700 | `.ion-text-editorial-*` |
|
|
43
|
+
| Family | Token | Weights | Used by |
|
|
44
|
+
| ----------------- | --------------------- | ------------- | --------------------------------------------- |
|
|
45
|
+
| **Host Grotesk** | `--font-family-sans` | 400, 500, 600 | Body, every component, most of the type scale |
|
|
46
|
+
| **STIX Two Text** | `--font-family-serif` | 700 | `.ion-text-editorial-*` |
|
|
48
47
|
|
|
49
|
-
|
|
48
|
+
Both are also used in italic where your content uses italic; none of the
|
|
50
49
|
components require it.
|
|
51
50
|
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
Three more families exist as tokens but are referenced by nothing in this
|
|
52
|
+
package — load them only if you use the variable yourself:
|
|
53
|
+
|
|
54
|
+
| Token | Family | Note |
|
|
55
|
+
| ----------------------------- | ------------- | --------------------------------------- |
|
|
56
|
+
| `--font-family-mono` | Space Mono | 400/700 |
|
|
57
|
+
| `--font-family-serif-display` | STIX Two Text | resolves to the same family as `-serif` |
|
|
58
|
+
| `--font-family-merriweather` | Merriweather | primitive only, held for a future brand |
|
|
59
|
+
|
|
60
|
+
**These two swap points are supported API.** `--font-family-sans` and
|
|
61
|
+
`--font-family-serif` are the intended place to put your own typefaces —
|
|
62
|
+
re-declare them after importing the stylesheet and the whole type scale
|
|
63
|
+
follows, because every text class references the token rather than a family
|
|
64
|
+
name. See [next/font](#nextfont) below for the shape of that override.
|
|
54
65
|
|
|
55
66
|
### If you skip this
|
|
56
67
|
|
|
@@ -59,8 +70,7 @@ Text degrades, it does not break. Every font token carries a generic fallback:
|
|
|
59
70
|
```css
|
|
60
71
|
--font-family-sans:
|
|
61
72
|
'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
62
|
-
--font-family-serif:
|
|
63
|
-
--font-family-serif-display: 'STIX Two Text', Georgia, 'Times New Roman', serif;
|
|
73
|
+
--font-family-serif: 'STIX Two Text', Georgia, 'Times New Roman', serif;
|
|
64
74
|
```
|
|
65
75
|
|
|
66
76
|
So an app that loads nothing renders in the platform UI font with serif
|
|
@@ -70,20 +80,12 @@ headings — wrong, but deliberately wrong in the right category, and legible.
|
|
|
70
80
|
|
|
71
81
|
```tsx
|
|
72
82
|
// app/layout.tsx
|
|
73
|
-
import { Host_Grotesk,
|
|
83
|
+
import { Host_Grotesk, STIX_Two_Text } from 'next/font/google';
|
|
74
84
|
import 'ionbase-ui/styles';
|
|
75
85
|
import './ionbase-fonts.css';
|
|
76
86
|
|
|
77
87
|
const sans = Host_Grotesk({ subsets: ['latin'], variable: '--app-sans' });
|
|
78
|
-
const
|
|
79
|
-
subsets: ['latin'],
|
|
80
|
-
variable: '--app-display',
|
|
81
|
-
});
|
|
82
|
-
const serif = Merriweather({
|
|
83
|
-
subsets: ['latin'],
|
|
84
|
-
weight: ['700'],
|
|
85
|
-
variable: '--app-serif',
|
|
86
|
-
});
|
|
88
|
+
const serif = STIX_Two_Text({ subsets: ['latin'], variable: '--app-serif' });
|
|
87
89
|
|
|
88
90
|
export default function RootLayout({
|
|
89
91
|
children,
|
|
@@ -91,19 +93,15 @@ export default function RootLayout({
|
|
|
91
93
|
children: React.ReactNode;
|
|
92
94
|
}) {
|
|
93
95
|
return (
|
|
94
|
-
<html
|
|
95
|
-
lang="en"
|
|
96
|
-
className={`${sans.variable} ${display.variable} ${serif.variable}`}
|
|
97
|
-
>
|
|
96
|
+
<html lang="en" className={`${sans.variable} ${serif.variable}`}>
|
|
98
97
|
<body>{children}</body>
|
|
99
98
|
</html>
|
|
100
99
|
);
|
|
101
100
|
}
|
|
102
101
|
```
|
|
103
102
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
here because only 700 is used.
|
|
103
|
+
Both are variable fonts, so `next/font` covers their whole weight range without
|
|
104
|
+
a `weight` list.
|
|
107
105
|
|
|
108
106
|
Then point the IonBase tokens at them:
|
|
109
107
|
|
|
@@ -111,7 +109,6 @@ Then point the IonBase tokens at them:
|
|
|
111
109
|
/* ionbase-fonts.css — imported AFTER 'ionbase-ui/styles' so it wins */
|
|
112
110
|
:root {
|
|
113
111
|
--font-family-sans: var(--app-sans), system-ui, sans-serif;
|
|
114
|
-
--font-family-serif-display: var(--app-display), Georgia, serif;
|
|
115
112
|
--font-family-serif: var(--app-serif), Georgia, serif;
|
|
116
113
|
}
|
|
117
114
|
```
|
|
@@ -134,15 +131,8 @@ alone, because they already name these families:
|
|
|
134
131
|
|
|
135
132
|
@font-face {
|
|
136
133
|
font-family: 'STIX Two Text';
|
|
137
|
-
src: url('/fonts/stix-two-text
|
|
138
|
-
font-weight:
|
|
139
|
-
font-display: swap;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
@font-face {
|
|
143
|
-
font-family: 'Merriweather';
|
|
144
|
-
src: url('/fonts/merriweather-700.woff2') format('woff2');
|
|
145
|
-
font-weight: 700;
|
|
134
|
+
src: url('/fonts/stix-two-text.woff2') format('woff2-variations');
|
|
135
|
+
font-weight: 400 700;
|
|
146
136
|
font-display: swap;
|
|
147
137
|
}
|
|
148
138
|
```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,YAAY,CAAC;AAQrE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,YAAY,CAAC;AAElD;;;;GAIG;AACH,KAAK,YAAY,GAAG,IAAI,CACtB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,eAAe,GAAG,OAAO,CAChC,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,eAAe,EAAE,YAAY;IAC9D;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,sCAAsC;IACtC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,6EAA6E;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI,yGAsIf,CAAC"}
|
package/dist/components/Link.js
CHANGED
|
@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
3
3
|
import { forwardRef, useRef, useImperativeHandle } from 'react';
|
|
4
4
|
import { useLink, useButton, useHover, useFocusRing, mergeProps, } from 'react-aria';
|
|
5
5
|
import { resolveDisabled } from './resolve-disabled.js';
|
|
6
|
+
import { ARIA_LINK_NON_DOM_PROPS, ANCHOR_ONLY_DOM_PROPS, omitProps, } from './dom-props.js';
|
|
6
7
|
/**
|
|
7
8
|
* Link — Figma `Link` (774:1516).
|
|
8
9
|
*
|
|
@@ -48,6 +49,18 @@ export const Link = forwardRef((props, forwardedRef) => {
|
|
|
48
49
|
}, domRef);
|
|
49
50
|
const interactionProps = isNavigating ? link.linkProps : button.buttonProps;
|
|
50
51
|
const isPressed = isNavigating ? link.isPressed : button.isPressed;
|
|
52
|
+
/*
|
|
53
|
+
* `useLink`/`useButton` above were handed the FULL props object, so they have
|
|
54
|
+
* already taken `onPress` and friends and wired them up. What is left in
|
|
55
|
+
* `restProps` is a duplicate set with no further use — and spreading it puts
|
|
56
|
+
* `onPress` on the DOM node, which React warns about on every render and
|
|
57
|
+
* then ignores. Button and Input strip theirs the same way.
|
|
58
|
+
*
|
|
59
|
+
* The button branch strips more: `target`, `rel`, `download` and the rest are
|
|
60
|
+
* real anchor attributes and meaningless on a `<button>`.
|
|
61
|
+
*/
|
|
62
|
+
const anchorProps = omitProps(restProps, ARIA_LINK_NON_DOM_PROPS);
|
|
63
|
+
const buttonDomProps = omitProps(anchorProps, ANCHOR_ONLY_DOM_PROPS);
|
|
51
64
|
const { hoverProps, isHovered } = useHover({ isDisabled });
|
|
52
65
|
const { focusProps, isFocusVisible } = useFocusRing();
|
|
53
66
|
const classNames = ['ion-link', `ion-link--${variant}`, customClassName || '']
|
|
@@ -64,9 +77,9 @@ export const Link = forwardRef((props, forwardedRef) => {
|
|
|
64
77
|
};
|
|
65
78
|
const content = (_jsxs(_Fragment, { children: [startIcon && (_jsx("span", { className: "ion-link__icon-start", "aria-hidden": "true", children: startIcon })), children && _jsx("span", { className: "ion-link__label", children: children }), endIcon && (_jsx("span", { className: "ion-link__icon-end", "aria-hidden": "true", children: endIcon }))] }));
|
|
66
79
|
if (!href) {
|
|
67
|
-
return (_jsx("button", { ...
|
|
80
|
+
return (_jsx("button", { ...buttonDomProps, ...mergeProps(interactionProps, hoverProps, focusProps), ...stateAttributes, ref: domRef, type: "button", disabled: isDisabled, className: classNames, children: content }));
|
|
68
81
|
}
|
|
69
|
-
return (_jsx("a", { ...
|
|
82
|
+
return (_jsx("a", { ...anchorProps, ...mergeProps(interactionProps, hoverProps, focusProps), ...stateAttributes, ref: domRef,
|
|
70
83
|
// A disabled link must not remain navigable. `aria-disabled` alone
|
|
71
84
|
// still leaves the href clickable and focusable, so the href is
|
|
72
85
|
// dropped and it is taken out of the tab order — the same treatment
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
3
|
+
export type PopoverSize = 'sm' | 'md' | 'lg';
|
|
4
|
+
export interface PopoverProps {
|
|
5
|
+
/** The element that opens it. Must accept a ref and DOM props. */
|
|
6
|
+
children: React.ReactElement;
|
|
7
|
+
/** Panel contents. */
|
|
8
|
+
content?: React.ReactNode;
|
|
9
|
+
/** Heading. Also gives the dialog its accessible name. */
|
|
10
|
+
title?: React.ReactNode;
|
|
11
|
+
/** Action row, right-aligned. */
|
|
12
|
+
footer?: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Matches the Figma `Placement` variant, and names where the POPOVER sits —
|
|
15
|
+
* not where the arrow points. A preference, not a guarantee: it flips when
|
|
16
|
+
* there is no room, and the arrow follows.
|
|
17
|
+
*/
|
|
18
|
+
placement?: PopoverPlacement;
|
|
19
|
+
/** Matches the Figma `Size` variant. Widths only; height always hugs. */
|
|
20
|
+
size?: PopoverSize;
|
|
21
|
+
/** Show the close button. Defaults to `true`. */
|
|
22
|
+
showClose?: boolean;
|
|
23
|
+
/** Hide the caret. */
|
|
24
|
+
hideArrow?: boolean;
|
|
25
|
+
closeLabel?: string;
|
|
26
|
+
isOpen?: boolean;
|
|
27
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
28
|
+
className?: string;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Popover — Figma `Popover` (825:1853).
|
|
32
|
+
*
|
|
33
|
+
* SITS BETWEEN TOOLTIP AND MODAL. A tooltip is a hint that cannot hold
|
|
34
|
+
* focusable content; a modal is a task that takes over the page. A popover
|
|
35
|
+
* holds interactive content but stays attached to the control that opened it.
|
|
36
|
+
*
|
|
37
|
+
* `usePopover` contains focus, closes on Escape or an outside click, and hides
|
|
38
|
+
* the rest of the page from assistive tech while open — the same guarantees
|
|
39
|
+
* Modal gives. What differs is the framing, and it is deliberate: no visible
|
|
40
|
+
* scrim, anchored to its trigger, and `surface/raised` rather than Modal's
|
|
41
|
+
* `surface/overlay`. It reads as attached to the page rather than replacing it.
|
|
42
|
+
*/
|
|
43
|
+
export declare function Popover({ children, ...props }: PopoverProps): React.JSX.Element;
|
|
44
|
+
export declare namespace Popover {
|
|
45
|
+
var displayName: string;
|
|
46
|
+
}
|
|
47
|
+
//# sourceMappingURL=Popover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAapD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAc7C,MAAM,WAAW,YAAY;IAC3B,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,sBAAsB;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iCAAiC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,yEAAyE;IACzE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4HD;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,qBA+B3D;yBA/Be,OAAO"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { cloneElement, useRef } from 'react';
|
|
4
|
+
import { Overlay, useOverlayTrigger, usePopover, useDialog, useButton, mergeProps, } from 'react-aria';
|
|
5
|
+
import { useOverlayTriggerState } from 'react-stately';
|
|
6
|
+
const CloseIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
7
|
+
/**
|
|
8
|
+
* The panel, in its own component because it is mounted only while open.
|
|
9
|
+
*
|
|
10
|
+
* This split is not cosmetic. `useDialog` focuses the panel in an effect keyed
|
|
11
|
+
* on the ref, and resolves the title's id by looking it up in the DOM — both of
|
|
12
|
+
* which run once, when the component calling the hook mounts. Called alongside
|
|
13
|
+
* `useOverlayTriggerState` in the parent, that moment is the moment the TRIGGER
|
|
14
|
+
* mounts, when the panel and its title do not exist yet: the dialog never takes
|
|
15
|
+
* focus (so Escape never reaches it) and `aria-labelledby` is silently dropped.
|
|
16
|
+
* react-aria warns about this exact mistake in dev.
|
|
17
|
+
*/
|
|
18
|
+
function PopoverPanel({ state, triggerRef, overlayProps, content, title, footer, placement = 'bottom', size = 'md', showClose = true, hideArrow, closeLabel = 'Close', className, }) {
|
|
19
|
+
const panelRef = useRef(null);
|
|
20
|
+
/*
|
|
21
|
+
* One positioning call, not two. `usePopover` runs `useOverlayPosition`
|
|
22
|
+
* itself and returns the resolved placement and arrow offsets along with it;
|
|
23
|
+
* calling `useOverlayPosition` separately produces a second set of transforms
|
|
24
|
+
* that fight the first.
|
|
25
|
+
*/
|
|
26
|
+
const { popoverProps, underlayProps, arrowProps, placement: resolvedPlacement, } = usePopover({
|
|
27
|
+
triggerRef,
|
|
28
|
+
popoverRef: panelRef,
|
|
29
|
+
placement: placement,
|
|
30
|
+
offset: 10,
|
|
31
|
+
}, state);
|
|
32
|
+
const { dialogProps, titleProps } = useDialog({}, panelRef);
|
|
33
|
+
const closeRef = useRef(null);
|
|
34
|
+
const { buttonProps: closeButtonProps } = useButton({ onPress: () => state.close(), 'aria-label': closeLabel }, closeRef);
|
|
35
|
+
// The resolved placement, not the requested one — react-aria flips on
|
|
36
|
+
// collision, and an arrow left on the requested side points at nothing.
|
|
37
|
+
const side = (resolvedPlacement ?? placement).split(' ')[0];
|
|
38
|
+
return (_jsxs(Overlay, { children: [_jsx("div", { ...underlayProps, className: "ion-popover__underlay" }), _jsxs("div", { ...mergeProps(popoverProps, dialogProps, overlayProps), ref: panelRef, className: [
|
|
39
|
+
'ion-popover',
|
|
40
|
+
`ion-popover--${size}`,
|
|
41
|
+
`ion-popover--${side}`,
|
|
42
|
+
className || '',
|
|
43
|
+
]
|
|
44
|
+
.filter(Boolean)
|
|
45
|
+
.join(' '), children: [!hideArrow && (_jsx("div", { ...arrowProps, className: "ion-popover__arrow", "aria-hidden": "true" })), (title || showClose) && (_jsxs("div", { className: "ion-popover__header", children: [title && (_jsx("p", { ...titleProps, className: "ion-popover__title", children: title })), showClose && (_jsx("button", { ...closeButtonProps, ref: closeRef, type: "button", className: "ion-popover__close", children: _jsx(CloseIcon, {}) }))] })), content && _jsx("div", { className: "ion-popover__body", children: content }), footer && _jsx("div", { className: "ion-popover__footer", children: footer })] })] }));
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Popover — Figma `Popover` (825:1853).
|
|
49
|
+
*
|
|
50
|
+
* SITS BETWEEN TOOLTIP AND MODAL. A tooltip is a hint that cannot hold
|
|
51
|
+
* focusable content; a modal is a task that takes over the page. A popover
|
|
52
|
+
* holds interactive content but stays attached to the control that opened it.
|
|
53
|
+
*
|
|
54
|
+
* `usePopover` contains focus, closes on Escape or an outside click, and hides
|
|
55
|
+
* the rest of the page from assistive tech while open — the same guarantees
|
|
56
|
+
* Modal gives. What differs is the framing, and it is deliberate: no visible
|
|
57
|
+
* scrim, anchored to its trigger, and `surface/raised` rather than Modal's
|
|
58
|
+
* `surface/overlay`. It reads as attached to the page rather than replacing it.
|
|
59
|
+
*/
|
|
60
|
+
export function Popover({ children, ...props }) {
|
|
61
|
+
const { isOpen, onOpenChange } = props;
|
|
62
|
+
const state = useOverlayTriggerState({ isOpen, onOpenChange });
|
|
63
|
+
const triggerRef = useRef(null);
|
|
64
|
+
const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);
|
|
65
|
+
return (_jsxs(_Fragment, { children: [cloneElement(children, mergeProps(children.props, {
|
|
66
|
+
...triggerProps,
|
|
67
|
+
ref: triggerRef,
|
|
68
|
+
})), state.isOpen && (_jsx(PopoverPanel, { ...props, state: state, triggerRef: triggerRef, overlayProps: overlayProps }))] }));
|
|
69
|
+
}
|
|
70
|
+
Popover.displayName = 'Popover';
|
|
71
|
+
//# sourceMappingURL=Popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type ToastIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'information';
|
|
3
|
+
export type ToastPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
4
|
+
export interface ToastOptions {
|
|
5
|
+
intent?: ToastIntent;
|
|
6
|
+
title?: React.ReactNode;
|
|
7
|
+
message?: React.ReactNode;
|
|
8
|
+
/** One action. A second choice belongs in a dialog, which will still be there. */
|
|
9
|
+
action?: {
|
|
10
|
+
label: string;
|
|
11
|
+
onPress: () => void;
|
|
12
|
+
};
|
|
13
|
+
/** Milliseconds before auto-dismiss. `null` keeps it until dismissed. */
|
|
14
|
+
duration?: number | null;
|
|
15
|
+
dismissLabel?: string;
|
|
16
|
+
}
|
|
17
|
+
export interface ToastItem extends ToastOptions {
|
|
18
|
+
id: string;
|
|
19
|
+
}
|
|
20
|
+
export interface ToastProps extends ToastItem {
|
|
21
|
+
onDismiss: (id: string) => void;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Toast — Figma `Toast` (820:1655).
|
|
25
|
+
*
|
|
26
|
+
* Neutral chrome on `surface/raised`; the intent is carried by the icon alone.
|
|
27
|
+
* A tinted panel floating over unknown content competes with whatever is
|
|
28
|
+
* behind it, and makes Toast and Alert indistinguishable at a glance.
|
|
29
|
+
*
|
|
30
|
+
* AUTO-DISMISS PAUSES ON HOVER AND FOCUS. A toast that keeps counting down
|
|
31
|
+
* while being read or while its action has keyboard focus takes the action
|
|
32
|
+
* away mid-reach — WCAG 2.2.1 asks for exactly this. The timer restarts rather
|
|
33
|
+
* than resumes, which is the forgiving direction.
|
|
34
|
+
*/
|
|
35
|
+
export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
|
|
36
|
+
interface ToastContextValue {
|
|
37
|
+
toast: (options: ToastOptions) => string;
|
|
38
|
+
dismiss: (id: string) => void;
|
|
39
|
+
}
|
|
40
|
+
export interface ToastProviderProps {
|
|
41
|
+
children?: React.ReactNode;
|
|
42
|
+
/** Where the stack sits. Not a Figma variant — position is the queue's concern. */
|
|
43
|
+
placement?: ToastPlacement;
|
|
44
|
+
/** Oldest are dropped past this. Prevents an unbounded stack covering the page. */
|
|
45
|
+
limit?: number;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Renders the queue and supplies `useToast`.
|
|
49
|
+
*
|
|
50
|
+
* The live region is the CONTAINER, declared once and always present. A region
|
|
51
|
+
* that appears at the same moment as its content is not reliably announced —
|
|
52
|
+
* assistive tech has to be watching the node before the text lands in it.
|
|
53
|
+
*/
|
|
54
|
+
export declare function ToastProvider({ children, placement, limit, }: ToastProviderProps): React.JSX.Element;
|
|
55
|
+
export declare function useToast(): ToastContextValue;
|
|
56
|
+
export {};
|
|
57
|
+
//# sourceMappingURL=Toast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAUN,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,WAAW,GACrB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAE1E,MAAM,MAAM,cAAc,GACxB,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AA0E5D,MAAM,WAAW,YAAY;IAC3B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,mFAqEhB,CAAC;AAIH,UAAU,iBAAiB;IACzB,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IACzC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mFAAmF;IACnF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAA0B,EAC1B,KAAS,GACV,EAAE,kBAAkB,qBAkCpB;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
|
|
4
|
+
const Info = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M12 16v-4M12 8h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }));
|
|
5
|
+
const CircleCheck = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "m9 12 2 2 4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
|
|
6
|
+
const TriangleAlert = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12 9v4M12 17h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }));
|
|
7
|
+
const CircleX = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "m15 9-6 6M9 9l6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }));
|
|
8
|
+
const DismissIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
9
|
+
const INTENT_ICON = {
|
|
10
|
+
neutral: Info,
|
|
11
|
+
primary: Info,
|
|
12
|
+
information: Info,
|
|
13
|
+
success: CircleCheck,
|
|
14
|
+
warning: TriangleAlert,
|
|
15
|
+
error: CircleX,
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Toast — Figma `Toast` (820:1655).
|
|
19
|
+
*
|
|
20
|
+
* Neutral chrome on `surface/raised`; the intent is carried by the icon alone.
|
|
21
|
+
* A tinted panel floating over unknown content competes with whatever is
|
|
22
|
+
* behind it, and makes Toast and Alert indistinguishable at a glance.
|
|
23
|
+
*
|
|
24
|
+
* AUTO-DISMISS PAUSES ON HOVER AND FOCUS. A toast that keeps counting down
|
|
25
|
+
* while being read or while its action has keyboard focus takes the action
|
|
26
|
+
* away mid-reach — WCAG 2.2.1 asks for exactly this. The timer restarts rather
|
|
27
|
+
* than resumes, which is the forgiving direction.
|
|
28
|
+
*/
|
|
29
|
+
export const Toast = forwardRef((props, ref) => {
|
|
30
|
+
const { id, intent = 'information', title, message, action, duration = 5000, dismissLabel = 'Dismiss', onDismiss, } = props;
|
|
31
|
+
const IntentIcon = INTENT_ICON[intent];
|
|
32
|
+
const [paused, setPaused] = useState(false);
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
if (duration === null || paused)
|
|
35
|
+
return;
|
|
36
|
+
const t = setTimeout(() => onDismiss(id), duration);
|
|
37
|
+
return () => clearTimeout(t);
|
|
38
|
+
}, [duration, paused, id, onDismiss]);
|
|
39
|
+
return (_jsxs("div", { ref: ref, className: `ion-toast ion-toast--${intent}`,
|
|
40
|
+
/*
|
|
41
|
+
* `status`, not `alert`, at every intent — including error.
|
|
42
|
+
*
|
|
43
|
+
* Alert derives its role from intent because it sits in the page and an
|
|
44
|
+
* error there is content the user has arrived at. A toast arrives
|
|
45
|
+
* unbidden, often several at once; assertive live regions would
|
|
46
|
+
* interrupt whatever is being read each time one lands. Anything urgent
|
|
47
|
+
* enough to interrupt should not be transient in the first place.
|
|
48
|
+
*/
|
|
49
|
+
role: "status", onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocusCapture: () => setPaused(true), onBlurCapture: () => setPaused(false), children: [_jsx("span", { className: "ion-toast__icon", "aria-hidden": "true", children: _jsx(IntentIcon, {}) }), _jsxs("div", { className: "ion-toast__content", children: [title && _jsx("p", { className: "ion-toast__title", children: title }), message && _jsx("p", { className: "ion-toast__message", children: message })] }), action && (_jsx("button", { type: "button", className: "ion-toast__action", onClick: action.onPress, children: action.label })), _jsx("button", { type: "button", className: "ion-toast__dismiss", onClick: () => onDismiss(id), "aria-label": dismissLabel, children: _jsx(DismissIcon, {}) })] }));
|
|
50
|
+
});
|
|
51
|
+
Toast.displayName = 'Toast';
|
|
52
|
+
const ToastContext = createContext(null);
|
|
53
|
+
/**
|
|
54
|
+
* Renders the queue and supplies `useToast`.
|
|
55
|
+
*
|
|
56
|
+
* The live region is the CONTAINER, declared once and always present. A region
|
|
57
|
+
* that appears at the same moment as its content is not reliably announced —
|
|
58
|
+
* assistive tech has to be watching the node before the text lands in it.
|
|
59
|
+
*/
|
|
60
|
+
export function ToastProvider({ children, placement = 'bottom-right', limit = 4, }) {
|
|
61
|
+
const [items, setItems] = useState([]);
|
|
62
|
+
const counter = useRef(0);
|
|
63
|
+
const prefix = useId();
|
|
64
|
+
const dismiss = useCallback((id) => {
|
|
65
|
+
setItems((prev) => prev.filter((t) => t.id !== id));
|
|
66
|
+
}, []);
|
|
67
|
+
const toast = useCallback((options) => {
|
|
68
|
+
const id = `${prefix}-${counter.current++}`;
|
|
69
|
+
setItems((prev) => [...prev, { ...options, id }].slice(-limit));
|
|
70
|
+
return id;
|
|
71
|
+
}, [prefix, limit]);
|
|
72
|
+
const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
|
|
73
|
+
return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx("div", { className: `ion-toast-region ion-toast-region--${placement}`, role: "region", "aria-label": "Notifications", children: items.map((item) => (_jsx(Toast, { ...item, onDismiss: dismiss }, item.id))) })] }));
|
|
74
|
+
}
|
|
75
|
+
export function useToast() {
|
|
76
|
+
const ctx = useContext(ToastContext);
|
|
77
|
+
if (!ctx)
|
|
78
|
+
throw new Error('useToast must be used inside a <ToastProvider>');
|
|
79
|
+
return ctx;
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=Toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"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"}
|
|
@@ -99,6 +99,36 @@ export declare const ARIA_TEXT_FIELD_NON_DOM_PROPS: readonly ["label", "descript
|
|
|
99
99
|
* on the root and are deliberately absent.
|
|
100
100
|
*/
|
|
101
101
|
export declare const ARIA_TAB_LIST_NON_DOM_PROPS: readonly ["children", "items", "disabledKeys", "isDisabled", "selectedKey", "defaultSelectedKey", "onSelectionChange", "keyboardActivation", "orientation"];
|
|
102
|
+
/**
|
|
103
|
+
* The same, for `AriaLinkOptions` — Link's prop type.
|
|
104
|
+
*
|
|
105
|
+
* Link shipped with this defect: `onPress` reached the DOM and every consuming
|
|
106
|
+
* app logged "Unknown event handler property `onPress`. It will be ignored." on
|
|
107
|
+
* every render. Harmless at runtime — `useLink`/`useButton` were handed the
|
|
108
|
+
* full props object, so the handler still fired — but it is exactly the noise
|
|
109
|
+
* this module exists to prevent, and Button had a story guarding against it
|
|
110
|
+
* while Link did not.
|
|
111
|
+
*
|
|
112
|
+
* Sources, as of react-aria 3.50:
|
|
113
|
+
* PressEvents onPress, onPressStart, onPressEnd, onPressChange, onPressUp
|
|
114
|
+
* FocusEvents onFocusChange
|
|
115
|
+
* LinkDOMProps routerOptions
|
|
116
|
+
* AriaLinkOptions elementType
|
|
117
|
+
*
|
|
118
|
+
* `autoFocus`, `onFocus`, `onBlur`, `id` and `aria-*` are real DOM props and
|
|
119
|
+
* must keep flowing through.
|
|
120
|
+
*/
|
|
121
|
+
export declare const ARIA_LINK_NON_DOM_PROPS: readonly ["onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "onFocusChange", "routerOptions", "elementType"];
|
|
122
|
+
/**
|
|
123
|
+
* Valid on `<a>`, meaningless on `<button>`.
|
|
124
|
+
*
|
|
125
|
+
* Link renders whichever the caller's props imply, so these are legitimate
|
|
126
|
+
* attributes in the anchor branch and unknown ones in the button branch. They
|
|
127
|
+
* are a separate list rather than folded into the set above precisely because
|
|
128
|
+
* the answer differs by element — merging them would silently drop `target`
|
|
129
|
+
* and `rel` from real links.
|
|
130
|
+
*/
|
|
131
|
+
export declare const ANCHOR_ONLY_DOM_PROPS: readonly ["hrefLang", "target", "rel", "download", "ping", "referrerPolicy"];
|
|
102
132
|
/**
|
|
103
133
|
* Returns `props` without `keys`, leaving `props` untouched.
|
|
104
134
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom-props.d.ts","sourceRoot":"","sources":["../../src/components/dom-props.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dom-props.d.ts","sourceRoot":"","sources":["../../src/components/dom-props.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;GAaG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,yBAAyB,yLAa2B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,6BAA6B,0PAiBgB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,2BAA2B,6JAUwB,CAAC;AAEjE;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,uBAAuB,mIASmB,CAAC;AAExD;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,8EAOqB,CAAC;AAExD;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,SAAS,WAAW,EAAE,EAC1E,KAAK,EAAE,CAAC,EACR,IAAI,EAAE,CAAC,GACN,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAIpB"}
|
|
@@ -139,6 +139,52 @@ export const ARIA_TAB_LIST_NON_DOM_PROPS = [
|
|
|
139
139
|
'keyboardActivation',
|
|
140
140
|
'orientation',
|
|
141
141
|
];
|
|
142
|
+
/**
|
|
143
|
+
* The same, for `AriaLinkOptions` — Link's prop type.
|
|
144
|
+
*
|
|
145
|
+
* Link shipped with this defect: `onPress` reached the DOM and every consuming
|
|
146
|
+
* app logged "Unknown event handler property `onPress`. It will be ignored." on
|
|
147
|
+
* every render. Harmless at runtime — `useLink`/`useButton` were handed the
|
|
148
|
+
* full props object, so the handler still fired — but it is exactly the noise
|
|
149
|
+
* this module exists to prevent, and Button had a story guarding against it
|
|
150
|
+
* while Link did not.
|
|
151
|
+
*
|
|
152
|
+
* Sources, as of react-aria 3.50:
|
|
153
|
+
* PressEvents onPress, onPressStart, onPressEnd, onPressChange, onPressUp
|
|
154
|
+
* FocusEvents onFocusChange
|
|
155
|
+
* LinkDOMProps routerOptions
|
|
156
|
+
* AriaLinkOptions elementType
|
|
157
|
+
*
|
|
158
|
+
* `autoFocus`, `onFocus`, `onBlur`, `id` and `aria-*` are real DOM props and
|
|
159
|
+
* must keep flowing through.
|
|
160
|
+
*/
|
|
161
|
+
export const ARIA_LINK_NON_DOM_PROPS = [
|
|
162
|
+
'onPress',
|
|
163
|
+
'onPressStart',
|
|
164
|
+
'onPressEnd',
|
|
165
|
+
'onPressChange',
|
|
166
|
+
'onPressUp',
|
|
167
|
+
'onFocusChange',
|
|
168
|
+
'routerOptions',
|
|
169
|
+
'elementType',
|
|
170
|
+
];
|
|
171
|
+
/**
|
|
172
|
+
* Valid on `<a>`, meaningless on `<button>`.
|
|
173
|
+
*
|
|
174
|
+
* Link renders whichever the caller's props imply, so these are legitimate
|
|
175
|
+
* attributes in the anchor branch and unknown ones in the button branch. They
|
|
176
|
+
* are a separate list rather than folded into the set above precisely because
|
|
177
|
+
* the answer differs by element — merging them would silently drop `target`
|
|
178
|
+
* and `rel` from real links.
|
|
179
|
+
*/
|
|
180
|
+
export const ANCHOR_ONLY_DOM_PROPS = [
|
|
181
|
+
'hrefLang',
|
|
182
|
+
'target',
|
|
183
|
+
'rel',
|
|
184
|
+
'download',
|
|
185
|
+
'ping',
|
|
186
|
+
'referrerPolicy',
|
|
187
|
+
];
|
|
142
188
|
/**
|
|
143
189
|
* Returns `props` without `keys`, leaving `props` untouched.
|
|
144
190
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom-props.js","sourceRoot":"","sources":["../../src/components/dom-props.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dom-props.js","sourceRoot":"","sources":["../../src/components/dom-props.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;GAaG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,SAAS;IACT,cAAc;IACd,YAAY;IACZ,eAAe;IACf,WAAW;IACX,eAAe;IACf,qBAAqB;IACrB,qBAAqB;IACrB,aAAa;IACb,MAAM;IACN,QAAQ;IACR,KAAK;CAC0D,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C,OAAO;IACP,aAAa;IACb,cAAc;IACd,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,WAAW;IACX,iBAAiB;IACjB,oBAAoB;IACpB,UAAU;IACV,UAAU;IACV,eAAe;IACf,qBAAqB;IACrB,YAAY;IACZ,OAAO;IACP,cAAc;CAC0C,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,UAAU;IACV,OAAO;IACP,cAAc;IACd,YAAY;IACZ,aAAa;IACb,oBAAoB;IACpB,mBAAmB;IACnB,oBAAoB;IACpB,aAAa;CACiD,CAAC;AAEjE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,SAAS;IACT,cAAc;IACd,YAAY;IACZ,eAAe;IACf,WAAW;IACX,eAAe;IACf,eAAe;IACf,aAAa;CACwC,CAAC;AAExD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,UAAU;IACV,QAAQ;IACR,KAAK;IACL,UAAU;IACV,MAAM;IACN,gBAAgB;CACqC,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CACvB,KAAQ,EACR,IAAO;IAEP,MAAM,MAAM,GAAG,EAAE,GAAG,KAAK,EAAkC,CAAC;IAC5D,KAAK,MAAM,GAAG,IAAI,IAAI;QAAE,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3C,OAAO,MAA4B,CAAC;AACtC,CAAC"}
|
|
@@ -28,8 +28,12 @@ export { Logo, LogoMark } from './Logo.js';
|
|
|
28
28
|
export type { LogoProps, LogoMarkProps, LogoSize, LogoWordmark, } from './Logo.js';
|
|
29
29
|
export { Divider } from './Divider.js';
|
|
30
30
|
export type { DividerProps, DividerOrientation } from './Divider.js';
|
|
31
|
+
export { Toast, ToastProvider, useToast } from './Toast.js';
|
|
32
|
+
export type { ToastProps, ToastOptions, ToastItem, ToastIntent, ToastPlacement, ToastProviderProps, } from './Toast.js';
|
|
31
33
|
export { Tooltip } from './Tooltip.js';
|
|
32
34
|
export type { TooltipProps, TooltipPlacement } from './Tooltip.js';
|
|
35
|
+
export { Popover } from './Popover.js';
|
|
36
|
+
export type { PopoverProps, PopoverPlacement, PopoverSize } from './Popover.js';
|
|
33
37
|
export { Modal } from './Modal.js';
|
|
34
38
|
export type { ModalProps, ModalSize, ModalAlign } from './Modal.js';
|
|
35
39
|
export { Link } from './Link.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
package/dist/components/index.js
CHANGED
|
@@ -13,7 +13,9 @@ export { Avatar, AvatarGroup } from './Avatar.js';
|
|
|
13
13
|
export { Header } from './Header.js';
|
|
14
14
|
export { Logo, LogoMark } from './Logo.js';
|
|
15
15
|
export { Divider } from './Divider.js';
|
|
16
|
+
export { Toast, ToastProvider, useToast } from './Toast.js';
|
|
16
17
|
export { Tooltip } from './Tooltip.js';
|
|
18
|
+
export { Popover } from './Popover.js';
|
|
17
19
|
export { Modal } from './Modal.js';
|
|
18
20
|
export { Link } from './Link.js';
|
|
19
21
|
export { NavItem } from './NavItem.js';
|