@xaui/native 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -182,11 +182,6 @@
       "import": "./dist/card/index.js",
       "require": "./dist/card/index.js"
     },
-    "./container": {
-      "types": "./dist/container/index.d.ts",
-      "import": "./dist/container/index.js",
-      "require": "./dist/container/index.js"
-    },
     "./input": {
       "types": "./dist/input/index.d.ts",
       "import": "./dist/input/index.js",
@@ -273,8 +268,8 @@
     "directory": "packages/native"
   },
   "dependencies": {
-    "@xaui/core": "0.2.1",
-    "@xaui/icons": "0.0.10"
+    "@xaui/core": "0.2.2",
+    "@xaui/icons": "0.0.11"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/dist/container/index.cjs

@@ -1,203 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/container/container.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/container/container.utils.ts
-var resolveEdgeInsets = (value, prefix) => {
-  if (typeof value === "number") {
-    return prefix === "padding" ? { padding: value } : { margin: value };
-  }
-  const style = {};
-  if (prefix === "padding") {
-    if (value.horizontal !== void 0) style.paddingHorizontal = value.horizontal;
-    if (value.vertical !== void 0) style.paddingVertical = value.vertical;
-    if (value.top !== void 0) style.paddingTop = value.top;
-    if (value.bottom !== void 0) style.paddingBottom = value.bottom;
-    if (value.left !== void 0) style.paddingLeft = value.left;
-    if (value.right !== void 0) style.paddingRight = value.right;
-  } else {
-    if (value.horizontal !== void 0) style.marginHorizontal = value.horizontal;
-    if (value.vertical !== void 0) style.marginVertical = value.vertical;
-    if (value.top !== void 0) style.marginTop = value.top;
-    if (value.bottom !== void 0) style.marginBottom = value.bottom;
-    if (value.left !== void 0) style.marginLeft = value.left;
-    if (value.right !== void 0) style.marginRight = value.right;
-  }
-  return style;
-};
-var ALIGNMENT_MAP = {
-  topLeft: { justifyContent: "flex-start", alignItems: "flex-start" },
-  topCenter: { justifyContent: "flex-start", alignItems: "center" },
-  topRight: { justifyContent: "flex-start", alignItems: "flex-end" },
-  centerLeft: { justifyContent: "center", alignItems: "flex-start" },
-  center: { justifyContent: "center", alignItems: "center" },
-  centerRight: { justifyContent: "center", alignItems: "flex-end" },
-  bottomLeft: { justifyContent: "flex-end", alignItems: "flex-start" },
-  bottomCenter: { justifyContent: "flex-end", alignItems: "center" },
-  bottomRight: { justifyContent: "flex-end", alignItems: "flex-end" }
-};
-var toFlexPosition = (v) => {
-  if (v <= 0) return "flex-start";
-  if (v >= 1) return "flex-end";
-  return "center";
-};
-var resolveAlignment = (value) => {
-  if (typeof value === "object") {
-    return {
-      justifyContent: toFlexPosition(value.y),
-      alignItems: toFlexPosition(value.x)
-    };
-  }
-  return _nullishCoalesce(ALIGNMENT_MAP[value], () => ( {
-    justifyContent: "flex-start",
-    alignItems: "flex-start"
-  }));
-};
-var resolveBorderRadius = (value) => {
-  if (typeof value === "number") {
-    return { borderRadius: value };
-  }
-  const style = {};
-  if (value.topLeft !== void 0) style.borderTopLeftRadius = value.topLeft;
-  if (value.topRight !== void 0) style.borderTopRightRadius = value.topRight;
-  if (value.bottomLeft !== void 0) style.borderBottomLeftRadius = value.bottomLeft;
-  if (value.bottomRight !== void 0)
-    style.borderBottomRightRadius = value.bottomRight;
-  return style;
-};
-var resolveBorderSide = (side, position) => {
-  const style = {};
-  if (position === "") {
-    if (side.width !== void 0) style.borderWidth = side.width;
-    if (side.color !== void 0) style.borderColor = side.color;
-    if (side.style !== void 0) style.borderStyle = side.style;
-    return style;
-  }
-  if (position === "Top") {
-    if (side.width !== void 0) style.borderTopWidth = side.width;
-    if (side.color !== void 0) style.borderTopColor = side.color;
-  } else if (position === "Bottom") {
-    if (side.width !== void 0) style.borderBottomWidth = side.width;
-    if (side.color !== void 0) style.borderBottomColor = side.color;
-  } else if (position === "Left") {
-    if (side.width !== void 0) style.borderLeftWidth = side.width;
-    if (side.color !== void 0) style.borderLeftColor = side.color;
-  } else {
-    if (side.width !== void 0) style.borderRightWidth = side.width;
-    if (side.color !== void 0) style.borderRightColor = side.color;
-  }
-  return style;
-};
-var resolveBorder = (value) => {
-  const dir = value;
-  if (dir.top !== void 0 || dir.bottom !== void 0 || dir.left !== void 0 || dir.right !== void 0) {
-    return {
-      ...dir.top ? resolveBorderSide(dir.top, "Top") : {},
-      ...dir.bottom ? resolveBorderSide(dir.bottom, "Bottom") : {},
-      ...dir.left ? resolveBorderSide(dir.left, "Left") : {},
-      ...dir.right ? resolveBorderSide(dir.right, "Right") : {}
-    };
-  }
-  return resolveBorderSide(value, "");
-};
-var resolveShadow = (value) => ({
-  shadowColor: _nullishCoalesce(value.color, () => ( "#000000")),
-  shadowOffset: {
-    width: _nullishCoalesce(_optionalChain([value, 'access', _ => _.offset, 'optionalAccess', _2 => _2.x]), () => ( 0)),
-    height: _nullishCoalesce(_optionalChain([value, 'access', _3 => _3.offset, 'optionalAccess', _4 => _4.y]), () => ( 4))
-  },
-  shadowOpacity: _nullishCoalesce(value.opacity, () => ( 0.1)),
-  shadowRadius: _nullishCoalesce(value.blur, () => ( 4)),
-  elevation: _nullishCoalesce(value.elevation, () => ( 2))
-});
-var resolveTransform = (value) => {
-  const transforms = [];
-  if (value.rotate !== void 0) transforms.push({ rotate: value.rotate });
-  if (value.rotateX !== void 0) transforms.push({ rotateX: value.rotateX });
-  if (value.rotateY !== void 0) transforms.push({ rotateY: value.rotateY });
-  if (value.scale !== void 0) transforms.push({ scale: value.scale });
-  if (value.scaleX !== void 0) transforms.push({ scaleX: value.scaleX });
-  if (value.scaleY !== void 0) transforms.push({ scaleY: value.scaleY });
-  if (value.translateX !== void 0)
-    transforms.push({ translateX: value.translateX });
-  if (value.translateY !== void 0)
-    transforms.push({ translateY: value.translateY });
-  if (value.skewX !== void 0) transforms.push({ skewX: value.skewX });
-  if (value.skewY !== void 0) transforms.push({ skewY: value.skewY });
-  return transforms;
-};
-
-// src/components/container/container.tsx
-var buildStyle = (props) => ({
-  ...props.width !== void 0 && { width: props.width },
-  ...props.height !== void 0 && { height: props.height },
-  ...props.minWidth !== void 0 && { minWidth: props.minWidth },
-  ...props.maxWidth !== void 0 && { maxWidth: props.maxWidth },
-  ...props.minHeight !== void 0 && { minHeight: props.minHeight },
-  ...props.maxHeight !== void 0 && { maxHeight: props.maxHeight },
-  ...props.aspectRatio !== void 0 && { aspectRatio: props.aspectRatio },
-  ...props.flex !== void 0 && { flex: props.flex },
-  ...props.color !== void 0 && { backgroundColor: props.color },
-  ...props.clip && { overflow: "hidden" },
-  ...props.opacity !== void 0 && { opacity: props.opacity },
-  ...props.padding !== void 0 && resolveEdgeInsets(props.padding, "padding"),
-  ...props.margin !== void 0 && resolveEdgeInsets(props.margin, "margin"),
-  ...props.alignment !== void 0 && resolveAlignment(props.alignment),
-  ...props.borderRadius !== void 0 && resolveBorderRadius(props.borderRadius),
-  ...props.border !== void 0 && resolveBorder(props.border),
-  ...props.shadow !== void 0 && resolveShadow(props.shadow),
-  ...props.transform !== void 0 && { transform: resolveTransform(props.transform) }
-});
-var Container = (props) => {
-  const {
-    children,
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-    disabled = false,
-    accessibilityLabel,
-    accessibilityRole,
-    accessibilityState,
-    accessible,
-    testID,
-    style
-  } = props;
-  const containerStyle = buildStyle(props);
-  const isInteractive = !!(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(onPress, () => ( onLongPress)), () => ( onPressIn)), () => ( onPressOut)));
-  if (isInteractive) {
-    return /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Pressable,
-      {
-        onPress: disabled ? void 0 : onPress,
-        onLongPress: disabled ? void 0 : onLongPress,
-        onPressIn: disabled ? void 0 : onPressIn,
-        onPressOut: disabled ? void 0 : onPressOut,
-        disabled,
-        accessibilityLabel,
-        accessibilityRole,
-        accessibilityState,
-        accessible,
-        testID,
-        style: [containerStyle, style]
-      },
-      children
-    );
-  }
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      accessibilityLabel,
-      accessibilityRole,
-      accessibilityState,
-      accessible,
-      testID,
-      style: [containerStyle, style]
-    },
-    children
-  );
-};
-Container.displayName = "Container";
-
-
-exports.Container = Container;

