jfs-components 0.1.36 → 0.1.49

package/src/design-tokens/figma-modes.generated.ts

@@ -63,7 +63,7 @@ export const FIGMA_MODES = {
   "Calendar Glyph / Output": ["Default"],
   "Calendar Glyph State": ["Idle", "notSaved", "saved"],
   "Card / Output": ["Default"],
-  "Card Apperance": ["Default", "Plain"],
+  "Card Container": ["Default", "Plain"],
   "Card Feedback / Output": ["Default"],
   "Card Tab / output": ["Default"],
   "Card Tab State": ["Default", "Active"],
@@ -248,6 +248,7 @@ export const FIGMA_MODES = {
   "Slot gap": ["S", "M", "L", "XL", "XS"],
   "special button": ["Default"],
   "Spinner / Output": ["Default"],
+  "Stack Context": ["Root", "Nested"],
   "statGroup / Output": ["Default"],
   "StatItem / Output": ["Default"],
   "StatItem Label Position ": ["Top", "Bottom"],
@@ -304,7 +305,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "Accordion": ["Accordion States"],
   "AccordionCheckbox": ["Color Mode", "context 10", "Profile Card Appearance"],
   "AccountCard": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
-  "ActionFooter": ["Color Mode", "context5"],
+  "ActionFooter": ["Color Mode", "Context", "context5", "Slot gap"],
   "ActionTile": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
   "Additem": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
   "AllocationComparisonChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
@@ -322,7 +323,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "BrandChip": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "BubbleChart": ["Appearance / DataViz", "Color Mode", "Context", "context 10", "Emphasis / DataViz", "Profile Card Appearance", "Text Appearance"],
   "Button": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
-  "Card": ["AppearanceBrand", "AppearanceSystem", "Border Boolean", "Card Apperance", "Color Mode", "Gap", "Page type", "Semantic Intent"],
+  "Card": ["AppearanceBrand", "AppearanceSystem", "Card Container", "Color Mode", "Gap", "Page type", "Semantic Intent"],
   "CardAdvisory": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
   "CardBankAccount": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Context4", "context5", "Emphasis", "List Item Style", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
   "CardCTA": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context 8", "Context4", "Emphasis", "Icon Capsule Size", "MediaBlock", "Page type", "Profile Card Appearance", "Semantic Intent"],
@@ -341,7 +342,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "CircularProgressBar": ["AppearanceBrand", "AppearanceSystem", "circularProgressBar Size", "Color Mode", "Emphasis", "Semantic Intent"],
   "CircularRating": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
   "ClusterBubble": ["Appearance / DataViz", "Color Mode", "Context", "context 10", "Emphasis / DataViz", "Profile Card Appearance", "Text Appearance"],
-  "CompareTable": ["Accordion States", "AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type", "Radius", "Selection Card Radius"],
+  "CompareTable": ["Accordion States", "AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type", "Radius"],
   "ComparisonBar": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Icon Capsule Size", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
   "ContentSheet": ["Color Mode", "Page type"],
   "CoverageBarComparison": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
@@ -366,7 +367,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Hello Jio Input Size", "Hello Jio Input State", "Page type"],
   "HeroSection": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "context 9", "context7", "Emphasis", "FormField States", "InputState", "Page type", "Status"],
   "HoldingsCard": ["AppearanceBrand", "Color Mode"],
-  "HStack": ["Context", "Padding", "Page type", "Slot gap"],
+  "HStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"],
   "Icon": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
   "IconButton": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
   "IconCapsule": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
@@ -393,7 +394,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "PaymentFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
   "PdpCcCard": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context7", "Emphasis", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
   "PlanComparisonCard": ["Color Mode"],
-  "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap"],
+  "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap", "Stack Context"],
   "PortfolioHero": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context3", "Context4", "Profile Card Appearance"],
   "ProductLabel": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "ProductMerchandisingCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
@@ -434,7 +435,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "TransactionStatus": ["Transaction Status"],
   "UpiHandle": ["Color Mode", "context 10", "Profile Card Appearance", "UPI Handle Image"],
   "ValueBackMetric": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
-  "VStack": ["Context", "Padding", "Page type", "Slot gap"],
+  "VStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"],
 };
 
 /**

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-07-21T07:33:30.350Z
+ * Generated: 2026-07-25T08:19:21.865Z
  */
 
 // Icon name to SVG data mapping

package/D2C.md

