@backstage/ui 0.7.2-next.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (186) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/css/styles.css +6411 -8180
  3. package/dist/components/Avatar/Avatar.esm.js +21 -7
  4. package/dist/components/Avatar/Avatar.esm.js.map +1 -1
  5. package/dist/components/Avatar/Avatar.module.css.esm.js +8 -0
  6. package/dist/components/Avatar/Avatar.module.css.esm.js.map +1 -0
  7. package/dist/components/Box/Box.esm.js +20 -23
  8. package/dist/components/Box/Box.esm.js.map +1 -1
  9. package/dist/components/Box/Box.module.css.esm.js +8 -0
  10. package/dist/components/Box/Box.module.css.esm.js.map +1 -0
  11. package/dist/components/Button/Button.esm.js +10 -19
  12. package/dist/components/Button/Button.esm.js.map +1 -1
  13. package/dist/components/Button/Button.module.css.esm.js +8 -0
  14. package/dist/components/Button/Button.module.css.esm.js.map +1 -0
  15. package/dist/components/ButtonIcon/ButtonIcon.esm.js +14 -12
  16. package/dist/components/ButtonIcon/ButtonIcon.esm.js.map +1 -1
  17. package/dist/components/ButtonIcon/ButtonIcon.module.css.esm.js +8 -0
  18. package/dist/components/ButtonIcon/ButtonIcon.module.css.esm.js.map +1 -0
  19. package/dist/components/ButtonLink/ButtonLink.esm.js +43 -17
  20. package/dist/components/ButtonLink/ButtonLink.esm.js.map +1 -1
  21. package/dist/components/Card/Card.esm.js +46 -28
  22. package/dist/components/Card/Card.esm.js.map +1 -1
  23. package/dist/components/Card/Card.module.css.esm.js +8 -0
  24. package/dist/components/Card/Card.module.css.esm.js.map +1 -0
  25. package/dist/components/Checkbox/Checkbox.esm.js +14 -49
  26. package/dist/components/Checkbox/Checkbox.esm.js.map +1 -1
  27. package/dist/components/Checkbox/Checkbox.module.css.esm.js +8 -0
  28. package/dist/components/Checkbox/Checkbox.module.css.esm.js.map +1 -0
  29. package/dist/components/Collapsible/Collapsible.esm.js +14 -9
  30. package/dist/components/Collapsible/Collapsible.esm.js.map +1 -1
  31. package/dist/components/Collapsible/Collapsible.module.css.esm.js +8 -0
  32. package/dist/components/Collapsible/Collapsible.module.css.esm.js.map +1 -0
  33. package/dist/components/Container/Container.esm.js +22 -25
  34. package/dist/components/Container/Container.esm.js.map +1 -1
  35. package/dist/components/Container/Container.module.css.esm.js +8 -0
  36. package/dist/components/Container/Container.module.css.esm.js.map +1 -0
  37. package/dist/components/Dialog/Dialog.esm.js +103 -0
  38. package/dist/components/Dialog/Dialog.esm.js.map +1 -0
  39. package/dist/components/Dialog/Dialog.module.css.esm.js +8 -0
  40. package/dist/components/Dialog/Dialog.module.css.esm.js.map +1 -0
  41. package/dist/components/FieldError/FieldError.esm.js +5 -2
  42. package/dist/components/FieldError/FieldError.esm.js.map +1 -1
  43. package/dist/components/FieldError/FieldError.module.css.esm.js +8 -0
  44. package/dist/components/FieldError/FieldError.module.css.esm.js.map +1 -0
  45. package/dist/components/FieldLabel/FieldLabel.esm.js +50 -13
  46. package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -1
  47. package/dist/components/FieldLabel/FieldLabel.module.css.esm.js +8 -0
  48. package/dist/components/FieldLabel/FieldLabel.module.css.esm.js.map +1 -0
  49. package/dist/components/Flex/Flex.esm.js +22 -18
  50. package/dist/components/Flex/Flex.esm.js.map +1 -1
  51. package/dist/components/Flex/Flex.module.css.esm.js +8 -0
  52. package/dist/components/Flex/Flex.module.css.esm.js.map +1 -0
  53. package/dist/components/Grid/Grid.esm.js +41 -29
  54. package/dist/components/Grid/Grid.esm.js.map +1 -1
  55. package/dist/components/Grid/Grid.module.css.esm.js +8 -0
  56. package/dist/components/Grid/Grid.module.css.esm.js.map +1 -0
  57. package/dist/components/Header/Header.esm.js +22 -11
  58. package/dist/components/Header/Header.esm.js.map +1 -1
  59. package/dist/components/Header/Header.module.css.esm.js +8 -0
  60. package/dist/components/Header/Header.module.css.esm.js.map +1 -0
  61. package/dist/components/Header/HeaderToolbar.esm.js +71 -7
  62. package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
  63. package/dist/components/HeaderPage/HeaderPage.esm.js +51 -31
  64. package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
  65. package/dist/components/HeaderPage/HeaderPage.module.css.esm.js +8 -0
  66. package/dist/components/HeaderPage/HeaderPage.module.css.esm.js.map +1 -0
  67. package/dist/components/Link/Link.esm.js +26 -15
  68. package/dist/components/Link/Link.esm.js.map +1 -1
  69. package/dist/components/Link/Link.module.css.esm.js +8 -0
  70. package/dist/components/Link/Link.module.css.esm.js.map +1 -0
  71. package/dist/components/Menu/Menu.esm.js +380 -106
  72. package/dist/components/Menu/Menu.esm.js.map +1 -1
  73. package/dist/components/Menu/Menu.module.css.esm.js +8 -0
  74. package/dist/components/Menu/Menu.module.css.esm.js.map +1 -0
  75. package/dist/components/Popover/Popover.module.css.esm.js +8 -0
  76. package/dist/components/Popover/Popover.module.css.esm.js.map +1 -0
  77. package/dist/components/RadioGroup/RadioGroup.esm.js +6 -5
  78. package/dist/components/RadioGroup/RadioGroup.esm.js.map +1 -1
  79. package/dist/components/RadioGroup/RadioGroup.module.css.esm.js +8 -0
  80. package/dist/components/RadioGroup/RadioGroup.module.css.esm.js.map +1 -0
  81. package/dist/components/SearchField/SearchField.esm.js +44 -23
  82. package/dist/components/SearchField/SearchField.esm.js.map +1 -1
  83. package/dist/components/SearchField/SearchField.module.css.esm.js +8 -0
  84. package/dist/components/SearchField/SearchField.module.css.esm.js.map +1 -0
  85. package/dist/components/Select/Select.esm.js +60 -25
  86. package/dist/components/Select/Select.esm.js.map +1 -1
  87. package/dist/components/Select/Select.module.css.esm.js +8 -0
  88. package/dist/components/Select/Select.module.css.esm.js.map +1 -0
  89. package/dist/components/Skeleton/Skeleton.esm.js +12 -4
  90. package/dist/components/Skeleton/Skeleton.esm.js.map +1 -1
  91. package/dist/components/Skeleton/Skeleton.module.css.esm.js +8 -0
  92. package/dist/components/Skeleton/Skeleton.module.css.esm.js.map +1 -0
  93. package/dist/components/Switch/Switch.esm.js +22 -6
  94. package/dist/components/Switch/Switch.esm.js.map +1 -1
  95. package/dist/components/Switch/Switch.module.css.esm.js +8 -0
  96. package/dist/components/Switch/Switch.module.css.esm.js.map +1 -0
  97. package/dist/components/Table/Table.module.css.esm.js +8 -0
  98. package/dist/components/Table/Table.module.css.esm.js.map +1 -0
  99. package/dist/components/Table/components/Cell.esm.js +44 -17
  100. package/dist/components/Table/components/Cell.esm.js.map +1 -1
  101. package/dist/components/Table/components/CellProfile.esm.js +71 -26
  102. package/dist/components/Table/components/CellProfile.esm.js.map +1 -1
  103. package/dist/components/Table/components/Column.esm.js +39 -9
  104. package/dist/components/Table/components/Column.esm.js.map +1 -1
  105. package/dist/components/Table/components/Row.esm.js +19 -11
  106. package/dist/components/Table/components/Row.esm.js.map +1 -1
  107. package/dist/components/Table/components/Table.esm.js +8 -3
  108. package/dist/components/Table/components/Table.esm.js.map +1 -1
  109. package/dist/components/Table/components/TableBody.esm.js +13 -2
  110. package/dist/components/Table/components/TableBody.esm.js.map +1 -1
  111. package/dist/components/Table/components/TableHeader.esm.js +20 -10
  112. package/dist/components/Table/components/TableHeader.esm.js.map +1 -1
  113. package/dist/components/TablePagination/TablePagination.esm.js +80 -63
  114. package/dist/components/TablePagination/TablePagination.esm.js.map +1 -1
  115. package/dist/components/TablePagination/TablePagination.module.css.esm.js +8 -0
  116. package/dist/components/TablePagination/TablePagination.module.css.esm.js.map +1 -0
  117. package/dist/components/Tabs/Tabs.esm.js +64 -32
  118. package/dist/components/Tabs/Tabs.esm.js.map +1 -1
  119. package/dist/components/Tabs/Tabs.module.css.esm.js +8 -0
  120. package/dist/components/Tabs/Tabs.module.css.esm.js.map +1 -0
  121. package/dist/components/Tabs/TabsIndicators.esm.js +14 -2
  122. package/dist/components/Tabs/TabsIndicators.esm.js.map +1 -1
  123. package/dist/components/TagGroup/TagGroup.esm.js +35 -19
  124. package/dist/components/TagGroup/TagGroup.esm.js.map +1 -1
  125. package/dist/components/TagGroup/TagGroup.module.css.esm.js +8 -0
  126. package/dist/components/TagGroup/TagGroup.module.css.esm.js.map +1 -0
  127. package/dist/components/Text/Text.esm.js +10 -19
  128. package/dist/components/Text/Text.esm.js.map +1 -1
  129. package/dist/components/Text/Text.module.css.esm.js +8 -0
  130. package/dist/components/Text/Text.module.css.esm.js.map +1 -0
  131. package/dist/components/TextField/TextField.esm.js +29 -16
  132. package/dist/components/TextField/TextField.esm.js.map +1 -1
  133. package/dist/components/TextField/TextField.module.css.esm.js +8 -0
  134. package/dist/components/TextField/TextField.module.css.esm.js.map +1 -0
  135. package/dist/components/Tooltip/Tooltip.esm.js +19 -7
  136. package/dist/components/Tooltip/Tooltip.esm.js.map +1 -1
  137. package/dist/components/Tooltip/Tooltip.module.css.esm.js +8 -0
  138. package/dist/components/Tooltip/Tooltip.module.css.esm.js.map +1 -0
  139. package/dist/hooks/useStyles.esm.js +65 -9
  140. package/dist/hooks/useStyles.esm.js.map +1 -1
  141. package/dist/index.d.ts +149 -434
  142. package/dist/index.esm.js +1 -9
  143. package/dist/index.esm.js.map +1 -1
  144. package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js +29 -0
  145. package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js.map +1 -0
  146. package/dist/utils/componentDefinitions.esm.js +113 -16
  147. package/dist/utils/componentDefinitions.esm.js.map +1 -1
  148. package/dist/utils/utilityClassMap.esm.js +189 -0
  149. package/dist/utils/utilityClassMap.esm.js.map +1 -0
  150. package/package.json +3 -3
  151. package/dist/components/Box/Box.props.esm.js +0 -7
  152. package/dist/components/Box/Box.props.esm.js.map +0 -1
  153. package/dist/components/Flex/Flex.props.esm.js +0 -31
  154. package/dist/components/Flex/Flex.props.esm.js.map +0 -1
  155. package/dist/components/Grid/Grid.props.esm.js +0 -58
  156. package/dist/components/Grid/Grid.props.esm.js.map +0 -1
  157. package/dist/components/Icon/Icon.esm.js +0 -29
  158. package/dist/components/Icon/Icon.esm.js.map +0 -1
  159. package/dist/components/Icon/context.esm.js +0 -10
  160. package/dist/components/Icon/context.esm.js.map +0 -1
  161. package/dist/components/Icon/icons.esm.js +0 -63
  162. package/dist/components/Icon/icons.esm.js.map +0 -1
  163. package/dist/components/Icon/provider.esm.js +0 -12
  164. package/dist/components/Icon/provider.esm.js.map +0 -1
  165. package/dist/components/ScrollArea/ScrollArea.esm.js +0 -63
  166. package/dist/components/ScrollArea/ScrollArea.esm.js.map +0 -1
  167. package/dist/props/display.props.esm.js +0 -12
  168. package/dist/props/display.props.esm.js.map +0 -1
  169. package/dist/props/gap-props.esm.js +0 -15
  170. package/dist/props/gap-props.esm.js.map +0 -1
  171. package/dist/props/height.props.esm.js +0 -23
  172. package/dist/props/height.props.esm.js.map +0 -1
  173. package/dist/props/margin.props.esm.js +0 -54
  174. package/dist/props/margin.props.esm.js.map +0 -1
  175. package/dist/props/padding.props.esm.js +0 -54
  176. package/dist/props/padding.props.esm.js.map +0 -1
  177. package/dist/props/position.props.esm.js +0 -18
  178. package/dist/props/position.props.esm.js.map +0 -1
  179. package/dist/props/prop-def.esm.js +0 -4
  180. package/dist/props/prop-def.esm.js.map +0 -1
  181. package/dist/props/spacing.props.esm.js +0 -28
  182. package/dist/props/spacing.props.esm.js.map +0 -1
  183. package/dist/props/width.props.esm.js +0 -23
  184. package/dist/props/width.props.esm.js.map +0 -1
  185. package/dist/utils/extractProps.esm.js +0 -49
  186. package/dist/utils/extractProps.esm.js.map +0 -1
