featuredrop 2.6.0 → 2.7.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/.claude-plugin/plugin.json +21 -0
- package/README.md +77 -11
- package/context7.json +15 -0
- package/dist/index.d.cts +89 -1
- package/dist/index.d.ts +89 -1
- package/dist/preact.cjs +19 -10
- package/dist/preact.cjs.map +1 -1
- package/dist/preact.d.cts +93 -1
- package/dist/preact.d.ts +93 -1
- package/dist/preact.js +19 -10
- package/dist/preact.js.map +1 -1
- package/dist/react-hooks.cjs +472 -0
- package/dist/react-hooks.cjs.map +1 -0
- package/dist/react-hooks.d.cts +540 -0
- package/dist/react-hooks.d.ts +540 -0
- package/dist/react-hooks.js +461 -0
- package/dist/react-hooks.js.map +1 -0
- package/dist/react.cjs +19 -10
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +93 -1
- package/dist/react.d.ts +93 -1
- package/dist/react.js +19 -10
- package/dist/react.js.map +1 -1
- package/dist/tailwind.cjs +148 -0
- package/dist/tailwind.cjs.map +1 -0
- package/dist/tailwind.d.cts +38 -0
- package/dist/tailwind.d.ts +38 -0
- package/dist/tailwind.js +146 -0
- package/dist/tailwind.js.map +1 -0
- package/dist/testing.cjs +19 -10
- package/dist/testing.cjs.map +1 -1
- package/dist/testing.d.cts +90 -0
- package/dist/testing.d.ts +90 -0
- package/dist/testing.js +19 -10
- package/dist/testing.js.map +1 -1
- package/package.json +32 -1
- package/skills/featuredrop-setup/SKILL.md +124 -0
- package/src/ai/claude-skill.md +109 -0
- package/src/ai/cursorrules.txt +13 -0
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
// src/tailwind.ts
|
|
4
|
+
var featureDropPlugin = (options = {}) => {
|
|
5
|
+
const prefix = options.prefix ?? "fd";
|
|
6
|
+
return {
|
|
7
|
+
handler({ addBase, addUtilities }) {
|
|
8
|
+
addBase({
|
|
9
|
+
":root": {
|
|
10
|
+
// Badge colors
|
|
11
|
+
[`--${prefix}-new`]: "#3b82f6",
|
|
12
|
+
[`--${prefix}-new-hover`]: "#2563eb",
|
|
13
|
+
[`--${prefix}-new-dot`]: "#ef4444",
|
|
14
|
+
[`--${prefix}-dismiss`]: "#6b7280",
|
|
15
|
+
[`--${prefix}-success`]: "#10b981",
|
|
16
|
+
// Changelog colors
|
|
17
|
+
[`--${prefix}-changelog-bg`]: "#ffffff",
|
|
18
|
+
[`--${prefix}-changelog-border`]: "#e5e7eb",
|
|
19
|
+
[`--${prefix}-changelog-text`]: "#111827",
|
|
20
|
+
[`--${prefix}-changelog-muted`]: "#6b7280",
|
|
21
|
+
// Spotlight/overlay
|
|
22
|
+
[`--${prefix}-overlay`]: "rgba(0, 0, 0, 0.5)",
|
|
23
|
+
[`--${prefix}-spotlight-ring`]: "#3b82f6",
|
|
24
|
+
// Tour
|
|
25
|
+
[`--${prefix}-tour-bg`]: "#ffffff",
|
|
26
|
+
[`--${prefix}-tour-shadow`]: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
|
|
27
|
+
// Transitions
|
|
28
|
+
[`--${prefix}-duration`]: "200ms",
|
|
29
|
+
[`--${prefix}-easing`]: "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
30
|
+
},
|
|
31
|
+
// Dark mode overrides
|
|
32
|
+
".dark, [data-theme='dark']": {
|
|
33
|
+
[`--${prefix}-new`]: "#60a5fa",
|
|
34
|
+
[`--${prefix}-new-hover`]: "#93c5fd",
|
|
35
|
+
[`--${prefix}-changelog-bg`]: "#1f2937",
|
|
36
|
+
[`--${prefix}-changelog-border`]: "#374151",
|
|
37
|
+
[`--${prefix}-changelog-text`]: "#f9fafb",
|
|
38
|
+
[`--${prefix}-changelog-muted`]: "#9ca3af",
|
|
39
|
+
[`--${prefix}-tour-bg`]: "#1f2937",
|
|
40
|
+
[`--${prefix}-tour-shadow`]: "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)"
|
|
41
|
+
},
|
|
42
|
+
// Keyframe animations
|
|
43
|
+
"@keyframes fd-pulse": {
|
|
44
|
+
"0%, 100%": { opacity: "1" },
|
|
45
|
+
"50%": { opacity: "0.5" }
|
|
46
|
+
},
|
|
47
|
+
"@keyframes fd-fade-in": {
|
|
48
|
+
from: { opacity: "0", transform: "translateY(4px)" },
|
|
49
|
+
to: { opacity: "1", transform: "translateY(0)" }
|
|
50
|
+
},
|
|
51
|
+
"@keyframes fd-slide-up": {
|
|
52
|
+
from: { opacity: "0", transform: "translateY(8px)" },
|
|
53
|
+
to: { opacity: "1", transform: "translateY(0)" }
|
|
54
|
+
},
|
|
55
|
+
"@keyframes fd-scale-in": {
|
|
56
|
+
from: { opacity: "0", transform: "scale(0.95)" },
|
|
57
|
+
to: { opacity: "1", transform: "scale(1)" }
|
|
58
|
+
},
|
|
59
|
+
"@keyframes fd-spotlight-glow": {
|
|
60
|
+
"0%, 100%": { boxShadow: `0 0 0 4px var(--${prefix}-spotlight-ring)` },
|
|
61
|
+
"50%": { boxShadow: `0 0 0 8px var(--${prefix}-spotlight-ring)` }
|
|
62
|
+
},
|
|
63
|
+
// Reduced motion
|
|
64
|
+
"@media (prefers-reduced-motion: reduce)": {
|
|
65
|
+
"*": {
|
|
66
|
+
"animation-duration": "0.01ms !important",
|
|
67
|
+
"animation-iteration-count": "1 !important"
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
addUtilities({
|
|
72
|
+
// Badge variants
|
|
73
|
+
[`.${prefix}-badge`]: {
|
|
74
|
+
display: "inline-flex",
|
|
75
|
+
"align-items": "center",
|
|
76
|
+
"justify-content": "center",
|
|
77
|
+
"font-size": "0.75rem",
|
|
78
|
+
"font-weight": "500",
|
|
79
|
+
"line-height": "1",
|
|
80
|
+
"border-radius": "9999px",
|
|
81
|
+
"background-color": `var(--${prefix}-new)`,
|
|
82
|
+
color: "#ffffff",
|
|
83
|
+
"padding-left": "0.5rem",
|
|
84
|
+
"padding-right": "0.5rem",
|
|
85
|
+
"padding-top": "0.125rem",
|
|
86
|
+
"padding-bottom": "0.125rem"
|
|
87
|
+
},
|
|
88
|
+
[`.${prefix}-badge-dot`]: {
|
|
89
|
+
display: "inline-block",
|
|
90
|
+
width: "0.5rem",
|
|
91
|
+
height: "0.5rem",
|
|
92
|
+
"border-radius": "9999px",
|
|
93
|
+
"background-color": `var(--${prefix}-new-dot)`
|
|
94
|
+
},
|
|
95
|
+
[`.${prefix}-badge-count`]: {
|
|
96
|
+
display: "inline-flex",
|
|
97
|
+
"align-items": "center",
|
|
98
|
+
"justify-content": "center",
|
|
99
|
+
"min-width": "1.25rem",
|
|
100
|
+
height: "1.25rem",
|
|
101
|
+
"font-size": "0.6875rem",
|
|
102
|
+
"font-weight": "600",
|
|
103
|
+
"line-height": "1",
|
|
104
|
+
"border-radius": "9999px",
|
|
105
|
+
"background-color": `var(--${prefix}-new-dot)`,
|
|
106
|
+
color: "#ffffff",
|
|
107
|
+
"padding-left": "0.375rem",
|
|
108
|
+
"padding-right": "0.375rem"
|
|
109
|
+
},
|
|
110
|
+
// Animation utilities
|
|
111
|
+
[`.${prefix}-animate-pulse`]: {
|
|
112
|
+
animation: "fd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
|
|
113
|
+
},
|
|
114
|
+
[`.${prefix}-animate-fade-in`]: {
|
|
115
|
+
animation: `fd-fade-in var(--${prefix}-duration) var(--${prefix}-easing) forwards`
|
|
116
|
+
},
|
|
117
|
+
[`.${prefix}-animate-slide-up`]: {
|
|
118
|
+
animation: `fd-slide-up var(--${prefix}-duration) var(--${prefix}-easing) forwards`
|
|
119
|
+
},
|
|
120
|
+
[`.${prefix}-animate-scale-in`]: {
|
|
121
|
+
animation: `fd-scale-in var(--${prefix}-duration) var(--${prefix}-easing) forwards`
|
|
122
|
+
},
|
|
123
|
+
[`.${prefix}-animate-spotlight`]: {
|
|
124
|
+
animation: "fd-spotlight-glow 2s ease-in-out infinite"
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
},
|
|
128
|
+
config: {
|
|
129
|
+
theme: {
|
|
130
|
+
extend: {
|
|
131
|
+
colors: {
|
|
132
|
+
[prefix]: {
|
|
133
|
+
new: `var(--${prefix}-new)`,
|
|
134
|
+
"new-hover": `var(--${prefix}-new-hover)`,
|
|
135
|
+
dot: `var(--${prefix}-new-dot)`,
|
|
136
|
+
dismiss: `var(--${prefix}-dismiss)`,
|
|
137
|
+
success: `var(--${prefix}-success)`
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
exports.featureDropPlugin = featureDropPlugin;
|
|
147
|
+
//# sourceMappingURL=tailwind.cjs.map
|
|
148
|
+
//# sourceMappingURL=tailwind.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tailwind.ts"],"names":[],"mappings":"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","file":"tailwind.cjs","sourcesContent":["/**\n * FeatureDrop Tailwind CSS Plugin\n *\n * Registers design tokens, animations, and utility classes for FeatureDrop components.\n *\n * @example\n * ```ts\n * // tailwind.config.ts\n * import { featureDropPlugin } from 'featuredrop/tailwind'\n *\n * export default {\n * plugins: [featureDropPlugin()],\n * }\n * ```\n */\n\nexport interface FeatureDropPluginOptions {\n /** Prefix for utility classes (default: \"fd\") */\n prefix?: string;\n}\n\ntype CSSValue = string | Record<string, string>;\ntype CSSRuleBlock = Record<string, CSSValue>;\n\ninterface PluginAPI {\n addBase: (styles: Record<string, CSSRuleBlock>) => void;\n addUtilities: (utilities: Record<string, Record<string, string>>) => void;\n matchUtilities: (\n utilities: Record<string, (value: string) => Record<string, string>>,\n options?: { values: Record<string, string> }\n ) => void;\n theme: (path: string) => unknown;\n}\n\ninterface PluginCreator {\n (options?: FeatureDropPluginOptions): {\n handler: (api: PluginAPI) => void;\n config: Record<string, unknown>;\n };\n}\n\nexport const featureDropPlugin: PluginCreator = (options = {}) => {\n const prefix = options.prefix ?? \"fd\";\n\n return {\n handler({ addBase, addUtilities }) {\n // CSS custom properties for theming\n addBase({\n \":root\": {\n // Badge colors\n [`--${prefix}-new`]: \"#3b82f6\",\n [`--${prefix}-new-hover`]: \"#2563eb\",\n [`--${prefix}-new-dot`]: \"#ef4444\",\n [`--${prefix}-dismiss`]: \"#6b7280\",\n [`--${prefix}-success`]: \"#10b981\",\n\n // Changelog colors\n [`--${prefix}-changelog-bg`]: \"#ffffff\",\n [`--${prefix}-changelog-border`]: \"#e5e7eb\",\n [`--${prefix}-changelog-text`]: \"#111827\",\n [`--${prefix}-changelog-muted`]: \"#6b7280\",\n\n // Spotlight/overlay\n [`--${prefix}-overlay`]: \"rgba(0, 0, 0, 0.5)\",\n [`--${prefix}-spotlight-ring`]: \"#3b82f6\",\n\n // Tour\n [`--${prefix}-tour-bg`]: \"#ffffff\",\n [`--${prefix}-tour-shadow`]:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)\",\n\n // Transitions\n [`--${prefix}-duration`]: \"200ms\",\n [`--${prefix}-easing`]: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n // Dark mode overrides\n \".dark, [data-theme='dark']\": {\n [`--${prefix}-new`]: \"#60a5fa\",\n [`--${prefix}-new-hover`]: \"#93c5fd\",\n [`--${prefix}-changelog-bg`]: \"#1f2937\",\n [`--${prefix}-changelog-border`]: \"#374151\",\n [`--${prefix}-changelog-text`]: \"#f9fafb\",\n [`--${prefix}-changelog-muted`]: \"#9ca3af\",\n [`--${prefix}-tour-bg`]: \"#1f2937\",\n [`--${prefix}-tour-shadow`]:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)\",\n },\n // Keyframe animations\n \"@keyframes fd-pulse\": {\n \"0%, 100%\": { opacity: \"1\" },\n \"50%\": { opacity: \"0.5\" },\n },\n \"@keyframes fd-fade-in\": {\n from: { opacity: \"0\", transform: \"translateY(4px)\" },\n to: { opacity: \"1\", transform: \"translateY(0)\" },\n },\n \"@keyframes fd-slide-up\": {\n from: { opacity: \"0\", transform: \"translateY(8px)\" },\n to: { opacity: \"1\", transform: \"translateY(0)\" },\n },\n \"@keyframes fd-scale-in\": {\n from: { opacity: \"0\", transform: \"scale(0.95)\" },\n to: { opacity: \"1\", transform: \"scale(1)\" },\n },\n \"@keyframes fd-spotlight-glow\": {\n \"0%, 100%\": { boxShadow: `0 0 0 4px var(--${prefix}-spotlight-ring)` },\n \"50%\": { boxShadow: `0 0 0 8px var(--${prefix}-spotlight-ring)` },\n },\n // Reduced motion\n \"@media (prefers-reduced-motion: reduce)\": {\n \"*\": {\n \"animation-duration\": \"0.01ms !important\",\n \"animation-iteration-count\": \"1 !important\",\n },\n },\n });\n\n // Utility classes\n addUtilities({\n // Badge variants\n [`.${prefix}-badge`]: {\n display: \"inline-flex\",\n \"align-items\": \"center\",\n \"justify-content\": \"center\",\n \"font-size\": \"0.75rem\",\n \"font-weight\": \"500\",\n \"line-height\": \"1\",\n \"border-radius\": \"9999px\",\n \"background-color\": `var(--${prefix}-new)`,\n color: \"#ffffff\",\n \"padding-left\": \"0.5rem\",\n \"padding-right\": \"0.5rem\",\n \"padding-top\": \"0.125rem\",\n \"padding-bottom\": \"0.125rem\",\n },\n [`.${prefix}-badge-dot`]: {\n display: \"inline-block\",\n width: \"0.5rem\",\n height: \"0.5rem\",\n \"border-radius\": \"9999px\",\n \"background-color\": `var(--${prefix}-new-dot)`,\n },\n [`.${prefix}-badge-count`]: {\n display: \"inline-flex\",\n \"align-items\": \"center\",\n \"justify-content\": \"center\",\n \"min-width\": \"1.25rem\",\n height: \"1.25rem\",\n \"font-size\": \"0.6875rem\",\n \"font-weight\": \"600\",\n \"line-height\": \"1\",\n \"border-radius\": \"9999px\",\n \"background-color\": `var(--${prefix}-new-dot)`,\n color: \"#ffffff\",\n \"padding-left\": \"0.375rem\",\n \"padding-right\": \"0.375rem\",\n },\n // Animation utilities\n [`.${prefix}-animate-pulse`]: {\n animation: \"fd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n },\n [`.${prefix}-animate-fade-in`]: {\n animation: `fd-fade-in var(--${prefix}-duration) var(--${prefix}-easing) forwards`,\n },\n [`.${prefix}-animate-slide-up`]: {\n animation: `fd-slide-up var(--${prefix}-duration) var(--${prefix}-easing) forwards`,\n },\n [`.${prefix}-animate-scale-in`]: {\n animation: `fd-scale-in var(--${prefix}-duration) var(--${prefix}-easing) forwards`,\n },\n [`.${prefix}-animate-spotlight`]: {\n animation: \"fd-spotlight-glow 2s ease-in-out infinite\",\n },\n });\n },\n config: {\n theme: {\n extend: {\n colors: {\n [prefix]: {\n new: `var(--${prefix}-new)`,\n \"new-hover\": `var(--${prefix}-new-hover)`,\n dot: `var(--${prefix}-new-dot)`,\n dismiss: `var(--${prefix}-dismiss)`,\n success: `var(--${prefix}-success)`,\n },\n },\n },\n },\n },\n };\n};\n"]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FeatureDrop Tailwind CSS Plugin
|
|
3
|
+
*
|
|
4
|
+
* Registers design tokens, animations, and utility classes for FeatureDrop components.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```ts
|
|
8
|
+
* // tailwind.config.ts
|
|
9
|
+
* import { featureDropPlugin } from 'featuredrop/tailwind'
|
|
10
|
+
*
|
|
11
|
+
* export default {
|
|
12
|
+
* plugins: [featureDropPlugin()],
|
|
13
|
+
* }
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
interface FeatureDropPluginOptions {
|
|
17
|
+
/** Prefix for utility classes (default: "fd") */
|
|
18
|
+
prefix?: string;
|
|
19
|
+
}
|
|
20
|
+
type CSSValue = string | Record<string, string>;
|
|
21
|
+
type CSSRuleBlock = Record<string, CSSValue>;
|
|
22
|
+
interface PluginAPI {
|
|
23
|
+
addBase: (styles: Record<string, CSSRuleBlock>) => void;
|
|
24
|
+
addUtilities: (utilities: Record<string, Record<string, string>>) => void;
|
|
25
|
+
matchUtilities: (utilities: Record<string, (value: string) => Record<string, string>>, options?: {
|
|
26
|
+
values: Record<string, string>;
|
|
27
|
+
}) => void;
|
|
28
|
+
theme: (path: string) => unknown;
|
|
29
|
+
}
|
|
30
|
+
interface PluginCreator {
|
|
31
|
+
(options?: FeatureDropPluginOptions): {
|
|
32
|
+
handler: (api: PluginAPI) => void;
|
|
33
|
+
config: Record<string, unknown>;
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
declare const featureDropPlugin: PluginCreator;
|
|
37
|
+
|
|
38
|
+
export { type FeatureDropPluginOptions, featureDropPlugin };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FeatureDrop Tailwind CSS Plugin
|
|
3
|
+
*
|
|
4
|
+
* Registers design tokens, animations, and utility classes for FeatureDrop components.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```ts
|
|
8
|
+
* // tailwind.config.ts
|
|
9
|
+
* import { featureDropPlugin } from 'featuredrop/tailwind'
|
|
10
|
+
*
|
|
11
|
+
* export default {
|
|
12
|
+
* plugins: [featureDropPlugin()],
|
|
13
|
+
* }
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
interface FeatureDropPluginOptions {
|
|
17
|
+
/** Prefix for utility classes (default: "fd") */
|
|
18
|
+
prefix?: string;
|
|
19
|
+
}
|
|
20
|
+
type CSSValue = string | Record<string, string>;
|
|
21
|
+
type CSSRuleBlock = Record<string, CSSValue>;
|
|
22
|
+
interface PluginAPI {
|
|
23
|
+
addBase: (styles: Record<string, CSSRuleBlock>) => void;
|
|
24
|
+
addUtilities: (utilities: Record<string, Record<string, string>>) => void;
|
|
25
|
+
matchUtilities: (utilities: Record<string, (value: string) => Record<string, string>>, options?: {
|
|
26
|
+
values: Record<string, string>;
|
|
27
|
+
}) => void;
|
|
28
|
+
theme: (path: string) => unknown;
|
|
29
|
+
}
|
|
30
|
+
interface PluginCreator {
|
|
31
|
+
(options?: FeatureDropPluginOptions): {
|
|
32
|
+
handler: (api: PluginAPI) => void;
|
|
33
|
+
config: Record<string, unknown>;
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
declare const featureDropPlugin: PluginCreator;
|
|
37
|
+
|
|
38
|
+
export { type FeatureDropPluginOptions, featureDropPlugin };
|
package/dist/tailwind.js
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
// src/tailwind.ts
|
|
2
|
+
var featureDropPlugin = (options = {}) => {
|
|
3
|
+
const prefix = options.prefix ?? "fd";
|
|
4
|
+
return {
|
|
5
|
+
handler({ addBase, addUtilities }) {
|
|
6
|
+
addBase({
|
|
7
|
+
":root": {
|
|
8
|
+
// Badge colors
|
|
9
|
+
[`--${prefix}-new`]: "#3b82f6",
|
|
10
|
+
[`--${prefix}-new-hover`]: "#2563eb",
|
|
11
|
+
[`--${prefix}-new-dot`]: "#ef4444",
|
|
12
|
+
[`--${prefix}-dismiss`]: "#6b7280",
|
|
13
|
+
[`--${prefix}-success`]: "#10b981",
|
|
14
|
+
// Changelog colors
|
|
15
|
+
[`--${prefix}-changelog-bg`]: "#ffffff",
|
|
16
|
+
[`--${prefix}-changelog-border`]: "#e5e7eb",
|
|
17
|
+
[`--${prefix}-changelog-text`]: "#111827",
|
|
18
|
+
[`--${prefix}-changelog-muted`]: "#6b7280",
|
|
19
|
+
// Spotlight/overlay
|
|
20
|
+
[`--${prefix}-overlay`]: "rgba(0, 0, 0, 0.5)",
|
|
21
|
+
[`--${prefix}-spotlight-ring`]: "#3b82f6",
|
|
22
|
+
// Tour
|
|
23
|
+
[`--${prefix}-tour-bg`]: "#ffffff",
|
|
24
|
+
[`--${prefix}-tour-shadow`]: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
|
|
25
|
+
// Transitions
|
|
26
|
+
[`--${prefix}-duration`]: "200ms",
|
|
27
|
+
[`--${prefix}-easing`]: "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
28
|
+
},
|
|
29
|
+
// Dark mode overrides
|
|
30
|
+
".dark, [data-theme='dark']": {
|
|
31
|
+
[`--${prefix}-new`]: "#60a5fa",
|
|
32
|
+
[`--${prefix}-new-hover`]: "#93c5fd",
|
|
33
|
+
[`--${prefix}-changelog-bg`]: "#1f2937",
|
|
34
|
+
[`--${prefix}-changelog-border`]: "#374151",
|
|
35
|
+
[`--${prefix}-changelog-text`]: "#f9fafb",
|
|
36
|
+
[`--${prefix}-changelog-muted`]: "#9ca3af",
|
|
37
|
+
[`--${prefix}-tour-bg`]: "#1f2937",
|
|
38
|
+
[`--${prefix}-tour-shadow`]: "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)"
|
|
39
|
+
},
|
|
40
|
+
// Keyframe animations
|
|
41
|
+
"@keyframes fd-pulse": {
|
|
42
|
+
"0%, 100%": { opacity: "1" },
|
|
43
|
+
"50%": { opacity: "0.5" }
|
|
44
|
+
},
|
|
45
|
+
"@keyframes fd-fade-in": {
|
|
46
|
+
from: { opacity: "0", transform: "translateY(4px)" },
|
|
47
|
+
to: { opacity: "1", transform: "translateY(0)" }
|
|
48
|
+
},
|
|
49
|
+
"@keyframes fd-slide-up": {
|
|
50
|
+
from: { opacity: "0", transform: "translateY(8px)" },
|
|
51
|
+
to: { opacity: "1", transform: "translateY(0)" }
|
|
52
|
+
},
|
|
53
|
+
"@keyframes fd-scale-in": {
|
|
54
|
+
from: { opacity: "0", transform: "scale(0.95)" },
|
|
55
|
+
to: { opacity: "1", transform: "scale(1)" }
|
|
56
|
+
},
|
|
57
|
+
"@keyframes fd-spotlight-glow": {
|
|
58
|
+
"0%, 100%": { boxShadow: `0 0 0 4px var(--${prefix}-spotlight-ring)` },
|
|
59
|
+
"50%": { boxShadow: `0 0 0 8px var(--${prefix}-spotlight-ring)` }
|
|
60
|
+
},
|
|
61
|
+
// Reduced motion
|
|
62
|
+
"@media (prefers-reduced-motion: reduce)": {
|
|
63
|
+
"*": {
|
|
64
|
+
"animation-duration": "0.01ms !important",
|
|
65
|
+
"animation-iteration-count": "1 !important"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
addUtilities({
|
|
70
|
+
// Badge variants
|
|
71
|
+
[`.${prefix}-badge`]: {
|
|
72
|
+
display: "inline-flex",
|
|
73
|
+
"align-items": "center",
|
|
74
|
+
"justify-content": "center",
|
|
75
|
+
"font-size": "0.75rem",
|
|
76
|
+
"font-weight": "500",
|
|
77
|
+
"line-height": "1",
|
|
78
|
+
"border-radius": "9999px",
|
|
79
|
+
"background-color": `var(--${prefix}-new)`,
|
|
80
|
+
color: "#ffffff",
|
|
81
|
+
"padding-left": "0.5rem",
|
|
82
|
+
"padding-right": "0.5rem",
|
|
83
|
+
"padding-top": "0.125rem",
|
|
84
|
+
"padding-bottom": "0.125rem"
|
|
85
|
+
},
|
|
86
|
+
[`.${prefix}-badge-dot`]: {
|
|
87
|
+
display: "inline-block",
|
|
88
|
+
width: "0.5rem",
|
|
89
|
+
height: "0.5rem",
|
|
90
|
+
"border-radius": "9999px",
|
|
91
|
+
"background-color": `var(--${prefix}-new-dot)`
|
|
92
|
+
},
|
|
93
|
+
[`.${prefix}-badge-count`]: {
|
|
94
|
+
display: "inline-flex",
|
|
95
|
+
"align-items": "center",
|
|
96
|
+
"justify-content": "center",
|
|
97
|
+
"min-width": "1.25rem",
|
|
98
|
+
height: "1.25rem",
|
|
99
|
+
"font-size": "0.6875rem",
|
|
100
|
+
"font-weight": "600",
|
|
101
|
+
"line-height": "1",
|
|
102
|
+
"border-radius": "9999px",
|
|
103
|
+
"background-color": `var(--${prefix}-new-dot)`,
|
|
104
|
+
color: "#ffffff",
|
|
105
|
+
"padding-left": "0.375rem",
|
|
106
|
+
"padding-right": "0.375rem"
|
|
107
|
+
},
|
|
108
|
+
// Animation utilities
|
|
109
|
+
[`.${prefix}-animate-pulse`]: {
|
|
110
|
+
animation: "fd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
|
|
111
|
+
},
|
|
112
|
+
[`.${prefix}-animate-fade-in`]: {
|
|
113
|
+
animation: `fd-fade-in var(--${prefix}-duration) var(--${prefix}-easing) forwards`
|
|
114
|
+
},
|
|
115
|
+
[`.${prefix}-animate-slide-up`]: {
|
|
116
|
+
animation: `fd-slide-up var(--${prefix}-duration) var(--${prefix}-easing) forwards`
|
|
117
|
+
},
|
|
118
|
+
[`.${prefix}-animate-scale-in`]: {
|
|
119
|
+
animation: `fd-scale-in var(--${prefix}-duration) var(--${prefix}-easing) forwards`
|
|
120
|
+
},
|
|
121
|
+
[`.${prefix}-animate-spotlight`]: {
|
|
122
|
+
animation: "fd-spotlight-glow 2s ease-in-out infinite"
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
},
|
|
126
|
+
config: {
|
|
127
|
+
theme: {
|
|
128
|
+
extend: {
|
|
129
|
+
colors: {
|
|
130
|
+
[prefix]: {
|
|
131
|
+
new: `var(--${prefix}-new)`,
|
|
132
|
+
"new-hover": `var(--${prefix}-new-hover)`,
|
|
133
|
+
dot: `var(--${prefix}-new-dot)`,
|
|
134
|
+
dismiss: `var(--${prefix}-dismiss)`,
|
|
135
|
+
success: `var(--${prefix}-success)`
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
export { featureDropPlugin };
|
|
145
|
+
//# sourceMappingURL=tailwind.js.map
|
|
146
|
+
//# sourceMappingURL=tailwind.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tailwind.ts"],"names":[],"mappings":"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","file":"tailwind.js","sourcesContent":["/**\n * FeatureDrop Tailwind CSS Plugin\n *\n * Registers design tokens, animations, and utility classes for FeatureDrop components.\n *\n * @example\n * ```ts\n * // tailwind.config.ts\n * import { featureDropPlugin } from 'featuredrop/tailwind'\n *\n * export default {\n * plugins: [featureDropPlugin()],\n * }\n * ```\n */\n\nexport interface FeatureDropPluginOptions {\n /** Prefix for utility classes (default: \"fd\") */\n prefix?: string;\n}\n\ntype CSSValue = string | Record<string, string>;\ntype CSSRuleBlock = Record<string, CSSValue>;\n\ninterface PluginAPI {\n addBase: (styles: Record<string, CSSRuleBlock>) => void;\n addUtilities: (utilities: Record<string, Record<string, string>>) => void;\n matchUtilities: (\n utilities: Record<string, (value: string) => Record<string, string>>,\n options?: { values: Record<string, string> }\n ) => void;\n theme: (path: string) => unknown;\n}\n\ninterface PluginCreator {\n (options?: FeatureDropPluginOptions): {\n handler: (api: PluginAPI) => void;\n config: Record<string, unknown>;\n };\n}\n\nexport const featureDropPlugin: PluginCreator = (options = {}) => {\n const prefix = options.prefix ?? \"fd\";\n\n return {\n handler({ addBase, addUtilities }) {\n // CSS custom properties for theming\n addBase({\n \":root\": {\n // Badge colors\n [`--${prefix}-new`]: \"#3b82f6\",\n [`--${prefix}-new-hover`]: \"#2563eb\",\n [`--${prefix}-new-dot`]: \"#ef4444\",\n [`--${prefix}-dismiss`]: \"#6b7280\",\n [`--${prefix}-success`]: \"#10b981\",\n\n // Changelog colors\n [`--${prefix}-changelog-bg`]: \"#ffffff\",\n [`--${prefix}-changelog-border`]: \"#e5e7eb\",\n [`--${prefix}-changelog-text`]: \"#111827\",\n [`--${prefix}-changelog-muted`]: \"#6b7280\",\n\n // Spotlight/overlay\n [`--${prefix}-overlay`]: \"rgba(0, 0, 0, 0.5)\",\n [`--${prefix}-spotlight-ring`]: \"#3b82f6\",\n\n // Tour\n [`--${prefix}-tour-bg`]: \"#ffffff\",\n [`--${prefix}-tour-shadow`]:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)\",\n\n // Transitions\n [`--${prefix}-duration`]: \"200ms\",\n [`--${prefix}-easing`]: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n // Dark mode overrides\n \".dark, [data-theme='dark']\": {\n [`--${prefix}-new`]: \"#60a5fa\",\n [`--${prefix}-new-hover`]: \"#93c5fd\",\n [`--${prefix}-changelog-bg`]: \"#1f2937\",\n [`--${prefix}-changelog-border`]: \"#374151\",\n [`--${prefix}-changelog-text`]: \"#f9fafb\",\n [`--${prefix}-changelog-muted`]: \"#9ca3af\",\n [`--${prefix}-tour-bg`]: \"#1f2937\",\n [`--${prefix}-tour-shadow`]:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)\",\n },\n // Keyframe animations\n \"@keyframes fd-pulse\": {\n \"0%, 100%\": { opacity: \"1\" },\n \"50%\": { opacity: \"0.5\" },\n },\n \"@keyframes fd-fade-in\": {\n from: { opacity: \"0\", transform: \"translateY(4px)\" },\n to: { opacity: \"1\", transform: \"translateY(0)\" },\n },\n \"@keyframes fd-slide-up\": {\n from: { opacity: \"0\", transform: \"translateY(8px)\" },\n to: { opacity: \"1\", transform: \"translateY(0)\" },\n },\n \"@keyframes fd-scale-in\": {\n from: { opacity: \"0\", transform: \"scale(0.95)\" },\n to: { opacity: \"1\", transform: \"scale(1)\" },\n },\n \"@keyframes fd-spotlight-glow\": {\n \"0%, 100%\": { boxShadow: `0 0 0 4px var(--${prefix}-spotlight-ring)` },\n \"50%\": { boxShadow: `0 0 0 8px var(--${prefix}-spotlight-ring)` },\n },\n // Reduced motion\n \"@media (prefers-reduced-motion: reduce)\": {\n \"*\": {\n \"animation-duration\": \"0.01ms !important\",\n \"animation-iteration-count\": \"1 !important\",\n },\n },\n });\n\n // Utility classes\n addUtilities({\n // Badge variants\n [`.${prefix}-badge`]: {\n display: \"inline-flex\",\n \"align-items\": \"center\",\n \"justify-content\": \"center\",\n \"font-size\": \"0.75rem\",\n \"font-weight\": \"500\",\n \"line-height\": \"1\",\n \"border-radius\": \"9999px\",\n \"background-color\": `var(--${prefix}-new)`,\n color: \"#ffffff\",\n \"padding-left\": \"0.5rem\",\n \"padding-right\": \"0.5rem\",\n \"padding-top\": \"0.125rem\",\n \"padding-bottom\": \"0.125rem\",\n },\n [`.${prefix}-badge-dot`]: {\n display: \"inline-block\",\n width: \"0.5rem\",\n height: \"0.5rem\",\n \"border-radius\": \"9999px\",\n \"background-color\": `var(--${prefix}-new-dot)`,\n },\n [`.${prefix}-badge-count`]: {\n display: \"inline-flex\",\n \"align-items\": \"center\",\n \"justify-content\": \"center\",\n \"min-width\": \"1.25rem\",\n height: \"1.25rem\",\n \"font-size\": \"0.6875rem\",\n \"font-weight\": \"600\",\n \"line-height\": \"1\",\n \"border-radius\": \"9999px\",\n \"background-color\": `var(--${prefix}-new-dot)`,\n color: \"#ffffff\",\n \"padding-left\": \"0.375rem\",\n \"padding-right\": \"0.375rem\",\n },\n // Animation utilities\n [`.${prefix}-animate-pulse`]: {\n animation: \"fd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n },\n [`.${prefix}-animate-fade-in`]: {\n animation: `fd-fade-in var(--${prefix}-duration) var(--${prefix}-easing) forwards`,\n },\n [`.${prefix}-animate-slide-up`]: {\n animation: `fd-slide-up var(--${prefix}-duration) var(--${prefix}-easing) forwards`,\n },\n [`.${prefix}-animate-scale-in`]: {\n animation: `fd-scale-in var(--${prefix}-duration) var(--${prefix}-easing) forwards`,\n },\n [`.${prefix}-animate-spotlight`]: {\n animation: \"fd-spotlight-glow 2s ease-in-out infinite\",\n },\n });\n },\n config: {\n theme: {\n extend: {\n colors: {\n [prefix]: {\n new: `var(--${prefix}-new)`,\n \"new-hover\": `var(--${prefix}-new-hover)`,\n dot: `var(--${prefix}-new-dot)`,\n dismiss: `var(--${prefix}-dismiss)`,\n success: `var(--${prefix}-success)`,\n },\n },\n },\n },\n },\n };\n};\n"]}
|
package/dist/testing.cjs
CHANGED
|
@@ -984,6 +984,7 @@ function FeatureDropProvider({
|
|
|
984
984
|
locale = "en",
|
|
985
985
|
animation = "normal",
|
|
986
986
|
translations: translationOverrides,
|
|
987
|
+
engine,
|
|
987
988
|
children
|
|
988
989
|
}) {
|
|
989
990
|
const analyticsRef = react.useRef(analytics);
|
|
@@ -1040,20 +1041,20 @@ function FeatureDropProvider({
|
|
|
1040
1041
|
seenFeatureIds: readIdSet(SEEN_FEATURES_STORAGE_KEY),
|
|
1041
1042
|
clickedFeatureIds: readIdSet(CLICKED_FEATURES_STORAGE_KEY),
|
|
1042
1043
|
triggerContext: (() => {
|
|
1043
|
-
const
|
|
1044
|
-
if (!
|
|
1045
|
-
|
|
1046
|
-
return
|
|
1044
|
+
const engine2 = triggerEngineRef.current;
|
|
1045
|
+
if (!engine2) return void 0;
|
|
1046
|
+
engine2.setElapsedMs(Date.now() - sessionStartedAtRef.current);
|
|
1047
|
+
return engine2.getContext();
|
|
1047
1048
|
})(),
|
|
1048
1049
|
flagBridge
|
|
1049
1050
|
})
|
|
1050
1051
|
);
|
|
1051
1052
|
const recompute = react.useCallback(() => {
|
|
1052
|
-
const
|
|
1053
|
+
const engine2 = triggerEngineRef.current;
|
|
1053
1054
|
let triggerContext;
|
|
1054
|
-
if (
|
|
1055
|
-
|
|
1056
|
-
triggerContext =
|
|
1055
|
+
if (engine2) {
|
|
1056
|
+
engine2.setElapsedMs(Date.now() - sessionStartedAtRef.current);
|
|
1057
|
+
triggerContext = engine2.getContext();
|
|
1057
1058
|
}
|
|
1058
1059
|
setFeatureState(
|
|
1059
1060
|
computeFeatureState({
|
|
@@ -1090,6 +1091,12 @@ function FeatureDropProvider({
|
|
|
1090
1091
|
react.useEffect(() => {
|
|
1091
1092
|
recompute();
|
|
1092
1093
|
}, [recompute]);
|
|
1094
|
+
react.useEffect(() => {
|
|
1095
|
+
engine?.initialize?.();
|
|
1096
|
+
return () => {
|
|
1097
|
+
engine?.destroy?.();
|
|
1098
|
+
};
|
|
1099
|
+
}, [engine]);
|
|
1093
1100
|
const hasTimeTriggers = react.useMemo(
|
|
1094
1101
|
() => resolvedManifest.some((feature) => feature.trigger?.type === "time"),
|
|
1095
1102
|
[resolvedManifest]
|
|
@@ -1372,7 +1379,8 @@ function FeatureDropProvider({
|
|
|
1372
1379
|
trackUsageEvent,
|
|
1373
1380
|
trackTriggerEvent,
|
|
1374
1381
|
trackMilestone,
|
|
1375
|
-
setTriggerPath
|
|
1382
|
+
setTriggerPath,
|
|
1383
|
+
engine: engine ?? null
|
|
1376
1384
|
}),
|
|
1377
1385
|
[
|
|
1378
1386
|
resolvedManifest,
|
|
@@ -1406,7 +1414,8 @@ function FeatureDropProvider({
|
|
|
1406
1414
|
trackUsageEvent,
|
|
1407
1415
|
trackTriggerEvent,
|
|
1408
1416
|
trackMilestone,
|
|
1409
|
-
setTriggerPath
|
|
1417
|
+
setTriggerPath,
|
|
1418
|
+
engine
|
|
1410
1419
|
]
|
|
1411
1420
|
);
|
|
1412
1421
|
return /* @__PURE__ */ jsxRuntime.jsx(FeatureDropContext.Provider, { value, children });
|