@backstage/ui 0.12.0 → 0.13.0-next.1

package/dist/index.esm.js

@@ -19,7 +19,7 @@ export { ButtonDefinition } from './components/Button/definition.esm.js';
 export { Card, CardBody, CardFooter, CardHeader } from './components/Card/Card.esm.js';
 export { CardBodyDefinition, CardDefinition, CardFooterDefinition, CardHeaderDefinition } from './components/Card/definition.esm.js';
 export { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTrigger } from './components/Dialog/Dialog.esm.js';
-export { DialogDefinition } from './components/Dialog/definition.esm.js';
+export { DialogBodyDefinition, DialogDefinition, DialogFooterDefinition, DialogHeaderDefinition } from './components/Dialog/definition.esm.js';
 export { FieldLabel } from './components/FieldLabel/FieldLabel.esm.js';
 export { FieldLabelDefinition } from './components/FieldLabel/definition.esm.js';
 export { PluginHeader } from './components/PluginHeader/PluginHeader.esm.js';
@@ -33,7 +33,7 @@ export { ButtonLinkDefinition } from './components/ButtonLink/definition.esm.js'
 export { Checkbox } from './components/Checkbox/Checkbox.esm.js';
 export { CheckboxDefinition } from './components/Checkbox/definition.esm.js';
 export { Radio, RadioGroup } from './components/RadioGroup/RadioGroup.esm.js';
-export { RadioGroupDefinition } from './components/RadioGroup/definition.esm.js';
+export { RadioDefinition, RadioGroupDefinition } from './components/RadioGroup/definition.esm.js';
 export { Table } from './components/Table/components/Table.esm.js';
 export { TableRoot } from './components/Table/components/TableRoot.esm.js';
 export { TableHeader } from './components/Table/components/TableHeader.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.12.0",
+  "version": "0.13.0-next.1",
   "backstage": {
     "role": "web-library"
   },
@@ -50,16 +50,18 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/version-bridge": "^1.0.12",
+    "@backstage/version-bridge": "1.0.12",
     "@remixicon/react": "^4.6.0",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
-    "react-aria-components": "^1.14.0"
+    "react-aria-components": "^1.14.0",
+    "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.35.4",
+    "@backstage/cli": "0.36.0-next.1",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/use-sync-external-store": "^0.0.6",
     "eslint-plugin-storybook": "^10.3.0-alpha.1",
     "glob": "^11.0.1",
     "globals": "^15.11.0",

package/dist/components/PluginHeader/PluginHeaderToolbar.esm.js

@@ -1,94 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Link } from 'react-aria-components';
-import { useStyles } from '../../hooks/useStyles.esm.js';
-import { PluginHeaderDefinition } from './definition.esm.js';
-import { useRef } from 'react';
-import { RiShapesLine } from '@remixicon/react';
-import { Text } from '../Text/Text.esm.js';
-import styles from './PluginHeader.module.css.esm.js';
-import clsx from 'clsx';
-
-const PluginHeaderToolbar = (props) => {
-  const { classNames, cleanedProps } = useStyles(PluginHeaderDefinition, props);
-  const { className, icon, title, titleLink, customActions, hasTabs } = cleanedProps;
-  const toolbarWrapperRef = useRef(null);
-  const toolbarContentRef = useRef(null);
-  const toolbarControlsRef = useRef(null);
-  const titleContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(classNames.toolbarIcon, styles[classNames.toolbarIcon]),
-        children: icon || /* @__PURE__ */ jsx(RiShapesLine, {})
-      }
-    ),
-    /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title || "Your plugin" })
-  ] });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        classNames.toolbar,
-        styles[classNames.toolbar],
-        className
-      ),
-      "data-has-tabs": hasTabs,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: clsx(
-            classNames.toolbarWrapper,
-            styles[classNames.toolbarWrapper]
-          ),
-          ref: toolbarWrapperRef,
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: clsx(
-                  classNames.toolbarContent,
-                  styles[classNames.toolbarContent]
-                ),
-                ref: toolbarContentRef,
-                children: /* @__PURE__ */ jsx(Text, { as: "h1", variant: "body-medium", children: titleLink ? /* @__PURE__ */ jsx(
-                  Link,
-                  {
-                    className: clsx(
-                      classNames.toolbarName,
-                      styles[classNames.toolbarName]
-                    ),
-                    href: titleLink,
-                    children: titleContent
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      classNames.toolbarName,
-                      styles[classNames.toolbarName]
-                    ),
-                    children: titleContent
-                  }
-                ) })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: clsx(
-                  classNames.toolbarControls,
-                  styles[classNames.toolbarControls]
-                ),
-                ref: toolbarControlsRef,
-                children: customActions
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-
-export { PluginHeaderToolbar };
-//# sourceMappingURL=PluginHeaderToolbar.esm.js.map

