@backstage/ui 0.6.0 → 0.7.0-next.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  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';\n\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * 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 { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (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    }\n    return undefined;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={classNames.tabs}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div className={classNames.tabListWrapper}>\n      <AriaTabList\n        className={classNames.tabList}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { href, children, id, matchStrategy: _matchStrategy, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={classNames.tab}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n\n  return (\n    <AriaTabPanel className={classNames.panel} {...rest}>\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsIndicators.esm.js","sources":["../../../src/components/Tabs/TabsIndicators.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { TabListStateContext } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useContext, useEffect, useCallback, useRef } from 'react';\nimport type { TabsIndicatorsProps } from './types';\n\n/**\n * A component that renders the indicators for the toolbar.\n *\n * @internal\n */\nexport const TabsIndicators = (props: TabsIndicatorsProps) => {\n  const { tabRefs, tabsRef, hoveredKey, prevHoveredKey } = props;\n  const { classNames } = useStyles('Tabs');\n  const state = useContext(TabListStateContext);\n  const prevSelectedKey = useRef<string | null>(null);\n\n  const updateCSSVariables = useCallback(() => {\n    if (!tabsRef.current) return;\n\n    const tabsRect = tabsRef.current.getBoundingClientRect();\n\n    // Set active tab variables\n    if (state?.selectedKey) {\n      const activeTab = tabRefs.current.get(state.selectedKey.toString());\n\n      if (activeTab) {\n        const activeRect = activeTab.getBoundingClientRect();\n        const relativeLeft = activeRect.left - tabsRect.left;\n        const relativeTop = activeRect.top - tabsRect.top;\n\n        // Control transition timing based on whether this is the first time setting active tab\n        const isFirstActiveTab = prevSelectedKey.current === null;\n\n        if (isFirstActiveTab) {\n          // First time setting active tab: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--active-transition-duration',\n                '0.25s',\n              );\n            }\n          });\n        } else {\n          // Switching between tabs: full transitions\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0.25s',\n          );\n        }\n\n        // Update previous selected key for next time\n        prevSelectedKey.current = state.selectedKey.toString();\n\n        tabsRef.current.style.setProperty(\n          '--active-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-right',\n          `${relativeLeft + activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-bottom',\n          `${relativeTop + activeRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-width',\n          `${activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-height',\n          `${activeRect.height}px`,\n        );\n      }\n    }\n\n    // Set hovered tab variables\n    if (hoveredKey) {\n      const hoveredTab = tabRefs.current.get(hoveredKey);\n      if (hoveredTab) {\n        const hoveredRect = hoveredTab.getBoundingClientRect();\n        const relativeLeft = hoveredRect.left - tabsRect.left;\n        const relativeTop = hoveredRect.top - tabsRect.top;\n\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-right',\n          `${relativeLeft + hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-bottom',\n          `${relativeTop + hoveredRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-width',\n          `${hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-height',\n          `${hoveredRect.height}px`,\n        );\n        // Control transition timing based on whether this is a new hover session\n        const isNewHoverSession = prevHoveredKey.current === null;\n\n        if (isNewHoverSession) {\n          // Starting new hover session: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--hovered-transition-duration',\n                '0.2s',\n              );\n            }\n          });\n        } else {\n          // Moving between tabs in same session: full transitions\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0.2s',\n          );\n        }\n\n        // Update previous hover key for next time\n        prevHoveredKey.current = hoveredKey;\n\n        tabsRef.current.style.setProperty('--hovered-tab-opacity', '1');\n      }\n    } else {\n      // When not hovering, hide with opacity and reset for next hover session\n      tabsRef.current.style.setProperty('--hovered-tab-opacity', '0');\n\n      // Reset previous hover key so next hover is treated as new session\n      prevHoveredKey.current = null;\n    }\n  }, [state?.selectedKey, hoveredKey, tabRefs.current]);\n\n  useEffect(() => {\n    updateCSSVariables();\n  }, [updateCSSVariables, tabRefs.current.size]);\n\n  useEffect(() => {\n    const handleResize = () => updateCSSVariables();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [updateCSSVariables]);\n\n  return (\n    <>\n      <div className={classNames.tabActive} />\n      <div className={classNames.tabHovered} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  {\n    as,\n    variant = 'body-medium',\n    weight = 'regular',\n    color = 'primary',\n    className,\n    truncate,\n    style,\n    ...restProps\n  }: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = as || 'span';\n\n  const { classNames, dataAttributes } = useStyles('Text', {\n    variant,\n    weight,\n    color,\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      data-truncate={truncate}\n      data-as={as}\n      {...dataAttributes}\n      style={style}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;AAsBA,SAAS,aACP,CAAA;AAAA,EACE,EAAA;AAAA,EACA,OAAU,GAAA,aAAA;AAAA,EACV,MAAS,GAAA,SAAA;AAAA,EACT,KAAQ,GAAA,SAAA;AAAA,EACR,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,YAAY,EAAM,IAAA,MAAA;AAExB,EAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,MAAQ,EAAA;AAAA,IACvD,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,eAAe,EAAA,QAAA;AAAA,MACf,SAAS,EAAA,EAAA;AAAA,MACR,GAAG,cAAA;AAAA,MACJ,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAc,GAAA,MAAA;AAGf,MAAA,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}

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

@@ -0,0 +1,88 @@
+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 { FieldError } from '../FieldError/FieldError.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const TextField = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      icon,
+      size = "small",
+      label,
+      secondaryLabel,
+      description,
+      isRequired,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      placeholder,
+      ...rest
+    } = props;
+    useEffect(() => {
+      if (!label && !ariaLabel && !ariaLabelledBy) {
+        console.warn(
+          "TextField requires either a visible label, aria-label, or aria-labelledby for accessibility"
+        );
+      }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    const { classNames, dataAttributes } = useStyles("TextField", {
+      size
+    });
+    const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+    return /* @__PURE__ */ jsxs(
+      TextField$1,
+      {
+        className: clsx(classNames.root, className),
+        ...dataAttributes,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        ...rest,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              label,
+              secondaryLabel: secondaryLabelText,
+              description
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: classNames.inputWrapper,
+              "data-size": dataAttributes["data-size"],
+              children: [
+                icon && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classNames.inputIcon,
+                    "data-size": dataAttributes["data-size"],
+                    "aria-hidden": "true",
+                    children: icon
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    className: classNames.input,
+                    ...icon && { "data-icon": true },
+                    placeholder
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, {})
+        ]
+      }
+    );
+  }
+);
+TextField.displayName = "TextField";
+
+export { TextField };
+//# sourceMappingURL=TextField.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.esm.js","sources":["../../../src/components/TextField/TextField.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, useEffect } from 'react';\nimport { Input, TextField as AriaTextField } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\n\nimport type { TextFieldProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(\n  (props, ref) => {\n    const {\n      className,\n      icon,\n      size = 'small',\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      placeholder,\n      ...rest\n    } = props;\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames, dataAttributes } = useStyles('TextField', {\n      size,\n    });\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaTextField\n        className={clsx(classNames.root, className)}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={classNames.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon && (\n            <div\n              className={classNames.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon}\n            </div>\n          )}\n          <Input\n            className={classNames.input}\n            {...(icon && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n        </div>\n        <FieldError />\n      </AriaTextField>\n    );\n  },\n);\n\nTextField.displayName = 'TextField';\n"],"names":["AriaTextField"],"mappings":";;;;;;;;AA0BO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAO,GAAA,OAAA;AAAA,MACP,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAc,EAAA,SAAA;AAAA,MACd,iBAAmB,EAAA,cAAA;AAAA,MACnB,WAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAgB,EAAA;AAC3C,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF,KACC,EAAA,CAAC,KAAO,EAAA,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,WAAa,EAAA;AAAA,MAC5D;AAAA,KACD,CAAA;AAGD,IAAM,MAAA,kBAAA,GACJ,cAAmB,KAAA,UAAA,GAAa,UAAa,GAAA,IAAA,CAAA;AAE/C,IACE,uBAAA,IAAA;AAAA,MAACA,WAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QACzC,GAAG,cAAA;AAAA,QACJ,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAiB,EAAA,cAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAgB,EAAA,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,UAAW,CAAA,YAAA;AAAA,cACtB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBACC,IAAA,oBAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,UAAW,CAAA,SAAA;AAAA,oBACtB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAY,EAAA,MAAA;AAAA,oBAEX,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,UAAW,CAAA,KAAA;AAAA,oBACrB,GAAI,IAAA,IAAQ,EAAE,WAAA,EAAa,IAAK,EAAA;AAAA,oBACjC;AAAA;AAAA;AACF;AAAA;AAAA,WACF;AAAA,8BACC,UAAW,EAAA,EAAA;AAAA;AAAA;AAAA,KACd;AAAA;AAGN;AAEA,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}

