@planningcenter/tapestry 2.3.0-rc.6 → 2.3.0-rc.8
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/componentRegistration.js.map +1 -1
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/button/BaseButton.js.map +1 -1
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/DropdownButton.js.map +1 -1
- package/dist/components/button/DropdownIconButton.js.map +1 -1
- package/dist/components/button/IconButton.js.map +1 -1
- package/dist/components/button/LoadingButton.js.map +1 -1
- package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/internal/LoadingSpinner.js.map +1 -1
- package/dist/components/link/BaseLink.js.map +1 -1
- package/dist/components/link/IconLink.js.map +1 -1
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/page-header/PageHeader.js.map +1 -1
- package/dist/components/page-header/index.js.map +1 -1
- package/dist/components/sidenav/Sidenav.js.map +1 -1
- package/dist/components/sidenav/SidenavItem.js.map +1 -1
- package/dist/components/sidenav/SidenavSection.js.map +1 -1
- package/dist/components/sidenav/index.js.map +1 -1
- package/dist/index.css +31 -37
- package/dist/index.css.map +1 -1
- package/dist/jsTokens.js.map +1 -1
- package/dist/reactRender.css +520 -526
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +520 -526
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/tapestry-render/dist/{buildComponent-D0S78fIn.js → buildComponent-DTliJ3_n.js} +146 -146
- package/dist/tapestry-render/dist/buildComponent-DTliJ3_n.js.map +1 -0
- package/dist/tapestry-render/dist/index.js +1 -1
- package/dist/tapestry-render/dist/index.js.map +1 -1
- package/dist/tapestry-render/dist/legacy.js +1 -1
- package/dist/tapestry-render/dist/legacy.js.map +1 -1
- package/dist/tapestry-render/dist/registry.js.map +1 -1
- package/dist/tapestry-wc/dist/components/p-BGI0jdHO.js.map +1 -1
- package/dist/tapestry-wc/dist/components/p-CLwAWmuf.js.map +1 -1
- package/dist/tapestry-wc/dist/components/p-CeCAMGrz.js.map +1 -1
- package/dist/tapestry-wc/dist/components/p-D_UI812x.js.map +1 -1
- package/dist/tapestry-wc/dist/components/p-m4YsmAHe.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
- package/dist/tokens/ts/tokens.js.map +1 -1
- package/dist/unstable.css +31 -37
- package/dist/unstable.css.map +1 -1
- package/dist/utilities/Icon.js.map +1 -1
- package/dist/utilities/buttonLinkShared.js.map +1 -1
- package/package.json +3 -3
- package/dist/tapestry-render/dist/buildComponent-D0S78fIn.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\n\nregister(\"PageHeader\", PageHeader)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\n"],"names":["register"],"mappings":";;;;;;AAOAA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\n\nregister(\"PageHeader\", PageHeader)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\n"],"names":["register"],"mappings":";;;;;;AAOAA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;AAClCA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC,CAAA;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import \"./Banner.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classnames from \"classnames\"\nimport React from \"react\"\n\ntype BannerProps = {\n /** The content to display in the banner */\n children: React.ReactNode\n\n /**\n * Set the size of the banner (adjusts padding)\n * @default \"md\"\n */\n size?: \"sm\" | \"md\"\n\n /**\n * Set the status of the banner\n * @default \"neutral\"\n */\n status?: \"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\"\n\n /** Set the title of the banner */\n title?: string\n}\n\nconst ICONS = {\n error: \"general#exclamation-triangle\",\n info: \"general#info-circle\",\n neutral: null,\n success: \"general#check-circle\",\n warning: \"general#exclamation-triangle\",\n}\n\nconst SIZES = {\n md: \"\",\n sm: \"t-banner--sm\",\n}\n\nconst STATUSES = {\n error: \"t-banner--status-error\",\n info: \"t-banner--status-info\",\n neutral: \"t-banner--status-neutral\",\n success: \"t-banner--status-success\",\n warning: \"t-banner--status-warning\",\n}\n\nexport const Banner = ({\n children = \"\",\n size = \"md\",\n status = \"neutral\",\n title = \"\",\n}: BannerProps) => {\n return (\n <div className={classnames(\"t-banner\", SIZES[size], STATUSES[status])}>\n {ICONS[status] && (\n <span className=\"t-banner-icon\">\n <Icon symbol={ICONS[status]} aria-hidden />\n </span>\n )}\n <div>\n {title && <span className=\"t-banner-title\">{title}</span>}\n <div className=\"t-banner-body\">{children}</div>\n </div>\n </div>\n )\n}\n\nexport default Banner\n"],"names":["classnames"],"mappings":";;;;AA0BA,MAAM,KAAK,GAAG;AACZ,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,OAAO,EAAE,8BAA8B;CACxC;AAED,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,cAAc;CACnB;AAED,MAAM,QAAQ,GAAG;AACf,IAAA,KAAK,EAAE,wBAAwB;AAC/B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;CACpC;MAEY,MAAM,GAAG,CAAC,EACrB,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,GACE,KAAI;AAChB,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAA;QAClE,KAAK,CAAC,MAAM,CAAC,KACZ,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA;YAC7B,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAgB,aAAA,EAAA,IAAA,EAAA,CAAA,CACtC,CACR;AACD,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACG,YAAA,KAAK,IAAI,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,EAAE,KAAK,CAAQ;YACzD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA,EAAE,QAAQ,CAAO,CAC3C,CACF;
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import \"./Banner.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classnames from \"classnames\"\nimport React from \"react\"\n\ntype BannerProps = {\n /** The content to display in the banner */\n children: React.ReactNode\n\n /**\n * Set the size of the banner (adjusts padding)\n * @default \"md\"\n */\n size?: \"sm\" | \"md\"\n\n /**\n * Set the status of the banner\n * @default \"neutral\"\n */\n status?: \"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\"\n\n /** Set the title of the banner */\n title?: string\n}\n\nconst ICONS = {\n error: \"general#exclamation-triangle\",\n info: \"general#info-circle\",\n neutral: null,\n success: \"general#check-circle\",\n warning: \"general#exclamation-triangle\",\n}\n\nconst SIZES = {\n md: \"\",\n sm: \"t-banner--sm\",\n}\n\nconst STATUSES = {\n error: \"t-banner--status-error\",\n info: \"t-banner--status-info\",\n neutral: \"t-banner--status-neutral\",\n success: \"t-banner--status-success\",\n warning: \"t-banner--status-warning\",\n}\n\nexport const Banner = ({\n children = \"\",\n size = \"md\",\n status = \"neutral\",\n title = \"\",\n}: BannerProps) => {\n return (\n <div className={classnames(\"t-banner\", SIZES[size], STATUSES[status])}>\n {ICONS[status] && (\n <span className=\"t-banner-icon\">\n <Icon symbol={ICONS[status]} aria-hidden />\n </span>\n )}\n <div>\n {title && <span className=\"t-banner-title\">{title}</span>}\n <div className=\"t-banner-body\">{children}</div>\n </div>\n </div>\n )\n}\n\nexport default Banner\n"],"names":["classnames"],"mappings":";;;;AA0BA,MAAM,KAAK,GAAG;AACZ,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,OAAO,EAAE,8BAA8B;CACxC,CAAA;AAED,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,cAAc;CACnB,CAAA;AAED,MAAM,QAAQ,GAAG;AACf,IAAA,KAAK,EAAE,wBAAwB;AAC/B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;CACpC,CAAA;MAEY,MAAM,GAAG,CAAC,EACrB,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,GACE,KAAI;AAChB,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAA;QAClE,KAAK,CAAC,MAAM,CAAC,KACZ,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA;YAC7B,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAgB,aAAA,EAAA,IAAA,EAAA,CAAA,CACtC,CACR;AACD,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACG,YAAA,KAAK,IAAI,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,EAAE,KAAK,CAAQ;YACzD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA,EAAE,QAAQ,CAAO,CAC3C,CACF,EACP;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, forwardRef } from \"react\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"../../utilities/buttonLinkShared\"\nimport { LoadingSpinner } from \"../internal\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n kind?: ComponentKind\n label: React.ReactNode\n loading?: boolean\n loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n keyof BaseButtonProps | \"children\"\n> &\n BaseButtonProps\n\nconst buildComponentClassName = ({\n className,\n fullWidth,\n kind,\n loading,\n size,\n}: {\n className?: string\n fullWidth?: boolean\n kind?: ComponentKind\n loading?: boolean\n size?: ComponentSize\n}): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n fullWidth && \"tds-btn--full-width\",\n loading && \"tds-btn--loading\",\n className\n )\n}\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n (\n {\n size,\n prefix,\n suffix,\n kind = \"secondary\",\n label,\n className,\n fullWidth,\n loading = false,\n loadingAriaLabel = \"Loading...\",\n \"aria-label\": ariaLabel,\n ...restProps\n }: BaseButtonElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName({\n className,\n fullWidth,\n kind,\n loading,\n size,\n })\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n\n return (\n <button\n type=\"button\"\n className={combinedClassName}\n ref={ref}\n aria-disabled={loading}\n disabled={loading}\n aria-label={loading ? loadingAriaLabel : ariaLabel}\n aria-busy={loading}\n {...restProps}\n >\n {loading && <LoadingSpinner />}\n {prefixElement}\n {loading ? <span>{label}</span> : label}\n {suffixElement}\n </button>\n )\n }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,uBAAuB,GAAG,CAAC,EAC/B,SAAS,EACT,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,GAOL,KAAY;AACX,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,CACV;AACH,CAAC;AAEY,MAAA,UAAU,GAAG,UAAU,CAClC,CACE,EACE,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACW,EACzB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;QAChD,SAAS;QACT,SAAS;QACT,IAAI;QACJ,OAAO;QACP,IAAI;AACL,KAAA,CAAC;IAEF,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;AAEnE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,mBACO,OAAO,EACtB,QAAQ,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,GAAG,gBAAgB,GAAG,SAAS,EACvC,WAAA,EAAA,OAAO,KACd,SAAS,EAAA;QAEZ,OAAO,IAAI,KAAC,CAAA,aAAA,CAAA,cAAc,EAAG,IAAA,CAAA;QAC7B,aAAa;QACb,OAAO,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;QACtC,aAAa,CACP;
|
|
1
|
+
{"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, forwardRef } from \"react\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"../../utilities/buttonLinkShared\"\nimport { LoadingSpinner } from \"../internal\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n kind?: ComponentKind\n label: React.ReactNode\n loading?: boolean\n loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n keyof BaseButtonProps | \"children\"\n> &\n BaseButtonProps\n\nconst buildComponentClassName = ({\n className,\n fullWidth,\n kind,\n loading,\n size,\n}: {\n className?: string\n fullWidth?: boolean\n kind?: ComponentKind\n loading?: boolean\n size?: ComponentSize\n}): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n fullWidth && \"tds-btn--full-width\",\n loading && \"tds-btn--loading\",\n className\n )\n}\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n (\n {\n size,\n prefix,\n suffix,\n kind = \"secondary\",\n label,\n className,\n fullWidth,\n loading = false,\n loadingAriaLabel = \"Loading...\",\n \"aria-label\": ariaLabel,\n ...restProps\n }: BaseButtonElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName({\n className,\n fullWidth,\n kind,\n loading,\n size,\n })\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n\n return (\n <button\n type=\"button\"\n className={combinedClassName}\n ref={ref}\n aria-disabled={loading}\n disabled={loading}\n aria-label={loading ? loadingAriaLabel : ariaLabel}\n aria-busy={loading}\n {...restProps}\n >\n {loading && <LoadingSpinner />}\n {prefixElement}\n {loading ? <span>{label}</span> : label}\n {suffixElement}\n </button>\n )\n }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,uBAAuB,GAAG,CAAC,EAC/B,SAAS,EACT,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,GAOL,KAAY;AACX,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,CACV,CAAA;AACH,CAAC,CAAA;AAEY,MAAA,UAAU,GAAG,UAAU,CAClC,CACE,EACE,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACW,EACzB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;QAChD,SAAS;QACT,SAAS;QACT,IAAI;QACJ,OAAO;QACP,IAAI;AACL,KAAA,CAAC,CAAA;IAEF,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;AAEnE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,mBACO,OAAO,EACtB,QAAQ,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,GAAG,gBAAgB,GAAG,SAAS,EACvC,WAAA,EAAA,OAAO,KACd,SAAS,EAAA;QAEZ,OAAO,IAAI,KAAC,CAAA,aAAA,CAAA,cAAc,EAAG,IAAA,CAAA;QAC7B,aAAa;QACb,OAAO,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;QACtC,aAAa,CACP,EACV;AACH,CAAC,EACF;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type ButtonElementProps = Omit<BaseButtonElementProps, \"label\"> & {\n label: string\n}\n\n/**\n * A button component that renders as a button element.\n * Supports various sizes, styles, and content types.\n * Label must be a string.\n *\n * @component\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonElementProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nButton.displayName = \"Button\"\n"],"names":[],"mappings":";;;AAUA;;;;;;AAMG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAK,EAAA,GAAA,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI;AAC5C,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type ButtonElementProps = Omit<BaseButtonElementProps, \"label\"> & {\n label: string\n}\n\n/**\n * A button component that renders as a button element.\n * Supports various sizes, styles, and content types.\n * Label must be a string.\n *\n * @component\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonElementProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nButton.displayName = \"Button\"\n"],"names":[],"mappings":";;;AAUA;;;;;;AAMG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAK,EAAA,GAAA,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AAC5C,CAAC,EACF;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n \"aria-controls\": string\n \"aria-expanded\": boolean\n suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n return {\n className: classNames(className, \"tds-btn--dropdown\"),\n suffix: <Icon symbol=\"general#down-caret\" aria-hidden />,\n }\n}\n\nexport const DropdownButton = forwardRef<\n HTMLButtonElement,\n BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n return <BaseButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":[],"mappings":";;;;;AAYgB,SAAA,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;AACrD,QAAA,MAAM,EAAE,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,MAAM,EAAC,oBAAoB,EAAe,aAAA,EAAA,IAAA,EAAA,CAAA;KACzD;AACH;
|
|
1
|
+
{"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n \"aria-controls\": string\n \"aria-expanded\": boolean\n suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n return {\n className: classNames(className, \"tds-btn--dropdown\"),\n suffix: <Icon symbol=\"general#down-caret\" aria-hidden />,\n }\n}\n\nexport const DropdownButton = forwardRef<\n HTMLButtonElement,\n BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n return <BaseButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":[],"mappings":";;;;;AAYgB,SAAA,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;AACrD,QAAA,MAAM,EAAE,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,MAAM,EAAC,oBAAoB,EAAe,aAAA,EAAA,IAAA,EAAA,CAAA;KACzD,CAAA;AACH,CAAC;AAEY,MAAA,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI,CAAA;AACtE,CAAC,EAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\nexport const DropdownIconButton = forwardRef<\n HTMLButtonElement,\n IconButtonProps & DropdownButtonProps\n>((props, ref) => {\n return <IconButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownIconButton.displayName = \"DropdownIconButton\"\n"],"names":[],"mappings":";;;;AAKa,MAAA,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI;AACtE,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\nexport const DropdownIconButton = forwardRef<\n HTMLButtonElement,\n IconButtonProps & DropdownButtonProps\n>((props, ref) => {\n return <IconButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownIconButton.displayName = \"DropdownIconButton\"\n"],"names":[],"mappings":";;;;AAKa,MAAA,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI,CAAA;AACtE,CAAC,EAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ icon, className, ...restProps }: IconButtonProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseButton\n {...restProps}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n />\n )\n }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":[],"mappings":";;;;AAYA;;;;;AAKG;AACU,MAAA,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;AAEpE,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR;
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ icon, className, ...restProps }: IconButtonProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseButton\n {...restProps}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n />\n )\n }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":[],"mappings":";;;;AAYA;;;;;AAKG;AACU,MAAA,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAA;AAEpE,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR,EACH;AACH,CAAC,EACF;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingButton.js","sources":["../../../src/components/button/LoadingButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\n/**\n * @deprecated Use ButtonElementProps with loading prop instead. LoadingButton will be removed in a future version.\n */\nexport interface LoadingButtonProps extends BaseButtonElementProps {\n loading?: boolean\n loadingAriaLabel?: string\n}\n\n/**\n * @deprecated Use Button with loading prop instead. LoadingButton will be removed in a future version.\n *\n * A loading button component that shows a loading indicator when the loading prop is true.\n * When loading, the button is automatically disabled and shows a spinner.\n * Supports all BaseButton props including prefix and suffix.\n *\n * @example\n * // Deprecated\n * <LoadingButton loading={true} label=\"Submit\" />\n *\n * // Use this instead:\n * <Button loading={true} label=\"Submit\" />\n *\n * @component\n */\nexport const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nLoadingButton.displayName = \"LoadingButton\"\n"],"names":[],"mappings":";;;AAcA;;;;;;;;;;;;;;;AAeG;AACU,MAAA,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAK,EAAA,GAAA,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI;AAC5C,CAAC;
|
|
1
|
+
{"version":3,"file":"LoadingButton.js","sources":["../../../src/components/button/LoadingButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\n/**\n * @deprecated Use ButtonElementProps with loading prop instead. LoadingButton will be removed in a future version.\n */\nexport interface LoadingButtonProps extends BaseButtonElementProps {\n loading?: boolean\n loadingAriaLabel?: string\n}\n\n/**\n * @deprecated Use Button with loading prop instead. LoadingButton will be removed in a future version.\n *\n * A loading button component that shows a loading indicator when the loading prop is true.\n * When loading, the button is automatically disabled and shows a spinner.\n * Supports all BaseButton props including prefix and suffix.\n *\n * @example\n * // Deprecated\n * <LoadingButton loading={true} label=\"Submit\" />\n *\n * // Use this instead:\n * <Button loading={true} label=\"Submit\" />\n *\n * @component\n */\nexport const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nLoadingButton.displayName = \"LoadingButton\"\n"],"names":[],"mappings":";;;AAcA;;;;;;;;;;;;;;;AAeG;AACU,MAAA,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAK,EAAA,GAAA,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AAC5C,CAAC,EACF;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n BaseButtonElementProps,\n \"kind\"\n> &\n DropdownButtonProps & {\n needsAttention?: boolean\n }\n\nexport function needsAttentionProps({\n className,\n needsAttention,\n}: {\n className?: string\n needsAttention?: boolean\n}) {\n return needsAttention\n ? {\n className: classNames(className, \"tds-btn--attention\"),\n prefix: (\n <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n ),\n }\n : {\n className,\n }\n}\n\nexport const PageHeaderActionsDropdownButton = forwardRef<\n HTMLButtonElement,\n PageHeaderActionsDropdownButtonProps\n>(\n (\n {\n needsAttention,\n className,\n ...props\n }: PageHeaderActionsDropdownButtonProps,\n ref\n ) => {\n return (\n <DropdownButton\n ref={ref}\n {...props}\n kind=\"secondary-page-header\"\n {...needsAttentionProps({ className, needsAttention })}\n />\n )\n }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":[],"mappings":";;;;SAcgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO;
|
|
1
|
+
{"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n BaseButtonElementProps,\n \"kind\"\n> &\n DropdownButtonProps & {\n needsAttention?: boolean\n }\n\nexport function needsAttentionProps({\n className,\n needsAttention,\n}: {\n className?: string\n needsAttention?: boolean\n}) {\n return needsAttention\n ? {\n className: classNames(className, \"tds-btn--attention\"),\n prefix: (\n <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n ),\n }\n : {\n className,\n }\n}\n\nexport const PageHeaderActionsDropdownButton = forwardRef<\n HTMLButtonElement,\n PageHeaderActionsDropdownButtonProps\n>(\n (\n {\n needsAttention,\n className,\n ...props\n }: PageHeaderActionsDropdownButtonProps,\n ref\n ) => {\n return (\n <DropdownButton\n ref={ref}\n {...props}\n kind=\"secondary-page-header\"\n {...needsAttentionProps({ className, needsAttention })}\n />\n )\n }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":[],"mappings":";;;;SAcgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO,cAAc;AACnB,UAAE;AACE,YAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACtD,MAAM,GACJ,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,YAAA,EAAY,kBAAkB,EAAA,CAAG,CAClE;AACF,SAAA;AACH,UAAE;YACE,SAAS;SACV,CAAA;AACP,CAAC;AAEY,MAAA,+BAA+B,GAAG,UAAU,CAIvD,CACE,EACE,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EAC6B,EACvC,GAAG,KACD;IACF,QACE,KAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,IAAI,EAAC,uBAAuB,EACxB,GAAA,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EACtD,CAAA,EACH;AACH,CAAC,EACF;AAED,+BAA+B,CAAC,WAAW,GAAG,iCAAiC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nexport type CheckboxSize = \"md\" | \"sm\" | \"xs\"\n\nexport interface CheckboxProps {\n description?: string\n disabled?: boolean\n id?: string\n indeterminate?: boolean\n invalid?: boolean\n label: string\n size?: CheckboxSize\n}\n\nexport type CheckboxElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof CheckboxProps | \"type\"\n> &\n CheckboxProps\n\nlet idCounter = 0\n\nconst buildCheckboxClassName = ({\n className,\n invalid,\n indeterminate,\n size,\n}: {\n className?: string\n indeterminate?: boolean\n invalid?: boolean\n size?: CheckboxSize\n}): string => {\n return classNames(\n \"tds-checkbox\",\n size && size !== \"md\" && `tds-checkbox--${size}`,\n invalid && \"tds-checkbox--invalid\",\n indeterminate && \"tds-checkbox--indeterminate\",\n className\n )\n}\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n * Label must be a string.\n *\n * @component\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n (\n {\n className,\n description,\n disabled,\n id,\n indeterminate = false,\n invalid,\n label,\n size = \"md\",\n ...restProps\n }: CheckboxElementProps,\n ref\n ) => {\n const callbackRef = useCallback(\n (element: HTMLInputElement | null) => {\n if (element) {\n element.indeterminate = indeterminate\n }\n\n // Handle the forwarded ref\n if (typeof ref === \"function\") {\n ref(element)\n } else if (ref && typeof ref === \"object\") {\n ref.current = element\n }\n },\n [ref, indeterminate]\n )\n\n const combinedClassName = buildCheckboxClassName({\n className,\n indeterminate,\n invalid,\n size,\n })\n\n const checkboxId = id || `tds-checkbox-${idCounter++}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={\n description ? `${checkboxId}-description` : undefined\n }\n aria-invalid={invalid}\n disabled={disabled}\n id={checkboxId}\n ref={callbackRef}\n type=\"checkbox\"\n />\n <label htmlFor={checkboxId}>{label}</label>\n {description && (\n <p\n id={`${checkboxId}-description`}\n className=\"tds-checkbox-description\"\n >\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":[],"mappings":";;;AAuBA,IAAI,SAAS,GAAG,CAAC;AAEjB,MAAM,sBAAsB,GAAG,CAAC,EAC9B,SAAS,EACT,OAAO,EACP,aAAa,EACb,IAAI,GAML,KAAY;IACX,OAAO,UAAU,CACf,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAiB,cAAA,EAAA,IAAI,EAAE,EAChD,OAAO,IAAI,uBAAuB,EAClC,aAAa,IAAI,6BAA6B,EAC9C,SAAS,CACV;AACH,CAAC;AAED;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,QAAQ,EACR,EAAE,EACF,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACS,EACvB,GAAG,KACD;AACF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,OAAgC,KAAI;QACnC,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,CAAC,aAAa,GAAG,aAAa
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nexport type CheckboxSize = \"md\" | \"sm\" | \"xs\"\n\nexport interface CheckboxProps {\n description?: string\n disabled?: boolean\n id?: string\n indeterminate?: boolean\n invalid?: boolean\n label: string\n size?: CheckboxSize\n}\n\nexport type CheckboxElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof CheckboxProps | \"type\"\n> &\n CheckboxProps\n\nlet idCounter = 0\n\nconst buildCheckboxClassName = ({\n className,\n invalid,\n indeterminate,\n size,\n}: {\n className?: string\n indeterminate?: boolean\n invalid?: boolean\n size?: CheckboxSize\n}): string => {\n return classNames(\n \"tds-checkbox\",\n size && size !== \"md\" && `tds-checkbox--${size}`,\n invalid && \"tds-checkbox--invalid\",\n indeterminate && \"tds-checkbox--indeterminate\",\n className\n )\n}\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n * Label must be a string.\n *\n * @component\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n (\n {\n className,\n description,\n disabled,\n id,\n indeterminate = false,\n invalid,\n label,\n size = \"md\",\n ...restProps\n }: CheckboxElementProps,\n ref\n ) => {\n const callbackRef = useCallback(\n (element: HTMLInputElement | null) => {\n if (element) {\n element.indeterminate = indeterminate\n }\n\n // Handle the forwarded ref\n if (typeof ref === \"function\") {\n ref(element)\n } else if (ref && typeof ref === \"object\") {\n ref.current = element\n }\n },\n [ref, indeterminate]\n )\n\n const combinedClassName = buildCheckboxClassName({\n className,\n indeterminate,\n invalid,\n size,\n })\n\n const checkboxId = id || `tds-checkbox-${idCounter++}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={\n description ? `${checkboxId}-description` : undefined\n }\n aria-invalid={invalid}\n disabled={disabled}\n id={checkboxId}\n ref={callbackRef}\n type=\"checkbox\"\n />\n <label htmlFor={checkboxId}>{label}</label>\n {description && (\n <p\n id={`${checkboxId}-description`}\n className=\"tds-checkbox-description\"\n >\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":[],"mappings":";;;AAuBA,IAAI,SAAS,GAAG,CAAC,CAAA;AAEjB,MAAM,sBAAsB,GAAG,CAAC,EAC9B,SAAS,EACT,OAAO,EACP,aAAa,EACb,IAAI,GAML,KAAY;IACX,OAAO,UAAU,CACf,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAiB,cAAA,EAAA,IAAI,EAAE,EAChD,OAAO,IAAI,uBAAuB,EAClC,aAAa,IAAI,6BAA6B,EAC9C,SAAS,CACV,CAAA;AACH,CAAC,CAAA;AAED;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,QAAQ,EACR,EAAE,EACF,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACS,EACvB,GAAG,KACD;AACF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,OAAgC,KAAI;QACnC,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,CAAC,aAAa,GAAG,aAAa,CAAA;SACtC;;AAGD,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC7B,GAAG,CAAC,OAAO,CAAC,CAAA;SACb;AAAM,aAAA,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AACzC,YAAA,GAAG,CAAC,OAAO,GAAG,OAAO,CAAA;SACtB;AACH,KAAC,EACD,CAAC,GAAG,EAAE,aAAa,CAAC,CACrB,CAAA;IAED,MAAM,iBAAiB,GAAG,sBAAsB,CAAC;QAC/C,SAAS;QACT,aAAa;QACb,OAAO;QACP,IAAI;AACL,KAAA,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,EAAE,IAAI,gBAAgB,SAAS,EAAE,EAAE,CAAA;AAEtD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EAEX,WAAW,GAAG,CAAG,EAAA,UAAU,CAAc,YAAA,CAAA,GAAG,SAAS,EAEzC,cAAA,EAAA,OAAO,EACrB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EACf,CAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;AAC1C,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,UAAU,CAAc,YAAA,CAAA,EAC/B,SAAS,EAAC,0BAA0B,EAEnC,EAAA,WAAW,CACV,CACL,CACG,EACP;AACH,CAAC,EACF;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/internal/LoadingSpinner.tsx"],"sourcesContent":["import \"./LoadingSpinner.css\"\n\nimport React from \"react\"\n\nexport default function LoadingSpinner() {\n return <div className=\"tds-loading-spinner\" />\n}\n"],"names":[],"mappings":";;AAIc,SAAU,cAAc,GAAA;AACpC,IAAA,OAAO,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,GAAG;AAChD;;;;"}
|
|
1
|
+
{"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/internal/LoadingSpinner.tsx"],"sourcesContent":["import \"./LoadingSpinner.css\"\n\nimport React from \"react\"\n\nexport default function LoadingSpinner() {\n return <div className=\"tds-loading-spinner\" />\n}\n"],"names":[],"mappings":";;AAIc,SAAU,cAAc,GAAA;AACpC,IAAA,OAAO,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,GAAG,CAAA;AAChD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"../../utilities/buttonLinkShared\"\n\nexport interface BaseLinkElementProps\n extends BaseComponentProps,\n Omit<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n keyof BaseComponentProps | \"children\"\n > {\n children?: React.ReactNode\n external?: boolean\n href: string\n kind?: ComponentKind\n label?: React.ReactNode\n}\n\nconst buildComponentClassName = (\n size?: ComponentSize,\n kind?: ComponentKind,\n className?: string\n): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n className\n )\n}\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n (\n {\n size,\n prefix,\n suffix,\n kind,\n label,\n children,\n className,\n href,\n external = false,\n ...restProps\n }: BaseLinkElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName(size, kind, className)\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n const externalProps = external\n ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n : {}\n\n return (\n <a\n href={href}\n className={combinedClassName}\n ref={ref}\n {...externalProps}\n {...restProps}\n >\n {prefixElement}\n {label || children}\n {suffixElement}\n </a>\n )\n }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":[],"mappings":";;;;AA2BA,MAAM,uBAAuB,GAAG,CAC9B,IAAoB,EACpB,IAAoB,EACpB,SAAkB,KACR;AACV,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,CACV;AACH,CAAC;AAEM,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACS,EACvB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC;IAExE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG;
|
|
1
|
+
{"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"../../utilities/buttonLinkShared\"\n\nexport interface BaseLinkElementProps\n extends BaseComponentProps,\n Omit<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n keyof BaseComponentProps | \"children\"\n > {\n children?: React.ReactNode\n external?: boolean\n href: string\n kind?: ComponentKind\n label?: React.ReactNode\n}\n\nconst buildComponentClassName = (\n size?: ComponentSize,\n kind?: ComponentKind,\n className?: string\n): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n className\n )\n}\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n (\n {\n size,\n prefix,\n suffix,\n kind,\n label,\n children,\n className,\n href,\n external = false,\n ...restProps\n }: BaseLinkElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName(size, kind, className)\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n const externalProps = external\n ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n : {}\n\n return (\n <a\n href={href}\n className={combinedClassName}\n ref={ref}\n {...externalProps}\n {...restProps}\n >\n {prefixElement}\n {label || children}\n {suffixElement}\n </a>\n )\n }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":[],"mappings":";;;;AA2BA,MAAM,uBAAuB,GAAG,CAC9B,IAAoB,EACpB,IAAoB,EACpB,SAAkB,KACR;AACV,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,CACV,CAAA;AACH,CAAC,CAAA;AAEM,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACS,EACvB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,CAAA;IAExE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IACnE,MAAM,aAAa,GAAG,QAAQ;UAC1B,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ,EAAE;UAChD,EAAE,CAAA;AAEN,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EACJ,GAAA,aAAa,KACb,SAAS,EAAA;QAEZ,aAAa;AACb,QAAA,KAAK,IAAI,QAAQ;QACjB,aAAa,CACZ,EACL;AACH,CAAC,EACF;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" | \"children\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseLink\n href={href}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n {...restProps}\n />\n )\n }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":[],"mappings":";;;;MAYa,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,QACE,oBAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EACJ,GAAA,SAAS,EACb,CAAA;
|
|
1
|
+
{"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" | \"children\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseLink\n href={href}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n {...restProps}\n />\n )\n }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":[],"mappings":";;;;MAYa,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAA;IAEpE,QACE,oBAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EACJ,GAAA,SAAS,EACb,CAAA,EACH;AACH,CAAC,EACF;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type LinkProps = Omit<BaseLinkElementProps, \"label\"> & {\n children?: React.ReactNode\n label?: string\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n ({ href, ...restProps }: LinkProps, ref) => {\n return <BaseLink href={href} ref={ref} {...restProps} />\n }\n)\n\nLink.displayName = \"Link\"\n"],"names":[],"mappings":";;;AAWa,MAAA,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAa,EAAE,GAAG,KAAI;AACzC,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAM,GAAA,SAAS,GAAI;AAC1D,CAAC;
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type LinkProps = Omit<BaseLinkElementProps, \"label\"> & {\n children?: React.ReactNode\n label?: string\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n ({ href, ...restProps }: LinkProps, ref) => {\n return <BaseLink href={href} ref={ref} {...restProps} />\n }\n)\n\nLink.displayName = \"Link\"\n"],"names":[],"mappings":";;;AAWa,MAAA,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAa,EAAE,GAAG,KAAI;AACzC,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAM,GAAA,SAAS,GAAI,CAAA;AAC1D,CAAC,EACF;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
|
|
@@ -1 +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,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAAE,OAAO,CAAO;QAC9C,UAAU,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,YAAY,IAAE,UAAU,CAAO,CACxC;
|
|
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,CAAA;AAClD,IAAA,MAAM,YAAY,GAAG,OAAO,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAA;IAC/C,QACE,4CAAqB,aAAa,EAAA,GAAM,YAAY,EAAE,KAAK,EAAE,SAAS,EAAA;QACnE,QAAQ;AACR,QAAA,OAAO,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAAE,OAAO,CAAO;QAC9C,UAAU,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,YAAY,IAAE,UAAU,CAAO,CACxC,EACnB;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/page-header/index.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport {\n defineCustomElementTdsPageHeader,\n defineCustomElementTdsPageHeaderNav,\n} from \"tapestry-wc\"\n\ndefineCustomElementTdsPageHeader()\ndefineCustomElementTdsPageHeaderNav()\n"],"names":["defineCustomElementTdsPageHeader","defineCustomElementTdsPageHeaderNav"],"mappings":";;;;AAOAA,mBAAgC,EAAE;AAClCC,qBAAmC,EAAE"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/page-header/index.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport {\n defineCustomElementTdsPageHeader,\n defineCustomElementTdsPageHeaderNav,\n} from \"tapestry-wc\"\n\ndefineCustomElementTdsPageHeader()\ndefineCustomElementTdsPageHeaderNav()\n"],"names":["defineCustomElementTdsPageHeader","defineCustomElementTdsPageHeaderNav"],"mappings":";;;;AAOAA,mBAAgC,EAAE,CAAA;AAClCC,qBAAmC,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidenav.js","sources":["../../../src/components/sidenav/Sidenav.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The sidenav lets users navigate through subsets of data pertaining to a resource.\n * It can be nested under the page header navigation, as secondary navigation.\n *\n * The expected structure of a `Sidenav` is:\n * `<Sidenav> <SidenavSection> <SidenavItem /> </SidenavSection> </Sidenav>`\n *\n * Please refer to each component's documentation for more information on how to use them.\n */\nexport function Sidenav({\n children,\n label,\n selectedItemLabel,\n className,\n popoverId,\n}: {\n /**\n * Default slot used to nest `SidenavSection` components.\n */\n children: React.ReactNode\n className?: string\n /**\n * Label for the sidenav, used for accessibility.\n */\n label?: string\n /**\n * The id of the popover container.\n */\n popoverId?: string\n /**\n * Label displayed in the responsive header of the sidenav.\n */\n selectedItemLabel?: string\n}) {\n const popoverIdProp =\n popoverId && popoverId.trim() ? { \"popover-id\": popoverId } : {}\n\n return (\n <tds-sidenav\n label={label}\n selected-item-label={selectedItemLabel}\n class={className}\n {...popoverIdProp}\n >\n {children}\n </tds-sidenav>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;AAQG;AACa,SAAA,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,GAmBV,EAAA;IACC,MAAM,aAAa,GACjB,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE;AAElE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,aAAA,EAAA,EAAA,KAAK,EAAE,KAAK,yBACS,iBAAiB,EACtC,KAAK,EAAE,SAAS,EACZ,GAAA,aAAa,IAEhB,QAAQ,CACG;
|
|
1
|
+
{"version":3,"file":"Sidenav.js","sources":["../../../src/components/sidenav/Sidenav.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The sidenav lets users navigate through subsets of data pertaining to a resource.\n * It can be nested under the page header navigation, as secondary navigation.\n *\n * The expected structure of a `Sidenav` is:\n * `<Sidenav> <SidenavSection> <SidenavItem /> </SidenavSection> </Sidenav>`\n *\n * Please refer to each component's documentation for more information on how to use them.\n */\nexport function Sidenav({\n children,\n label,\n selectedItemLabel,\n className,\n popoverId,\n}: {\n /**\n * Default slot used to nest `SidenavSection` components.\n */\n children: React.ReactNode\n className?: string\n /**\n * Label for the sidenav, used for accessibility.\n */\n label?: string\n /**\n * The id of the popover container.\n */\n popoverId?: string\n /**\n * Label displayed in the responsive header of the sidenav.\n */\n selectedItemLabel?: string\n}) {\n const popoverIdProp =\n popoverId && popoverId.trim() ? { \"popover-id\": popoverId } : {}\n\n return (\n <tds-sidenav\n label={label}\n selected-item-label={selectedItemLabel}\n class={className}\n {...popoverIdProp}\n >\n {children}\n </tds-sidenav>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;AAQG;AACa,SAAA,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,GAmBV,EAAA;IACC,MAAM,aAAa,GACjB,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,CAAA;AAElE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,aAAA,EAAA,EAAA,KAAK,EAAE,KAAK,yBACS,iBAAiB,EACtC,KAAK,EAAE,SAAS,EACZ,GAAA,aAAa,IAEhB,QAAQ,CACG,EACf;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidenavItem.js","sources":["../../../src/components/sidenav/SidenavItem.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The `SidenavItem` component is used to display a single item in the sidenav.\n *\n * @example\n * ```html\n * <SidenavItem>\n * <a href=\"#\">Home</a>\n * </SidenavItem>\n *\n * <SidenavItem>\n * <button>Foo</button>\n * <SidenavSection subnav>\n * <SidenavItem><a href=\"#\">Nested Link</a></SidenavItem>\n * </SidenavSection>\n * </SidenavItem>\n * ```\n */\nexport function SidenavItem({\n children,\n className,\n selected,\n}: {\n /**\n * Should be a link or button without any classes or styles applied.\n */\n children: React.ReactNode\n className?: string\n /**\n * Whether the sidenav item is selected.\n */\n selected?: boolean\n}) {\n const selectedProps = selected ? { selected: true } : {}\n return (\n <tds-sidenav-item class={className} {...selectedProps}>\n {children}\n </tds-sidenav-item>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;;;AAgBG;AACG,SAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,QAAQ,GAWT,EAAA;AACC,IAAA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE;IACxD,QACE,KAAkB,CAAA,aAAA,CAAA,kBAAA,EAAA,EAAA,KAAK,EAAE,SAAS,EAAM,GAAA,aAAa,EAClD,EAAA,QAAQ,CACQ;
|
|
1
|
+
{"version":3,"file":"SidenavItem.js","sources":["../../../src/components/sidenav/SidenavItem.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The `SidenavItem` component is used to display a single item in the sidenav.\n *\n * @example\n * ```html\n * <SidenavItem>\n * <a href=\"#\">Home</a>\n * </SidenavItem>\n *\n * <SidenavItem>\n * <button>Foo</button>\n * <SidenavSection subnav>\n * <SidenavItem><a href=\"#\">Nested Link</a></SidenavItem>\n * </SidenavSection>\n * </SidenavItem>\n * ```\n */\nexport function SidenavItem({\n children,\n className,\n selected,\n}: {\n /**\n * Should be a link or button without any classes or styles applied.\n */\n children: React.ReactNode\n className?: string\n /**\n * Whether the sidenav item is selected.\n */\n selected?: boolean\n}) {\n const selectedProps = selected ? { selected: true } : {}\n return (\n <tds-sidenav-item class={className} {...selectedProps}>\n {children}\n </tds-sidenav-item>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;;;AAgBG;AACG,SAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,QAAQ,GAWT,EAAA;AACC,IAAA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAAA;IACxD,QACE,KAAkB,CAAA,aAAA,CAAA,kBAAA,EAAA,EAAA,KAAK,EAAE,SAAS,EAAM,GAAA,aAAa,EAClD,EAAA,QAAQ,CACQ,EACpB;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidenavSection.js","sources":["../../../src/components/sidenav/SidenavSection.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The `SidenavSection` component is used to display a section of the sidenav.\n * All `SidenavItem` components should be nested within a `SidenavSection`.\n *\n * If the `label` prop is provided, it will be used to generate a header for the section, and the section will be labelled by the `aria-labelledby` attribute.\n */\nexport function SidenavSection({\n children,\n className,\n label,\n subnav,\n}: {\n /**\n * Default slot used to nest `SidenavItem` components.\n */\n children: React.ReactNode\n className?: string\n /**\n * Label for the section.\n */\n label?: string\n /**\n * Add subnav if this section is a subnav of a SidenavItem.\n */\n subnav?: boolean\n}) {\n const subnavProps = subnav ? { slot: \"subnav\" } : {}\n return (\n <tds-sidenav-section class={className} label={label} {...subnavProps}>\n {children}\n </tds-sidenav-section>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;AAKG;AACG,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,GAeP,EAAA;AACC,IAAA,MAAM,WAAW,GAAG,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE;AACpD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAqB,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAM,WAAW,EAAA,EACjE,QAAQ,CACW;
|
|
1
|
+
{"version":3,"file":"SidenavSection.js","sources":["../../../src/components/sidenav/SidenavSection.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The `SidenavSection` component is used to display a section of the sidenav.\n * All `SidenavItem` components should be nested within a `SidenavSection`.\n *\n * If the `label` prop is provided, it will be used to generate a header for the section, and the section will be labelled by the `aria-labelledby` attribute.\n */\nexport function SidenavSection({\n children,\n className,\n label,\n subnav,\n}: {\n /**\n * Default slot used to nest `SidenavItem` components.\n */\n children: React.ReactNode\n className?: string\n /**\n * Label for the section.\n */\n label?: string\n /**\n * Add subnav if this section is a subnav of a SidenavItem.\n */\n subnav?: boolean\n}) {\n const subnavProps = subnav ? { slot: \"subnav\" } : {}\n return (\n <tds-sidenav-section class={className} label={label} {...subnavProps}>\n {children}\n </tds-sidenav-section>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;AAKG;AACG,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,GAeP,EAAA;AACC,IAAA,MAAM,WAAW,GAAG,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AACpD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAqB,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAM,WAAW,EAAA,EACjE,QAAQ,CACW,EACvB;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/sidenav/index.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport {\n defineCustomElementTdsSidenav,\n defineCustomElementTdsSidenavItem,\n defineCustomElementTdsSidenavResponsiveHeader,\n defineCustomElementTdsSidenavSection,\n} from \"tapestry-wc\"\n\ndefineCustomElementTdsSidenav()\ndefineCustomElementTdsSidenavItem()\ndefineCustomElementTdsSidenavSection()\ndefineCustomElementTdsSidenavResponsiveHeader()\n"],"names":["defineCustomElementTdsSidenav","defineCustomElementTdsSidenavItem","defineCustomElementTdsSidenavSection","defineCustomElementTdsSidenavResponsiveHeader"],"mappings":";;;;;;AASAA,mBAA6B,EAAE;AAC/BC,qBAAiC,EAAE;AACnCC,qBAAoC,EAAE;AACtCC,qBAA6C,EAAE"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/sidenav/index.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport {\n defineCustomElementTdsSidenav,\n defineCustomElementTdsSidenavItem,\n defineCustomElementTdsSidenavResponsiveHeader,\n defineCustomElementTdsSidenavSection,\n} from \"tapestry-wc\"\n\ndefineCustomElementTdsSidenav()\ndefineCustomElementTdsSidenavItem()\ndefineCustomElementTdsSidenavSection()\ndefineCustomElementTdsSidenavResponsiveHeader()\n"],"names":["defineCustomElementTdsSidenav","defineCustomElementTdsSidenavItem","defineCustomElementTdsSidenavSection","defineCustomElementTdsSidenavResponsiveHeader"],"mappings":";;;;;;AASAA,mBAA6B,EAAE,CAAA;AAC/BC,qBAAiC,EAAE,CAAA;AACnCC,qBAAoC,EAAE,CAAA;AACtCC,qBAA6C,EAAE"}
|
package/dist/index.css
CHANGED
|
@@ -1111,16 +1111,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1111
1111
|
}
|
|
1112
1112
|
|
|
1113
1113
|
.tds-btn:disabled,.tds-btn.disabled {
|
|
1114
|
+
--tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-dark-020);
|
|
1115
|
+
--tds-btn-loading-spinner-color: var(--t-text-color-status-neutral);
|
|
1116
|
+
color: var(--tds-btn-color-disabled);
|
|
1114
1117
|
pointer-events: none;
|
|
1118
|
+
background-color: var(--tds-btn-bg-disabled);
|
|
1119
|
+
border-color: var(--tds-btn-border-color-disabled);
|
|
1120
|
+
opacity: var(--tds-btn-disabled-opacity);
|
|
1115
1121
|
}
|
|
1116
1122
|
|
|
1117
|
-
:is(.tds-btn:disabled,.tds-btn.disabled):not(.tds-btn--loading) {
|
|
1118
|
-
color: var(--tds-btn-color-disabled);
|
|
1119
|
-
background-color: var(--tds-btn-bg-disabled);
|
|
1120
|
-
border-color: var(--tds-btn-border-color-disabled);
|
|
1121
|
-
opacity: var(--tds-btn-disabled-opacity);
|
|
1122
|
-
}
|
|
1123
|
-
|
|
1124
1123
|
.tds-btn svg:not(.symbol) {
|
|
1125
1124
|
display: block;
|
|
1126
1125
|
inline-size: auto;
|
|
@@ -1129,7 +1128,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1129
1128
|
color: var(--tds-btn-icon-color, currentColor);
|
|
1130
1129
|
}
|
|
1131
1130
|
|
|
1132
|
-
.tds-btn .tds-loading-spinner {
|
|
1131
|
+
.tds-btn .tds-loading-spinner {
|
|
1132
|
+
--tds-loading-spinner-track-color: var(--tds-btn-loading-spinner-track-color);
|
|
1133
|
+
--tds-loading-spinner-track-width: var(--tds-btn-loading-spinner-track-width);
|
|
1134
|
+
--tds-loading-spinner-color: var(--tds-btn-loading-spinner-color);
|
|
1135
|
+
--tds-loading-spinner-visibility: var(--tds-btn-loading-spinner-visibility);
|
|
1136
|
+
--tds-loading-spinner-animation-play-state: var(--tds-btn-loading-spinner-animation-play-state);
|
|
1137
|
+
}
|
|
1133
1138
|
|
|
1134
1139
|
@media (prefers-reduced-motion: reduce) {
|
|
1135
1140
|
|
|
@@ -1163,12 +1168,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1163
1168
|
--tds-btn-padding-truncated-x: 4px;
|
|
1164
1169
|
--tds-btn-min-height: 24px;
|
|
1165
1170
|
--tds-btn-font-size: var(--t-font-size-sm);
|
|
1171
|
+
--tds-btn-loading-spinner-track-width: 3px;
|
|
1166
1172
|
}
|
|
1167
1173
|
|
|
1168
|
-
.tds-btn--sm .tds-loading-spinner {
|
|
1169
|
-
--tds-loading-spinner-border-width: 3px;
|
|
1170
|
-
}
|
|
1171
|
-
|
|
1172
1174
|
/* Effective height 20px */
|
|
1173
1175
|
|
|
1174
1176
|
.tds-btn--xs {
|
|
@@ -1177,12 +1179,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1177
1179
|
--tds-btn-padding-truncated-x: 5px;
|
|
1178
1180
|
--tds-btn-min-height: 20px;
|
|
1179
1181
|
--tds-btn-font-size: var(--t-font-size-xs);
|
|
1182
|
+
--tds-btn-loading-spinner-track-width: 3px;
|
|
1180
1183
|
}
|
|
1181
1184
|
|
|
1182
|
-
.tds-btn--xs .tds-loading-spinner {
|
|
1183
|
-
--tds-loading-spinner-border-width: 3px;
|
|
1184
|
-
}
|
|
1185
|
-
|
|
1186
1185
|
.tds-btn--neutral {
|
|
1187
1186
|
--tds-btn-color: var(--t-text-color-status-neutral);
|
|
1188
1187
|
--tds-btn-bg: var(--t-fill-color-button-neutral-solid-default);
|
|
@@ -1211,7 +1210,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1211
1210
|
--tds-btn-color-disabled: var(--t-text-color-default-disabled);
|
|
1212
1211
|
--tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
|
|
1213
1212
|
--tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
|
|
1214
|
-
--tds-btn-loading-spinner-
|
|
1213
|
+
--tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
|
|
1215
1214
|
}
|
|
1216
1215
|
|
|
1217
1216
|
.tds-btn--delete {
|
|
@@ -1227,7 +1226,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1227
1226
|
--tds-btn-color-disabled: var(--t-text-color-default-disabled);
|
|
1228
1227
|
--tds-btn-bg-disabled: var(--t-fill-color-button-delete-solid-disabled);
|
|
1229
1228
|
--tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
|
|
1230
|
-
--tds-btn-loading-spinner-
|
|
1229
|
+
--tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
|
|
1231
1230
|
}
|
|
1232
1231
|
|
|
1233
1232
|
.tds-btn--outline-neutral {
|
|
@@ -1256,7 +1255,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1256
1255
|
--tds-btn-color-disabled: var(--t-text-color-default-disabled);
|
|
1257
1256
|
--tds-btn-bg-disabled: var(--t-fill-color-button-interaction-outline-dim-disabled);
|
|
1258
1257
|
--tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
|
|
1259
|
-
--tds-btn-loading-spinner-
|
|
1258
|
+
--tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
|
|
1260
1259
|
}
|
|
1261
1260
|
|
|
1262
1261
|
.tds-btn--outline-delete {
|
|
@@ -1271,7 +1270,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1271
1270
|
--tds-btn-color-disabled: var(--t-text-color-default-disabled);
|
|
1272
1271
|
--tds-btn-bg-disabled: var(--t-fill-color-button-delete-outline-dim-disabled);
|
|
1273
1272
|
--tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
|
|
1274
|
-
--tds-btn-loading-spinner-
|
|
1273
|
+
--tds-btn-loading-spinner-track-color: var(--t-fill-color-status-error-ghost);
|
|
1275
1274
|
}
|
|
1276
1275
|
|
|
1277
1276
|
.tds-btn--ghost-neutral {
|
|
@@ -1300,7 +1299,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1300
1299
|
--tds-btn-color-disabled: var(--t-text-color-default-disabled);
|
|
1301
1300
|
--tds-btn-bg-disabled: transparent;
|
|
1302
1301
|
--tds-btn-border-color-disabled: transparent;
|
|
1303
|
-
--tds-btn-loading-spinner-
|
|
1302
|
+
--tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
|
|
1304
1303
|
}
|
|
1305
1304
|
|
|
1306
1305
|
.tds-btn--ghost-delete {
|
|
@@ -1315,7 +1314,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1315
1314
|
--tds-btn-color-disabled: var(--t-text-color-default-disabled);
|
|
1316
1315
|
--tds-btn-bg-disabled: transparent;
|
|
1317
1316
|
--tds-btn-border-color-disabled: transparent;
|
|
1318
|
-
--tds-btn-loading-spinner-
|
|
1317
|
+
--tds-btn-loading-spinner-track-color: var(--t-fill-color-status-error-ghost);
|
|
1319
1318
|
}
|
|
1320
1319
|
|
|
1321
1320
|
.tds-btn--inline-text {
|
|
@@ -1333,7 +1332,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1333
1332
|
--tds-btn-font-size: inherit;
|
|
1334
1333
|
--tds-btn-font-weight: inherit;
|
|
1335
1334
|
--tds-btn-line-height: inherit;
|
|
1336
|
-
--tds-btn-loading-spinner-
|
|
1335
|
+
--tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
|
|
1337
1336
|
font-family: inherit;
|
|
1338
1337
|
font-style: inherit;
|
|
1339
1338
|
vertical-align: inherit;
|
|
@@ -1356,7 +1355,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1356
1355
|
--tds-btn-color-disabled: var(--t-text-color-default-disabled);
|
|
1357
1356
|
--tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
|
|
1358
1357
|
--tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
|
|
1359
|
-
--tds-btn-loading-spinner-
|
|
1358
|
+
--tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
|
|
1360
1359
|
}
|
|
1361
1360
|
|
|
1362
1361
|
.tds-btn--secondary-page-header {
|
|
@@ -1405,7 +1404,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1405
1404
|
--tds-btn-color-disabled: var(--t-text-color-default-disabled);
|
|
1406
1405
|
--tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
|
|
1407
1406
|
--tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
|
|
1408
|
-
--tds-btn-loading-spinner-
|
|
1407
|
+
--tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
|
|
1409
1408
|
}
|
|
1410
1409
|
|
|
1411
1410
|
.tds-btn--pill {
|
|
@@ -1459,14 +1458,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1459
1458
|
}
|
|
1460
1459
|
|
|
1461
1460
|
.tds-btn--loading {
|
|
1461
|
+
--tds-btn-loading-spinner-visibility: visible;
|
|
1462
|
+
--tds-btn-loading-spinner-animation-play-state: running;
|
|
1463
|
+
|
|
1462
1464
|
position: relative;
|
|
1463
1465
|
}
|
|
1464
1466
|
|
|
1465
|
-
.tds-btn--loading .tds-loading-spinner {
|
|
1466
|
-
--tds-loading-spinner-visibility: visible;
|
|
1467
|
-
--tds-loading-spinner-animation-play-state: running;
|
|
1468
|
-
}
|
|
1469
|
-
|
|
1470
1467
|
.tds-btn--loading :not(.tds-loading-spinner) {
|
|
1471
1468
|
visibility: hidden;
|
|
1472
1469
|
}
|
|
@@ -1481,23 +1478,20 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
|
|
|
1481
1478
|
}
|
|
1482
1479
|
|
|
1483
1480
|
.tds-loading-spinner {
|
|
1484
|
-
--tds-loading-spinner-border-width: 4px; /* Default for md size */
|
|
1485
1481
|
--tds-loading-spinner-size: 1.25em;
|
|
1486
|
-
--tds-loading-spinner-visibility: hidden;
|
|
1487
|
-
--tds-loading-spinner-animation-play-state: paused;
|
|
1488
1482
|
|
|
1489
1483
|
position: absolute;
|
|
1490
1484
|
right: 0;
|
|
1491
1485
|
left: 0;
|
|
1492
|
-
visibility: var(--tds-loading-spinner-visibility);
|
|
1486
|
+
visibility: var(--tds-loading-spinner-visibility, hidden);
|
|
1493
1487
|
width: var(--tds-loading-spinner-size);
|
|
1494
1488
|
height: var(--tds-loading-spinner-size);
|
|
1495
1489
|
margin: auto;
|
|
1496
|
-
border: var(--tds-loading-spinner-
|
|
1497
|
-
border-top-color: var(--tds-loading-spinner-
|
|
1490
|
+
border: var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
|
|
1491
|
+
border-top-color: var(--tds-loading-spinner-color, currentcolor);
|
|
1498
1492
|
border-radius: 50%;
|
|
1499
1493
|
animation: spinner-rotate 500ms infinite linear;
|
|
1500
|
-
animation-play-state: var(--tds-loading-spinner-animation-play-state);
|
|
1494
|
+
animation-play-state: var(--tds-loading-spinner-animation-play-state, paused);
|
|
1501
1495
|
}
|
|
1502
1496
|
|
|
1503
1497
|
@keyframes spinner-rotate {
|