@medalsocial/meda 2.3.0 → 2.4.1

package/dist/primitives/card.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type CardProps = ComponentPropsWithoutRef<'div'>;
+export type CardHeaderProps = ComponentPropsWithoutRef<'div'>;
+export type CardBodyProps = ComponentPropsWithoutRef<'div'>;
+export type CardFooterProps = ComponentPropsWithoutRef<'div'>;
+declare function CardRoot({ children, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ children, className, ...props }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function CardBody({ children, className, ...props }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ children, className, ...props }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+};
+export {};

package/dist/primitives/card.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+function CardRoot({ children, className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn('flex flex-col rounded-xl border border-border bg-card text-card-foreground', className), ...props, children: children }));
+}
+function CardHeader({ children, className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn('flex flex-col gap-1 border-b border-border px-4 py-3 last:border-b-0', className), ...props, children: children }));
+}
+function CardBody({ children, className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-body", className: cn('px-4 py-3', className), ...props, children: children }));
+}
+function CardFooter({ children, className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center justify-end gap-2 border-t border-border px-4 py-3 first:border-t-0', className), ...props, children: children }));
+}
+export const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Body: CardBody,
+    Footer: CardFooter,
+});

package/dist/primitives/index.d.ts

@@ -1,6 +1,10 @@
+export type { CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, } from './card.js';
+export { Card } from './card.js';
 export type { EmptyStateProps, EmptyStateVariant } from './empty-state.js';
 export { EmptyState } from './empty-state.js';
 export type { FilterRailGroupProps, FilterRailProps } from './filter-rail.js';
 export { FilterRail } from './filter-rail.js';
 export type { SkeletonProps } from './skeleton.js';
 export { Skeleton } from './skeleton.js';
+export type { StatusPillProps, StatusPillSize, StatusPillTone } from './status-pill.js';
+export { StatusPill } from './status-pill.js';

package/dist/primitives/index.js

@@ -1,3 +1,5 @@
+export { Card } from './card.js';
 export { EmptyState } from './empty-state.js';
 export { FilterRail } from './filter-rail.js';
 export { Skeleton } from './skeleton.js';
+export { StatusPill } from './status-pill.js';

package/dist/primitives/markdown-view-entry.d.ts

@@ -0,0 +1,2 @@
+export type { MarkdownViewProps } from './markdown-view.js';
+export { MarkdownView } from './markdown-view.js';

package/dist/primitives/markdown-view-entry.js

@@ -0,0 +1,7 @@
+// Dedicated subpath entry for MarkdownView.
+//
+// Importing `@medalsocial/meda/markdown-view` opts the consumer into the
+// react-markdown / remark-gfm / rehype-highlight peer chain. Consumers who
+// don't need markdown rendering should import from `@medalsocial/meda` /
+// `@medalsocial/meda/primitives` instead — neither pulls these peers in.
+export { MarkdownView } from './markdown-view.js';

package/dist/primitives/markdown-view.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type Components } from 'react-markdown';
+export interface MarkdownViewProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    children: string;
+    /**
+     * Override or extend the default react-markdown component map.
+     * Spread defaults are applied first, so caller overrides win.
+     */
+    components?: Components;
+}
+/**
+ * MarkdownView wraps `react-markdown` with `remark-gfm` and `rehype-highlight`,
+ * and applies a consistent prose stylesheet using meda design tokens.
+ *
+ * The markdown libraries are listed as **optional peer dependencies**. Install
+ * them in your app if you import this component:
+ *
+ * ```bash
+ * pnpm add react-markdown remark-gfm rehype-highlight
+ * ```
+ */
+export declare function MarkdownView({ children, className, components, ...props }: MarkdownViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/markdown-view.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import remarkGfm from 'remark-gfm';
+import { cn } from '../lib/utils.js';
+// remark-gfm renders task-list `[ ]` / `[x]` as unlabelled disabled checkboxes,
+// which fails the axe `label` rule. Override the `input` renderer to add an
+// aria-label derived from the checked state — keeps the checkbox semantics
+// for AT users while satisfying the contrast/label gate.
+const DEFAULT_COMPONENTS = {
+    input: ({ type, checked, ...rest }) => {
+        if (type === 'checkbox') {
+            return (_jsx("input", { type: "checkbox", checked: checked, "aria-label": checked ? 'task complete' : 'task incomplete', ...rest }));
+        }
+        return _jsx("input", { type: type, ...rest });
+    },
+};
+/**
+ * MarkdownView wraps `react-markdown` with `remark-gfm` and `rehype-highlight`,
+ * and applies a consistent prose stylesheet using meda design tokens.
+ *
+ * The markdown libraries are listed as **optional peer dependencies**. Install
+ * them in your app if you import this component:
+ *
+ * ```bash
+ * pnpm add react-markdown remark-gfm rehype-highlight
+ * ```
+ */
+export function MarkdownView({ children, className, components, ...props }) {
+    return (_jsx("div", { "data-slot": "markdown-view", className: cn(
+        // Base prose
+        'text-sm leading-relaxed text-foreground', 
+        // Trim outer block margins: only the first/last *child* of the
+        // wrapper should lose its top/bottom margin. The earlier shape
+        // `first:[&_h1]:mt-0` selects all descendant h1s when the wrapper
+        // itself is :first-child of its parent — which then collapses the
+        // margin on every nested h1, not just the leading one.
+        '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0', 
+        // Headings
+        '[&_h1]:mt-6 [&_h1]:mb-3 [&_h1]:text-xl [&_h1]:font-semibold [&_h1]:text-foreground', '[&_h2]:mt-5 [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:text-foreground', '[&_h3]:mt-4 [&_h3]:mb-2 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-foreground', '[&_h4]:mt-3 [&_h4]:mb-1.5 [&_h4]:text-sm [&_h4]:font-semibold [&_h4]:text-foreground', 
+        // Paragraphs and inline
+        '[&_p]:my-3', '[&_strong]:font-semibold [&_strong]:text-foreground', '[&_em]:italic', '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 hover:[&_a]:no-underline', 
+        // Lists
+        '[&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-1', '[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1', '[&_li]:text-foreground', 
+        // Blockquote
+        '[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground', 
+        // Code
+        '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.875em] [&_code]:text-foreground', '[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted [&_pre]:p-3', '[&_pre_code]:bg-transparent [&_pre_code]:p-0', 
+        // Tables (GFM)
+        '[&_table]:my-3 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm', '[&_th]:border [&_th]:border-border [&_th]:bg-muted [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold', '[&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1', 
+        // Horizontal rule
+        '[&_hr]:my-6 [&_hr]:border-border', 
+        // Images
+        '[&_img]:my-3 [&_img]:rounded-md [&_img]:border [&_img]:border-border', className), ...props, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], components: { ...DEFAULT_COMPONENTS, ...components }, children: children }) }));
+}