package/dist/container/index.d.cts

@@ -1,40 +0,0 @@
-import React, { ReactNode } from 'react';
-import { AccessibilityRole, AccessibilityState, StyleProp, ViewStyle } from 'react-native';
-import { EdgeInsets, Alignment, Border, BorderRadius, ShadowConfig, TransformConfig } from '@xaui/core';
-
-type ContainerProps = {
-    children?: ReactNode;
-    width?: number | `${number}%`;
-    height?: number | `${number}%`;
-    minWidth?: number;
-    maxWidth?: number;
-    minHeight?: number;
-    maxHeight?: number;
-    aspectRatio?: number;
-    flex?: number;
-    padding?: EdgeInsets;
-    margin?: EdgeInsets;
-    alignment?: Alignment;
-    color?: string;
-    border?: Border;
-    borderRadius?: BorderRadius;
-    shadow?: ShadowConfig;
-    clip?: boolean;
-    transform?: TransformConfig;
-    opacity?: number;
-    onPress?: () => void;
-    onLongPress?: () => void;
-    onPressIn?: () => void;
-    onPressOut?: () => void;
-    disabled?: boolean;
-    accessibilityLabel?: string;
-    accessibilityRole?: AccessibilityRole;
-    accessibilityState?: AccessibilityState;
-    accessible?: boolean;
-    testID?: string;
-    style?: StyleProp<ViewStyle>;
-};
-
-declare const Container: React.FC<ContainerProps>;
-
-export { Container, type ContainerProps };

