@backstage/ui 0.0.0-nightly-20250722024836

package/dist/components/Skeleton/Skeleton.esm.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const Skeleton = (props) => {
+  const { width = 80, height = 24, rounded = false, ...rest } = props;
+  const { classNames } = useStyles("Skeleton");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames.root,
+      "data-rounded": rounded,
+      style: {
+        width,
+        height
+      },
+      ...rest
+    }
+  );
+};
+
+export { Skeleton };
+//# sourceMappingURL=Skeleton.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.esm.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { useStyles } from '../../hooks/useStyles';\nimport { SkeletonProps } from './types';\n\n/** @public */\nexport const Skeleton = (props: SkeletonProps) => {\n  const { width = 80, height = 24, rounded = false, ...rest } = props;\n  const { classNames } = useStyles('Skeleton');\n\n  return (\n    <div\n      className={classNames.root}\n      data-rounded={rounded}\n      style={{\n        width,\n        height,\n      }}\n      {...rest}\n    />\n  );\n};\n"],"names":[],"mappings":";;;AAoBa,MAAA,QAAA,GAAW,CAAC,KAAyB,KAAA;AAChD,EAAM,MAAA,EAAE,QAAQ,EAAI,EAAA,MAAA,GAAS,IAAI,OAAU,GAAA,KAAA,EAAO,GAAG,IAAA,EAAS,GAAA,KAAA;AAC9D,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,UAAU,CAAA;AAE3C,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,UAAW,CAAA,IAAA;AAAA,MACtB,cAAc,EAAA,OAAA;AAAA,MACd,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/components/Switch/Switch.esm.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Switch as Switch$1 } from 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const Switch = forwardRef(
+  ({ label, ...props }, ref) => {
+    const { classNames } = useStyles("Switch");
+    return /* @__PURE__ */ jsxs(Switch$1, { className: classNames.root, ref, ...props, children: [
+      /* @__PURE__ */ jsx("div", { className: classNames.indicator }),
+      label
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+
+export { Switch };
+//# sourceMappingURL=Switch.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.esm.js","sources":["../../../src/components/Switch/Switch.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 { forwardRef } from 'react';\nimport { Switch as AriaSwitch } from 'react-aria-components';\nimport type { SwitchProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n  ({ label, ...props }, ref) => {\n    const { classNames } = useStyles('Switch');\n\n    return (\n      <AriaSwitch className={classNames.root} ref={ref} {...props}>\n        <div className={classNames.indicator} />\n        {label}\n      </AriaSwitch>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["AriaSwitch"],"mappings":";;;;;AAsBO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,KAAA,EAAO,GAAG,KAAA,IAAS,GAAQ,KAAA;AAC5B,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAQ,CAAA;AAEzC,IAAA,4BACGA,QAAW,EAAA,EAAA,SAAA,EAAW,WAAW,IAAM,EAAA,GAAA,EAAW,GAAG,KACpD,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,SAAW,EAAA,CAAA;AAAA,MACrC;AAAA,KACH,EAAA,CAAA;AAAA;AAGN;AAEA,MAAA,CAAO,WAAc,GAAA,QAAA;;;;"}

package/dist/components/Table/Table.esm.js

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { TableCell } from './TableCell/TableCell.esm.js';
+import { TableCellText } from './TableCellText/TableCellText.esm.js';
+import { TableCellLink } from './TableCellLink/TableCellLink.esm.js';
+import { TableCellProfile } from './TableCellProfile/TableCellProfile.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const TableRoot = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx("table", { ref, className: clsx(classNames.root, className), ...props });
+});
+TableRoot.displayName = "TableRoot";
+const TableHeader = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ref,
+      className: clsx(classNames.header, className),
+      ...props
+    }
+  );
+});
+TableHeader.displayName = "TableHeader";
+const TableBody = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx("tbody", { ref, className: clsx(classNames.body, className), ...props });
+});
+TableBody.displayName = "TableBody";
+const TableRow = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx("tr", { ref, className: clsx(classNames.row, className), ...props, children: props.children });
+});
+TableRow.displayName = "TableRow";
+const TableHead = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx("th", { ref, className: clsx(classNames.head, className), ...props });
+});
+TableHead.displayName = "TableHead";
+const TableCaption = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      ref,
+      className: clsx(classNames.caption, className),
+      ...props
+    }
+  );
+});
+TableCaption.displayName = "TableCaption";
+const Table = {
+  Root: TableRoot,
+  Header: TableHeader,
+  Body: TableBody,
+  Head: TableHead,
+  Row: TableRow,
+  Cell: TableCell,
+  CellText: TableCellText,
+  CellLink: TableCellLink,
+  CellProfile: TableCellProfile,
+  Caption: TableCaption
+};
+
+export { Table };
+//# sourceMappingURL=Table.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.esm.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { TableCell } from './TableCell/TableCell';\nimport { TableCellText } from './TableCellText/TableCellText';\nimport { TableCellLink } from './TableCellLink/TableCellLink';\nimport { TableCellProfile } from './TableCellProfile/TableCellProfile';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TableRoot = forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <table ref={ref} className={clsx(classNames.root, className)} {...props} />\n  );\n});\nTableRoot.displayName = 'TableRoot';\n\nconst TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <thead\n      ref={ref}\n      className={clsx(classNames.header, className)}\n      {...props}\n    />\n  );\n});\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <tbody ref={ref} className={clsx(classNames.body, className)} {...props} />\n  );\n});\nTableBody.displayName = 'TableBody';\n\nconst TableRow = forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <tr ref={ref} className={clsx(classNames.row, className)} {...props}>\n      {props.children}\n    </tr>\n  );\n});\nTableRow.displayName = 'TableRow';\n\nconst TableHead = forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <th ref={ref} className={clsx(classNames.head, className)} {...props} />\n  );\n});\nTableHead.displayName = 'TableHead';\n\nconst TableCaption = forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <caption\n      ref={ref}\n      className={clsx(classNames.caption, className)}\n      {...props}\n    />\n  );\n});\nTableCaption.displayName = 'TableCaption';\n\n/**\n * Table component for displaying tabular data\n * @public\n */\nexport const Table = {\n  Root: TableRoot,\n  Header: TableHeader,\n  Body: TableBody,\n  Head: TableHead,\n  Row: TableRow,\n  Cell: TableCell,\n  CellText: TableCellText,\n  CellLink: TableCellLink,\n  CellProfile: TableCellProfile,\n  Caption: TableCaption,\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Table/TableCell/TableCell.esm.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+
+const TableCell = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx("td", { ref, className: clsx(classNames.cell, className), ...props });
+});
+TableCell.displayName = "TableCell";
+
+export { TableCell };
+//# sourceMappingURL=TableCell.esm.js.map

