@planningcenter/tapestry 2.8.0-rc.2 → 2.8.0-rc.3

package/dist/components/checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAe,MAAM,OAAO,CAAA;AAE3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,aAAa,GAAG,MAAM,CAC7B,GACC,aAAa,CAAA;AAwBf;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,0KAmEpB,CAAA"}
+{"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;AAE3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,aAAa,GAAG,MAAM,CAC7B,GACC,aAAa,CAAA;AAwBf;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,0KAwEpB,CAAA"}

package/dist/components/checkbox/Checkbox.js

@@ -1,3 +1,4 @@
+import Icon from '../../utilities/Icon.js';
 import classNames from 'classnames';
 import React, { forwardRef, useCallback } from 'react';
 
@@ -35,7 +36,9 @@ const Checkbox = forwardRef(({ className, description, disabled, id, indetermina
     return (React.createElement("div", { className: combinedClassName },
         React.createElement("input", { ...restProps, "aria-describedby": description ? `${checkboxId}-description` : undefined, "aria-invalid": invalid, disabled: disabled, id: checkboxId, ref: callbackRef, required: required, type: "checkbox" }),
         React.createElement("label", { htmlFor: checkboxId }, label),
-        description && (React.createElement("p", { id: `${checkboxId}-description`, className: "tds-checkbox-description" }, description))));
+        description && (React.createElement("p", { id: `${checkboxId}-description`, className: "tds-checkbox-description" },
+            React.createElement(Icon, { className: "tds-checkbox-description-invalid-icon", symbol: "general#exclamation-triangle", "aria-hidden": true }),
+            description))));
 });
 Checkbox.displayName = "Checkbox";
 

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nexport type CheckboxSize = \"md\" | \"sm\"\n\nexport interface CheckboxProps {\n  description?: string\n  disabled?: boolean\n  id?: string\n  indeterminate?: boolean\n  invalid?: boolean\n  label: string\n  required?: boolean\n  size?: CheckboxSize\n}\n\nexport type CheckboxElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof CheckboxProps | \"type\"\n> &\n  CheckboxProps\n\nlet idCounter = 0\n\nconst buildCheckboxClassName = ({\n  className,\n  invalid,\n  indeterminate,\n  size,\n}: {\n  className?: string\n  indeterminate?: boolean\n  invalid?: boolean\n  size?: CheckboxSize\n}): string => {\n  return classNames(\n    \"tds-checkbox\",\n    size && size !== \"md\" && `tds-checkbox--${size}`,\n    invalid && \"tds-checkbox--invalid\",\n    indeterminate && \"tds-checkbox--indeterminate\",\n    className\n  )\n}\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n * Label must be a string.\n *\n * @component\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n  (\n    {\n      className,\n      description,\n      disabled,\n      id,\n      indeterminate = false,\n      invalid,\n      label,\n      required = false,\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 = buildCheckboxClassName({\n      className,\n      indeterminate,\n      invalid,\n      size,\n    })\n\n    const checkboxId = id || `tds-checkbox-${idCounter++}`\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          disabled={disabled}\n          id={checkboxId}\n          ref={callbackRef}\n          required={required}\n          type=\"checkbox\"\n        />\n        <label htmlFor={checkboxId}>{label}</label>\n        {description && (\n          <p\n            id={`${checkboxId}-description`}\n            className=\"tds-checkbox-description\"\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":[],"mappings":";;;AAwBA,IAAI,SAAS,GAAG,CAAC;AAEjB,MAAM,sBAAsB,GAAG,CAAC,EAC9B,SAAS,EACT,OAAO,EACP,aAAa,EACb,IAAI,GAML,KAAY;IACX,OAAO,UAAU,CACf,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,cAAA,EAAiB,IAAI,EAAE,EAChD,OAAO,IAAI,uBAAuB,EAClC,aAAa,IAAI,6BAA6B,EAC9C,SAAS,CACV;AACH,CAAC;AAED;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,QAAQ,EACR,EAAE,EACF,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,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,sBAAsB,CAAC;QAC/C,SAAS;QACT,aAAa;QACb,OAAO;QACP,IAAI;AACL,KAAA,CAAC;IAEF,MAAM,UAAU,GAAG,EAAE,IAAI,gBAAgB,SAAS,EAAE,EAAE;AAEtD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAA,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,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EAAA,CACf;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;AAC1C,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,EAC/B,SAAS,EAAC,0BAA0B,EAAA,EAEnC,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"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\nexport type CheckboxSize = \"md\" | \"sm\"\n\nexport interface CheckboxProps {\n  description?: string\n  disabled?: boolean\n  id?: string\n  indeterminate?: boolean\n  invalid?: boolean\n  label: string\n  required?: boolean\n  size?: CheckboxSize\n}\n\nexport type CheckboxElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof CheckboxProps | \"type\"\n> &\n  CheckboxProps\n\nlet idCounter = 0\n\nconst buildCheckboxClassName = ({\n  className,\n  invalid,\n  indeterminate,\n  size,\n}: {\n  className?: string\n  indeterminate?: boolean\n  invalid?: boolean\n  size?: CheckboxSize\n}): string => {\n  return classNames(\n    \"tds-checkbox\",\n    size && size !== \"md\" && `tds-checkbox--${size}`,\n    invalid && \"tds-checkbox--invalid\",\n    indeterminate && \"tds-checkbox--indeterminate\",\n    className\n  )\n}\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n * Label must be a string.\n *\n * @component\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n  (\n    {\n      className,\n      description,\n      disabled,\n      id,\n      indeterminate = false,\n      invalid,\n      label,\n      required = false,\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 = buildCheckboxClassName({\n      className,\n      indeterminate,\n      invalid,\n      size,\n    })\n\n    const checkboxId = id || `tds-checkbox-${idCounter++}`\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          disabled={disabled}\n          id={checkboxId}\n          ref={callbackRef}\n          required={required}\n          type=\"checkbox\"\n        />\n        <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":";;;;AAyBA,IAAI,SAAS,GAAG,CAAC;AAEjB,MAAM,sBAAsB,GAAG,CAAC,EAC9B,SAAS,EACT,OAAO,EACP,aAAa,EACb,IAAI,GAML,KAAY;IACX,OAAO,UAAU,CACf,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,cAAA,EAAiB,IAAI,EAAE,EAChD,OAAO,IAAI,uBAAuB,EAClC,aAAa,IAAI,6BAA6B,EAC9C,SAAS,CACV;AACH,CAAC;AAED;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,QAAQ,EACR,EAAE,EACF,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,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,sBAAsB,CAAC;QAC/C,SAAS;QACT,aAAa;QACb,OAAO;QACP,IAAI;AACL,KAAA,CAAC;IAEF,MAAM,UAAU,GAAG,EAAE,IAAI,gBAAgB,SAAS,EAAE,EAAE;AAEtD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAA,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,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EAAA,CACf;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;QAC1C,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/components/page-header/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-nrviAsLj.js';
+import '../../tapestry-wc/dist/components/p-B61u0ZCm.js';
 import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-page-header.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-page-header-nav.js';
 