@@ -1,113 +0,0 @@
-# D2C — Design to Code with jfs-components
-
-Implement the supplied Figma design using the installed `jfs-components`
-package. Follow all four stages in order.
-
-## Input
-
-Use the Figma URL supplied after `/D2C` or in the user's latest message. If no
-Figma URL was supplied, ask for one before doing anything else.
-
-## 1. Read the design
-
-1. Call the Figma MCP `get_design_context` for the linked node.
-2. Call `get_screenshot` for the same node. Keep it as the visual reference for
-   final QA.
-3. Follow Code Connect mappings, design annotations, and provided assets. If
-   Figma supplies an image or SVG URL, use it directly; do not create a
-   placeholder or install an icon package.
-
-If the Figma MCP is unavailable or cannot read the node, report the blocker and
-stop. Do not recreate the design from the URL or from assumptions.
-
-## 2. Extract and resolve explicit modes
-
-From the consuming project's root, run:
-
-```bash
-npx jfs-extract-modes "<figma-url>" --out modes.json
-```
-
-The CLI automatically loads `FIGMA_ACCESS_TOKEN` from the project-root `.env`.
-An already exported shell value takes precedence. The token only needs the
-Figma `file_content:read` scope. Never print, log, or ask the user to paste the
-token into chat.
-
-If the token is missing, stop and direct the user to `[Open .env](.env)` and
-add `FIGMA_ACCESS_TOKEN=` if needed. To create a token: in Figma's file browser,
-open the account menu → **Settings** → **Security** → **Personal access
-tokens** → **Generate new token**, choose an expiration, grant only
-`file_content:read`, generate it, and copy it immediately into `.env`. Figma
-shows the value only once. Use the
-[official PAT documentation](https://developers.figma.com/docs/rest-api/personal-access-tokens/)
-if the UI has changed. Never create or overwrite a token value yourself.
-
-If the bin is unavailable in a nonstandard monorepo, run:
-
-```bash
-node node_modules/jfs-components/scripts/extract-figma-modes.js "<figma-url>" --out modes.json
-```
-
-Resolve the effective modes for each represented component as follows:
-
-1. Start with `inheritedFromAncestors`, when present.
-2. Find every `modes` entry whose `path` is the component's path or an ancestor
-   of it.
-3. Merge those entries from root to leaf; deeper entries override inherited
-   values.
-4. Match by layer name and position, using `nodeId` to disambiguate duplicate
-   names.
-
-If `unresolved` is present, report every item and its exact `reason`, then stop
-before implementation because mode fidelity cannot be guaranteed:
-
-- `local collection` means the design uses a file-local collection that the
-  packaged library data cannot resolve.
-- `key not in variables JSON` or `mode not in collection` means the packaged
-  design-token JSON is out of date.
-
-Do not guess or silently omit an unresolved mode.
-
-## 3. Implement
-
-Before editing, inspect the installed package's exports/types and the consuming
-app's existing screens. Reuse its file placement, navigation, styling, and
-asset conventions. Never invent a `jfs-components` component or prop.
-
-- Prefer mapped `jfs-components` over rebuilding them from primitives.
-- Apply extracted collection/mode pairs exactly through each component's
-  `modes` prop.
-- Put a mode on the closest code component that represents the reported Figma
-  layer or subtree. Preserve parent inheritance and child overrides; never
-  flatten a child override into its parent.
-- Do not substitute similar-looking modes, remove apparently redundant modes,
-  or move modes between layers.
-- Match Figma content, order, visibility, variants, spacing, and assets.
-
-Run the consuming app's existing typecheck, tests, or build command relevant to
-the changed screen and fix implementation errors.
-
-## 4. Render and visually verify
-
-Render the implemented screen on the target platform and capture it with the
-available mobile or browser tooling. Compare it with the Figma screenshot for:
-
-1. component size, variant, and emphasis;
-2. color and appearance;
-3. spacing, padding, alignment, and gaps;
-4. text, wrapping, and truncation; and
-5. icons, imagery, and layer visibility.
-
-Fix every implementation-caused difference and capture the screen again.
-Platform or environment differences that cannot be fixed in code, such as a
-missing system font or renderer-specific antialiasing, must be identified
-explicitly rather than hidden.
-
-If no suitable render or screenshot tooling is available, do not claim visual
-completion. Report what remains to be checked and give the exact manual run and
-comparison steps.
-
-## Completion report
-
-Report the files changed, the effective modes applied to each component, the
-validation commands and results, and the final visual comparison status.