@kushagradhawan/kookie-blocks 0.1.6 → 0.1.8

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.
Files changed (49) hide show
  1. package/components.css +67 -64
  2. package/dist/cjs/components/code/CodeBlock.d.ts +2 -1
  3. package/dist/cjs/components/code/CodeBlock.d.ts.map +1 -1
  4. package/dist/cjs/components/code/CodeBlock.js +1 -1
  5. package/dist/cjs/components/code/CodeBlock.js.map +3 -3
  6. package/dist/cjs/components/code/LanguageBadge.d.ts +9 -0
  7. package/dist/cjs/components/code/LanguageBadge.d.ts.map +1 -1
  8. package/dist/cjs/components/code/LanguageBadge.js +1 -1
  9. package/dist/cjs/components/code/LanguageBadge.js.map +3 -3
  10. package/dist/cjs/components/code/index.d.ts +5 -2
  11. package/dist/cjs/components/code/index.d.ts.map +1 -1
  12. package/dist/cjs/components/code/index.js +1 -1
  13. package/dist/cjs/components/code/index.js.map +3 -3
  14. package/dist/cjs/components/code/types.d.ts +132 -13
  15. package/dist/cjs/components/code/types.d.ts.map +1 -1
  16. package/dist/cjs/components/code/types.js +1 -1
  17. package/dist/cjs/components/code/types.js.map +3 -3
  18. package/dist/cjs/components/code/useCodeCard.d.ts +20 -0
  19. package/dist/cjs/components/code/useCodeCard.d.ts.map +1 -0
  20. package/dist/cjs/components/code/useCodeCard.js +2 -0
  21. package/dist/cjs/components/code/useCodeCard.js.map +7 -0
  22. package/dist/esm/components/code/CodeBlock.d.ts +2 -1
  23. package/dist/esm/components/code/CodeBlock.d.ts.map +1 -1
  24. package/dist/esm/components/code/CodeBlock.js +1 -1
  25. package/dist/esm/components/code/CodeBlock.js.map +3 -3
  26. package/dist/esm/components/code/LanguageBadge.d.ts +9 -0
  27. package/dist/esm/components/code/LanguageBadge.d.ts.map +1 -1
  28. package/dist/esm/components/code/LanguageBadge.js +1 -1
  29. package/dist/esm/components/code/LanguageBadge.js.map +3 -3
  30. package/dist/esm/components/code/index.d.ts +5 -2
  31. package/dist/esm/components/code/index.d.ts.map +1 -1
  32. package/dist/esm/components/code/index.js +1 -1
  33. package/dist/esm/components/code/index.js.map +3 -3
  34. package/dist/esm/components/code/types.d.ts +132 -13
  35. package/dist/esm/components/code/types.d.ts.map +1 -1
  36. package/dist/esm/components/code/types.js +1 -0
  37. package/dist/esm/components/code/types.js.map +4 -4
  38. package/dist/esm/components/code/useCodeCard.d.ts +20 -0
  39. package/dist/esm/components/code/useCodeCard.d.ts.map +1 -0
  40. package/dist/esm/components/code/useCodeCard.js +2 -0
  41. package/dist/esm/components/code/useCodeCard.js.map +7 -0
  42. package/package.json +1 -1
  43. package/src/components/code/CodeBlock.tsx +252 -330
  44. package/src/components/code/LanguageBadge.tsx +65 -18
  45. package/src/components/code/index.ts +6 -3
  46. package/src/components/code/types.ts +219 -27
  47. package/src/components/code/useCodeCard.ts +82 -0
  48. package/src/components/index.css +64 -62
  49. package/styles.css +60 -59
package/styles.css CHANGED
@@ -13,63 +13,39 @@
13
13
  transition: max-height 0.3s ease-in-out;
14
14
  position: relative;
15
15
  }
