@chai-ui/react 0.1.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.
Files changed (55) hide show
  1. package/DESIGN.md +6 -1
  2. package/README.md +69 -6
  3. package/dist/Composer.d.ts +19 -2
  4. package/dist/Composer.d.ts.map +1 -1
  5. package/dist/Composer.js +36 -10
  6. package/dist/Composer.js.map +1 -1
  7. package/dist/EditCard.d.ts +52 -0
  8. package/dist/EditCard.d.ts.map +1 -0
  9. package/dist/EditCard.js +360 -0
  10. package/dist/EditCard.js.map +1 -0
  11. package/dist/ResultCard.d.ts +2 -1
  12. package/dist/ResultCard.d.ts.map +1 -1
  13. package/dist/ResultCard.js +19 -63
  14. package/dist/ResultCard.js.map +1 -1
  15. package/dist/icons.d.ts +27 -0
  16. package/dist/icons.d.ts.map +1 -0
  17. package/dist/icons.js +50 -0
  18. package/dist/icons.js.map +1 -0
  19. package/dist/index.d.ts +3 -2
  20. package/dist/index.d.ts.map +1 -1
  21. package/dist/index.js +2 -1
  22. package/dist/index.js.map +1 -1
  23. package/dist/media-actions.d.ts +15 -0
  24. package/dist/media-actions.d.ts.map +1 -0
  25. package/dist/media-actions.js +47 -0
  26. package/dist/media-actions.js.map +1 -0
  27. package/dist/page-slide.d.ts +32 -0
  28. package/dist/page-slide.d.ts.map +1 -0
  29. package/dist/page-slide.js +43 -0
  30. package/dist/page-slide.js.map +1 -0
  31. package/dist/primitives/Pagination.d.ts +3 -1
  32. package/dist/primitives/Pagination.d.ts.map +1 -1
  33. package/dist/primitives/Pagination.js +2 -2
  34. package/dist/primitives/Pagination.js.map +1 -1
  35. package/dist/regions.d.ts +3 -0
  36. package/dist/regions.d.ts.map +1 -0
  37. package/dist/regions.js +7 -0
  38. package/dist/regions.js.map +1 -0
  39. package/dist/style.css +508 -82
  40. package/dist/useComposer.d.ts +22 -1
  41. package/dist/useComposer.d.ts.map +1 -1
  42. package/dist/useComposer.js +126 -24
  43. package/dist/useComposer.js.map +1 -1
  44. package/package.json +3 -3
  45. package/src/Composer.tsx +101 -13
  46. package/src/EditCard.tsx +688 -0
  47. package/src/ResultCard.tsx +60 -125
  48. package/src/icons.tsx +115 -0
  49. package/src/index.ts +8 -0
  50. package/src/media-actions.ts +45 -0
  51. package/src/page-slide.tsx +82 -0
  52. package/src/primitives/Pagination.tsx +4 -2
  53. package/src/regions.ts +7 -0
  54. package/src/style.css +508 -82
  55. package/src/useComposer.ts +147 -18
@@ -4,6 +4,8 @@ interface PaginationProps {
4
4
  onChange: (index: number) => void;
5
5
  /** Accessible name for the nav landmark, e.g. "Results". */
6
6
  label: string;
7
+ /** What one page is, for each dot's name ("Result 2 of 3"). Defaults to "Result". */
8
+ itemLabel?: string;
7
9
  disabled?: boolean;
8
10
  }
9
11
  /**
@@ -14,6 +16,6 @@ interface PaginationProps {
14
16
  * any one component, so every paginated surface renders the same pager
15
17
  * rather than each growing its own.
16
18
  */
17
- export declare function Pagination({ count, index, onChange, label, disabled }: PaginationProps): import("react").JSX.Element;
19
+ export declare function Pagination({ count, index, onChange, label, itemLabel, disabled }: PaginationProps): import("react").JSX.Element;
18
20
  export {};
19
21
  //# sourceMappingURL=Pagination.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/primitives/Pagination.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAqBtF"}
