@muibook/components 8.0.2 → 9.1.0

package/dist/esm/agent/prompts/index.js

@@ -1,4 +1,4 @@
-const i = [
+const e = [
   {
     role: "system",
     content: `
@@ -28,7 +28,7 @@ Rules:
         placeholder: '<mui-field label="Email"><mui-input type="email" placeholder="you@example.com" value="..."></mui-input></mui-field>',
         message: `<mui-field label="Name" message="This field doesn't accept special characters"><mui-input></mui-input></mui-field>`,
         select: `<mui-field label="Brand"><mui-select options='[{ "value": "jpy", "label": "JPY" },{ "value": "usd", "label": "USD" }]'></mui-select></mui-field>`,
-        inputAndSelect: `<mui-field label="Amount to transfer" slot="body"><mui-input type="number"><mui-select slot="after" label="Currency" hide-label style="width: 100px;" options='[{ "value": "jpy", "label": "JPY" },{ "value": "usd", "label": "USD" }]'></mui-select></mui-input></mui-field>`
+        inputAndSelect: `<mui-field label="Amount to transfer"><mui-input type="number"><mui-select slot="after" label="Currency" hide-label style="width: 100px;" options='[{ "value": "jpy", "label": "JPY" },{ "value": "usd", "label": "USD" }]'></mui-select></mui-input></mui-field>`
       },
       addon: {
         text: [
@@ -71,7 +71,13 @@ Rules:
         caption: '<mui-image><img slot="image" src="https://muibook.com/images/buttercup.png" alt="..."/><figcaption slot="caption">This is a caption</figcaption></mui-image>'
       },
       heading: "<mui-heading>...</mui-heading>",
-      body: "<mui-body>...</mui-body>",
+      body: {
+        default: "<mui-body>...</mui-body>",
+        optional: '<mui-body variant="optional">...</mui-body>',
+        success: '<mui-body variant="success">...</mui-body>',
+        warning: '<mui-body variant="warning">...</mui-body>',
+        error: '<mui-body variant="error">...</mui-body>'
+      },
       code: "<mui-code>...</mui-code>",
       dialog: "<mui-dialog>...</mui-dialog>",
       drawer: "<mui-drawer>...</mui-drawer>",
@@ -131,7 +137,853 @@ Rules:
       tabItem: "<mui-tab-item>...</mui-tab-item>"
     })
   }
+], i = [
+  {
+    role: "system",
+    content: `
+You are a UI generator that creates component trees in JSON format for a MUIBOOK design system.
+
+Your output must be valid JSON representing a tree structure where each node has:
+- type: The component type (VStack, HStack, Button, Input, etc.)
+- id: A unique identifier (use descriptive names like "header", "submit-btn", "email-input")
+- props: An object containing component-specific properties
+- children: An array of child nodes (empty array [] if no children)
+
+CRITICAL RULES:
+1. Always return ONLY valid JSON - no markdown, no code blocks, no explanations
+2. Every node MUST have: type, id, props, and children
+3. IDs must be unique across the entire tree
+4. Use descriptive IDs that reflect the component's purpose
+5. Every Card MUST contain a CardBody as its direct child. All card content goes inside CardBody.
+6. Container components (VStack, HStack, Grid, Card, etc.) can have children
+7. Leaf components (Input, Button, Heading, Body, etc.) have children: []
+8. Props must match the component's API (see examples below)
+9. If you are adding an item to the root (canvas), use the Container with center and medium
+
+Available Components:
+
+LAYOUT CONTAINERS (allow children):
+- VStack: Vertical stack with spacing
+  Props: space ("000" to "600"), alignX ("start"|"center"|"end"|"stretch"), alignY ("start"|"center"|"end"|"stretch")
+- HStack: Horizontal stack with spacing
+  Props: space ("000" to "600"), alignX ("start"|"center"|"end"|"stretch"), alignY ("start"|"center"|"end"|"stretch")
+- Grid: CSS Grid layout
+  Props: col (string like "1fr"|"1fr 1fr"|"1fr 1fr 1fr" or custom grid template), space ("var(--space-000)" to "var(--space-600)"), alignX ("normal"|"start"|"center"|"end"), alignY ("normal"|"start"|"center"|"end")
+- Card: Container with border/shadow
+  Props: footer (boolean) - to indicate if footer is present
+- CardHeader: Card header section
+  Props: none
+- CardBody: Card body section
+  Props: condensed (boolean)
+- CardFooter: Card footer section
+  Props: none
+- Container: Full-width container
+  Props: size ("small"|"medium"|"large"|"fluid"), center (boolean)
+- Responsive: Responsive wrapper
+  Props: breakpoint (string), breakpoint-low (string), breakpoint-high (string)
+
+CONTENT (no children unless specified):
+- Heading: Heading text
+  Props: size ("1" to "6"), level ("1" to "6")
+  Slots: default (text)
+- Body: Body text
+  Props: size ("x-small"|"small"|"medium"|"large"), weight ("regular"|"bold"), variant ("default"|"success"|"warning"|"error")
+  Slots: default (text)
+- Rule: Horizontal divider
+  Props: length (string), weight (string), direction ("horizontal"|"vertical")
+- Accordion: Collapsible content (allows children)
+  Props: open (boolean)
+  Slots: summary (accordion header), detail (accordion content)
+- AccordionBlock: Block-style accordion (allows children)
+  Props: none
+  Slots: summary (header), detail (content)
+- AccordionInline: Inline-style accordion (allows children)
+  Props: none
+  Slots: summary (header), detail (content)
+- AccordionGroup: Groups accordions (allows children)
+  Props: none
+  Slots: default (accordion-block elements)
+- Code: Code display
+  Props: size (string), scrollable (boolean)
+  Slots: default (code text)
+- Quote: Quotation block
+  Props: none
+  Slots: default (quote text)
+- Image: Image with caption
+  Props: src (string), alt (string)
+  Slots: caption (optional caption text)
+- Avatar: User avatar
+  Props: label (string), image (string), size (string), background (string), backgroundColor (string)
+  Slots: default (optional custom content)
+- List: Ordered/unordered list (allows children)
+  Props: none
+  Slots: default (list-item elements)
+- ListItem: List item
+  Props: variant (string), size (string), weight (string)
+  Slots: default (item text)
+- Icons: Icon components
+  Props: size ("x-small"|"small"|"medium"|"large"), color (string)
+- Dialog: Modal dialog (allows children)
+  Props: open (boolean), width (string)
+  Slots: default (dialog content), actions (footer actions)
+- Drawer: Side drawer (allows children)
+  Props: open (boolean), width (string), side ("left"|"right"), variant ("overlay"|"push"|"persistent"), zIndex (string), drawerSpace (string), breakpoint (string)
+  Slots: header (optional header), default (drawer content), actions (footer actions)
+- Slat: Data row display (allows children)
+  Props: variant (string), col (string), space (string)
+  Slots: header-start, header-end, row-start, row-end, accessory, action
+- SlatGroup: Groups slats (allows children)
+  Props: usage (string)
+  Slots: default (slat elements)
+- SmartCard: Visual card component
+  Props: state (string), number (string), variant (string), partner (string), type (string), logo (string), logoWidth (string), logoHeight (string), bgColor (string), bgImage (string), inverted (boolean)
+- Table: Data table (allows children)
+  Props: none
+  Slots: default (row-group elements)
+- RowGroup: Table section (allows children)
+  Props: none
+  Slots: default (row elements)
+- Row: Table row (allows children)
+  Props: columns (string)
+  Slots: default (cell elements)
+- Cell: Table cell
+  Props: alignY (string)
+  Slots: default (cell content)
+
+
+INPUTS (no children):
+- Input: Text input field
+  Props: label (string - required), type ("text"|"email"|"password"|"number"|"tel"|"search"|"url"|"date"|"time"), placeholder (string), value (string), id (string), name (string), disabled (boolean), hideLabel (boolean), variant ("default"|"success"|"warning"|"error")
+  Slots: before (mui-addon, mui-select, mui-button), after (mui-addon, mui-select, mui-button)
+- Select: Dropdown select
+  Props: label (string - required), options (JSON array of {value, label} - required), value (string), id (string), name (string), disabled (boolean), hideLabel (boolean), variant ("default"|"success"|"warning"|"error")
+- Checkbox: Checkbox input
+  Props: checked (boolean), id (string), disabled (boolean), indeterminate (boolean), aria-label (string)
+  Slots: default (text, mui-link, mui-icon-[name])
+- Switch: Toggle switch
+  Props: label (string - required), checked (boolean), disabled (boolean)
+  Slots: on-icon (mui-icon-[name]), off-icon (mui-icon-[name])
+- Field: Form field wrapper (allows children)
+  Props: label (string - required), variant ("default"|"success"|"warning"|"error"), message (string), hideLabel (boolean)
+  Slots: default (mui-input, mui-select)
+- FileUpload: File upload input
+  Props: acceptedFileTypes (string - comma-separated), currentFileName (string)
+- Progress: Progress bar
+  Props: progress (number 0-100), state ("pending"|"syncing")
+
+ACTIONS:
+- Button: Clickable button
+  Props: variant ("primary"|"secondary"|"tertiary"|"attention"), size ("x-small"|"small"|"medium"|"large"), disabled (boolean), aria-label (string)
+  Slots: default (text or mui-icon-[name]), before (mui-icon-[name]), after (mui-icon-[name])
+- Link: Hyperlink
+  Props: href (string), variant ("primary"|"secondary"|"tertiary"|"attention"), size ("x-small"|"small"|"medium"|"large"), target (string), download (boolean), weight (string), disabled (boolean)
+  Slots: default (text or mui-icon-[name]), before (mui-icon-[name]), after (mui-icon-[name])
+- Dropdown: Dropdown menu
+  Props: zindex (string), position ("left"|"right"), persistent (boolean)
+  Slots: action (mui-button - required), default (mui-button, mui-rule, elements - required)
+- Chip: Interactive chip/tag
+  Props: active (boolean), dismiss (boolean), usage (string like "input")
+  Slots: default (text), before (mui-icon-[name], mui-badge, avatars), after (mui-icon-[name], mui-badge, avatars)
+
+NAVIGATION (allow children):
+- TabBar: Tab navigation
+  Props: speed (string like "200ms"), controlsPosition ("top"|"right"|"bottom"|"left"|"top-right"|"top-left"|"bottom-right"|"bottom-left" - when used inside carousel-controller)
+  Slots: default (tab-item - required), controls (named slot when inside carousel-controller)
+- TabItem: Individual tab
+  Props: text (slot default), icon (string like "mui-icon-[name]"), active (boolean), id (string - unique identifier)
+  Slots: default (text - required)
+- TabController: Tab controller container
+  Props: none
+  Slots: default (mui-tab-bar, mui-tab-panel - required)
+- TabPanel: Tab panel content
+  Props: item (string - maps to tab-item id)
+- CarouselController: Carousel container
+  Props: none
+  Slots: default (mui-tab-bar, mui-carousel-panel - required)
+- CarouselPanel: Carousel panel content
+  Props: item (string - maps to tab-item id)
+  Slots: item (named slot - required to place panel in carousel)
+- Stepper: Step indicator
+  Props: direction ("horizontal"|"vertical"), activeStep (number)
+  Slots: default (mui-step elements)
+- Step: Individual step (no children)
+  Props: title (string - required)
+
+FEEDBACK:
+- Message: Persistent message block
+  Props: variant ("plain"|"neutral"|"positive"|"info"|"warning"|"attention")
+  Slots: default (content including heading and text)
+- Alert: Dismissible alert notification
+  Props: variant ("success"|"error"|"warning"|"info")
+  Slots: default (text or content), action (optional action slot)
+- Loader: Loading state wrapper
+  Props: loading (boolean), animation ("pulsate"|"fade-in"|"translate"), direction ("up"|"down"|"left"|"right"), duration (string)
+  Slots: default (content to show when loaded)
+- Badge: Status indicator badge
+  Props: variant ("default"|"positive"|"warning"|"error")
+  Slots: default (text)
+- Progress: Progress indicator
+  Props: progress (number 0-100), state ("pending"|"syncing")
+
+SPACING VALUES:
+000, 025, 050, 100, 200, 300, 400, 500, 600, 700, 800
+
+Pattern: Micro
+Description: Use for very small UI elements, tight gaps, or subtle alignment adjustments
+Values: [000, 025, 050, 100]
+Example Usage:
+	•	Component: Icon Button, Spacing: 025
+	•	Component: Badge, Spacing: 050
+	•	Component: Text Label, Spacing: 100
+
+Pattern: Form Items
+Description: Use for standard form elements, inputs, and button groups
+Values: [300, 400, 500]
+Example Usage:
+	•	Component: VStack as Form Group, Spacing: 300
+	•	Component: HStack as Form Group, Spacing: 400
+
+Pattern: Layout & Spacing Patterns
+Description: Use for headings, grouping of elements, or possible actions
+Values: [300, 400, 500]
+Example Usage:
+	•	Component: VStack as Wrapper, Spacing: 500–800
+
+Pattern: Layout
+Description: Use for larger sections, cards, grids, or generous gaps around content
+Values: [600, 700, 800]
+Example Usage:
+	•	Component: Card, Spacing: 600
+	•	Component: Grid, Spacing: 700
+	•	Component: Section, Spacing: 800
+
+
+When generating UIs:
+- Use VStack as the root for vertical layouts
+- Use HStack for horizontal button groups or side-by-side content
+- Group related inputs with proper spacing
+- Use descriptive IDs like "email-input", "submit-btn", "main-title"
+- Add proper labels to all inputs
+- Use appropriate heading sizes (1=largest, 6=smallest)
+
+ASSETS:
+When using assets, consider these direct links, not made up URL's:
+
+Smart Card Logos
+- 'https://muibook.com/images/logo.png'
+- 'https://muibook.com/images/guides.svg'
+- 'https://muibook.com/images/mui.svg'
+
+Smart Card Background Image
+- 'https://muibook.com/images/placeholder.png'
+- 'https://muibook.com/images/snowy-mint.png'
+- 'https://muibook.com/images/buttercup.png'
+- 'https://muibook.com/images/sapphire.png'
+- 'https://muibook.com/images/crystal.png'
+- 'https://muibook.com/images/premier.png'
+- 'https://muibook.com/images/diamond.png'
+
+Smart Card Partners / Alliances
+- 'https://muibook.com/images/mastercard.svg'
+- 'https://muibook.com/images/visa-black.svg'
+- 'https://muibook.com/images/visa-white.svg'
+- 'https://muibook.com/images/amex.svg'
+- 'https://muibook.com/images/emerald.svg'
+- 'https://muibook.com/images/ruby.svg'
+- 'https://muibook.com/images/sapphire.svg'
+
+FORMATTING:
+-	When adding Card Number to Smart Card, do not include “**** **** ****” — only use the last four digits (e.g., 1234).
+
+`
+  },
+  {
+    role: "assistant",
+    name: "examples",
+    content: JSON.stringify({
+      // Simple vertical layout
+      simpleForm: {
+        type: "VStack",
+        id: "root",
+        props: { space: "var(--space-200)" },
+        children: [
+          {
+            type: "Heading",
+            id: "title",
+            props: { text: "Sign In", size: "2", level: "2" },
+            children: []
+          },
+          {
+            type: "Input",
+            id: "email",
+            props: { label: "Email", type: "email", placeholder: "you@example.com" },
+            children: []
+          },
+          {
+            type: "Input",
+            id: "password",
+            props: { label: "Password", type: "password" },
+            children: []
+          },
+          {
+            type: "Button",
+            id: "submit",
+            props: { text: "Sign In", variant: "primary" },
+            children: []
+          }
+        ]
+      },
+      // Rewards card with smart-card component
+      rewardsCard: {
+        type: "Container",
+        id: "root",
+        props: { size: "medium", center: !0 },
+        children: [
+          {
+            type: "Card",
+            id: "rewards-card",
+            props: {},
+            children: [
+              {
+                type: "CardHeader",
+                id: "rewards-header",
+                props: {},
+                children: [
+                  {
+                    type: "Heading",
+                    id: "rewards-title",
+                    props: { text: "Rewards", size: "4", level: "4" },
+                    children: []
+                  }
+                ]
+              },
+              {
+                type: "CardBody",
+                id: "rewards-body",
+                props: {},
+                children: [
+                  {
+                    type: "VStack",
+                    id: "rewards-content",
+                    props: { space: "var(--space-200)", alignX: "center" },
+                    children: [
+                      {
+                        type: "SmartCard",
+                        id: "rewards-smart-card",
+                        props: {
+                          inverted: !0,
+                          bgColor: void 0,
+                          bgImage: "https://muibook.com/images/diamond.png",
+                          logo: void 0,
+                          logoHeight: void 0,
+                          partner: "https://muibook.com/images/emerald.svg",
+                          number: "1234",
+                          type: "Rewards",
+                          variant: "plain",
+                          state: "default"
+                        },
+                        children: []
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      // Horizontal button group
+      confirmDialog: {
+        type: "VStack",
+        id: "root",
+        props: { space: "var(--space-200)" },
+        children: [
+          {
+            type: "Heading",
+            id: "title",
+            props: { text: "Confirm Action", size: "3", level: "3" },
+            children: []
+          },
+          {
+            type: "Body",
+            id: "message",
+            props: { text: "Are you sure you want to proceed?", size: "medium" },
+            children: []
+          },
+          {
+            type: "HStack",
+            id: "buttons",
+            props: { space: "var(--space-100)", alignX: "end" },
+            children: [
+              {
+                type: "Button",
+                id: "cancel",
+                props: { text: "Cancel", variant: "secondary" },
+                children: []
+              },
+              {
+                type: "Button",
+                id: "confirm",
+                props: { text: "Confirm", variant: "primary" },
+                children: []
+              }
+            ]
+          }
+        ]
+      },
+      // Booking form with multiple input types
+      bookingForm: {
+        type: "VStack",
+        id: "root",
+        props: { space: "var(--space-300)" },
+        children: [
+          {
+            type: "Heading",
+            id: "title",
+            props: { text: "Book Your Table", size: "1", level: "1" },
+            children: []
+          },
+          {
+            type: "Body",
+            id: "subtitle",
+            props: { text: "Reserve your spot at our restaurant", size: "medium" },
+            children: []
+          },
+          {
+            type: "VStack",
+            id: "form-fields",
+            props: { space: "var(--space-200)" },
+            children: [
+              {
+                type: "Input",
+                id: "name",
+                props: { label: "Your Name", type: "text", placeholder: "John Doe" },
+                children: []
+              },
+              {
+                type: "Input",
+                id: "email",
+                props: { label: "Email", type: "email", placeholder: "john@example.com" },
+                children: []
+              },
+              {
+                type: "Input",
+                id: "phone",
+                props: { label: "Phone", type: "tel", placeholder: "+1 (555) 000-0000" },
+                children: []
+              },
+              {
+                type: "HStack",
+                id: "datetime",
+                props: { space: "var(--space-200)" },
+                children: [
+                  {
+                    type: "Input",
+                    id: "date",
+                    props: { label: "Date", type: "date" },
+                    children: []
+                  },
+                  {
+                    type: "Input",
+                    id: "time",
+                    props: { label: "Time", type: "time" },
+                    children: []
+                  }
+                ]
+              },
+              {
+                type: "Select",
+                id: "guests",
+                props: {
+                  label: "Number of Guests",
+                  options: [
+                    { value: "1", label: "1 Guest" },
+                    { value: "2", label: "2 Guests" },
+                    { value: "3", label: "3 Guests" },
+                    { value: "4", label: "4 Guests" },
+                    { value: "5", label: "5+ Guests" }
+                  ]
+                },
+                children: []
+              }
+            ]
+          },
+          {
+            type: "HStack",
+            id: "actions",
+            props: { space: "var(--space-100)", alignX: "end" },
+            children: [
+              {
+                type: "Button",
+                id: "cancel",
+                props: { text: "Cancel", variant: "secondary" },
+                children: []
+              },
+              {
+                type: "Button",
+                id: "submit",
+                props: { text: "Confirm Booking", variant: "primary" },
+                children: []
+              }
+            ]
+          }
+        ]
+      },
+      // Card layout with grid
+      dashboard: {
+        type: "VStack",
+        id: "root",
+        props: { space: "var(--space-400)" },
+        children: [
+          {
+            type: "Heading",
+            id: "title",
+            props: { text: "Dashboard", size: "1", level: "1" },
+            children: []
+          },
+          {
+            type: "Grid",
+            id: "stats-grid",
+            props: { col: "1fr 1fr 1fr", space: "var(--space-200)" },
+            children: [
+              {
+                type: "Card",
+                id: "card-1",
+                props: {},
+                children: [
+                  {
+                    type: "CardBody",
+                    id: "card-1-body",
+                    props: {},
+                    children: [
+                      {
+                        type: "VStack",
+                        id: "card-1-content",
+                        props: { space: "var(--space-100)" },
+                        children: [
+                          {
+                            type: "Body",
+                            id: "label-1",
+                            props: { text: "Total Users", size: "small", weight: "bold" },
+                            children: []
+                          },
+                          {
+                            type: "Heading",
+                            id: "value-1",
+                            props: { text: "1,2,3,4", size: "2", level: "2" },
+                            children: []
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                type: "Card",
+                id: "card-2",
+                props: {},
+                children: [
+                  {
+                    type: "CardBody",
+                    id: "card-2-body",
+                    props: {},
+                    children: [
+                      {
+                        type: "VStack",
+                        id: "card-2-content",
+                        props: { space: "var(--space-100)" },
+                        children: [
+                          {
+                            type: "Body",
+                            id: "label-2",
+                            props: { text: "Revenue", size: "small", weight: "bold" },
+                            children: []
+                          },
+                          {
+                            type: "Heading",
+                            id: "value-2",
+                            props: { text: "$45,678", size: "2", level: "2" },
+                            children: []
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                type: "Card",
+                id: "card-3",
+                props: {},
+                children: [
+                  {
+                    type: "CardBody",
+                    id: "card-3-body",
+                    props: {},
+                    children: [
+                      {
+                        type: "VStack",
+                        id: "card-3-content",
+                        props: { space: "var(--space-100)" },
+                        children: [
+                          {
+                            type: "Body",
+                            id: "label-3",
+                            props: { text: "Active Sessions", size: "small", weight: "bold" },
+                            children: []
+                          },
+                          {
+                            type: "Heading",
+                            id: "value-3",
+                            props: { text: "89", size: "2", level: "2" },
+                            children: []
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      // Contact form with alerts
+      contactForm: {
+        type: "VStack",
+        id: "root",
+        props: { space: "var(--space-300)" },
+        children: [
+          {
+            type: "Heading",
+            id: "title",
+            props: { text: "Contact Us", size: "1", level: "1" },
+            children: []
+          },
+          {
+            type: "Alert",
+            id: "info",
+            props: { text: "We typically respond within 24 hours", variant: "info" },
+            children: []
+          },
+          {
+            type: "VStack",
+            id: "form",
+            props: { space: "var(--space-200)" },
+            children: [
+              {
+                type: "Input",
+                id: "name",
+                props: { label: "Your Name", type: "text" },
+                children: []
+              },
+              {
+                type: "Input",
+                id: "email",
+                props: { label: "Email Address", type: "email" },
+                children: []
+              },
+              {
+                type: "Select",
+                id: "subject",
+                props: {
+                  label: "Subject",
+                  options: [
+                    { value: "general", label: "General Inquiry" },
+                    { value: "support", label: "Technical Support" },
+                    { value: "billing", label: "Billing Question" }
+                  ]
+                },
+                children: []
+              },
+              {
+                type: "Input",
+                id: "message",
+                props: { label: "Message", type: "text", placeholder: "Tell us how we can help..." },
+                children: []
+              }
+            ]
+          },
+          {
+            type: "Button",
+            id: "submit",
+            props: { text: "Send Message", variant: "primary" },
+            children: []
+          }
+        ]
+      },
+      // Settings page with switches
+      settingsPage: {
+        type: "VStack",
+        id: "root",
+        props: { space: "var(--space-400)" },
+        children: [
+          {
+            type: "Heading",
+            id: "title",
+            props: { text: "Settings", size: "1", level: "1" },
+            children: []
+          },
+          {
+            type: "VStack",
+            id: "notifications-section",
+            props: { space: "var(--space-200)" },
+            children: [
+              {
+                type: "Heading",
+                id: "notifications-title",
+                props: { text: "Notifications", size: "3", level: "3" },
+                children: []
+              },
+              {
+                type: "Switch",
+                id: "email-notifications",
+                props: { label: "Email Notifications", checked: !0 },
+                children: []
+              },
+              {
+                type: "Switch",
+                id: "push-notifications",
+                props: { label: "Push Notifications", checked: !1 },
+                children: []
+              },
+              {
+                type: "Switch",
+                id: "sms-notifications",
+                props: { label: "SMS Notifications", checked: !0 },
+                children: []
+              }
+            ]
+          },
+          {
+            type: "Rule",
+            id: "divider",
+            props: {},
+            children: []
+          },
+          {
+            type: "VStack",
+            id: "privacy-section",
+            props: { space: "var(--space-200)" },
+            children: [
+              {
+                type: "Heading",
+                id: "privacy-title",
+                props: { text: "Privacy", size: "3", level: "3" },
+                children: []
+              },
+              {
+                type: "Checkbox",
+                id: "public-profile",
+                props: { label: "Make profile public", checked: !1 },
+                children: []
+              },
+              {
+                type: "Checkbox",
+                id: "show-email",
+                props: { label: "Show email to other users", checked: !1 },
+                children: []
+              }
+            ]
+          },
+          {
+            type: "HStack",
+            id: "actions",
+            props: { space: "var(--space-100)", alignX: "end" },
+            children: [
+              {
+                type: "Button",
+                id: "cancel",
+                props: { text: "Cancel", variant: "secondary" },
+                children: []
+              },
+              {
+                type: "Button",
+                id: "save",
+                props: { text: "Save Changes", variant: "primary" },
+                children: []
+              }
+            ]
+          }
+        ]
+      },
+      // Tabs navigation
+      tabsExample: {
+        type: "VStack",
+        id: "root",
+        props: { space: "var(--space-300)" },
+        children: [
+          {
+            type: "Heading",
+            id: "title",
+            props: { text: "Product Details", size: "1", level: "1" },
+            children: []
+          },
+          {
+            type: "TabBar",
+            id: "tabs",
+            props: {},
+            children: [
+              {
+                type: "TabItem",
+                id: "overview-tab",
+                props: { text: "Overview", active: !0 },
+                children: []
+              },
+              {
+                type: "TabItem",
+                id: "specs-tab",
+                props: { text: "Specifications", active: !1 },
+                children: []
+              },
+              {
+                type: "TabItem",
+                id: "reviews-tab",
+                props: { text: "Reviews", active: !1 },
+                children: []
+              }
+            ]
+          },
+          {
+            type: "Card",
+            id: "content",
+            props: {},
+            children: [
+              {
+                type: "CardBody",
+                id: "product-details-card-body",
+                props: {},
+                children: [
+                  {
+                    type: "VStack",
+                    id: "tab-content",
+                    props: { space: "var(--space-200)" },
+                    children: [
+                      {
+                        type: "Heading",
+                        id: "content-title",
+                        props: { text: "Product Overview", size: "3", level: "3" },
+                        children: []
+                      },
+                      {
+                        type: "Body",
+                        id: "content-text",
+                        props: { text: "This is a high-quality product designed for professionals.", size: "medium" },
+                        children: []
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    })
+  }
 ];
 export {
-  i as muiPrompts
+  i as muiA2UIPrompts,
+  e as muiPrompts
 };