@discourser/design-system 0.25.0 → 0.25.2

package/dist/figma-codex/resolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolver.d.ts","sourceRoot":"","sources":["../../src/figma-codex/resolver.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,KAAK,EACV,cAAc,EAGf,MAAM,UAAU,CAAC;AAoMlB,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,eAAe,EACvB,MAAM,EAAE,gBAAgB,GACvB,cAAc,CAyEhB"}
+{"version":3,"file":"resolver.d.ts","sourceRoot":"","sources":["../../src/figma-codex/resolver.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,KAAK,EACV,cAAc,EAGf,MAAM,UAAU,CAAC;AA8SlB,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,eAAe,EACvB,MAAM,EAAE,gBAAgB,GACvB,cAAc,CAyEhB"}

package/dist/figma-codex.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
   "packageName": "@discourser/design-system",
-  "generatedAt": "2026-03-31T13:16:49.337Z",
-  "gitHash": "d9f8fa27",
+  "generatedAt": "2026-03-31T15:43:15.946Z",
+  "gitHash": "c57712c8",
   "figmaFiles": {
     "GaHmFfmvO4loUzuZS4TgEz": {
       "fileKey": "GaHmFfmvO4loUzuZS4TgEz"
@@ -20,7 +20,13 @@
       "imports": {
         "primary": "import * as Accordion from '@discourser/design-system/Accordion'",
         "namedExports": [
-          "Accordion.ItemBody"
+          "Accordion.ItemBody",
+          "Accordion.Root",
+          "Accordion.RootProvider",
+          "Accordion.Item",
+          "Accordion.ItemContent",
+          "Accordion.ItemIndicator",
+          "Accordion.ItemTrigger"
         ],
         "subpath": "@discourser/design-system/Accordion"
       },
@@ -29,6 +35,30 @@
         {
           "name": "ItemBody",
           "element": "div"
+        },
+        {
+          "name": "Root",
+          "element": "root"
+        },
+        {
+          "name": "RootProvider",
+          "element": "root"
+        },
+        {
+          "name": "Item",
+          "element": "item"
+        },
+        {
+          "name": "ItemContent",
+          "element": "itemContent"
+        },
+        {
+          "name": "ItemIndicator",
+          "element": "itemIndicator"
+        },
+        {
+          "name": "ItemTrigger",
+          "element": "itemTrigger"
         }
       ],
       "example": "<Accordion.Root collapsible>\n        <Accordion.Item value=\"item-1\">\n          <Accordion.ItemTrigger>\n            <span>Trigger</span>\n            <Accordion.ItemIndicator />\n          </Accordion.ItemTrigger>\n          <Accordion.ItemContent>Content</Accordion.ItemContent>\n        </Accordion.Item>\n      </Accordion.Root>",
@@ -716,12 +746,92 @@
       },
       "imports": {
         "primary": "import * as RadioGroup from '@discourser/design-system/RadioGroup'",
-        "namedExports": [],
+        "namedExports": [
+          "RadioGroup.Root",
+          "RadioGroup.RootProvider",
+          "RadioGroup.Indicator",
+          "RadioGroup.Item",
+          "RadioGroup.ItemControl",
+          "RadioGroup.ItemText",
+          "RadioGroup.Label"
+        ],
         "subpath": "@discourser/design-system/RadioGroup"
       },
-      "props": [],
-      "subComponents": [],
-      "example": "<RadioGroup.Root>\n        <RadioGroup.Item value=\"item-1\">\n          <RadioGroup.ItemControl />\n          <RadioGroup.ItemText>Option 1</RadioGroup.ItemText>\n        </RadioGroup.Item>\n        <RadioGroup.Item value=\"item-2\">\n          <RadioGroup.ItemControl />\n          <RadioGroup.ItemText>Option 2</RadioGroup.ItemText>\n        </RadioGroup.Item>\n      </RadioGroup.Root>",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "controlled selected value (string)"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "required": false,
+          "description": "uncontrolled initial value (string)"
+        },
+        {
+          "name": "onValueChange",
+          "type": "({ value }: { value: string }) => void",
+          "required": false,
+          "description": "callback ({ value }: { value: string }) => void"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "boolean, disables all items"
+        },
+        {
+          "name": "orientation",
+          "type": "'horizontal' | 'vertical'",
+          "required": false,
+          "description": "'horizontal' | 'vertical' (default: 'vertical')"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "required unique string for this option"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "boolean, disables this item only"
+        }
+      ],
+      "subComponents": [
+        {
+          "name": "Root",
+          "element": "root"
+        },
+        {
+          "name": "RootProvider",
+          "element": "root"
+        },
+        {
+          "name": "Indicator",
+          "element": "indicator"
+        },
+        {
+          "name": "Item",
+          "element": "item"
+        },
+        {
+          "name": "ItemControl",
+          "element": "itemControl"
+        },
+        {
+          "name": "ItemText",
+          "element": "itemText"
+        },
+        {
+          "name": "Label",
+          "element": "label"
+        }
+      ],
+      "example": "<RadioGroup.Root defaultValue=\"option-1\">\n        <RadioGroup.Item value=\"option-1\">\n          <RadioGroup.ItemControl />\n          <RadioGroup.ItemText>Option 1</RadioGroup.ItemText>\n        </RadioGroup.Item>\n        <RadioGroup.Item value=\"option-2\">\n          <RadioGroup.ItemControl />\n          <RadioGroup.ItemText>Option 2</RadioGroup.ItemText>\n        </RadioGroup.Item>\n        <RadioGroup.Item value=\"option-3\">\n          <RadioGroup.ItemControl />\n          <RadioGroup.ItemText>Option 3</RadioGroup.ItemText>\n        </RadioGroup.Item>\n      </RadioGroup.Root>",
       "sourcePath": "src/components/RadioGroup.tsx",
       "tokens": {
         "recipe": "radioGroup",
@@ -931,13 +1041,142 @@
       },
       "imports": {
         "primary": "import * as Slider from '@discourser/design-system/Slider'",
-        "namedExports": [],
+        "namedExports": [
+          "Slider.Control",
+          "Slider.Track",
+          "Slider.Range",
+          "Slider.Root",
+          "Slider.Thumb",
+          "Slider.Label",
+          "Slider.ValueText",
+          "Slider.Marker",
+          "Slider.MarkerGroup",
+          "Slider.MarkerIndicator",
+          "Slider.DraggingIndicator",
+          "Slider.Marks"
+        ],
         "subpath": "@discourser/design-system/Slider"
       },