16
- /* Code block content (the pre part, below the header) */
17
- .code-block-content {
18
- width: 100%;
19
- min-width: 0;
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
16
  /* Pre elements inside code content */
54
- .code-content pre,
55
- .code-block-content pre {
56
- overflow-x: visible;
57
- max-width: 100%;
58
- min-width: 0;
17
+ .code-content pre {
59
18
  margin: 0;
60
19
  width: 100%;
61
20
  box-sizing: border-box;
62
- scrollbar-width: none;
63
- -ms-overflow-style: none;
21
+ font-family: var(--font-mono);
22
+ font-size: var(--font-size-2);
23
+ line-height: 1.75;
24
+ padding: var(--space-3);
25
+ overflow-x: auto;
64
26
  }
65
- /* Ensure Shiki-generated pre elements fill width */
66
- .code-block-content > pre {
67
- width: 100% !important;
68
- min-width: 0;
27
+ /* Rehype-pretty-code theme support */
28
+ pre[data-theme] code {
29
+ background: none !important;
30
+ }
31
+ pre[data-theme] code span {
32
+ color: var(--shiki-light);
33
+ font-style: var(--shiki-light-font-style);
34
+ font-weight: var(--shiki-light-font-weight);
35
+ -webkit-text-decoration: var(--shiki-light-text-decoration);
36
+ text-decoration: var(--shiki-light-text-decoration);
37
+ }
38
+ .dark pre[data-theme] code span,
39
+ .dark-theme pre[data-theme] code span,
40
+ [data-appearance="dark"] pre[data-theme] code span {
41
+ color: var(--shiki-dark) !important;
42
+ font-style: var(--shiki-dark-font-style) !important;
43
+ font-weight: var(--shiki-dark-font-weight) !important;
44
+ -webkit-text-decoration: var(--shiki-dark-text-decoration) !important;
45
+ text-decoration: var(--shiki-dark-text-decoration) !important;
69
46
  }
70
47
  /* Code elements inside pre */
71
- .code-content pre code,
72
- .code-block-content pre code {
48
+ .code-content pre code {
73
49
  font-family: var(--font-mono);
74
50
  font-size: var(--font-size-2);
75
51
  line-height: 1.75;
@@ -80,15 +56,13 @@
80
56
  counter-reset: line;
81
57
  }
82
58
  /* Shiki line spans */
83
- .code-content pre code .line,
84
- .code-block-content pre code .line {
59
+ .code-content pre code .line {
85
60
  display: flex;
86
61
  align-items: center;
87
62
  gap: 0;
88
63
  }
89
- /* Line numbers */
90
- .code-content pre code .line::before,
91
- .code-block-content pre code .line::before {
64
+ /* Line numbers (shown by default) */
65
+ .code-content pre code .line::before {
92
66
  counter-increment: line;
93
67
  content: counter(line);
94
68
  display: inline-block;
@@ -102,6 +76,37 @@
102
76
  flex-shrink: 0;
103
77
  margin-right: var(--space-4);
104
78
  }
79
+ /* Hide line numbers when disabled */
80
+ .code-content.hide-line-numbers pre code .line::before {
81
+ display: none;
82
+ }
83
+ /* Loading skeleton */
84
+ .code-skeleton {
85
+ display: flex;
86
+ flex-direction: column;
87
+ gap: var(--space-2);
88
+ padding: var(--space-3);
89
+ }
90
+ .code-skeleton-line {
91
+ height: 1em;
92
+ background: linear-gradient(
93
+ 90deg,
94
+ var(--gray-a3) 0%,
95
+ var(--gray-a4) 50%,
96
+ var(--gray-a3) 100%
97
+ );
98
+ background-size: 200% 100%;
99
+ animation: code-skeleton-shimmer 1.5s ease-in-out infinite;
100
+ border-radius: var(--radius-1);
101
+ }
102
+ @keyframes code-skeleton-shimmer {
103
+ 0% {
104
+ background-position: 200% 0;
105
+ }
106
+ 100% {
107
+ background-position: -200% 0;
108
+ }
109
+ }
105
110
  /* Scroll shadow overlay for collapsed state */
106
111
  .code-scroll-shadow {
107
112
  position: absolute;
@@ -127,7 +132,6 @@
127
132
  transition: transform 0.2s ease-in-out;
128
133
  }
129
134
  /* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
130
- .code-block-content pre.shiki span,
131
135
  .code-content pre.shiki span {
132
136
  color: var(--shiki-light) !important;
133
137
  font-style: var(--shiki-light-font-style);
@@ -136,9 +140,6 @@
136
140
  text-decoration: var(--shiki-light-text-decoration);
137
141
  }
138
142
  /* Override with dark theme colors when inside a dark context */
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
143
  .dark .code-content pre.shiki span,
143
144
  .dark-theme .code-content pre.shiki span,
144
145
  [data-appearance="dark"] .code-content pre.shiki span {