blend-native 0.0.1-beta.0

package/lib/module/components/Tag/Tag.js

@@ -0,0 +1,157 @@
+"use strict";
+
+import { forwardRef, useMemo } from 'react';
+import { TagV2Color, TagV2Size, TagV2SubType, TagV2Type } from '@juspay/blend-design-system/node';
+import { useNativeTokens } from "../../theme/useNativeTokens.js";
+import { Block } from "../../primitives/Block.js";
+import { Pressable } from "../../primitives/Pressable.js";
+import { Slot } from "../../primitives/Slot.js";
+import { Text } from "../../primitives/Text.js";
+import { getAccessibleName, getTagBorderRadius, getTagAccessibilityState } from "./tag.utils.js";
+import { getGroupedBorderWidths } from "../shared/group.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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__*/forwardRef(function Tag({
+  text,
+  size = TagV2Size.SM,
+  type = TagV2Type.SUBTLE,
+  subType = TagV2SubType.SQUARICAL,
+  color = TagV2Color.PRIMARY,
+  leftSlot,
+  rightSlot,
+  tagGroupPosition,
+  onPress,
+  pressed,
+  accessibilityLabel,
+  testID,
+  style
+}, ref) {
+  const tokens = useNativeTokens('TAGV2');
+  const isInteractive = typeof onPress === 'function';
+
+  // Grouped members drop their shared edges so a seam is one line wide.
+  const groupBorderWidths = useMemo(() => getGroupedBorderWidths(tagGroupPosition), [tagGroupPosition]);
+  const borderRadius = useMemo(() => 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 ?? getAccessibleName(text, isInteractive, pressed);
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leftSlot?.slot ? /*#__PURE__*/_jsx(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__*/_jsx(Text, {
+      fontSize: tokens.text.fontSize[size],
+      fontWeight: tokens.text.fontWeight[size],
+      lineHeight: tokens.text.lineHeight[size],
+      color: textColor,
+      children: text
+    }), rightSlot?.slot ? /*#__PURE__*/_jsx(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 = 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__*/_jsx(Pressable, {
+      ref: ref,
+      ...surface,
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibleName,
+      accessibilityState: getTagAccessibilityState(true, pressed),
+      testID: testID,
+      style: {
+        ...groupBorderWidths,
+        ...style
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(Block, {
+    ref: ref,
+    ...surface,
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    style: {
+      ...groupBorderWidths,
+      ...style
+    },
+    children: content
+  });
+});
+Tag.displayName = 'Tag';
+export default Tag;
+//# sourceMappingURL=Tag.js.map

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

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

package/lib/module/components/Tag/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as Tag } from "./Tag.js";
+export { getTagBorderRadius, getAccessibleName, getTagAccessibilityState } from "./tag.utils.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","Tag","getTagBorderRadius","getAccessibleName","getTagAccessibilityState"],"sourceRoot":"../../../../src","sources":["components/Tag/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,GAAG,QAAQ,UAAO;AAEtC,SACIC,kBAAkB,EAClBC,iBAAiB,EACjBC,wBAAwB,QACrB,gBAAa","ignoreList":[]}

package/lib/module/components/Tag/tag.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=tag.types.js.map

package/lib/module/components/Tag/tag.types.js.map

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

package/lib/module/components/Tag/tag.utils.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import { getGroupedBorderRadius } from "../shared/group.js";
+
+/**
+ * Native Tag style helpers.
+ *
+ * Ported from `packages/blend/lib/components/TagV2/utils.ts`. Both functions
+ * below are pure string/logic helpers with no DOM dependency, so they are
+ * reproduced verbatim in behaviour — keeping web and native visually and
+ * semantically identical is the whole point.
+ *
+ * Web's third helper, `createKeyboardHandler` (Enter/Space → click), has no
+ * native counterpart: RN's `Pressable` handles activation itself, including
+ * for switch-control and keyboard users.
+ */
+
+/**
+ * Resolve the border radius for a tag, collapsing the joined edges when the
+ * tag sits inside a group.
+ *
+ * Mirrors `getTagBorderRadius` in web `utils.ts`. The collapsing itself lives
+ * in `shared/group` because Button needs exactly the same algorithm.
+ */
+export function getTagBorderRadius(size, subType, tagGroupPosition, tokens) {
+  return getGroupedBorderRadius(tokens.borderRadius[size][subType], tagGroupPosition);
+}
+
+/**
+ * Build the accessible name for a tag.
+ *
+ * Mirrors `getAccessibleName` in web `utils.ts`: non-interactive tags get no
+ * explicit name (the text content is announced instead), and interactive
+ * tags fold their toggle state into the label.
+ */
+export function getAccessibleName(text, isInteractive, pressed) {
+  if (!isInteractive) {
+    return undefined;
+  }
+  let accessibleName = text;
+  if (pressed !== undefined) {
+    if (pressed === true) {
+      accessibleName = `${text}, pressed`;
+    } else if (pressed === 'mixed') {
+      accessibleName = `${text}, mixed state`;
+    }
+  }
+  return accessibleName;
+}
+
+/**
+ * Resolve the accessibility state for a tag.
+ *
+ * `'mixed'` has no RN equivalent — RN's `selected` is a boolean — so it is
+ * reported as unselected and carried in the accessible name instead, which
+ * is what `getAccessibleName` already appends.
+ */
+export function getTagAccessibilityState(isInteractive, pressed) {
+  if (!isInteractive || pressed === undefined) return undefined;
+  return {
+    selected: pressed === true
+  };
+}
+//# sourceMappingURL=tag.utils.js.map

package/lib/module/components/Tag/tag.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getGroupedBorderRadius","getTagBorderRadius","size","subType","tagGroupPosition","tokens","borderRadius","getAccessibleName","text","isInteractive","pressed","undefined","accessibleName","getTagAccessibilityState","selected"],"sourceRoot":"../../../../src","sources":["components/Tag/tag.utils.ts"],"mappings":";;AAKA,SAASA,sBAAsB,QAA4B,oBAAiB;;AAE5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAC9BC,IAAe,EACfC,OAAqB,EACrBC,gBAA2C,EAC3CC,MAAuB,EACjB;EACN,OAAOL,sBAAsB,CACzBK,MAAM,CAACC,YAAY,CAACJ,IAAI,CAAC,CAACC,OAAO,CAAC,EAClCC,gBACJ,CAAC;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,iBAAiBA,CAC7BC,IAAY,EACZC,aAAsB,EACtBC,OAAsC,EACpB;EAClB,IAAI,CAACD,aAAa,EAAE;IAChB,OAAOE,SAAS;EACpB;EAEA,IAAIC,cAAc,GAAGJ,IAAI;EAEzB,IAAIE,OAAO,KAAKC,SAAS,EAAE;IACvB,IAAID,OAAO,KAAK,IAAI,EAAE;MAClBE,cAAc,GAAG,GAAGJ,IAAI,WAAW;IACvC,CAAC,MAAM,IAAIE,OAAO,KAAK,OAAO,EAAE;MAC5BE,cAAc,GAAG,GAAGJ,IAAI,eAAe;IAC3C;EACJ;EAEA,OAAOI,cAAc;AACzB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,wBAAwBA,CACpCJ,aAAsB,EACtBC,OAAsC,EACL;EACjC,IAAI,CAACD,aAAa,IAAIC,OAAO,KAAKC,SAAS,EAAE,OAAOA,SAAS;EAC7D,OAAO;IAAEG,QAAQ,EAAEJ,OAAO,KAAK;EAAK,CAAC;AACzC","ignoreList":[]}

package/lib/module/components/TextInput/TextInput.js

@@ -0,0 +1,134 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { InputSizeV2 } from '@juspay/blend-design-system/node';
+import { useNativeTokens } from "../../theme/useNativeTokens.js";
+import { Block } from "../../primitives/Block.js";
+import { PrimitiveInput } from "../../primitives/PrimitiveInput.js";
+import { Slot } from "../../primitives/Slot.js";
+import { FieldLabels } from "../shared/field/FieldLabels.js";
+import { FieldFooter } from "../shared/field/FieldFooter.js";
+import { getFieldState, getFieldVisualState } from "../shared/field/fieldState.js";
+import { getTextInputNativeStyles } from "./textInput.utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TextInput — React Native implementation of web's `TextInputV2`, and the
+ * reference consumer of the shared field chrome (`FieldLabels`,
+ * `FieldFooter`, `PrimitiveInput`) the rest of the InputsV2 family will
+ * reuse.
+ *
+ * Anatomy matches web: a column of label row, bordered field row (left
+ * slot / input / right slot), and footer — all resolved from the
+ * `TEXT_INPUTV2` token slot. Focus is component state re-resolving the
+ * container against the FOCUS tokens, replacing web's `_focus` pseudo
+ * object; the spread-only focus ring has no RN equivalent and is dropped.
+ */
+const TextInput = /*#__PURE__*/forwardRef(function TextInput({
+  value,
+  onChangeText,
+  label,
+  subLabel,
+  size = InputSizeV2.SM,
+  error,
+  hintText,
+  required = false,
+  disabled = false,
+  leftSlot,
+  rightSlot,
+  testID,
+  accessibilityLabel,
+  style,
+  inputRef,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
+  const tokens = useNativeTokens('TEXT_INPUTV2');
+  const [focused, setFocused] = useState(false);
+
+  // Labels/footer track error+disabled; the container also tracks focus.
+  const fieldState = getFieldState(error, disabled);
+  const visualState = getFieldVisualState(error, disabled, focused);
+  const styles = useMemo(() => getTextInputNativeStyles(tokens, size, visualState), [tokens, size, visualState]);
+
+  // Event types come from RN's own prop signatures — they changed shape
+  // across RN versions (FocusEvent/BlurEvent), so deriving keeps us
+  // correct on every supported peer.
+  const handleFocus = useCallback(event => {
+    setFocused(true);
+    onFocus?.(event);
+  }, [onFocus]);
+  const handleBlur = useCallback(event => {
+    setFocused(false);
+    onBlur?.(event);
+  }, [onBlur]);
+  return /*#__PURE__*/_jsxs(Block, {
+    ref: ref,
+    gap: styles.gap,
+    style: style,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(FieldLabels, {
+      label: label,
+      sublabel: subLabel,
+      required: required,
+      size: size,
+      state: fieldState,
+      tokens: tokens.topContainer,
+      testID: testID ? `${testID}-labels` : undefined
+    }), /*#__PURE__*/_jsxs(Block, {
+      flexDirection: "row",
+      alignItems: "center",
+      width: "100%",
+      testID: testID ? `${testID}-container` : undefined,
+      border: styles.container.border,
+      backgroundColor: styles.container.backgroundColor,
+      borderRadius: styles.container.borderRadius,
+      gap: styles.container.gap,
+      paddingTop: styles.container.paddingTop,
+      paddingRight: styles.container.paddingRight,
+      paddingBottom: styles.container.paddingBottom,
+      paddingLeft: styles.container.paddingLeft,
+      children: [leftSlot?.slot ? /*#__PURE__*/_jsx(Slot, {
+        maxHeight: leftSlot.maxHeight
+        // Decorative next to the labelled input, matching
+        // web's aria-hidden on input slots.
+        ,
+        hidden: true,
+        testID: testID ? `${testID}-left-slot` : undefined,
+        children: leftSlot.slot
+      }) : null, /*#__PURE__*/_jsx(PrimitiveInput, {
+        ref: inputRef,
+        value: value,
+        onChangeText: onChangeText,
+        editable: !disabled,
+        fontSize: styles.text.fontSize,
+        fontWeight: styles.text.fontWeight,
+        lineHeight: styles.text.lineHeight,
+        color: styles.text.color,
+        placeholderColor: styles.placeholderColor,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityState: {
+          disabled
+        },
+        testID: testID ? `${testID}-input` : undefined,
+        ...rest
+      }), rightSlot?.slot ? /*#__PURE__*/_jsx(Slot, {
+        maxHeight: rightSlot.maxHeight,
+        hidden: true,
+        testID: testID ? `${testID}-right-slot` : undefined,
+        children: rightSlot.slot
+      }) : null]
+    }), /*#__PURE__*/_jsx(FieldFooter, {
+      error: error,
+      hintText: hintText,
+      size: size,
+      tokens: tokens.bottomContainer,
+      testID: testID ? `${testID}-footer` : undefined
+    })]
+  });
+});
+TextInput.displayName = 'TextInput';
+export default TextInput;
+//# sourceMappingURL=TextInput.js.map

package/lib/module/components/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","useState","InputSizeV2","useNativeTokens","Block","PrimitiveInput","Slot","FieldLabels","FieldFooter","getFieldState","getFieldVisualState","getTextInputNativeStyles","jsx","_jsx","jsxs","_jsxs","TextInput","value","onChangeText","label","subLabel","size","SM","error","hintText","required","disabled","leftSlot","rightSlot","testID","accessibilityLabel","style","inputRef","onFocus","onBlur","rest","ref","tokens","focused","setFocused","fieldState","visualState","styles","handleFocus","event","handleBlur","gap","children","sublabel","state","topContainer","undefined","flexDirection","alignItems","width","border","container","backgroundColor","borderRadius","paddingTop","paddingRight","paddingBottom","paddingLeft","slot","maxHeight","hidden","editable","fontSize","text","fontWeight","lineHeight","color","placeholderColor","accessibilityState","bottomContainer","displayName"],"sourceRoot":"../../../../src","sources":["components/TextInput/TextInput.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/TextInput/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as TextInput } from "./TextInput.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/TextInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","TextInput"],"sourceRoot":"../../../../src","sources":["components/TextInput/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,SAAS,QAAQ,gBAAa","ignoreList":[]}

package/lib/module/components/TextInput/textInput.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=textInput.types.js.map

package/lib/module/components/TextInput/textInput.types.js.map

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

package/lib/module/components/TextInput/textInput.utils.js

@@ -0,0 +1,36 @@
+"use strict";
+
+/**
+ * Native TextInputV2 style resolver.
+ *
+ * Reimplements the inline resolution `TextInputV2.tsx` performs for RN. Web
+ * expresses hover/focus through styled-components pseudo-state objects; on
+ * native the field re-resolves against the current visual state (focus
+ * tracked in component state), so this returns plain token strings for one
+ * state at a time — the pattern `getButtonNativeStyles` set.
+ */
+
+export function getTextInputNativeStyles(tokens, size, visualState) {
+  const container = tokens.inputContainer;
+  return {
+    gap: String(tokens.gap),
+    container: {
+      border: String(container.border[visualState]),
+      backgroundColor: String(container.backgroundColor[visualState]),
+      borderRadius: String(container.borderRadius[size]),
+      gap: String(container.gap),
+      paddingTop: String(container.padding.top[size]),
+      paddingRight: String(container.padding.right[size]),
+      paddingBottom: String(container.padding.bottom[size]),
+      paddingLeft: String(container.padding.left[size])
+    },
+    text: {
+      fontSize: String(container.inputText.fontSize[size]),
+      fontWeight: String(container.inputText.fontWeight[size]),
+      lineHeight: String(container.inputText.lineHeight[size]),
+      color: String(container.inputText.color[visualState])
+    },
+    placeholderColor: String(container.placeholder.color[visualState])
+  };
+}
+//# sourceMappingURL=textInput.utils.js.map

package/lib/module/components/TextInput/textInput.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getTextInputNativeStyles","tokens","size","visualState","container","inputContainer","gap","String","border","backgroundColor","borderRadius","paddingTop","padding","top","paddingRight","right","paddingBottom","bottom","paddingLeft","left","text","fontSize","inputText","fontWeight","lineHeight","color","placeholderColor","placeholder"],"sourceRoot":"../../../../src","sources":["components/TextInput/textInput.utils.ts"],"mappings":";;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AA0BA,OAAO,SAASA,wBAAwBA,CACpCC,MAA6B,EAC7BC,IAAiB,EACjBC,WAAyB,EACJ;EACrB,MAAMC,SAAS,GAAGH,MAAM,CAACI,cAAc;EAEvC,OAAO;IACHC,GAAG,EAAEC,MAAM,CAACN,MAAM,CAACK,GAAG,CAAC;IACvBF,SAAS,EAAE;MACPI,MAAM,EAAED,MAAM,CAACH,SAAS,CAACI,MAAM,CAACL,WAAW,CAAC,CAAC;MAC7CM,eAAe,EAAEF,MAAM,CAACH,SAAS,CAACK,eAAe,CAACN,WAAW,CAAC,CAAC;MAC/DO,YAAY,EAAEH,MAAM,CAACH,SAAS,CAACM,YAAY,CAACR,IAAI,CAAC,CAAC;MAClDI,GAAG,EAAEC,MAAM,CAACH,SAAS,CAACE,GAAG,CAAC;MAC1BK,UAAU,EAAEJ,MAAM,CAACH,SAAS,CAACQ,OAAO,CAACC,GAAG,CAACX,IAAI,CAAC,CAAC;MAC/CY,YAAY,EAAEP,MAAM,CAACH,SAAS,CAACQ,OAAO,CAACG,KAAK,CAACb,IAAI,CAAC,CAAC;MACnDc,aAAa,EAAET,MAAM,CAACH,SAAS,CAACQ,OAAO,CAACK,MAAM,CAACf,IAAI,CAAC,CAAC;MACrDgB,WAAW,EAAEX,MAAM,CAACH,SAAS,CAACQ,OAAO,CAACO,IAAI,CAACjB,IAAI,CAAC;IACpD,CAAC;IACDkB,IAAI,EAAE;MACFC,QAAQ,EAAEd,MAAM,CAACH,SAAS,CAACkB,SAAS,CAACD,QAAQ,CAACnB,IAAI,CAAC,CAAC;MACpDqB,UAAU,EAAEhB,MAAM,CAACH,SAAS,CAACkB,SAAS,CAACC,UAAU,CAACrB,IAAI,CAAC,CAAC;MACxDsB,UAAU,EAAEjB,MAAM,CAACH,SAAS,CAACkB,SAAS,CAACE,UAAU,CAACtB,IAAI,CAAC,CAAC;MACxDuB,KAAK,EAAElB,MAAM,CAACH,SAAS,CAACkB,SAAS,CAACG,KAAK,CAACtB,WAAW,CAAC;IACxD,CAAC;IACDuB,gBAAgB,EAAEnB,MAAM,CAACH,SAAS,CAACuB,WAAW,CAACF,KAAK,CAACtB,WAAW,CAAC;EACrE,CAAC;AACL","ignoreList":[]}

package/lib/module/components/shared/field/FieldFooter.js

@@ -0,0 +1,47 @@
+"use strict";
+
+import { InputSizeV2 } from '@juspay/blend-design-system/node';
+import { Block } from "../../../primitives/Block.js";
+import { Text } from "../../../primitives/Text.js";
+import { useLiveRegionAnnounce } from "../../../a11y/useLiveRegion.js";
+
+/**
+ * Footer under a field: the error message when erroring, else the hint.
+ *
+ * Ports web's `InputFooterV2` against the same `bottomContainer` token
+ * shape. Web marks the error `role="alert"` + `aria-live="polite"`; the
+ * native split is the Alert pattern — `accessibilityLiveRegion` for
+ * Android, an imperative announcement for iOS.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldFooter({
+  error,
+  hintText,
+  size = InputSizeV2.SM,
+  tokens,
+  testID
+}) {
+  const showError = Boolean(error?.show && error.message);
+  useLiveRegionAnnounce(showError ? error?.message : undefined, showError);
+  if (!showError && !hintText) return null;
+  return /*#__PURE__*/_jsx(Block, {
+    width: "100%",
+    testID: testID,
+    children: showError ? /*#__PURE__*/_jsx(Text, {
+      accessibilityLiveRegion: "polite",
+      color: String(tokens.errorMessage.color),
+      fontSize: tokens.errorMessage.fontSize[size],
+      fontWeight: tokens.errorMessage.fontWeight[size],
+      lineHeight: tokens.errorMessage.lineHeight[size],
+      children: error?.message
+    }) : /*#__PURE__*/_jsx(Text, {
+      color: String(tokens.hintText.color.default),
+      fontSize: tokens.hintText.fontSize[size],
+      fontWeight: tokens.hintText.fontWeight[size],
+      lineHeight: tokens.hintText.lineHeight[size],
+      children: hintText
+    })
+  });
+}
+FieldFooter.displayName = 'FieldFooter';
+//# sourceMappingURL=FieldFooter.js.map

