@backstage/ui 0.6.0 → 0.7.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @backstage/ui
 
+## 0.7.0-next.0
+
+### Minor Changes
+
+- b0e47f3: **Breaking** We are upgrading our `Text` component to support all font sizes making the `Heading` component redundant. The new `Text` component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the `as` prop to include all possible values. The `Link` component has also been updated to match the new `Text` component.
+
+### Patch Changes
+
+- e7ff178: Update styling of Tooltip element
+- e0e886f: Adds onTabSelectionChange to ui header component.
+
 ## 0.6.0
 
 ### Minor Changes

package/css/styles.css

@@ -9191,8 +9191,8 @@
   --bui-gray-6: #7b7b7b;
   --bui-gray-7: #9e9e9e;
   --bui-gray-8: #b4b4b4;
-  --bui-bg: var(--bui-black);
-  --bui-bg-surface-1: var(--bui-gray-1);
+  --bui-bg: #333;
+  --bui-bg-surface-1: #424242;
   --bui-bg-surface-2: var(--bui-gray-2);
   --bui-bg-solid: #9cc9ff;
   --bui-bg-solid-hover: #83b9fd;
@@ -9217,7 +9217,7 @@
   --bui-fg-danger: #e22b2b;
   --bui-fg-warning: #e36d05;
   --bui-fg-success: #1db954;
-  --bui-border: #fff3;
+  --bui-border: #ffffff1f;
   --bui-border-hover: #fff6;
   --bui-border-pressed: #ffffff80;
   --bui-border-disabled: #fff3;
@@ -9732,58 +9732,6 @@
   display: flex;
 }
 
