@discourser/design-system 0.15.1 → 0.18.0

package/dist/{chunk-SBKRSXSZ.js → chunk-SNUJBT5R.js}

@@ -1390,13 +1390,16 @@ var accordion = defineSlotRecipe({
       overflow: "hidden",
       borderRadius: "var(--accordion-radius)",
       _open: {
-        animationName: "expand-height, fade-in",
-        animationDuration: "normal"
+        animationName: "slide-down",
+        animationDuration: "250ms",
+        animationTimingFunction: "ease-out",
+        animationFillMode: "forwards"
       },
       _closed: {
-        animationName: "collapse-height, fade-out",
-        animationDuration: "normal",
-        display: "none"
+        animationName: "slide-up",
+        animationDuration: "200ms",
+        animationTimingFunction: "ease-out",
+        animationFillMode: "forwards"
       }
     }
   },
@@ -1856,6 +1859,38 @@ var breadcrumb = defineSlotRecipe({
           _hover: { color: "fg.default" },
           _currentPage: { color: "fg.default" }
         }
+      },
+      discourser: {
+        list: {
+          gap: "2.5",
+          alignItems: "center"
+        },
+        item: {
+          bg: "transparent",
+          px: "1.5",
+          py: "1.5",
+          borderRadius: "l2",
+          h: "9",
+          display: "inline-flex",
+          alignItems: "center",
+          _last: {
+            color: "fg.default",
+            fontWeight: "medium",
+            fontSize: "md",
+            fontFeatureSettings: "'liga' 0, 'calt' 0"
+          }
+        },
+        link: {
+          color: "fg.subtle",
+          fontWeight: "medium",
+          fontSize: "lg",
+          _hover: { color: "fg.default" },
+          _currentPage: { color: "fg.default", fontWeight: "semibold" }
+        },
+        separator: {
+          color: "primary.7",
+          _icon: { width: "27px", height: "27px" }
+        }
       }
     },
     size: {
@@ -1870,6 +1905,115 @@ var breadcrumb = defineSlotRecipe({
     size: "md"
   }
 });
