jfs-components 0.0.6 → 0.0.7

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeSvg","_interopRequireWildcard","_figmaVariablesResolver","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NavArrow","direction","modes","style","accessibilityLabel","rest","iconColor","getVariableByName","iconWidth","Number","iconHeight","strokeWeight","containerWidth","containerHeight","borderRadius","backgroundColor","containerStyle","width","height","alignItems","justifyContent","defaultAccessibilityLabel","chevronPath","jsx","View","accessibilityRole","children","viewBox","transform","scaleX","undefined","Path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","fill","_default","exports"],"sourceRoot":"../../../../src","sources":["components/NavArrow/NavArrow.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeSvg","_interopRequireWildcard","_figmaVariablesResolver","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NavArrow","direction","modes","style","accessibilityLabel","rest","iconColor","getVariableByName","iconWidth","Number","iconHeight","strokeWeight","baseContainerWidth","baseContainerHeight","borderRadius","backgroundColor","isDown","containerStyle","width","height","alignItems","justifyContent","defaultAccessibilityLabel","svgWidth","svgHeight","chevronPath","transform","scaleX","jsx","View","accessibilityRole","children","viewBox","undefined","Path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","fill","_default","exports"],"sourceRoot":"../../../../src","sources":["components/NavArrow/NavArrow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/NavArrow/NavArrow.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as NavArrowStories from './NavArrow.stories';
 import NavArrow from './NavArrow';
 
@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** Light | Dark
 - **Default:** Light
 
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+
 ### Context2
 - **Modes:** Default | AppBar
 - **Default:** Default

package/lib/commonjs/components/PageTitle/PageTitle.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as PageTitleStories from './PageTitle.stories';
 import PageTitle from './PageTitle';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/commonjs/components/Screen/Screen.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Screen = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Helper function to recursively clone children and pass modes prop to components that accept it.
+ * This ensures that all child components in slots receive the modes prop from the parent.
+ */
+
+/**
+ * Screen component that acts as the outer most container providing the background color.
+ * Matches Figma node 201:49.
+ */
+const Screen = ({
+  children,
+  modes: propModes = {},
+  style
+}) => {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('screen/body/background', modes);
+  const containerStyle = {
+    flex: 1,
+    backgroundColor,
+    width: '100%',
+    height: '100%'
+  };
+
+  // Pass modes down to children
+  const processedChildren = children ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    "data-node-id": "201:49",
+    children: processedChildren
+  });
+};
+exports.Screen = Screen;
+var _default = exports.default = Screen;
+//# sourceMappingURL=Screen.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_reactUtils","_jsxRuntime","e","__esModule","default","Screen","children","modes","propModes","style","globalModes","useTokens","backgroundColor","getVariableByName","containerStyle","flex","width","height","processedChildren","cloneChildrenWithModes","React","Children","toArray","jsx","View","exports","_default"],"sourceRoot":"../../../../src","sources":["components/Screen/Screen.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAMA,IAAAI,WAAA,GAAAJ,OAAA;AAAgE,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAJhE;AACA;AACA;AACA;;AAkBA;AACA;AACA;AACA;AACO,MAAMG,MAAM,GAAGA,CAAC;EACnBC,QAAQ;EACRC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC;AACS,CAAC,KAAK;EACf,MAAM;IAAEF,KAAK,EAAEG;EAAY,CAAC,GAAG,IAAAC,2BAAS,EAAC,CAAC;EAC1C,MAAMJ,KAAK,GAAG;IAAE,GAAGG,WAAW;IAAE,GAAGF;EAAU,CAAC;EAE9C,MAAMI,eAAe,GAAG,IAAAC,yCAAiB,EAAC,wBAAwB,EAAEN,KAAK,CAAC;EAE1E,MAAMO,cAAyB,GAAG;IAC9BC,IAAI,EAAE,CAAC;IACPH,eAAe;IACfI,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACZ,CAAC;;EAED;EACA,MAAMC,iBAAiB,GAAGZ,QAAQ,GAC5B,IAAAa,kCAAsB,EAACC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAAChB,QAAQ,CAAC,EAAEC,KAAK,CAAC,GAC/D,IAAI;EAEV,oBACI,IAAAN,WAAA,CAAAsB,GAAA,EAAC1B,YAAA,CAAA2B,IAAI;IAACf,KAAK,EAAE,CAACK,cAAc,EAAEL,KAAK,CAAE;IAAC,gBAAa,QAAQ;IAAAH,QAAA,EACtDY;EAAiB,CAChB,CAAC;AAEf,CAAC;AAAAO,OAAA,CAAApB,MAAA,GAAAA,MAAA;AAAA,IAAAqB,QAAA,GAAAD,OAAA,CAAArB,OAAA,GAEcC,MAAM","ignoreList":[]}

