@backstage/ui 0.6.0 → 0.6.1

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 (133) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/components/Avatar/Avatar.esm.js +29 -0
  3. package/dist/components/Avatar/Avatar.esm.js.map +1 -0
  4. package/dist/components/Box/Box.esm.js +34 -0
  5. package/dist/components/Box/Box.esm.js.map +1 -0
  6. package/dist/components/Box/Box.props.esm.js +7 -0
  7. package/dist/components/Box/Box.props.esm.js.map +1 -0
  8. package/dist/components/Button/Button.esm.js +41 -0
  9. package/dist/components/Button/Button.esm.js.map +1 -0
  10. package/dist/components/ButtonIcon/ButtonIcon.esm.js +37 -0
  11. package/dist/components/ButtonIcon/ButtonIcon.esm.js.map +1 -0
  12. package/dist/components/ButtonLink/ButtonLink.esm.js +42 -0
  13. package/dist/components/ButtonLink/ButtonLink.esm.js.map +1 -0
  14. package/dist/components/Card/Card.esm.js +53 -0
  15. package/dist/components/Card/Card.esm.js.map +1 -0
  16. package/dist/components/Checkbox/Checkbox.esm.js +74 -0
  17. package/dist/components/Checkbox/Checkbox.esm.js.map +1 -0
  18. package/dist/components/Collapsible/Collapsible.esm.js +50 -0
  19. package/dist/components/Collapsible/Collapsible.esm.js.map +1 -0
  20. package/dist/components/Container/Container.esm.js +35 -0
  21. package/dist/components/Container/Container.esm.js.map +1 -0
  22. package/dist/components/DataTable/DataTable.esm.js +26 -0
  23. package/dist/components/DataTable/DataTable.esm.js.map +1 -0
  24. package/dist/components/DataTable/Pagination/DataTablePagination.esm.js +84 -0
  25. package/dist/components/DataTable/Pagination/DataTablePagination.esm.js.map +1 -0
  26. package/dist/components/DataTable/Root/DataTableRoot.esm.js +24 -0
  27. package/dist/components/DataTable/Root/DataTableRoot.esm.js.map +1 -0
  28. package/dist/components/DataTable/Table/DataTableTable.esm.js +64 -0
  29. package/dist/components/DataTable/Table/DataTableTable.esm.js.map +1 -0
  30. package/dist/components/FieldError/FieldError.esm.js +22 -0
  31. package/dist/components/FieldError/FieldError.esm.js.map +1 -0
  32. package/dist/components/FieldLabel/FieldLabel.esm.js +27 -0
  33. package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -0
  34. package/dist/components/Flex/Flex.esm.js +26 -0
  35. package/dist/components/Flex/Flex.esm.js.map +1 -0
  36. package/dist/components/Flex/Flex.props.esm.js +31 -0
  37. package/dist/components/Flex/Flex.props.esm.js.map +1 -0
  38. package/dist/components/Grid/Grid.esm.js +43 -0
  39. package/dist/components/Grid/Grid.esm.js.map +1 -0
  40. package/dist/components/Grid/Grid.props.esm.js +58 -0
  41. package/dist/components/Grid/Grid.props.esm.js.map +1 -0
  42. package/dist/components/Header/Header.esm.js +27 -0
  43. package/dist/components/Header/Header.esm.js.map +1 -0
  44. package/dist/components/Header/HeaderToolbar.esm.js +121 -0
  45. package/dist/components/Header/HeaderToolbar.esm.js.map +1 -0
  46. package/dist/components/HeaderPage/HeaderPage.esm.js +48 -0
  47. package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -0
  48. package/dist/components/Heading/Heading.esm.js +37 -0
  49. package/dist/components/Heading/Heading.esm.js.map +1 -0
  50. package/dist/components/Icon/Icon.esm.js +29 -0
  51. package/dist/components/Icon/Icon.esm.js.map +1 -0
  52. package/dist/components/Icon/context.esm.js +10 -0
  53. package/dist/components/Icon/context.esm.js.map +1 -0
  54. package/dist/components/Icon/icons.esm.js +63 -0
  55. package/dist/components/Icon/icons.esm.js.map +1 -0
  56. package/dist/components/Icon/provider.esm.js +12 -0
  57. package/dist/components/Icon/provider.esm.js.map +1 -0
  58. package/dist/components/Link/Link.esm.js +63 -0
  59. package/dist/components/Link/Link.esm.js.map +1 -0
  60. package/dist/components/Menu/Combobox.esm.js +212 -0
  61. package/dist/components/Menu/Combobox.esm.js.map +1 -0
  62. package/dist/components/Menu/Menu.esm.js +224 -0
  63. package/dist/components/Menu/Menu.esm.js.map +1 -0
  64. package/dist/components/RadioGroup/RadioGroup.esm.js +71 -0
  65. package/dist/components/RadioGroup/RadioGroup.esm.js.map +1 -0
  66. package/dist/components/ScrollArea/ScrollArea.esm.js +63 -0
  67. package/dist/components/ScrollArea/ScrollArea.esm.js.map +1 -0
  68. package/dist/components/SearchField/SearchField.esm.js +107 -0
  69. package/dist/components/SearchField/SearchField.esm.js.map +1 -0
  70. package/dist/components/Select/Select.esm.js +89 -0
  71. package/dist/components/Select/Select.esm.js.map +1 -0
  72. package/dist/components/Select/Select.styles.css.esm.js +7 -0
  73. package/dist/components/Select/Select.styles.css.esm.js.map +1 -0
  74. package/dist/components/Skeleton/Skeleton.esm.js +22 -0
  75. package/dist/components/Skeleton/Skeleton.esm.js.map +1 -0
  76. package/dist/components/Switch/Switch.esm.js +18 -0
  77. package/dist/components/Switch/Switch.esm.js.map +1 -0
  78. package/dist/components/Table/Table.esm.js +68 -0
  79. package/dist/components/Table/Table.esm.js.map +1 -0
  80. package/dist/components/Table/TableCell/TableCell.esm.js +13 -0
  81. package/dist/components/Table/TableCell/TableCell.esm.js.map +1 -0
  82. package/dist/components/Table/TableCellLink/TableCellLink.esm.js +28 -0
  83. package/dist/components/Table/TableCellLink/TableCellLink.esm.js.map +1 -0
  84. package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js +40 -0
  85. package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js.map +1 -0
  86. package/dist/components/Table/TableCellText/TableCellText.esm.js +27 -0
  87. package/dist/components/Table/TableCellText/TableCellText.esm.js.map +1 -0
  88. package/dist/components/Tabs/Tabs.esm.js +127 -0
  89. package/dist/components/Tabs/Tabs.esm.js.map +1 -0
  90. package/dist/components/Tabs/TabsIndicators.esm.js +140 -0
  91. package/dist/components/Tabs/TabsIndicators.esm.js.map +1 -0
  92. package/dist/components/Text/Text.esm.js +39 -0
  93. package/dist/components/Text/Text.esm.js.map +1 -0
  94. package/dist/components/TextField/TextField.esm.js +88 -0
  95. package/dist/components/TextField/TextField.esm.js.map +1 -0
  96. package/dist/components/Tooltip/Tooltip.esm.js +31 -0
  97. package/dist/components/Tooltip/Tooltip.esm.js.map +1 -0
  98. package/dist/hooks/useBreakpoint.esm.js +43 -0
  99. package/dist/hooks/useBreakpoint.esm.js.map +1 -0
  100. package/dist/hooks/useIsomorphicLayoutEffect.esm.js +6 -0
  101. package/dist/hooks/useIsomorphicLayoutEffect.esm.js.map +1 -0
  102. package/dist/hooks/useMediaQuery.esm.js +44 -0
  103. package/dist/hooks/useMediaQuery.esm.js.map +1 -0
  104. package/dist/hooks/useStyles.esm.js +46 -0
  105. package/dist/hooks/useStyles.esm.js.map +1 -0
  106. package/dist/index.d.ts +1398 -0
  107. package/dist/index.esm.js +40 -0
  108. package/dist/index.esm.js.map +1 -0
  109. package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js +29 -0
  110. package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js.map +1 -0
  111. package/dist/props/display.props.esm.js +12 -0
  112. package/dist/props/display.props.esm.js.map +1 -0
  113. package/dist/props/gap-props.esm.js +15 -0
  114. package/dist/props/gap-props.esm.js.map +1 -0
  115. package/dist/props/height.props.esm.js +23 -0
  116. package/dist/props/height.props.esm.js.map +1 -0
  117. package/dist/props/margin.props.esm.js +54 -0
  118. package/dist/props/margin.props.esm.js.map +1 -0
  119. package/dist/props/padding.props.esm.js +54 -0
  120. package/dist/props/padding.props.esm.js.map +1 -0
  121. package/dist/props/position.props.esm.js +18 -0
  122. package/dist/props/position.props.esm.js.map +1 -0
  123. package/dist/props/prop-def.esm.js +4 -0
  124. package/dist/props/prop-def.esm.js.map +1 -0
  125. package/dist/props/spacing.props.esm.js +28 -0
  126. package/dist/props/spacing.props.esm.js.map +1 -0
  127. package/dist/props/width.props.esm.js +23 -0
  128. package/dist/props/width.props.esm.js.map +1 -0
  129. package/dist/utils/componentDefinitions.esm.js +272 -0
  130. package/dist/utils/componentDefinitions.esm.js.map +1 -0
  131. package/dist/utils/extractProps.esm.js +49 -0
  132. package/dist/utils/extractProps.esm.js.map +1 -0
  133. package/package.json +10 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @backstage/ui
