@planningcenter/tapestry 2.9.0 → 2.9.1-rc.0
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/components/checkbox/Checkbox.d.ts +16 -4
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.js +5 -2
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/reactRender.css +6 -12
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +6 -12
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/unstable.css +6 -12
- package/dist/unstable.css.map +1 -1
- package/package.json +2 -2
|
@@ -1,20 +1,32 @@
|
|
|
1
1
|
import "./index.css";
|
|
2
2
|
import React, { InputHTMLAttributes } from "react";
|
|
3
3
|
export type CheckboxSize = "md" | "sm";
|
|
4
|
-
|
|
4
|
+
interface CheckboxBaseProps {
|
|
5
5
|
description?: string;
|
|
6
6
|
indeterminate?: boolean;
|
|
7
7
|
invalid?: boolean;
|
|
8
|
-
label: string;
|
|
9
8
|
size?: CheckboxSize;
|
|
10
9
|
}
|
|
10
|
+
interface CheckboxWithLabel extends CheckboxBaseProps {
|
|
11
|
+
"aria-labelledby"?: never;
|
|
12
|
+
label: string;
|
|
13
|
+
}
|
|
14
|
+
interface CheckboxWithAriaLabelledBy extends CheckboxBaseProps {
|
|
15
|
+
"aria-labelledby": string;
|
|
16
|
+
label?: never;
|
|
17
|
+
}
|
|
18
|
+
export type CheckboxProps = CheckboxWithLabel | CheckboxWithAriaLabelledBy;
|
|
11
19
|
export type CheckboxElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof CheckboxProps | "type"> & CheckboxProps;
|
|
12
20
|
/**
|
|
13
21
|
* A checkbox component that renders as a checkbox input with label.
|
|
14
22
|
* Supports various sizes, error states, and disabled states.
|
|
15
|
-
*
|
|
23
|
+
*
|
|
24
|
+
* **Required:** You must provide either:
|
|
25
|
+
* - `label` - Label text for the checkbox
|
|
26
|
+
* - `aria-labelledby` - ID of an external element that provides the label
|
|
16
27
|
*
|
|
17
28
|
* @component
|
|
18
29
|
*/
|
|
19
|
-
export declare const Checkbox: React.ForwardRefExoticComponent<
|
|
30
|
+
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxElementProps & React.RefAttributes<HTMLInputElement>>;
|
|
31
|
+
export {};
|
|
20
32
|
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAe,MAAM,OAAO,CAAA;AAI3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAe,MAAM,OAAO,CAAA;AAI3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,UAAU,iBAAiB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,0BAA2B,SAAQ,iBAAiB;IAC5D,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,0BAA0B,CAAA;AAE1E,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,aAAa,GAAG,MAAM,CAC7B,GACC,aAAa,CAAA;AAEf;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,+FAqEpB,CAAA"}
|
|
@@ -6,7 +6,10 @@ import { useId } from '../../utilities/useId.js';
|
|
|
6
6
|
/**
|
|
7
7
|
* A checkbox component that renders as a checkbox input with label.
|
|
8
8
|
* Supports various sizes, error states, and disabled states.
|
|
9
|
-
*
|
|
9
|
+
*
|
|
10
|
+
* **Required:** You must provide either:
|
|
11
|
+
* - `label` - Label text for the checkbox
|
|
12
|
+
* - `aria-labelledby` - ID of an external element that provides the label
|
|
10
13
|
*
|
|
11
14
|
* @component
|
|
12
15
|
*/
|
|
@@ -28,7 +31,7 @@ const Checkbox = forwardRef(({ className, description, id, indeterminate = false
|
|
|
28
31
|
const checkboxId = id || `tds-checkbox-${stableId}`;
|
|
29
32
|
return (React.createElement("div", { className: combinedClassName },
|
|
30
33
|
React.createElement("input", { ...restProps, "aria-describedby": description ? `${checkboxId}-description` : undefined, "aria-invalid": invalid, id: checkboxId, ref: callbackRef, type: "checkbox" }),
|
|
31
|
-
React.createElement("label", { htmlFor: checkboxId }, label),
|
|
34
|
+
label && React.createElement("label", { htmlFor: checkboxId }, label),
|
|
32
35
|
description && (React.createElement("p", { id: `${checkboxId}-description`, className: "tds-checkbox-description" },
|
|
33
36
|
React.createElement(Icon, { className: "tds-checkbox-description-invalid-icon", symbol: "general#exclamation-triangle", "aria-hidden": true }),
|
|
34
37
|
description))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nimport { useId } from \"../../utilities/useId\"\n\nexport type CheckboxSize = \"md\" | \"sm\"\n\
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nimport { useId } from \"../../utilities/useId\"\n\nexport type CheckboxSize = \"md\" | \"sm\"\n\ninterface CheckboxBaseProps {\n description?: string\n indeterminate?: boolean\n invalid?: boolean\n size?: CheckboxSize\n}\n\ninterface CheckboxWithLabel extends CheckboxBaseProps {\n \"aria-labelledby\"?: never\n label: string\n}\n\ninterface CheckboxWithAriaLabelledBy extends CheckboxBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type CheckboxProps = CheckboxWithLabel | CheckboxWithAriaLabelledBy\n\nexport type CheckboxElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof CheckboxProps | \"type\"\n> &\n CheckboxProps\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n *\n * **Required:** You must provide either:\n * - `label` - Label text for the checkbox\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * @component\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n (\n {\n className,\n description,\n id,\n indeterminate = false,\n invalid,\n label,\n size = \"md\",\n ...restProps\n }: CheckboxElementProps,\n ref\n ) => {\n const callbackRef = useCallback(\n (element: HTMLInputElement | null) => {\n if (element) {\n element.indeterminate = indeterminate\n }\n\n // Handle the forwarded ref\n if (typeof ref === \"function\") {\n ref(element)\n } else if (ref && typeof ref === \"object\") {\n ref.current = element\n }\n },\n [ref, indeterminate]\n )\n\n const combinedClassName = classNames(\n \"tds-checkbox\",\n size && size === \"sm\" && `tds-checkbox--sm`,\n invalid && \"tds-checkbox--invalid\",\n className\n )\n\n const stableId = useId()\n const checkboxId = id || `tds-checkbox-${stableId}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={\n description ? `${checkboxId}-description` : undefined\n }\n aria-invalid={invalid}\n id={checkboxId}\n ref={callbackRef}\n type=\"checkbox\"\n />\n {label && <label htmlFor={checkboxId}>{label}</label>}\n {description && (\n <p\n id={`${checkboxId}-description`}\n className=\"tds-checkbox-description\"\n >\n <Icon\n className=\"tds-checkbox-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":[],"mappings":";;;;;AAmCA;;;;;;;;;AASG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACS,EACvB,GAAG,KACD;AACF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,OAAgC,KAAI;QACnC,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,CAAC,aAAa,GAAG,aAAa;QACvC;;AAGA,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC7B,GAAG,CAAC,OAAO,CAAC;QACd;AAAO,aAAA,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AACzC,YAAA,GAAG,CAAC,OAAO,GAAG,OAAO;QACvB;AACF,IAAA,CAAC,EACD,CAAC,GAAG,EAAE,aAAa,CAAC,CACrB;IAED,MAAM,iBAAiB,GAAG,UAAU,CAClC,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,gBAAA,CAAkB,EAC3C,OAAO,IAAI,uBAAuB,EAClC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,UAAU,GAAG,EAAE,IAAI,CAAA,aAAA,EAAgB,QAAQ,EAAE;AAEnD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/B,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EAEX,WAAW,GAAG,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,GAAG,SAAS,EAAA,cAAA,EAEzC,OAAO,EACrB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EAAA,CACf;AACD,QAAA,KAAK,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;QACpD,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,EAC/B,SAAS,EAAC,0BAA0B,EAAA;YAEpC,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,uCAAuC,EACjD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
package/dist/reactRender.css
CHANGED
|
@@ -2097,10 +2097,9 @@ a[class="tds-btn"]{
|
|
|
2097
2097
|
|
|
2098
2098
|
position:relative;
|
|
2099
2099
|
display:inline-grid;
|
|
2100
|
-
grid-template-
|
|
2101
|
-
grid-
|
|
2102
|
-
|
|
2103
|
-
column-gap:var(--t-spacing-1);
|
|
2100
|
+
grid-template-columns:auto;
|
|
2101
|
+
grid-auto-columns:1fr;
|
|
2102
|
+
gap:var(--t-spacing-fourth) var(--t-spacing-1);
|
|
2104
2103
|
line-height:var(--tds-checkbox-line-height);
|
|
2105
2104
|
cursor:var(--tds-checkbox-cursor);
|
|
2106
2105
|
-webkit-user-select:none;
|
|
@@ -2109,20 +2108,15 @@ a[class="tds-btn"]{
|
|
|
2109
2108
|
}
|
|
2110
2109
|
|
|
2111
2110
|
.tds-checkbox label{
|
|
2112
|
-
grid-area:
|
|
2111
|
+
grid-area:1 / 2;
|
|
2113
2112
|
font-size:var(--tds-checkbox-font-size);
|
|
2114
2113
|
font-weight:var(--t-font-weight-normal);
|
|
2115
2114
|
color:var(--tds-checkbox-label-color);
|
|
2116
2115
|
cursor:var(--tds-checkbox-cursor);
|
|
2117
2116
|
}
|
|
2118
2117
|
|
|
2119
|
-
.tds-checkbox:has(.tds-checkbox-description){
|
|
2120
|
-
row-gap:var(--t-spacing-fourth);
|
|
2121
|
-
}
|
|
2122
|
-
|
|
2123
2118
|
.tds-checkbox input[type="checkbox"]{
|
|
2124
2119
|
position:relative;
|
|
2125
|
-
grid-area:input;
|
|
2126
2120
|
width:1em;
|
|
2127
2121
|
height:1em;
|
|
2128
2122
|
margin:calc((1lh - 1em) / 2) 0 0;
|
|
@@ -2194,7 +2188,7 @@ a[class="tds-btn"]{
|
|
|
2194
2188
|
}
|
|
2195
2189
|
|
|
2196
2190
|
.tds-checkbox:has(input:checked){
|
|
2197
|
-
--tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K")
|
|
2191
|
+
--tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
|
|
2198
2192
|
}
|
|
2199
2193
|
|
|
2200
2194
|
.tds-checkbox:has(input:indeterminate){
|
|
@@ -2243,7 +2237,7 @@ a[class="tds-btn"]{
|
|
|
2243
2237
|
|
|
2244
2238
|
.tds-checkbox-description{
|
|
2245
2239
|
display:flex;
|
|
2246
|
-
grid-area:
|
|
2240
|
+
grid-area:2 / 2;
|
|
2247
2241
|
gap:4px;
|
|
2248
2242
|
align-items:flex-start;
|
|
2249
2243
|
margin:0;
|