package/dist/components/Table/TableCell/TableCell.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.esm.js","sources":["../../../../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <td ref={ref} className={clsx(classNames.cell, className)} {...props} />\n  );\n});\nTableCell.displayName = 'TableCell';\n\nexport { TableCell };\n"],"names":[],"mappings":";;;;;AAqBM,MAAA,SAAA,GAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EACE,uBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,IAAM,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,CAAA;AAE1E,CAAC;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}

package/dist/components/Table/TableCellLink/TableCellLink.esm.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Text } from '../../Text/Text.esm.js';
+import { Link } from '../../Link/Link.esm.js';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+
+const TableCellLink = forwardRef(
+  ({ className, title, description, href, render, ...props }, ref) => {
+    const { classNames } = useStyles("Table");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx(classNames.cellLink, className),
+        ...props,
+        children: [
+          title && /* @__PURE__ */ jsx(Link, { href, children: title }),
+          description && /* @__PURE__ */ jsx(Text, { variant: "body", color: "secondary", children: description })
+        ]
+      }
+    );
+  }
+);
+TableCellLink.displayName = "TableCellLink";
+
+export { TableCellLink };
+//# sourceMappingURL=TableCellLink.esm.js.map

package/dist/components/Table/TableCellLink/TableCellLink.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellLink.esm.js","sources":["../../../../src/components/Table/TableCellLink/TableCellLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { TableCellLinkProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellLink = forwardRef<HTMLDivElement, TableCellLinkProps>(\n  ({ className, title, description, href, render, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellLink, className)}\n        {...props}\n      >\n        {title && <Link href={href}>{title}</Link>}\n        {description && (\n          <Text variant=\"body\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellLink.displayName = 'TableCellLink';\n\nexport { TableCellLink };\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,KAAO,EAAA,WAAA,EAAa,MAAM,MAAQ,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAClE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAS,KAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAa,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAClC,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,MAAO,EAAA,KAAA,EAAM,aACxB,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}

package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Text } from '../../Text/Text.esm.js';
+import { Link } from '../../Link/Link.esm.js';
+import { Avatar } from '@base-ui-components/react/avatar';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+
+const TableCellProfile = forwardRef(
+  ({ className, src, name, to, withImage = true, ...rest }, ref) => {
+    const { classNames } = useStyles("Table");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx(classNames.cellProfile, className),
+        ...rest,
+        children: [
+          withImage && /* @__PURE__ */ jsxs(Avatar.Root, { className: classNames.cellProfileAvatar, children: [
+            /* @__PURE__ */ jsx(
+              Avatar.Image,
+              {
+                src,
+                width: "20",
+                height: "20",
+                className: classNames.cellProfileAvatarImage
+              }
+            ),
+            /* @__PURE__ */ jsx(Avatar.Fallback, { className: classNames.cellProfileAvatarFallback, children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 1) })
+          ] }),
+          name && to ? /* @__PURE__ */ jsx(Link, { href: to, children: name }) : /* @__PURE__ */ jsx(Text, { variant: "body", children: name })
+        ]
+      }
+    );
+  }
+);
+TableCellProfile.displayName = "TableCellProfile";
+
+export { TableCellProfile };
+//# sourceMappingURL=TableCellProfile.esm.js.map

