@idealyst/markdown 1.2.28

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@idealyst/markdown",
+  "version": "1.2.28",
+  "description": "Cross-platform markdown renderer for React and React Native with theme integration",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.native.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/IdealystIO/idealyst-framework.git",
+    "directory": "packages/markdown"
+  },
+  "author": "Idealyst",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "react-native": "./src/index.native.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "echo 'Publishing TypeScript source directly'",
+    "publish:npm": "npm publish"
+  },
+  "peerDependencies": {
+    "@idealyst/theme": "^1.2.28",
+    "react": ">=16.8.0",
+    "react-markdown": ">=9.0.0",
+    "react-native": ">=0.60.0",
+    "react-native-markdown-display": ">=7.0.0",
+    "react-native-unistyles": ">=3.0.0",
+    "remark-gfm": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@idealyst/theme": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-markdown-display": {
+      "optional": true
+    },
+    "react-native-unistyles": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@idealyst/theme": "^1.2.28",
+    "@types/react": "^19.1.0",
+    "react": "^19.1.0",
+    "react-markdown": "^9.0.0",
+    "react-native": "^0.80.1",
+    "react-native-unistyles": "^3.0.10",
+    "remark-gfm": "^4.0.0",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "react-native",
+    "markdown",
+    "cross-platform",
+    "idealyst"
+  ]
+}

package/src/Markdown/Markdown.native.tsx

@@ -0,0 +1,92 @@
+import { forwardRef, useMemo, ComponentRef } from 'react';
+import { View, Linking } from 'react-native';
+import MarkdownDisplay from 'react-native-markdown-display';
+import { markdownStyles } from './Markdown.styles';
+import { createNativeStyles } from '../renderers/native/createNativeStyles';
+import type { MarkdownProps } from './types';
+
+/**
+ * Cross-platform Markdown renderer for React Native.
+ *
+ * Uses react-native-markdown-display for native rendering.
+ * Integrates with @idealyst/theme for consistent styling.
+ */
+const Markdown = forwardRef<ComponentRef<typeof View>, MarkdownProps>(
+  (
+    {
+      children,
+      size = 'md',
+      linkIntent = 'primary',
+      styleOverrides,
+      linkHandler,
+      imageHandler,
+      codeOptions: _codeOptions,
+      gfm: _gfm = true,
+      allowHtml: _allowHtml = false,
+      components: _customComponents,
+      style,
+      testID,
+      id,
+      accessibilityLabel,
+    },
+    ref
+  ) => {
+    // Apply variants for size and linkIntent
+    markdownStyles.useVariants({
+      size,
+      linkIntent,
+    });
+
+    // Create native style rules from theme styles
+    const nativeStyles = useMemo(
+      () =>
+        createNativeStyles({
+          styles: markdownStyles,
+          dynamicProps: { size, linkIntent },
+          styleOverrides,
+        }),
+      [size, linkIntent, styleOverrides]
+    );
+
+    // Handle link presses
+    const handleLinkPress = (url: string): boolean => {
+      if (linkHandler?.onLinkPress) {
+        const preventDefault = linkHandler.onLinkPress(url);
+        if (preventDefault) {
+          return false; // Don't open the link
+        }
+      }
+
+      // Open external links if enabled (default)
+      if (linkHandler?.openExternalLinks ?? true) {
+        Linking.openURL(url).catch(console.warn);
+      }
+
+      return false; // We handle it ourselves
+    };
+
+    return (
+      <View
+        ref={ref}
+        nativeID={id}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+        style={[
+          (markdownStyles.container as any)({ size, linkIntent }),
+          style,
+        ]}
+      >
+        <MarkdownDisplay
+          style={nativeStyles}
+          onLinkPress={handleLinkPress}
+        >
+          {children}
+        </MarkdownDisplay>
+      </View>
+    );
+  }
+);
+
+Markdown.displayName = 'Markdown';
+
+export default Markdown;

package/src/Markdown/Markdown.styles.tsx

