@yuno-payments/dashboard-design-system 0.0.20 → 0.0.21
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.
|
@@ -5,3 +5,4 @@ export { Checkbox, type CheckboxProps } from './checkbox';
|
|
|
5
5
|
export { Icon, type IconProps } from './icon';
|
|
6
6
|
export { Tooltip, type TooltipProps } from './tooltip';
|
|
7
7
|
export { Input, type InputProps } from './input';
|
|
8
|
+
export { Typography, type TypographyProps } from './typography';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { Typography, type TypographyProps } from './typography';
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { cva as g } from "../../../node_modules/class-variance-authority/dist/index.js";
|
|
2
|
+
import { cn as x } from "../../../lib/utils.js";
|
|
3
|
+
import { forwardRef as o, createElement as s } from "react";
|
|
4
|
+
const h = g("font-[var(--font-family-inter)]", {
|
|
5
|
+
variants: {
|
|
6
|
+
variant: {
|
|
7
|
+
// shadcn variants
|
|
8
|
+
h1: "scroll-m-20 text-4xl tracking-tight lg:text-5xl",
|
|
9
|
+
h2: "scroll-m-20 text-3xl tracking-tight",
|
|
10
|
+
h3: "scroll-m-20 text-2xl tracking-tight",
|
|
11
|
+
h4: "scroll-m-20 text-xl tracking-tight",
|
|
12
|
+
p: "leading-7 [&:not(:first-child)]:mt-6",
|
|
13
|
+
lead: "text-xl text-muted-foreground",
|
|
14
|
+
large: "text-lg font-semibold",
|
|
15
|
+
small: "text-sm font-medium leading-none",
|
|
16
|
+
muted: "text-sm text-muted-foreground",
|
|
17
|
+
blockquote: "mt-6 border-l-2 pl-6 italic",
|
|
18
|
+
list: "my-6 ml-6 list-disc [&>li]:mt-2",
|
|
19
|
+
// backward-compatible legacy variants
|
|
20
|
+
body: "leading-7 [&:not(:first-child)]:mt-6",
|
|
21
|
+
// alias of p
|
|
22
|
+
subtitle: "text-lg",
|
|
23
|
+
// approx alias of large (without forcing weight)
|
|
24
|
+
h5: "text-lg tracking-tight",
|
|
25
|
+
tiny: "text-xs leading-tight",
|
|
26
|
+
"9xl": "text-[var(--font-size-9xl)] leading-[var(--line-height-9xl)] tracking-[var(--letter-spacing-9xl)]",
|
|
27
|
+
"8xl": "text-[var(--font-size-8xl)] leading-[var(--line-height-8xl)] tracking-[var(--letter-spacing-8xl)]",
|
|
28
|
+
"7xl": "text-[var(--font-size-7xl)] leading-[var(--line-height-7xl)] tracking-[var(--letter-spacing-7xl)]",
|
|
29
|
+
"6xl": "text-[var(--font-size-6xl)] leading-[var(--line-height-6xl)] tracking-[var(--letter-spacing-6xl)]",
|
|
30
|
+
"5xl": "text-[var(--font-size-5xl)] leading-[var(--line-height-5xl)] tracking-[var(--letter-spacing-5xl)]",
|
|
31
|
+
"4xl": "text-[var(--font-size-4xl)] leading-[var(--line-height-4xl)] tracking-[var(--letter-spacing-4xl)]",
|
|
32
|
+
"3xl": "text-[var(--font-size-3xl)] leading-[var(--line-height-3xl)]",
|
|
33
|
+
"2xl": "text-[var(--font-size-2xl)] leading-[var(--line-height-2xl)]",
|
|
34
|
+
xl: "text-[var(--font-size-xl)] leading-[var(--line-height-xl)]",
|
|
35
|
+
l: "text-[var(--font-size-l)] leading-[var(--line-height-l)]",
|
|
36
|
+
m: "text-[var(--font-size-m)] leading-[var(--line-height-m)]",
|
|
37
|
+
base: "text-[var(--font-size-base)] leading-[var(--line-height-base)]"
|
|
38
|
+
},
|
|
39
|
+
weight: {
|
|
40
|
+
regular: "font-normal",
|
|
41
|
+
bold: "font-bold"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
defaultVariants: {
|
|
45
|
+
variant: "p",
|
|
46
|
+
weight: "regular"
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
function c(t) {
|
|
50
|
+
switch (t) {
|
|
51
|
+
case "h1":
|
|
52
|
+
return "h1";
|
|
53
|
+
case "h2":
|
|
54
|
+
return "h2";
|
|
55
|
+
case "h3":
|
|
56
|
+
return "h3";
|
|
57
|
+
case "h4":
|
|
58
|
+
return "h4";
|
|
59
|
+
case "blockquote":
|
|
60
|
+
return "blockquote";
|
|
61
|
+
case "list":
|
|
62
|
+
return "ul";
|
|
63
|
+
case "p":
|
|
64
|
+
case "lead":
|
|
65
|
+
case "large":
|
|
66
|
+
case "small":
|
|
67
|
+
case "muted":
|
|
68
|
+
default:
|
|
69
|
+
return "p";
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
const d = o(
|
|
73
|
+
({ className: t, variant: e = "p", weight: l, as: a, ...i }, r) => {
|
|
74
|
+
const n = a || c(e ?? "p");
|
|
75
|
+
return s(n, {
|
|
76
|
+
className: x(h({ variant: e, weight: l }), t),
|
|
77
|
+
ref: r,
|
|
78
|
+
...i
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
d.displayName = "Typography";
|
|
83
|
+
export {
|
|
84
|
+
d as Typography
|
|
85
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
/* empty css */
|
|
2
|
-
import { Avatar as
|
|
2
|
+
import { Avatar as p } from "./components/atoms/avatar/avatar.js";
|
|
3
3
|
import { Badge as m } from "./components/atoms/badge/badge.js";
|
|
4
4
|
import { Button as f } from "./components/atoms/button/button.js";
|
|
5
5
|
import { Checkbox as c } from "./components/atoms/checkbox/checkbox.js";
|
|
6
|
-
import { Icon as
|
|
7
|
-
import { Tooltip as
|
|
8
|
-
import { Input as
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
6
|
+
import { Icon as i } from "./components/atoms/icon/icon.js";
|
|
7
|
+
import { Tooltip as u } from "./components/atoms/tooltip/tooltip.js";
|
|
8
|
+
import { Input as b } from "./components/atoms/input/input.js";
|
|
9
|
+
import { Typography as h } from "./components/atoms/typography/typography.js";
|
|
10
|
+
import { Breadcrumb as y } from "./components/molecules/breadcrumb/breadcrumb.js";
|
|
11
|
+
import { Dialog as T } from "./components/organisms/dialog/dialog.js";
|
|
11
12
|
export {
|
|
12
|
-
|
|
13
|
+
p as Avatar,
|
|
13
14
|
m as Badge,
|
|
14
|
-
|
|
15
|
+
y as Breadcrumb,
|
|
15
16
|
f as Button,
|
|
16
17
|
c as Checkbox,
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
T as Dialog,
|
|
19
|
+
i as Icon,
|
|
20
|
+
b as Input,
|
|
21
|
+
u as Tooltip,
|
|
22
|
+
h as Typography
|
|
21
23
|
};
|