@cck-ui/core 0.40.0 → 0.42.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.
Files changed (70) hide show
  1. package/cjs/components/code/code.cjs +401 -0
  2. package/cjs/components/code/code.cjs.map +1 -0
  3. package/cjs/components/code/code.module.cjs +7 -0
  4. package/cjs/components/code/code.module.cjs.map +1 -0
  5. package/cjs/components/code/code.utils.cjs +8 -0
  6. package/cjs/components/code/code.utils.cjs.map +1 -0
  7. package/cjs/components/code/index.cjs +14 -0
  8. package/cjs/components/code/index.cjs.map +1 -0
  9. package/cjs/components/highlight/highlight.cjs +493 -0
  10. package/cjs/components/highlight/highlight.cjs.map +1 -0
  11. package/cjs/components/highlight/highlighter/highlighter.cjs +84 -0
  12. package/cjs/components/highlight/highlighter/highlighter.cjs.map +1 -0
  13. package/cjs/components/highlight/index.cjs +13 -0
  14. package/cjs/components/highlight/index.cjs.map +1 -0
  15. package/cjs/components/mark/get-mark-color/get-mark-color.cjs +16 -0
  16. package/cjs/components/mark/get-mark-color/get-mark-color.cjs.map +1 -0
  17. package/cjs/components/mark/index.cjs +14 -0
  18. package/cjs/components/mark/index.cjs.map +1 -0
  19. package/cjs/components/mark/mark.cjs +396 -0
  20. package/cjs/components/mark/mark.cjs.map +1 -0
  21. package/cjs/components/mark/mark.module.cjs +7 -0
  22. package/cjs/components/mark/mark.module.cjs.map +1 -0
  23. package/cjs/components/mark/mark.utils.cjs +20 -0
  24. package/cjs/components/mark/mark.utils.cjs.map +1 -0
  25. package/cjs/index.cjs +99 -90
  26. package/cjs/index.cjs.map +1 -1
  27. package/esm/components/code/code.mjs +401 -0
  28. package/esm/components/code/code.mjs.map +1 -0
  29. package/esm/components/code/code.module.mjs +7 -0
  30. package/esm/components/code/code.module.mjs.map +1 -0
  31. package/esm/components/code/code.utils.mjs +9 -0
  32. package/esm/components/code/code.utils.mjs.map +1 -0
  33. package/esm/components/code/index.mjs +11 -0
  34. package/esm/components/code/index.mjs.map +1 -0
  35. package/esm/components/highlight/highlight.mjs +493 -0
  36. package/esm/components/highlight/highlight.mjs.map +1 -0
  37. package/esm/components/highlight/highlighter/highlighter.mjs +83 -0
  38. package/esm/components/highlight/highlighter/highlighter.mjs.map +1 -0
  39. package/esm/components/highlight/index.mjs +10 -0
  40. package/esm/components/highlight/index.mjs.map +1 -0
  41. package/esm/components/mark/get-mark-color/get-mark-color.mjs +16 -0
  42. package/esm/components/mark/get-mark-color/get-mark-color.mjs.map +1 -0
  43. package/esm/components/mark/index.mjs +11 -0
  44. package/esm/components/mark/index.mjs.map +1 -0
  45. package/esm/components/mark/mark.mjs +396 -0
  46. package/esm/components/mark/mark.mjs.map +1 -0
  47. package/esm/components/mark/mark.module.mjs +7 -0
  48. package/esm/components/mark/mark.module.mjs.map +1 -0
  49. package/esm/components/mark/mark.utils.mjs +20 -0
  50. package/esm/components/mark/mark.utils.mjs.map +1 -0
  51. package/esm/index.mjs +7 -1
  52. package/esm/index.mjs.map +1 -1
  53. package/lib/components/code/code.types.d.ts +17 -0
  54. package/lib/components/code/code.utils.d.ts +6 -0
  55. package/lib/components/code/index.d.ts +6 -0
  56. package/lib/components/highlight/highlight.types.d.ts +57 -0
  57. package/lib/components/highlight/highlighter/highlighter.d.ts +12 -0
  58. package/lib/components/highlight/index.d.ts +5 -0
  59. package/lib/components/index.d.ts +3 -0
  60. package/lib/components/mark/get-mark-color/get-mark-color.d.ts +8 -0
  61. package/lib/components/mark/index.d.ts +6 -0
  62. package/lib/components/mark/mark.types.d.ts +14 -0
  63. package/lib/components/mark/mark.utils.d.ts +6 -0
  64. package/package.json +1 -1
  65. package/styles/code.css +21 -0
  66. package/styles/code.layer.css +22 -0
  67. package/styles/mark.css +11 -0
  68. package/styles/mark.layer.css +12 -0
  69. package/styles.css +34 -0
  70. package/styles.layer.css +34 -0