@@ -0,0 +1,302 @@
+/**
+ * Markdown styles using defineStyle with theme integration.
+ *
+ * Provides consistent styling for all markdown elements that
+ * integrates with the Idealyst theme system.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type MarkdownVariants = {
+  size: Size;
+  linkIntent: Intent;
+};
+
+/**
+ * Dynamic props passed to markdown style functions.
+ */
+export type MarkdownDynamicProps = {
+  linkIntent?: Intent;
+  size?: Size;
+};
+
+/**
+ * Markdown styles with theme integration.
+ *
+ * All elements use theme colors, typography, and spacing
+ * for consistent styling across the application.
+ */
+// @ts-expect-error - Markdown is not in the ComponentName union yet
+export const markdownStyles = defineStyle('Markdown', (theme: Theme) => ({
+  // Container
+  container: (_props: MarkdownDynamicProps) => ({
+    flexShrink: 1,
+  }),
+
+  // Body/paragraph text - uses theme typography
+  body: (_props: MarkdownDynamicProps) => ({
+    color: theme.colors.text.primary,
+    marginVertical: 8,
+    fontSize: theme.sizes.typography.body1.fontSize,
+    lineHeight: theme.sizes.typography.body1.lineHeight,
+  }),
+
+  // Headings - use theme typography for each level
+  heading1: (_props: MarkdownDynamicProps) => ({
+    color: theme.colors.text.primary,
+    fontWeight: '700',
+    marginTop: 24,
+    marginBottom: 16,
+    fontSize: theme.sizes.typography.h1.fontSize,
+    lineHeight: theme.sizes.typography.h1.lineHeight,
+  }),
+
+  heading2: (_props: MarkdownDynamicProps) => ({
+    color: theme.colors.text.primary,
+    fontWeight: '600',
+    marginTop: 20,
+    marginBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border.primary,
+    paddingBottom: 8,
+    fontSize: theme.sizes.typography.h2.fontSize,
+    lineHeight: theme.sizes.typography.h2.lineHeight,
+  }),
+
+  heading3: (_props: MarkdownDynamicProps) => ({
+    color: theme.colors.text.primary,
+    fontWeight: '600',
+    marginTop: 16,
+    marginBottom: 8,
+    fontSize: theme.sizes.typography.h3.fontSize,
+    lineHeight: theme.sizes.typography.h3.lineHeight,
+  }),
+
+  heading4: (_props: MarkdownDynamicProps) => ({
+    color: theme.colors.text.primary,
+    fontWeight: '600',
+    marginTop: 12,
+    marginBottom: 8,
+    fontSize: theme.sizes.typography.h4.fontSize,
+    lineHeight: theme.sizes.typography.h4.lineHeight,
+  }),
+
+  heading5: (_props: MarkdownDynamicProps) => ({
+    color: theme.colors.text.primary,
+    fontWeight: '600',
+    marginTop: 10,
+    marginBottom: 6,
+    fontSize: theme.sizes.typography.h5.fontSize,
+    lineHeight: theme.sizes.typography.h5.lineHeight,
+  }),
+
+  heading6: (_props: MarkdownDynamicProps) => ({
+    color: theme.colors.text.secondary,
+    fontWeight: '600',
+    marginTop: 10,
+    marginBottom: 6,
+    fontSize: theme.sizes.typography.h6.fontSize,
+    lineHeight: theme.sizes.typography.h6.lineHeight,
+  }),
+
+  // Emphasis
+  strong: (_props: MarkdownDynamicProps) => ({
+    fontWeight: '700',
+  }),
+
+  em: (_props: MarkdownDynamicProps) => ({
+    fontStyle: 'italic',
+  }),
+
+  strikethrough: (_props: MarkdownDynamicProps) => ({
+    textDecorationLine: 'line-through',
+    color: theme.colors.text.tertiary,
+  }),
+
+  // Links
+  link: ({ linkIntent = 'primary' }: MarkdownDynamicProps) => ({
+    color: theme.intents[linkIntent].primary,
+    textDecorationLine: 'underline',
+    _web: {
+      cursor: 'pointer',
+      transition: 'color 0.15s ease',
+      _hover: {
+        opacity: 0.8,
+      },
+    },
+  }),
+
+  // Blockquote
+  blockquote: (_props: MarkdownDynamicProps) => ({
+    borderLeftWidth: 4,
+    borderLeftColor: theme.colors.border.secondary,
+    paddingLeft: 16,
+    paddingVertical: 8,
+    marginVertical: 12,
+    backgroundColor: theme.colors.surface.secondary,
+    borderRadius: theme.radii.sm,
+  }),
+
+  blockquoteText: (_props: MarkdownDynamicProps) => ({
+    color: theme.colors.text.secondary,
+    fontStyle: 'italic',
+  }),
+
+  // Code inline
+  codeInline: (_props: MarkdownDynamicProps) => ({
+    fontFamily: 'monospace',
+    backgroundColor: theme.colors.surface.secondary,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: theme.radii.xs,
+    color: theme.colors.text.primary,
+    fontSize: theme.sizes.typography.caption.fontSize,
+  }),
+
+  // Code block
+  codeBlock: (_props: MarkdownDynamicProps) => ({
+    fontFamily: 'monospace',
+    backgroundColor: theme.colors.surface.secondary,
+    padding: 16,
+    borderRadius: theme.radii.md,
+    marginVertical: 12,
+    _web: {
+      overflow: 'auto' as const,
+      maxHeight: 500,
+    },
+    fontSize: theme.sizes.typography.caption.fontSize,
+    lineHeight: theme.sizes.typography.body1.lineHeight,
+  }),
+
+  codeBlockText: (_props: MarkdownDynamicProps) => ({
+    fontFamily: 'monospace',
+    color: theme.colors.text.primary,
+  }),
+
+  // Lists
+  listOrdered: (_props: MarkdownDynamicProps) => ({
+    marginVertical: 8,
+    paddingLeft: 24,
+  }),
+
+  listUnordered: (_props: MarkdownDynamicProps) => ({
+    marginVertical: 8,
+    paddingLeft: 24,
+  }),
+
+  listItem: (_props: MarkdownDynamicProps) => ({
+    marginVertical: 4,
+    color: theme.colors.text.primary,
+    flexDirection: 'row',
+  }),
+
+  listItemBullet: (_props: MarkdownDynamicProps) => ({
+    color: theme.colors.text.secondary,
+    marginRight: 8,
+    width: 16,
+  }),
+
+  listItemContent: (_props: MarkdownDynamicProps) => ({
+    flex: 1,
+  }),
+
+  // Task list
+  taskListItem: (_props: MarkdownDynamicProps) => ({
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+    marginVertical: 4,
+  }),
+
+  taskCheckbox: (_props: MarkdownDynamicProps) => ({
+    marginTop: 4,
+  }),
+
+  // Table
+  table: (_props: MarkdownDynamicProps) => ({
+    borderWidth: 1,
+    borderColor: theme.colors.border.primary,
+    borderRadius: theme.radii.sm,
+    marginVertical: 12,
+    _web: {
+      overflow: 'hidden' as const,
+      borderCollapse: 'collapse',
+      width: '100%',
+    },
+  }),
+
+  tableHead: (_props: MarkdownDynamicProps) => ({
+    backgroundColor: theme.colors.surface.secondary,
+  }),
+
+  tableRow: (_props: MarkdownDynamicProps) => ({
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border.primary,
+    _web: {
+      _hover: {
+        backgroundColor: theme.colors.surface.secondary,
+      },
+    },
+  }),
+
+  tableCell: (_props: MarkdownDynamicProps) => ({
+    padding: 12,
+    color: theme.colors.text.primary,
+    borderRightWidth: 1,
+    borderRightColor: theme.colors.border.primary,
+    fontSize: theme.sizes.typography.body1.fontSize,
+  }),
+
+  tableHeaderCell: (_props: MarkdownDynamicProps) => ({
+    padding: 12,
+    color: theme.colors.text.primary,
+    fontWeight: '600',
+    borderRightWidth: 1,
+    borderRightColor: theme.colors.border.primary,
+    textAlign: 'left',
+    fontSize: theme.sizes.typography.body1.fontSize,
+  }),
+
+  // Image
+  image: (_props: MarkdownDynamicProps) => ({
+    maxWidth: '100%',
+    borderRadius: theme.radii.sm,
+    marginVertical: 8,
+  }),
+
+  // Horizontal rule
+  hr: (_props: MarkdownDynamicProps) => ({
+    height: 1,
+    backgroundColor: theme.colors.border.secondary,
+    marginVertical: 24,
+    borderWidth: 0,
+  }),
+
+  // Footnotes
+  footnoteContainer: (_props: MarkdownDynamicProps) => ({
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.border.primary,
+    marginTop: 24,
+    paddingTop: 16,
+  }),
+
+  footnote: (_props: MarkdownDynamicProps) => ({
+    marginVertical: 4,
+  }),
+
+  footnoteRef: ({ linkIntent = 'primary' }: MarkdownDynamicProps) => ({
+    color: theme.intents[linkIntent].primary,
+    fontSize: 10,
+    _web: {
+      verticalAlign: 'super',
+      cursor: 'pointer',
+    },
+  }),
+}));

