@discourser/design-system 0.15.0 → 0.17.0

package/src/preset/recipes/content-card.ts

@@ -0,0 +1,124 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const 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',
+  },
+});

package/src/preset/recipes/field.ts

@@ -1,9 +1,8 @@
-import { fieldAnatomy } from '@ark-ui/react/anatomy'
 import { defineSlotRecipe } from '@pandacss/dev'
 
 export const field = defineSlotRecipe({
   className: 'field',
-  slots: fieldAnatomy.keys(),
+  slots: ['root', 'errorText', 'helperText', 'input', 'label', 'select', 'textarea', 'requiredIndicator'],
   base: {
     root: {
       display: 'flex',

package/src/preset/recipes/index.ts

@@ -11,6 +11,10 @@ export * from './accordion';
 export * from './drawer';
 export * from './tabs';
 
+// Navigation
+export * from './breadcrumb';
+export * from './navigation-menu';
+
 // Form elements
 export * from './switch';
 export * from './checkbox';
@@ -38,3 +42,10 @@ export * from './heading';
 // Utilities
 export * from './absolute-center';
 export * from './group';
+
+// Custom Components
+export * from './stepper';
+export * from './content-card';
+export * from './scenario-card';
+export * from './scenario-queue';
+export * from './scenario-settings';

package/src/preset/recipes/navigation-menu.ts

@@ -0,0 +1,97 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const 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',
+      },
+    },
+  },
+});

package/src/preset/recipes/progress.ts