package/lib/module/components/shared/field/FieldFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["InputSizeV2","Block","Text","useLiveRegionAnnounce","jsx","_jsx","FieldFooter","error","hintText","size","SM","tokens","testID","showError","Boolean","show","message","undefined","width","children","accessibilityLiveRegion","color","String","errorMessage","fontSize","fontWeight","lineHeight","default","displayName"],"sourceRoot":"../../../../../src","sources":["components/shared/field/FieldFooter.tsx"],"mappings":";;AAAA,SACIA,WAAW,QAER,kCAAkC;AACzC,SAASC,KAAK,QAAQ,8BAA2B;AACjD,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,qBAAqB,QAAQ,gCAA6B;;AAGnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,SAAAC,GAAA,IAAAC,IAAA;AAiBA,OAAO,SAASC,WAAWA,CAAC;EACxBC,KAAK;EACLC,QAAQ;EACRC,IAAI,GAAGT,WAAW,CAACU,EAAE;EACrBC,MAAM;EACNC;AACc,CAAC,EAAE;EACjB,MAAMC,SAAS,GAAGC,OAAO,CAACP,KAAK,EAAEQ,IAAI,IAAIR,KAAK,CAACS,OAAO,CAAC;EAEvDb,qBAAqB,CAACU,SAAS,GAAGN,KAAK,EAAES,OAAO,GAAGC,SAAS,EAAEJ,SAAS,CAAC;EAExE,IAAI,CAACA,SAAS,IAAI,CAACL,QAAQ,EAAE,OAAO,IAAI;EAExC,oBACIH,IAAA,CAACJ,KAAK;IAACiB,KAAK,EAAC,MAAM;IAACN,MAAM,EAAEA,MAAO;IAAAO,QAAA,EAC9BN,SAAS,gBACNR,IAAA,CAACH,IAAI;MACDkB,uBAAuB,EAAC,QAAQ;MAChCC,KAAK,EAAEC,MAAM,CAACX,MAAM,CAACY,YAAY,CAACF,KAAK,CAAE;MACzCG,QAAQ,EAAEb,MAAM,CAACY,YAAY,CAACC,QAAQ,CAACf,IAAI,CAAE;MAC7CgB,UAAU,EAAEd,MAAM,CAACY,YAAY,CAACE,UAAU,CAAChB,IAAI,CAAE;MACjDiB,UAAU,EAAEf,MAAM,CAACY,YAAY,CAACG,UAAU,CAACjB,IAAI,CAAE;MAAAU,QAAA,EAEhDZ,KAAK,EAAES;IAAO,CACb,CAAC,gBAEPX,IAAA,CAACH,IAAI;MACDmB,KAAK,EAAEC,MAAM,CAACX,MAAM,CAACH,QAAQ,CAACa,KAAK,CAACM,OAAO,CAAE;MAC7CH,QAAQ,EAAEb,MAAM,CAACH,QAAQ,CAACgB,QAAQ,CAACf,IAAI,CAAE;MACzCgB,UAAU,EAAEd,MAAM,CAACH,QAAQ,CAACiB,UAAU,CAAChB,IAAI,CAAE;MAC7CiB,UAAU,EAAEf,MAAM,CAACH,QAAQ,CAACkB,UAAU,CAACjB,IAAI,CAAE;MAAAU,QAAA,EAE5CX;IAAQ,CACP;EACT,CACE,CAAC;AAEhB;AAEAF,WAAW,CAACsB,WAAW,GAAG,aAAa","ignoreList":[]}