package/dist/components/sidenav/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-nrviAsLj.js';
+import '../../tapestry-wc/dist/components/p-B61u0ZCm.js';
 import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-sidenav.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-sidenav-item.js';
 import { defineCustomElement as defineCustomElement$3 } from '../../tapestry-wc/dist/components/tds-sidenav-responsive-header.js';

package/dist/reactRender.css

@@ -2087,6 +2087,8 @@ a[class="tds-btn"]{
   --tds-checkbox-description-line-height:1.35;
   --tds-checkbox-description-color:var(--t-text-color-secondary);
 
+  --tds-checkbox-description-invalid-icon-display:none;
+
   position:relative;
   display:inline-grid;
   grid-template-areas:"checkbox label" ". description";
@@ -2194,7 +2196,10 @@ a[class="tds-btn"]{
   }
 
 .tds-checkbox-description{
+  display:flex;
   grid-area:description;
+  gap:4px;
+  align-items:center;
   margin:0;
   margin-top:var(--t-spacing-fourth);
   font-size:var(--tds-checkbox-description-font-size);
@@ -2203,14 +2208,19 @@ a[class="tds-btn"]{
   cursor:text;
 }
 
+.tds-checkbox-description-invalid-icon{
+  display:var(--tds-checkbox-description-invalid-icon-display);
+}
+
 .tds-checkbox--invalid,
-.tds-checkbox:has(input:invalid){
+.tds-checkbox:has(input:user-invalid){
   --tds-checkbox-input-border-color:var(--t-border-color-button-delete);
   --tds-checkbox-input-border-color-hover:var(--t-border-color-button-delete);
   --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-hover);
   --tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid);
   --tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid);
   --tds-checkbox-description-color:var(--t-text-color-status-error);
+  --tds-checkbox-description-invalid-icon-display:inline-block;
 }
 
 .tds-checkbox:has(input:required) label::after{