@caprail-dev/consent 0.1.3 → 0.1.4
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 +8 -11
- package/dist/consent-banner.js +5 -5
- package/dist/consent-banner.js.map +1 -1
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +4 -4
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +7 -8
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/switch.d.ts.map +1 -1
- package/dist/ui/switch.js +4 -5
- package/dist/ui/switch.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,9 +6,9 @@ to pair with [`@caprail-dev/analytics`](https://www.npmjs.com/package/@caprail-d
|
|
|
6
6
|
|
|
7
7
|
- **Consent matrix as state** — `useConsent()` gives any component the live
|
|
8
8
|
per-category grants and the actions to change them.
|
|
9
|
-
- **
|
|
10
|
-
(
|
|
11
|
-
|
|
9
|
+
- **Tailwind, zero theme setup** — styled with Tailwind's default palette
|
|
10
|
+
(zinc), so it looks polished out of the box in any Tailwind project — no Shadcn
|
|
11
|
+
tokens required. Override any color with `className` / `classNames`.
|
|
12
12
|
- **Region-aware** — pass the visitor's country and it switches between opt-in
|
|
13
13
|
(EEA/UK/CH/BR), opt-out (US-CA, with a "Do Not Sell/Share" link), and notice.
|
|
14
14
|
- **Mobile-first** — bottom-anchored, stacked buttons that go inline on `sm:`,
|
|
@@ -24,15 +24,12 @@ bun add @caprail-dev/consent
|
|
|
24
24
|
bun add react react-dom
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
## Setup (
|
|
27
|
+
## Setup (one required step)
|
|
28
28
|
|
|
29
|
-
**
|
|
30
|
-
|
|
31
|
-
`
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
**2. Let Tailwind scan the package.** Tailwind v4 does not scan `node_modules`
|
|
35
|
-
by default, so add this to the CSS file where you import Tailwind:
|
|
29
|
+
**Let Tailwind scan the package.** The components are styled with Tailwind's
|
|
30
|
+
default palette, so there are no tokens to define — but Tailwind v4 does not scan
|
|
31
|
+
`node_modules` by default, so it won't emit those utility classes unless you
|
|
32
|
+
point it at the package. Add this to the CSS file where you import Tailwind:
|
|
36
33
|
|
|
37
34
|
```css
|
|
38
35
|
@import "tailwindcss";
|
package/dist/consent-banner.js
CHANGED
|
@@ -19,13 +19,13 @@ import { Switch } from "./ui/switch";
|
|
|
19
19
|
// No custom keyframes / injected <style>: an entrance animation, if wanted, is a
|
|
20
20
|
// consumer's `classNames.root` override (e.g. their `animate-in` plugin classes).
|
|
21
21
|
/** Quiet muted text link, shared by the Manage button and the Privacy link. */
|
|
22
|
-
const LINK_CLASS = "text-
|
|
22
|
+
const LINK_CLASS = "text-zinc-500 hover:text-zinc-900 text-xs underline-offset-2 transition-colors hover:underline";
|
|
23
23
|
export function ConsentBanner({ className, classNames, } = {}) {
|
|
24
24
|
const { showBanner, mode, categories, categoriesInUse, acceptAll, rejectAll, privacyUrl, } = useConsentContext();
|
|
25
25
|
const [manageOpen, setManageOpen] = React.useState(false);
|
|
26
26
|
if (!showBanner)
|
|
27
27
|
return null;
|
|
28
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", { role: "dialog", "aria-label": "Cookie consent", className: cn("fixed inset-x-0 bottom-0 z-50 flex justify-center p-3 pb-[calc(env(safe-area-inset-bottom)_+_0.75rem)] sm:p-4", classNames?.root), children: _jsxs("div", { className: cn("border-
|
|
28
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { role: "dialog", "aria-label": "Cookie consent", className: cn("fixed inset-x-0 bottom-0 z-50 flex justify-center p-3 pb-[calc(env(safe-area-inset-bottom)_+_0.75rem)] sm:p-4", classNames?.root), children: _jsxs("div", { className: cn("border-zinc-200 bg-white flex w-full max-w-2xl flex-col gap-4 rounded-2xl border p-4 shadow-lg sm:p-5", className, classNames?.card), children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: cn("text-zinc-900 text-sm font-medium", classNames?.title), children: "We value your privacy" }), _jsx("p", { className: cn("text-zinc-600 text-sm", classNames?.description), children: "We use cookies to measure and improve your experience. Accept all, reject, or choose what to allow." })] }), _jsxs("div", { className: cn("flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", classNames?.actions), children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { type: "button", className: cn(LINK_CLASS, classNames?.manageButton), onClick: () => setManageOpen(true), children: "Manage" }), privacyUrl && (_jsx("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: cn(LINK_CLASS, classNames?.privacyLink), children: "Privacy" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: cn("flex-1 sm:flex-none", classNames?.rejectButton), onClick: rejectAll, children: mode === "opt-out" ? "Reject" : "Reject all" }), _jsx(Button, { size: "sm", className: cn("flex-1 sm:flex-none", classNames?.acceptButton), onClick: acceptAll, children: "Accept all" })] })] })] }) }), manageOpen && (_jsx(ManageDialog, { onClose: () => setManageOpen(false), categories: categories, rowIds: ["necessary", ...categoriesInUse], dialogClassName: classNames?.dialog }))] }));
|
|
29
29
|
}
|
|
30
30
|
function ManageDialog({ onClose, categories, rowIds, dialogClassName, }) {
|
|
31
31
|
const { consent, mode, save, services } = useConsentContext();
|
|
@@ -42,10 +42,10 @@ function ManageDialog({ onClose, categories, rowIds, dialogClassName, }) {
|
|
|
42
42
|
if (!config)
|
|
43
43
|
return null;
|
|
44
44
|
const locked = !!config.locked;
|
|
45
|
-
return (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-
|
|
45
|
+
return (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-zinc-900 text-sm font-medium", children: config.label }), _jsx("span", { className: "text-zinc-600 text-xs", children: config.description }), _jsx(ServiceNames, { names: services
|
|
46
46
|
.filter((s) => s.category === id)
|
|
47
47
|
.map((s) => s.name) })] }), _jsx(Switch, { checked: locked ? true : !!draft[id], disabled: locked, onCheckedChange: (v) => setDraft((d) => ({ ...d, [id]: v })), "aria-label": config.label })] }, id));
|
|
48
|
-
}) }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [mode === "opt-out" ? (_jsx("button", { type: "button", className: "text-
|
|
48
|
+
}) }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [mode === "opt-out" ? (_jsx("button", { type: "button", className: "text-zinc-500 hover:text-zinc-900 text-xs underline underline-offset-2", onClick: () => {
|
|
49
49
|
const rejected = {};
|
|
50
50
|
for (const c of categories)
|
|
51
51
|
rejected[c.id] = !!c.locked;
|
|
@@ -60,6 +60,6 @@ function ManageDialog({ onClose, categories, rowIds, dialogClassName, }) {
|
|
|
60
60
|
function ServiceNames({ names }) {
|
|
61
61
|
if (names.length === 0)
|
|
62
62
|
return null;
|
|
63
|
-
return (_jsx("span", { className: "text-
|
|
63
|
+
return (_jsx("span", { className: "text-zinc-400 text-xs", children: names.join(", ") }));
|
|
64
64
|
}
|
|
65
65
|
//# sourceMappingURL=consent-banner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consent-banner.js","sourceRoot":"","sources":["../src/consent-banner.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAQrC,wEAAwE;AACxE,uEAAuE;AACvE,iFAAiF;AACjF,+EAA+E;AAC/E,8EAA8E;AAC9E,0EAA0E;AAC1E,EAAE;AACF,8EAA8E;AAC9E,iFAAiF;AACjF,iFAAiF;AACjF,iFAAiF;AACjF,kFAAkF;AAElF,+EAA+E;AAC/E,MAAM,UAAU,GACd,
|
|
1
|
+
{"version":3,"file":"consent-banner.js","sourceRoot":"","sources":["../src/consent-banner.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/button.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AACrD,KAAK,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC;AAe5C,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,WAAW,qBAab;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/dist/ui/button.js
CHANGED
|
@@ -3,9 +3,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { cn } from "../cn";
|
|
5
5
|
const VARIANT_CLASS = {
|
|
6
|
-
default: "bg-
|
|
7
|
-
outline: "border border-
|
|
8
|
-
ghost: "text-
|
|
6
|
+
default: "bg-zinc-900 text-zinc-50 hover:bg-zinc-800",
|
|
7
|
+
outline: "border border-zinc-200 bg-white text-zinc-900 hover:bg-zinc-100",
|
|
8
|
+
ghost: "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900",
|
|
9
9
|
};
|
|
10
10
|
const SIZE_CLASS = {
|
|
11
11
|
default: "h-9 px-4 text-sm",
|
|
@@ -13,7 +13,7 @@ const SIZE_CLASS = {
|
|
|
13
13
|
icon: "size-9",
|
|
14
14
|
};
|
|
15
15
|
function Button({ className, variant = "default", size = "default", ...props }) {
|
|
16
|
-
return (_jsx("button", { "data-slot": "button", className: cn("focus-visible:ring-
|
|
16
|
+
return (_jsx("button", { "data-slot": "button", className: cn("focus-visible:ring-zinc-400 inline-flex items-center justify-center gap-2 rounded-lg font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50", VARIANT_CLASS[variant], SIZE_CLASS[size], className), ...props }));
|
|
17
17
|
}
|
|
18
18
|
export { Button };
|
|
19
19
|
//# sourceMappingURL=button.js.map
|
package/dist/ui/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAU3B,MAAM,aAAa,GAAkC;IACnD,OAAO,EAAE,4CAA4C;IACrD,OAAO,EACL,iEAAiE;IACnE,KAAK,EAAE,qDAAqD;CAC7D,CAAC;AAEF,MAAM,UAAU,GAA+B;IAC7C,OAAO,EAAE,kBAAkB;IAC3B,EAAE,EAAE,wBAAwB;IAC5B,IAAI,EAAE,QAAQ;CACf,CAAC;AAOF,SAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,GAAG,KAAK,EACI;IACZ,OAAO,CACL,8BACY,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,yNAAyN,EACzN,aAAa,CAAC,OAAO,CAAC,EACtB,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/dist/ui/dialog.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAS1D,iBAAS,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEvE;AAkBD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,SAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,qBAmCA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAQ1D;AAED,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC"}
|
package/dist/ui/dialog.js
CHANGED
|
@@ -3,11 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
5
5
|
import { cn } from "../cn";
|
|
6
|
-
//
|
|
7
|
-
//
|
|
8
|
-
//
|
|
9
|
-
//
|
|
10
|
-
// transitions Radix toggles via `data-state`.
|
|
6
|
+
// Dialog on Tailwind's default palette (zinc), so it looks right in any Tailwind
|
|
7
|
+
// project. Content is portaled to <body>. Kept dependency-free: the close glyph
|
|
8
|
+
// is an inline SVG (no icon library) and there are no animation-plugin classes,
|
|
9
|
+
// only Tailwind transitions Radix toggles via `data-state`.
|
|
11
10
|
function Dialog(props) {
|
|
12
11
|
return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
13
12
|
}
|
|
@@ -15,16 +14,16 @@ function DialogOverlay({ className, ...props }) {
|
|
|
15
14
|
return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity data-[state=closed]:opacity-0 motion-reduce:transition-none", className), ...props }));
|
|
16
15
|
}
|
|
17
16
|
function DialogContent({ className, children, showClose = true, ...props }) {
|
|
18
|
-
return (_jsxs(DialogPrimitive.Portal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("border-
|
|
17
|
+
return (_jsxs(DialogPrimitive.Portal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("border-zinc-200 bg-white text-zinc-900 fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl border p-5 shadow-xl", className), ...props, children: [children, showClose && (_jsx(DialogPrimitive.Close, { "aria-label": "Close", className: "text-zinc-500 focus-visible:ring-zinc-400 absolute top-4 right-4 grid size-8 place-items-center rounded-lg transition-opacity hover:opacity-70 focus:outline-none focus-visible:ring-2", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "size-5", "aria-hidden": "true", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }))] })] }));
|
|
19
18
|
}
|
|
20
19
|
function DialogHeader({ className, ...props }) {
|
|
21
20
|
return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-1.5", className), ...props }));
|
|
22
21
|
}
|
|
23
22
|
function DialogTitle({ className, ...props }) {
|
|
24
|
-
return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-
|
|
23
|
+
return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-zinc-900 text-base font-semibold", className), ...props }));
|
|
25
24
|
}
|
|
26
25
|
function DialogDescription({ className, ...props }) {
|
|
27
|
-
return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-
|
|
26
|
+
return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-zinc-600 text-sm", className), ...props }));
|
|
28
27
|
}
|
|
29
28
|
export { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription };
|
|
30
29
|
//# sourceMappingURL=dialog.js.map
|
package/dist/ui/dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,iFAAiF;AACjF,gFAAgF;AAChF,gFAAgF;AAChF,4DAA4D;AAE5D,SAAS,MAAM,CAAC,KAAwD;IACtE,OAAO,KAAC,eAAe,CAAC,IAAI,iBAAW,QAAQ,KAAK,KAAK,GAAI,CAAC;AAChE,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EAC6C;IACrD,OAAO,CACL,KAAC,eAAe,CAAC,OAAO,iBACZ,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CACX,+GAA+G,EAC/G,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EAGT;IACC,OAAO,CACL,MAAC,eAAe,CAAC,MAAM,iBAAW,eAAe,aAC/C,KAAC,aAAa,KAAG,EACjB,MAAC,eAAe,CAAC,OAAO,iBACZ,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CACX,+KAA+K,EAC/K,SAAS,CACV,KACG,KAAK,aAER,QAAQ,EACR,SAAS,IAAI,CACZ,KAAC,eAAe,CAAC,KAAK,kBACT,OAAO,EAClB,SAAS,EAAC,wLAAwL,YAElM,cACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,SAAS,EAAC,QAAQ,iBACN,MAAM,YAElB,eAAM,CAAC,EAAC,sBAAsB,GAAG,GAC7B,GACgB,CACzB,IACuB,IACH,CAC1B,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACxE,OAAO,CACL,2BACY,eAAe,EACzB,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,eAAe,CAAC,KAAK,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE,SAAS,CAAC,KAC7D,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACiD;IACzD,OAAO,CACL,KAAC,eAAe,CAAC,WAAW,iBAChB,oBAAoB,EAC9B,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC"}
|
package/dist/ui/switch.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAQ1D,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAgBnD;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/dist/ui/switch.js
CHANGED
|
@@ -3,12 +3,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
5
5
|
import { cn } from "../cn";
|
|
6
|
-
//
|
|
7
|
-
//
|
|
8
|
-
//
|
|
9
|
-
// override with a `className`.
|
|
6
|
+
// Switch on Tailwind's default palette: checked track is zinc-900, unchecked is
|
|
7
|
+
// zinc-200, thumb is white. The data-state colors are applied via Tailwind's
|
|
8
|
+
// `data-[state=…]` variants so a consumer can still override with a `className`.
|
|
10
9
|
function Switch({ className, ...props }) {
|
|
11
|
-
return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("peer focus-visible:ring-
|
|
10
|
+
return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("peer focus-visible:ring-zinc-400 data-[state=checked]:bg-zinc-900 data-[state=unchecked]:bg-zinc-200 inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "bg-white pointer-events-none block size-4 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[1.125rem]" }) }));
|
|
12
11
|
}
|
|
13
12
|
export { Switch };
|
|
14
13
|
//# sourceMappingURL=switch.js.map
|
package/dist/ui/switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,
|
|
1
|
+
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,gFAAgF;AAChF,6EAA6E;AAC7E,iFAAiF;AAEjF,SAAS,MAAM,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EAC0C;IAClD,OAAO,CACL,KAAC,eAAe,CAAC,IAAI,iBACT,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,0SAA0S,EAC1S,SAAS,CACV,KACG,KAAK,YAET,KAAC,eAAe,CAAC,KAAK,iBACV,cAAc,EACxB,SAAS,EAAC,mJAAmJ,GAC7J,GACmB,CACxB,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/package.json
CHANGED