@repobuddy/storybook 2.12.0 → 2.14.0

package/esm/index.d.ts

@@ -42,10 +42,12 @@ declare function ShowHtml({
 //#endregion
 //#region src/components/story_card.d.ts
 /**
- * Visual status of the card, affecting its background color.
- * - `'error'`: Red background (rbsb:bg-red-100 rbsb:dark:bg-red-900)
- * - `'warn'`: Yellow background (rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900)
- * - `'info'`: Blue background (rbsb:bg-sky-100 rbsb:dark:bg-sky-900) - default
+ * Resolved appearance of the card (error | warn | info | source | output).
+ * Used for styling; when only `status` is provided it is mapped to this.
+ */
+type StoryCardAppearance = 'error' | 'warn' | 'info' | 'source' | 'output';
+/**
+ * @deprecated Use `appearance` instead. Visual status of the card; equivalent to `appearance` for 'error' | 'warn' | 'info'.
  */
 type StoryCardStatus = 'error' | 'warn' | 'info' | undefined;
 type StoryCardProps = {
@@ -55,12 +57,18 @@ type StoryCardProps = {
    */
   title?: ReactNode | undefined;
   /**
-   * Visual status of the card, affecting its background color.
-   * - `'error'`: Red background (rbsb:bg-red-100 rbsb:dark:bg-red-900)
-   * - `'warn'`: Yellow background (rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900)
-   * - `'info'`: Blue background (rbsb:bg-sky-100 rbsb:dark:bg-sky-900) - default
+   * @deprecated Use `appearance` instead. When set, behaves like `appearance` for the same value.
    */
   status?: StoryCardStatus;
+  /**
+   * Appearance of the card, affecting its background and border color.
+   * - `'error'`: Red
+   * - `'warn'`: Yellow
+   * - `'info'`: Blue (default when neither appearance nor status is set)
+   * - `'source'`: Transparent
+   * - `'output'`: Green
+   */
+  appearance?: StoryCardAppearance | undefined;
   /**
    * Additional CSS classes or a function to compute classes.
    *
@@ -68,7 +76,7 @@ type StoryCardProps = {
    * If a function is provided, it receives the card state and default className,
    * and should return the final className string.
    */
-  className?: ((state: Pick<StoryCardProps, 'status'> & {
+  className?: ((state: Pick<StoryCardProps, 'status' | 'appearance'> & {
     defaultClassName: string;
   }) => string) | string | undefined;
   /**
@@ -77,14 +85,18 @@ type StoryCardProps = {
    */
   children?: ReactNode | undefined;
 };
+type StoryCardThemeState = Pick<StoryCardProps, 'status' | 'appearance'> & {
+  defaultClassName: string;
+};
 /**
- * A card component that displays information with optional title and status styling.
+ * A card component that displays information with optional title and appearance styling.
  *
  * @param props - StoryCard component props
  * @returns A section element containing the card content
  */
 declare function StoryCard({
   status,
+  appearance,
   className,
   children,
   title
@@ -115,6 +127,10 @@ declare function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Ar
 //#endregion
 //#region src/decorators/with_story_card.d.ts
 type WithStoryCardProps = Omit<StoryCardProps, 'children' | 'className'> & {
+  /**
+   * @deprecated Use `appearance` instead. When set, behaves like `appearance` for the same value.
+   */
+  status?: StoryCardStatus;
   /**
    * Additional CSS classes or a function to compute classes.
    *
@@ -122,7 +138,7 @@ type WithStoryCardProps = Omit<StoryCardProps, 'children' | 'className'> & {
    * If a function is provided, it receives the card state and default className,
    * and should return the final className string.
    */
-  className?: ((state: Pick<StoryCardProps, 'status'> & {
+  className?: ((state: Pick<StoryCardProps, 'status' | 'appearance'> & {
     defaultClassName: string;
   }) => string) | string | undefined;
   /**
@@ -213,10 +229,12 @@ type WithStoryCardProps = Omit<StoryCardProps, 'children' | 'className'> & {
  * - If `content` is not provided, it will automatically use the story description,
  *   or fall back to the component description.
  * - Cards are collected and displayed in the order they are defined in the decorators array.
+ * - The `status` option is deprecated; use `appearance` instead for the same behavior and additional variants (`source`, `output`).
  */
 declare function withStoryCard<TRenderer extends Renderer = Renderer>({
   title,
   status,
+  appearance,
   content: contentProp,
   className,
   ...rest
@@ -722,12 +740,13 @@ interface StoryCardParam {
      */
     title?: ReactNode | undefined;
     /**
-     * Visual status of the card, affecting its background color.
-     * - `'error'`: Red background
-     * - `'warn'`: Yellow background
-     * - `'info'`: Blue background - default
+     * @deprecated Use `appearance` instead.
      */
     status?: StoryCardStatus;
+    /**
+     * Appearance of the card (error | warn | info | source | output). Default: `'info'`.
+     */
+    appearance?: StoryCardAppearance | undefined;
     /**
      * Additional CSS classes or a function to compute classes.
      *
@@ -735,7 +754,7 @@ interface StoryCardParam {
      * If a function is provided, it receives the card state and default className,
      * and should return the final className string.
      */
-    className?: ((state: Pick<StoryCardProps, 'status'> & {
+    className?: ((state: Pick<StoryCardProps, 'status' | 'appearance'> & {
       defaultClassName: string;
     }) => string) | string | undefined;
     /**
@@ -921,4 +940,4 @@ type ExtendStoryObj<TMetaOrCmpOrArgs, S extends StoryObj<TMetaOrCmpOrArgs>, E ex
   tags?: Array<E['tag'] | (string & {})> | undefined;
 };
 //#endregion
-export { ActionsParam, BackgroundsParam, DocsParam, ExtendMeta, ExtendStoryObj, ExtendsMeta, ExtendsStoryObj, FnToArgTypes, GlobalApiBackgroundsParam, GlobalApiViewportParam, LayoutParam, ShowHtml, ShowHtmlProps, SourceProps, StoryCard, StoryCardParam, StoryCardProps, StoryCardStatus, StorySortParam, StorybookBuiltInParams, TestParam, Viewport, ViewportParam, WithStoryCardProps, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineStoryCardParam, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest, withStoryCard };
+export { ActionsParam, BackgroundsParam, DocsParam, ExtendMeta, ExtendStoryObj, ExtendsMeta, ExtendsStoryObj, FnToArgTypes, GlobalApiBackgroundsParam, GlobalApiViewportParam, LayoutParam, ShowHtml, ShowHtmlProps, SourceProps, StoryCard, StoryCardAppearance, StoryCardParam, StoryCardProps, StoryCardStatus, StoryCardThemeState, StorySortParam, StorybookBuiltInParams, TestParam, Viewport, ViewportParam, WithStoryCardProps, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineStoryCardParam, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest, withStoryCard };

package/esm/index.js

@@ -39,31 +39,39 @@ function ShowHtml({ selector = "[data-testid=\"subject\"]", config, ...props })
 
 //#endregion
 //#region src/components/story_card.tsx
+function resolveAppearance(appearance, status) {
+	if (appearance !== void 0) return appearance;
+	if (status !== void 0) return status;
+	return "info";
+}
 function storyCardTheme(state, className) {
-	const defaultClassName = storyCardVariants(state);
-	if (!className) return defaultClassName;
-	return twMerge(typeof className === "function" ? className({
-		...state,
-		defaultClassName
-	}) : twJoin(defaultClassName, className));
+	if (!className) return state.defaultClassName;
+	return twMerge(typeof className === "function" ? className(state) : twJoin(state.defaultClassName, className));
 }
-const storyCardVariants = cva("rbsb:flex rbsb:flex-col rbsb:gap-1 rbsb:py-3 rbsb:px-4 rbsb:rounded rbsb:text-black rbsb:dark:text-gray-100", {
-	variants: { status: {
-		error: "rbsb:bg-red-100 rbsb:dark:bg-red-900",
-		warn: "rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900",
-		info: "rbsb:bg-sky-100 rbsb:dark:bg-sky-900"
+const storyCardVariants = cva("rbsb:flex rbsb:flex-col rbsb:gap-1 rbsb:py-3 rbsb:px-4 rbsb:rounded rbsb:border rbsb:border-solid rbsb:text-black rbsb:dark:text-gray-100", {
+	variants: { appearance: {
+		error: "rbsb:bg-red-100 rbsb:dark:bg-red-900 rbsb:border-red-300 rbsb:dark:border-red-700",
+		warn: "rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900 rbsb:border-yellow-300 rbsb:dark:border-yellow-700",
+		info: "rbsb:bg-sky-100 rbsb:dark:bg-sky-900 rbsb:border-sky-300 rbsb:dark:border-sky-700",
+		source: "rbsb:bg-gray-100 rbsb:dark:bg-gray-900 rbsb:border-gray-300 rbsb:dark:border-gray-700",
+		output: "rbsb:bg-green-100 rbsb:dark:bg-green-900 rbsb:border-green-300 rbsb:dark:border-green-700"
 	} },
-	defaultVariants: { status: "info" }
+	defaultVariants: { appearance: "info" }
 });
 /**
-* A card component that displays information with optional title and status styling.
+* A card component that displays information with optional title and appearance styling.
 *
 * @param props - StoryCard component props
 * @returns A section element containing the card content
 */
-function StoryCard({ status, className, children, title }) {
+function StoryCard({ status, appearance, className, children, title }) {
+	const resolvedAppearance = resolveAppearance(appearance, status);
 	return /* @__PURE__ */ jsxs("section", {
-		className: storyCardTheme({ status }, className),
+		className: storyCardTheme({
+			status,
+			appearance: resolvedAppearance,
+			defaultClassName: storyCardVariants({ appearance: resolvedAppearance })
+		}, className),
 		children: [title && /* @__PURE__ */ jsx("h2", {
 			className: "rbsb:text-lg rbsb:font-bold",
 			children: title
@@ -129,13 +137,14 @@ function StoryCardContainer({ children }) {
 		})
 	});
 }
-function StoryCardCollector({ Story, title, status, className, content }) {
+function StoryCardCollector({ Story, title, status, appearance, className, content }) {
 	const context = useContext(StoryCardRegistryContext);
 	const cardIdRef = useRef(null);
 	useLayoutEffect(() => {
 		if (cardIdRef.current === null) cardIdRef.current = context.add({
 			title,
 			status,
+			appearance,
 			className,
 			content
 		});
@@ -183,7 +192,7 @@ function showDocSource(options) {
 		const sourceCardClassName = (state) => {
 			const modifiedState = {
 				...state,
-				defaultClassName: twJoin(state.defaultClassName, isOriginalSource ? "rbsb:bg-transparent rbsb:dark:bg-transparent" : "rbsb:bg-gray-100 rbsb:dark:bg-gray-900")
+				defaultClassName: twJoin(state.defaultClassName, isOriginalSource && "rbsb:bg-transparent rbsb:dark:bg-transparent")
 			};
 			const className = options?.className;
 			return typeof className === "function" ? className(modifiedState) : twJoin(modifiedState.defaultClassName, className);
@@ -195,7 +204,7 @@ function showDocSource(options) {
 				Story,
 				content: sourceContent,
 				className: sourceCardClassName,
-				status: "info"
+				appearance: "source"
 			})
 		});
 		return /* @__PURE__ */ jsx(ThemeProvider, {
@@ -208,7 +217,7 @@ function showDocSource(options) {
 				},
 				children: [/* @__PURE__ */ jsx(Story, {}), /* @__PURE__ */ jsx(StoryCard, {
 					className: sourceCardClassName,
-					status: "info",
+					appearance: "source",
 					children: sourceContent
 				})]
 			})
@@ -295,13 +304,15 @@ function showDocSource(options) {
 * - If `content` is not provided, it will automatically use the story description,
 *   or fall back to the component description.
 * - Cards are collected and displayed in the order they are defined in the decorators array.
+* - The `status` option is deprecated; use `appearance` instead for the same behavior and additional variants (`source`, `output`).
 */
-function withStoryCard({ title, status, content: contentProp, className, ...rest } = {}) {
+function withStoryCard({ title, status, appearance, content: contentProp, className, ...rest } = {}) {
 	return (Story, { parameters, viewMode }) => {
 		if (viewMode === "docs") return /* @__PURE__ */ jsx(Story, {});
 		const storyCardParam = parameters.storyCard;
 		const finalTitle = title ?? storyCardParam?.title;
-		const finalStatus = status ?? storyCardParam?.status ?? "info";
+		const finalAppearance = appearance ?? storyCardParam?.appearance ?? status ?? storyCardParam?.status ?? "info";
+		const finalStatus = status ?? storyCardParam?.status;
 		const finalContent = contentProp ?? storyCardParam?.content;
 		const finalClassName = className ?? storyCardParam?.className;
 		const content = finalContent ?? parameters.docs?.description?.story ?? parameters.docs?.description?.component;
@@ -311,6 +322,7 @@ function withStoryCard({ title, status, content: contentProp, className, ...rest
 			content,
 			title: finalTitle,
 			status: finalStatus,
+			appearance: finalAppearance,
 			className: finalClassName,
 			...rest
 		});

package/esm/storybook-addon-tag-badges/index.d.ts

@@ -8,7 +8,7 @@ type TagBadgeParameter = TagBadgeParameters[0];
 /**
  * Type representing the names of predefined tags used in Storybook stories.
  */
-type TagNames = 'editor' | 'new' | 'beta' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal' | 'usecase' | 'version:next';
+type TagNames = 'editor' | 'source' | 'new' | 'beta' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal' | 'usecase' | 'version:next';
 /**
  * Configuration for story tag badges that appear in the Storybook sidebar.
  * Each badge is associated with a specific tag and displays an emoji with a tooltip.
@@ -37,6 +37,7 @@ declare const outdatedBadge: TagBadgeParameter;
 declare const dangerBadge: TagBadgeParameter;
 declare const todoBadge: TagBadgeParameter;
 declare const codeOnlyBadge: TagBadgeParameter;
+declare const sourceBadge: TagBadgeParameter;
 declare const snapshotBadge: TagBadgeParameter;
 declare const unitBadge: TagBadgeParameter;
 declare const integrationBadge: TagBadgeParameter;
@@ -115,4 +116,4 @@ type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryO
   tag: TagNames;
 }>;
 //#endregion
-export { Meta, StoryObj, TagNames, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, tagBadges, todoBadge, unitBadge };
+export { Meta, StoryObj, TagNames, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, unitBadge };

package/esm/storybook-addon-tag-badges/index.js

@@ -123,7 +123,20 @@ const codeOnlyBadge = {
 			borderColor: "transparent"
 		},
 		tooltip: "Code Only"
-	}
+	},
+	display: { mdx: false }
+};
+const sourceBadge = {
+	tags: "source",
+	badge: {
+		text: "</>",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Source Code"
+	},
+	display: { mdx: false }
 };
 const snapshotBadge = {
 	tags: "snapshot",
@@ -188,6 +201,7 @@ const internalBadge = {
 };
 const tagBadges = [
 	editorBadge,
+	sourceBadge,
 	unitBadge,
 	integrationBadge,
 	keyboardBadge,
@@ -205,4 +219,4 @@ const tagBadges = [
 ];
 
 //#endregion
-export { betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, tagBadges, todoBadge, unitBadge };
+export { betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, unitBadge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.12.0",
+  "version": "2.14.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",

package/src/components/story_card.tsx

@@ -3,10 +3,13 @@ import type { ReactNode } from 'react'
 import { twJoin, twMerge } from 'tailwind-merge'
 
 /**
- * Visual status of the card, affecting its background color.
- * - `'error'`: Red background (rbsb:bg-red-100 rbsb:dark:bg-red-900)
- * - `'warn'`: Yellow background (rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900)
- * - `'info'`: Blue background (rbsb:bg-sky-100 rbsb:dark:bg-sky-900) - default
+ * Resolved appearance of the card (error | warn | info | source | output).
+ * Used for styling; when only `status` is provided it is mapped to this.
+ */
+export type StoryCardAppearance = 'error' | 'warn' | 'info' | 'source' | 'output'
+
+/**
+ * @deprecated Use `appearance` instead. Visual status of the card; equivalent to `appearance` for 'error' | 'warn' | 'info'.
  */
 export type StoryCardStatus = 'error' | 'warn' | 'info' | undefined
 
@@ -17,12 +20,18 @@ export type StoryCardProps = {
 	 */
 	title?: ReactNode | undefined
 	/**
-	 * Visual status of the card, affecting its background color.
-	 * - `'error'`: Red background (rbsb:bg-red-100 rbsb:dark:bg-red-900)
-	 * - `'warn'`: Yellow background (rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900)
-	 * - `'info'`: Blue background (rbsb:bg-sky-100 rbsb:dark:bg-sky-900) - default
+	 * @deprecated Use `appearance` instead. When set, behaves like `appearance` for the same value.
 	 */
 	status?: StoryCardStatus
+	/**
+	 * Appearance of the card, affecting its background and border color.
+	 * - `'error'`: Red
+	 * - `'warn'`: Yellow
+	 * - `'info'`: Blue (default when neither appearance nor status is set)
+	 * - `'source'`: Transparent
+	 * - `'output'`: Green
+	 */
+	appearance?: StoryCardAppearance | undefined
 	/**
 	 * Additional CSS classes or a function to compute classes.
 	 *
@@ -30,7 +39,10 @@ export type StoryCardProps = {
 	 * If a function is provided, it receives the card state and default className,
 	 * and should return the final className string.
 	 */
-	className?: ((state: Pick<StoryCardProps, 'status'> & { defaultClassName: string }) => string) | string | undefined
+	className?:
+		| ((state: Pick<StoryCardProps, 'status' | 'appearance'> & { defaultClassName: string }) => string)
+		| string
+		| undefined
 	/**
 	 * Content to display in the card body.
 	 * Can be any React node (string, JSX, etc.).
@@ -38,39 +50,55 @@ export type StoryCardProps = {
 	children?: ReactNode | undefined
 }
 
-function storyCardTheme(state: Pick<StoryCardProps, 'status'>, className: StoryCardProps['className']) {
-	const defaultClassName = storyCardVariants(state)
-	if (!className) return defaultClassName
-	return twMerge(
-		typeof className === 'function' ? className({ ...state, defaultClassName }) : twJoin(defaultClassName, className)
-	)
+export type StoryCardThemeState = Pick<StoryCardProps, 'status' | 'appearance'> & { defaultClassName: string }
+
+function resolveAppearance(
+	appearance: StoryCardProps['appearance'],
+	status: StoryCardProps['status']
+): NonNullable<StoryCardAppearance> {
+	if (appearance !== undefined) return appearance
+	if (status !== undefined) return status
+	return 'info'
+}
+
+function storyCardTheme(state: StoryCardThemeState, className: StoryCardProps['className']) {
+	if (!className) return state.defaultClassName
+	return twMerge(typeof className === 'function' ? className(state) : twJoin(state.defaultClassName, className))
 }
 
 const storyCardVariants = cva(
-	'rbsb:flex rbsb:flex-col rbsb:gap-1 rbsb:py-3 rbsb:px-4 rbsb:rounded rbsb:text-black rbsb:dark:text-gray-100',
+	'rbsb:flex rbsb:flex-col rbsb:gap-1 rbsb:py-3 rbsb:px-4 rbsb:rounded rbsb:border rbsb:border-solid rbsb:text-black rbsb:dark:text-gray-100',
 	{
 		variants: {
-			status: {
-				error: 'rbsb:bg-red-100 rbsb:dark:bg-red-900',
-				warn: 'rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900',
-				info: 'rbsb:bg-sky-100 rbsb:dark:bg-sky-900'
+			appearance: {
+				error: 'rbsb:bg-red-100 rbsb:dark:bg-red-900 rbsb:border-red-300 rbsb:dark:border-red-700',
+				warn: 'rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900 rbsb:border-yellow-300 rbsb:dark:border-yellow-700',
+				info: 'rbsb:bg-sky-100 rbsb:dark:bg-sky-900 rbsb:border-sky-300 rbsb:dark:border-sky-700',
+				source: 'rbsb:bg-gray-100 rbsb:dark:bg-gray-900 rbsb:border-gray-300 rbsb:dark:border-gray-700',
+				output: 'rbsb:bg-green-100 rbsb:dark:bg-green-900 rbsb:border-green-300 rbsb:dark:border-green-700'
 			}
 		},
 		defaultVariants: {
-			status: 'info'
+			appearance: 'info'
 		}
 	}
 )
 
 /**
- * A card component that displays information with optional title and status styling.
+ * A card component that displays information with optional title and appearance styling.
  *
  * @param props - StoryCard component props
  * @returns A section element containing the card content
  */
-export function StoryCard({ status, className, children, title }: StoryCardProps) {
+export function StoryCard({ status, appearance, className, children, title }: StoryCardProps) {
+	const resolvedAppearance = resolveAppearance(appearance, status)
+	const state: StoryCardThemeState = {
+		status,
+		appearance: resolvedAppearance,
+		defaultClassName: storyCardVariants({ appearance: resolvedAppearance })
+	}
 	return (
-		<section className={storyCardTheme({ status }, className)}>
+		<section className={storyCardTheme(state, className)}>
 			{title && <h2 className="rbsb:text-lg rbsb:font-bold">{title}</h2>}
 			{children}
 		</section>

package/src/contexts/story_card_registry_context.tsx

@@ -1,13 +1,12 @@
 import type { ReactNode } from 'react'
 import { createContext } from 'react'
-import type { RequiredPick } from 'type-plus'
 import type { StoryCardProps } from '../components/story_card.js'
 
 /**
  * Payload for adding a card to the story card registry.
  * Matches the shape of card props with `status` required.
  */
-export type StoryCardEntry = RequiredPick<Omit<StoryCardProps, 'children'> & { content?: ReactNode }, 'status'>
+export type StoryCardEntry = Omit<StoryCardProps, 'children'> & { content?: ReactNode }
 
 export interface StoryCardRegistryContextValue {
 	add: (card: StoryCardEntry) => string

package/src/contexts/story_card_scope.tsx

@@ -59,7 +59,7 @@ type StoryCardEntryWithKey = StoryCardEntry & { key: string }
 
 interface StoryCardCollectorProps extends StoryCardScopeProps {}
 
-function StoryCardCollector({ Story, title, status, className, content }: StoryCardCollectorProps) {
+function StoryCardCollector({ Story, title, status, appearance, className, content }: StoryCardCollectorProps) {
 	// StoryCardCollector is an internal component. Context is guaranteed to be not null by `StoryCardContainer`.
 	const context = useContext(StoryCardRegistryContext)!
 	const cardIdRef = useRef<string | null>(null)
@@ -68,7 +68,7 @@ function StoryCardCollector({ Story, title, status, className, content }: StoryC
 	useLayoutEffect(() => {
 		// Only add if not already added (handles Strict Mode double-render)
 		if (cardIdRef.current === null) {
-			cardIdRef.current = context.add({ title, status, className, content })
+			cardIdRef.current = context.add({ title, status, appearance, className, content })
 		}
 
 		return () => {

package/src/decorators/show_doc_source.tsx

@@ -58,12 +58,14 @@ export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Arg
 
 		const showBefore = options?.placement === 'before'
 
-		const sourceCardClassName = (state: Pick<StoryCardProps, 'status'> & { defaultClassName: string }) => {
+		const sourceCardClassName = (
+			state: Pick<StoryCardProps, 'status' | 'appearance'> & { defaultClassName: string }
+		) => {
 			const modifiedState = {
 				...state,
 				defaultClassName: twJoin(
 					state.defaultClassName,
-					isOriginalSource ? 'rbsb:bg-transparent rbsb:dark:bg-transparent' : 'rbsb:bg-gray-100 rbsb:dark:bg-gray-900'
+					isOriginalSource && 'rbsb:bg-transparent rbsb:dark:bg-transparent'
 				)
 			}
 
@@ -78,13 +80,13 @@ export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Arg
 		if (showBefore) {
 			return (
 				<ThemeProvider theme={theme}>
-					<StoryCardScope Story={Story} content={sourceContent} className={sourceCardClassName} status="info" />
+					<StoryCardScope Story={Story} content={sourceContent} className={sourceCardClassName} appearance="source" />
 				</ThemeProvider>
 			)
 		}
 
 		const storyCard = (
-			<StoryCard className={sourceCardClassName} status="info">
+			<StoryCard className={sourceCardClassName} appearance="source">
 				{sourceContent}
 			</StoryCard>
 		)

package/src/decorators/with_story_card.tsx

@@ -1,10 +1,14 @@
 import type { ReactNode } from 'react'
 import type { DecoratorFunction, Renderer } from 'storybook/internal/csf'
-import type { StoryCardProps } from '../components/story_card.js'
+import type { StoryCardProps, StoryCardStatus } from '../components/story_card.js'
 import { StoryCardScope } from '../contexts/story_card_scope.js'
 import type { StoryCardParam } from '../parameters/define_story_card_param.js'
 
 export type WithStoryCardProps = Omit<StoryCardProps, 'children' | 'className'> & {
+	/**
+	 * @deprecated Use `appearance` instead. When set, behaves like `appearance` for the same value.
+	 */
+	status?: StoryCardStatus
 	/**
 	 * Additional CSS classes or a function to compute classes.
 	 *
@@ -12,7 +16,10 @@ export type WithStoryCardProps = Omit<StoryCardProps, 'children' | 'className'>
 	 * If a function is provided, it receives the card state and default className,
 	 * and should return the final className string.
 	 */
-	className?: ((state: Pick<StoryCardProps, 'status'> & { defaultClassName: string }) => string) | string | undefined
+	className?:
+		| ((state: Pick<StoryCardProps, 'status' | 'appearance'> & { defaultClassName: string }) => string)
+		| string
+		| undefined
 	/**
 	 * Content to display in the card body.
 	 * Can be any React node (string, JSX, etc.).
@@ -102,10 +109,12 @@ export type WithStoryCardProps = Omit<StoryCardProps, 'children' | 'className'>
  * - If `content` is not provided, it will automatically use the story description,
  *   or fall back to the component description.
  * - Cards are collected and displayed in the order they are defined in the decorators array.
+ * - The `status` option is deprecated; use `appearance` instead for the same behavior and additional variants (`source`, `output`).
  */
 export function withStoryCard<TRenderer extends Renderer = Renderer>({
 	title,
 	status,
+	appearance,
 	content: contentProp,
 	className,
 	...rest
@@ -118,7 +127,8 @@ export function withStoryCard<TRenderer extends Renderer = Renderer>({
 		// Decorator props override parameter values
 		// Use parameters as fallback when decorator props are not provided
 		const finalTitle = title ?? storyCardParam?.title
-		const finalStatus = status ?? storyCardParam?.status ?? 'info'
+		const finalAppearance = appearance ?? storyCardParam?.appearance ?? status ?? storyCardParam?.status ?? 'info'
+		const finalStatus = status ?? storyCardParam?.status
 		const finalContent = contentProp ?? storyCardParam?.content
 		const finalClassName = className ?? storyCardParam?.className
 
@@ -132,6 +142,7 @@ export function withStoryCard<TRenderer extends Renderer = Renderer>({
 				content={content}
 				title={finalTitle}
 				status={finalStatus}
+				appearance={finalAppearance}
 				className={finalClassName}
 				{...rest}
 			/>

package/src/parameters/define_story_card_param.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import type { StoryCardProps, StoryCardStatus } from '../components/story_card.js'
+import type { StoryCardAppearance, StoryCardProps, StoryCardStatus } from '../components/story_card.js'
 
 export interface StoryCardParam {
 	storyCard: {
@@ -9,12 +9,13 @@ export interface StoryCardParam {
 		 */
 		title?: ReactNode | undefined
 		/**
-		 * Visual status of the card, affecting its background color.
-		 * - `'error'`: Red background
-		 * - `'warn'`: Yellow background
-		 * - `'info'`: Blue background - default
+		 * @deprecated Use `appearance` instead.
 		 */
 		status?: StoryCardStatus
+		/**
+		 * Appearance of the card (error | warn | info | source | output). Default: `'info'`.
+		 */
+		appearance?: StoryCardAppearance | undefined
 		/**
 		 * Additional CSS classes or a function to compute classes.
 		 *
@@ -22,7 +23,10 @@ export interface StoryCardParam {
 		 * If a function is provided, it receives the card state and default className,
 		 * and should return the final className string.
 		 */
-		className?: ((state: Pick<StoryCardProps, 'status'> & { defaultClassName: string }) => string) | string | undefined
+		className?:
+			| ((state: Pick<StoryCardProps, 'status' | 'appearance'> & { defaultClassName: string }) => string)
+			| string
+			| undefined
 		/**
 		 * Content to display in the card body.
 		 * Can be any React node (string, JSX, etc.).

package/src/storybook-addon-tag-badges/tag_badges.ts

@@ -9,6 +9,7 @@ type TagBadgeParameter = TagBadgeParameters[0]
  */
 export type TagNames =
 	| 'editor'
+	| 'source'
 	| 'new'
 	| 'beta'
 	| 'props'
@@ -155,6 +156,24 @@ export const codeOnlyBadge: TagBadgeParameter = {
 			borderColor: 'transparent'
 		},
 		tooltip: 'Code Only'
+	},
+	display: {
+		mdx: false
+	}
+}
+
+export const sourceBadge: TagBadgeParameter = {
+	tags: 'source',
+	badge: {
+		text: '</>',
+		style: {
+			backgroundColor: 'transparent',
+			borderColor: 'transparent'
+		},
+		tooltip: 'Source Code'
+	},
+	display: {
+		mdx: false
 	}
 }
 
@@ -230,6 +249,7 @@ export const internalBadge: TagBadgeParameter = {
 
 export const tagBadges: TagBadgeParameters = [
 	editorBadge,
+	sourceBadge,
 	unitBadge,
 	integrationBadge,
 	keyboardBadge,

package/styles.css

@@ -3,19 +3,31 @@
 @layer theme {
   :root, :host {
     --rbsb-color-red-100: oklch(93.6% 0.032 17.717);
+    --rbsb-color-red-300: oklch(80.8% 0.114 19.571);
     --rbsb-color-red-500: oklch(63.7% 0.237 25.331);
+    --rbsb-color-red-700: oklch(50.5% 0.213 27.518);
     --rbsb-color-red-800: oklch(44.4% 0.177 26.899);
     --rbsb-color-red-900: oklch(39.6% 0.141 25.723);
     --rbsb-color-amber-300: oklch(87.9% 0.169 91.605);
     --rbsb-color-amber-900: oklch(41.4% 0.112 45.904);
     --rbsb-color-yellow-100: oklch(97.3% 0.071 103.193);
+    --rbsb-color-yellow-300: oklch(90.5% 0.182 98.111);
     --rbsb-color-yellow-500: oklch(79.5% 0.184 86.047);
+    --rbsb-color-yellow-700: oklch(55.4% 0.135 66.442);
     --rbsb-color-yellow-900: oklch(42.1% 0.095 57.708);
+    --rbsb-color-green-100: oklch(96.2% 0.044 156.743);
     --rbsb-color-green-200: oklch(92.5% 0.084 155.995);
+    --rbsb-color-green-300: oklch(87.1% 0.15 154.449);
     --rbsb-color-green-500: oklch(72.3% 0.219 149.579);
+    --rbsb-color-green-700: oklch(52.7% 0.154 150.069);
     --rbsb-color-green-800: oklch(44.8% 0.119 151.328);
+    --rbsb-color-green-900: oklch(39.3% 0.095 152.535);
+    --rbsb-color-emerald-200: oklch(90.5% 0.093 164.15);
+    --rbsb-color-emerald-800: oklch(43.2% 0.095 166.913);
     --rbsb-color-sky-100: oklch(95.1% 0.026 236.824);
+    --rbsb-color-sky-300: oklch(82.8% 0.111 230.318);
     --rbsb-color-sky-500: oklch(68.5% 0.169 237.323);
+    --rbsb-color-sky-700: oklch(50% 0.134 242.749);
     --rbsb-color-sky-900: oklch(39.1% 0.09 240.876);
     --rbsb-color-blue-200: oklch(88.2% 0.059 254.128);
     --rbsb-color-blue-500: oklch(62.3% 0.214 259.815);
@@ -25,7 +37,9 @@
     --rbsb-color-rose-400: oklch(71.2% 0.194 13.428);
     --rbsb-color-rose-900: oklch(41% 0.159 10.272);
     --rbsb-color-gray-100: oklch(96.7% 0.003 264.542);
+    --rbsb-color-gray-300: oklch(87.2% 0.01 258.338);
     --rbsb-color-gray-500: oklch(55.1% 0.027 264.364);
+    --rbsb-color-gray-700: oklch(37.3% 0.034 259.733);
     --rbsb-color-gray-900: oklch(21% 0.034 264.665);
     --rbsb-color-black: #000;
     --rbsb-color-white: #fff;
@@ -72,28 +86,51 @@
   .rbsb\:rounded-lg {
     border-radius: var(--rbsb-radius-lg);
   }
+  .rbsb\:border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .rbsb\:border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .rbsb\:border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
   .rbsb\:border-blue-500 {
     border-color: var(--rbsb-color-blue-500);
   }
+  .rbsb\:border-gray-300 {
+    border-color: var(--rbsb-color-gray-300);
+  }
   .rbsb\:border-gray-500 {
     border-color: var(--rbsb-color-gray-500);
   }
+  .rbsb\:border-green-300 {
+    border-color: var(--rbsb-color-green-300);
+  }
   .rbsb\:border-green-500 {
     border-color: var(--rbsb-color-green-500);
   }
   .rbsb\:border-purple-500 {
     border-color: var(--rbsb-color-purple-500);
   }
+  .rbsb\:border-red-300 {
+    border-color: var(--rbsb-color-red-300);
+  }
   .rbsb\:border-red-500 {
     border-color: var(--rbsb-color-red-500);
   }
+  .rbsb\:border-sky-300 {
+    border-color: var(--rbsb-color-sky-300);
+  }
   .rbsb\:border-sky-500 {
     border-color: var(--rbsb-color-sky-500);
   }
+  .rbsb\:border-yellow-300 {
+    border-color: var(--rbsb-color-yellow-300);
+  }
   .rbsb\:border-yellow-500 {
     border-color: var(--rbsb-color-yellow-500);
   }
@@ -106,9 +143,15 @@
   .rbsb\:bg-blue-500 {
     background-color: var(--rbsb-color-blue-500);
   }
+  .rbsb\:bg-emerald-200 {
+    background-color: var(--rbsb-color-emerald-200);
+  }
   .rbsb\:bg-gray-100 {
     background-color: var(--rbsb-color-gray-100);
   }
+  .rbsb\:bg-green-100 {
+    background-color: var(--rbsb-color-green-100);
+  }
   .rbsb\:bg-green-200 {
     background-color: var(--rbsb-color-green-200);
   }
@@ -184,6 +227,31 @@
   .rbsb\:ring-blue-200 {
     --tw-ring-color: var(--rbsb-color-blue-200);
   }
+  .rbsb\:dark\:border-gray-700 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--rbsb-color-gray-700);
+    }
+  }
+  .rbsb\:dark\:border-green-700 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--rbsb-color-green-700);
+    }
+  }
+  .rbsb\:dark\:border-red-700 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--rbsb-color-red-700);
+    }
+  }
+  .rbsb\:dark\:border-sky-700 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--rbsb-color-sky-700);
+    }
+  }
+  .rbsb\:dark\:border-yellow-700 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--rbsb-color-yellow-700);
+    }
+  }
   .rbsb\:dark\:bg-amber-900 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--rbsb-color-amber-900);
@@ -194,6 +262,11 @@
       background-color: var(--rbsb-color-blue-900);
     }
   }
+  .rbsb\:dark\:bg-emerald-800 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--rbsb-color-emerald-800);
+    }
+  }
   .rbsb\:dark\:bg-gray-500 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--rbsb-color-gray-500);
@@ -209,6 +282,11 @@
       background-color: var(--rbsb-color-green-800);
     }
   }
+  .rbsb\:dark\:bg-green-900 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--rbsb-color-green-900);
+    }
+  }
   .rbsb\:dark\:bg-red-900 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--rbsb-color-red-900);