@backstage/ui 0.0.0-nightly-20250818024926 → 0.0.0-nightly-20250819024000

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @backstage/ui
 
-## 0.0.0-nightly-20250818024926
+## 0.0.0-nightly-20250819024000
 
 ### Minor Changes
 
@@ -13,6 +13,7 @@
 
 - de89a3d: Fixes some styles on the Select component in BUI.
 - a251b3e: Export CardHeader, CardBody and CardFooter from Card component index
+- f761306: Add new TagGroup component to Backstage UI.
 - 75fead9: Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage.
 - e7ff178: Update styling of Tooltip element
 - 230b410: **Breaking change** Move breadcrumb to fit in the `HeaderPage` instead of the `Header` in Backstage UI.

package/css/styles.css

@@ -10260,6 +10260,81 @@
   padding-top: var(--bui-space-4);
 }
 
+.bui-TagList {
+  gap: var(--bui-space-2);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+.bui-Tag {
+  color: var(--bui-fg-primary);
+  background-color: var(--bui-gray-2);
+  border-radius: var(--bui-radius-2);
+  font-weight: var(--bui-font-weight-regular);
+  justify-content: center;
+  align-items: center;
+  gap: var(--bui-space-1);
+  box-sizing: border-box;
+  transition-property: background-color, box-shadow, color;
+  transition-duration: .2s;
+  transition-timing-function: ease-in-out;
+  display: flex;
+}
+
+.bui-Tag[data-size="small"] {
+  height: 26px;
+  padding: 0 var(--bui-space-2);
+  font-size: var(--bui-font-size-1);
+}
+
+.bui-Tag[data-size="medium"] {
+  height: 32px;
+  padding: 0 var(--bui-space-2);
+  font-size: var(--bui-font-size-2);
+}
+
+.bui-Tag[data-hovered] {
+  background-color: var(--bui-gray-3);
+  cursor: pointer;
+}
+
+.bui-Tag[data-focus-visible] {
+  outline: 2px solid var(--bui-ring);
+  outline-offset: 1px;
+}
+
+.bui-Tag[data-selected] {
+  box-shadow: inset 0 0 0 1px var(--bui-gray-8);
+}
+
+.bui-Tag[data-disabled] {
+  color: var(--bui-fg-disabled);
+  cursor: not-allowed;
+}
+
+.bui-TagRemoveButton {
+  cursor: pointer;
+  color: var(--bui-fg-primary);
+  background-color: #0000;
+  border: none;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  padding: 0;
+}
+
+.bui-TagIcon {
+  justify-content: center;
+  align-items: center;
+  transition: color .2s ease-in-out;
+  display: flex;
+
+  & svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .bui-Text {
   font-family: var(--bui-font-regular);
   margin: 0;

package/dist/components/TagGroup/TagGroup.esm.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { TagGroup as TagGroup$1, TagList, Tag as Tag$1, Button, RouterProvider } from 'react-aria-components';
+import { RiCloseCircleLine } from '@remixicon/react';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { isExternalLink } from '../../utils/isExternalLink.esm.js';
+import { useNavigate, useHref } from 'react-router-dom';
+
+const TagGroup = ({
+  items,
+  children,
+  renderEmptyState,
+  ...props
+}) => {
+  const { classNames } = useStyles("TagGroup");
+  return /* @__PURE__ */ jsx(TagGroup$1, { className: classNames.group, ...props, children: /* @__PURE__ */ jsx(
+    TagList,
+    {
+      className: classNames.list,
+      items,
+      renderEmptyState,
+      children
+    }
+  ) });
+};
+const Tag = (props) => {
+  const { children, className, icon, size = "small", href, ...rest } = props;
+  const textValue = typeof children === "string" ? children : void 0;
+  const { classNames } = useStyles("TagGroup");
+  const navigate = useNavigate();
+  const isLink = href !== void 0;
+  const isExternal = isExternalLink(href);
+  const content = /* @__PURE__ */ jsx(
+    Tag$1,
+    {
+      textValue,
+      className: clsx(classNames.tag, className),
+      "data-size": size,
+      href,
+      ...rest,
+      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("span", { className: classNames.tagIcon, children: icon }),
+        children,
+        allowsRemoving && /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: classNames.tagRemoveButton,
+            slot: "remove",
+            children: /* @__PURE__ */ jsx(RiCloseCircleLine, { size: 16 })
+          }
+        )
+      ] })
+    }
+  );
+  if (isLink && !isExternal) {
+    return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: content });
+  }
+  return content;
+};
+
+export { Tag, TagGroup };
+//# sourceMappingURL=TagGroup.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.esm.js","sources":["../../../src/components/TagGroup/TagGroup.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 type { TagProps, TagGroupProps } from './types';\nimport {\n  TagGroup as ReactAriaTagGroup,\n  TagList as ReactAriaTagList,\n  Tag as ReactAriaTag,\n  Button as ReactAriaButton,\n  RouterProvider,\n} from 'react-aria-components';\nimport type { ReactNode } from 'react';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport { useNavigate, useHref } from 'react-router-dom';\n\n/**\n * A component that renders a list of tags.\n *\n * @public\n */\nexport const TagGroup = <T extends object>({\n  items,\n  children,\n  renderEmptyState,\n  ...props\n}: TagGroupProps<T>) => {\n  const { classNames } = useStyles('TagGroup');\n  return (\n    <ReactAriaTagGroup className={classNames.group} {...props}>\n      <ReactAriaTagList\n        className={classNames.list}\n        items={items}\n        renderEmptyState={renderEmptyState}\n      >\n        {children}\n      </ReactAriaTagList>\n    </ReactAriaTagGroup>\n  );\n};\n\n/**\n * A component that renders a tag.\n *\n * @public\n */\nexport const Tag = (props: TagProps) => {\n  const { children, className, icon, size = 'small', href, ...rest } = props;\n  const textValue = typeof children === 'string' ? children : undefined;\n  const { classNames } = useStyles('TagGroup');\n  const navigate = useNavigate();\n  const isLink = href !== undefined;\n  const isExternal = isExternalLink(href);\n\n  const content = (\n    <ReactAriaTag\n      textValue={textValue}\n      className={clsx(classNames.tag, className)}\n      data-size={size}\n      href={href}\n      {...rest}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {icon && <span className={classNames.tagIcon}>{icon}</span>}\n          {children as ReactNode}\n          {allowsRemoving && (\n            <ReactAriaButton\n              className={classNames.tagRemoveButton}\n              slot=\"remove\"\n            >\n              <RiCloseCircleLine size={16} />\n            </ReactAriaButton>\n          )}\n        </>\n      )}\n    </ReactAriaTag>\n  );\n\n  if (isLink && !isExternal) {\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        {content}\n      </RouterProvider>\n    );\n  }\n\n  return content;\n};\n"],"names":["ReactAriaTagGroup","ReactAriaTagList","ReactAriaTag","ReactAriaButton"],"mappings":";;;;;;;;AAoCO,MAAM,WAAW,CAAmB;AAAA,EACzC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,UAAU,CAAA;AAC3C,EAAA,2BACGA,UAAA,EAAA,EAAkB,SAAA,EAAW,UAAA,CAAW,KAAA,EAAQ,GAAG,KAAA,EAClD,QAAA,kBAAA,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,UAAA,CAAW,IAAA;AAAA,MACtB,KAAA;AAAA,MACA,gBAAA;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAOO,MAAM,GAAA,GAAM,CAAC,KAAA,KAAoB;AACtC,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,IAAA,EAAM,OAAO,OAAA,EAAS,IAAA,EAAM,GAAG,IAAA,EAAK,GAAI,KAAA;AACrE,EAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAC5D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,UAAU,CAAA;AAC3C,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AACxB,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAACC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,GAAA,EAAK,SAAS,CAAA;AAAA,MACzC,WAAA,EAAW,IAAA;AAAA,MACX,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,CAAC,EAAE,cAAA,EAAe,qBACjB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,UAAA,CAAW,SAAU,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,QACnD,QAAA;AAAA,QACA,cAAA,oBACC,GAAA;AAAA,UAACC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,UAAA,CAAW,eAAA;AAAA,YACtB,IAAA,EAAK,QAAA;AAAA,YAEL,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAC/B,OAAA,EAEJ;AAAA;AAAA,GAEJ;AAGF,EAAA,IAAI,MAAA,IAAU,CAAC,UAAA,EAAY;AACzB,IAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,OAAA;AACT;;;;"}

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode, ReactElement, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
 import { RemixiconComponentType } from '@remixicon/react';
 import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