package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellProfile.esm.js","sources":["../../../../src/components/Table/TableCellProfile/TableCellProfile.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { TableCellProfileProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { Avatar } from '@base-ui-components/react/avatar';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellProfile = forwardRef<HTMLDivElement, TableCellProfileProps>(\n  ({ className, src, name, to, withImage = true, ...rest }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellProfile, className)}\n        {...rest}\n      >\n        {withImage && (\n          <Avatar.Root className={classNames.cellProfileAvatar}>\n            <Avatar.Image\n              src={src}\n              width=\"20\"\n              height=\"20\"\n              className={classNames.cellProfileAvatarImage}\n            />\n            <Avatar.Fallback className={classNames.cellProfileAvatarFallback}>\n              {(name || '')\n                .split(' ')\n                .map(word => word[0])\n                .join('')\n                .toLocaleUpperCase('en-US')\n                .slice(0, 1)}\n            </Avatar.Fallback>\n          </Avatar.Root>\n        )}\n        {name && to ? (\n          <Link href={to}>{name}</Link>\n        ) : (\n          <Text variant=\"body\">{name}</Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellProfile.displayName = 'TableCellProfile';\n\nexport { TableCellProfile };\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,gBAAmB,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAK,EAAA,IAAA,EAAM,EAAI,EAAA,SAAA,GAAY,IAAM,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AAChE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,QAChD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA,yBACE,MAAO,CAAA,IAAA,EAAP,EAAY,SAAA,EAAW,WAAW,iBACjC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAO,CAAA,KAAA;AAAA,cAAP;AAAA,gBACC,GAAA;AAAA,gBACA,KAAM,EAAA,IAAA;AAAA,gBACN,MAAO,EAAA,IAAA;AAAA,gBACP,WAAW,UAAW,CAAA;AAAA;AAAA,aACxB;AAAA,4BACA,GAAA,CAAC,MAAO,CAAA,QAAA,EAAP,EAAgB,SAAA,EAAW,UAAW,CAAA,yBAAA,EACnC,QAAQ,EAAA,CAAA,IAAA,IAAA,EAAA,EACP,KAAM,CAAA,GAAG,CACT,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,CAAC,CAAC,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CACP,iBAAkB,CAAA,OAAO,CACzB,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACf,EAAA;AAAA,WACF,EAAA,CAAA;AAAA,UAED,IAAQ,IAAA,EAAA,mBACN,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,EAAA,EAAK,QAAK,EAAA,IAAA,EAAA,CAAA,mBAErB,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAQ,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,KAE/B;AAAA;AAGN;AACA,gBAAA,CAAiB,WAAc,GAAA,kBAAA;;;;"}

package/dist/components/Table/TableCellText/TableCellText.esm.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Text } from '../../Text/Text.esm.js';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+
+const TableCellText = forwardRef(
+  ({ className, title, description, ...props }, ref) => {
+    const { classNames } = useStyles("Table");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx(classNames.cellText, className),
+        ...props,
+        children: [
+          title && /* @__PURE__ */ jsx(Text, { variant: "body", children: title }),
+          description && /* @__PURE__ */ jsx(Text, { variant: "body", color: "secondary", children: description })
+        ]
+      }
+    );
+  }
+);
+TableCellText.displayName = "TableCellText";
+
+export { TableCellText };
+//# sourceMappingURL=TableCellText.esm.js.map

