@crm-dance/studio-kit 0.1.3
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 +88 -0
- package/dist/index.cjs +203 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.mts +33 -0
- package/dist/index.d.ts +33 -0
- package/dist/index.mjs +175 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +57 -0
package/README.md
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# CRM Dance Studio Kit
|
|
2
|
+
|
|
3
|
+
Shared CRM Dance components. Right now it ships the **ProviderCredit** attribution block used across client sites; future shared UI, analytics helpers, or scripts will also live here so every project stays in sync.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @crm-dance/studio-kit
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @crm-dance/studio-kit
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage (ProviderCredit)
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { ProviderCredit, CRM_DANCE_PROVIDER } from "@crm-dance/studio-kit"
|
|
17
|
+
|
|
18
|
+
export function Footer() {
|
|
19
|
+
return (
|
|
20
|
+
<footer>
|
|
21
|
+
{/* existing footer */}
|
|
22
|
+
<ProviderCredit />
|
|
23
|
+
</footer>
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Override copy, tracking, or palette as needed while reusing the shared metadata:
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
const PROVIDER_COLORS = {
|
|
32
|
+
panel: "#1F1B24",
|
|
33
|
+
border: "rgba(181, 164, 106, 0.2)",
|
|
34
|
+
ink: "#F7F1E8",
|
|
35
|
+
inkSoft: "#D8CDB6",
|
|
36
|
+
ctaBorder: "rgba(181, 164, 106, 0.4)",
|
|
37
|
+
ctaHover: "rgba(181, 164, 106, 0.12)",
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
<ProviderCredit
|
|
41
|
+
providerName={CRM_DANCE_PROVIDER.name}
|
|
42
|
+
logoSrc={CRM_DANCE_PROVIDER.logoSrc}
|
|
43
|
+
href={`${CRM_DANCE_PROVIDER.url}/?utm_source=my-site&utm_medium=footer`}
|
|
44
|
+
description="Custom positioning statement"
|
|
45
|
+
visitLabel="Meet CRM Dance"
|
|
46
|
+
colors={PROVIDER_COLORS}
|
|
47
|
+
/>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Color system
|
|
51
|
+
|
|
52
|
+
`colors` maps to CSS variables so each client can blend the block with their footer.
|
|
53
|
+
|
|
54
|
+
| Prop | CSS var | Purpose |
|
|
55
|
+
| --- | --- | --- |
|
|
56
|
+
| `panel` | `--crm-panel` | Block background |
|
|
57
|
+
| `border` | `--crm-border` | Top separator line |
|
|
58
|
+
| `ink` | `--crm-ink` | Headline/CTA text |
|
|
59
|
+
| `inkSoft` | `--crm-ink-soft` | Body text & eyebrow |
|
|
60
|
+
| `ctaBorder` | `--crm-cta-border` | CTA outline |
|
|
61
|
+
| `ctaHover` | `--crm-cta-hover` | CTA hover background |
|
|
62
|
+
|
|
63
|
+
Defaults are pure white/black so the block looks acceptable without overrides. Magic of Dance and Chevy Chase Ballroom both pass custom palettes (see those repos for examples).
|
|
64
|
+
|
|
65
|
+
## Development
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
pnpm install
|
|
69
|
+
pnpm lint
|
|
70
|
+
pnpm typecheck
|
|
71
|
+
pnpm build
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
You can also `pnpm dev --filter=<client>` after linking, but in practice we release new versions quickly instead of local linking.
|
|
75
|
+
|
|
76
|
+
### Release Playbook
|
|
77
|
+
|
|
78
|
+
1. Implement changes + update README/examples.
|
|
79
|
+
2. `pnpm lint && pnpm typecheck && pnpm build`.
|
|
80
|
+
3. `pnpm version <patch|minor|major>`.
|
|
81
|
+
4. `git push origin main --follow-tags`.
|
|
82
|
+
5. `pnpm publish`.
|
|
83
|
+
6. In consuming repos: `pnpm update @crm-dance/studio-kit` and adjust props/colors as needed.
|
|
84
|
+
|
|
85
|
+
### Troubleshooting
|
|
86
|
+
|
|
87
|
+
- **Colors look off**: inspect the rendered element, verify the CSS variables are being set via the `colors` prop, and that surrounding CSS isn't overriding them.
|
|
88
|
+
- **Need another shared component**: add it under `src/components`, export through `src/index.ts`, document props + usage here, then follow the release steps above.
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
CRM_DANCE_PROVIDER: () => CRM_DANCE_PROVIDER,
|
|
24
|
+
ProviderCredit: () => ProviderCredit
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(index_exports);
|
|
27
|
+
|
|
28
|
+
// src/provider.ts
|
|
29
|
+
var CRM_DANCE_PROVIDER = {
|
|
30
|
+
name: "CRM Dance",
|
|
31
|
+
url: "https://crm.dance",
|
|
32
|
+
logoSrc: "https://crm.dance/logo/logo-256.jpg",
|
|
33
|
+
href: "https://crm.dance/?utm_source=client-site&utm_medium=footer-credit&utm_campaign=studio-kit",
|
|
34
|
+
description: "The operating system for modern dance studios \u2014 scheduling, attendance, payments, reporting, and studio-ready terminals.",
|
|
35
|
+
visitLabel: "Visit CRM Dance",
|
|
36
|
+
ariaLabel: "Powered by CRM Dance"
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
// src/components/ProviderCredit.tsx
|
|
40
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
|
+
var DEFAULTS = {
|
|
42
|
+
providerName: CRM_DANCE_PROVIDER.name,
|
|
43
|
+
logoSrc: CRM_DANCE_PROVIDER.logoSrc,
|
|
44
|
+
href: CRM_DANCE_PROVIDER.href,
|
|
45
|
+
description: CRM_DANCE_PROVIDER.description,
|
|
46
|
+
visitLabel: CRM_DANCE_PROVIDER.visitLabel,
|
|
47
|
+
ariaLabel: CRM_DANCE_PROVIDER.ariaLabel
|
|
48
|
+
};
|
|
49
|
+
var DEFAULT_COLORS = {
|
|
50
|
+
panel: "#ffffff",
|
|
51
|
+
border: "rgba(0, 0, 0, 0.08)",
|
|
52
|
+
ink: "#000000",
|
|
53
|
+
inkSoft: "#1f1f1f",
|
|
54
|
+
ctaBorder: "rgba(0, 0, 0, 0.25)",
|
|
55
|
+
ctaHover: "rgba(0, 0, 0, 0.08)"
|
|
56
|
+
};
|
|
57
|
+
var CSS_VAR_MAP = {
|
|
58
|
+
panel: "--crm-panel",
|
|
59
|
+
border: "--crm-border",
|
|
60
|
+
ink: "--crm-ink",
|
|
61
|
+
inkSoft: "--crm-ink-soft",
|
|
62
|
+
ctaBorder: "--crm-cta-border",
|
|
63
|
+
ctaHover: "--crm-cta-hover"
|
|
64
|
+
};
|
|
65
|
+
var COLOR_KEYS = ["panel", "border", "ink", "inkSoft", "ctaBorder", "ctaHover"];
|
|
66
|
+
function ProviderCredit({
|
|
67
|
+
providerName = DEFAULTS.providerName,
|
|
68
|
+
logoSrc = DEFAULTS.logoSrc,
|
|
69
|
+
href = DEFAULTS.href,
|
|
70
|
+
description = DEFAULTS.description,
|
|
71
|
+
visitLabel = DEFAULTS.visitLabel,
|
|
72
|
+
ariaLabel = DEFAULTS.ariaLabel,
|
|
73
|
+
colors,
|
|
74
|
+
className,
|
|
75
|
+
...rest
|
|
76
|
+
}) {
|
|
77
|
+
const containerClassName = ["crm-dance-credit", className].filter(Boolean).join(" ");
|
|
78
|
+
const { style, ...restProps } = rest;
|
|
79
|
+
const mergedColors = { ...DEFAULT_COLORS, ...colors };
|
|
80
|
+
const cssVars = COLOR_KEYS.reduce((acc, key) => {
|
|
81
|
+
acc[CSS_VAR_MAP[key]] = mergedColors[key];
|
|
82
|
+
return acc;
|
|
83
|
+
}, {});
|
|
84
|
+
const mergedStyle = {
|
|
85
|
+
...cssVars,
|
|
86
|
+
...style != null ? style : {}
|
|
87
|
+
};
|
|
88
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: containerClassName, "aria-label": ariaLabel, style: mergedStyle, ...restProps, children: [
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
|
|
90
|
+
.crm-dance-credit {
|
|
91
|
+
border-top: 1px solid var(--crm-border, rgba(0, 0, 0, 0.08));
|
|
92
|
+
background-color: var(--crm-panel, #ffffff);
|
|
93
|
+
padding: 16px 20px 48px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@media (min-width: 768px) {
|
|
97
|
+
.crm-dance-credit {
|
|
98
|
+
padding: 20px 24px 64px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.crm-dance-credit__inner {
|
|
103
|
+
max-width: 58rem;
|
|
104
|
+
margin: 0 auto;
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-direction: column;
|
|
107
|
+
gap: 16px;
|
|
108
|
+
color: var(--crm-ink-soft, #1f1f1f);
|
|
109
|
+
font-family: inherit;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.crm-dance-credit__header {
|
|
113
|
+
display: flex;
|
|
114
|
+
align-items: center;
|
|
115
|
+
gap: 16px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@media (min-width: 768px) {
|
|
119
|
+
.crm-dance-credit__header {
|
|
120
|
+
gap: 24px;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.crm-dance-credit__logo {
|
|
125
|
+
width: 64px;
|
|
126
|
+
height: 64px;
|
|
127
|
+
border-radius: 18px;
|
|
128
|
+
border: 1px solid rgba(0, 0, 0, 0.4);
|
|
129
|
+
background-color: #fff;
|
|
130
|
+
padding: 8px;
|
|
131
|
+
object-fit: contain;
|
|
132
|
+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.crm-dance-credit__meta {
|
|
136
|
+
display: flex;
|
|
137
|
+
flex-direction: column;
|
|
138
|
+
gap: 4px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.crm-dance-credit__eyebrow {
|
|
142
|
+
font-size: 0.7rem;
|
|
143
|
+
letter-spacing: 0.2em;
|
|
144
|
+
text-transform: uppercase;
|
|
145
|
+
font-weight: 600;
|
|
146
|
+
color: var(--crm-ink-soft, #4a3f37);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.crm-dance-credit__name {
|
|
150
|
+
font-size: 1.125rem;
|
|
151
|
+
font-weight: 600;
|
|
152
|
+
color: var(--crm-ink, #000000);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.crm-dance-credit__cta {
|
|
156
|
+
display: inline-flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
gap: 8px;
|
|
159
|
+
align-self: flex-start;
|
|
160
|
+
border-radius: 999px;
|
|
161
|
+
border: 1px solid var(--crm-cta-border, rgba(0, 0, 0, 0.25));
|
|
162
|
+
padding: 8px 18px;
|
|
163
|
+
font-weight: 600;
|
|
164
|
+
font-size: 0.95rem;
|
|
165
|
+
color: var(--crm-ink, #000000);
|
|
166
|
+
text-decoration: none;
|
|
167
|
+
transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.crm-dance-credit__cta:hover,
|
|
171
|
+
.crm-dance-credit__cta:focus-visible {
|
|
172
|
+
border-color: var(--crm-cta-border, rgba(0, 0, 0, 0.25));
|
|
173
|
+
background-color: var(--crm-cta-hover, rgba(0, 0, 0, 0.08));
|
|
174
|
+
transform: translateY(-1px);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.crm-dance-credit__cta:focus-visible {
|
|
178
|
+
outline: 2px solid var(--crm-ink, #000000);
|
|
179
|
+
outline-offset: 3px;
|
|
180
|
+
}
|
|
181
|
+
` }),
|
|
182
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "crm-dance-credit__inner", children: [
|
|
183
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "crm-dance-credit__header", children: [
|
|
184
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: "crm-dance-credit__logo", src: logoSrc, alt: `${providerName} logo`, loading: "lazy" }),
|
|
185
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "crm-dance-credit__meta", children: [
|
|
186
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "crm-dance-credit__eyebrow", children: "Built by" }),
|
|
187
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "crm-dance-credit__name", children: providerName }),
|
|
188
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description })
|
|
189
|
+
] })
|
|
190
|
+
] }),
|
|
191
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { className: "crm-dance-credit__cta", href, target: "_blank", rel: "noopener noreferrer", children: [
|
|
192
|
+
visitLabel,
|
|
193
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2192" })
|
|
194
|
+
] })
|
|
195
|
+
] })
|
|
196
|
+
] });
|
|
197
|
+
}
|
|
198
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
199
|
+
0 && (module.exports = {
|
|
200
|
+
CRM_DANCE_PROVIDER,
|
|
201
|
+
ProviderCredit
|
|
202
|
+
});
|
|
203
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/provider.ts","../src/components/ProviderCredit.tsx"],"sourcesContent":["export { ProviderCredit } from \"./components/ProviderCredit\"\nexport type { ProviderCreditProps, ProviderCreditColors } from \"./components/ProviderCredit\"\nexport { CRM_DANCE_PROVIDER } from \"./provider\"\n","export const CRM_DANCE_PROVIDER = {\n name: \"CRM Dance\",\n url: \"https://crm.dance\",\n logoSrc: \"https://crm.dance/logo/logo-256.jpg\",\n href: \"https://crm.dance/?utm_source=client-site&utm_medium=footer-credit&utm_campaign=studio-kit\",\n description:\n \"The operating system for modern dance studios — scheduling, attendance, payments, reporting, and studio-ready terminals.\",\n visitLabel: \"Visit CRM Dance\",\n ariaLabel: \"Powered by CRM Dance\",\n} as const\n","import type { CSSProperties, HTMLAttributes } from \"react\"\nimport { CRM_DANCE_PROVIDER } from \"../provider\"\n\nexport type ProviderCreditColors = {\n panel: string\n border: string\n ink: string\n inkSoft: string\n ctaBorder: string\n ctaHover: string\n}\n\nexport type ProviderCreditProps = HTMLAttributes<HTMLElement> & {\n providerName?: string\n logoSrc?: string\n href?: string\n description?: string\n visitLabel?: string\n ariaLabel?: string\n colors?: Partial<ProviderCreditColors>\n}\n\nconst DEFAULTS = {\n providerName: CRM_DANCE_PROVIDER.name,\n logoSrc: CRM_DANCE_PROVIDER.logoSrc,\n href: CRM_DANCE_PROVIDER.href,\n description: CRM_DANCE_PROVIDER.description,\n visitLabel: CRM_DANCE_PROVIDER.visitLabel,\n ariaLabel: CRM_DANCE_PROVIDER.ariaLabel,\n}\n\nconst DEFAULT_COLORS: ProviderCreditColors = {\n panel: \"#ffffff\",\n border: \"rgba(0, 0, 0, 0.08)\",\n ink: \"#000000\",\n inkSoft: \"#1f1f1f\",\n ctaBorder: \"rgba(0, 0, 0, 0.25)\",\n ctaHover: \"rgba(0, 0, 0, 0.08)\",\n}\n\nconst CSS_VAR_MAP: Record<keyof ProviderCreditColors, string> = {\n panel: \"--crm-panel\",\n border: \"--crm-border\",\n ink: \"--crm-ink\",\n inkSoft: \"--crm-ink-soft\",\n ctaBorder: \"--crm-cta-border\",\n ctaHover: \"--crm-cta-hover\",\n}\n\nconst COLOR_KEYS: Array<keyof ProviderCreditColors> = [\"panel\", \"border\", \"ink\", \"inkSoft\", \"ctaBorder\", \"ctaHover\"]\n\nexport function ProviderCredit({\n providerName = DEFAULTS.providerName,\n logoSrc = DEFAULTS.logoSrc,\n href = DEFAULTS.href,\n description = DEFAULTS.description,\n visitLabel = DEFAULTS.visitLabel,\n ariaLabel = DEFAULTS.ariaLabel,\n colors,\n className,\n ...rest\n}: ProviderCreditProps) {\n const containerClassName = [\"crm-dance-credit\", className].filter(Boolean).join(\" \")\n const { style, ...restProps } = rest\n const mergedColors = { ...DEFAULT_COLORS, ...colors }\n const cssVars = COLOR_KEYS.reduce<Record<string, string>>((acc, key) => {\n acc[CSS_VAR_MAP[key]] = mergedColors[key]\n return acc\n }, {})\n const mergedStyle: CSSProperties = {\n ...cssVars,\n ...(style ?? {}),\n }\n\n return (\n <section className={containerClassName} aria-label={ariaLabel} style={mergedStyle} {...restProps}>\n <style>\n {`\n .crm-dance-credit {\n border-top: 1px solid var(--crm-border, rgba(0, 0, 0, 0.08));\n background-color: var(--crm-panel, #ffffff);\n padding: 16px 20px 48px;\n }\n\n @media (min-width: 768px) {\n .crm-dance-credit {\n padding: 20px 24px 64px;\n }\n }\n\n .crm-dance-credit__inner {\n max-width: 58rem;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n color: var(--crm-ink-soft, #1f1f1f);\n font-family: inherit;\n }\n\n .crm-dance-credit__header {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n @media (min-width: 768px) {\n .crm-dance-credit__header {\n gap: 24px;\n }\n }\n\n .crm-dance-credit__logo {\n width: 64px;\n height: 64px;\n border-radius: 18px;\n border: 1px solid rgba(0, 0, 0, 0.4);\n background-color: #fff;\n padding: 8px;\n object-fit: contain;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);\n }\n\n .crm-dance-credit__meta {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .crm-dance-credit__eyebrow {\n font-size: 0.7rem;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n font-weight: 600;\n color: var(--crm-ink-soft, #4a3f37);\n }\n\n .crm-dance-credit__name {\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--crm-ink, #000000);\n }\n\n .crm-dance-credit__cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n align-self: flex-start;\n border-radius: 999px;\n border: 1px solid var(--crm-cta-border, rgba(0, 0, 0, 0.25));\n padding: 8px 18px;\n font-weight: 600;\n font-size: 0.95rem;\n color: var(--crm-ink, #000000);\n text-decoration: none;\n transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;\n }\n\n .crm-dance-credit__cta:hover,\n .crm-dance-credit__cta:focus-visible {\n border-color: var(--crm-cta-border, rgba(0, 0, 0, 0.25));\n background-color: var(--crm-cta-hover, rgba(0, 0, 0, 0.08));\n transform: translateY(-1px);\n }\n\n .crm-dance-credit__cta:focus-visible {\n outline: 2px solid var(--crm-ink, #000000);\n outline-offset: 3px;\n }\n `}\n </style>\n <div className=\"crm-dance-credit__inner\">\n <div className=\"crm-dance-credit__header\">\n <img className=\"crm-dance-credit__logo\" src={logoSrc} alt={`${providerName} logo`} loading=\"lazy\" />\n <div className=\"crm-dance-credit__meta\">\n <span className=\"crm-dance-credit__eyebrow\">Built by</span>\n <span className=\"crm-dance-credit__name\">{providerName}</span>\n <p>{description}</p>\n </div>\n </div>\n <a className=\"crm-dance-credit__cta\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n {visitLabel}\n <span aria-hidden=\"true\">→</span>\n </a>\n </div>\n </section>\n )\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type ProviderCreditColors = {
|
|
5
|
+
panel: string;
|
|
6
|
+
border: string;
|
|
7
|
+
ink: string;
|
|
8
|
+
inkSoft: string;
|
|
9
|
+
ctaBorder: string;
|
|
10
|
+
ctaHover: string;
|
|
11
|
+
};
|
|
12
|
+
type ProviderCreditProps = HTMLAttributes<HTMLElement> & {
|
|
13
|
+
providerName?: string;
|
|
14
|
+
logoSrc?: string;
|
|
15
|
+
href?: string;
|
|
16
|
+
description?: string;
|
|
17
|
+
visitLabel?: string;
|
|
18
|
+
ariaLabel?: string;
|
|
19
|
+
colors?: Partial<ProviderCreditColors>;
|
|
20
|
+
};
|
|
21
|
+
declare function ProviderCredit({ providerName, logoSrc, href, description, visitLabel, ariaLabel, colors, className, ...rest }: ProviderCreditProps): react_jsx_runtime.JSX.Element;
|
|
22
|
+
|
|
23
|
+
declare const CRM_DANCE_PROVIDER: {
|
|
24
|
+
readonly name: "CRM Dance";
|
|
25
|
+
readonly url: "https://crm.dance";
|
|
26
|
+
readonly logoSrc: "https://crm.dance/logo/logo-256.jpg";
|
|
27
|
+
readonly href: "https://crm.dance/?utm_source=client-site&utm_medium=footer-credit&utm_campaign=studio-kit";
|
|
28
|
+
readonly description: "The operating system for modern dance studios — scheduling, attendance, payments, reporting, and studio-ready terminals.";
|
|
29
|
+
readonly visitLabel: "Visit CRM Dance";
|
|
30
|
+
readonly ariaLabel: "Powered by CRM Dance";
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export { CRM_DANCE_PROVIDER, ProviderCredit, type ProviderCreditColors, type ProviderCreditProps };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type ProviderCreditColors = {
|
|
5
|
+
panel: string;
|
|
6
|
+
border: string;
|
|
7
|
+
ink: string;
|
|
8
|
+
inkSoft: string;
|
|
9
|
+
ctaBorder: string;
|
|
10
|
+
ctaHover: string;
|
|
11
|
+
};
|
|
12
|
+
type ProviderCreditProps = HTMLAttributes<HTMLElement> & {
|
|
13
|
+
providerName?: string;
|
|
14
|
+
logoSrc?: string;
|
|
15
|
+
href?: string;
|
|
16
|
+
description?: string;
|
|
17
|
+
visitLabel?: string;
|
|
18
|
+
ariaLabel?: string;
|
|
19
|
+
colors?: Partial<ProviderCreditColors>;
|
|
20
|
+
};
|
|
21
|
+
declare function ProviderCredit({ providerName, logoSrc, href, description, visitLabel, ariaLabel, colors, className, ...rest }: ProviderCreditProps): react_jsx_runtime.JSX.Element;
|
|
22
|
+
|
|
23
|
+
declare const CRM_DANCE_PROVIDER: {
|
|
24
|
+
readonly name: "CRM Dance";
|
|
25
|
+
readonly url: "https://crm.dance";
|
|
26
|
+
readonly logoSrc: "https://crm.dance/logo/logo-256.jpg";
|
|
27
|
+
readonly href: "https://crm.dance/?utm_source=client-site&utm_medium=footer-credit&utm_campaign=studio-kit";
|
|
28
|
+
readonly description: "The operating system for modern dance studios — scheduling, attendance, payments, reporting, and studio-ready terminals.";
|
|
29
|
+
readonly visitLabel: "Visit CRM Dance";
|
|
30
|
+
readonly ariaLabel: "Powered by CRM Dance";
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export { CRM_DANCE_PROVIDER, ProviderCredit, type ProviderCreditColors, type ProviderCreditProps };
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
// src/provider.ts
|
|
2
|
+
var CRM_DANCE_PROVIDER = {
|
|
3
|
+
name: "CRM Dance",
|
|
4
|
+
url: "https://crm.dance",
|
|
5
|
+
logoSrc: "https://crm.dance/logo/logo-256.jpg",
|
|
6
|
+
href: "https://crm.dance/?utm_source=client-site&utm_medium=footer-credit&utm_campaign=studio-kit",
|
|
7
|
+
description: "The operating system for modern dance studios \u2014 scheduling, attendance, payments, reporting, and studio-ready terminals.",
|
|
8
|
+
visitLabel: "Visit CRM Dance",
|
|
9
|
+
ariaLabel: "Powered by CRM Dance"
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
// src/components/ProviderCredit.tsx
|
|
13
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
|
+
var DEFAULTS = {
|
|
15
|
+
providerName: CRM_DANCE_PROVIDER.name,
|
|
16
|
+
logoSrc: CRM_DANCE_PROVIDER.logoSrc,
|
|
17
|
+
href: CRM_DANCE_PROVIDER.href,
|
|
18
|
+
description: CRM_DANCE_PROVIDER.description,
|
|
19
|
+
visitLabel: CRM_DANCE_PROVIDER.visitLabel,
|
|
20
|
+
ariaLabel: CRM_DANCE_PROVIDER.ariaLabel
|
|
21
|
+
};
|
|
22
|
+
var DEFAULT_COLORS = {
|
|
23
|
+
panel: "#ffffff",
|
|
24
|
+
border: "rgba(0, 0, 0, 0.08)",
|
|
25
|
+
ink: "#000000",
|
|
26
|
+
inkSoft: "#1f1f1f",
|
|
27
|
+
ctaBorder: "rgba(0, 0, 0, 0.25)",
|
|
28
|
+
ctaHover: "rgba(0, 0, 0, 0.08)"
|
|
29
|
+
};
|
|
30
|
+
var CSS_VAR_MAP = {
|
|
31
|
+
panel: "--crm-panel",
|
|
32
|
+
border: "--crm-border",
|
|
33
|
+
ink: "--crm-ink",
|
|
34
|
+
inkSoft: "--crm-ink-soft",
|
|
35
|
+
ctaBorder: "--crm-cta-border",
|
|
36
|
+
ctaHover: "--crm-cta-hover"
|
|
37
|
+
};
|
|
38
|
+
var COLOR_KEYS = ["panel", "border", "ink", "inkSoft", "ctaBorder", "ctaHover"];
|
|
39
|
+
function ProviderCredit({
|
|
40
|
+
providerName = DEFAULTS.providerName,
|
|
41
|
+
logoSrc = DEFAULTS.logoSrc,
|
|
42
|
+
href = DEFAULTS.href,
|
|
43
|
+
description = DEFAULTS.description,
|
|
44
|
+
visitLabel = DEFAULTS.visitLabel,
|
|
45
|
+
ariaLabel = DEFAULTS.ariaLabel,
|
|
46
|
+
colors,
|
|
47
|
+
className,
|
|
48
|
+
...rest
|
|
49
|
+
}) {
|
|
50
|
+
const containerClassName = ["crm-dance-credit", className].filter(Boolean).join(" ");
|
|
51
|
+
const { style, ...restProps } = rest;
|
|
52
|
+
const mergedColors = { ...DEFAULT_COLORS, ...colors };
|
|
53
|
+
const cssVars = COLOR_KEYS.reduce((acc, key) => {
|
|
54
|
+
acc[CSS_VAR_MAP[key]] = mergedColors[key];
|
|
55
|
+
return acc;
|
|
56
|
+
}, {});
|
|
57
|
+
const mergedStyle = {
|
|
58
|
+
...cssVars,
|
|
59
|
+
...style != null ? style : {}
|
|
60
|
+
};
|
|
61
|
+
return /* @__PURE__ */ jsxs("section", { className: containerClassName, "aria-label": ariaLabel, style: mergedStyle, ...restProps, children: [
|
|
62
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
63
|
+
.crm-dance-credit {
|
|
64
|
+
border-top: 1px solid var(--crm-border, rgba(0, 0, 0, 0.08));
|
|
65
|
+
background-color: var(--crm-panel, #ffffff);
|
|
66
|
+
padding: 16px 20px 48px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media (min-width: 768px) {
|
|
70
|
+
.crm-dance-credit {
|
|
71
|
+
padding: 20px 24px 64px;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.crm-dance-credit__inner {
|
|
76
|
+
max-width: 58rem;
|
|
77
|
+
margin: 0 auto;
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-direction: column;
|
|
80
|
+
gap: 16px;
|
|
81
|
+
color: var(--crm-ink-soft, #1f1f1f);
|
|
82
|
+
font-family: inherit;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.crm-dance-credit__header {
|
|
86
|
+
display: flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: 16px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@media (min-width: 768px) {
|
|
92
|
+
.crm-dance-credit__header {
|
|
93
|
+
gap: 24px;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.crm-dance-credit__logo {
|
|
98
|
+
width: 64px;
|
|
99
|
+
height: 64px;
|
|
100
|
+
border-radius: 18px;
|
|
101
|
+
border: 1px solid rgba(0, 0, 0, 0.4);
|
|
102
|
+
background-color: #fff;
|
|
103
|
+
padding: 8px;
|
|
104
|
+
object-fit: contain;
|
|
105
|
+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.crm-dance-credit__meta {
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-direction: column;
|
|
111
|
+
gap: 4px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.crm-dance-credit__eyebrow {
|
|
115
|
+
font-size: 0.7rem;
|
|
116
|
+
letter-spacing: 0.2em;
|
|
117
|
+
text-transform: uppercase;
|
|
118
|
+
font-weight: 600;
|
|
119
|
+
color: var(--crm-ink-soft, #4a3f37);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.crm-dance-credit__name {
|
|
123
|
+
font-size: 1.125rem;
|
|
124
|
+
font-weight: 600;
|
|
125
|
+
color: var(--crm-ink, #000000);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.crm-dance-credit__cta {
|
|
129
|
+
display: inline-flex;
|
|
130
|
+
align-items: center;
|
|
131
|
+
gap: 8px;
|
|
132
|
+
align-self: flex-start;
|
|
133
|
+
border-radius: 999px;
|
|
134
|
+
border: 1px solid var(--crm-cta-border, rgba(0, 0, 0, 0.25));
|
|
135
|
+
padding: 8px 18px;
|
|
136
|
+
font-weight: 600;
|
|
137
|
+
font-size: 0.95rem;
|
|
138
|
+
color: var(--crm-ink, #000000);
|
|
139
|
+
text-decoration: none;
|
|
140
|
+
transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.crm-dance-credit__cta:hover,
|
|
144
|
+
.crm-dance-credit__cta:focus-visible {
|
|
145
|
+
border-color: var(--crm-cta-border, rgba(0, 0, 0, 0.25));
|
|
146
|
+
background-color: var(--crm-cta-hover, rgba(0, 0, 0, 0.08));
|
|
147
|
+
transform: translateY(-1px);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.crm-dance-credit__cta:focus-visible {
|
|
151
|
+
outline: 2px solid var(--crm-ink, #000000);
|
|
152
|
+
outline-offset: 3px;
|
|
153
|
+
}
|
|
154
|
+
` }),
|
|
155
|
+
/* @__PURE__ */ jsxs("div", { className: "crm-dance-credit__inner", children: [
|
|
156
|
+
/* @__PURE__ */ jsxs("div", { className: "crm-dance-credit__header", children: [
|
|
157
|
+
/* @__PURE__ */ jsx("img", { className: "crm-dance-credit__logo", src: logoSrc, alt: `${providerName} logo`, loading: "lazy" }),
|
|
158
|
+
/* @__PURE__ */ jsxs("div", { className: "crm-dance-credit__meta", children: [
|
|
159
|
+
/* @__PURE__ */ jsx("span", { className: "crm-dance-credit__eyebrow", children: "Built by" }),
|
|
160
|
+
/* @__PURE__ */ jsx("span", { className: "crm-dance-credit__name", children: providerName }),
|
|
161
|
+
/* @__PURE__ */ jsx("p", { children: description })
|
|
162
|
+
] })
|
|
163
|
+
] }),
|
|
164
|
+
/* @__PURE__ */ jsxs("a", { className: "crm-dance-credit__cta", href, target: "_blank", rel: "noopener noreferrer", children: [
|
|
165
|
+
visitLabel,
|
|
166
|
+
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2192" })
|
|
167
|
+
] })
|
|
168
|
+
] })
|
|
169
|
+
] });
|
|
170
|
+
}
|
|
171
|
+
export {
|
|
172
|
+
CRM_DANCE_PROVIDER,
|
|
173
|
+
ProviderCredit
|
|
174
|
+
};
|
|
175
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/provider.ts","../src/components/ProviderCredit.tsx"],"sourcesContent":["export const CRM_DANCE_PROVIDER = {\n name: \"CRM Dance\",\n url: \"https://crm.dance\",\n logoSrc: \"https://crm.dance/logo/logo-256.jpg\",\n href: \"https://crm.dance/?utm_source=client-site&utm_medium=footer-credit&utm_campaign=studio-kit\",\n description:\n \"The operating system for modern dance studios — scheduling, attendance, payments, reporting, and studio-ready terminals.\",\n visitLabel: \"Visit CRM Dance\",\n ariaLabel: \"Powered by CRM Dance\",\n} as const\n","import type { CSSProperties, HTMLAttributes } from \"react\"\nimport { CRM_DANCE_PROVIDER } from \"../provider\"\n\nexport type ProviderCreditColors = {\n panel: string\n border: string\n ink: string\n inkSoft: string\n ctaBorder: string\n ctaHover: string\n}\n\nexport type ProviderCreditProps = HTMLAttributes<HTMLElement> & {\n providerName?: string\n logoSrc?: string\n href?: string\n description?: string\n visitLabel?: string\n ariaLabel?: string\n colors?: Partial<ProviderCreditColors>\n}\n\nconst DEFAULTS = {\n providerName: CRM_DANCE_PROVIDER.name,\n logoSrc: CRM_DANCE_PROVIDER.logoSrc,\n href: CRM_DANCE_PROVIDER.href,\n description: CRM_DANCE_PROVIDER.description,\n visitLabel: CRM_DANCE_PROVIDER.visitLabel,\n ariaLabel: CRM_DANCE_PROVIDER.ariaLabel,\n}\n\nconst DEFAULT_COLORS: ProviderCreditColors = {\n panel: \"#ffffff\",\n border: \"rgba(0, 0, 0, 0.08)\",\n ink: \"#000000\",\n inkSoft: \"#1f1f1f\",\n ctaBorder: \"rgba(0, 0, 0, 0.25)\",\n ctaHover: \"rgba(0, 0, 0, 0.08)\",\n}\n\nconst CSS_VAR_MAP: Record<keyof ProviderCreditColors, string> = {\n panel: \"--crm-panel\",\n border: \"--crm-border\",\n ink: \"--crm-ink\",\n inkSoft: \"--crm-ink-soft\",\n ctaBorder: \"--crm-cta-border\",\n ctaHover: \"--crm-cta-hover\",\n}\n\nconst COLOR_KEYS: Array<keyof ProviderCreditColors> = [\"panel\", \"border\", \"ink\", \"inkSoft\", \"ctaBorder\", \"ctaHover\"]\n\nexport function ProviderCredit({\n providerName = DEFAULTS.providerName,\n logoSrc = DEFAULTS.logoSrc,\n href = DEFAULTS.href,\n description = DEFAULTS.description,\n visitLabel = DEFAULTS.visitLabel,\n ariaLabel = DEFAULTS.ariaLabel,\n colors,\n className,\n ...rest\n}: ProviderCreditProps) {\n const containerClassName = [\"crm-dance-credit\", className].filter(Boolean).join(\" \")\n const { style, ...restProps } = rest\n const mergedColors = { ...DEFAULT_COLORS, ...colors }\n const cssVars = COLOR_KEYS.reduce<Record<string, string>>((acc, key) => {\n acc[CSS_VAR_MAP[key]] = mergedColors[key]\n return acc\n }, {})\n const mergedStyle: CSSProperties = {\n ...cssVars,\n ...(style ?? {}),\n }\n\n return (\n <section className={containerClassName} aria-label={ariaLabel} style={mergedStyle} {...restProps}>\n <style>\n {`\n .crm-dance-credit {\n border-top: 1px solid var(--crm-border, rgba(0, 0, 0, 0.08));\n background-color: var(--crm-panel, #ffffff);\n padding: 16px 20px 48px;\n }\n\n @media (min-width: 768px) {\n .crm-dance-credit {\n padding: 20px 24px 64px;\n }\n }\n\n .crm-dance-credit__inner {\n max-width: 58rem;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n color: var(--crm-ink-soft, #1f1f1f);\n font-family: inherit;\n }\n\n .crm-dance-credit__header {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n @media (min-width: 768px) {\n .crm-dance-credit__header {\n gap: 24px;\n }\n }\n\n .crm-dance-credit__logo {\n width: 64px;\n height: 64px;\n border-radius: 18px;\n border: 1px solid rgba(0, 0, 0, 0.4);\n background-color: #fff;\n padding: 8px;\n object-fit: contain;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);\n }\n\n .crm-dance-credit__meta {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .crm-dance-credit__eyebrow {\n font-size: 0.7rem;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n font-weight: 600;\n color: var(--crm-ink-soft, #4a3f37);\n }\n\n .crm-dance-credit__name {\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--crm-ink, #000000);\n }\n\n .crm-dance-credit__cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n align-self: flex-start;\n border-radius: 999px;\n border: 1px solid var(--crm-cta-border, rgba(0, 0, 0, 0.25));\n padding: 8px 18px;\n font-weight: 600;\n font-size: 0.95rem;\n color: var(--crm-ink, #000000);\n text-decoration: none;\n transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;\n }\n\n .crm-dance-credit__cta:hover,\n .crm-dance-credit__cta:focus-visible {\n border-color: var(--crm-cta-border, rgba(0, 0, 0, 0.25));\n background-color: var(--crm-cta-hover, rgba(0, 0, 0, 0.08));\n transform: translateY(-1px);\n }\n\n .crm-dance-credit__cta:focus-visible {\n outline: 2px solid var(--crm-ink, #000000);\n outline-offset: 3px;\n }\n `}\n </style>\n <div className=\"crm-dance-credit__inner\">\n <div className=\"crm-dance-credit__header\">\n <img className=\"crm-dance-credit__logo\" src={logoSrc} alt={`${providerName} logo`} loading=\"lazy\" />\n <div className=\"crm-dance-credit__meta\">\n <span className=\"crm-dance-credit__eyebrow\">Built by</span>\n <span className=\"crm-dance-credit__name\">{providerName}</span>\n <p>{description}</p>\n </div>\n </div>\n <a className=\"crm-dance-credit__cta\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n {visitLabel}\n <span aria-hidden=\"true\">→</span>\n </a>\n </div>\n </section>\n )\n}\n"],"mappings":"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","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@crm-dance/studio-kit",
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "CRM Dance toolkit for shared studio components, attribution blocks, and analytics helpers.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "CRM Dance",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/CRM-Dance/crm-dance-studio-kit.git"
|
|
10
|
+
},
|
|
11
|
+
"main": "dist/index.cjs",
|
|
12
|
+
"module": "dist/index.mjs",
|
|
13
|
+
"types": "dist/index.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"import": "./dist/index.mjs",
|
|
18
|
+
"require": "./dist/index.cjs"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
24
|
+
"sideEffects": false,
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "tsup src/index.ts --dts",
|
|
27
|
+
"dev": "tsup src/index.ts --dts --watch",
|
|
28
|
+
"lint": "eslint \"src/**/*.{ts,tsx}\"",
|
|
29
|
+
"typecheck": "tsc --noEmit",
|
|
30
|
+
"prepublishOnly": "pnpm run lint && pnpm run typecheck && pnpm run build"
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"react": "^18.2.0 || ^19.0.0",
|
|
34
|
+
"react-dom": "^18.2.0 || ^19.0.0"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@types/react": "^19.1.3",
|
|
38
|
+
"@types/react-dom": "^19.1.3",
|
|
39
|
+
"@typescript-eslint/eslint-plugin": "^8.32.0",
|
|
40
|
+
"@typescript-eslint/parser": "^8.32.0",
|
|
41
|
+
"eslint": "^9.26.0",
|
|
42
|
+
"eslint-config-prettier": "^10.1.1",
|
|
43
|
+
"prettier": "3.0.3",
|
|
44
|
+
"tsup": "^8.3.0",
|
|
45
|
+
"typescript": "^5.8.3"
|
|
46
|
+
},
|
|
47
|
+
"publishConfig": {
|
|
48
|
+
"access": "public"
|
|
49
|
+
},
|
|
50
|
+
"keywords": [
|
|
51
|
+
"crm-dance",
|
|
52
|
+
"studio",
|
|
53
|
+
"components",
|
|
54
|
+
"attribution"
|
|
55
|
+
],
|
|
56
|
+
"packageManager": "pnpm@10.18.3"
|
|
57
|
+
}
|