@backstage/ui 0.0.0-nightly-20250722024836

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,31 @@
+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__ */ jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+          children
+        ]
+      }
+    );
+  }
+);
+Tooltip.displayName = Tooltip.displayName;
+
+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={8} height={8} viewBox=\"0 0 8 8\">\n            <path d=\"M0 0 L4 4 L8 0\" />\n          </svg>\n        </OverlayArrow>\n        {children}\n      </AriaTooltip>\n    );\n  },\n);\n\nTooltip.displayName = Tooltip.displayName;\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,gBAAa,SAAW,EAAA,UAAA,CAAW,KAClC,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAI,KAAO,EAAA,CAAA,EAAG,MAAQ,EAAA,CAAA,EAAG,SAAQ,SAChC,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAK,CAAE,EAAA,gBAAA,EAAiB,GAC3B,CACF,EAAA,CAAA;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,OAAA,CAAQ,cAAc,OAAQ,CAAA,WAAA;;;;"}

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;;;;"}

package/dist/hooks/useStyles.esm.js

@@ -0,0 +1,46 @@
+import { useBreakpoint, breakpoints } from './useBreakpoint.esm.js';
+import { componentDefinitions } from '../utils/componentDefinitions.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(componentName, props = {}) {
+  const { breakpoint } = useBreakpoint();
+  const classNames = componentDefinitions[componentName].classNames;
+  const dataAttributes = {};
+  const resolvedProps = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (value !== void 0 && value !== null) {
+      const resolvedValue = resolveResponsiveValue(value, breakpoint);
+      if (resolvedValue !== void 0) {
+        resolvedProps[key] = resolvedValue;
+        dataAttributes[`data-${key}`] = resolvedValue;
+      }
+    }
+  }
+  return {
+    classNames,
+    dataAttributes,
+    resolvedProps
+    // Also return resolved props for convenience
+  };
+}
+
+export { useStyles };
+//# sourceMappingURL=useStyles.esm.js.map

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

@@ -0,0 +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 { componentDefinitions } from '../utils/componentDefinitions';\nimport type { ComponentDefinitionName, ComponentClassNames } from '../types';\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 componentName - The name of the component\n * @param props - Object with prop values (can be responsive)\n * @returns Object with classNames and dataAttributes\n */\nexport function useStyles<T extends ComponentDefinitionName>(\n  componentName: T,\n  props: Record<string, any> = {},\n): {\n  classNames: ComponentClassNames<T>;\n  dataAttributes: Record<string, string>;\n  resolvedProps: Record<string, string>;\n} {\n  const { breakpoint } = useBreakpoint();\n  const classNames = componentDefinitions[componentName]\n    .classNames as ComponentClassNames<T>;\n\n  // Resolve responsive values and generate data attributes\n  const dataAttributes: Record<string, string> = {};\n  const resolvedProps: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (value !== undefined && value !== null) {\n      const resolvedValue = resolveResponsiveValue(value, breakpoint);\n      if (resolvedValue !== undefined) {\n        resolvedProps[key] = resolvedValue;\n        dataAttributes[`data-${key}`] = resolvedValue;\n      }\n    }\n  }\n\n  return {\n    classNames,\n    dataAttributes,\n    resolvedProps, // Also return resolved props for convenience\n  };\n}\n"],"names":[],"mappings":";;;AAyBA,SAAS,sBAAA,CACP,OACA,UACoB,EAAA;AACpB,EAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,IAAI,OAAO,KAAA,KAAU,QAAY,IAAA,KAAA,KAAU,IAAM,EAAA;AAC/C,IAAA,MAAM,QAAQ,WAAY,CAAA,SAAA,CAAU,CAAK,CAAA,KAAA,CAAA,CAAE,OAAO,UAAU,CAAA;AAG5D,IAAA,KAAA,IAAS,CAAI,GAAA,KAAA,EAAO,CAAK,IAAA,CAAA,EAAG,CAAK,EAAA,EAAA;AAC/B,MAAA,IAAI,KAAM,CAAA,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAG,EAAA;AAC5B,QAAA,OAAO,KAAM,CAAA,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA;AAChC;AAIF,IAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,WAAA,CAAY,QAAQ,CAAK,EAAA,EAAA;AAC3C,MAAA,IAAI,KAAM,CAAA,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAG,EAAA;AAC5B,QAAA,OAAO,KAAM,CAAA,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA;AAChC;AACF;AAGF,EAAO,OAAA,KAAA,CAAA;AACT;AAQO,SAAS,SACd,CAAA,aAAA,EACA,KAA6B,GAAA,EAK7B,EAAA;AACA,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,aAAc,EAAA;AACrC,EAAM,MAAA,UAAA,GAAa,oBAAqB,CAAA,aAAa,CAClD,CAAA,UAAA;AAGH,EAAA,MAAM,iBAAyC,EAAC;AAChD,EAAA,MAAM,gBAAwC,EAAC;AAE/C,EAAA,KAAA,MAAW,CAAC,GAAK,EAAA,KAAK,KAAK,MAAO,CAAA,OAAA,CAAQ,KAAK,CAAG,EAAA;AAChD,IAAI,IAAA,KAAA,KAAU,KAAa,CAAA,IAAA,KAAA,KAAU,IAAM,EAAA;AACzC,MAAM,MAAA,aAAA,GAAgB,sBAAuB,CAAA,KAAA,EAAO,UAAU,CAAA;AAC9D,MAAA,IAAI,kBAAkB,KAAW,CAAA,EAAA;AAC/B,QAAA,aAAA,CAAc,GAAG,CAAI,GAAA,aAAA;AACrB,QAAe,cAAA,CAAA,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAI,GAAA,aAAA;AAAA;AAClC;AACF;AAGF,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA;AAAA,GACF;AACF;;;;"}