@xaui/native 0.9.1-alpha.21 → 0.9.1-alpha.23
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/{chunk-RMLFMRWL.js → chunk-2U6JR7BF.js} +5 -5
- package/dist/{chunk-N7C4UNUL.js → chunk-3JATAB7S.js} +23 -1
- package/dist/chunk-4MHJOWM4.cjs +364 -0
- package/dist/{chunk-2WMVDMFV.cjs → chunk-6HXWQ5AU.cjs} +2 -2
- package/dist/chunk-6WW4CSPY.cjs +82 -0
- package/dist/chunk-AHL33YAO.js +425 -0
- package/dist/{chunk-XHZBXYVU.js → chunk-AKXG43S4.js} +1 -1
- package/dist/{chunk-4NE3SLTM.cjs → chunk-BH5DSJVX.cjs} +102 -73
- package/dist/{chunk-BPBY7ON7.cjs → chunk-BNWS26PX.cjs} +19 -21
- package/dist/{chunk-5LC6KVL3.cjs → chunk-DXGQ43IV.cjs} +3 -3
- package/dist/chunk-E3LXUXE7.js +451 -0
- package/dist/{chunk-ISVUXVFL.js → chunk-FNQF4KQV.js} +19 -71
- package/dist/{chunk-YRCUALUQ.js → chunk-FTCTTBLG.js} +7 -9
- package/dist/{chunk-JL27KVRT.js → chunk-FVP5FUVS.js} +3 -3
- package/dist/{chunk-UL263KGM.cjs → chunk-GBPWTFTU.cjs} +10 -10
- package/dist/{chunk-TUJBDS5M.js → chunk-GG2WWCBK.js} +10 -10
- package/dist/{chunk-EVXZGNPA.cjs → chunk-HUZ4AUM2.cjs} +98 -98
- package/dist/chunk-I6PE5UUH.cjs +425 -0
- package/dist/{chunk-33QILJJH.cjs → chunk-IBEX4XGV.cjs} +11 -11
- package/dist/{chunk-IBRVMLUF.js → chunk-KM2TI5IC.js} +107 -80
- package/dist/chunk-OGC4RKE3.js +364 -0
- package/dist/{chunk-JXLRHKCQ.js → chunk-OYZYWWJ6.js} +1 -1
- package/dist/{chunk-EXX6ATAS.js → chunk-PMO62QK4.js} +101 -101
- package/dist/{chunk-UBA6AEY6.cjs → chunk-RAWOJ3N3.cjs} +8 -8
- package/dist/chunk-TIP3T7JJ.cjs +451 -0
- package/dist/{chunk-APCBIHLR.cjs → chunk-VDRRD6GM.cjs} +29 -81
- package/dist/{chunk-UVO4GFSW.cjs → chunk-YXVKQMCK.cjs} +23 -1
- package/dist/chunk-ZQ3JSWRO.js +82 -0
- package/dist/close-button.type-BUYuoSt2.d.ts +36 -0
- package/dist/close-button.type-CHsgZ3wO.d.cts +36 -0
- package/dist/components/alert/index.cjs +17 -0
- package/dist/components/alert/index.d.cts +169 -0
- package/dist/components/alert/index.d.ts +169 -0
- package/dist/components/alert/index.js +17 -0
- package/dist/components/button/index.cjs +6 -7
- package/dist/components/button/index.d.cts +74 -125
- package/dist/components/button/index.d.ts +74 -125
- package/dist/components/button/index.js +5 -6
- package/dist/components/card/index.cjs +5 -6
- package/dist/components/card/index.d.cts +74 -74
- package/dist/components/card/index.d.ts +74 -74
- package/dist/components/card/index.js +4 -5
- package/dist/components/chip/index.cjs +17 -0
- package/dist/components/chip/index.d.cts +608 -0
- package/dist/components/chip/index.d.ts +608 -0
- package/dist/components/chip/index.js +17 -0
- package/dist/components/input/index.cjs +14 -0
- package/dist/components/input/index.d.cts +213 -0
- package/dist/components/input/index.d.ts +213 -0
- package/dist/components/input/index.js +14 -0
- package/dist/components/typography/index.cjs +4 -4
- package/dist/components/typography/index.d.cts +4 -4
- package/dist/components/typography/index.d.ts +4 -4
- package/dist/components/typography/index.js +3 -3
- package/dist/components/view/index.cjs +3 -3
- package/dist/components/view/index.d.cts +7 -7
- package/dist/components/view/index.d.ts +7 -7
- package/dist/components/view/index.js +2 -2
- package/dist/{create-recipe-CC3NNCqF.d.ts → create-recipe-C4JkINrA.d.ts} +18 -5
- package/dist/{create-recipe-CPBFg7ym.d.cts → create-recipe-dBN_ewZc.d.cts} +18 -5
- package/dist/{icon.type-Cs1tMX0W.d.cts → icon.type-CF4KiMKl.d.cts} +1 -1
- package/dist/{icon.type-BkcEPJbK.d.ts → icon.type-Dq4_qePa.d.ts} +1 -1
- package/dist/index.cjs +44 -14
- package/dist/index.d.cts +9 -5
- package/dist/index.d.ts +9 -5
- package/dist/index.js +74 -44
- package/dist/{pressable-feedback.type-wfeiJz5m.d.cts → pressable-feedback.type-BA2C9sSz.d.cts} +1 -1
- package/dist/{pressable-feedback.type-DsvWZXWC.d.ts → pressable-feedback.type-Bs4dQlGj.d.ts} +1 -1
- package/dist/{style-props.type-B1BG5TCm.d.cts → style-props.type-CfnoGEP7.d.cts} +1 -1
- package/dist/{style-props.type-B1BG5TCm.d.ts → style-props.type-CfnoGEP7.d.ts} +1 -1
- package/dist/system/index.cjs +15 -7
- package/dist/system/index.d.cts +175 -101
- package/dist/system/index.d.ts +175 -101
- package/dist/system/index.js +15 -7
- package/dist/theme/index.cjs +2 -2
- package/dist/theme/index.d.cts +10 -10
- package/dist/theme/index.d.ts +10 -10
- package/dist/theme/index.js +1 -1
- package/package.json +31 -1
- package/dist/chunk-RRRGLRRP.cjs +0 -28
- package/dist/chunk-SGHP76GU.js +0 -28
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import {
|
|
2
|
+
PressableFeedback,
|
|
3
|
+
usePressState,
|
|
4
|
+
warnDev
|
|
5
|
+
} from "./chunk-KM2TI5IC.js";
|
|
6
|
+
import {
|
|
7
|
+
useStyleProps
|
|
8
|
+
} from "./chunk-PMO62QK4.js";
|
|
9
|
+
|
|
10
|
+
// src/system/close-button/close-button.tsx
|
|
11
|
+
import { forwardRef } from "react";
|
|
12
|
+
import { View } from "react-native";
|
|
13
|
+
|
|
14
|
+
// src/system/close-button/close-button.style.ts
|
|
15
|
+
import { StyleSheet } from "react-native";
|
|
16
|
+
var closeButtonSheet = StyleSheet.create({
|
|
17
|
+
bar: { transform: [{ rotate: "45deg" }] },
|
|
18
|
+
barMirrored: { transform: [{ rotate: "-45deg" }] }
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
// src/system/close-button/close-button.tsx
|
|
22
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
23
|
+
var HIT_SLOP = 8;
|
|
24
|
+
var CloseButton = forwardRef(function CloseButton2({
|
|
25
|
+
name,
|
|
26
|
+
children,
|
|
27
|
+
baseStyle,
|
|
28
|
+
glyphStyle,
|
|
29
|
+
accessibilityRole = "button",
|
|
30
|
+
hitSlop = HIT_SLOP,
|
|
31
|
+
style,
|
|
32
|
+
onPressIn,
|
|
33
|
+
onPressOut,
|
|
34
|
+
...props
|
|
35
|
+
}, ref) {
|
|
36
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
37
|
+
const [isPressed, press] = usePressState({ onPressIn, onPressOut });
|
|
38
|
+
if (!rest.accessibilityLabel && !rest["aria-label"]) {
|
|
39
|
+
warnDev(
|
|
40
|
+
`${name}: a close button needs an \`accessibilityLabel\` \u2014 the cross is not text, and the label beside it names what is being dismissed, not the action.`
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
PressableFeedback,
|
|
45
|
+
{
|
|
46
|
+
ref,
|
|
47
|
+
isPressed,
|
|
48
|
+
accessibilityRole,
|
|
49
|
+
hitSlop,
|
|
50
|
+
...rest,
|
|
51
|
+
style: [
|
|
52
|
+
baseStyle,
|
|
53
|
+
styleProps,
|
|
54
|
+
typeof style === "function" ? style({ pressed: isPressed }) : style
|
|
55
|
+
],
|
|
56
|
+
onPressIn: press.onPressIn,
|
|
57
|
+
onPressOut: press.onPressOut,
|
|
58
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
59
|
+
/* @__PURE__ */ jsx(View, { style: [glyphStyle, closeButtonSheet.bar] }),
|
|
60
|
+
/* @__PURE__ */ jsx(View, { style: [glyphStyle, closeButtonSheet.barMirrored] })
|
|
61
|
+
] })
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
});
|
|
65
|
+
CloseButton.displayName = "XAUI.CloseButton";
|
|
66
|
+
|
|
67
|
+
// src/system/close-button/close-button.recipe.ts
|
|
68
|
+
function closeButtonBase(theme) {
|
|
69
|
+
return {
|
|
70
|
+
close: { alignItems: "center", justifyContent: "center" },
|
|
71
|
+
closeGlyph: {
|
|
72
|
+
position: "absolute",
|
|
73
|
+
height: theme.borderWidth.default * 1.5,
|
|
74
|
+
borderRadius: theme.borderWidth.default
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export {
|
|
80
|
+
CloseButton,
|
|
81
|
+
closeButtonBase
|
|
82
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { StyleProp, ViewStyle, PressableStateCallbackType } from 'react-native';
|
|
3
|
+
import { P as PressableFeedbackProps } from './pressable-feedback.type-Bs4dQlGj.js';
|
|
4
|
+
|
|
5
|
+
type CloseButtonOwnProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Names the slot in the development warning about a missing label — `'Chip.Close'`,
|
|
8
|
+
* `'Alert.Close'`. Without it the warning would say "a close button" and leave the
|
|
9
|
+
* reader to find which one.
|
|
10
|
+
*/
|
|
11
|
+
name: string;
|
|
12
|
+
/**
|
|
13
|
+
* Replaces the built-in cross — an `Icon`, or any glyph. Unset, the button draws its
|
|
14
|
+
* own from two rotated bars, which is what makes a dismissible component work in a
|
|
15
|
+
* project that has installed no icon set.
|
|
16
|
+
*/
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* The style the surrounding component's recipe resolved for this node, applied under
|
|
20
|
+
* the caller's own. It is separate from `style` because `style` may be `Pressable`'s
|
|
21
|
+
* function form, and a function cannot be merged into an array without being resolved
|
|
22
|
+
* first — which only this component can do, since it owns the press state.
|
|
23
|
+
*/
|
|
24
|
+
baseStyle?: StyleProp<ViewStyle>;
|
|
25
|
+
/** One bar of the cross: its length, its thickness and its colour, from the recipe. */
|
|
26
|
+
glyphStyle?: StyleProp<ViewStyle>;
|
|
27
|
+
/** R9 — `Pressable`'s function form as much as an object or an array. */
|
|
28
|
+
style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* R14 — it renders a `PressableFeedback`, so it carries that node's style keys as props
|
|
32
|
+
* through it.
|
|
33
|
+
*/
|
|
34
|
+
type CloseButtonProps = CloseButtonOwnProps & Omit<PressableFeedbackProps, 'isPressed' | 'style' | 'children'>;
|
|
35
|
+
|
|
36
|
+
export type { CloseButtonProps as C };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { StyleProp, ViewStyle, PressableStateCallbackType } from 'react-native';
|
|
3
|
+
import { P as PressableFeedbackProps } from './pressable-feedback.type-BA2C9sSz.cjs';
|
|
4
|
+
|
|
5
|
+
type CloseButtonOwnProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Names the slot in the development warning about a missing label — `'Chip.Close'`,
|
|
8
|
+
* `'Alert.Close'`. Without it the warning would say "a close button" and leave the
|
|
9
|
+
* reader to find which one.
|
|
10
|
+
*/
|
|
11
|
+
name: string;
|
|
12
|
+
/**
|
|
13
|
+
* Replaces the built-in cross — an `Icon`, or any glyph. Unset, the button draws its
|
|
14
|
+
* own from two rotated bars, which is what makes a dismissible component work in a
|
|
15
|
+
* project that has installed no icon set.
|
|
16
|
+
*/
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* The style the surrounding component's recipe resolved for this node, applied under
|
|
20
|
+
* the caller's own. It is separate from `style` because `style` may be `Pressable`'s
|
|
21
|
+
* function form, and a function cannot be merged into an array without being resolved
|
|
22
|
+
* first — which only this component can do, since it owns the press state.
|
|
23
|
+
*/
|
|
24
|
+
baseStyle?: StyleProp<ViewStyle>;
|
|
25
|
+
/** One bar of the cross: its length, its thickness and its colour, from the recipe. */
|
|
26
|
+
glyphStyle?: StyleProp<ViewStyle>;
|
|
27
|
+
/** R9 — `Pressable`'s function form as much as an object or an array. */
|
|
28
|
+
style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* R14 — it renders a `PressableFeedback`, so it carries that node's style keys as props
|
|
32
|
+
* through it.
|
|
33
|
+
*/
|
|
34
|
+
type CloseButtonProps = CloseButtonOwnProps & Omit<PressableFeedbackProps, 'isPressed' | 'style' | 'children'>;
|
|
35
|
+
|
|
36
|
+
export type { CloseButtonProps as C };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
var _chunk4MHJOWM4cjs = require('../../chunk-4MHJOWM4.cjs');
|
|
6
|
+
require('../../chunk-6WW4CSPY.cjs');
|
|
7
|
+
require('../../chunk-DXGQ43IV.cjs');
|
|
8
|
+
require('../../chunk-BH5DSJVX.cjs');
|
|
9
|
+
require('../../chunk-YXVKQMCK.cjs');
|
|
10
|
+
require('../../chunk-57SJ4LJF.cjs');
|
|
11
|
+
require('../../chunk-HUZ4AUM2.cjs');
|
|
12
|
+
require('../../chunk-MC7SY2QH.cjs');
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
exports.Alert = _chunk4MHJOWM4cjs.Alert; exports.alertRecipe = _chunk4MHJOWM4cjs.alertRecipe; exports.useAlert = _chunk4MHJOWM4cjs.useAlert;
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import * as react_native from 'react-native';
|
|
4
|
+
import { StyleProp, ViewStyle, TextStyle, ViewProps, TextProps } from 'react-native';
|
|
5
|
+
import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
|
|
6
|
+
import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
|
|
7
|
+
import { a as IconContextValue, b as IconProps } from '../../icon.type-CF4KiMKl.cjs';
|
|
8
|
+
import { C as CloseButtonProps } from '../../close-button.type-CHsgZ3wO.cjs';
|
|
9
|
+
import { R as Recipe, g as SlotStyles, j as StyleFn } from '../../create-recipe-dBN_ewZc.cjs';
|
|
10
|
+
import '../../pressable-feedback.type-BA2C9sSz.cjs';
|
|
11
|
+
import 'react-native-reanimated';
|
|
12
|
+
|
|
13
|
+
type AlertSlot = 'root' | 'icon' | 'iconGlyph' | 'content' | 'title' | 'description' | 'close' | 'closeGlyph';
|
|
14
|
+
/**
|
|
15
|
+
* Nine names: the surface, the accent in two weights, and the three status families in
|
|
16
|
+
* theirs. An alert is the one component in the library that is **both** a surface and a
|
|
17
|
+
* report, so it takes the emphasis vocabulary of the `Card` for its neutral level and the
|
|
18
|
+
* status vocabulary of the `Chip` for the rest.
|
|
19
|
+
*
|
|
20
|
+
* - **`default`** — the `surface` fill and the surface shadow, exactly the `Card`'s
|
|
21
|
+
* `default`. This is HeroUI's alert: a neutral card, with the status carried by the icon
|
|
22
|
+
* rather than by the background.
|
|
23
|
+
* - **`primary` / `secondary`** — the full accent and its soft slice, for the
|
|
24
|
+
* informational alert that is not an outcome.
|
|
25
|
+
* - **`success` / `warning` / `danger`**, each with a `-soft` slice — the tinted surface
|
|
26
|
+
* most alerts want, and the solid fill for the banner that has to stop the reader.
|
|
27
|
+
*
|
|
28
|
+
* `tertiary` and `ghost` are absent: an alert without a surface is a paragraph, and the
|
|
29
|
+
* outline case is `default` with `borderWidth` and `borderColor` as style props (R14).
|
|
30
|
+
*/
|
|
31
|
+
type AlertVariant = 'default' | 'primary' | 'secondary' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
|
|
32
|
+
type AlertSize = Size;
|
|
33
|
+
/**
|
|
34
|
+
* What the `Alert` itself understands. R14 — a name in here is the component's, so the
|
|
35
|
+
* style prop that shares it is not exposed: `size` is the alert's scale and never
|
|
36
|
+
* `ViewStyle`'s, and `color` is R7's tint.
|
|
37
|
+
*/
|
|
38
|
+
type AlertOwnProps = {
|
|
39
|
+
variant?: AlertVariant;
|
|
40
|
+
/**
|
|
41
|
+
* Padding, gaps, radius and the type of `Title` and `Description`. **Never a height**:
|
|
42
|
+
* an alert is a surface, and it is as tall as the message it carries.
|
|
43
|
+
*/
|
|
44
|
+
size?: AlertSize;
|
|
45
|
+
/** Overrides the radius `size` chose. */
|
|
46
|
+
radius?: RadiusKey;
|
|
47
|
+
/**
|
|
48
|
+
* A raw tint (`'#7c3aed'`), never a token (R7). It paints the fill and, through its
|
|
49
|
+
* OKLab-contrasted slice, the title and the icon — so a brand-coloured alert stays
|
|
50
|
+
* readable without being told a second colour.
|
|
51
|
+
*/
|
|
52
|
+
color?: string;
|
|
53
|
+
/** Dims the alert, and reaches the close inside it. */
|
|
54
|
+
isDisabled?: boolean;
|
|
55
|
+
style?: StyleProp<ViewStyle>;
|
|
56
|
+
children?: ReactNode;
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* R14 — the alert's own props, `View`'s, and every `ViewStyle` key neither already
|
|
60
|
+
* claims. There is no press behaviour here, deliberately: an alert reports, it is not a
|
|
61
|
+
* control. A dismissible one carries an `Alert.Close`, which is the control.
|
|
62
|
+
*/
|
|
63
|
+
type AlertProps = AlertOwnProps & Omit<ViewProps, keyof AlertOwnProps> & Omit<ViewStyleProps, keyof AlertOwnProps | keyof ViewProps> & {
|
|
64
|
+
/** R12 — merge into the single child instead of rendering a `View`. */
|
|
65
|
+
asChild?: boolean;
|
|
66
|
+
};
|
|
67
|
+
/** `View`'s own props win over the `ViewStyle` keys of the same name (R14). */
|
|
68
|
+
type AlertContentProps = ViewProps & Omit<ViewStyleProps, keyof ViewProps> & {
|
|
69
|
+
children?: ReactNode;
|
|
70
|
+
};
|
|
71
|
+
/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
|
|
72
|
+
type AlertTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
|
|
73
|
+
children?: ReactNode;
|
|
74
|
+
};
|
|
75
|
+
type AlertTitleProps = AlertTextProps;
|
|
76
|
+
type AlertDescriptionProps = AlertTextProps;
|
|
77
|
+
/**
|
|
78
|
+
* `Icon`'s three forms, plus the `ViewStyle` keys of the box around them (R14).
|
|
79
|
+
*
|
|
80
|
+
* Unlike `Button.Icon` and `Chip.Icon`, this slot **renders a view of its own**. It has
|
|
81
|
+
* to: an alert's icon sits beside a block of text rather than on one line with it, and
|
|
82
|
+
* lining the glyph up with the first line's cap-height means offsetting it by half the
|
|
83
|
+
* leading — which needs a node. That node is also what lets the slot carry style props at
|
|
84
|
+
* all, which the other two cannot.
|
|
85
|
+
*/
|
|
86
|
+
type AlertIconGlyphKey = 'as' | 'children' | 'source' | 'size' | 'color';
|
|
87
|
+
/**
|
|
88
|
+
* `Pick`, distributed over `Icon`'s three forms rather than applied to the union as a
|
|
89
|
+
* whole. Applied as a whole it merges them into one shape where `as` and `source` are both
|
|
90
|
+
* optional — which is the boundary `IconProps` was turned into a union to keep, so
|
|
91
|
+
* `<Alert.Icon as={Check} source={png} />` would compile again and one of the two would be
|
|
92
|
+
* silently dropped.
|
|
93
|
+
*/
|
|
94
|
+
type AlertIconGlyphProps<T = IconProps> = T extends IconProps ? Pick<T, AlertIconGlyphKey> : never;
|
|
95
|
+
type AlertIconBoxProps = {
|
|
96
|
+
/** The box, not the glyph — `size` and `color` are what shape the icon itself. */
|
|
97
|
+
style?: StyleProp<ViewStyle>;
|
|
98
|
+
} & Omit<ViewStyleProps, AlertIconGlyphKey | 'style'>;
|
|
99
|
+
type AlertIconProps = AlertIconGlyphProps & AlertIconBoxProps;
|
|
100
|
+
/**
|
|
101
|
+
* Everything the shared `CloseButton` accepts, minus the three the alert supplies itself:
|
|
102
|
+
* the warning's name and the two resolved styles its recipe already decided (R5).
|
|
103
|
+
*/
|
|
104
|
+
type AlertCloseProps = Omit<CloseButtonProps, 'name' | 'baseStyle' | 'glyphStyle'>;
|
|
105
|
+
/**
|
|
106
|
+
* R5 — resolved styles, not props for a slot to resolve a second time. Each entry is the
|
|
107
|
+
* cached `StyleSheet` reference with the uncached tint pass layered over it, so a slot
|
|
108
|
+
* merges its own `style` on top and does no work of its own.
|
|
109
|
+
*/
|
|
110
|
+
type AlertContextValue = {
|
|
111
|
+
iconStyle: StyleProp<ViewStyle>;
|
|
112
|
+
contentStyle: StyleProp<ViewStyle>;
|
|
113
|
+
titleStyle: StyleProp<TextStyle>;
|
|
114
|
+
descriptionStyle: StyleProp<TextStyle>;
|
|
115
|
+
closeStyle: StyleProp<ViewStyle>;
|
|
116
|
+
closeGlyphStyle: StyleProp<ViewStyle>;
|
|
117
|
+
/**
|
|
118
|
+
* Values, not a style: `Icon` hands `size` and `color` to a third-party component, so
|
|
119
|
+
* the root flattens its icon slot once here rather than in every icon it contains.
|
|
120
|
+
*/
|
|
121
|
+
icon: IconContextValue;
|
|
122
|
+
isDisabled: boolean;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
declare const useAlert: () => AlertContextValue;
|
|
126
|
+
|
|
127
|
+
declare const alertRecipe: Recipe<"title" | "content" | "description" | "root" | "icon" | "iconGlyph" | "close" | "closeGlyph", AlertVariant, {
|
|
128
|
+
readonly size: {
|
|
129
|
+
readonly xs: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
130
|
+
readonly sm: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
131
|
+
readonly md: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
132
|
+
readonly lg: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
133
|
+
};
|
|
134
|
+
readonly radius: Record<RadiusKey, StyleFn<"root">>;
|
|
135
|
+
}>;
|
|
136
|
+
|
|
137
|
+
declare const Alert: react.ForwardRefExoticComponent<{
|
|
138
|
+
variant?: AlertVariant;
|
|
139
|
+
size?: AlertSize;
|
|
140
|
+
radius?: RadiusKey;
|
|
141
|
+
color?: string;
|
|
142
|
+
isDisabled?: boolean;
|
|
143
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
144
|
+
children?: react.ReactNode;
|
|
145
|
+
} & Omit<react_native.ViewProps, keyof {
|
|
146
|
+
variant?: AlertVariant;
|
|
147
|
+
size?: AlertSize;
|
|
148
|
+
radius?: RadiusKey;
|
|
149
|
+
color?: string;
|
|
150
|
+
isDisabled?: boolean;
|
|
151
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
152
|
+
children?: react.ReactNode;
|
|
153
|
+
}> & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "isDisabled" | "radius" | "size" | "variant"> & {
|
|
154
|
+
asChild?: boolean;
|
|
155
|
+
} & react.RefAttributes<react_native.View>> & {
|
|
156
|
+
Icon: react.ForwardRefExoticComponent<AlertIconProps & react.RefAttributes<react_native.View>>;
|
|
157
|
+
Content: react.ForwardRefExoticComponent<react_native.ViewProps & Omit<ViewStyleProps, keyof react_native.ViewProps> & {
|
|
158
|
+
children?: react.ReactNode;
|
|
159
|
+
} & react.RefAttributes<react_native.View>>;
|
|
160
|
+
Title: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
161
|
+
children?: react.ReactNode;
|
|
162
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
163
|
+
Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
164
|
+
children?: react.ReactNode;
|
|
165
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
166
|
+
Close: react.ForwardRefExoticComponent<AlertCloseProps & react.RefAttributes<react_native.View>>;
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
export { Alert, type AlertCloseProps, type AlertContentProps, type AlertContextValue, type AlertDescriptionProps, type AlertIconProps, type AlertProps, type AlertSize, type AlertSlot, type AlertTitleProps, type AlertVariant, alertRecipe, useAlert };
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import * as react_native from 'react-native';
|
|
4
|
+
import { StyleProp, ViewStyle, TextStyle, ViewProps, TextProps } from 'react-native';
|
|
5
|
+
import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.js';
|
|
6
|
+
import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
|
|
7
|
+
import { a as IconContextValue, b as IconProps } from '../../icon.type-Dq4_qePa.js';
|
|
8
|
+
import { C as CloseButtonProps } from '../../close-button.type-BUYuoSt2.js';
|
|
9
|
+
import { R as Recipe, g as SlotStyles, j as StyleFn } from '../../create-recipe-C4JkINrA.js';
|
|
10
|
+
import '../../pressable-feedback.type-Bs4dQlGj.js';
|
|
11
|
+
import 'react-native-reanimated';
|
|
12
|
+
|
|
13
|
+
type AlertSlot = 'root' | 'icon' | 'iconGlyph' | 'content' | 'title' | 'description' | 'close' | 'closeGlyph';
|
|
14
|
+
/**
|
|
15
|
+
* Nine names: the surface, the accent in two weights, and the three status families in
|
|
16
|
+
* theirs. An alert is the one component in the library that is **both** a surface and a
|
|
17
|
+
* report, so it takes the emphasis vocabulary of the `Card` for its neutral level and the
|
|
18
|
+
* status vocabulary of the `Chip` for the rest.
|
|
19
|
+
*
|
|
20
|
+
* - **`default`** — the `surface` fill and the surface shadow, exactly the `Card`'s
|
|
21
|
+
* `default`. This is HeroUI's alert: a neutral card, with the status carried by the icon
|
|
22
|
+
* rather than by the background.
|
|
23
|
+
* - **`primary` / `secondary`** — the full accent and its soft slice, for the
|
|
24
|
+
* informational alert that is not an outcome.
|
|
25
|
+
* - **`success` / `warning` / `danger`**, each with a `-soft` slice — the tinted surface
|
|
26
|
+
* most alerts want, and the solid fill for the banner that has to stop the reader.
|
|
27
|
+
*
|
|
28
|
+
* `tertiary` and `ghost` are absent: an alert without a surface is a paragraph, and the
|
|
29
|
+
* outline case is `default` with `borderWidth` and `borderColor` as style props (R14).
|
|
30
|
+
*/
|
|
31
|
+
type AlertVariant = 'default' | 'primary' | 'secondary' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
|
|
32
|
+
type AlertSize = Size;
|
|
33
|
+
/**
|
|
34
|
+
* What the `Alert` itself understands. R14 — a name in here is the component's, so the
|
|
35
|
+
* style prop that shares it is not exposed: `size` is the alert's scale and never
|
|
36
|
+
* `ViewStyle`'s, and `color` is R7's tint.
|
|
37
|
+
*/
|
|
38
|
+
type AlertOwnProps = {
|
|
39
|
+
variant?: AlertVariant;
|
|
40
|
+
/**
|
|
41
|
+
* Padding, gaps, radius and the type of `Title` and `Description`. **Never a height**:
|
|
42
|
+
* an alert is a surface, and it is as tall as the message it carries.
|
|
43
|
+
*/
|
|
44
|
+
size?: AlertSize;
|
|
45
|
+
/** Overrides the radius `size` chose. */
|
|
46
|
+
radius?: RadiusKey;
|
|
47
|
+
/**
|
|
48
|
+
* A raw tint (`'#7c3aed'`), never a token (R7). It paints the fill and, through its
|
|
49
|
+
* OKLab-contrasted slice, the title and the icon — so a brand-coloured alert stays
|
|
50
|
+
* readable without being told a second colour.
|
|
51
|
+
*/
|
|
52
|
+
color?: string;
|
|
53
|
+
/** Dims the alert, and reaches the close inside it. */
|
|
54
|
+
isDisabled?: boolean;
|
|
55
|
+
style?: StyleProp<ViewStyle>;
|
|
56
|
+
children?: ReactNode;
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* R14 — the alert's own props, `View`'s, and every `ViewStyle` key neither already
|
|
60
|
+
* claims. There is no press behaviour here, deliberately: an alert reports, it is not a
|
|
61
|
+
* control. A dismissible one carries an `Alert.Close`, which is the control.
|
|
62
|
+
*/
|
|
63
|
+
type AlertProps = AlertOwnProps & Omit<ViewProps, keyof AlertOwnProps> & Omit<ViewStyleProps, keyof AlertOwnProps | keyof ViewProps> & {
|
|
64
|
+
/** R12 — merge into the single child instead of rendering a `View`. */
|
|
65
|
+
asChild?: boolean;
|
|
66
|
+
};
|
|
67
|
+
/** `View`'s own props win over the `ViewStyle` keys of the same name (R14). */
|
|
68
|
+
type AlertContentProps = ViewProps & Omit<ViewStyleProps, keyof ViewProps> & {
|
|
69
|
+
children?: ReactNode;
|
|
70
|
+
};
|
|
71
|
+
/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
|
|
72
|
+
type AlertTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
|
|
73
|
+
children?: ReactNode;
|
|
74
|
+
};
|
|
75
|
+
type AlertTitleProps = AlertTextProps;
|
|
76
|
+
type AlertDescriptionProps = AlertTextProps;
|
|
77
|
+
/**
|
|
78
|
+
* `Icon`'s three forms, plus the `ViewStyle` keys of the box around them (R14).
|
|
79
|
+
*
|
|
80
|
+
* Unlike `Button.Icon` and `Chip.Icon`, this slot **renders a view of its own**. It has
|
|
81
|
+
* to: an alert's icon sits beside a block of text rather than on one line with it, and
|
|
82
|
+
* lining the glyph up with the first line's cap-height means offsetting it by half the
|
|
83
|
+
* leading — which needs a node. That node is also what lets the slot carry style props at
|
|
84
|
+
* all, which the other two cannot.
|
|
85
|
+
*/
|
|
86
|
+
type AlertIconGlyphKey = 'as' | 'children' | 'source' | 'size' | 'color';
|
|
87
|
+
/**
|
|
88
|
+
* `Pick`, distributed over `Icon`'s three forms rather than applied to the union as a
|
|
89
|
+
* whole. Applied as a whole it merges them into one shape where `as` and `source` are both
|
|
90
|
+
* optional — which is the boundary `IconProps` was turned into a union to keep, so
|
|
91
|
+
* `<Alert.Icon as={Check} source={png} />` would compile again and one of the two would be
|
|
92
|
+
* silently dropped.
|
|
93
|
+
*/
|
|
94
|
+
type AlertIconGlyphProps<T = IconProps> = T extends IconProps ? Pick<T, AlertIconGlyphKey> : never;
|
|
95
|
+
type AlertIconBoxProps = {
|
|
96
|
+
/** The box, not the glyph — `size` and `color` are what shape the icon itself. */
|
|
97
|
+
style?: StyleProp<ViewStyle>;
|
|
98
|
+
} & Omit<ViewStyleProps, AlertIconGlyphKey | 'style'>;
|
|
99
|
+
type AlertIconProps = AlertIconGlyphProps & AlertIconBoxProps;
|
|
100
|
+
/**
|
|
101
|
+
* Everything the shared `CloseButton` accepts, minus the three the alert supplies itself:
|
|
102
|
+
* the warning's name and the two resolved styles its recipe already decided (R5).
|
|
103
|
+
*/
|
|
104
|
+
type AlertCloseProps = Omit<CloseButtonProps, 'name' | 'baseStyle' | 'glyphStyle'>;
|
|
105
|
+
/**
|
|
106
|
+
* R5 — resolved styles, not props for a slot to resolve a second time. Each entry is the
|
|
107
|
+
* cached `StyleSheet` reference with the uncached tint pass layered over it, so a slot
|
|
108
|
+
* merges its own `style` on top and does no work of its own.
|
|
109
|
+
*/
|
|
110
|
+
type AlertContextValue = {
|
|
111
|
+
iconStyle: StyleProp<ViewStyle>;
|
|
112
|
+
contentStyle: StyleProp<ViewStyle>;
|
|
113
|
+
titleStyle: StyleProp<TextStyle>;
|
|
114
|
+
descriptionStyle: StyleProp<TextStyle>;
|
|
115
|
+
closeStyle: StyleProp<ViewStyle>;
|
|
116
|
+
closeGlyphStyle: StyleProp<ViewStyle>;
|
|
117
|
+
/**
|
|
118
|
+
* Values, not a style: `Icon` hands `size` and `color` to a third-party component, so
|
|
119
|
+
* the root flattens its icon slot once here rather than in every icon it contains.
|
|
120
|
+
*/
|
|
121
|
+
icon: IconContextValue;
|
|
122
|
+
isDisabled: boolean;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
declare const useAlert: () => AlertContextValue;
|
|
126
|
+
|
|
127
|
+
declare const alertRecipe: Recipe<"title" | "content" | "description" | "root" | "icon" | "iconGlyph" | "close" | "closeGlyph", AlertVariant, {
|
|
128
|
+
readonly size: {
|
|
129
|
+
readonly xs: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
130
|
+
readonly sm: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
131
|
+
readonly md: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
132
|
+
readonly lg: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
133
|
+
};
|
|
134
|
+
readonly radius: Record<RadiusKey, StyleFn<"root">>;
|
|
135
|
+
}>;
|
|
136
|
+
|
|
137
|
+
declare const Alert: react.ForwardRefExoticComponent<{
|
|
138
|
+
variant?: AlertVariant;
|
|
139
|
+
size?: AlertSize;
|
|
140
|
+
radius?: RadiusKey;
|
|
141
|
+
color?: string;
|
|
142
|
+
isDisabled?: boolean;
|
|
143
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
144
|
+
children?: react.ReactNode;
|
|
145
|
+
} & Omit<react_native.ViewProps, keyof {
|
|
146
|
+
variant?: AlertVariant;
|
|
147
|
+
size?: AlertSize;
|
|
148
|
+
radius?: RadiusKey;
|
|
149
|
+
color?: string;
|
|
150
|
+
isDisabled?: boolean;
|
|
151
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
152
|
+
children?: react.ReactNode;
|
|
153
|
+
}> & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "isDisabled" | "radius" | "size" | "variant"> & {
|
|
154
|
+
asChild?: boolean;
|
|
155
|
+
} & react.RefAttributes<react_native.View>> & {
|
|
156
|
+
Icon: react.ForwardRefExoticComponent<AlertIconProps & react.RefAttributes<react_native.View>>;
|
|
157
|
+
Content: react.ForwardRefExoticComponent<react_native.ViewProps & Omit<ViewStyleProps, keyof react_native.ViewProps> & {
|
|
158
|
+
children?: react.ReactNode;
|
|
159
|
+
} & react.RefAttributes<react_native.View>>;
|
|
160
|
+
Title: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
161
|
+
children?: react.ReactNode;
|
|
162
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
163
|
+
Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
164
|
+
children?: react.ReactNode;
|
|
165
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
166
|
+
Close: react.ForwardRefExoticComponent<AlertCloseProps & react.RefAttributes<react_native.View>>;
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
export { Alert, type AlertCloseProps, type AlertContentProps, type AlertContextValue, type AlertDescriptionProps, type AlertIconProps, type AlertProps, type AlertSize, type AlertSlot, type AlertTitleProps, type AlertVariant, alertRecipe, useAlert };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Alert,
|
|
3
|
+
alertRecipe,
|
|
4
|
+
useAlert
|
|
5
|
+
} from "../../chunk-OGC4RKE3.js";
|
|
6
|
+
import "../../chunk-ZQ3JSWRO.js";
|
|
7
|
+
import "../../chunk-FVP5FUVS.js";
|
|
8
|
+
import "../../chunk-KM2TI5IC.js";
|
|
9
|
+
import "../../chunk-3JATAB7S.js";
|
|
10
|
+
import "../../chunk-A3EGFI6T.js";
|
|
11
|
+
import "../../chunk-PMO62QK4.js";
|
|
12
|
+
import "../../chunk-GGW42MY4.js";
|
|
13
|
+
export {
|
|
14
|
+
Alert,
|
|
15
|
+
alertRecipe,
|
|
16
|
+
useAlert
|
|
17
|
+
};
|
|
@@ -2,16 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
require('../../chunk-
|
|
7
|
-
require('../../chunk-
|
|
8
|
-
require('../../chunk-
|
|
9
|
-
require('../../chunk-UVO4GFSW.cjs');
|
|
10
|
-
require('../../chunk-EVXZGNPA.cjs');
|
|
5
|
+
var _chunkVDRRD6GMcjs = require('../../chunk-VDRRD6GM.cjs');
|
|
6
|
+
require('../../chunk-DXGQ43IV.cjs');
|
|
7
|
+
require('../../chunk-BH5DSJVX.cjs');
|
|
8
|
+
require('../../chunk-YXVKQMCK.cjs');
|
|
11
9
|
require('../../chunk-57SJ4LJF.cjs');
|
|
10
|
+
require('../../chunk-HUZ4AUM2.cjs');
|
|
12
11
|
require('../../chunk-MC7SY2QH.cjs');
|
|
13
12
|
|
|
14
13
|
|
|
15
14
|
|
|
16
15
|
|
|
17
|
-
exports.Button =
|
|
16
|
+
exports.Button = _chunkVDRRD6GMcjs.Button; exports.buttonRecipe = _chunkVDRRD6GMcjs.buttonRecipe; exports.useButton = _chunkVDRRD6GMcjs.useButton;
|