package/lib/commonjs/components/Screen/Screen.mdx

@@ -0,0 +1,58 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as ScreenStories from './Screen.stories';
+import Screen from './Screen';
+
+<Meta of={ScreenStories} />
+
+# Screen
+
+The `Screen` component acts as the outer most container for a page, providing the correct background color based on the current mode.
+
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Page type
+- **Modes:** MainPage | SubPage
+- **Default:** MainPage
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
+
+```tsx
+import Screen from 'jfs-components/src/components/Screen/Screen';
+
+function MyPage(props) {
+  return (
+    <Screen modes={props.modes}>
+      {/* Content goes here */}
+    </Screen>
+  );
+}
+```
+
+## Props
+
+<Controls />
+
+## Examples
+
+### Default
+
+<Canvas of={ScreenStories.Default} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`screen/body/background`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/Section/Section.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _webPlatformUtils = require("../../utils/web-platform-utils");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -250,32 +251,9 @@ function SectionBento({
     gap
   };
 
-  // Helper function to clone children with modes (same as in Section component)
-  const cloneChildrenWithModes = (children, modes) => {
-    const result = _react.default.Children.map(children, child => {
-      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-        return child;
-      }
-      const childChildren = child.props?.children;
-      const hasChildren = childChildren !== undefined && childChildren !== null;
-      const existingModes = child.props?.modes;
-      // Merge order: parent modes first, then child's explicit modes override them
-      const mergedModes = existingModes ? {
-        ...modes,
-        ...existingModes
-      } : modes;
-      const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes) : undefined;
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        ...child.props,
-        modes: mergedModes
-      }, processedChildren);
-    });
-    return result || [];
-  };
-
   // Process slots to pass modes to children
-  const processedNavSlot = navSlot ? cloneChildrenWithModes(_react.default.Children.toArray(navSlot), modes) : null;
-  const processedUpiSlot = upiSlot ? cloneChildrenWithModes(_react.default.Children.toArray(upiSlot), modes) : null;
+  const processedNavSlot = navSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(navSlot), modes) : null;
+  const processedUpiSlot = upiSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(upiSlot), modes) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     accessibilityRole: 'region',

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_Icon","_interopRequireDefault","_webPlatformUtils","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Section","title","supportText","showSupportText","slot","modes","onPress","style","accessibilityLabel","accessibilityHint","webAccessibilityProps","rest","isHeaderFocused","setIsHeaderFocused","useState","isHeaderHovered","setIsHeaderHovered","isHeaderPressed","setIsHeaderPressed","headerFocusStyle","borderColor","borderWidth","headerHoverStyle","opacity","headerPressedStyle","backgroundColor","getVariableByName","gap","paddingHorizontal","paddingVertical","radius","headerGap","headerPaddingHorizontal","headerPaddingVertical","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","supportTextColor","supportTextFontSize","supportTextLineHeight","supportTextFontFamily","supportTextFontWeightRaw","supportTextFontWeight","containerStyle","borderRadius","headerStyle","headerWrapStyle","flexDirection","alignItems","justifyContent","titleStyle","flex","color","fontSize","lineHeight","fontFamily","fontWeight","supportTextStyle","defaultAccessibilityLabel","webProps","usePressableWebSupport","restProps","disabled","headerContent","jsxs","Fragment","children","View","jsx","Text","numberOfLines","accessibilityElementsHidden","importantForAccessibility","name","size","accessibilityRole","Pressable","onPressIn","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","SectionBento","navSlot","upiSlot","cloneChildrenWithModes","result","React","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","processedNavSlot","processedUpiSlot","Bento","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Section/Section.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_Icon","_interopRequireDefault","_webPlatformUtils","_reactUtils","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Section","title","supportText","showSupportText","slot","modes","onPress","style","accessibilityLabel","accessibilityHint","webAccessibilityProps","rest","isHeaderFocused","setIsHeaderFocused","useState","isHeaderHovered","setIsHeaderHovered","isHeaderPressed","setIsHeaderPressed","headerFocusStyle","borderColor","borderWidth","headerHoverStyle","opacity","headerPressedStyle","backgroundColor","getVariableByName","gap","paddingHorizontal","paddingVertical","radius","headerGap","headerPaddingHorizontal","headerPaddingVertical","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","supportTextColor","supportTextFontSize","supportTextLineHeight","supportTextFontFamily","supportTextFontWeightRaw","supportTextFontWeight","containerStyle","borderRadius","headerStyle","headerWrapStyle","flexDirection","alignItems","justifyContent","titleStyle","flex","color","fontSize","lineHeight","fontFamily","fontWeight","supportTextStyle","defaultAccessibilityLabel","webProps","usePressableWebSupport","restProps","disabled","headerContent","jsxs","Fragment","children","View","jsx","Text","numberOfLines","accessibilityElementsHidden","importantForAccessibility","name","size","accessibilityRole","Pressable","onPressIn","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","SectionBento","navSlot","upiSlot","processedNavSlot","cloneChildrenWithModes","React","Children","toArray","processedUpiSlot","Bento","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Section/Section.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Section/Section.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as SectionStories from './Section.stories';
 import Section from './Section';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -17,6 +17,10 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** Light | Dark
 - **Default:** Light
 
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+
 ### Padding
 - **Modes:** Default | None
 - **Default:** Default

