@xaui/native 0.9.1-alpha.31 → 0.9.1-alpha.32
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-36PRYGAM.js +13 -0
- package/dist/{chunk-L7JN6OBQ.cjs → chunk-4MPSXDAB.cjs} +15 -15
- package/dist/{chunk-XQFAUDR2.cjs → chunk-4SLOOIE5.cjs} +2 -2
- package/dist/{chunk-ZH6BHLQR.js → chunk-4YJLNYUS.js} +11 -11
- package/dist/{chunk-ZP2E2H2G.cjs → chunk-54FJOKAN.cjs} +3 -3
- package/dist/{chunk-GPVNCJ3Z.cjs → chunk-6M7RUU7V.cjs} +68 -68
- package/dist/{chunk-XFSW3ZNI.cjs → chunk-7CTIE42J.cjs} +12 -12
- package/dist/{chunk-QGN2BBJO.cjs → chunk-AOEXU5UV.cjs} +8 -8
- package/dist/{chunk-Q3WFY5N3.js → chunk-AYOVBZAX.js} +10 -10
- package/dist/{chunk-42FMGB5M.js → chunk-BA2MPBCO.js} +59 -59
- package/dist/{chunk-5GO7MAVY.cjs → chunk-CM4LI5OH.cjs} +11 -11
- package/dist/{chunk-5PTBRJM7.cjs → chunk-CNNLMMFV.cjs} +11 -11
- package/dist/{chunk-TGZZ3RZU.cjs → chunk-CYS6U374.cjs} +4 -4
- package/dist/{chunk-ANNUYP55.cjs → chunk-ETSYP3NH.cjs} +18 -18
- package/dist/{chunk-VJEER76X.js → chunk-GBFQZQ77.js} +9 -9
- package/dist/chunk-H4E4HDEP.cjs +13 -0
- package/dist/{chunk-NYRXUGVL.js → chunk-HVD5EX7V.js} +6 -6
- package/dist/{chunk-GVQOD3VW.js → chunk-HXL2QCMR.js} +3 -3
- package/dist/{chunk-GLGU2WFL.cjs → chunk-I6ZB3FZI.cjs} +1 -12
- package/dist/{chunk-ZH5XVNHG.js → chunk-JCYWU5TO.js} +6 -6
- package/dist/{chunk-7XKQJQF2.cjs → chunk-K4TWKF5U.cjs} +16 -16
- package/dist/{chunk-N527BTY4.cjs → chunk-K7LLERKT.cjs} +17 -17
- package/dist/chunk-KQKD3KB3.js +152 -0
- package/dist/{chunk-A5OCK3C2.js → chunk-L55CDXNI.js} +7 -7
- package/dist/chunk-LT6XHFXJ.cjs +185 -0
- package/dist/{chunk-URSKA2VR.js → chunk-MEYCZS32.js} +0 -11
- package/dist/{chunk-DFME724B.js → chunk-MHEL3NAN.js} +4 -4
- package/dist/{chunk-ZVWXM3UK.cjs → chunk-MSMZBUZO.cjs} +11 -11
- package/dist/{chunk-IHOCANCQ.js → chunk-NFFL3E4N.js} +8 -8
- package/dist/{chunk-G7K652GC.js → chunk-NLASSGA7.js} +2 -2
- package/dist/{chunk-KOC3KQIT.js → chunk-NMAZ2TQF.js} +4 -4
- package/dist/{chunk-JDFV4W6N.cjs → chunk-OX2YNMNS.cjs} +66 -66
- package/dist/{chunk-VZBWYWEI.cjs → chunk-PBR44KVV.cjs} +25 -25
- package/dist/{chunk-WR7YLDVV.cjs → chunk-PCWT2YBE.cjs} +3 -3
- package/dist/{chunk-BVJQ3UPZ.js → chunk-PPWXLZGL.js} +15 -15
- package/dist/{chunk-5Z4P6WHR.cjs → chunk-Q3D6KIVF.cjs} +11 -11
- package/dist/{chunk-X4HQ4H2V.js → chunk-SLUJFE6R.js} +16 -16
- package/dist/{chunk-4XPLPQLM.cjs → chunk-TVCS5UOE.cjs} +12 -12
- package/dist/{chunk-V4WDMM6Z.js → chunk-U3RDU3HU.js} +2 -2
- package/dist/{chunk-5RQ7AZPN.cjs → chunk-UORTYL63.cjs} +17 -17
- package/dist/{chunk-RDTKAAHX.js → chunk-UR6DNU2M.js} +8 -8
- package/dist/{chunk-AETWQQWU.cjs → chunk-VSALV7VO.cjs} +6 -6
- package/dist/{chunk-3FV4COTM.js → chunk-WJPQARJ5.js} +3 -3
- package/dist/{chunk-BFMTUMTU.js → chunk-XNNJM5DQ.js} +76 -76
- package/dist/{chunk-KPWZLUES.cjs → chunk-XWMB66ZM.cjs} +5 -5
- package/dist/{chunk-MDVSCWJI.js → chunk-Y2B4XM3Y.js} +10 -10
- package/dist/{chunk-E2CWBQTV.js → chunk-YXPYOOHU.js} +1 -1
- package/dist/{chunk-7SEZGVTY.js → chunk-ZC35YYKS.js} +1 -1
- package/dist/components/alert/index.cjs +8 -7
- package/dist/components/alert/index.d.cts +1 -1
- package/dist/components/alert/index.d.ts +1 -1
- package/dist/components/alert/index.js +7 -6
- package/dist/components/button/index.cjs +8 -7
- package/dist/components/button/index.d.cts +167 -167
- package/dist/components/button/index.d.ts +167 -167
- package/dist/components/button/index.js +7 -6
- package/dist/components/card/index.cjs +6 -5
- package/dist/components/card/index.d.cts +169 -169
- package/dist/components/card/index.d.ts +169 -169
- package/dist/components/card/index.js +5 -4
- package/dist/components/checkbox/index.cjs +6 -5
- package/dist/components/checkbox/index.d.cts +382 -382
- package/dist/components/checkbox/index.d.ts +382 -382
- package/dist/components/checkbox/index.js +5 -4
- package/dist/components/chip/index.cjs +8 -7
- package/dist/components/chip/index.d.cts +168 -168
- package/dist/components/chip/index.d.ts +168 -168
- package/dist/components/chip/index.js +7 -6
- package/dist/components/divider/index.cjs +5 -4
- package/dist/components/divider/index.d.cts +1 -1
- package/dist/components/divider/index.d.ts +1 -1
- package/dist/components/divider/index.js +4 -3
- package/dist/components/input/index.cjs +5 -4
- package/dist/components/input/index.d.cts +3 -3
- package/dist/components/input/index.d.ts +3 -3
- package/dist/components/input/index.js +4 -3
- package/dist/components/input-group/index.cjs +7 -6
- package/dist/components/input-group/index.d.cts +6 -6
- package/dist/components/input-group/index.d.ts +6 -6
- package/dist/components/input-group/index.js +6 -5
- package/dist/components/input-otp/index.cjs +5 -4
- package/dist/components/input-otp/index.d.cts +1 -1
- package/dist/components/input-otp/index.d.ts +1 -1
- package/dist/components/input-otp/index.js +4 -3
- package/dist/components/radio/index.cjs +6 -5
- package/dist/components/radio/index.d.cts +370 -370
- package/dist/components/radio/index.d.ts +370 -370
- package/dist/components/radio/index.js +5 -4
- package/dist/components/skeleton/index.cjs +12 -0
- package/dist/components/skeleton/index.d.cts +120 -0
- package/dist/components/skeleton/index.d.ts +120 -0
- package/dist/components/skeleton/index.js +12 -0
- package/dist/components/spinner/index.cjs +5 -4
- package/dist/components/spinner/index.d.cts +1 -1
- package/dist/components/spinner/index.d.ts +1 -1
- package/dist/components/spinner/index.js +4 -3
- package/dist/components/switch/index.cjs +6 -5
- package/dist/components/switch/index.d.cts +384 -384
- package/dist/components/switch/index.d.ts +384 -384
- package/dist/components/switch/index.js +5 -4
- package/dist/components/text-area/index.cjs +6 -5
- package/dist/components/text-area/index.js +5 -4
- package/dist/components/typography/index.cjs +5 -4
- package/dist/components/typography/index.d.cts +2 -2
- package/dist/components/typography/index.d.ts +2 -2
- package/dist/components/typography/index.js +4 -3
- package/dist/components/view/index.cjs +5 -4
- package/dist/components/view/index.d.cts +6 -6
- package/dist/components/view/index.d.ts +6 -6
- package/dist/components/view/index.js +4 -3
- package/dist/index.cjs +34 -26
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +44 -36
- package/dist/system/index.cjs +11 -9
- package/dist/system/index.d.cts +2 -2
- package/dist/system/index.d.ts +2 -2
- package/dist/system/index.js +14 -12
- package/package.json +11 -1
|
@@ -5,16 +5,17 @@ import {
|
|
|
5
5
|
RadioRoot,
|
|
6
6
|
radioRecipe,
|
|
7
7
|
useRadio
|
|
8
|
-
} from "../../chunk-
|
|
8
|
+
} from "../../chunk-NFFL3E4N.js";
|
|
9
9
|
import "../../chunk-BA2DBSAN.js";
|
|
10
10
|
import "../../chunk-F6W3JQ7K.js";
|
|
11
|
-
import "../../chunk-
|
|
11
|
+
import "../../chunk-XNNJM5DQ.js";
|
|
12
12
|
import "../../chunk-423RQBOX.js";
|
|
13
13
|
import "../../chunk-EGLLDKN6.js";
|
|
14
|
+
import "../../chunk-YXPYOOHU.js";
|
|
15
|
+
import "../../chunk-36PRYGAM.js";
|
|
14
16
|
import "../../chunk-4GTAZM2C.js";
|
|
17
|
+
import "../../chunk-MEYCZS32.js";
|
|
15
18
|
import "../../chunk-A3EGFI6T.js";
|
|
16
|
-
import "../../chunk-E2CWBQTV.js";
|
|
17
|
-
import "../../chunk-URSKA2VR.js";
|
|
18
19
|
import "../../chunk-GGW42MY4.js";
|
|
19
20
|
export {
|
|
20
21
|
Radio,
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _chunkLT6XHFXJcjs = require('../../chunk-LT6XHFXJ.cjs');
|
|
5
|
+
require('../../chunk-FNEUOBCV.cjs');
|
|
6
|
+
require('../../chunk-I6ZB3FZI.cjs');
|
|
7
|
+
require('../../chunk-57SJ4LJF.cjs');
|
|
8
|
+
require('../../chunk-MC7SY2QH.cjs');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
exports.Skeleton = _chunkLT6XHFXJcjs.Skeleton; exports.skeletonRecipe = _chunkLT6XHFXJcjs.skeletonRecipe;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { ViewProps, StyleProp, ViewStyle, View } from 'react-native';
|
|
4
|
+
import { V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
|
|
5
|
+
import { R as RadiusKey } from '../../theme.type-C2gNHpEx.cjs';
|
|
6
|
+
import { R as Recipe, a as StyleFn } from '../../create-recipe-dC7wMfnj.cjs';
|
|
7
|
+
|
|
8
|
+
type SkeletonSlot = 'root';
|
|
9
|
+
/**
|
|
10
|
+
* Two levels, and they are the two backgrounds a placeholder is ever drawn on (§1 bis).
|
|
11
|
+
*
|
|
12
|
+
* A skeleton **reports nothing** and **is not pressed**, so the status families are absent
|
|
13
|
+
* the way they are from the `Card`, and so is `primary` — a placeholder in the accent
|
|
14
|
+
* announces the brand where there is nothing yet to announce.
|
|
15
|
+
*
|
|
16
|
+
* - **`default`** — the `default` fill. A block on the page.
|
|
17
|
+
* - **`secondary`** — `defaultSoft`, the same fill at half. A block on a `Card` or any
|
|
18
|
+
* other surface already carrying a neutral, where the full one reads as a hole.
|
|
19
|
+
*
|
|
20
|
+
* **No `tertiary` and no `ghost`**: a skeleton with a border and no fill is an empty box,
|
|
21
|
+
* and a skeleton with neither is nothing at all. Both are the shape of the component being
|
|
22
|
+
* a fill and only a fill.
|
|
23
|
+
*/
|
|
24
|
+
type SkeletonVariant = 'default' | 'secondary';
|
|
25
|
+
/**
|
|
26
|
+
* What the `Skeleton` itself understands. R14 — a name in here is the component's, so the
|
|
27
|
+
* style prop that shares it is not exposed: `color` is R7's tint.
|
|
28
|
+
*
|
|
29
|
+
* **No `asChild`** (R12), because `children` is already taken and means the opposite of
|
|
30
|
+
* what the prop would need it to. Here it is the content the block stands in for — what
|
|
31
|
+
* renders once `isLoading` is `false` — while `asChild` hands `Slot` an element to merge
|
|
32
|
+
* the block's own styles into. One `children` with two meanings, disambiguated by a second
|
|
33
|
+
* prop, is the kind of API this library exists not to ship. Styling is the escape hatch
|
|
34
|
+
* instead, and R14 gives every `ViewStyle` key as a prop.
|
|
35
|
+
*/
|
|
36
|
+
type SkeletonOwnProps = {
|
|
37
|
+
variant?: SkeletonVariant;
|
|
38
|
+
/**
|
|
39
|
+
* The corner. `full` is the circle an avatar placeholder needs, and it is why this is a
|
|
40
|
+
* prop rather than the caller's `borderRadius` — a circle is a shape the vocabulary
|
|
41
|
+
* names, and it has to survive a theme redrawing every corner in the library.
|
|
42
|
+
*/
|
|
43
|
+
radius?: RadiusKey;
|
|
44
|
+
/**
|
|
45
|
+
* A raw tint (`'#7c3aed'`), never a token (R7). There is one thing to colour on a block,
|
|
46
|
+
* so it lands on the block.
|
|
47
|
+
*/
|
|
48
|
+
color?: string;
|
|
49
|
+
/**
|
|
50
|
+
* `false` swaps the block for `children`. It is the prop that makes the component a
|
|
51
|
+
* gate rather than a shape you mount and unmount around your own content:
|
|
52
|
+
*
|
|
53
|
+
* ```tsx
|
|
54
|
+
* <Skeleton isLoading={!user} height={20} width={140}>
|
|
55
|
+
* <Typography>{user?.name}</Typography>
|
|
56
|
+
* </Skeleton>
|
|
57
|
+
* ```
|
|
58
|
+
*
|
|
59
|
+
* @default true
|
|
60
|
+
*/
|
|
61
|
+
isLoading?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* `false` freezes the block at full opacity and mounts no worklet.
|
|
64
|
+
*
|
|
65
|
+
* A boolean rather than HeroUI's `'shimmer' | 'pulse' | 'none'`: a shimmer is a
|
|
66
|
+
* gradient sweeping across the block, a gradient needs `react-native-svg`, and that is
|
|
67
|
+
* an optional peer a component in the core cannot require. One animation, so there is
|
|
68
|
+
* nothing for a name to choose between.
|
|
69
|
+
*/
|
|
70
|
+
animation?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* What the block stands in for, rendered once `isLoading` is `false`. A skeleton with no
|
|
73
|
+
* children is a block that never resolves, which is the right thing for a placeholder
|
|
74
|
+
* whose content is mounted elsewhere.
|
|
75
|
+
*/
|
|
76
|
+
children?: ReactNode;
|
|
77
|
+
style?: StyleProp<ViewStyle>;
|
|
78
|
+
};
|
|
79
|
+
type SkeletonProps = Omit<ViewProps, 'style'> & SkeletonOwnProps & Omit<ViewStyleProps, keyof SkeletonOwnProps | keyof ViewProps>;
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* The shape of what has not arrived yet.
|
|
83
|
+
*
|
|
84
|
+
* ```tsx
|
|
85
|
+
* <Skeleton width={140} height={20} />
|
|
86
|
+
* <Skeleton width={48} height={48} radius="full" />
|
|
87
|
+
*
|
|
88
|
+
* <Skeleton isLoading={!user} height={20} width={140}>
|
|
89
|
+
* <Typography>{user?.name}</Typography>
|
|
90
|
+
* </Skeleton>
|
|
91
|
+
* ```
|
|
92
|
+
*
|
|
93
|
+
* **One node and no slots.** A placeholder is a rectangle; there is nothing inside it to
|
|
94
|
+
* name. A paragraph of them is three of these in a `Column`, which is composition doing
|
|
95
|
+
* what a `lines={3}` prop would otherwise hard-code — including the last line being
|
|
96
|
+
* shorter, which is the only reason the paragraph reads as a paragraph.
|
|
97
|
+
*
|
|
98
|
+
* **It has no `size`, and that is the design.** Only the caller knows the shape of the
|
|
99
|
+
* thing that is missing, so R14's `width` and `height` are the whole sizing API — full
|
|
100
|
+
* React Native names and values, `width="60%"` as readily as `width={140}`. A `size`
|
|
101
|
+
* token here would be a scale of rectangles nobody's content happens to be.
|
|
102
|
+
*
|
|
103
|
+
* **`isLoading={false}` renders `children`**, which is what makes it a gate rather than a
|
|
104
|
+
* shape you mount and unmount around your own content.
|
|
105
|
+
*/
|
|
106
|
+
declare const Skeleton: react.ForwardRefExoticComponent<Omit<ViewProps, "style"> & {
|
|
107
|
+
variant?: SkeletonVariant;
|
|
108
|
+
radius?: RadiusKey;
|
|
109
|
+
color?: string;
|
|
110
|
+
isLoading?: boolean;
|
|
111
|
+
animation?: boolean;
|
|
112
|
+
children?: react.ReactNode;
|
|
113
|
+
style?: StyleProp<ViewStyle>;
|
|
114
|
+
} & 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" | "animation" | "radius" | "variant" | "isLoading"> & react.RefAttributes<View>>;
|
|
115
|
+
|
|
116
|
+
declare const skeletonRecipe: Recipe<"root", SkeletonVariant, {
|
|
117
|
+
readonly radius: Record<RadiusKey, StyleFn<"root">>;
|
|
118
|
+
}>;
|
|
119
|
+
|
|
120
|
+
export { Skeleton, type SkeletonProps, type SkeletonSlot, type SkeletonVariant, skeletonRecipe };
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { ViewProps, StyleProp, ViewStyle, View } from 'react-native';
|
|
4
|
+
import { V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.js';
|
|
5
|
+
import { R as RadiusKey } from '../../theme.type-C2gNHpEx.js';
|
|
6
|
+
import { R as Recipe, a as StyleFn } from '../../create-recipe-BdVd2ffi.js';
|
|
7
|
+
|
|
8
|
+
type SkeletonSlot = 'root';
|
|
9
|
+
/**
|
|
10
|
+
* Two levels, and they are the two backgrounds a placeholder is ever drawn on (§1 bis).
|
|
11
|
+
*
|
|
12
|
+
* A skeleton **reports nothing** and **is not pressed**, so the status families are absent
|
|
13
|
+
* the way they are from the `Card`, and so is `primary` — a placeholder in the accent
|
|
14
|
+
* announces the brand where there is nothing yet to announce.
|
|
15
|
+
*
|
|
16
|
+
* - **`default`** — the `default` fill. A block on the page.
|
|
17
|
+
* - **`secondary`** — `defaultSoft`, the same fill at half. A block on a `Card` or any
|
|
18
|
+
* other surface already carrying a neutral, where the full one reads as a hole.
|
|
19
|
+
*
|
|
20
|
+
* **No `tertiary` and no `ghost`**: a skeleton with a border and no fill is an empty box,
|
|
21
|
+
* and a skeleton with neither is nothing at all. Both are the shape of the component being
|
|
22
|
+
* a fill and only a fill.
|
|
23
|
+
*/
|
|
24
|
+
type SkeletonVariant = 'default' | 'secondary';
|
|
25
|
+
/**
|
|
26
|
+
* What the `Skeleton` itself understands. R14 — a name in here is the component's, so the
|
|
27
|
+
* style prop that shares it is not exposed: `color` is R7's tint.
|
|
28
|
+
*
|
|
29
|
+
* **No `asChild`** (R12), because `children` is already taken and means the opposite of
|
|
30
|
+
* what the prop would need it to. Here it is the content the block stands in for — what
|
|
31
|
+
* renders once `isLoading` is `false` — while `asChild` hands `Slot` an element to merge
|
|
32
|
+
* the block's own styles into. One `children` with two meanings, disambiguated by a second
|
|
33
|
+
* prop, is the kind of API this library exists not to ship. Styling is the escape hatch
|
|
34
|
+
* instead, and R14 gives every `ViewStyle` key as a prop.
|
|
35
|
+
*/
|
|
36
|
+
type SkeletonOwnProps = {
|
|
37
|
+
variant?: SkeletonVariant;
|
|
38
|
+
/**
|
|
39
|
+
* The corner. `full` is the circle an avatar placeholder needs, and it is why this is a
|
|
40
|
+
* prop rather than the caller's `borderRadius` — a circle is a shape the vocabulary
|
|
41
|
+
* names, and it has to survive a theme redrawing every corner in the library.
|
|
42
|
+
*/
|
|
43
|
+
radius?: RadiusKey;
|
|
44
|
+
/**
|
|
45
|
+
* A raw tint (`'#7c3aed'`), never a token (R7). There is one thing to colour on a block,
|
|
46
|
+
* so it lands on the block.
|
|
47
|
+
*/
|
|
48
|
+
color?: string;
|
|
49
|
+
/**
|
|
50
|
+
* `false` swaps the block for `children`. It is the prop that makes the component a
|
|
51
|
+
* gate rather than a shape you mount and unmount around your own content:
|
|
52
|
+
*
|
|
53
|
+
* ```tsx
|
|
54
|
+
* <Skeleton isLoading={!user} height={20} width={140}>
|
|
55
|
+
* <Typography>{user?.name}</Typography>
|
|
56
|
+
* </Skeleton>
|
|
57
|
+
* ```
|
|
58
|
+
*
|
|
59
|
+
* @default true
|
|
60
|
+
*/
|
|
61
|
+
isLoading?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* `false` freezes the block at full opacity and mounts no worklet.
|
|
64
|
+
*
|
|
65
|
+
* A boolean rather than HeroUI's `'shimmer' | 'pulse' | 'none'`: a shimmer is a
|
|
66
|
+
* gradient sweeping across the block, a gradient needs `react-native-svg`, and that is
|
|
67
|
+
* an optional peer a component in the core cannot require. One animation, so there is
|
|
68
|
+
* nothing for a name to choose between.
|
|
69
|
+
*/
|
|
70
|
+
animation?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* What the block stands in for, rendered once `isLoading` is `false`. A skeleton with no
|
|
73
|
+
* children is a block that never resolves, which is the right thing for a placeholder
|
|
74
|
+
* whose content is mounted elsewhere.
|
|
75
|
+
*/
|
|
76
|
+
children?: ReactNode;
|
|
77
|
+
style?: StyleProp<ViewStyle>;
|
|
78
|
+
};
|
|
79
|
+
type SkeletonProps = Omit<ViewProps, 'style'> & SkeletonOwnProps & Omit<ViewStyleProps, keyof SkeletonOwnProps | keyof ViewProps>;
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* The shape of what has not arrived yet.
|
|
83
|
+
*
|
|
84
|
+
* ```tsx
|
|
85
|
+
* <Skeleton width={140} height={20} />
|
|
86
|
+
* <Skeleton width={48} height={48} radius="full" />
|
|
87
|
+
*
|
|
88
|
+
* <Skeleton isLoading={!user} height={20} width={140}>
|
|
89
|
+
* <Typography>{user?.name}</Typography>
|
|
90
|
+
* </Skeleton>
|
|
91
|
+
* ```
|
|
92
|
+
*
|
|
93
|
+
* **One node and no slots.** A placeholder is a rectangle; there is nothing inside it to
|
|
94
|
+
* name. A paragraph of them is three of these in a `Column`, which is composition doing
|
|
95
|
+
* what a `lines={3}` prop would otherwise hard-code — including the last line being
|
|
96
|
+
* shorter, which is the only reason the paragraph reads as a paragraph.
|
|
97
|
+
*
|
|
98
|
+
* **It has no `size`, and that is the design.** Only the caller knows the shape of the
|
|
99
|
+
* thing that is missing, so R14's `width` and `height` are the whole sizing API — full
|
|
100
|
+
* React Native names and values, `width="60%"` as readily as `width={140}`. A `size`
|
|
101
|
+
* token here would be a scale of rectangles nobody's content happens to be.
|
|
102
|
+
*
|
|
103
|
+
* **`isLoading={false}` renders `children`**, which is what makes it a gate rather than a
|
|
104
|
+
* shape you mount and unmount around your own content.
|
|
105
|
+
*/
|
|
106
|
+
declare const Skeleton: react.ForwardRefExoticComponent<Omit<ViewProps, "style"> & {
|
|
107
|
+
variant?: SkeletonVariant;
|
|
108
|
+
radius?: RadiusKey;
|
|
109
|
+
color?: string;
|
|
110
|
+
isLoading?: boolean;
|
|
111
|
+
animation?: boolean;
|
|
112
|
+
children?: react.ReactNode;
|
|
113
|
+
style?: StyleProp<ViewStyle>;
|
|
114
|
+
} & 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" | "animation" | "radius" | "variant" | "isLoading"> & react.RefAttributes<View>>;
|
|
115
|
+
|
|
116
|
+
declare const skeletonRecipe: Recipe<"root", SkeletonVariant, {
|
|
117
|
+
readonly radius: Record<RadiusKey, StyleFn<"root">>;
|
|
118
|
+
}>;
|
|
119
|
+
|
|
120
|
+
export { Skeleton, type SkeletonProps, type SkeletonSlot, type SkeletonVariant, skeletonRecipe };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Skeleton,
|
|
3
|
+
skeletonRecipe
|
|
4
|
+
} from "../../chunk-KQKD3KB3.js";
|
|
5
|
+
import "../../chunk-4GTAZM2C.js";
|
|
6
|
+
import "../../chunk-MEYCZS32.js";
|
|
7
|
+
import "../../chunk-A3EGFI6T.js";
|
|
8
|
+
import "../../chunk-GGW42MY4.js";
|
|
9
|
+
export {
|
|
10
|
+
Skeleton,
|
|
11
|
+
skeletonRecipe
|
|
12
|
+
};
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
require('../../chunk-
|
|
4
|
+
var _chunkXWMB66ZMcjs = require('../../chunk-XWMB66ZM.cjs');
|
|
5
|
+
require('../../chunk-K4TWKF5U.cjs');
|
|
6
6
|
require('../../chunk-7EIHHOHP.cjs');
|
|
7
7
|
require('../../chunk-7DPL3ZDS.cjs');
|
|
8
8
|
require('../../chunk-EJQCQPET.cjs');
|
|
9
|
+
require('../../chunk-H4E4HDEP.cjs');
|
|
9
10
|
require('../../chunk-FNEUOBCV.cjs');
|
|
11
|
+
require('../../chunk-I6ZB3FZI.cjs');
|
|
10
12
|
require('../../chunk-57SJ4LJF.cjs');
|
|
11
|
-
require('../../chunk-GLGU2WFL.cjs');
|
|
12
13
|
require('../../chunk-MC7SY2QH.cjs');
|
|
13
14
|
|
|
14
15
|
|
|
15
16
|
|
|
16
|
-
exports.Spinner =
|
|
17
|
+
exports.Spinner = _chunkXWMB66ZMcjs.Spinner; exports.spinnerRecipe = _chunkXWMB66ZMcjs.spinnerRecipe;
|
|
@@ -90,7 +90,7 @@ declare const Spinner: react.ForwardRefExoticComponent<Omit<react_native.ViewPro
|
|
|
90
90
|
color?: string;
|
|
91
91
|
animation?: boolean;
|
|
92
92
|
style?: StyleProp<ViewStyle>;
|
|
93
|
-
} & Omit<ViewStyleProps, "
|
|
93
|
+
} & 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" | "animation" | "size" | "variant"> & react.RefAttributes<View>>;
|
|
94
94
|
|
|
95
95
|
declare const spinnerRecipe: Recipe<"root" | "arc", SpinnerVariant, {
|
|
96
96
|
readonly size: {
|
|
@@ -90,7 +90,7 @@ declare const Spinner: react.ForwardRefExoticComponent<Omit<react_native.ViewPro
|
|
|
90
90
|
color?: string;
|
|
91
91
|
animation?: boolean;
|
|
92
92
|
style?: StyleProp<ViewStyle>;
|
|
93
|
-
} & Omit<ViewStyleProps, "
|
|
93
|
+
} & 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" | "animation" | "size" | "variant"> & react.RefAttributes<View>>;
|
|
94
94
|
|
|
95
95
|
declare const spinnerRecipe: Recipe<"root" | "arc", SpinnerVariant, {
|
|
96
96
|
readonly size: {
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Spinner,
|
|
3
3
|
spinnerRecipe
|
|
4
|
-
} from "../../chunk-
|
|
5
|
-
import "../../chunk-
|
|
4
|
+
} from "../../chunk-NMAZ2TQF.js";
|
|
5
|
+
import "../../chunk-PPWXLZGL.js";
|
|
6
6
|
import "../../chunk-F6W3JQ7K.js";
|
|
7
7
|
import "../../chunk-423RQBOX.js";
|
|
8
8
|
import "../../chunk-EGLLDKN6.js";
|
|
9
|
+
import "../../chunk-36PRYGAM.js";
|
|
9
10
|
import "../../chunk-4GTAZM2C.js";
|
|
11
|
+
import "../../chunk-MEYCZS32.js";
|
|
10
12
|
import "../../chunk-A3EGFI6T.js";
|
|
11
|
-
import "../../chunk-URSKA2VR.js";
|
|
12
13
|
import "../../chunk-GGW42MY4.js";
|
|
13
14
|
export {
|
|
14
15
|
Spinner,
|
|
@@ -6,15 +6,16 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunkOX2YNMNScjs = require('../../chunk-OX2YNMNS.cjs');
|
|
10
10
|
require('../../chunk-7EIHHOHP.cjs');
|
|
11
|
-
require('../../chunk-
|
|
11
|
+
require('../../chunk-6M7RUU7V.cjs');
|
|
12
12
|
require('../../chunk-7DPL3ZDS.cjs');
|
|
13
13
|
require('../../chunk-EJQCQPET.cjs');
|
|
14
|
+
require('../../chunk-54FJOKAN.cjs');
|
|
15
|
+
require('../../chunk-H4E4HDEP.cjs');
|
|
14
16
|
require('../../chunk-FNEUOBCV.cjs');
|
|
17
|
+
require('../../chunk-I6ZB3FZI.cjs');
|
|
15
18
|
require('../../chunk-57SJ4LJF.cjs');
|
|
16
|
-
require('../../chunk-ZP2E2H2G.cjs');
|
|
17
|
-
require('../../chunk-GLGU2WFL.cjs');
|
|
18
19
|
require('../../chunk-MC7SY2QH.cjs');
|
|
19
20
|
|
|
20
21
|
|
|
@@ -24,4 +25,4 @@ require('../../chunk-MC7SY2QH.cjs');
|
|
|
24
25
|
|
|
25
26
|
|
|
26
27
|
|
|
27
|
-
exports.Switch =
|
|
28
|
+
exports.Switch = _chunkOX2YNMNScjs.Switch; exports.SwitchLabel = _chunkOX2YNMNScjs.SwitchLabel; exports.SwitchRoot = _chunkOX2YNMNScjs.SwitchRoot; exports.SwitchThumb = _chunkOX2YNMNScjs.SwitchThumb; exports.SwitchTrack = _chunkOX2YNMNScjs.SwitchTrack; exports.switchRecipe = _chunkOX2YNMNScjs.switchRecipe; exports.useSwitch = _chunkOX2YNMNScjs.useSwitch;
|