@@ -3,22 +3,36 @@ import { forwardRef } from 'react';
3
3
  import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
4
4
  import clsx from 'clsx';
5
5
  import { useStyles } from '../../hooks/useStyles.esm.js';
6
+ import styles from './Avatar.module.css.esm.js';
6
7
 
7
8
  const Avatar = forwardRef((props, ref) => {
8
- const { className, src, name, size = "medium", ...rest } = props;
9
- const { classNames } = useStyles("Avatar", {
10
- size
9
+ const { classNames, dataAttributes, cleanedProps } = useStyles("Avatar", {
10
+ size: "medium",
11
+ ...props
11
12
  });
13
+ const { className, src, name, ...rest } = cleanedProps;
12
14
  return /* @__PURE__ */ jsxs(
13
15
  Avatar$1.Root,
14
16
  {
15
17
  ref,
16
- className: clsx(classNames.root, className),
17
- "data-size": size,
18
+ className: clsx(classNames.root, styles[classNames.root], className),
19
+ ...dataAttributes,
18
20
  ...rest,
19
21
  children: [
20
- /* @__PURE__ */ jsx(Avatar$1.Image, { className: classNames.image, src }),
21
- /* @__PURE__ */ jsx(Avatar$1.Fallback, { className: classNames.fallback, children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 2) })
22
+ /* @__PURE__ */ jsx(
23
+ Avatar$1.Image,
24
+ {
25
+ className: clsx(classNames.image, styles[classNames.image]),
26
+ src
27
+ }
28
+ ),
29
+ /* @__PURE__ */ jsx(
30
+ Avatar$1.Fallback,
31
+ {
32
+ className: clsx(classNames.fallback, styles[classNames.fallback]),
33
+ children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 2)
34
+ }
35
+ )
22
36
  ]
23
37
  }
24
38
  );
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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, ElementRef } from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui-components/react/avatar';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Avatar = forwardRef<\n ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>((props, ref) => {\n const { className, src, name, size = 'medium', ...rest } = props;\n const { classNames } = useStyles('Avatar', {\n size,\n });\n\n return (\n <AvatarPrimitive.Root\n ref={ref}\n className={clsx(classNames.root, className)}\n data-size={size}\n {...rest}\n >\n <AvatarPrimitive.Image className={classNames.image} src={src} />\n <AvatarPrimitive.Fallback className={classNames.fallback}>\n {(name || '')\n .split(' ')\n .map(word => word[0])\n .join('')\n .toLocaleUpperCase('en-US')\n .slice(0, 2)}\n </AvatarPrimitive.Fallback>\n </AvatarPrimitive.Root>\n );\n});\n\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n"],"names":["AvatarPrimitive"],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,WAAW,GAAA,EAAK,IAAA,EAAM,OAAO,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAA,EAAU;AAAA,IACzC;AAAA,GACD,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,SAAgB,KAAA,EAAhB,EAAsB,SAAA,EAAW,UAAA,CAAW,OAAO,GAAA,EAAU,CAAA;AAAA,wBAC9D,GAAA,CAACA,QAAA,CAAgB,QAAA,EAAhB,EAAyB,SAAA,EAAW,UAAA,CAAW,QAAA,EAC5C,QAAA,EAAA,CAAA,IAAA,IAAQ,EAAA,EACP,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,EACf;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAcA,SAAgB,IAAA,CAAK,WAAA;;;;"}
1
+ {"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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, ElementRef } from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui-components/react/avatar';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Avatar.module.css';\n\n/** @public */\nexport const Avatar = forwardRef<\n ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>((props, ref) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles('Avatar', {\n size: 'medium',\n ...props,\n });\n\n const { className, src, name, ...rest } = cleanedProps;\n\n return (\n <AvatarPrimitive.Root\n ref={ref}\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...dataAttributes}\n {...rest}\n >\n <AvatarPrimitive.Image\n className={clsx(classNames.image, styles[classNames.image])}\n src={src}\n />\n <AvatarPrimitive.Fallback\n className={clsx(classNames.fallback, styles[classNames.fallback])}\n >\n {(name || '')\n .split(' ')\n .map(word => word[0])\n .join('')\n .toLocaleUpperCase('en-US')\n .slice(0, 2)}\n </AvatarPrimitive.Fallback>\n </AvatarPrimitive.Root>\n );\n});\n\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n"],"names":["AvatarPrimitive"],"mappings":";;;;;;;AAwBO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,IACvE,IAAA,EAAM,QAAA;AAAA,IACN,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAE1C,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;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,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAACA,QAAA,CAAgB,KAAA;AAAA,UAAhB;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,YAC1D;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAACA,QAAA,CAAgB,QAAA;AAAA,UAAhB;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,YAE9D,mBAAQ,EAAA,EACP,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,UAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,GAAG,CAAC;AAAA;AAAA;AACf;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAcA,SAAgB,IAAA,CAAK,WAAA;;;;"}
@@ -0,0 +1,8 @@
1
+ import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
2
+
3
+ var css_248z = "/*\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\n@layer components {\n .Avatar-module_bui-AvatarRoot__3BSck {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: middle;\n border-radius: 100%;\n user-select: none;\n font-weight: 500;\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-surface-2);\n font-size: 1rem;\n line-height: 1;\n overflow: hidden;\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='small'] {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='medium'] {\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='large'] {\n height: 3rem;\n width: 3rem;\n }\n\n .Avatar-module_bui-AvatarImage__2ehc- {\n object-fit: cover;\n height: 100%;\n width: 100%;\n }\n\n .Avatar-module_bui-AvatarFallback__3qnqR {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 100%;\n width: 100%;\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-regular);\n box-shadow: inset 0 0 0 1px var(--bui-border);\n border-radius: var(--bui-radius-full);\n }\n}\n";
4
+ var styles = {"bui-AvatarRoot":"Avatar-module_bui-AvatarRoot__3BSck","bui-AvatarImage":"Avatar-module_bui-AvatarImage__2ehc-","bui-AvatarFallback":"Avatar-module_bui-AvatarFallback__3qnqR"};
5
+ styleInject(css_248z);
6
+
7
+ export { styles as default };
8
+ //# sourceMappingURL=Avatar.module.css.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Avatar.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,32 +1,29 @@
1
1
  import { forwardRef, createElement } from 'react';
