npm - @discourser/design-system - Versions diffs - 0.25.0 → 0.25.1 - Mend

@discourser/design-system 0.25.0 → 0.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/figma-codex.json +17 -5
package/package.json +1 -1
package/src/components/RadioGroup.figma.tsx +26 -3
package/src/components/Slider.figma.tsx +48 -2
package/src/components/Switch.figma.tsx +17 -0

package/dist/figma-codex.json CHANGED Viewed

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
   "packageName": "@discourser/design-system",
-  "generatedAt": "2026-03-31T13:16:49.337Z",
-  "gitHash": "d9f8fa27",
+  "generatedAt": "2026-03-31T14:38:15.806Z",
+  "gitHash": "e47e7ec5",
   "figmaFiles": {
     "GaHmFfmvO4loUzuZS4TgEz": {
       "fileKey": "GaHmFfmvO4loUzuZS4TgEz"
@@ -721,7 +721,7 @@
       },
       "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>",
+      "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",
@@ -936,8 +936,20 @@
       },
       "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"
+      "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",

package/package.json CHANGED Viewed

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

package/src/components/RadioGroup.figma.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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',