jfs-components 0.0.6 → 0.0.7

package/src/components/VStack/VStack.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { View, StyleProp, ViewStyle, ViewProps } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
+
+export interface VStackProps extends ViewProps {
+    /**
+     * The content to display inside the stack.
+     */
+    children?: React.ReactNode;
+    /**
+     * Alignment of children along the cross axis (horizontal for VStack).
+     * Maps to alignItems.
+     */
+    alignHorizontal?: ViewStyle['alignItems'];
+    /**
+     * Justification of children along the main axis (vertical for VStack).
+     * Maps to justifyContent.
+     */
+    justifyVertical?: ViewStyle['justifyContent'];
+    /**
+     * Controls whether children can wrap.
+     * Maps to flexWrap.
+     */
+    wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+    /**
+     * If true, reverses the direction of the stack (column-reverse).
+     */
+    reverse?: boolean;
+    /**
+     * Prop for web semantics, often mapped to HTML tags.
+     */
+    as?: any;
+    /**
+     * Modes object to override default variable values.
+     */
+    modes?: Record<string, any>;
+}
+
+/**
+ * VStack component for vertical layout using design token spacing.
+ */
+export const VStack = ({
+    children,
+    alignHorizontal,
+    justifyVertical,
+    wrap,
+    reverse = false,
+    as,
+    modes: propModes = {},
+    style,
+    ...rest
+}: VStackProps) => {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
+    const paddingTop = getVariableByName('vstack/padding/top', modes)
+    const paddingBottom = getVariableByName('vstack/padding/bottom', modes)
+    const paddingLeft = getVariableByName('vstack/padding/left', modes)
+    const paddingRight = getVariableByName('vstack/padding/right', modes)
+    const gap = getVariableByName('vstack/gap', modes)
+
+    const flexWrap = typeof wrap === 'boolean' ? (wrap ? 'wrap' : 'nowrap') : wrap
+
+    const containerStyle: ViewStyle = {
+        flexDirection: reverse ? 'column-reverse' : 'column',
+        alignItems: alignHorizontal,
+        justifyContent: justifyVertical,
+        flexWrap,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        gap,
+    }
+
+    // Pass modes down to children
+    const processedChildren = children
+        ? cloneChildrenWithModes(children, modes)
+        : null
+
+    // "as" prop handling for web - passed via rest if supported by the underlying view implementation on web,
+    // or manually added here. Since View from react-native doesn't formally support "as" in types,
+    // we rely on it being passed through or handled by the web layer if applicable.
+    // For type safety with standard RN View, we might cast props if needed, but passing ...rest usually works for extra props.
+    // We explicitly include 'as' in the props passed to View.
+    const viewProps = {
+        ...rest,
+        as,
+    }
+
+    return (
+        <View style={[containerStyle, style]} {...viewProps}>
+            {processedChildren}
+        </View>
+    )
+}
+
+export default VStack

package/src/components/index.ts

@@ -13,6 +13,7 @@ export { default as Divider, type DividerProps, type DividerDirection } from './
 export { default as Drawer } from './Drawer/Drawer';
 export { default as CtaCard } from './CtaCard/CtaCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
+export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as LazyList } from './LazyList/LazyList';
@@ -34,3 +35,6 @@ export { default as TransactionBubble } from './TransactionBubble/TransactionBub
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
 export { default as UpiHandle } from './UpiHandle/UpiHandle';
+export { default as VStack, type VStackProps } from './VStack/VStack';
+export { default as ChipGroup, type ChipGroupProps } from './ChipGroup/ChipGroup';
+export { default as EmptyState, type EmptyStateProps } from './EmptyState/EmptyState';