@takuhon/ui 0.2.0 → 0.4.0

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.
@@ -0,0 +1,80 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-3);
21
+ }
22
+
23
+ .item {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--takuhon-space-1);
27
+ padding: var(--takuhon-space-3);
28
+ background-color: var(--takuhon-color-surface);
29
+ border: 1px solid var(--takuhon-color-border);
30
+ border-radius: var(--takuhon-radius-md);
31
+ }
32
+
33
+ .title {
34
+ margin: 0;
35
+ font-weight: 600;
36
+ color: var(--takuhon-color-text);
37
+ font-size: var(--takuhon-font-size-base);
38
+ }
39
+
40
+ .link {
41
+ color: inherit;
42
+ text-decoration: none;
43
+ }
44
+
45
+ .link:hover,
46
+ .link:focus-visible {
47
+ text-decoration: underline;
48
+ color: var(--takuhon-color-primary);
49
+ }
50
+
51
+ .link:focus-visible {
52
+ outline: 2px solid var(--takuhon-color-primary);
53
+ outline-offset: 2px;
54
+ }
55
+
56
+ .provider {
57
+ margin: 0;
58
+ font-size: var(--takuhon-font-size-sm);
59
+ color: var(--takuhon-color-text-muted);
60
+ }
61
+
62
+ .courseNumber {
63
+ margin: 0;
64
+ font-size: var(--takuhon-font-size-sm);
65
+ color: var(--takuhon-color-text-muted);
66
+ font-family: ui-monospace, SFMono-Regular, monospace;
67
+ }
68
+
69
+ .date {
70
+ margin: 0;
71
+ font-size: var(--takuhon-font-size-sm);
72
+ color: var(--takuhon-color-text-muted);
73
+ }
74
+
75
+ .description {
76
+ margin: 0;
77
+ font-size: var(--takuhon-font-size-base);
78
+ line-height: var(--takuhon-line-height);
79
+ color: var(--takuhon-color-text);
80
+ }
@@ -0,0 +1,87 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding-inline-start: var(--takuhon-space-4);
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-4);
21
+ border-inline-start: 2px solid var(--takuhon-color-border);
22
+ }
23
+
24
+ .item {
25
+ display: grid;
26
+ grid-template-columns: auto 1fr;
27
+ gap: var(--takuhon-space-3);
28
+ position: relative;
29
+ }
30
+
31
+ .timelineMarker {
32
+ width: 12px;
33
+ height: 12px;
34
+ border-radius: var(--takuhon-radius-full);
35
+ background-color: var(--takuhon-color-primary);
36
+ margin-inline-start: calc(-1 * var(--takuhon-space-4) - 6px);
37
+ margin-block-start: var(--takuhon-space-2);
38
+ flex-shrink: 0;
39
+ }
40
+
41
+ .content {
42
+ display: flex;
43
+ flex-direction: column;
44
+ gap: var(--takuhon-space-1);
45
+ }
46
+
47
+ .organization {
48
+ margin: 0;
49
+ font-weight: 600;
50
+ color: var(--takuhon-color-text);
51
+ font-size: var(--takuhon-font-size-base);
52
+ }
53
+
54
+ .link {
55
+ color: inherit;
56
+ text-decoration: none;
57
+ }
58
+
59
+ .link:hover,
60
+ .link:focus-visible {
61
+ text-decoration: underline;
62
+ color: var(--takuhon-color-primary);
63
+ }
64
+
65
+ .link:focus-visible {
66
+ outline: 2px solid var(--takuhon-color-primary);
67
+ outline-offset: 2px;
68
+ }
69
+
70
+ .role {
71
+ margin: 0;
72
+ font-size: var(--takuhon-font-size-sm);
73
+ color: var(--takuhon-color-text);
74
+ }
75
+
76
+ .range {
77
+ margin: 0;
78
+ font-size: var(--takuhon-font-size-sm);
79
+ color: var(--takuhon-color-text-muted);
80
+ }
81
+
82
+ .description {
83
+ margin: 0;
84
+ font-size: var(--takuhon-font-size-base);
85
+ line-height: var(--takuhon-line-height);
86
+ color: var(--takuhon-color-text);
87
+ }
@@ -0,0 +1,129 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-3);
21
+ }
22
+
23
+ .item {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--takuhon-space-1);
27
+ padding: var(--takuhon-space-3);
28
+ background-color: var(--takuhon-color-surface);
29
+ border: 1px solid var(--takuhon-color-border);
30
+ border-radius: var(--takuhon-radius-md);
31
+ }
32
+
33
+ .title {
34
+ margin: 0;
35
+ font-weight: 600;
36
+ color: var(--takuhon-color-text);
37
+ font-size: var(--takuhon-font-size-base);
38
+ display: flex;
39
+ flex-wrap: wrap;
40
+ align-items: center;
41
+ gap: var(--takuhon-space-2);
42
+ }
43
+
44
+ .link {
45
+ color: inherit;
46
+ text-decoration: none;
47
+ }
48
+
49
+ .link:hover,
50
+ .link:focus-visible {
51
+ text-decoration: underline;
52
+ color: var(--takuhon-color-primary);
53
+ }
54
+
55
+ .link:focus-visible {
56
+ outline: 2px solid var(--takuhon-color-primary);
57
+ outline-offset: 2px;
58
+ }
59
+
60
+ .statusBadge {
61
+ display: inline-block;
62
+ padding: 0 var(--takuhon-space-2);
63
+ font-size: var(--takuhon-font-size-sm);
64
+ font-weight: normal;
65
+ border-radius: var(--takuhon-radius-sm);
66
+ border: 1px solid var(--takuhon-color-border);
67
+ color: var(--takuhon-color-text-muted);
68
+ background-color: var(--takuhon-color-bg);
69
+ }
70
+
71
+ .statusBadge[data-status='issued'] {
72
+ border-color: var(--takuhon-color-primary);
73
+ color: var(--takuhon-color-primary);
74
+ }
75
+
76
+ .statusBadge[data-status='pending'] {
77
+ border-color: var(--takuhon-color-accent);
78
+ color: var(--takuhon-color-accent);
79
+ }
80
+
81
+ .statusBadge[data-status='expired'],
82
+ .statusBadge[data-status='abandoned'] {
83
+ font-style: italic;
84
+ }
85
+
86
+ .srOnly {
87
+ position: absolute;
88
+ width: 1px;
89
+ height: 1px;
90
+ padding: 0;
91
+ margin: -1px;
92
+ overflow: hidden;
93
+ clip: rect(0, 0, 0, 0);
94
+ white-space: nowrap;
95
+ border: 0;
96
+ }
97
+
98
+ .patentNumber {
99
+ margin: 0;
100
+ font-size: var(--takuhon-font-size-sm);
101
+ font-family: ui-monospace, SFMono-Regular, monospace;
102
+ color: var(--takuhon-color-text);
103
+ }
104
+
105
+ .office {
106
+ margin: 0;
107
+ font-size: var(--takuhon-font-size-sm);
108
+ color: var(--takuhon-color-text-muted);
109
+ }
110
+
111
+ .dates {
112
+ margin: 0;
113
+ font-size: var(--takuhon-font-size-sm);
114
+ color: var(--takuhon-color-text-muted);
115
+ }
116
+
117
+ .coInventors {
118
+ margin: 0;
119
+ font-size: var(--takuhon-font-size-sm);
120
+ color: var(--takuhon-color-text-muted);
121
+ font-style: italic;
122
+ }
123
+
124
+ .description {
125
+ margin: 0;
126
+ font-size: var(--takuhon-font-size-base);
127
+ line-height: var(--takuhon-line-height);
128
+ color: var(--takuhon-color-text);
129
+ }
@@ -0,0 +1,87 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-3);
21
+ }
22
+
23
+ .item {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--takuhon-space-1);
27
+ padding: var(--takuhon-space-3);
28
+ background-color: var(--takuhon-color-surface);
29
+ border: 1px solid var(--takuhon-color-border);
30
+ border-radius: var(--takuhon-radius-md);
31
+ }
32
+
33
+ .title {
34
+ margin: 0;
35
+ font-weight: 600;
36
+ color: var(--takuhon-color-text);
37
+ font-size: var(--takuhon-font-size-base);
38
+ }
39
+
40
+ .link {
41
+ color: inherit;
42
+ text-decoration: none;
43
+ }
44
+
45
+ .link:hover,
46
+ .link:focus-visible {
47
+ text-decoration: underline;
48
+ color: var(--takuhon-color-primary);
49
+ }
50
+
51
+ .link:focus-visible {
52
+ outline: 2px solid var(--takuhon-color-primary);
53
+ outline-offset: 2px;
54
+ }
55
+
56
+ .publisher {
57
+ margin: 0;
58
+ font-size: var(--takuhon-font-size-sm);
59
+ color: var(--takuhon-color-text-muted);
60
+ }
61
+
62
+ .date {
63
+ margin: 0;
64
+ font-size: var(--takuhon-font-size-sm);
65
+ color: var(--takuhon-color-text-muted);
66
+ }
67
+
68
+ .coAuthors {
69
+ margin: 0;
70
+ font-size: var(--takuhon-font-size-sm);
71
+ color: var(--takuhon-color-text-muted);
72
+ font-style: italic;
73
+ }
74
+
75
+ .doi {
76
+ margin: 0;
77
+ font-size: var(--takuhon-font-size-sm);
78
+ color: var(--takuhon-color-text-muted);
79
+ font-family: ui-monospace, SFMono-Regular, monospace;
80
+ }
81
+
82
+ .description {
83
+ margin: 0;
84
+ font-size: var(--takuhon-font-size-base);
85
+ line-height: var(--takuhon-line-height);
86
+ color: var(--takuhon-color-text);
87
+ }
@@ -0,0 +1,113 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding-inline-start: var(--takuhon-space-4);
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-4);
21
+ border-inline-start: 2px solid var(--takuhon-color-border);
22
+ }
23
+
24
+ .item {
25
+ display: grid;
26
+ grid-template-columns: auto 1fr;
27
+ gap: var(--takuhon-space-3);
28
+ position: relative;
29
+ }
30
+
31
+ .timelineMarker {
32
+ width: 12px;
33
+ height: 12px;
34
+ border-radius: var(--takuhon-radius-full);
35
+ background-color: var(--takuhon-color-accent);
36
+ margin-inline-start: calc(-1 * var(--takuhon-space-4) - 6px);
37
+ margin-block-start: var(--takuhon-space-2);
38
+ flex-shrink: 0;
39
+ }
40
+
41
+ .content {
42
+ display: flex;
43
+ flex-direction: column;
44
+ gap: var(--takuhon-space-1);
45
+ }
46
+
47
+ .organization {
48
+ margin: 0;
49
+ font-weight: 600;
50
+ color: var(--takuhon-color-text);
51
+ font-size: var(--takuhon-font-size-base);
52
+ }
53
+
54
+ .link {
55
+ color: inherit;
56
+ text-decoration: none;
57
+ }
58
+
59
+ .link:hover,
60
+ .link:focus-visible {
61
+ text-decoration: underline;
62
+ color: var(--takuhon-color-primary);
63
+ }
64
+
65
+ .link:focus-visible {
66
+ outline: 2px solid var(--takuhon-color-primary);
67
+ outline-offset: 2px;
68
+ }
69
+
70
+ .role {
71
+ margin: 0;
72
+ font-size: var(--takuhon-font-size-sm);
73
+ color: var(--takuhon-color-text);
74
+ display: flex;
75
+ flex-wrap: wrap;
76
+ align-items: baseline;
77
+ gap: var(--takuhon-space-2);
78
+ }
79
+
80
+ .cause {
81
+ display: inline-block;
82
+ padding: 0 var(--takuhon-space-2);
83
+ font-size: var(--takuhon-font-size-sm);
84
+ background-color: var(--takuhon-color-surface);
85
+ border: 1px solid var(--takuhon-color-border);
86
+ border-radius: var(--takuhon-radius-sm);
87
+ color: var(--takuhon-color-text-muted);
88
+ }
89
+
90
+ .srOnly {
91
+ position: absolute;
92
+ width: 1px;
93
+ height: 1px;
94
+ padding: 0;
95
+ margin: -1px;
96
+ overflow: hidden;
97
+ clip: rect(0, 0, 0, 0);
98
+ white-space: nowrap;
99
+ border: 0;
100
+ }
101
+
102
+ .range {
103
+ margin: 0;
104
+ font-size: var(--takuhon-font-size-sm);
105
+ color: var(--takuhon-color-text-muted);
106
+ }
107
+
108
+ .description {
109
+ margin: 0;
110
+ font-size: var(--takuhon-font-size-base);
111
+ line-height: var(--takuhon-line-height);
112
+ color: var(--takuhon-color-text);
113
+ }
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LocalizedTakuhon, LocalizedProfile, LocalizedLink, LocalizedCareer, LocalizedEducation, LocalizedCertification, LocalizedHonor, LocalizedLanguage, LocalizedProject, Skill, Contact, LocaleTag } from '@takuhon/core';
1
+ import { LocalizedTakuhon, LocalizedProfile, LocalizedLink, LocalizedCareer, LocalizedEducation, LocalizedCertification, LocalizedMembership, LocalizedVolunteering, LocalizedHonor, LocalizedPublication, LocalizedLanguage, LocalizedCourse, LocalizedPatent, LocalizedProject, Skill, Contact, LocaleTag } from '@takuhon/core';
2
2
 