package/dist/container/index.d.ts

@@ -1,40 +0,0 @@
-import React, { ReactNode } from 'react';
-import { AccessibilityRole, AccessibilityState, StyleProp, ViewStyle } from 'react-native';
-import { EdgeInsets, Alignment, Border, BorderRadius, ShadowConfig, TransformConfig } from '@xaui/core';
-
-type ContainerProps = {
-    children?: ReactNode;
-    width?: number | `${number}%`;
-    height?: number | `${number}%`;
-    minWidth?: number;
-    maxWidth?: number;
-    minHeight?: number;
-    maxHeight?: number;
-    aspectRatio?: number;
-    flex?: number;
-    padding?: EdgeInsets;
-    margin?: EdgeInsets;
-    alignment?: Alignment;
-    color?: string;
-    border?: Border;
-    borderRadius?: BorderRadius;
-    shadow?: ShadowConfig;
-    clip?: boolean;
-    transform?: TransformConfig;
-    opacity?: number;
-    onPress?: () => void;
-    onLongPress?: () => void;
-    onPressIn?: () => void;
-    onPressOut?: () => void;
-    disabled?: boolean;
-    accessibilityLabel?: string;
-    accessibilityRole?: AccessibilityRole;
-    accessibilityState?: AccessibilityState;
-    accessible?: boolean;
-    testID?: string;
-    style?: StyleProp<ViewStyle>;
-};
-
-declare const Container: React.FC<ContainerProps>;
-
-export { Container, type ContainerProps };

package/dist/container/index.js

