@backstage/ui 0.12.1-next.0 → 0.13.0-next.2

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

@@ -1,14 +1,12 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { TabListStateContext } from 'react-aria-components';
-import { useStyles } from '../../hooks/useStyles.esm.js';
-import { TabsDefinition } from './definition.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import { TabsIndicatorsDefinition } from './definition.esm.js';
 import { useContext, useRef, useCallback, useEffect } from 'react';
-import styles from './Tabs.module.css.esm.js';
-import clsx from 'clsx';
 
 const TabsIndicators = (props) => {
-  const { tabRefs, tabsRef, hoveredKey, prevHoveredKey } = props;
-  const { classNames } = useStyles(TabsDefinition);
+  const { ownProps } = useDefinition(TabsIndicatorsDefinition, props);
+  const { classes, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = ownProps;
   const state = useContext(TabListStateContext);
   const prevSelectedKey = useRef(null);
   const updateCSSVariables = useCallback(() => {
@@ -134,18 +132,8 @@ const TabsIndicators = (props) => {
     return () => window.removeEventListener("resize", handleResize);
   }, [updateCSSVariables]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(classNames.tabActive, styles[classNames.tabActive])
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(classNames.tabHovered, styles[classNames.tabHovered])
-      }
-    )
+    /* @__PURE__ */ jsx("div", { className: classes.root }),
+    /* @__PURE__ */ jsx("div", { className: classes.hovered })
   ] });
 };
 

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

@@ -1 +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 { TabsDefinition } from './definition';\nimport { useContext, useEffect, useCallback, useRef } from 'react';\nimport type { TabsIndicatorsProps } from './types';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\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(TabsDefinition);\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\n        className={clsx(classNames.tabActive, styles[classNames.tabActive])}\n      />\n      <div\n        className={clsx(classNames.tabHovered, styles[classNames.tabHovered])}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"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 { useDefinition } from '../../hooks/useDefinition';\nimport { TabsIndicatorsDefinition } from './definition';\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 { ownProps } = useDefinition(TabsIndicatorsDefinition, props);\n  const { classes, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = ownProps;\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={classes.root} />\n      <div className={classes.hovered} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,14 +1,69 @@
-const TabsDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import '../../analytics/useAnalytics.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './Tabs.module.css.esm.js';
+
+const TabsDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-Tabs"
+  },
+  propDefs: {
+    className: {},
+    children: {}
+  }
+});
+const TabListDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-TabListWrapper",
+    tabList: "bui-TabList"
+  },
+  propDefs: {
+    className: {},
+    children: {}
+  }
+});
+const TabDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-Tab"
+  },
+  analytics: true,
+  propDefs: {
+    className: {},
+    matchStrategy: {},
+    href: {},
+    id: {},
+    noTrack: {}
+  }
+});
+const TabPanelDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-TabPanel"
+  },
+  propDefs: {
+    className: {}
+  }
+});
+const TabsIndicatorsDefinition = defineComponent()({
+  styles,
   classNames: {
-    tabs: "bui-Tabs",
-    tabList: "bui-TabList",
-    tabListWrapper: "bui-TabListWrapper",
-    tab: "bui-Tab",
-    tabActive: "bui-TabActive",
-    tabHovered: "bui-TabHovered",
-    panel: "bui-TabPanel"
+    root: "bui-TabActive",
+    hovered: "bui-TabHovered"
+  },
+  propDefs: {
+    tabRefs: {},
+    tabsRef: {},
+    hoveredKey: {},
+    prevHoveredKey: {}
   }
-};
+});
 
