@asnewyla/radio 0.2.0 → 0.2.1

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/dist/index.css CHANGED
@@ -39,6 +39,8 @@
39
39
  }
40
40
  .xd-radio-label {
41
41
  font-size: var(--xd-font-size-md, 0.875rem);
42
+ letter-spacing: var(--xd-letter-spacing-label, 0);
43
+ text-transform: var(--xd-text-transform-label, none);
42
44
  cursor: pointer;
43
45
  }
44
46
  .xd-radio-input[data-invalid=true] {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Radio.css"],"sourcesContent":[".xd-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--xd-space-sm, 0.375rem);\n flex-wrap: wrap;\n}\n\n.xd-radio-input {\n appearance: none;\n -webkit-appearance: none;\n margin: 0;\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n position: relative;\n border-radius: 50%;\n border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);\n background-color: transparent;\n cursor: pointer;\n transition: border-color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-radio-input[data-checked=\"true\"] {\n border-color: var(--xd-color-primary, #0d9488);\n}\n\n.xd-radio-input[data-checked=\"true\"]::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: var(--xd-color-primary, #0d9488);\n transform: translate(-50%, -50%);\n}\n\n.xd-radio-input:focus-visible {\n outline: var(--xd-focus-ring-width, 2px) solid\n var(--xd-color-focus, var(--xd-color-primary, #0d9488));\n outline-offset: var(--xd-focus-ring-offset, 2px);\n}\n\n.xd-radio-label {\n font-size: var(--xd-font-size-md, 0.875rem);\n cursor: pointer;\n}\n\n/* --- Invalid --- */\n\n.xd-radio-input[data-invalid=\"true\"] {\n border-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-radio-input[data-invalid=\"true\"]:focus-visible {\n outline-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-radio-error {\n flex-basis: 100%;\n font-size: var(--xd-font-size-sm, 0.8125rem);\n color: var(--xd-color-destructive, #dc2626);\n}\n\n/* --- Disabled --- */\n\n.xd-radio-input:disabled {\n opacity: var(--xd-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.xd-radio-input:disabled + .xd-radio-label {\n opacity: var(--xd-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI,aAAa,EAAE;AACxB,aAAW;AACb;AAEA,CAAC;AACC,cAAY;AACZ,sBAAoB;AACpB,UAAQ;AACR,eAAa;AACb,SAAO;AACP,UAAQ;AACR,YAAU;AACV,iBAAe;AACf,UAAQ,IAAI,sBAAsB,EAAE,KAAK,MAAM,IAAI,iBAAiB,EAAE;AACtE,oBAAkB;AAClB,UAAQ;AACR,cAAY,aAAa,IAAI,gBAAgB,EAAE,MAAM;AACvD;AAEA,CAfC,cAec,CAAC;AACd,gBAAc,IAAI,kBAAkB,EAAE;AACxC;AAEA,CAnBC,cAmBc,CAAC,kBAAoB;AAClC,WAAS;AACT,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,oBAAkB,IAAI,kBAAkB,EAAE;AAC1C,aAAW,UAAU,IAAI,EAAE;AAC7B;AAEA,CA/BC,cA+Bc;AACb,WAAS,IAAI,qBAAqB,EAAE,KAAK,MACvC,IAAI,gBAAgB,EAAE,IAAI,kBAAkB,EAAE;AAChD,kBAAgB,IAAI,sBAAsB,EAAE;AAC9C;AAEA,CAAC;AACC,aAAW,IAAI,iBAAiB,EAAE;AAClC,UAAQ;AACV;AAIA,CA5CC,cA4Cc,CAAC;AACd,gBAAc,IAAI,sBAAsB,EAAE;AAC5C;AAEA,CAhDC,cAgDc,CAAC,kBAAoB;AAClC,iBAAe,IAAI,sBAAsB,EAAE;AAC7C;AAEA,CAAC;AACC,cAAY;AACZ,aAAW,IAAI,iBAAiB,EAAE;AAClC,SAAO,IAAI,sBAAsB,EAAE;AACrC;AAIA,CA5DC,cA4Dc;AACb,WAAS,IAAI,qBAAqB,EAAE;AACpC,UAAQ;AACV;AAEA,CAjEC,cAiEc,UAAU,EAAE,CA5B1B;AA6BC,WAAS,IAAI,qBAAqB,EAAE;AACpC,UAAQ;AACV;","names":[]}
