@xaui/native 0.9.1-alpha.24 → 0.9.1-alpha.25
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-6RO26ORT.js → chunk-2OY76YNB.js} +44 -10
- package/dist/{chunk-LIQTGAI7.cjs → chunk-BULNTP5N.cjs} +6 -7
- package/dist/chunk-GSEK6OCY.cjs +72 -0
- package/dist/{chunk-J4QE34AU.js → chunk-I6UCYAO2.js} +20 -21
- package/dist/{chunk-GBPWTFTU.cjs → chunk-OHEHPQLC.cjs} +10 -1
- package/dist/{chunk-GG2WWCBK.js → chunk-TZG3DERP.js} +10 -1
- package/dist/{chunk-P2XA4DV7.cjs → chunk-YEW5LPWL.cjs} +45 -11
- package/dist/chunk-ZDCGPK5Z.js +72 -0
- package/dist/components/input/index.cjs +12 -2
- package/dist/components/input/index.d.cts +109 -117
- package/dist/components/input/index.d.ts +109 -117
- package/dist/components/input/index.js +11 -1
- package/dist/components/input-otp/index.cjs +2 -2
- package/dist/components/input-otp/index.js +1 -1
- package/dist/components/text-area/index.cjs +13 -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 +13 -0
- package/dist/index.cjs +22 -6
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +27 -11
- package/dist/input.type-BpJeUIe8.d.cts +151 -0
- package/dist/input.type-DjyZ6P2C.d.ts +151 -0
- package/dist/theme/index.cjs +2 -2
- package/dist/theme/index.js +1 -1
- package/package.json +11 -1
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { I as InputFieldProps, a as InputProps } from '../../input.type-BpJeUIe8.cjs';
|
|
4
|
+
import * as react_native from 'react-native';
|
|
5
|
+
import { T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
|
|
6
|
+
import '../../theme.type-C2gNHpEx.cjs';
|
|
7
|
+
|
|
8
|
+
type TextAreaOwnProps = {
|
|
9
|
+
/**
|
|
10
|
+
* How many lines tall the field starts. It is a **raw value**, not a token: it resolves
|
|
11
|
+
* outside the style cache from the line height the size chose, the same path `color`
|
|
12
|
+
* takes — which is what lets `rows={7}` exist without seven entries in the cache.
|
|
13
|
+
*
|
|
14
|
+
* @default 3
|
|
15
|
+
*/
|
|
16
|
+
rows?: number;
|
|
17
|
+
/**
|
|
18
|
+
* The ceiling, in lines. Past it the field stops growing and scrolls; unset, it grows
|
|
19
|
+
* with the text for as long as the text goes on.
|
|
20
|
+
*/
|
|
21
|
+
maxRows?: number;
|
|
22
|
+
children?: ReactNode;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Everything the `Input` root understands, plus the two the shape of a multiline field
|
|
26
|
+
* needs. They sit on the **root** rather than on `TextArea.Field` for the reason `size`
|
|
27
|
+
* and `variant` do: the root is where the field's shape is decided, and the slot reads
|
|
28
|
+
* what it resolved.
|
|
29
|
+
*/
|
|
30
|
+
type TextAreaProps = Omit<InputProps, 'children'> & TextAreaOwnProps;
|
|
31
|
+
/**
|
|
32
|
+
* Everything `Input.Field` accepts except `multiline`, which this sets — it is the same
|
|
33
|
+
* `TextInput`, and the same props, with the three things several lines need.
|
|
34
|
+
*/
|
|
35
|
+
type TextAreaFieldProps = Omit<InputFieldProps, 'multiline'>;
|
|
36
|
+
/**
|
|
37
|
+
* The one thing the `Input`'s own context cannot carry, because `rows` is not the
|
|
38
|
+
* `Input`'s business: a single-line field has no use for it, and a prop that does nothing
|
|
39
|
+
* in the common case is a prop that reads as broken.
|
|
40
|
+
*/
|
|
41
|
+
type TextAreaContextValue = {
|
|
42
|
+
rows: number;
|
|
43
|
+
maxRows: number | undefined;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
declare const useTextArea: () => TextAreaContextValue;
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Three of the four slots **are** the `Input`'s, re-exported rather than wrapped.
|
|
50
|
+
*
|
|
51
|
+
* A wrapper would add three components to the tree to change a `displayName` string, and
|
|
52
|
+
* the string it would change is the one that tells you the truth: a `XAUI.Input.Label`
|
|
53
|
+
* showing up inside a `XAUI.TextArea.Root` is exactly what is happening. Only the field
|
|
54
|
+
* differs, and it is the only one written here.
|
|
55
|
+
*/
|
|
56
|
+
declare const TextArea: react.ForwardRefExoticComponent<Omit<InputProps, "children"> & {
|
|
57
|
+
rows?: number;
|
|
58
|
+
maxRows?: number;
|
|
59
|
+
children?: react.ReactNode;
|
|
60
|
+
} & react.RefAttributes<react_native.View>> & {
|
|
61
|
+
Label: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
62
|
+
children?: react.ReactNode;
|
|
63
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
64
|
+
Field: react.ForwardRefExoticComponent<TextAreaFieldProps & react.RefAttributes<react_native.TextInput>>;
|
|
65
|
+
Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
66
|
+
children?: react.ReactNode;
|
|
67
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
68
|
+
Error: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
69
|
+
children?: react.ReactNode;
|
|
70
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export { TextArea, type TextAreaContextValue, type TextAreaFieldProps, type TextAreaProps, useTextArea };
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { I as InputFieldProps, a as InputProps } from '../../input.type-DjyZ6P2C.js';
|
|
4
|
+
import * as react_native from 'react-native';
|
|
5
|
+
import { T as TextStyleProps } from '../../style-props.type-CfnoGEP7.js';
|
|
6
|
+
import '../../theme.type-C2gNHpEx.js';
|
|
7
|
+
|
|
8
|
+
type TextAreaOwnProps = {
|
|
9
|
+
/**
|
|
10
|
+
* How many lines tall the field starts. It is a **raw value**, not a token: it resolves
|
|
11
|
+
* outside the style cache from the line height the size chose, the same path `color`
|
|
12
|
+
* takes — which is what lets `rows={7}` exist without seven entries in the cache.
|
|
13
|
+
*
|
|
14
|
+
* @default 3
|
|
15
|
+
*/
|
|
16
|
+
rows?: number;
|
|
17
|
+
/**
|
|
18
|
+
* The ceiling, in lines. Past it the field stops growing and scrolls; unset, it grows
|
|
19
|
+
* with the text for as long as the text goes on.
|
|
20
|
+
*/
|
|
21
|
+
maxRows?: number;
|
|
22
|
+
children?: ReactNode;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Everything the `Input` root understands, plus the two the shape of a multiline field
|
|
26
|
+
* needs. They sit on the **root** rather than on `TextArea.Field` for the reason `size`
|
|
27
|
+
* and `variant` do: the root is where the field's shape is decided, and the slot reads
|
|
28
|
+
* what it resolved.
|
|
29
|
+
*/
|
|
30
|
+
type TextAreaProps = Omit<InputProps, 'children'> & TextAreaOwnProps;
|
|
31
|
+
/**
|
|
32
|
+
* Everything `Input.Field` accepts except `multiline`, which this sets — it is the same
|
|
33
|
+
* `TextInput`, and the same props, with the three things several lines need.
|
|
34
|
+
*/
|
|
35
|
+
type TextAreaFieldProps = Omit<InputFieldProps, 'multiline'>;
|
|
36
|
+
/**
|
|
37
|
+
* The one thing the `Input`'s own context cannot carry, because `rows` is not the
|
|
38
|
+
* `Input`'s business: a single-line field has no use for it, and a prop that does nothing
|
|
39
|
+
* in the common case is a prop that reads as broken.
|
|
40
|
+
*/
|
|
41
|
+
type TextAreaContextValue = {
|
|
42
|
+
rows: number;
|
|
43
|
+
maxRows: number | undefined;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
declare const useTextArea: () => TextAreaContextValue;
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Three of the four slots **are** the `Input`'s, re-exported rather than wrapped.
|
|
50
|
+
*
|
|
51
|
+
* A wrapper would add three components to the tree to change a `displayName` string, and
|
|
52
|
+
* the string it would change is the one that tells you the truth: a `XAUI.Input.Label`
|
|
53
|
+
* showing up inside a `XAUI.TextArea.Root` is exactly what is happening. Only the field
|
|
54
|
+
* differs, and it is the only one written here.
|
|
55
|
+
*/
|
|
56
|
+
declare const TextArea: react.ForwardRefExoticComponent<Omit<InputProps, "children"> & {
|
|
57
|
+
rows?: number;
|
|
58
|
+
maxRows?: number;
|
|
59
|
+
children?: react.ReactNode;
|
|
60
|
+
} & react.RefAttributes<react_native.View>> & {
|
|
61
|
+
Label: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
62
|
+
children?: react.ReactNode;
|
|
63
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
64
|
+
Field: react.ForwardRefExoticComponent<TextAreaFieldProps & react.RefAttributes<react_native.TextInput>>;
|
|
65
|
+
Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
66
|
+
children?: react.ReactNode;
|
|
67
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
68
|
+
Error: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
69
|
+
children?: react.ReactNode;
|
|
70
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export { TextArea, type TextAreaContextValue, type TextAreaFieldProps, type TextAreaProps, useTextArea };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import {
|
|
2
|
+
TextArea,
|
|
3
|
+
useTextArea
|
|
4
|
+
} from "../../chunk-ZDCGPK5Z.js";
|
|
5
|
+
import "../../chunk-2OY76YNB.js";
|
|
6
|
+
import "../../chunk-3JATAB7S.js";
|
|
7
|
+
import "../../chunk-PMO62QK4.js";
|
|
8
|
+
import "../../chunk-A3EGFI6T.js";
|
|
9
|
+
import "../../chunk-GGW42MY4.js";
|
|
10
|
+
export {
|
|
11
|
+
TextArea,
|
|
12
|
+
useTextArea
|
|
13
|
+
};
|
package/dist/index.cjs
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
var _chunkY7U6ACMBcjs = require('./chunk-Y7U6ACMB.cjs');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
5
10
|
|
|
6
11
|
|
|
7
12
|
var _chunkIBEX4XGVcjs = require('./chunk-IBEX4XGV.cjs');
|
|
@@ -21,7 +26,7 @@ var _chunk6HXWQ5AUcjs = require('./chunk-6HXWQ5AU.cjs');
|
|
|
21
26
|
|
|
22
27
|
|
|
23
28
|
|
|
24
|
-
var
|
|
29
|
+
var _chunkOHEHPQLCcjs = require('./chunk-OHEHPQLC.cjs');
|
|
25
30
|
|
|
26
31
|
|
|
27
32
|
|
|
@@ -80,7 +85,6 @@ var _chunkIG4Q3WQOcjs = require('./chunk-IG4Q3WQO.cjs');
|
|
|
80
85
|
|
|
81
86
|
|
|
82
87
|
|
|
83
|
-
var _chunkP2XA4DV7cjs = require('./chunk-P2XA4DV7.cjs');
|
|
84
88
|
|
|
85
89
|
|
|
86
90
|
|
|
@@ -88,17 +92,22 @@ var _chunkP2XA4DV7cjs = require('./chunk-P2XA4DV7.cjs');
|
|
|
88
92
|
|
|
89
93
|
|
|
90
94
|
|
|
95
|
+
var _chunkBULNTP5Ncjs = require('./chunk-BULNTP5N.cjs');
|
|
96
|
+
require('./chunk-EJQCQPET.cjs');
|
|
91
97
|
|
|
92
98
|
|
|
93
99
|
|
|
100
|
+
var _chunkGSEK6OCYcjs = require('./chunk-GSEK6OCY.cjs');
|
|
101
|
+
|
|
102
|
+
|
|
94
103
|
|
|
95
|
-
var _chunkLIQTGAI7cjs = require('./chunk-LIQTGAI7.cjs');
|
|
96
|
-
require('./chunk-EJQCQPET.cjs');
|
|
97
104
|
|
|
98
105
|
|
|
99
106
|
|
|
100
107
|
|
|
101
|
-
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
var _chunkYEW5LPWLcjs = require('./chunk-YEW5LPWL.cjs');
|
|
102
111
|
|
|
103
112
|
|
|
104
113
|
|
|
@@ -225,4 +234,11 @@ function usePrevious(value) {
|
|
|
225
234
|
|
|
226
235
|
|
|
227
236
|
|
|
228
|
-
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
exports.Alert = _chunkJ4JFIC4Wcjs.Alert; exports.Button = _chunkEWBBDVTMcjs.Button; exports.CARD_BACKGROUND = _chunk6FBGCF5Tcjs.CARD_BACKGROUND; exports.Card = _chunk6FBGCF5Tcjs.Card; exports.Chip = _chunkAV5LMFS3cjs.Chip; exports.CloseButton = _chunkJ2JJLKLGcjs.CloseButton; exports.Column = _chunkIBEX4XGVcjs.Column; exports.FEEDBACK_OVERLAY = _chunkIG4Q3WQOcjs.FEEDBACK_OVERLAY; exports.Grid = _chunkIBEX4XGVcjs.Grid; exports.HIGHLIGHT_DURATION = _chunkIG4Q3WQOcjs.HIGHLIGHT_DURATION; exports.HIGHLIGHT_OPACITY = _chunkIG4Q3WQOcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkB4W2XNBPcjs.Icon; exports.IconContext = _chunkB4W2XNBPcjs.IconContext; exports.Input = _chunkYEW5LPWLcjs.Input; exports.InputDescription = _chunkYEW5LPWLcjs.InputDescription; exports.InputError = _chunkYEW5LPWLcjs.InputError; exports.InputField = _chunkYEW5LPWLcjs.InputField; exports.InputLabel = _chunkYEW5LPWLcjs.InputLabel; exports.InputOTP = _chunkBULNTP5Ncjs.InputOTP; exports.InputRoot = _chunkYEW5LPWLcjs.InputRoot; exports.OTP_ALPHANUMERIC = _chunkBULNTP5Ncjs.OTP_ALPHANUMERIC; exports.OTP_DIGITS = _chunkBULNTP5Ncjs.OTP_DIGITS; exports.OTP_LETTERS = _chunkBULNTP5Ncjs.OTP_LETTERS; exports.PRESS_DURATION = _chunkIG4Q3WQOcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkIG4Q3WQOcjs.PRESS_SCALE; exports.Portal = _chunk6HXWQ5AUcjs.Portal; exports.PortalContext = _chunk6HXWQ5AUcjs.PortalContext; exports.PortalHost = _chunk6HXWQ5AUcjs.PortalHost; exports.PressableFeedback = _chunkIG4Q3WQOcjs.PressableFeedback; exports.RIPPLE_CONFIRM_DURATION = _chunkIG4Q3WQOcjs.RIPPLE_CONFIRM_DURATION; exports.RIPPLE_EXPAND_DURATION = _chunkIG4Q3WQOcjs.RIPPLE_EXPAND_DURATION; exports.RIPPLE_FADE_IN = _chunkIG4Q3WQOcjs.RIPPLE_FADE_IN; exports.RIPPLE_FADE_OUT = _chunkIG4Q3WQOcjs.RIPPLE_FADE_OUT; exports.RIPPLE_FADE_OUT_DELAY = _chunkIG4Q3WQOcjs.RIPPLE_FADE_OUT_DELAY; exports.RIPPLE_OPACITY = _chunkIG4Q3WQOcjs.RIPPLE_OPACITY; exports.RIPPLE_START_SCALE = _chunkIG4Q3WQOcjs.RIPPLE_START_SCALE; exports.Row = _chunkIBEX4XGVcjs.Row; exports.SCALE_REFERENCE_WIDTH = _chunkIG4Q3WQOcjs.SCALE_REFERENCE_WIDTH; exports.Slot = _chunkHUZ4AUM2cjs.Slot; exports.Stack = _chunkIBEX4XGVcjs.Stack; exports.TextArea = _chunkGSEK6OCYcjs.TextArea; exports.TextSpan = _chunkY7U6ACMBcjs.TextSpan; exports.ThemeContext = _chunk57SJ4LJFcjs.ThemeContext; exports.Typography = _chunkY7U6ACMBcjs.Typography; exports.XAUIProvider = _chunkOHEHPQLCcjs.XAUIProvider; exports.alertRecipe = _chunkJ4JFIC4Wcjs.alertRecipe; exports.buildRadius = _chunkOHEHPQLCcjs.buildRadius; exports.buildShadows = _chunkOHEHPQLCcjs.buildShadows; exports.buildSlots = _chunkBULNTP5Ncjs.buildSlots; exports.buttonRecipe = _chunkEWBBDVTMcjs.buttonRecipe; exports.cardRecipe = _chunk6FBGCF5Tcjs.cardRecipe; exports.childrenToString = _chunkHUZ4AUM2cjs.childrenToString; exports.chipRecipe = _chunkAV5LMFS3cjs.chipRecipe; exports.closeButtonBase = _chunkJ2JJLKLGcjs.closeButtonBase; exports.createRecipe = _chunkYXVKQMCKcjs.createRecipe; exports.createSlotContext = _chunkHUZ4AUM2cjs.createSlotContext; exports.createTheme = _chunkOHEHPQLCcjs.createTheme; exports.defaultTheme = _chunkOHEHPQLCcjs.defaultTheme; exports.deriveColors = _chunkOHEHPQLCcjs.deriveColors; exports.deriveTint = _chunk57SJ4LJFcjs.deriveTint; exports.extractPastedCode = _chunkBULNTP5Ncjs.extractPastedCode; exports.inputOTPRecipe = _chunkBULNTP5Ncjs.inputOTPRecipe; exports.inputRecipe = _chunkYEW5LPWLcjs.inputRecipe; exports.markBackground = _chunk6FBGCF5Tcjs.markBackground; exports.markOverlay = _chunkIG4Q3WQOcjs.markOverlay; exports.mergeProps = _chunkHUZ4AUM2cjs.mergeProps; exports.mergeRefs = _chunkHUZ4AUM2cjs.mergeRefs; exports.palette = _chunkOHEHPQLCcjs.palette; exports.pressScaleFor = _chunkIG4Q3WQOcjs.pressScaleFor; exports.primitives = _chunkOHEHPQLCcjs.primitives; exports.radiusAxis = _chunkYXVKQMCKcjs.radiusAxis; exports.resolveAnimation = _chunkIG4Q3WQOcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkIG4Q3WQOcjs.resolveSlotAnimation; exports.rippleRadiusFor = _chunkIG4Q3WQOcjs.rippleRadiusFor; exports.sourceKeys = _chunkOHEHPQLCcjs.sourceKeys; exports.tokens = _chunkOHEHPQLCcjs.tokens; exports.typographyRecipe = _chunkY7U6ACMBcjs.typographyRecipe; exports.useAlert = _chunkJ4JFIC4Wcjs.useAlert; exports.useButton = _chunkEWBBDVTMcjs.useButton; exports.useCard = _chunk6FBGCF5Tcjs.useCard; exports.useChip = _chunkAV5LMFS3cjs.useChip; exports.useColorMode = _chunk57SJ4LJFcjs.useColorMode; exports.useControllableState = _chunkBULNTP5Ncjs.useControllableState; exports.useFeedback = _chunkIG4Q3WQOcjs.useFeedback; exports.useGrid = _chunkIBEX4XGVcjs.useGrid; exports.useIconContext = _chunkB4W2XNBPcjs.useIconContext; exports.useInput = _chunkYEW5LPWLcjs.useInput; exports.useInputOTP = _chunkBULNTP5Ncjs.useInputOTP; exports.useInputOTPBox = _chunkBULNTP5Ncjs.useInputOTPBox; exports.useMergedRef = useMergedRef; exports.usePressState = _chunkIG4Q3WQOcjs.usePressState; exports.usePrevious = usePrevious; exports.useStyleProps = _chunkHUZ4AUM2cjs.useStyleProps; exports.useTextArea = _chunkGSEK6OCYcjs.useTextArea; exports.useThemeColor = _chunk57SJ4LJFcjs.useThemeColor; exports.useXAUITheme = _chunk57SJ4LJFcjs.useXAUITheme;
|
package/dist/index.d.cts
CHANGED
|
@@ -2,8 +2,9 @@ export { Alert, AlertCloseProps, AlertContentProps, AlertContextValue, AlertDesc
|
|
|
2
2
|
export { Button, ButtonContextValue, ButtonIconProps, ButtonLabelProps, ButtonProps, ButtonSize, ButtonSlot, ButtonSpinnerProps, ButtonVariant, buttonRecipe, useButton } from './components/button/index.cjs';
|
|
3
3
|
export { CARD_BACKGROUND, Card, CardBackgroundProps, CardBodyProps, CardContextValue, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardSize, CardSlot, CardTitleProps, CardVariant, cardRecipe, markBackground, useCard } from './components/card/index.cjs';
|
|
4
4
|
export { Chip, ChipAvatarProps, ChipCloseProps, ChipContextValue, ChipDotProps, ChipIconProps, ChipLabelProps, ChipProps, ChipSize, ChipSlot, ChipVariant, chipRecipe, useChip } from './components/chip/index.cjs';
|
|
5
|
-
export { Input,
|
|
5
|
+
export { Input, InputDescription, InputError, InputField, InputLabel, InputRoot, inputRecipe, useInput } from './components/input/index.cjs';
|
|
6
6
|
export { InputOTP, InputOTPBoxContextValue, InputOTPBoxProps, InputOTPCaretProps, InputOTPContextValue, InputOTPGroupProps, InputOTPHandle, InputOTPPattern, InputOTPPlaceholderProps, InputOTPProps, InputOTPRenderState, InputOTPSeparatorProps, InputOTPSize, InputOTPSlot, InputOTPValueProps, InputOTPVariant, OTPSlotState, OTP_ALPHANUMERIC, OTP_DIGITS, OTP_LETTERS, buildSlots, extractPastedCode, inputOTPRecipe, useInputOTP, useInputOTPBox } from './components/input-otp/index.cjs';
|
|
7
|
+
export { TextArea, TextAreaContextValue, TextAreaFieldProps, TextAreaProps, useTextArea } from './components/text-area/index.cjs';
|
|
7
8
|
export { TextSpan, TextSpanProps, Typography, TypographyProps, TypographySlot, TypographyVariant, typographyRecipe } from './components/typography/index.cjs';
|
|
8
9
|
export { AxisProps, Column, ColumnProps, Grid, GridContextValue, GridItemProps, GridProps, Row, RowProps, Stack, StackItemProps, StackProps, useGrid } from './components/view/index.cjs';
|
|
9
10
|
import { RefCallback } from 'react';
|
|
@@ -16,6 +17,7 @@ export { A as Axes, C as CompoundVariant, R as Recipe, b as RecipeConfig, a as R
|
|
|
16
17
|
export { D as DirectionalStyleKey, I as ImageStyleProps, S as StyleProps, T as TextStyleProps, V as ViewStyleProps } from './style-props.type-CfnoGEP7.cjs';
|
|
17
18
|
export { ColorModePreference, PaletteFamily, PaletteShade, ThemeContext, XAUIProvider, XAUIProviderProps, XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme } from './theme/index.cjs';
|
|
18
19
|
export { C as ColorMode, F as FontSizeKey, b as FontWeightKey, R as RadiusKey, S as Size, a as XAUIColors, c as XAUIDerivedColors, d as XAUIPrimitiveColors, e as XAUIRadius, f as XAUIShadow, g as XAUISourceColors, X as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-C2gNHpEx.cjs';
|
|
20
|
+
export { b as InputContextValue, c as InputDescriptionProps, d as InputErrorProps, I as InputFieldProps, e as InputLabelPlacement, f as InputLabelProps, a as InputProps, g as InputSize, h as InputSlot, i as InputVariant } from './input.type-BpJeUIe8.cjs';
|
|
19
21
|
export { A as AnimationConfig, a as AnimationProp, F as FeedbackContext, P as PressableFeedbackProps, R as RadiusStyle, b as ResolvedAnimation, c as RippleWave, S as SlotAnimation } from './pressable-feedback.type-BA2C9sSz.cjs';
|
|
20
22
|
import 'react-native-reanimated';
|
|
21
23
|
|
package/dist/index.d.ts
CHANGED
|
@@ -2,8 +2,9 @@ export { Alert, AlertCloseProps, AlertContentProps, AlertContextValue, AlertDesc
|
|
|
2
2
|
export { Button, ButtonContextValue, ButtonIconProps, ButtonLabelProps, ButtonProps, ButtonSize, ButtonSlot, ButtonSpinnerProps, ButtonVariant, buttonRecipe, useButton } from './components/button/index.js';
|
|
3
3
|
export { CARD_BACKGROUND, Card, CardBackgroundProps, CardBodyProps, CardContextValue, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardSize, CardSlot, CardTitleProps, CardVariant, cardRecipe, markBackground, useCard } from './components/card/index.js';
|
|
4
4
|
export { Chip, ChipAvatarProps, ChipCloseProps, ChipContextValue, ChipDotProps, ChipIconProps, ChipLabelProps, ChipProps, ChipSize, ChipSlot, ChipVariant, chipRecipe, useChip } from './components/chip/index.js';
|
|
5
|
-
export { Input,
|
|
5
|
+
export { Input, InputDescription, InputError, InputField, InputLabel, InputRoot, inputRecipe, useInput } from './components/input/index.js';
|
|
6
6
|
export { InputOTP, InputOTPBoxContextValue, InputOTPBoxProps, InputOTPCaretProps, InputOTPContextValue, InputOTPGroupProps, InputOTPHandle, InputOTPPattern, InputOTPPlaceholderProps, InputOTPProps, InputOTPRenderState, InputOTPSeparatorProps, InputOTPSize, InputOTPSlot, InputOTPValueProps, InputOTPVariant, OTPSlotState, OTP_ALPHANUMERIC, OTP_DIGITS, OTP_LETTERS, buildSlots, extractPastedCode, inputOTPRecipe, useInputOTP, useInputOTPBox } from './components/input-otp/index.js';
|
|
7
|
+
export { TextArea, TextAreaContextValue, TextAreaFieldProps, TextAreaProps, useTextArea } from './components/text-area/index.js';
|
|
7
8
|
export { TextSpan, TextSpanProps, Typography, TypographyProps, TypographySlot, TypographyVariant, typographyRecipe } from './components/typography/index.js';
|
|
8
9
|
export { AxisProps, Column, ColumnProps, Grid, GridContextValue, GridItemProps, GridProps, Row, RowProps, Stack, StackItemProps, StackProps, useGrid } from './components/view/index.js';
|
|
9
10
|
import { RefCallback } from 'react';
|
|
@@ -16,6 +17,7 @@ export { A as Axes, C as CompoundVariant, R as Recipe, b as RecipeConfig, a as R
|
|
|
16
17
|
export { D as DirectionalStyleKey, I as ImageStyleProps, S as StyleProps, T as TextStyleProps, V as ViewStyleProps } from './style-props.type-CfnoGEP7.js';
|
|
17
18
|
export { ColorModePreference, PaletteFamily, PaletteShade, ThemeContext, XAUIProvider, XAUIProviderProps, XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme } from './theme/index.js';
|
|
18
19
|
export { C as ColorMode, F as FontSizeKey, b as FontWeightKey, R as RadiusKey, S as Size, a as XAUIColors, c as XAUIDerivedColors, d as XAUIPrimitiveColors, e as XAUIRadius, f as XAUIShadow, g as XAUISourceColors, X as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-C2gNHpEx.js';
|
|
20
|
+
export { b as InputContextValue, c as InputDescriptionProps, d as InputErrorProps, I as InputFieldProps, e as InputLabelPlacement, f as InputLabelProps, a as InputProps, g as InputSize, h as InputSlot, i as InputVariant } from './input.type-DjyZ6P2C.js';
|
|
19
21
|
export { A as AnimationConfig, a as AnimationProp, F as FeedbackContext, P as PressableFeedbackProps, R as RadiusStyle, b as ResolvedAnimation, c as RippleWave, S as SlotAnimation } from './pressable-feedback.type-Bs4dQlGj.js';
|
|
20
22
|
import 'react-native-reanimated';
|
|
21
23
|
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import {
|
|
2
|
+
TextSpan,
|
|
3
|
+
Typography,
|
|
4
|
+
typographyRecipe
|
|
5
|
+
} from "./chunk-G52TQJBI.js";
|
|
1
6
|
import {
|
|
2
7
|
Column,
|
|
3
8
|
Grid,
|
|
@@ -21,7 +26,7 @@ import {
|
|
|
21
26
|
primitives,
|
|
22
27
|
sourceKeys,
|
|
23
28
|
tokens
|
|
24
|
-
} from "./chunk-
|
|
29
|
+
} from "./chunk-TZG3DERP.js";
|
|
25
30
|
import {
|
|
26
31
|
Alert,
|
|
27
32
|
alertRecipe,
|
|
@@ -76,11 +81,6 @@ import {
|
|
|
76
81
|
useFeedback,
|
|
77
82
|
usePressState
|
|
78
83
|
} from "./chunk-4HELPMAK.js";
|
|
79
|
-
import {
|
|
80
|
-
Input,
|
|
81
|
-
inputRecipe,
|
|
82
|
-
useInput
|
|
83
|
-
} from "./chunk-6RO26ORT.js";
|
|
84
84
|
import {
|
|
85
85
|
InputOTP,
|
|
86
86
|
OTP_ALPHANUMERIC,
|
|
@@ -92,13 +92,22 @@ import {
|
|
|
92
92
|
useControllableState,
|
|
93
93
|
useInputOTP,
|
|
94
94
|
useInputOTPBox
|
|
95
|
-
} from "./chunk-
|
|
95
|
+
} from "./chunk-I6UCYAO2.js";
|
|
96
96
|
import "./chunk-EGLLDKN6.js";
|
|
97
97
|
import {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
98
|
+
TextArea,
|
|
99
|
+
useTextArea
|
|
100
|
+
} from "./chunk-ZDCGPK5Z.js";
|
|
101
|
+
import {
|
|
102
|
+
Input,
|
|
103
|
+
InputDescription,
|
|
104
|
+
InputError,
|
|
105
|
+
InputField,
|
|
106
|
+
InputLabel,
|
|
107
|
+
InputRoot,
|
|
108
|
+
inputRecipe,
|
|
109
|
+
useInput
|
|
110
|
+
} from "./chunk-2OY76YNB.js";
|
|
102
111
|
import {
|
|
103
112
|
createRecipe,
|
|
104
113
|
radiusAxis
|
|
@@ -150,7 +159,12 @@ export {
|
|
|
150
159
|
Icon,
|
|
151
160
|
IconContext,
|
|
152
161
|
Input,
|
|
162
|
+
InputDescription,
|
|
163
|
+
InputError,
|
|
164
|
+
InputField,
|
|
165
|
+
InputLabel,
|
|
153
166
|
InputOTP,
|
|
167
|
+
InputRoot,
|
|
154
168
|
OTP_ALPHANUMERIC,
|
|
155
169
|
OTP_DIGITS,
|
|
156
170
|
OTP_LETTERS,
|
|
@@ -171,6 +185,7 @@ export {
|
|
|
171
185
|
SCALE_REFERENCE_WIDTH,
|
|
172
186
|
Slot,
|
|
173
187
|
Stack,
|
|
188
|
+
TextArea,
|
|
174
189
|
TextSpan,
|
|
175
190
|
ThemeContext,
|
|
176
191
|
Typography,
|
|
@@ -223,6 +238,7 @@ export {
|
|
|
223
238
|
usePressState,
|
|
224
239
|
usePrevious,
|
|
225
240
|
useStyleProps,
|
|
241
|
+
useTextArea,
|
|
226
242
|
useThemeColor,
|
|
227
243
|
useXAUITheme
|
|
228
244
|
};
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { StyleProp, TextStyle, TextInputProps, TextProps, ViewStyle, ViewProps } from 'react-native';
|
|
3
|
+
import { T as TextStyleProps, V as ViewStyleProps } from './style-props.type-CfnoGEP7.cjs';
|
|
4
|
+
import { S as Size, R as RadiusKey } from './theme.type-C2gNHpEx.cjs';
|
|
5
|
+
|
|
6
|
+
type InputSlot = 'root' | 'label' | 'field' | 'textArea' | 'placeholder' | 'description' | 'error';
|
|
7
|
+
/**
|
|
8
|
+
* The library's four emphasis levels, narrowed like the `Card`'s (§1 bis). A field
|
|
9
|
+
* **reports nothing** — an error is `isInvalid`, which is a state and not a variant — so
|
|
10
|
+
* `success`, `warning` and `danger` are absent here for the same reason they are there.
|
|
11
|
+
*
|
|
12
|
+
* This is where the theme's `field*` family is finally read, and the four names split
|
|
13
|
+
* HeroUI's two-name `primary | secondary` by saying what each of their ends already is:
|
|
14
|
+
*
|
|
15
|
+
* - **`primary`** — the `fieldBackground` fill plus the theme's `field` shadow. HeroUI's
|
|
16
|
+
* `primary`, with the elevation their flat token only implies.
|
|
17
|
+
* - **`secondary`** — the neutral `default` fill. HeroUI's `secondary`, and the default
|
|
18
|
+
* here: on a plain background a white field is its border and nothing else, while on a
|
|
19
|
+
* card the `fieldBackground` token *is* the card's own colour.
|
|
20
|
+
* - **`tertiary`** — the border alone, no fill. The same drop the `Button`'s `tertiary`
|
|
21
|
+
* makes.
|
|
22
|
+
* - **`ghost`** — neither. A bare field for a toolbar or an inline edit; it has no border
|
|
23
|
+
* to move, so its focus shows in the caret alone.
|
|
24
|
+
*
|
|
25
|
+
* The first three name the `fieldBorder` edge and `ghost` gives it up. Its width is the
|
|
26
|
+
* theme's `borderWidth.field` — HeroUI's `--field-border-width`, which they ship at `0`
|
|
27
|
+
* and we ship at `1`. That is the one shipped default where the two differ;
|
|
28
|
+
* `createTheme({ borderWidth: { field: 0 } })` reproduces theirs.
|
|
29
|
+
*/
|
|
30
|
+
type InputVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
|
|
31
|
+
/**
|
|
32
|
+
* Where the label sits relative to the field's box.
|
|
33
|
+
*
|
|
34
|
+
* `outside` is the label above the box, in the column's flow. `inside` lifts it into the
|
|
35
|
+
* box, above the text — the label is taken **out of flow** and placed against the box's
|
|
36
|
+
* own padding, so the JSX is identical either way and nothing is reparented (R4).
|
|
37
|
+
*
|
|
38
|
+
* Because the inside label positions itself against the top of the root, it assumes the
|
|
39
|
+
* field is the first thing in the column's flow: write `Input.Description` and
|
|
40
|
+
* `Input.Error` after the field, which is where they belong anyway.
|
|
41
|
+
*/
|
|
42
|
+
type InputLabelPlacement = 'outside' | 'inside';
|
|
43
|
+
type InputSize = Size;
|
|
44
|
+
/**
|
|
45
|
+
* What the `Input` itself understands. R14 — a name in here is the component's, so the
|
|
46
|
+
* style prop that shares it is not exposed: `size` is the field's scale and never
|
|
47
|
+
* `ViewStyle`'s, and `color` is R7's tint.
|
|
48
|
+
*/
|
|
49
|
+
type InputOwnProps = {
|
|
50
|
+
variant?: InputVariant;
|
|
51
|
+
/** The field's height, its padding, the gaps and the type. Never width. */
|
|
52
|
+
size?: InputSize;
|
|
53
|
+
/** Overrides the `field` radius the theme chose for every size. */
|
|
54
|
+
radius?: RadiusKey;
|
|
55
|
+
/** Above the box, or lifted into it. @default 'outside' */
|
|
56
|
+
labelPlacement?: InputLabelPlacement;
|
|
57
|
+
/**
|
|
58
|
+
* A raw tint (`'#7c3aed'`), never a token (R7). It lands where the variant put its
|
|
59
|
+
* tokens — the fill of a `default`, the border of a `tertiary` — and, because the focus
|
|
60
|
+
* colour is a role like any other, it is also what the field borders on focus.
|
|
61
|
+
*/
|
|
62
|
+
color?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Paints the border, the label and the description in `danger`, and takes the focus
|
|
65
|
+
* treatment off: an error outranks focus, and a field that is both should read as
|
|
66
|
+
* wrong rather than as busy.
|
|
67
|
+
*
|
|
68
|
+
* It does **not** mount or unmount `Input.Error`. That stays the caller's — a slot that
|
|
69
|
+
* silently renders nothing is a slot you cannot debug.
|
|
70
|
+
*/
|
|
71
|
+
isInvalid?: boolean;
|
|
72
|
+
/** Dims the field and makes it uneditable. */
|
|
73
|
+
isDisabled?: boolean;
|
|
74
|
+
style?: StyleProp<ViewStyle>;
|
|
75
|
+
children?: ReactNode;
|
|
76
|
+
};
|
|
77
|
+
/**
|
|
78
|
+
* R14 — the input's own props, the wrapper `View`'s, and every `ViewStyle` key neither
|
|
79
|
+
* already claims. **`TextInputProps` are not here**: they belong to `Input.Field`, which
|
|
80
|
+
* is the node that has them.
|
|
81
|
+
*/
|
|
82
|
+
type InputProps = InputOwnProps & Omit<ViewProps, keyof InputOwnProps> & Omit<ViewStyleProps, keyof InputOwnProps | keyof ViewProps> & {
|
|
83
|
+
/** R12 — merge into the single child instead of rendering a `View`. */
|
|
84
|
+
asChild?: boolean;
|
|
85
|
+
};
|
|
86
|
+
/**
|
|
87
|
+
* Everything `TextInput` accepts, plus the `TextStyle` keys as props (R14).
|
|
88
|
+
*
|
|
89
|
+
* `editable` is absent: it is `disabled` under another name, and R8 keeps that off the
|
|
90
|
+
* public surface — `isDisabled` on the root is what stops the field.
|
|
91
|
+
*/
|
|
92
|
+
type InputFieldProps = Omit<TextInputProps, 'editable'> & Omit<TextStyleProps, keyof TextInputProps>;
|
|
93
|
+
/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
|
|
94
|
+
type InputTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
|
|
95
|
+
children?: ReactNode;
|
|
96
|
+
};
|
|
97
|
+
type InputLabelProps = InputTextProps;
|
|
98
|
+
type InputDescriptionProps = InputTextProps;
|
|
99
|
+
type InputErrorProps = InputTextProps;
|
|
100
|
+
/**
|
|
101
|
+
* Read off `TextInput`'s own props rather than spelled out: React Native has renamed the
|
|
102
|
+
* payload of these two more than once, and a hand-written `NativeSyntheticEvent<…>` here
|
|
103
|
+
* would be a second declaration free to drift from the node that actually fires them.
|
|
104
|
+
*/
|
|
105
|
+
type FieldFocusEvent = Parameters<NonNullable<TextInputProps['onFocus']>>[0];
|
|
106
|
+
type FieldBlurEvent = Parameters<NonNullable<TextInputProps['onBlur']>>[0];
|
|
107
|
+
/**
|
|
108
|
+
* R5 — resolved styles, not props for a slot to resolve a second time. Each entry is the
|
|
109
|
+
* cached `StyleSheet` reference with the uncached tint pass layered over it, so a slot
|
|
110
|
+
* merges its own `style` on top and does no work of its own.
|
|
111
|
+
*/
|
|
112
|
+
type InputContextValue = {
|
|
113
|
+
labelStyle: StyleProp<TextStyle>;
|
|
114
|
+
fieldStyle: StyleProp<TextStyle>;
|
|
115
|
+
/** Layered *over* `fieldStyle` by `Input.TextArea`: only what a multiline field adds. */
|
|
116
|
+
textAreaStyle: StyleProp<TextStyle>;
|
|
117
|
+
/**
|
|
118
|
+
* Values, not a style: `rows` is a raw number, so the height it implies is arithmetic
|
|
119
|
+
* the slot does — and these are the two measurements it needs, flattened once here
|
|
120
|
+
* rather than in every text area on the screen.
|
|
121
|
+
*/
|
|
122
|
+
textArea: {
|
|
123
|
+
lineHeight: number;
|
|
124
|
+
paddingVertical: number;
|
|
125
|
+
};
|
|
126
|
+
descriptionStyle: StyleProp<TextStyle>;
|
|
127
|
+
errorStyle: StyleProp<TextStyle>;
|
|
128
|
+
/**
|
|
129
|
+
* A value and not a style: `placeholderTextColor` is a `TextInput` prop, so the root
|
|
130
|
+
* flattens its placeholder slot once here rather than in the field.
|
|
131
|
+
*/
|
|
132
|
+
placeholderTextColor?: string;
|
|
133
|
+
/**
|
|
134
|
+
* The focus state lives on the **root**, because the root's recipe resolves on it (R5)
|
|
135
|
+
* and it needs the value before it renders — but the node that hears the event is
|
|
136
|
+
* `Input.Field`, three levels down. These are how it reports back. Their identity is
|
|
137
|
+
* stable, so publishing them costs no re-render of a memoized slot.
|
|
138
|
+
*/
|
|
139
|
+
onFieldFocus: (event: FieldFocusEvent) => void;
|
|
140
|
+
onFieldBlur: (event: FieldBlurEvent) => void;
|
|
141
|
+
/**
|
|
142
|
+
* The id the label carries and the field points at, so a screen reader reads "Courriel,
|
|
143
|
+
* champ de saisie" rather than just the placeholder.
|
|
144
|
+
*/
|
|
145
|
+
labelId: string;
|
|
146
|
+
descriptionId: string;
|
|
147
|
+
isDisabled: boolean;
|
|
148
|
+
isInvalid: boolean;
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
export type { InputFieldProps as I, InputProps as a, InputContextValue as b, InputDescriptionProps as c, InputErrorProps as d, InputLabelPlacement as e, InputLabelProps as f, InputSize as g, InputSlot as h, InputVariant as i };
|