@@ -0,0 +1,396 @@
1
+ "use client";
2
+ import export_helper_default from "../../_virtual/_/plugin-vue/export-helper.mjs";
3
+ import { useComponentProps } from "../../core/config-provider/use-component-props/use-component-props.mjs";
4
+ import { CBox } from "../../core/box/index.mjs";
5
+ import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
6
+ import mark_module_default from "./mark.module.mjs";
7
+ import { varsResolver } from "./mark.utils.mjs";
8
+ import { computed, createBlock, defineComponent, mergeProps, openBlock, ref, renderSlot, useAttrs, withCtx } from "vue";
9
+ //#region packages/@cck-ui/core/src/components/mark/mark.vue
10
+ const _sfc_main = /*@__PURE__*/ defineComponent({
11
+ name: "CMark",
12
+ __name: "mark",
13
+ props: {
14
+ color: {
15
+ type: null,
16
+ required: false
17
+ },
18
+ className: {
19
+ type: String,
20
+ required: false
21
+ },
22
+ style: {
23
+ type: [
24
+ Object,
25
+ Function,
26
+ Array
27
+ ],
28
+ required: false,
29
+ skipCheck: true
30
+ },
31
+ __vars: {
32
+ type: null,
33
+ required: false
34
+ },
35
+ __size: {
36
+ type: String,
37
+ required: false
38
+ },
39
+ hiddenFrom: {
40
+ type: null,
41
+ required: false
42
+ },
43
+ visibleFrom: {
44
+ type: null,
45
+ required: false
46
+ },
47
+ lightHidden: {
48
+ type: Boolean,
49
+ required: false
50
+ },
51
+ darkHidden: {
52
+ type: Boolean,
53
+ required: false
54
+ },
55
+ mod: {
56
+ type: [
57
+ Object,
58
+ String,
59
+ Array
60
+ ],
61
+ required: false
62
+ },
63
+ m: {
64
+ type: null,
65
+ required: false
66
+ },
67
+ my: {
68
+ type: null,
69
+ required: false
70
+ },
71
+ mx: {
72
+ type: null,
73
+ required: false
74
+ },
75
+ mt: {
76
+ type: null,
77
+ required: false
78
+ },
79
+ mb: {
80
+ type: null,
81
+ required: false
82
+ },
83
+ ms: {
84
+ type: null,
85
+ required: false
86
+ },
87
+ me: {
88
+ type: null,
89
+ required: false
90
+ },
91
+ mis: {
92
+ type: null,
93
+ required: false
94
+ },
95
+ mie: {
96
+ type: null,
97
+ required: false
98
+ },
99
+ ml: {
100
+ type: null,
101
+ required: false
102
+ },
103
+ mr: {
104
+ type: null,
105
+ required: false
106
+ },
107
+ p: {
108
+ type: null,
109
+ required: false
110
+ },
111
+ py: {
112
+ type: null,
113
+ required: false
114
+ },
115
+ px: {
116
+ type: null,
117
+ required: false
118
+ },
119
+ pt: {
120
+ type: null,
121
+ required: false
122
+ },
123
+ pb: {
124
+ type: null,
125
+ required: false
126
+ },
127
+ ps: {
128
+ type: null,
129
+ required: false
130
+ },
131
+ pe: {
132
+ type: null,
133
+ required: false
134
+ },
135
+ pis: {
136
+ type: null,
137
+ required: false
138
+ },
139
+ pie: {
140
+ type: null,
141
+ required: false
142
+ },
143
+ pl: {
144
+ type: null,
145
+ required: false
146
+ },
147
+ pr: {
148
+ type: null,
149
+ required: false
150
+ },
151
+ bd: {
152
+ type: null,
153
+ required: false
154
+ },
155
+ bdrs: {
156
+ type: null,
157
+ required: false
158
+ },
159
+ bg: {
160
+ type: null,
161
+ required: false
162
+ },
163
+ c: {
164
+ type: null,
165
+ required: false
166
+ },
167
+ opacity: {
168
+ type: [
169
+ String,
170
+ Object,
171
+ Number
172
+ ],
173
+ required: false
174
+ },
175
+ ff: {
176
+ type: [String, Object],
177
+ required: false
178
+ },
179
+ fz: {
180
+ type: null,
181
+ required: false
182
+ },
183
+ fw: {
184
+ type: null,
185
+ required: false
186
+ },
187
+ lts: {
188
+ type: null,
189
+ required: false
190
+ },
191
+ ta: {
192
+ type: [String, Object],
193
+ required: false
194
+ },
195
+ lh: {
196
+ type: null,
197
+ required: false
198
+ },
199
+ fs: {
200
+ type: null,
201
+ required: false
202
+ },
203
+ tt: {
204
+ type: [String, Object],
205
+ required: false
206
+ },
207
+ td: {
208
+ type: null,
209
+ required: false
210
+ },
211
+ w: {
212
+ type: null,
213
+ required: false
214
+ },
215
+ miw: {
216
+ type: null,
217
+ required: false
218
+ },
219
+ maw: {
220
+ type: null,
221
+ required: false
222
+ },
223
+ h: {
224
+ type: null,
225
+ required: false
226
+ },
227
+ mih: {
228
+ type: null,
229
+ required: false
230
+ },
231
+ mah: {
232
+ type: null,
233
+ required: false
234
+ },
235
+ bgsz: {
236
+ type: null,
237
+ required: false
238
+ },
239
+ bgp: {
240
+ type: null,
241
+ required: false
242
+ },
243
+ bgr: {
244
+ type: null,
245
+ required: false
246
+ },
247
+ bga: {
248
+ type: null,
249
+ required: false
250
+ },
251
+ pos: {
252
+ type: [String, Object],
253
+ required: false
254
+ },
255
+ top: {
256
+ type: null,
257
+ required: false
258
+ },
259
+ left: {
260
+ type: null,
261
+ required: false
262
+ },
263
+ bottom: {
264
+ type: null,
265
+ required: false
266
+ },
267
+ right: {
268
+ type: null,
269
+ required: false
270
+ },
271
+ inset: {
272
+ type: null,
273
+ required: false
274
+ },
275
+ display: {
276
+ type: null,
277
+ required: false
278
+ },
279
+ flex: {
280
+ type: null,
281
+ required: false
282
+ },
283
+ unstyled: {
284
+ type: Boolean,
285
+ required: false
286
+ },
287
+ variant: {
288
+ type: null,
289
+ required: false
290
+ },
291
+ classNames: {
292
+ type: null,
293
+ required: false
294
+ },
295
+ styles: {
296
+ type: null,
297
+ required: false
298
+ },
299
+ vars: {
300
+ type: Function,
301
+ required: false
302
+ },
303
+ attributes: {
304
+ type: null,
305
+ required: false
306
+ }
307
+ },
308
+ setup(__props, { expose: __expose }) {
309
+ const _root = ref(null);
310
+ const attrs = useAttrs();
311
+ const rawProps = __props;
312
+ const defaultProps = { color: "yellow" };
313
+ const props = useComponentProps({
314
+ component: "CMark",
315
+ defaultProps,
316
+ props: rawProps
317
+ });
318
+ const knownProps = [
319
+ "classNames",
320
+ "className",
321
+ "style",
322
+ "styles",
323
+ "unstyled",
324
+ "vars",
325
+ "color",
326
+ "variant",
327
+ "attributes"
328
+ ];
329
+ const styleProps = computed(() => ({
330
+ ...props.value,
331
+ ...attrs,
332
+ style: attrs.style ?? props.value.style
333
+ }));
334
+ const getStyles = useStyles({
335
+ name: "Mark",
336
+ props: styleProps,
337
+ classes: mark_module_default,
338
+ className: () => props.value.className,
339
+ style: () => props.value.style,
340
+ classNames: props.value.classNames,
341
+ styles: props.value.styles,
342
+ unstyled: props.value.unstyled,
343
+ attributes: props.value.attributes,
344
+ vars: props.value.vars,
345
+ varsResolver
346
+ });
347
+ const rootAttrs = computed(() => getStyles("root"));
348
+ const mergedAttrs = computed(() => {
349
+ const others = {};
350
+ const propsValue = props.value;
351
+ for (const key in propsValue) if (!knownProps.includes(key)) others[key] = propsValue[key];
352
+ const userMod = props.value.mod;
353
+ const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)];
354
+ return {
355
+ ...others,
356
+ mod: mergedMod,
357
+ ...rootAttrs.value
358
+ };
359
+ });
360
+ __expose({ root: computed(() => _root.value?.root ?? null) });
361
+ const __returned__ = {
362
+ _root,
363
+ attrs,
364
+ rawProps,
365
+ defaultProps,
366
+ props,
367
+ knownProps,
368
+ styleProps,
369
+ getStyles,
370
+ rootAttrs,
371
+ mergedAttrs,
372
+ get CBox() {
373
+ return CBox;
374
+ }
375
+ };
376
+ Object.defineProperty(__returned__, "__isScriptSetup", {
377
+ enumerable: false,
378
+ value: true
379
+ });
380
+ return __returned__;
381
+ }
382
+ });
383
+ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
384
+ return openBlock(), createBlock($setup["CBox"], mergeProps({
385
+ ref: "_root",
386
+ tag: "mark"
387
+ }, $setup.mergedAttrs, { variant: $setup.props.variant }), {
388
+ default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
389
+ _: 3
390
+ }, 16, ["variant"]);
391
+ }
392
+ var mark_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/mark/mark.vue"]]);
393
+ //#endregion
394
+ export { mark_default as default };
395
+
396
+ //# sourceMappingURL=mark.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"mark.mjs","names":[],"sources":["../../../src/components/mark/mark.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" tag=\"mark\" v-bind=\"mergedAttrs\" :variant=\"props.variant\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { MarkFactory, MarkProps } from './mark.types'\nimport classes from './mark.module.css'\nimport { varsResolver } from './mark.utils'\n\ndefineOptions({\n name: 'CMark',\n})\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<MarkProps>()\n\nconst defaultProps = {\n color: 'yellow',\n} satisfies Partial<MarkProps>\n\nconst props = useComponentProps({\n component: 'CMark',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'color',\n 'variant',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<MarkFactory>({\n name: 'Mark',\n props: styleProps,\n classes,\n className: () => props.value.className,\n style: () => props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,OAAO,SACT;EAEA,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAuB;GACvC,MAAM;GACN,OAAO;GACP,SAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;qBAjFC,YAEQ,OAAA,SAFR,WAEQ;EAFD,KAAI;EAAQ,KAAI;IAAe,OAAA,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;yBACzD,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
@@ -0,0 +1,7 @@
1
+ "use client";
2
+ //#region packages/@cck-ui/core/src/components/mark/mark.module.css
3
+ var mark_module_default = { "root": "m_4541d3e2" };
4
+ //#endregion
5
+ export { mark_module_default as default };
6
+
7
+ //# sourceMappingURL=mark.module.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"mark.module.mjs","names":[],"sources":["../../../src/components/mark/mark.module.css"],"sourcesContent":[".root {\n color: var(--c-color-black);\n\n @mixin where-light {\n background-color: var(--mark-bg-light);\n }\n\n @mixin where-dark {\n background-color: var(--mark-bg-dark);\n }\n}\n"],"mappings":";;AAAA,IAAA,sBAAe,EAAC,QAAO,aAAY"}
@@ -0,0 +1,20 @@
1
+ "use client";
2
+ import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
3
+ import { getMarkColor } from "./get-mark-color/get-mark-color.mjs";
4
+ //#region packages/@cck-ui/core/src/components/mark/mark.utils.ts
5
+ const varsResolver = createVarsResolver((theme, { color }) => ({ root: {
6
+ "--mark-bg-dark": getMarkColor({
7
+ color,
8
+ theme,
9
+ defaultShade: 5
10
+ }),
11
+ "--mark-bg-light": getMarkColor({
12
+ color,
13
+ theme,
14
+ defaultShade: 2
15
+ })
16
+ } }));
17
+ //#endregion
18
+ export { varsResolver };
19
+
20
+ //# sourceMappingURL=mark.utils.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"mark.utils.mjs","names":[],"sources":["../../../src/components/mark/mark.utils.ts"],"sourcesContent":["import { createVarsResolver } from '../../core'\nimport { getMarkColor } from './get-mark-color/get-mark-color'\nimport { MarkFactory } from './mark.types'\n\nexport const varsResolver = createVarsResolver<MarkFactory>((theme, { color }) => ({\n root: {\n '--mark-bg-dark': getMarkColor({ color, theme, defaultShade: 5 }),\n '--mark-bg-light': getMarkColor({ color, theme, defaultShade: 2 }),\n },\n}))\n"],"mappings":";;;;AAIA,MAAa,eAAe,oBAAiC,OAAO,EAAE,aAAa,EACjF,MAAM;CACJ,kBAAkB,aAAa;EAAE;EAAO;EAAO,cAAc;CAAE,CAAC;CAChE,mBAAmB,aAAa;EAAE;EAAO;EAAO,cAAc;CAAE,CAAC;AACnE,EACF,EAAE"}
package/esm/index.mjs CHANGED
@@ -74,6 +74,7 @@ import { CBurger } from "./components/burger/index.mjs";
74
74
  import { CButton, CButtonGroup, CButtonGroupSection } from "./components/button/index.mjs";
