ionbase-ui 0.2.0 → 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/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 +133 -0
- package/dist/styles/table.css +10 -6
- package/dist/styles/tabs.css +12 -3
- 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
|
@@ -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":"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"}
|
|
@@ -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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { forwardRef, useRef, useImperativeHandle } from 'react';
|
|
3
4
|
import { useHover, useFocusRing, mergeProps } from 'react-aria';
|
|
5
|
+
import { resolveDisabled } from './resolve-disabled.js';
|
|
4
6
|
/** Figma's `Chevron` slot — always the same downward caret, shown only when
|
|
5
7
|
* `showChevron` is set. Inlined for the same reason Select's is: it is part
|
|
6
8
|
* of the control, not a slot a caller fills. */
|
|
@@ -18,7 +20,8 @@ const Chevron = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-h
|
|
|
18
20
|
* `:focus-visible` rules so the stylesheet still works without React.
|
|
19
21
|
*/
|
|
20
22
|
export const NavItem = forwardRef((props, forwardedRef) => {
|
|
21
|
-
const { icon, showChevron, isDisabled, children, className, href, ...rest } = props;
|
|
23
|
+
const { icon, showChevron, isDisabled: isDisabledProp, disabled, children, className, href, ...rest } = props;
|
|
24
|
+
const isDisabled = resolveDisabled(isDisabledProp, disabled);
|
|
22
25
|
const domRef = useRef(null);
|
|
23
26
|
useImperativeHandle(forwardedRef, () => domRef.current);
|
|
24
27
|
const { hoverProps, isHovered } = useHover({ isDisabled });
|
|
@@ -37,7 +40,24 @@ export const NavItem = forwardRef((props, forwardedRef) => {
|
|
|
37
40
|
};
|
|
38
41
|
const content = (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "ion-nav-item__icon", "aria-hidden": "true", children: icon })), children, showChevron && (_jsx("span", { className: "ion-nav-item__chevron", "aria-hidden": "true", children: _jsx(Chevron, {}) }))] }));
|
|
39
42
|
if (href !== undefined) {
|
|
40
|
-
|
|
43
|
+
/*
|
|
44
|
+
* A disabled link keeps the `<a>` (so the role stays "link") but must not
|
|
45
|
+
* fire handlers spread via `...rest`. `aria-disabled` alone does not stop
|
|
46
|
+
* `onClick` — strip pointer/keyboard activation and take the link out of
|
|
47
|
+
* the tab order.
|
|
48
|
+
*/
|
|
49
|
+
const { onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, onKeyDown, onKeyUp, ...anchorRest } = rest;
|
|
50
|
+
return (_jsx("a", { ...anchorRest, ...(isDisabled
|
|
51
|
+
? {}
|
|
52
|
+
: {
|
|
53
|
+
onClick,
|
|
54
|
+
onMouseDown,
|
|
55
|
+
onMouseUp,
|
|
56
|
+
onPointerDown,
|
|
57
|
+
onPointerUp,
|
|
58
|
+
onKeyDown,
|
|
59
|
+
onKeyUp,
|
|
60
|
+
}), ...mergeProps(hoverProps, focusProps), ...stateAttributes, ref: domRef, href: isDisabled ? undefined : href, "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, className: classNames, children: content }));
|
|
41
61
|
}
|
|
42
62
|
return (_jsx("button", { ...rest, ...mergeProps(hoverProps, focusProps), ...stateAttributes, ref: domRef, type: "button", disabled: isDisabled, className: classNames, children: content }));
|
|
43
63
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.js","sourceRoot":"","sources":["../../src/components/NavItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NavItem.js","sourceRoot":"","sources":["../../src/components/NavItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,12 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
|
|
|
5
5
|
value: string;
|
|
6
6
|
size?: RadioSize;
|
|
7
7
|
intent?: RadioIntent;
|
|
8
|
+
/** Whether this radio is disabled. Falls back to the group's `isDisabled`. */
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
12
|
+
*/
|
|
13
|
+
disabled?: boolean;
|
|
8
14
|
children?: React.ReactNode;
|
|
9
15
|
}
|
|
10
16
|
export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -17,7 +23,12 @@ export interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLF
|
|
|
17
23
|
label?: React.ReactNode;
|
|
18
24
|
size?: RadioSize;
|
|
19
25
|
intent?: RadioIntent;
|
|
26
|
+
/** Whether every radio in the group is disabled. */
|
|
20
27
|
isDisabled?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
30
|
+
*/
|
|
31
|
+
disabled?: boolean;
|
|
21
32
|
children?: React.ReactNode;
|
|
22
33
|
}
|
|
23
34
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAoBzD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,MAAM,GAAG,OAAO,CAC1B;IACC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,KAAK,qFAuEjB,CAAC;AAIF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,CACX;IACC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,6FA4CtB,CAAC"}
|