Hugging Face's logo

SaylorTwift
/
openhands

agent
coding-agent
cli
llm
tool-use
Model card Files
xet
 Community
openhands
File size: 2,704 Bytes
5f40163
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "#/utils/utils";

const typographyVariants = cva("", {
  variants: {
    variant: {
      h1: "text-[32px] text-white font-medium leading-5",
      h2: "text-xl font-medium leading-6 -tracking-[0.02em] text-white",
      h3: "text-sm font-medium text-[var(--oh-text-tertiary)]",
      span: "text-sm font-normal text-white leading-5.5",
      p: "text-sm font-normal text-white leading-5.5",
      codeBlock:
        "font-mono text-sm leading-relaxed text-[var(--oh-text-tertiary)] whitespace-pre-wrap",
    },
  },
  defaultVariants: {
    variant: "h1",
  },
});

interface TypographyProps extends VariantProps<typeof typographyVariants> {
  className?: string;
  testId?: string;
  children: React.ReactNode;
}

export function Typography({
  variant,
  className,
  testId,
  children,
}: TypographyProps) {
  const Tag = variant as keyof React.JSX.IntrinsicElements;

  return (
    <Tag
      data-testid={testId}
      className={cn(typographyVariants({ variant }), className)}
    >
      {children}
    </Tag>
  );
}

// Export individual heading components for convenience
export function H1({
  className,
  testId,
  children,
}: Omit<TypographyProps, "variant">) {
  return (
    <Typography variant="h1" className={className} testId={testId}>
      {children}
    </Typography>
  );
}

export function H2({
  className,
  testId,
  children,
}: Omit<TypographyProps, "variant">) {
  return (
    <Typography variant="h2" className={className} testId={testId}>
      {children}
    </Typography>
  );
}

export function H3({
  className,
  testId,
  children,
}: Omit<TypographyProps, "variant">) {
  return (
    <Typography variant="h3" className={className} testId={testId}>
      {children}
    </Typography>
  );
}

export function Text({
  className,
  testId,
  children,
}: Omit<TypographyProps, "variant">) {
  return (
    <Typography variant="span" className={className} testId={testId}>
      {children}
    </Typography>
  );
}

export function CodeBlock({
  className,
  testId,
  children,
}: Omit<TypographyProps, "variant">) {
  return (
    <Typography variant="codeBlock" className={className} testId={testId}>
      {children}
    </Typography>
  );
}

export function Paragraph({
  className,
  testId,
  children,
}: Omit<TypographyProps, "variant">) {
  return (
    <Typography variant="p" className={className} testId={testId}>
      {children}
    </Typography>
  );
}

// Attach components to Typography for the expected API
Typography.H1 = H1;
Typography.H2 = H2;
Typography.H3 = H3;
Typography.Text = Text;
Typography.CodeBlock = CodeBlock;
Typography.Paragraph = Paragraph;