@backstage/ui 0.12.0 → 0.13.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Tabs/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Tabs\n * @public\n */\nexport const TabsDefinition = {\n  classNames: {\n    tabs: 'bui-Tabs',\n    tabList: 'bui-TabList',\n    tabListWrapper: 'bui-TabListWrapper',\n    tab: 'bui-Tab',\n    tabActive: 'bui-TabActive',\n    tabHovered: 'bui-TabHovered',\n    panel: 'bui-TabPanel',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,UAAA;AAAA,IACN,OAAA,EAAS,aAAA;AAAA,IACT,cAAA,EAAgB,oBAAA;AAAA,IAChB,GAAA,EAAK,SAAA;AAAA,IACL,SAAA,EAAW,eAAA;AAAA,IACX,UAAA,EAAY,gBAAA;AAAA,IACZ,KAAA,EAAO;AAAA;AAEX;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Tabs/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type {\n  TabsOwnProps,\n  TabListOwnProps,\n  TabOwnProps,\n  TabPanelOwnProps,\n  TabsIndicatorsOwnProps,\n} from './types';\nimport styles from './Tabs.module.css';\n\n/**\n * Component definition for Tabs\n * @public\n */\nexport const TabsDefinition = defineComponent<TabsOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Tabs',\n  },\n  propDefs: {\n    className: {},\n    children: {},\n  },\n});\n\n/** @internal */\nexport const TabListDefinition = defineComponent<TabListOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TabListWrapper',\n    tabList: 'bui-TabList',\n  },\n  propDefs: {\n    className: {},\n    children: {},\n  },\n});\n\n/** @internal */\nexport const TabDefinition = defineComponent<TabOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Tab',\n  },\n  propDefs: {\n    className: {},\n    matchStrategy: {},\n    href: {},\n    id: {},\n  },\n});\n\n/** @internal */\nexport const TabPanelDefinition = defineComponent<TabPanelOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TabPanel',\n  },\n  propDefs: {\n    className: {},\n  },\n});\n\n/** @internal */\nexport const TabsIndicatorsDefinition =\n  defineComponent<TabsIndicatorsOwnProps>()({\n    styles,\n    classNames: {\n      root: 'bui-TabActive',\n      hovered: 'bui-TabHovered',\n    },\n    propDefs: {\n      tabRefs: {},\n      tabsRef: {},\n      hoveredKey: {},\n      prevHoveredKey: {},\n    },\n  });\n"],"names":[],"mappings":";;;;;;;;AA8BO,MAAM,cAAA,GAAiB,iBAA8B,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,UAAU;AAAC;AAEf,CAAC;AAGM,MAAM,iBAAA,GAAoB,iBAAiC,CAAE;AAAA,EAClE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,oBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,UAAU;AAAC;AAEf,CAAC;AAGM,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,eAAe,EAAC;AAAA,IAChB,MAAM,EAAC;AAAA,IACP,IAAI;AAAC;AAET,CAAC;AAGM,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;AAGM,MAAM,wBAAA,GACX,iBAAwC,CAAE;AAAA,EACxC,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAS,EAAC;AAAA,IACV,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,gBAAgB;AAAC;AAErB,CAAC;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.esm.js","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { TagProps, TagGroupProps } from './types';\nimport {\n  TagGroup as ReactAriaTagGroup,\n  TagList as ReactAriaTagList,\n  Tag as ReactAriaTag,\n  Button as ReactAriaButton,\n} from 'react-aria-components';\nimport { forwardRef, type PropsWithRef, type ReactNode, type Ref } from 'react';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TagGroupDefinition } from './definition';\nimport { createRoutingRegistration } from '../InternalLinkProvider';\nimport styles from './TagGroup.module.css';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\n\n/**\n * A component that renders a list of tags.\n *\n * @public\n */\nexport const TagGroup = <T extends object>(props: TagGroupProps<T>) => {\n  const { classNames, cleanedProps } = useStyles(TagGroupDefinition, props);\n  const { items, children, renderEmptyState, ...rest } = cleanedProps;\n\n  return (\n    <RoutingProvider>\n      <ReactAriaTagGroup\n        className={clsx(classNames.group, styles[classNames.group])}\n        {...rest}\n      >\n        <ReactAriaTagList\n          className={clsx(classNames.list, styles[classNames.list])}\n          items={items}\n          renderEmptyState={renderEmptyState}\n        >\n          {children}\n        </ReactAriaTagList>\n      </ReactAriaTagGroup>\n    </RoutingProvider>\n  );\n};\n\n/**\n * A component that renders a tag.\n *\n * @public\n */\nexport const Tag = forwardRef(\n  (props: PropsWithRef<TagProps>, ref: Ref<HTMLDivElement>) => {\n    const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {\n      size: 'small',\n      ...props,\n    });\n    const { children, className, icon, size, href, ...rest } = cleanedProps;\n    const textValue = typeof children === 'string' ? children : undefined;\n\n    useRoutingRegistrationEffect(href);\n\n    return (\n      <ReactAriaTag\n        ref={ref}\n        textValue={textValue}\n        className={clsx(classNames.tag, styles[classNames.tag], className)}\n        data-size={size}\n        href={href}\n        {...rest}\n      >\n        {({ allowsRemoving }) => (\n          <>\n            {icon && (\n              <span\n                className={clsx(classNames.tagIcon, styles[classNames.tagIcon])}\n              >\n                {icon}\n              </span>\n            )}\n            {children as ReactNode}\n            {allowsRemoving && (\n              <ReactAriaButton\n                className={clsx(\n                  classNames.tagRemoveButton,\n                  styles[classNames.tagRemoveButton],\n                )}\n                slot=\"remove\"\n              >\n                <RiCloseCircleLine size={16} />\n              </ReactAriaButton>\n            )}\n          </>\n        )}\n      </ReactAriaTag>\n    );\n  },\n);\n"],"names":["ReactAriaTagGroup","ReactAriaTagList","ReactAriaTag","ReactAriaButton"],"mappings":";;;;;;;;;;AA+BA,MAAM,EAAE,eAAA,EAAiB,4BAAA,EAA6B,GACpD,yBAAA,EAA0B;AAOrB,MAAM,QAAA,GAAW,CAAmB,KAAA,KAA4B;AACrE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,oBAAoB,KAAK,CAAA;AACxE,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,gBAAA,EAAkB,GAAG,MAAK,GAAI,YAAA;AAEvD,EAAA,2BACG,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAACA,UAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,MACzD,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAACC,OAAA;AAAA,QAAA;AAAA,UACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,UACxD,KAAA;AAAA,UACA,gBAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF,EACF,CAAA;AAEJ;AAOO,MAAM,GAAA,GAAM,UAAA;AAAA,EACjB,CAAC,OAA+B,GAAA,KAA6B;AAC3D,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,kBAAA,EAAoB;AAAA,MACjE,IAAA,EAAM,OAAA;AAAA,MACN,GAAG;AAAA,KACJ,CAAA;AACD,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAC3D,IAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAE5D,IAAA,4BAAA,CAA6B,IAAI,CAAA;AAEjC,IAAA,uBACE,GAAA;AAAA,MAACC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,GAAA,EAAK,OAAO,UAAA,CAAW,GAAG,GAAG,SAAS,CAAA;AAAA,QACjE,WAAA,EAAW,IAAA;AAAA,QACX,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,cAAA,EAAe,qBACjB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,IAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE7D,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,QAAA;AAAA,UACA,cAAA,oBACC,GAAA;AAAA,YAACC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,eAAA;AAAA,gBACX,MAAA,CAAO,WAAW,eAAe;AAAA,eACnC;AAAA,cACA,IAAA,EAAK,QAAA;AAAA,cAEL,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAC/B,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"TagGroup.esm.js","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { TagProps, TagGroupProps } from './types';\nimport {\n  TagGroup as ReactAriaTagGroup,\n  TagList as ReactAriaTagList,\n  Tag as ReactAriaTag,\n  Button as ReactAriaButton,\n} from 'react-aria-components';\nimport { forwardRef, type ReactNode } from 'react';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TagGroupDefinition, TagDefinition } from './definition';\nimport { createRoutingRegistration } from '../InternalLinkProvider';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\n\n/**\n * A component that renders a list of tags.\n *\n * @public\n */\nexport const TagGroup = <T extends object>(props: TagGroupProps<T>) => {\n  const { ownProps, restProps } = useDefinition(TagGroupDefinition, props);\n  const { classes, items, children, renderEmptyState } = ownProps;\n\n  return (\n    <RoutingProvider>\n      <ReactAriaTagGroup className={classes.root} {...restProps}>\n        <ReactAriaTagList\n          className={classes.list}\n          items={items}\n          renderEmptyState={renderEmptyState}\n        >\n          {children}\n        </ReactAriaTagList>\n      </ReactAriaTagGroup>\n    </RoutingProvider>\n  );\n};\n\n/**\n * A component that renders a tag.\n *\n * @public\n */\nexport const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    TagDefinition,\n    props,\n  );\n  const { classes, children, icon, href } = ownProps;\n  const textValue = typeof children === 'string' ? children : undefined;\n\n  useRoutingRegistrationEffect(href);\n\n  return (\n    <ReactAriaTag\n      ref={ref}\n      textValue={textValue}\n      className={classes.root}\n      href={href}\n      {...dataAttributes}\n      {...restProps}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {icon && <span className={classes.icon}>{icon}</span>}\n          {children as ReactNode}\n          {allowsRemoving && (\n            <ReactAriaButton className={classes.removeButton} slot=\"remove\">\n              <RiCloseCircleLine size={16} />\n            </ReactAriaButton>\n          )}\n        </>\n      )}\n    </ReactAriaTag>\n  );\n});\n"],"names":["ReactAriaTagGroup","ReactAriaTagList","ReactAriaTag","ReactAriaButton"],"mappings":";;;;;;;;AA6BA,MAAM,EAAE,eAAA,EAAiB,4BAAA,EAA6B,GACpD,yBAAA,EAA0B;AAOrB,MAAM,QAAA,GAAW,CAAmB,KAAA,KAA4B;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,oBAAoB,KAAK,CAAA;AACvE,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,QAAA,EAAU,kBAAiB,GAAI,QAAA;AAEvD,EAAA,uBACE,GAAA,CAAC,mBACC,QAAA,kBAAA,GAAA,CAACA,UAAA,EAAA,EAAkB,WAAW,OAAA,CAAQ,IAAA,EAAO,GAAG,SAAA,EAC9C,QAAA,kBAAA,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,KAAA;AAAA,MACA,gBAAA;AAAA,MAEC;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;AAOO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,aAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,IAAA,EAAM,MAAK,GAAI,QAAA;AAC1C,EAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAE5D,EAAA,4BAAA,CAA6B,IAAI,CAAA;AAEjC,EAAA,uBACE,GAAA;AAAA,IAACC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,IAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA,CAAC,EAAE,cAAA,EAAe,qBACjB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,MAAO,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,QAC7C,QAAA;AAAA,QACA,cAAA,oBACC,GAAA,CAACC,MAAA,EAAA,EAAgB,SAAA,EAAW,OAAA,CAAQ,YAAA,EAAc,IAAA,EAAK,QAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,CAAA,EAC/B;AAAA,OAAA,EAEJ;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/TagGroup/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for TagGroup\n * @public\n */\nexport const TagGroupDefinition = {\n  classNames: {\n    group: 'bui-TagGroup',\n    list: 'bui-TagList',\n    tag: 'bui-Tag',\n    tagIcon: 'bui-TagIcon',\n    tagRemoveButton: 'bui-TagRemoveButton',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,cAAA;AAAA,IACP,IAAA,EAAM,aAAA;AAAA,IACN,GAAA,EAAK,SAAA;AAAA,IACL,OAAA,EAAS,aAAA;AAAA,IACT,eAAA,EAAiB;AAAA;AAErB;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/TagGroup/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { TagGroupOwnProps, TagOwnProps } from './types';\nimport styles from './TagGroup.module.css';\n\n/**\n * Component definition for TagGroup\n * @public\n */\nexport const TagGroupDefinition = defineComponent<TagGroupOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TagGroup',\n    list: 'bui-TagList',\n  },\n  propDefs: {\n    items: {},\n    children: {},\n    renderEmptyState: {},\n    className: {},\n  },\n});\n\n/** @internal */\nexport const TagDefinition = defineComponent<TagOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Tag',\n    icon: 'bui-TagIcon',\n    removeButton: 'bui-TagRemoveButton',\n  },\n  propDefs: {\n    icon: {},\n    size: { dataAttribute: true, default: 'small' },\n    href: {},\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,cAAA;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAO,EAAC;AAAA,IACR,UAAU,EAAC;AAAA,IACX,kBAAkB,EAAC;AAAA,IACnB,WAAW;AAAC;AAEhB,CAAC;AAGM,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,SAAA;AAAA,IACN,IAAA,EAAM,aAAA;AAAA,IACN,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAM,EAAC;AAAA,IACP,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,MAAM,EAAC;AAAA,IACP,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Text.module.css';\nimport { TextDefinition } from './definition';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  props: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = props.as || 'span';\n\n  const { classNames, dataAttributes, cleanedProps } = useStyles(\n    TextDefinition,\n    {\n      variant: 'body-medium',\n      weight: 'regular',\n      color: 'primary',\n      ...props,\n    },\n  );\n\n  const { className, truncate, ...restProps } = cleanedProps;\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;;;AAwBA,SAAS,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAY,MAAM,EAAA,IAAM,MAAA;AAE9B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,cAAA;AAAA,IACA;AAAA,MACE,OAAA,EAAS,aAAA;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AAEA,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,WAAU,GAAI,YAAA;AAE9C,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TextDefinition } from './definition';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  props: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    TextDefinition,\n    props,\n  );\n  const { classes, as } = ownProps;\n\n  const Component = as;\n\n  return (\n    <Component\n      ref={ref}\n      className={classes.root}\n      {...dataAttributes}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;AAsBA,SAAS,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,EAAA,EAAG,GAAI,QAAA;AAExB,EAAA,MAAM,SAAA,GAAY,EAAA;AAElB,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Text/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Text\n * @public\n */\nexport const TextDefinition = {\n  classNames: {\n    root: 'bui-Text',\n  },\n  dataAttributes: {\n    variant: ['subtitle', 'body', 'caption', 'label'] as const,\n    weight: ['regular', 'bold'] as const,\n    color: [\n      'primary',\n      'secondary',\n      'danger',\n      'warning',\n      'success',\n      'info',\n    ] as const,\n    truncate: [true, false] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAC,UAAA,EAAY,MAAA,EAAQ,WAAW,OAAO,CAAA;AAAA,IAChD,MAAA,EAAQ,CAAC,SAAA,EAAW,MAAM,CAAA;AAAA,IAC1B,KAAA,EAAO;AAAA,MACL,SAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK;AAAA;AAE1B;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Text/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { TextOwnProps } from './types';\nimport styles from './Text.module.css';\n\n/**\n * Component definition for Text\n * @public\n */\nexport const TextDefinition = defineComponent<TextOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Text',\n  },\n  propDefs: {\n    as: { default: 'span' },\n    variant: { dataAttribute: true, default: 'body-medium' },\n    weight: { dataAttribute: true, default: 'regular' },\n    color: { dataAttribute: true, default: 'primary' },\n    truncate: { dataAttribute: true },\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,cAAA,GAAiB,iBAA8B,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,EAAE,OAAA,EAAS,MAAA,EAAO;AAAA,IACtB,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,aAAA,EAAc;AAAA,IACvD,MAAA,EAAQ,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IAClD,KAAA,EAAO,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACjD,QAAA,EAAU,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAChC,WAAW;AAAC;AAEhB,CAAC;;;;"}

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

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

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

@@ -1 +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';\nimport type { TextFieldProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TextFieldDefinition } from './definition';\nimport styles from './TextField.module.css';\n\n/** @public */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\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, style, cleanedProps } = useStyles(\n      TextFieldDefinition,\n      {\n        size: 'small',\n        ...props,\n      },\n    );\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      ...rest\n    } = cleanedProps;\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, styles[classNames.root], className)}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        style={style}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            classNames.inputWrapper,\n            styles[classNames.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon && (\n            <div\n              className={clsx(\n                classNames.inputIcon,\n                styles[classNames.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon}\n            </div>\n          )}\n          <Input\n            className={clsx(classNames.input, styles[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":";;;;;;;;;;AA2BO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,KAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB;AAAA,KACrB,GAAI,KAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,MAC1D,mBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAGJ,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAACA,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,cAAA;AAAA,QACJ,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiB,cAAA;AAAA,QACjB,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,YAAA;AAAA,gBACX,MAAA,CAAO,WAAW,YAAY;AAAA,eAChC;AAAA,cACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,SAAA;AAAA,sBACX,MAAA,CAAO,WAAW,SAAS;AAAA,qBAC7B;AAAA,oBACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,oBACzD,GAAI,IAAA,IAAQ,EAAE,WAAA,EAAa,IAAA,EAAK;AAAA,oBACjC;AAAA;AAAA;AACF;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;;;;"}
+{"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 { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport type { TextFieldProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TextFieldDefinition } from './definition';\n\n/** @public */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(\n  (props, ref) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      TextFieldDefinition,\n      props,\n    );\n    const { classes, label, icon, secondaryLabel, placeholder, description } =\n      ownProps;\n\n    useEffect(() => {\n      if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n        console.warn(\n          'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, restProps['aria-label'], restProps['aria-labelledby']]);\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (restProps.isRequired ? 'Required' : null);\n\n    return (\n      <AriaTextField\n        className={classes.root}\n        {...dataAttributes}\n        {...restProps}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={classes.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon && (\n            <div\n              className={classes.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon}\n            </div>\n          )}\n          <Input\n            className={classes.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":";;;;;;;;;;AAyBO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,mBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,MAAM,cAAA,EAAgB,WAAA,EAAa,aAAY,GACrE,QAAA;AAEF,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,SAAS,CAAC,SAAA,CAAU,YAAY,CAAA,IAAK,CAAC,SAAA,CAAU,iBAAiB,CAAA,EAAG;AACvE,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,CAAU,YAAY,CAAA,EAAG,SAAA,CAAU,iBAAiB,CAAC,CAAC,CAAA;AAGjE,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,SAAA,CAAU,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAEzD,IAAA,uBACE,IAAA;AAAA,MAACA,WAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QAClB,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAA,CAAQ,YAAA;AAAA,cACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,SAAA;AAAA,oBACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,KAAA;AAAA,oBAClB,GAAI,IAAA,IAAQ,EAAE,WAAA,EAAa,IAAA,EAAK;AAAA,oBACjC;AAAA;AAAA;AACF;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;;;;"}

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

@@ -1,4 +1,13 @@
-const TextFieldDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './TextField.module.css.esm.js';
+
+const TextFieldDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-TextField",
     inputWrapper: "bui-InputWrapper",
@@ -6,12 +15,16 @@ const TextFieldDefinition = {
     inputIcon: "bui-InputIcon",
     inputAction: "bui-InputAction"
   },
-  dataAttributes: {
-    invalid: [true, false],
-    disabled: [true, false],
-    size: ["small", "medium"]
+  propDefs: {
+    size: { dataAttribute: true, default: "small" },
+    className: {},
+    icon: {},
+    placeholder: {},
+    label: {},
+    description: {},
+    secondaryLabel: {}
   }
-};
+});
 
 export { TextFieldDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/TextField/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for TextField\n * @public\n */\nexport const TextFieldDefinition = {\n  classNames: {\n    root: 'bui-TextField',\n    inputWrapper: 'bui-InputWrapper',\n    input: 'bui-Input',\n    inputIcon: 'bui-InputIcon',\n    inputAction: 'bui-InputAction',\n  },\n  dataAttributes: {\n    invalid: [true, false] as const,\n    disabled: [true, false] as const,\n    size: ['small', 'medium'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,mBAAA,GAAsB;AAAA,EACjC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,YAAA,EAAc,kBAAA;AAAA,IACd,KAAA,EAAO,WAAA;AAAA,IACP,SAAA,EAAW,eAAA;AAAA,IACX,WAAA,EAAa;AAAA,GACf;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAC,IAAA,EAAM,KAAK,CAAA;AAAA,IACrB,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK,CAAA;AAAA,IACtB,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/TextField/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { TextFieldOwnProps } from './types';\nimport styles from './TextField.module.css';\n\n/**\n * Component definition for TextField\n * @public\n */\nexport const TextFieldDefinition = defineComponent<TextFieldOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TextField',\n    inputWrapper: 'bui-InputWrapper',\n    input: 'bui-Input',\n    inputIcon: 'bui-InputIcon',\n    inputAction: 'bui-InputAction',\n  },\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    className: {},\n    icon: {},\n    placeholder: {},\n    label: {},\n    description: {},\n    secondaryLabel: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,mBAAA,GAAsB,iBAAmC,CAAE;AAAA,EACtE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,YAAA,EAAc,kBAAA;AAAA,IACd,KAAA,EAAO,WAAA;AAAA,IACP,SAAA,EAAW,eAAA;AAAA,IACX,WAAA,EAAa;AAAA,GACf;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,WAAW,EAAC;AAAA,IACZ,MAAM,EAAC;AAAA,IACP,aAAa,EAAC;AAAA,IACd,OAAO,EAAC;AAAA,IACR,aAAa,EAAC;AAAA,IACd,gBAAgB;AAAC;AAErB,CAAC;;;;"}

package/dist/components/ToggleButton/ToggleButton.esm.js

@@ -1,42 +1,30 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { ToggleButton as ToggleButton$1 } from 'react-aria-components';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { ToggleButtonDefinition } from './definition.esm.js';
-import styles from './ToggleButton.module.css.esm.js';
 
 const ToggleButton = forwardRef(
   (props, ref) => {
-    const { classNames, dataAttributes, cleanedProps } = useStyles(
+    const { ownProps, restProps, dataAttributes } = useDefinition(
       ToggleButtonDefinition,
-      {
-        size: "small",
-        ...props
-      }
+      props
     );
-    const { children, className, iconStart, iconEnd, ...rest } = cleanedProps;
+    const { classes, children, iconStart, iconEnd } = ownProps;
     return /* @__PURE__ */ jsx(
       ToggleButton$1,
       {
-        className: clsx(classNames.root, styles[classNames.root], className),
+        className: classes.root,
         ref,
         ...dataAttributes,
-        ...rest,
+        ...restProps,
         children: (renderProps) => {
           const renderedChildren = typeof children === "function" ? children(renderProps) : children;
-          return /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: clsx(classNames.content, styles[classNames.content]),
-              "data-slot": "content",
-              children: [
-                iconStart,
-                renderedChildren,
-                iconEnd
-              ]
-            }
-          );
+          return /* @__PURE__ */ jsxs("span", { className: classes.content, "data-slot": "content", children: [
+            iconStart,
+            renderedChildren,
+            iconEnd
+          ] });
         }
       }
     );

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.esm.js","sources":["../../../src/components/ToggleButton/ToggleButton.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButton as AriaToggleButton } from 'react-aria-components';\nimport type { ToggleButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonDefinition } from './definition';\nimport styles from './ToggleButton.module.css';\n\n/** @public */\nexport const ToggleButton = forwardRef(\n  (props: ToggleButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles(\n      ToggleButtonDefinition,\n      {\n        size: 'small',\n        ...props,\n      },\n    );\n\n    const { children, className, iconStart, iconEnd, ...rest } = cleanedProps;\n\n    return (\n      <AriaToggleButton\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {renderProps => {\n          // If children is a function, call it with render props; otherwise use children as-is\n          const renderedChildren =\n            typeof children === 'function' ? children(renderProps) : children;\n\n          return (\n            <span\n              className={clsx(classNames.content, styles[classNames.content])}\n              data-slot=\"content\"\n            >\n              {iconStart}\n              {renderedChildren}\n              {iconEnd}\n            </span>\n          );\n        }}\n      </AriaToggleButton>\n    );\n  },\n);\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["AriaToggleButton"],"mappings":";;;;;;;;AAyBO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAAgC;AACzD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,sBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,WAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAE7D,IAAA,uBACE,GAAA;AAAA,MAACA,cAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAA,WAAA,KAAe;AAEd,UAAA,MAAM,mBACJ,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE3D,UAAA,uBACE,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAC9D,WAAA,EAAU,SAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,SAAA;AAAA,gBACA,gBAAA;AAAA,gBACA;AAAA;AAAA;AAAA,WACH;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}
+{"version":3,"file":"ToggleButton.esm.js","sources":["../../../src/components/ToggleButton/ToggleButton.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 { forwardRef, Ref } from 'react';\nimport { ToggleButton as AriaToggleButton } from 'react-aria-components';\nimport type { ToggleButtonProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ToggleButtonDefinition } from './definition';\n\n/** @public */\nexport const ToggleButton = forwardRef(\n  (props: ToggleButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      ToggleButtonDefinition,\n      props,\n    );\n    const { classes, children, iconStart, iconEnd } = ownProps;\n\n    return (\n      <AriaToggleButton\n        className={classes.root}\n        ref={ref}\n        {...dataAttributes}\n        {...restProps}\n      >\n        {renderProps => {\n          // If children is a function, call it with render props; otherwise use children as-is\n          const renderedChildren =\n            typeof children === 'function' ? children(renderProps) : children;\n\n          return (\n            <span className={classes.content} data-slot=\"content\">\n              {iconStart}\n              {renderedChildren}\n              {iconEnd}\n            </span>\n          );\n        }}\n      </AriaToggleButton>\n    );\n  },\n);\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["AriaToggleButton"],"mappings":";;;;;;AAuBO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAAgC;AACzD,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,sBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,SAAA,EAAW,SAAQ,GAAI,QAAA;AAElD,IAAA,uBACE,GAAA;AAAA,MAACA,cAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEH,QAAA,EAAA,CAAA,WAAA,KAAe;AAEd,UAAA,MAAM,mBACJ,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE3D,UAAA,4BACG,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,OAAA,EAAS,aAAU,SAAA,EACzC,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,YACA,gBAAA;AAAA,YACA;AAAA,WAAA,EACH,CAAA;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}

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

@@ -1,12 +1,25 @@
-const ToggleButtonDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './ToggleButton.module.css.esm.js';
+
+const ToggleButtonDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-ToggleButton",
     content: "bui-ToggleButtonContent"
   },
-  dataAttributes: {
-    size: ["small", "medium"]
+  propDefs: {
+    size: { dataAttribute: true, default: "small" },
+    iconStart: {},
+    iconEnd: {},
+    children: {},
+    className: {}
   }
-};
+});
 
 export { ToggleButtonDefinition };
 //# sourceMappingURL=definition.esm.js.map