add composed choice example to ChoiceList

Author: prakashraman

packages/ui-extensions/src/surfaces/point-of-sale/components/ChoiceList/ChoiceList.doc.ts

@@ -95,6 +95,19 @@ const data: ReferenceEntityTemplateSchema = {
           ],
         },
       },
+      {
+        description:
+          'Compose rich choice content by nesting other components within `Choice` elements. This example demonstrates combining images, text, and layout components to create visually enhanced choice options with descriptions and supporting images.',
+        codeblock: {
+          title: 'Compose rich choice content',
+          tabs: [
+            {
+              code: './examples/composed-choices.jsx',
+              language: 'jsx',
+            },
+          ],
+        },
+      },
     ],
   },
 };

packages/ui-extensions/src/surfaces/point-of-sale/components/ChoiceList/examples/composed-choices.jsx

@@ -0,0 +1,36 @@
+<s-choice-list>
+  {/* Composed choice with image and text */}
+  <s-choice value="option1">
+    <s-stack gap="small-200" alignItems="center" direction="inline">
+      <s-box blockSize="40px" inlineSize="40px">
+        <s-image src="https://placehold.co/60x60" inlineSize="fill" objectFit="cover" />
+      </s-box>
+      <s-box>
+        <s-text>Option 1</s-text>
+        <s-text type="small" color="subdued">
+          Additional details for option 1
+        </s-text>
+      </s-box>
+    </s-stack>
+  </s-choice>
+
+  {/* Composed choice with nested text */}
+  <s-choice value="option2">
+    <s-text type="strong">
+      Option 2 —{' '}
+      <s-text type="small" color="subdued">
+        Additional details for option 2
+      </s-text>
+    </s-text>
+  </s-choice>
+
+  {/* Mix of text and composed elements */}
+  <s-choice value="option3" disabled>
+    Option 3{' '}
+    <s-text type="small" color="subdued">
+      (disabled)
+    </s-text>{' '}
+    <s-text type="strong">Additional details for option 3</s-text>
+  </s-choice>
+</s-choice-list>
+