package/dist/components/Table/TableCellText/TableCellText.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellText.esm.js","sources":["../../../../src/components/Table/TableCellText/TableCellText.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { TableCellTextProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellText = forwardRef<HTMLDivElement, TableCellTextProps>(\n  ({ className, title, description, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellText, className)}\n        {...props}\n      >\n        {title && <Text variant=\"body\">{title}</Text>}\n        {description && (\n          <Text variant=\"body\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellText.displayName = 'TableCellText';\n\nexport { TableCellText };\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAW,EAAA,KAAA,EAAO,aAAa,GAAG,KAAA,IAAS,GAAQ,KAAA;AACpD,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBAAU,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAQ,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UACrC,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,MAAO,EAAA,KAAA,EAAM,aACxB,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}

package/dist/components/Tabs/Tabs.esm.js

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useRef, useState, Children, isValidElement, cloneElement, useContext } from 'react';
+import { useNavigate, useLocation, useHref } from 'react-router-dom';
+import { TabsIndicators } from './TabsIndicators.esm.js';
+import { RouterProvider, Tabs as Tabs$1, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1 } from 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const TabsContext = createContext(void 0);
+const useTabsContext = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tab components must be used within a Tabs component");
+  }
+  return context;
+};
+const Tabs = (props) => {
+  const { children, ...rest } = props;
+  const { classNames } = useStyles("Tabs");
+  const tabsRef = useRef(null);
+  const tabRefs = useRef(/* @__PURE__ */ new Map());
+  const [hoveredKey, setHoveredKey] = useState(null);
+  const prevHoveredKey = useRef(null);
+  let navigate = useNavigate();
+  const location = useLocation();
+  const setTabRef = (key, element) => {
+    if (element) {
+      tabRefs.current.set(key, element);
+    } else {
+      tabRefs.current.delete(key);
+    }
+  };
+  const computedSelectedKey = (() => {
+    const childrenArray = Children.toArray(children);
+    for (const child of childrenArray) {
+      if (isValidElement(child) && child.type === TabList) {
+        const tabListChildren = Children.toArray(child.props.children);
+        for (const tabChild of tabListChildren) {
+          if (isValidElement(tabChild) && tabChild.props.href === location.pathname) {
+            return tabChild.props.id;
+          }
+        }
+      }
+    }
+    return void 0;
+  })();
+  if (!children) return null;
+  const contextValue = {
+    tabsRef,
+    tabRefs,
+    hoveredKey,
+    prevHoveredKey,
+    setHoveredKey,
+    setTabRef
+  };
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
+    Tabs$1,
+    {
+      className: classNames.tabs,
+      keyboardActivation: "manual",
+      selectedKey: computedSelectedKey,
+      ref: tabsRef,
+      ...rest,
+      children
+    }
+  ) }) });
+};
+const TabList = (props) => {
+  const { children, ...rest } = props;
+  const { classNames } = useStyles("Tabs");
+  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = useTabsContext();
+  const handleHover = (key) => {
+    setHoveredKey(key);
+  };
+  const enhancedChildren = Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, {
+        onHoverStart: () => handleHover(child.props.id),
+        onHoverEnd: () => handleHover(null)
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: classNames.tabListWrapper, children: [
+    /* @__PURE__ */ jsx(
+      TabList$1,
+      {
+        className: classNames.tabList,
+        "aria-label": "Toolbar tabs",
+        ...rest,
+        children: enhancedChildren
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TabsIndicators,
+      {
+        tabRefs,
+        tabsRef,
+        hoveredKey,
+        prevHoveredKey
+      }
+    )
+  ] });
+};
+const Tab = (props) => {
+  const { href, children, id, ...rest } = props;
+  const { classNames } = useStyles("Tabs");
+  const { setTabRef } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    Tab$1,
+    {
+      id,
+      className: classNames.tab,
+      ref: (el) => setTabRef(id, el),
+      href,
+      ...rest,
+      children
+    }
+  );
+};
+const TabPanel = (props) => {
+  const { children, ...rest } = props;
+  const { classNames } = useStyles("Tabs");
+  return /* @__PURE__ */ jsx(TabPanel$1, { className: classNames.panel, ...rest, children });
+};
+
+export { Tab, TabList, TabPanel, Tabs };
+//# sourceMappingURL=Tabs.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  RouterProvider,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\n\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (\n            isValidElement(tabChild) &&\n            tabChild.props.href === location.pathname\n          ) {\n            return tabChild.props.id;\n          }\n        }\n      }\n    }\n    return undefined;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={classNames.tabs}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div className={classNames.tabListWrapper}>\n      <AriaTabList\n        className={classNames.tabList}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: AriaTabProps) => {\n  const { href, children, id, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={classNames.tab}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n\n  return (\n    <AriaTabPanel className={classNames.panel} {...rest}>\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