2
2
  import clsx from 'clsx';
3
- import { extractProps } from '../../utils/extractProps.esm.js';
4
- import { spacingPropDefs } from '../../props/spacing.props.esm.js';
5
- import { boxPropDefs } from './Box.props.esm.js';
6
- import { widthPropDefs } from '../../props/width.props.esm.js';
7
- import { heightPropDefs } from '../../props/height.props.esm.js';
8
- import { positionPropDefs } from '../../props/position.props.esm.js';
9
- import { displayPropDefs } from '../../props/display.props.esm.js';
10
3
  import { useStyles } from '../../hooks/useStyles.esm.js';
4
+ import styles from './Box.module.css.esm.js';
11
5
 
12
6
  const Box = forwardRef((props, ref) => {
13
- const { children } = props;
14
- const propDefs = {
15
- ...spacingPropDefs,
16
- ...widthPropDefs,
17
- ...heightPropDefs,
18
- ...positionPropDefs,
19
- ...displayPropDefs,
20
- ...boxPropDefs
21
- };
22
- const { classNames } = useStyles("Box");
23
- const { className, style } = extractProps(props, propDefs);
24
- return createElement(props.as || "div", {
25
- ref,
26
- className: clsx(classNames.root, className),
27
- style,
7
+ const { classNames, utilityClasses, style, cleanedProps } = useStyles(
8
+ "Box",
9
+ props
10
+ );
11
+ const { as = "div", children, className, ...rest } = cleanedProps;
12
+ return createElement(
13
+ as,
14
+ {
15
+ ref,
16
+ className: clsx(
17
+ classNames.root,
18
+ styles[classNames.root],
19
+ utilityClasses,
20
+ className
21
+ ),
22
+ style,
23
+ ...rest
24
+ },
28
25
  children
29
- });
26
+ );
30
27
  });
