@backstage/ui 0.11.0 → 0.12.0-next.0

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  TabProps,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  RouterProvider,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TabsDefinition } from './definition';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * Utility function to determine if a tab should be active based on the matching strategy.\n * This follows the pattern used in WorkaroundNavLink from the sidebar.\n */\nconst isTabActive = (\n  tabHref: string,\n  currentPathname: string,\n  matchStrategy: 'exact' | 'prefix',\n): boolean => {\n  if (matchStrategy === 'exact') {\n    return tabHref === currentPathname;\n  }\n\n  // Prefix matching - similar to WorkaroundNavLink behavior\n  if (tabHref === currentPathname) {\n    return true;\n  }\n\n  // Check if current path starts with tab href followed by a slash\n  // This prevents /foo matching /foobar\n  return currentPathname.startsWith(`${tabHref}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (isValidElement(tabChild) && tabChild.props.href) {\n            // Use tab-specific strategy, defaulting to 'exact'\n            const strategy = tabChild.props.matchStrategy || 'exact';\n            if (isTabActive(tabChild.props.href, location.pathname, strategy)) {\n              return tabChild.props.id;\n            }\n          }\n        }\n\n        //No route matches - check if all tabs have hrefs (pure navigation)\n        const allTabsHaveHref = tabListChildren.every(\n          child => isValidElement(child) && child.props.href,\n        );\n\n        if (allTabsHaveHref) {\n          // Pure navigation tabs, no route match\n          return null;\n        } else {\n          // Mixed tabs or pure local state\n          return undefined;\n        }\n      }\n    }\n    return undefined;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={clsx(classNames.tabs, styles[classNames.tabs], className)}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div\n      className={clsx(\n        classNames.tabListWrapper,\n        styles[classNames.tabListWrapper],\n        className,\n      )}\n    >\n      <AriaTabList\n        className={clsx(classNames.tabList, styles[classNames.tabList])}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const {\n    className,\n    href,\n    children,\n    id,\n    matchStrategy: _matchStrategy,\n    ...rest\n  } = cleanedProps;\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={clsx(classNames.tab, styles[classNames.tab], className)}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\n\n  return (\n    <AriaTabPanel\n      className={clsx(classNames.panel, styles[classNames.panel], className)}\n      {...rest}\n    >\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["child","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}
+{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  useRef,\n  useState,\n  useMemo,\n  Children,\n  cloneElement,\n  isValidElement,\n  createContext,\n  useContext,\n  useEffect,\n  useCallback,\n} from 'react';\nimport type { ReactNode } from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  TabProps,\n} from './types';\nimport { useLocation } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TabsDefinition } from './definition';\nimport {\n  isInternalLink,\n  createRoutingRegistration,\n} from '../InternalLinkProvider';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\ntype TabSelectionContextValue = {\n  registerRoutedTab: (id: string) => void;\n  unregisterRoutedTab: (id: string) => void;\n  registerActiveTab: (id: string, segmentCount: number) => void;\n  unregisterActiveTab: (id: string) => void;\n};\n\nconst TabSelectionContext = createContext<TabSelectionContextValue | null>(\n  null,\n);\n\n/**\n * Utility function to determine if a tab should be active based on the matching strategy.\n * This follows the pattern used in WorkaroundNavLink from the sidebar.\n */\nconst isTabActive = (\n  tabHref: string,\n  currentPathname: string,\n  matchStrategy: 'exact' | 'prefix',\n): boolean => {\n  if (matchStrategy === 'exact') {\n    return tabHref === currentPathname;\n  }\n\n  // Prefix matching - similar to WorkaroundNavLink behavior\n  if (tabHref === currentPathname) {\n    return true;\n  }\n\n  // Check if current path starts with tab href followed by a slash\n  // This prevents /foo matching /foobar\n  return currentPathname.startsWith(`${tabHref}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n\n  // State for tracking routed tabs (tabs with hrefs)\n  const [routedTabs, setRoutedTabs] = useState<Set<string>>(() => new Set());\n\n  // State for tracking active tabs reported by TabRouteRegistration components\n  const [activeTabs, setActiveTabs] = useState<Map<string, number>>(\n    () => new Map(),\n  );\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // Compute the selected tab based on active tabs with highest segment count\n  const selectedTabId = useMemo(() => {\n    // No routed tabs - let React Aria handle selection (uncontrolled mode)\n    if (routedTabs.size === 0) {\n      return undefined;\n    }\n\n    // Has routed tabs but none are active - use empty string for no selection\n    // (React Aria has a bug with null that causes infinite loops)\n    if (activeTabs.size === 0) {\n      return '';\n    }\n\n    let selectedId: string | null = null;\n    let maxSegments = -1;\n\n    activeTabs.forEach((segmentCount, id) => {\n      // Pick tab with highest segment count, first one wins on tie\n      if (segmentCount > maxSegments) {\n        maxSegments = segmentCount;\n        selectedId = id;\n      }\n    });\n\n    return selectedId;\n  }, [routedTabs, activeTabs]);\n\n  const registerRoutedTab = useCallback((id: string) => {\n    setRoutedTabs(prev => new Set(prev).add(id));\n  }, []);\n\n  const unregisterRoutedTab = useCallback((id: string) => {\n    setRoutedTabs(prev => {\n      const next = new Set(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  const registerActiveTab = useCallback((id: string, segmentCount: number) => {\n    setActiveTabs(prev => new Map(prev).set(id, segmentCount));\n  }, []);\n\n  const unregisterActiveTab = useCallback((id: string) => {\n    setActiveTabs(prev => {\n      const next = new Map(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  if (!children) return null;\n\n  const tabsContextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  const selectionContextValue: TabSelectionContextValue = useMemo(\n    () => ({\n      registerRoutedTab,\n      unregisterRoutedTab,\n      registerActiveTab,\n      unregisterActiveTab,\n    }),\n    [\n      registerRoutedTab,\n      unregisterRoutedTab,\n      registerActiveTab,\n      unregisterActiveTab,\n    ],\n  );\n\n  return (\n    <RoutingProvider>\n      <TabsContext.Provider value={tabsContextValue}>\n        <TabSelectionContext.Provider value={selectionContextValue}>\n          <AriaTabs\n            className={clsx(\n              classNames.tabs,\n              styles[classNames.tabs],\n              className,\n            )}\n            keyboardActivation=\"manual\"\n            selectedKey={selectedTabId}\n            ref={tabsRef}\n            {...rest}\n          >\n            {children as ReactNode}\n          </AriaTabs>\n        </TabSelectionContext.Provider>\n      </TabsContext.Provider>\n    </RoutingProvider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div\n      className={clsx(\n        classNames.tabListWrapper,\n        styles[classNames.tabListWrapper],\n        className,\n      )}\n    >\n      <AriaTabList\n        className={clsx(classNames.tabList, styles[classNames.tabList])}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * Internal component for tabs with internal hrefs.\n * Handles routing registration and active tab tracking.\n * Separated to avoid conditional hook usage in Tab component.\n * @internal\n */\nfunction RoutedTabEffects({\n  id,\n  href,\n  matchStrategy = 'exact',\n}: {\n  id: string;\n  href: string;\n  matchStrategy?: 'exact' | 'prefix';\n}) {\n  const selectionCtx = useContext(TabSelectionContext);\n  const location = useLocation();\n\n  // Register with RoutingProvider for conditional RouterProvider wrapping\n  useRoutingRegistrationEffect(href);\n\n  // Register as a routed tab (for controlled vs uncontrolled mode)\n  useEffect(() => {\n    if (selectionCtx) {\n      selectionCtx.registerRoutedTab(id);\n      return () => selectionCtx.unregisterRoutedTab(id);\n    }\n    return undefined;\n  }, [id, selectionCtx]);\n\n  // Register as active tab when URL matches (for tab selection)\n  const isActive = isTabActive(href, location.pathname, matchStrategy);\n  const segmentCount = href.split('/').filter(Boolean).length;\n\n  useEffect(() => {\n    if (isActive && selectionCtx) {\n      selectionCtx.registerActiveTab(id, segmentCount);\n      return () => selectionCtx.unregisterActiveTab(id);\n    }\n    return undefined;\n  }, [isActive, id, segmentCount, selectionCtx]);\n\n  return null;\n}\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, href, children, id, matchStrategy, ...rest } =\n    cleanedProps;\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <>\n      {isInternalLink(href) && (\n        <RoutedTabEffects\n          id={id as string}\n          href={href}\n          matchStrategy={matchStrategy}\n        />\n      )}\n      <AriaTab\n        id={id}\n        className={clsx(classNames.tab, styles[classNames.tab], className)}\n        ref={el => setTabRef(id as string, el as HTMLDivElement)}\n        href={href}\n        {...rest}\n      >\n        {children}\n      </AriaTab>\n    </>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\n\n  return (\n    <AriaTabPanel\n      className={clsx(classNames.panel, styles[classNames.panel], className)}\n      {...rest}\n    >\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

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

@@ -1,17 +1,17 @@
 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 { TagGroup as TagGroup$1, TagList, Tag as Tag$1, Button } from 'react-aria-components';
 import { RiCloseCircleLine } from '@remixicon/react';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { TagGroupDefinition } from './definition.esm.js';
-import { isExternalLink } from '../../utils/isExternalLink.esm.js';
-import { useNavigate, useHref } from 'react-router-dom';
+import { createRoutingRegistration } from '../InternalLinkProvider/InternalLinkProvider.esm.js';
 import styles from './TagGroup.module.css.esm.js';
 
+const { RoutingProvider, useRoutingRegistrationEffect } = createRoutingRegistration();
 const TagGroup = (props) => {
   const { classNames, cleanedProps } = useStyles(TagGroupDefinition, props);
   const { items, children, renderEmptyState, ...rest } = cleanedProps;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(RoutingProvider, { children: /* @__PURE__ */ jsx(
     TagGroup$1,
     {
       className: clsx(classNames.group, styles[classNames.group]),
@@ -26,7 +26,7 @@ const TagGroup = (props) => {
         }
       )
     }
-  );
+  ) });
 };
 const Tag = (props) => {
   const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {
@@ -35,10 +35,8 @@ const Tag = (props) => {
   });
   const { children, className, icon, size, href, ...rest } = cleanedProps;
   const textValue = typeof children === "string" ? children : void 0;
-  const navigate = useNavigate();
-  const isLink = href !== void 0;
-  const isExternal = isExternalLink(href);
-  const content = /* @__PURE__ */ jsx(
+  useRoutingRegistrationEffect(href);
+  return /* @__PURE__ */ jsx(
     Tag$1,
     {
       textValue,
@@ -69,10 +67,6 @@ const Tag = (props) => {
       ] })
     }
   );
