@xaui/native 0.9.1-alpha.3 → 0.9.1-alpha.30
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-27ZRTZEE.js +293 -0
- package/dist/chunk-3FV4COTM.js +68 -0
- package/dist/chunk-423RQBOX.js +21 -0
- package/dist/chunk-4GTAZM2C.js +174 -0
- package/dist/chunk-4XPLPQLM.cjs +147 -0
- package/dist/{chunk-3QBT3Q65.cjs → chunk-57SJ4LJF.cjs} +7 -2
- package/dist/chunk-5GO7MAVY.cjs +74 -0
- package/dist/chunk-5RQ7AZPN.cjs +455 -0
- package/dist/chunk-5Z4P6WHR.cjs +525 -0
- package/dist/chunk-6RVCGLKZ.js +661 -0
- package/dist/chunk-7DPL3ZDS.cjs +21 -0
- package/dist/chunk-7EIHHOHP.cjs +42 -0
- package/dist/chunk-7SEZGVTY.js +62 -0
- package/dist/chunk-7XKQJQF2.cjs +70 -0
- package/dist/{chunk-X2K2FX3W.js → chunk-A3EGFI6T.js} +6 -1
- package/dist/chunk-A5OCK3C2.js +525 -0
- package/dist/chunk-BA2DBSAN.js +102 -0
- package/dist/chunk-BFMTUMTU.js +669 -0
- package/dist/chunk-BVJQ3UPZ.js +62 -0
- package/dist/chunk-DFME724B.js +147 -0
- package/dist/chunk-E2CWBQTV.js +119 -0
- package/dist/chunk-E4TS6632.cjs +314 -0
- package/dist/chunk-EGLLDKN6.js +9 -0
- package/dist/chunk-EJQCQPET.cjs +9 -0
- package/dist/chunk-F6CQ6CBI.cjs +112 -0
- package/dist/chunk-F6W3JQ7K.js +42 -0
- package/dist/chunk-FMZQW35T.js +431 -0
- package/dist/chunk-FNEUOBCV.cjs +174 -0
- package/dist/chunk-G7K652GC.js +145 -0
- package/dist/chunk-GGW42MY4.js +20 -0
- package/dist/chunk-GI24YJPE.js +314 -0
- package/dist/chunk-GLGU2WFL.cjs +190 -0
- package/dist/chunk-GPVNCJ3Z.cjs +696 -0
- package/dist/chunk-GVQOD3VW.js +74 -0
- package/dist/chunk-KOC3KQIT.js +124 -0
- package/dist/chunk-KPWZLUES.cjs +124 -0
- package/dist/chunk-KWCHSIMI.cjs +293 -0
- package/dist/chunk-MC7SY2QH.cjs +20 -0
- package/dist/chunk-N527BTY4.cjs +366 -0
- package/dist/chunk-NBFWWQFW.cjs +346 -0
- package/dist/chunk-NYRXUGVL.js +104 -0
- package/dist/{chunk-AW63PTQ4.cjs → chunk-OHEHPQLC.cjs} +72 -72
- package/dist/chunk-Q3WFY5N3.js +366 -0
- package/dist/chunk-QGN2BBJO.cjs +104 -0
- package/dist/chunk-TGZZ3RZU.cjs +86 -0
- package/dist/{chunk-2KXQATVL.js → chunk-TZG3DERP.js} +46 -46
- package/dist/chunk-UBQLKIZC.cjs +431 -0
- package/dist/chunk-URSKA2VR.js +190 -0
- package/dist/chunk-V4WDMM6Z.js +86 -0
- package/dist/chunk-VJEER76X.js +455 -0
- package/dist/chunk-VZBWYWEI.cjs +736 -0
- package/dist/chunk-WR7YLDVV.cjs +68 -0
- package/dist/chunk-X4HQ4H2V.js +701 -0
- package/dist/chunk-XFSW3ZNI.cjs +145 -0
- package/dist/chunk-XQFAUDR2.cjs +62 -0
- package/dist/chunk-YKL6XHM6.js +346 -0
- package/dist/chunk-ZP2E2H2G.cjs +119 -0
- package/dist/chunk-ZSLNGBDS.cjs +700 -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 +20 -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 +20 -0
- package/dist/components/button/index.cjs +21 -0
- package/dist/components/button/index.d.cts +613 -0
- package/dist/components/button/index.d.ts +613 -0
- package/dist/components/button/index.js +21 -0
- package/dist/components/card/index.cjs +22 -0
- package/dist/components/card/index.d.cts +620 -0
- package/dist/components/card/index.d.ts +620 -0
- package/dist/components/card/index.js +22 -0
- package/dist/components/checkbox/index.cjs +26 -0
- package/dist/components/checkbox/index.d.cts +1136 -0
- package/dist/components/checkbox/index.d.ts +1136 -0
- package/dist/components/checkbox/index.js +26 -0
- package/dist/components/chip/index.cjs +20 -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 +20 -0
- package/dist/components/input/index.cjs +25 -0
- package/dist/components/input/index.d.cts +205 -0
- package/dist/components/input/index.d.ts +205 -0
- package/dist/components/input/index.js +25 -0
- package/dist/components/input-group/index.cjs +27 -0
- package/dist/components/input-group/index.d.cts +270 -0
- package/dist/components/input-group/index.d.ts +270 -0
- package/dist/components/input-group/index.js +27 -0
- package/dist/components/input-otp/index.cjs +29 -0
- package/dist/components/input-otp/index.d.cts +325 -0
- package/dist/components/input-otp/index.d.ts +325 -0
- package/dist/components/input-otp/index.js +29 -0
- package/dist/components/radio/index.cjs +26 -0
- package/dist/components/radio/index.d.cts +1102 -0
- package/dist/components/radio/index.d.ts +1102 -0
- package/dist/components/radio/index.js +26 -0
- package/dist/components/spinner/index.cjs +16 -0
- package/dist/components/spinner/index.d.cts +104 -0
- package/dist/components/spinner/index.d.ts +104 -0
- package/dist/components/spinner/index.js +16 -0
- package/dist/components/switch/index.cjs +27 -0
- package/dist/components/switch/index.d.cts +1154 -0
- package/dist/components/switch/index.d.ts +1154 -0
- package/dist/components/switch/index.js +27 -0
- package/dist/components/text-area/index.cjs +14 -0
- package/dist/components/text-area/index.d.cts +73 -0
- package/dist/components/text-area/index.d.ts +73 -0
- package/dist/components/text-area/index.js +14 -0
- package/dist/components/typography/index.cjs +15 -0
- package/dist/components/typography/index.d.cts +116 -0
- package/dist/components/typography/index.d.ts +116 -0
- package/dist/components/typography/index.js +15 -0
- package/dist/components/view/index.cjs +17 -0
- package/dist/components/view/index.d.cts +152 -0
- package/dist/components/view/index.d.ts +152 -0
- package/dist/components/view/index.js +17 -0
- package/dist/create-recipe-BdVd2ffi.d.ts +114 -0
- package/dist/create-recipe-dC7wMfnj.d.cts +114 -0
- package/dist/icon.type-Kml72iSz.d.ts +73 -0
- package/dist/icon.type-d_i9ma-i.d.cts +73 -0
- package/dist/index.cjs +246 -4
- package/dist/index.d.cts +109 -4
- package/dist/index.d.ts +109 -4
- package/dist/index.js +266 -24
- package/dist/input.type-BUMDlzL9.d.cts +167 -0
- package/dist/input.type-D2qgi03E.d.ts +167 -0
- package/dist/pressable-feedback.type-BA2C9sSz.d.cts +127 -0
- package/dist/pressable-feedback.type-Bs4dQlGj.d.ts +127 -0
- package/dist/style-props.type-CfnoGEP7.d.cts +31 -0
- package/dist/style-props.type-CfnoGEP7.d.ts +31 -0
- package/dist/system/index.cjs +60 -3
- package/dist/system/index.d.cts +347 -181
- package/dist/system/index.d.ts +347 -181
- package/dist/system/index.js +71 -14
- package/dist/theme/index.cjs +4 -3
- package/dist/theme/index.d.cts +34 -23
- package/dist/theme/index.d.ts +34 -23
- package/dist/theme/index.js +3 -2
- package/dist/{theme.type-C9bFJKFm.d.cts → theme.type-C2gNHpEx.d.cts} +1 -1
- package/dist/{theme.type-C9bFJKFm.d.ts → theme.type-C2gNHpEx.d.ts} +1 -1
- package/package.json +174 -18
- package/dist/chunk-QAMNNTGM.js +0 -637
- package/dist/chunk-V63JO65F.cjs +0 -637
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as react_native from 'react-native';
|
|
3
|
+
import { View, Text, TextInput } from 'react-native';
|
|
4
|
+
import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
|
|
5
|
+
import { R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
|
|
6
|
+
import { i as InputVariant, g as InputSize, e as InputLabelPlacement, b as InputContextValue, h as InputSlot } from '../../input.type-BUMDlzL9.cjs';
|
|
7
|
+
export { c as InputDescriptionProps, d as InputErrorProps, I as InputFieldProps, f as InputLabelProps, a as InputProps } from '../../input.type-BUMDlzL9.cjs';
|
|
8
|
+
import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-dC7wMfnj.cjs';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* A text field, with the label, the hint and the error that make it usable.
|
|
12
|
+
*
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <Input>
|
|
15
|
+
* <Input.Label>Courriel</Input.Label>
|
|
16
|
+
* <Input.Field
|
|
17
|
+
* value={email}
|
|
18
|
+
* onChangeText={setEmail}
|
|
19
|
+
* placeholder="nom@exemple.fr"
|
|
20
|
+
* keyboardType="email-address"
|
|
21
|
+
* />
|
|
22
|
+
* <Input.Description>On ne le partage jamais.</Input.Description>
|
|
23
|
+
* </Input>
|
|
24
|
+
*
|
|
25
|
+
* <Input isInvalid={Boolean(error)}>
|
|
26
|
+
* <Input.Label>Mot de passe</Input.Label>
|
|
27
|
+
* <Input.Field secureTextEntry value={password} onChangeText={setPassword} />
|
|
28
|
+
* {error ? <Input.Error>{error}</Input.Error> : null}
|
|
29
|
+
* </Input>
|
|
30
|
+
* ```
|
|
31
|
+
*
|
|
32
|
+
* **The root is the column, not the field.** `Input.Field` is the `TextInput`, which is
|
|
33
|
+
* what makes the label, the hint and the error slots of one component rather than three
|
|
34
|
+
* components a form has to keep in step — and it is why `TextInputProps` are on the field
|
|
35
|
+
* rather than on the root.
|
|
36
|
+
*
|
|
37
|
+
* There is no auto-wrap here (R3): a string child of an input is not a label, a value or
|
|
38
|
+
* a placeholder in any way the component could guess.
|
|
39
|
+
*/
|
|
40
|
+
declare const InputRoot: react.ForwardRefExoticComponent<{
|
|
41
|
+
variant?: InputVariant;
|
|
42
|
+
size?: InputSize;
|
|
43
|
+
radius?: RadiusKey;
|
|
44
|
+
labelPlacement?: InputLabelPlacement;
|
|
45
|
+
color?: string;
|
|
46
|
+
isInvalid?: boolean;
|
|
47
|
+
isDisabled?: boolean;
|
|
48
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
49
|
+
children?: react.ReactNode;
|
|
50
|
+
} & Omit<react_native.ViewProps, keyof {
|
|
51
|
+
variant?: InputVariant;
|
|
52
|
+
size?: InputSize;
|
|
53
|
+
radius?: RadiusKey;
|
|
54
|
+
labelPlacement?: InputLabelPlacement;
|
|
55
|
+
color?: string;
|
|
56
|
+
isInvalid?: boolean;
|
|
57
|
+
isDisabled?: boolean;
|
|
58
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
59
|
+
children?: react.ReactNode;
|
|
60
|
+
}> & 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" | "isInvalid" | "labelPlacement"> & {
|
|
61
|
+
asChild?: boolean;
|
|
62
|
+
} & react.RefAttributes<View>>;
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* The hint under the field — the format expected, what the value is used for.
|
|
66
|
+
*
|
|
67
|
+
* It carries the id the field points at with `aria-describedby`, so it is read after the
|
|
68
|
+
* label rather than skipped. It turns `danger` with `isInvalid`, like the label.
|
|
69
|
+
*
|
|
70
|
+
* It sits inset by half the field's padding, so the column reads as one block rather than
|
|
71
|
+
* as a label, a box and a stray line.
|
|
72
|
+
*/
|
|
73
|
+
declare const InputDescription: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
74
|
+
children?: react.ReactNode;
|
|
75
|
+
} & react.RefAttributes<Text>>;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* What is wrong with the value, in `danger`.
|
|
79
|
+
*
|
|
80
|
+
* **It always renders what it is given.** `isInvalid` paints the border, the label and the
|
|
81
|
+
* description; it does not mount or unmount this slot, because a slot that silently
|
|
82
|
+
* renders nothing is a slot you cannot debug — you write the condition yourself and see
|
|
83
|
+
* it:
|
|
84
|
+
*
|
|
85
|
+
* ```tsx
|
|
86
|
+
* <Input isInvalid={Boolean(error)}>
|
|
87
|
+
* <Input.Field value={value} onChangeText={onChange} />
|
|
88
|
+
* {error ? <Input.Error>{error}</Input.Error> : null}
|
|
89
|
+
* </Input>
|
|
90
|
+
* ```
|
|
91
|
+
*
|
|
92
|
+
* `accessibilityLiveRegion` is deliberately not set: an error that appears while you are
|
|
93
|
+
* still typing in the field is announced by the field's own `aria-invalid`, and a live
|
|
94
|
+
* region on top of that reads the message on every keystroke that changes it.
|
|
95
|
+
*/
|
|
96
|
+
declare const InputError: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
97
|
+
children?: react.ReactNode;
|
|
98
|
+
} & react.RefAttributes<Text>>;
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* The `TextInput` itself — the one node of this component that the user types into.
|
|
102
|
+
*
|
|
103
|
+
* ```tsx
|
|
104
|
+
* <Input.Field value={email} onChangeText={setEmail} placeholder="nom@exemple.fr" />
|
|
105
|
+
* ```
|
|
106
|
+
*
|
|
107
|
+
* It takes everything `TextInput` takes, which is why `value`, `defaultValue`, `onChange`,
|
|
108
|
+
* `keyboardType`, `secureTextEntry`, `autoComplete` and `multiline` are written here and
|
|
109
|
+
* not on the root. There is no `type`: that is an HTML prop, and React Native splits it
|
|
110
|
+
* into `inputMode`, `keyboardType`, `secureTextEntry` and `autoComplete`.
|
|
111
|
+
*
|
|
112
|
+
* What it does *not* take is `editable`: that is `disabled` under another name, and R8
|
|
113
|
+
* keeps it off the public surface — `isDisabled` on the root is what stops the field.
|
|
114
|
+
*
|
|
115
|
+
* It reports focus up rather than styling it (R5): the root's recipe resolves on the
|
|
116
|
+
* focus state, so the root owns it and this composes the caller's handlers into the two
|
|
117
|
+
* the context published.
|
|
118
|
+
*/
|
|
119
|
+
declare const InputField: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<TextInput>>;
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* What the field is for. It turns `danger` with `isInvalid`, so the field that is wrong is
|
|
123
|
+
* findable on a long form without reading every message.
|
|
124
|
+
*
|
|
125
|
+
* It carries the id the field points at, which is what makes a screen reader announce
|
|
126
|
+
* "Courriel, champ de saisie" instead of reading the placeholder and hoping.
|
|
127
|
+
*
|
|
128
|
+
* Its colour comes from the theme's `foreground` rather than the variant's: the label sits
|
|
129
|
+
* outside the box, on the screen behind it, so a tinted field does not tint it.
|
|
130
|
+
*/
|
|
131
|
+
declare const InputLabel: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
132
|
+
children?: react.ReactNode;
|
|
133
|
+
} & react.RefAttributes<Text>>;
|
|
134
|
+
|
|
135
|
+
declare const useInput: () => InputContextValue;
|
|
136
|
+
|
|
137
|
+
declare const inputRecipe: Recipe<"label" | "field" | "description" | "suffix" | "root" | "icon" | "textArea" | "placeholder" | "error" | "prefix", InputVariant, {
|
|
138
|
+
readonly size: {
|
|
139
|
+
readonly xs: (theme: XAUITheme) => SlotStyles<InputSlot>;
|
|
140
|
+
readonly sm: (theme: XAUITheme) => SlotStyles<InputSlot>;
|
|
141
|
+
readonly md: (theme: XAUITheme) => SlotStyles<InputSlot>;
|
|
142
|
+
readonly lg: (theme: XAUITheme) => SlotStyles<InputSlot>;
|
|
143
|
+
};
|
|
144
|
+
readonly radius: Record<RadiusKey, StyleFn<"field">>;
|
|
145
|
+
/**
|
|
146
|
+
* `outside` is the base behaviour, so it adds nothing — it is declared because an
|
|
147
|
+
* axis needs both of its values for the selection to be typed, and because a reader
|
|
148
|
+
* looking for "what does outside do" should find the answer here rather than infer it
|
|
149
|
+
* from an absence. The size-dependent half of `inside` is in `compoundVariants`.
|
|
150
|
+
*/
|
|
151
|
+
readonly labelPlacement: {
|
|
152
|
+
readonly outside: () => {};
|
|
153
|
+
readonly inside: () => {};
|
|
154
|
+
};
|
|
155
|
+
readonly isInvalid: {
|
|
156
|
+
readonly true: (theme: XAUITheme) => {
|
|
157
|
+
field: {
|
|
158
|
+
borderColor: string;
|
|
159
|
+
};
|
|
160
|
+
label: {
|
|
161
|
+
color: string;
|
|
162
|
+
};
|
|
163
|
+
description: {
|
|
164
|
+
color: string;
|
|
165
|
+
};
|
|
166
|
+
};
|
|
167
|
+
};
|
|
168
|
+
}>;
|
|
169
|
+
|
|
170
|
+
declare const Input: react.ForwardRefExoticComponent<{
|
|
171
|
+
variant?: InputVariant;
|
|
172
|
+
size?: InputSize;
|
|
173
|
+
radius?: RadiusKey;
|
|
174
|
+
labelPlacement?: InputLabelPlacement;
|
|
175
|
+
color?: string;
|
|
176
|
+
isInvalid?: boolean;
|
|
177
|
+
isDisabled?: boolean;
|
|
178
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
179
|
+
children?: react.ReactNode;
|
|
180
|
+
} & Omit<react_native.ViewProps, keyof {
|
|
181
|
+
variant?: InputVariant;
|
|
182
|
+
size?: InputSize;
|
|
183
|
+
radius?: RadiusKey;
|
|
184
|
+
labelPlacement?: InputLabelPlacement;
|
|
185
|
+
color?: string;
|
|
186
|
+
isInvalid?: boolean;
|
|
187
|
+
isDisabled?: boolean;
|
|
188
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
189
|
+
children?: react.ReactNode;
|
|
190
|
+
}> & 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" | "isInvalid" | "labelPlacement"> & {
|
|
191
|
+
asChild?: boolean;
|
|
192
|
+
} & react.RefAttributes<react_native.View>> & {
|
|
193
|
+
Label: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
194
|
+
children?: react.ReactNode;
|
|
195
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
196
|
+
Field: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<react_native.TextInput>>;
|
|
197
|
+
Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
198
|
+
children?: react.ReactNode;
|
|
199
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
200
|
+
Error: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
201
|
+
children?: react.ReactNode;
|
|
202
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
203
|
+
};
|
|
204
|
+
|
|
205
|
+
export { Input, InputContextValue, InputDescription, InputError, InputField, InputLabel, InputLabelPlacement, InputRoot, InputSize, InputSlot, InputVariant, inputRecipe, useInput };
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as react_native from 'react-native';
|
|
3
|
+
import { View, Text, TextInput } from 'react-native';
|
|
4
|
+
import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.js';
|
|
5
|
+
import { R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
|
|
6
|
+
import { i as InputVariant, g as InputSize, e as InputLabelPlacement, b as InputContextValue, h as InputSlot } from '../../input.type-D2qgi03E.js';
|
|
7
|
+
export { c as InputDescriptionProps, d as InputErrorProps, I as InputFieldProps, f as InputLabelProps, a as InputProps } from '../../input.type-D2qgi03E.js';
|
|
8
|
+
import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-BdVd2ffi.js';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* A text field, with the label, the hint and the error that make it usable.
|
|
12
|
+
*
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <Input>
|
|
15
|
+
* <Input.Label>Courriel</Input.Label>
|
|
16
|
+
* <Input.Field
|
|
17
|
+
* value={email}
|
|
18
|
+
* onChangeText={setEmail}
|
|
19
|
+
* placeholder="nom@exemple.fr"
|
|
20
|
+
* keyboardType="email-address"
|
|
21
|
+
* />
|
|
22
|
+
* <Input.Description>On ne le partage jamais.</Input.Description>
|
|
23
|
+
* </Input>
|
|
24
|
+
*
|
|
25
|
+
* <Input isInvalid={Boolean(error)}>
|
|
26
|
+
* <Input.Label>Mot de passe</Input.Label>
|
|
27
|
+
* <Input.Field secureTextEntry value={password} onChangeText={setPassword} />
|
|
28
|
+
* {error ? <Input.Error>{error}</Input.Error> : null}
|
|
29
|
+
* </Input>
|
|
30
|
+
* ```
|
|
31
|
+
*
|
|
32
|
+
* **The root is the column, not the field.** `Input.Field` is the `TextInput`, which is
|
|
33
|
+
* what makes the label, the hint and the error slots of one component rather than three
|
|
34
|
+
* components a form has to keep in step — and it is why `TextInputProps` are on the field
|
|
35
|
+
* rather than on the root.
|
|
36
|
+
*
|
|
37
|
+
* There is no auto-wrap here (R3): a string child of an input is not a label, a value or
|
|
38
|
+
* a placeholder in any way the component could guess.
|
|
39
|
+
*/
|
|
40
|
+
declare const InputRoot: react.ForwardRefExoticComponent<{
|
|
41
|
+
variant?: InputVariant;
|
|
42
|
+
size?: InputSize;
|
|
43
|
+
radius?: RadiusKey;
|
|
44
|
+
labelPlacement?: InputLabelPlacement;
|
|
45
|
+
color?: string;
|
|
46
|
+
isInvalid?: boolean;
|
|
47
|
+
isDisabled?: boolean;
|
|
48
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
49
|
+
children?: react.ReactNode;
|
|
50
|
+
} & Omit<react_native.ViewProps, keyof {
|
|
51
|
+
variant?: InputVariant;
|
|
52
|
+
size?: InputSize;
|
|
53
|
+
radius?: RadiusKey;
|
|
54
|
+
labelPlacement?: InputLabelPlacement;
|
|
55
|
+
color?: string;
|
|
56
|
+
isInvalid?: boolean;
|
|
57
|
+
isDisabled?: boolean;
|
|
58
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
59
|
+
children?: react.ReactNode;
|
|
60
|
+
}> & 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" | "isInvalid" | "labelPlacement"> & {
|
|
61
|
+
asChild?: boolean;
|
|
62
|
+
} & react.RefAttributes<View>>;
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* The hint under the field — the format expected, what the value is used for.
|
|
66
|
+
*
|
|
67
|
+
* It carries the id the field points at with `aria-describedby`, so it is read after the
|
|
68
|
+
* label rather than skipped. It turns `danger` with `isInvalid`, like the label.
|
|
69
|
+
*
|
|
70
|
+
* It sits inset by half the field's padding, so the column reads as one block rather than
|
|
71
|
+
* as a label, a box and a stray line.
|
|
72
|
+
*/
|
|
73
|
+
declare const InputDescription: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
74
|
+
children?: react.ReactNode;
|
|
75
|
+
} & react.RefAttributes<Text>>;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* What is wrong with the value, in `danger`.
|
|
79
|
+
*
|
|
80
|
+
* **It always renders what it is given.** `isInvalid` paints the border, the label and the
|
|
81
|
+
* description; it does not mount or unmount this slot, because a slot that silently
|
|
82
|
+
* renders nothing is a slot you cannot debug — you write the condition yourself and see
|
|
83
|
+
* it:
|
|
84
|
+
*
|
|
85
|
+
* ```tsx
|
|
86
|
+
* <Input isInvalid={Boolean(error)}>
|
|
87
|
+
* <Input.Field value={value} onChangeText={onChange} />
|
|
88
|
+
* {error ? <Input.Error>{error}</Input.Error> : null}
|
|
89
|
+
* </Input>
|
|
90
|
+
* ```
|
|
91
|
+
*
|
|
92
|
+
* `accessibilityLiveRegion` is deliberately not set: an error that appears while you are
|
|
93
|
+
* still typing in the field is announced by the field's own `aria-invalid`, and a live
|
|
94
|
+
* region on top of that reads the message on every keystroke that changes it.
|
|
95
|
+
*/
|
|
96
|
+
declare const InputError: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
97
|
+
children?: react.ReactNode;
|
|
98
|
+
} & react.RefAttributes<Text>>;
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* The `TextInput` itself — the one node of this component that the user types into.
|
|
102
|
+
*
|
|
103
|
+
* ```tsx
|
|
104
|
+
* <Input.Field value={email} onChangeText={setEmail} placeholder="nom@exemple.fr" />
|
|
105
|
+
* ```
|
|
106
|
+
*
|
|
107
|
+
* It takes everything `TextInput` takes, which is why `value`, `defaultValue`, `onChange`,
|
|
108
|
+
* `keyboardType`, `secureTextEntry`, `autoComplete` and `multiline` are written here and
|
|
109
|
+
* not on the root. There is no `type`: that is an HTML prop, and React Native splits it
|
|
110
|
+
* into `inputMode`, `keyboardType`, `secureTextEntry` and `autoComplete`.
|
|
111
|
+
*
|
|
112
|
+
* What it does *not* take is `editable`: that is `disabled` under another name, and R8
|
|
113
|
+
* keeps it off the public surface — `isDisabled` on the root is what stops the field.
|
|
114
|
+
*
|
|
115
|
+
* It reports focus up rather than styling it (R5): the root's recipe resolves on the
|
|
116
|
+
* focus state, so the root owns it and this composes the caller's handlers into the two
|
|
117
|
+
* the context published.
|
|
118
|
+
*/
|
|
119
|
+
declare const InputField: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<TextInput>>;
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* What the field is for. It turns `danger` with `isInvalid`, so the field that is wrong is
|
|
123
|
+
* findable on a long form without reading every message.
|
|
124
|
+
*
|
|
125
|
+
* It carries the id the field points at, which is what makes a screen reader announce
|
|
126
|
+
* "Courriel, champ de saisie" instead of reading the placeholder and hoping.
|
|
127
|
+
*
|
|
128
|
+
* Its colour comes from the theme's `foreground` rather than the variant's: the label sits
|
|
129
|
+
* outside the box, on the screen behind it, so a tinted field does not tint it.
|
|
130
|
+
*/
|
|
131
|
+
declare const InputLabel: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
132
|
+
children?: react.ReactNode;
|
|
133
|
+
} & react.RefAttributes<Text>>;
|
|
134
|
+
|
|
135
|
+
declare const useInput: () => InputContextValue;
|
|
136
|
+
|
|
137
|
+
declare const inputRecipe: Recipe<"label" | "field" | "description" | "suffix" | "root" | "icon" | "textArea" | "placeholder" | "error" | "prefix", InputVariant, {
|
|
138
|
+
readonly size: {
|
|
139
|
+
readonly xs: (theme: XAUITheme) => SlotStyles<InputSlot>;
|
|
140
|
+
readonly sm: (theme: XAUITheme) => SlotStyles<InputSlot>;
|
|
141
|
+
readonly md: (theme: XAUITheme) => SlotStyles<InputSlot>;
|
|
142
|
+
readonly lg: (theme: XAUITheme) => SlotStyles<InputSlot>;
|
|
143
|
+
};
|
|
144
|
+
readonly radius: Record<RadiusKey, StyleFn<"field">>;
|
|
145
|
+
/**
|
|
146
|
+
* `outside` is the base behaviour, so it adds nothing — it is declared because an
|
|
147
|
+
* axis needs both of its values for the selection to be typed, and because a reader
|
|
148
|
+
* looking for "what does outside do" should find the answer here rather than infer it
|
|
149
|
+
* from an absence. The size-dependent half of `inside` is in `compoundVariants`.
|
|
150
|
+
*/
|
|
151
|
+
readonly labelPlacement: {
|
|
152
|
+
readonly outside: () => {};
|
|
153
|
+
readonly inside: () => {};
|
|
154
|
+
};
|
|
155
|
+
readonly isInvalid: {
|
|
156
|
+
readonly true: (theme: XAUITheme) => {
|
|
157
|
+
field: {
|
|
158
|
+
borderColor: string;
|
|
159
|
+
};
|
|
160
|
+
label: {
|
|
161
|
+
color: string;
|
|
162
|
+
};
|
|
163
|
+
description: {
|
|
164
|
+
color: string;
|
|
165
|
+
};
|
|
166
|
+
};
|
|
167
|
+
};
|
|
168
|
+
}>;
|
|
169
|
+
|
|
170
|
+
declare const Input: react.ForwardRefExoticComponent<{
|
|
171
|
+
variant?: InputVariant;
|
|
172
|
+
size?: InputSize;
|
|
173
|
+
radius?: RadiusKey;
|
|
174
|
+
labelPlacement?: InputLabelPlacement;
|
|
175
|
+
color?: string;
|
|
176
|
+
isInvalid?: boolean;
|
|
177
|
+
isDisabled?: boolean;
|
|
178
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
179
|
+
children?: react.ReactNode;
|
|
180
|
+
} & Omit<react_native.ViewProps, keyof {
|
|
181
|
+
variant?: InputVariant;
|
|
182
|
+
size?: InputSize;
|
|
183
|
+
radius?: RadiusKey;
|
|
184
|
+
labelPlacement?: InputLabelPlacement;
|
|
185
|
+
color?: string;
|
|
186
|
+
isInvalid?: boolean;
|
|
187
|
+
isDisabled?: boolean;
|
|
188
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
189
|
+
children?: react.ReactNode;
|
|
190
|
+
}> & 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" | "isInvalid" | "labelPlacement"> & {
|
|
191
|
+
asChild?: boolean;
|
|
192
|
+
} & react.RefAttributes<react_native.View>> & {
|
|
193
|
+
Label: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
194
|
+
children?: react.ReactNode;
|
|
195
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
196
|
+
Field: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<react_native.TextInput>>;
|
|
197
|
+
Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
198
|
+
children?: react.ReactNode;
|
|
199
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
200
|
+
Error: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
201
|
+
children?: react.ReactNode;
|
|
202
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
203
|
+
};
|
|
204
|
+
|
|
205
|
+
export { Input, InputContextValue, InputDescription, InputError, InputField, InputLabel, InputLabelPlacement, InputRoot, InputSize, InputSlot, InputVariant, inputRecipe, useInput };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Input,
|
|
3
|
+
InputDescription,
|
|
4
|
+
InputError,
|
|
5
|
+
InputField,
|
|
6
|
+
InputLabel,
|
|
7
|
+
InputRoot,
|
|
8
|
+
inputRecipe,
|
|
9
|
+
useInput
|
|
10
|
+
} from "../../chunk-A5OCK3C2.js";
|
|
11
|
+
import "../../chunk-4GTAZM2C.js";
|
|
12
|
+
import "../../chunk-A3EGFI6T.js";
|
|
13
|
+
import "../../chunk-E2CWBQTV.js";
|
|
14
|
+
import "../../chunk-URSKA2VR.js";
|
|
15
|
+
import "../../chunk-GGW42MY4.js";
|
|
16
|
+
export {
|
|
17
|
+
Input,
|
|
18
|
+
InputDescription,
|
|
19
|
+
InputError,
|
|
20
|
+
InputField,
|
|
21
|
+
InputLabel,
|
|
22
|
+
InputRoot,
|
|
23
|
+
inputRecipe,
|
|
24
|
+
useInput
|
|
25
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
var _chunk4XPLPQLMcjs = require('../../chunk-4XPLPQLM.cjs');
|
|
11
|
+
require('../../chunk-5Z4P6WHR.cjs');
|
|
12
|
+
require('../../chunk-WR7YLDVV.cjs');
|
|
13
|
+
require('../../chunk-FNEUOBCV.cjs');
|
|
14
|
+
require('../../chunk-57SJ4LJF.cjs');
|
|
15
|
+
require('../../chunk-ZP2E2H2G.cjs');
|
|
16
|
+
require('../../chunk-GLGU2WFL.cjs');
|
|
17
|
+
require('../../chunk-MC7SY2QH.cjs');
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
exports.InputGroup = _chunk4XPLPQLMcjs.InputGroup; exports.InputGroupField = _chunk4XPLPQLMcjs.InputGroupField; exports.InputGroupIcon = _chunk4XPLPQLMcjs.InputGroupIcon; exports.InputGroupPrefix = _chunk4XPLPQLMcjs.InputGroupPrefix; exports.InputGroupRoot = _chunk4XPLPQLMcjs.InputGroupRoot; exports.InputGroupSuffix = _chunk4XPLPQLMcjs.InputGroupSuffix; exports.decoratorPadding = _chunk4XPLPQLMcjs.decoratorPadding; exports.useInputGroup = _chunk4XPLPQLMcjs.useInputGroup;
|