-import { ButtonProps as ButtonProps$1, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps as CellProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps as CellProps$1, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NavigateOptions } from 'react-router-dom';
 import { Collapsible as Collapsible$1 } from '@base-ui-components/react/collapsible';
@@ -278,6 +278,15 @@ declare const componentDefinitions: {
             readonly panel: "bui-TabPanel";
         };
     };
+    readonly TagGroup: {
+        readonly classNames: {
+            readonly group: "bui-TagGroup";
+            readonly list: "bui-TagList";
+            readonly tag: "bui-Tag";
+            readonly tagIcon: "bui-TagIcon";
+            readonly tagRemoveButton: "bui-TagRemoveButton";
+        };
+    };
     readonly Text: {
         readonly classNames: {
             readonly root: "bui-Text";
@@ -1173,6 +1182,42 @@ declare function useTable<T = any>(config?: UseTableConfig<T>): UseTableResult<T
  */
 declare function TablePagination(props: TablePaginationProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the TagGroup component.
+ *
+ * @public
+ */
+interface TagGroupProps<T> extends Omit<TagGroupProps$1, 'children'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'> {
+}
+/**
+ * Props for the Tag component.
+ *
+ * @public
+ */
+interface TagProps extends TagProps$1 {
+    /**
+     * The icon to display in the chip.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The size of the chip.
+     */
+    size?: 'small' | 'medium';
+}
+
+/**
+ * A component that renders a list of tags.
+ *
+ * @public
+ */
+declare const TagGroup: <T extends object>({ items, children, renderEmptyState, ...props }: TagGroupProps<T>) => react_jsx_runtime.JSX.Element;
+/**
+ * A component that renders a tag.
+ *
+ * @public
+ */
+declare const Tag: (props: TagProps) => react_jsx_runtime.JSX.Element;
+
 /** @public */
 type TextOwnProps = {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div' | 'strong' | 'em' | 'small' | 'legend';
@@ -1494,4 +1539,4 @@ declare const useBreakpoint: () => {
     down: (key: Breakpoint) => boolean;
 };
 
-export { type AlignItems, type ArbitraryStylingPropDef, Avatar, type AvatarProps, type BooleanPropDef, type Border, type BorderRadius, Box, type BoxOwnProps, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, type CheckboxProps, type ClassNamesMap, Collapsible, Column, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, type Display, type DisplayProps, type EnumOrStringPropDef, type EnumPropDef, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexOwnProps, type FlexProps, type FlexWrap, type GapProps, type GetPropDefType, type GetPropDefTypes, Grid, type GridItemOwnProps, type GridItemProps, type GridOwnProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type HeightProps, Icon, IconContext, type IconContextProps, type IconMap, type IconNames, type IconProps, IconProvider, type IconProviderProps, type JustifyContent, Link, type LinkProps, type MarginProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, type NonStylingPropDef, type PaddingProps, type PositionProps, type PropDef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type ReactNodePropDef, type RegularPropDef, type Responsive, type ResponsivePropDef, Row, ScrollArea, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, type StringPropDef, type StylingPropDef, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, type WidthProps, boxPropDefs, breakpoints, componentDefinitions, displayPropDefs, flexPropDefs, gapPropDefs, gridItemPropDefs, gridPropDefs, heightPropDefs, icons, marginPropDefs, paddingPropDefs, positionPropDefs, useBreakpoint, useIcons, useTable, widthPropDefs };
+export { type AlignItems, type ArbitraryStylingPropDef, Avatar, type AvatarProps, type BooleanPropDef, type Border, type BorderRadius, Box, type BoxOwnProps, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, type CheckboxProps, type ClassNamesMap, Collapsible, Column, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, type Display, type DisplayProps, type EnumOrStringPropDef, type EnumPropDef, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexOwnProps, type FlexProps, type FlexWrap, type GapProps, type GetPropDefType, type GetPropDefTypes, Grid, type GridItemOwnProps, type GridItemProps, type GridOwnProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type HeightProps, Icon, IconContext, type IconContextProps, type IconMap, type IconNames, type IconProps, IconProvider, type IconProviderProps, type JustifyContent, Link, type LinkProps, type MarginProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, type NonStylingPropDef, type PaddingProps, type PositionProps, type PropDef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type ReactNodePropDef, type RegularPropDef, type Responsive, type ResponsivePropDef, Row, ScrollArea, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, type StringPropDef, type StylingPropDef, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, type WidthProps, boxPropDefs, breakpoints, componentDefinitions, displayPropDefs, flexPropDefs, gapPropDefs, gridItemPropDefs, gridPropDefs, heightPropDefs, icons, marginPropDefs, paddingPropDefs, positionPropDefs, useBreakpoint, useIcons, useTable, widthPropDefs };

package/dist/index.esm.js

@@ -30,6 +30,7 @@ export { CellProfile } from './components/Table/components/CellProfile.esm.js';
 export { useTable } from './components/Table/hooks/useTable.esm.js';
 export { TablePagination } from './components/TablePagination/TablePagination.esm.js';
 export { Tab, TabList, TabPanel, Tabs } from './components/Tabs/Tabs.esm.js';
+export { Tag, TagGroup } from './components/TagGroup/TagGroup.esm.js';
 export { Text } from './components/Text/Text.esm.js';
 export { TextField } from './components/TextField/TextField.esm.js';
 export { Tooltip, TooltipTrigger } from './components/Tooltip/Tooltip.esm.js';

package/dist/index.esm.js.map

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

package/dist/utils/componentDefinitions.esm.js

@@ -238,6 +238,15 @@ const componentDefinitions = {
       panel: "bui-TabPanel"
     }
   },
+  TagGroup: {
+    classNames: {
+      group: "bui-TagGroup",
+      list: "bui-TagList",
+      tag: "bui-Tag",
+      tagIcon: "bui-TagIcon",
+      tagRemoveButton: "bui-TagRemoveButton"
+    }
+  },
   Text: {
     classNames: {
       root: "bui-Text"

package/dist/utils/componentDefinitions.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentDefinitions.esm.js","sources":["../../src/utils/componentDefinitions.ts"],"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 type { ComponentDefinition } from '../types';\n\n/**\n * Component definitions for the Backstage UI library\n * @public\n */\nexport const componentDefinitions = {\n  Avatar: {\n    classNames: {\n      root: 'bui-AvatarRoot',\n      image: 'bui-AvatarImage',\n      fallback: 'bui-AvatarFallback',\n    },\n    dataAttributes: {\n      size: ['small', 'medium', 'large'] as const,\n    },\n  },\n  Box: {\n    classNames: {\n      root: 'bui-Box',\n    },\n  },\n  Button: {\n    classNames: {\n      root: 'bui-Button',\n    },\n    dataAttributes: {\n      size: ['small', 'medium', 'large'] as const,\n      variant: ['primary', 'secondary', 'tertiary'] as const,\n    },\n  },\n  ButtonIcon: {\n    classNames: {\n      root: 'bui-ButtonIcon',\n    },\n  },\n  ButtonLink: {\n    classNames: {\n      root: 'bui-ButtonLink',\n    },\n  },\n  Card: {\n    classNames: {\n      root: 'bui-Card',\n      header: 'bui-CardHeader',\n      body: 'bui-CardBody',\n      footer: 'bui-CardFooter',\n    },\n  },\n  Checkbox: {\n    classNames: {\n      root: 'bui-CheckboxRoot',\n      label: 'bui-CheckboxLabel',\n      indicator: 'bui-CheckboxIndicator',\n    },\n    dataAttributes: {\n      checked: [true, false] as const,\n    },\n  },\n  Collapsible: {\n    classNames: {\n      root: 'bui-CollapsibleRoot',\n      trigger: 'bui-CollapsibleTrigger',\n      panel: 'bui-CollapsiblePanel',\n    },\n  },\n  Container: {\n    classNames: {\n      root: 'bui-Container',\n    },\n  },\n  FieldLabel: {\n    classNames: {\n      root: 'bui-FieldLabelWrapper',\n      label: 'bui-FieldLabel',\n      secondaryLabel: 'bui-FieldSecondaryLabel',\n      description: 'bui-FieldDescription',\n    },\n  },\n  Flex: {\n    classNames: {\n      root: 'bui-Flex',\n    },\n  },\n  Grid: {\n    classNames: {\n      root: 'bui-Grid',\n      item: 'bui-GridItem',\n    },\n  },\n  Header: {\n    classNames: {\n      toolbar: 'bui-HeaderToolbar',\n      toolbarWrapper: 'bui-HeaderToolbarWrapper',\n      toolbarContent: 'bui-HeaderToolbarContent',\n      toolbarControls: 'bui-HeaderToolbarControls',\n      toolbarIcon: 'bui-HeaderToolbarIcon',\n      toolbarName: 'bui-HeaderToolbarName',\n      tabsWrapper: 'bui-HeaderTabsWrapper',\n    },\n  },\n  HeaderPage: {\n    classNames: {\n      root: 'bui-HeaderPage',\n      content: 'bui-HeaderPageContent',\n      breadcrumbs: 'bui-HeaderPageBreadcrumbs',\n      tabsWrapper: 'bui-HeaderPageTabsWrapper',\n      controls: 'bui-HeaderPageControls',\n    },\n  },\n  Heading: {\n    classNames: {\n      root: 'bui-Heading',\n    },\n    dataAttributes: {\n      variant: ['title1', 'title2', 'title3', 'subtitle'] as const,\n      color: ['primary', 'secondary', 'muted'] as const,\n      truncate: [true, false] as const,\n    },\n  },\n  Icon: {\n    classNames: {\n      root: 'bui-Icon',\n    },\n  },\n  Link: {\n    classNames: {\n      root: 'bui-Link',\n    },\n    dataAttributes: {\n      variant: ['subtitle', 'body', 'caption', 'label'] as const,\n      weight: ['regular', 'bold'] as const,\n    },\n  },\n  List: {\n    classNames: {\n      root: 'bui-List',\n      row: 'bui-ListRow',\n      label: 'bui-ListLabel',\n    },\n  },\n  Menu: {\n    classNames: {\n      root: 'bui-Menu',\n      popover: 'bui-MenuPopover',\n      content: 'bui-MenuContent',\n      section: 'bui-MenuSection',\n      sectionHeader: 'bui-MenuSectionHeader',\n      item: 'bui-MenuItem',\n      itemListBox: 'bui-MenuItemListBox',\n      itemListBoxCheck: 'bui-MenuItemListBoxCheck',\n      itemContent: 'bui-MenuItemContent',\n      itemArrow: 'bui-MenuItemArrow',\n      separator: 'bui-MenuSeparator',\n      searchField: 'bui-MenuSearchField',\n      searchFieldInput: 'bui-MenuSearchFieldInput',\n      searchFieldClear: 'bui-MenuSearchFieldClear',\n      emptyState: 'bui-MenuEmptyState',\n    },\n  },\n  Popover: {\n    classNames: {\n      root: 'bui-Popover',\n    },\n  },\n  RadioGroup: {\n    classNames: {\n      root: 'bui-RadioGroup',\n      content: 'bui-RadioGroupContent',\n      radio: 'bui-Radio',\n    },\n  },\n  ScrollArea: {\n    classNames: {\n      root: 'bui-ScrollAreaRoot',\n      viewport: 'bui-ScrollAreaViewport',\n      scrollbar: 'bui-ScrollAreaScrollbar',\n      thumb: 'bui-ScrollAreaThumb',\n    },\n  },\n  SearchField: {\n    classNames: {\n      root: 'bui-SearchField',\n      clear: 'bui-InputClear',\n    },\n    dataAttributes: {\n      startCollapsed: [true, false] as const,\n    },\n  },\n  Select: {\n    classNames: {\n      root: 'bui-Select',\n      trigger: 'bui-SelectTrigger',\n      value: 'bui-SelectValue',\n      icon: 'bui-SelectIcon',\n      list: 'bui-SelectList',\n      item: 'bui-SelectItem',\n      itemIndicator: 'bui-SelectItemIndicator',\n      itemLabel: 'bui-SelectItemLabel',\n    },\n    dataAttributes: {\n      size: ['small', 'medium'] as const,\n    },\n  },\n  Skeleton: {\n    classNames: {\n      root: 'bui-Skeleton',\n    },\n  },\n  Switch: {\n    classNames: {\n      root: 'bui-Switch',\n      indicator: 'bui-SwitchIndicator',\n    },\n  },\n  Table: {\n    classNames: {\n      table: 'bui-Table',\n      header: 'bui-TableHeader',\n      body: 'bui-TableBody',\n      row: 'bui-TableRow',\n      head: 'bui-TableHead',\n      headSortButton: 'bui-TableHeadSortButton',\n      caption: 'bui-TableCaption',\n      cell: 'bui-TableCell',\n      cellContentWrapper: 'bui-TableCellContentWrapper',\n      cellContent: 'bui-TableCellContent',\n      cellIcon: 'bui-TableCellIcon',\n      cellProfileAvatar: 'bui-TableCellProfileAvatar',\n      cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n      cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n      cellProfileName: 'bui-TableCellProfileName',\n      cellProfileLink: 'bui-TableCellProfileLink',\n    },\n  },\n  Tabs: {\n    classNames: {\n      tabs: 'bui-Tabs',\n      tabList: 'bui-TabList',\n      tabListWrapper: 'bui-TabListWrapper',\n      tab: 'bui-Tab',\n      tabActive: 'bui-TabActive',\n      tabHovered: 'bui-TabHovered',\n      panel: 'bui-TabPanel',\n    },\n  },\n  Text: {\n    classNames: {\n      root: 'bui-Text',\n    },\n    dataAttributes: {\n      variant: ['subtitle', 'body', 'caption', 'label'] as const,\n      weight: ['regular', 'bold'] as const,\n      color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n      truncate: [true, false] as const,\n    },\n  },\n  TextField: {\n    classNames: {\n      root: 'bui-TextField',\n      inputWrapper: 'bui-InputWrapper',\n      input: 'bui-Input',\n      inputIcon: 'bui-InputIcon',\n    },\n    dataAttributes: {\n      invalid: [true, false] as const,\n      disabled: [true, false] as const,\n    },\n  },\n  Tooltip: {\n    classNames: {\n      tooltip: 'bui-Tooltip',\n      arrow: 'bui-TooltipArrow',\n    },\n  },\n} as const satisfies Record<string, ComponentDefinition>;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"componentDefinitions.esm.js","sources":["../../src/utils/componentDefinitions.ts"],"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 type { ComponentDefinition } from '../types';\n\n/**\n * Component definitions for the Backstage UI library\n * @public\n */\nexport const componentDefinitions = {\n  Avatar: {\n    classNames: {\n      root: 'bui-AvatarRoot',\n      image: 'bui-AvatarImage',\n      fallback: 'bui-AvatarFallback',\n    },\n    dataAttributes: {\n      size: ['small', 'medium', 'large'] as const,\n    },\n  },\n  Box: {\n    classNames: {\n      root: 'bui-Box',\n    },\n  },\n  Button: {\n    classNames: {\n      root: 'bui-Button',\n    },\n    dataAttributes: {\n      size: ['small', 'medium', 'large'] as const,\n      variant: ['primary', 'secondary', 'tertiary'] as const,\n    },\n  },\n  ButtonIcon: {\n    classNames: {\n      root: 'bui-ButtonIcon',\n    },\n  },\n  ButtonLink: {\n    classNames: {\n      root: 'bui-ButtonLink',\n    },\n  },\n  Card: {\n    classNames: {\n      root: 'bui-Card',\n      header: 'bui-CardHeader',\n      body: 'bui-CardBody',\n      footer: 'bui-CardFooter',\n    },\n  },\n  Checkbox: {\n    classNames: {\n      root: 'bui-CheckboxRoot',\n      label: 'bui-CheckboxLabel',\n      indicator: 'bui-CheckboxIndicator',\n    },\n    dataAttributes: {\n      checked: [true, false] as const,\n    },\n  },\n  Collapsible: {\n    classNames: {\n      root: 'bui-CollapsibleRoot',\n      trigger: 'bui-CollapsibleTrigger',\n      panel: 'bui-CollapsiblePanel',\n    },\n  },\n  Container: {\n    classNames: {\n      root: 'bui-Container',\n    },\n  },\n  FieldLabel: {\n    classNames: {\n      root: 'bui-FieldLabelWrapper',\n      label: 'bui-FieldLabel',\n      secondaryLabel: 'bui-FieldSecondaryLabel',\n      description: 'bui-FieldDescription',\n    },\n  },\n  Flex: {\n    classNames: {\n      root: 'bui-Flex',\n    },\n  },\n  Grid: {\n    classNames: {\n      root: 'bui-Grid',\n      item: 'bui-GridItem',\n    },\n  },\n  Header: {\n    classNames: {\n      toolbar: 'bui-HeaderToolbar',\n      toolbarWrapper: 'bui-HeaderToolbarWrapper',\n      toolbarContent: 'bui-HeaderToolbarContent',\n      toolbarControls: 'bui-HeaderToolbarControls',\n      toolbarIcon: 'bui-HeaderToolbarIcon',\n      toolbarName: 'bui-HeaderToolbarName',\n      tabsWrapper: 'bui-HeaderTabsWrapper',\n    },\n  },\n  HeaderPage: {\n    classNames: {\n      root: 'bui-HeaderPage',\n      content: 'bui-HeaderPageContent',\n      breadcrumbs: 'bui-HeaderPageBreadcrumbs',\n      tabsWrapper: 'bui-HeaderPageTabsWrapper',\n      controls: 'bui-HeaderPageControls',\n    },\n  },\n  Heading: {\n    classNames: {\n      root: 'bui-Heading',\n    },\n    dataAttributes: {\n      variant: ['title1', 'title2', 'title3', 'subtitle'] as const,\n      color: ['primary', 'secondary', 'muted'] as const,\n      truncate: [true, false] as const,\n    },\n  },\n  Icon: {\n    classNames: {\n      root: 'bui-Icon',\n    },\n  },\n  Link: {\n    classNames: {\n      root: 'bui-Link',\n    },\n    dataAttributes: {\n      variant: ['subtitle', 'body', 'caption', 'label'] as const,\n      weight: ['regular', 'bold'] as const,\n    },\n  },\n  List: {\n    classNames: {\n      root: 'bui-List',\n      row: 'bui-ListRow',\n      label: 'bui-ListLabel',\n    },\n  },\n  Menu: {\n    classNames: {\n      root: 'bui-Menu',\n      popover: 'bui-MenuPopover',\n      content: 'bui-MenuContent',\n      section: 'bui-MenuSection',\n      sectionHeader: 'bui-MenuSectionHeader',\n      item: 'bui-MenuItem',\n      itemListBox: 'bui-MenuItemListBox',\n      itemListBoxCheck: 'bui-MenuItemListBoxCheck',\n      itemContent: 'bui-MenuItemContent',\n      itemArrow: 'bui-MenuItemArrow',\n      separator: 'bui-MenuSeparator',\n      searchField: 'bui-MenuSearchField',\n      searchFieldInput: 'bui-MenuSearchFieldInput',\n      searchFieldClear: 'bui-MenuSearchFieldClear',\n      emptyState: 'bui-MenuEmptyState',\n    },\n  },\n  Popover: {\n    classNames: {\n      root: 'bui-Popover',\n    },\n  },\n  RadioGroup: {\n    classNames: {\n      root: 'bui-RadioGroup',\n      content: 'bui-RadioGroupContent',\n      radio: 'bui-Radio',\n    },\n  },\n  ScrollArea: {\n    classNames: {\n      root: 'bui-ScrollAreaRoot',\n      viewport: 'bui-ScrollAreaViewport',\n      scrollbar: 'bui-ScrollAreaScrollbar',\n      thumb: 'bui-ScrollAreaThumb',\n    },\n  },\n  SearchField: {\n    classNames: {\n      root: 'bui-SearchField',\n      clear: 'bui-InputClear',\n    },\n    dataAttributes: {\n      startCollapsed: [true, false] as const,\n    },\n  },\n  Select: {\n    classNames: {\n      root: 'bui-Select',\n      trigger: 'bui-SelectTrigger',\n      value: 'bui-SelectValue',\n      icon: 'bui-SelectIcon',\n      list: 'bui-SelectList',\n      item: 'bui-SelectItem',\n      itemIndicator: 'bui-SelectItemIndicator',\n      itemLabel: 'bui-SelectItemLabel',\n    },\n    dataAttributes: {\n      size: ['small', 'medium'] as const,\n    },\n  },\n  Skeleton: {\n    classNames: {\n      root: 'bui-Skeleton',\n    },\n  },\n  Switch: {\n    classNames: {\n      root: 'bui-Switch',\n      indicator: 'bui-SwitchIndicator',\n    },\n  },\n  Table: {\n    classNames: {\n      table: 'bui-Table',\n      header: 'bui-TableHeader',\n      body: 'bui-TableBody',\n      row: 'bui-TableRow',\n      head: 'bui-TableHead',\n      headSortButton: 'bui-TableHeadSortButton',\n      caption: 'bui-TableCaption',\n      cell: 'bui-TableCell',\n      cellContentWrapper: 'bui-TableCellContentWrapper',\n      cellContent: 'bui-TableCellContent',\n      cellIcon: 'bui-TableCellIcon',\n      cellProfileAvatar: 'bui-TableCellProfileAvatar',\n      cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n      cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n      cellProfileName: 'bui-TableCellProfileName',\n      cellProfileLink: 'bui-TableCellProfileLink',\n    },\n  },\n  Tabs: {\n    classNames: {\n      tabs: 'bui-Tabs',\n      tabList: 'bui-TabList',\n      tabListWrapper: 'bui-TabListWrapper',\n      tab: 'bui-Tab',\n      tabActive: 'bui-TabActive',\n      tabHovered: 'bui-TabHovered',\n      panel: 'bui-TabPanel',\n    },\n  },\n  TagGroup: {\n    classNames: {\n      group: 'bui-TagGroup',\n      list: 'bui-TagList',\n      tag: 'bui-Tag',\n      tagIcon: 'bui-TagIcon',\n      tagRemoveButton: 'bui-TagRemoveButton',\n    },\n  },\n  Text: {\n    classNames: {\n      root: 'bui-Text',\n    },\n    dataAttributes: {\n      variant: ['subtitle', 'body', 'caption', 'label'] as const,\n      weight: ['regular', 'bold'] as const,\n      color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n      truncate: [true, false] as const,\n    },\n  },\n  TextField: {\n    classNames: {\n      root: 'bui-TextField',\n      inputWrapper: 'bui-InputWrapper',\n      input: 'bui-Input',\n      inputIcon: 'bui-InputIcon',\n    },\n    dataAttributes: {\n      invalid: [true, false] as const,\n      disabled: [true, false] as const,\n    },\n  },\n  Tooltip: {\n    classNames: {\n      tooltip: 'bui-Tooltip',\n      arrow: 'bui-TooltipArrow',\n    },\n  },\n} as const satisfies Record<string, ComponentDefinition>;\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.0.0-nightly-20250818024926",
+  "version": "0.0.0-nightly-20250819024000",
   "backstage": {
     "role": "web-library"
   },
@@ -46,7 +46,7 @@
     "react-aria-components": "^1.10.1"
   },
   "devDependencies": {
-    "@backstage/cli": "0.0.0-nightly-20250818024926",
+    "@backstage/cli": "0.0.0-nightly-20250819024000",
     "@storybook/react": "^8.6.12",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",