-  if (isLink && !isExternal) {
-    return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: content });
-  }
-  return content;
 };
 
 export { Tag, TagGroup };

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  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 { TagGroupDefinition } from './definition';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport styles from './TagGroup.module.css';\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    <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  );\n};\n\n/**\n * A component that renders a tag.\n *\n * @public\n */\nexport const Tag = (props: TagProps) => {\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  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, 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  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":";;;;;;;;;;AAsCO,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,uBACE,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;AAEJ;AAOO,MAAM,GAAA,GAAM,CAAC,KAAA,KAAoB;AACtC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,kBAAA,EAAoB;AAAA,IACjE,IAAA,EAAM,OAAA;AAAA,IACN,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAC3D,EAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAC5D,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,KAAK,UAAA,CAAW,GAAA,EAAK,OAAO,UAAA,CAAW,GAAG,GAAG,SAAS,CAAA;AAAA,MACjE,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,oBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,YAE7D,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAED,QAAA;AAAA,QACA,cAAA,oBACC,GAAA;AAAA,UAACC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,eAAA;AAAA,cACX,MAAA,CAAO,WAAW,eAAe;AAAA,aACnC;AAAA,YACA,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;;;;"}
+{"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 type { ReactNode } 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 = (props: TagProps) => {\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      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"],"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,CAAC,KAAA,KAAoB;AACtC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,kBAAA,EAAoB;AAAA,IACjE,IAAA,EAAM,OAAA;AAAA,IACN,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAC3D,EAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAE5D,EAAA,4BAAA,CAA6B,IAAI,CAAA;AAEjC,EAAA,uBACE,GAAA;AAAA,IAACC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,GAAA,EAAK,OAAO,UAAA,CAAW,GAAG,GAAG,SAAS,CAAA;AAAA,MACjE,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,oBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,YAE7D,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAED,QAAA;AAAA,QACA,cAAA,oBACC,GAAA;AAAA,UAACC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,eAAA;AAAA,cACX,MAAA,CAAO,WAAW,eAAe;AAAA,aACnC;AAAA,YACA,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;AAEJ;;;;"}

package/dist/hooks/useDefinition/defineComponent.esm.js

@@ -0,0 +1,6 @@
+function defineComponent() {
+  return (config) => config;
+}
+
+export { defineComponent };
+//# sourceMappingURL=defineComponent.esm.js.map

package/dist/hooks/useDefinition/defineComponent.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineComponent.esm.js","sources":["../../../src/hooks/useDefinition/defineComponent.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentConfig, SurfacePropsConstraint } from './types';\n\nexport function defineComponent<P extends Record<string, any>>() {\n  return <\n    const S extends Record<string, string>,\n    const C extends ComponentConfig<P, S>,\n  >(\n    config: C & SurfacePropsConstraint<P, C['surface']>,\n  ): C => config;\n}\n"],"names":[],"mappings":"AAkBO,SAAS,eAAA,GAAiD;AAC/D,EAAA,OAAO,CAIL,MAAA,KACM,MAAA;AACV;;;;"}