@@ -1,8 +1,7 @@
-import { progressAnatomy } from '@ark-ui/react/anatomy'
 import { defineSlotRecipe } from '@pandacss/dev'
 
 export const progress = defineSlotRecipe({
-  slots: progressAnatomy.keys(),
+  slots: ['root', 'label', 'track', 'range', 'valueText', 'view', 'circle', 'circleTrack', 'circleRange'],
   className: 'progress',
   base: {
     root: {

package/src/preset/recipes/radio-group.ts

@@ -1,9 +1,8 @@
-import { radioGroupAnatomy } from '@ark-ui/react/anatomy'
 import { defineSlotRecipe } from '@pandacss/dev'
 
 export const radioGroup = defineSlotRecipe({
   className: 'radio-group',
-  slots: radioGroupAnatomy.keys(),
+  slots: ['root', 'label', 'item', 'itemText', 'itemControl', 'indicator'],
   base: {
     root: {
       display: 'flex',

package/src/preset/recipes/scenario-card.ts

@@ -0,0 +1,151 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const scenarioCard = defineSlotRecipe({
+  className: 'scenario-card',
+  // Slots cover only scenario-specific styling.
+  // Base card appearance (bg, border, borderRadius, overflow) comes from
+  // Card.Root variant="outline" via the card slot recipe.
+  // Layout structure (flex, gap, alignment) comes from Panda CSS JSX primitives.
+  slots: ['root', 'positionBadge', 'dragHandle', 'title', 'switchRow', 'switchLabel', 'difficultyBadge', 'durationBadge'],
+  base: {
+    root: {
+      // Left accent border — inactive cards use transparent to preserve card width.
+      borderLeftWidth: '3px',
+      borderLeftStyle: 'solid',
+      borderLeftColor: 'transparent',
+      // Custom purple-tinted shadow from Figma spec (0px 2px 8px 0px rgba(167,139,250,0.15)).
+      // This overrides Card.Root variant="elevated" (M3 level4) which is too heavy.
+      // Raw value intentional: this non-standard shadow has no M3 elevation equivalent.
+      boxShadow: '0px 2px 8px 0px rgba(167, 139, 250, 0.15)',
+      // Figma cards use neutral/99 (#FDFCF5) — a warm off-white.
+      // neutral.surface.bg resolves to white (#FFFFFF) in light mode, so we override.
+      bg: 'neutral.1',
+      transition: 'border-color',
+      transitionDuration: 'normal',
+    },
+
+    // Circle primitive handles: w/h (size="12"), borderRadius:full, flex centering.
+    // Recipe handles: visual appearance (border, color, font).
+    positionBadge: {
+      fontSize: 'md',
+      fontWeight: 'semibold',
+      flexShrink: 0,
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'neutral.6',
+      color: 'fg.default',
+      bg: 'transparent',
+      transition: 'all',
+      transitionDuration: 'normal',
+    },
+
+    dragHandle: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      // TODO: Create semantic token (e.g. colors.icon.subdued) that maps to secondary.6
+      // Using palette bridge value directly until semantic token is defined
+      color: 'secondary.6',
+      cursor: 'grab',
+      flexShrink: 0,
+      width: '9',
+      height: '10',
+      _active: { cursor: 'grabbing' },
+    },
+
+    title: {
+      width: 'full',
+      fontSize: 'sm',
+      fontWeight: 'semibold',
+      lineHeight: '1.4',
+      color: 'fg.default',
+    },
+
+    // HStack handles: display:flex, alignItems:center, justifyContent:space-between.
+    switchRow: {
+      width: 'full',
+      pt: '1',
+      mt: '1',
+    },
+
+    switchLabel: {
+      fontSize: 'sm',
+      color: 'fg.muted',
+      fontWeight: 'medium',
+    },
+
+    // Difficulty pill: M3 container tokens selected by data-difficulty attribute.
+    // Default (beginner) = primaryContainer; overridden for intermediate/advanced.
+    difficultyBadge: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      borderRadius: 'l2',
+      px: '2',
+      h: '5',
+      fontSize: 'xs',
+      fontWeight: 'medium',
+      bg: 'm3Primary.container',
+      color: 'onM3Primary.container',
+      '&[data-difficulty="intermediate"]': {
+        bg: 'm3Secondary.container',
+        color: 'onM3Secondary.container',
+      },
+      '&[data-difficulty="advanced"]': {
+        bg: 'm3Tertiary.container',
+        color: 'onM3Tertiary.container',
+      },
+    },
+
+    // Duration pill: per-difficulty inverse palette colors.
+    // Default (beginner): inversePrimary  → semanticDark.primary   (#B1D18A light, #4C662B dark)
+    // Intermediate:       inverseSecondary → semanticDark.secondary (#BFCBAD light, #586249 dark)
+    // Advanced:           inverseTertiary  → semanticDark.tertiary  (#A0D0CB light, #386663 dark)
+    durationBadge: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '1',
+      borderRadius: 'l2',
+      px: '2',
+      h: '5',
+      fontSize: 'xs',
+      fontWeight: 'medium',
+      bg: 'inversePrimary',
+      color: 'onSurface',
+      '&[data-difficulty="intermediate"]': {
+        bg: 'inverseSecondary',
+      },
+      '&[data-difficulty="advanced"]': {
+        bg: 'inverseTertiary',
+      },
+    },
+  },
+
+  variants: {
+    isActive: {
+      true: {
+        root: {
+          borderLeftColor: 'primary.6',
+        },
+        positionBadge: {
+          bg: 'primary.6',
+          color: 'white',
+          borderColor: 'primary.6',
+        },
+      },
+      false: {},
+    },
+    isDragging: {
+      true: {
+        root: {
+          opacity: '0.4',
+        },
+      },
+      false: {},
+    },
+  },
+
+  defaultVariants: {
+    isActive: false,
+    isDragging: false,
+  },
+})

package/src/preset/recipes/scenario-queue.ts

@@ -0,0 +1,99 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const scenarioQueue = defineSlotRecipe({
+  className: 'scenario-queue',
+  description: 'Panel component with tabs and draggable scenario cards',
+
+  slots: [
+    'root',
+    'header',
+    'title',
+    'count',
+    'tabsInner',
+    'tabList',
+    'tabsContent',
+    'scrollArea',
+    'emptyState',
+    'addButtonArea',
+    'addButton',
+  ],
+
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      h: 'full',
+      minH: '320px',
+      minW: '250px',
+      maxW: '300px',
+      overflow: 'hidden',
+      bg: 'surface',
+    },
+
+    header: {
+      px: '4',
+      pt: '4',
+      pb: '2',
+      flexShrink: 0,
+    },
+
+    title: {
+      fontWeight: 'semibold',
+      fontSize: 'md',
+      color: 'fg.default',
+    },
+
+    count: {
+      fontSize: 'xs',
+      color: 'fg.muted',
+      mt: '0.5',
+    },
+
+    // Applied directly to Tabs.Root className — handles the flex column growth
+    // and scroll containment without a redundant wrapper div.
+    tabsInner: {
+      flex: '1',
+      minHeight: '0',
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+
+    tabList: {
+      px: '4',
+      flexShrink: 0,
+    },
+
+    // Applied to each Tabs.Content — allows independent scrolling per tab.
+    tabsContent: {
+      flex: '1',
+      minHeight: '0',
+      overflowY: 'auto',
+    },
+
+    // Block layout so cards size to natural height and the container scrolls.
+    scrollArea: {
+      px: '4',
+      py: '3',
+      '& > * + *': { marginTop: '6' },
+    },
+
+    // Center primitive handles the flex centering; recipe provides spacing/text.
+    emptyState: {
+      py: '12',
+      fontSize: 'sm',
+      color: 'fg.muted',
+    },
+
+    addButtonArea: {
+      px: '4',
+      pb: '4',
+      pt: '2',
+      flexShrink: 0,
+    },
+
+    addButton: {
+      width: 'full',
+    },
+  },
+})