blend-native 0.0.1-beta.0 → 0.0.1-beta.2

package/lib/module/components/Card/Card.js

@@ -0,0 +1,210 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { CardV2Orientation, CardV2Padding, CardV2Variant } from '@juspay/blend-design-system/node';
+import { useNativeTokens } from "../../theme/useNativeTokens.js";
+import { parseBorder, parseDimension } from "../../adapters/cssStringAdapter.js";
+import Block from "../../primitives/Block.js";
+import Pressable from "../../primitives/Pressable.js";
+import Text from "../../primitives/Text.js";
+import { Skeleton } from "../Skeleton/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Card — the native port of web's `CardV2` (props API + slots).
+ *
+ * One surface object feeds `Block` or `Pressable` depending on `onPress`
+ * (the Tag pattern), with `selected` swapping in the selected border and
+ * shadow tokens. Ghost cards default to `padding: none`, web parity.
+ */
+const Card = /*#__PURE__*/forwardRef(function Card({
+  variant = CardV2Variant.OUTLINED,
+  orientation = CardV2Orientation.VERTICAL,
+  padding,
+  eyebrow,
+  title,
+  truncateTitle = false,
+  subtitle,
+  description,
+  media,
+  leadingSlot,
+  trailingSlot,
+  actions,
+  footer,
+  centered = false,
+  onPress,
+  selected = false,
+  skeleton,
+  width,
+  minWidth,
+  maxWidth,
+  minHeight,
+  children,
+  accessibilityLabel,
+  testID,
+  style
+}, ref) {
+  const tokens = useNativeTokens('CARDV2');
+  const resolvedPadding = padding ?? (variant === CardV2Variant.GHOST ? CardV2Padding.NONE : CardV2Padding.COMFORTABLE);
+  const pad = tokens.padding[resolvedPadding];
+  const padX = parseDimension(pad.x) ?? 0;
+  const padY = parseDimension(pad.y) ?? 0;
+  const surface = {
+    backgroundColor: String(tokens.backgroundColor[variant]),
+    border: String(selected ? tokens.state.selected.border : tokens.border[variant]),
+    borderRadius: tokens.borderRadius,
+    boxShadow: String(selected ? tokens.state.selected.boxShadow : tokens.boxShadow[variant]),
+    paddingTop: padY,
+    paddingBottom: padY,
+    paddingLeft: padX,
+    paddingRight: padX,
+    width: width ?? tokens.width,
+    minWidth: minWidth ?? tokens.minWidth,
+    maxWidth: maxWidth ?? tokens.maxWidth,
+    minHeight,
+    gap: parseDimension(tokens.layout.gap) ?? 12,
+    alignItems: centered ? 'center' : undefined
+  };
+  const header = (eyebrow || title || subtitle || leadingSlot || trailingSlot) && /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: parseDimension(tokens.header.gap) ?? 8,
+      alignSelf: 'stretch',
+      justifyContent: centered ? 'center' : 'flex-start'
+    },
+    children: [leadingSlot, /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexShrink: 1,
+        flexGrow: 1,
+        alignItems: centered ? 'center' : 'flex-start'
+      },
+      children: [eyebrow ? /*#__PURE__*/_jsx(TokenText, {
+        t: tokens.header.eyebrow,
+        text: eyebrow
+      }) : null, title ? /*#__PURE__*/_jsx(TokenText, {
+        t: tokens.header.title,
+        text: title,
+        numberOfLines: truncateTitle ? 1 : undefined
+      }) : null, subtitle ? /*#__PURE__*/_jsx(TokenText, {
+        t: tokens.header.subtitle,
+        text: subtitle
+      }) : null]
+    }), trailingSlot]
+  });
+  const body = (description || children) && /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: parseDimension(tokens.body.gap) ?? 8,
+      alignSelf: 'stretch',
+      alignItems: centered ? 'center' : 'flex-start'
+    },
+    children: [description ? /*#__PURE__*/_jsx(TokenText, {
+      t: tokens.body.description,
+      text: description
+    }) : null, children]
+  });
+  const horizontal = orientation === CardV2Orientation.HORIZONTAL;
+  const mediaGap = parseDimension(tokens.layout.mediaGap[horizontal ? 'horizontal' : 'vertical']) ?? 12;
+  const inner = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [header, body, actions ? /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignSelf: 'stretch',
+        gap: parseDimension(tokens.actions.gap) ?? 8,
+        justifyContent: centered ? 'center' : 'flex-start'
+      },
+      children: actions
+    }) : null, footer ? /*#__PURE__*/_jsx(View, {
+      style: {
+        alignSelf: 'stretch',
+        gap: parseDimension(tokens.footer.gap) ?? 8,
+        paddingTop: parseDimension(tokens.footer.paddingTop) ?? 8,
+        borderTopWidth: parseBorder(String(tokens.footer.borderTop)).borderWidth,
+        borderTopColor: parseBorder(String(tokens.footer.borderTop)).borderColor
+      },
+      children: footer
+    }) : null]
+  });
+  const content = !media ? inner : horizontal ? /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      gap: mediaGap,
+      alignSelf: 'stretch'
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      children: media
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        flexShrink: 1,
+        flexGrow: 1,
+        gap: 12
+      },
+      children: inner
+    })]
+  }) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        alignSelf: 'stretch'
+      },
+      children: media
+    }), inner]
+  });
+  if (skeleton?.show) {
+    return /*#__PURE__*/_jsx(Skeleton, {
+      variant: skeleton.variant,
+      shape: "rounded",
+      testID: testID,
+      children: /*#__PURE__*/_jsx(Block, {
+        ...surface,
+        children: content
+      })
+    });
+  }
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      ref: ref,
+      ...surface,
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityState: {
+        selected
+      },
+      testID: testID,
+      style: style,
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          alignSelf: 'stretch',
+          gap: surface.gap
+        },
+        children: content
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Block, {
+    ref: ref,
+    ...surface,
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    style: style,
+    children: content
+  });
+});
+function TokenText({
+  t,
+  text,
+  numberOfLines
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    fontSize: t.fontSize,
+    fontWeight: t.fontWeight,
+    lineHeight: t.lineHeight,
+    color: String(t.color),
+    numberOfLines: numberOfLines,
+    children: text
+  });
+}
+Card.displayName = 'Card';
+export default Card;
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","View","CardV2Orientation","CardV2Padding","CardV2Variant","useNativeTokens","parseBorder","parseDimension","Block","Pressable","Text","Skeleton","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Card","variant","OUTLINED","orientation","VERTICAL","padding","eyebrow","title","truncateTitle","subtitle","description","media","leadingSlot","trailingSlot","actions","footer","centered","onPress","selected","skeleton","width","minWidth","maxWidth","minHeight","children","accessibilityLabel","testID","style","ref","tokens","resolvedPadding","GHOST","NONE","COMFORTABLE","pad","padX","x","padY","y","surface","backgroundColor","String","border","state","borderRadius","boxShadow","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","layout","alignItems","undefined","header","flexDirection","alignSelf","justifyContent","flexShrink","flexGrow","TokenText","t","text","numberOfLines","body","horizontal","HORIZONTAL","mediaGap","inner","flexWrap","borderTopWidth","borderTop","borderWidth","borderTopColor","borderColor","content","show","shape","accessibilityRole","accessibilityState","fontSize","fontWeight","lineHeight","color","displayName"],"sourceRoot":"../../../../src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Card/card.types.js

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

package/lib/module/components/Card/card.types.js.map

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

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

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

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

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