31
28
  Box.displayName = "Box";
32
29
 
@@ -1 +1 @@
1
- {"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.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 { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport clsx from 'clsx';\nimport { extractProps } from '../../utils/extractProps';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { boxPropDefs } from './Box.props';\nimport { widthPropDefs } from '../../props/width.props';\nimport { heightPropDefs } from '../../props/height.props';\nimport { positionPropDefs } from '../../props/position.props';\nimport { displayPropDefs } from '../../props/display.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n const { children } = props;\n\n const propDefs = {\n ...spacingPropDefs,\n ...widthPropDefs,\n ...heightPropDefs,\n ...positionPropDefs,\n ...displayPropDefs,\n ...boxPropDefs,\n };\n\n const { classNames } = useStyles('Box');\n const { className, style } = extractProps(props, propDefs);\n\n return createElement(props.as || 'div', {\n ref,\n className: clsx(classNames.root, className),\n style,\n children,\n });\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AAErB,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,GAAG,eAAA;AAAA,IACH,GAAG,aAAA;AAAA,IACH,GAAG,cAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,GAAG,eAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,KAAK,CAAA;AACtC,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAM,GAAI,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAA,OAAO,aAAA,CAAc,KAAA,CAAM,EAAA,IAAM,KAAA,EAAO;AAAA,IACtC,GAAA;AAAA,IACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}
1
+ {"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.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 { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Box.module.css';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n const { classNames, utilityClasses, style, cleanedProps } = useStyles(\n 'Box',\n props,\n );\n\n const { as = 'div', children, className, ...rest } = cleanedProps;\n\n return createElement(\n as,\n {\n ref,\n className: clsx(\n classNames.root,\n styles[classNames.root],\n utilityClasses,\n className,\n ),\n style,\n ...rest,\n },\n children,\n );\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;AAuBO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,IAC1D,KAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,EAAE,EAAA,GAAK,KAAA,EAAO,UAAU,SAAA,EAAW,GAAG,MAAK,GAAI,YAAA;AAErD,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB,cAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AACF,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}
@@ -0,0 +1,8 @@
1
+ import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
2
+
3
+ var css_248z = "/*\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\n@layer components {\n .Box-module_bui-Box__2Q5um {\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n }\n}\n";
4
+ var styles = {"bui-Box":"Box-module_bui-Box__2Q5um"};
5
+ styleInject(css_248z);
6
+
7
+ export { styles as default };
8
+ //# sourceMappingURL=Box.module.css.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Box.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,33 +1,25 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { jsxs } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { forwardRef } from 'react';
4
- import { Button as Button$1, Focusable } from 'react-aria-components';
4
+ import { Button as Button$1 } from 'react-aria-components';
5
5
  import { useStyles } from '../../hooks/useStyles.esm.js';
6
+ import stylesButton from './Button.module.css.esm.js';
6
7
 
7
8
  const Button = forwardRef(
8
9
  (props, ref) => {
9
- const {
10
- size = "small",
11
- variant = "primary",
12
- iconStart,
13
- iconEnd,
14
- children,
15
- className,
16
- isDisabled,
17
- ...rest
18
- } = props;
19
- const { classNames, dataAttributes } = useStyles("Button", {
20
- size,
21
- variant
10
+ const { classNames, dataAttributes, cleanedProps } = useStyles("Button", {
11
+ size: "small",
12
+ variant: "primary",
13
+ ...props
22
14
  });
23
- const btn = /* @__PURE__ */ jsxs(
15
+ const { children, className, iconStart, iconEnd, ...rest } = cleanedProps;
16
+ return /* @__PURE__ */ jsxs(
24
17
  Button$1,
25
18
  {
26
- className: clsx(classNames.root, className),
19
+ className: clsx(classNames.root, stylesButton[classNames.root], className),
27
20
  ref,
28
21
  ...dataAttributes,
29
22
  ...rest,
30
- isDisabled: !!isDisabled,
31
23
  children: [
32
24
  iconStart,
33
25
  children,
@@ -35,7 +27,6 @@ const Button = forwardRef(
35
27
  ]
36
28
  }
37
29
  );
38
- return isDisabled ? /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx("span", { role: "button", tabIndex: 0, style: { display: "inline-flex" }, children: btn }) }) : btn;
39
30
  }
40
31
  );
41
32
  Button.displayName = "Button";
@@ -1 +1 @@
1
- {"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton, Focusable } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Button = forwardRef(\n (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n iconStart,\n iconEnd,\n children,\n className,\n isDisabled,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const btn = (\n <RAButton\n className={clsx(classNames.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n isDisabled={!!isDisabled}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RAButton>\n );\n\n return isDisabled ? (\n <Focusable>\n <span role=\"button\" tabIndex={0} style={{ display: 'inline-flex' }}>\n {btn}\n </span>\n </Focusable>\n ) : (\n btn\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,GAAA,mBACJ,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,UAAA,EAAY,CAAC,CAAC,UAAA;AAAA,QAEb,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAGF,IAAA,OAAO,6BACL,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,MAAK,QAAA,EAAS,QAAA,EAAU,CAAA,EAAG,KAAA,EAAO,EAAE,OAAA,EAAS,aAAA,EAAc,EAC9D,QAAA,EAAA,GAAA,EACH,GACF,CAAA,GAEA,GAAA;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
1
+ {"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Button.module.css';\n\n/** @public */\nexport const Button = forwardRef(\n (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n size: 'small',\n variant: 'primary',\n ...props,\n });\n\n const { children, className, iconStart, iconEnd, ...rest } = cleanedProps;\n\n return (\n <RAButton\n className={clsx(classNames.root, styles[classNames.root], className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RAButton>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton","styles"],"mappings":";;;;;;;AAwBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,WAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAE7D,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMC,aAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
@@ -0,0 +1,8 @@
1
+ import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
2
+
3
+ var css_248z = "/*\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\n@layer components {\n .Button-module_bui-Button__1BvMm {\n border: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n gap: var(--bui-space-1_5);\n flex-shrink: 0;\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='primary'] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n\n &:hover {\n background-color: var(--bui-bg-solid-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-solid-pressed);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-disabled='true'] {\n background-color: var(--bui-bg-solid-disabled);\n color: var(--bui-fg-solid-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='secondary'] {\n background-color: var(--bui-bg-surface-1);\n box-shadow: inset 0 0 0 1px var(--bui-border);\n color: var(--bui-fg-primary);\n\n &:hover {\n box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n transition: box-shadow 150ms ease;\n }\n\n &:active {\n box-shadow: inset 0 0 0 1px var(--bui-border-pressed);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'] {\n box-shadow: inset 0 0 0 1px var(--bui-border-disabled);\n color: var(--bui-fg-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='tertiary'] {\n background-color: transparent;\n color: var(--bui-fg-primary);\n\n &:hover {\n background-color: var(--bui-bg-surface-1);\n transition: background-color 200ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-surface-2);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'] {\n background-color: transparent;\n color: var(--bui-fg-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-size='medium'] {\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n height: 2.5rem;\n }\n\n .Button-module_bui-Button__1BvMm[data-size='small'] {\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n height: 2rem;\n }\n\n .Button-module_bui-Button__1BvMm[data-size='small'] svg {\n width: 1rem;\n height: 1rem;\n }\n\n .Button-module_bui-Button__1BvMm[data-size='medium'] svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n}\n";
4
+ var stylesButton = {"bui-Button":"Button-module_bui-Button__1BvMm"};
5
+ styleInject(css_248z);
6
+
7
+ export { stylesButton as default };
8
+ //# sourceMappingURL=Button.module.css.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -3,26 +3,28 @@ import clsx from 'clsx';
3
3
  import { forwardRef } from 'react';
4
4
  import { Button } from 'react-aria-components';
5
5
  import { useStyles } from '../../hooks/useStyles.esm.js';
6
+ import stylesButtonIcon from './ButtonIcon.module.css.esm.js';
7
+ import stylesButton from '../Button/Button.module.css.esm.js';
6
8
 
7
9
  const ButtonIcon = forwardRef(
8
10
  (props, ref) => {
9
- const {
10
- size = "small",
11
- variant = "primary",
12
- icon,
13
- className,
14
- style,
15
- ...rest
16
- } = props;
17
- const { classNames, dataAttributes } = useStyles("Button", {
18
- size,
19
- variant
11
+ const { classNames, dataAttributes, cleanedProps } = useStyles("Button", {
12
+ size: "small",
13
+ variant: "primary",
14
+ ...props
20
15
  });
21
16
  const { classNames: classNamesButtonIcon } = useStyles("ButtonIcon");
17
+ const { className, icon, ...rest } = cleanedProps;
22
18
  return /* @__PURE__ */ jsx(
23
19
  Button,
24
20
  {
25
- className: clsx(classNames.root, classNamesButtonIcon.root, className),
21
+ className: clsx(
22
+ classNames.root,
23
+ classNamesButtonIcon.root,
24
+ stylesButton[classNames.root],
25
+ stylesButtonIcon[classNamesButtonIcon.root],
26
+ className
27
+ ),
26
28
  ref,
27
29
  ...dataAttributes,
28
30
  ...rest,
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n icon,\n className,\n style,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n return (\n <RAButton\n className={clsx(classNames.root, classNamesButtonIcon.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {icon}\n </RAButton>\n );\n },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,IAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
1
+ {"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport stylesButtonIcon from './ButtonIcon.module.css';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n size: 'small',\n variant: 'primary',\n ...props,\n });\n\n const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n const { className, icon, ...rest } = cleanedProps;\n\n return (\n <RAButton\n className={clsx(\n classNames.root,\n classNamesButtonIcon.root,\n stylesButton[classNames.root],\n stylesButtonIcon[classNamesButtonIcon.root],\n className,\n )}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {icon}\n </RAButton>\n );\n },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;;;AAyBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAErC,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B,gBAAA,CAAiB,qBAAqB,IAAI,CAAA;AAAA,UAC1C;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
@@ -0,0 +1,8 @@
1
+ import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
2
+
3
+ var css_248z = "/*\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\n@layer components {\n .ButtonIcon-module_bui-ButtonIcon__1PaYD {\n align-items: center;\n justify-content: center;\n }\n\n .ButtonIcon-module_bui-ButtonIcon__1PaYD[data-size='small'] {\n padding: 0;\n width: 2rem;\n }\n\n .ButtonIcon-module_bui-ButtonIcon__1PaYD[data-size='medium'] {\n padding: 0;\n width: 2.5rem;\n }\n}\n";
4
+ var stylesButtonIcon = {"bui-ButtonIcon":"ButtonIcon-module_bui-ButtonIcon__1PaYD"};
5
+ styleInject(css_248z);
6
+
7
+ export { stylesButtonIcon as default };
8
+ //# sourceMappingURL=ButtonIcon.module.css.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ButtonIcon.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,31 +1,57 @@
1
- import { jsxs } from 'react/jsx-runtime';
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { forwardRef } from 'react';
4
- import { Link } from 'react-aria-components';
4
+ import { Link, RouterProvider } from 'react-aria-components';
5
+ import { useNavigate, useHref } from 'react-router-dom';
5
6
  import { useStyles } from '../../hooks/useStyles.esm.js';
7
+ import { isExternalLink } from '../../utils/isExternalLink.esm.js';
8
+ import stylesButton from '../Button/Button.module.css.esm.js';
6
9
 
7
10
  const ButtonLink = forwardRef(
8
11
  (props, ref) => {
9
- const {
10
- size = "small",
11
- variant = "primary",
12
- iconStart,
13
- iconEnd,
14
- children,
15
- className,
16
- ...rest
17
- } = props;
18
- const { classNames, dataAttributes } = useStyles("Button", {
19
- size,
20
- variant
12
+ const navigate = useNavigate();
13
+ const { classNames, dataAttributes, cleanedProps } = useStyles("Button", {
14
+ size: "small",
15
+ variant: "primary",
16
+ ...props
21
17
  });
22
18
  const { classNames: classNamesButtonLink } = useStyles("ButtonLink");
23
- return /* @__PURE__ */ jsxs(
19
+ const { children, className, iconStart, iconEnd, href, ...rest } = cleanedProps;
20
+ const isExternal = isExternalLink(href);
21
+ if (isExternal) {
22
+ return /* @__PURE__ */ jsxs(
23
+ Link,
24
+ {
25
+ className: clsx(
26
+ classNames.root,
27
+ classNamesButtonLink.root,
28
+ stylesButton[classNames.root],
29
+ className
30
+ ),
31
+ ref,
32
+ ...dataAttributes,
33
+ href,
34
+ ...rest,
35
+ children: [
36
+ iconStart,
37
+ children,
38
+ iconEnd
39
+ ]
40
+ }
41
+ );
42
+ }
43
+ return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsxs(
24
44
  Link,
25
45
  {
26
- className: clsx(classNames.root, classNamesButtonLink.root, className),
46
+ className: clsx(
47
+ classNames.root,
48
+ classNamesButtonLink.root,
49
+ stylesButton[classNames.root],
50
+ className
51
+ ),
27
52
  ref,
28
53
  ...dataAttributes,
54
+ href,
29
55
  ...rest,
30
56
  children: [
31
57
  iconStart,
@@ -33,7 +59,7 @@ const ButtonLink = forwardRef(
33
59
  iconEnd
34
60
  ]
35
61
  }
36
- );
62
+ ) });
37
63
  }
38
64
  );
39
65
  ButtonLink.displayName = "ButtonLink";
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n iconStart,\n iconEnd,\n children,\n className,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n return (\n <RALink\n className={clsx(classNames.root, classNamesButtonLink.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RALink>\n );\n },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,uBACE,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
1
+ {"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink, RouterProvider } from 'react-aria-components';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n const navigate = useNavigate();\n\n const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n size: 'small',\n variant: 'primary',\n ...props,\n });\n\n const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n const { children, className, iconStart, iconEnd, href, ...rest } =\n cleanedProps;\n\n const isExternal = isExternalLink(href);\n\n // If it's an external link, render RALink without RouterProvider\n if (isExternal) {\n return (\n <RALink\n className={clsx(\n classNames.root,\n classNamesButtonLink.root,\n stylesButton[classNames.root],\n className,\n )}\n ref={ref}\n {...dataAttributes}\n href={href}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RALink>\n );\n }\n\n // For internal links, use RouterProvider\n return (\n <RouterProvider navigate={navigate} useHref={useHref}>\n <RALink\n className={clsx(\n classNames.root,\n classNamesButtonLink.root,\n stylesButton[classNames.root],\n className,\n )}\n ref={ref}\n {...dataAttributes}\n href={href}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RALink>\n </RouterProvider>\n );\n },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;;;AA0BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,IAAA,EAAM,GAAG,MAAK,GAC7D,YAAA;AAEF,IAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,uBACE,IAAA;AAAA,QAACA,IAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,IAAA;AAAA,YACX,oBAAA,CAAqB,IAAA;AAAA,YACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,YAC5B;AAAA,WACF;AAAA,UACA,GAAA;AAAA,UACC,GAAG,cAAA;AAAA,UACJ,IAAA;AAAA,UACC,GAAG,IAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA;AAAA,OACH;AAAA,IAEJ;AAGA,IAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
@@ -1,51 +1,69 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
1
+ import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef } from 'react';
3
- import { ScrollArea } from '../ScrollArea/ScrollArea.esm.js';
4
3
  import clsx from 'clsx';
5
4
  import { useStyles } from '../../hooks/useStyles.esm.js';
5
+ import styles from './Card.module.css.esm.js';
6
6
 
7
7
  const Card = forwardRef((props, ref) => {
8
- const { className, ...rest } = props;
9
- const { classNames } = useStyles("Card");
10
- return /* @__PURE__ */ jsx("div", { ref, className: clsx(classNames.root, className), ...rest });
8
+ const { classNames, cleanedProps } = useStyles("Card", props);
9
+ const { className, ...rest } = cleanedProps;
10
+ return /* @__PURE__ */ jsx(
11
+ "div",
12
+ {
13
+ ref,
14
+ className: clsx(classNames.root, styles[classNames.root], className),
15
+ ...rest
16
+ }
17
+ );
11
18
  });
12
19
  const CardHeader = forwardRef(
13
20
  (props, ref) => {
14
- const { className, ...rest } = props;
15
- const { classNames } = useStyles("Card");
16
- return /* @__PURE__ */ jsx("div", { ref, className: clsx(classNames.header, className), ...rest });
21
+ const { classNames, cleanedProps } = useStyles("Card", props);
22
+ const { className, ...rest } = cleanedProps;
23
+ return /* @__PURE__ */ jsx(
24
+ "div",
25
+ {
26
+ ref,
27
+ className: clsx(
28
+ classNames.header,
29
+ styles[classNames.header],
30
+ className
31
+ ),
32
+ ...rest
33
+ }
34
+ );
17
35
  }
18
36
  );
19
37
  const CardBody = forwardRef(
20
38
  (props, ref) => {
21
- const { children, className, ...rest } = props;
22
- const { classNames } = useStyles("Card");
23
- return /* @__PURE__ */ jsxs(
24
- ScrollArea.Root,
39
+ const { classNames, cleanedProps } = useStyles("Card", props);
40
+ const { className, ...rest } = cleanedProps;
41
+ return /* @__PURE__ */ jsx(
42
+ "div",
25
43
  {
26
44
  ref,
27
- className: clsx(classNames.body, className),
28
- ...rest,
29
- children: [
30
- /* @__PURE__ */ jsx(ScrollArea.Viewport, { style: { paddingInline: "var(--bui-space-3)" }, children }),
31
- /* @__PURE__ */ jsx(
32
- ScrollArea.Scrollbar,
33
- {
34
- orientation: "vertical",
35
- style: { margin: "0 0.25rem" },
36
- children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})
37
- }
38
- )
39
- ]
45
+ className: clsx(classNames.body, styles[classNames.body], className),
46
+ ...rest
40
47
  }
41
48
  );
42
49
  }
43
50
  );
44
51
  const CardFooter = forwardRef(
45
52
  (props, ref) => {
46
- const { className, ...rest } = props;
47
- const { classNames } = useStyles("Card");
48
- return /* @__PURE__ */ jsx("div", { ref, className: clsx(classNames.footer, className), ...rest });
53
+ const { classNames, cleanedProps } = useStyles("Card", props);
54
+ const { className, ...rest } = cleanedProps;
55
+ return /* @__PURE__ */ jsx(
56
+ "div",
57
+ {
58
+ ref,
59
+ className: clsx(
60
+ classNames.footer,
61
+ styles[classNames.footer],
62
+ className
63
+ ),
64
+ ...rest
65
+ }
66
+ );
49
67
  }
50
68
  );
51
69
 
@@ -1 +1 @@
1
- {"version":3,"file":"Card.esm.js","sources":["../../../src/components/Card/Card.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 { ScrollArea } from '../ScrollArea';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type {\n CardProps,\n CardHeaderProps,\n CardBodyProps,\n CardFooterProps,\n} from './types';\n\n/**\n * Card component.\n *\n * @public\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n const { className, ...rest } = props;\n const { classNames } = useStyles('Card');\n\n return (\n <div ref={ref} className={clsx(classNames.root, className)} {...rest} />\n );\n});\n\n/**\n * CardHeader component.\n *\n * @public\n */\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n (props, ref) => {\n const { className, ...rest } = props;\n const { classNames } = useStyles('Card');\n\n return (\n <div ref={ref} className={clsx(classNames.header, className)} {...rest} />\n );\n },\n);\n\n/**\n * CardBody component.\n *\n * @public\n */\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n (props, ref) => {\n const { children, className, ...rest } = props;\n const { classNames } = useStyles('Card');\n\n return (\n <ScrollArea.Root\n ref={ref}\n className={clsx(classNames.body, className)}\n {...rest}\n >\n <ScrollArea.Viewport style={{ paddingInline: 'var(--bui-space-3)' }}>\n {children}\n </ScrollArea.Viewport>\n <ScrollArea.Scrollbar\n orientation=\"vertical\"\n style={{ margin: '0 0.25rem' }}\n >\n <ScrollArea.Thumb />\n </ScrollArea.Scrollbar>\n </ScrollArea.Root>\n );\n },\n);\n\n/**\n * CardFooter component.\n *\n * @public\n */\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n (props, ref) => {\n const { className, ...rest } = props;\n const { classNames } = useStyles('Card');\n\n return (\n <div ref={ref} className={clsx(classNames.footer, className)} {...rest} />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;AAgCO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAC/B,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,MAAM,CAAA;AAEvC,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,IAAA,CAAK,WAAW,IAAA,EAAM,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,CAAA;AAE1E,CAAC;AAOM,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,MAAM,CAAA;AAEvC,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,IAAA,CAAK,WAAW,MAAA,EAAQ,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,CAAA;AAAA,EAE5E;AACF;AAOO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACzC,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,MAAM,CAAA;AAEvC,IAAA,uBACE,IAAA;AAAA,MAAC,UAAA,CAAW,IAAA;AAAA,MAAX;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QACzC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,CAAW,UAAX,EAAoB,KAAA,EAAO,EAAE,aAAA,EAAe,oBAAA,IAC1C,QAAA,EACH,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,UAAA,CAAW,SAAA;AAAA,YAAX;AAAA,cACC,WAAA,EAAY,UAAA;AAAA,cACZ,KAAA,EAAO,EAAE,MAAA,EAAQ,WAAA,EAAY;AAAA,cAE7B,QAAA,kBAAA,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB;AAAA;AAAA;AACpB;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAOO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,MAAM,CAAA;AAEvC,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,IAAA,CAAK,WAAW,MAAA,EAAQ,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,CAAA;AAAA,EAE5E;AACF;;;;"}
1
+ {"version":3,"file":"Card.esm.js","sources":["../../../src/components/Card/Card.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 { useStyles } from '../../hooks/useStyles';\nimport type {\n CardProps,\n CardHeaderProps,\n CardBodyProps,\n CardFooterProps,\n} from './types';\nimport styles from './Card.module.css';\n\n/**\n * Card component.\n *\n * @public\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n const { classNames, cleanedProps } = useStyles('Card', props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <div\n ref={ref}\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...rest}\n />\n );\n});\n\n/**\n * CardHeader component.\n *\n * @public\n */\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles('Card', props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <div\n ref={ref}\n className={clsx(\n classNames.header,\n styles[classNames.header],\n className,\n )}\n {...rest}\n />\n );\n },\n);\n\n/**\n * CardBody component.\n *\n * @public\n */\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles('Card', props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <div\n ref={ref}\n className={clsx(classNames.body, styles[classNames.body], className)}\n {...rest}\n />\n );\n },\n);\n\n/**\n * CardFooter component.\n *\n * @public\n */\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles('Card', props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <div\n ref={ref}\n className={clsx(\n classNames.footer,\n styles[classNames.footer],\n className,\n )}\n {...rest}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;AAgCO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,QAAQ,KAAK,CAAA;AAC5D,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AAOM,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,QAAQ,KAAK,CAAA;AAC5D,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,MAAA;AAAA,UACX,MAAA,CAAO,WAAW,MAAM,CAAA;AAAA,UACxB;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAOO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,QAAQ,KAAK,CAAA;AAC5D,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAOO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,QAAQ,KAAK,CAAA;AAC5D,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,MAAA;AAAA,UACX,MAAA,CAAO,WAAW,MAAM,CAAA;AAAA,UACxB;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}
@@ -0,0 +1,8 @@
1
+ import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
2
+
3
+ var css_248z = "/*\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\n@layer components {\n .Card-module_bui-Card__3nX8A {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-3);\n background-color: var(--bui-bg-surface-1);\n border-radius: var(--bui-radius-3);\n padding-block: var(--bui-space-3);\n color: var(--bui-fg-primary);\n border: 1px solid var(--bui-border);\n overflow: hidden;\n min-height: 0;\n width: 100%;\n }\n\n .Card-module_bui-CardBody__GqqG_ {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding-inline: var(--bui-space-3);\n }\n\n .Card-module_bui-CardHeader__gQjh1 {\n padding-inline: var(--bui-space-3);\n }\n\n .Card-module_bui-CardFooter__3t062 {\n padding-inline: var(--bui-space-3);\n }\n}\n";
4
+ var styles = {"bui-Card":"Card-module_bui-Card__3nX8A","bui-CardBody":"Card-module_bui-CardBody__GqqG_","bui-CardHeader":"Card-module_bui-CardHeader__gQjh1","bui-CardFooter":"Card-module_bui-CardFooter__3t062"};
5
+ styleInject(css_248z);
6
+
7
+ export { styles as default };
8
+ //# sourceMappingURL=Card.module.css.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Card.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}