@kushagradhawan/kookie-blocks 0.1.4 → 0.1.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/components.css +62 -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.js +1 -1
- package/dist/cjs/components/code/PreviewSection.js.map +2 -2
- 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.js +1 -1
- package/dist/esm/components/code/PreviewSection.js.map +2 -2
- package/package.json +2 -2
- package/src/components/code/CodeBlock.tsx +395 -84
- package/src/components/code/PreviewSection.tsx +3 -3
- package/src/components/index.css +57 -18
- package/styles.css +52 -18
package/styles.css
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
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 {
|
|
@@ -47,14 +50,17 @@
|
|
|
47
50
|
width: 0 !important;
|
|
48
51
|
height: 0 !important;
|
|
49
52
|
}
|
|
50
|
-
|
|
51
|
-
.code-
|
|
52
|
-
|
|
53
|
+
/* Pre elements inside code content */
|
|
54
|
+
.code-content pre,
|
|
55
|
+
.code-block-content pre {
|
|
56
|
+
overflow-x: visible;
|
|
53
57
|
max-width: 100%;
|
|
54
58
|
min-width: 0;
|
|
55
59
|
margin: 0;
|
|
56
60
|
width: 100%;
|
|
57
61
|
box-sizing: border-box;
|
|
62
|
+
scrollbar-width: none;
|
|
63
|
+
-ms-overflow-style: none;
|
|
58
64
|
}
|
|
59
65
|
/* Ensure Shiki-generated pre elements fill width */
|
|
60
66
|
.code-block-content > pre {
|
|
@@ -62,8 +68,8 @@
|
|
|
62
68
|
min-width: 0;
|
|
63
69
|
}
|
|
64
70
|
/* Code elements inside pre */
|
|
65
|
-
.code-
|
|
66
|
-
.code-block-
|
|
71
|
+
.code-content pre code,
|
|
72
|
+
.code-block-content pre code {
|
|
67
73
|
font-family: var(--font-mono);
|
|
68
74
|
font-size: var(--font-size-2);
|
|
69
75
|
line-height: 1.75;
|
|
@@ -74,15 +80,15 @@
|
|
|
74
80
|
counter-reset: line;
|
|
75
81
|
}
|
|
76
82
|
/* Shiki line spans */
|
|
77
|
-
.code-
|
|
78
|
-
.code-block-
|
|
83
|
+
.code-content pre code .line,
|
|
84
|
+
.code-block-content pre code .line {
|
|
79
85
|
display: flex;
|
|
80
86
|
align-items: center;
|
|
81
87
|
gap: 0;
|
|
82
88
|
}
|
|
83
89
|
/* Line numbers */
|
|
84
|
-
.code-
|
|
85
|
-
.code-block-
|
|
90
|
+
.code-content pre code .line::before,
|
|
91
|
+
.code-block-content pre code .line::before {
|
|
86
92
|
counter-increment: line;
|
|
87
93
|
content: counter(line);
|
|
88
94
|
display: inline-block;
|
|
@@ -96,8 +102,33 @@
|
|
|
96
102
|
flex-shrink: 0;
|
|
97
103
|
margin-right: var(--space-4);
|
|
98
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
|
+
}
|
|
99
129
|
/* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
|
|
100
|
-
.code-block-
|
|
130
|
+
.code-block-content pre.shiki span,
|
|
131
|
+
.code-content pre.shiki span {
|
|
101
132
|
color: var(--shiki-light) !important;
|
|
102
133
|
font-style: var(--shiki-light-font-style);
|
|
103
134
|
font-weight: var(--shiki-light-font-weight);
|
|
@@ -105,9 +136,12 @@
|
|
|
105
136
|
text-decoration: var(--shiki-light-text-decoration);
|
|
106
137
|
}
|
|
107
138
|
/* Override with dark theme colors when inside a dark context */
|
|
108
|
-
.dark .code-block-
|
|
109
|
-
.dark-theme .code-block-
|
|
110
|
-
[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 {
|
|
111
145
|
color: var(--shiki-dark) !important;
|
|
112
146
|
font-style: var(--shiki-dark-font-style);
|
|
113
147
|
font-weight: var(--shiki-dark-font-weight);
|