2
2
 
3
+ ## 0.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - b9288aa: Fix missing `dist` folder.
8
+
3
9
  ## 0.6.0
4
10
 
5
11
  ### Minor Changes
@@ -0,0 +1,29 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { forwardRef } from 'react';
3
+ import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
4
+ import clsx from 'clsx';
5
+ import { useStyles } from '../../hooks/useStyles.esm.js';
6
+
7
+ const Avatar = forwardRef((props, ref) => {
8
+ const { className, src, name, size = "medium", ...rest } = props;
9
+ const { classNames } = useStyles("Avatar", {
10
+ size
11
+ });
12
+ return /* @__PURE__ */ jsxs(
13
+ Avatar$1.Root,
14
+ {
15
+ ref,
16
+ className: clsx(classNames.root, className),
17
+ "data-size": size,
18
+ ...rest,
19
+ 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
+ ]
23
+ }
24
+ );
25
+ });
26
+ Avatar.displayName = Avatar$1.Root.displayName;
27
+
28
+ export { Avatar };
29
+ //# sourceMappingURL=Avatar.esm.js.map
@@ -0,0 +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,MAAS,GAAA,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAQ,KAAA;AAChB,EAAM,MAAA,EAAE,WAAW,GAAK,EAAA,IAAA,EAAM,OAAO,QAAU,EAAA,GAAG,MAAS,GAAA,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAU,EAAA;AAAA,IACzC;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAACA,QAAgB,CAAA,IAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,WAAW,EAAA,IAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,SAAgB,KAAhB,EAAA,EAAsB,SAAW,EAAA,UAAA,CAAW,OAAO,GAAU,EAAA,CAAA;AAAA,wBAC9D,GAAA,CAACA,QAAgB,CAAA,QAAA,EAAhB,EAAyB,SAAA,EAAW,UAAW,CAAA,QAAA,EAC5C,QAAQ,EAAA,CAAA,IAAA,IAAA,EAAA,EACP,KAAM,CAAA,GAAG,CACT,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,CAAC,CAAC,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CACP,iBAAkB,CAAA,OAAO,CACzB,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACf,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAO,CAAA,WAAA,GAAcA,SAAgB,IAAK,CAAA,WAAA;;;;"}
@@ -0,0 +1,34 @@
1
+ import { forwardRef, createElement } from 'react';
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
+ import { useStyles } from '../../hooks/useStyles.esm.js';
11
+
12
+ 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,
28
+ children
29
+ });
30
+ });
31
+ Box.displayName = "Box";
32
+
33
+ export { Box };
34
+ //# sourceMappingURL=Box.esm.js.map
@@ -0,0 +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,GAAM,GAAA,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAQ,KAAA;AACtE,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,QAAW,GAAA;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,EAAe,GAAA,SAAA,CAAU,KAAK,CAAA;AACtC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAO,OAAA,aAAA,CAAc,KAAM,CAAA,EAAA,IAAM,KAAO,EAAA;AAAA,IACtC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;AAED,GAAA,CAAI,WAAc,GAAA,KAAA;;;;"}
@@ -0,0 +1,7 @@
1
+ const as = ["div", "span"];
2
+ const boxPropDefs = {
3
+ as: { type: "enum", values: as, default: "div" }
4
+ };
5
+
6
+ export { boxPropDefs };
7
+ //# sourceMappingURL=Box.props.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Box.props.esm.js","sources":["../../../src/components/Box/Box.props.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { PropDef, GetPropDefTypes } from '../../props/prop-def';\n\nconst as = ['div', 'span'] as const;\n\n/** @public */\nconst boxPropDefs = {\n as: { type: 'enum', values: as, default: 'div' },\n} satisfies {\n as: PropDef<(typeof as)[number]>;\n};\n\n// Use all of the imported prop defs to ensure that JSDoc works\n/** @public */\ntype BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;\n\nexport { boxPropDefs };\nexport type { BoxOwnProps };\n"],"names":[],"mappings":"AAkBA,MAAM,EAAA,GAAK,CAAC,KAAA,EAAO,MAAM,CAAA;AAGzB,MAAM,WAAc,GAAA;AAAA,EAClB,IAAI,EAAE,IAAA,EAAM,QAAQ,MAAQ,EAAA,EAAA,EAAI,SAAS,KAAM;AACjD;;;;"}
@@ -0,0 +1,41 @@
1
+ import { jsxs } from 'react/jsx-runtime';
2
+ import clsx from 'clsx';
3
+ import { forwardRef } from 'react';
4
+ import { Button as Button$1 } from 'react-aria-components';
5
+ import { useStyles } from '../../hooks/useStyles.esm.js';
6
+
7
+ const Button = forwardRef(
8
+ (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
21
+ });
22
+ return /* @__PURE__ */ jsxs(
23
+ Button$1,
24
+ {
25
+ className: clsx(classNames.root, className),
26
+ ref,
27
+ ...dataAttributes,
28
+ ...rest,
29
+ children: [
30
+ iconStart,
31
+ children,
32
+ iconEnd
33
+ ]
34
+ }
35
+ );
36
+ }
37
+ );
38
+ Button.displayName = "Button";
39
+
40
+ export { Button };
41
+ //# sourceMappingURL=Button.esm.js.map
@@ -0,0 +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 } 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 ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n return (\n <RAButton\n className={clsx(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"],"mappings":";;;;;;AAuBO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAgC,KAAA;AACnD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAA,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,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;AAGN;AAEA,MAAA,CAAO,WAAc,GAAA,QAAA;;;;"}
@@ -0,0 +1,37 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import clsx from 'clsx';
3
+ import { forwardRef } from 'react';
4
+ import { Button } from 'react-aria-components';
5
+ import { useStyles } from '../../hooks/useStyles.esm.js';
6
+
7
+ const ButtonIcon = forwardRef(
8
+ (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
20
+ });
21
+ const { classNames: classNamesButtonIcon } = useStyles("ButtonIcon");
22
+ return /* @__PURE__ */ jsx(
23
+ Button,
24
+ {
25
+ className: clsx(classNames.root, classNamesButtonIcon.root, className),
26
+ ref,
27
+ ...dataAttributes,
28
+ ...rest,
29
+ children: icon
30
+ }
31
+ );
32
+ }
33
+ );
34
+ ButtonIcon.displayName = "ButtonIcon";
35
+
36
+ export { ButtonIcon };
37
+ //# sourceMappingURL=ButtonIcon.esm.js.map
@@ -0,0 +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,GAAgC,KAAA;AACvD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,IAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAqB,EAAA,GAAI,UAAU,YAAY,CAAA;AAEnE,IACE,uBAAA,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,UAAA,CAAW,IAAM,EAAA,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}
@@ -0,0 +1,42 @@
1
+ import { jsxs } from 'react/jsx-runtime';
2
+ import clsx from 'clsx';
3
+ import { forwardRef } from 'react';
4
+ import { Link } from 'react-aria-components';
5
+ import { useStyles } from '../../hooks/useStyles.esm.js';
6
+
7
+ const ButtonLink = forwardRef(
8
+ (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
21
+ });
22
+ const { classNames: classNamesButtonLink } = useStyles("ButtonLink");
23
+ return /* @__PURE__ */ jsxs(
24
+ Link,
25
+ {
26
+ className: clsx(classNames.root, classNamesButtonLink.root, className),
27
+ ref,
28
+ ...dataAttributes,
29
+ ...rest,
30
+ children: [
31
+ iconStart,
32
+ children,
33
+ iconEnd
34
+ ]
35
+ }
36
+ );
37
+ }
38
+ );
39
+ ButtonLink.displayName = "ButtonLink";
40
+
41
+ export { ButtonLink };
42
+ //# sourceMappingURL=ButtonLink.esm.js.map
@@ -0,0 +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,GAAgC,KAAA;AACvD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAqB,EAAA,GAAI,UAAU,YAAY,CAAA;AAEnE,IACE,uBAAA,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,UAAA,CAAW,IAAM,EAAA,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;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}
@@ -0,0 +1,53 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { forwardRef } from 'react';
3
+ import { ScrollArea } from '../ScrollArea/ScrollArea.esm.js';
4
+ import clsx from 'clsx';
5
+ import { useStyles } from '../../hooks/useStyles.esm.js';
6
+
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 });
11
+ });
12
+ forwardRef(
13
+ (props, ref) => {
14
+ const { className, ...rest } = props;
15
+ const { classNames } = useStyles("Card");
16
+ return /* @__PURE__ */ jsx("div", { ref, className: clsx(classNames.header, className), ...rest });
17
+ }
18
+ );
19
+ forwardRef(
20
+ (props, ref) => {
21
+ const { children, className, ...rest } = props;
22
+ const { classNames } = useStyles("Card");
23
+ return /* @__PURE__ */ jsxs(
24
+ ScrollArea.Root,
25
+ {
26
+ 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
+ ]
40
+ }
41
+ );
42
+ }
43
+ );
44
+ forwardRef(
45
+ (props, ref) => {
46
+ const { className, ...rest } = props;
47
+ const { classNames } = useStyles("Card");
48
+ return /* @__PURE__ */ jsx("div", { ref, className: clsx(classNames.footer, className), ...rest });
49
+ }
50
+ );
51
+
52
+ export { Card };
53
+ //# sourceMappingURL=Card.esm.js.map
@@ -0,0 +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,IAAO,GAAA,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAQ,KAAA;AACxE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,IAAM,EAAA,SAAS,CAAI,EAAA,GAAG,IAAM,EAAA,CAAA;AAE1E,CAAC;AAOyB,UAAA;AAAA,EACxB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,IACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,MAAQ,EAAA,SAAS,CAAI,EAAA,GAAG,IAAM,EAAA,CAAA;AAAA;AAG9E;AAOwB,UAAA;AAAA,EACtB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,IACE,uBAAA,IAAA;AAAA,MAAC,UAAW,CAAA,IAAA;AAAA,MAAX;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QACzC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,UAAA,CAAW,UAAX,EAAoB,KAAA,EAAO,EAAE,aAAe,EAAA,oBAAA,IAC1C,QACH,EAAA,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,UAAW,CAAA,SAAA;AAAA,YAAX;AAAA,cACC,WAAY,EAAA,UAAA;AAAA,cACZ,KAAA,EAAO,EAAE,MAAA,EAAQ,WAAY,EAAA;AAAA,cAE7B,QAAA,kBAAA,GAAA,CAAC,UAAW,CAAA,KAAA,EAAX,EAAiB;AAAA;AAAA;AACpB;AAAA;AAAA,KACF;AAAA;AAGN;AAO0B,UAAA;AAAA,EACxB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,IACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,MAAQ,EAAA,SAAS,CAAI,EAAA,GAAG,IAAM,EAAA,CAAA;AAAA;AAG9E;;;;"}
@@ -0,0 +1,74 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { forwardRef } from 'react';
3
+ import { Checkbox as Checkbox$1 } from '@base-ui-components/react/checkbox';
4
+ import '../Icon/context.esm.js';
5
+ import '../Box/Box.esm.js';
6
+ import '../Grid/Grid.esm.js';
7
+ import '../Flex/Flex.esm.js';
8
+ import '../Container/Container.esm.js';
9
+ import '../Text/Text.esm.js';
10
+ import '../Heading/Heading.esm.js';
11
+ import '../Avatar/Avatar.esm.js';
12
+ import '../Button/Button.esm.js';
13
+ import '../Card/Card.esm.js';
14
+ import '../Collapsible/Collapsible.esm.js';
15
+ import '../DataTable/DataTable.esm.js';
16
+ import '../FieldLabel/FieldLabel.esm.js';
17
+ import 'react-aria-components';
18
+ import { useStyles } from '../../hooks/useStyles.esm.js';
19
+ import '@remixicon/react';
20
+ import '../ButtonIcon/ButtonIcon.esm.js';
21
+ import '../Menu/Menu.esm.js';
22
+ import 'motion/react';
23
+ import '../Tabs/Tabs.esm.js';
24
+ import { Icon } from '../Icon/Icon.esm.js';
25
+ import '../ButtonLink/ButtonLink.esm.js';
26
+ import '../RadioGroup/RadioGroup.esm.js';
27
+ import '../Table/Table.esm.js';
28
+ import '../TextField/TextField.esm.js';
29
+ import '../Tooltip/Tooltip.esm.js';
30
+ import '../ScrollArea/ScrollArea.esm.js';
31
+ import '../SearchField/SearchField.esm.js';
32
+ import '../Link/Link.esm.js';
33
+ import '../Select/Select.esm.js';
34
+ import '../Switch/Switch.esm.js';
35
+ import clsx from 'clsx';
36
+
37
+ const Checkbox = forwardRef(
38
+ (props, ref) => {
39
+ const {
40
+ label,
41
+ checked,
42
+ onChange,
43
+ disabled,
44
+ required,
45
+ className,
46
+ name,
47
+ value,
48
+ style
49
+ } = props;
50
+ const { classNames } = useStyles("Checkbox");
51
+ const checkboxElement = /* @__PURE__ */ jsx(
52
+ Checkbox$1.Root,
53
+ {
54
+ ref,
55
+ className: clsx(classNames.root, className),
56
+ checked,
57
+ onCheckedChange: onChange,
58
+ disabled,
59
+ required,
60
+ name,
61
+ value,
62
+ style,
63
+ children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: classNames.indicator, children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12 }) })
64
+ }
65
+ );
66
+ return label ? /* @__PURE__ */ jsxs("label", { className: classNames.label, children: [
67
+ checkboxElement,
68
+ label
69
+ ] }) : checkboxElement;
70
+ }
71
+ );
72
+
73
+ export { Checkbox };
74
+ //# sourceMappingURL=Checkbox.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.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 { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';\nimport { Icon } from '../..';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n (props, ref) => {\n const {\n label,\n checked,\n onChange,\n disabled,\n required,\n className,\n name,\n value,\n style,\n } = props;\n\n const { classNames } = useStyles('Checkbox');\n\n const checkboxElement = (\n <CheckboxPrimitive.Root\n ref={ref}\n className={clsx(classNames.root, className)}\n checked={checked}\n onCheckedChange={onChange}\n disabled={disabled}\n required={required}\n name={name}\n value={value}\n style={style}\n >\n <CheckboxPrimitive.Indicator className={classNames.indicator}>\n <Icon name=\"check\" size={12} />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n\n return label ? (\n <label className={classNames.label}>\n {checkboxElement}\n {label}\n </label>\n ) : (\n checkboxElement\n );\n },\n);\n"],"names":["CheckboxPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,KAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KACE,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,UAAU,CAAA;AAE3C,IAAA,MAAM,eACJ,mBAAA,GAAA;AAAA,MAACA,UAAkB,CAAA,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,OAAA;AAAA,QACA,eAAiB,EAAA,QAAA;AAAA,QACjB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAAA,UAAA,CAAkB,SAAlB,EAAA,EAA4B,SAAW,EAAA,UAAA,CAAW,SACjD,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,IAAA,EAAM,IAAI,CAC/B,EAAA;AAAA;AAAA,KACF;AAGF,IAAA,OAAO,KACL,mBAAA,IAAA,CAAC,OAAM,EAAA,EAAA,SAAA,EAAW,WAAW,KAC1B,EAAA,QAAA,EAAA;AAAA,MAAA,eAAA;AAAA,MACA;AAAA,KAAA,EACH,CAEA,GAAA,eAAA;AAAA;AAGN;;;;"}
@@ -0,0 +1,50 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { forwardRef } from 'react';
3
+ import { Collapsible as Collapsible$1 } from '@base-ui-components/react/collapsible';
4
+ import clsx from 'clsx';
5
+ import { useStyles } from '../../hooks/useStyles.esm.js';
6
+
7
+ const CollapsibleRoot = forwardRef(({ className, ...props }, ref) => {
8
+ const { classNames } = useStyles("Collapsible");
9
+ return /* @__PURE__ */ jsx(
10
+ Collapsible$1.Root,
11
+ {
12
+ ref,
13
+ className: clsx(classNames.root, className),
14
+ ...props
15
+ }
16
+ );
17
+ });
18
+ CollapsibleRoot.displayName = Collapsible$1.Root.displayName;
19
+ const CollapsibleTrigger = forwardRef(({ className, ...props }, ref) => {
20
+ const { classNames } = useStyles("Collapsible");
21
+ return /* @__PURE__ */ jsx(
22
+ Collapsible$1.Trigger,
23
+ {
24
+ ref,
25
+ className: clsx(classNames.trigger, className),
26
+ ...props
27
+ }
28
+ );
29
+ });
30
+ CollapsibleTrigger.displayName = Collapsible$1.Trigger.displayName;
31
+ const CollapsiblePanel = forwardRef(({ className, ...props }, ref) => {
32
+ const { classNames } = useStyles("Collapsible");
33
+ return /* @__PURE__ */ jsx(
34
+ Collapsible$1.Panel,
35
+ {
36
+ ref,
37
+ className: clsx(classNames.panel, className),
38
+ ...props
39
+ }
40
+ );
41
+ });
42
+ CollapsiblePanel.displayName = Collapsible$1.Panel.displayName;
43
+ const Collapsible = {
44
+ Root: CollapsibleRoot,
45
+ Trigger: CollapsibleTrigger,
46
+ Panel: CollapsiblePanel
47
+ };
48
+
49
+ export { Collapsible };
50
+ //# sourceMappingURL=Collapsible.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Collapsible.esm.js","sources":["../../../src/components/Collapsible/Collapsible.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 } from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui-components/react/collapsible';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst CollapsibleRoot = forwardRef<\n React.ElementRef<typeof CollapsiblePrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>\n>(({ className, ...props }, ref) => {\n const { classNames } = useStyles('Collapsible');\n\n return (\n <CollapsiblePrimitive.Root\n ref={ref}\n className={clsx(classNames.root, className)}\n {...props}\n />\n );\n});\nCollapsibleRoot.displayName = CollapsiblePrimitive.Root.displayName;\n\nconst CollapsibleTrigger = forwardRef<\n React.ElementRef<typeof CollapsiblePrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>\n>(({ className, ...props }, ref) => {\n const { classNames } = useStyles('Collapsible');\n\n return (\n <CollapsiblePrimitive.Trigger\n ref={ref}\n className={clsx(classNames.trigger, className)}\n {...props}\n />\n );\n});\nCollapsibleTrigger.displayName = CollapsiblePrimitive.Trigger.displayName;\n\nconst CollapsiblePanel = forwardRef<\n React.ElementRef<typeof CollapsiblePrimitive.Panel>,\n React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Panel>\n>(({ className, ...props }, ref) => {\n const { classNames } = useStyles('Collapsible');\n\n return (\n <CollapsiblePrimitive.Panel\n ref={ref}\n className={clsx(classNames.panel, className)}\n {...props}\n />\n );\n});\nCollapsiblePanel.displayName = CollapsiblePrimitive.Panel.displayName;\n\n/**\n * Collapsible is a component that allows you to collapse and expand content.\n * It is a wrapper around the CollapsiblePrimitive component from base-ui-components.\n *\n * @public\n */\nexport const Collapsible = {\n Root: CollapsibleRoot,\n Trigger: CollapsibleTrigger,\n Panel: CollapsiblePanel,\n};\n"],"names":["CollapsiblePrimitive"],"mappings":";;;;;;AAqBA,MAAM,eAAA,GAAkB,WAGtB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,aAAa,CAAA;AAE9C,EACE,uBAAA,GAAA;AAAA,IAACA,aAAqB,CAAA,IAAA;AAAA,IAArB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MACzC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,eAAgB,CAAA,WAAA,GAAcA,cAAqB,IAAK,CAAA,WAAA;AAExD,MAAM,kBAAA,GAAqB,WAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,aAAa,CAAA;AAE9C,EACE,uBAAA,GAAA;AAAA,IAACA,aAAqB,CAAA,OAAA;AAAA,IAArB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,MAC5C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,kBAAmB,CAAA,WAAA,GAAcA,cAAqB,OAAQ,CAAA,WAAA;AAE9D,MAAM,gBAAA,GAAmB,WAGvB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,aAAa,CAAA;AAE9C,EACE,uBAAA,GAAA;AAAA,IAACA,aAAqB,CAAA,KAAA;AAAA,IAArB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,gBAAiB,CAAA,WAAA,GAAcA,cAAqB,KAAM,CAAA,WAAA;AAQnD,MAAM,WAAc,GAAA;AAAA,EACzB,IAAM,EAAA,eAAA;AAAA,EACN,OAAS,EAAA,kBAAA;AAAA,EACT,KAAO,EAAA;AACT;;;;"}
@@ -0,0 +1,35 @@
1
+ import { forwardRef, createElement } from 'react';
2
+ import clsx from 'clsx';
3
+ import { displayPropDefs } from '../../props/display.props.esm.js';
4
+ import { extractProps } from '../../utils/extractProps.esm.js';
5
+ import { spacingPropDefs } from '../../props/spacing.props.esm.js';
6
+ import { useStyles } from '../../hooks/useStyles.esm.js';
7
+
8
+ const Container = forwardRef(
9
+ (props, ref) => {
10
+ const { children } = props;
11
+ const { classNames } = useStyles("Container");
12
+ const containerSpacingProps = {
13
+ my: spacingPropDefs.my,
14
+ mt: spacingPropDefs.mt,
15
+ mb: spacingPropDefs.mb,
16
+ py: spacingPropDefs.py,
17
+ pt: spacingPropDefs.pt,
18
+ pb: spacingPropDefs.pb
19
+ };
20
+ const propDefs = {
21
+ ...displayPropDefs,
22
+ ...containerSpacingProps
23
+ };
24
+ const { className, style } = extractProps(props, propDefs);
25
+ return createElement("div", {
26
+ ref,
27
+ className: clsx(classNames.root, className),
28
+ style,
29
+ children
30
+ });
31
+ }
32
+ );
33
+
34
+ export { Container };
35
+ //# sourceMappingURL=Container.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Container.esm.js","sources":["../../../src/components/Container/Container.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 { ContainerProps } from './types';\nimport clsx from 'clsx';\nimport { displayPropDefs } from '../../props/display.props';\nimport { extractProps } from '../../utils/extractProps';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n (props, ref) => {\n const { children } = props;\n\n const { classNames } = useStyles('Container');\n\n // Create a subset of spacing props that match the interface\n const containerSpacingProps = {\n my: spacingPropDefs.my,\n mt: spacingPropDefs.mt,\n mb: spacingPropDefs.mb,\n py: spacingPropDefs.py,\n pt: spacingPropDefs.pt,\n pb: spacingPropDefs.pb,\n };\n\n const propDefs = {\n ...displayPropDefs,\n ...containerSpacingProps,\n };\n const { className, style } = extractProps(props, propDefs);\n\n return createElement('div', {\n ref,\n className: clsx(classNames.root, className),\n style,\n children,\n });\n },\n);\n"],"names":[],"mappings":";;;;;;;AAyBO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,WAAW,CAAA;AAG5C,IAAA,MAAM,qBAAwB,GAAA;AAAA,MAC5B,IAAI,eAAgB,CAAA,EAAA;AAAA,MACpB,IAAI,eAAgB,CAAA,EAAA;AAAA,MACpB,IAAI,eAAgB,CAAA,EAAA;AAAA,MACpB,IAAI,eAAgB,CAAA,EAAA;AAAA,MACpB,IAAI,eAAgB,CAAA,EAAA;AAAA,MACpB,IAAI,eAAgB,CAAA;AAAA,KACtB;AAEA,IAAA,MAAM,QAAW,GAAA;AAAA,MACf,GAAG,eAAA;AAAA,MACH,GAAG;AAAA,KACL;AACA,IAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,IAAA,OAAO,cAAc,KAAO,EAAA;AAAA,MAC1B,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,KAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA;AAEL;;;;"}
@@ -0,0 +1,26 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { forwardRef } from 'react';
3
+ import { Table } from '../Table/Table.esm.js';
4
+ import { DataTableRoot } from './Root/DataTableRoot.esm.js';
5
+ import { DataTablePagination } from './Pagination/DataTablePagination.esm.js';
6
+ import { DataTableTable } from './Table/DataTableTable.esm.js';
7
+
8
+ const TableRoot = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Table.Root, { ref, ...props }));
9
+ TableRoot.displayName = Table.Root.displayName;
10
+ const DataTable = {
11
+ Root: DataTableRoot,
12
+ Pagination: DataTablePagination,
13
+ Table: DataTableTable,
14
+ TableRoot,
15
+ TableHeader: Table.Header,
16
+ TableBody: Table.Body,
17
+ TableRow: Table.Row,
18
+ TableCell: Table.Cell,
19
+ TableCellText: Table.CellText,
20
+ TableCellLink: Table.CellLink,
21
+ TableCellProfile: Table.CellProfile,
22
+ TableHead: Table.Head
23
+ };
24
+
25
+ export { DataTable };
26
+ //# sourceMappingURL=DataTable.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTable.esm.js","sources":["../../../src/components/DataTable/DataTable.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 { Table } from '../Table';\nimport { DataTableRoot } from './Root/DataTableRoot';\nimport { DataTablePagination } from './Pagination/DataTablePagination';\nimport { Table as TanstackTable } from '@tanstack/react-table';\nimport { DataTableTable } from './Table/DataTableTable';\n\nconst TableRoot = forwardRef<\n React.ElementRef<typeof Table.Root>,\n React.ComponentPropsWithoutRef<typeof Table.Root>\n>(({ className, ...props }, ref) => <Table.Root ref={ref} {...props} />);\nTableRoot.displayName = Table.Root.displayName;\n\n/**\n * DataTable component for displaying tabular data with pagination\n * @public\n */\nexport const DataTable = {\n Root: DataTableRoot as <TData>(\n props: {\n table: TanstackTable<TData>;\n } & React.HTMLAttributes<HTMLDivElement>,\n ) => JSX.Element,\n Pagination: DataTablePagination,\n Table: DataTableTable,\n TableRoot: TableRoot,\n TableHeader: Table.Header,\n TableBody: Table.Body,\n TableRow: Table.Row,\n TableCell: Table.Cell,\n TableCellText: Table.CellText,\n TableCellLink: Table.CellLink,\n TableCellProfile: Table.CellProfile,\n TableHead: Table.Head,\n};\n"],"names":[],"mappings":";;;;;;;AAuBA,MAAM,YAAY,UAGhB,CAAA,CAAC,EAAE,SAAA,EAAW,GAAG,KAAM,EAAA,EAAG,GAAQ,qBAAA,GAAA,CAAC,MAAM,IAAN,EAAA,EAAW,GAAW,EAAA,GAAG,OAAO,CAAE,CAAA;AACvE,SAAU,CAAA,WAAA,GAAc,MAAM,IAAK,CAAA,WAAA;AAM5B,MAAM,SAAY,GAAA;AAAA,EACvB,IAAM,EAAA,aAAA;AAAA,EAKN,UAAY,EAAA,mBAAA;AAAA,EACZ,KAAO,EAAA,cAAA;AAAA,EACP,SAAA;AAAA,EACA,aAAa,KAAM,CAAA,MAAA;AAAA,EACnB,WAAW,KAAM,CAAA,IAAA;AAAA,EACjB,UAAU,KAAM,CAAA,GAAA;AAAA,EAChB,WAAW,KAAM,CAAA,IAAA;AAAA,EACjB,eAAe,KAAM,CAAA,QAAA;AAAA,EACrB,eAAe,KAAM,CAAA,QAAA;AAAA,EACrB,kBAAkB,KAAM,CAAA,WAAA;AAAA,EACxB,WAAW,KAAM,CAAA;AACnB;;;;"}
@@ -0,0 +1,84 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { forwardRef } from 'react';
3
+ import { Text } from '../../Text/Text.esm.js';
4
+ import { ButtonIcon } from '../../ButtonIcon/ButtonIcon.esm.js';
5
+ import clsx from 'clsx';
6
+ import { Select } from '../../Select/Select.esm.js';
7
+ import { useDataTable } from '../Root/DataTableRoot.esm.js';
8
+ import '@remixicon/react';
9
+ import { Icon } from '../../Icon/Icon.esm.js';
10
+ import '../../Icon/context.esm.js';
11
+
12
+ const DataTablePagination = forwardRef(
13
+ (props, ref) => {
14
+ const { className, ...rest } = props;
15
+ const { table } = useDataTable();
16
+ const pageIndex = table?.getState().pagination.pageIndex;
17
+ const pageSize = table?.getState().pagination.pageSize;
18
+ const rowCount = table?.getRowCount();
19
+ const fromCount = (pageIndex ?? 0) * (pageSize ?? 10) + 1;
20
+ const toCount = Math.min(
21
+ ((pageIndex ?? 0) + 1) * (pageSize ?? 10),
22
+ rowCount
23
+ );
24
+ return /* @__PURE__ */ jsxs(
25
+ "div",
26
+ {
27
+ ref,
28
+ style: { minWidth: table?.getTotalSize() },
29
+ className: clsx("bui-DataTablePagination", className),
30
+ ...rest,
31
+ children: [
32
+ /* @__PURE__ */ jsx("div", { className: "bui-DataTablePagination--left", children: !table.options.manualPagination && /* @__PURE__ */ jsx(
33
+ Select,
34
+ {
35
+ name: "pageSize",
36
+ size: "small",
37
+ placeholder: "Show 10 results",
38
+ options: [
39
+ { label: "Show 5 results", value: "5" },
40
+ { label: "Show 10 results", value: "10" },
41
+ { label: "Show 20 results", value: "20" },
42
+ { label: "Show 30 results", value: "30" },
43
+ { label: "Show 40 results", value: "40" },
44
+ { label: "Show 50 results", value: "50" }
45
+ ],
46
+ selectedKey: pageSize?.toString(),
47
+ onSelectionChange: (value) => {
48
+ table?.setPageSize(Number(value));
49
+ },
50
+ className: "bui-DataTablePagination--select"
51
+ }
52
+ ) }),
53
+ /* @__PURE__ */ jsxs("div", { className: "bui-DataTablePagination--right", children: [
54
+ /* @__PURE__ */ jsx(Text, { variant: "body", children: `${fromCount} - ${toCount} of ${rowCount}` }),
55
+ /* @__PURE__ */ jsx(
56
+ ButtonIcon,
57
+ {
58
+ variant: "secondary",
59
+ size: "small",
60
+ onClick: () => table?.previousPage(),
61
+ isDisabled: !table?.getCanPreviousPage(),
62
+ icon: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" })
63
+ }
64
+ ),
65
+ /* @__PURE__ */ jsx(
66
+ ButtonIcon,
67
+ {
68
+ variant: "secondary",
69
+ size: "small",
70
+ onClick: () => table?.nextPage(),
71
+ isDisabled: !table?.getCanNextPage(),
72
+ icon: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" })
73
+ }
74
+ )
75
+ ] })
76
+ ]
77
+ }
78
+ );
79
+ }
80
+ );
81
+ DataTablePagination.displayName = "DataTablePagination";
82
+
83
+ export { DataTablePagination };
84
+ //# sourceMappingURL=DataTablePagination.esm.js.map