package/dist/components/PluginHeader/PluginHeaderToolbar.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PluginHeaderToolbar.esm.js","sources":["../../../src/components/PluginHeader/PluginHeaderToolbar.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 { Link } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { PluginHeaderDefinition } from './definition';\nimport { useRef } from 'react';\nimport { RiShapesLine } from '@remixicon/react';\nimport type { PluginHeaderToolbarProps } from './types';\nimport { Text } from '../Text';\nimport styles from './PluginHeader.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders the toolbar section of a plugin header.\n *\n * @internal\n */\nexport const PluginHeaderToolbar = (props: PluginHeaderToolbarProps) => {\n  const { classNames, cleanedProps } = useStyles(PluginHeaderDefinition, props);\n  const { className, icon, title, titleLink, customActions, hasTabs } =\n    cleanedProps;\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n  const titleContent = (\n    <>\n      <div\n        className={clsx(classNames.toolbarIcon, styles[classNames.toolbarIcon])}\n      >\n        {icon || <RiShapesLine />}\n      </div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <div\n      className={clsx(\n        classNames.toolbar,\n        styles[classNames.toolbar],\n        className,\n      )}\n      data-has-tabs={hasTabs}\n    >\n      <div\n        className={clsx(\n          classNames.toolbarWrapper,\n          styles[classNames.toolbarWrapper],\n        )}\n        ref={toolbarWrapperRef}\n      >\n        <div\n          className={clsx(\n            classNames.toolbarContent,\n            styles[classNames.toolbarContent],\n          )}\n          ref={toolbarContentRef}\n        >\n          <Text as=\"h1\" variant=\"body-medium\">\n            {titleLink ? (\n              <Link\n                className={clsx(\n                  classNames.toolbarName,\n                  styles[classNames.toolbarName],\n                )}\n                href={titleLink}\n              >\n                {titleContent}\n              </Link>\n            ) : (\n              <div\n                className={clsx(\n                  classNames.toolbarName,\n                  styles[classNames.toolbarName],\n                )}\n              >\n                {titleContent}\n              </div>\n            )}\n          </Text>\n        </div>\n        <div\n          className={clsx(\n            classNames.toolbarControls,\n            styles[classNames.toolbarControls],\n          )}\n          ref={toolbarControlsRef}\n        >\n          {customActions}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,MAAM,mBAAA,GAAsB,CAAC,KAAA,KAAoC;AACtE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,wBAAwB,KAAK,CAAA;AAC5E,EAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,OAAO,SAAA,EAAW,aAAA,EAAe,SAAQ,GAChE,YAAA;AAGF,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,kBAAA,GAAqB,OAAuB,IAAI,CAAA;AAEtD,EAAA,MAAM,+BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,aAAa,MAAA,CAAO,UAAA,CAAW,WAAW,CAAC,CAAA;AAAA,QAErE,QAAA,EAAA,IAAA,wBAAS,YAAA,EAAA,EAAa;AAAA;AAAA,KACzB;AAAA,oBACA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,aAAA,EAAe,mBAAS,aAAA,EAAc;AAAA,GAAA,EACtD,CAAA;AAGF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,OAAA;AAAA,QACX,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,QACzB;AAAA,OACF;AAAA,MACA,eAAA,EAAe,OAAA;AAAA,MAEf,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,cAAA;AAAA,YACX,MAAA,CAAO,WAAW,cAAc;AAAA,WAClC;AAAA,UACA,GAAA,EAAK,iBAAA;AAAA,UAEL,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,cAAA;AAAA,kBACX,MAAA,CAAO,WAAW,cAAc;AAAA,iBAClC;AAAA,gBACA,GAAA,EAAK,iBAAA;AAAA,gBAEL,8BAAC,IAAA,EAAA,EAAK,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,eACnB,QAAA,EAAA,SAAA,mBACC,GAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,WAAA;AAAA,sBACX,MAAA,CAAO,WAAW,WAAW;AAAA,qBAC/B;AAAA,oBACA,IAAA,EAAM,SAAA;AAAA,oBAEL,QAAA,EAAA;AAAA;AAAA,iBACH,mBAEA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,WAAA;AAAA,sBACX,MAAA,CAAO,WAAW,WAAW;AAAA,qBAC/B;AAAA,oBAEC,QAAA,EAAA;AAAA;AAAA,iBACH,EAEJ;AAAA;AAAA,aACF;AAAA,4BACA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,eAAA;AAAA,kBACX,MAAA,CAAO,WAAW,eAAe;AAAA,iBACnC;AAAA,gBACA,GAAA,EAAK,kBAAA;AAAA,gBAEJ,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

