@onlynative/components 0.0.0-alpha.0 → 0.0.0-alpha.1
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/appbar/index.js +27 -26
- package/dist/avatar/index.js +7 -6
- package/dist/button/index.js +34 -31
- package/dist/card/index.js +34 -18
- package/dist/checkbox/index.js +35 -30
- package/dist/chip/index.js +37 -32
- package/dist/icon-button/index.js +5 -4
- package/dist/index.js +185 -252
- package/dist/list/index.js +52 -30
- package/dist/radio/index.js +27 -28
- package/dist/switch/index.js +35 -30
- package/dist/text-field/index.js +19 -18
- package/llms.txt +2 -2
- package/package.json +3 -18
package/dist/chip/index.js
CHANGED
|
@@ -26,7 +26,7 @@ module.exports = __toCommonJS(chip_exports);
|
|
|
26
26
|
|
|
27
27
|
// src/chip/Chip.tsx
|
|
28
28
|
var import_react = require("react");
|
|
29
|
-
var
|
|
29
|
+
var import_react_native5 = require("react-native");
|
|
30
30
|
var import_core = require("@onlynative/core");
|
|
31
31
|
|
|
32
32
|
// ../utils/dist/chunk-OQRDRRQA.mjs
|
|
@@ -40,6 +40,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
40
40
|
// ../utils/dist/index.mjs
|
|
41
41
|
var import_react_native = require("react-native");
|
|
42
42
|
var import_react_native2 = require("react-native");
|
|
43
|
+
var import_react_native3 = require("react-native");
|
|
43
44
|
function parseHexColor(color) {
|
|
44
45
|
const normalized = color.replace("#", "");
|
|
45
46
|
if (normalized.length !== 6 && normalized.length !== 8) {
|
|
@@ -122,9 +123,31 @@ function getMaterialCommunityIcons() {
|
|
|
122
123
|
}
|
|
123
124
|
return _MCIcons;
|
|
124
125
|
}
|
|
126
|
+
function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, style) {
|
|
127
|
+
if (typeof style === "function") {
|
|
128
|
+
return (state) => [
|
|
129
|
+
base,
|
|
130
|
+
state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
|
|
131
|
+
state.pressed && !isDisabled ? pressed : void 0,
|
|
132
|
+
isDisabled ? disabled : void 0,
|
|
133
|
+
style(state)
|
|
134
|
+
];
|
|
135
|
+
}
|
|
136
|
+
return (state) => [
|
|
137
|
+
base,
|
|
138
|
+
state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
|
|
139
|
+
state.pressed && !isDisabled ? pressed : void 0,
|
|
140
|
+
isDisabled ? disabled : void 0,
|
|
141
|
+
style
|
|
142
|
+
];
|
|
143
|
+
}
|
|
144
|
+
function resolveColorFromStyle(...styles) {
|
|
145
|
+
const flattened = import_react_native2.StyleSheet.flatten(styles);
|
|
146
|
+
return typeof (flattened == null ? void 0 : flattened.color) === "string" ? flattened.color : void 0;
|
|
147
|
+
}
|
|
125
148
|
|
|
126
149
|
// src/chip/styles.ts
|
|
127
|
-
var
|
|
150
|
+
var import_react_native4 = require("react-native");
|
|
128
151
|
function getVariantColors(theme, variant, elevated, selected) {
|
|
129
152
|
const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
130
153
|
const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
|
|
@@ -252,7 +275,7 @@ function createStyles(theme, variant, elevated, selected, hasLeadingContent, has
|
|
|
252
275
|
const elevationLevel2 = elevationStyle(theme.elevation.level2);
|
|
253
276
|
const isElevated = elevated && variant !== "input";
|
|
254
277
|
const baseElevation = isElevated ? elevationLevel1 : elevationLevel0;
|
|
255
|
-
return
|
|
278
|
+
return import_react_native4.StyleSheet.create({
|
|
256
279
|
container: {
|
|
257
280
|
alignSelf: "flex-start",
|
|
258
281
|
alignItems: "center",
|
|
@@ -309,24 +332,6 @@ function createStyles(theme, variant, elevated, selected, hasLeadingContent, has
|
|
|
309
332
|
|
|
310
333
|
// src/chip/Chip.tsx
|
|
311
334
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
312
|
-
function resolveStyle(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
|
|
313
|
-
if (typeof style === "function") {
|
|
314
|
-
return (state) => [
|
|
315
|
-
containerStyle,
|
|
316
|
-
state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
|
|
317
|
-
state.pressed && !disabled ? pressedContainerStyle : void 0,
|
|
318
|
-
disabled ? disabledContainerStyle : void 0,
|
|
319
|
-
style(state)
|
|
320
|
-
];
|
|
321
|
-
}
|
|
322
|
-
return (state) => [
|
|
323
|
-
containerStyle,
|
|
324
|
-
state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
|
|
325
|
-
state.pressed && !disabled ? pressedContainerStyle : void 0,
|
|
326
|
-
disabled ? disabledContainerStyle : void 0,
|
|
327
|
-
style
|
|
328
|
-
];
|
|
329
|
-
}
|
|
330
335
|
function Chip({
|
|
331
336
|
children,
|
|
332
337
|
style,
|
|
@@ -374,13 +379,13 @@ function Chip({
|
|
|
374
379
|
contentColor
|
|
375
380
|
]
|
|
376
381
|
);
|
|
377
|
-
const resolvedIconColor = (0, import_react.useMemo)(
|
|
378
|
-
|
|
382
|
+
const resolvedIconColor = (0, import_react.useMemo)(
|
|
383
|
+
() => resolveColorFromStyle(
|
|
379
384
|
styles.label,
|
|
380
385
|
isDisabled ? styles.disabledLabel : void 0
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
386
|
+
),
|
|
387
|
+
[styles.label, styles.disabledLabel, isDisabled]
|
|
388
|
+
);
|
|
384
389
|
const computedLabelStyle = (0, import_react.useMemo)(
|
|
385
390
|
() => [
|
|
386
391
|
styles.label,
|
|
@@ -391,7 +396,7 @@ function Chip({
|
|
|
391
396
|
);
|
|
392
397
|
const renderLeadingContent = () => {
|
|
393
398
|
if (variant === "input" && avatar) {
|
|
394
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.View, { style: styles.avatar, children: avatar });
|
|
395
400
|
}
|
|
396
401
|
if (leadingIcon) {
|
|
397
402
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -418,7 +423,7 @@ function Chip({
|
|
|
418
423
|
return null;
|
|
419
424
|
};
|
|
420
425
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
421
|
-
|
|
426
|
+
import_react_native5.Pressable,
|
|
422
427
|
{
|
|
423
428
|
...props,
|
|
424
429
|
accessibilityRole: "button",
|
|
@@ -426,9 +431,9 @@ function Chip({
|
|
|
426
431
|
disabled: isDisabled,
|
|
427
432
|
...variant === "filter" ? { selected: isSelected } : void 0
|
|
428
433
|
},
|
|
429
|
-
hitSlop:
|
|
434
|
+
hitSlop: import_react_native5.Platform.OS === "web" ? void 0 : 4,
|
|
430
435
|
disabled: isDisabled,
|
|
431
|
-
style:
|
|
436
|
+
style: resolvePressableStyle(
|
|
432
437
|
styles.container,
|
|
433
438
|
styles.hoveredContainer,
|
|
434
439
|
styles.pressedContainer,
|
|
@@ -438,9 +443,9 @@ function Chip({
|
|
|
438
443
|
),
|
|
439
444
|
children: [
|
|
440
445
|
renderLeadingContent(),
|
|
441
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
446
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.Text, { style: computedLabelStyle, children }),
|
|
442
447
|
showCloseIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
443
|
-
|
|
448
|
+
import_react_native5.Pressable,
|
|
444
449
|
{
|
|
445
450
|
onPress: onClose,
|
|
446
451
|
accessibilityRole: "button",
|
|
@@ -26,7 +26,7 @@ module.exports = __toCommonJS(icon_button_exports);
|
|
|
26
26
|
|
|
27
27
|
// src/icon-button/IconButton.tsx
|
|
28
28
|
var import_react = require("react");
|
|
29
|
-
var
|
|
29
|
+
var import_react_native5 = require("react-native");
|
|
30
30
|
var import_core = require("@onlynative/core");
|
|
31
31
|
|
|
32
32
|
// ../utils/dist/chunk-OQRDRRQA.mjs
|
|
@@ -40,6 +40,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
40
40
|
// ../utils/dist/index.mjs
|
|
41
41
|
var import_react_native = require("react-native");
|
|
42
42
|
var import_react_native2 = require("react-native");
|
|
43
|
+
var import_react_native3 = require("react-native");
|
|
43
44
|
function parseHexColor(color) {
|
|
44
45
|
const normalized = color.replace("#", "");
|
|
45
46
|
if (normalized.length !== 6 && normalized.length !== 8) {
|
|
@@ -103,12 +104,12 @@ function getMaterialCommunityIcons() {
|
|
|
103
104
|
}
|
|
104
105
|
|
|
105
106
|
// src/icon-button/styles.ts
|
|
106
|
-
var
|
|
107
|
+
var import_react_native4 = require("react-native");
|
|
107
108
|
function createStyles(theme) {
|
|
108
109
|
const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
109
110
|
const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
110
111
|
const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest;
|
|
111
|
-
return
|
|
112
|
+
return import_react_native4.StyleSheet.create({
|
|
112
113
|
container: {
|
|
113
114
|
borderRadius: theme.shape.cornerFull,
|
|
114
115
|
alignItems: "center",
|
|
@@ -546,7 +547,7 @@ function IconButton({
|
|
|
546
547
|
};
|
|
547
548
|
}, [containerColor, resolvedIconColor, theme.stateLayer]);
|
|
548
549
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
549
|
-
|
|
550
|
+
import_react_native5.Pressable,
|
|
550
551
|
{
|
|
551
552
|
...props,
|
|
552
553
|
accessibilityRole: "button",
|