ionbase-ui 0.1.1 → 0.3.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 +129 -3
- package/dist/components/Avatar.d.ts +8 -5
- package/dist/components/Avatar.d.ts.map +1 -1
- package/dist/components/Avatar.js +31 -11
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Button.d.ts +4 -0
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +6 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Checkbox.d.ts +6 -0
- package/dist/components/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox.js +6 -3
- package/dist/components/Checkbox.js.map +1 -1
- package/dist/components/Input.d.ts +30 -2
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/Input.js +23 -7
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Menu.d.ts +6 -0
- package/dist/components/Menu.d.ts.map +1 -1
- package/dist/components/Menu.js +11 -7
- package/dist/components/Menu.js.map +1 -1
- package/dist/components/NavItem.d.ts +4 -0
- package/dist/components/NavItem.d.ts.map +1 -1
- package/dist/components/NavItem.js +22 -2
- package/dist/components/NavItem.js.map +1 -1
- package/dist/components/Radio.d.ts +11 -0
- package/dist/components/Radio.d.ts.map +1 -1
- package/dist/components/Radio.js +25 -17
- package/dist/components/Radio.js.map +1 -1
- package/dist/components/ScrollProgress.d.ts.map +1 -1
- package/dist/components/ScrollProgress.js +1 -0
- package/dist/components/ScrollProgress.js.map +1 -1
- package/dist/components/Select.d.ts +11 -2
- package/dist/components/Select.d.ts.map +1 -1
- package/dist/components/Select.js +6 -3
- package/dist/components/Select.js.map +1 -1
- package/dist/components/Table.d.ts +26 -1
- package/dist/components/Table.d.ts.map +1 -1
- package/dist/components/Table.js +30 -7
- package/dist/components/Table.js.map +1 -1
- package/dist/components/Tabs.d.ts +7 -3
- package/dist/components/Tabs.d.ts.map +1 -1
- package/dist/components/Tabs.js +13 -2
- package/dist/components/Tabs.js.map +1 -1
- package/dist/components/Toggle.d.ts +6 -0
- package/dist/components/Toggle.d.ts.map +1 -1
- package/dist/components/Toggle.js +6 -3
- package/dist/components/Toggle.js.map +1 -1
- package/dist/components/dom-props.d.ts +59 -0
- package/dist/components/dom-props.d.ts.map +1 -1
- package/dist/components/dom-props.js +86 -0
- package/dist/components/dom-props.js.map +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/resolve-disabled.d.ts +9 -0
- package/dist/components/resolve-disabled.d.ts.map +1 -0
- package/dist/components/resolve-disabled.js +15 -0
- package/dist/components/resolve-disabled.js.map +1 -0
- package/dist/index.d.ts +5 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -6
- package/dist/index.js.map +1 -1
- package/dist/styles/index.css +154 -1
- package/dist/styles/table.css +10 -6
- package/dist/styles/tabs.css +12 -3
- package/dist/styles/tokens/base.css +8 -8
- package/dist/tokens-js.d.ts +12 -0
- package/dist/tokens-js.d.ts.map +1 -0
- package/dist/tokens-js.js +12 -0
- package/dist/tokens-js.js.map +1 -0
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -22,9 +22,135 @@ export function App() {
|
|
|
22
22
|
}
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
That single import pulls in the design tokens, the
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
That single import pulls in the design tokens, the type scale, and every
|
|
26
|
+
component stylesheet. Dark mode is `data-theme="dark"` on any ancestor — no
|
|
27
|
+
separate import, no JS.
|
|
28
|
+
|
|
29
|
+
It does **not** load any webfonts. That is a required extra step — see below.
|
|
30
|
+
|
|
31
|
+
## Fonts
|
|
32
|
+
|
|
33
|
+
**Loading the fonts is your app's job.** This package names the families in its
|
|
34
|
+
tokens but never fetches them: your framework knows its own font strategy
|
|
35
|
+
(`next/font`, Fontsource, self-hosted `@font-face`, a corporate CDN) and a
|
|
36
|
+
design system reaching out to a third-party host at CSS parse time is not a
|
|
37
|
+
decision it should make for you.
|
|
38
|
+
|
|
39
|
+
Three families are used by the shipped components and type scale:
|
|
40
|
+
|
|
41
|
+
| Family | Token | Weights | Used by |
|
|
42
|
+
| ----------------- | ----------------------------- | ------------- | --------------------------------------------- |
|
|
43
|
+
| **Host Grotesk** | `--font-family-sans` | 400, 500, 600 | Body, every component, most of the type scale |
|
|
44
|
+
| **STIX Two Text** | `--font-family-serif-display` | 600 | `.ion-text-h1`, `.ion-text-h2` |
|
|
45
|
+
| **Merriweather** | `--font-family-serif` | 700 | `.ion-text-editorial-*` |
|
|
46
|
+
|
|
47
|
+
All three are also used in italic where your content uses italic; none of the
|
|
48
|
+
components require it.
|
|
49
|
+
|
|
50
|
+
`--font-family-mono` (Space Mono, 400/700) also exists as a token, but nothing
|
|
51
|
+
in this package references it. Load it only if you use that variable yourself.
|
|
52
|
+
|
|
53
|
+
### If you skip this
|
|
54
|
+
|
|
55
|
+
Text degrades, it does not break. Every font token carries a generic fallback:
|
|
56
|
+
|
|
57
|
+
```css
|
|
58
|
+
--font-family-sans:
|
|
59
|
+
'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
60
|
+
--font-family-serif: Merriweather, Georgia, 'Times New Roman', serif;
|
|
61
|
+
--font-family-serif-display: 'STIX Two Text', Georgia, 'Times New Roman', serif;
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
So an app that loads nothing renders in the platform UI font with serif
|
|
65
|
+
headings — wrong, but deliberately wrong in the right category, and legible.
|
|
66
|
+
|
|
67
|
+
### next/font
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
// app/layout.tsx
|
|
71
|
+
import { Host_Grotesk, Merriweather, STIX_Two_Text } from 'next/font/google';
|
|
72
|
+
import 'ionbase-ui/styles';
|
|
73
|
+
import './ionbase-fonts.css';
|
|
74
|
+
|
|
75
|
+
const sans = Host_Grotesk({ subsets: ['latin'], variable: '--app-sans' });
|
|
76
|
+
const display = STIX_Two_Text({
|
|
77
|
+
subsets: ['latin'],
|
|
78
|
+
variable: '--app-display',
|
|
79
|
+
});
|
|
80
|
+
const serif = Merriweather({
|
|
81
|
+
subsets: ['latin'],
|
|
82
|
+
weight: ['700'],
|
|
83
|
+
variable: '--app-serif',
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
export default function RootLayout({
|
|
87
|
+
children,
|
|
88
|
+
}: {
|
|
89
|
+
children: React.ReactNode;
|
|
90
|
+
}) {
|
|
91
|
+
return (
|
|
92
|
+
<html
|
|
93
|
+
lang="en"
|
|
94
|
+
className={`${sans.variable} ${display.variable} ${serif.variable}`}
|
|
95
|
+
>
|
|
96
|
+
<body>{children}</body>
|
|
97
|
+
</html>
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Host Grotesk and STIX Two Text are variable fonts, so `next/font` covers their
|
|
103
|
+
whole weight range without a `weight` list. Merriweather is requested static
|
|
104
|
+
here because only 700 is used.
|
|
105
|
+
|
|
106
|
+
Then point the IonBase tokens at them:
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
/* ionbase-fonts.css — imported AFTER 'ionbase-ui/styles' so it wins */
|
|
110
|
+
:root {
|
|
111
|
+
--font-family-sans: var(--app-sans), system-ui, sans-serif;
|
|
112
|
+
--font-family-serif-display: var(--app-display), Georgia, serif;
|
|
113
|
+
--font-family-serif: var(--app-serif), Georgia, serif;
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Import order matters: both files land at the same specificity, so the later one
|
|
118
|
+
wins. Override after, not before.
|
|
119
|
+
|
|
120
|
+
### Plain @font-face
|
|
121
|
+
|
|
122
|
+
Self-hosting works the same way — declare the faces, then leave the tokens
|
|
123
|
+
alone, because they already name these families:
|
|
124
|
+
|
|
125
|
+
```css
|
|
126
|
+
@font-face {
|
|
127
|
+
font-family: 'Host Grotesk';
|
|
128
|
+
src: url('/fonts/host-grotesk.woff2') format('woff2-variations');
|
|
129
|
+
font-weight: 400 600;
|
|
130
|
+
font-display: swap;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@font-face {
|
|
134
|
+
font-family: 'STIX Two Text';
|
|
135
|
+
src: url('/fonts/stix-two-text-600.woff2') format('woff2');
|
|
136
|
+
font-weight: 600;
|
|
137
|
+
font-display: swap;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@font-face {
|
|
141
|
+
font-family: 'Merriweather';
|
|
142
|
+
src: url('/fonts/merriweather-700.woff2') format('woff2');
|
|
143
|
+
font-weight: 700;
|
|
144
|
+
font-display: swap;
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
No token override is needed in this case: `--font-family-sans` already begins
|
|
149
|
+
with `'Host Grotesk'`, so a matching `@font-face` is picked up automatically.
|
|
150
|
+
|
|
151
|
+
If you would rather use the Google CDN, put the `@import` or `<link>` in your
|
|
152
|
+
own entry — at the top of your own CSS, where `@import` ordering is yours to
|
|
153
|
+
control.
|
|
28
154
|
|
|
29
155
|
## Icons
|
|
30
156
|
|
|
@@ -13,7 +13,8 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
13
13
|
* avatar is never announced as an unlabelled image.
|
|
14
14
|
*/
|
|
15
15
|
alt?: string;
|
|
16
|
-
/** Figma's `Type=Character`. Rendered when there is no `src
|
|
16
|
+
/** Figma's `Type=Character`. Rendered when there is no `src`, or when `src`
|
|
17
|
+
* fails to load. */
|
|
17
18
|
initials?: string;
|
|
18
19
|
/** Figma's `Type=Icon`. Rendered when there is neither `src` nor `initials`. */
|
|
19
20
|
icon?: React.ReactNode;
|
|
@@ -24,6 +25,9 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
24
25
|
* passing `src` and `initials` gets the image with the initials as its alt
|
|
25
26
|
* fallback, which is what you want when the image 404s.
|
|
26
27
|
*
|
|
28
|
+
* A failed `src` falls through to initials (then icon) rather than leaving the
|
|
29
|
+
* browser's broken-image glyph — that is why initials exist alongside `src`.
|
|
30
|
+
*
|
|
27
31
|
* It is a `<span>`, not a `<div>`, so it can sit inline beside text without the
|
|
28
32
|
* caller fighting a block element.
|
|
29
33
|
*/
|
|
@@ -39,10 +43,9 @@ export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
39
43
|
* AvatarGroup overlaps its children by a quarter of the avatar size, matching
|
|
40
44
|
* Figma's -6 / -8 / -10 / -12 gaps at Mini / Small / Medium / Large.
|
|
41
45
|
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
* rather than a wiring one.
|
|
46
|
+
* Group defaults fill in `size` / `shape` only when a child Avatar has not set
|
|
47
|
+
* them itself — an explicit child prop wins. Non-Avatar children are left
|
|
48
|
+
* alone so `size`/`shape` are never pushed onto arbitrary DOM nodes.
|
|
46
49
|
*
|
|
47
50
|
* Children render in source order because that is Figma's stacking: each avatar
|
|
48
51
|
* paints over the one before it, so the `+N` overflow ends up on top. Later
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACxE,gFAAgF;IAChF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;yBACqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,MAAM,qFA6DlB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,yFAoDvB,CAAC"}
|
|
@@ -1,15 +1,28 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import React, { forwardRef } from 'react';
|
|
3
|
+
import React, { forwardRef, useState } from 'react';
|
|
3
4
|
/**
|
|
4
5
|
* Avatar picks its content the way Figma's `Type` variant does, but by
|
|
5
6
|
* precedence rather than by a prop: image, then initials, then icon. A caller
|
|
6
7
|
* passing `src` and `initials` gets the image with the initials as its alt
|
|
7
8
|
* fallback, which is what you want when the image 404s.
|
|
8
9
|
*
|
|
10
|
+
* A failed `src` falls through to initials (then icon) rather than leaving the
|
|
11
|
+
* browser's broken-image glyph — that is why initials exist alongside `src`.
|
|
12
|
+
*
|
|
9
13
|
* It is a `<span>`, not a `<div>`, so it can sit inline beside text without the
|
|
10
14
|
* caller fighting a block element.
|
|
11
15
|
*/
|
|
12
16
|
export const Avatar = forwardRef(({ size = 'md', shape = 'circle', src, alt, initials, icon, className, ...rest }, ref) => {
|
|
17
|
+
const [imgFailed, setImgFailed] = useState(false);
|
|
18
|
+
// Reset failure when `src` changes — adjust state during render rather than
|
|
19
|
+
// an effect, so a recovered URL shows the image on the same update.
|
|
20
|
+
const [prevSrc, setPrevSrc] = useState(src);
|
|
21
|
+
if (src !== prevSrc) {
|
|
22
|
+
setPrevSrc(src);
|
|
23
|
+
setImgFailed(false);
|
|
24
|
+
}
|
|
25
|
+
const showImage = Boolean(src) && !imgFailed;
|
|
13
26
|
const classNames = [
|
|
14
27
|
'ion-avatar',
|
|
15
28
|
size !== 'md' ? `ion-avatar--${size}` : '',
|
|
@@ -19,17 +32,16 @@ export const Avatar = forwardRef(({ size = 'md', shape = 'circle', src, alt, ini
|
|
|
19
32
|
.filter(Boolean)
|
|
20
33
|
.join(' ');
|
|
21
34
|
const label = alt ?? initials;
|
|
22
|
-
return (_jsx("span", { ...rest, ref: ref, className: classNames, ...(!
|
|
35
|
+
return (_jsx("span", { ...rest, ref: ref, className: classNames, ...(!showImage && label ? { role: 'img', 'aria-label': label } : {}), children: showImage ? (_jsx("img", { className: "ion-avatar__image", src: src, alt: label ?? '', onError: () => setImgFailed(true) })) : initials ? (_jsx("span", { "aria-hidden": "true", children: initials })) : icon ? (_jsx("span", { className: "ion-avatar__icon", "aria-hidden": "true", children: icon })) : null }));
|
|
23
36
|
});
|
|
24
37
|
Avatar.displayName = 'Avatar';
|
|
25
38
|
/**
|
|
26
39
|
* AvatarGroup overlaps its children by a quarter of the avatar size, matching
|
|
27
40
|
* Figma's -6 / -8 / -10 / -12 gaps at Mini / Small / Medium / Large.
|
|
28
41
|
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* rather than a wiring one.
|
|
42
|
+
* Group defaults fill in `size` / `shape` only when a child Avatar has not set
|
|
43
|
+
* them itself — an explicit child prop wins. Non-Avatar children are left
|
|
44
|
+
* alone so `size`/`shape` are never pushed onto arbitrary DOM nodes.
|
|
33
45
|
*
|
|
34
46
|
* Children render in source order because that is Figma's stacking: each avatar
|
|
35
47
|
* paints over the one before it, so the `+N` overflow ends up on top. Later
|
|
@@ -39,11 +51,19 @@ export const AvatarGroup = forwardRef(({ size = 'md', shape = 'circle', max, cla
|
|
|
39
51
|
const items = React.Children.toArray(children).filter(React.isValidElement);
|
|
40
52
|
const shown = max !== undefined ? items.slice(0, max) : items;
|
|
41
53
|
const overflow = items.length - shown.length;
|
|
42
|
-
const sized = shown.map((child, i) =>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
54
|
+
const sized = shown.map((child, i) => {
|
|
55
|
+
if (child.type !== Avatar) {
|
|
56
|
+
return child.key != null
|
|
57
|
+
? child
|
|
58
|
+
: React.cloneElement(child, { key: i });
|
|
59
|
+
}
|
|
60
|
+
const props = child.props;
|
|
61
|
+
return React.cloneElement(child, {
|
|
62
|
+
size: props.size ?? size,
|
|
63
|
+
shape: props.shape ?? shape,
|
|
64
|
+
key: child.key ?? i,
|
|
65
|
+
});
|
|
66
|
+
});
|
|
47
67
|
if (overflow > 0) {
|
|
48
68
|
sized.push(_jsx(Avatar, { size: size, shape: shape, initials: `+${overflow}`, alt: `${overflow} more` }, "__overflow"));
|
|
49
69
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAwBpD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,QAAQ,EAChB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,4EAA4E;IAC5E,oEAAoE;IACpE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC5C,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;QACpB,UAAU,CAAC,GAAG,CAAC,CAAC;QAChB,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAED,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IAC7C,MAAM,UAAU,GAAG;QACjB,YAAY;QACZ,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;QAC9C,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,KAAK,GAAG,GAAG,IAAI,QAAQ,CAAC;IAE9B,OAAO,CACL,kBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,KAGjB,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAEpE,SAAS,CAAC,CAAC,CAAC,CACX,cACE,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,IAAI,EAAE,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GACjC,CACH,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,8BAAkB,MAAM,YAAE,QAAQ,GAAQ,CAC3C,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,eAAM,SAAS,EAAC,kBAAkB,iBAAa,MAAM,YAClD,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,GACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAU9B;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EACpE,GAAG,EACH,EAAE;IACF,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAC5E,MAAM,KAAK,GAAG,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC9D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAE7C,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACnC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC1B,OAAO,KAAK,CAAC,GAAG,IAAI,IAAI;gBACtB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;QAC5C,CAAC;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAoB,CAAC;QACzC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAwC,EAAE;YAClE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI;YACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK;YAC3B,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC;SACpB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;QACjB,KAAK,CAAC,IAAI,CACR,KAAC,MAAM,IAEL,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,IAAI,QAAQ,EAAE,EACxB,GAAG,EAAE,GAAG,QAAQ,OAAO,IAJnB,YAAY,CAKhB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,iBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,kBAAkB;YAClB,qBAAqB,IAAI,EAAE;YAC3B,SAAS,IAAI,EAAE;SAChB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,YAEX,KAAK,GACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
|
|
@@ -13,6 +13,10 @@ export interface ButtonProps extends AriaButtonProps<'button'> {
|
|
|
13
13
|
className?: string;
|
|
14
14
|
/** Children element to render inside the button. */
|
|
15
15
|
children?: React.ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
18
|
+
*/
|
|
19
|
+
disabled?: boolean;
|
|
16
20
|
}
|
|
17
21
|
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
18
22
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAKL,KAAK,eAAe,EACrB,MAAM,YAAY,CAAC;AAIpB,MAAM,WAAW,WAAY,SAAQ,eAAe,CAAC,QAAQ,CAAC;IAC5D,8CAA8C;IAC9C,OAAO,CAAC,EACJ,eAAe,GACf,iBAAiB,GACjB,WAAW,GACX,UAAU,GACV,aAAa,CAAC;IAClB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,gDAAgD;IAChD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,uFAiFlB,CAAC"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { forwardRef, useRef, useImperativeHandle } from 'react';
|
|
3
4
|
import { useButton, useHover, useFocusRing, mergeProps, } from 'react-aria';
|
|
4
5
|
import { ARIA_BUTTON_NON_DOM_PROPS, omitProps } from './dom-props.js';
|
|
6
|
+
import { resolveDisabled } from './resolve-disabled.js';
|
|
5
7
|
export const Button = forwardRef((props, forwardedRef) => {
|
|
6
|
-
const { variant = 'primary-brand', size = 'md', startIcon, endIcon, className: customClassName, children, isDisabled, ...restProps } = props;
|
|
8
|
+
const { variant = 'primary-brand', size = 'md', startIcon, endIcon, className: customClassName, children, isDisabled: isDisabledProp, disabled, ...restProps } = props;
|
|
9
|
+
const isDisabled = resolveDisabled(isDisabledProp, disabled);
|
|
10
|
+
const ariaProps = { ...props, isDisabled };
|
|
7
11
|
const domRef = useRef(null);
|
|
8
12
|
useImperativeHandle(forwardedRef, () => domRef.current);
|
|
9
|
-
const { buttonProps, isPressed } = useButton(
|
|
13
|
+
const { buttonProps, isPressed } = useButton(ariaProps, domRef);
|
|
10
14
|
/*
|
|
11
15
|
* Interaction state comes from React Aria rather than CSS pseudo-classes.
|
|
12
16
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EACL,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,GAEX,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AA0BxD,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,OAAO,GAAG,eAAe,EACzB,IAAI,GAAG,IAAI,EACX,SAAS,EACT,OAAO,EACP,SAAS,EAAE,eAAe,EAC1B,QAAQ,EACR,UAAU,EAAE,cAAc,EAC1B,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,eAAe,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7D,MAAM,SAAS,GAAG,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,CAAC;IAE3C,MAAM,MAAM,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC/C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAEhE;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;IAC3D,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtD,MAAM,UAAU,GAAG;QACjB,YAAY;QACZ,eAAe,OAAO,EAAE;QACxB,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,eAAe,IAAI,EAAE;KACtB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,uEAAuE;IACvE,qEAAqE;IACrE,gCAAgC;IAChC,MAAM,eAAe,GAAG;QACtB,cAAc,EAAE,SAAS,IAAI,SAAS;QACtC,cAAc,EAAE,SAAS,IAAI,SAAS;QACtC,cAAc,EAAE,cAAc,IAAI,SAAS;QAC3C,eAAe,EAAE,UAAU,IAAI,SAAS;KACzC,CAAC;IAEF;;;;;;OAMG;IACH,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,EAAE,yBAAyB,CAAC,CAAC;IAEjE,OAAO,CACL,qBACM,QAAQ,KACR,UAAU,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,KAC/C,eAAe,EACnB,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,UAAU,aAEpB,SAAS,IAAI,CACZ,eAAM,SAAS,EAAC,wBAAwB,YAAE,SAAS,GAAQ,CAC5D,EACA,QAAQ,IAAI,eAAM,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAQ,EACjE,OAAO,IAAI,eAAM,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAQ,IAC5D,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
|
|
@@ -11,6 +11,12 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
11
11
|
* DOM property only, so it has to be assigned after render.
|
|
12
12
|
*/
|
|
13
13
|
isIndeterminate?: boolean;
|
|
14
|
+
/** Whether the checkbox is disabled. */
|
|
15
|
+
isDisabled?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
18
|
+
*/
|
|
19
|
+
disabled?: boolean;
|
|
14
20
|
/** Figma's `Show Label` + `Label`. Omit for a bare box. */
|
|
15
21
|
children?: React.ReactNode;
|
|
16
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAKN,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5D,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,MAAM,CAChB;IACC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA2BD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,wFAkDpB,CAAC"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { forwardRef, useRef, useImperativeHandle, useEffect, } from 'react';
|
|
4
|
+
import { resolveDisabled } from './resolve-disabled.js';
|
|
3
5
|
/** Figma's check glyph. Inlined for the same reason as Select's chevron: it is
|
|
4
6
|
* part of the control, not a slot a caller fills. */
|
|
5
7
|
const CheckMark = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m5 13 4 4L19 7", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
@@ -17,7 +19,8 @@ const DashMark = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-
|
|
|
17
19
|
* declaratively and it must be written after every render.
|
|
18
20
|
*/
|
|
19
21
|
export const Checkbox = forwardRef((props, forwardedRef) => {
|
|
20
|
-
const { size = 'md', intent = 'brand', isIndeterminate = false, className, children, disabled, ...rest } = props;
|
|
22
|
+
const { size = 'md', intent = 'brand', isIndeterminate = false, className, children, isDisabled, disabled, ...rest } = props;
|
|
23
|
+
const resolvedDisabled = resolveDisabled(isDisabled, disabled);
|
|
21
24
|
const domRef = useRef(null);
|
|
22
25
|
useImperativeHandle(forwardedRef, () => domRef.current);
|
|
23
26
|
useEffect(() => {
|
|
@@ -28,12 +31,12 @@ export const Checkbox = forwardRef((props, forwardedRef) => {
|
|
|
28
31
|
'ion-checkbox',
|
|
29
32
|
size !== 'md' ? `ion-checkbox--${size}` : '',
|
|
30
33
|
intent !== 'brand' ? `ion-checkbox--${intent}` : '',
|
|
31
|
-
|
|
34
|
+
resolvedDisabled ? 'ion-checkbox--disabled' : '',
|
|
32
35
|
className || '',
|
|
33
36
|
]
|
|
34
37
|
.filter(Boolean)
|
|
35
38
|
.join(' ');
|
|
36
|
-
return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "checkbox", disabled:
|
|
39
|
+
return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "checkbox", disabled: resolvedDisabled, className: "ion-checkbox__input" }), _jsx("span", { className: "ion-checkbox__indicator", "aria-hidden": "true", children: _jsx("span", { className: "ion-checkbox__mark", children: isIndeterminate ? _jsx(DashMark, {}) : _jsx(CheckMark, {}) }) }), children && _jsx("span", { className: "ion-checkbox__label", children: children })] }));
|
|
37
40
|
});
|
|
38
41
|
Checkbox.displayName = 'Checkbox';
|
|
39
42
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EACZ,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AA4BxD;sDACsD;AACtD,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,gBAAgB,EAClB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CACrB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,UAAU,EACZ,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACrB,GACE,CACP,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,OAAO,EAChB,eAAe,GAAG,KAAK,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAE/D,MAAM,MAAM,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC9C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,OAAO;YAAE,MAAM,CAAC,OAAO,CAAC,aAAa,GAAG,eAAe,CAAC;IACrE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,UAAU,GAAG;QACjB,cAAc;QACd,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC5C,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QACnD,gBAAgB,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;QAChD,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iBAAO,SAAS,EAAE,UAAU,aAC1B,mBACM,IAAI,EACR,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAC,qBAAqB,GAC/B,EACF,eAAM,SAAS,EAAC,yBAAyB,iBAAa,MAAM,YAC1D,eAAM,SAAS,EAAC,oBAAoB,YACjC,eAAe,CAAC,CAAC,CAAC,KAAC,QAAQ,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,GAC1C,GACF,EACN,QAAQ,IAAI,eAAM,SAAS,EAAC,qBAAqB,YAAE,QAAQ,GAAQ,IAC9D,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
|
|
@@ -1,15 +1,42 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { AriaTextFieldProps } from 'react-aria';
|
|
3
3
|
export type InputSize = 'sm' | 'md' | 'lg';
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* The plain `<input>` attributes that React Aria has no opinion about —
|
|
6
|
+
* `title`, `list`, `onClick`, `style` and the rest.
|
|
7
|
+
*
|
|
8
|
+
* `AriaTextFieldProps` wins every overlap: it is omitted from this side, so
|
|
9
|
+
* `value`, `onChange`, `placeholder` and friends keep React Aria's types and
|
|
10
|
+
* semantics rather than the DOM's. Without this, spreading the rest props onto
|
|
11
|
+
* the element was pointless — the runtime would forward attributes the type
|
|
12
|
+
* refused to accept, so no caller could pass them in the first place.
|
|
13
|
+
*/
|
|
14
|
+
type InputDOMProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof AriaTextFieldProps | 'size' | 'autoCapitalize' | 'disabled'>;
|
|
15
|
+
export interface InputProps extends AriaTextFieldProps, InputDOMProps {
|
|
5
16
|
/** Matches the Figma `Size` variant: Small, Medium, Large. */
|
|
6
17
|
size?: InputSize;
|
|
18
|
+
/**
|
|
19
|
+
* Narrower than React's own typing, which also allows any `string`.
|
|
20
|
+
* `autoCapitalize` is declared on `AriaTextFieldOptions` rather than
|
|
21
|
+
* `AriaTextFieldProps`, so `keyof AriaTextFieldProps` above cannot omit it —
|
|
22
|
+
* and the wide DOM version does not satisfy what `useTextField` accepts.
|
|
23
|
+
*/
|
|
24
|
+
autoCapitalize?: 'none' | 'off' | 'on' | 'sentences' | 'words' | 'characters';
|
|
7
25
|
/** Leading icon. Figma's `Show Leading Icon` + `Leading Icon` swap. */
|
|
8
26
|
leadingIcon?: React.ReactNode;
|
|
9
27
|
/** Trailing icon. Figma's `Show Trailing Icon` + `Trailing Icon` swap. */
|
|
10
28
|
trailingIcon?: React.ReactNode;
|
|
11
|
-
/**
|
|
29
|
+
/**
|
|
30
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
31
|
+
*/
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Class names for the control box (`.ion-input`). Always lands here —
|
|
35
|
+
* never on the form-field wrapper. Use `wrapperClassName` for that.
|
|
36
|
+
*/
|
|
12
37
|
className?: string;
|
|
38
|
+
/** Class names for the `.ion-field` wrapper when a label or helper is shown. */
|
|
39
|
+
wrapperClassName?: string;
|
|
13
40
|
}
|
|
14
41
|
/**
|
|
15
42
|
* Input covers both Figma components on the Input page: the field itself
|
|
@@ -29,4 +56,5 @@ export interface InputProps extends AriaTextFieldProps {
|
|
|
29
56
|
* expresses; Default, Invalid, Disabled and Read-only are props.
|
|
30
57
|
*/
|
|
31
58
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
59
|
+
export {};
|
|
32
60
|
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAIrD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;;;;;;GASG;AACH,KAAK,aAAa,GAAG,IAAI,CACvB,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,kBAAkB,GAAG,MAAM,GAAG,gBAAgB,GAAG,UAAU,CAClE,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,aAAa;IACnE,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAC;IAC9E,uEAAuE;IACvE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAuHjB,CAAC"}
|
package/dist/components/Input.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { forwardRef, useRef, useImperativeHandle } from 'react';
|
|
3
4
|
import { useTextField, useHover, useFocusRing, mergeProps } from 'react-aria';
|
|
5
|
+
import { ARIA_TEXT_FIELD_NON_DOM_PROPS, omitProps } from './dom-props.js';
|
|
6
|
+
import { resolveDisabled } from './resolve-disabled.js';
|
|
4
7
|
/**
|
|
5
8
|
* Input covers both Figma components on the Input page: the field itself
|
|
6
9
|
* (`Input`, 80:275) and the label/helper stack around it (`Form Field`,
|
|
@@ -19,10 +22,25 @@ import { useTextField, useHover, useFocusRing, mergeProps } from 'react-aria';
|
|
|
19
22
|
* expresses; Default, Invalid, Disabled and Read-only are props.
|
|
20
23
|
*/
|
|
21
24
|
export const Input = forwardRef((props, forwardedRef) => {
|
|
22
|
-
const { size = 'md', leadingIcon, trailingIcon, className: customClassName, label, description, errorMessage, isDisabled, isReadOnly, isInvalid, } = props;
|
|
25
|
+
const { size = 'md', leadingIcon, trailingIcon, className: customClassName, wrapperClassName, label, description, errorMessage, isDisabled: isDisabledProp, disabled, isReadOnly, isInvalid, ...restProps } = props;
|
|
26
|
+
const isDisabled = resolveDisabled(isDisabledProp, disabled);
|
|
27
|
+
const ariaProps = { ...props, isDisabled };
|
|
28
|
+
/*
|
|
29
|
+
* Everything the caller passed that this component and React Aria have no
|
|
30
|
+
* opinion about — `data-testid`, `name`, `autoComplete`, arbitrary `data-*`
|
|
31
|
+
* and `aria-*`.
|
|
32
|
+
*
|
|
33
|
+
* There was no rest object here at all, so those props were silently
|
|
34
|
+
* dropped: the ten named ones were used and the remainder went nowhere.
|
|
35
|
+
* Every other component in the library spreads its rest, which is what made
|
|
36
|
+
* this read as an oversight rather than a policy. Non-DOM React Aria props
|
|
37
|
+
* are stripped first for the same reason Button strips them — see
|
|
38
|
+
* ./dom-props.ts.
|
|
39
|
+
*/
|
|
40
|
+
const domProps = omitProps(restProps, ARIA_TEXT_FIELD_NON_DOM_PROPS);
|
|
23
41
|
const domRef = useRef(null);
|
|
24
42
|
useImperativeHandle(forwardedRef, () => domRef.current);
|
|
25
|
-
const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
|
|
43
|
+
const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(ariaProps, domRef);
|
|
26
44
|
const { hoverProps, isHovered } = useHover({ isDisabled });
|
|
27
45
|
const { focusProps, isFocusVisible } = useFocusRing({ isTextInput: true });
|
|
28
46
|
const boxClassNames = [
|
|
@@ -31,9 +49,7 @@ export const Input = forwardRef((props, forwardedRef) => {
|
|
|
31
49
|
isInvalid ? 'ion-input--invalid' : '',
|
|
32
50
|
isReadOnly ? 'ion-input--readonly' : '',
|
|
33
51
|
isDisabled ? 'ion-input--disabled' : '',
|
|
34
|
-
|
|
35
|
-
// belongs on the box instead.
|
|
36
|
-
!label && !description && !errorMessage ? customClassName || '' : '',
|
|
52
|
+
customClassName || '',
|
|
37
53
|
]
|
|
38
54
|
.filter(Boolean)
|
|
39
55
|
.join(' ');
|
|
@@ -47,7 +63,7 @@ export const Input = forwardRef((props, forwardedRef) => {
|
|
|
47
63
|
'data-readonly': isReadOnly || undefined,
|
|
48
64
|
'data-disabled': isDisabled || undefined,
|
|
49
65
|
};
|
|
50
|
-
const box = (_jsxs("div", { ...hoverProps, ...stateAttributes, className: boxClassNames, children: [leadingIcon && (_jsx("span", { className: "ion-input__icon-start", "aria-hidden": "true", children: leadingIcon })), _jsx("input", { ...mergeProps(inputProps, focusProps), ref: domRef, className: "ion-input__field" }), trailingIcon && (_jsx("span", { className: "ion-input__icon-end", "aria-hidden": "true", children: trailingIcon }))] }));
|
|
66
|
+
const box = (_jsxs("div", { ...hoverProps, ...stateAttributes, className: boxClassNames, children: [leadingIcon && (_jsx("span", { className: "ion-input__icon-start", "aria-hidden": "true", children: leadingIcon })), _jsx("input", { ...domProps, ...mergeProps(inputProps, focusProps), ref: domRef, className: "ion-input__field" }), trailingIcon && (_jsx("span", { className: "ion-input__icon-end", "aria-hidden": "true", children: trailingIcon }))] }));
|
|
51
67
|
// Figma's Error variant recolours the helper text, so the error message
|
|
52
68
|
// takes the helper's slot rather than stacking below it.
|
|
53
69
|
const helper = isInvalid && errorMessage ? errorMessage : description;
|
|
@@ -57,7 +73,7 @@ export const Input = forwardRef((props, forwardedRef) => {
|
|
|
57
73
|
return (_jsxs("div", { className: [
|
|
58
74
|
'ion-field',
|
|
59
75
|
isInvalid ? 'ion-field--error' : '',
|
|
60
|
-
|
|
76
|
+
wrapperClassName || '',
|
|
61
77
|
]
|
|
62
78
|
.filter(Boolean)
|
|
63
79
|
.join(' '), children: [label && (_jsx("label", { ...labelProps, className: "ion-field__label", children: label })), box, helper && (_jsx("span", { ...helperProps, className: "ion-field__helper", children: helper }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -23,6 +23,12 @@ export interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButto
|
|
|
23
23
|
isSelected?: boolean;
|
|
24
24
|
/** Figma's `Show Leading Icon` + `Leading Icon` swap. */
|
|
25
25
|
icon?: React.ReactNode;
|
|
26
|
+
/** Whether the item is disabled. */
|
|
27
|
+
isDisabled?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
30
|
+
*/
|
|
31
|
+
disabled?: boolean;
|
|
26
32
|
children?: React.ReactNode;
|
|
27
33
|
}
|
|
28
34
|
export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,oFAUhB,CAAC;AAIF,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,CACP;IACC,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAgBD,eAAO,MAAM,QAAQ,yFAoCpB,CAAC"}
|
package/dist/components/Menu.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
+
import { resolveDisabled } from './resolve-disabled.js';
|
|
3
4
|
/**
|
|
4
5
|
* Menu is the list surface, not a popover.
|
|
5
6
|
*
|
|
@@ -20,12 +21,15 @@ Menu.displayName = 'Menu';
|
|
|
20
21
|
/** Figma's trailing check. Always occupies its slot so rows never reflow as the
|
|
21
22
|
* selection moves; only its visibility changes. */
|
|
22
23
|
const Check = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m5 13 4 4L19 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
23
|
-
export const MenuItem = forwardRef(({ isSelected, icon, className, children, disabled, ...rest }, ref) =>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
export const MenuItem = forwardRef(({ isSelected, icon, className, children, isDisabled, disabled, ...rest }, ref) => {
|
|
25
|
+
const resolvedDisabled = resolveDisabled(isDisabled, disabled);
|
|
26
|
+
return (_jsx("li", { children: _jsxs("button", { ...rest, ref: ref, type: "button", disabled: resolvedDisabled, "aria-pressed": isSelected, className: [
|
|
27
|
+
'ion-menu__item',
|
|
28
|
+
isSelected ? 'ion-menu__item--selected' : '',
|
|
29
|
+
className || '',
|
|
30
|
+
]
|
|
31
|
+
.filter(Boolean)
|
|
32
|
+
.join(' '), children: [icon && (_jsx("span", { className: "ion-menu__icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "ion-menu__label", children: children }), _jsx("span", { className: "ion-menu__check", "aria-hidden": "true", children: _jsx(Check, {}) })] }) }));
|
|
33
|
+
});
|
|
30
34
|
MenuItem.displayName = 'MenuItem';
|
|
31
35
|
//# sourceMappingURL=Menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMxD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACzC,gBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAE3D,QAAQ,GACN,CACN,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAmB1B;oDACoD;AACpD,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAClB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,gBAAgB,EAClB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EACxE,GAAG,EACH,EAAE;IACF,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAE/D,OAAO,CACL,uBACE,qBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,gBAAgB,kBACZ,UAAU,EACxB,SAAS,EAAE;gBACT,gBAAgB;gBAChB,UAAU,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;gBAC5C,SAAS,IAAI,EAAE;aAChB;iBACE,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,aAEX,IAAI,IAAI,CACP,eAAM,SAAS,EAAC,gBAAgB,iBAAa,MAAM,YAChD,IAAI,GACA,CACR,EACD,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EACnD,eAAM,SAAS,EAAC,iBAAiB,iBAAa,MAAM,YAClD,KAAC,KAAK,KAAG,GACJ,IACA,GACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
|
|
@@ -5,6 +5,10 @@ interface NavItemOwnProps {
|
|
|
5
5
|
/** Figma's `Show Chevron`. Set on a nav item that opens a menu, not a plain link. */
|
|
6
6
|
showChevron?: boolean;
|
|
7
7
|
isDisabled?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
10
|
+
*/
|
|
11
|
+
disabled?: boolean;
|
|
8
12
|
children?: React.ReactNode;
|
|
9
13
|
className?: string;
|
|
10
14
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../src/components/NavItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../src/components/NavItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAmBvE,UAAU,eAAe;IACvB,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qFAAqF;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,eAAe,GACxC,CACI,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CACtB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,eAAe,CACtB,CAAC,GACF,CAAC;IAAE,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,eAAe,GAAG,MAAM,CAC/B,CAAC,CACL,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,4GA+GlB,CAAC"}
|