package/dist/components/Tooltip/Tooltip.esm.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Tooltip as Tooltip$1, OverlayArrow, TooltipTrigger as TooltipTrigger$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const TooltipTrigger = (props) => {
+  const { delay = 600 } = props;
+  return /* @__PURE__ */ jsx(TooltipTrigger$1, { delay, ...props });
+};
+const Tooltip = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    const { classNames } = useStyles("Tooltip");
+    return /* @__PURE__ */ jsxs(
+      Tooltip$1,
+      {
+        className: clsx(classNames.tooltip, className),
+        ...rest,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(OverlayArrow, { className: classNames.arrow, children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+            /* @__PURE__ */ jsx("path", { d: "M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z" }),
+            /* @__PURE__ */ jsx("path", { d: "M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z" })
+          ] }) }),
+          children
+        ]
+      }
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip, TooltipTrigger };
+//# sourceMappingURL=Tooltip.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.esm.js","sources":["../../../src/components/Tooltip/Tooltip.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 {\n  OverlayArrow,\n  Tooltip as AriaTooltip,\n  TooltipTrigger as AriaTooltipTrigger,\n  TooltipTriggerComponentProps,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { TooltipProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const TooltipTrigger = (props: TooltipTriggerComponentProps) => {\n  const { delay = 600 } = props;\n\n  return <AriaTooltipTrigger delay={delay} {...props} />;\n};\n\n/** @public */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  ({ className, children, ...rest }, ref) => {\n    const { classNames } = useStyles('Tooltip');\n\n    return (\n      <AriaTooltip\n        className={clsx(classNames.tooltip, className)}\n        {...rest}\n        ref={ref}\n      >\n        <OverlayArrow className={classNames.arrow}>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z\" />\n            <path d=\"M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z\" />\n          </svg>\n        </OverlayArrow>\n        {children}\n      </AriaTooltip>\n    );\n  },\n);\n\nTooltip.displayName = 'Tooltip';\n"],"names":["AriaTooltipTrigger","AriaTooltip"],"mappings":";;;;;;AA4Ba,MAAA,cAAA,GAAiB,CAAC,KAAwC,KAAA;AACrE,EAAM,MAAA,EAAE,KAAQ,GAAA,GAAA,EAAQ,GAAA,KAAA;AAExB,EAAA,uBAAQ,GAAA,CAAAA,gBAAA,EAAA,EAAmB,KAAe,EAAA,GAAG,KAAO,EAAA,CAAA;AACtD;AAGO,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,IAAA,IAAQ,GAAQ,KAAA;AACzC,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,SAAS,CAAA;AAE1C,IACE,uBAAA,IAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,QAC5C,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAa,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,KAAA,EAClC,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,KAAM,EAAA,IAAA,EAAK,MAAO,EAAA,IAAA,EAAK,OAAQ,EAAA,WAAA,EAAY,MAAK,MACnD,EAAA,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA,EAAK,GAAE,8NAA+N,EAAA,CAAA;AAAA,4BACvO,GAAA,CAAC,MAAK,EAAA,EAAA,CAAA,EAAE,qSAAsS,EAAA;AAAA,WAAA,EAChT,CACF,EAAA,CAAA;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}