package/dist/components/Tabs/TabsIndicators.esm.js

@@ -0,0 +1,140 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { TabListStateContext } from 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { useContext, useRef, useCallback, useEffect } from 'react';
+
+const TabsIndicators = (props) => {
+  const { tabRefs, tabsRef, hoveredKey, prevHoveredKey } = props;
+  const { classNames } = useStyles("Tabs");
+  const state = useContext(TabListStateContext);
+  const prevSelectedKey = useRef(null);
+  const updateCSSVariables = useCallback(() => {
+    if (!tabsRef.current) return;
+    const tabsRect = tabsRef.current.getBoundingClientRect();
+    if (state?.selectedKey) {
+      const activeTab = tabRefs.current.get(state.selectedKey.toString());
+      if (activeTab) {
+        const activeRect = activeTab.getBoundingClientRect();
+        const relativeLeft = activeRect.left - tabsRect.left;
+        const relativeTop = activeRect.top - tabsRect.top;
+        const isFirstActiveTab = prevSelectedKey.current === null;
+        if (isFirstActiveTab) {
+          tabsRef.current.style.setProperty(
+            "--active-transition-duration",
+            "0s"
+          );
+          requestAnimationFrame(() => {
+            if (tabsRef.current) {
+              tabsRef.current.style.setProperty(
+                "--active-transition-duration",
+                "0.25s"
+              );
+            }
+          });
+        } else {
+          tabsRef.current.style.setProperty(
+            "--active-transition-duration",
+            "0.25s"
+          );
+        }
+        prevSelectedKey.current = state.selectedKey.toString();
+        tabsRef.current.style.setProperty(
+          "--active-tab-left",
+          `${relativeLeft}px`
+        );
+        tabsRef.current.style.setProperty(
+          "--active-tab-right",
+          `${relativeLeft + activeRect.width}px`
+        );
+        tabsRef.current.style.setProperty(
+          "--active-tab-top",
+          `${relativeTop}px`
+        );
+        tabsRef.current.style.setProperty(
+          "--active-tab-bottom",
+          `${relativeTop + activeRect.height}px`
+        );
+        tabsRef.current.style.setProperty(
+          "--active-tab-width",
+          `${activeRect.width}px`
+        );
+        tabsRef.current.style.setProperty(
+          "--active-tab-height",
+          `${activeRect.height}px`
+        );
+      }
+    }
+    if (hoveredKey) {
+      const hoveredTab = tabRefs.current.get(hoveredKey);
+      if (hoveredTab) {
+        const hoveredRect = hoveredTab.getBoundingClientRect();
+        const relativeLeft = hoveredRect.left - tabsRect.left;
+        const relativeTop = hoveredRect.top - tabsRect.top;
+        tabsRef.current.style.setProperty(
+          "--hovered-tab-left",
+          `${relativeLeft}px`
+        );
+        tabsRef.current.style.setProperty(
+          "--hovered-tab-right",
+          `${relativeLeft + hoveredRect.width}px`
+        );
+        tabsRef.current.style.setProperty(
+          "--hovered-tab-top",
+          `${relativeTop}px`
+        );
+        tabsRef.current.style.setProperty(
+          "--hovered-tab-bottom",
+          `${relativeTop + hoveredRect.height}px`
+        );
+        tabsRef.current.style.setProperty(
+          "--hovered-tab-width",
+          `${hoveredRect.width}px`
+        );
+        tabsRef.current.style.setProperty(
+          "--hovered-tab-height",
+          `${hoveredRect.height}px`
+        );
+        const isNewHoverSession = prevHoveredKey.current === null;
+        if (isNewHoverSession) {
+          tabsRef.current.style.setProperty(
+            "--hovered-transition-duration",
+            "0s"
+          );
+          requestAnimationFrame(() => {
+            if (tabsRef.current) {
+              tabsRef.current.style.setProperty(
+                "--hovered-transition-duration",
+                "0.2s"
+              );
+            }
+          });
+        } else {
+          tabsRef.current.style.setProperty(
+            "--hovered-transition-duration",
+            "0.2s"
+          );
+        }
+        prevHoveredKey.current = hoveredKey;
+        tabsRef.current.style.setProperty("--hovered-tab-opacity", "1");
+      }
+    } else {
+      tabsRef.current.style.setProperty("--hovered-tab-opacity", "0");
+      prevHoveredKey.current = null;
+    }
+  }, [state?.selectedKey, hoveredKey, tabRefs.current]);
+  useEffect(() => {
+    updateCSSVariables();
+  }, [updateCSSVariables, tabRefs.current.size]);
+  useEffect(() => {
+    const handleResize = () => updateCSSVariables();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [updateCSSVariables]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: classNames.tabActive }),
+    /* @__PURE__ */ jsx("div", { className: classNames.tabHovered })
+  ] });
+};
+
+export { TabsIndicators };
+//# sourceMappingURL=TabsIndicators.esm.js.map

