@planningcenter/tapestry 3.0.0-rc.8 → 3.0.0

package/dist/components/page-header/PageHeader.js

@@ -1,12 +1,44 @@
-import React from 'react';
+import classNames from 'classnames';
+import React, { useRef, useEffect } from 'react';
 
 function PageHeader({ children, actions, navigation, className, inactive = false, profile = false, }) {
-    const inactiveProps = inactive ? { inactive } : {};
-    const profileProps = profile ? { profile } : {};
-    return (React.createElement("tds-page-header", { ...inactiveProps, ...profileProps, class: className },
-        children,
-        actions && React.createElement("div", { slot: "actions" }, actions),
-        navigation && React.createElement("nav", { slot: "navigation" }, navigation)));
+    const hasMultiActions = actions
+        ? React.isValidElement(actions) && actions.type === React.Fragment
+            ? React.Children.count(actions.props.children) > 1
+            : React.Children.count(actions) > 1
+        : false;
+    const nav = useScrollToSelected(navigation);
+    return (React.createElement("header", { className: classNames("tds-page-header", className, {
+            "has-multi-actions": hasMultiActions,
+            "has-nav": !!navigation,
+            inactive,
+            "tds-page-header--profile": profile,
+        }) },
+        React.createElement("div", { className: "tds-page-header__title-bar" },
+            React.createElement("div", { className: "tds-page-header__primary" }, children),
+            actions && (React.createElement("div", { className: "tds-page-header__actions tds-no-print" }, actions))),
+        navigation && (React.createElement("nav", { ref: nav, className: "tds-page-header__nav tds-no-print" }, navigation))));
+}
+function useScrollToSelected(navigation) {
+    const nav = useRef(null);
+    useEffect(() => {
+        if (!nav.current)
+            return;
+        const ulElement = nav.current.querySelector("ul");
+        if (!ulElement)
+            return;
+        const selectedItem = ulElement.querySelector(".selected");
+        if (selectedItem) {
+            const bounds = selectedItem.getBoundingClientRect();
+            const ulBounds = ulElement.getBoundingClientRect();
+            if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {
+                ulElement.scrollTo({
+                    left: ulElement.scrollLeft + bounds.left - ulBounds.left,
+                });
+            }
+        }
+    }, [navigation]);
+    return nav;
 }
 
 export { PageHeader };