package/lib/module/components/shared/field/FieldLabels.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import { InputSizeV2, InputStateV2 } from '@juspay/blend-design-system/node';
+import { Block } from "../../../primitives/Block.js";
+import { Text } from "../../../primitives/Text.js";
+
+/**
+ * Label row above a field: label, required marker, sublabel.
+ *
+ * Ports web's `InputLabelsV2` against the same `topContainer` token shape,
+ * with two deliberate omissions:
+ *
+ * - `helpIconText` — web wraps a help icon in `Tooltip`; native has no
+ *   tooltip yet, so the prop does not exist rather than silently doing
+ *   nothing (the `skeleton` precedent).
+ * - `as="label"`/`htmlFor` — no DOM. The field component instead puts the
+ *   label text into the input's `accessibilityLabel`.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FieldLabels({
+  label,
+  sublabel,
+  required = false,
+  size = InputSizeV2.SM,
+  state = InputStateV2.DEFAULT,
+  tokens,
+  testID
+}) {
+  if (!label) return null;
+  return /*#__PURE__*/_jsxs(Block, {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    width: "100%",
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Text, {
+      fontWeight: tokens.label.fontWeight[size],
+      fontSize: tokens.label.fontSize[size],
+      color: String(tokens.label.color[state]),
+      lineHeight: tokens.label.lineHeight[size],
+      children: label
+    }), required ?
+    /*#__PURE__*/
+    // Web renders <sup aria-hidden>*</sup>; the accessible
+    // "required" semantics live on the input's a11y props, so
+    // the marker stays visual-only here too.
+    _jsx(Text, {
+      color: String(tokens.required.color),
+      fontSize: tokens.label.fontSize[size],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: "*"
+    }) : null, sublabel ? /*#__PURE__*/_jsxs(Text, {
+      fontWeight: tokens.subLabel.fontWeight[size],
+      fontSize: tokens.subLabel.fontSize[size],
+      color: String(tokens.subLabel.color[state]),
+      lineHeight: tokens.subLabel.lineHeight[size],
+      children: ["(", sublabel, ")"]
+    }) : null]
+  });
+}
+FieldLabels.displayName = 'FieldLabels';
+//# sourceMappingURL=FieldLabels.js.map

