@backstage/ui 0.6.0 → 0.7.0-next.0

package/dist/components/Checkbox/Checkbox.esm.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Checkbox as Checkbox$1 } from '@base-ui-components/react/checkbox';
+import '../Icon/context.esm.js';
+import '../Box/Box.esm.js';
+import '../Grid/Grid.esm.js';
+import '../Flex/Flex.esm.js';
+import '../Container/Container.esm.js';
+import '../Avatar/Avatar.esm.js';
+import '../Button/Button.esm.js';
+import '../Card/Card.esm.js';
+import '../Collapsible/Collapsible.esm.js';
+import '../DataTable/DataTable.esm.js';
+import '../FieldLabel/FieldLabel.esm.js';
+import 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import '@remixicon/react';
+import '../ButtonIcon/ButtonIcon.esm.js';
+import '../Menu/Menu.esm.js';
+import '../Text/Text.esm.js';
+import 'motion/react';
+import 'react-router-dom';
+import '../Tabs/Tabs.esm.js';
+import { Icon } from '../Icon/Icon.esm.js';
+import '../ButtonLink/ButtonLink.esm.js';
+import '../RadioGroup/RadioGroup.esm.js';
+import '../Table/Table.esm.js';
+import '../TextField/TextField.esm.js';
+import '../Tooltip/Tooltip.esm.js';
+import '../ScrollArea/ScrollArea.esm.js';
+import '../SearchField/SearchField.esm.js';
+import '../Link/Link.esm.js';
+import '../Select/Select.esm.js';
+import '../Switch/Switch.esm.js';
+import clsx from 'clsx';
+
+const Checkbox = forwardRef(
+  (props, ref) => {
+    const {
+      label,
+      checked,
+      onChange,
+      disabled,
+      required,
+      className,
+      name,
+      value,
+      style
+    } = props;
+    const { classNames } = useStyles("Checkbox");
+    const checkboxElement = /* @__PURE__ */ jsx(
+      Checkbox$1.Root,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        checked,
+        onCheckedChange: onChange,
+        disabled,
+        required,
+        name,
+        value,
+        style,
+        children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: classNames.indicator, children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12 }) })
+      }
+    );
+    return label ? /* @__PURE__ */ jsxs("label", { className: classNames.label, children: [
+      checkboxElement,
+      label
+    ] }) : checkboxElement;
+  }
+);
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.esm.js.map

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

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

package/dist/components/Collapsible/Collapsible.esm.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Collapsible as Collapsible$1 } from '@base-ui-components/react/collapsible';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const CollapsibleRoot = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Collapsible");
+  return /* @__PURE__ */ jsx(
+    Collapsible$1.Root,
+    {
+      ref,
+      className: clsx(classNames.root, className),
+      ...props
+    }
+  );
+});
+CollapsibleRoot.displayName = Collapsible$1.Root.displayName;
+const CollapsibleTrigger = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Collapsible");
+  return /* @__PURE__ */ jsx(
+    Collapsible$1.Trigger,
+    {
+      ref,
+      className: clsx(classNames.trigger, className),
+      ...props
+    }
+  );
+});
+CollapsibleTrigger.displayName = Collapsible$1.Trigger.displayName;
+const CollapsiblePanel = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Collapsible");
+  return /* @__PURE__ */ jsx(
+    Collapsible$1.Panel,
+    {
+      ref,
+      className: clsx(classNames.panel, className),
+      ...props
+    }
+  );
+});
+CollapsiblePanel.displayName = Collapsible$1.Panel.displayName;
+const Collapsible = {
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger,
+  Panel: CollapsiblePanel
+};
+
+export { Collapsible };
+//# sourceMappingURL=Collapsible.esm.js.map

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

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

package/dist/components/Container/Container.esm.js

@@ -0,0 +1,35 @@
+import { forwardRef, createElement } from 'react';
+import clsx from 'clsx';
+import { displayPropDefs } from '../../props/display.props.esm.js';
+import { extractProps } from '../../utils/extractProps.esm.js';
+import { spacingPropDefs } from '../../props/spacing.props.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const Container = forwardRef(
+  (props, ref) => {
+    const { children } = props;
+    const { classNames } = useStyles("Container");
+    const containerSpacingProps = {
+      my: spacingPropDefs.my,
+      mt: spacingPropDefs.mt,
+      mb: spacingPropDefs.mb,
+      py: spacingPropDefs.py,
+      pt: spacingPropDefs.pt,
+      pb: spacingPropDefs.pb
+    };
+    const propDefs = {
+      ...displayPropDefs,
+      ...containerSpacingProps
+    };
+    const { className, style } = extractProps(props, propDefs);
+    return createElement("div", {
+      ref,
+      className: clsx(classNames.root, className),
+      style,
+      children
+    });
+  }
+);
+
+export { Container };
+//# sourceMappingURL=Container.esm.js.map

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

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