package/dist/components/page-header/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import React from \"react\"\n\nexport function PageHeader({\n  children,\n  actions,\n  navigation,\n  className,\n  inactive = false,\n  profile = false,\n}: {\n  /**\n   * Additional content (typically actions) that complements the primary slot.\n   */\n  actions?: React.ReactNode\n  /**\n   * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n   */\n  inactive?: boolean\n  /**\n   * Navigation for the page. Should contain an unstyled unordered list (ul)\n   * that contains a list of links or buttons.\n   */\n  navigation?: React.ReactNode\n  /**\n   * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n   */\n  profile?: boolean\n}) {\n  const inactiveProps = inactive ? { inactive } : {}\n  const profileProps = profile ? { profile } : {}\n  return (\n    <tds-page-header {...inactiveProps} {...profileProps} class={className}>\n      {children}\n      {actions && <div slot=\"actions\">{actions}</div>}\n      {navigation && <nav slot=\"navigation\">{navigation}</nav>}\n    </tds-page-header>\n  )\n}\n"],"names":[],"mappings":";;SAEgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GAwBhB,EAAA;AACC,IAAA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE;AAClD,IAAA,MAAM,YAAY,GAAG,OAAO,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;IAC/C,QACE,4CAAqB,aAAa,EAAA,GAAM,YAAY,EAAE,KAAK,EAAE,SAAS,EAAA;QACnE,QAAQ;AACR,QAAA,OAAO,IAAI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,SAAS,EAAA,EAAE,OAAO,CAAO;QAC9C,UAAU,IAAI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,YAAY,IAAE,UAAU,CAAO,CACxC;AAEtB;;;;"}
+{"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { useEffect, useRef } from \"react\"\n\nexport function PageHeader({\n  children,\n  actions,\n  navigation,\n  className,\n  inactive = false,\n  profile = false,\n}: {\n  /**\n   * Additional content (typically actions) that complements the primary slot.\n   */\n  actions?: React.ReactNode\n  /**\n   * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n   */\n  inactive?: boolean\n  /**\n   * Navigation for the page. Should contain an unstyled unordered list (ul)\n   * that contains a list of links or buttons.\n   */\n  navigation?: React.ReactNode\n  /**\n   * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n   */\n  profile?: boolean\n}) {\n  const hasMultiActions = actions\n    ? React.isValidElement(actions) && actions.type === React.Fragment\n      ? React.Children.count(actions.props.children) > 1\n      : React.Children.count(actions) > 1\n    : false\n\n  const nav = useScrollToSelected(navigation)\n\n  return (\n    <header\n      className={classNames(\"tds-page-header\", className, {\n        \"has-multi-actions\": hasMultiActions,\n        \"has-nav\": !!navigation,\n        inactive,\n        \"tds-page-header--profile\": profile,\n      })}\n    >\n      <div className=\"tds-page-header__title-bar\">\n        <div className=\"tds-page-header__primary\">{children}</div>\n        {actions && (\n          <div className=\"tds-page-header__actions tds-no-print\">{actions}</div>\n        )}\n      </div>\n      {navigation && (\n        <nav ref={nav} className=\"tds-page-header__nav tds-no-print\">\n          {navigation}\n        </nav>\n      )}\n    </header>\n  )\n}\n\nfunction useScrollToSelected(navigation: React.ReactNode) {\n  const nav = useRef<HTMLElement>(null)\n  useEffect(() => {\n    if (!nav.current) return\n    const ulElement = nav.current.querySelector(\"ul\")\n    if (!ulElement) return\n    const selectedItem = ulElement.querySelector(\".selected\")\n    if (selectedItem) {\n      const bounds = selectedItem.getBoundingClientRect()\n      const ulBounds = ulElement.getBoundingClientRect()\n      if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {\n        ulElement.scrollTo({\n          left: ulElement.scrollLeft + bounds.left - ulBounds.left,\n        })\n      }\n    }\n  }, [navigation])\n  return nav\n}\n"],"names":[],"mappings":";;;SAGgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GAwBhB,EAAA;IACC,MAAM,eAAe,GAAG;AACtB,UAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC;AACxD,cAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;cAC/C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;UAClC,KAAK;AAET,IAAA,MAAM,GAAG,GAAG,mBAAmB,CAAC,UAAU,CAAC;IAE3C,QACE,gCACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;AAClD,YAAA,mBAAmB,EAAE,eAAe;YACpC,SAAS,EAAE,CAAC,CAAC,UAAU;YACvB,QAAQ;AACR,YAAA,0BAA0B,EAAE,OAAO;SACpC,CAAC,EAAA;QAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO;YACzD,OAAO,KACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,EAAE,OAAO,CAAO,CACvE,CACG;AACL,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mCAAmC,IACzD,UAAU,CACP,CACP,CACM;AAEb;AAEA,SAAS,mBAAmB,CAAC,UAA2B,EAAA;AACtD,IAAA,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC;IACrC,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE;QAClB,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;AACjD,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;QACzD,IAAI,YAAY,EAAE;AAChB,YAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,YAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;gBAChE,SAAS,CAAC,QAAQ,CAAC;oBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,iBAAA,CAAC;YACJ;QACF;AACF,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAChB,IAAA,OAAO,GAAG;AACZ;;;;"}

package/dist/components/page-header/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-74Cc2nEh.js';
+import '../../tapestry-wc/dist/components/p-BO35mzk2.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/radio/Radio.d.ts

@@ -0,0 +1,42 @@
+import "./index.css";
+import React, { InputHTMLAttributes } from "react";
+export type RadioSize = "md" | "sm";
+interface RadioBaseProps {
+    description?: string;
+    name: string;
+    size?: RadioSize;
+}
+interface RadioWithLabel extends RadioBaseProps {
+    "aria-labelledby"?: never;
+    /**
+     * Label content for the radio. When using non-string content
+     * (e.g. JSX), it must not contain interactive elements. This
+     * includes native HTML elements such as `<a>` and `<button>`, as
+     * well as Tapestry or Tapestry-React interactive components.
+     */
+    label: React.ReactNode;
+}
+interface RadioWithAriaLabelledBy extends RadioBaseProps {
+    "aria-labelledby": string;
+    label?: never;
+}
+export type RadioProps = RadioWithLabel | RadioWithAriaLabelledBy;
+export type RadioElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof RadioProps | "type"> & RadioProps;
+/**
+ * A radio component that renders as a radio input with label.
+ * Supports various sizes.
+ * Must have a name attribute.
+ *
+ * **Required:** You must provide either:
+ * - `label` - Label content for the radio
+ * - `aria-labelledby` - ID of an external element that provides the label
+ *
+ * When using non-string content for `label` (e.g. JSX), it must not contain
+ * interactive elements. This includes native HTML elements such as `<a>` and
+ * `<button>`, as well as Tapestry or Tapestry-React interactive components.
+ *
+ * @component
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioElementProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,cAAe,SAAQ,cAAc;IAC7C,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,uBAAuB,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK,4FAuCjB,CAAA"}

package/dist/components/radio/Radio.js

@@ -0,0 +1,32 @@
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+
+/**
+ * A radio component that renders as a radio input with label.
+ * Supports various sizes.
+ * Must have a name attribute.
+ *
+ * **Required:** You must provide either:
+ * - `label` - Label content for the radio
+ * - `aria-labelledby` - ID of an external element that provides the label
+ *
+ * When using non-string content for `label` (e.g. JSX), it must not contain
+ * interactive elements. This includes native HTML elements such as `<a>` and
+ * `<button>`, as well as Tapestry or Tapestry-React interactive components.
+ *
+ * @component
+ */
+const Radio = forwardRef(({ className, description, id, label, size = "md", ...restProps }, ref) => {
+    const combinedClassName = classNames("tds-radio", size && size === "sm" && `tds-radio--sm`, className);
+    const stableId = useId();
+    const radioId = id || `tds-radio-${stableId}`;
+    return (React.createElement("div", { className: combinedClassName },
+        React.createElement("input", { ...restProps, "aria-describedby": description ? `${radioId}-description` : undefined, id: radioId, ref: ref, type: "radio" }),
+        label && React.createElement("label", { htmlFor: radioId }, label),
+        description && (React.createElement("p", { id: `${radioId}-description`, className: "tds-radio-description" }, description))));
+});
+Radio.displayName = "Radio";
+
+export { Radio };
+//# sourceMappingURL=Radio.js.map

package/dist/components/radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type RadioSize = \"md\" | \"sm\"\n\ninterface RadioBaseProps {\n  description?: string\n  name: string\n  size?: RadioSize\n}\n\ninterface RadioWithLabel extends RadioBaseProps {\n  \"aria-labelledby\"?: never\n  /**\n   * Label content for the radio. When using non-string content\n   * (e.g. JSX), it must not contain interactive elements. This\n   * includes native HTML elements such as `<a>` and `<button>`, as\n   * well as Tapestry or Tapestry-React interactive components.\n   */\n  label: React.ReactNode\n}\n\ninterface RadioWithAriaLabelledBy extends RadioBaseProps {\n  \"aria-labelledby\": string\n  label?: never\n}\n\nexport type RadioProps = RadioWithLabel | RadioWithAriaLabelledBy\n\nexport type RadioElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof RadioProps | \"type\"\n> &\n  RadioProps\n\n/**\n * A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the radio\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n *\n * @component\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n  (\n    {\n      className,\n      description,\n      id,\n      label,\n      size = \"md\",\n      ...restProps\n    }: RadioElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      \"tds-radio\",\n      size && size === \"sm\" && `tds-radio--sm`,\n      className\n    )\n\n    const stableId = useId()\n    const radioId = id || `tds-radio-${stableId}`\n\n    return (\n      <div className={combinedClassName}>\n        <input\n          {...restProps}\n          aria-describedby={description ? `${radioId}-description` : undefined}\n          id={radioId}\n          ref={ref}\n          type=\"radio\"\n        />\n        {label && <label htmlFor={radioId}>{label}</label>}\n        {description && (\n          <p id={`${radioId}-description`} className=\"tds-radio-description\">\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":[],"mappings":";;;;AAsCA;;;;;;;;;;;;;;AAcG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,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,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACD,QAAA,KAAK,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

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

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

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

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

package/dist/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,23 @@
+import "./index.css";
+import React, { FieldsetHTMLAttributes } from "react";
+export type RadioGroupSize = "md" | "sm";
+export interface RadioGroupProps {
+    description?: string;
+    invalid?: boolean;
+    label: string;
+    size?: RadioGroupSize;
+}
+export type RadioGroupElementProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, keyof RadioGroupProps> & RadioGroupProps;
+/**
+ * A radio group component that renders as a fieldset with legend.
+ * Use to group two or more Radio components.
+ * Supports label and description text, sizes, invalid, and disabled state.
+ * Label is required and must be a string. Renders as <legend>.
+ *
+ * @component
+ */
+export declare const RadioGroup: {
+    ({ children, className, description, invalid, label, size, ...restProps }: RadioGroupElementProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/radio-group/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;+EAQpB,sBAAsB;;CAiCxB,CAAA"}

package/dist/components/radio-group/RadioGroup.js

@@ -0,0 +1,29 @@
+import Icon from '../../utilities/Icon.js';
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
+import React from 'react';
+
+/**
+ * A radio group component that renders as a fieldset with legend.
+ * Use to group two or more Radio components.
+ * Supports label and description text, sizes, invalid, and disabled state.
+ * Label is required and must be a string. Renders as <legend>.
+ *
+ * @component
+ */
+const RadioGroup = ({ children, className, description, invalid, label, size = "md", ...restProps }) => {
+    const combinedClassName = classNames("tds-radio-group", size && size === "sm" && "tds-radio-group--sm", className);
+    const stableId = useId();
+    const displayDescription = description || (invalid ? "Please select an option" : undefined);
+    const descriptionId = `tds-radio-group-${stableId}-description`;
+    return (React.createElement("fieldset", { ...restProps, "aria-describedby": displayDescription ? descriptionId : undefined, "aria-invalid": invalid ? "true" : undefined, className: combinedClassName },
+        React.createElement("legend", null, label),
+        displayDescription && (React.createElement("p", { id: descriptionId, className: "tds-radio-group-description" },
+            React.createElement(Icon, { className: "tds-radio-group-description-invalid-icon", symbol: "general#exclamation-triangle", "aria-hidden": true }),
+            displayDescription)),
+        React.createElement("div", { className: "tds-radio-group-fields" }, children)));
+};
+RadioGroup.displayName = "RadioGroup";
+
+export { RadioGroup };
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/radio-group/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type RadioGroupSize = \"md\" | \"sm\"\n\nexport interface RadioGroupProps {\n  description?: string\n  invalid?: boolean\n  label: string\n  size?: RadioGroupSize\n}\n\nexport type RadioGroupElementProps = Omit<\n  FieldsetHTMLAttributes<HTMLFieldSetElement>,\n  keyof RadioGroupProps\n> &\n  RadioGroupProps\n\n/**\n * A radio group component that renders as a fieldset with legend.\n * Use to group two or more Radio components.\n * Supports label and description text, sizes, invalid, and disabled state.\n * Label is required and must be a string. Renders as <legend>.\n *\n * @component\n */\nexport const RadioGroup = ({\n  children,\n  className,\n  description,\n  invalid,\n  label,\n  size = \"md\",\n  ...restProps\n}: RadioGroupElementProps) => {\n  const combinedClassName = classNames(\n    \"tds-radio-group\",\n    size && size === \"sm\" && \"tds-radio-group--sm\",\n    className\n  )\n  const stableId = useId()\n\n  const displayDescription =\n    description || (invalid ? \"Please select an option\" : undefined)\n  const descriptionId = `tds-radio-group-${stableId}-description`\n\n  return (\n    <fieldset\n      {...restProps}\n      aria-describedby={displayDescription ? descriptionId : undefined}\n      aria-invalid={invalid ? \"true\" : undefined}\n      className={combinedClassName}\n    >\n      <legend>{label}</legend>\n      {displayDescription && (\n        <p id={descriptionId} className=\"tds-radio-group-description\">\n          <Icon\n            className=\"tds-radio-group-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n            aria-hidden\n          />\n          {displayDescription}\n        </p>\n      )}\n      <div className=\"tds-radio-group-fields\">{children}</div>\n    </fieldset>\n  )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":[],"mappings":";;;;;AAsBA;;;;;;;AAOG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACW,KAAI;AAC3B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,iBAAiB,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,qBAAqB,EAC9C,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,yBAAyB,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,QAAQ,cAAc;IAE/D,QACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,6BAA6B,EAAA;YAC3D,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,0CAA0C,EACpD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,kBAAkB,CACjB,CACL;QACD,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,EAAE,QAAQ,CAAO,CAC/C;AAEf;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/radio-group/index.d.ts

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

package/dist/components/radio-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,sBAAsB,EACtB,eAAe,EACf,cAAc,GACf,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist/components/sidenav/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-74Cc2nEh.js';
+import '../../tapestry-wc/dist/components/p-BO35mzk2.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/components/textarea/TextArea.d.ts

@@ -0,0 +1,38 @@
+import "./index.css";
+import React, { type TextareaHTMLAttributes } from "react";
+export type TextAreaResize = "auto" | "none" | "vertical";
+export type TextAreaSize = "lg" | "md";
+interface TextAreaBaseProps {
+    /** Helper text displayed below the field. Styles as error text when `invalid` is true. */
+    description?: string;
+    /** If true, applies error styling to border and description. */
+    invalid?: boolean;
+    /** Controls resize behavior. Defaults to `'vertical'`. */
+    resize?: TextAreaResize;
+    /** Specifies visible height in lines. Defaults to `3`. */
+    rows?: number;
+    /** Controls spacing and font size. Defaults to `'md'`. */
+    size?: TextAreaSize;
+}
+interface TextAreaWithVisibleLabel extends TextAreaBaseProps {
+    /** If true, label is rendered as aria-label instead of visible label */
+    hideLabel?: false;
+    /** Label text displayed above the textarea */
+    label: React.ReactNode;
+}
+interface TextAreaWithHiddenLabel extends TextAreaBaseProps {
+    /** 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 TextAreaWithAriaLabelledBy extends TextAreaBaseProps {
+    "aria-labelledby": string;
+    hideLabel?: never;
+    label?: never;
+}
+export type TextAreaCustomProps = TextAreaWithAriaLabelledBy | TextAreaWithHiddenLabel | TextAreaWithVisibleLabel;
+export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextAreaCustomProps | "rows"> & TextAreaCustomProps;
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/components/textarea/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAc,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAEtE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;AAEzD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,UAAU,iBAAiB;IACzB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0DAA0D;IAC1D,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,wBAAyB,SAAQ,iBAAiB;IAC1D,wEAAwE;IACxE,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,8CAA8C;IAC9C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,iBAAiB;IACzD,wEAAwE;IACxE,SAAS,EAAE,IAAI,CAAA;IACf,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,0BAA2B,SAAQ,iBAAiB;IAC5D,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,mBAAmB,GAC3B,0BAA0B,GAC1B,uBAAuB,GACvB,wBAAwB,CAAA;AAE5B,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,mBAAmB,GAAG,MAAM,CACnC,GACC,mBAAmB,CAAA;AAErB,eAAO,MAAM,QAAQ,2FA4DpB,CAAA"}

package/dist/components/textarea/TextArea.js

@@ -0,0 +1,27 @@
+import Icon from '../../utilities/Icon.js';
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+
+const TextArea = forwardRef(function TextArea({ "aria-label": ariaLabel, className, description, hideLabel, id, invalid, label, resize = "vertical", rows = 3, size = "md", ...restProps }, ref) {
+    const combinedClassName = classNames("tds-textarea", {
+        "tds-textarea--invalid": invalid,
+        "tds-textarea--lg": size === "lg",
+        "tds-textarea--resize-auto": resize === "auto",
+        "tds-textarea--resize-none": resize === "none",
+        "tds-textarea--resize-vertical": resize === "vertical",
+    }, className);
+    const stableId = useId();
+    const textareaId = id || `tds-textarea-${stableId}`;
+    const descriptionId = description ? `${textareaId}-description` : undefined;
+    return (React.createElement("div", { className: combinedClassName },
+        !hideLabel && label ? (React.createElement("label", { htmlFor: textareaId }, label)) : null,
+        React.createElement("textarea", { ...restProps, "aria-describedby": descriptionId, "aria-invalid": invalid || undefined, "aria-label": hideLabel ? ariaLabel || label : ariaLabel, id: textareaId, ref: ref, rows: rows }),
+        description && (React.createElement("p", { className: "tds-textarea-description", id: descriptionId },
+            React.createElement(Icon, { "aria-hidden": true, className: "tds-textarea-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+            description))));
+});
+TextArea.displayName = "TextArea";
+
+export { TextArea };
+//# sourceMappingURL=TextArea.js.map

package/dist/components/textarea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/textarea/TextArea.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type TextareaHTMLAttributes } from \"react\"\n\nexport type TextAreaResize = \"auto\" | \"none\" | \"vertical\"\n\nexport type TextAreaSize = \"lg\" | \"md\"\n\ninterface TextAreaBaseProps {\n  /** Helper text displayed below the field. Styles as error text when `invalid` is true. */\n  description?: string\n  /** If true, applies error styling to border and description. */\n  invalid?: boolean\n  /** Controls resize behavior. Defaults to `'vertical'`. */\n  resize?: TextAreaResize\n  /** Specifies visible height in lines. Defaults to `3`. */\n  rows?: number\n  /** Controls spacing and font size. Defaults to `'md'`. */\n  size?: TextAreaSize\n}\n\ninterface TextAreaWithVisibleLabel extends TextAreaBaseProps {\n  /** If true, label is rendered as aria-label instead of visible label */\n  hideLabel?: false\n  /** Label text displayed above the textarea */\n  label: React.ReactNode\n}\n\ninterface TextAreaWithHiddenLabel extends TextAreaBaseProps {\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 TextAreaWithAriaLabelledBy extends TextAreaBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type TextAreaCustomProps =\n  | TextAreaWithAriaLabelledBy\n  | TextAreaWithHiddenLabel\n  | TextAreaWithVisibleLabel\n\nexport type TextAreaProps = Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  keyof TextAreaCustomProps | \"rows\"\n> &\n  TextAreaCustomProps\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"aria-label\": ariaLabel,\n      className,\n      description,\n      hideLabel,\n      id,\n      invalid,\n      label,\n      resize = \"vertical\",\n      rows = 3,\n      size = \"md\",\n      ...restProps\n    }: TextAreaProps,\n    ref\n  ) {\n    const combinedClassName = classNames(\n      \"tds-textarea\",\n      {\n        \"tds-textarea--invalid\": invalid,\n        \"tds-textarea--lg\": size === \"lg\",\n        \"tds-textarea--resize-auto\": resize === \"auto\",\n        \"tds-textarea--resize-none\": resize === \"none\",\n        \"tds-textarea--resize-vertical\": resize === \"vertical\",\n      },\n      className\n    )\n\n    const stableId = useId()\n    const textareaId = id || `tds-textarea-${stableId}`\n    const descriptionId = description ? `${textareaId}-description` : undefined\n\n    return (\n      <div className={combinedClassName}>\n        {!hideLabel && label ? (\n          <label htmlFor={textareaId}>{label}</label>\n        ) : null}\n        <textarea\n          {...restProps}\n          aria-describedby={descriptionId}\n          aria-invalid={invalid || undefined}\n          aria-label={hideLabel ? ariaLabel || (label as string) : ariaLabel}\n          id={textareaId}\n          ref={ref}\n          rows={rows}\n        />\n        {description && (\n          <p className=\"tds-textarea-description\" id={descriptionId}>\n            <Icon\n              aria-hidden\n              className=\"tds-textarea-description-invalid-icon\"\n              symbol=\"general#exclamation-triangle\"\n            />\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n"],"names":[],"mappings":";;;;;AAuDO,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EACE,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,MAAM,GAAG,UAAU,EACnB,IAAI,GAAG,CAAC,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACE,EAChB,GAAG,EAAA;AAEH,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,cAAc,EACd;AACE,QAAA,uBAAuB,EAAE,OAAO;QAChC,kBAAkB,EAAE,IAAI,KAAK,IAAI;QACjC,2BAA2B,EAAE,MAAM,KAAK,MAAM;QAC9C,2BAA2B,EAAE,MAAM,KAAK,MAAM;QAC9C,+BAA+B,EAAE,MAAM,KAAK,UAAU;KACvD,EACD,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,UAAU,GAAG,EAAE,IAAI,CAAA,aAAA,EAAgB,QAAQ,EAAE;AACnD,IAAA,MAAM,aAAa,GAAG,WAAW,GAAG,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,GAAG,SAAS;AAE3E,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC9B,QAAA,CAAC,SAAS,IAAI,KAAK,IAClB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,IAAG,KAAK,CAAS,IACzC,IAAI;AACR,QAAA,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,aAAa,EAAA,cAAA,EACjB,OAAO,IAAI,SAAS,EAAA,YAAA,EACtB,SAAS,GAAG,SAAS,IAAK,KAAgB,GAAG,SAAS,EAClE,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EAAA,CACV;QACD,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,0BAA0B,EAAC,EAAE,EAAE,aAAa,EAAA;YACvD,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,uCAAuC,EACjD,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

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

@@ -0,0 +1,4 @@
+import "./index.css";
+export type { TextAreaCustomProps, TextAreaProps, TextAreaResize, TextAreaSize, } from "./TextArea";
+export { TextArea } from "./TextArea";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,YAAY,GACb,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

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

@@ -0,0 +1,50 @@
+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 ToggleSwitchWithVisibleLabel extends ToggleSwitchBaseProps {
+    "aria-labelledby"?: never;
+    hideLabel?: false;
+    /**
+     * Label content for the toggle switch. When using non-string content
+     * (e.g. JSX), it must not contain interactive elements. This
+     * includes native HTML elements such as `<a>` and `<button>`, as
+     * well as Tapestry or Tapestry-React interactive components.
+     */
+    label: React.ReactNode;
+}
+interface ToggleSwitchWithHiddenLabel extends ToggleSwitchBaseProps {
+    "aria-labelledby"?: never;
+    hideLabel: true;
+    /** Label text for the toggle switch, used as an accessible `aria-label`. */
+    label: string;
+}
+interface ToggleSwitchWithAriaLabelledBy extends ToggleSwitchBaseProps {
+    "aria-labelledby": string;
+    hideLabel?: never;
+    /** Not available when `aria-labelledby` is provided. */
+    label?: never;
+}
+export type ToggleSwitchProps = ToggleSwitchWithVisibleLabel | ToggleSwitchWithHiddenLabel | 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 content for the switch (must be a string when `hideLabel` is true)
+ * - `aria-labelledby` - ID of an external element that provides the label
+ *
+ * When using non-string content for `label` (e.g. JSX), it must not contain
+ * interactive elements. This includes native HTML elements such as `<a>` and
+ * `<button>`, as well as Tapestry or Tapestry-React interactive components.
+ */
+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;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,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,4BAA6B,SAAQ,qBAAqB;IAClE,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,SAAS,EAAE,IAAI,CAAA;IACf,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,8BAA+B,SAAQ,qBAAqB;IACpE,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,iBAAiB,GACzB,4BAA4B,GAC5B,2BAA2B,GAC3B,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;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,mGA0DxB,CAAA"}

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

@@ -0,0 +1,31 @@
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+
+/**
+ * A toggle switch component that renders as a checkbox input styled as a switch.
+ *
+ * **Required:** You must provide either:
+ * - `label` - Label content for the switch (must be a string when `hideLabel` is true)
+ * - `aria-labelledby` - ID of an external element that provides the label
+ *
+ * When using non-string content for `label` (e.g. JSX), it must not contain
+ * interactive elements. This includes native HTML elements such as `<a>` and
+ * `<button>`, as well as Tapestry or Tapestry-React interactive components.
+ */
+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 { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\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 ToggleSwitchWithVisibleLabel extends ToggleSwitchBaseProps {\n  \"aria-labelledby\"?: never\n  hideLabel?: false\n  /**\n   * Label content for the toggle switch. When using non-string content\n   * (e.g. JSX), it must not contain interactive elements. This\n   * includes native HTML elements such as `<a>` and `<button>`, as\n   * well as Tapestry or Tapestry-React interactive components.\n   */\n  label: React.ReactNode\n}\n\ninterface ToggleSwitchWithHiddenLabel extends ToggleSwitchBaseProps {\n  \"aria-labelledby\"?: never\n  hideLabel: true\n  /** Label text for the toggle switch, used as an accessible `aria-label`. */\n  label: string\n}\n\ninterface ToggleSwitchWithAriaLabelledBy extends ToggleSwitchBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  /** Not available when `aria-labelledby` is provided. */\n  label?: never\n}\n\nexport type ToggleSwitchProps =\n  | ToggleSwitchWithVisibleLabel\n  | ToggleSwitchWithHiddenLabel\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 content for the switch (must be a string when `hideLabel` is true)\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\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 as string) : 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":";;;;AAsDA;;;;;;;;;;AAUG;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,GAAI,KAAgB,GAAG,SAAS,EAAA,kBAAA,EAEnD,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;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,wBAAwB,EACxB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}