package/lib/module/components/shared/field/FieldLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["InputSizeV2","InputStateV2","Block","Text","jsx","_jsx","jsxs","_jsxs","FieldLabels","label","sublabel","required","size","SM","state","DEFAULT","tokens","testID","flexDirection","alignItems","gap","width","children","fontWeight","fontSize","color","String","lineHeight","accessibilityElementsHidden","importantForAccessibility","subLabel","displayName"],"sourceRoot":"../../../../../src","sources":["components/shared/field/FieldLabels.tsx"],"mappings":";;AAAA,SACIA,WAAW,EACXC,YAAY,QAET,kCAAkC;AACzC,SAASC,KAAK,QAAQ,8BAA2B;AACjD,SAASC,IAAI,QAAQ,6BAA0B;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAXA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAuBA,OAAO,SAASC,WAAWA,CAAC;EACxBC,KAAK;EACLC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,IAAI,GAAGZ,WAAW,CAACa,EAAE;EACrBC,KAAK,GAAGb,YAAY,CAACc,OAAO;EAC5BC,MAAM;EACNC;AACc,CAAC,EAAE;EACjB,IAAI,CAACR,KAAK,EAAE,OAAO,IAAI;EAEvB,oBACIF,KAAA,CAACL,KAAK;IACFgB,aAAa,EAAC,KAAK;IACnBC,UAAU,EAAC,QAAQ;IACnBC,GAAG,EAAE,CAAE;IACPC,KAAK,EAAC,MAAM;IACZJ,MAAM,EAAEA,MAAO;IAAAK,QAAA,gBAEfjB,IAAA,CAACF,IAAI;MACDoB,UAAU,EAAEP,MAAM,CAACP,KAAK,CAACc,UAAU,CAACX,IAAI,CAAE;MAC1CY,QAAQ,EAAER,MAAM,CAACP,KAAK,CAACe,QAAQ,CAACZ,IAAI,CAAE;MACtCa,KAAK,EAAEC,MAAM,CAACV,MAAM,CAACP,KAAK,CAACgB,KAAK,CAACX,KAAK,CAAC,CAAE;MACzCa,UAAU,EAAEX,MAAM,CAACP,KAAK,CAACkB,UAAU,CAACf,IAAI,CAAE;MAAAU,QAAA,EAEzCb;IAAK,CACJ,CAAC,EACNE,QAAQ;IAAA;IACL;IACA;IACA;IACAN,IAAA,CAACF,IAAI;MACDsB,KAAK,EAAEC,MAAM,CAACV,MAAM,CAACL,QAAQ,CAACc,KAAK,CAAE;MACrCD,QAAQ,EAAER,MAAM,CAACP,KAAK,CAACe,QAAQ,CAACZ,IAAI,CAAE;MACtCgB,2BAA2B;MAC3BC,yBAAyB,EAAC,qBAAqB;MAAAP,QAAA,EAClD;IAED,CAAM,CAAC,GACP,IAAI,EACPZ,QAAQ,gBACLH,KAAA,CAACJ,IAAI;MACDoB,UAAU,EAAEP,MAAM,CAACc,QAAQ,CAACP,UAAU,CAACX,IAAI,CAAE;MAC7CY,QAAQ,EAAER,MAAM,CAACc,QAAQ,CAACN,QAAQ,CAACZ,IAAI,CAAE;MACzCa,KAAK,EAAEC,MAAM,CAACV,MAAM,CAACc,QAAQ,CAACL,KAAK,CAACX,KAAK,CAAC,CAAE;MAC5Ca,UAAU,EAAEX,MAAM,CAACc,QAAQ,CAACH,UAAU,CAACf,IAAI,CAAE;MAAAU,QAAA,GAChD,GACI,EAACZ,QAAQ,EAAC,GACf;IAAA,CAAM,CAAC,GACP,IAAI;EAAA,CACL,CAAC;AAEhB;AAEAF,WAAW,CAACuB,WAAW,GAAG,aAAa","ignoreList":[]}