1
+ {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/primitives/Pagination.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAoB,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAqB5G"}
@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
7
  * any one component, so every paginated surface renders the same pager
8
8
  * rather than each growing its own.
9
9
  */
10
- export function Pagination({ count, index, onChange, label, disabled }) {
11
- return (_jsxs("nav", { className: "chai-pagination", "aria-label": label, style: { "--chai-pagination-fill": `${((index + 1) / count) * 100}%` }, children: [_jsx("span", { className: "chai-pagination__track", "aria-hidden": "true" }), Array.from({ length: count }, (_, i) => (_jsx("button", { type: "button", className: `chai-pagination__dot${i <= index ? " chai-pagination__dot--filled" : ""}`, "aria-current": i === index, "aria-label": `Result ${i + 1} of ${count}`, disabled: disabled, onClick: () => onChange(i) }, i)))] }));
10
+ export function Pagination({ count, index, onChange, label, itemLabel = "Result", disabled }) {
11
+ return (_jsxs("nav", { className: "chai-pagination", "aria-label": label, style: { "--chai-pagination-fill": `${((index + 1) / count) * 100}%` }, children: [_jsx("span", { className: "chai-pagination__track", "aria-hidden": "true" }), Array.from({ length: count }, (_, i) => (_jsx("button", { type: "button", className: `chai-pagination__dot${i <= index ? " chai-pagination__dot--filled" : ""}`, "aria-current": i === index, "aria-label": `${itemLabel} ${i + 1} of ${count}`, disabled: disabled, onClick: () => onChange(i) }, i)))] }));
12
12
  }
13
13
  //# sourceMappingURL=Pagination.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/primitives/Pagination.tsx"],"names":[],"mappings":";AAWA;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAmB;IACrF,OAAO,CACL,eACE,SAAS,EAAC,iBAAiB,gBACf,KAAK,EACjB,KAAK,EAAE,EAAE,wBAAwB,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,GAAG,EAAmB,aAEvF,eAAM,SAAS,EAAC,wBAAwB,iBAAa,MAAM,GAAG,EAC7D,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACvC,iBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,uBAAuB,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE,EAAE,kBACvE,CAAC,KAAK,KAAK,gBACb,UAAU,CAAC,GAAG,CAAC,OAAO,KAAK,EAAE,EACzC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IANrB,CAAC,CAON,CACH,CAAC,IACE,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/primitives/Pagination.tsx"],"names":[],"mappings":";AAaA;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAmB;IAC3G,OAAO,CACL,eACE,SAAS,EAAC,iBAAiB,gBACf,KAAK,EACjB,KAAK,EAAE,EAAE,wBAAwB,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,GAAG,EAAmB,aAEvF,eAAM,SAAS,EAAC,wBAAwB,iBAAa,MAAM,GAAG,EAC7D,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACvC,iBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,uBAAuB,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE,EAAE,kBACvE,CAAC,KAAK,KAAK,gBACb,GAAG,SAAS,IAAI,CAAC,GAAG,CAAC,OAAO,KAAK,EAAE,EAC/C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IANrB,CAAC,CAON,CACH,CAAC,IACE,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,3 @@
1
+ /** The color token for a region number. Numbers past the last color start over at the first. */
2
+ export declare function regionColor(number: number): string;
3
+ //# sourceMappingURL=regions.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"regions.d.ts","sourceRoot":"","sources":["../src/regions.ts"],"names":[],"mappings":"AAGA,gGAAgG;AAChG,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAElD"}
@@ -0,0 +1,7 @@
1
+ /** How many region colors the tokens define (`--chai-color-semantic-region-1` to `-6`). */
2
+ const REGION_COLOR_COUNT = 6;
3
+ /** The color token for a region number. Numbers past the last color start over at the first. */
4
+ export function regionColor(number) {
5
+ return `var(--chai-color-semantic-region-${((Math.max(1, number) - 1) % REGION_COLOR_COUNT) + 1})`;
6
+ }
7
+ //# sourceMappingURL=regions.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"regions.js","sourceRoot":"","sources":["../src/regions.ts"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAE7B,gGAAgG;AAChG,MAAM,UAAU,WAAW,CAAC,MAAc;IACxC,OAAO,oCAAoC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC;AACrG,CAAC"}