@kadal/theme-crayon 0.4.9 → 0.5.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.
- package/README.md +1 -1
- package/index.tsx +6 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -53,7 +53,7 @@ Every built-in layout is styled (`default`, `center`, `cover`, `intro`, `section
|
|
|
53
53
|
|
|
54
54
|
| component | what |
|
|
55
55
|
| --- | --- |
|
|
56
|
-
| `<Sticker tone tilt>` | Words on a pastel cut-out: `tone` pink · mint · sky · butter · lilac · peach (default butter), `tilt` in degrees (default -2). |
|
|
56
|
+
| `<Sticker tone tilt>` | Words on a pastel cut-out: `tone` pink · mint · sky · butter · lilac · peach (default butter), `tilt` in degrees (default -2). With a `src` it is the engine's image `<Sticker>` instead. |
|
|
57
57
|
| `<Bubble from side>` | A speech bubble; `from` names the speaker, `side="right"` answers. |
|
|
58
58
|
|
|
59
59
|
## Preview
|
package/index.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSProperties, ReactNode } from "react";
|
|
2
2
|
|
|
3
|
-
import type
|
|
3
|
+
import { type LayoutProps, Sticker as ImageSticker, type StickerProps } from "@kadal/deck";
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* ─────────────────────────────────────────────────────────────────────────────
|
|
@@ -60,11 +60,16 @@ function Sticker({
|
|
|
60
60
|
tone = "butter",
|
|
61
61
|
tilt = -2,
|
|
62
62
|
children,
|
|
63
|
+
...image
|
|
63
64
|
}: {
|
|
64
65
|
tone?: string;
|
|
65
66
|
tilt?: number;
|
|
66
67
|
children?: ReactNode;
|
|
68
|
+
src?: string;
|
|
69
|
+
[key: string]: unknown;
|
|
67
70
|
}) {
|
|
71
|
+
// With a `src` it is the engine's image sticker (placed over the slide), not words on a cut-out.
|
|
72
|
+
if (typeof image.src === "string") return <ImageSticker {...(image as StickerProps)} />;
|
|
68
73
|
return (
|
|
69
74
|
<span
|
|
70
75
|
className={`crayon-sticker tone-${TONES.has(tone) ? tone : "butter"}`}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kadal/theme-crayon",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Crayon, a theme for Kadal Deck (@kadal/deck). A playful pastel theme for workshops and classrooms: rounded shapes, a friendly display face, and sticker-like callouts.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"kadal-theme",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"test": "bun test"
|
|
92
92
|
},
|
|
93
93
|
"peerDependencies": {
|
|
94
|
-
"@kadal/deck": "^0.
|
|
94
|
+
"@kadal/deck": "^0.5.0",
|
|
95
95
|
"react": "^19.2.0"
|
|
96
96
|
},
|
|
97
97
|
"devDependencies": {
|