thomas-uikit-core 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -22
- package/dist/index.js +1 -22
- package/package.json +1 -1
- package/src/App.tsx +11 -0
- package/src/components/ui/common/Text.tsx +1 -23
package/dist/index.cjs
CHANGED
|
@@ -143,34 +143,13 @@ Input.displayName = "Input";
|
|
|
143
143
|
// src/components/ui/common/Text.tsx
|
|
144
144
|
var import_react = require("react");
|
|
145
145
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
146
|
-
var variantToTag = {
|
|
147
|
-
h1: "h1",
|
|
148
|
-
h2: "h2",
|
|
149
|
-
h3: "h3",
|
|
150
|
-
"h3-bold": "h3",
|
|
151
|
-
h4: "h4",
|
|
152
|
-
h5: "h5",
|
|
153
|
-
"body-l": "p",
|
|
154
|
-
"body-m": "p",
|
|
155
|
-
"body-m-bold": "p",
|
|
156
|
-
"body-s": "p",
|
|
157
|
-
"label-l": "label",
|
|
158
|
-
"label-m": "label",
|
|
159
|
-
"label-s": "label",
|
|
160
|
-
"caption-l": "span",
|
|
161
|
-
"caption-m": "span",
|
|
162
|
-
"button-l": "span",
|
|
163
|
-
"button-m": "span",
|
|
164
|
-
"button-s": "span"
|
|
165
|
-
};
|
|
166
146
|
var Text = ({
|
|
167
147
|
variant = "body-m",
|
|
168
|
-
as,
|
|
148
|
+
as: Component = "span",
|
|
169
149
|
children,
|
|
170
150
|
className = "",
|
|
171
151
|
...props
|
|
172
152
|
}) => {
|
|
173
|
-
const Component = as || variantToTag[variant] || "span";
|
|
174
153
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
175
154
|
Component,
|
|
176
155
|
{
|
package/dist/index.js
CHANGED
|
@@ -76,34 +76,13 @@ Input.displayName = "Input";
|
|
|
76
76
|
// src/components/ui/common/Text.tsx
|
|
77
77
|
import "react";
|
|
78
78
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
79
|
-
var variantToTag = {
|
|
80
|
-
h1: "h1",
|
|
81
|
-
h2: "h2",
|
|
82
|
-
h3: "h3",
|
|
83
|
-
"h3-bold": "h3",
|
|
84
|
-
h4: "h4",
|
|
85
|
-
h5: "h5",
|
|
86
|
-
"body-l": "p",
|
|
87
|
-
"body-m": "p",
|
|
88
|
-
"body-m-bold": "p",
|
|
89
|
-
"body-s": "p",
|
|
90
|
-
"label-l": "label",
|
|
91
|
-
"label-m": "label",
|
|
92
|
-
"label-s": "label",
|
|
93
|
-
"caption-l": "span",
|
|
94
|
-
"caption-m": "span",
|
|
95
|
-
"button-l": "span",
|
|
96
|
-
"button-m": "span",
|
|
97
|
-
"button-s": "span"
|
|
98
|
-
};
|
|
99
79
|
var Text = ({
|
|
100
80
|
variant = "body-m",
|
|
101
|
-
as,
|
|
81
|
+
as: Component = "span",
|
|
102
82
|
children,
|
|
103
83
|
className = "",
|
|
104
84
|
...props
|
|
105
85
|
}) => {
|
|
106
|
-
const Component = as || variantToTag[variant] || "span";
|
|
107
86
|
return /* @__PURE__ */ jsx3(
|
|
108
87
|
Component,
|
|
109
88
|
{
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -70,6 +70,17 @@ function TypographyPreview() {
|
|
|
70
70
|
<Text variant="button-l">Button Large</Text>
|
|
71
71
|
<Text variant="button-m">Button Medium</Text>
|
|
72
72
|
<Text variant="button-s">Button Small</Text>
|
|
73
|
+
|
|
74
|
+
{/* Color examples */}
|
|
75
|
+
<div style={{ display: 'flex', gap: 16, marginTop: 24, flexWrap: 'wrap' }}>
|
|
76
|
+
<Text variant="h3" as="h3" className="text-ocean-500">Ocean 500</Text>
|
|
77
|
+
<Text variant="h3" as="h3" className="text-volcano-500">Volcano 500</Text>
|
|
78
|
+
<Text variant="h3" as="h3" className="text-desert-500">Desert 500</Text>
|
|
79
|
+
<Text variant="h3" as="h3" className="text-forest-500">Forest 500</Text>
|
|
80
|
+
<Text variant="h3" as="h3" className="text-twilight-500">Twilight 500</Text>
|
|
81
|
+
<Text variant="h3" as="h3" className="text-flamingo-500">Flamingo 500</Text>
|
|
82
|
+
<Text variant="h3" as="h3" className="text-sumi-900">Sumi 900</Text>
|
|
83
|
+
</div>
|
|
73
84
|
</div>
|
|
74
85
|
);
|
|
75
86
|
}
|
|
@@ -27,35 +27,13 @@ interface TextProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
27
27
|
className?: string;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
const variantToTag: Record<TextVariant, React.ElementType> = {
|
|
31
|
-
h1: 'h1',
|
|
32
|
-
h2: 'h2',
|
|
33
|
-
h3: 'h3',
|
|
34
|
-
'h3-bold': 'h3',
|
|
35
|
-
h4: 'h4',
|
|
36
|
-
h5: 'h5',
|
|
37
|
-
'body-l': 'p',
|
|
38
|
-
'body-m': 'p',
|
|
39
|
-
'body-m-bold': 'p',
|
|
40
|
-
'body-s': 'p',
|
|
41
|
-
'label-l': 'label',
|
|
42
|
-
'label-m': 'label',
|
|
43
|
-
'label-s': 'label',
|
|
44
|
-
'caption-l': 'span',
|
|
45
|
-
'caption-m': 'span',
|
|
46
|
-
'button-l': 'span',
|
|
47
|
-
'button-m': 'span',
|
|
48
|
-
'button-s': 'span',
|
|
49
|
-
};
|
|
50
|
-
|
|
51
30
|
export const Text: React.FC<TextProps> = ({
|
|
52
31
|
variant = "body-m",
|
|
53
|
-
as,
|
|
32
|
+
as: Component = "span",
|
|
54
33
|
children,
|
|
55
34
|
className = "",
|
|
56
35
|
...props
|
|
57
36
|
}) => {
|
|
58
|
-
const Component = as || variantToTag[variant] || 'span';
|
|
59
37
|
return (
|
|
60
38
|
<Component
|
|
61
39
|
className={`text-${variant} ${className}`.trim()}
|