package/dist/hooks/useDefinition/helpers.esm.js

@@ -0,0 +1,69 @@
+import { breakpoints } from '../useBreakpoint.esm.js';
+import { utilityClassMap } from '../../utils/utilityClassMap.esm.js';
+
+const namedBreakpoints = breakpoints.filter((b) => b.id !== "initial");
+function isResponsiveObject(value) {
+  return typeof value === "object" && value !== null && namedBreakpoints.some((b) => b.id in value);
+}
+function resolveResponsiveValue(value, breakpoint) {
+  if (!isResponsiveObject(value)) {
+    return value;
+  }
+  const index = breakpoints.findIndex((b) => b.id === breakpoint);
+  for (let i = index; i >= 0; i--) {
+    const key = breakpoints[i].id;
+    if (key in value && value[key] !== void 0) {
+      return value[key];
+    }
+  }
+  for (let i = 0; i < breakpoints.length; i++) {
+    const key = breakpoints[i].id;
+    if (key in value && value[key] !== void 0) {
+      return value[key];
+    }
+  }
+  return value;
+}
+function processUtilityProps(props, utilityPropKeys) {
+  const utilityClassList = [];
+  const generatedStyle = {};
+  const handleUtilityValue = (key, val, prefix = "") => {
+    const utilityConfig = utilityClassMap[key];
+    if (!utilityConfig) {
+      return;
+    }
+    const values = utilityConfig.values;
+    if (values.length > 0 && values.includes(val)) {
+      const className = prefix ? `${prefix}${utilityConfig.class}-${val}` : `${utilityConfig.class}-${val}`;
+      utilityClassList.push(className);
+    } else if ("cssVar" in utilityConfig && utilityConfig.cssVar) {
+      const cssVar = utilityConfig.cssVar;
+      const cssVarKey = prefix ? `${cssVar}-${prefix.slice(0, -1)}` : cssVar;
+      generatedStyle[cssVarKey] = val;
+      const className = prefix ? `${prefix}${utilityConfig.class}` : utilityConfig.class;
+      utilityClassList.push(className);
+    }
+  };
+  for (const key of utilityPropKeys) {
+    const value = props[key];
+    if (value === void 0 || value === null) {
+      continue;
+    }
+    if (typeof value === "object" && value !== null) {
+      const breakpointValues = value;
+      for (const bp in breakpointValues) {
+        const prefix = bp === "initial" ? "" : `${bp}:`;
+        handleUtilityValue(key, breakpointValues[bp], prefix);
+      }
+    } else {
+      handleUtilityValue(key, value);
+    }
+  }
+  return {
+    utilityClasses: utilityClassList.join(" "),
+    utilityStyle: generatedStyle
+  };
+}
+
+export { processUtilityProps, resolveResponsiveValue };
+//# sourceMappingURL=helpers.esm.js.map