75
75
  import { CCard, CCardSection } from "./components/card/index.mjs";
76
76
  import { CCenter } from "./components/center/index.mjs";
77
+ import { CCode } from "./components/code/index.mjs";
77
78
  import { CColorSwatch } from "./components/color-swatch/index.mjs";
78
79
  import { CContainer } from "./components/container/index.mjs";
79
80
  import { CCopyButton } from "./components/copy-button/index.mjs";
@@ -85,6 +86,8 @@ import { CFlex } from "./components/flex/index.mjs";
85
86
  import { CFocusTrap } from "./components/focus-trap/index.mjs";
86
87
  import { CCol, CGrid } from "./components/grid/index.mjs";
87
88
  import { CGroup } from "./components/group/index.mjs";
89
+ import { CMark } from "./components/mark/index.mjs";
90
+ import { CHighlight } from "./components/highlight/index.mjs";
88
91
  import { CImage } from "./components/image/index.mjs";
89
92
  import { CIndicator } from "./components/indicator/index.mjs";
90
93
  import { CKbd } from "./components/kbd/index.mjs";
@@ -124,6 +127,7 @@ const components = [
124
127
  CCardSection,
125
128
  CCenter,
126
129
  CCloseButton,
130
+ CCode,
127
131
  CCol,
128
132
  CColorSwatch,
129
133
  CContainer,
@@ -143,10 +147,12 @@ const components = [
143
147
  CFocusTrap,
144
148
  CGrid,
145
149
  CGroup,
150
+ CHighlight,
146
151
  CImage,
147
152
  CIndicator,
148
153
  CKbd,
149
154
  CLoader,
155
+ CMark,
150
156
  CNumberFormatter,
151
157
  CPaper,
152
158
  CPortal,
@@ -171,6 +177,6 @@ const CckUI = { install(app) {
171
177
  });
172
178
  } };