-      "props": [],
-      "subComponents": [],
-      "example": "<Slider.Root defaultValue={[50]}>\n        <Slider.Label>Volume</Slider.Label>\n        <Slider.Control>\n          <Slider.Track>\n            <Slider.Range />\n          </Slider.Track>\n          <Slider.Thumbs />\n        </Slider.Control>\n      </Slider.Root>",
-      "sourcePath": "src/components/Slider.tsx"
+      "props": [
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "required": false,
+          "description": "uncontrolled initial value array, e.g. [50]"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "controlled value array, e.g. [50]"
+        },
+        {
+          "name": "onValueChange",
+          "type": "({ value }: { value: number[] }) => void",
+          "required": false,
+          "description": "callback ({ value }: { value: number[] }) => void"
+        },
+        {
+          "name": "min",
+          "type": "string",
+          "required": false,
+          "description": "number (default: 0)"
+        },
+        {
+          "name": "max",
+          "type": "string",
+          "required": false,
+          "description": "number (default: 100)"
+        },
+        {
+          "name": "step",
+          "type": "string",
+          "required": false,
+          "description": "number (default: 1)"
+        },
+        {
+          "name": "orientation",
+          "type": "'horizontal' | 'vertical'",
+          "required": false,
+          "description": "'horizontal' | 'vertical' (default: 'horizontal')"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "boolean"
+        },
+        {
+          "name": "colorPalette",
+          "type": "'primary' | 'secondary' | 'tertiary' | 'neutral' | 'error'",
+          "required": false,
+          "description": "'primary' | 'secondary' | 'tertiary' | 'neutral' | 'error'"
+        }
+      ],
+      "subComponents": [
+        {
+          "name": "Control",
+          "element": "control"
+        },
+        {
+          "name": "Track",
+          "element": "track"
+        },
+        {
+          "name": "Range",
+          "element": "range"
+        },
+        {
+          "name": "Root",
+          "element": "div"
+        },
+        {
+          "name": "Thumb",
+          "element": "div"
+        },
+        {
+          "name": "Label",
+          "element": "label"
+        },
+        {
+          "name": "ValueText",
+          "element": "div"
+        },
+        {
+          "name": "Marker",
+          "element": "span"
+        },
+        {
+          "name": "MarkerGroup",
+          "element": "div"
+        },
+        {
+          "name": "MarkerIndicator",
+          "element": "div"
+        },
+        {
+          "name": "DraggingIndicator",
+          "element": "div"
+        },
+        {
+          "name": "Marks",
+          "element": "div"
+        }
+      ],
+      "example": "<Slider.Root defaultValue={[50]} orientation={orientation}>\n        <Slider.Label>Volume</Slider.Label>\n        <Slider.Control>\n          <Slider.Track>\n            <Slider.Range />\n          </Slider.Track>\n          <Slider.Thumbs />\n        </Slider.Control>\n      </Slider.Root>",
+      "sourcePath": "src/components/Slider.tsx",
+      "tokens": {
+        "recipe": "slider",
+        "variantProps": [
+          "orientation",
+          "size",
+          "variant"
+        ],
+        "figmaPropToRecipeProp": {
+          "Orientation": "orientation",
+          "Size": "size"
+        }
+      }
     },
     "Stepper": {
       "name": "Stepper",
@@ -1063,11 +1302,58 @@
       },
       "imports": {
         "primary": "import * as Switch from '@discourser/design-system/Switch'",
-        "namedExports": [],
+        "namedExports": [
+          "Switch.Root",
+          "Switch.Label",
+          "Switch.Thumb",
+          "Switch.Control"
+        ],
         "subpath": "@discourser/design-system/Switch"
       },
