@planningcenter/tapestry 2.0.0-rc.5 → 2.0.0-rc.6

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

@@ -0,0 +1,22 @@
+import "./index.css";
+import React, { InputHTMLAttributes } from "react";
+export type CheckboxSize = "md" | "sm" | "xs";
+export interface CheckboxProps {
+    description?: string;
+    disabled?: boolean;
+    id?: string;
+    indeterminate?: boolean;
+    invalid?: boolean;
+    label: string;
+    size?: CheckboxSize;
+}
+export type CheckboxElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof CheckboxProps | "type"> & CheckboxProps;
+/**
+ * A checkbox component that renders as a checkbox input with label.
+ * Supports various sizes, error states, and disabled states.
+ * Label must be a string.
+ *
+ * @component
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | keyof CheckboxProps> & CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +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,GAAG,IAAI,CAAA;AAE7C,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,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,0KAiEpB,CAAA"}

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import React, { forwardRef, useCallback } from 'react';
+
+let idCounter = 0;
+const buildCheckboxClassName = ({ className, invalid, indeterminate, size, }) => {
+    return classNames("tds-checkbox", size && size !== "md" && `tds-checkbox--${size}`, invalid && "tds-checkbox--invalid", indeterminate && "tds-checkbox--indeterminate", className);
+};
+/**
+ * A checkbox component that renders as a checkbox input with label.
+ * Supports various sizes, error states, and disabled states.
+ * Label must be a string.
+ *
+ * @component
+ */
+const Checkbox = forwardRef(({ className, description, disabled, id, indeterminate = false, invalid, label, size = "md", ...restProps }, ref) => {
+    const callbackRef = useCallback((element) => {
+        if (element) {
+            element.indeterminate = indeterminate;
+        }
+        // Handle the forwarded ref
+        if (typeof ref === "function") {
+            ref(element);
+        }
+        else if (ref && typeof ref === "object") {
+            ref.current = element;
+        }
+    }, [ref, indeterminate]);
+    const combinedClassName = buildCheckboxClassName({
+        className,
+        indeterminate,
+        invalid,
+        size,
+    });
+    const checkboxId = id || `tds-checkbox-${idCounter++}`;
+    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, type: "checkbox" }),
+        React.createElement("label", { htmlFor: checkboxId }, label),
+        description && (React.createElement("p", { id: `${checkboxId}-description`, className: "tds-checkbox-description" }, description))));
+});
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +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\" | \"xs\"\n\nexport interface CheckboxProps {\n  description?: string\n  disabled?: boolean\n  id?: string\n  indeterminate?: boolean\n  invalid?: boolean\n  label: string\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      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          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":";;;AAuBA,IAAI,SAAS,GAAG,CAAC,CAAA;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,CAAiB,cAAA,EAAA,IAAI,EAAE,EAChD,OAAO,IAAI,uBAAuB,EAClC,aAAa,IAAI,6BAA6B,EAC9C,SAAS,CACV,CAAA;AACH,CAAC,CAAA;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,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,CAAA;SACtC;;AAGD,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC7B,GAAG,CAAC,OAAO,CAAC,CAAA;SACb;AAAM,aAAA,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AACzC,YAAA,GAAG,CAAC,OAAO,GAAG,OAAO,CAAA;SACtB;AACH,KAAC,EACD,CAAC,GAAG,EAAE,aAAa,CAAC,CACrB,CAAA;IAED,MAAM,iBAAiB,GAAG,sBAAsB,CAAC;QAC/C,SAAS;QACT,aAAa;QACb,OAAO;QACP,IAAI;AACL,KAAA,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,EAAE,IAAI,gBAAgB,SAAS,EAAE,EAAE,CAAA;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,CAAG,EAAA,UAAU,CAAc,YAAA,CAAA,GAAG,SAAS,EAEzC,cAAA,EAAA,OAAO,EACrB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EACf,CAAA;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,CAAc,YAAA,CAAA,EAC/B,SAAS,EAAC,0BAA0B,EAEnC,EAAA,WAAW,CACV,CACL,CACG,EACP;AACH,CAAC,EACF;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+export type { CheckboxSize } from "./Checkbox";
+export { Checkbox } from "./Checkbox";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}