@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.
- package/DESIGN.md +6 -1
- package/README.md +69 -6
- package/dist/Composer.d.ts +19 -2
- package/dist/Composer.d.ts.map +1 -1
- package/dist/Composer.js +36 -10
- package/dist/Composer.js.map +1 -1
- package/dist/EditCard.d.ts +52 -0
- package/dist/EditCard.d.ts.map +1 -0
- package/dist/EditCard.js +360 -0
- package/dist/EditCard.js.map +1 -0
- package/dist/ResultCard.d.ts +2 -1
- package/dist/ResultCard.d.ts.map +1 -1
- package/dist/ResultCard.js +19 -63
- package/dist/ResultCard.js.map +1 -1
- package/dist/icons.d.ts +27 -0
- package/dist/icons.d.ts.map +1 -0
- package/dist/icons.js +50 -0
- package/dist/icons.js.map +1 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/media-actions.d.ts +15 -0
- package/dist/media-actions.d.ts.map +1 -0
- package/dist/media-actions.js +47 -0
- package/dist/media-actions.js.map +1 -0
- package/dist/page-slide.d.ts +32 -0
- package/dist/page-slide.d.ts.map +1 -0
- package/dist/page-slide.js +43 -0
- package/dist/page-slide.js.map +1 -0
- package/dist/primitives/Pagination.d.ts +3 -1
- package/dist/primitives/Pagination.d.ts.map +1 -1
- package/dist/primitives/Pagination.js +2 -2
- package/dist/primitives/Pagination.js.map +1 -1
- package/dist/regions.d.ts +3 -0
- package/dist/regions.d.ts.map +1 -0
- package/dist/regions.js +7 -0
- package/dist/regions.js.map +1 -0
- package/dist/style.css +508 -82
- package/dist/useComposer.d.ts +22 -1
- package/dist/useComposer.d.ts.map +1 -1
- package/dist/useComposer.js +126 -24
- package/dist/useComposer.js.map +1 -1
- package/package.json +3 -3
- package/src/Composer.tsx +101 -13
- package/src/EditCard.tsx +688 -0
- package/src/ResultCard.tsx +60 -125
- package/src/icons.tsx +115 -0
- package/src/index.ts +8 -0
- package/src/media-actions.ts +45 -0
- package/src/page-slide.tsx +82 -0
- package/src/primitives/Pagination.tsx +4 -2
- package/src/regions.ts +7 -0
- package/src/style.css +508 -82
- 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,+
|
|
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":
|
|
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":";
|
|
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 @@
|
|
|
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"}
|
package/dist/regions.js
ADDED
|
@@ -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"}
|