diff --git a/README.md b/README.md index 34f752f..31541bb 100644 --- a/README.md +++ b/README.md @@ -136,14 +136,14 @@ const button = windctrl({ }); // Usage -// 1. Wrap the parent with `data-scope` and `group/wind-scope` +// 1. Wrap the parent with `data-windctrl-scope` and `group/windctrl-scope` // 2. The button automatically adapts its style based on the parent -
+
``` -The scope classes are automatically prefixed with `group-data-[scope=...]/wind-scope:` to target the parent's data attribute. +The scope classes are automatically prefixed with `group-data-[windctrl-scope=...]/windctrl-scope:` to target the parent's data attribute. ### Variants diff --git a/examples/ButtonExample.tsx b/examples/ButtonExample.tsx index 9164ce7..d574d90 100644 --- a/examples/ButtonExample.tsx +++ b/examples/ButtonExample.tsx @@ -81,8 +81,8 @@ export function ButtonExample() {

Header scope:

@@ -91,8 +91,8 @@ export function ButtonExample() {

Footer scope:

diff --git a/src/index.test.ts b/src/index.test.ts index 027b2c5..7887005 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -333,10 +333,10 @@ describe("windctrl", () => { const result = button({}); expect(result.className).toContain( - "group-data-[scope=header]/wind-scope:text-sm", + "group-data-[windctrl-scope=header]/windctrl-scope:text-sm", ); expect(result.className).toContain( - "group-data-[scope=footer]/wind-scope:text-xs", + "group-data-[windctrl-scope=footer]/windctrl-scope:text-xs", ); }); @@ -352,7 +352,7 @@ describe("windctrl", () => { expect(result.className).toContain("px-4"); expect(result.className).toContain("py-2"); expect(result.className).toContain( - "group-data-[scope=header]/wind-scope:text-sm", + "group-data-[windctrl-scope=header]/windctrl-scope:text-sm", ); }); @@ -366,10 +366,10 @@ describe("windctrl", () => { const result = button({}); expect(result.className).toContain( - "group-data-[scope=header]/wind-scope:text-sm", + "group-data-[windctrl-scope=header]/windctrl-scope:text-sm", ); expect(result.className).toContain( - "group-data-[scope=header]/wind-scope:py-1", + "group-data-[windctrl-scope=header]/windctrl-scope:py-1", ); }); }); @@ -458,7 +458,7 @@ describe("windctrl", () => { expect(result.style).toEqual({ width: "200px" }); expect(result.className).toContain( - "group-data-[scope=header]/wind-scope:text-sm", + "group-data-[windctrl-scope=header]/windctrl-scope:text-sm", ); }); diff --git a/src/index.ts b/src/index.ts index 3ef8707..1355be3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -115,7 +115,10 @@ function processScopes>( return classesStr .split(/\s+/) .filter(Boolean) - .map((cls) => `group-data-[scope=${scopeName}]/wind-scope:${cls}`) + .map( + (cls) => + `group-data-[windctrl-scope=${scopeName}]/windctrl-scope:${cls}`, + ) .join(" "); }); }