-      "props": [],
-      "subComponents": [],
+      "props": [
+        {
+          "name": "defaultChecked",
+          "type": "boolean",
+          "required": false,
+          "description": "uncontrolled initial state (boolean)"
+        },
+        {
+          "name": "checked",
+          "type": "boolean",
+          "required": false,
+          "description": "controlled state (boolean)"
+        },
+        {
+          "name": "onCheckedChange",
+          "type": "({ checked }: { checked: boolean }) => void",
+          "required": false,
+          "description": "callback ({ checked }: { checked: boolean }) => void"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "boolean"
+        }
+      ],
+      "subComponents": [
+        {
+          "name": "Root",
+          "element": "root"
+        },
+        {
+          "name": "Label",
+          "element": "label"
+        },
+        {
+          "name": "Thumb",
+          "element": "thumb"
+        },
+        {
+          "name": "Control",
+          "element": "control"
+        }
+      ],
       "example": "<Switch.Root defaultChecked={checked}>\n        <Switch.Control />\n        <Switch.Label>Toggle</Switch.Label>\n      </Switch.Root>",
       "sourcePath": "src/components/Switch.tsx",
       "tokens": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourser/design-system",
-  "version": "0.25.0",
+  "version": "0.25.2",
   "description": "Aesthetic-agnostic design system with Panda CSS and Ark UI",
   "type": "module",
   "publishConfig": {

package/src/components/RadioGroup.figma.tsx

@@ -12,6 +12,25 @@ import * as RadioGroup from './RadioGroup';
 // Original designer-built component — .Radio Group Radio Toggle (38:8893)
 // Variants: Checked(False/True) × State(Default/Focus/Disabled)
 // This is the component used in production Discourser.AI page designs.
+//
+// Anatomy:
+//   <RadioGroup.Root value={string} onValueChange={fn}>
+//     <RadioGroup.Item value="x">
+//       <RadioGroup.ItemControl />
+//       <RadioGroup.ItemText>Label</RadioGroup.ItemText>
+//     </RadioGroup.Item>
+//   </RadioGroup.Root>
+//
+// Key props on Root:
+//   value         — controlled selected value (string)
+//   defaultValue  — uncontrolled initial value (string)
+//   onValueChange — callback ({ value }: { value: string }) => void
+//   disabled      — boolean, disables all items
+//   orientation   — 'horizontal' | 'vertical' (default: 'vertical')
+//
+// Key props on Item:
+//   value         — required unique string for this option
+//   disabled      — boolean, disables this item only
 figma.connect(
   RadioGroup.Root,
   'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-8893',
@@ -23,15 +42,19 @@ figma.connect(
       }),
     },
     example: ({ checked: _checked }) => (
-      <RadioGroup.Root>
-        <RadioGroup.Item value="item-1">
+      <RadioGroup.Root defaultValue="option-1">
+        <RadioGroup.Item value="option-1">
           <RadioGroup.ItemControl />
           <RadioGroup.ItemText>Option 1</RadioGroup.ItemText>
         </RadioGroup.Item>
-        <RadioGroup.Item value="item-2">
+        <RadioGroup.Item value="option-2">
           <RadioGroup.ItemControl />
           <RadioGroup.ItemText>Option 2</RadioGroup.ItemText>
         </RadioGroup.Item>
+        <RadioGroup.Item value="option-3">
+          <RadioGroup.ItemControl />
+          <RadioGroup.ItemText>Option 3</RadioGroup.ItemText>
+        </RadioGroup.Item>
       </RadioGroup.Root>
     ),
   },