3
3
  interface TakuhonProfileProps {
4
4
  data: LocalizedTakuhon;
@@ -30,16 +30,41 @@ interface CertificationsProps {
30
30
  }
31
31
  declare function Certifications({ certifications }: CertificationsProps): React.JSX.Element | null;
32
32
 
33
+ interface MembershipsProps {
34
+ memberships: LocalizedMembership[];
35
+ }
36
+ declare function Memberships({ memberships }: MembershipsProps): React.JSX.Element | null;
37
+
38
+ interface VolunteeringProps {
39
+ volunteering: LocalizedVolunteering[];
40
+ }
41
+ declare function Volunteering({ volunteering }: VolunteeringProps): React.JSX.Element | null;
42
+
33
43
  interface HonorsListProps {
34
44
  honors: LocalizedHonor[];
35
45
  }
36
46
  declare function HonorsList({ honors }: HonorsListProps): React.JSX.Element | null;
37
47
 
48
+ interface PublicationsProps {
49
+ publications: LocalizedPublication[];
50
+ }
51
+ declare function Publications({ publications }: PublicationsProps): React.JSX.Element | null;
52
+
38
53
  interface LanguagesProps {
39
54
  languages: LocalizedLanguage[];
40
55
  }
41
56
  declare function Languages({ languages }: LanguagesProps): React.JSX.Element | null;
42
57
 
58
+ interface CoursesProps {
59
+ courses: LocalizedCourse[];
60
+ }
61
+ declare function Courses({ courses }: CoursesProps): React.JSX.Element | null;
62
+
63
+ interface PatentsProps {
64
+ patents: LocalizedPatent[];
65
+ }
66
+ declare function Patents({ patents }: PatentsProps): React.JSX.Element | null;
67
+
43
68
  interface ProjectsListProps {
44
69
  projects: LocalizedProject[];
45
70
  }
@@ -73,4 +98,4 @@ interface TakuhonHeadProps {
73
98
  }
74
99
  declare function TakuhonHead({ data, siteUrl, pageUrl }: TakuhonHeadProps): React.JSX.Element;
75
100
 
76
- export { CareerTimeline, type CareerTimelineProps, Certifications, type CertificationsProps, ContactInfo, type ContactInfoProps, EducationTimeline, type EducationTimelineProps, Footer, HonorsList, type HonorsListProps, Languages, type LanguagesProps, LinksList, type LinksListProps, LocaleSwitcher, type LocaleSwitcherProps, ProfileHeader, type ProfileHeaderProps, ProjectsList, type ProjectsListProps, SkillsList, type SkillsListProps, TakuhonHead, type TakuhonHeadProps, TakuhonProfile, type TakuhonProfileProps };
101
+ export { CareerTimeline, type CareerTimelineProps, Certifications, type CertificationsProps, ContactInfo, type ContactInfoProps, Courses, type CoursesProps, EducationTimeline, type EducationTimelineProps, Footer, HonorsList, type HonorsListProps, Languages, type LanguagesProps, LinksList, type LinksListProps, LocaleSwitcher, type LocaleSwitcherProps, Memberships, type MembershipsProps, Patents, type PatentsProps, ProfileHeader, type ProfileHeaderProps, ProjectsList, type ProjectsListProps, Publications, type PublicationsProps, SkillsList, type SkillsListProps, TakuhonHead, type TakuhonHeadProps, TakuhonProfile, type TakuhonProfileProps, Volunteering, type VolunteeringProps };