@backstage/ui 0.11.0-next.0 → 0.11.0-next.1

package/dist/components/TablePagination/TablePagination.esm.js

@@ -4,111 +4,86 @@ import { useStyles } from '../../hooks/useStyles.esm.js';
 import { TablePaginationDefinition } from './definition.esm.js';
 import styles from './TablePagination.module.css.esm.js';
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
+import { useId } from 'react';
 import { Select } from '../Select/Select.esm.js';
 import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
 import { Text } from '../Text/Text.esm.js';
 
-function TablePagination(props) {
-  const { classNames, cleanedProps } = useStyles(TablePaginationDefinition, {
-    showPageSizeOptions: true,
-    ...props
-  });
-  const {
-    className,
-    offset,
-    pageSize,
-    rowCount,
-    onNextPage,
-    onPreviousPage,
-    onPageSizeChange,
-    setOffset,
-    setPageSize,
-    showPageSizeOptions,
-    ...rest
-  } = cleanedProps;
-  const currentOffset = offset ?? 0;
-  const currentPageSize = pageSize ?? 10;
-  const fromCount = currentOffset + 1;
-  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);
-  const nextPage = () => {
-    const totalRows = rowCount ?? 0;
-    const nextOffset = currentOffset + currentPageSize;
-    if (nextOffset < totalRows) {
-      onNextPage?.();
-      setOffset?.(nextOffset);
-    }
-  };
-  const previousPage = () => {
-    if (currentOffset > 0) {
-      onPreviousPage?.();
-      const prevOffset = Math.max(0, currentOffset - currentPageSize);
-      setOffset?.(prevOffset);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(classNames.root, styles[classNames.root], className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: clsx(classNames.left, styles[classNames.left]), children: showPageSizeOptions && /* @__PURE__ */ jsx(
-          Select,
-          {
-            name: "pageSize",
-            size: "small",
-            placeholder: "Show 10 results",
-            options: [
-              { label: "Show 5 results", value: "5" },
-              { label: "Show 10 results", value: "10" },
-              { label: "Show 20 results", value: "20" },
-              { label: "Show 30 results", value: "30" },
-              { label: "Show 40 results", value: "40" },
-              { label: "Show 50 results", value: "50" }
-            ],
-            selectedKey: pageSize?.toString(),
-            onSelectionChange: (value) => {
-              const newPageSize = Number(value);
-              setPageSize?.(newPageSize);
-              onPageSizeChange?.(newPageSize);
-            },
-            className: clsx(classNames.select, styles[classNames.select])
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: clsx(classNames.right, styles[classNames.right]), children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              as: "p",
-              variant: "body-medium",
-              children: `${fromCount} - ${toCount} of ${rowCount}`
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ButtonIcon,
-            {
-              variant: "secondary",
-              size: "small",
-              onClick: previousPage,
-              isDisabled: currentOffset === 0,
-              icon: /* @__PURE__ */ jsx(RiArrowLeftSLine, {}),
-              "aria-label": "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ButtonIcon,
-            {
-              variant: "secondary",
-              size: "small",
-              onClick: nextPage,
-              isDisabled: rowCount !== void 0 && currentOffset + currentPageSize >= rowCount,
-              icon: /* @__PURE__ */ jsx(RiArrowRightSLine, {}),
-              "aria-label": "Next"
-            }
-          )
-        ] })
-      ]
-    }
-  );
+function TablePagination({
+  pageSize,
+  offset,
+  totalCount,
+  hasNextPage,
+  hasPreviousPage,
+  onNextPage,
+  onPreviousPage,
+  onPageSizeChange,
+  showPageSizeOptions = true,
+  getLabel
+}) {
+  const { classNames } = useStyles(TablePaginationDefinition, {});
+  const labelId = useId();
+  const hasItems = totalCount !== void 0 && totalCount !== 0;
+  let label = `${totalCount} items`;
+  if (getLabel) {
+    label = getLabel({ pageSize, offset, totalCount });
+  } else if (offset !== void 0) {
+    const fromCount = offset + 1;
+    const toCount = Math.min(offset + pageSize, totalCount ?? 0);
+    label = `${fromCount} - ${toCount} of ${totalCount}`;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx(classNames.root, styles[classNames.root]), children: [
+    /* @__PURE__ */ jsx("div", { className: clsx(classNames.left, styles[classNames.left]), children: showPageSizeOptions && /* @__PURE__ */ jsx(
+      Select,
+      {
+        name: "pageSize",
+        size: "small",
+        "aria-label": "Select table page size",
+        placeholder: "Show 10 results",
+        options: [
+          { label: "Show 5 results", value: "5" },
+          { label: "Show 10 results", value: "10" },
+          { label: "Show 20 results", value: "20" },
+          { label: "Show 30 results", value: "30" },
+          { label: "Show 40 results", value: "40" },
+          { label: "Show 50 results", value: "50" }
+        ],
+        defaultValue: pageSize.toString(),
+        onChange: (value) => {
+          const newPageSize = Number(value);
+          onPageSizeChange?.(newPageSize);
+        },
+        className: clsx(classNames.select, styles[classNames.select])
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: clsx(classNames.right, styles[classNames.right]), children: [
+      hasItems && /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-medium", id: labelId, children: label }),
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          variant: "secondary",
+          size: "small",
+          onClick: onPreviousPage,
+          isDisabled: !hasPreviousPage,
+          icon: /* @__PURE__ */ jsx(RiArrowLeftSLine, {}),
+          "aria-label": "Previous table page",
+          "aria-describedby": hasItems ? labelId : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          variant: "secondary",
+          size: "small",
+          onClick: onNextPage,
+          isDisabled: !hasNextPage,
+          icon: /* @__PURE__ */ jsx(RiArrowRightSLine, {}),
+          "aria-label": "Next table page",
+          "aria-describedby": hasItems ? labelId : void 0
+        }
+      )
+    ] })
+  ] });
 }
 
 export { TablePagination };