package/dist/hooks/useMediaQuery.esm.js

@@ -1,47 +0,0 @@
-import { useState } from 'react';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
-
-const IS_SERVER = typeof window === "undefined" || typeof window.matchMedia === "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(() => {
-    if (IS_SERVER) {
-      return;
-    }
-    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

@@ -1 +0,0 @@
-{"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 =\n  typeof window === 'undefined' || typeof window.matchMedia === '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    if (IS_SERVER) {\n      return;\n    }\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,YACJ,OAAO,MAAA,KAAW,WAAA,IAAe,OAAO,OAAO,UAAA,KAAe,WAAA;AAEzD,SAAS,cACd,KAAA,EACA;AAAA,EACE,YAAA,GAAe,KAAA;AAAA,EACf,mBAAA,GAAsB;AACxB,CAAA,GAA0B,EAAC,EAClB;AACT,EAAA,MAAM,UAAA,GAAa,CAACA,MAAAA,KAA2B;AAC7C,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAO,YAAA;AAAA,IACT;AACA,IAAA,OAAO,MAAA,CAAO,UAAA,CAAWA,MAAK,CAAA,CAAE,OAAA;AAAA,EAClC,CAAA;AAEA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,MAAM;AACpD,IAAA,IAAI,mBAAA,EAAqB;AACvB,MAAA,OAAO,WAAW,KAAK,CAAA;AAAA,IACzB;AACA,IAAA,OAAO,YAAA;AAAA,EACT,CAAC,CAAA;AAGD,EAAA,SAAS,YAAA,GAAe;AACtB,IAAA,UAAA,CAAW,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,EAC9B;AAEA,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,SAAA,EAAW;AACb,MAAA;AAAA,IACF;AACA,IAAA,MAAM,UAAA,GAAa,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAG1C,IAAA,YAAA,EAAa;AAGb,IAAA,IAAI,WAAW,WAAA,EAAa;AAC1B,MAAA,UAAA,CAAW,YAAY,YAAY,CAAA;AAAA,IACrC,CAAA,MAAO;AACL,MAAA,UAAA,CAAW,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAAA,IACpD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,cAAA,EAAgB;AAC7B,QAAA,UAAA,CAAW,eAAe,YAAY,CAAA;AAAA,MACxC,CAAA,MAAO;AACL,QAAA,UAAA,CAAW,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,MACvD;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,OAAO,OAAA;AACT;;;;"}

package/dist/hooks/useStyles.esm.js

@@ -1,53 +0,0 @@
-import { useBreakpoint } from './useBreakpoint.esm.js';
-import { resolveResponsiveValue, processUtilityProps } from './useDefinition/helpers.esm.js';
-
-function useStyles(componentDefinition, props = {}) {
-  const { breakpoint } = useBreakpoint();
-  const classNames = componentDefinition.classNames;
-  const utilityPropNames = ("utilityProps" in componentDefinition ? componentDefinition.utilityProps : []) || [];
-  const dataAttributeNames = "dataAttributes" in componentDefinition ? Object.keys(componentDefinition.dataAttributes || {}) : [];
-  const incomingStyle = props.style || {};
-  const dataAttributes = {};
-  for (const key of dataAttributeNames) {
-    const value = props[key];
-    if (value !== void 0 && value !== null) {
-      if (typeof value === "boolean" || typeof value === "number") {
-        dataAttributes[`data-${key}`] = String(value);
-      } else {
-        const resolvedValue = resolveResponsiveValue(value, breakpoint);
-        if (resolvedValue !== void 0) {
-          dataAttributes[`data-${key}`] = resolvedValue;
-        }
-      }
-    }
-  }
-  const { utilityClasses, utilityStyle: generatedStyle } = processUtilityProps(
-    props,
-    utilityPropNames
-  );
-  const utilityPropsSet = new Set(utilityPropNames);
-  const cleanedPropsBase = Object.keys(props).reduce((acc, key) => {
-    if (!utilityPropsSet.has(key)) {
-      acc[key] = props[key];
-    }
-    return acc;
-  }, {});
-  const mergedStyle = {
-    ...generatedStyle,
-    ...incomingStyle
-  };
-  const cleanedProps = {
-    ...cleanedPropsBase,
-    style: mergedStyle
-  };
-  return {
-    classNames,
-    dataAttributes,
-    utilityClasses,
-    style: mergedStyle,
-    cleanedProps
-  };
-}
-
-export { useStyles };
-//# sourceMappingURL=useStyles.esm.js.map

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

@@ -1 +0,0 @@
-{"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;;;;"}