package/dist/hooks/useBreakpoint.esm.js

@@ -0,0 +1,43 @@
+import { useMediaQuery } from './useMediaQuery.esm.js';
+
+const breakpoints = [
+  { name: "Initial", id: "initial", value: 0 },
+  { name: "Extra Small", id: "xs", value: 640 },
+  { name: "Small", id: "sm", value: 768 },
+  { name: "Medium", id: "md", value: 1024 },
+  { name: "Large", id: "lg", value: 1280 },
+  { name: "Extra Large", id: "xl", value: 1536 }
+];
+const useBreakpoint = () => {
+  const matches = breakpoints.map((breakpoint2) => {
+    return useMediaQuery(`(min-width: ${breakpoint2.value}px)`);
+  });
+  const upMatches = new Map(
+    breakpoints.map((bp) => [bp.id, useMediaQuery(`(min-width: ${bp.value}px)`)])
+  );
+  const downMatches = new Map(
+    breakpoints.map((bp) => [
+      bp.id,
+      useMediaQuery(`(max-width: ${bp.value - 1}px)`)
+    ])
+  );
+  let breakpoint = breakpoints[0].id;
+  for (let i = matches.length - 1; i >= 0; i--) {
+    if (matches[i]) {
+      breakpoint = breakpoints[i].id;
+      break;
+    }
+  }
+  return {
+    breakpoint,
+    up: (key) => {
+      return upMatches.get(key) ?? false;
+    },
+    down: (key) => {
+      return downMatches.get(key) ?? false;
+    }
+  };
+};
+
+export { breakpoints, useBreakpoint };
+//# sourceMappingURL=useBreakpoint.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.esm.js","sources":["../../src/hooks/useBreakpoint.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 { useMediaQuery } from './useMediaQuery';\nimport type { Breakpoint } from '../types';\n\nexport const breakpoints: { name: string; id: Breakpoint; value: number }[] = [\n  { name: 'Initial', id: 'initial', value: 0 },\n  { name: 'Extra Small', id: 'xs', value: 640 },\n  { name: 'Small', id: 'sm', value: 768 },\n  { name: 'Medium', id: 'md', value: 1024 },\n  { name: 'Large', id: 'lg', value: 1280 },\n  { name: 'Extra Large', id: 'xl', value: 1536 },\n];\n\n/** @public */\nexport const useBreakpoint = () => {\n  // Call all media queries at the top level\n  const matches = breakpoints.map(breakpoint => {\n    return useMediaQuery(`(min-width: ${breakpoint.value}px)`);\n  });\n\n  // Pre-calculate all the up/down values we need\n  const upMatches = new Map(\n    breakpoints.map(bp => [bp.id, useMediaQuery(`(min-width: ${bp.value}px)`)]),\n  );\n\n  const downMatches = new Map(\n    breakpoints.map(bp => [\n      bp.id,\n      useMediaQuery(`(max-width: ${bp.value - 1}px)`),\n    ]),\n  );\n\n  let breakpoint: Breakpoint = breakpoints[0].id;\n  for (let i = matches.length - 1; i >= 0; i--) {\n    if (matches[i]) {\n      breakpoint = breakpoints[i].id;\n      break;\n    }\n  }\n\n  return {\n    breakpoint,\n    up: (key: Breakpoint): boolean => {\n      return upMatches.get(key) ?? false;\n    },\n    down: (key: Breakpoint): boolean => {\n      return downMatches.get(key) ?? false;\n    },\n  };\n};\n"],"names":["breakpoint"],"mappings":";;AAkBO,MAAM,WAAiE,GAAA;AAAA,EAC5E,EAAE,IAAM,EAAA,SAAA,EAAW,EAAI,EAAA,SAAA,EAAW,OAAO,CAAE,EAAA;AAAA,EAC3C,EAAE,IAAM,EAAA,aAAA,EAAe,EAAI,EAAA,IAAA,EAAM,OAAO,GAAI,EAAA;AAAA,EAC5C,EAAE,IAAM,EAAA,OAAA,EAAS,EAAI,EAAA,IAAA,EAAM,OAAO,GAAI,EAAA;AAAA,EACtC,EAAE,IAAM,EAAA,QAAA,EAAU,EAAI,EAAA,IAAA,EAAM,OAAO,IAAK,EAAA;AAAA,EACxC,EAAE,IAAM,EAAA,OAAA,EAAS,EAAI,EAAA,IAAA,EAAM,OAAO,IAAK,EAAA;AAAA,EACvC,EAAE,IAAM,EAAA,aAAA,EAAe,EAAI,EAAA,IAAA,EAAM,OAAO,IAAK;AAC/C;AAGO,MAAM,gBAAgB,MAAM;AAEjC,EAAA,MAAM,OAAU,GAAA,WAAA,CAAY,GAAI,CAAA,CAAAA,WAAc,KAAA;AAC5C,IAAA,OAAO,aAAc,CAAA,CAAA,YAAA,EAAeA,WAAW,CAAA,KAAK,CAAK,GAAA,CAAA,CAAA;AAAA,GAC1D,CAAA;AAGD,EAAA,MAAM,YAAY,IAAI,GAAA;AAAA,IACpB,WAAY,CAAA,GAAA,CAAI,CAAM,EAAA,KAAA,CAAC,EAAG,CAAA,EAAA,EAAI,aAAc,CAAA,CAAA,YAAA,EAAe,EAAG,CAAA,KAAK,CAAK,GAAA,CAAA,CAAC,CAAC;AAAA,GAC5E;AAEA,EAAA,MAAM,cAAc,IAAI,GAAA;AAAA,IACtB,WAAA,CAAY,IAAI,CAAM,EAAA,KAAA;AAAA,MACpB,EAAG,CAAA,EAAA;AAAA,MACH,aAAc,CAAA,CAAA,YAAA,EAAe,EAAG,CAAA,KAAA,GAAQ,CAAC,CAAK,GAAA,CAAA;AAAA,KAC/C;AAAA,GACH;AAEA,EAAI,IAAA,UAAA,GAAyB,WAAY,CAAA,CAAC,CAAE,CAAA,EAAA;AAC5C,EAAA,KAAA,IAAS,IAAI,OAAQ,CAAA,MAAA,GAAS,CAAG,EAAA,CAAA,IAAK,GAAG,CAAK,EAAA,EAAA;AAC5C,IAAI,IAAA,OAAA,CAAQ,CAAC,CAAG,EAAA;AACd,MAAa,UAAA,GAAA,WAAA,CAAY,CAAC,CAAE,CAAA,EAAA;AAC5B,MAAA;AAAA;AACF;AAGF,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,EAAA,EAAI,CAAC,GAA6B,KAAA;AAChC,MAAO,OAAA,SAAA,CAAU,GAAI,CAAA,GAAG,CAAK,IAAA,KAAA;AAAA,KAC/B;AAAA,IACA,IAAA,EAAM,CAAC,GAA6B,KAAA;AAClC,MAAO,OAAA,WAAA,CAAY,GAAI,CAAA,GAAG,CAAK,IAAA,KAAA;AAAA;AACjC,GACF;AACF;;;;"}