package/dist/components/DataTable/DataTable.esm.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Table } from '../Table/Table.esm.js';
+import { DataTableRoot } from './Root/DataTableRoot.esm.js';
+import { DataTablePagination } from './Pagination/DataTablePagination.esm.js';
+import { DataTableTable } from './Table/DataTableTable.esm.js';
+
+const TableRoot = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Table.Root, { ref, ...props }));
+TableRoot.displayName = Table.Root.displayName;
+const DataTable = {
+  Root: DataTableRoot,
+  Pagination: DataTablePagination,
+  Table: DataTableTable,
+  TableRoot,
+  TableHeader: Table.Header,
+  TableBody: Table.Body,
+  TableRow: Table.Row,
+  TableCell: Table.Cell,
+  TableCellText: Table.CellText,
+  TableCellLink: Table.CellLink,
+  TableCellProfile: Table.CellProfile,
+  TableHead: Table.Head
+};
+
+export { DataTable };
+//# sourceMappingURL=DataTable.esm.js.map

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

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

package/dist/components/DataTable/Pagination/DataTablePagination.esm.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Text } from '../../Text/Text.esm.js';
+import { ButtonIcon } from '../../ButtonIcon/ButtonIcon.esm.js';
+import clsx from 'clsx';
+import { Select } from '../../Select/Select.esm.js';
+import { useDataTable } from '../Root/DataTableRoot.esm.js';
+import '@remixicon/react';
+import { Icon } from '../../Icon/Icon.esm.js';
+import '../../Icon/context.esm.js';
+
+const DataTablePagination = forwardRef(
+  (props, ref) => {
+    const { className, ...rest } = props;
+    const { table } = useDataTable();
+    const pageIndex = table?.getState().pagination.pageIndex;
+    const pageSize = table?.getState().pagination.pageSize;
+    const rowCount = table?.getRowCount();
+    const fromCount = (pageIndex ?? 0) * (pageSize ?? 10) + 1;
+    const toCount = Math.min(
+      ((pageIndex ?? 0) + 1) * (pageSize ?? 10),
+      rowCount
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        style: { minWidth: table?.getTotalSize() },
+        className: clsx("bui-DataTablePagination", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bui-DataTablePagination--left", children: !table.options.manualPagination && /* @__PURE__ */ jsx(
+            Select,
+            {
+              name: "pageSize",
+              size: "small",
+              placeholder: "Show 10 results",
+              options: [
+                { label: "Show 5 results", value: "5" },
+                { label: "Show 10 results", value: "10" },
+                { label: "Show 20 results", value: "20" },
+                { label: "Show 30 results", value: "30" },
+                { label: "Show 40 results", value: "40" },
+                { label: "Show 50 results", value: "50" }
+              ],
+              selectedKey: pageSize?.toString(),
+              onSelectionChange: (value) => {
+                table?.setPageSize(Number(value));
+              },
+              className: "bui-DataTablePagination--select"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "bui-DataTablePagination--right", children: [
+            /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: `${fromCount} - ${toCount} of ${rowCount}` }),
+            /* @__PURE__ */ jsx(
+              ButtonIcon,
+              {
+                variant: "secondary",
+                size: "small",
+                onClick: () => table?.previousPage(),
+                isDisabled: !table?.getCanPreviousPage(),
+                icon: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ButtonIcon,
+              {
+                variant: "secondary",
+                size: "small",
+                onClick: () => table?.nextPage(),
+                isDisabled: !table?.getCanNextPage(),
+                icon: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+DataTablePagination.displayName = "DataTablePagination";
+
+export { DataTablePagination };
+//# sourceMappingURL=DataTablePagination.esm.js.map

package/dist/components/DataTable/Pagination/DataTablePagination.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.esm.js","sources":["../../../../src/components/DataTable/Pagination/DataTablePagination.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 { Text } from '../../Text';\nimport { DataTablePaginationProps } from './types';\nimport { ButtonIcon } from '../../ButtonIcon';\nimport clsx from 'clsx';\nimport { Select } from '../../Select';\nimport { useDataTable } from '../Root/DataTableRoot';\nimport { Icon } from '../../Icon';\n\n/** @public */\nconst DataTablePagination = forwardRef(\n  (\n    props: DataTablePaginationProps,\n    ref: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const { className, ...rest } = props;\n    const { table } = useDataTable();\n    const pageIndex = table?.getState().pagination.pageIndex;\n    const pageSize = table?.getState().pagination.pageSize;\n    const rowCount = table?.getRowCount();\n    const fromCount = (pageIndex ?? 0) * (pageSize ?? 10) + 1;\n    const toCount = Math.min(\n      ((pageIndex ?? 0) + 1) * (pageSize ?? 10),\n      rowCount,\n    );\n\n    return (\n      <div\n        ref={ref}\n        style={{ minWidth: table?.getTotalSize() }}\n        className={clsx('bui-DataTablePagination', className)}\n        {...rest}\n      >\n        <div className=\"bui-DataTablePagination--left\">\n          {!table.options.manualPagination && (\n            <Select\n              name=\"pageSize\"\n              size=\"small\"\n              placeholder=\"Show 10 results\"\n              options={[\n                { label: 'Show 5 results', value: '5' },\n                { label: 'Show 10 results', value: '10' },\n                { label: 'Show 20 results', value: '20' },\n                { label: 'Show 30 results', value: '30' },\n                { label: 'Show 40 results', value: '40' },\n                { label: 'Show 50 results', value: '50' },\n              ]}\n              selectedKey={pageSize?.toString()}\n              onSelectionChange={value => {\n                table?.setPageSize(Number(value));\n              }}\n              className=\"bui-DataTablePagination--select\"\n            />\n          )}\n        </div>\n        <div className=\"bui-DataTablePagination--right\">\n          <Text variant=\"body-medium\">{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n          <ButtonIcon\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => table?.previousPage()}\n            isDisabled={!table?.getCanPreviousPage()}\n            icon={<Icon name=\"chevron-left\" />}\n          />\n          <ButtonIcon\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => table?.nextPage()}\n            isDisabled={!table?.getCanNextPage()}\n            icon={<Icon name=\"chevron-right\" />}\n          />\n        </div>\n      </div>\n    );\n  },\n);\n\nDataTablePagination.displayName = 'DataTablePagination';\n\nexport { DataTablePagination };\n"],"names":[],"mappings":"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"}

package/dist/components/DataTable/Root/DataTableRoot.esm.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useContext } from 'react';
+import clsx from 'clsx';
+
+const DataTableContext = createContext(
+  null
+);
+const DataTableRoot = forwardRef(
+  (props, ref) => {
+    const { className, table, ...rest } = props;
+    return /* @__PURE__ */ jsx(DataTableContext.Provider, { value: { table }, children: /* @__PURE__ */ jsx("div", { ref, className: clsx("bui-DataTable", className), ...rest }) });
+  }
+);
+DataTableRoot.displayName = "DataTableRoot";
+function useDataTable() {
+  const context = useContext(DataTableContext);
+  if (!context) {
+    throw new Error("useDataTable must be used within a DataTableRoot");
+  }
+  return context;
+}
+
+export { DataTableContext, DataTableRoot, useDataTable };
+//# sourceMappingURL=DataTableRoot.esm.js.map

package/dist/components/DataTable/Root/DataTableRoot.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableRoot.esm.js","sources":["../../../../src/components/DataTable/Root/DataTableRoot.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, createContext, useContext } from 'react';\nimport clsx from 'clsx';\nimport { DataTableRootProps } from './types';\nimport { Table } from '@tanstack/react-table';\n\ntype DataTableContextType<TData> = {\n  table: Table<TData>;\n};\n\n/** @public */\nexport const DataTableContext = createContext<DataTableContextType<any> | null>(\n  null,\n);\n\n/** @public */\nconst DataTableRoot = forwardRef(\n  <TData,>(\n    props: DataTableRootProps<TData>,\n    ref: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const { className, table, ...rest } = props;\n\n    return (\n      <DataTableContext.Provider value={{ table }}>\n        <div ref={ref} className={clsx('bui-DataTable', className)} {...rest} />\n      </DataTableContext.Provider>\n    );\n  },\n);\n\nDataTableRoot.displayName = 'DataTableRoot';\n\nexport { DataTableRoot };\n\n/** @public */\nexport function useDataTable<TData>() {\n  const context = useContext(DataTableContext);\n  if (!context) {\n    throw new Error('useDataTable must be used within a DataTableRoot');\n  }\n  return context as DataTableContextType<TData>;\n}\n"],"names":[],"mappings":";;;;AA0BO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B;AACF;AAGA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CACE,OACA,GACG,KAAA;AACH,IAAA,MAAM,EAAE,SAAA,EAAW,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEtC,IAAA,2BACG,gBAAiB,CAAA,QAAA,EAAjB,EAA0B,KAAO,EAAA,EAAE,OAClC,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAU,WAAW,IAAK,CAAA,eAAA,EAAiB,SAAS,CAAI,EAAA,GAAG,MAAM,CACxE,EAAA,CAAA;AAAA;AAGN;AAEA,aAAA,CAAc,WAAc,GAAA,eAAA;AAKrB,SAAS,YAAsB,GAAA;AACpC,EAAM,MAAA,OAAA,GAAU,WAAW,gBAAgB,CAAA;AAC3C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,kDAAkD,CAAA;AAAA;AAEpE,EAAO,OAAA,OAAA;AACT;;;;"}

package/dist/components/DataTable/Table/DataTableTable.esm.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Table } from '../../Table/Table.esm.js';
+import { useDataTable } from '../Root/DataTableRoot.esm.js';
+import { flexRender } from '@tanstack/react-table';
+
+const DataTableTable = forwardRef(
+  (props, ref) => {
+    const { className, ...rest } = props;
+    const { table } = useDataTable();
+    return /* @__PURE__ */ jsxs(
+      Table.Root,
+      {
+        ref,
+        style: { minWidth: table.getTotalSize() },
+        className: clsx(className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table.Row, { children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ jsx(
+              Table.Head,
+              {
+                style: { width: header.getSize() },
+                children: header.isPlaceholder ? null : flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )
+              },
+              header.id
+            );
+          }) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsx(Table.Body, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+            Table.Row,
+            {
+              "data-state": row.getIsSelected() && "selected",
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                Table.Cell,
+                {
+                  style: { width: cell.column.getSize() },
+                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                },
+                cell.id
+              ))
+            },
+            row.id
+          )) : /* @__PURE__ */ jsx(Table.Row, { children: /* @__PURE__ */ jsx(
+            Table.Cell,
+            {
+              colSpan: table.getAllColumns().length,
+              className: "h-24 text-center",
+              style: { width: table.getTotalSize() },
+              children: "No results."
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+DataTableTable.displayName = "DataTableRoot";
+
+export { DataTableTable };
+//# sourceMappingURL=DataTableTable.esm.js.map

package/dist/components/DataTable/Table/DataTableTable.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTable.esm.js","sources":["../../../../src/components/DataTable/Table/DataTableTable.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 { DataTableTableProps } from './types';\nimport { Table } from '../../Table';\nimport { useDataTable } from '../Root/DataTableRoot';\nimport { flexRender } from '@tanstack/react-table';\n\n/** @public */\nconst DataTableTable = forwardRef(\n  (props: DataTableTableProps, ref: React.ForwardedRef<HTMLTableElement>) => {\n    const { className, ...rest } = props;\n    const { table } = useDataTable();\n\n    return (\n      <Table.Root\n        ref={ref}\n        style={{ minWidth: table.getTotalSize() }}\n        className={clsx(className)}\n        {...rest}\n      >\n        <Table.Header>\n          {table.getHeaderGroups().map(headerGroup => (\n            <Table.Row key={headerGroup.id}>\n              {headerGroup.headers.map(header => {\n                return (\n                  <Table.Head\n                    key={header.id}\n                    style={{ width: header.getSize() }}\n                  >\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </Table.Head>\n                );\n              })}\n            </Table.Row>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map(row => (\n              <Table.Row\n                key={row.id}\n                data-state={row.getIsSelected() && 'selected'}\n              >\n                {row.getVisibleCells().map(cell => (\n                  <Table.Cell\n                    key={cell.id}\n                    style={{ width: cell.column.getSize() }}\n                  >\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={table.getAllColumns().length}\n                className=\"h-24 text-center\"\n                style={{ width: table.getTotalSize() }}\n              >\n                No results.\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table.Root>\n    );\n  },\n);\n\nDataTableTable.displayName = 'DataTableRoot';\n\nexport { DataTableTable };\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,cAAiB,GAAA,UAAA;AAAA,EACrB,CAAC,OAA4B,GAA8C,KAAA;AACzE,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,IAAM,MAAA,EAAE,KAAM,EAAA,GAAI,YAAa,EAAA;AAE/B,IACE,uBAAA,IAAA;AAAA,MAAC,KAAM,CAAA,IAAA;AAAA,MAAN;AAAA,QACC,GAAA;AAAA,QACA,KAAO,EAAA,EAAE,QAAU,EAAA,KAAA,CAAM,cAAe,EAAA;AAAA,QACxC,SAAA,EAAW,KAAK,SAAS,CAAA;AAAA,QACxB,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAM,CAAA,MAAA,EAAN,EACE,QAAA,EAAA,KAAA,CAAM,iBAAkB,CAAA,GAAA,CAAI,CAC3B,WAAA,qBAAA,GAAA,CAAC,MAAM,GAAN,EAAA,EACE,QAAY,EAAA,WAAA,CAAA,OAAA,CAAQ,IAAI,CAAU,MAAA,KAAA;AACjC,YACE,uBAAA,GAAA;AAAA,cAAC,KAAM,CAAA,IAAA;AAAA,cAAN;AAAA,gBAEC,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,SAAU,EAAA;AAAA,gBAEhC,QAAA,EAAA,MAAA,CAAO,gBACJ,IACA,GAAA,UAAA;AAAA,kBACE,MAAA,CAAO,OAAO,SAAU,CAAA,MAAA;AAAA,kBACxB,OAAO,UAAW;AAAA;AACpB,eAAA;AAAA,cARC,MAAO,CAAA;AAAA,aASd;AAAA,WAEH,CAAA,EAAA,EAfa,WAAY,CAAA,EAgB5B,CACD,CACH,EAAA,CAAA;AAAA,0BACC,GAAA,CAAA,KAAA,CAAM,IAAN,EAAA,EACE,gBAAM,WAAY,EAAA,CAAE,IAAM,EAAA,MAAA,GACzB,KAAM,CAAA,WAAA,EAAc,CAAA,IAAA,CAAK,IAAI,CAC3B,GAAA,qBAAA,GAAA;AAAA,YAAC,KAAM,CAAA,GAAA;AAAA,YAAN;AAAA,cAEC,YAAA,EAAY,GAAI,CAAA,aAAA,EAAmB,IAAA,UAAA;AAAA,cAElC,QAAI,EAAA,GAAA,CAAA,eAAA,EAAkB,CAAA,GAAA,CAAI,CACzB,IAAA,qBAAA,GAAA;AAAA,gBAAC,KAAM,CAAA,IAAA;AAAA,gBAAN;AAAA,kBAEC,OAAO,EAAE,KAAA,EAAO,IAAK,CAAA,MAAA,CAAO,SAAU,EAAA;AAAA,kBAErC,qBAAW,IAAK,CAAA,MAAA,CAAO,UAAU,IAAM,EAAA,IAAA,CAAK,YAAY;AAAA,iBAAA;AAAA,gBAHpD,IAAK,CAAA;AAAA,eAKb;AAAA,aAAA;AAAA,YAVI,GAAI,CAAA;AAAA,WAYZ,CAAA,mBAEA,GAAA,CAAA,KAAA,CAAM,KAAN,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAM,CAAA,IAAA;AAAA,YAAN;AAAA,cACC,OAAA,EAAS,KAAM,CAAA,aAAA,EAAgB,CAAA,MAAA;AAAA,cAC/B,SAAU,EAAA,kBAAA;AAAA,cACV,KAAO,EAAA,EAAE,KAAO,EAAA,KAAA,CAAM,cAAe,EAAA;AAAA,cACtC,QAAA,EAAA;AAAA;AAAA,aAGH,CAEJ,EAAA;AAAA;AAAA;AAAA,KACF;AAAA;AAGN;AAEA,cAAA,CAAe,WAAc,GAAA,eAAA;;;;"}

package/dist/components/FieldError/FieldError.esm.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { FieldError as FieldError$1 } from 'react-aria-components';
+import clsx from 'clsx';
+
+const FieldError = forwardRef(
+  (props, ref) => {
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      FieldError$1,
+      {
+        className: clsx("bui-FieldError", className),
+        ref,
+        ...rest
+      }
+    );
+  }
+);
+FieldError.displayName = "FieldError";
+
+export { FieldError };
+//# sourceMappingURL=FieldError.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.esm.js","sources":["../../../src/components/FieldError/FieldError.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 {\n  FieldError as AriaFieldError,\n  type FieldErrorProps,\n} from 'react-aria-components';\nimport clsx from 'clsx';\n\n/** @public */\nexport const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(\n  (props: FieldErrorProps, ref) => {\n    const { className, ...rest } = props;\n\n    return (\n      <AriaFieldError\n        className={clsx('bui-FieldError', className)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n\nFieldError.displayName = 'FieldError';\n"],"names":["AriaFieldError"],"mappings":";;;;;AAwBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAQ,KAAA;AAC/B,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,IACE,uBAAA,GAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAK,CAAA,gBAAA,EAAkB,SAAS,CAAA;AAAA,QAC3C,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/dist/components/FieldLabel/FieldLabel.esm.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Label } from 'react-aria-components';
+import { forwardRef } from 'react';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const FieldLabel = forwardRef(
+  (props, ref) => {
+    const { label, secondaryLabel, description, htmlFor, id, ...rest } = props;
+    const { classNames } = useStyles("FieldLabel");
+    if (!label) return null;
+    return /* @__PURE__ */ jsxs("div", { className: classNames.root, ...rest, ref, children: [
+      label && /* @__PURE__ */ jsxs(Label, { className: classNames.label, htmlFor, id, children: [
+        label,
+        secondaryLabel && /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: classNames.secondaryLabel, children: [
+          "(",
+          secondaryLabel,
+          ")"
+        ] })
+      ] }),
+      description && /* @__PURE__ */ jsx("div", { className: classNames.description, children: description })
+    ] });
+  }
+);
+FieldLabel.displayName = "FieldLabel";
+
+export { FieldLabel };
+//# sourceMappingURL=FieldLabel.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.esm.js","sources":["../../../src/components/FieldLabel/FieldLabel.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 */\nimport { Label } from 'react-aria-components';\nimport { forwardRef } from 'react';\nimport type { FieldLabelProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(\n  (props: FieldLabelProps, ref) => {\n    const { label, secondaryLabel, description, htmlFor, id, ...rest } = props;\n\n    const { classNames } = useStyles('FieldLabel');\n\n    if (!label) return null;\n\n    return (\n      <div className={classNames.root} {...rest} ref={ref}>\n        {label && (\n          <Label className={classNames.label} htmlFor={htmlFor} id={id}>\n            {label}\n            {secondaryLabel && (\n              <span aria-hidden=\"true\" className={classNames.secondaryLabel}>\n                ({secondaryLabel})\n              </span>\n            )}\n          </Label>\n        )}\n        {description && (\n          <div className={classNames.description}>{description}</div>\n        )}\n      </div>\n    );\n  },\n);\n\nFieldLabel.displayName = 'FieldLabel';\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAQ,KAAA;AAC/B,IAAM,MAAA,EAAE,OAAO,cAAgB,EAAA,WAAA,EAAa,SAAS,EAAI,EAAA,GAAG,MAAS,GAAA,KAAA;AAErE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,IAAI,IAAA,CAAC,OAAc,OAAA,IAAA;AAEnB,IAAA,4BACG,KAAI,EAAA,EAAA,SAAA,EAAW,WAAW,IAAO,EAAA,GAAG,MAAM,GACxC,EAAA,QAAA,EAAA;AAAA,MAAA,KAAA,yBACE,KAAM,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,KAAA,EAAO,SAAkB,EACnD,EAAA,QAAA,EAAA;AAAA,QAAA,KAAA;AAAA,QACA,kCACE,IAAA,CAAA,MAAA,EAAA,EAAK,eAAY,MAAO,EAAA,SAAA,EAAW,WAAW,cAAgB,EAAA,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UAC3D,cAAA;AAAA,UAAe;AAAA,SACnB,EAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,MAED,+BACE,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,aAAc,QAAY,EAAA,WAAA,EAAA;AAAA,KAEzD,EAAA,CAAA;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/dist/components/Flex/Flex.esm.js

@@ -0,0 +1,26 @@
+import { forwardRef, createElement } from 'react';
+import clsx from 'clsx';
+import { flexPropDefs } from './Flex.props.esm.js';
+import { extractProps } from '../../utils/extractProps.esm.js';
+import { gapPropDefs } from '../../props/gap-props.esm.js';
+import { spacingPropDefs } from '../../props/spacing.props.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const Flex = forwardRef((props, ref) => {
+  const propDefs = {
+    ...gapPropDefs,
+    ...flexPropDefs,
+    ...spacingPropDefs
+  };
+  const { classNames } = useStyles("Flex");
+  const { className, style } = extractProps(props, propDefs);
+  return createElement("div", {
+    ref,
+    className: clsx(classNames.root, className),
+    style,
+    children: props.children
+  });
+});
+
+export { Flex };
+//# sourceMappingURL=Flex.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.esm.js","sources":["../../../src/components/Flex/Flex.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 { FlexProps } from './types';\nimport clsx from 'clsx';\nimport { flexPropDefs } from './Flex.props';\nimport { extractProps } from '../../utils/extractProps';\nimport { gapPropDefs } from '../../props/gap-props';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  const propDefs = {\n    ...gapPropDefs,\n    ...flexPropDefs,\n    ...spacingPropDefs,\n  };\n\n  const { classNames } = useStyles('Flex');\n  const { className, style } = extractProps(props, propDefs);\n\n  return createElement('div', {\n    ref,\n    className: clsx(classNames.root, className),\n    style,\n    children: props.children,\n  });\n});\n"],"names":[],"mappings":";;;;;;;;AA0BO,MAAM,IAAO,GAAA,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAQ,KAAA;AACxE,EAAA,MAAM,QAAW,GAAA;AAAA,IACf,GAAG,WAAA;AAAA,IACH,GAAG,YAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AACvC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAA,OAAO,cAAc,KAAO,EAAA;AAAA,IAC1B,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA,UAAU,KAAM,CAAA;AAAA,GACjB,CAAA;AACH,CAAC;;;;"}

package/dist/components/Flex/Flex.props.esm.js

@@ -0,0 +1,31 @@
+const alignValues = ["start", "center", "end", "baseline", "stretch"];
+const directionValues = [
+  "row",
+  "column",
+  "row-reverse",
+  "column-reverse"
+];
+const justifyValues = ["start", "center", "end", "between"];
+const flexPropDefs = {
+  align: {
+    type: "enum",
+    className: "bui-align",
+    values: alignValues,
+    responsive: true
+  },
+  direction: {
+    type: "enum",
+    className: "bui-fd",
+    values: directionValues,
+    responsive: true
+  },
+  justify: {
+    type: "enum",
+    className: "bui-jc",
+    values: justifyValues,
+    responsive: true
+  }
+};
+
+export { flexPropDefs };
+//# sourceMappingURL=Flex.props.esm.js.map

package/dist/components/Flex/Flex.props.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.props.esm.js","sources":["../../../src/components/Flex/Flex.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 alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;\nconst directionValues = [\n  'row',\n  'column',\n  'row-reverse',\n  'column-reverse',\n] as const;\nconst justifyValues = ['start', 'center', 'end', 'between'] as const;\n\n/** @public */\nconst flexPropDefs = {\n  align: {\n    type: 'enum',\n    className: 'bui-align',\n    values: alignValues,\n    responsive: true,\n  },\n  direction: {\n    type: 'enum',\n    className: 'bui-fd',\n    values: directionValues,\n    responsive: true,\n  },\n  justify: {\n    type: 'enum',\n    className: 'bui-jc',\n    values: justifyValues,\n    responsive: true,\n  },\n} satisfies {\n  align: PropDef<(typeof alignValues)[number]>;\n  direction: PropDef<(typeof directionValues)[number]>;\n  justify: PropDef<(typeof justifyValues)[number]>;\n};\n\n/** @public */\ntype FlexOwnProps = GetPropDefTypes<typeof flexPropDefs>;\n\nexport { flexPropDefs };\nexport type { FlexOwnProps };\n"],"names":[],"mappings":"AAkBA,MAAM,cAAc,CAAC,OAAA,EAAS,QAAU,EAAA,KAAA,EAAO,YAAY,SAAS,CAAA;AACpE,MAAM,eAAkB,GAAA;AAAA,EACtB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA;AACA,MAAM,aAAgB,GAAA,CAAC,OAAS,EAAA,QAAA,EAAU,OAAO,SAAS,CAAA;AAG1D,MAAM,YAAe,GAAA;AAAA,EACnB,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,MAAA;AAAA,IACN,SAAW,EAAA,WAAA;AAAA,IACX,MAAQ,EAAA,WAAA;AAAA,IACR,UAAY,EAAA;AAAA,GACd;AAAA,EACA,SAAW,EAAA;AAAA,IACT,IAAM,EAAA,MAAA;AAAA,IACN,SAAW,EAAA,QAAA;AAAA,IACX,MAAQ,EAAA,eAAA;AAAA,IACR,UAAY,EAAA;AAAA,GACd;AAAA,EACA,OAAS,EAAA;AAAA,IACP,IAAM,EAAA,MAAA;AAAA,IACN,SAAW,EAAA,QAAA;AAAA,IACX,MAAQ,EAAA,aAAA;AAAA,IACR,UAAY,EAAA;AAAA;AAEhB;;;;"}

package/dist/components/Grid/Grid.esm.js

@@ -0,0 +1,43 @@
+import { forwardRef, createElement } from 'react';
+import { gapPropDefs } from '../../props/gap-props.esm.js';
+import { extractProps } from '../../utils/extractProps.esm.js';
+import { gridPropDefs, gridItemPropDefs } from './Grid.props.esm.js';
+import clsx from 'clsx';
+import { spacingPropDefs } from '../../props/spacing.props.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const GridRoot = forwardRef((props, ref) => {
+  const propDefs = {
+    ...gapPropDefs,
+    ...gridPropDefs,
+    ...spacingPropDefs
+  };
+  const { classNames } = useStyles("Grid");
+  const { className, style } = extractProps(props, propDefs);
+  return createElement("div", {
+    ref,
+    className: clsx(classNames.root, className),
+    style,
+    children: props.children
+  });
+});
+const GridItem = forwardRef((props, ref) => {
+  const propDefs = {
+    ...gridItemPropDefs
+  };
+  const { classNames } = useStyles("Grid");
+  const { className, style } = extractProps(props, propDefs);
+  return createElement("div", {
+    ref,
+    className: clsx(classNames.item, className),
+    style,
+    children: props.children
+  });
+});
+const Grid = {
+  Root: GridRoot,
+  Item: GridItem
+};
+
+export { Grid };
+//# sourceMappingURL=Grid.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.esm.js","sources":["../../../src/components/Grid/Grid.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 { gapPropDefs } from '../../props/gap-props';\nimport { extractProps } from '../../utils/extractProps';\nimport { gridItemPropDefs, gridPropDefs } from './Grid.props';\nimport clsx from 'clsx';\nimport type { GridItemProps, GridProps } from './types';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const propDefs = {\n    ...gapPropDefs,\n    ...gridPropDefs,\n    ...spacingPropDefs,\n  };\n\n  const { classNames } = useStyles('Grid');\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: props.children,\n  });\n});\n\nconst GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {\n  const propDefs = {\n    ...gridItemPropDefs,\n  };\n\n  const { classNames } = useStyles('Grid');\n  const { className, style } = extractProps(props, propDefs);\n\n  return createElement('div', {\n    ref,\n    className: clsx(classNames.item, className),\n    style,\n    children: props.children,\n  });\n});\n\n/** @public */\nexport const Grid = {\n  Root: GridRoot,\n  Item: GridItem,\n};\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,QAAW,GAAA,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAQ,KAAA;AACrE,EAAA,MAAM,QAAW,GAAA;AAAA,IACf,GAAG,WAAA;AAAA,IACH,GAAG,YAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAA,OAAO,cAAc,KAAO,EAAA;AAAA,IAC1B,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA,UAAU,KAAM,CAAA;AAAA,GACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,QAAW,GAAA,UAAA,CAA0C,CAAC,KAAA,EAAO,GAAQ,KAAA;AACzE,EAAA,MAAM,QAAW,GAAA;AAAA,IACf,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AACvC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAA,OAAO,cAAc,KAAO,EAAA;AAAA,IAC1B,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA,UAAU,KAAM,CAAA;AAAA,GACjB,CAAA;AACH,CAAC,CAAA;AAGM,MAAM,IAAO,GAAA;AAAA,EAClB,IAAM,EAAA,QAAA;AAAA,EACN,IAAM,EAAA;AACR;;;;"}