1
+ {"version":3,"sources":["../src/components/Radio.css"],"sourcesContent":[".xd-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--xd-space-sm, 0.375rem);\n flex-wrap: wrap;\n}\n\n.xd-radio-input {\n appearance: none;\n -webkit-appearance: none;\n margin: 0;\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n position: relative;\n border-radius: 50%;\n border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);\n background-color: transparent;\n cursor: pointer;\n transition: border-color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-radio-input[data-checked=\"true\"] {\n border-color: var(--xd-color-primary, #0d9488);\n}\n\n.xd-radio-input[data-checked=\"true\"]::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: var(--xd-color-primary, #0d9488);\n transform: translate(-50%, -50%);\n}\n\n.xd-radio-input:focus-visible {\n outline: var(--xd-focus-ring-width, 2px) solid\n var(--xd-color-focus, var(--xd-color-primary, #0d9488));\n outline-offset: var(--xd-focus-ring-offset, 2px);\n}\n\n.xd-radio-label {\n font-size: var(--xd-font-size-md, 0.875rem);\n letter-spacing: var(--xd-letter-spacing-label, 0);\n text-transform: var(--xd-text-transform-label, none);\n cursor: pointer;\n}\n\n/* --- Invalid --- */\n\n.xd-radio-input[data-invalid=\"true\"] {\n border-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-radio-input[data-invalid=\"true\"]:focus-visible {\n outline-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-radio-error {\n flex-basis: 100%;\n font-size: var(--xd-font-size-sm, 0.8125rem);\n color: var(--xd-color-destructive, #dc2626);\n}\n\n/* --- Disabled --- */\n\n.xd-radio-input:disabled {\n opacity: var(--xd-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.xd-radio-input:disabled + .xd-radio-label {\n opacity: var(--xd-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI,aAAa,EAAE;AACxB,aAAW;AACb;AAEA,CAAC;AACC,cAAY;AACZ,sBAAoB;AACpB,UAAQ;AACR,eAAa;AACb,SAAO;AACP,UAAQ;AACR,YAAU;AACV,iBAAe;AACf,UAAQ,IAAI,sBAAsB,EAAE,KAAK,MAAM,IAAI,iBAAiB,EAAE;AACtE,oBAAkB;AAClB,UAAQ;AACR,cAAY,aAAa,IAAI,gBAAgB,EAAE,MAAM;AACvD;AAEA,CAfC,cAec,CAAC;AACd,gBAAc,IAAI,kBAAkB,EAAE;AACxC;AAEA,CAnBC,cAmBc,CAAC,kBAAoB;AAClC,WAAS;AACT,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,oBAAkB,IAAI,kBAAkB,EAAE;AAC1C,aAAW,UAAU,IAAI,EAAE;AAC7B;AAEA,CA/BC,cA+Bc;AACb,WAAS,IAAI,qBAAqB,EAAE,KAAK,MACvC,IAAI,gBAAgB,EAAE,IAAI,kBAAkB,EAAE;AAChD,kBAAgB,IAAI,sBAAsB,EAAE;AAC9C;AAEA,CAAC;AACC,aAAW,IAAI,iBAAiB,EAAE;AAClC,kBAAgB,IAAI,yBAAyB,EAAE;AAC/C,kBAAgB,IAAI,yBAAyB,EAAE;AAC/C,UAAQ;AACV;AAIA,CA9CC,cA8Cc,CAAC;AACd,gBAAc,IAAI,sBAAsB,EAAE;AAC5C;AAEA,CAlDC,cAkDc,CAAC,kBAAoB;AAClC,iBAAe,IAAI,sBAAsB,EAAE;AAC7C;AAEA,CAAC;AACC,cAAY;AACZ,aAAW,IAAI,iBAAiB,EAAE;AAClC,SAAO,IAAI,sBAAsB,EAAE;AACrC;AAIA,CA9DC,cA8Dc;AACb,WAAS,IAAI,qBAAqB,EAAE;AACpC,UAAQ;AACV;AAEA,CAnEC,cAmEc,UAAU,EAAE,CA9B1B;AA+BC,WAAS,IAAI,qBAAqB,EAAE;AACpC,UAAQ;AACV;","names":[]}
@@ -0,0 +1,3 @@
1
+ declare function getRadio(name?: string | RegExp): HTMLElement;
2
+
3
+ export { getRadio };
@@ -0,0 +1,3 @@
1
+ declare function getRadio(name?: string | RegExp): HTMLElement;
2
+
3
+ export { getRadio };
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ var react = require('@testing-library/react');
4
+
5
+ // src/test-utils.ts
6
+ function getRadio(name) {
7
+ return react.screen.getByRole("radio", name === void 0 ? void 0 : { name });
8
+ }
9
+
10
+ exports.getRadio = getRadio;
11
+ //# sourceMappingURL=test-utils.js.map
12
+ //# sourceMappingURL=test-utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/test-utils.ts"],"names":["screen"],"mappings":";;;;;AAEO,SAAS,SAAS,IAAA,EAAqC;AAC5D,EAAA,OAAOA,YAAA,CAAO,UAAU,OAAA,EAAS,IAAA,KAAS,SAAY,MAAA,GAAY,EAAE,MAAM,CAAA;AAC5E","file":"test-utils.js","sourcesContent":["import { screen } from '@testing-library/react';\n\nexport function getRadio(name?: string | RegExp): HTMLElement {\n return screen.getByRole('radio', name === undefined ? undefined : { name });\n}\n"]}
@@ -0,0 +1,10 @@
1
+ import { screen } from '@testing-library/react';
2
+
3
+ // src/test-utils.ts
4
+ function getRadio(name) {
5
+ return screen.getByRole("radio", name === void 0 ? void 0 : { name });
6
+ }
7
+
8
+ export { getRadio };
9
+ //# sourceMappingURL=test-utils.mjs.map
10
+ //# sourceMappingURL=test-utils.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/test-utils.ts"],"names":[],"mappings":";;;AAEO,SAAS,SAAS,IAAA,EAAqC;AAC5D,EAAA,OAAO,MAAA,CAAO,UAAU,OAAA,EAAS,IAAA,KAAS,SAAY,MAAA,GAAY,EAAE,MAAM,CAAA;AAC5E","file":"test-utils.mjs","sourcesContent":["import { screen } from '@testing-library/react';\n\nexport function getRadio(name?: string | RegExp): HTMLElement {\n return screen.getByRole('radio', name === undefined ? undefined : { name });\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asnewyla/radio",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "Styled radio with label, validation error display, and accessibility",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -20,7 +20,12 @@
20
20
  "import": "./dist/index.mjs",
21
21
  "require": "./dist/index.js"
22
22
  },
23
- "./styles.css": "./dist/index.css"
23
+ "./styles.css": "./dist/index.css",
24
+ "./test-utils": {
25
+ "types": "./dist/test-utils.d.ts",
26
+ "import": "./dist/test-utils.mjs",
27
+ "require": "./dist/test-utils.js"
28
+ }
24
29
  },
25
30
  "files": [
26
31
  "dist"
@@ -37,7 +42,17 @@
37
42
  ],
38
43
  "peerDependencies": {
39
44
  "react": "^18.0.0 || ^19.0.0",
40
- "react-dom": "^18.0.0 || ^19.0.0"
45
+ "react-dom": "^18.0.0 || ^19.0.0",
46
+ "@testing-library/react": "^16.0.0",
47
+ "@testing-library/user-event": "^14.5.0"
48
+ },
49
+ "peerDependenciesMeta": {
50
+ "@testing-library/react": {
51
+ "optional": true
52
+ },
53
+ "@testing-library/user-event": {
54
+ "optional": true
55
+ }
41
56
  },
42
57
  "dependencies": {
43
58
  "@asnewyla/unstyled-radio": "0.2.0"