package/dist/hooks/useIsomorphicLayoutEffect.esm.js

@@ -0,0 +1,6 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };
+//# sourceMappingURL=useIsomorphicLayoutEffect.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.esm.js","sources":["../../src/hooks/useIsomorphicLayoutEffect.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 */\nimport { useEffect, useLayoutEffect } from 'react';\n\nexport const useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n"],"names":[],"mappings":";;AAiBO,MAAM,yBACX,GAAA,OAAO,MAAW,KAAA,WAAA,GAAc,eAAkB,GAAA;;;;"}

package/dist/hooks/useMediaQuery.esm.js

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
+
+const IS_SERVER = typeof window === "undefined";
+function useMediaQuery(query, {
+  defaultValue = false,
+  initializeWithValue = true
+} = {}) {
+  const getMatches = (query2) => {
+    if (IS_SERVER) {
+      return defaultValue;
+    }
+    return window.matchMedia(query2).matches;
+  };
+  const [matches, setMatches] = useState(() => {
+    if (initializeWithValue) {
+      return getMatches(query);
+    }
+    return defaultValue;
+  });
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+  useIsomorphicLayoutEffect(() => {
+    const matchMedia = window.matchMedia(query);
+    handleChange();
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener("change", handleChange);
+    }
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener("change", handleChange);
+      }
+    };
+  }, [query]);
+  return matches;
+}
+
+export { useMediaQuery };
+//# sourceMappingURL=useMediaQuery.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.esm.js","sources":["../../src/hooks/useMediaQuery.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 */\nimport { useState } from 'react';\n\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\ntype UseMediaQueryOptions = {\n  defaultValue?: boolean;\n  initializeWithValue?: boolean;\n};\n\nconst IS_SERVER = typeof window === 'undefined';\n\nexport function useMediaQuery(\n  query: string,\n  {\n    defaultValue = false,\n    initializeWithValue = true,\n  }: UseMediaQueryOptions = {},\n): boolean {\n  const getMatches = (query: string): boolean => {\n    if (IS_SERVER) {\n      return defaultValue;\n    }\n    return window.matchMedia(query).matches;\n  };\n\n  const [matches, setMatches] = useState<boolean>(() => {\n    if (initializeWithValue) {\n      return getMatches(query);\n    }\n    return defaultValue;\n  });\n\n  // Handles the change event of the media query.\n  function handleChange() {\n    setMatches(getMatches(query));\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    const matchMedia = window.matchMedia(query);\n\n    // Triggered at the first client-side load and if query changes\n    handleChange();\n\n    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)\n    if (matchMedia.addListener) {\n      matchMedia.addListener(handleChange);\n    } else {\n      matchMedia.addEventListener('change', handleChange);\n    }\n\n    return () => {\n      if (matchMedia.removeListener) {\n        matchMedia.removeListener(handleChange);\n      } else {\n        matchMedia.removeEventListener('change', handleChange);\n      }\n    };\n  }, [query]);\n\n  return matches;\n}\n"],"names":["query"],"mappings":";;;AAwBA,MAAM,SAAA,GAAY,OAAO,MAAW,KAAA,WAAA;AAE7B,SAAS,cACd,KACA,EAAA;AAAA,EACE,YAAe,GAAA,KAAA;AAAA,EACf,mBAAsB,GAAA;AACxB,CAAA,GAA0B,EACjB,EAAA;AACT,EAAM,MAAA,UAAA,GAAa,CAACA,MAA2B,KAAA;AAC7C,IAAA,IAAI,SAAW,EAAA;AACb,MAAO,OAAA,YAAA;AAAA;AAET,IAAO,OAAA,MAAA,CAAO,UAAWA,CAAAA,MAAK,CAAE,CAAA,OAAA;AAAA,GAClC;AAEA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,MAAM;AACpD,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAA,OAAO,WAAW,KAAK,CAAA;AAAA;AAEzB,IAAO,OAAA,YAAA;AAAA,GACR,CAAA;AAGD,EAAA,SAAS,YAAe,GAAA;AACtB,IAAW,UAAA,CAAA,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA;AAG9B,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAM,MAAA,UAAA,GAAa,MAAO,CAAA,UAAA,CAAW,KAAK,CAAA;AAG1C,IAAa,YAAA,EAAA;AAGb,IAAA,IAAI,WAAW,WAAa,EAAA;AAC1B,MAAA,UAAA,CAAW,YAAY,YAAY,CAAA;AAAA,KAC9B,MAAA;AACL,MAAW,UAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAAA;AAGpD,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,cAAgB,EAAA;AAC7B,QAAA,UAAA,CAAW,eAAe,YAAY,CAAA;AAAA,OACjC,MAAA;AACL,QAAW,UAAA,CAAA,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA;AACvD,KACF;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAO,OAAA,OAAA;AACT;;;;"}