package/dist/hooks/useDefinition/helpers.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.esm.js","sources":["../../../src/hooks/useDefinition/helpers.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { breakpoints } from '../useBreakpoint';\nimport { utilityClassMap } from '../../utils/utilityClassMap';\nimport type { UnwrapResponsive, UtilityStyle } from './types';\n\nconst namedBreakpoints = breakpoints.filter(b => b.id !== 'initial');\n\nfunction isResponsiveObject(value: unknown): value is Record<string, unknown> {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    namedBreakpoints.some(b => b.id in value)\n  );\n}\n\nexport function resolveResponsiveValue<T>(\n  value: T,\n  breakpoint: string,\n): UnwrapResponsive<T> {\n  if (!isResponsiveObject(value)) {\n    return value as UnwrapResponsive<T>;\n  }\n\n  const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n  // Look for value at current breakpoint or smaller\n  for (let i = index; i >= 0; i--) {\n    const key = breakpoints[i].id;\n    if (key in value && value[key] !== undefined) {\n      return value[key] as UnwrapResponsive<T>;\n    }\n  }\n\n  // If no value found, check from smallest breakpoint up\n  for (let i = 0; i < breakpoints.length; i++) {\n    const key = breakpoints[i].id;\n    if (key in value && value[key] !== undefined) {\n      return value[key] as UnwrapResponsive<T>;\n    }\n  }\n\n  return value as UnwrapResponsive<T>;\n}\n\nexport function processUtilityProps<Keys extends string>(\n  props: Record<string, any>,\n  utilityPropKeys: readonly Keys[],\n): { utilityClasses: string; utilityStyle: UtilityStyle<Keys> } {\n  const utilityClassList: string[] = [];\n  const generatedStyle: Record<string, unknown> = {};\n\n  const handleUtilityValue = (\n    key: string,\n    val: unknown,\n    prefix: string = '',\n  ) => {\n    // Get utility class configuration for this key\n    const utilityConfig = utilityClassMap[key as keyof typeof utilityClassMap];\n\n    if (!utilityConfig) {\n      // Skip if no config found for this key\n      return;\n    }\n\n    // Check if value is in the list of valid values for this utility\n    const values = utilityConfig.values as readonly (string | number)[];\n    if (values.length > 0 && values.includes(val as string | number)) {\n      // Generate utility class with value suffix and optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}-${val}`\n        : `${utilityConfig.class}-${val}`;\n      utilityClassList.push(className);\n    } else if ('cssVar' in utilityConfig && utilityConfig.cssVar) {\n      // Custom value - add CSS custom property AND utility class name\n      // Only if cssVar is defined (properties with fixed values don't have cssVar)\n      const cssVar = utilityConfig.cssVar;\n      const cssVarKey = prefix ? `${cssVar}-${prefix.slice(0, -1)}` : cssVar;\n      // CSS custom properties need to be set on the style object\n      generatedStyle[cssVarKey] = val;\n\n      // Add utility class name (without value suffix) with optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}`\n        : utilityConfig.class;\n      utilityClassList.push(className);\n    }\n    // If no cssVar and value is not in valid values, skip (invalid value for fixed-value property)\n  };\n\n  for (const key of utilityPropKeys) {\n    const value = props[key];\n    if (value === undefined || value === null) {\n      continue;\n    }\n\n    // Check if value is a responsive object\n    if (typeof value === 'object' && value !== null) {\n      const breakpointValues = value as { [key: string]: unknown };\n      // Handle responsive object values\n      for (const bp in breakpointValues) {\n        const prefix = bp === 'initial' ? '' : `${bp}:`;\n        handleUtilityValue(key, breakpointValues[bp], prefix);\n      }\n    } else {\n      // Handle simple value\n      handleUtilityValue(key, value);\n    }\n  }\n\n  return {\n    utilityClasses: utilityClassList.join(' '),\n    utilityStyle: generatedStyle as UtilityStyle<Keys>,\n  };\n}\n"],"names":[],"mappings":";;;AAoBA,MAAM,mBAAmB,WAAA,CAAY,MAAA,CAAO,CAAA,CAAA,KAAK,CAAA,CAAE,OAAO,SAAS,CAAA;AAEnE,SAAS,mBAAmB,KAAA,EAAkD;AAC5E,EAAA,OACE,OAAO,KAAA,KAAU,QAAA,IACjB,KAAA,KAAU,IAAA,IACV,iBAAiB,IAAA,CAAK,CAAA,CAAA,KAAK,CAAA,CAAE,EAAA,IAAM,KAAK,CAAA;AAE5C;AAEO,SAAS,sBAAA,CACd,OACA,UAAA,EACqB;AACrB,EAAA,IAAI,CAAC,kBAAA,CAAmB,KAAK,CAAA,EAAG;AAC9B,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,QAAQ,WAAA,CAAY,SAAA,CAAU,CAAA,CAAA,KAAK,CAAA,CAAE,OAAO,UAAU,CAAA;AAG5D,EAAA,KAAA,IAAS,CAAA,GAAI,KAAA,EAAO,CAAA,IAAK,CAAA,EAAG,CAAA,EAAA,EAAK;AAC/B,IAAA,MAAM,GAAA,GAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAA;AAC3B,IAAA,IAAI,GAAA,IAAO,KAAA,IAAS,KAAA,CAAM,GAAG,MAAM,MAAA,EAAW;AAC5C,MAAA,OAAO,MAAM,GAAG,CAAA;AAAA,IAClB;AAAA,EACF;AAGA,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,WAAA,CAAY,QAAQ,CAAA,EAAA,EAAK;AAC3C,IAAA,MAAM,GAAA,GAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAA;AAC3B,IAAA,IAAI,GAAA,IAAO,KAAA,IAAS,KAAA,CAAM,GAAG,MAAM,MAAA,EAAW;AAC5C,MAAA,OAAO,MAAM,GAAG,CAAA;AAAA,IAClB;AAAA,EACF;AAEA,EAAA,OAAO,KAAA;AACT;AAEO,SAAS,mBAAA,CACd,OACA,eAAA,EAC8D;AAC9D,EAAA,MAAM,mBAA6B,EAAC;AACpC,EAAA,MAAM,iBAA0C,EAAC;AAEjD,EAAA,MAAM,kBAAA,GAAqB,CACzB,GAAA,EACA,GAAA,EACA,SAAiB,EAAA,KACd;AAEH,IAAA,MAAM,aAAA,GAAgB,gBAAgB,GAAmC,CAAA;AAEzE,IAAA,IAAI,CAAC,aAAA,EAAe;AAElB,MAAA;AAAA,IACF;AAGA,IAAA,MAAM,SAAS,aAAA,CAAc,MAAA;AAC7B,IAAA,IAAI,OAAO,MAAA,GAAS,CAAA,IAAK,MAAA,CAAO,QAAA,CAAS,GAAsB,CAAA,EAAG;AAEhE,MAAA,MAAM,SAAA,GAAY,MAAA,GACd,CAAA,EAAG,MAAM,GAAG,aAAA,CAAc,KAAK,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,GACtC,CAAA,EAAG,aAAA,CAAc,KAAK,IAAI,GAAG,CAAA,CAAA;AACjC,MAAA,gBAAA,CAAiB,KAAK,SAAS,CAAA;AAAA,IACjC,CAAA,MAAA,IAAW,QAAA,IAAY,aAAA,IAAiB,aAAA,CAAc,MAAA,EAAQ;AAG5D,MAAA,MAAM,SAAS,aAAA,CAAc,MAAA;AAC7B,MAAA,MAAM,SAAA,GAAY,MAAA,GAAS,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,OAAO,KAAA,CAAM,CAAA,EAAG,EAAE,CAAC,CAAA,CAAA,GAAK,MAAA;AAEhE,MAAA,cAAA,CAAe,SAAS,CAAA,GAAI,GAAA;AAG5B,MAAA,MAAM,SAAA,GAAY,SACd,CAAA,EAAG,MAAM,GAAG,aAAA,CAAc,KAAK,KAC/B,aAAA,CAAc,KAAA;AAClB,MAAA,gBAAA,CAAiB,KAAK,SAAS,CAAA;AAAA,IACjC;AAAA,EAEF,CAAA;AAEA,EAAA,KAAA,MAAW,OAAO,eAAA,EAAiB;AACjC,IAAA,MAAM,KAAA,GAAQ,MAAM,GAAG,CAAA;AACvB,IAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,IAAA,EAAM;AAC/C,MAAA,MAAM,gBAAA,GAAmB,KAAA;AAEzB,MAAA,KAAA,MAAW,MAAM,gBAAA,EAAkB;AACjC,QAAA,MAAM,MAAA,GAAS,EAAA,KAAO,SAAA,GAAY,EAAA,GAAK,GAAG,EAAE,CAAA,CAAA,CAAA;AAC5C,QAAA,kBAAA,CAAmB,GAAA,EAAK,gBAAA,CAAiB,EAAE,CAAA,EAAG,MAAM,CAAA;AAAA,MACtD;AAAA,IACF,CAAA,MAAO;AAEL,MAAA,kBAAA,CAAmB,KAAK,KAAK,CAAA;AAAA,IAC/B;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,cAAA,EAAgB,gBAAA,CAAiB,IAAA,CAAK,GAAG,CAAA;AAAA,IACzC,YAAA,EAAc;AAAA,GAChB;AACF;;;;"}

package/dist/hooks/useDefinition/useDefinition.esm.js

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useBreakpoint } from '../useBreakpoint.esm.js';
+import { useSurface, SurfaceProvider } from '../useSurface.esm.js';
+import { resolveResponsiveValue, processUtilityProps } from './helpers.esm.js';
+
+function useDefinition(definition, props, options) {
+  const { breakpoint } = useBreakpoint();
+  const surfaceOptions = definition.surface === "container" ? { surface: props.surface } : definition.surface === "leaf" ? { onSurface: props.onSurface } : void 0;
+  const { surface: resolvedSurface } = useSurface(surfaceOptions);
+  const ownPropKeys = new Set(Object.keys(definition.propDefs));
+  const utilityPropKeys = new Set(definition.utilityProps ?? []);
+  const ownPropsRaw = {};
+  const restProps = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (ownPropKeys.has(key)) {
+      ownPropsRaw[key] = value;
+    } else if (!utilityPropKeys.has(key)) {
+      restProps[key] = value;
+    }
+  }
+  const ownPropsResolved = {};
+  const dataAttributes = {};
+  for (const [key, config] of Object.entries(definition.propDefs)) {
+    const rawValue = ownPropsRaw[key];
+    const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);
+    const finalValue = resolvedValue ?? config.default;
+    if (finalValue !== void 0) {
+      ownPropsResolved[key] = finalValue;
+      if (config.dataAttribute) {
+        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);
+      }
+    }
+  }
+  if (definition.surface === "leaf" && resolvedSurface !== void 0) {
+    const surfaceValue = typeof resolvedSurface === "object" ? resolveResponsiveValue(resolvedSurface, breakpoint) : resolvedSurface;
+    if (surfaceValue !== void 0) {
+      dataAttributes["data-on-surface"] = String(surfaceValue);
+    }
+  }
+  const { utilityClasses, utilityStyle } = processUtilityProps(
+    props,
+    definition.utilityProps ?? []
+  );
+  const utilityTarget = "root";
+  const classNameTarget = "root";
+  const classes = {};
+  for (const [name, cssKey] of Object.entries(definition.classNames)) {
+    classes[name] = clsx(
+      cssKey,
+      definition.styles[cssKey],
+      {
+        [utilityClasses]: utilityTarget === name,
+        [ownPropsResolved.className]: classNameTarget === name
+      }
+    );
+  }
+  let children;
+  let surfaceChildren;
+  if (definition.surface === "container") {
+    surfaceChildren = resolvedSurface ? /* @__PURE__ */ jsx(SurfaceProvider, { surface: resolvedSurface, children: props.children }) : props.children;
+  } else {
+    children = props.children;
+  }
+  return {
+    ownProps: {
+      classes,
+      ...ownPropsResolved,
+      ...definition.surface === "container" ? { surfaceChildren } : { children }
+    },
+    restProps,
+    dataAttributes,
+    utilityStyle
+  };
+}
+
+export { useDefinition };
+//# sourceMappingURL=useDefinition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDefinition.esm.js","sources":["../../../src/hooks/useDefinition/useDefinition.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 { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useBreakpoint } from '../useBreakpoint';\nimport { useSurface, SurfaceProvider, UseSurfaceOptions } from '../useSurface';\nimport { resolveResponsiveValue, processUtilityProps } from './helpers';\nimport type {\n  ComponentConfig,\n  UseDefinitionOptions,\n  UseDefinitionResult,\n  UtilityKeys,\n} from './types';\n\nexport function useDefinition<\n  D extends ComponentConfig<any, any>,\n  P extends Record<string, any>,\n>(\n  definition: D,\n  props: P,\n  options?: UseDefinitionOptions<D>,\n): UseDefinitionResult<D, P> {\n  const { breakpoint } = useBreakpoint();\n\n  const surfaceOptions: UseSurfaceOptions | undefined =\n    definition.surface === 'container'\n      ? { surface: props.surface }\n      : definition.surface === 'leaf'\n      ? { onSurface: props.onSurface }\n      : undefined;\n\n  const { surface: resolvedSurface } = useSurface(surfaceOptions);\n\n  const ownPropKeys = new Set(Object.keys(definition.propDefs));\n  const utilityPropKeys = new Set(definition.utilityProps ?? []);\n\n  const ownPropsRaw: Record<string, any> = {};\n  const restProps: Record<string, any> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (ownPropKeys.has(key)) {\n      ownPropsRaw[key] = value;\n    } else if (!(utilityPropKeys as Set<string>).has(key)) {\n      restProps[key] = value;\n    }\n  }\n\n  const ownPropsResolved: Record<string, any> = {};\n  const dataAttributes: Record<string, string | undefined> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const rawValue = ownPropsRaw[key];\n    const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);\n    const finalValue = resolvedValue ?? (config as any).default;\n\n    if (finalValue !== undefined) {\n      ownPropsResolved[key] = finalValue;\n\n      if ((config as any).dataAttribute) {\n        // eslint-disable-next-line no-restricted-syntax\n        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);\n      }\n    }\n  }\n\n  // Add data-on-surface for leaf components\n  if (definition.surface === 'leaf' && resolvedSurface !== undefined) {\n    // Handle responsive surface values - for data attributes, use the resolved string\n    const surfaceValue =\n      typeof resolvedSurface === 'object'\n        ? resolveResponsiveValue(resolvedSurface as any, breakpoint)\n        : resolvedSurface;\n    if (surfaceValue !== undefined) {\n      dataAttributes['data-on-surface'] = String(surfaceValue);\n    }\n  }\n\n  const { utilityClasses, utilityStyle } = processUtilityProps<UtilityKeys<D>>(\n    props,\n    (definition.utilityProps ?? []) as readonly UtilityKeys<D>[],\n  );\n\n  const utilityTarget = options?.utilityTarget ?? 'root';\n  const classNameTarget = options?.classNameTarget ?? 'root';\n\n  const classes: Record<string, string> = {};\n\n  for (const [name, cssKey] of Object.entries(definition.classNames)) {\n    classes[name] = clsx(\n      cssKey as string,\n      definition.styles[cssKey as keyof typeof definition.styles],\n      {\n        [utilityClasses]: utilityTarget === name,\n        [ownPropsResolved.className]: classNameTarget === name,\n      },\n    );\n  }\n\n  let children: ReactNode | undefined;\n  let surfaceChildren: ReactNode | undefined;\n\n  if (definition.surface === 'container') {\n    surfaceChildren = resolvedSurface ? (\n      <SurfaceProvider surface={resolvedSurface}>\n        {props.children}\n      </SurfaceProvider>\n    ) : (\n      props.children\n    );\n  } else {\n    children = props.children;\n  }\n\n  return {\n    ownProps: {\n      classes,\n      ...ownPropsResolved,\n      ...(definition.surface === 'container'\n        ? { surfaceChildren }\n        : { children }),\n    },\n    restProps,\n    dataAttributes,\n    utilityStyle,\n  } as unknown as UseDefinitionResult<D, P>;\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks/useStyles.esm.js