package/lib/commonjs/components/Stepper/Step.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as StepStories from './Step.stories';
 import { Step } from './Step';
 
@@ -19,6 +19,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/commonjs/components/Stepper/StepLabel.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as StepLabelStories from './StepLabel.stories';
 import { StepLabel } from './StepLabel';
 
@@ -15,6 +15,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/commonjs/components/Stepper/Stepper.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as StepperStories from './Stepper.stories';
 import Stepper from './Stepper';
 

package/lib/commonjs/components/SupportText/SupportText.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _SupportTextIcon = _interopRequireDefault(require("./SupportTextIcon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * SupportText component displaying a status icon and label.
+ */
+function SupportText({
+  label = 'Support Text',
+  status = 'Neutral',
+  iconSlot,
+  textSlot,
+  modes: propModes = {},
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+
+  // Merge modes. We might want to inject the status mode here if we knew the collection name.
+  // For now, we rely on the parent passing the correct mode or the status prop driving logic outside tokens if needed (but tokens are preferred).
+  // Strategy: We pass 'modes' as is. If the user wants "Success" styling (green), they should likely pass modes={{ 'SupportText': 'Success' }} AND status="Success".
+  // However, for convenience, we could eventually map status to modes if we determine the key.
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+
+  // --- Token Resolution ---
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/gap', modes), 10) || 4;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('supportText/foreground', modes) || '#0c0d10';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontFamily', modes) || 'JioType Var';
+  const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/fontSize', modes), 10) || 12;
+  const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/lineHeight', modes), 10) || 16;
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontWeight', modes) || '500';
+
+  // --- Styles ---
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: gap
+  };
+  const textStyle = {
+    color: textColor,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight: fontWeight,
+    flexShrink: 1 // Ensure text wraps if needed
+  };
+  const renderSlot = slot => {
+    if (/*#__PURE__*/_react.default.isValidElement(slot)) {
+      return /*#__PURE__*/_react.default.cloneElement(slot, {
+        modes: {
+          ...modes,
+          ...slot.props.modes
+        }
+      });
+    }
+    return slot;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [iconSlot ? renderSlot(iconSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportTextIcon.default, {
+      status: status,
+      modes: modes
+    }), textSlot ? renderSlot(textSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: textStyle,
+      children: label
+    })]
+  });
+}
+var _default = exports.default = SupportText;
+//# sourceMappingURL=SupportText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_SupportTextIcon","_jsxRuntime","e","__esModule","default","SupportText","label","status","iconSlot","textSlot","modes","propModes","style","globalModes","useTokens","gap","parseInt","getVariableByName","textColor","fontFamily","fontSize","lineHeight","fontWeight","containerStyle","flexDirection","alignItems","textStyle","color","flexShrink","renderSlot","slot","React","isValidElement","cloneElement","props","jsxs","View","children","jsx","Text","_default","exports"],"sourceRoot":"../../../../src","sources":["components/SupportText/SupportText.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/SupportText/SupportText.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as SupportTextStories from './SupportText.stories';
+import SupportText from './SupportText';
+
+<Meta of={SupportTextStories} />
+
+# SupportText
+
+A component for displaying status messages with icons.
+
+<Canvas>
+  <Story of={SupportTextStories.Default} />
+</Canvas>
+
+## Props
+
+<Controls />
+
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Status
+- **Modes:** Neutral | Warning | Error | Success
+- **Default:** Neutral
+## Usage
+
+```tsx
+import { SupportText } from 'jfs-components';
+
+<SupportText status="Success" label="Operation successful" />
+<SupportText status="Error" label="Something went wrong" />
+```
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`supportText/fontFamily`**
+- **`supportText/fontSize`**
+- **`supportText/fontWeight`**
+- **`supportText/foreground`**
+- **`supportText/gap`**
+- **`supportText/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/SupportText/SupportTextIcon.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const STATUS_ICON_MAP = {
+  Neutral: 'ic_info',
+  Warning: 'ic_warning',
+  // Using ic_warning for Warning
+  Error: 'ic_warning',
+  // Using ic_warning for Error
+  Success: 'ic_status_successful'
+};
+function SupportTextIcon({
+  status = 'Neutral',
+  modes = {},
+  style
+}) {
+  const iconName = STATUS_ICON_MAP[status] || 'ic_info';
+
+  // Resolve icon size
+  const size = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/icon/size', modes), 10) || 16;
+
+  // Resolve icon color
+  // Assuming supportText/foreground applies to icon as well, or there might be specific icon color tokens.
+  // Using supportText/foreground as default based on common patterns if no specific icon token.
+  // If specific tokens exist like 'supportText/icon/color', they should be used.
+  // Detailed variables only showed supportText/foreground.
+  const color = (0, _figmaVariablesResolver.getVariableByName)('supportText/foreground', modes) || '#0c0d10';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: iconName,
+      size: size,
+      color: color
+    })
+  });
+}
+var _default = exports.default = SupportTextIcon;
+//# sourceMappingURL=SupportTextIcon.js.map

package/lib/commonjs/components/SupportText/SupportTextIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_Icon","_jsxRuntime","e","__esModule","default","STATUS_ICON_MAP","Neutral","Warning","Error","Success","SupportTextIcon","status","modes","style","iconName","size","parseInt","getVariableByName","color","jsx","View","children","name","_default","exports"],"sourceRoot":"../../../../src","sources":["components/SupportText/SupportTextIcon.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAoC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAUpC,MAAMG,eAAkD,GAAG;EACvDC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE,YAAY;EAAE;EACvBC,KAAK,EAAE,YAAY;EAAI;EACvBC,OAAO,EAAE;AACb,CAAC;AAED,SAASC,eAAeA,CAAC;EACrBC,MAAM,GAAG,SAAS;EAClBC,KAAK,GAAG,CAAC,CAAC;EACVC;AACkB,CAAC,EAAE;EACrB,MAAMC,QAAQ,GAAGT,eAAe,CAACM,MAAM,CAAC,IAAI,SAAS;;EAErD;EACA,MAAMI,IAAI,GAAGC,QAAQ,CAAC,IAAAC,yCAAiB,EAAC,uBAAuB,EAAEL,KAAK,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE;;EAElF;EACA;EACA;EACA;EACA;EACA,MAAMM,KAAK,GAAG,IAAAD,yCAAiB,EAAC,wBAAwB,EAAEL,KAAK,CAAC,IAAI,SAAS;EAE7E,oBACI,IAAAX,WAAA,CAAAkB,GAAA,EAACrB,YAAA,CAAAsB,IAAI;IAACP,KAAK,EAAEA,KAAM;IAAAQ,QAAA,eACf,IAAApB,WAAA,CAAAkB,GAAA,EAACnB,KAAA,CAAAI,OAAI;MAACkB,IAAI,EAAER,QAAS;MAACC,IAAI,EAAEA,IAAK;MAACG,KAAK,EAAEA;IAAM,CAAE;EAAC,CAChD,CAAC;AAEf;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAApB,OAAA,GAEcM,eAAe","ignoreList":[]}

package/lib/commonjs/components/SupportText/SupportTextIcon.mdx

@@ -0,0 +1,35 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as SupportTextIconStories from './SupportTextIcon.stories';
+import SupportTextIcon from './SupportTextIcon';
+
+<Meta of={SupportTextIconStories} />
+
+# SupportTextIcon
+
+SupportTextIcon component with design-token-driven styling.
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Status
+- **Modes:** Neutral | Warning | Error | Success
+- **Default:** Neutral
+## Usage
+
+<Canvas>
+  <Story of={SupportTextIconStories.Default} />
+</Canvas>
+
+## Props
+
+<Controls of={SupportTextIconStories.Default} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`supportText/foreground`**
+- **`supportText/icon/size`**
+
+All tokens support mode-based theming through the `modes` prop.

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SupportText", {
+  enumerable: true,
+  get: function () {
+    return _SupportText.default;
+  }
+});
+Object.defineProperty(exports, "SupportTextIcon", {
+  enumerable: true,
+  get: function () {
+    return _SupportTextIcon.default;
+  }
+});
+var _SupportText = _interopRequireDefault(require("./SupportText"));
+var _SupportTextIcon = _interopRequireDefault(require("./SupportTextIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_SupportText","_interopRequireDefault","require","_SupportTextIcon","e","__esModule","default"],"sourceRoot":"../../../../src","sources":["components/SupportText/index.ts"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAA+D,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/commonjs/components/TextInput/TextInput.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as TextInputStories from './TextInput.stories';
 import TextInput from './TextInput';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -13,9 +13,17 @@ Helper function to recursively clone children and pass modes prop to components
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### InputState
+- **Modes:** Idle | Active
+- **Default:** Idle
+
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/commonjs/components/ThreadHero/ThreadHero.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as ThreadHeroStories from './ThreadHero.stories';
 import ThreadHero from './ThreadHero';