@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.
@@ -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 import_react_native4 = require("react-native");
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 import_react_native3 = require("react-native");
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 import_react_native3.StyleSheet.create({
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
- const base = import_react_native4.StyleSheet.flatten([
382
+ const resolvedIconColor = (0, import_react.useMemo)(
383
+ () => resolveColorFromStyle(
379
384
  styles.label,
380
385
  isDisabled ? styles.disabledLabel : void 0
381
- ]);
382
- return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
383
- }, [styles.label, styles.disabledLabel, isDisabled]);
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)(import_react_native4.View, { style: styles.avatar, children: avatar });
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
- import_react_native4.Pressable,
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: import_react_native4.Platform.OS === "web" ? void 0 : 4,
434
+ hitSlop: import_react_native5.Platform.OS === "web" ? void 0 : 4,
430
435
  disabled: isDisabled,
431
- style: resolveStyle(
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)(import_react_native4.Text, { style: computedLabelStyle, children }),
446
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.Text, { style: computedLabelStyle, children }),
442
447
  showCloseIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
443
- import_react_native4.Pressable,
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 import_react_native4 = require("react-native");
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 import_react_native3 = require("react-native");
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 import_react_native3.StyleSheet.create({
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
- import_react_native4.Pressable,
550
+ import_react_native5.Pressable,
550
551
  {
551
552
  ...props,
552
553
  accessibilityRole: "button",