package/dist/primitives/status-pill.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type StatusPillTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+export type StatusPillSize = 'sm' | 'md';
+export interface StatusPillProps extends ComponentPropsWithoutRef<'span'> {
+    tone?: StatusPillTone;
+    size?: StatusPillSize;
+    /**
+     * Show a leading dot. Defaults to true; pass `false` to hide.
+     */
+    dot?: boolean;
+}
+export declare function StatusPill({ tone, size, dot, className, children, ...props }: StatusPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/status-pill.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+// Tone classes use solid backgrounds + their semantic foreground tokens.
+// Tinted backgrounds (e.g. `bg-info/15 text-info`) failed WCAG AA contrast on
+// the 11px size (~3:1 vs. the 4.5:1 minimum) — see vitest-axe a11y gate. The
+// solid pairing is what existing meda status pills (e.g. voice-status-pill)
+// use, and theme tokens already guarantee AA in both light and dark modes.
+const TONE_CLASSES = {
+    neutral: 'bg-muted text-muted-foreground',
+    info: 'bg-info text-info-foreground',
+    success: 'bg-success text-success-foreground',
+    warning: 'bg-warning text-warning-foreground',
+    danger: 'bg-destructive text-destructive-foreground',
+};
+const SIZE_CLASSES = {
+    sm: 'gap-1 px-2 py-0.5 text-[11px]',
+    md: 'gap-1.5 px-2.5 py-1 text-xs',
+};
+const DOT_SIZE = {
+    sm: 'size-1.5',
+    md: 'size-2',
+};
+export function StatusPill({ tone = 'neutral', size = 'sm', dot = true, className, children, ...props }) {
+    return (_jsxs("span", { "data-slot": "status-pill", "data-tone": tone, "data-size": size, className: cn('inline-flex items-center rounded-full font-medium', TONE_CLASSES[tone], SIZE_CLASSES[size], className), ...props, children: [dot ? (_jsx("span", { "data-slot": "status-pill-dot", "aria-hidden": "true", className: cn('rounded-full bg-current', DOT_SIZE[size]) })) : null, children] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -107,6 +107,10 @@
     "./theme": {
       "types": "./dist/theme/index.d.ts",
       "default": "./dist/theme/index.js"
+    },
+    "./markdown-view": {
+      "types": "./dist/primitives/markdown-view-entry.d.ts",
+      "default": "./dist/primitives/markdown-view-entry.js"
     }
   },
   "sideEffects": [
@@ -125,7 +129,10 @@
     "lucide-react": "^1.8.0",
     "next-themes": "^0.4.0",
     "react": ">=19",
-    "react-dom": ">=19"
+    "react-dom": ">=19",
+    "react-markdown": "^10.0.0",
+    "rehype-highlight": "^7.0.0",
+    "remark-gfm": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@dnd-kit/core": {
@@ -145,10 +152,19 @@
     },
     "next-themes": {
       "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "rehype-highlight": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
     }
   },
   "dependencies": {
-    "@base-ui/react": "1.4.1",
+    "@base-ui/react": "1.5.0",
     "@fontsource-variable/geist": "5.2.8",
     "@fontsource-variable/geist-mono": "5.2.7",
     "class-variance-authority": "0.7.1",
@@ -192,6 +208,9 @@
     "playwright": "1.59.1",
     "react": "19.2.5",
     "react-dom": "19.2.5",
+    "react-markdown": "10.1.0",
+    "rehype-highlight": "7.0.2",
+    "remark-gfm": "4.0.1",
     "size-limit": "12.1.0",
     "storybook": "10.3.6",
     "tailwindcss": "4.2.4",