@@ -1,203 +0,0 @@
-// src/components/container/container.tsx
-import React from "react";
-import { View, Pressable } from "react-native";
-
-// src/components/container/container.utils.ts
-var resolveEdgeInsets = (value, prefix) => {
-  if (typeof value === "number") {
-    return prefix === "padding" ? { padding: value } : { margin: value };
-  }
-  const style = {};
-  if (prefix === "padding") {
-    if (value.horizontal !== void 0) style.paddingHorizontal = value.horizontal;
-    if (value.vertical !== void 0) style.paddingVertical = value.vertical;
-    if (value.top !== void 0) style.paddingTop = value.top;
-    if (value.bottom !== void 0) style.paddingBottom = value.bottom;
-    if (value.left !== void 0) style.paddingLeft = value.left;
-    if (value.right !== void 0) style.paddingRight = value.right;
-  } else {
-    if (value.horizontal !== void 0) style.marginHorizontal = value.horizontal;
-    if (value.vertical !== void 0) style.marginVertical = value.vertical;
-    if (value.top !== void 0) style.marginTop = value.top;
-    if (value.bottom !== void 0) style.marginBottom = value.bottom;
-    if (value.left !== void 0) style.marginLeft = value.left;
-    if (value.right !== void 0) style.marginRight = value.right;
-  }
-  return style;
-};
-var ALIGNMENT_MAP = {
-  topLeft: { justifyContent: "flex-start", alignItems: "flex-start" },
-  topCenter: { justifyContent: "flex-start", alignItems: "center" },
-  topRight: { justifyContent: "flex-start", alignItems: "flex-end" },
-  centerLeft: { justifyContent: "center", alignItems: "flex-start" },
-  center: { justifyContent: "center", alignItems: "center" },
-  centerRight: { justifyContent: "center", alignItems: "flex-end" },
-  bottomLeft: { justifyContent: "flex-end", alignItems: "flex-start" },
-  bottomCenter: { justifyContent: "flex-end", alignItems: "center" },
-  bottomRight: { justifyContent: "flex-end", alignItems: "flex-end" }
-};
-var toFlexPosition = (v) => {
-  if (v <= 0) return "flex-start";
-  if (v >= 1) return "flex-end";
-  return "center";
-};
-var resolveAlignment = (value) => {
-  if (typeof value === "object") {
-    return {
-      justifyContent: toFlexPosition(value.y),
-      alignItems: toFlexPosition(value.x)
-    };
-  }
-  return ALIGNMENT_MAP[value] ?? {
-    justifyContent: "flex-start",
-    alignItems: "flex-start"
-  };
-};
-var resolveBorderRadius = (value) => {
-  if (typeof value === "number") {
-    return { borderRadius: value };
-  }
-  const style = {};
-  if (value.topLeft !== void 0) style.borderTopLeftRadius = value.topLeft;
-  if (value.topRight !== void 0) style.borderTopRightRadius = value.topRight;
-  if (value.bottomLeft !== void 0) style.borderBottomLeftRadius = value.bottomLeft;
-  if (value.bottomRight !== void 0)
-    style.borderBottomRightRadius = value.bottomRight;
-  return style;
-};
-var resolveBorderSide = (side, position) => {
-  const style = {};
-  if (position === "") {
-    if (side.width !== void 0) style.borderWidth = side.width;
-    if (side.color !== void 0) style.borderColor = side.color;
-    if (side.style !== void 0) style.borderStyle = side.style;
-    return style;
-  }
-  if (position === "Top") {
-    if (side.width !== void 0) style.borderTopWidth = side.width;
-    if (side.color !== void 0) style.borderTopColor = side.color;
-  } else if (position === "Bottom") {
-    if (side.width !== void 0) style.borderBottomWidth = side.width;
-    if (side.color !== void 0) style.borderBottomColor = side.color;
-  } else if (position === "Left") {
-    if (side.width !== void 0) style.borderLeftWidth = side.width;
-    if (side.color !== void 0) style.borderLeftColor = side.color;
-  } else {
-    if (side.width !== void 0) style.borderRightWidth = side.width;
-    if (side.color !== void 0) style.borderRightColor = side.color;
-  }
-  return style;
-};
-var resolveBorder = (value) => {
-  const dir = value;
-  if (dir.top !== void 0 || dir.bottom !== void 0 || dir.left !== void 0 || dir.right !== void 0) {
-    return {
-      ...dir.top ? resolveBorderSide(dir.top, "Top") : {},
-      ...dir.bottom ? resolveBorderSide(dir.bottom, "Bottom") : {},
-      ...dir.left ? resolveBorderSide(dir.left, "Left") : {},
-      ...dir.right ? resolveBorderSide(dir.right, "Right") : {}
-    };
-  }
-  return resolveBorderSide(value, "");
-};
-var resolveShadow = (value) => ({
-  shadowColor: value.color ?? "#000000",
-  shadowOffset: {
-    width: value.offset?.x ?? 0,
-    height: value.offset?.y ?? 4
-  },
-  shadowOpacity: value.opacity ?? 0.1,
-  shadowRadius: value.blur ?? 4,
-  elevation: value.elevation ?? 2
-});
-var resolveTransform = (value) => {
-  const transforms = [];
-  if (value.rotate !== void 0) transforms.push({ rotate: value.rotate });
-  if (value.rotateX !== void 0) transforms.push({ rotateX: value.rotateX });
-  if (value.rotateY !== void 0) transforms.push({ rotateY: value.rotateY });
-  if (value.scale !== void 0) transforms.push({ scale: value.scale });
-  if (value.scaleX !== void 0) transforms.push({ scaleX: value.scaleX });
-  if (value.scaleY !== void 0) transforms.push({ scaleY: value.scaleY });
-  if (value.translateX !== void 0)
-    transforms.push({ translateX: value.translateX });
-  if (value.translateY !== void 0)
-    transforms.push({ translateY: value.translateY });
-  if (value.skewX !== void 0) transforms.push({ skewX: value.skewX });
-  if (value.skewY !== void 0) transforms.push({ skewY: value.skewY });
-  return transforms;
-};
-
-// src/components/container/container.tsx
-var buildStyle = (props) => ({
-  ...props.width !== void 0 && { width: props.width },
-  ...props.height !== void 0 && { height: props.height },
-  ...props.minWidth !== void 0 && { minWidth: props.minWidth },
-  ...props.maxWidth !== void 0 && { maxWidth: props.maxWidth },
-  ...props.minHeight !== void 0 && { minHeight: props.minHeight },
-  ...props.maxHeight !== void 0 && { maxHeight: props.maxHeight },
-  ...props.aspectRatio !== void 0 && { aspectRatio: props.aspectRatio },
-  ...props.flex !== void 0 && { flex: props.flex },
-  ...props.color !== void 0 && { backgroundColor: props.color },
-  ...props.clip && { overflow: "hidden" },
-  ...props.opacity !== void 0 && { opacity: props.opacity },
-  ...props.padding !== void 0 && resolveEdgeInsets(props.padding, "padding"),
-  ...props.margin !== void 0 && resolveEdgeInsets(props.margin, "margin"),
-  ...props.alignment !== void 0 && resolveAlignment(props.alignment),
-  ...props.borderRadius !== void 0 && resolveBorderRadius(props.borderRadius),
-  ...props.border !== void 0 && resolveBorder(props.border),
-  ...props.shadow !== void 0 && resolveShadow(props.shadow),
-  ...props.transform !== void 0 && { transform: resolveTransform(props.transform) }
-});
-var Container = (props) => {
-  const {
-    children,
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-    disabled = false,
-    accessibilityLabel,
-    accessibilityRole,
-    accessibilityState,
-    accessible,
-    testID,
-    style
-  } = props;
-  const containerStyle = buildStyle(props);
-  const isInteractive = !!(onPress ?? onLongPress ?? onPressIn ?? onPressOut);
-  if (isInteractive) {
-    return /* @__PURE__ */ React.createElement(
-      Pressable,
-      {
-        onPress: disabled ? void 0 : onPress,
-        onLongPress: disabled ? void 0 : onLongPress,
-        onPressIn: disabled ? void 0 : onPressIn,
-        onPressOut: disabled ? void 0 : onPressOut,
-        disabled,
-        accessibilityLabel,
-        accessibilityRole,
-        accessibilityState,
-        accessible,
-        testID,
-        style: [containerStyle, style]
-      },
-      children
-    );
-  }
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      accessibilityLabel,
-      accessibilityRole,
-      accessibilityState,
-      accessible,
-      testID,
-      style: [containerStyle, style]
-    },
-    children
-  );
-};
-Container.displayName = "Container";
-export {
-  Container
-};