@altimateai/ui-components 0.0.1-beta.5 → 0.0.1-beta.6
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/CoachForm.js +1 -1
- package/dist/storybook/Accordion.stories.tsx +52 -52
- package/dist/storybook/Alert.stories.tsx +61 -61
- package/dist/storybook/AlertDialog.stories.tsx +161 -161
- package/dist/storybook/Avatar.stories.tsx +58 -58
- package/dist/storybook/Badge.stories.tsx +36 -36
- package/dist/storybook/Button.stories.tsx +109 -109
- package/dist/storybook/Card.stories.tsx +69 -69
- package/dist/storybook/Checkbox.stories.tsx +65 -65
- package/dist/storybook/Command.stories.tsx +35 -35
- package/dist/storybook/DropdownMenu.stories.tsx +36 -36
- package/dist/storybook/Form.stories.tsx +114 -114
- package/dist/storybook/HoverCard.stories.tsx +99 -99
- package/dist/storybook/Input.stories.tsx +53 -53
- package/dist/storybook/Label.stories.tsx +42 -42
- package/dist/storybook/Menubar.stories.tsx +159 -159
- package/dist/storybook/Pagination.stories.tsx +152 -152
- package/dist/storybook/Popover.stories.tsx +23 -23
- package/dist/storybook/Progress.stories.tsx +89 -89
- package/dist/storybook/RadioGroup.stories.tsx +58 -58
- package/dist/storybook/Resizable.stories.tsx +119 -119
- package/dist/storybook/ScrollArea.stories.tsx +101 -101
- package/dist/storybook/Select.stories.tsx +95 -95
- package/dist/storybook/Sheet.stories.tsx +69 -69
- package/dist/storybook/Sidebar.stories.tsx +97 -97
- package/dist/storybook/Slider.stories.tsx +79 -79
- package/dist/storybook/Switch.stories.tsx +90 -90
- package/dist/storybook/Textarea.stories.tsx +50 -50
- package/dist/storybook/Toast.stories.tsx +107 -107
- package/dist/storybook/Tooltip.stories.tsx +28 -28
- package/dist/storybook/Typography.stories.tsx +178 -178
- package/package.json +2 -2
- package/readme.md +11 -11
|
@@ -1,107 +1,107 @@
|
|
|
1
|
-
import { Meta, StoryFn } from "@storybook/react";
|
|
2
|
-
import {
|
|
3
|
-
Toast,
|
|
4
|
-
ToastProvider,
|
|
5
|
-
ToastTitle,
|
|
6
|
-
ToastDescription,
|
|
7
|
-
ToastAction,
|
|
8
|
-
ToastClose,
|
|
9
|
-
ToastViewport,
|
|
10
|
-
Toaster,
|
|
11
|
-
Button,
|
|
12
|
-
toast,
|
|
13
|
-
} from "../shadcn";
|
|
14
|
-
|
|
15
|
-
export default {
|
|
16
|
-
title: "Shadcn/Components/Toast",
|
|
17
|
-
component: Toast,
|
|
18
|
-
decorators: [
|
|
19
|
-
Story => (
|
|
20
|
-
<ToastProvider>
|
|
21
|
-
<Story />
|
|
22
|
-
<Toaster />
|
|
23
|
-
<ToastViewport />
|
|
24
|
-
</ToastProvider>
|
|
25
|
-
),
|
|
26
|
-
],
|
|
27
|
-
} as Meta;
|
|
28
|
-
|
|
29
|
-
const Template: StoryFn = args => (
|
|
30
|
-
<Toast {...args}>
|
|
31
|
-
<ToastTitle>Toast Title</ToastTitle>
|
|
32
|
-
<ToastDescription>Toast description goes here.</ToastDescription>
|
|
33
|
-
<ToastClose />
|
|
34
|
-
</Toast>
|
|
35
|
-
);
|
|
36
|
-
|
|
37
|
-
export const Default = Template.bind({});
|
|
38
|
-
Default.args = {
|
|
39
|
-
variant: "default",
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export const Destructive = Template.bind({});
|
|
43
|
-
Destructive.args = {
|
|
44
|
-
variant: "destructive",
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export const WithAction: StoryFn = () => (
|
|
48
|
-
<Toast>
|
|
49
|
-
<ToastTitle>Scheduled: Catch up</ToastTitle>
|
|
50
|
-
<ToastDescription>Friday, February 10, 2024 at 5:57 PM</ToastDescription>
|
|
51
|
-
<ToastAction altText="Goto schedule to undo" onClick={() => {}}>
|
|
52
|
-
Undo
|
|
53
|
-
</ToastAction>
|
|
54
|
-
<ToastClose />
|
|
55
|
-
</Toast>
|
|
56
|
-
);
|
|
57
|
-
|
|
58
|
-
export const WithLongContent: StoryFn = () => (
|
|
59
|
-
<Toast>
|
|
60
|
-
<ToastTitle>Long Content Example</ToastTitle>
|
|
61
|
-
<ToastDescription>
|
|
62
|
-
This is a toast with a very long description that might wrap to multiple lines. It
|
|
63
|
-
demonstrates how the toast component handles longer content while maintaining its layout and
|
|
64
|
-
readability.
|
|
65
|
-
</ToastDescription>
|
|
66
|
-
<ToastClose />
|
|
67
|
-
</Toast>
|
|
68
|
-
);
|
|
69
|
-
|
|
70
|
-
export const Success: StoryFn = () => (
|
|
71
|
-
<Toast>
|
|
72
|
-
<div className="al-flex al-items-center al-gap-2">
|
|
73
|
-
<div className="al-h-6 al-w-6 al-text-green-500">✓</div>
|
|
74
|
-
<ToastTitle>Successfully saved!</ToastTitle>
|
|
75
|
-
</div>
|
|
76
|
-
<ToastDescription>Your changes have been saved successfully.</ToastDescription>
|
|
77
|
-
<ToastClose />
|
|
78
|
-
</Toast>
|
|
79
|
-
);
|
|
80
|
-
|
|
81
|
-
export const Error: StoryFn = () => (
|
|
82
|
-
<Toast variant="destructive">
|
|
83
|
-
<div className="al-flex al-items-center al-gap-2">
|
|
84
|
-
<div className="al-h-6 al-w-6 al-text-red-500">✕</div>
|
|
85
|
-
<ToastTitle>Error occurred</ToastTitle>
|
|
86
|
-
</div>
|
|
87
|
-
<ToastDescription>There was a problem with your request. Please try again.</ToastDescription>
|
|
88
|
-
<ToastAction altText="Try again" onClick={() => {}}>
|
|
89
|
-
Try again
|
|
90
|
-
</ToastAction>
|
|
91
|
-
<ToastClose />
|
|
92
|
-
</Toast>
|
|
93
|
-
);
|
|
94
|
-
|
|
95
|
-
export const OnClick: StoryFn = () => (
|
|
96
|
-
<Button
|
|
97
|
-
variant="outline"
|
|
98
|
-
onClick={() => {
|
|
99
|
-
toast({
|
|
100
|
-
title: "Uh oh! Something went wrong.",
|
|
101
|
-
description: "There was a problem with your request.",
|
|
102
|
-
});
|
|
103
|
-
}}
|
|
104
|
-
>
|
|
105
|
-
Show Toast
|
|
106
|
-
</Button>
|
|
107
|
-
);
|
|
1
|
+
import { Meta, StoryFn } from "@storybook/react";
|
|
2
|
+
import {
|
|
3
|
+
Toast,
|
|
4
|
+
ToastProvider,
|
|
5
|
+
ToastTitle,
|
|
6
|
+
ToastDescription,
|
|
7
|
+
ToastAction,
|
|
8
|
+
ToastClose,
|
|
9
|
+
ToastViewport,
|
|
10
|
+
Toaster,
|
|
11
|
+
Button,
|
|
12
|
+
toast,
|
|
13
|
+
} from "../shadcn";
|
|
14
|
+
|
|
15
|
+
export default {
|
|
16
|
+
title: "Shadcn/Components/Toast",
|
|
17
|
+
component: Toast,
|
|
18
|
+
decorators: [
|
|
19
|
+
Story => (
|
|
20
|
+
<ToastProvider>
|
|
21
|
+
<Story />
|
|
22
|
+
<Toaster />
|
|
23
|
+
<ToastViewport />
|
|
24
|
+
</ToastProvider>
|
|
25
|
+
),
|
|
26
|
+
],
|
|
27
|
+
} as Meta;
|
|
28
|
+
|
|
29
|
+
const Template: StoryFn = args => (
|
|
30
|
+
<Toast {...args}>
|
|
31
|
+
<ToastTitle>Toast Title</ToastTitle>
|
|
32
|
+
<ToastDescription>Toast description goes here.</ToastDescription>
|
|
33
|
+
<ToastClose />
|
|
34
|
+
</Toast>
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
export const Default = Template.bind({});
|
|
38
|
+
Default.args = {
|
|
39
|
+
variant: "default",
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export const Destructive = Template.bind({});
|
|
43
|
+
Destructive.args = {
|
|
44
|
+
variant: "destructive",
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export const WithAction: StoryFn = () => (
|
|
48
|
+
<Toast>
|
|
49
|
+
<ToastTitle>Scheduled: Catch up</ToastTitle>
|
|
50
|
+
<ToastDescription>Friday, February 10, 2024 at 5:57 PM</ToastDescription>
|
|
51
|
+
<ToastAction altText="Goto schedule to undo" onClick={() => {}}>
|
|
52
|
+
Undo
|
|
53
|
+
</ToastAction>
|
|
54
|
+
<ToastClose />
|
|
55
|
+
</Toast>
|
|
56
|
+
);
|
|
57
|
+
|
|
58
|
+
export const WithLongContent: StoryFn = () => (
|
|
59
|
+
<Toast>
|
|
60
|
+
<ToastTitle>Long Content Example</ToastTitle>
|
|
61
|
+
<ToastDescription>
|
|
62
|
+
This is a toast with a very long description that might wrap to multiple lines. It
|
|
63
|
+
demonstrates how the toast component handles longer content while maintaining its layout and
|
|
64
|
+
readability.
|
|
65
|
+
</ToastDescription>
|
|
66
|
+
<ToastClose />
|
|
67
|
+
</Toast>
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
export const Success: StoryFn = () => (
|
|
71
|
+
<Toast>
|
|
72
|
+
<div className="al-flex al-items-center al-gap-2">
|
|
73
|
+
<div className="al-h-6 al-w-6 al-text-green-500">✓</div>
|
|
74
|
+
<ToastTitle>Successfully saved!</ToastTitle>
|
|
75
|
+
</div>
|
|
76
|
+
<ToastDescription>Your changes have been saved successfully.</ToastDescription>
|
|
77
|
+
<ToastClose />
|
|
78
|
+
</Toast>
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
export const Error: StoryFn = () => (
|
|
82
|
+
<Toast variant="destructive">
|
|
83
|
+
<div className="al-flex al-items-center al-gap-2">
|
|
84
|
+
<div className="al-h-6 al-w-6 al-text-red-500">✕</div>
|
|
85
|
+
<ToastTitle>Error occurred</ToastTitle>
|
|
86
|
+
</div>
|
|
87
|
+
<ToastDescription>There was a problem with your request. Please try again.</ToastDescription>
|
|
88
|
+
<ToastAction altText="Try again" onClick={() => {}}>
|
|
89
|
+
Try again
|
|
90
|
+
</ToastAction>
|
|
91
|
+
<ToastClose />
|
|
92
|
+
</Toast>
|
|
93
|
+
);
|
|
94
|
+
|
|
95
|
+
export const OnClick: StoryFn = () => (
|
|
96
|
+
<Button
|
|
97
|
+
variant="outline"
|
|
98
|
+
onClick={() => {
|
|
99
|
+
toast({
|
|
100
|
+
title: "Uh oh! Something went wrong.",
|
|
101
|
+
description: "There was a problem with your request.",
|
|
102
|
+
});
|
|
103
|
+
}}
|
|
104
|
+
>
|
|
105
|
+
Show Toast
|
|
106
|
+
</Button>
|
|
107
|
+
);
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../shadcn";
|
|
3
|
-
|
|
4
|
-
const meta: Meta<typeof Tooltip> = {
|
|
5
|
-
title: "Shadcn/Components/Tooltip",
|
|
6
|
-
component: Tooltip,
|
|
7
|
-
decorators: [
|
|
8
|
-
Story => (
|
|
9
|
-
<TooltipProvider>
|
|
10
|
-
<Story />
|
|
11
|
-
</TooltipProvider>
|
|
12
|
-
),
|
|
13
|
-
],
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export default meta;
|
|
17
|
-
type Story = StoryObj<typeof Tooltip>;
|
|
18
|
-
|
|
19
|
-
export const Default: Story = {
|
|
20
|
-
render: () => (
|
|
21
|
-
<Tooltip>
|
|
22
|
-
<TooltipTrigger>Hover me</TooltipTrigger>
|
|
23
|
-
<TooltipContent>
|
|
24
|
-
<p>Tooltip content</p>
|
|
25
|
-
</TooltipContent>
|
|
26
|
-
</Tooltip>
|
|
27
|
-
),
|
|
28
|
-
};
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../shadcn";
|
|
3
|
+
|
|
4
|
+
const meta: Meta<typeof Tooltip> = {
|
|
5
|
+
title: "Shadcn/Components/Tooltip",
|
|
6
|
+
component: Tooltip,
|
|
7
|
+
decorators: [
|
|
8
|
+
Story => (
|
|
9
|
+
<TooltipProvider>
|
|
10
|
+
<Story />
|
|
11
|
+
</TooltipProvider>
|
|
12
|
+
),
|
|
13
|
+
],
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export default meta;
|
|
17
|
+
type Story = StoryObj<typeof Tooltip>;
|
|
18
|
+
|
|
19
|
+
export const Default: Story = {
|
|
20
|
+
render: () => (
|
|
21
|
+
<Tooltip>
|
|
22
|
+
<TooltipTrigger>Hover me</TooltipTrigger>
|
|
23
|
+
<TooltipContent>
|
|
24
|
+
<p>Tooltip content</p>
|
|
25
|
+
</TooltipContent>
|
|
26
|
+
</Tooltip>
|
|
27
|
+
),
|
|
28
|
+
};
|
|
@@ -1,178 +1,178 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import { Typography as Component } from "../shadcn";
|
|
3
|
-
|
|
4
|
-
const meta = {
|
|
5
|
-
title: "Shadcn/Theme/Typography",
|
|
6
|
-
component: Component,
|
|
7
|
-
parameters: {
|
|
8
|
-
layout: "centered",
|
|
9
|
-
},
|
|
10
|
-
} satisfies Meta<typeof Component>;
|
|
11
|
-
|
|
12
|
-
export default meta;
|
|
13
|
-
type Story = StoryObj<typeof meta>;
|
|
14
|
-
|
|
15
|
-
export const Typography: Story = {
|
|
16
|
-
args: {
|
|
17
|
-
variant: "h1",
|
|
18
|
-
weight: "regular",
|
|
19
|
-
size: "md",
|
|
20
|
-
children: "Heading 1",
|
|
21
|
-
},
|
|
22
|
-
render: () => (
|
|
23
|
-
<div className="space-y-8">
|
|
24
|
-
{/* Heading 1 Variations */}
|
|
25
|
-
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
26
|
-
<Component variant="h1" weight="regular">
|
|
27
|
-
Heading 1
|
|
28
|
-
<br /> Regular
|
|
29
|
-
</Component>
|
|
30
|
-
<Component variant="h1" weight="medium">
|
|
31
|
-
Heading 1 <br />
|
|
32
|
-
Medium
|
|
33
|
-
</Component>
|
|
34
|
-
<Component variant="h1" weight="semibold">
|
|
35
|
-
Heading 1 <br />
|
|
36
|
-
Semibold
|
|
37
|
-
</Component>
|
|
38
|
-
<Component variant="h1" weight="bold">
|
|
39
|
-
Heading 1 <br />
|
|
40
|
-
Bold
|
|
41
|
-
</Component>
|
|
42
|
-
<Component variant="caption" className="al-text-gray-500">
|
|
43
|
-
48px / Line height: 60px
|
|
44
|
-
</Component>
|
|
45
|
-
</div>
|
|
46
|
-
|
|
47
|
-
{/* Heading 2 Variations */}
|
|
48
|
-
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
49
|
-
<Component variant="h2" weight="regular">
|
|
50
|
-
Heading 2 <br />
|
|
51
|
-
Regular
|
|
52
|
-
</Component>
|
|
53
|
-
<Component variant="h2" weight="medium">
|
|
54
|
-
Heading 2 <br />
|
|
55
|
-
Medium
|
|
56
|
-
</Component>
|
|
57
|
-
<Component variant="h2" weight="semibold">
|
|
58
|
-
Heading 2 <br />
|
|
59
|
-
Semibold
|
|
60
|
-
</Component>
|
|
61
|
-
<Component variant="h2" weight="bold">
|
|
62
|
-
Heading 2 <br />
|
|
63
|
-
Bold
|
|
64
|
-
</Component>
|
|
65
|
-
<Component variant="caption" className="al-text-gray-500">
|
|
66
|
-
36px / Line height: 44px
|
|
67
|
-
</Component>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
{/* Heading 3 Variations */}
|
|
71
|
-
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
72
|
-
<Component variant="h3" weight="regular">
|
|
73
|
-
Heading 3 <br />
|
|
74
|
-
Regular
|
|
75
|
-
</Component>
|
|
76
|
-
<Component variant="h3" weight="medium">
|
|
77
|
-
Heading 3 <br />
|
|
78
|
-
Medium
|
|
79
|
-
</Component>
|
|
80
|
-
<Component variant="h3" weight="semibold">
|
|
81
|
-
Heading 3 <br />
|
|
82
|
-
Semibold
|
|
83
|
-
</Component>
|
|
84
|
-
<Component variant="h3" weight="bold">
|
|
85
|
-
Heading 3 <br />
|
|
86
|
-
Bold
|
|
87
|
-
</Component>
|
|
88
|
-
<Component variant="caption" className="al-text-gray-500">
|
|
89
|
-
30px / Line height: 38px
|
|
90
|
-
</Component>
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
{/* Heading 4 Variations */}
|
|
94
|
-
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
95
|
-
<Component variant="h4" weight="regular">
|
|
96
|
-
Heading 4 <br />
|
|
97
|
-
Regular
|
|
98
|
-
</Component>
|
|
99
|
-
<Component variant="h4" weight="medium">
|
|
100
|
-
Heading 4 <br />
|
|
101
|
-
Medium
|
|
102
|
-
</Component>
|
|
103
|
-
<Component variant="h4" weight="semibold">
|
|
104
|
-
Heading 4 <br />
|
|
105
|
-
Semibold
|
|
106
|
-
</Component>
|
|
107
|
-
<Component variant="h4" weight="bold">
|
|
108
|
-
Heading 4 <br />
|
|
109
|
-
Bold
|
|
110
|
-
</Component>
|
|
111
|
-
<Component variant="caption" className="al-text-gray-500">
|
|
112
|
-
24px / Line height: 32px
|
|
113
|
-
</Component>
|
|
114
|
-
</div>
|
|
115
|
-
|
|
116
|
-
{/* Subheading Variations */}
|
|
117
|
-
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
118
|
-
<Component variant="subheading" weight="regular">
|
|
119
|
-
Sub heading <br />
|
|
120
|
-
Regular
|
|
121
|
-
</Component>
|
|
122
|
-
<Component variant="subheading" weight="medium">
|
|
123
|
-
Sub heading <br />
|
|
124
|
-
Medium
|
|
125
|
-
</Component>
|
|
126
|
-
<Component variant="subheading" weight="semibold">
|
|
127
|
-
Sub heading <br />
|
|
128
|
-
Semibold
|
|
129
|
-
</Component>
|
|
130
|
-
<Component variant="subheading" weight="bold">
|
|
131
|
-
Sub heading <br />
|
|
132
|
-
Bold
|
|
133
|
-
</Component>
|
|
134
|
-
<Component variant="caption" className="al-text-gray-500">
|
|
135
|
-
20px / Line height: 30px
|
|
136
|
-
</Component>
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
{/* Body/Paragraph Example */}
|
|
140
|
-
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
141
|
-
<Component variant="body" size="sm">
|
|
142
|
-
Body SM <br /> Regular
|
|
143
|
-
</Component>
|
|
144
|
-
<Component variant="body" size="md">
|
|
145
|
-
Body MD <br /> Regular
|
|
146
|
-
</Component>
|
|
147
|
-
<Component variant="body" size="lg">
|
|
148
|
-
Body LG <br /> Regular
|
|
149
|
-
</Component>
|
|
150
|
-
<Component variant="body" size="xl">
|
|
151
|
-
Body XL <br /> Regular
|
|
152
|
-
</Component>
|
|
153
|
-
<Component variant="caption" className="al-text-gray-500">
|
|
154
|
-
20px, 16px, 14px, 12px | Line height: 30px, 24px, 20px, 18px
|
|
155
|
-
</Component>
|
|
156
|
-
</div>
|
|
157
|
-
|
|
158
|
-
{/* Caption Example */}
|
|
159
|
-
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
160
|
-
<Component variant="caption" size="sm">
|
|
161
|
-
Caption SM <br /> Regular
|
|
162
|
-
</Component>
|
|
163
|
-
<Component variant="caption" weight="medium" size="sm">
|
|
164
|
-
Caption SM <br /> Medium
|
|
165
|
-
</Component>
|
|
166
|
-
<Component variant="caption" weight="medium" size="md">
|
|
167
|
-
Caption MD <br /> Medium
|
|
168
|
-
</Component>
|
|
169
|
-
<Component variant="caption" weight="medium" size="lg">
|
|
170
|
-
Caption LG <br /> Medium
|
|
171
|
-
</Component>
|
|
172
|
-
<Component variant="caption" className="al-text-gray-500">
|
|
173
|
-
12px, 14px, 16px | Line height: 24px, 20px, 18px
|
|
174
|
-
</Component>
|
|
175
|
-
</div>
|
|
176
|
-
</div>
|
|
177
|
-
),
|
|
178
|
-
};
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { Typography as Component } from "../shadcn";
|
|
3
|
+
|
|
4
|
+
const meta = {
|
|
5
|
+
title: "Shadcn/Theme/Typography",
|
|
6
|
+
component: Component,
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: "centered",
|
|
9
|
+
},
|
|
10
|
+
} satisfies Meta<typeof Component>;
|
|
11
|
+
|
|
12
|
+
export default meta;
|
|
13
|
+
type Story = StoryObj<typeof meta>;
|
|
14
|
+
|
|
15
|
+
export const Typography: Story = {
|
|
16
|
+
args: {
|
|
17
|
+
variant: "h1",
|
|
18
|
+
weight: "regular",
|
|
19
|
+
size: "md",
|
|
20
|
+
children: "Heading 1",
|
|
21
|
+
},
|
|
22
|
+
render: () => (
|
|
23
|
+
<div className="space-y-8">
|
|
24
|
+
{/* Heading 1 Variations */}
|
|
25
|
+
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
26
|
+
<Component variant="h1" weight="regular">
|
|
27
|
+
Heading 1
|
|
28
|
+
<br /> Regular
|
|
29
|
+
</Component>
|
|
30
|
+
<Component variant="h1" weight="medium">
|
|
31
|
+
Heading 1 <br />
|
|
32
|
+
Medium
|
|
33
|
+
</Component>
|
|
34
|
+
<Component variant="h1" weight="semibold">
|
|
35
|
+
Heading 1 <br />
|
|
36
|
+
Semibold
|
|
37
|
+
</Component>
|
|
38
|
+
<Component variant="h1" weight="bold">
|
|
39
|
+
Heading 1 <br />
|
|
40
|
+
Bold
|
|
41
|
+
</Component>
|
|
42
|
+
<Component variant="caption" className="al-text-gray-500">
|
|
43
|
+
48px / Line height: 60px
|
|
44
|
+
</Component>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
{/* Heading 2 Variations */}
|
|
48
|
+
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
49
|
+
<Component variant="h2" weight="regular">
|
|
50
|
+
Heading 2 <br />
|
|
51
|
+
Regular
|
|
52
|
+
</Component>
|
|
53
|
+
<Component variant="h2" weight="medium">
|
|
54
|
+
Heading 2 <br />
|
|
55
|
+
Medium
|
|
56
|
+
</Component>
|
|
57
|
+
<Component variant="h2" weight="semibold">
|
|
58
|
+
Heading 2 <br />
|
|
59
|
+
Semibold
|
|
60
|
+
</Component>
|
|
61
|
+
<Component variant="h2" weight="bold">
|
|
62
|
+
Heading 2 <br />
|
|
63
|
+
Bold
|
|
64
|
+
</Component>
|
|
65
|
+
<Component variant="caption" className="al-text-gray-500">
|
|
66
|
+
36px / Line height: 44px
|
|
67
|
+
</Component>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
{/* Heading 3 Variations */}
|
|
71
|
+
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
72
|
+
<Component variant="h3" weight="regular">
|
|
73
|
+
Heading 3 <br />
|
|
74
|
+
Regular
|
|
75
|
+
</Component>
|
|
76
|
+
<Component variant="h3" weight="medium">
|
|
77
|
+
Heading 3 <br />
|
|
78
|
+
Medium
|
|
79
|
+
</Component>
|
|
80
|
+
<Component variant="h3" weight="semibold">
|
|
81
|
+
Heading 3 <br />
|
|
82
|
+
Semibold
|
|
83
|
+
</Component>
|
|
84
|
+
<Component variant="h3" weight="bold">
|
|
85
|
+
Heading 3 <br />
|
|
86
|
+
Bold
|
|
87
|
+
</Component>
|
|
88
|
+
<Component variant="caption" className="al-text-gray-500">
|
|
89
|
+
30px / Line height: 38px
|
|
90
|
+
</Component>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
{/* Heading 4 Variations */}
|
|
94
|
+
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
95
|
+
<Component variant="h4" weight="regular">
|
|
96
|
+
Heading 4 <br />
|
|
97
|
+
Regular
|
|
98
|
+
</Component>
|
|
99
|
+
<Component variant="h4" weight="medium">
|
|
100
|
+
Heading 4 <br />
|
|
101
|
+
Medium
|
|
102
|
+
</Component>
|
|
103
|
+
<Component variant="h4" weight="semibold">
|
|
104
|
+
Heading 4 <br />
|
|
105
|
+
Semibold
|
|
106
|
+
</Component>
|
|
107
|
+
<Component variant="h4" weight="bold">
|
|
108
|
+
Heading 4 <br />
|
|
109
|
+
Bold
|
|
110
|
+
</Component>
|
|
111
|
+
<Component variant="caption" className="al-text-gray-500">
|
|
112
|
+
24px / Line height: 32px
|
|
113
|
+
</Component>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
{/* Subheading Variations */}
|
|
117
|
+
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
118
|
+
<Component variant="subheading" weight="regular">
|
|
119
|
+
Sub heading <br />
|
|
120
|
+
Regular
|
|
121
|
+
</Component>
|
|
122
|
+
<Component variant="subheading" weight="medium">
|
|
123
|
+
Sub heading <br />
|
|
124
|
+
Medium
|
|
125
|
+
</Component>
|
|
126
|
+
<Component variant="subheading" weight="semibold">
|
|
127
|
+
Sub heading <br />
|
|
128
|
+
Semibold
|
|
129
|
+
</Component>
|
|
130
|
+
<Component variant="subheading" weight="bold">
|
|
131
|
+
Sub heading <br />
|
|
132
|
+
Bold
|
|
133
|
+
</Component>
|
|
134
|
+
<Component variant="caption" className="al-text-gray-500">
|
|
135
|
+
20px / Line height: 30px
|
|
136
|
+
</Component>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
{/* Body/Paragraph Example */}
|
|
140
|
+
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
141
|
+
<Component variant="body" size="sm">
|
|
142
|
+
Body SM <br /> Regular
|
|
143
|
+
</Component>
|
|
144
|
+
<Component variant="body" size="md">
|
|
145
|
+
Body MD <br /> Regular
|
|
146
|
+
</Component>
|
|
147
|
+
<Component variant="body" size="lg">
|
|
148
|
+
Body LG <br /> Regular
|
|
149
|
+
</Component>
|
|
150
|
+
<Component variant="body" size="xl">
|
|
151
|
+
Body XL <br /> Regular
|
|
152
|
+
</Component>
|
|
153
|
+
<Component variant="caption" className="al-text-gray-500">
|
|
154
|
+
20px, 16px, 14px, 12px | Line height: 30px, 24px, 20px, 18px
|
|
155
|
+
</Component>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
{/* Caption Example */}
|
|
159
|
+
<div className="al-border al-flex al-justify-between al-p-4 al-my-2">
|
|
160
|
+
<Component variant="caption" size="sm">
|
|
161
|
+
Caption SM <br /> Regular
|
|
162
|
+
</Component>
|
|
163
|
+
<Component variant="caption" weight="medium" size="sm">
|
|
164
|
+
Caption SM <br /> Medium
|
|
165
|
+
</Component>
|
|
166
|
+
<Component variant="caption" weight="medium" size="md">
|
|
167
|
+
Caption MD <br /> Medium
|
|
168
|
+
</Component>
|
|
169
|
+
<Component variant="caption" weight="medium" size="lg">
|
|
170
|
+
Caption LG <br /> Medium
|
|
171
|
+
</Component>
|
|
172
|
+
<Component variant="caption" className="al-text-gray-500">
|
|
173
|
+
12px, 14px, 16px | Line height: 24px, 20px, 18px
|
|
174
|
+
</Component>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
),
|
|
178
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@altimateai/ui-components",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.6",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/AltimateAI/altimate-components.git"
|
|
@@ -52,4 +52,4 @@
|
|
|
52
52
|
"react": "^17.0.0 || ^18.0.0",
|
|
53
53
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
54
54
|
}
|
|
55
|
-
}
|
|
55
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
## Installation
|
|
2
|
-
|
|
3
|
-
To install the package, you can use either npm or yarn:
|
|
4
|
-
|
|
5
|
-
```bash
|
|
6
|
-
# Using npm
|
|
7
|
-
npm install @altimateai/ui-components
|
|
8
|
-
|
|
9
|
-
# Using yarn
|
|
10
|
-
yarn add @altimateai/ui-components
|
|
11
|
-
```
|
|
1
|
+
## Installation
|
|
2
|
+
|
|
3
|
+
To install the package, you can use either npm or yarn:
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
# Using npm
|
|
7
|
+
npm install @altimateai/ui-components
|
|
8
|
+
|
|
9
|
+
# Using yarn
|
|
10
|
+
yarn add @altimateai/ui-components
|
|
11
|
+
```
|