-.bui-Heading {
-  font-family: var(--bui-font-regular);
-  color: var(--bui-fg-primary);
-  margin: 0;
-  padding: 0;
-  line-height: 100%;
-}
-
-.bui-Heading[data-variant="display"] {
-  font-size: var(--bui-font-size-10);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title1"] {
-  font-size: var(--bui-font-size-9);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title2"] {
-  font-size: var(--bui-font-size-8);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title3"] {
-  font-size: var(--bui-font-size-7);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title4"] {
-  font-size: var(--bui-font-size-6);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title5"] {
-  font-size: var(--bui-font-size-5);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-color="primary"] {
-  color: var(--bui-fg-primary);
-}
-
-.bui-Heading[data-color="secondary"] {
-  color: var(--bui-fg-secondary);
-}
-
-.bui-Heading[data-truncate] {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
 .bui-Icon {
   width: 1rem;
   height: 1rem;
@@ -9795,72 +9743,17 @@
   margin: 0;
   padding: 0;
   text-decoration-line: none;
+  display: inline-block;
 
   &:hover {
     text-underline-offset: calc(.025em + 2px);
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: min(2px, max(1px, .05em));
-    text-decoration-color: color-mix(in srgb, var(--bui-fg-link-hover) 30%, transparent);
+    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
   }
 }
 
-.bui-Link[data-variant="title-large"] {
-  font-size: var(--bui-font-size-8);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="title-medium"] {
-  font-size: var(--bui-font-size-7);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="title-small"] {
-  font-size: var(--bui-font-size-6);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="title-x-small"] {
-  font-size: var(--bui-font-size-5);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-large"] {
-  font-size: var(--bui-font-size-4);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-medium"] {
-  font-size: var(--bui-font-size-3);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-small"] {
-  font-size: var(--bui-font-size-2);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-x-small"] {
-  font-size: var(--bui-font-size-1);
-  line-height: 140%;
-}
-
-.bui-Link[data-weight="regular"] {
-  font-weight: var(--bui-font-weight-regular);
-}
-
-.bui-Link[data-weight="bold"] {
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Link[data-color="primary"] {
-  color: var(--bui-fg-primary);
-}
-
-.bui-Link[data-color="secondary"] {
-  color: var(--bui-fg-secondary);
-}
-
 .bui-MenuPositioner {
   z-index: 100;
   outline: 0;
@@ -10303,22 +10196,42 @@
   padding: 0;
 }
 
-.bui-Text[data-variant="body"] {
-  font-size: var(--bui-font-size-3);
+.bui-Text[data-variant="title-large"] {
+  font-size: var(--bui-font-size-8);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="title-medium"] {
+  font-size: var(--bui-font-size-7);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="title-small"] {
+  font-size: var(--bui-font-size-6);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="title-x-small"] {
+  font-size: var(--bui-font-size-5);
   line-height: 140%;
 }
 
-.bui-Text[data-variant="subtitle"] {
+.bui-Text[data-variant="body-large"] {
   font-size: var(--bui-font-size-4);
   line-height: 140%;
 }
 
-.bui-Text[data-variant="caption"] {
+.bui-Text[data-variant="body-medium"] {
+  font-size: var(--bui-font-size-3);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="body-small"] {
   font-size: var(--bui-font-size-2);
   line-height: 140%;
 }
 
-.bui-Text[data-variant="label"] {
+.bui-Text[data-variant="body-x-small"] {
   font-size: var(--bui-font-size-1);
   line-height: 140%;
 }
@@ -10357,6 +10270,10 @@
   overflow: hidden;
 }
 
+.bui-Text[data-as="span"], .bui-Text[data-as="label"], .bui-Text[data-as="strong"], .bui-Text[data-as="em"], .bui-Text[data-as="small"] {
+  display: inline-block;
+}
+
 .bui-TextField {
   font-family: var(--bui-font-regular);
   flex-direction: column;
@@ -10504,18 +10421,20 @@
 }
 
 .bui-Tooltip {
-  background: var(--bui-bg-surface-2);
+  background: var(--bui-bg-surface-1);
+  border: 1px solid var(--bui-gray-3);
   forced-color-adjust: none;
   padding: var(--bui-space-2) var(--bui-space-3);
   max-width: 240px;
   font-size: var(--bui-font-size-3);
   font-family: var(--bui-font-regular);
   color: var(--bui-fg-primary);
+  --tooltip-offset: var(--bui-space-3);
   border-radius: 4px;
   outline: none;
   transition: transform .2s, opacity .2s;
   transform: translate3d(0, 0, 0);
-  box-shadow: 0 8px 20px #0000001a;
+  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
 
   &[data-entering], &[data-exiting] {
     transform: var(--origin);
@@ -10523,41 +10442,76 @@
   }
 
   &[data-placement="top"] {
-    margin-bottom: var(--bui-space-2);
+    margin-bottom: var(--tooltip-offset);
     --origin: translateY(4px);
   }
 
+  &[data-placement="right"] {
+    margin-left: var(--tooltip-offset);
+    --origin: translateX(-4px);
+  }
+
   &[data-placement="bottom"] {
-    margin-top: var(--bui-space-2);
+    margin-top: var(--tooltip-offset);
     --origin: translateY(-4px);
+  }
 
-    & .bui-TooltipArrow svg {
-      transform: rotate(180deg);
-    }
+  &[data-placement="left"] {
+    margin-right: var(--tooltip-offset);
+    --origin: translateX(4px);
   }
+}
 
-  &[data-placement="right"] {
-    margin-left: var(--bui-space-2);
-    --origin: translateX(-4px);
+.bui-TooltipArrow {
+  & svg {
+    --tooltip-arrow-overlap: -2px;
+    display: block;
+
+    & path:first-child {
+      fill: var(--bui-bg-surface-1);
+    }
 
-    & .bui-TooltipArrow svg {
-      transform: rotate(90deg);
+    & path:nth-child(2) {
+      fill: var(--bui-gray-3);
     }
   }
 
-  &[data-placement="left"] {
-    margin-right: var(--bui-space-2);
-    --origin: translateX(4px);
+  &[data-placement="top"] svg {
+    margin-top: var(--tooltip-arrow-overlap);
+  }
 
-    & .bui-TooltipArrow svg {
-      transform: rotate(-90deg);
-    }
+  &[data-placement="bottom"] svg {
+    margin-bottom: var(--tooltip-arrow-overlap);
+    transform: rotate(180deg);
+  }
+
+  &[data-placement="right"] svg {
+    margin-right: var(--tooltip-arrow-overlap);
+    transform: rotate(90deg);
+  }
+
+  &[data-placement="left"] svg {
+    margin-left: var(--tooltip-arrow-overlap);
+    transform: rotate(-90deg);
   }
 }
 
-.bui-TooltipArrow svg {
-  fill: var(--bui-bg-surface-1);
-  display: block;
+[data-theme="dark"] {
+  & .bui-Tooltip {
+    background: var(--bui-bg-surface-2);
+    box-shadow: none;
+    border: 1px solid var(--bui-gray-4);
+  }
+
+  & .bui-TooltipArrow {
+    & svg path:first-child {
+      fill: var(--bui-bg-surface-2);
+    }
+
+    & svg path:nth-child(2) {
+      fill: var(--bui-gray-4);
+    }
+  }
 }
 
 .bui-ScrollAreaRoot {

package/dist/components/Avatar/Avatar.esm.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const Avatar = forwardRef((props, ref) => {
+  const { className, src, name, size = "medium", ...rest } = props;
+  const { classNames } = useStyles("Avatar", {
+    size
+  });
+  return /* @__PURE__ */ jsxs(
+    Avatar$1.Root,
+    {
+      ref,
+      className: clsx(classNames.root, className),
+      "data-size": size,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Avatar$1.Image, { className: classNames.image, src }),
+        /* @__PURE__ */ jsx(Avatar$1.Fallback, { className: classNames.fallback, children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 2) })
+      ]
+    }
+  );
+});
+Avatar.displayName = Avatar$1.Root.displayName;
+
+export { Avatar };
+//# sourceMappingURL=Avatar.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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, ElementRef } from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui-components/react/avatar';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Avatar = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>((props, ref) => {\n  const { className, src, name, size = 'medium', ...rest } = props;\n  const { classNames } = useStyles('Avatar', {\n    size,\n  });\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      data-size={size}\n      {...rest}\n    >\n      <AvatarPrimitive.Image className={classNames.image} src={src} />\n      <AvatarPrimitive.Fallback className={classNames.fallback}>\n        {(name || '')\n          .split(' ')\n          .map(word => word[0])\n          .join('')\n          .toLocaleUpperCase('en-US')\n          .slice(0, 2)}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  );\n});\n\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n"],"names":["AvatarPrimitive"],"mappings":";;;;;;AAuBO,MAAM,MAAS,GAAA,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAQ,KAAA;AAChB,EAAM,MAAA,EAAE,WAAW,GAAK,EAAA,IAAA,EAAM,OAAO,QAAU,EAAA,GAAG,MAAS,GAAA,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAU,EAAA;AAAA,IACzC;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAACA,QAAgB,CAAA,IAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,WAAW,EAAA,IAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,SAAgB,KAAhB,EAAA,EAAsB,SAAW,EAAA,UAAA,CAAW,OAAO,GAAU,EAAA,CAAA;AAAA,wBAC9D,GAAA,CAACA,QAAgB,CAAA,QAAA,EAAhB,EAAyB,SAAA,EAAW,UAAW,CAAA,QAAA,EAC5C,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;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAO,CAAA,WAAA,GAAcA,SAAgB,IAAK,CAAA,WAAA;;;;"}

package/dist/components/Box/Box.esm.js

@@ -0,0 +1,34 @@
+import { forwardRef, createElement } from 'react';
+import clsx from 'clsx';
+import { extractProps } from '../../utils/extractProps.esm.js';
+import { spacingPropDefs } from '../../props/spacing.props.esm.js';
+import { boxPropDefs } from './Box.props.esm.js';
+import { widthPropDefs } from '../../props/width.props.esm.js';
+import { heightPropDefs } from '../../props/height.props.esm.js';
+import { positionPropDefs } from '../../props/position.props.esm.js';
+import { displayPropDefs } from '../../props/display.props.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const Box = forwardRef((props, ref) => {
+  const { children } = props;
+  const propDefs = {
+    ...spacingPropDefs,
+    ...widthPropDefs,
+    ...heightPropDefs,
+    ...positionPropDefs,
+    ...displayPropDefs,
+    ...boxPropDefs
+  };
+  const { classNames } = useStyles("Box");
+  const { className, style } = extractProps(props, propDefs);
+  return createElement(props.as || "div", {
+    ref,
+    className: clsx(classNames.root, className),
+    style,
+    children
+  });
+});
+Box.displayName = "Box";
+
+export { Box };
+//# sourceMappingURL=Box.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.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 { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport clsx from 'clsx';\nimport { extractProps } from '../../utils/extractProps';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { boxPropDefs } from './Box.props';\nimport { widthPropDefs } from '../../props/width.props';\nimport { heightPropDefs } from '../../props/height.props';\nimport { positionPropDefs } from '../../props/position.props';\nimport { displayPropDefs } from '../../props/display.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n  const { children } = props;\n\n  const propDefs = {\n    ...spacingPropDefs,\n    ...widthPropDefs,\n    ...heightPropDefs,\n    ...positionPropDefs,\n    ...displayPropDefs,\n    ...boxPropDefs,\n  };\n\n  const { classNames } = useStyles('Box');\n  const { className, style } = extractProps(props, propDefs);\n\n  return createElement(props.as || 'div', {\n    ref,\n    className: clsx(classNames.root, className),\n    style,\n    children,\n  });\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO,MAAM,GAAM,GAAA,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAQ,KAAA;AACtE,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,QAAW,GAAA;AAAA,IACf,GAAG,eAAA;AAAA,IACH,GAAG,aAAA;AAAA,IACH,GAAG,cAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,GAAG,eAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,KAAK,CAAA;AACtC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAO,OAAA,aAAA,CAAc,KAAM,CAAA,EAAA,IAAM,KAAO,EAAA;AAAA,IACtC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;AAED,GAAA,CAAI,WAAc,GAAA,KAAA;;;;"}

package/dist/components/Box/Box.props.esm.js

@@ -0,0 +1,7 @@
+const as = ["div", "span"];
+const boxPropDefs = {
+  as: { type: "enum", values: as, default: "div" }
+};
+
+export { boxPropDefs };
+//# sourceMappingURL=Box.props.esm.js.map

package/dist/components/Box/Box.props.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.props.esm.js","sources":["../../../src/components/Box/Box.props.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 { PropDef, GetPropDefTypes } from '../../props/prop-def';\n\nconst as = ['div', 'span'] as const;\n\n/** @public */\nconst boxPropDefs = {\n  as: { type: 'enum', values: as, default: 'div' },\n} satisfies {\n  as: PropDef<(typeof as)[number]>;\n};\n\n// Use all of the imported prop defs to ensure that JSDoc works\n/** @public */\ntype BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;\n\nexport { boxPropDefs };\nexport type { BoxOwnProps };\n"],"names":[],"mappings":"AAkBA,MAAM,EAAA,GAAK,CAAC,KAAA,EAAO,MAAM,CAAA;AAGzB,MAAM,WAAc,GAAA;AAAA,EAClB,IAAI,EAAE,IAAA,EAAM,QAAQ,MAAQ,EAAA,EAAA,EAAI,SAAS,KAAM;AACjD;;;;"}

package/dist/components/Button/Button.esm.js

@@ -0,0 +1,41 @@
+import { jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Button as Button$1 } from 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const Button = forwardRef(
+  (props, ref) => {
+    const {
+      size = "small",
+      variant = "primary",
+      iconStart,
+      iconEnd,
+      children,
+      className,
+      ...rest
+    } = props;
+    const { classNames, dataAttributes } = useStyles("Button", {
+      size,
+      variant
+    });
+    return /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        className: clsx(classNames.root, className),
+        ref,
+        ...dataAttributes,
+        ...rest,
+        children: [
+          iconStart,
+          children,
+          iconEnd
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button };
+//# sourceMappingURL=Button.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      iconStart,\n      iconEnd,\n      children,\n      className,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    return (\n      <RAButton\n        className={clsx(classNames.root, className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {iconStart}\n        {children}\n        {iconEnd}\n      </RAButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAgC,KAAA;AACnD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAA,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,MAAA,CAAO,WAAc,GAAA,QAAA;;;;"}

package/dist/components/ButtonIcon/ButtonIcon.esm.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Button } from 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const ButtonIcon = forwardRef(
+  (props, ref) => {
+    const {
+      size = "small",
+      variant = "primary",
+      icon,
+      className,
+      style,
+      ...rest
+    } = props;
+    const { classNames, dataAttributes } = useStyles("Button", {
+      size,
+      variant
+    });
+    const { classNames: classNamesButtonIcon } = useStyles("ButtonIcon");
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: clsx(classNames.root, classNamesButtonIcon.root, className),
+        ref,
+        ...dataAttributes,
+        ...rest,
+        children: icon
+      }
+    );
+  }
+);
+ButtonIcon.displayName = "ButtonIcon";
+
+export { ButtonIcon };
+//# sourceMappingURL=ButtonIcon.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n  (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      icon,\n      className,\n      style,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n    return (\n      <RAButton\n        className={clsx(classNames.root, classNamesButtonIcon.root, className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {icon}\n      </RAButton>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAgC,KAAA;AACvD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,IAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAqB,EAAA,GAAI,UAAU,YAAY,CAAA;AAEnE,IACE,uBAAA,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,UAAA,CAAW,IAAM,EAAA,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/dist/components/ButtonLink/ButtonLink.esm.js

@@ -0,0 +1,42 @@
+import { jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Link } from 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const ButtonLink = forwardRef(
+  (props, ref) => {
+    const {
+      size = "small",
+      variant = "primary",
+      iconStart,
+      iconEnd,
+      children,
+      className,
+      ...rest
+    } = props;
+    const { classNames, dataAttributes } = useStyles("Button", {
+      size,
+      variant
+    });
+    const { classNames: classNamesButtonLink } = useStyles("ButtonLink");
+    return /* @__PURE__ */ jsxs(
+      Link,
+      {
+        className: clsx(classNames.root, classNamesButtonLink.root, className),
+        ref,
+        ...dataAttributes,
+        ...rest,
+        children: [
+          iconStart,
+          children,
+          iconEnd
+        ]
+      }
+    );
+  }
+);
+ButtonLink.displayName = "ButtonLink";
+
+export { ButtonLink };
+//# sourceMappingURL=ButtonLink.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      iconStart,\n      iconEnd,\n      children,\n      className,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n    return (\n      <RALink\n        className={clsx(classNames.root, classNamesButtonLink.root, className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {iconStart}\n        {children}\n        {iconEnd}\n      </RALink>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;AAuBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAgC,KAAA;AACvD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAqB,EAAA,GAAI,UAAU,YAAY,CAAA;AAEnE,IACE,uBAAA,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,UAAA,CAAW,IAAM,EAAA,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/dist/components/Card/Card.esm.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ScrollArea } from '../ScrollArea/ScrollArea.esm.js';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const Card = forwardRef((props, ref) => {
+  const { className, ...rest } = props;
+  const { classNames } = useStyles("Card");
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx(classNames.root, className), ...rest });
+});
+forwardRef(
+  (props, ref) => {
+    const { className, ...rest } = props;
+    const { classNames } = useStyles("Card");
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx(classNames.header, className), ...rest });
+  }
+);
+forwardRef(
+  (props, ref) => {
+    const { children, className, ...rest } = props;
+    const { classNames } = useStyles("Card");
+    return /* @__PURE__ */ jsxs(
+      ScrollArea.Root,
+      {
+        ref,
+        className: clsx(classNames.body, className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(ScrollArea.Viewport, { style: { paddingInline: "var(--bui-space-3)" }, children }),
+          /* @__PURE__ */ jsx(
+            ScrollArea.Scrollbar,
+            {
+              orientation: "vertical",
+              style: { margin: "0 0.25rem" },
+              children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+forwardRef(
+  (props, ref) => {
+    const { className, ...rest } = props;
+    const { classNames } = useStyles("Card");
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx(classNames.footer, className), ...rest });
+  }
+);
+
+export { Card };
+//# sourceMappingURL=Card.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.esm.js","sources":["../../../src/components/Card/Card.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 { ScrollArea } from '../ScrollArea';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type {\n  CardProps,\n  CardHeaderProps,\n  CardBodyProps,\n  CardFooterProps,\n} from './types';\n\n/**\n * Card component.\n *\n * @public\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n  const { className, ...rest } = props;\n  const { classNames } = useStyles('Card');\n\n  return (\n    <div ref={ref} className={clsx(classNames.root, className)} {...rest} />\n  );\n});\n\n/**\n * CardHeader component.\n *\n * @public\n */\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n  (props, ref) => {\n    const { className, ...rest } = props;\n    const { classNames } = useStyles('Card');\n\n    return (\n      <div ref={ref} className={clsx(classNames.header, className)} {...rest} />\n    );\n  },\n);\n\n/**\n * CardBody component.\n *\n * @public\n */\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n  (props, ref) => {\n    const { children, className, ...rest } = props;\n    const { classNames } = useStyles('Card');\n\n    return (\n      <ScrollArea.Root\n        ref={ref}\n        className={clsx(classNames.body, className)}\n        {...rest}\n      >\n        <ScrollArea.Viewport style={{ paddingInline: 'var(--bui-space-3)' }}>\n          {children}\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar\n          orientation=\"vertical\"\n          style={{ margin: '0 0.25rem' }}\n        >\n          <ScrollArea.Thumb />\n        </ScrollArea.Scrollbar>\n      </ScrollArea.Root>\n    );\n  },\n);\n\n/**\n * CardFooter component.\n *\n * @public\n */\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n  (props, ref) => {\n    const { className, ...rest } = props;\n    const { classNames } = useStyles('Card');\n\n    return (\n      <div ref={ref} className={clsx(classNames.footer, className)} {...rest} />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;AAgCO,MAAM,IAAO,GAAA,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAQ,KAAA;AACxE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,IAAM,EAAA,SAAS,CAAI,EAAA,GAAG,IAAM,EAAA,CAAA;AAE1E,CAAC;AAOyB,UAAA;AAAA,EACxB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,IACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,MAAQ,EAAA,SAAS,CAAI,EAAA,GAAG,IAAM,EAAA,CAAA;AAAA;AAG9E;AAOwB,UAAA;AAAA,EACtB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,IACE,uBAAA,IAAA;AAAA,MAAC,UAAW,CAAA,IAAA;AAAA,MAAX;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QACzC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,UAAA,CAAW,UAAX,EAAoB,KAAA,EAAO,EAAE,aAAe,EAAA,oBAAA,IAC1C,QACH,EAAA,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,UAAW,CAAA,SAAA;AAAA,YAAX;AAAA,cACC,WAAY,EAAA,UAAA;AAAA,cACZ,KAAA,EAAO,EAAE,MAAA,EAAQ,WAAY,EAAA;AAAA,cAE7B,QAAA,kBAAA,GAAA,CAAC,UAAW,CAAA,KAAA,EAAX,EAAiB;AAAA;AAAA;AACpB;AAAA;AAAA,KACF;AAAA;AAGN;AAO0B,UAAA;AAAA,EACxB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,IACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,MAAQ,EAAA,SAAS,CAAI,EAAA,GAAG,IAAM,EAAA,CAAA;AAAA;AAG9E;;;;"}