@kushagradhawan/kookie-blocks 0.1.3 → 0.1.5
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/components.css +98 -18
- package/dist/cjs/components/code/CodeBlock.d.ts +1 -1
- package/dist/cjs/components/code/CodeBlock.d.ts.map +1 -1
- package/dist/cjs/components/code/CodeBlock.js +1 -1
- package/dist/cjs/components/code/CodeBlock.js.map +3 -3
- package/dist/cjs/components/code/PreviewSection.d.ts.map +1 -1
- package/dist/cjs/components/code/PreviewSection.js +1 -1
- package/dist/cjs/components/code/PreviewSection.js.map +3 -3
- package/dist/esm/components/code/CodeBlock.d.ts +1 -1
- package/dist/esm/components/code/CodeBlock.d.ts.map +1 -1
- package/dist/esm/components/code/CodeBlock.js +1 -1
- package/dist/esm/components/code/CodeBlock.js.map +3 -3
- package/dist/esm/components/code/PreviewSection.d.ts.map +1 -1
- package/dist/esm/components/code/PreviewSection.js +1 -1
- package/dist/esm/components/code/PreviewSection.js.map +3 -3
- package/package.json +2 -2
- package/src/components/code/CodeBlock.tsx +335 -73
- package/src/components/code/PreviewSection.tsx +49 -31
- package/src/components/index.css +91 -18
- package/styles.css +84 -18
package/src/components/index.css
CHANGED
|
@@ -1,31 +1,72 @@
|
|
|
1
|
-
/* Components CSS aggregator for Kookie Blocks
|
|
1
|
+
/* Components CSS aggregator for Kookie Blocks */
|
|
2
2
|
|
|
3
3
|
/* ============================================
|
|
4
4
|
Code Block Component Styles
|
|
5
5
|
============================================ */
|
|
6
6
|
|
|
7
|
-
/*
|
|
8
|
-
.code-block
|
|
9
|
-
min-width: 0;
|
|
10
|
-
max-width: 100%;
|
|
7
|
+
/* Main docs code block wrapper */
|
|
8
|
+
.docs-code-block {
|
|
11
9
|
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Code content area - handles expand/collapse */
|
|
13
|
+
.code-content {
|
|
12
14
|
overflow: hidden;
|
|
15
|
+
transition: max-height 0.3s ease-in-out;
|
|
16
|
+
position: relative;
|
|
13
17
|
}
|
|
14
18
|
|
|
15
19
|
/* Code block content (the pre part, below the header) */
|
|
16
20
|
.code-block-content {
|
|
17
21
|
width: 100%;
|
|
18
22
|
min-width: 0;
|
|
23
|
+
overflow-x: auto;
|
|
24
|
+
/* Hide scrollbars while keeping scroll functionality */
|
|
25
|
+
scrollbar-width: none; /* Firefox */
|
|
26
|
+
-ms-overflow-style: none; /* IE/Edge */
|
|
19
27
|
}
|
|
20
28
|
|
|
21
|
-
|
|
22
|
-
.code-block-
|
|
23
|
-
|
|
29
|
+
/* Hide scrollbars for webkit browsers */
|
|
30
|
+
.code-block-content::-webkit-scrollbar,
|
|
31
|
+
.code-block-content::-webkit-scrollbar-horizontal,
|
|
32
|
+
.code-block-content::-webkit-scrollbar-vertical,
|
|
33
|
+
.code-block-content::-webkit-scrollbar-track,
|
|
34
|
+
.code-block-content::-webkit-scrollbar-thumb,
|
|
35
|
+
.code-block-content::-webkit-scrollbar-corner {
|
|
36
|
+
display: none !important;
|
|
37
|
+
width: 0 !important;
|
|
38
|
+
height: 0 !important;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Also hide scrollbars on any pre/code elements inside code content */
|
|
42
|
+
.code-block-content pre::-webkit-scrollbar,
|
|
43
|
+
.code-block-content pre::-webkit-scrollbar-horizontal,
|
|
44
|
+
.code-block-content pre::-webkit-scrollbar-vertical,
|
|
45
|
+
.code-block-content pre::-webkit-scrollbar-track,
|
|
46
|
+
.code-block-content pre::-webkit-scrollbar-thumb,
|
|
47
|
+
.code-block-content pre::-webkit-scrollbar-corner,
|
|
48
|
+
.code-block-content code::-webkit-scrollbar,
|
|
49
|
+
.code-block-content code::-webkit-scrollbar-horizontal,
|
|
50
|
+
.code-block-content code::-webkit-scrollbar-vertical,
|
|
51
|
+
.code-block-content code::-webkit-scrollbar-track,
|
|
52
|
+
.code-block-content code::-webkit-scrollbar-thumb,
|
|
53
|
+
.code-block-content code::-webkit-scrollbar-corner {
|
|
54
|
+
display: none !important;
|
|
55
|
+
width: 0 !important;
|
|
56
|
+
height: 0 !important;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Pre elements inside code content */
|
|
60
|
+
.code-content pre,
|
|
61
|
+
.code-block-content pre {
|
|
62
|
+
overflow-x: visible;
|
|
24
63
|
max-width: 100%;
|
|
25
64
|
min-width: 0;
|
|
26
65
|
margin: 0;
|
|
27
66
|
width: 100%;
|
|
28
67
|
box-sizing: border-box;
|
|
68
|
+
scrollbar-width: none;
|
|
69
|
+
-ms-overflow-style: none;
|
|
29
70
|
}
|
|
30
71
|
|
|
31
72
|
/* Ensure Shiki-generated pre elements fill width */
|
|
@@ -35,8 +76,8 @@
|
|
|
35
76
|
}
|
|
36
77
|
|
|
37
78
|
/* Code elements inside pre */
|
|
38
|
-
.code-
|
|
39
|
-
.code-block-
|
|
79
|
+
.code-content pre code,
|
|
80
|
+
.code-block-content pre code {
|
|
40
81
|
font-family: var(--font-mono);
|
|
41
82
|
font-size: var(--font-size-2);
|
|
42
83
|
line-height: 1.75;
|
|
@@ -48,16 +89,16 @@
|
|
|
48
89
|
}
|
|
49
90
|
|
|
50
91
|
/* Shiki line spans */
|
|
51
|
-
.code-
|
|
52
|
-
.code-block-
|
|
92
|
+
.code-content pre code .line,
|
|
93
|
+
.code-block-content pre code .line {
|
|
53
94
|
display: flex;
|
|
54
95
|
align-items: center;
|
|
55
96
|
gap: 0;
|
|
56
97
|
}
|
|
57
98
|
|
|
58
99
|
/* Line numbers */
|
|
59
|
-
.code-
|
|
60
|
-
.code-block-
|
|
100
|
+
.code-content pre code .line::before,
|
|
101
|
+
.code-block-content pre code .line::before {
|
|
61
102
|
counter-increment: line;
|
|
62
103
|
content: counter(line);
|
|
63
104
|
display: inline-block;
|
|
@@ -70,8 +111,37 @@
|
|
|
70
111
|
margin-right: var(--space-4);
|
|
71
112
|
}
|
|
72
113
|
|
|
114
|
+
/* Scroll shadow overlay for collapsed state */
|
|
115
|
+
.code-scroll-shadow {
|
|
116
|
+
position: absolute;
|
|
117
|
+
bottom: 0;
|
|
118
|
+
left: 0;
|
|
119
|
+
right: 0;
|
|
120
|
+
height: 80px;
|
|
121
|
+
background: linear-gradient(to top, var(--color-panel-solid), transparent);
|
|
122
|
+
pointer-events: none;
|
|
123
|
+
opacity: 0;
|
|
124
|
+
transition: opacity 0.2s ease-in-out;
|
|
125
|
+
z-index: 1;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.code-scroll-shadow.visible {
|
|
129
|
+
opacity: 1;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Action buttons styling */
|
|
133
|
+
.code-action-buttons {
|
|
134
|
+
flex-shrink: 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Chevron rotation animation */
|
|
138
|
+
.code-chevron {
|
|
139
|
+
transition: transform 0.2s ease-in-out;
|
|
140
|
+
}
|
|
141
|
+
|
|
73
142
|
/* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
|
|
74
|
-
.code-block-
|
|
143
|
+
.code-block-content pre.shiki span,
|
|
144
|
+
.code-content pre.shiki span {
|
|
75
145
|
color: var(--shiki-light) !important;
|
|
76
146
|
font-style: var(--shiki-light-font-style);
|
|
77
147
|
font-weight: var(--shiki-light-font-weight);
|
|
@@ -79,9 +149,12 @@
|
|
|
79
149
|
}
|
|
80
150
|
|
|
81
151
|
/* Override with dark theme colors when inside a dark context */
|
|
82
|
-
.dark .code-block-
|
|
83
|
-
.dark-theme .code-block-
|
|
84
|
-
[data-appearance="dark"] .code-block-
|
|
152
|
+
.dark .code-block-content pre.shiki span,
|
|
153
|
+
.dark-theme .code-block-content pre.shiki span,
|
|
154
|
+
[data-appearance="dark"] .code-block-content pre.shiki span,
|
|
155
|
+
.dark .code-content pre.shiki span,
|
|
156
|
+
.dark-theme .code-content pre.shiki span,
|
|
157
|
+
[data-appearance="dark"] .code-content pre.shiki span {
|
|
85
158
|
color: var(--shiki-dark) !important;
|
|
86
159
|
font-style: var(--shiki-dark-font-style);
|
|
87
160
|
font-weight: var(--shiki-dark-font-weight);
|
package/styles.css
CHANGED
|
@@ -1,28 +1,66 @@
|
|
|
1
1
|
/* Kookie Blocks base styles. Keep minimal; rely on Kookie UI tokens/utilities. */
|
|
2
|
-
/* Components CSS aggregator for Kookie Blocks
|
|
2
|
+
/* Components CSS aggregator for Kookie Blocks */
|
|
3
3
|
/* ============================================
|
|
4
4
|
Code Block Component Styles
|
|
5
5
|
============================================ */
|
|
6
|
-
/*
|
|
7
|
-
.code-block
|
|
8
|
-
min-width: 0;
|
|
9
|
-
max-width: 100%;
|
|
6
|
+
/* Main docs code block wrapper */
|
|
7
|
+
.docs-code-block {
|
|
10
8
|
width: 100%;
|
|
9
|
+
}
|
|
10
|
+
/* Code content area - handles expand/collapse */
|
|
11
|
+
.code-content {
|
|
11
12
|
overflow: hidden;
|
|
13
|
+
transition: max-height 0.3s ease-in-out;
|
|
14
|
+
position: relative;
|
|
12
15
|
}
|
|
13
16
|
/* Code block content (the pre part, below the header) */
|
|
14
17
|
.code-block-content {
|
|
15
18
|
width: 100%;
|
|
16
19
|
min-width: 0;
|
|
17
|
-
}
|
|
18
|
-
.code-block-wrapper pre,
|
|
19
|
-
.code-block-wrapper .code-block-content pre {
|
|
20
20
|
overflow-x: auto;
|
|
21
|
+
/* Hide scrollbars while keeping scroll functionality */
|
|
22
|
+
scrollbar-width: none; /* Firefox */
|
|
23
|
+
-ms-overflow-style: none; /* IE/Edge */
|
|
24
|
+
}
|
|
25
|
+
/* Hide scrollbars for webkit browsers */
|
|
26
|
+
.code-block-content::-webkit-scrollbar,
|
|
27
|
+
.code-block-content::-webkit-scrollbar-horizontal,
|
|
28
|
+
.code-block-content::-webkit-scrollbar-vertical,
|
|
29
|
+
.code-block-content::-webkit-scrollbar-track,
|
|
30
|
+
.code-block-content::-webkit-scrollbar-thumb,
|
|
31
|
+
.code-block-content::-webkit-scrollbar-corner {
|
|
32
|
+
display: none !important;
|
|
33
|
+
width: 0 !important;
|
|
34
|
+
height: 0 !important;
|
|
35
|
+
}
|
|
36
|
+
/* Also hide scrollbars on any pre/code elements inside code content */
|
|
37
|
+
.code-block-content pre::-webkit-scrollbar,
|
|
38
|
+
.code-block-content pre::-webkit-scrollbar-horizontal,
|
|
39
|
+
.code-block-content pre::-webkit-scrollbar-vertical,
|
|
40
|
+
.code-block-content pre::-webkit-scrollbar-track,
|
|
41
|
+
.code-block-content pre::-webkit-scrollbar-thumb,
|
|
42
|
+
.code-block-content pre::-webkit-scrollbar-corner,
|
|
43
|
+
.code-block-content code::-webkit-scrollbar,
|
|
44
|
+
.code-block-content code::-webkit-scrollbar-horizontal,
|
|
45
|
+
.code-block-content code::-webkit-scrollbar-vertical,
|
|
46
|
+
.code-block-content code::-webkit-scrollbar-track,
|
|
47
|
+
.code-block-content code::-webkit-scrollbar-thumb,
|
|
48
|
+
.code-block-content code::-webkit-scrollbar-corner {
|
|
49
|
+
display: none !important;
|
|
50
|
+
width: 0 !important;
|
|
51
|
+
height: 0 !important;
|
|
52
|
+
}
|
|
53
|
+
/* Pre elements inside code content */
|
|
54
|
+
.code-content pre,
|
|
55
|
+
.code-block-content pre {
|
|
56
|
+
overflow-x: visible;
|
|
21
57
|
max-width: 100%;
|
|
22
58
|
min-width: 0;
|
|
23
59
|
margin: 0;
|
|
24
60
|
width: 100%;
|
|
25
61
|
box-sizing: border-box;
|
|
62
|
+
scrollbar-width: none;
|
|
63
|
+
-ms-overflow-style: none;
|
|
26
64
|
}
|
|
27
65
|
/* Ensure Shiki-generated pre elements fill width */
|
|
28
66
|
.code-block-content > pre {
|
|
@@ -30,8 +68,8 @@
|
|
|
30
68
|
min-width: 0;
|
|
31
69
|
}
|
|
32
70
|
/* Code elements inside pre */
|
|
33
|
-
.code-
|
|
34
|
-
.code-block-
|
|
71
|
+
.code-content pre code,
|
|
72
|
+
.code-block-content pre code {
|
|
35
73
|
font-family: var(--font-mono);
|
|
36
74
|
font-size: var(--font-size-2);
|
|
37
75
|
line-height: 1.75;
|
|
@@ -42,15 +80,15 @@
|
|
|
42
80
|
counter-reset: line;
|
|
43
81
|
}
|
|
44
82
|
/* Shiki line spans */
|
|
45
|
-
.code-
|
|
46
|
-
.code-block-
|
|
83
|
+
.code-content pre code .line,
|
|
84
|
+
.code-block-content pre code .line {
|
|
47
85
|
display: flex;
|
|
48
86
|
align-items: center;
|
|
49
87
|
gap: 0;
|
|
50
88
|
}
|
|
51
89
|
/* Line numbers */
|
|
52
|
-
.code-
|
|
53
|
-
.code-block-
|
|
90
|
+
.code-content pre code .line::before,
|
|
91
|
+
.code-block-content pre code .line::before {
|
|
54
92
|
counter-increment: line;
|
|
55
93
|
content: counter(line);
|
|
56
94
|
display: inline-block;
|
|
@@ -64,8 +102,33 @@
|
|
|
64
102
|
flex-shrink: 0;
|
|
65
103
|
margin-right: var(--space-4);
|
|
66
104
|
}
|
|
105
|
+
/* Scroll shadow overlay for collapsed state */
|
|
106
|
+
.code-scroll-shadow {
|
|
107
|
+
position: absolute;
|
|
108
|
+
bottom: 0;
|
|
109
|
+
left: 0;
|
|
110
|
+
right: 0;
|
|
111
|
+
height: 80px;
|
|
112
|
+
background: linear-gradient(to top, var(--color-panel-solid), transparent);
|
|
113
|
+
pointer-events: none;
|
|
114
|
+
opacity: 0;
|
|
115
|
+
transition: opacity 0.2s ease-in-out;
|
|
116
|
+
z-index: 1;
|
|
117
|
+
}
|
|
118
|
+
.code-scroll-shadow.visible {
|
|
119
|
+
opacity: 1;
|
|
120
|
+
}
|
|
121
|
+
/* Action buttons styling */
|
|
122
|
+
.code-action-buttons {
|
|
123
|
+
flex-shrink: 0;
|
|
124
|
+
}
|
|
125
|
+
/* Chevron rotation animation */
|
|
126
|
+
.code-chevron {
|
|
127
|
+
transition: transform 0.2s ease-in-out;
|
|
128
|
+
}
|
|
67
129
|
/* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
|
|
68
|
-
.code-block-
|
|
130
|
+
.code-block-content pre.shiki span,
|
|
131
|
+
.code-content pre.shiki span {
|
|
69
132
|
color: var(--shiki-light) !important;
|
|
70
133
|
font-style: var(--shiki-light-font-style);
|
|
71
134
|
font-weight: var(--shiki-light-font-weight);
|
|
@@ -73,9 +136,12 @@
|
|
|
73
136
|
text-decoration: var(--shiki-light-text-decoration);
|
|
74
137
|
}
|
|
75
138
|
/* Override with dark theme colors when inside a dark context */
|
|
76
|
-
.dark .code-block-
|
|
77
|
-
.dark-theme .code-block-
|
|
78
|
-
[data-appearance="dark"] .code-block-
|
|
139
|
+
.dark .code-block-content pre.shiki span,
|
|
140
|
+
.dark-theme .code-block-content pre.shiki span,
|
|
141
|
+
[data-appearance="dark"] .code-block-content pre.shiki span,
|
|
142
|
+
.dark .code-content pre.shiki span,
|
|
143
|
+
.dark-theme .code-content pre.shiki span,
|
|
144
|
+
[data-appearance="dark"] .code-content pre.shiki span {
|
|
79
145
|
color: var(--shiki-dark) !important;
|
|
80
146
|
font-style: var(--shiki-dark-font-style);
|
|
81
147
|
font-weight: var(--shiki-dark-font-weight);
|