package/dist/components/Tabs/TabsIndicators.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsIndicators.esm.js","sources":["../../../src/components/Tabs/TabsIndicators.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { TabListStateContext } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useContext, useEffect, useCallback, useRef } from 'react';\nimport type { TabsIndicatorsProps } from './types';\n\n/**\n * A component that renders the indicators for the toolbar.\n *\n * @internal\n */\nexport const TabsIndicators = (props: TabsIndicatorsProps) => {\n  const { tabRefs, tabsRef, hoveredKey, prevHoveredKey } = props;\n  const { classNames } = useStyles('Tabs');\n  const state = useContext(TabListStateContext);\n  const prevSelectedKey = useRef<string | null>(null);\n\n  const updateCSSVariables = useCallback(() => {\n    if (!tabsRef.current) return;\n\n    const tabsRect = tabsRef.current.getBoundingClientRect();\n\n    // Set active tab variables\n    if (state?.selectedKey) {\n      const activeTab = tabRefs.current.get(state.selectedKey.toString());\n\n      if (activeTab) {\n        const activeRect = activeTab.getBoundingClientRect();\n        const relativeLeft = activeRect.left - tabsRect.left;\n        const relativeTop = activeRect.top - tabsRect.top;\n\n        // Control transition timing based on whether this is the first time setting active tab\n        const isFirstActiveTab = prevSelectedKey.current === null;\n\n        if (isFirstActiveTab) {\n          // First time setting active tab: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--active-transition-duration',\n                '0.25s',\n              );\n            }\n          });\n        } else {\n          // Switching between tabs: full transitions\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0.25s',\n          );\n        }\n\n        // Update previous selected key for next time\n        prevSelectedKey.current = state.selectedKey.toString();\n\n        tabsRef.current.style.setProperty(\n          '--active-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-right',\n          `${relativeLeft + activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-bottom',\n          `${relativeTop + activeRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-width',\n          `${activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-height',\n          `${activeRect.height}px`,\n        );\n      }\n    }\n\n    // Set hovered tab variables\n    if (hoveredKey) {\n      const hoveredTab = tabRefs.current.get(hoveredKey);\n      if (hoveredTab) {\n        const hoveredRect = hoveredTab.getBoundingClientRect();\n        const relativeLeft = hoveredRect.left - tabsRect.left;\n        const relativeTop = hoveredRect.top - tabsRect.top;\n\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-right',\n          `${relativeLeft + hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-bottom',\n          `${relativeTop + hoveredRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-width',\n          `${hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-height',\n          `${hoveredRect.height}px`,\n        );\n        // Control transition timing based on whether this is a new hover session\n        const isNewHoverSession = prevHoveredKey.current === null;\n\n        if (isNewHoverSession) {\n          // Starting new hover session: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--hovered-transition-duration',\n                '0.2s',\n              );\n            }\n          });\n        } else {\n          // Moving between tabs in same session: full transitions\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0.2s',\n          );\n        }\n\n        // Update previous hover key for next time\n        prevHoveredKey.current = hoveredKey;\n\n        tabsRef.current.style.setProperty('--hovered-tab-opacity', '1');\n      }\n    } else {\n      // When not hovering, hide with opacity and reset for next hover session\n      tabsRef.current.style.setProperty('--hovered-tab-opacity', '0');\n\n      // Reset previous hover key so next hover is treated as new session\n      prevHoveredKey.current = null;\n    }\n  }, [state?.selectedKey, hoveredKey, tabRefs.current]);\n\n  useEffect(() => {\n    updateCSSVariables();\n  }, [updateCSSVariables, tabRefs.current.size]);\n\n  useEffect(() => {\n    const handleResize = () => updateCSSVariables();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [updateCSSVariables]);\n\n  return (\n    <>\n      <div className={classNames.tabActive} />\n      <div className={classNames.tabHovered} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Text/Text.esm.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+function TextComponent({
+  as,
+  variant = "body",
+  weight = "regular",
+  color = "primary",
+  className,
+  truncate,
+  style,
+  ...restProps
+}, ref) {
+  const Component = as || "p";
+  const { classNames, dataAttributes } = useStyles("Text", {
+    variant,
+    weight,
+    color
+  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: clsx(classNames.root, className),
+      "data-truncate": truncate,
+      ...dataAttributes,
+      style,
+      ...restProps
+    }
+  );
+}
+TextComponent.displayName = "Text";
+const Text = forwardRef(TextComponent);
+Text.displayName = "Text";
+
+export { Text };
+//# sourceMappingURL=Text.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\nfunction TextComponent<T extends ElementType = 'p'>(\n  {\n    as,\n    variant = 'body',\n    weight = 'regular',\n    color = 'primary',\n    className,\n    truncate,\n    style,\n    ...restProps\n  }: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = as || 'p';\n\n  const { classNames, dataAttributes } = useStyles('Text', {\n    variant,\n    weight,\n    color,\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      data-truncate={truncate}\n      {...dataAttributes}\n      style={style}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;AAsBA,SAAS,aACP,CAAA;AAAA,EACE,EAAA;AAAA,EACA,OAAU,GAAA,MAAA;AAAA,EACV,MAAS,GAAA,SAAA;AAAA,EACT,KAAQ,GAAA,SAAA;AAAA,EACR,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,YAAY,EAAM,IAAA,GAAA;AAExB,EAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,MAAQ,EAAA;AAAA,IACvD,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,eAAe,EAAA,QAAA;AAAA,MACd,GAAG,cAAA;AAAA,MACJ,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAc,GAAA,MAAA;AAGf,MAAA,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}