package/dist/components/TablePagination/TablePagination.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { Text, ButtonIcon, Select } from '../..';\nimport type { TablePaginationProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TablePaginationDefinition } from './definition';\nimport styles from './TablePagination.module.css';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n  const { classNames, cleanedProps } = useStyles(TablePaginationDefinition, {\n    showPageSizeOptions: true,\n    ...props,\n  });\n  const {\n    className,\n    offset,\n    pageSize,\n    rowCount,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    setOffset,\n    setPageSize,\n    showPageSizeOptions,\n    ...rest\n  } = cleanedProps;\n\n  const currentOffset = offset ?? 0;\n  const currentPageSize = pageSize ?? 10;\n\n  const fromCount = currentOffset + 1;\n  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);\n\n  const nextPage = () => {\n    const totalRows = rowCount ?? 0;\n    const nextOffset = currentOffset + currentPageSize;\n\n    // Check if there are more items to navigate to\n    if (nextOffset < totalRows) {\n      onNextPage?.(); // Analytics tracking\n      setOffset?.(nextOffset); // Navigate to next page\n    }\n  };\n\n  const previousPage = () => {\n    // Check if we can go to previous page\n    if (currentOffset > 0) {\n      onPreviousPage?.(); // Analytics tracking\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset?.(prevOffset); // Navigate to previous page\n    }\n  };\n\n  return (\n    <div\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...rest}\n    >\n      <div className={clsx(classNames.left, styles[classNames.left])}>\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            placeholder=\"Show 10 results\"\n            options={[\n              { label: 'Show 5 results', value: '5' },\n              { label: 'Show 10 results', value: '10' },\n              { label: 'Show 20 results', value: '20' },\n              { label: 'Show 30 results', value: '30' },\n              { label: 'Show 40 results', value: '40' },\n              { label: 'Show 50 results', value: '50' },\n            ]}\n            selectedKey={pageSize?.toString()}\n            onSelectionChange={value => {\n              const newPageSize = Number(value);\n              setPageSize?.(newPageSize);\n              onPageSizeChange?.(newPageSize);\n            }}\n            className={clsx(classNames.select, styles[classNames.select])}\n          />\n        )}\n      </div>\n      <div className={clsx(classNames.right, styles[classNames.right])}>\n        <Text\n          as=\"p\"\n          variant=\"body-medium\"\n        >{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={previousPage}\n          isDisabled={currentOffset === 0}\n          icon={<RiArrowLeftSLine />}\n          aria-label=\"Previous\"\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={nextPage}\n          isDisabled={\n            rowCount !== undefined &&\n            currentOffset + currentPageSize >= rowCount\n          }\n          icon={<RiArrowRightSLine />}\n          aria-label=\"Next\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { Text, ButtonIcon, Select } from '../..';\nimport type { TablePaginationProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TablePaginationDefinition } from './definition';\nimport styles from './TablePagination.module.css';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\nimport { useId } from 'react';\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination({\n  pageSize,\n  offset,\n  totalCount,\n  hasNextPage,\n  hasPreviousPage,\n  onNextPage,\n  onPreviousPage,\n  onPageSizeChange,\n  showPageSizeOptions = true,\n  getLabel,\n}: TablePaginationProps) {\n  const { classNames } = useStyles(TablePaginationDefinition, {});\n  const labelId = useId();\n\n  const hasItems = totalCount !== undefined && totalCount !== 0;\n\n  let label = `${totalCount} items`;\n  if (getLabel) {\n    label = getLabel({ pageSize, offset, totalCount });\n  } else if (offset !== undefined) {\n    const fromCount = offset + 1;\n    const toCount = Math.min(offset + pageSize, totalCount ?? 0);\n    label = `${fromCount} - ${toCount} of ${totalCount}`;\n  }\n\n  return (\n    <div className={clsx(classNames.root, styles[classNames.root])}>\n      <div className={clsx(classNames.left, styles[classNames.left])}>\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            aria-label=\"Select table page size\"\n            placeholder=\"Show 10 results\"\n            options={[\n              { label: 'Show 5 results', value: '5' },\n              { label: 'Show 10 results', value: '10' },\n              { label: 'Show 20 results', value: '20' },\n              { label: 'Show 30 results', value: '30' },\n              { label: 'Show 40 results', value: '40' },\n              { label: 'Show 50 results', value: '50' },\n            ]}\n            defaultValue={pageSize.toString()}\n            onChange={value => {\n              const newPageSize = Number(value);\n              onPageSizeChange?.(newPageSize);\n            }}\n            className={clsx(classNames.select, styles[classNames.select])}\n          />\n        )}\n      </div>\n      <div className={clsx(classNames.right, styles[classNames.right])}>\n        {hasItems && (\n          <Text as=\"p\" variant=\"body-medium\" id={labelId}>\n            {label}\n          </Text>\n        )}\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={onPreviousPage}\n          isDisabled={!hasPreviousPage}\n          icon={<RiArrowLeftSLine />}\n          aria-label=\"Previous table page\"\n          aria-describedby={hasItems ? labelId : undefined}\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={onNextPage}\n          isDisabled={!hasNextPage}\n          icon={<RiArrowRightSLine />}\n          aria-label=\"Next table page\"\n          aria-describedby={hasItems ? labelId : undefined}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA8BO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,mBAAA,GAAsB,IAAA;AAAA,EACtB;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,yBAAA,EAA2B,EAAE,CAAA;AAC9D,EAAA,MAAM,UAAU,KAAA,EAAM;AAEtB,EAAA,MAAM,QAAA,GAAW,UAAA,KAAe,MAAA,IAAa,UAAA,KAAe,CAAA;AAE5D,EAAA,IAAI,KAAA,GAAQ,GAAG,UAAU,CAAA,MAAA,CAAA;AACzB,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,KAAA,GAAQ,QAAA,CAAS,EAAE,QAAA,EAAU,MAAA,EAAQ,YAAY,CAAA;AAAA,EACnD,CAAA,MAAA,IAAW,WAAW,MAAA,EAAW;AAC/B,IAAA,MAAM,YAAY,MAAA,GAAS,CAAA;AAC3B,IAAA,MAAM,UAAU,IAAA,CAAK,GAAA,CAAI,MAAA,GAAS,QAAA,EAAU,cAAc,CAAC,CAAA;AAC3D,IAAA,KAAA,GAAQ,CAAA,EAAG,SAAS,CAAA,GAAA,EAAM,OAAO,OAAO,UAAU,CAAA,CAAA;AAAA,EACpD;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA,EAC3D,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,CAAC,CAAA,EAC1D,QAAA,EAAA,mBAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,UAAA;AAAA,QACL,IAAA,EAAK,OAAA;AAAA,QACL,YAAA,EAAW,wBAAA;AAAA,QACX,WAAA,EAAY,iBAAA;AAAA,QACZ,OAAA,EAAS;AAAA,UACP,EAAE,KAAA,EAAO,gBAAA,EAAkB,KAAA,EAAO,GAAA,EAAI;AAAA,UACtC,EAAE,KAAA,EAAO,iBAAA,EAAmB,KAAA,EAAO,IAAA,EAAK;AAAA,UACxC,EAAE,KAAA,EAAO,iBAAA,EAAmB,KAAA,EAAO,IAAA,EAAK;AAAA,UACxC,EAAE,KAAA,EAAO,iBAAA,EAAmB,KAAA,EAAO,IAAA,EAAK;AAAA,UACxC,EAAE,KAAA,EAAO,iBAAA,EAAmB,KAAA,EAAO,IAAA,EAAK;AAAA,UACxC,EAAE,KAAA,EAAO,iBAAA,EAAmB,KAAA,EAAO,IAAA;AAAK,SAC1C;AAAA,QACA,YAAA,EAAc,SAAS,QAAA,EAAS;AAAA,QAChC,UAAU,CAAA,KAAA,KAAS;AACjB,UAAA,MAAM,WAAA,GAAc,OAAO,KAAK,CAAA;AAChC,UAAA,gBAAA,GAAmB,WAAW,CAAA;AAAA,QAChC,CAAA;AAAA,QACA,WAAW,IAAA,CAAK,UAAA,CAAW,QAAQ,MAAA,CAAO,UAAA,CAAW,MAAM,CAAC;AAAA;AAAA,KAC9D,EAEJ,CAAA;AAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA,EAC5D,QAAA,EAAA;AAAA,MAAA,QAAA,oBACC,GAAA,CAAC,QAAK,EAAA,EAAG,GAAA,EAAI,SAAQ,aAAA,EAAc,EAAA,EAAI,SACpC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,sBAEF,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,OAAA;AAAA,UACL,OAAA,EAAS,cAAA;AAAA,UACT,YAAY,CAAC,eAAA;AAAA,UACb,IAAA,sBAAO,gBAAA,EAAA,EAAiB,CAAA;AAAA,UACxB,YAAA,EAAW,qBAAA;AAAA,UACX,kBAAA,EAAkB,WAAW,OAAA,GAAU;AAAA;AAAA,OACzC;AAAA,sBACA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,OAAA;AAAA,UACL,OAAA,EAAS,UAAA;AAAA,UACT,YAAY,CAAC,WAAA;AAAA,UACb,IAAA,sBAAO,iBAAA,EAAA,EAAkB,CAAA;AAAA,UACzB,YAAA,EAAW,iBAAA;AAAA,UACX,kBAAA,EAAkB,WAAW,OAAA,GAAU;AAAA;AAAA;AACzC,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/ToggleButton/ToggleButton.esm.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { ToggleButton as ToggleButton$1 } from 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { ToggleButtonDefinition } from './definition.esm.js';
+import styles from './ToggleButton.module.css.esm.js';
+import { useSurface } from '../../hooks/useSurface.esm.js';
+
+const ToggleButton = forwardRef(
+  (props, ref) => {
+    const { classNames, dataAttributes, cleanedProps } = useStyles(
+      ToggleButtonDefinition,
+      {
+        size: "small",
+        ...props
+      }
+    );
+    const { children, className, iconStart, iconEnd, onSurface, ...rest } = cleanedProps;
+    const { surface } = useSurface({ onSurface });
+    return /* @__PURE__ */ jsx(
+      ToggleButton$1,
+      {
+        className: clsx(classNames.root, styles[classNames.root], className),
+        ref,
+        ...dataAttributes,
+        ...typeof surface === "string" ? { "data-on-surface": surface } : {},
+        ...rest,
+        children: (renderProps) => {
+          const renderedChildren = typeof children === "function" ? children(renderProps) : children;
+          return /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: clsx(classNames.content, styles[classNames.content]),
+              "data-slot": "content",
+              children: [
+                iconStart,
+                renderedChildren,
+                iconEnd
+              ]
+            }
+          );
+        }
+      }
+    );
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+
+export { ToggleButton };
+//# sourceMappingURL=ToggleButton.esm.js.map

package/dist/components/ToggleButton/ToggleButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.esm.js","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButton as AriaToggleButton } from 'react-aria-components';\nimport type { ToggleButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonDefinition } from './definition';\nimport styles from './ToggleButton.module.css';\nimport { useSurface } from '../../hooks/useSurface';\n\n/** @public */\nexport const ToggleButton = forwardRef(\n  (props: ToggleButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles(\n      ToggleButtonDefinition,\n      {\n        size: 'small',\n        ...props,\n      },\n    );\n\n    const { children, className, iconStart, iconEnd, onSurface, ...rest } =\n      cleanedProps;\n\n    const { surface } = useSurface({ onSurface });\n\n    return (\n      <AriaToggleButton\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        {...dataAttributes}\n        {...(typeof surface === 'string' ? { 'data-on-surface': surface } : {})}\n        {...rest}\n      >\n        {renderProps => {\n          // If children is a function, call it with render props; otherwise use children as-is\n          const renderedChildren =\n            typeof children === 'function' ? children(renderProps) : children;\n\n          return (\n            <span\n              className={clsx(classNames.content, styles[classNames.content])}\n              data-slot=\"content\"\n            >\n              {iconStart}\n              {renderedChildren}\n              {iconEnd}\n            </span>\n          );\n        }}\n      </AriaToggleButton>\n    );\n  },\n);\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["AriaToggleButton"],"mappings":";;;;;;;;;AA0BO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAAgC;AACzD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,sBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,SAAA,EAAW,GAAG,MAAK,GAClE,YAAA;AAEF,IAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,UAAA,CAAW,EAAE,WAAW,CAAA;AAE5C,IAAA,uBACE,GAAA;AAAA,MAACA,cAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAI,OAAO,OAAA,KAAY,QAAA,GAAW,EAAE,iBAAA,EAAmB,OAAA,KAAY,EAAC;AAAA,QACpE,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAA,WAAA,KAAe;AAEd,UAAA,MAAM,mBACJ,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE3D,UAAA,uBACE,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAC9D,WAAA,EAAU,SAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,SAAA;AAAA,gBACA,gBAAA;AAAA,gBACA;AAAA;AAAA;AAAA,WACH;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}

package/dist/components/ToggleButton/ToggleButton.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .ToggleButton-module_bui-ToggleButton__1CL1A {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    border: none;\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-surface-1);\n    color: var(--bui-fg-primary);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0 var(--bui-space-2);\n    cursor: pointer;\n    transition: background-color 150ms ease, box-shadow 150ms ease,\n      color 150ms ease, transform 100ms ease;\n\n    &[data-selected],\n    &[data-pressed] {\n      background: var(--bui-bg-solid);\n      color: var(--bui-fg-solid);\n    }\n\n    &:not([data-selected])[data-hovered] {\n      background: var(--bui-bg-surface-2);\n    }\n\n    &[data-disabled] {\n      background: var(--bui-bg-neutral-on-surface-0-disabled);\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-disabled][data-hovered] {\n      background: var(--bui-bg-neutral-on-surface-0-disabled);\n    }\n\n    &[data-disabled][data-selected] {\n      background: var(--bui-bg-solid-disabled);\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-focus-visible] {\n    outline: none;\n    box-shadow: inset 0 0 0 2px var(--bui-ring);\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-disabled] {\n    cursor: not-allowed;\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-pressed] {\n    transform: scale(0.98);\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-disabled][data-pressed] {\n    transform: none;\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-size='small'] {\n    height: 2rem;\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-size='medium'] {\n    height: 2.5rem;\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .ToggleButton-module_bui-ToggleButtonContent__1Pq3O {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n  }\n}\n";
+var styles = {"bui-ToggleButton":"ToggleButton-module_bui-ToggleButton__1CL1A","bui-ToggleButtonContent":"ToggleButton-module_bui-ToggleButtonContent__1Pq3O"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=ToggleButton.module.css.esm.js.map

package/dist/components/ToggleButton/ToggleButton.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/ToggleButton/definition.esm.js

@@ -0,0 +1,12 @@
+const ToggleButtonDefinition = {
+  classNames: {
+    root: "bui-ToggleButton",
+    content: "bui-ToggleButtonContent"
+  },
+  dataAttributes: {
+    size: ["small", "medium"]
+  }
+};
+
+export { ToggleButtonDefinition };
+//# sourceMappingURL=definition.esm.js.map

package/dist/components/ToggleButton/definition.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButton/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ToggleButton\n * @public\n */\nexport const ToggleButtonDefinition = {\n  classNames: {\n    root: 'bui-ToggleButton',\n    content: 'bui-ToggleButtonContent',\n  },\n  dataAttributes: {\n    size: ['small', 'medium'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,sBAAA,GAAyB;AAAA,EACpC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { ToggleButtonGroup as ToggleButtonGroup$1 } from 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { ToggleButtonGroupDefinition } from './definition.esm.js';
+import styles from './ToggleButtonGroup.module.css.esm.js';
+
+const ToggleButtonGroup = forwardRef(
+  (props, ref) => {
+    const { classNames, dataAttributes, cleanedProps } = useStyles(
+      ToggleButtonGroupDefinition,
+      {
+        ...props
+      }
+    );
+    const { className, children, ...rest } = cleanedProps;
+    return /* @__PURE__ */ jsx(
+      ToggleButtonGroup$1,
+      {
+        className: clsx(classNames.root, styles[classNames.root], className),
+        ref,
+        ...dataAttributes,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+ToggleButtonGroup.displayName = "ToggleButtonGroup";
+
+export { ToggleButtonGroup };
+//# sourceMappingURL=ToggleButtonGroup.esm.js.map

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.esm.js","sources":["../../../src/components/ToggleButtonGroup/ToggleButtonGroup.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';\nimport type { ToggleButtonGroupProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonGroupDefinition } from './definition';\nimport styles from './ToggleButtonGroup.module.css';\n\n/** @public */\nexport const ToggleButtonGroup = forwardRef(\n  (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles(\n      ToggleButtonGroupDefinition,\n      {\n        ...props,\n      },\n    );\n\n    const { className, children, ...rest } = cleanedProps;\n\n    return (\n      <AriaToggleButtonGroup\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {children}\n      </AriaToggleButtonGroup>\n    );\n  },\n);\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n"],"names":["AriaToggleButtonGroup"],"mappings":";;;;;;;;AAyBO,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,CAAC,OAA+B,GAAA,KAA6B;AAC3D,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,2BAAA;AAAA,MACA;AAAA,QACE,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,IAAA,uBACE,GAAA;AAAA,MAACA,mBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;;;"}

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx {\n    display: inline-flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    border-radius: var(--bui-radius-2);\n    overflow: hidden;\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    width: fit-content;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical'] {\n    flex-direction: column;\n    align-items: stretch;\n    width: fit-content;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx > .bui-ToggleButton {\n    border-radius: 0;\n    margin: 0;\n    box-shadow: none;\n    border: 0;\n  }\n\n  /* Horizontal radius rules (default orientation) */\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n    > .bui-ToggleButton {\n    border-radius: 0;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n    > .bui-ToggleButton:first-child {\n    border-radius: var(--bui-radius-2) 0 0 var(--bui-radius-2);\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n    > .bui-ToggleButton:last-child {\n    border-radius: 0 var(--bui-radius-2) var(--bui-radius-2) 0;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n    > .bui-ToggleButton:only-child {\n    border-radius: var(--bui-radius-2);\n  }\n\n  /* Horizontal dividers */\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n    .bui-ToggleButton\n    + .bui-ToggleButton {\n    border-left: 1px solid var(--bui-border);\n  }\n\n  /* Vertical dividers */\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    .bui-ToggleButton {\n    width: 100%;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    .bui-ToggleButton\n    + .bui-ToggleButton {\n    border-top: 1px solid var(--bui-border);\n  }\n\n  /* Vertical radius rules */\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    > .bui-ToggleButton {\n    border-radius: 0;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    > .bui-ToggleButton:first-child {\n    border-radius: var(--bui-radius-2) var(--bui-radius-2) 0 0;\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    > .bui-ToggleButton:last-child {\n    border-radius: 0 0 var(--bui-radius-2) var(--bui-radius-2);\n  }\n\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n    > .bui-ToggleButton:only-child {\n    border-radius: var(--bui-radius-2);\n  }\n\n  /* Focus ring on group surface */\n  .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:focus-visible {\n    outline: 2px solid var(--bui-ring);\n    outline-offset: 2px;\n  }\n}\n";
+var styles = {"bui-ToggleButtonGroup":"ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=ToggleButtonGroup.module.css.esm.js.map

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/ToggleButtonGroup/definition.esm.js

@@ -0,0 +1,11 @@
+const ToggleButtonGroupDefinition = {
+  classNames: {
+    root: "bui-ToggleButtonGroup"
+  },
+  dataAttributes: {
+    orientation: ["horizontal", "vertical"]
+  }
+};
+
+export { ToggleButtonGroupDefinition };
+//# sourceMappingURL=definition.esm.js.map

package/dist/components/ToggleButtonGroup/definition.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButtonGroup/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ToggleButtonGroup\n * @public\n */\nexport const ToggleButtonGroupDefinition = {\n  classNames: {\n    root: 'bui-ToggleButtonGroup',\n  },\n  dataAttributes: {\n    orientation: ['horizontal', 'vertical'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,2BAAA,GAA8B;AAAA,EACzC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,WAAA,EAAa,CAAC,YAAA,EAAc,UAAU;AAAA;AAE1C;;;;"}

package/dist/hooks/useSurface.esm.js

@@ -0,0 +1,74 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
+
+const SurfaceContext = createVersionedContext("surface-context");
+function incrementSurface(surface) {
+  if (!surface) return "0";
+  if (surface === "0") return "1";
+  if (surface === "1") return "2";
+  if (surface === "2" || surface === "3") return "3";
+  if (surface === "danger") return "danger";
+  if (surface === "warning") return "warning";
+  if (surface === "success") return "success";
+  if (surface === "auto") return "1";
+  return surface;
+}
+function resolveSurfaceForProvider(contextSurface, requestedSurface) {
+  if (!requestedSurface) {
+    return contextSurface;
+  }
+  if (typeof requestedSurface === "object") {
+    return requestedSurface;
+  }
+  if (typeof contextSurface === "object") {
+    if (requestedSurface === "auto") {
+      return "0";
+    }
+    return requestedSurface;
+  }
+  if (requestedSurface === "auto") {
+    return incrementSurface(contextSurface);
+  }
+  return requestedSurface;
+}
+function resolveSurfaceForConsumer(contextSurface, requestedSurface) {
+  if (!requestedSurface) {
+    return contextSurface;
+  }
+  if (typeof requestedSurface === "object") {
+    return requestedSurface;
+  }
+  if (requestedSurface === "auto") {
+    if (typeof contextSurface === "object") {
+      return "0";
+    }
+    return contextSurface;
+  }
+  return requestedSurface;
+}
+const SurfaceProvider = ({
+  surface,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(
+    SurfaceContext.Provider,
+    {
+      value: createVersionedValueMap({ 1: { surface } }),
+      children
+    }
+  );
+};
+const useSurface = (options) => {
+  const value = useContext(SurfaceContext)?.atVersion(1);
+  const context = value ?? { surface: void 0 };
+  const isProvider = options?.surface !== void 0;
+  const requestedSurface = options?.surface ?? options?.onSurface;
+  const resolvedSurface = isProvider ? resolveSurfaceForProvider(context.surface, requestedSurface) : resolveSurfaceForConsumer(context.surface, requestedSurface);
+  return {
+    surface: resolvedSurface
+  };
+};
+
+export { SurfaceProvider, resolveSurfaceForProvider, useSurface };
+//# sourceMappingURL=useSurface.esm.js.map

package/dist/hooks/useSurface.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSurface.esm.js","sources":["../../src/hooks/useSurface.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useContext, ReactNode } from 'react';\nimport {\n  createVersionedContext,\n  createVersionedValueMap,\n} from '@backstage/version-bridge';\nimport { Surface, Responsive } from '../types';\n\n/** @public */\nexport interface SurfaceContextValue {\n  surface: Responsive<Surface> | undefined;\n}\n\n/** @public */\nexport interface SurfaceProviderProps {\n  surface: Responsive<Surface>;\n  children: ReactNode;\n}\n\n/** @public */\nexport interface UseSurfaceOptions {\n  /**\n   * The surface value this component CREATES for its children (container behavior).\n   * When 'auto', increments from parent surface.\n   *\n   * Use this for components like Box, Flex, Grid that establish surface context.\n   */\n  surface?: Responsive<Surface>;\n  /**\n   * The surface value this component is ON for styling (leaf behavior).\n   * When 'auto', inherits from current surface.\n   *\n   * Use this for leaf components like Button that consume surface for styling.\n   */\n  onSurface?: Responsive<Surface>;\n}\n\nconst SurfaceContext = createVersionedContext<{\n  1: SurfaceContextValue;\n}>('surface-context');\n\n/**\n * Increments a surface level by one, capping at '3'.\n * Intent surfaces (danger, warning, success) remain unchanged.\n *\n * @internal\n */\nfunction incrementSurface(surface: Surface | undefined): Surface {\n  if (!surface) return '0'; // no context = root level\n  if (surface === '0') return '1';\n  if (surface === '1') return '2';\n  if (surface === '2' || surface === '3') return '3'; // cap at max\n  // Intent surfaces remain unchanged\n  if (surface === 'danger') return 'danger';\n  if (surface === 'warning') return 'warning';\n  if (surface === 'success') return 'success';\n  // 'auto' should not appear here, but handle it defensively\n  if (surface === 'auto') return '1';\n  return surface;\n}\n\n/**\n * Resolves a surface value for containers (SurfaceProvider).\n * When 'auto' is used, increments from the parent surface.\n * For responsive surfaces (objects), returns them as-is without resolution.\n *\n * @param contextSurface - The surface from context\n * @param requestedSurface - The requested surface value (may be 'auto')\n * @returns The resolved surface value\n * @internal\n */\nexport function resolveSurfaceForProvider(\n  contextSurface: Responsive<Surface> | undefined,\n  requestedSurface: Responsive<Surface> | undefined,\n): Responsive<Surface> | undefined {\n  if (!requestedSurface) {\n    return contextSurface;\n  }\n\n  // If requestedSurface is a responsive object (breakpoint-based), return as-is\n  if (typeof requestedSurface === 'object') {\n    return requestedSurface;\n  }\n\n  // If contextSurface is a responsive object, we can't auto-increment from it\n  // Return the requested surface as-is or default to '0' for auto\n  if (typeof contextSurface === 'object') {\n    if (requestedSurface === 'auto') {\n      return '0'; // fallback to root when context is responsive\n    }\n    return requestedSurface;\n  }\n\n  // For containers, 'auto' means increment to create a new elevated context\n  if (requestedSurface === 'auto') {\n    return incrementSurface(contextSurface);\n  }\n\n  return requestedSurface;\n}\n\n/**\n * Resolves a surface value for leaf components (useSurface hook).\n * When 'auto' is used, inherits the current surface (doesn't increment).\n * For responsive surfaces (objects), returns them as-is without resolution.\n *\n * @param contextSurface - The surface from context\n * @param requestedSurface - The requested surface value (may be 'auto')\n * @returns The resolved surface value\n * @internal\n */\nfunction resolveSurfaceForConsumer(\n  contextSurface: Responsive<Surface> | undefined,\n  requestedSurface: Responsive<Surface> | undefined,\n): Responsive<Surface> | undefined {\n  if (!requestedSurface) {\n    return contextSurface;\n  }\n\n  // If requestedSurface is a responsive object (breakpoint-based), return as-is\n  if (typeof requestedSurface === 'object') {\n    return requestedSurface;\n  }\n\n  // For leaf components, 'auto' means inherit the current surface\n  if (requestedSurface === 'auto') {\n    // If context is responsive, fallback to '0'\n    if (typeof contextSurface === 'object') {\n      return '0';\n    }\n    return contextSurface;\n  }\n\n  return requestedSurface;\n}\n\n/**\n * Provider component that establishes the surface context for child components.\n * This allows components to adapt their styling based on their background surface.\n *\n * Note: The surface value should already be resolved before passing to this provider.\n * Container components should use useSurface with the surface parameter.\n *\n * @internal\n */\nexport const SurfaceProvider = ({\n  surface,\n  children,\n}: SurfaceProviderProps) => {\n  return (\n    <SurfaceContext.Provider\n      value={createVersionedValueMap({ 1: { surface } })}\n    >\n      {children}\n    </SurfaceContext.Provider>\n  );\n};\n\n/**\n * Hook to access the current surface context.\n * Returns the current surface level, or undefined if no provider is present.\n *\n * The parameter name determines the behavior:\n * - `surface`: Container behavior - 'auto' increments from parent\n * - `onSurface`: Leaf behavior - 'auto' inherits from parent\n *\n * @param options - Optional configuration for surface resolution\n * @internal\n */\nexport const useSurface = (\n  options?: UseSurfaceOptions,\n): SurfaceContextValue => {\n  const value = useContext(SurfaceContext)?.atVersion(1);\n  const context = value ?? { surface: undefined };\n\n  // Infer behavior from which parameter is provided\n  // 'surface' = provider behavior (increment)\n  // 'onSurface' = consumer behavior (inherit)\n  const isProvider = options?.surface !== undefined;\n  const requestedSurface = options?.surface ?? options?.onSurface;\n\n  const resolvedSurface = isProvider\n    ? resolveSurfaceForProvider(context.surface, requestedSurface)\n    : resolveSurfaceForConsumer(context.surface, requestedSurface);\n\n  return {\n    surface: resolvedSurface,\n  };\n};\n"],"names":[],"mappings":";;;;AAoDA,MAAM,cAAA,GAAiB,uBAEpB,iBAAiB,CAAA;AAQpB,SAAS,iBAAiB,OAAA,EAAuC;AAC/D,EAAA,IAAI,CAAC,SAAS,OAAO,GAAA;AACrB,EAAA,IAAI,OAAA,KAAY,KAAK,OAAO,GAAA;AAC5B,EAAA,IAAI,OAAA,KAAY,KAAK,OAAO,GAAA;AAC5B,EAAA,IAAI,OAAA,KAAY,GAAA,IAAO,OAAA,KAAY,GAAA,EAAK,OAAO,GAAA;AAE/C,EAAA,IAAI,OAAA,KAAY,UAAU,OAAO,QAAA;AACjC,EAAA,IAAI,OAAA,KAAY,WAAW,OAAO,SAAA;AAClC,EAAA,IAAI,OAAA,KAAY,WAAW,OAAO,SAAA;AAElC,EAAA,IAAI,OAAA,KAAY,QAAQ,OAAO,GAAA;AAC/B,EAAA,OAAO,OAAA;AACT;AAYO,SAAS,yBAAA,CACd,gBACA,gBAAA,EACiC;AACjC,EAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,IAAA,OAAO,cAAA;AAAA,EACT;AAGA,EAAA,IAAI,OAAO,qBAAqB,QAAA,EAAU;AACxC,IAAA,OAAO,gBAAA;AAAA,EACT;AAIA,EAAA,IAAI,OAAO,mBAAmB,QAAA,EAAU;AACtC,IAAA,IAAI,qBAAqB,MAAA,EAAQ;AAC/B,MAAA,OAAO,GAAA;AAAA,IACT;AACA,IAAA,OAAO,gBAAA;AAAA,EACT;AAGA,EAAA,IAAI,qBAAqB,MAAA,EAAQ;AAC/B,IAAA,OAAO,iBAAiB,cAAc,CAAA;AAAA,EACxC;AAEA,EAAA,OAAO,gBAAA;AACT;AAYA,SAAS,yBAAA,CACP,gBACA,gBAAA,EACiC;AACjC,EAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,IAAA,OAAO,cAAA;AAAA,EACT;AAGA,EAAA,IAAI,OAAO,qBAAqB,QAAA,EAAU;AACxC,IAAA,OAAO,gBAAA;AAAA,EACT;AAGA,EAAA,IAAI,qBAAqB,MAAA,EAAQ;AAE/B,IAAA,IAAI,OAAO,mBAAmB,QAAA,EAAU;AACtC,MAAA,OAAO,GAAA;AAAA,IACT;AACA,IAAA,OAAO,cAAA;AAAA,EACT;AAEA,EAAA,OAAO,gBAAA;AACT;AAWO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA;AACF,CAAA,KAA4B;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA,CAAe,QAAA;AAAA,IAAf;AAAA,MACC,OAAO,uBAAA,CAAwB,EAAE,GAAG,EAAE,OAAA,IAAW,CAAA;AAAA,MAEhD;AAAA;AAAA,GACH;AAEJ;AAaO,MAAM,UAAA,GAAa,CACxB,OAAA,KACwB;AACxB,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,cAAc,CAAA,EAAG,UAAU,CAAC,CAAA;AACrD,EAAA,MAAM,OAAA,GAAU,KAAA,IAAS,EAAE,OAAA,EAAS,MAAA,EAAU;AAK9C,EAAA,MAAM,UAAA,GAAa,SAAS,OAAA,KAAY,MAAA;AACxC,EAAA,MAAM,gBAAA,GAAmB,OAAA,EAAS,OAAA,IAAW,OAAA,EAAS,SAAA;AAEtD,EAAA,MAAM,eAAA,GAAkB,UAAA,GACpB,yBAAA,CAA0B,OAAA,CAAQ,OAAA,EAAS,gBAAgB,CAAA,GAC3D,yBAAA,CAA0B,OAAA,CAAQ,OAAA,EAAS,gBAAgB,CAAA;AAE/D,EAAA,OAAO;AAAA,IACL,OAAA,EAAS;AAAA,GACX;AACF;;;;"}