@@ -1,25 +1,6 @@
-import { useBreakpoint, breakpoints } from './useBreakpoint.esm.js';
-import { utilityClassMap } from '../utils/utilityClassMap.esm.js';
+import { useBreakpoint } from './useBreakpoint.esm.js';
+import { resolveResponsiveValue, processUtilityProps } from './useDefinition/helpers.esm.js';
 
-function resolveResponsiveValue(value, breakpoint) {
-  if (typeof value === "string") {
-    return value;
-  }
-  if (typeof value === "object" && value !== null) {
-    const index = breakpoints.findIndex((b) => b.id === breakpoint);
-    for (let i = index; i >= 0; i--) {
-      if (value[breakpoints[i].id]) {
-        return value[breakpoints[i].id];
-      }
-    }
-    for (let i = 0; i < breakpoints.length; i++) {
-      if (value[breakpoints[i].id]) {
-        return value[breakpoints[i].id];
-      }
-    }
-  }
-  return void 0;
-}
 function useStyles(componentDefinition, props = {}) {
   const { breakpoint } = useBreakpoint();
   const classNames = componentDefinition.classNames;
@@ -40,38 +21,10 @@ function useStyles(componentDefinition, props = {}) {
       }
     }
   }
-  const utilityClassList = [];
-  const generatedStyle = {};
-  const handleUtilityValue = (key, val, prefix = "") => {
-    const utilityConfig = utilityClassMap[key];
-    if (!utilityConfig) {
-      return;
-    }
-    if (utilityConfig.values.length > 0 && utilityConfig.values.includes(val)) {
-      const className = prefix ? `${prefix}${utilityConfig.class}-${val}` : `${utilityConfig.class}-${val}`;
-      utilityClassList.push(className);
-    } else if (utilityConfig.cssVar) {
-      const cssVarKey = prefix ? `${utilityConfig.cssVar}-${prefix.slice(0, -1)}` : utilityConfig.cssVar;
-      generatedStyle[cssVarKey] = val;
-      const className = prefix ? `${prefix}${utilityConfig.class}` : utilityConfig.class;
-      utilityClassList.push(className);
-    }
-  };
-  for (const key of utilityPropNames) {
-    const value = props[key];
-    if (value === void 0 || value === null) {
-      continue;
-    }
-    if (typeof value === "object" && value !== null) {
-      const breakpointValues = value;
-      for (const bp in breakpointValues) {
-        const prefix = bp === "initial" ? "" : `${bp}:`;
-        handleUtilityValue(key, breakpointValues[bp], prefix);
-      }
-    } else {
-      handleUtilityValue(key, value);
-    }
-  }
+  const { utilityClasses, utilityStyle: generatedStyle } = processUtilityProps(
+    props,
+    utilityPropNames
+  );
   const utilityPropsSet = new Set(utilityPropNames);
   const cleanedPropsBase = Object.keys(props).reduce((acc, key) => {
     if (!utilityPropsSet.has(key)) {
@@ -90,7 +43,7 @@ function useStyles(componentDefinition, props = {}) {
   return {
     classNames,
     dataAttributes,
-    utilityClasses: utilityClassList.join(" "),
+    utilityClasses,
     style: mergedStyle,
     cleanedProps
   };

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

@@ -1 +1 @@
-{"version":3,"file":"useStyles.esm.js","sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useBreakpoint, breakpoints } from './useBreakpoint';\nimport type { ComponentDefinition } from '../types';\nimport { utilityClassMap } from '../utils/utilityClassMap';\n\n/**\n * Resolve a responsive value based on the current breakpoint\n * @param value - The responsive value (string or object with breakpoint keys)\n * @param breakpoint - The current breakpoint\n * @returns The resolved value for the current breakpoint\n */\nfunction resolveResponsiveValue(\n  value: string | Record<string, string>,\n  breakpoint: string,\n): string | undefined {\n  if (typeof value === 'string') {\n    return value;\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n    // Look for value at current breakpoint or smaller\n    for (let i = index; i >= 0; i--) {\n      if (value[breakpoints[i].id]) {\n        return value[breakpoints[i].id];\n      }\n    }\n\n    // If no value found, check from smallest breakpoint up\n    for (let i = 0; i < breakpoints.length; i++) {\n      if (value[breakpoints[i].id]) {\n        return value[breakpoints[i].id];\n      }\n    }\n  }\n\n  return undefined;\n}\n\n/**\n * React hook to get class names and data attributes for a component with responsive support\n * @param componentDefinition - The component's definition object\n * @param props - All component props\n * @returns Object with classNames, dataAttributes, utilityClasses, style, and cleanedProps\n */\nexport function useStyles<\n  T extends ComponentDefinition,\n  P extends Record<string, any> = Record<string, any>,\n>(\n  componentDefinition: T,\n  props: P = {} as P,\n): {\n  classNames: T['classNames'];\n  dataAttributes: Record<string, string>;\n  utilityClasses: string;\n  style: React.CSSProperties;\n  cleanedProps: P;\n} {\n  const { breakpoint } = useBreakpoint();\n  const classNames = componentDefinition.classNames;\n  const utilityPropNames =\n    ('utilityProps' in componentDefinition\n      ? componentDefinition.utilityProps\n      : []) || [];\n\n  // Extract data attribute names from component definition\n  const dataAttributeNames =\n    'dataAttributes' in componentDefinition\n      ? Object.keys(componentDefinition.dataAttributes || {})\n      : [];\n\n  // Extract existing style from props\n  const incomingStyle = props.style || {};\n\n  // Generate data attributes from component definition\n  const dataAttributes: Record<string, string> = {};\n  for (const key of dataAttributeNames) {\n    const value = props[key];\n    if (value !== undefined && value !== null) {\n      // Handle boolean and number values directly\n      if (typeof value === 'boolean' || typeof value === 'number') {\n        dataAttributes[`data-${key}`] = String(value);\n      } else {\n        const resolvedValue = resolveResponsiveValue(value, breakpoint);\n        if (resolvedValue !== undefined) {\n          dataAttributes[`data-${key}`] = resolvedValue;\n        }\n      }\n    }\n  }\n\n  // Generate utility classes and custom styles from component's allowed utility props\n  const utilityClassList: string[] = [];\n  const generatedStyle: React.CSSProperties = {};\n\n  const handleUtilityValue = (\n    key: string,\n    val: unknown,\n    prefix: string = '',\n  ) => {\n    // Get utility class configuration for this key\n    const utilityConfig = utilityClassMap[key as keyof typeof utilityClassMap];\n\n    if (!utilityConfig) {\n      // Skip if no config found for this key\n      return;\n    }\n\n    // Check if value is in the list of valid values for this utility\n    if (\n      utilityConfig.values.length > 0 &&\n      utilityConfig.values.includes(val as string | number)\n    ) {\n      // Generate utility class with value suffix and optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}-${val}`\n        : `${utilityConfig.class}-${val}`;\n      utilityClassList.push(className);\n    } else if (utilityConfig.cssVar) {\n      // Custom value - add CSS custom property AND utility class name\n      // Only if cssVar is defined (properties with fixed values don't have cssVar)\n      const cssVarKey = prefix\n        ? `${utilityConfig.cssVar}-${prefix.slice(0, -1)}`\n        : utilityConfig.cssVar;\n      // CSS custom properties need to be set on the style object as strings\n      (generatedStyle as Record<string, unknown>)[cssVarKey] = val;\n\n      // Add utility class name (without value suffix) with optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}`\n        : utilityConfig.class;\n      utilityClassList.push(className);\n    }\n    // If no cssVar and value is not in valid values, skip (invalid value for fixed-value property)\n  };\n\n  for (const key of utilityPropNames) {\n    const value = props[key];\n    if (value === undefined || value === null) {\n      continue;\n    }\n\n    // Check if value is a responsive object\n    if (typeof value === 'object' && value !== null) {\n      const breakpointValues = value as { [key: string]: unknown };\n      // Handle responsive object values\n      for (const bp in breakpointValues) {\n        const prefix = bp === 'initial' ? '' : `${bp}:`;\n        handleUtilityValue(key, breakpointValues[bp], prefix);\n      }\n    } else {\n      // Handle simple value\n      handleUtilityValue(key, value);\n    }\n  }\n\n  // Create cleaned props by excluding only utility props\n  // All other props (including data attributes, style, children, etc.) remain\n  const utilityPropsSet = new Set<string>(utilityPropNames);\n\n  const cleanedPropsBase = Object.keys(props).reduce((acc, key) => {\n    if (!utilityPropsSet.has(key)) {\n      acc[key] = props[key];\n    }\n    return acc;\n  }, {} as any);\n\n  // Merge incoming style with generated styles (incoming styles take precedence)\n  const mergedStyle = {\n    ...generatedStyle,\n    ...incomingStyle,\n  };\n\n  // Add merged style to cleanedProps\n  const cleanedProps = {\n    ...cleanedPropsBase,\n    style: mergedStyle,\n  } as P;\n\n  return {\n    classNames,\n    dataAttributes,\n    utilityClasses: utilityClassList.join(' '),\n    style: mergedStyle,\n    cleanedProps,\n  };\n}\n"],"names":[],"mappings":";;;AAyBA,SAAS,sBAAA,CACP,OACA,UAAA,EACoB;AACpB,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,IAAA,EAAM;AAC/C,IAAA,MAAM,QAAQ,WAAA,CAAY,SAAA,CAAU,CAAA,CAAA,KAAK,CAAA,CAAE,OAAO,UAAU,CAAA;AAG5D,IAAA,KAAA,IAAS,CAAA,GAAI,KAAA,EAAO,CAAA,IAAK,CAAA,EAAG,CAAA,EAAA,EAAK;AAC/B,MAAA,IAAI,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA,EAAG;AAC5B,QAAA,OAAO,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA,MAChC;AAAA,IACF;AAGA,IAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,WAAA,CAAY,QAAQ,CAAA,EAAA,EAAK;AAC3C,MAAA,IAAI,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA,EAAG;AAC5B,QAAA,OAAO,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT;AAQO,SAAS,SAAA,CAId,mBAAA,EACA,KAAA,GAAW,EAAC,EAOZ;AACA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,aAAA,EAAc;AACrC,EAAA,MAAM,aAAa,mBAAA,CAAoB,UAAA;AACvC,EAAA,MAAM,oBACH,cAAA,IAAkB,mBAAA,GACf,oBAAoB,YAAA,GACpB,OAAO,EAAC;AAGd,EAAA,MAAM,kBAAA,GACJ,gBAAA,IAAoB,mBAAA,GAChB,MAAA,CAAO,IAAA,CAAK,oBAAoB,cAAA,IAAkB,EAAE,CAAA,GACpD,EAAC;AAGP,EAAA,MAAM,aAAA,GAAgB,KAAA,CAAM,KAAA,IAAS,EAAC;AAGtC,EAAA,MAAM,iBAAyC,EAAC;AAChD,EAAA,KAAA,MAAW,OAAO,kBAAA,EAAoB;AACpC,IAAA,MAAM,KAAA,GAAQ,MAAM,GAAG,CAAA;AACvB,IAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AAEzC,MAAA,IAAI,OAAO,KAAA,KAAU,SAAA,IAAa,OAAO,UAAU,QAAA,EAAU;AAC3D,QAAA,cAAA,CAAe,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAA,GAAI,OAAO,KAAK,CAAA;AAAA,MAC9C,CAAA,MAAO;AACL,QAAA,MAAM,aAAA,GAAgB,sBAAA,CAAuB,KAAA,EAAO,UAAU,CAAA;AAC9D,QAAA,IAAI,kBAAkB,MAAA,EAAW;AAC/B,UAAA,cAAA,CAAe,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAA,GAAI,aAAA;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,EAAA,MAAM,mBAA6B,EAAC;AACpC,EAAA,MAAM,iBAAsC,EAAC;AAE7C,EAAA,MAAM,kBAAA,GAAqB,CACzB,GAAA,EACA,GAAA,EACA,SAAiB,EAAA,KACd;AAEH,IAAA,MAAM,aAAA,GAAgB,gBAAgB,GAAmC,CAAA;AAEzE,IAAA,IAAI,CAAC,aAAA,EAAe;AAElB,MAAA;AAAA,IACF;AAGA,IAAA,IACE,aAAA,CAAc,OAAO,MAAA,GAAS,CAAA,IAC9B,cAAc,MAAA,CAAO,QAAA,CAAS,GAAsB,CAAA,EACpD;AAEA,MAAA,MAAM,SAAA,GAAY,MAAA,GACd,CAAA,EAAG,MAAM,GAAG,aAAA,CAAc,KAAK,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,GACtC,CAAA,EAAG,aAAA,CAAc,KAAK,IAAI,GAAG,CAAA,CAAA;AACjC,MAAA,gBAAA,CAAiB,KAAK,SAAS,CAAA;AAAA,IACjC,CAAA,MAAA,IAAW,cAAc,MAAA,EAAQ;AAG/B,MAAA,MAAM,SAAA,GAAY,MAAA,GACd,CAAA,EAAG,aAAA,CAAc,MAAM,CAAA,CAAA,EAAI,MAAA,CAAO,KAAA,CAAM,CAAA,EAAG,EAAE,CAAC,CAAA,CAAA,GAC9C,aAAA,CAAc,MAAA;AAElB,MAAC,cAAA,CAA2C,SAAS,CAAA,GAAI,GAAA;AAGzD,MAAA,MAAM,SAAA,GAAY,SACd,CAAA,EAAG,MAAM,GAAG,aAAA,CAAc,KAAK,KAC/B,aAAA,CAAc,KAAA;AAClB,MAAA,gBAAA,CAAiB,KAAK,SAAS,CAAA;AAAA,IACjC;AAAA,EAEF,CAAA;AAEA,EAAA,KAAA,MAAW,OAAO,gBAAA,EAAkB;AAClC,IAAA,MAAM,KAAA,GAAQ,MAAM,GAAG,CAAA;AACvB,IAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,IAAA,EAAM;AAC/C,MAAA,MAAM,gBAAA,GAAmB,KAAA;AAEzB,MAAA,KAAA,MAAW,MAAM,gBAAA,EAAkB;AACjC,QAAA,MAAM,MAAA,GAAS,EAAA,KAAO,SAAA,GAAY,EAAA,GAAK,GAAG,EAAE,CAAA,CAAA,CAAA;AAC5C,QAAA,kBAAA,CAAmB,GAAA,EAAK,gBAAA,CAAiB,EAAE,CAAA,EAAG,MAAM,CAAA;AAAA,MACtD;AAAA,IACF,CAAA,MAAO;AAEL,MAAA,kBAAA,CAAmB,KAAK,KAAK,CAAA;AAAA,IAC/B;AAAA,EACF;AAIA,EAAA,MAAM,eAAA,GAAkB,IAAI,GAAA,CAAY,gBAAgB,CAAA;AAExD,EAAA,MAAM,gBAAA,GAAmB,OAAO,IAAA,CAAK,KAAK,EAAE,MAAA,CAAO,CAAC,KAAK,GAAA,KAAQ;AAC/D,IAAA,IAAI,CAAC,eAAA,CAAgB,GAAA,CAAI,GAAG,CAAA,EAAG;AAC7B,MAAA,GAAA,CAAI,GAAG,CAAA,GAAI,KAAA,CAAM,GAAG,CAAA;AAAA,IACtB;AACA,IAAA,OAAO,GAAA;AAAA,EACT,CAAA,EAAG,EAAS,CAAA;AAGZ,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,GAAG,cAAA;AAAA,IACH,GAAG;AAAA,GACL;AAGA,EAAA,MAAM,YAAA,GAAe;AAAA,IACnB,GAAG,gBAAA;AAAA,IACH,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA,EAAgB,gBAAA,CAAiB,IAAA,CAAK,GAAG,CAAA;AAAA,IACzC,KAAA,EAAO,WAAA;AAAA,IACP;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useStyles.esm.js","sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useBreakpoint } from './useBreakpoint';\nimport type { ComponentDefinition } from '../types';\nimport {\n  resolveResponsiveValue,\n  processUtilityProps,\n} from './useDefinition/helpers';\n\n/**\n * React hook to get class names and data attributes for a component with responsive support\n * @param componentDefinition - The component's definition object\n * @param props - All component props\n * @returns Object with classNames, dataAttributes, utilityClasses, style, and cleanedProps\n */\nexport function useStyles<\n  T extends ComponentDefinition,\n  P extends Record<string, any> = Record<string, any>,\n>(\n  componentDefinition: T,\n  props: P = {} as P,\n): {\n  classNames: T['classNames'];\n  dataAttributes: Record<string, string>;\n  utilityClasses: string;\n  style: React.CSSProperties;\n  cleanedProps: P;\n} {\n  const { breakpoint } = useBreakpoint();\n  const classNames = componentDefinition.classNames;\n  const utilityPropNames =\n    ('utilityProps' in componentDefinition\n      ? componentDefinition.utilityProps\n      : []) || [];\n\n  // Extract data attribute names from component definition\n  const dataAttributeNames =\n    'dataAttributes' in componentDefinition\n      ? Object.keys(componentDefinition.dataAttributes || {})\n      : [];\n\n  // Extract existing style from props\n  const incomingStyle = props.style || {};\n\n  // Generate data attributes from component definition\n  const dataAttributes: Record<string, string> = {};\n  for (const key of dataAttributeNames) {\n    const value = props[key];\n    if (value !== undefined && value !== null) {\n      // Handle boolean and number values directly\n      if (typeof value === 'boolean' || typeof value === 'number') {\n        dataAttributes[`data-${key}`] = String(value);\n      } else {\n        const resolvedValue = resolveResponsiveValue(value, breakpoint);\n        if (resolvedValue !== undefined) {\n          dataAttributes[`data-${key}`] = resolvedValue;\n        }\n      }\n    }\n  }\n\n  // Generate utility classes and custom styles from component's allowed utility props\n  const { utilityClasses, utilityStyle: generatedStyle } = processUtilityProps(\n    props,\n    utilityPropNames,\n  );\n\n  // Create cleaned props by excluding only utility props\n  // All other props (including data attributes, style, children, etc.) remain\n  const utilityPropsSet = new Set<string>(utilityPropNames);\n\n  const cleanedPropsBase = Object.keys(props).reduce((acc, key) => {\n    if (!utilityPropsSet.has(key)) {\n      acc[key] = props[key];\n    }\n    return acc;\n  }, {} as any);\n\n  // Merge incoming style with generated styles (incoming styles take precedence)\n  const mergedStyle = {\n    ...generatedStyle,\n    ...incomingStyle,\n  };\n\n  // Add merged style to cleanedProps\n  const cleanedProps = {\n    ...cleanedPropsBase,\n    style: mergedStyle,\n  } as P;\n\n  return {\n    classNames,\n    dataAttributes,\n    utilityClasses,\n    style: mergedStyle,\n    cleanedProps,\n  };\n}\n"],"names":[],"mappings":";;;AA4BO,SAAS,SAAA,CAId,mBAAA,EACA,KAAA,GAAW,EAAC,EAOZ;AACA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,aAAA,EAAc;AACrC,EAAA,MAAM,aAAa,mBAAA,CAAoB,UAAA;AACvC,EAAA,MAAM,oBACH,cAAA,IAAkB,mBAAA,GACf,oBAAoB,YAAA,GACpB,OAAO,EAAC;AAGd,EAAA,MAAM,kBAAA,GACJ,gBAAA,IAAoB,mBAAA,GAChB,MAAA,CAAO,IAAA,CAAK,oBAAoB,cAAA,IAAkB,EAAE,CAAA,GACpD,EAAC;AAGP,EAAA,MAAM,aAAA,GAAgB,KAAA,CAAM,KAAA,IAAS,EAAC;AAGtC,EAAA,MAAM,iBAAyC,EAAC;AAChD,EAAA,KAAA,MAAW,OAAO,kBAAA,EAAoB;AACpC,IAAA,MAAM,KAAA,GAAQ,MAAM,GAAG,CAAA;AACvB,IAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AAEzC,MAAA,IAAI,OAAO,KAAA,KAAU,SAAA,IAAa,OAAO,UAAU,QAAA,EAAU;AAC3D,QAAA,cAAA,CAAe,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAA,GAAI,OAAO,KAAK,CAAA;AAAA,MAC9C,CAAA,MAAO;AACL,QAAA,MAAM,aAAA,GAAgB,sBAAA,CAAuB,KAAA,EAAO,UAAU,CAAA;AAC9D,QAAA,IAAI,kBAAkB,MAAA,EAAW;AAC/B,UAAA,cAAA,CAAe,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAA,GAAI,aAAA;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAA;AAAA,IACvD,KAAA;AAAA,IACA;AAAA,GACF;AAIA,EAAA,MAAM,eAAA,GAAkB,IAAI,GAAA,CAAY,gBAAgB,CAAA;AAExD,EAAA,MAAM,gBAAA,GAAmB,OAAO,IAAA,CAAK,KAAK,EAAE,MAAA,CAAO,CAAC,KAAK,GAAA,KAAQ;AAC/D,IAAA,IAAI,CAAC,eAAA,CAAgB,GAAA,CAAI,GAAG,CAAA,EAAG;AAC7B,MAAA,GAAA,CAAI,GAAG,CAAA,GAAI,KAAA,CAAM,GAAG,CAAA;AAAA,IACtB;AACA,IAAA,OAAO,GAAA;AAAA,EACT,CAAA,EAAG,EAAS,CAAA;AAGZ,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,GAAG,cAAA;AAAA,IACH,GAAG;AAAA,GACL;AAGA,EAAA,MAAM,YAAA,GAAe;AAAA,IACnB,GAAG,gBAAA;AAAA,IACH,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA,EAAO,WAAA;AAAA,IACP;AAAA,GACF;AACF;;;;"}