-export { TabsDefinition };
+export { TabDefinition, TabListDefinition, TabPanelDefinition, TabsDefinition, TabsIndicatorsDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Tabs/definition.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 definition for Tabs\n * @public\n */\nexport const TabsDefinition = {\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} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,UAAA;AAAA,IACN,OAAA,EAAS,aAAA;AAAA,IACT,cAAA,EAAgB,oBAAA;AAAA,IAChB,GAAA,EAAK,SAAA;AAAA,IACL,SAAA,EAAW,eAAA;AAAA,IACX,UAAA,EAAY,gBAAA;AAAA,IACZ,KAAA,EAAO;AAAA;AAEX;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Tabs/definition.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 { defineComponent } from '../../hooks/useDefinition';\nimport type {\n  TabsOwnProps,\n  TabListOwnProps,\n  TabOwnProps,\n  TabPanelOwnProps,\n  TabsIndicatorsOwnProps,\n} from './types';\nimport styles from './Tabs.module.css';\n\n/**\n * Component definition for Tabs\n * @public\n */\nexport const TabsDefinition = defineComponent<TabsOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Tabs',\n  },\n  propDefs: {\n    className: {},\n    children: {},\n  },\n});\n\n/** @internal */\nexport const TabListDefinition = defineComponent<TabListOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TabListWrapper',\n    tabList: 'bui-TabList',\n  },\n  propDefs: {\n    className: {},\n    children: {},\n  },\n});\n\n/** @internal */\nexport const TabDefinition = defineComponent<TabOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Tab',\n  },\n  analytics: true,\n  propDefs: {\n    className: {},\n    matchStrategy: {},\n    href: {},\n    id: {},\n    noTrack: {},\n  },\n});\n\n/** @internal */\nexport const TabPanelDefinition = defineComponent<TabPanelOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TabPanel',\n  },\n  propDefs: {\n    className: {},\n  },\n});\n\n/** @internal */\nexport const TabsIndicatorsDefinition =\n  defineComponent<TabsIndicatorsOwnProps>()({\n    styles,\n    classNames: {\n      root: 'bui-TabActive',\n      hovered: 'bui-TabHovered',\n    },\n    propDefs: {\n      tabRefs: {},\n      tabsRef: {},\n      hoveredKey: {},\n      prevHoveredKey: {},\n    },\n  });\n"],"names":[],"mappings":";;;;;;;;;AA8BO,MAAM,cAAA,GAAiB,iBAA8B,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,UAAU;AAAC;AAEf,CAAC;AAGM,MAAM,iBAAA,GAAoB,iBAAiC,CAAE;AAAA,EAClE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,oBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,UAAU;AAAC;AAEf,CAAC;AAGM,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,SAAA,EAAW,IAAA;AAAA,EACX,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,eAAe,EAAC;AAAA,IAChB,MAAM,EAAC;AAAA,IACP,IAAI,EAAC;AAAA,IACL,SAAS;AAAC;AAEd,CAAC;AAGM,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;AAGM,MAAM,wBAAA,GACX,iBAAwC,CAAE;AAAA,EACxC,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAS,EAAC;AAAA,IACV,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,gBAAgB;AAAC;AAErB,CAAC;;;;"}

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

@@ -2,76 +2,62 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Tag as Tag$1, Button, TagGroup as TagGroup$1, TagList } from 'react-aria-components';
 import { forwardRef } from 'react';
 import { RiCloseCircleLine } from '@remixicon/react';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles.esm.js';
-import { TagGroupDefinition } from './definition.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import { TagDefinition, TagGroupDefinition } from './definition.esm.js';
 import { createRoutingRegistration } from '../InternalLinkProvider/InternalLinkProvider.esm.js';
-import styles from './TagGroup.module.css.esm.js';
+import { getNodeText } from '../../analytics/getNodeText.esm.js';
 
 const { RoutingProvider, useRoutingRegistrationEffect } = createRoutingRegistration();
 const TagGroup = (props) => {
-  const { classNames, cleanedProps } = useStyles(TagGroupDefinition, props);
-  const { items, children, renderEmptyState, ...rest } = cleanedProps;
-  return /* @__PURE__ */ jsx(RoutingProvider, { children: /* @__PURE__ */ jsx(
-    TagGroup$1,
+  const { ownProps, restProps } = useDefinition(TagGroupDefinition, props);
+  const { classes, items, children, renderEmptyState } = ownProps;
+  return /* @__PURE__ */ jsx(RoutingProvider, { children: /* @__PURE__ */ jsx(TagGroup$1, { className: classes.root, ...restProps, children: /* @__PURE__ */ jsx(
+    TagList,
     {
-      className: clsx(classNames.group, styles[classNames.group]),
-      ...rest,
-      children: /* @__PURE__ */ jsx(
-        TagList,
-        {
-          className: clsx(classNames.list, styles[classNames.list]),
-          items,
-          renderEmptyState,
-          children
-        }
-      )
+      className: classes.list,
+      items,
+      renderEmptyState,
+      children
     }
-  ) });
+  ) }) });
 };
