blend-native 0.0.1-beta.0

package/lib/commonjs/components/Button/button.utils.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getButtonHeight = getButtonHeight;
+exports.getButtonNativeStyles = getButtonNativeStyles;
+exports.getButtonPadding = getButtonPadding;
+exports.getButtonV2BorderRadius = getButtonV2BorderRadius;
+exports.getIconMaxHeight = getIconMaxHeight;
+exports.getLoaderSize = getLoaderSize;
+exports.getTextColor = getTextColor;
+var _node = require("@juspay/blend-design-system/node");
+var _group = require("../shared/group.js");
+/**
+ * Native ButtonV2 style resolver.
+ *
+ * Reimplements `packages/blend/lib/components/ButtonV2/utils.ts` for RN. Web
+ * builds a `ButtonStylesReturn` carrying `_active` / `_hover` /
+ * `_focusVisible` / `_disabled` pseudo-state maps; RN has no pseudo-selectors,
+ * so this returns the token strings per state and lets `Pressable` compose
+ * them against `{ pressed }`.
+ *
+ * `_hover` and `_focusVisible` have no native counterpart and are dropped.
+ */
+
+/**
+ * Resolve padding tokens per direction.
+ * Mirrors `getButtonPadding` in web `utils.ts`.
+ */
+function getButtonPadding(size, buttonType, subType, tokens) {
+  return {
+    top: String(tokens.padding[_node.PaddingDirection.TOP][size][buttonType][subType]),
+    right: String(tokens.padding[_node.PaddingDirection.RIGHT][size][buttonType][subType]),
+    bottom: String(tokens.padding[_node.PaddingDirection.BOTTOM][size][buttonType][subType]),
+    left: String(tokens.padding[_node.PaddingDirection.LEFT][size][buttonType][subType])
+  };
+}
+
+/**
+ * Resolve the border radius, collapsing joined edges inside a button group.
+ *
+ * Mirrors `getButtonV2BorderRadius` in web `utils.ts`. The collapsing itself
+ * lives in `shared/group` because Tag needs the same algorithm.
+ */
+function getButtonV2BorderRadius(size, buttonType, subType, buttonGroupPosition, tokens) {
+  return (0, _group.getGroupedBorderRadius)(tokens.borderRadius[size][buttonType][subType], buttonGroupPosition);
+}
+
+/**
+ * Resolve the max height for each icon slot.
+ *
+ * Mirrors `getIconMaxHeight` in web `utils.ts`, including both behaviours
+ * that were previously missing on native: the inline subType stretches slots
+ * to `100%`, and a per-slot `maxHeight` overrides the size-derived default.
+ */
+function getIconMaxHeight(subType, leftSlotMaxHeight, rightSlotMaxHeight, defaultMaxHeight) {
+  if (subType === _node.ButtonV2SubType.INLINE) {
+    return {
+      left: '100%',
+      right: '100%'
+    };
+  }
+  return {
+    left: leftSlotMaxHeight ?? defaultMaxHeight,
+    right: rightSlotMaxHeight ?? defaultMaxHeight
+  };
+}
+
+/**
+ * Height override for the inline subType.
+ * Mirrors `getButtonHeight` in web `utils.ts` (`fit-content` → RN `auto`).
+ */
+function getButtonHeight(subType) {
+  return subType === _node.ButtonV2SubType.INLINE ? 'auto' : undefined;
+}
+
+/**
+ * Spinner size for the current button size.
+ *
+ * Web maps these to explicit pixel sizes (16/18/20 for sm/md/lg) so the
+ * loader never overflows a small button; RN's `ActivityIndicator` accepts a
+ * number on both platforms.
+ */
+function getLoaderSize(size) {
+  const loaderSizeMap = {
+    [_node.ButtonV2Size.SMALL]: 16,
+    [_node.ButtonV2Size.MEDIUM]: 18,
+    [_node.ButtonV2Size.LARGE]: 20
+  };
+  return loaderSizeMap[size] ?? 16;
+}
+
+/**
+ * Resolve the text/icon colour for the current state.
+ * Mirrors `getTextColor` in web `utils.ts`.
+ */
+function getTextColor(disabled, state, buttonType, subType, tokens) {
+  const color = tokens.text.color[buttonType][subType][disabled ? _node.ButtonV2State.DISABLED : state];
+  return color ? String(color) : 'transparent';
+}
+
+/**
+ * Compute the full native style set for a button.
+ *
+ * The native equivalent of `getButtonStyles` in web `utils.ts`.
+ */
+function getButtonNativeStyles(isDisabled, buttonType, subType, size, state, tokens, buttonGroupPosition) {
+  const bg = tokens.backgroundColor[buttonType][subType];
+  const borders = tokens.border[buttonType][subType];
+  const shadows = tokens.shadow[buttonType][subType];
+  return {
+    background: String(bg.default),
+    activeBackground: String(bg.active),
+    disabledBackground: String(bg.disabled),
+    border: String(borders.default),
+    activeBorder: String(borders?.active ?? ''),
+    disabledBorder: String(borders?.disabled ?? ''),
+    boxShadow: String(shadows.default),
+    activeBoxShadow: String(shadows?.active ?? 'none'),
+    textColor: getTextColor(isDisabled, state, buttonType, subType, tokens),
+    padding: getButtonPadding(size, buttonType, subType, tokens),
+    gap: String(tokens.gap),
+    groupBorderWidths: (0, _group.getGroupedBorderWidths)(buttonGroupPosition),
+    borderRadius: getButtonV2BorderRadius(size, buttonType, subType, buttonGroupPosition, tokens),
+    height: getButtonHeight(subType)
+  };
+}
+//# sourceMappingURL=button.utils.js.map