173
179
  //#endregion
174
- export { CActionIcon, CActionIconGroup, CActionIconGroupSection, CAffix, CAlert, CAnchor, CAspectRatio, CAvatar, CAvatarGroup, CBackgroundImage, CBadge, CBlockquote, CBox, CBreadcrumbs, CBurger, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCard, CCardSection, CCenter, CCloseButton, CCol, CColorSwatch, CContainer, CCopyButton, CDataList, CDataListItem, CDataListItemLabel, CDataListItemValue, CDefaultLoaders, CDivider, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFileButton, CFlex, CFocusTrap, CGrid, CGroup, CImage, CIndicator, CKbd, CLoader, CNumberFormatter, CONFIG_KEY, CPaper, CPortal, CSemiCircleProgress, CSimpleGrid, CSkeleton, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CTypography, CVisuallyHidden, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterFalsyChildren, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getDefaultZIndex, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
180
+ export { CActionIcon, CActionIconGroup, CActionIconGroupSection, CAffix, CAlert, CAnchor, CAspectRatio, CAvatar, CAvatarGroup, CBackgroundImage, CBadge, CBlockquote, CBox, CBreadcrumbs, CBurger, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCard, CCardSection, CCenter, CCloseButton, CCode, CCol, CColorSwatch, CContainer, CCopyButton, CDataList, CDataListItem, CDataListItemLabel, CDataListItemValue, CDefaultLoaders, CDivider, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFileButton, CFlex, CFocusTrap, CGrid, CGroup, CHighlight, CImage, CIndicator, CKbd, CLoader, CMark, CNumberFormatter, CONFIG_KEY, CPaper, CPortal, CSemiCircleProgress, CSimpleGrid, CSkeleton, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CTypography, CVisuallyHidden, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterFalsyChildren, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getDefaultZIndex, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
175
181
 
176
182
  //# sourceMappingURL=index.mjs.map
package/esm/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n CActionIcon,\n CActionIconGroup,\n CActionIconGroupSection,\n CAffix,\n CAlert,\n CAnchor,\n CAspectRatio,\n CAvatar,\n CAvatarGroup,\n CBackgroundImage,\n CBadge,\n CBlockquote,\n CBreadcrumbs,\n CBurger,\n CButton,\n CButtonGroup,\n CButtonGroupSection,\n CCard,\n CCardSection,\n CCenter,\n CCloseButton,\n CCol,\n CColorSwatch,\n CContainer,\n CCopyButton,\n CDataList,\n CDataListItem,\n CDataListItemLabel,\n CDataListItemValue,\n CDivider,\n CEmptyState,\n CEmptyStateActions,\n CEmptyStateDescription,\n CEmptyStateIndicator,\n CEmptyStateTitle,\n CFileButton,\n CFlex,\n CFocusTrap,\n CGrid,\n CGroup,\n CImage,\n CIndicator,\n CKbd,\n CLoader,\n CNumberFormatter,\n CPaper,\n CPortal,\n CSemiCircleProgress,\n CSimpleGrid,\n CSkeleton,\n CSpace,\n CSplitter,\n CSplitterPane,\n CStack,\n CText,\n CTransition,\n CTypography,\n CVisuallyHidden,\n UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n CckConfigProvider,\n CBox,\n CActionIcon,\n CActionIconGroup,\n CActionIconGroupSection,\n CAffix,\n CAlert,\n CAnchor,\n CAspectRatio,\n CAvatar,\n CAvatarGroup,\n CBackgroundImage,\n CBadge,\n CBlockquote,\n CBreadcrumbs,\n CBurger,\n CButton,\n CButtonGroup,\n CButtonGroupSection,\n CCard,\n CCardSection,\n CCenter,\n CCloseButton,\n CCol,\n CColorSwatch,\n CContainer,\n CCopyButton,\n CDataList,\n CDataListItem,\n CDataListItemLabel,\n CDataListItemValue,\n CDivider,\n CEmptyState,\n CEmptyStateActions,\n CEmptyStateDescription,\n CEmptyStateIndicator,\n CEmptyStateTitle,\n CFileButton,\n CFlex,\n CFocusTrap,\n CGrid,\n CGroup,\n CImage,\n CIndicator,\n CKbd,\n CLoader,\n CNumberFormatter,\n CPaper,\n CPortal,\n CSemiCircleProgress,\n CSimpleGrid,\n CSkeleton,\n CSpace,\n CSplitter,\n CSplitterPane,\n CStack,\n CText,\n CTransition,\n CTypography,\n CVisuallyHidden,\n UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n install(app: App) {\n if ((app as any)[INSTALLED_KEY]) {\n return\n }\n ;(app as any)[INSTALLED_KEY] = true\n components.forEach((c) => {\n if (c.name) {\n app.component(c.name, c)\n }\n })\n },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n CActionIcon,\n CActionIconGroup,\n CActionIconGroupSection,\n CAffix,\n CAlert,\n CAnchor,\n CAspectRatio,\n CAvatar,\n CAvatarGroup,\n CBackgroundImage,\n CBadge,\n CBlockquote,\n CBreadcrumbs,\n CBurger,\n CButton,\n CButtonGroup,\n CButtonGroupSection,\n CCard,\n CCardSection,\n CCenter,\n CCloseButton,\n CCode,\n CCol,\n CColorSwatch,\n CContainer,\n CCopyButton,\n CDataList,\n CDataListItem,\n CDataListItemLabel,\n CDataListItemValue,\n CDivider,\n CEmptyState,\n CEmptyStateActions,\n CEmptyStateDescription,\n CEmptyStateIndicator,\n CEmptyStateTitle,\n CFileButton,\n CFlex,\n CFocusTrap,\n CGrid,\n CGroup,\n CHighlight,\n CImage,\n CIndicator,\n CKbd,\n CLoader,\n CMark,\n CNumberFormatter,\n CPaper,\n CPortal,\n CSemiCircleProgress,\n CSimpleGrid,\n CSkeleton,\n CSpace,\n CSplitter,\n CSplitterPane,\n CStack,\n CText,\n CTransition,\n CTypography,\n CVisuallyHidden,\n UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n CckConfigProvider,\n CBox,\n CActionIcon,\n CActionIconGroup,\n CActionIconGroupSection,\n CAffix,\n CAlert,\n CAnchor,\n CAspectRatio,\n CAvatar,\n CAvatarGroup,\n CBackgroundImage,\n CBadge,\n CBlockquote,\n CBreadcrumbs,\n CBurger,\n CButton,\n CButtonGroup,\n CButtonGroupSection,\n CCard,\n CCardSection,\n CCenter,\n CCloseButton,\n CCode,\n CCol,\n CColorSwatch,\n CContainer,\n CCopyButton,\n CDataList,\n CDataListItem,\n CDataListItemLabel,\n CDataListItemValue,\n CDivider,\n CEmptyState,\n CEmptyStateActions,\n CEmptyStateDescription,\n CEmptyStateIndicator,\n CEmptyStateTitle,\n CFileButton,\n CFlex,\n CFocusTrap,\n CGrid,\n CGroup,\n CHighlight,\n CImage,\n CIndicator,\n CKbd,\n CLoader,\n CMark,\n CNumberFormatter,\n CPaper,\n CPortal,\n CSemiCircleProgress,\n CSimpleGrid,\n CSkeleton,\n CSpace,\n CSplitter,\n CSplitterPane,\n CStack,\n CText,\n CTransition,\n CTypography,\n CVisuallyHidden,\n UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n install(app: App) {\n if ((app as any)[INSTALLED_KEY]) {\n return\n }\n ;(app as any)[INSTALLED_KEY] = true\n components.forEach((c) => {\n if (c.name) {\n app.component(c.name, c)\n }\n })\n },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
@@ -0,0 +1,17 @@
1
+ import { BoxProps, CColor, ElementProps, Factory, StylesApiProps } from '../../core';
2
+ export type CodeStylesNames = 'root';
3
+ export type CodeCssVariables = {
4
+ root: '--code-bg';
5
+ };
6
+ export interface CodeProps extends BoxProps, StylesApiProps<CodeFactory>, /* @vue-ignore */ ElementProps<'code'> {
7
+ /** Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme. */
8
+ color?: CColor;
9
+ /** If set, code is rendered in `pre` */
10
+ block?: boolean;
11
+ }
12
+ export type CodeFactory = Factory<{
13
+ props: CodeProps;
14
+ ref: HTMLElement;
15
+ stylesNames: CodeStylesNames;
16
+ vars: CodeCssVariables;
17
+ }>;
@@ -0,0 +1,6 @@
1
+ export declare const varsResolver: import("../..").VarsResolver<{
2
+ props: import("./code.types").CodeProps;
3
+ ref: HTMLElement;
4
+ stylesNames: import("./code.types").CodeStylesNames;
5
+ vars: import("./code.types").CodeCssVariables;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import { SFCWithInstallAndClasses } from '../../core';
2
+ import classes from './code.module.css';
3
+ import Code from './code.vue';
4
+ export declare const CCode: SFCWithInstallAndClasses<typeof Code, typeof classes>;
5
+ export default CCode;
6
+ export * from './code.types';
@@ -0,0 +1,57 @@
1
+ import { Properties } from 'csstype';
2
+ import { CColor, CTheme, Factory } from '../../core';
3
+ import { TextProps, TextStylesNames, TextVariant } from '../text';
4
+ export interface HighlightTerm {
5
+ /** Text to highlight */
6
+ text: string;
7
+ /** Background color for this specific term. Key of `theme.colors` or any valid CSS color */
8
+ color?: CColor | string;
9
+ }
10
+ export interface HighlightProps extends Omit<TextProps, 'color'> {
11
+ /**
12
+ * Substring(s) to highlight in `children`. Can be:
13
+ * - string: single term
14
+ * - string[]: multiple terms with same color
15
+ * - HighlightTerm[]: multiple terms with custom colors per term
16
+ *
17
+ * - Matching is case-insensitive and accent-insensitive by default, use `caseInsensitive` and `accentInsensitive` props to control this behavior
18
+ * - Regex special characters are automatically escaped
19
+ * - When multiple substrings are provided, longer matches take precedence
20
+ * - Empty strings and whitespace-only strings are ignored
21
+ */
22
+ highlight: string | string[] | HighlightTerm[];
23
+ /**
24
+ * Default background color for all highlighted text.
25
+ * Key of `theme.colors` or any valid CSS color, passed to `Mark` component.
26
+ * Can be overridden per term when using HighlightTerm objects
27
+ * @default 'yellow'
28
+ */
29
+ color?: CColor | string;
30
+ /** Styles applied to `mark` elements */
31
+ highlightStyles?: Properties | ((theme: CTheme) => Properties);
32
+ /** String in which to highlight substrings */
33
+ children: string;
34
+ /**
35
+ * Only match whole words (adds word boundaries to regex).
36
+ * When enabled, 'the' will not match 'there'
37
+ */
38
+ wholeWorld?: boolean;
39
+ /**
40
+ * Perform case-insensitive matching.
41
+ * @default true
42
+ */
43
+ caseInsensitive?: boolean;
44
+ /**
45
+ * Perform accent-insensitive matching
46
+ * When enabled cafe will match cafe, café, cafè, etc.
47
+ * @default true
48
+ */
49
+ accentInsensitive?: boolean;
50
+ }
51
+ export type HighlightFactory = Factory<{
52
+ props: HighlightProps;
53
+ defaultRef: HTMLDivElement;
54
+ defaultComponent: 'div';
55
+ stylesNames: TextStylesNames;
56
+ variant: TextVariant;
57
+ }>;
@@ -0,0 +1,12 @@
1
+ export declare function foldAccents(text: string): string;
2
+ export interface HighlightChunk {
3
+ chunk: string;
4
+ highlighted: boolean;
5
+ color?: string;
6
+ }
7
+ export interface HighlighterOptions {
8
+ wholeWord?: boolean;
9
+ caseInsensitive?: boolean;
10
+ accentInsensitive?: boolean;
11
+ }
12
+ export declare function highlighter(value: string, _highlight: string | string[], options?: HighlighterOptions): HighlightChunk[];
@@ -0,0 +1,5 @@
1
+ import { SFCWithInstall } from '../../core';
2
+ import Highlight from './highlight.vue';
3
+ export declare const CHighlight: SFCWithInstall<typeof Highlight>;
4
+ export default CHighlight;
5
+ export * from './highlight.types';
@@ -13,6 +13,7 @@ export * from './button';
13
13
  export * from './card';
14
14
  export * from './center';
15
15
  export * from './close-button';
16
+ export * from './code';
16
17
  export * from './color-swatch';
17
18
  export * from './container';
18
19
  export * from './copy-button';
@@ -24,10 +25,12 @@ export * from './flex';
24
25
  export * from './focus-trap';
25
26
  export * from './grid';
26
27
  export * from './group';
28
+ export * from './highlight';
27
29
  export * from './image';
28
30
  export * from './indicator';
29
31
  export * from './kbd';
30
32
  export * from './loader';
33
+ export * from './mark';
31
34
  export * from './number-formatter';
32
35
  export * from './paper';
33
36
  export * from './portal';
@@ -0,0 +1,8 @@
1
+ import { CColor, CTheme } from '../../../core';
2
+ interface GetMarkColorInput {
3
+ color: CColor | string | undefined;
4
+ theme: CTheme;
5
+ defaultShade: number;
6
+ }
7
+ export declare function getMarkColor({ color, theme, defaultShade }: GetMarkColorInput): string | undefined;
8
+ export {};
@@ -0,0 +1,6 @@
1
+ import { SFCWithInstallAndClasses } from '../../core';
2
+ import classes from './mark.module.css';
3
+ import Mark from './mark.vue';
4
+ export declare const CMark: SFCWithInstallAndClasses<typeof Mark, typeof classes>;
5
+ export default CMark;
6
+ export * from './mark.types';
@@ -0,0 +1,14 @@
1
+ import { BoxProps, CColor, ElementProps, Factory, StylesApiProps } from '../../core';
2
+ export type MarkStylesNames = 'root';
3
+ export type MarkCssVariables = {
4
+ root: '--mark-bg-dark' | '--mark-bg-light';
5
+ };
6
+ export interface MarkProps extends BoxProps, StylesApiProps<MarkFactory>, /* @vue-ignore */ ElementProps<'mark'> {
7
+ color?: CColor;
8
+ }
9
+ export type MarkFactory = Factory<{
10
+ props: MarkProps;
11
+ ref: HTMLElement;
12
+ stylesNames: MarkStylesNames;
13
+ vars: MarkCssVariables;
14
+ }>;
@@ -0,0 +1,6 @@
1
+ export declare const varsResolver: import("../..").VarsResolver<{
2
+ props: import("./mark.types").MarkProps;
3
+ ref: HTMLElement;
4
+ stylesNames: import("./mark.types").MarkStylesNames;
5
+ vars: import("./mark.types").MarkCssVariables;
6
+ }>;