@planningcenter/tapestry 2.8.0 → 2.9.0-rc.10

package/dist/components/toggle-switch/ToggleSwitch.d.ts

@@ -0,0 +1,33 @@
+import "./index.css";
+import React, { InputHTMLAttributes } from "react";
+export type ToggleSwitchSize = "md" | "sm";
+interface ToggleSwitchBaseProps {
+    "aria-invalid"?: never;
+    "aria-label"?: never;
+    "aria-required"?: never;
+    description?: string;
+    required?: never;
+    size?: ToggleSwitchSize;
+}
+interface ToggleSwitchWithLabel extends ToggleSwitchBaseProps {
+    "aria-labelledby"?: never;
+    hideLabel?: boolean;
+    label: string;
+}
+interface ToggleSwitchWithAriaLabelledBy extends ToggleSwitchBaseProps {
+    "aria-labelledby": string;
+    hideLabel?: never;
+    label?: never;
+}
+export type ToggleSwitchProps = ToggleSwitchWithLabel | ToggleSwitchWithAriaLabelledBy;
+export type ToggleSwitchElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof ToggleSwitchProps | "type" | "required" | "aria-required"> & ToggleSwitchProps;
+/**
+ * A toggle switch component that renders as a checkbox input styled as a switch.
+ *
+ * **Required:** You must provide either:
+ * - `label` - Label text for the switch (optionally use `hideLabel` to make it invisible but still accessible)
+ * - `aria-labelledby` - ID of an external element that provides the label
+ */
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchElementProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=ToggleSwitch.d.ts.map

package/dist/components/toggle-switch/ToggleSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAI9D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,IAAI,CAAC,EAAE,gBAAgB,CAAA;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,8BAA+B,SAAQ,qBAAqB;IACpE,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,iBAAiB,GACzB,qBAAqB,GACrB,8BAA8B,CAAA;AAElC,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,CAChE,GACC,iBAAiB,CAAA;AAEnB;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,mGA0DxB,CAAA"}

package/dist/components/toggle-switch/ToggleSwitch.js

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+import { useId } from '../../utilities/useId.js';
+
+/**
+ * A toggle switch component that renders as a checkbox input styled as a switch.
+ *
+ * **Required:** You must provide either:
+ * - `label` - Label text for the switch (optionally use `hideLabel` to make it invisible but still accessible)
+ * - `aria-labelledby` - ID of an external element that provides the label
+ */
+const ToggleSwitch = forwardRef(({ "aria-describedby": ariaDescribedby, checked, className, description, hideLabel = false, id, label, size = "md", ...restProps }, ref) => {
+    const combinedClassName = classNames("tds-toggle-switch", size && size === "sm" && `tds-toggle-switch--sm`, hideLabel && `tds-toggle-switch--hide-label`, className);
+    const stableId = useId();
+    const toggleSwitchId = id || `tds-toggle-switch-${stableId}`;
+    return (React.createElement("div", { className: combinedClassName },
+        React.createElement("div", { className: "tds-toggle-switch-track", "aria-hidden": "true" }),
+        React.createElement("input", { ...restProps, id: toggleSwitchId, type: "checkbox", role: "switch", "aria-checked": checked, "aria-label": hideLabel ? label : undefined, "aria-describedby": description && !hideLabel
+                ? `${toggleSwitchId}-description`
+                : ariaDescribedby, checked: checked, ref: ref }),
+        label && !hideLabel && React.createElement("label", { htmlFor: toggleSwitchId }, label),
+        description && !hideLabel && (React.createElement("p", { id: `${toggleSwitchId}-description`, className: "tds-toggle-switch-description" }, description))));
+});
+ToggleSwitch.displayName = "ToggleSwitch";
+
+export { ToggleSwitch };
+//# sourceMappingURL=ToggleSwitch.js.map