package/src/components/Slider.figma.tsx

@@ -1,12 +1,58 @@
+/**
+ * @dds-tokens
+ * recipe: slider
+ * variantProps: orientation, size, variant
+ * figmaPropToRecipeProp:
+ *   Orientation: orientation
+ *   Size: size
+ */
 import figma from '@figma/code-connect';
 import * as Slider from './Slider';
 
+// Original designer-built component — Discourser AI Slider (38:7988)
+// This is the component used in production Discourser.AI page designs.
+//
+// Import as namespace: import * as Slider from '@discourser/design-system/Slider'
+//
+// Anatomy:
+//   <Slider.Root defaultValue={[number]} min={number} max={number} step={number}>
+//     <Slider.Label>Label text</Slider.Label>
+//     <Slider.Control>
+//       <Slider.Track>
+//         <Slider.Range />
+//       </Slider.Track>
+//       <Slider.Thumbs />     ← convenience component, renders one Thumb per value
+//     </Slider.Control>
+//     <Slider.ValueText />    ← optional, displays current value
+//   </Slider.Root>
+//
+// Key props on Root:
+//   defaultValue  — uncontrolled initial value array, e.g. [50]
+//   value         — controlled value array, e.g. [50]
+//   onValueChange — callback ({ value }: { value: number[] }) => void
+//   min           — number (default: 0)
+//   max           — number (default: 100)
+//   step          — number (default: 1)
+//   orientation   — 'horizontal' | 'vertical' (default: 'horizontal')
+//   disabled      — boolean
+//   colorPalette  — 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'error'
+//
+// Convenience components:
+//   <Slider.Thumbs />    — renders one Thumb per value entry (use instead of
+//                          manually mapping Slider.Thumb with index props)
+//   <Slider.Marks marks={[0, 25, 50, 75, 100]} /> — renders a MarkerGroup
 figma.connect(
   Slider.Root,
   'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-7988',
   {
-    example: () => (
-      <Slider.Root defaultValue={[50]}>
+    props: {
+      orientation: figma.enum('Orientation', {
+        Horizontal: 'horizontal',
+        Vertical: 'vertical',
+      }),
+    },
+    example: ({ orientation }) => (
+      <Slider.Root defaultValue={[50]} orientation={orientation}>
         <Slider.Label>Volume</Slider.Label>
         <Slider.Control>
           <Slider.Track>

package/src/components/Switch.figma.tsx

@@ -12,6 +12,23 @@ import * as Switch from './Switch';
 // Original designer-built component — Discourser AI Switch Toggle (38:8121)
 // Variants: Toggled(False/True) × State(Default/Focus/Disabled)
 // This is the component used in production Discourser.AI page designs.
+//
+// Import as namespace: import * as Switch from '@discourser/design-system/Switch'
+//
+// Anatomy:
+//   <Switch.Root defaultChecked={bool}>
+//     <Switch.Control />   ← renders the track + thumb internally
+//     <Switch.Label>Label text</Switch.Label>
+//   </Switch.Root>
+//
+// Key props on Root:
+//   defaultChecked  — uncontrolled initial state (boolean)
+//   checked         — controlled state (boolean)
+//   onCheckedChange — callback ({ checked }: { checked: boolean }) => void
+//   disabled        — boolean
+//
+// Note: Switch.Control includes Switch.Thumb by default via defaultProps.
+// Do NOT add <Switch.Thumb> manually inside <Switch.Control>.
 figma.connect(
   Switch.Root,
   'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-8121',

package/src/figma-codex/resolver.ts

@@ -38,13 +38,93 @@ function resolveImplementationFile(sourceFile: string): string {
   return sourceFile;
 }
 
-function extractProps(sourceContent: string): PropDefinition[] {
+function inferTypeFromDescription(description: string): string {
+  const desc = description.trim();
+
+  // Direct type keyword at start
+  const directType = desc.match(
+    /^(boolean|string|number|string\[\]|number\[\])(\s*[,.]|$)/,
+  );
+  if (directType) return directType[1];
+
+  // Parenthesized type at end: "description (boolean)"
+  const parenEnd = desc.match(/\(([a-zA-Z[\]]+)\)\s*$/);
+  if (parenEnd && /^(boolean|string|number)(\[\])?$/.test(parenEnd[1])) {
+    return parenEnd[1];
+  }
+
+  // Union of string literals: 'a' | 'b' | 'c' — possibly with trailing " (default: ...)"
+  if (/^'[^']+'(\s*\|\s*'[^']+')+/.test(desc)) {
+    const match = desc.match(/^('(?:[^']+)'\s*(?:\|\s*'(?:[^']+)'\s*)*)/);
+    if (match) return match[1].trim();
+  }
+
+  // Callback: "callback (...) => void"
+  if (desc.startsWith('callback')) {
+    const rest = desc.replace(/^callback\s+/, '');
+    return rest || '(...args: unknown[]) => void';
+  }
+
+  return 'string';
+}
+
+function extractPropsFromFigmaJsdoc(figmaFilePath: string): PropDefinition[] {
+  if (!existsSync(figmaFilePath)) return [];
+  const content = readFileSync(figmaFilePath, 'utf-8');
+  const props: PropDefinition[] = [];
+
+  const lines = content.split('\n');
+  let inPropsSection = false;
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+
+    if (!trimmed.startsWith('//')) {
+      if (inPropsSection) break; // left the comment block
+      continue;
+    }
+
+    // Strip the leading `//` (and optional single space)
+    const commentContent = trimmed.replace(/^\/\/\s?/, '');
+
+    if (/^Key props/i.test(commentContent)) {
+      inPropsSection = true;
+      continue;
+    }
+
+    if (!inPropsSection) continue;
+
+    // Match "  propName  — description" (em-dash, en-dash, or hyphen)
+    const propMatch = commentContent.match(/^\s+(\w+)\s+[—–-]+\s+(.+)$/);
+    if (propMatch) {
+      const [, name, description] = propMatch;
+      const type = inferTypeFromDescription(description);
+      props.push({
+        name,
+        type,
+        required: false,
+        description: description.trim(),
+      });
+    }
+  }
+
+  return props;
+}
+
+function extractProps(
+  sourceContent: string,
+  figmaFilePath?: string,
+): PropDefinition[] {
   const props: PropDefinition[] = [];
 
   // Step 1: Find the Props interface and extract its full body using balanced-brace tracking
   const ifaceRe = /interface\s+\w+Props\s*\{/g;
   const startMatch = ifaceRe.exec(sourceContent);
-  if (!startMatch) return props;
+  if (!startMatch) {
+    // Fallback: no interface found — read Key props section from the .figma.tsx JSDoc
+    if (figmaFilePath) return extractPropsFromFigmaJsdoc(figmaFilePath);
+    return props;
+  }
 
   // Find the opening { of the interface body
   const openBrace = sourceContent.indexOf(
@@ -157,15 +237,41 @@ function extractProps(sourceContent: string): PropDefinition[] {
 }
 
 function extractSubComponents(sourceContent: string): SubComponentEntry[] {
-  const subs: SubComponentEntry[] = [];
-  const re =
-    /export\s+const\s+(\w+)\s+=\s+with(?:Provider|Context)\(ark\.(\w+)/g;
+  const subs = new Map<string, SubComponentEntry>();
   let m: RegExpExecArray | null;
-  while ((m = re.exec(sourceContent)) !== null) {
-    const [, name, element] = m;
-    subs.push({ name, element });
+
+  // Pattern 1: withProvider/withContext(ark.tagName, ...) — Park UI ark factory
+  const arkRe =
+    /export\s+const\s+(\w+)\s+=\s+with(?:Provider|Context)\(ark\.(\w+)/g;
+  while ((m = arkRe.exec(sourceContent)) !== null) {
+    subs.set(m[1], { name: m[1], element: m[2] });
+  }
+
+  // Pattern 2: withProvider/withContext(Namespace.Sub, 'slotName') — styleContext pattern
+  // Used by RadioGroup, Switch, and similar Ark UI compound components
+  const styleCtxRe =
+    /export\s+const\s+(\w+)\s+=\s+with(?:Provider|Context)\(\s*\w+\.\w+\s*,\s*['"](\w+)['"]/g;
+  while ((m = styleCtxRe.exec(sourceContent)) !== null) {
+    if (!subs.has(m[1])) subs.set(m[1], { name: m[1], element: m[2] });
   }
-  return subs;
+
+  // Pattern 3: createStyledComponent(Namespace.Sub, 'slotName', ...) — custom styled wrapper
+  // Used by Slider and similar components with manual style context
+  const styledRe =
+    /export\s+const\s+(\w+)\s+=\s+createStyledComponent\(\s*\w+\.\w+\s*,\s*['"](\w+)['"]/g;
+  while ((m = styledRe.exec(sourceContent)) !== null) {
+    if (!subs.has(m[1])) subs.set(m[1], { name: m[1], element: m[2] });
+  }
+
+  // Pattern 4: forwardRef<HTMLXxxElement, ...> — typed forward ref exports
+  const forwardRefRe =
+    /export\s+const\s+(\w+)\s+=\s+forwardRef<HTML(\w+)Element/g;
+  while ((m = forwardRefRe.exec(sourceContent)) !== null) {
+    if (!subs.has(m[1]))
+      subs.set(m[1], { name: m[1], element: m[2].toLowerCase() });
+  }
+
+  return Array.from(subs.values());
 }
 
 function classifyComponent(
@@ -237,7 +343,7 @@ export function resolveComponent(
   }
 
   const componentType = classifyComponent(parsed, sourceContent);
-  const props = extractProps(typesContent);
+  const props = extractProps(typesContent, parsed.filePath);
   const subComponents =
     componentType === 'compound'
       ? extractSubComponents(sourceContent)