@planningcenter/tapestry 2.10.2-rc.0 → 2.10.2-rc.2

package/dist/components/input/Input.d.ts

@@ -0,0 +1,44 @@
+import "./index.css";
+import React, { type InputHTMLAttributes } from "react";
+export type InputSize = "lg" | "md";
+export type InputType = "email" | "number" | "password" | "search" | "tel" | "text" | "url";
+interface InputBaseProps {
+    /** If true, the input width grows to fit content (inline editing) */
+    autoWidth?: boolean;
+    /** Helper text below the input. Red when invalid. */
+    description?: string;
+    /** Triggers invalid state (red border, red description) */
+    invalid?: boolean;
+    /** Highlights all text when the field receives focus */
+    selectTextOnFocus?: boolean;
+    /** Visual size of the input */
+    size?: InputSize;
+    /** Supported input types — defaults to 'text' */
+    type?: InputType;
+}
+interface InputWithVisibleLabel extends InputBaseProps {
+    /** If true, label is rendered as aria-label instead of visible label */
+    hideLabel?: false;
+    /** Label text displayed above the input */
+    label: React.ReactNode;
+}
+interface InputWithHiddenLabel extends InputBaseProps {
+    /** If true, label is rendered as aria-label instead of visible label */
+    hideLabel: true;
+    /** Label text used as aria-label (must be string when hidden) */
+    label: string;
+}
+interface InputWithAriaLabelledBy extends InputBaseProps {
+    "aria-labelledby": string;
+    hideLabel?: never;
+    label?: never;
+}
+export type InputProps = InputWithAriaLabelledBy | InputWithHiddenLabel | InputWithVisibleLabel;
+/**
+ * Combines standard HTML input attributes with custom Input props.
+ * Omits 'size' and 'type' from HTML attributes to avoid conflict with our strict types.
+ */
+export type InputElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof InputProps | "size" | "type"> & InputProps;
+export declare const Input: React.ForwardRefExoticComponent<InputElementProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAc,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEnE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,CAAA;AAET,UAAU,cAAc;IACtB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,qBAAsB,SAAQ,cAAc;IACpD,wEAAwE;IACxE,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,oBAAqB,SAAQ,cAAc;IACnD,wEAAwE;IACxE,SAAS,EAAE,IAAI,CAAA;IACf,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAClB,uBAAuB,GACvB,oBAAoB,GACpB,qBAAqB,CAAA;AAEzB;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CACnC,GACC,UAAU,CAAA;AAEZ,eAAO,MAAM,KAAK,4FAmFjB,CAAA"}

package/dist/components/input/Input.js