package/lib/commonjs/components/Button/button.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_node","require","_group","getButtonPadding","size","buttonType","subType","tokens","top","String","padding","PaddingDirection","TOP","right","RIGHT","bottom","BOTTOM","left","LEFT","getButtonV2BorderRadius","buttonGroupPosition","getGroupedBorderRadius","borderRadius","getIconMaxHeight","leftSlotMaxHeight","rightSlotMaxHeight","defaultMaxHeight","ButtonV2SubType","INLINE","getButtonHeight","undefined","getLoaderSize","loaderSizeMap","ButtonV2Size","SMALL","MEDIUM","LARGE","getTextColor","disabled","state","color","text","ButtonV2State","DISABLED","getButtonNativeStyles","isDisabled","bg","backgroundColor","borders","border","shadows","shadow","background","default","activeBackground","active","disabledBackground","activeBorder","disabledBorder","boxShadow","activeBoxShadow","textColor","gap","groupBorderWidths","getGroupedBorderWidths","height"],"sourceRoot":"../../../../src","sources":["components/Button/button.utils.ts"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "getButtonHeight", {
+  enumerable: true,
+  get: function () {
+    return _buttonUtils.getButtonHeight;
+  }
+});
+Object.defineProperty(exports, "getButtonNativeStyles", {
+  enumerable: true,
+  get: function () {
+    return _buttonUtils.getButtonNativeStyles;
+  }
+});
+Object.defineProperty(exports, "getButtonPadding", {
+  enumerable: true,
+  get: function () {
+    return _buttonUtils.getButtonPadding;
+  }
+});
+Object.defineProperty(exports, "getButtonV2BorderRadius", {
+  enumerable: true,
+  get: function () {
+    return _buttonUtils.getButtonV2BorderRadius;
+  }
+});
+Object.defineProperty(exports, "getIconMaxHeight", {
+  enumerable: true,
+  get: function () {
+    return _buttonUtils.getIconMaxHeight;
+  }
+});
+Object.defineProperty(exports, "getLoaderSize", {
+  enumerable: true,
+  get: function () {
+    return _buttonUtils.getLoaderSize;
+  }
+});
+Object.defineProperty(exports, "getTextColor", {
+  enumerable: true,
+  get: function () {
+    return _buttonUtils.getTextColor;
+  }
+});
+var _Button = _interopRequireDefault(require("./Button.js"));
+var _buttonUtils = require("./button.utils.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Button","_interopRequireDefault","require","_buttonUtils","e","__esModule","default"],"sourceRoot":"../../../../src","sources":["components/Button/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AAQuB,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/commonjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Skeleton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _useNativeTokens = require("../../theme/useNativeTokens.js");
+var _useReduceMotion = require("../../motion/useReduceMotion.js");
+var _optionalGradient = require("../../adapters/optionalGradient.js");
+var _cssStringAdapter = require("../../adapters/cssStringAdapter.js");
+var _skeletonUtils = require("./skeleton.utils.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); }
+/**
+ * Skeleton — React Native implementation of web's `Skeleton`, resolving the
+ * same themed `SKELETON` token slot (base/highlight colours, duration).
+ *
+ * Two usages, matching web:
+ *
+ * - **Block**: `<Skeleton width={120} height={16} />` — a placeholder box.
+ * - **Wrap**: `<Skeleton>{content}</Skeleton>` — the content keeps its
+ *   layout but renders invisible, with the skeleton surface painted over
+ *   it. This is what restores the `skeleton` prop parity on Button and Tag.
+ *
+ * Variants: `pulse` animates opacity between highlight and base; `wave` and
+ * `shimmer` sweep a highlight gradient across the box (requiring the
+ * optional `expo-linear-gradient` — absent, they degrade to pulse; web's
+ * `::after` sweep has no other RN expression). OS reduce-motion renders a
+ * static base-coloured box.
+ *
+ * Hidden from assistive tech: a skeleton is a visual placeholder, and the
+ * owning component announces its loading state (the Button/Alert pattern).
+ */
+const SkeletonImpl = ({
+  variant = 'pulse',
+  shape = 'rectangle',
+  width,
+  height,
+  borderRadius,
+  children,
+  style,
+  testID
+}) => {
+  const tokens = (0, _useNativeTokens.useNativeTokens)('SKELETON');
+  const reduceMotion = (0, _useReduceMotion.useReduceMotion)();
+  const duration = (0, _skeletonUtils.resolveSkeletonDuration)(tokens);
+  const baseColor = String(tokens.colors.base);
+  const highlightColor = String(tokens.colors.highlight);
+  const radius = borderRadius ?? (0, _skeletonUtils.resolveSkeletonRadius)(shape, tokens, width, height);
+
+  // Sweep needs the measured box; pulse does not.
+  const [measuredWidth, setMeasuredWidth] = (0, _react.useState)(0);
+  const onLayout = (0, _react.useCallback)(event => {
+    setMeasuredWidth(event.nativeEvent.layout.width);
+  }, []);
+  const canSweep = (variant === 'wave' || variant === 'shimmer') && _optionalGradient.LinearGradient !== null && !reduceMotion;
+  const pulses = !reduceMotion && !canSweep;
+  const progress = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    if (reduceMotion) {
+      (0, _reactNativeReanimated.cancelAnimation)(progress);
+      progress.value = 0;
+      return;
+    }
+    progress.value = 0;
+    progress.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
+      duration,
+      easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.ease)
+    }), -1,
+    // Pulse breathes in and out; the sweep restarts from the left.
+    !canSweep);
+    return () => (0, _reactNativeReanimated.cancelAnimation)(progress);
+  }, [progress, duration, reduceMotion, canSweep]);
+  const pulseStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: pulses ? 1 - progress.value * 0.5 : 1
+  }), [pulses]);
+  const sweepStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: canSweep ? -measuredWidth + progress.value * 2 * measuredWidth : 0
+    }]
+  }), [canSweep, measuredWidth]);
+  const boxStyle = (0, _react.useMemo)(() => ({
+    backgroundColor: baseColor,
+    borderRadius: radius,
+    overflow: 'hidden',
+    ...(children ? null : {
+      width: (0, _cssStringAdapter.parseSize)(width) ?? undefined,
+      height: (0, _cssStringAdapter.parseSize)(height) ?? undefined
+    })
+  }), [baseColor, radius, children, width, height]);
+  const surface = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    pointerEvents: "none",
+    onLayout: canSweep ? onLayout : undefined,
+    style: [children ? styles.fill : null, boxStyle, pulseStyle],
+    testID: testID ? `${testID}-surface` : undefined,
+    children: canSweep && measuredWidth > 0 && _optionalGradient.LinearGradient ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, sweepStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_optionalGradient.LinearGradient, {
+        colors: [baseColor, highlightColor, baseColor],
+        locations: [0.2, 0.5, 0.8],
+        start: {
+          x: 0,
+          y: 0.5
+        },
+        end: {
+          x: 1,
+          y: 0.5
+        },
+        style: styles.fill
+      })
+    }) : null
+  });
+  if (!children) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: testID,
+      style: style,
+      accessible: false,
+      importantForAccessibility: "no-hide-descendants",
+      accessibilityElementsHidden: true,
+      children: surface
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    style: style,
+    pointerEvents: "none",
+    accessible: false,
+    importantForAccessibility: "no-hide-descendants",
+    accessibilityElementsHidden: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.hiddenContent,
+      children: children
+    }), surface]
+  });
+};
+const Skeleton = exports.Skeleton = /*#__PURE__*/_react.default.memo(SkeletonImpl);
+Skeleton.displayName = 'Skeleton';
+const styles = _reactNative.StyleSheet.create({
+  hiddenContent: {
+    opacity: 0
+  },
+  fill: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  }
+});
+var _default = exports.default = Skeleton;
+//# sourceMappingURL=Skeleton.js.map