package/lib/module/components/shared/field/fieldState.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import { InputStateV2 } from '@juspay/blend-design-system/node';
+
+/**
+ * Input state derivation, shared by every field component.
+ *
+ * Mirrors web's `getInputState` (`InputsV2/TextInputV2/utils.ts`) and the
+ * per-variant resolution `TextInputV2.tsx` performs inline: error always
+ * wins, then disabled, and focus applies only when nothing stronger does.
+ * `HOVER` exists in the enum but has no touch counterpart.
+ *
+ * Pure and RN-free so the whole truth table unit-tests under vitest.
+ */
+
+/** The state driving label/footer colours — web's `getInputState`. */
+export function getFieldState(error, disabled) {
+  if (error?.show) return InputStateV2.ERROR;
+  if (disabled) return InputStateV2.DISABLED;
+  return InputStateV2.DEFAULT;
+}
+
+/**
+ * The state driving the input container's border/background/text, which
+ * unlike the label state also reflects focus.
+ */
+export function getFieldVisualState(error, disabled, focused) {
+  if (error?.show) return InputStateV2.ERROR;
+  if (disabled) return InputStateV2.DISABLED;
+  if (focused) return InputStateV2.FOCUS;
+  return InputStateV2.DEFAULT;
+}
+//# sourceMappingURL=fieldState.js.map

