@safe-ugc-ui/react 0.5.1 → 1.0.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
 import { UGCCard } from '@safe-ugc-ui/types';
 
@@ -60,7 +61,7 @@ interface UGCContainerProps {
  * Security isolation wrapper for UGC content.
  * All UGC card renderings should be wrapped in this container.
  */
-declare function UGCContainer({ children, style }: UGCContainerProps): react_jsx_runtime.JSX.Element;
+declare const UGCContainer: react.ForwardRefExoticComponent<UGCContainerProps & react.RefAttributes<HTMLDivElement>>;
 
 interface BoxProps {
     style?: CSSProperties;
@@ -83,8 +84,15 @@ interface ColumnProps {
 }
 declare function Column({ style, hoverStyle, children }: ColumnProps): react_jsx_runtime.JSX.Element;
 
+interface TextSpan {
+    text: string;
+    style?: CSSProperties;
+}
 interface TextComponentProps {
-    content: string;
+    content?: string;
+    spans?: TextSpan[];
+    maxLines?: number;
+    truncate?: 'ellipsis' | 'clip';
     style?: CSSProperties;
     hoverStyle?: CSSProperties;
 }
@@ -92,7 +100,7 @@ interface TextComponentProps {
  * Renders text content safely. NEVER uses dangerouslySetInnerHTML.
  * All content is rendered as text nodes via React's built-in escaping.
  */
-declare function Text({ content, style, hoverStyle }: TextComponentProps): react_jsx_runtime.JSX.Element;
+declare function Text({ content, spans, maxLines, truncate, style, hoverStyle, }: TextComponentProps): react_jsx_runtime.JSX.Element;
 
 interface ImageComponentProps {
     src: string;
@@ -208,11 +216,40 @@ interface ToggleProps {
 }
 declare function Toggle({ value, onToggle, onAction, disabled, style, hoverStyle }: ToggleProps): react_jsx_runtime.JSX.Element;
 
+interface AccordionItem {
+    id: string;
+    label: string;
+    content?: ReactNode;
+    disabled?: boolean;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    allowMultiple?: boolean;
+    defaultExpanded?: string[];
+    style?: CSSProperties;
+    hoverStyle?: CSSProperties;
+}
+declare function Accordion({ items, allowMultiple, defaultExpanded, style, hoverStyle, }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+interface TabsItem {
+    id: string;
+    label: string;
+    content?: ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps {
+    tabs: TabsItem[];
+    defaultTab?: string;
+    style?: CSSProperties;
+    hoverStyle?: CSSProperties;
+}
+declare function Tabs({ tabs, defaultTab, style, hoverStyle, }: TabsProps): react_jsx_runtime.JSX.Element;
+
 /**
  * @safe-ugc-ui/react --- Node Renderer
  *
  * Recursive renderer that maps UGC node types to React components.
- * Supports all 16 component types, for-loop rendering, style reference merge,
+ * Supports all currently implemented component types, for-loop rendering, style reference merge,
  * and runtime limits pre-check.
  *
  * For each node:
@@ -240,6 +277,8 @@ interface RenderContext {
     assets: AssetMap;
     locals?: Record<string, unknown>;
     cardStyles?: Record<string, Record<string, unknown>>;
+    fragments?: Record<string, unknown>;
+    fragmentStack?: string[];
     iconResolver?: (name: string) => ReactNode;
     onAction?: (type: string, actionId: string, payload?: unknown) => void;
     onError?: (errors: Array<{
@@ -248,6 +287,9 @@ interface RenderContext {
         path: string;
     }>) => void;
     limits: RuntimeLimits;
+    responsive: {
+        compact: boolean;
+    };
 }
 /**
  * Render a single UGC node to a React element.
@@ -272,7 +314,9 @@ declare function renderTree(rootNode: unknown, state: Record<string, unknown>, a
     code: string;
     message: string;
     path: string;
-}>) => void): ReactNode;
+}>) => void, responsive?: {
+    compact: boolean;
+}, fragments?: Record<string, unknown>): ReactNode;
 
 /**
  * @safe-ugc-ui/react — State Resolver
@@ -325,4 +369,4 @@ declare function resolveValue(value: unknown, state: Record<string, unknown>, lo
  */
 declare function mapStyle(style: Record<string, unknown> | undefined, state: Record<string, unknown>, locals?: Record<string, unknown>): CSSProperties;
 
-export { type AssetMap, Avatar, Badge, Box, Button, Chip, Column, Divider, Grid, Icon, Image, ProgressBar, type RenderContext, Row, type RuntimeLimits, Spacer, Stack, Text, Toggle, UGCContainer, UGCRenderer, type UGCRendererProps, mapStyle, renderNode, renderTree, resolveAsset, resolveRef, resolveValue };
+export { Accordion, type AssetMap, Avatar, Badge, Box, Button, Chip, Column, Divider, Grid, Icon, Image, ProgressBar, type RenderContext, Row, type RuntimeLimits, Spacer, Stack, Tabs, Text, Toggle, UGCContainer, UGCRenderer, type UGCRendererProps, mapStyle, renderNode, renderTree, resolveAsset, resolveRef, resolveValue };