-const Tag = forwardRef(
-  (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {
-      size: "small",
-      ...props
-    });
-    const { children, className, icon, size, href, ...rest } = cleanedProps;
-    const textValue = typeof children === "string" ? children : void 0;
-    useRoutingRegistrationEffect(href);
-    return /* @__PURE__ */ jsx(
-      Tag$1,
-      {
-        ref,
-        textValue,
-        className: clsx(classNames.tag, styles[classNames.tag], className),
-        "data-size": size,
-        href,
-        ...rest,
-        children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          icon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: clsx(classNames.tagIcon, styles[classNames.tagIcon]),
-              children: icon
-            }
-          ),
-          children,
-          allowsRemoving && /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: clsx(
-                classNames.tagRemoveButton,
-                styles[classNames.tagRemoveButton]
-              ),
-              slot: "remove",
-              children: /* @__PURE__ */ jsx(RiCloseCircleLine, { size: 16 })
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
+const Tag = forwardRef((props, ref) => {
+  const { ownProps, restProps, dataAttributes, analytics } = useDefinition(
+    TagDefinition,
+    props
+  );
+  const { classes, children, icon, href } = ownProps;
+  const textValue = typeof children === "string" ? children : void 0;
+  useRoutingRegistrationEffect(href);
+  const handlePress = () => {
+    if (href) {
+      const text = props["aria-label"] ?? textValue ?? getNodeText(children) ?? String(href);
+      analytics.captureEvent("click", text, {
+        attributes: { to: String(href) }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Tag$1,
+    {
+      ref,
+      textValue,
+      className: classes.root,
+      href,
+      ...dataAttributes,
+      ...restProps,
+      onPress: (e) => {
+        restProps.onPress?.(e);
+        handlePress();
+      },
+      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("span", { className: classes.icon, children: icon }),
+        children,
+        allowsRemoving && /* @__PURE__ */ jsx(Button, { className: classes.removeButton, slot: "remove", children: /* @__PURE__ */ jsx(RiCloseCircleLine, { size: 16 }) })
+      ] })
+    }
+  );
+});
 
 export { Tag, TagGroup };
 //# sourceMappingURL=TagGroup.esm.js.map

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

@@ -1 +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} from 'react-aria-components';\nimport { forwardRef, type PropsWithRef, type ReactNode, type Ref } from 'react';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TagGroupDefinition } from './definition';\nimport { createRoutingRegistration } from '../InternalLinkProvider';\nimport styles from './TagGroup.module.css';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\n\n/**\n * A component that renders a list of tags.\n *\n * @public\n */\nexport const TagGroup = <T extends object>(props: TagGroupProps<T>) => {\n  const { classNames, cleanedProps } = useStyles(TagGroupDefinition, props);\n  const { items, children, renderEmptyState, ...rest } = cleanedProps;\n\n  return (\n    <RoutingProvider>\n      <ReactAriaTagGroup\n        className={clsx(classNames.group, styles[classNames.group])}\n        {...rest}\n      >\n        <ReactAriaTagList\n          className={clsx(classNames.list, styles[classNames.list])}\n          items={items}\n          renderEmptyState={renderEmptyState}\n        >\n          {children}\n        </ReactAriaTagList>\n      </ReactAriaTagGroup>\n    </RoutingProvider>\n  );\n};\n\n/**\n * A component that renders a tag.\n *\n * @public\n */\nexport const Tag = forwardRef(\n  (props: PropsWithRef<TagProps>, ref: Ref<HTMLDivElement>) => {\n    const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {\n      size: 'small',\n      ...props,\n    });\n    const { children, className, icon, size, href, ...rest } = cleanedProps;\n    const textValue = typeof children === 'string' ? children : undefined;\n\n    useRoutingRegistrationEffect(href);\n\n    return (\n      <ReactAriaTag\n        ref={ref}\n        textValue={textValue}\n        className={clsx(classNames.tag, styles[classNames.tag], className)}\n        data-size={size}\n        href={href}\n        {...rest}\n      >\n        {({ allowsRemoving }) => (\n          <>\n            {icon && (\n              <span\n                className={clsx(classNames.tagIcon, styles[classNames.tagIcon])}\n              >\n                {icon}\n              </span>\n            )}\n            {children as ReactNode}\n            {allowsRemoving && (\n              <ReactAriaButton\n                className={clsx(\n                  classNames.tagRemoveButton,\n                  styles[classNames.tagRemoveButton],\n                )}\n                slot=\"remove\"\n              >\n                <RiCloseCircleLine size={16} />\n              </ReactAriaButton>\n            )}\n          </>\n        )}\n      </ReactAriaTag>\n    );\n  },\n);\n"],"names":["ReactAriaTagGroup","ReactAriaTagList","ReactAriaTag","ReactAriaButton"],"mappings":";;;;;;;;;;AA+BA,MAAM,EAAE,eAAA,EAAiB,4BAAA,EAA6B,GACpD,yBAAA,EAA0B;AAOrB,MAAM,QAAA,GAAW,CAAmB,KAAA,KAA4B;AACrE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,oBAAoB,KAAK,CAAA;AACxE,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,gBAAA,EAAkB,GAAG,MAAK,GAAI,YAAA;AAEvD,EAAA,2BACG,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAACA,UAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,MACzD,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAACC,OAAA;AAAA,QAAA;AAAA,UACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,UACxD,KAAA;AAAA,UACA,gBAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF,EACF,CAAA;AAEJ;AAOO,MAAM,GAAA,GAAM,UAAA;AAAA,EACjB,CAAC,OAA+B,GAAA,KAA6B;AAC3D,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,kBAAA,EAAoB;AAAA,MACjE,IAAA,EAAM,OAAA;AAAA,MACN,GAAG;AAAA,KACJ,CAAA;AACD,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAC3D,IAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAE5D,IAAA,4BAAA,CAA6B,IAAI,CAAA;AAEjC,IAAA,uBACE,GAAA;AAAA,MAACC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,GAAA,EAAK,OAAO,UAAA,CAAW,GAAG,GAAG,SAAS,CAAA;AAAA,QACjE,WAAA,EAAW,IAAA;AAAA,QACX,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,cAAA,EAAe,qBACjB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,IAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE7D,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,QAAA;AAAA,UACA,cAAA,oBACC,GAAA;AAAA,YAACC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,eAAA;AAAA,gBACX,MAAA,CAAO,WAAW,eAAe;AAAA,eACnC;AAAA,cACA,IAAA,EAAK,QAAA;AAAA,cAEL,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAC/B,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}
+{"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} from 'react-aria-components';\nimport { forwardRef, type ReactNode } from 'react';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TagGroupDefinition, TagDefinition } from './definition';\nimport { createRoutingRegistration } from '../InternalLinkProvider';\nimport { getNodeText } from '../../analytics/getNodeText';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\n\n/**\n * A component that renders a list of tags.\n *\n * @public\n */\nexport const TagGroup = <T extends object>(props: TagGroupProps<T>) => {\n  const { ownProps, restProps } = useDefinition(TagGroupDefinition, props);\n  const { classes, items, children, renderEmptyState } = ownProps;\n\n  return (\n    <RoutingProvider>\n      <ReactAriaTagGroup className={classes.root} {...restProps}>\n        <ReactAriaTagList\n          className={classes.list}\n          items={items}\n          renderEmptyState={renderEmptyState}\n        >\n          {children}\n        </ReactAriaTagList>\n      </ReactAriaTagGroup>\n    </RoutingProvider>\n  );\n};\n\n/**\n * A component that renders a tag.\n *\n * @public\n */\nexport const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes, analytics } = useDefinition(\n    TagDefinition,\n    props,\n  );\n  const { classes, children, icon, href } = ownProps;\n  const textValue = typeof children === 'string' ? children : undefined;\n\n  useRoutingRegistrationEffect(href);\n\n  const handlePress = () => {\n    if (href) {\n      const text =\n        (props as React.AriaAttributes)['aria-label'] ??\n        textValue ??\n        getNodeText(children) ??\n        String(href);\n      analytics.captureEvent('click', text, {\n        attributes: { to: String(href) },\n      });\n    }\n  };\n\n  return (\n    <ReactAriaTag\n      ref={ref}\n      textValue={textValue}\n      className={classes.root}\n      href={href}\n      {...dataAttributes}\n      {...restProps}\n      onPress={e => {\n        restProps.onPress?.(e);\n        handlePress();\n      }}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {icon && <span className={classes.icon}>{icon}</span>}\n          {children as ReactNode}\n          {allowsRemoving && (\n            <ReactAriaButton className={classes.removeButton} slot=\"remove\">\n              <RiCloseCircleLine size={16} />\n            </ReactAriaButton>\n          )}\n        </>\n      )}\n    </ReactAriaTag>\n  );\n});\n"],"names":["ReactAriaTagGroup","ReactAriaTagList","ReactAriaTag","ReactAriaButton"],"mappings":";;;;;;;;;AA8BA,MAAM,EAAE,eAAA,EAAiB,4BAAA,EAA6B,GACpD,yBAAA,EAA0B;AAOrB,MAAM,QAAA,GAAW,CAAmB,KAAA,KAA4B;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,oBAAoB,KAAK,CAAA;AACvE,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,QAAA,EAAU,kBAAiB,GAAI,QAAA;AAEvD,EAAA,uBACE,GAAA,CAAC,mBACC,QAAA,kBAAA,GAAA,CAACA,UAAA,EAAA,EAAkB,WAAW,OAAA,CAAQ,IAAA,EAAO,GAAG,SAAA,EAC9C,QAAA,kBAAA,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,KAAA;AAAA,MACA,gBAAA;AAAA,MAEC;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;AAOO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,WAAU,GAAI,aAAA;AAAA,IACzD,aAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,IAAA,EAAM,MAAK,GAAI,QAAA;AAC1C,EAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAE5D,EAAA,4BAAA,CAA6B,IAAI,CAAA;AAEjC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,MAAM,IAAA,GACH,MAA+B,YAAY,CAAA,IAC5C,aACA,WAAA,CAAY,QAAQ,CAAA,IACpB,MAAA,CAAO,IAAI,CAAA;AACb,MAAA,SAAA,CAAU,YAAA,CAAa,SAAS,IAAA,EAAM;AAAA,QACpC,UAAA,EAAY,EAAE,EAAA,EAAI,MAAA,CAAO,IAAI,CAAA;AAAE,OAChC,CAAA;AAAA,IACH;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAACC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,IAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG,SAAA;AAAA,MACJ,SAAS,CAAA,CAAA,KAAK;AACZ,QAAA,SAAA,CAAU,UAAU,CAAC,CAAA;AACrB,QAAA,WAAA,EAAY;AAAA,MACd,CAAA;AAAA,MAEC,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,OAAA,CAAQ,MAAO,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,QAC7C,QAAA;AAAA,QACA,cAAA,oBACC,GAAA,CAACC,MAAA,EAAA,EAAgB,SAAA,EAAW,OAAA,CAAQ,YAAA,EAAc,IAAA,EAAK,QAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,CAAA,EAC/B;AAAA,OAAA,EAEJ;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

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

@@ -1,12 +1,42 @@
-const TagGroupDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import '../../analytics/useAnalytics.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './TagGroup.module.css.esm.js';
+
+const TagGroupDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-TagGroup",
+    list: "bui-TagList"
+  },
+  propDefs: {
+    items: {},
+    children: {},
+    renderEmptyState: {},
+    className: {}
+  }
+});
+const TagDefinition = defineComponent()({
+  styles,
   classNames: {
-    group: "bui-TagGroup",
-    list: "bui-TagList",
-    tag: "bui-Tag",
-    tagIcon: "bui-TagIcon",
-    tagRemoveButton: "bui-TagRemoveButton"
+    root: "bui-Tag",
+    icon: "bui-TagIcon",
+    removeButton: "bui-TagRemoveButton"
+  },
+  analytics: true,
+  propDefs: {
+    noTrack: {},
+    icon: {},
+    size: { dataAttribute: true, default: "small" },
+    href: {},
+    children: {},
+    className: {}
   }
-};
+});
 
-export { TagGroupDefinition };
+export { TagDefinition, TagGroupDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/TagGroup/definition.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 definition for TagGroup\n * @public\n */\nexport const TagGroupDefinition = {\n  classNames: {\n    group: 'bui-TagGroup',\n    list: 'bui-TagList',\n    tag: 'bui-Tag',\n    tagIcon: 'bui-TagIcon',\n    tagRemoveButton: 'bui-TagRemoveButton',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,cAAA;AAAA,IACP,IAAA,EAAM,aAAA;AAAA,IACN,GAAA,EAAK,SAAA;AAAA,IACL,OAAA,EAAS,aAAA;AAAA,IACT,eAAA,EAAiB;AAAA;AAErB;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/TagGroup/definition.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 { defineComponent } from '../../hooks/useDefinition';\nimport type { TagGroupOwnProps, TagOwnProps } from './types';\nimport styles from './TagGroup.module.css';\n\n/**\n * Component definition for TagGroup\n * @public\n */\nexport const TagGroupDefinition = defineComponent<TagGroupOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TagGroup',\n    list: 'bui-TagList',\n  },\n  propDefs: {\n    items: {},\n    children: {},\n    renderEmptyState: {},\n    className: {},\n  },\n});\n\n/** @internal */\nexport const TagDefinition = defineComponent<TagOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Tag',\n    icon: 'bui-TagIcon',\n    removeButton: 'bui-TagRemoveButton',\n  },\n  analytics: true,\n  propDefs: {\n    noTrack: {},\n    icon: {},\n    size: { dataAttribute: true, default: 'small' },\n    href: {},\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;AAwBO,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,cAAA;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAO,EAAC;AAAA,IACR,UAAU,EAAC;AAAA,IACX,kBAAkB,EAAC;AAAA,IACnB,WAAW;AAAC;AAEhB,CAAC;AAGM,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,SAAA;AAAA,IACN,IAAA,EAAM,aAAA;AAAA,IACN,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,SAAA,EAAW,IAAA;AAAA,EACX,QAAA,EAAU;AAAA,IACR,SAAS,EAAC;AAAA,IACV,MAAM,EAAC;AAAA,IACP,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,MAAM,EAAC;AAAA,IACP,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}

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

@@ -1,27 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles.esm.js';
-import styles from './Text.module.css.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { TextDefinition } from './definition.esm.js';
 
 function TextComponent(props, ref) {
-  const Component = props.as || "span";
-  const { classNames, dataAttributes, cleanedProps } = useStyles(
+  const { ownProps, restProps, dataAttributes } = useDefinition(
     TextDefinition,
-    {
-      variant: "body-medium",
-      weight: "regular",
-      color: "primary",
-      ...props
-    }
+    props
   );
-  const { className, truncate, ...restProps } = cleanedProps;
+  const { classes, as } = ownProps;
+  const Component = as;
   return /* @__PURE__ */ jsx(
     Component,
     {
       ref,
-      className: clsx(classNames.root, styles[classNames.root], className),
+      className: classes.root,
       ...dataAttributes,
       ...restProps
     }

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

@@ -1 +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';\nimport styles from './Text.module.css';\nimport { TextDefinition } from './definition';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  props: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = props.as || 'span';\n\n  const { classNames, dataAttributes, cleanedProps } = useStyles(\n    TextDefinition,\n    {\n      variant: 'body-medium',\n      weight: 'regular',\n      color: 'primary',\n      ...props,\n    },\n  );\n\n  const { className, truncate, ...restProps } = cleanedProps;\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\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":";;;;;;;AAwBA,SAAS,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAY,MAAM,EAAA,IAAM,MAAA;AAE9B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,cAAA;AAAA,IACA;AAAA,MACE,OAAA,EAAS,aAAA;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AAEA,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,WAAU,GAAI,YAAA;AAE9C,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"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 type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TextDefinition } from './definition';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  props: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    TextDefinition,\n    props,\n  );\n  const { classes, as } = ownProps;\n\n  const Component = as;\n\n  return (\n    <Component\n      ref={ref}\n      className={classes.root}\n      {...dataAttributes}\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,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,EAAA,EAAG,GAAI,QAAA;AAExB,EAAA,MAAM,SAAA,GAAY,EAAA;AAElB,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

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

@@ -1,21 +1,26 @@
-const TextDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import '../../analytics/useAnalytics.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './Text.module.css.esm.js';
+
+const TextDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-Text"
   },
-  dataAttributes: {
-    variant: ["subtitle", "body", "caption", "label"],
-    weight: ["regular", "bold"],
-    color: [
-      "primary",
-      "secondary",
-      "danger",
-      "warning",
-      "success",
-      "info"
-    ],
-    truncate: [true, false]
+  propDefs: {
+    as: { default: "span" },
+    variant: { dataAttribute: true, default: "body-medium" },
+    weight: { dataAttribute: true, default: "regular" },
+    color: { dataAttribute: true, default: "primary" },
+    truncate: { dataAttribute: true },
+    className: {}
   }
-};
+});
 
 export { TextDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Text/definition.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 definition for Text\n * @public\n */\nexport const TextDefinition = {\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: [\n      'primary',\n      'secondary',\n      'danger',\n      'warning',\n      'success',\n      'info',\n    ] as const,\n    truncate: [true, false] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAC,UAAA,EAAY,MAAA,EAAQ,WAAW,OAAO,CAAA;AAAA,IAChD,MAAA,EAAQ,CAAC,SAAA,EAAW,MAAM,CAAA;AAAA,IAC1B,KAAA,EAAO;AAAA,MACL,SAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK;AAAA;AAE1B;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Text/definition.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 { defineComponent } from '../../hooks/useDefinition';\nimport type { TextOwnProps } from './types';\nimport styles from './Text.module.css';\n\n/**\n * Component definition for Text\n * @public\n */\nexport const TextDefinition = defineComponent<TextOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Text',\n  },\n  propDefs: {\n    as: { default: 'span' },\n    variant: { dataAttribute: true, default: 'body-medium' },\n    weight: { dataAttribute: true, default: 'regular' },\n    color: { dataAttribute: true, default: 'primary' },\n    truncate: { dataAttribute: true },\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;AAwBO,MAAM,cAAA,GAAiB,iBAA8B,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,EAAE,OAAA,EAAS,MAAA,EAAO;AAAA,IACtB,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,aAAA,EAAc;AAAA,IACvD,MAAA,EAAQ,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IAClD,KAAA,EAAO,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACjD,QAAA,EAAU,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAChC,WAAW;AAAC;AAEhB,CAAC;;;;"}

package/dist/components/TextField/TextField.esm.js

@@ -1,53 +1,34 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect } from 'react';
 import { TextField as TextField$1, Input } from 'react-aria-components';
-import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import '../FieldLabel/FieldLabel.module.css.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import '../FieldError/FieldError.module.css.esm.js';
 import { TextFieldDefinition } from './definition.esm.js';
-import styles from './TextField.module.css.esm.js';
 
 const TextField = forwardRef(
   (props, ref) => {
-    const {
-      label,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy
-    } = props;
+    const { ownProps, restProps, dataAttributes } = useDefinition(
+      TextFieldDefinition,
+      props
+    );
+    const { classes, label, icon, secondaryLabel, placeholder, description } = ownProps;
     useEffect(() => {
-      if (!label && !ariaLabel && !ariaLabelledBy) {
+      if (!label && !restProps["aria-label"] && !restProps["aria-labelledby"]) {
         console.warn(
           "TextField requires either a visible label, aria-label, or aria-labelledby for accessibility"
         );
       }
-    }, [label, ariaLabel, ariaLabelledBy]);
-    const { classNames, dataAttributes, style, cleanedProps } = useStyles(
-      TextFieldDefinition,
-      {
-        size: "small",
-        ...props
-      }
-    );
-    const {
-      className,
-      description,
-      icon,
-      isRequired,
-      secondaryLabel,
-      placeholder,
-      ...rest
-    } = cleanedProps;
-    const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+    }, [label, restProps["aria-label"], restProps["aria-labelledby"]]);
+    const secondaryLabelText = secondaryLabel || (restProps.isRequired ? "Required" : null);
     return /* @__PURE__ */ jsxs(
       TextField$1,
       {
-        className: clsx(classNames.root, styles[classNames.root], className),
+        className: classes.root,
         ...dataAttributes,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        style,
-        ...rest,
+        ...restProps,
         ref,
         children: [
           /* @__PURE__ */ jsx(
@@ -61,19 +42,13 @@ const TextField = forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: clsx(
-                classNames.inputWrapper,
-                styles[classNames.inputWrapper]
-              ),
+              className: classes.inputWrapper,
               "data-size": dataAttributes["data-size"],
               children: [
                 icon && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: clsx(
-                      classNames.inputIcon,
-                      styles[classNames.inputIcon]
-                    ),
+                    className: classes.inputIcon,
                     "data-size": dataAttributes["data-size"],
                     "aria-hidden": "true",
                     children: icon
@@ -82,7 +57,7 @@ const TextField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Input,
                   {
-                    className: clsx(classNames.input, styles[classNames.input]),
+                    className: classes.input,
                     ...icon && { "data-icon": true },
                     placeholder
                   }