package/dist/components/toggle-switch/ToggleSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.js","sources":["../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nimport { useId } from \"../../utilities/useId\"\n\nexport type ToggleSwitchSize = \"md\" | \"sm\"\n\ninterface ToggleSwitchBaseProps {\n  \"aria-invalid\"?: never\n  \"aria-label\"?: never\n  \"aria-required\"?: never\n  description?: string\n  required?: never\n  size?: ToggleSwitchSize\n}\n\ninterface ToggleSwitchWithLabel extends ToggleSwitchBaseProps {\n  \"aria-labelledby\"?: never\n  hideLabel?: boolean\n  label: string\n}\n\ninterface ToggleSwitchWithAriaLabelledBy extends ToggleSwitchBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type ToggleSwitchProps =\n  | ToggleSwitchWithLabel\n  | ToggleSwitchWithAriaLabelledBy\n\nexport type ToggleSwitchElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof ToggleSwitchProps | \"type\" | \"required\" | \"aria-required\"\n> &\n  ToggleSwitchProps\n\n/**\n * A toggle switch component that renders as a checkbox input styled as a switch.\n *\n * **Required:** You must provide either:\n * - `label` - Label text for the switch (optionally use `hideLabel` to make it invisible but still accessible)\n * - `aria-labelledby` - ID of an external element that provides the label\n */\nexport const ToggleSwitch = forwardRef<\n  HTMLInputElement,\n  ToggleSwitchElementProps\n>(\n  (\n    {\n      \"aria-describedby\": ariaDescribedby,\n      checked,\n      className,\n      description,\n      hideLabel = false,\n      id,\n      label,\n      size = \"md\",\n      ...restProps\n    }: ToggleSwitchElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      \"tds-toggle-switch\",\n      size && size === \"sm\" && `tds-toggle-switch--sm`,\n      hideLabel && `tds-toggle-switch--hide-label`,\n      className\n    )\n\n    const stableId = useId()\n    const toggleSwitchId = id || `tds-toggle-switch-${stableId}`\n\n    return (\n      <div className={combinedClassName}>\n        <div className=\"tds-toggle-switch-track\" aria-hidden=\"true\"></div>\n        <input\n          {...restProps}\n          id={toggleSwitchId}\n          type=\"checkbox\"\n          role=\"switch\"\n          aria-checked={checked}\n          aria-label={hideLabel ? label : undefined}\n          aria-describedby={\n            description && !hideLabel\n              ? `${toggleSwitchId}-description`\n              : ariaDescribedby\n          }\n          checked={checked}\n          ref={ref}\n        />\n        {label && !hideLabel && <label htmlFor={toggleSwitchId}>{label}</label>}\n        {description && !hideLabel && (\n          <p\n            id={`${toggleSwitchId}-description`}\n            className=\"tds-toggle-switch-description\"\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nToggleSwitch.displayName = \"ToggleSwitch\"\n"],"names":[],"mappings":";;;;AAwCA;;;;;;AAMG;AACI,MAAM,YAAY,GAAG,UAAU,CAIpC,CACE,EACE,kBAAkB,EAAE,eAAe,EACnC,OAAO,EACP,SAAS,EACT,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACa,EAC3B,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAClC,mBAAmB,EACnB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,qBAAA,CAAuB,EAChD,SAAS,IAAI,+BAA+B,EAC5C,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,cAAc,GAAG,EAAE,IAAI,CAAA,kBAAA,EAAqB,QAAQ,EAAE;AAE5D,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,aAAA,EAAa,MAAM,EAAA,CAAO;AAClE,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EACb,EAAE,EAAE,cAAc,EAClB,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,OAAO,EAAA,YAAA,EACT,SAAS,GAAG,KAAK,GAAG,SAAS,EAAA,kBAAA,EAEvC,WAAW,IAAI,CAAC;kBACZ,CAAA,EAAG,cAAc,CAAA,YAAA;kBACjB,eAAe,EAErB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EAAA,CACR;QACD,KAAK,IAAI,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,cAAc,EAAA,EAAG,KAAK,CAAS;QACtE,WAAW,IAAI,CAAC,SAAS,KACxB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,cAAc,cAAc,EACnC,SAAS,EAAC,+BAA+B,EAAA,EAExC,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}