package/src/Markdown/Markdown.web.tsx

@@ -0,0 +1,102 @@
+import { forwardRef, useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { getWebProps } from 'react-native-unistyles/web';
+import { markdownStyles } from './Markdown.styles';
+import { createWebRenderers } from '../renderers/web';
+import type { MarkdownProps } from './types';
+
+/**
+ * Cross-platform Markdown renderer for web.
+ *
+ * Uses react-markdown with remark-gfm for GitHub Flavored Markdown support.
+ * Integrates with @idealyst/theme for consistent styling.
+ */
+const Markdown = forwardRef<HTMLDivElement, MarkdownProps>(
+  (
+    {
+      children,
+      size = 'md',
+      linkIntent = 'primary',
+      styleOverrides,
+      linkHandler,
+      imageHandler,
+      codeOptions,
+      gfm = true,
+      allowHtml = false,
+      components: customComponents,
+      style,
+      testID,
+      id,
+      accessibilityLabel,
+    },
+    ref
+  ) => {
+    // Apply variants for size and linkIntent
+    markdownStyles.useVariants({
+      size,
+      linkIntent,
+    });
+
+    // Create custom component renderers with theme styles
+    const renderers = useMemo(
+      () =>
+        createWebRenderers({
+          styles: markdownStyles,
+          dynamicProps: { size, linkIntent },
+          styleOverrides,
+          linkHandler,
+          imageHandler,
+          codeOptions,
+        }),
+      [size, linkIntent, styleOverrides, linkHandler, imageHandler, codeOptions]
+    );
+
+    // Merge custom components with default renderers
+    const mergedComponents = useMemo(
+      () => ({
+        ...renderers,
+        ...customComponents,
+      }),
+      [renderers, customComponents]
+    );
+
+    // Get web props for the container
+    const containerStyleArray = [
+      (markdownStyles.container as any)({ size, linkIntent }),
+      style,
+    ];
+    const webProps = getWebProps(containerStyleArray);
+
+    // Configure remark plugins
+    const remarkPlugins = useMemo(() => {
+      const plugins: any[] = [];
+      if (gfm) {
+        plugins.push(remarkGfm);
+      }
+      return plugins;
+    }, [gfm]);
+
+    return (
+      <div
+        {...webProps}
+        ref={ref}
+        id={id}
+        data-testid={testID}
+        aria-label={accessibilityLabel}
+      >
+        <ReactMarkdown
+          remarkPlugins={remarkPlugins}
+          components={mergedComponents}
+          skipHtml={!allowHtml}
+        >
+          {children}
+        </ReactMarkdown>
+      </div>
+    );
+  }
+);
+
+Markdown.displayName = 'Markdown';
+
+export default Markdown;

package/src/Markdown/index.native.ts

@@ -0,0 +1,3 @@
+export { default } from './Markdown.native';
+export * from './types';
+export type { MarkdownDynamicProps, MarkdownVariants } from './Markdown.styles';

package/src/Markdown/index.ts

@@ -0,0 +1,6 @@
+import MarkdownComponent from './Markdown.web';
+
+export default MarkdownComponent;
+export { MarkdownComponent as Markdown };
+export * from './types';
+export type { MarkdownDynamicProps, MarkdownVariants } from './Markdown.styles';

package/src/Markdown/types.ts

@@ -0,0 +1,198 @@
+import type { ReactNode, ComponentType } from 'react';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { Size, Intent } from '@idealyst/theme';
+
+/**
+ * Markdown element types that can be individually styled
+ */
+export type MarkdownElementType =
+  | 'body'
+  | 'heading1'
+  | 'heading2'
+  | 'heading3'
+  | 'heading4'
+  | 'heading5'
+  | 'heading6'
+  | 'paragraph'
+  | 'strong'
+  | 'em'
+  | 'strikethrough'
+  | 'link'
+  | 'blockquote'
+  | 'codeInline'
+  | 'codeBlock'
+  | 'listOrdered'
+  | 'listUnordered'
+  | 'listItem'
+  | 'table'
+  | 'tableHead'
+  | 'tableRow'
+  | 'tableCell'
+  | 'image'
+  | 'hr'
+  | 'taskListItem'
+  | 'footnote'
+  | 'footnoteRef';
+
+/**
+ * Style overrides for specific markdown elements
+ */
+export type MarkdownStyleOverrides = Partial<
+  Record<MarkdownElementType, StyleProp<ViewStyle | TextStyle>>
+>;
+
+/**
+ * Link handling options
+ */
+export interface LinkHandler {
+  /**
+   * Called when a link is pressed/clicked
+   * Return true to prevent default behavior
+   */
+  onLinkPress?: (url: string, title?: string) => boolean | void;
+
+  /**
+   * Whether to open external links in new tab (web) or browser (native)
+   * @default true
+   */
+  openExternalLinks?: boolean;
+}
+
+/**
+ * Image handling options
+ */
+export interface ImageHandler {
+  /**
+   * Custom image resolver for relative paths
+   */
+  resolveImageUrl?: (src: string) => string;
+
+  /**
+   * Default image dimensions when not specified in markdown
+   */
+  defaultImageDimensions?: { width?: number; height?: number };
+
+  /**
+   * Called when an image is pressed/clicked
+   */
+  onImagePress?: (src: string, alt?: string) => void;
+}
+
+/**
+ * Code block handling options
+ */
+export interface CodeBlockOptions {
+  /**
+   * Enable syntax highlighting
+   * @default false
+   */
+  syntaxHighlighting?: boolean;
+
+  /**
+   * Syntax highlighting theme (maps to theme's light/dark)
+   * @default 'auto'
+   */
+  syntaxTheme?: 'auto' | 'light' | 'dark';
+
+  /**
+   * Show line numbers in code blocks
+   * @default false
+   */
+  showLineNumbers?: boolean;
+
+  /**
+   * Enable copy button for code blocks (web only)
+   * @default true
+   */
+  copyButton?: boolean;
+}
+
+/**
+ * Main Markdown component props
+ */
+export interface MarkdownProps {
+  /**
+   * Markdown content to render
+   */
+  children: string;
+
+  /**
+   * Text size variant - affects base font size and heading scales
+   * @default 'md'
+   */
+  size?: Size;
+
+  /**
+   * Link color intent
+   * @default 'primary'
+   */
+  linkIntent?: Intent;
+
+  /**
+   * Custom style overrides for specific elements
+   */
+  styleOverrides?: MarkdownStyleOverrides;
+
+  /**
+   * Link handling configuration
+   */
+  linkHandler?: LinkHandler;
+
+  /**
+   * Image handling configuration
+   */
+  imageHandler?: ImageHandler;
+
+  /**
+   * Code block configuration
+   */
+  codeOptions?: CodeBlockOptions;
+
+  /**
+   * Enable GFM extensions (tables, strikethrough, task lists, footnotes)
+   * @default true
+   */
+  gfm?: boolean;
+
+  /**
+   * Allow raw HTML in markdown (security consideration)
+   * @default false
+   */
+  allowHtml?: boolean;
+
+  /**
+   * Custom component renderers (advanced usage)
+   * Web: Maps to react-markdown components prop
+   * Native: Maps to react-native-markdown-display rules
+   */
+  components?: Partial<Record<MarkdownElementType, ComponentType<any>>>;
+
+  /**
+   * Container style
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test identifier
+   */
+  testID?: string;
+
+  /**
+   * Unique identifier
+   */
+  id?: string;
+
+  /**
+   * Accessibility label for the markdown container
+   */
+  accessibilityLabel?: string;
+}
+
+/**
+ * Props passed to custom markdown element renderers
+ */
+export interface MarkdownRendererProps<T = unknown> {
+  children?: ReactNode;
+  node?: T;
+  style?: StyleProp<ViewStyle | TextStyle>;
+}

package/src/index.native.ts

@@ -0,0 +1,26 @@
+/**
+ * @idealyst/markdown - Cross-platform markdown renderer (React Native)
+ *
+ * Provides a Markdown component for rendering markdown content
+ * with theme integration on React Native.
+ */
+
+// Main component
+export { default as Markdown } from './Markdown/Markdown.native';
+
+// Types
+export type {
+  MarkdownProps,
+  MarkdownElementType,
+  MarkdownStyleOverrides,
+  LinkHandler,
+  ImageHandler,
+  CodeBlockOptions,
+  MarkdownRendererProps,
+} from './Markdown/types';
+
+// Style types
+export type {
+  MarkdownDynamicProps,
+  MarkdownVariants,
+} from './Markdown/Markdown.styles';

package/src/index.ts

@@ -0,0 +1,41 @@
+/**
+ * @idealyst/markdown - Cross-platform markdown renderer
+ *
+ * Provides a Markdown component for rendering markdown content
+ * with theme integration on both web and React Native platforms.
+ *
+ * @example
+ * ```tsx
+ * import { Markdown } from '@idealyst/markdown';
+ *
+ * function App() {
+ *   return (
+ *     <Markdown size="md" linkIntent="primary">
+ *       # Hello World
+ *
+ *       This is **markdown** with _emphasis_.
+ *     </Markdown>
+ *   );
+ * }
+ * ```
+ */
+
+// Main component
+export { default as Markdown, Markdown as MarkdownComponent } from './Markdown';
+
+// Types
+export type {
+  MarkdownProps,
+  MarkdownElementType,
+  MarkdownStyleOverrides,
+  LinkHandler,
+  ImageHandler,
+  CodeBlockOptions,
+  MarkdownRendererProps,
+} from './Markdown/types';
+
+// Style types
+export type {
+  MarkdownDynamicProps,
+  MarkdownVariants,
+} from './Markdown/Markdown.styles';

package/src/renderers/native/createNativeStyles.ts

@@ -0,0 +1,224 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { MarkdownStyles } from 'react-native-markdown-display';
+import type { MarkdownStyleOverrides } from '../../Markdown/types';
+import type { MarkdownDynamicProps } from '../../Markdown/Markdown.styles';
+
+interface CreateNativeStylesOptions {
+  styles: any;
+  dynamicProps: MarkdownDynamicProps;
+  styleOverrides?: MarkdownStyleOverrides;
+}
+
+/**
+ * Helper to safely extract style from a dynamic style function.
+ * Removes web-only properties like _web, _hover, etc.
+ */
+function extractStyle(
+  styleFn: any,
+  dynamicProps: MarkdownDynamicProps
+): ViewStyle | TextStyle {
+  if (typeof styleFn !== 'function') {
+    return {};
+  }
+
+  const style = styleFn(dynamicProps);
+
+  if (!style || typeof style !== 'object') {
+    return {};
+  }
+
+  // Remove web-only and variant properties
+  const {
+    _web,
+    _hover,
+    _active,
+    _focus,
+    variants,
+    compoundVariants,
+    ...nativeStyle
+  } = style;
+
+  return nativeStyle;
+}
+
+/**
+ * Merges base style with override style.
+ */
+function mergeStyles(
+  base: ViewStyle | TextStyle,
+  override?: any
+): ViewStyle | TextStyle {
+  if (!override) {
+    return base;
+  }
+  return { ...base, ...override };
+}
+
+/**
+ * Creates a style sheet compatible with react-native-markdown-display
+ * from the theme-integrated markdown styles.
+ */
+export function createNativeStyles({
+  styles,
+  dynamicProps,
+  styleOverrides,
+}: CreateNativeStylesOptions): MarkdownStyles {
+  return {
+    // Body/text
+    body: mergeStyles(
+      extractStyle(styles.body, dynamicProps),
+      styleOverrides?.body
+    ) as TextStyle,
+    text: mergeStyles(
+      extractStyle(styles.body, dynamicProps),
+      styleOverrides?.body
+    ) as TextStyle,
+    paragraph: mergeStyles(
+      extractStyle(styles.body, dynamicProps),
+      styleOverrides?.paragraph
+    ) as ViewStyle,
+
+    // Headings
+    heading1: mergeStyles(
+      extractStyle(styles.heading1, dynamicProps),
+      styleOverrides?.heading1
+    ) as TextStyle,
+    heading2: mergeStyles(
+      extractStyle(styles.heading2, dynamicProps),
+      styleOverrides?.heading2
+    ) as TextStyle,
+    heading3: mergeStyles(
+      extractStyle(styles.heading3, dynamicProps),
+      styleOverrides?.heading3
+    ) as TextStyle,
+    heading4: mergeStyles(
+      extractStyle(styles.heading4, dynamicProps),
+      styleOverrides?.heading4
+    ) as TextStyle,
+    heading5: mergeStyles(
+      extractStyle(styles.heading5, dynamicProps),
+      styleOverrides?.heading5
+    ) as TextStyle,
+    heading6: mergeStyles(
+      extractStyle(styles.heading6, dynamicProps),
+      styleOverrides?.heading6
+    ) as TextStyle,
+
+    // Horizontal rule
+    hr: mergeStyles(
+      extractStyle(styles.hr, dynamicProps),
+      styleOverrides?.hr
+    ) as ViewStyle,
+
+    // Emphasis
+    strong: mergeStyles(
+      extractStyle(styles.strong, dynamicProps),
+      styleOverrides?.strong
+    ) as TextStyle,
+    em: mergeStyles(
+      extractStyle(styles.em, dynamicProps),
+      styleOverrides?.em
+    ) as TextStyle,
+    s: mergeStyles(
+      extractStyle(styles.strikethrough, dynamicProps),
+      styleOverrides?.strikethrough
+    ) as TextStyle,
+
+    // Blockquote
+    blockquote: mergeStyles(
+      extractStyle(styles.blockquote, dynamicProps),
+      styleOverrides?.blockquote
+    ) as ViewStyle,
+
+    // Lists
+    bullet_list: mergeStyles(
+      extractStyle(styles.listUnordered, dynamicProps),
+      styleOverrides?.listUnordered
+    ) as ViewStyle,
+    ordered_list: mergeStyles(
+      extractStyle(styles.listOrdered, dynamicProps),
+      styleOverrides?.listOrdered
+    ) as ViewStyle,
+    list_item: mergeStyles(
+      extractStyle(styles.listItem, dynamicProps),
+      styleOverrides?.listItem
+    ) as ViewStyle,
+    bullet_list_icon: mergeStyles(
+      extractStyle(styles.listItemBullet, dynamicProps),
+      undefined
+    ) as TextStyle,
+    bullet_list_content: mergeStyles(
+      extractStyle(styles.listItemContent, dynamicProps),
+      undefined
+    ) as ViewStyle,
+    ordered_list_icon: mergeStyles(
+      extractStyle(styles.listItemBullet, dynamicProps),
+      undefined
+    ) as TextStyle,
+    ordered_list_content: mergeStyles(
+      extractStyle(styles.listItemContent, dynamicProps),
+      undefined
+    ) as ViewStyle,
+
+    // Code
+    code_inline: mergeStyles(
+      extractStyle(styles.codeInline, dynamicProps),
+      styleOverrides?.codeInline
+    ) as TextStyle,
+    code_block: mergeStyles(
+      extractStyle(styles.codeBlock, dynamicProps),
+      styleOverrides?.codeBlock
+    ) as ViewStyle,
+    fence: mergeStyles(
+      extractStyle(styles.codeBlock, dynamicProps),
+      styleOverrides?.codeBlock
+    ) as ViewStyle,
+    pre: mergeStyles(
+      extractStyle(styles.codeBlock, dynamicProps),
+      styleOverrides?.codeBlock
+    ) as ViewStyle,
+
+    // Table
+    table: mergeStyles(
+      extractStyle(styles.table, dynamicProps),
+      styleOverrides?.table
+    ) as ViewStyle,
+    thead: mergeStyles(
+      extractStyle(styles.tableHead, dynamicProps),
+      styleOverrides?.tableHead
+    ) as ViewStyle,
+    tbody: {} as ViewStyle,
+    tr: mergeStyles(
+      extractStyle(styles.tableRow, dynamicProps),
+      styleOverrides?.tableRow
+    ) as ViewStyle,
+    th: mergeStyles(
+      extractStyle(styles.tableHeaderCell, dynamicProps),
+      styleOverrides?.tableCell
+    ) as TextStyle,
+    td: mergeStyles(
+      extractStyle(styles.tableCell, dynamicProps),
+      styleOverrides?.tableCell
+    ) as TextStyle,
+
+    // Link
+    link: mergeStyles(
+      extractStyle(styles.link, dynamicProps),
+      styleOverrides?.link
+    ) as TextStyle,
+    blocklink: {} as ViewStyle,
+
+    // Image
+    image: mergeStyles(
+      extractStyle(styles.image, dynamicProps),
+      styleOverrides?.image
+    ) as ViewStyle,
+
+    // Other
+    textgroup: {} as ViewStyle,
+    hardbreak: {} as ViewStyle,
+    softbreak: {} as ViewStyle,
+    inline: {} as ViewStyle,
+    span: {} as ViewStyle,
+  };
+}

package/src/renderers/web/index.tsx

@@ -0,0 +1,230 @@
+import type { ComponentType, ReactNode } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import type {
+  MarkdownStyleOverrides,
+  LinkHandler,
+  ImageHandler,
+  CodeBlockOptions,
+} from '../../Markdown/types';
+import type { MarkdownDynamicProps } from '../../Markdown/Markdown.styles';
+
+interface CreateWebRenderersOptions {
+  styles: any;
+  dynamicProps: MarkdownDynamicProps;
+  styleOverrides?: MarkdownStyleOverrides;
+  linkHandler?: LinkHandler;
+  imageHandler?: ImageHandler;
+  codeOptions?: CodeBlockOptions;
+}
+
+type RendererProps = {
+  children?: ReactNode;
+  node?: any;
+  [key: string]: any;
+};
+
+/**
+ * Creates custom component renderers for react-markdown
+ * that use theme-integrated styles.
+ */
+export function createWebRenderers({
+  styles,
+  dynamicProps,
+  styleOverrides,
+  linkHandler,
+  imageHandler,
+  codeOptions,
+}: CreateWebRenderersOptions): Record<string, ComponentType<RendererProps>> {
+  // Helper to get styled props
+  const getStyledProps = (elementName: string) => {
+    const styleArray = [
+      (styles[elementName] as any)?.(dynamicProps),
+      (styleOverrides as any)?.[elementName],
+    ].filter(Boolean);
+    return getWebProps(styleArray);
+  };
+
+  return {
+    // Headings
+    h1: ({ children }: RendererProps) => (
+      <h1 {...getStyledProps('heading1')}>{children}</h1>
+    ),
+    h2: ({ children }: RendererProps) => (
+      <h2 {...getStyledProps('heading2')}>{children}</h2>
+    ),
+    h3: ({ children }: RendererProps) => (
+      <h3 {...getStyledProps('heading3')}>{children}</h3>
+    ),
+    h4: ({ children }: RendererProps) => (
+      <h4 {...getStyledProps('heading4')}>{children}</h4>
+    ),
+    h5: ({ children }: RendererProps) => (
+      <h5 {...getStyledProps('heading5')}>{children}</h5>
+    ),
+    h6: ({ children }: RendererProps) => (
+      <h6 {...getStyledProps('heading6')}>{children}</h6>
+    ),
+
+    // Paragraph
+    p: ({ children }: RendererProps) => (
+      <p {...getStyledProps('body')}>{children}</p>
+    ),
+
+    // Emphasis
+    strong: ({ children }: RendererProps) => (
+      <strong {...getStyledProps('strong')}>{children}</strong>
+    ),
+    em: ({ children }: RendererProps) => (
+      <em {...getStyledProps('em')}>{children}</em>
+    ),
+    del: ({ children }: RendererProps) => (
+      <del {...getStyledProps('strikethrough')}>{children}</del>
+    ),
+
+    // Links
+    a: ({ children, href, title }: RendererProps) => {
+      const handleClick = (e: React.MouseEvent) => {
+        if (linkHandler?.onLinkPress) {
+          const preventDefault = linkHandler.onLinkPress(href || '', title);
+          if (preventDefault) {
+            e.preventDefault();
+          }
+        }
+      };
+
+      const isExternal =
+        href?.startsWith('http://') || href?.startsWith('https://');
+      const shouldOpenExternal =
+        isExternal && (linkHandler?.openExternalLinks ?? true);
+
+      return (
+        <a
+          {...getStyledProps('link')}
+          href={href}
+          title={title}
+          onClick={handleClick}
+          target={shouldOpenExternal ? '_blank' : undefined}
+          rel={shouldOpenExternal ? 'noopener noreferrer' : undefined}
+        >
+          {children}
+        </a>
+      );
+    },
+
+    // Blockquote
+    blockquote: ({ children }: RendererProps) => (
+      <blockquote {...getStyledProps('blockquote')}>{children}</blockquote>
+    ),
+
+    // Code
+    code: ({ children, className, inline }: RendererProps) => {
+      // Check if it's inline code
+      if (inline) {
+        return <code {...getStyledProps('codeInline')}>{children}</code>;
+      }
+
+      // Block code - extract language from className
+      const match = /language-(\w+)/.exec(className || '');
+      const language = match ? match[1] : '';
+
+      return (
+        <code
+          {...getStyledProps('codeBlockText')}
+          data-language={language}
+        >
+          {children}
+        </code>
+      );
+    },
+
+    pre: ({ children }: RendererProps) => (
+      <pre {...getStyledProps('codeBlock')}>{children}</pre>
+    ),
+
+    // Lists
+    ul: ({ children }: RendererProps) => (
+      <ul {...getStyledProps('listUnordered')}>{children}</ul>
+    ),
+    ol: ({ children }: RendererProps) => (
+      <ol {...getStyledProps('listOrdered')}>{children}</ol>
+    ),
+    li: ({ children, checked }: RendererProps) => {
+      // Task list item
+      if (typeof checked === 'boolean') {
+        return (
+          <li {...getStyledProps('taskListItem')}>
+            <input
+              type="checkbox"
+              checked={checked}
+              readOnly
+              {...getStyledProps('taskCheckbox')}
+            />
+            <span {...getStyledProps('listItemContent')}>{children}</span>
+          </li>
+        );
+      }
+
+      return <li {...getStyledProps('listItem')}>{children}</li>;
+    },
+
+    // Table
+    table: ({ children }: RendererProps) => (
+      <table {...getStyledProps('table')}>{children}</table>
+    ),
+    thead: ({ children }: RendererProps) => (
+      <thead {...getStyledProps('tableHead')}>{children}</thead>
+    ),
+    tbody: ({ children }: RendererProps) => <tbody>{children}</tbody>,
+    tr: ({ children }: RendererProps) => (
+      <tr {...getStyledProps('tableRow')}>{children}</tr>
+    ),
+    th: ({ children, style: alignStyle }: RendererProps) => (
+      <th
+        {...getStyledProps('tableHeaderCell')}
+        style={alignStyle}
+      >
+        {children}
+      </th>
+    ),
+    td: ({ children, style: alignStyle }: RendererProps) => (
+      <td
+        {...getStyledProps('tableCell')}
+        style={alignStyle}
+      >
+        {children}
+      </td>
+    ),
+
+    // Image
+    img: ({ src, alt, title }: RendererProps) => {
+      const resolvedSrc = imageHandler?.resolveImageUrl
+        ? imageHandler.resolveImageUrl(src || '')
+        : src;
+
+      const handleClick = () => {
+        if (imageHandler?.onImagePress) {
+          imageHandler.onImagePress(src || '', alt);
+        }
+      };
+
+      return (
+        <img
+          {...getStyledProps('image')}
+          src={resolvedSrc}
+          alt={alt}
+          title={title}
+          onClick={imageHandler?.onImagePress ? handleClick : undefined}
+          style={
+            imageHandler?.onImagePress ? { cursor: 'pointer' } : undefined
+          }
+        />
+      );
+    },
+
+    // Horizontal rule
+    hr: () => <hr {...getStyledProps('hr')} />,
+
+    // Break
+    br: () => <br />,
+  };
+}

package/src/types/react-native-markdown-display.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Type declarations for react-native-markdown-display
+ *
+ * @see https://github.com/iamacup/react-native-markdown-display
+ */
+declare module 'react-native-markdown-display' {
+  import type { ComponentType, ReactNode } from 'react';
+  import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+  export interface MarkdownStyles {
+    body?: TextStyle;
+    heading1?: TextStyle;
+    heading2?: TextStyle;
+    heading3?: TextStyle;
+    heading4?: TextStyle;
+    heading5?: TextStyle;
+    heading6?: TextStyle;
+    hr?: ViewStyle;
+    strong?: TextStyle;
+    em?: TextStyle;
+    s?: TextStyle;
+    blockquote?: ViewStyle;
+    bullet_list?: ViewStyle;
+    ordered_list?: ViewStyle;
+    list_item?: ViewStyle;
+    bullet_list_icon?: TextStyle;
+    bullet_list_content?: ViewStyle;
+    ordered_list_icon?: TextStyle;
+    ordered_list_content?: ViewStyle;
+    code_inline?: TextStyle;
+    code_block?: ViewStyle;
+    fence?: ViewStyle;
+    table?: ViewStyle;
+    thead?: ViewStyle;
+    tbody?: ViewStyle;
+    th?: TextStyle;
+    tr?: ViewStyle;
+    td?: TextStyle;
+    link?: TextStyle;
+    blocklink?: ViewStyle;
+    image?: ViewStyle;
+    text?: TextStyle;
+    textgroup?: ViewStyle;
+    paragraph?: ViewStyle;
+    hardbreak?: ViewStyle;
+    softbreak?: ViewStyle;
+    pre?: ViewStyle;
+    inline?: ViewStyle;
+    span?: ViewStyle;
+    [key: string]: ViewStyle | TextStyle | undefined;
+  }
+
+  export interface MarkdownProps {
+    children: string;
+    style?: MarkdownStyles;
+    rules?: Record<string, ComponentType<any>>;
+    onLinkPress?: (url: string) => boolean;
+    debugPrintTree?: boolean;
+    markdownit?: any;
+  }
+
+  const Markdown: ComponentType<MarkdownProps>;
+  export default Markdown;
+}