jfs-components 0.0.78 → 0.0.79

package/lib/module/components/Slot/Slot.js

@@ -0,0 +1,68 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Slot — a token-driven layout container for grouped slot content.
+ *
+ * Use `Slot` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Slot layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Slot>
+ * </ActionFooter>
+ * ```
+ */
+function Slot({
+  children,
+  layoutDirection = 'vertical',
+  alignCrossAxis,
+  justifyMainAxis,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const {
+    containerStyle,
+    processedChildren
+  } = useMemo(() => {
+    const gap = getVariableByName('slot/gap', modes) ?? 8;
+    const isHorizontal = layoutDirection === 'horizontal';
+    const container = {
+      flexDirection: isHorizontal ? 'row' : 'column',
+      alignItems: alignCrossAxis ?? (isHorizontal ? 'flex-start' : 'stretch'),
+      justifyContent: justifyMainAxis ?? (isHorizontal ? 'center' : undefined),
+      alignSelf: 'stretch',
+      gap
+    };
+    const processed = children ? cloneChildrenWithModes(children, modes) : null;
+    return {
+      containerStyle: container,
+      processedChildren: processed
+    };
+  }, [children, modes, layoutDirection, alignCrossAxis, justifyMainAxis]);
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    ...rest,
+    children: processedChildren
+  });
+}
+export default /*#__PURE__*/React.memo(Slot);

package/lib/module/components/index.js

@@ -2,6 +2,7 @@
 
 export { default as AccountCard } from './AccountCard/AccountCard';
 export { default as ActionFooter } from './ActionFooter/ActionFooter';
+export { default as Attached } from './Attached/Attached';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
@@ -64,6 +65,7 @@ export { default as Numpad } from './Numpad/Numpad';
 export { default as Title } from './Title/Title';
 export { default as Screen } from './Screen/Screen';
 export { default as Section } from './Section/Section';
+export { default as Slot } from './Slot/Slot';
 export { default as Stepper } from './Stepper/Stepper';
 export { Step } from './Stepper/Step';
 export { StepLabel } from './Stepper/StepLabel';
@@ -111,6 +113,7 @@ export { default as AmountInput } from './AmountInput/AmountInput';
 export { default as PageHero } from './PageHero/PageHero';
 export { default as Popup } from './Popup/Popup';
 export { default as PortfolioHero } from './PortfolioHero/PortfolioHero';
+export { default as PlanComparisonCard } from './PlanComparisonCard/PlanComparisonCard';
 export { default as PoweredByLabel } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel } from './ProductLabel/ProductLabel';
 export { default as ProductOverview } from './ProductOverview/ProductOverview';