@glyphjs/components 0.1.0 → 0.3.0

package/dist/index.d.cts

@@ -1,11 +1,12 @@
-import { GlyphComponentProps, GlyphComponentDefinition, GraphNode, GraphEdge } from '@glyphjs/types';
+import { GlyphComponentProps, InlineNode, GlyphComponentDefinition, GraphNode, GraphEdge } from '@glyphjs/types';
 import { ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface CalloutData {
     type: 'info' | 'warning' | 'error' | 'tip';
     title?: string;
-    content: string;
+    content: string | InlineNode[];
+    markdown?: boolean;
 }
 /**
  * Renders a styled callout box with variant-specific icon, optional title,
@@ -40,17 +41,18 @@ type DataRecord = Record<string, number | string>;
  * Renders a D3-powered chart supporting line, bar, area, and OHLC types.
  * Uses CSS variables for theming and includes accessibility features.
  */
-declare function Chart({ data, container: containerCtx, }: GlyphComponentProps<ChartData>): ReactElement;
+declare function Chart({ data, block, container: containerCtx, onInteraction, }: GlyphComponentProps<ChartData>): ReactElement;
 
 declare const chartDefinition: GlyphComponentDefinition;
 
 interface StepItem {
     title: string;
     status?: 'pending' | 'active' | 'completed';
-    content: string;
+    content: string | InlineNode[];
 }
 interface StepsData {
     steps: StepItem[];
+    markdown?: boolean;
 }
 /**
  * Renders a vertical list of steps with status indicators.
@@ -88,7 +90,7 @@ interface TableData {
  * and aggregation.  Styling is driven by `--glyph-table-*` CSS custom
  * properties so consumers can re-theme via the Glyph theme system.
  */
-declare function Table({ data, container }: GlyphComponentProps<TableData>): ReactElement;
+declare function Table({ data, block, container, onInteraction, }: GlyphComponentProps<TableData>): ReactElement;
 
 declare const tableDefinition: GlyphComponentDefinition<TableData>;
 
@@ -108,19 +110,20 @@ interface TabsData {
  * - ARIA roles: tablist, tab, tabpanel with proper aria-selected, aria-controls,
  *   and aria-labelledby attributes.
  */
-declare function Tabs({ data, block }: GlyphComponentProps<TabsData>): react_jsx_runtime.JSX.Element;
+declare function Tabs({ data, block, onInteraction }: GlyphComponentProps<TabsData>): react_jsx_runtime.JSX.Element;
 
 declare const tabsDefinition: GlyphComponentDefinition<TabsData>;
 
 interface TimelineEvent {
     date: string;
-    title: string;
-    description?: string;
+    title: string | InlineNode[];
+    description?: string | InlineNode[];
     type?: string;
 }
 interface TimelineData {
     events: TimelineEvent[];
     orientation?: 'vertical' | 'horizontal';
+    markdown?: boolean;
 }
 /**
  * Renders an interactive timeline visualization using D3 for positioning.
@@ -156,7 +159,7 @@ interface GraphData {
     edges: GraphEdgeData[];
     layout?: 'top-down' | 'left-right' | 'bottom-up' | 'radial' | 'force';
 }
-declare function Graph({ data, outgoingRefs, onNavigate, container, }: GlyphComponentProps<GraphData>): ReactElement;
+declare function Graph({ data, block, outgoingRefs, onNavigate, onInteraction, container, }: GlyphComponentProps<GraphData>): ReactElement;
 
 interface PositionedNode extends GraphNode {
     x: number;
@@ -217,7 +220,7 @@ declare function Relation({ data }: GlyphComponentProps<RelationData>): ReactEle
 declare const relationDefinition: GlyphComponentDefinition<RelationData>;
 
 interface KpiMetric {
-    label: string;
+    label: string | InlineNode[];
     value: string;
     delta?: string;
     trend?: 'up' | 'down' | 'flat';
@@ -228,6 +231,7 @@ interface KpiData {
     title?: string;
     metrics: KpiMetric[];
     columns?: number;
+    markdown?: boolean;
 }
 declare function Kpi({ data, block, container }: GlyphComponentProps<KpiData>): ReactElement;
 
@@ -235,32 +239,34 @@ declare const kpiDefinition: GlyphComponentDefinition<KpiData>;
 
 interface AccordionSection {
     title: string;
-    content: string;
+    content: string | InlineNode[];
 }
 interface AccordionData {
     title?: string;
     sections: AccordionSection[];
     defaultOpen?: number[];
     multiple?: boolean;
+    markdown?: boolean;
 }
-declare function Accordion({ data, block }: GlyphComponentProps<AccordionData>): ReactElement;
+declare function Accordion({ data, block, onInteraction, }: GlyphComponentProps<AccordionData>): ReactElement;
 
 declare const accordionDefinition: GlyphComponentDefinition<AccordionData>;
 
 interface ComparisonOption {
     name: string;
-    description?: string;
+    description?: string | InlineNode[];
 }
 interface ComparisonFeature {
     name: string;
-    values: string[];
+    values: (string | InlineNode[])[];
 }
 interface ComparisonData {
     title?: string;
     options: ComparisonOption[];
     features: ComparisonFeature[];
+    markdown?: boolean;
 }
-declare function Comparison({ data, block, container, }: GlyphComponentProps<ComparisonData>): ReactElement;
+declare function Comparison({ data, block, container, onInteraction, }: GlyphComponentProps<ComparisonData>): ReactElement;
 
 declare const comparisonDefinition: GlyphComponentDefinition<ComparisonData>;
 
@@ -320,7 +326,7 @@ interface FileTreeData {
     tree: FileNode[];
     defaultExpanded: boolean;
 }
-declare function FileTree({ data }: GlyphComponentProps<FileTreeData>): ReactElement;
+declare function FileTree({ data, block, onInteraction, }: GlyphComponentProps<FileTreeData>): ReactElement;
 
 declare const fileTreeDefinition: GlyphComponentDefinition<FileTreeData>;
 
@@ -436,31 +442,32 @@ declare const equationDefinition: GlyphComponentDefinition<EquationData>;
 
 interface QuizMultipleChoice {
     type: 'multiple-choice';
-    question: string;
-    options: string[];
+    question: string | InlineNode[];
+    options: (string | InlineNode[])[];
     answer: number;
-    explanation?: string;
+    explanation?: string | InlineNode[];
 }
 interface QuizTrueFalse {
     type: 'true-false';
-    question: string;
+    question: string | InlineNode[];
     answer: boolean;
-    explanation?: string;
+    explanation?: string | InlineNode[];
 }
 interface QuizMultiSelect {
     type: 'multi-select';
-    question: string;
-    options: string[];
+    question: string | InlineNode[];
+    options: (string | InlineNode[])[];
     answer: number[];
-    explanation?: string;
+    explanation?: string | InlineNode[];
 }
 type QuizQuestion = QuizMultipleChoice | QuizTrueFalse | QuizMultiSelect;
 interface QuizData {
     questions: QuizQuestion[];
     showScore?: boolean;
     title?: string;
+    markdown?: boolean;
 }
-declare function Quiz({ data, block }: GlyphComponentProps<QuizData>): ReactElement;
+declare function Quiz({ data, block, onInteraction }: GlyphComponentProps<QuizData>): ReactElement;
 
 declare const quizDefinition: GlyphComponentDefinition<QuizData>;
 
@@ -470,10 +477,10 @@ interface CardAction {
 }
 interface CardItem {
     title: string;
-    subtitle?: string;
+    subtitle?: string | InlineNode[];
     image?: string;
     icon?: string;
-    body?: string;
+    body?: string | InlineNode[];
     actions?: CardAction[];
 }
 interface CardData {
@@ -481,6 +488,7 @@ interface CardData {
     cards: CardItem[];
     variant?: 'default' | 'outlined' | 'elevated';
     columns?: number;
+    markdown?: boolean;
 }
 declare function Card({ data, block, container }: GlyphComponentProps<CardData>): ReactElement;
 
@@ -490,12 +498,12 @@ interface StatItem {
     type: 'stat';
     label: string;
     value: string;
-    description?: string;
+    description?: string | InlineNode[];
 }
 interface FactItem {
     type: 'fact';
     icon?: string;
-    text: string;
+    text: string | InlineNode[];
 }
 interface ProgressItem {
     type: 'progress';
@@ -523,14 +531,14 @@ interface DividerItem {
     type: 'divider';
     style?: 'solid' | 'dashed' | 'dotted';
 }
-interface RatingItem {
+interface RatingItem$1 {
     type: 'rating';
     label: string;
     value: number;
     max?: number;
     description?: string;
 }
-type InfographicItem = StatItem | FactItem | ProgressItem | TextItem | PieItem | DividerItem | RatingItem;
+type InfographicItem = StatItem | FactItem | ProgressItem | TextItem | PieItem | DividerItem | RatingItem$1;
 interface InfographicSection {
     heading?: string;
     items: InfographicItem[];
@@ -538,9 +546,190 @@ interface InfographicSection {
 interface InfographicData {
     title?: string;
     sections: InfographicSection[];
+    markdown?: boolean;
 }
 declare function Infographic({ data, block, container, }: GlyphComponentProps<InfographicData>): ReactElement;
 
 declare const infographicDefinition: GlyphComponentDefinition<InfographicData>;
 
-export { Accordion, type AccordionData, type AccordionSection, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kpi, type KpiData, type KpiMetric, type LayoutResult, MindMap, type MindMapData, type PieItem, type PieSlice, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, type RatingItem, Relation, type RelationData, Sequence, type SequenceData, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, graphDefinition, infographicDefinition, kpiDefinition, mindMapDefinition, quizDefinition, relationDefinition, sequenceDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
+interface PollData {
+    question: string | InlineNode[];
+    options: (string | InlineNode[])[];
+    multiple?: boolean;
+    showResults?: boolean;
+    title?: string;
+    markdown?: boolean;
+}
+declare function Poll({ data, block, onInteraction }: GlyphComponentProps<PollData>): ReactElement;
+
+declare const pollDefinition: GlyphComponentDefinition<PollData>;
+
+interface RatingItem {
+    label: string | InlineNode[];
+    description?: string | InlineNode[];
+}
+interface RatingData {
+    title?: string;
+    scale?: number;
+    mode?: 'star' | 'number';
+    labels?: {
+        low: string;
+        high: string;
+    };
+    items: RatingItem[];
+    markdown?: boolean;
+}
+declare function Rating({ data, block, onInteraction, }: GlyphComponentProps<RatingData>): ReactElement;
+
+declare const ratingDefinition: GlyphComponentDefinition<RatingData>;
+
+interface RankerItemData {
+    id: string;
+    label: string | InlineNode[];
+    description?: string;
+}
+interface RankerData {
+    title?: string;
+    items: RankerItemData[];
+    markdown?: boolean;
+}
+declare function Ranker({ data, block, onInteraction, }: GlyphComponentProps<RankerData>): ReactElement;
+
+declare const rankerDefinition: GlyphComponentDefinition<RankerData>;
+
+interface SliderParameter {
+    id: string;
+    label: string | InlineNode[];
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    unit?: string;
+}
+interface SliderData {
+    title?: string;
+    layout?: 'vertical' | 'horizontal';
+    parameters: SliderParameter[];
+    markdown?: boolean;
+}
+declare function Slider({ data, block, onInteraction, }: GlyphComponentProps<SliderData>): ReactElement;
+
+declare const sliderDefinition: GlyphComponentDefinition<SliderData>;
+
+interface MatrixColumn {
+    id: string;
+    label: string | InlineNode[];
+    weight?: number;
+}
+interface MatrixRow {
+    id: string;
+    label: string | InlineNode[];
+}
+interface MatrixData {
+    title?: string;
+    scale?: number;
+    showTotals?: boolean;
+    columns: MatrixColumn[];
+    rows: MatrixRow[];
+    markdown?: boolean;
+}
+declare function Matrix({ data, block, onInteraction, }: GlyphComponentProps<MatrixData>): ReactElement;
+
+declare const matrixDefinition: GlyphComponentDefinition<MatrixData>;
+
+interface TextField {
+    type: 'text';
+    id: string;
+    label: string;
+    required?: boolean;
+    default?: string;
+    placeholder?: string;
+}
+interface TextareaField {
+    type: 'textarea';
+    id: string;
+    label: string;
+    required?: boolean;
+    default?: string;
+    placeholder?: string;
+    rows?: number;
+}
+interface SelectField {
+    type: 'select';
+    id: string;
+    label: string;
+    required?: boolean;
+    options: string[];
+    default?: string;
+}
+interface CheckboxField {
+    type: 'checkbox';
+    id: string;
+    label: string;
+    default?: boolean;
+}
+interface RangeField {
+    type: 'range';
+    id: string;
+    label: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    default?: number;
+    unit?: string;
+}
+type FormField = TextField | TextareaField | SelectField | CheckboxField | RangeField;
+interface FormData {
+    title?: string;
+    description?: string | InlineNode[];
+    submitLabel?: string;
+    fields: FormField[];
+    markdown?: boolean;
+}
+declare function Form({ data, block, onInteraction }: GlyphComponentProps<FormData>): ReactElement;
+
+declare const formDefinition: GlyphComponentDefinition<FormData>;
+
+interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    priority?: 'high' | 'medium' | 'low';
+    tags?: string[];
+}
+interface KanbanColumn {
+    id: string;
+    title: string;
+    cards: KanbanCard[];
+    limit?: number;
+}
+interface KanbanData {
+    title?: string;
+    columns: KanbanColumn[];
+}
+declare function Kanban({ data, block, onInteraction, }: GlyphComponentProps<KanbanData>): ReactElement;
+
+declare const kanbanDefinition: GlyphComponentDefinition<KanbanData>;
+
+interface AnnotateLabel {
+    name: string;
+    color: string;
+}
+interface Annotation {
+    start: number;
+    end: number;
+    label: string;
+    note?: string;
+}
+interface AnnotateData {
+    title?: string;
+    labels: AnnotateLabel[];
+    text: string | InlineNode[];
+    annotations?: Annotation[];
+    markdown?: boolean;
+}
+declare function Annotate({ data, block, onInteraction, }: GlyphComponentProps<AnnotateData>): ReactElement;
+
+declare const annotateDefinition: GlyphComponentDefinition<AnnotateData>;
+
+export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };