@planningcenter/tapestry 3.0.0 → 3.0.1-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Banner/Banner.js +7 -7
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/button/BaseButton.js +4 -4
- package/dist/components/button/BaseButton.js.map +1 -1
- package/dist/components/button/Button.js +2 -2
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/DropdownButton.js +3 -3
- package/dist/components/button/DropdownButton.js.map +1 -1
- package/dist/components/button/DropdownIconButton.js +2 -2
- package/dist/components/button/DropdownIconButton.js.map +1 -1
- package/dist/components/button/IconButton.js +2 -2
- package/dist/components/button/IconButton.js.map +1 -1
- package/dist/components/button/LoadingButton.js +2 -2
- package/dist/components/button/LoadingButton.js.map +1 -1
- package/dist/components/button/PageHeaderActionsDropdownButton.js +3 -3
- package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
- package/dist/components/checkbox/Checkbox.js +6 -6
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/input/Input.d.ts.map +1 -1
- package/dist/components/input/Input.js +5 -18
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/input-text-base/InputTextBase.d.ts +17 -0
- package/dist/components/input-text-base/InputTextBase.d.ts.map +1 -0
- package/dist/components/input-text-base/InputTextBase.js +26 -0
- package/dist/components/input-text-base/InputTextBase.js.map +1 -0
- package/dist/components/input-text-base/index.d.ts +4 -0
- package/dist/components/input-text-base/index.d.ts.map +1 -0
- package/dist/components/internal/LoadingSpinner.js +2 -2
- package/dist/components/internal/LoadingSpinner.js.map +1 -1
- package/dist/components/link/BaseLink.js +2 -2
- package/dist/components/link/BaseLink.js.map +1 -1
- package/dist/components/link/IconLink.js +2 -2
- package/dist/components/link/IconLink.js.map +1 -1
- package/dist/components/link/Link.js +2 -2
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/page-header/index.js +1 -1
- package/dist/components/radio/Radio.js +5 -5
- package/dist/components/radio/Radio.js.map +1 -1
- package/dist/components/select/SelectNative.d.ts +18 -0
- package/dist/components/select/SelectNative.d.ts.map +1 -0
- package/dist/components/select/SelectOptions.d.ts +9 -0
- package/dist/components/select/SelectOptions.d.ts.map +1 -0
- package/dist/components/select/SelectPopover.d.ts +63 -0
- package/dist/components/select/SelectPopover.d.ts.map +1 -0
- package/dist/components/select/index.d.ts +2 -0
- package/dist/components/select/index.d.ts.map +1 -0
- package/dist/components/sidenav/index.js +1 -1
- package/dist/components/text-area/TextArea.d.ts.map +1 -0
- package/dist/components/text-area/TextArea.js +16 -0
- package/dist/components/text-area/TextArea.js.map +1 -0
- package/dist/components/text-area/index.d.ts.map +1 -0
- package/dist/components/toggle-switch/ToggleSwitch.js +6 -6
- package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -1
- package/dist/index.css +1 -0
- package/dist/index.css.map +1 -1
- package/dist/reactRender.css +497 -614
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +497 -614
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/tapestry-reset.css +10 -2
- package/dist/tapestry-reset.css.map +1 -1
- package/dist/tapestry-wc/dist/components/{p-Bdkqq_Bn.js → p-BRwQlDDG.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-BRwQlDDG.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-DhuhrZb1.js → p-C-PZqWzP.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-C-PZqWzP.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-BF5btZ2U.js → p-D20wThHn.js} +2 -2
- package/dist/tapestry-wc/dist/components/p-D20wThHn.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-gTgcP9lI.js → p-DJRiC7FI.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-DJRiC7FI.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-BO35mzk2.js → p-De9z2C7O.js} +2 -2
- package/dist/tapestry-wc/dist/components/p-De9z2C7O.js.map +1 -0
- package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
- package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
- package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
- package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
- package/dist/unstable.css +91 -208
- package/dist/unstable.css.map +1 -1
- package/dist/unstable.d.ts +2 -1
- package/dist/unstable.d.ts.map +1 -1
- package/dist/unstable.js +1 -1
- package/dist/utilities/Icon.js +2 -2
- package/dist/utilities/Icon.js.map +1 -1
- package/dist/utilities/buttonLinkShared.js +4 -4
- package/dist/utilities/buttonLinkShared.js.map +1 -1
- package/dist/utilities/selectUtils.d.ts +15 -0
- package/dist/utilities/selectUtils.d.ts.map +1 -0
- package/package.json +8 -6
- package/dist/components/textarea/TextArea.d.ts.map +0 -1
- package/dist/components/textarea/TextArea.js +0 -27
- package/dist/components/textarea/TextArea.js.map +0 -1
- package/dist/components/textarea/index.d.ts.map +0 -1
- package/dist/tapestry-wc/dist/components/p-BF5btZ2U.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-BO35mzk2.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-Bdkqq_Bn.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-DhuhrZb1.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-gTgcP9lI.js.map +0 -1
- package/react-types/popover.d.ts +0 -7
- /package/dist/components/{textarea → text-area}/TextArea.d.ts +0 -0
- /package/dist/components/{textarea → text-area}/index.d.ts +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useId } from '../../utilities/useId.js';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import
|
|
3
|
+
import React__default, { forwardRef } from 'react';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* A radio component that renders as a radio input with label.
|
|
@@ -21,10 +21,10 @@ const Radio = forwardRef(({ className, description, id, label, size = "md", ...r
|
|
|
21
21
|
const combinedClassName = classNames("tds-radio", size && size === "sm" && `tds-radio--sm`, className);
|
|
22
22
|
const stableId = useId();
|
|
23
23
|
const radioId = id || `tds-radio-${stableId}`;
|
|
24
|
-
return (
|
|
25
|
-
|
|
26
|
-
label &&
|
|
27
|
-
description && (
|
|
24
|
+
return (React__default.createElement("div", { className: combinedClassName },
|
|
25
|
+
React__default.createElement("input", { ...restProps, "aria-describedby": description ? `${radioId}-description` : undefined, id: radioId, ref: ref, type: "radio" }),
|
|
26
|
+
label && React__default.createElement("label", { htmlFor: radioId }, label),
|
|
27
|
+
description && (React__default.createElement("p", { id: `${radioId}-description`, className: "tds-radio-description" }, description))));
|
|
28
28
|
});
|
|
29
29
|
Radio.displayName = "Radio";
|
|
30
30
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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":["React"],"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,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/BA,cAAA,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,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACVA,cAAA,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;;;;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React, { type SelectHTMLAttributes } from "react";
|
|
2
|
+
import type { SelectItem } from "./SelectPopover";
|
|
3
|
+
declare global {
|
|
4
|
+
namespace JSX {
|
|
5
|
+
interface IntrinsicElements {
|
|
6
|
+
selectedcontent: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
export interface SelectNativeProps {
|
|
11
|
+
/** Options to render inside the select. */
|
|
12
|
+
options: SelectItem[];
|
|
13
|
+
/** Placeholder text rendered as a disabled hidden option. */
|
|
14
|
+
placeholder: string;
|
|
15
|
+
}
|
|
16
|
+
export type SelectNativeElementProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, keyof SelectNativeProps | "multiple"> & SelectNativeProps;
|
|
17
|
+
export declare const SelectNative: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "multiple" | keyof SelectNativeProps> & SelectNativeProps & React.RefAttributes<HTMLSelectElement>>;
|
|
18
|
+
//# sourceMappingURL=SelectNative.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectNative.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,oBAAoB,EAG1B,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAsBjD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CACtC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ,CAAA;SACF;KACF;CACF;AAMD,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,6DAA6D;IAC7D,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,iBAAiB,GAAG,UAAU,CACrC,GACC,iBAAiB,CAAA;AAEnB,eAAO,MAAM,YAAY,yLA+BvB,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { SelectItem } from "./SelectPopover";
|
|
3
|
+
interface SelectOptionsProps {
|
|
4
|
+
items: SelectItem[];
|
|
5
|
+
supportsBaseSelect?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare function SelectOptions({ items, supportsBaseSelect, }: SelectOptionsProps): React.ReactNode;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=SelectOptions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectOptions.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAsB,MAAM,iBAAiB,CAAA;AAsBrE,UAAU,kBAAkB;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAuBD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,kBAA0B,GAC3B,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CA8BtC"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import "./index.css";
|
|
2
|
+
import { ButtonHTMLAttributes } from "react";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
export type SelectPopoverSize = "lg" | "md" | "sm";
|
|
5
|
+
interface SelectOptionWithTextLabel {
|
|
6
|
+
/** Whether this option is non-interactive. */
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
divider?: never;
|
|
9
|
+
/** Displayed as the option content and used for type-ahead matching. */
|
|
10
|
+
label: string;
|
|
11
|
+
textValue?: never;
|
|
12
|
+
value: string;
|
|
13
|
+
}
|
|
14
|
+
interface SelectOptionWithNodeLabel {
|
|
15
|
+
/** Whether this option is non-interactive. */
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
divider?: never;
|
|
18
|
+
/** Displayed as the option content. */
|
|
19
|
+
label: React.ReactNode;
|
|
20
|
+
/** Plain-text representation required for type-ahead matching. */
|
|
21
|
+
textValue: string;
|
|
22
|
+
value: string;
|
|
23
|
+
}
|
|
24
|
+
export interface SelectOptionDivider {
|
|
25
|
+
disabled?: never;
|
|
26
|
+
divider: true;
|
|
27
|
+
label?: never;
|
|
28
|
+
textValue?: never;
|
|
29
|
+
value?: never;
|
|
30
|
+
}
|
|
31
|
+
export type SelectOption = SelectOptionDivider | SelectOptionWithNodeLabel | SelectOptionWithTextLabel;
|
|
32
|
+
export interface SelectOptionsGroup {
|
|
33
|
+
/** Whether all options in this group are non-interactive. */
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
/** Visible heading displayed above the group's options. */
|
|
36
|
+
label: string;
|
|
37
|
+
/** The selectable options within this group. */
|
|
38
|
+
options: SelectOption[];
|
|
39
|
+
}
|
|
40
|
+
export type SelectItem = SelectOption | SelectOptionsGroup;
|
|
41
|
+
interface SelectPopoverBaseProps {
|
|
42
|
+
defaultValue?: string;
|
|
43
|
+
description?: string;
|
|
44
|
+
invalid?: boolean;
|
|
45
|
+
/** A flat or mixed array of options and option groups. */
|
|
46
|
+
options: SelectItem[];
|
|
47
|
+
placeholder: string;
|
|
48
|
+
required?: boolean;
|
|
49
|
+
size?: SelectPopoverSize;
|
|
50
|
+
}
|
|
51
|
+
interface SelectPopoverWithLabel extends SelectPopoverBaseProps {
|
|
52
|
+
"aria-labelledby"?: never;
|
|
53
|
+
label: React.ReactNode;
|
|
54
|
+
}
|
|
55
|
+
interface SelectPopoverWithAriaLabelledBy extends SelectPopoverBaseProps {
|
|
56
|
+
"aria-labelledby": string;
|
|
57
|
+
label?: never;
|
|
58
|
+
}
|
|
59
|
+
export type SelectPopoverProps = SelectPopoverWithAriaLabelledBy | SelectPopoverWithLabel;
|
|
60
|
+
export type SelectPopoverElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof SelectPopoverProps> & SelectPopoverProps;
|
|
61
|
+
export declare const SelectPopover: React.ForwardRefExoticComponent<SelectPopoverElementProps & React.RefAttributes<HTMLButtonElement>>;
|
|
62
|
+
export {};
|
|
63
|
+
//# sourceMappingURL=SelectPopover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAMpB,OAAO,EACL,oBAAoB,EAKrB,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAElD,UAAU,yBAAyB;IACjC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,yBAAyB;IACjC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,OAAO,EAAE,IAAI,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,YAAY,GACpB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,CAAA;AAE7B,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,kBAAkB,CAAA;AAE1D,UAAU,sBAAsB;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0DAA0D;IAC1D,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,iBAAiB,CAAA;CACzB;AAED,UAAU,sBAAuB,SAAQ,sBAAsB;IAC7D,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,+BAAgC,SAAQ,sBAAsB;IACtE,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,kBAAkB,GAC1B,+BAA+B,GAC/B,sBAAsB,CAAA;AAE1B,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,CACzB,GACC,kBAAkB,CAAA;AAqDpB,eAAO,MAAM,aAAa,qGA4IzB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,wBAAwB,EACxB,iBAAiB,GAClB,MAAM,gBAAgB,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '../../tapestry-wc/dist/components/p-
|
|
1
|
+
import '../../tapestry-wc/dist/components/p-De9z2C7O.js';
|
|
2
2
|
import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-sidenav.js';
|
|
3
3
|
import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-sidenav-item.js';
|
|
4
4
|
import { defineCustomElement as defineCustomElement$3 } from '../../tapestry-wc/dist/components/tds-sidenav-responsive-header.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,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,2FAoDpB,CAAA"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { InputTextBase } from '../input-text-base/InputTextBase.js';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import React__default, { forwardRef } from 'react';
|
|
4
|
+
|
|
5
|
+
const TextArea = forwardRef(function TextArea({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, description, hideLabel, id, invalid, label, resize = "vertical", rows = 3, size = "md", ...restProps }, ref) {
|
|
6
|
+
const wrapperClassName = classNames({
|
|
7
|
+
"tds-textarea--resize-auto": resize === "auto",
|
|
8
|
+
"tds-textarea--resize-none": resize === "none",
|
|
9
|
+
"tds-textarea--resize-vertical": resize === "vertical",
|
|
10
|
+
}, className);
|
|
11
|
+
return (React__default.createElement(InputTextBase, { className: wrapperClassName, description: description, hideLabel: hideLabel || !!ariaLabelledBy, id: id, invalid: invalid, label: label, size: size }, ({ descriptionId, inputId }) => (React__default.createElement("textarea", { ...restProps, "aria-describedby": descriptionId, "aria-invalid": invalid || undefined, "aria-label": hideLabel ? ariaLabel || label : ariaLabel, "aria-labelledby": ariaLabelledBy, id: inputId, ref: ref, rows: rows }))));
|
|
12
|
+
});
|
|
13
|
+
TextArea.displayName = "TextArea";
|
|
14
|
+
|
|
15
|
+
export { TextArea };
|
|
16
|
+
//# sourceMappingURL=TextArea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextArea.js","sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { InputTextBase } from \"@components/input-text-base\"\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 \"aria-labelledby\": ariaLabelledBy,\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 wrapperClassName = classNames(\n {\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 return (\n <InputTextBase\n className={wrapperClassName}\n description={description}\n hideLabel={hideLabel || !!ariaLabelledBy}\n id={id}\n invalid={invalid}\n label={label}\n size={size}\n >\n {({ descriptionId, inputId }) => (\n <textarea\n {...restProps}\n aria-describedby={descriptionId}\n aria-invalid={invalid || undefined}\n aria-label={hideLabel ? ariaLabel || (label as string) : ariaLabel}\n aria-labelledby={ariaLabelledBy}\n id={inputId}\n ref={ref}\n rows={rows}\n />\n )}\n </InputTextBase>\n )\n }\n)\n\nTextArea.displayName = \"TextArea\"\n"],"names":["React"],"mappings":";;;;MAsDa,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EACE,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,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;IAEH,MAAM,gBAAgB,GAAG,UAAU,CACjC;QACE,2BAA2B,EAAE,MAAM,KAAK,MAAM;QAC9C,2BAA2B,EAAE,MAAM,KAAK,MAAM;QAC9C,+BAA+B,EAAE,MAAM,KAAK,UAAU;KACvD,EACD,SAAS,CACV;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,aAAa,IACZ,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC,cAAc,EACxC,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EAAA,EAET,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,MAC1BA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,aAAa,kBACjB,OAAO,IAAI,SAAS,EAAA,YAAA,EACtB,SAAS,GAAG,SAAS,IAAK,KAAgB,GAAG,SAAS,qBACjD,cAAc,EAC/B,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,GACV,CACH,CACa;AAEpB,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useId } from '../../utilities/useId.js';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import
|
|
3
|
+
import React__default, { forwardRef } from 'react';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* A toggle switch component that renders as a checkbox input styled as a switch.
|
|
@@ -17,13 +17,13 @@ const ToggleSwitch = forwardRef(({ "aria-describedby": ariaDescribedby, checked,
|
|
|
17
17
|
const combinedClassName = classNames("tds-toggle-switch", size && size === "sm" && `tds-toggle-switch--sm`, hideLabel && `tds-toggle-switch--hide-label`, className);
|
|
18
18
|
const stableId = useId();
|
|
19
19
|
const toggleSwitchId = id || `tds-toggle-switch-${stableId}`;
|
|
20
|
-
return (
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
return (React__default.createElement("div", { className: combinedClassName },
|
|
21
|
+
React__default.createElement("div", { className: "tds-toggle-switch-track", "aria-hidden": "true" }),
|
|
22
|
+
React__default.createElement("input", { ...restProps, id: toggleSwitchId, type: "checkbox", role: "switch", "aria-checked": checked, "aria-label": hideLabel ? label : undefined, "aria-describedby": description && !hideLabel
|
|
23
23
|
? `${toggleSwitchId}-description`
|
|
24
24
|
: ariaDescribedby, checked: checked, ref: ref }),
|
|
25
|
-
label && !hideLabel &&
|
|
26
|
-
description && !hideLabel && (
|
|
25
|
+
label && !hideLabel && React__default.createElement("label", { htmlFor: toggleSwitchId }, label),
|
|
26
|
+
description && !hideLabel && (React__default.createElement("p", { id: `${toggleSwitchId}-description`, className: "tds-toggle-switch-description" }, description))));
|
|
27
27
|
});
|
|
28
28
|
ToggleSwitch.displayName = "ToggleSwitch";
|
|
29
29
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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":["React"],"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,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,aAAA,EAAa,MAAM,EAAA,CAAO;AAClE,QAAAA,cAAA,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,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,cAAc,EAAA,EAAG,KAAK,CAAS;QACtE,WAAW,IAAI,CAAC,SAAS,KACxBA,cAAA,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/index.css
CHANGED
|
@@ -1712,6 +1712,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
|
|
|
1712
1712
|
|
|
1713
1713
|
.tds-btn--outline-neutral{
|
|
1714
1714
|
--tds-btn-color:var(--t-text-color-status-neutral);
|
|
1715
|
+
--tds-btn-bg:var(--t-fill-color-button-neutral-outline);
|
|
1715
1716
|
--tds-btn-border-color:var(--t-border-color-button-neutral);
|
|
1716
1717
|
--tds-btn-color-hover:var(--tds-btn-color);
|
|
1717
1718
|
--tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
|