@discourser/design-system 0.14.0 → 0.15.1

package/dist/{chunk-QC44JPCA.cjs → chunk-ABC7N32K.cjs}

@@ -770,6 +770,10 @@ var m3SemanticTokens = dev.defineSemanticTokens.colors({
   inverseSurface: { value: { base: semantic.inverseSurface, _dark: semanticDark.inverseSurface } },
   inverseOnSurface: { value: { base: semantic.inverseOnSurface, _dark: semanticDark.inverseOnSurface } },
   inversePrimary: { value: { base: semantic.inversePrimary, _dark: semanticDark.inversePrimary } },
+  // Not standard M3 tokens, but follow inversePrimary's pattern:
+  // light mode = dark-palette value, dark mode = light-palette value.
+  inverseSecondary: { value: { base: semanticDark.secondary, _dark: semantic.secondary } },
+  inverseTertiary: { value: { base: semanticDark.tertiary, _dark: semantic.tertiary } },
   // Scrim/Shadow
   scrim: { value: { base: semantic.scrim, _dark: semanticDark.scrim } }
 });
@@ -1093,7 +1097,7 @@ var inputGroup = dev.defineSlotRecipe({
 });
 var field = dev.defineSlotRecipe({
   className: "field",
-  slots: anatomy.fieldAnatomy.keys(),
+  slots: ["root", "errorText", "helperText", "input", "label", "select", "textarea", "requiredIndicator"],
   base: {
     root: {
       display: "flex",
@@ -1795,6 +1799,79 @@ var tabs = dev.defineSlotRecipe({
     variant: "line"
   }
 });
+var breadcrumb = dev.defineSlotRecipe({
+  className: "breadcrumb",
+  slots: ["root", "list", "link", "item", "separator", "ellipsis"],
+  base: {
+    list: {
+      alignItems: "center",
+      display: "flex",
+      listStyle: "none",
+      wordBreak: "break-word"
+    },
+    link: {
+      alignItems: "center",
+      borderRadius: "l1",
+      display: "inline-flex",
+      focusRing: "outside",
+      gap: "2",
+      outline: "0",
+      textDecoration: "none",
+      transition: "color",
+      _icon: { boxSize: "1em" }
+    },
+    item: {
+      display: "inline-flex",
+      alignItems: "center",
+      color: "fg.muted",
+      _last: {
+        color: "fg.default"
+      }
+    },
+    separator: {
+      color: "fg.subtle",
+      _icon: { boxSize: "1em" },
+      _rtl: { rotate: "180deg" }
+    },
+    ellipsis: {
+      alignItems: "center",
+      color: "fg.muted",
+      display: "inline-flex",
+      justifyContent: "center",
+      _icon: { boxSize: "1em" }
+    }
+  },
+  variants: {
+    variant: {
+      underline: {
+        link: {
+          textDecoration: "underline",
+          textDecorationThickness: "0.1em",
+          textUnderlineOffset: "0.125em",
+          textDecorationColor: "fg.subtle",
+          _hover: { textDecorationColor: "fg.default" }
+        }
+      },
+      plain: {
+        link: {
+          color: "fg.muted",
+          _hover: { color: "fg.default" },
+          _currentPage: { color: "fg.default" }
+        }
+      }
+    },
+    size: {
+      xs: { list: { gap: "1", textStyle: "xs" } },
+      sm: { list: { gap: "1", textStyle: "sm" } },
+      md: { list: { gap: "1.5", textStyle: "md" } },
+      lg: { list: { gap: "2", textStyle: "lg" } }
+    }
+  },
+  defaultVariants: {
+    variant: "plain",
+    size: "md"
+  }
+});
 var switchRecipe = dev.defineSlotRecipe({
   className: "switchComponent",
   jsx: ["Switch", /Switch\.+/],
@@ -1929,7 +2006,7 @@ var switchRecipe = dev.defineSlotRecipe({
   }
 });
 var checkbox = dev.defineSlotRecipe({
-  slots: anatomy.checkboxAnatomy.keys(),
+  slots: ["root", "label", "control", "indicator", "group"],
   className: "checkbox",
   base: {
     root: {
@@ -2032,7 +2109,7 @@ var checkbox = dev.defineSlotRecipe({
 });
 var radioGroup = dev.defineSlotRecipe({
   className: "radio-group",
-  slots: anatomy.radioGroupAnatomy.keys(),
+  slots: ["root", "label", "item", "itemText", "itemControl", "indicator"],
   base: {
     root: {
       display: "flex",
@@ -2550,7 +2627,7 @@ var slider = dev.defineSlotRecipe({
 });
 var avatar = dev.defineSlotRecipe({
   className: "avatar",
-  slots: anatomy.avatarAnatomy.keys(),
+  slots: ["root", "image", "fallback"],
   base: {
     root: {
       display: "inline-flex",
@@ -2745,7 +2822,7 @@ var badge = dev.defineRecipe({
   }
 });
 var progress = dev.defineSlotRecipe({
-  slots: anatomy.progressAnatomy.keys(),
+  slots: ["root", "label", "track", "range", "valueText", "view", "circle", "circleTrack", "circleRange"],
   className: "progress",
   base: {
     root: {
@@ -2915,7 +2992,7 @@ var skeleton = dev.defineRecipe({
 });
 var toast = dev.defineSlotRecipe({
   className: "toast",
-  slots: anatomy.toastAnatomy.keys(),
+  slots: ["group", "root", "title", "description", "actionTrigger", "closeTrigger"],
   base: {
     root: {
       alignItems: "start",
@@ -3189,7 +3266,7 @@ var popover = dev.defineSlotRecipe({
 });
 var tooltip = dev.defineSlotRecipe({
   className: "tooltip",
-  slots: anatomy.tooltipAnatomy.keys(),
+  slots: ["trigger", "arrow", "arrowTip", "positioner", "content"],
   base: {
     content: {
       "--tooltip-bg": "colors.gray.solid.bg",
@@ -3452,6 +3529,231 @@ var stepper = dev.defineSlotRecipe({
     colorPalette: "primary"
   }
 });
+var scenarioCard = dev.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
+  }
+});
+var scenarioQueue = dev.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"
+    }
+  }
+});
 var layerStyles = dev.defineLayerStyles({
   disabled: {
     value: {
@@ -3598,6 +3900,8 @@ var discourserPandaPreset = dev.definePreset({
         accordion,
         drawer,
         tabs,
+        // Navigation
+        breadcrumb,
         // Form Elements
         switchComponent: switchRecipe,
         checkbox,
@@ -3613,7 +3917,9 @@ var discourserPandaPreset = dev.definePreset({
         popover,
         tooltip,
         // Custom Components
-        stepper
+        stepper,
+        scenarioCard,
+        scenarioQueue
       }
     }
   },
@@ -3637,5 +3943,5 @@ var discourserPandaPreset = dev.definePreset({
 exports.discourserPandaPreset = discourserPandaPreset;
 exports.material3Language = material3Language;
 exports.transformToPandaTheme = transformToPandaTheme;
-//# sourceMappingURL=chunk-QC44JPCA.cjs.map
-//# sourceMappingURL=chunk-QC44JPCA.cjs.map
+//# sourceMappingURL=chunk-ABC7N32K.cjs.map
+//# sourceMappingURL=chunk-ABC7N32K.cjs.map