+var navigationMenu = defineSlotRecipe({
+  className: "navigation-menu",
+  slots: [
+    "root",
+    "section",
+    "sectionTrigger",
+    "sectionIcon",
+    "sectionTitle",
+    "sectionIndicator",
+    "sectionContent",
+    "itemList",
+    "item",
+    "itemLink"
+  ],
+  base: {
+    // ── Token mappings verified against Figma MCP output (node 38:4046) ──
+    // Figma file: GaHmFfmvO4loUzuZS4TgEz
+    root: {
+      bg: "surface.dim",
+      // Figma: #f5f1eb warm sage sidebar bg
+      width: "full",
+      py: "2"
+    },
+    section: {
+      borderBottom: "none"
+    },
+    sectionTrigger: {
+      // Layout-only props — no conflicts with accordion recipe here
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "full",
+      cursor: "pointer",
+      // NOTE: fontSize, fontWeight, borderRadius, p, bg, color are applied via
+      // css={{}} on Accordion.ItemTrigger in the component (utilities layer > recipes layer).
+      // See ScenarioCard.tsx for the same pattern.
+      _hover: {
+        bg: "surface.container.high"
+      }
+    },
+    sectionIcon: {
+      flexShrink: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "6",
+      // 24px container
+      height: "6",
+      color: "primary.50",
+      // olive green icons — Figma: #518500
+      fontSize: "20px"
+      // icon SVGs use width/height: 1em → sets 20×20px
+    },
+    sectionTitle: {
+      flex: 1,
+      textAlign: "start"
+      // Font styles inherited from trigger's css={{}} utility overrides
+    },
+    sectionIndicator: {
+      // color set via css={{}} on Accordion.ItemIndicator (utilities > recipes)
+      _open: {
+        rotate: "180deg"
+      }
+    },
+    sectionContent: {
+      overflow: "hidden",
+      borderRadius: "0"
+      // override accordion's default border-radius
+    },
+    itemList: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      pt: "1",
+      pb: "2"
+    },
+    item: {},
+    itemLink: {
+      display: "block",
+      py: "2",
+      // Figma: 5px top/bottom
+      pl: "8",
+      // Figma: 30px left indent → spacing.8 = 32px
+      pr: "2",
+      // Figma: 5px right padding
+      borderRadius: "l3",
+      // Figma: 8px
+      textDecoration: "none",
+      fontSize: "md",
+      // Figma: 16px
+      fontWeight: "norma",
+      // Figma: Inter Medium 500
+      lineHeight: "1",
+      color: "onSurface",
+      // Figma: #363636
+      cursor: "pointer",
+      _hover: {
+        bg: "surface.container.high"
+        // Figma: #ebe7e1
+      },
+      // Figma active state: surface.container.low (NOT primary.container)
+      '&[data-active="true"]': {
+        bg: "surface.container.low",
+        // Figma: #f3f4e9 → surfaceContainerLow
+        color: "onSurface"
+      }
+    }
+  }
+});
 var switchRecipe = defineSlotRecipe({
   className: "switchComponent",
   jsx: ["Switch", /Switch\.+/],
@@ -3527,6 +3671,128 @@ var stepper = defineSlotRecipe({
     colorPalette: "primary"
   }
 });
+var contentCard = defineSlotRecipe({
+  className: "content-card",
+  slots: [
+    "root",
+    "header",
+    "title",
+    "badgeBar",
+    "body",
+    "section",
+    "sectionTitle",
+    "separator",
+    "list",
+    "listItem"
+  ],
+  base: {
+    root: {
+      bg: "neutral.1",
+      borderRadius: "xl",
+      borderWidth: "2px",
+      borderColor: "border.default",
+      display: "flex",
+      flexDirection: "column",
+      w: "full"
+    },
+    header: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4"
+    },
+    title: {
+      fontFamily: "heading",
+      fontWeight: "semibold",
+      fontSize: "2xl",
+      color: "fg.default",
+      fontVariationSettings: "'SOFT' 0, 'WONK' 1"
+    },
+    badgeBar: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "2.5",
+      px: "2.5",
+      py: "1"
+    },
+    body: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "9",
+      fontSize: "xl",
+      lineHeight: "1.4",
+      color: "fg.default"
+    },
+    section: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "5"
+    },
+    sectionTitle: {
+      fontFamily: "heading",
+      fontWeight: "semibold",
+      fontSize: "2xl",
+      color: "fg.default",
+      fontVariationSettings: "'SOFT' 0, 'WONK' 1",
+      px: "2.5",
+      py: "2.5"
+    },
+    separator: {
+      borderTopWidth: "1px",
+      borderColor: "border.default",
+      w: "full",
+      my: "4"
+    },
+    list: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "5",
+      listStyleType: "disc",
+      ps: "8"
+    },
+    listItem: {
+      fontSize: "xl",
+      lineHeight: "1.4",
+      color: "fg.default"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: { maxW: "xl", pt: "6", px: "6", pb: "6" },
+        title: { fontSize: "xl" },
+        body: { fontSize: "lg" },
+        listItem: { fontSize: "lg" }
+      },
+      md: {
+        root: { maxW: "2xl", pt: "10", px: "10", pb: "10", gap: "6" },
+        title: { fontSize: "2xl" },
+        body: { fontSize: "xl" },
+        listItem: { fontSize: "xl" }
+      },
+      lg: {
+        root: { maxW: "4xl", pt: "12", px: "12", pb: "12", gap: "8" },
+        title: { fontSize: "3xl" },
+        body: { fontSize: "xl" },
+        listItem: { fontSize: "xl" }
+      }
+    },
+    variant: {
+      elevated: {
+        root: { boxShadow: "lg", borderWidth: "0" }
+      },
+      outline: {
+        root: { borderWidth: "2px", borderColor: "border.default" }
+      },
+      flat: {
+        root: { borderWidth: "0", bg: "transparent" }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
 var scenarioCard = defineSlotRecipe({
   className: "scenario-card",
   // Slots cover only scenario-specific styling.
@@ -3752,6 +4018,193 @@ var scenarioQueue = defineSlotRecipe({
     }
   }
 });
+var scenarioSettings = defineSlotRecipe({
+  className: "scenario-settings",
+  // ── Token mappings verified against Figma MCP output (node 38:4186) ──
+  // Figma file: GaHmFfmvO4loUzuZS4TgEz — "Discourser Queue Right Accordion"
+  slots: [
+    "root",
+    "section",
+    "sectionTrigger",
+    "triggerLabel",
+    "sectionIndicator",
+    "sectionContent",
+    // Info panels (sections 1-4): surfacevariant bg, explanation card, adjustments
+    "infoPanel",
+    "explanationCard",
+    "explanationTitle",
+    "explanationList",
+    "explanationItem",
+    "levelLabel",
+    "adjustmentsRow",
+    // Radio panels (sections 5-6): neutral.1 bg, radio group, badge
+    "radioPanel",
+    "radioPanelTitle",
+    "radioCurrentRow",
+    "radioCurrentLabel",
+    "currentlyBadge"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      width: "full",
+      cursor: "default"
+    },
+    section: {
+      // Remove the accordion's default borderBottom
+      borderBottom: "none",
+      width: "full"
+    },
+    sectionTrigger: {
+      // Layout — non-conflicting props only.
+      // fontSize, fontWeight, borderRadius, bg, color, py applied via css={{}} in component.
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "4",
+      width: "full",
+      px: "5",
+      // 20px — Figma spec
+      cursor: "pointer"
+    },
+    triggerLabel: {
+      flex: 1,
+      textAlign: "start",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    sectionIndicator: {
+      // color applied via css={{}} on ItemIndicator
+      flexShrink: 0,
+      _open: {
+        rotate: "180deg"
+      }
+    },
+    sectionContent: {
+      overflow: "hidden",
+      borderRadius: "0",
+      width: "full"
+    },
+    // ── Info Panel (sections 1-4) ─────────────────────────────────────────────
+    // Figma: bg = surfacevariant (#E1E4D5) — closest token: surface.container.highest (#E2E3D8)
+    infoPanel: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "5",
+      // 20px — Figma spec
+      p: "5",
+      // 20px — Figma spec
+      bg: "surface.container.highest",
+      width: "full"
+    },
+    // Figma: bg = neutral/99 (#FDFCF5), border = surfacevariant, rounded-8, p-20
+    explanationCard: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4",
+      // 16px
+      p: "5",
+      // 20px
+      bg: "neutral.1",
+      // neutral[99] = #FDFCF5 ✓
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "surface.container.highest",
+      borderRadius: "l3"
+      // 8px
+    },
+    // Figma: Inter Medium 20px, --dark-surfacecontainerhigh (#282b24 ≈ onSurface)
+    explanationTitle: {
+      fontSize: "lg",
+      fontWeight: "semibold",
+      color: "onSurface",
+      lineHeight: "1"
+    },
+    explanationList: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3",
+      // 12px between items
+      listStyleType: "disc",
+      pl: "5"
+      // indent for disc markers
+    },
+    explanationItem: {
+      fontSize: "sm",
+      // 16px — Figma spec
+      lineHeight: "1.4",
+      color: "fg.default"
+    },
+    // Figma: Inter Bold — the "Beginner:", "Intermediate:", "Advanced:" labels
+    levelLabel: {
+      fontWeight: "bold",
+      color: "fg.default"
+    },
+    adjustmentsRow: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "full"
+    },
+    // ── Radio Panel (sections 5-6) ────────────────────────────────────────────
+    // Figma: bg = neutral/99 (#FDFCF5)
+    radioPanel: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "6",
+      // 24px
+      p: "5",
+      // 20px
+      bg: "neutral.1",
+      // neutral[99] = #FDFCF5 ✓
+      width: "full"
+    },
+    // Figma: Inter Medium 20px, #363636 ≈ onSurface
+    radioPanelTitle: {
+      fontSize: "lg",
+      fontWeight: "semibold",
+      color: "onSurface",
+      lineHeight: "1"
+    },
+    radioCurrentRow: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2.5",
+      // 10px — Figma spec
+      mt: "2.5"
+      // space below panel title
+    },
+    // Figma: Inter SemiBold 18px, #363636
+    radioCurrentLabel: {
+      fontSize: "md",
+      fontWeight: "semibold",
+      color: "onSurface",
+      whiteSpace: "nowrap"
+    },
+    // Figma: bg = dark-primary (#B1D18A) = inversePrimary, fully rounded pill
+    // px-16, py-6, font: Geist/12px, color: #2c2a27 ≈ fg.default
+    currentlyBadge: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "1.5",
+      px: "4",
+      // 16px
+      py: "1.5",
+      // 6px
+      bg: "inversePrimary",
+      // #B1D18A light mode ✓
+      color: "fg.default",
+      borderRadius: "full",
+      fontSize: "xs",
+      // 12px
+      fontWeight: "normal",
+      lineHeight: "1",
+      whiteSpace: "nowrap"
+    }
+  }
+});
 var layerStyles = defineLayerStyles({
   disabled: {
     value: {
@@ -3900,6 +4353,7 @@ var discourserPandaPreset = definePreset({
         tabs,
         // Navigation
         breadcrumb,
+        navigationMenu,
         // Form Elements
         switchComponent: switchRecipe,
         checkbox,
@@ -3916,8 +4370,10 @@ var discourserPandaPreset = definePreset({
         tooltip,
         // Custom Components
         stepper,
+        contentCard,
         scenarioCard,
-        scenarioQueue
+        scenarioQueue,
+        scenarioSettings
       }
     }
   },
@@ -3939,5 +4395,5 @@ var discourserPandaPreset = definePreset({
 });
 
 export { discourserPandaPreset, material3Language, transformToPandaTheme };
-//# sourceMappingURL=chunk-SBKRSXSZ.js.map
-//# sourceMappingURL=chunk-SBKRSXSZ.js.map
+//# sourceMappingURL=chunk-SNUJBT5R.js.map
+//# sourceMappingURL=chunk-SNUJBT5R.js.map