@@ -0,0 +1,44 @@
+import Icon from '../../utilities/Icon.js';
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+
+const Input = forwardRef(function Input({ "aria-label": ariaLabel, autoComplete, autoWidth, className, description, hideLabel, id, invalid, label, onFocus, selectTextOnFocus, size = "md", type = "text", ...restProps }, ref) {
+    const combinedClassName = classNames("tds-input", {
+        "tds-input--auto-width": autoWidth,
+        "tds-input--invalid": invalid,
+        "tds-input--lg": size === "lg",
+    }, className);
+    const stableId = useId();
+    const inputId = id || `tds-input-${stableId}`;
+    const descriptionId = description ? `${inputId}-description` : undefined;
+    const autoCompleteBlockingProps = autoComplete === "off"
+        ? {
+            "data-1p-ignore": true,
+            "data-bwignore": true,
+            "data-form-type": "other",
+            "data-lpignore": true,
+        }
+        : {};
+    const handleFocus = selectTextOnFocus
+        ? (event) => {
+            try {
+                event.currentTarget.select();
+            }
+            catch {
+                // Some input types (e.g. number) do not support text selection.
+            }
+            onFocus?.(event);
+        }
+        : onFocus;
+    return (React.createElement("div", { className: combinedClassName },
+        !hideLabel && label ? React.createElement("label", { htmlFor: inputId }, label) : null,
+        React.createElement("input", { ...restProps, ...autoCompleteBlockingProps, "aria-describedby": descriptionId, "aria-invalid": invalid || undefined, "aria-label": hideLabel ? ariaLabel || label : ariaLabel, autoComplete: autoComplete, id: inputId, onFocus: handleFocus, ref: ref, type: type }),
+        description && (React.createElement("p", { className: "tds-input-description", id: descriptionId },
+            React.createElement(Icon, { "aria-hidden": true, className: "tds-input-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+            description))));
+});
+Input.displayName = "Input";
+
+export { Input };
+//# sourceMappingURL=Input.js.map

package/dist/components/input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type InputHTMLAttributes } from \"react\"\n\nexport type InputSize = \"lg\" | \"md\"\n\nexport type InputType =\n  | \"email\"\n  | \"number\"\n  | \"password\"\n  | \"search\"\n  | \"tel\"\n  | \"text\"\n  | \"url\"\n\ninterface InputBaseProps {\n  /** If true, the input width grows to fit content (inline editing) */\n  autoWidth?: boolean\n  /** Helper text below the input. Red when invalid. */\n  description?: string\n  /** Triggers invalid state (red border, red description) */\n  invalid?: boolean\n  /** Highlights all text when the field receives focus */\n  selectTextOnFocus?: boolean\n  /** Visual size of the input */\n  size?: InputSize\n  /** Supported input types — defaults to 'text' */\n  type?: InputType\n}\n\ninterface InputWithVisibleLabel extends InputBaseProps {\n  /** If true, label is rendered as aria-label instead of visible label */\n  hideLabel?: false\n  /** Label text displayed above the input */\n  label: React.ReactNode\n}\n\ninterface InputWithHiddenLabel extends InputBaseProps {\n  /** If true, label is rendered as aria-label instead of visible label */\n  hideLabel: true\n  /** Label text used as aria-label (must be string when hidden) */\n  label: string\n}\n\ninterface InputWithAriaLabelledBy extends InputBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type InputProps =\n  | InputWithAriaLabelledBy\n  | InputWithHiddenLabel\n  | InputWithVisibleLabel\n\n/**\n * Combines standard HTML input attributes with custom Input props.\n * Omits 'size' and 'type' from HTML attributes to avoid conflict with our strict types.\n */\nexport type InputElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof InputProps | \"size\" | \"type\"\n> &\n  InputProps\n\nexport const Input = forwardRef<HTMLInputElement, InputElementProps>(\n  function Input(\n    {\n      \"aria-label\": ariaLabel,\n      autoComplete,\n      autoWidth,\n      className,\n      description,\n      hideLabel,\n      id,\n      invalid,\n      label,\n      onFocus,\n      selectTextOnFocus,\n      size = \"md\",\n      type = \"text\",\n      ...restProps\n    }: InputElementProps,\n    ref\n  ) {\n    const combinedClassName = classNames(\n      \"tds-input\",\n      {\n        \"tds-input--auto-width\": autoWidth,\n        \"tds-input--invalid\": invalid,\n        \"tds-input--lg\": size === \"lg\",\n      },\n      className\n    )\n\n    const stableId = useId()\n    const inputId = id || `tds-input-${stableId}`\n    const descriptionId = description ? `${inputId}-description` : undefined\n\n    const autoCompleteBlockingProps =\n      autoComplete === \"off\"\n        ? {\n            \"data-1p-ignore\": true,\n            \"data-bwignore\": true,\n            \"data-form-type\": \"other\",\n            \"data-lpignore\": true,\n          }\n        : {}\n\n    const handleFocus = selectTextOnFocus\n      ? (event: React.FocusEvent<HTMLInputElement>) => {\n          try {\n            event.currentTarget.select()\n          } catch {\n            // Some input types (e.g. number) do not support text selection.\n          }\n          onFocus?.(event)\n        }\n      : onFocus\n\n    return (\n      <div className={combinedClassName}>\n        {!hideLabel && label ? <label htmlFor={inputId}>{label}</label> : null}\n        <input\n          {...restProps}\n          {...autoCompleteBlockingProps}\n          aria-describedby={descriptionId}\n          aria-invalid={invalid || undefined}\n          aria-label={hideLabel ? ariaLabel || (label as string) : ariaLabel}\n          autoComplete={autoComplete}\n          id={inputId}\n          onFocus={handleFocus}\n          ref={ref}\n          type={type}\n        />\n        {description && (\n          <p className=\"tds-input-description\" id={descriptionId}>\n            <Icon\n              aria-hidden\n              className=\"tds-input-description-invalid-icon\"\n              symbol=\"general#exclamation-triangle\"\n            />\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n"],"names":[],"mappings":";;;;;MAoEa,KAAK,GAAG,UAAU,CAC7B,SAAS,KAAK,CACZ,EACE,YAAY,EAAE,SAAS,EACvB,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,GAAG,SAAS,EACM,EACpB,GAAG,EAAA;AAEH,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX;AACE,QAAA,uBAAuB,EAAE,SAAS;AAClC,QAAA,oBAAoB,EAAE,OAAO;QAC7B,eAAe,EAAE,IAAI,KAAK,IAAI;KAC/B,EACD,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAC7C,IAAA,MAAM,aAAa,GAAG,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS;AAExE,IAAA,MAAM,yBAAyB,GAC7B,YAAY,KAAK;AACf,UAAE;AACE,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,gBAAgB,EAAE,OAAO;AACzB,YAAA,eAAe,EAAE,IAAI;AACtB;UACD,EAAE;IAER,MAAM,WAAW,GAAG;AAClB,UAAE,CAAC,KAAyC,KAAI;AAC5C,YAAA,IAAI;AACF,gBAAA,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;YAC9B;AAAE,YAAA,MAAM;;YAER;AACA,YAAA,OAAO,GAAG,KAAK,CAAC;QAClB;UACA,OAAO;AAEX,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC9B,QAAA,CAAC,SAAS,IAAI,KAAK,GAAG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,IAAG,KAAK,CAAS,GAAG,IAAI;AACtE,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,GACT,yBAAyB,sBACX,aAAa,EAAA,cAAA,EACjB,OAAO,IAAI,SAAS,EAAA,YAAA,EACtB,SAAS,GAAG,SAAS,IAAK,KAAgB,GAAG,SAAS,EAClE,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EAAA,CACV;QACD,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAE,aAAa,EAAA;YACpD,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

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

@@ -0,0 +1,4 @@
+import "./index.css";
+export type { InputElementProps, InputProps, InputSize, InputType, } from "./Input";
+export { Input } from "./Input";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,SAAS,GACV,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}