package/lib/module/components/shared/field/fieldState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["InputStateV2","getFieldState","error","disabled","show","ERROR","DISABLED","DEFAULT","getFieldVisualState","focused","FOCUS"],"sourceRoot":"../../../../../src","sources":["components/shared/field/fieldState.ts"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,kCAAkC;;AAE/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA;AACA,OAAO,SAASC,aAAaA,CACzBC,KAAiB,EACjBC,QAAkB,EACN;EACZ,IAAID,KAAK,EAAEE,IAAI,EAAE,OAAOJ,YAAY,CAACK,KAAK;EAC1C,IAAIF,QAAQ,EAAE,OAAOH,YAAY,CAACM,QAAQ;EAC1C,OAAON,YAAY,CAACO,OAAO;AAC/B;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAC/BN,KAAiB,EACjBC,QAA6B,EAC7BM,OAAgB,EACJ;EACZ,IAAIP,KAAK,EAAEE,IAAI,EAAE,OAAOJ,YAAY,CAACK,KAAK;EAC1C,IAAIF,QAAQ,EAAE,OAAOH,YAAY,CAACM,QAAQ;EAC1C,IAAIG,OAAO,EAAE,OAAOT,YAAY,CAACU,KAAK;EACtC,OAAOV,YAAY,CAACO,OAAO;AAC/B","ignoreList":[]}