package/lib/commonjs/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_useNativeTokens","_useReduceMotion","_optionalGradient","_cssStringAdapter","_skeletonUtils","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SkeletonImpl","variant","shape","width","height","borderRadius","children","style","testID","tokens","useNativeTokens","reduceMotion","useReduceMotion","duration","resolveSkeletonDuration","baseColor","String","colors","base","highlightColor","highlight","radius","resolveSkeletonRadius","measuredWidth","setMeasuredWidth","useState","onLayout","useCallback","event","nativeEvent","layout","canSweep","LinearGradient","pulses","progress","useSharedValue","useEffect","cancelAnimation","value","withRepeat","withTiming","easing","Easing","inOut","ease","pulseStyle","useAnimatedStyle","opacity","sweepStyle","transform","translateX","boxStyle","useMemo","backgroundColor","overflow","parseSize","undefined","surface","jsx","View","pointerEvents","styles","fill","StyleSheet","absoluteFill","locations","start","x","y","end","accessible","importantForAccessibility","accessibilityElementsHidden","jsxs","hiddenContent","Skeleton","exports","React","memo","displayName","create","position","top","right","bottom","left","_default"],"sourceRoot":"../../../../src","sources":["components/Skeleton/Skeleton.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.Skeleton;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+});
+var _Skeleton = _interopRequireWildcard(require("./Skeleton.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

package/lib/commonjs/components/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Skeleton","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sourceRoot":"../../../../src","sources":["components/Skeleton/index.ts"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA8C,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}

package/lib/commonjs/components/Skeleton/skeleton.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=skeleton.types.js.map

package/lib/commonjs/components/Skeleton/skeleton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/Skeleton/skeleton.types.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/components/Skeleton/skeleton.utils.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SKELETON_FALLBACK_DURATION = void 0;
+exports.resolveSkeletonDuration = resolveSkeletonDuration;
+exports.resolveSkeletonRadius = resolveSkeletonRadius;
+var _cssStringAdapter = require("../../adapters/cssStringAdapter.js");
+/**
+ * Pure resolution for the native Skeleton — vitest-testable, worklet-free.
+ */
+
+/** Default when the token duration cannot be parsed. */
+const SKELETON_FALLBACK_DURATION = exports.SKELETON_FALLBACK_DURATION = 1500;
+
+/**
+ * Animation cycle length in milliseconds, from the token's CSS duration
+ * string (`"1.5s"`).
+ */
+function resolveSkeletonDuration(tokens) {
+  return (0, _cssStringAdapter.parseDuration)(tokens.animation.duration) ?? SKELETON_FALLBACK_DURATION;
+}
+
+/**
+ * Border radius for a shape.
+ *
+ * The `circle` token is CSS `"50%"`, which RN cannot express — a circle
+ * needs a numeric radius of half the box. When the box size is unknown
+ * (string sizes, wrap mode) a large radius produces the same pill/circle
+ * silhouette, the same trick web's `radius.full` relies on.
+ */
+function resolveSkeletonRadius(shape, tokens, width, height) {
+  if (shape === 'circle') {
+    const w = typeof width === 'number' ? width : (0, _cssStringAdapter.parseSize)(String(width));
+    const h = typeof height === 'number' ? height : (0, _cssStringAdapter.parseSize)(String(height));
+    if (typeof w === 'number' && typeof h === 'number') {
+      return Math.min(w, h) / 2;
+    }
+    return 9999;
+  }
+  const parsed = (0, _cssStringAdapter.parseBorderRadius)(tokens.borderRadius[shape]);
+  return typeof parsed === 'number' ? parsed : 0;
+}
+//# sourceMappingURL=skeleton.utils.js.map

package/lib/commonjs/components/Skeleton/skeleton.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_cssStringAdapter","require","SKELETON_FALLBACK_DURATION","exports","resolveSkeletonDuration","tokens","parseDuration","animation","duration","resolveSkeletonRadius","shape","width","height","w","parseSize","String","h","Math","min","parsed","parseBorderRadius","borderRadius"],"sourceRoot":"../../../../src","sources":["components/Skeleton/skeleton.utils.ts"],"mappings":";;;;;;;;AAIA,IAAAA,iBAAA,GAAAC,OAAA;AAMA;AACA;AACA;;AAEA;AACO,MAAMC,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,GAAG,IAAI;;AAE9C;AACA;AACA;AACA;AACO,SAASE,uBAAuBA,CAACC,MAA0B,EAAU;EACxE,OACI,IAAAC,+BAAa,EAACD,MAAM,CAACE,SAAS,CAACC,QAA2B,CAAC,IAC3DN,0BAA0B;AAElC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASO,qBAAqBA,CACjCC,KAAoB,EACpBL,MAA0B,EAC1BM,KAAuB,EACvBC,MAAwB,EAClB;EACN,IAAIF,KAAK,KAAK,QAAQ,EAAE;IACpB,MAAMG,CAAC,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG,IAAAG,2BAAS,EAACC,MAAM,CAACJ,KAAK,CAAC,CAAC;IACtE,MAAMK,CAAC,GACH,OAAOJ,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,IAAAE,2BAAS,EAACC,MAAM,CAACH,MAAM,CAAC,CAAC;IACnE,IAAI,OAAOC,CAAC,KAAK,QAAQ,IAAI,OAAOG,CAAC,KAAK,QAAQ,EAAE;MAChD,OAAOC,IAAI,CAACC,GAAG,CAACL,CAAC,EAAEG,CAAC,CAAC,GAAG,CAAC;IAC7B;IACA,OAAO,IAAI;EACf;EACA,MAAMG,MAAM,GAAG,IAAAC,mCAAiB,EAC5Bf,MAAM,CAACgB,YAAY,CAACX,KAAK,CAC7B,CAAC;EACD,OAAO,OAAOS,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,CAAC;AAClD","ignoreList":[]}

package/lib/commonjs/components/Tag/Tag.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _node = require("@juspay/blend-design-system/node");
+var _useNativeTokens = require("../../theme/useNativeTokens.js");
+var _Block = require("../../primitives/Block.js");
+var _Pressable = require("../../primitives/Pressable.js");
+var _Slot = require("../../primitives/Slot.js");
+var _Text = require("../../primitives/Text.js");
+var _tagUtils = require("./tag.utils.js");
+var _group = require("../shared/group.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Layout that never varies with tokens or props.
+ *
+ * Hoisted to module scope so it is allocated once rather than per render.
+ * `alignSelf: 'flex-start'` is RN's equivalent of web's `width: fit-content`
+ * on an inline-flex element — shrink-to-fit inside a column parent.
+ */
+const TAG_LAYOUT = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start'
+};
+
+/**
+ * Tag — React Native implementation of web's `TagV2`.
+ *
+ * Tokens resolve through `useNativeTokens('TAGV2')`, the native counterpart
+ * of web's `useResponsiveTokens('TAGV2')`, so theme and per-slot overrides
+ * come from `BlendNativeProvider` rather than a per-component prop.
+ *
+ * Like web, the rendered element depends on interactivity: web picks
+ * `PrimitiveButton` when `onClick` is supplied and `Block` otherwise; native
+ * picks `Pressable` vs `Block`. Both branches resolve their styles through
+ * the same `resolveSurfaceStyle`, so the two render identically apart from
+ * press feedback.
+ *
+ * TagV2's tokens contain no gradients, shadows, or state matrix, so this
+ * component needs no native module — it is pure JS.
+ */
+const Tag = /*#__PURE__*/(0, _react.forwardRef)(function Tag({
+  text,
+  size = _node.TagV2Size.SM,
+  type = _node.TagV2Type.SUBTLE,
+  subType = _node.TagV2SubType.SQUARICAL,
+  color = _node.TagV2Color.PRIMARY,
+  leftSlot,
+  rightSlot,
+  tagGroupPosition,
+  onPress,
+  pressed,
+  accessibilityLabel,
+  testID,
+  style
+}, ref) {
+  const tokens = (0, _useNativeTokens.useNativeTokens)('TAGV2');
+  const isInteractive = typeof onPress === 'function';
+
+  // Grouped members drop their shared edges so a seam is one line wide.
+  const groupBorderWidths = (0, _react.useMemo)(() => (0, _group.getGroupedBorderWidths)(tagGroupPosition), [tagGroupPosition]);
+  const borderRadius = (0, _react.useMemo)(() => (0, _tagUtils.getTagBorderRadius)(size, subType, tagGroupPosition, tokens), [size, subType, tagGroupPosition, tokens]);
+  const backgroundColor = String(tokens.backgroundColor[type][color]);
+  const border = String(tokens.border[type][color]);
+  const textColor = String(tokens.text.color[type][color]);
+
+  // Slot icons are tinted to match the label. On web this happens
+  // implicitly — `Block`'s `color` becomes CSS `color` and SVGs inherit it
+  // through `currentColor`. RN has no such inheritance, so `Slot` hands the
+  // colour to the icon element explicitly.
+  const accessibleName = accessibilityLabel ?? (0, _tagUtils.getAccessibleName)(text, isInteractive, pressed);
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [leftSlot?.slot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slot.Slot, {
+      color: textColor,
+      maxHeight: leftSlot.maxHeight ?? tokens.leftSlot.maxHeight[size]
+      // Matches web's `aria-hidden` on slots accompanying text:
+      // the label already carries the accessible name.
+      ,
+      hidden: Boolean(text),
+      testID: testID ? `${testID}-left-slot` : undefined,
+      children: leftSlot.slot
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      fontSize: tokens.text.fontSize[size],
+      fontWeight: tokens.text.fontWeight[size],
+      lineHeight: tokens.text.lineHeight[size],
+      color: textColor,
+      children: text
+    }), rightSlot?.slot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slot.Slot, {
+      color: textColor,
+      maxHeight: rightSlot.maxHeight ?? tokens.rightSlot.maxHeight[size],
+      hidden: Boolean(text),
+      testID: testID ? `${testID}-right-slot` : undefined,
+      children: rightSlot.slot
+    }) : null]
+  });
+  const surface = (0, _react.useMemo)(() => ({
+    ...TAG_LAYOUT,
+    backgroundColor,
+    border,
+    borderRadius,
+    // The height token is applied as `minHeight`, not `height`.
+    //
+    // At the default font scale the result is identical to web: the
+    // line height is shorter than the token height, so the box renders
+    // at exactly `minHeight` with the line centred. But RN respects OS
+    // font scaling (Dynamic Type), and a fixed `height` clips scaled
+    // text — the package policy is to let controls grow instead
+    // (see `primitives/Text.tsx`).
+    //
+    // Vertical padding is still deliberately NOT applied. The tokens
+    // define both a height and vertical padding, and the padding
+    // leaves a content box shorter than the text's own line height
+    // (sm: 14px box vs 18px line). On web that is harmless — the line
+    // box overflows the padding box and `overflow: visible` shows it.
+    // RN clips instead: descenders ("p" in primary, "g" in warning)
+    // were sheared off on iOS while react-native-web rendered fine.
+    // With a centred single line the padding is visually inert on web
+    // anyway, so dropping it reproduces web's result exactly.
+    minHeight: tokens.height[size],
+    paddingLeft: tokens.padding.left[size],
+    paddingRight: tokens.padding.right[size],
+    gap: tokens.gap
+  }), [backgroundColor, border, borderRadius, tokens, size]);
+  if (isInteractive) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.Pressable, {
+      ref: ref,
+      ...surface,
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibleName,
+      accessibilityState: (0, _tagUtils.getTagAccessibilityState)(true, pressed),
+      testID: testID,
+      style: {
+        ...groupBorderWidths,
+        ...style
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Block.Block, {
+    ref: ref,
+    ...surface,
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    style: {
+      ...groupBorderWidths,
+      ...style
+    },
+    children: content
+  });
+});
+Tag.displayName = 'Tag';
+var _default = exports.default = Tag;
+//# sourceMappingURL=Tag.js.map

package/lib/commonjs/components/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_node","_useNativeTokens","_Block","_Pressable","_Slot","_Text","_tagUtils","_group","_jsxRuntime","TAG_LAYOUT","flexDirection","alignItems","justifyContent","alignSelf","Tag","forwardRef","text","size","TagV2Size","SM","type","TagV2Type","SUBTLE","subType","TagV2SubType","SQUARICAL","color","TagV2Color","PRIMARY","leftSlot","rightSlot","tagGroupPosition","onPress","pressed","accessibilityLabel","testID","style","ref","tokens","useNativeTokens","isInteractive","groupBorderWidths","useMemo","getGroupedBorderWidths","borderRadius","getTagBorderRadius","backgroundColor","String","border","textColor","accessibleName","getAccessibleName","content","jsxs","Fragment","children","slot","jsx","Slot","maxHeight","hidden","Boolean","undefined","Text","fontSize","fontWeight","lineHeight","surface","minHeight","height","paddingLeft","padding","left","paddingRight","right","gap","Pressable","accessibilityRole","accessibilityState","getTagAccessibilityState","Block","accessible","displayName","_default","exports","default"],"sourceRoot":"../../../../src","sources":["components/Tag/Tag.tsx"],"mappings":"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","ignoreList":[]}