@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/Chip/Chip.js

@@ -0,0 +1,272 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Chip = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _usePressAnimation = require("../../hooks/usePressAnimation.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const toneFor = (theme, tone) => {
+  switch (tone) {
+    case 'primary':
+      return {
+        base: theme.colors.primaryMuted,
+        on: theme.colors.primary,
+        border: theme.colors.primary,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+    case 'success':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.success,
+        border: theme.colors.success,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+    case 'warning':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.warning,
+        border: theme.colors.warning,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+    case 'error':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.error,
+        border: theme.colors.error,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+    case 'info':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.info,
+        border: theme.colors.info,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+    case 'neutral':
+    default:
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.text.primary,
+        border: theme.colors.border.primary,
+        selectedBg: theme.colors.primaryMuted,
+        selectedOn: theme.colors.primary,
+        selectedBorder: theme.colors.primary
+      };
+  }
+};
+const sizeMap = {
+  sm: {
+    paddingH: 10,
+    paddingV: 4,
+    fontSize: 12,
+    minHeight: 26,
+    closeSize: 16,
+    closeFont: 12,
+    gap: 6
+  },
+  md: {
+    paddingH: 12,
+    paddingV: 6,
+    fontSize: 13,
+    minHeight: 32,
+    closeSize: 18,
+    closeFont: 13,
+    gap: 8
+  }
+};
+const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    label,
+    selected = false,
+    onPress,
+    onClose,
+    leftIcon,
+    variant = 'filled',
+    tone = 'neutral',
+    size = 'md',
+    disabled = false,
+    accessibilityLabel,
+    style,
+    textStyle,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const isPressable = !!onPress && !disabled;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = (0, _usePressAnimation.usePressAnimation)({
+    enabled: isPressable
+  });
+  const tones = (0, _react.useMemo)(() => toneFor(theme, tone), [theme, tone]);
+  const sz = sizeMap[size];
+  const isFilled = variant === 'filled';
+  const backgroundColor = (() => {
+    if (selected) return isFilled ? tones.selectedBg : 'transparent';
+    if (isFilled) return tones.base;
+    return 'transparent';
+  })();
+  const borderColor = (() => {
+    if (selected) return tones.selectedBorder;
+    if (!isFilled) return tones.border;
+    return 'transparent';
+  })();
+  const textColor = (() => {
+    if (disabled) return theme.colors.text.disabled;
+    if (selected) return tones.selectedOn;
+    return tones.on;
+  })();
+  const borderWidth = isFilled ? selected ? 0 : 0 : 1;
+  const handlePress = () => {
+    if (!isPressable) return;
+    (0, _hapticUtils.triggerHaptic)('selection');
+    onPress?.();
+  };
+  const handleClose = () => {
+    if (disabled) return;
+    (0, _hapticUtils.triggerHaptic)('impactLight');
+    onClose?.();
+  };
+  const a11yLabel = accessibilityLabel ?? label;
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.row,
+    children: [leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        marginRight: sz.gap
+      },
+      children: leftIcon
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label, {
+        color: textColor,
+        fontSize: sz.fontSize,
+        fontWeight: theme.typography.fontWeight.medium
+      }, textStyle],
+      numberOfLines: 1,
+      children: label
+    }), onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: handleClose,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: `Remove ${label}`,
+      accessibilityState: {
+        disabled
+      },
+      hitSlop: 6,
+      style: ({
+        pressed
+      }) => [styles.close, {
+        width: sz.closeSize,
+        height: sz.closeSize,
+        borderRadius: sz.closeSize / 2,
+        marginLeft: sz.gap,
+        backgroundColor: pressed ? theme.colors.surface.pressed : theme.colors.surface.hovered
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          color: textColor,
+          fontSize: sz.closeFont,
+          fontWeight: theme.typography.fontWeight.bold,
+          lineHeight: sz.closeFont + 2
+        },
+        allowFontScaling: false,
+        children: '×'
+      })
+    }) : null]
+  });
+  const baseStyle = {
+    paddingHorizontal: sz.paddingH,
+    paddingVertical: sz.paddingV,
+    minHeight: sz.minHeight,
+    borderRadius: theme.radius.full,
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    opacity: disabled ? 0.55 : 1
+  };
+  if (isPressable) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: {
+        transform: [{
+          scale
+        }],
+        alignSelf: 'flex-start'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        ref: ref,
+        onPress: handlePress,
+        onPressIn: pressIn,
+        onPressOut: pressOut,
+        disabled: !isPressable,
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: {
+          selected,
+          disabled
+        },
+        android_ripple: {
+          color: theme.colors.surface.pressed,
+          borderless: false
+        },
+        testID: testID,
+        style: ({
+          pressed
+        }) => [styles.base, baseStyle, pressed && !isFilled ? {
+          backgroundColor: theme.colors.surface.pressed
+        } : null, style],
+        children: content
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    style: [styles.base, baseStyle, style],
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: a11yLabel,
+    accessibilityState: {
+      selected,
+      disabled
+    },
+    testID: testID,
+    children: content
+  });
+});
+Chip.displayName = 'Chip';
+const styles = _reactNative.StyleSheet.create({
+  base: {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  label: {
+    textAlign: 'center'
+  },
+  close: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = Chip;
+//# sourceMappingURL=Chip.js.map

package/lib/commonjs/components/Chip/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Chip", {
+  enumerable: true,
+  get: function () {
+    return _Chip.Chip;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Chip.default;
+  }
+});
+var _Chip = _interopRequireWildcard(require("./Chip.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map