@backstage/ui 0.0.0-nightly-20260112025641 → 0.0.0-nightly-20260114025400
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.
- package/CHANGELOG.md +66 -1
- package/css/styles.css +4 -4
- package/dist/components/Button/Button.module.css.esm.js +1 -1
- package/dist/components/ToggleButton/ToggleButton.esm.js +51 -0
- package/dist/components/ToggleButton/ToggleButton.esm.js.map +1 -0
- package/dist/components/ToggleButton/ToggleButton.module.css.esm.js +8 -0
- package/dist/components/ToggleButton/ToggleButton.module.css.esm.js.map +1 -0
- package/dist/components/ToggleButton/definition.esm.js +12 -0
- package/dist/components/ToggleButton/definition.esm.js.map +1 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js +33 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js.map +1 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js +8 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js.map +1 -0
- package/dist/components/ToggleButtonGroup/definition.esm.js +11 -0
- package/dist/components/ToggleButtonGroup/definition.esm.js.map +1 -0
- package/dist/index.d.ts +54 -3
- package/dist/index.esm.js +4 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
-
## 0.0.0-nightly-
|
|
3
|
+
## 0.0.0-nightly-20260114025400
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
@@ -56,11 +56,13 @@
|
|
|
56
56
|
- `--bui-bg-tint-pressed` can be replaced by `--bui-bg-neutral-on-surface-0-pressed`
|
|
57
57
|
- `--bui-bg-tint-disabled` can be replaced by `--bui-bg-neutral-on-surface-0-disabled`
|
|
58
58
|
|
|
59
|
+
- ea0c6d8: Introduce new `ToggleButton` & `ToggleButtonGroup` components in Backstage UI
|
|
59
60
|
- 4ea1d15: **BREAKING**: Renamed CSS variable `--bui-bg` to `--bui-bg-surface-0` for consistency.
|
|
60
61
|
|
|
61
62
|
### Patch Changes
|
|
62
63
|
|
|
63
64
|
- 1880402: Fixes app background color on dark mode.
|
|
65
|
+
- 21c87cc: Fixes disabled state in primary and secondary buttons in Backstage UI.
|
|
64
66
|
- 9c76682: build(deps-dev): bump `storybook` from 10.1.9 to 10.1.10
|
|
65
67
|
- b4a4911: Fixed SearchField `startCollapsed` prop not working correctly in Backstage UI. The field now properly starts in a collapsed state, expands when clicked and focused, and collapses back when unfocused with no input. Also fixed CSS logic to work correctly in all layout contexts (flex row, flex column, and regular containers).
|
|
66
68
|
|
|
@@ -70,6 +72,69 @@
|
|
|
70
72
|
- Updated dependencies
|
|
71
73
|
- @backstage/version-bridge@1.0.11
|
|
72
74
|
|
|
75
|
+
## 0.11.0-next.1
|
|
76
|
+
|
|
77
|
+
### Minor Changes
|
|
78
|
+
|
|
79
|
+
- 243e5e7: **BREAKING**: Redesigned Table component with new `useTable` hook API.
|
|
80
|
+
|
|
81
|
+
- The `Table` component (React Aria wrapper) is renamed to `TableRoot`
|
|
82
|
+
- New high-level `Table` component that handles data display, pagination, sorting, and selection
|
|
83
|
+
- The `useTable` hook is completely redesigned with a new API supporting three pagination modes (complete, offset, cursor)
|
|
84
|
+
- New types: `ColumnConfig`, `TableProps`, `TableItem`, `UseTableOptions`, `UseTableResult`
|
|
85
|
+
|
|
86
|
+
New features include unified pagination modes, debounced query changes, stale data preservation during reloads, and row selection with toggle/replace behaviors.
|
|
87
|
+
|
|
88
|
+
**Migration guide:**
|
|
89
|
+
|
|
90
|
+
1. Update imports and use the new `useTable` hook:
|
|
91
|
+
|
|
92
|
+
```diff
|
|
93
|
+
-import { Table, useTable } from '@backstage/ui';
|
|
94
|
+
-const { data, paginationProps } = useTable({ data: items, pagination: {...} });
|
|
95
|
+
+import { Table, useTable, type ColumnConfig } from '@backstage/ui';
|
|
96
|
+
+const { tableProps } = useTable({
|
|
97
|
+
+ mode: 'complete',
|
|
98
|
+
+ getData: () => items,
|
|
99
|
+
+});
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
2. Define columns and render with the new Table API:
|
|
103
|
+
|
|
104
|
+
```diff
|
|
105
|
+
-<Table aria-label="My table">
|
|
106
|
+
- <TableHeader>...</TableHeader>
|
|
107
|
+
- <TableBody items={data}>...</TableBody>
|
|
108
|
+
-</Table>
|
|
109
|
+
-<TablePagination {...paginationProps} />
|
|
110
|
+
+const columns: ColumnConfig<Item>[] = [
|
|
111
|
+
+ { id: 'name', label: 'Name', isRowHeader: true, cell: item => <CellText title={item.name} /> },
|
|
112
|
+
+ { id: 'type', label: 'Type', cell: item => <CellText title={item.type} /> },
|
|
113
|
+
+];
|
|
114
|
+
+
|
|
115
|
+
+<Table columnConfig={columns} {...tableProps} />
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
Affected components: Table, TableRoot, TablePagination
|
|
119
|
+
|
|
120
|
+
- 95246eb: **Breaking** Updating color tokens to match the new neutral style on different surfaces.
|
|
121
|
+
|
|
122
|
+
## Migration notes
|
|
123
|
+
|
|
124
|
+
There's no direct replacement for the old tint tokens but you can use the new neutral set of color tokens on surface 0 or 1 as a replacement.
|
|
125
|
+
|
|
126
|
+
- `--bui-bg-tint` can be replaced by `--bui-bg-neutral-on-surface-0`
|
|
127
|
+
- `--bui-bg-tint-hover` can be replaced by `--bui-bg-neutral-on-surface-0-hover`
|
|
128
|
+
- `--bui-bg-tint-pressed` can be replaced by `--bui-bg-neutral-on-surface-0-pressed`
|
|
129
|
+
- `--bui-bg-tint-disabled` can be replaced by `--bui-bg-neutral-on-surface-0-disabled`
|
|
130
|
+
|
|
131
|
+
- ea0c6d8: Introduce new `ToggleButton` & `ToggleButtonGroup` components in Backstage UI
|
|
132
|
+
|
|
133
|
+
### Patch Changes
|
|
134
|
+
|
|
135
|
+
- 21c87cc: Fixes disabled state in primary and secondary buttons in Backstage UI.
|
|
136
|
+
- b3253b6: Fixed `Link` component causing hard page refreshes for internal routes. The component now properly uses React Router's navigation instead of full page reloads.
|
|
137
|
+
|
|
73
138
|
## 0.11.0-next.0
|
|
74
139
|
|
|
75
140
|
### Minor Changes
|
package/css/styles.css
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
--bui-bg-solid: #1f5493;
|
|
59
59
|
--bui-bg-solid-hover: #163a66;
|
|
60
60
|
--bui-bg-solid-pressed: #0f2b4e;
|
|
61
|
-
--bui-bg-solid-disabled: #
|
|
61
|
+
--bui-bg-solid-disabled: #163a66;
|
|
62
62
|
--bui-bg-neutral-on-surface-0: oklch(0% 0 0 / .06);
|
|
63
63
|
--bui-bg-neutral-on-surface-0-hover: oklch(0% 0 0 / .12);
|
|
64
64
|
--bui-bg-neutral-on-surface-0-pressed: oklch(0% 0 0 / .16);
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
--bui-fg-link-hover: #1f2d5c;
|
|
85
85
|
--bui-fg-disabled: #9e9e9e;
|
|
86
86
|
--bui-fg-solid: var(--bui-white);
|
|
87
|
-
--bui-fg-solid-disabled: #
|
|
87
|
+
--bui-fg-solid-disabled: #98a8bc;
|
|
88
88
|
--bui-fg-tint: #1f5493;
|
|
89
89
|
--bui-fg-tint-disabled: var(--bui-gray-5);
|
|
90
90
|
--bui-fg-danger: #e22b2b;
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
--bui-bg-solid: #9cc9ff;
|
|
120
120
|
--bui-bg-solid-hover: #83b9fd;
|
|
121
121
|
--bui-bg-solid-pressed: #83b9fd;
|
|
122
|
-
--bui-bg-solid-disabled: #
|
|
122
|
+
--bui-bg-solid-disabled: #1b3d68;
|
|
123
123
|
--bui-bg-neutral-on-surface-0: oklch(100% 0 0 / .1);
|
|
124
124
|
--bui-bg-neutral-on-surface-0-hover: oklch(100% 0 0 / .14);
|
|
125
125
|
--bui-bg-neutral-on-surface-0-pressed: oklch(100% 0 0 / .2);
|
|
@@ -145,7 +145,7 @@
|
|
|
145
145
|
--bui-fg-link-hover: #7eb5f7;
|
|
146
146
|
--bui-fg-disabled: var(--bui-gray-7);
|
|
147
147
|
--bui-fg-solid: #101821;
|
|
148
|
-
--bui-fg-solid-disabled:
|
|
148
|
+
--bui-fg-solid-disabled: #6191cc;
|
|
149
149
|
--bui-fg-tint: #9cc9ff;
|
|
150
150
|
--bui-fg-tint-disabled: var(--bui-gray-5);
|
|
151
151
|
--bui-fg-danger: #e22b2b;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Button-module_bui-Button__1BvMm {\n --loading-duration: 200ms;\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n background-color: transparent;\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='primary'] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n\n &:hover {\n background-color: var(--bui-bg-solid-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-solid-pressed);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n background-color: var(--bui-bg-solid-disabled);\n color: var(--bui-fg-solid-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='secondary'] {\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-neutral-on-surface-0);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-0-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-0-pressed);\n }\n\n &[data-on-surface='1'] {\n background-color: var(--bui-bg-neutral-on-surface-1);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-1-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-1-pressed);\n }\n }\n\n &[data-on-surface='2'] {\n background-color: var(--bui-bg-neutral-on-surface-2);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-2-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-2-pressed);\n }\n }\n\n &[data-on-surface='3'] {\n background-color: var(--bui-bg-neutral-on-surface-3);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-3-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-3-pressed);\n }\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n
|
|
3
|
+
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Button-module_bui-Button__1BvMm {\n --loading-duration: 200ms;\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n background-color: transparent;\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='primary'] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n\n &:hover {\n background-color: var(--bui-bg-solid-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-solid-pressed);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n background-color: var(--bui-bg-solid-disabled);\n color: var(--bui-fg-solid-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='secondary'] {\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-neutral-on-surface-0);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-0-hover);\n transition: background-color 150ms ease;\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-0-pressed);\n }\n\n &[data-on-surface='1'] {\n background-color: var(--bui-bg-neutral-on-surface-1);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-1-hover);\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-1-pressed);\n }\n }\n\n &[data-on-surface='2'] {\n background-color: var(--bui-bg-neutral-on-surface-2);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-2-hover);\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-2-pressed);\n }\n }\n\n &[data-on-surface='3'] {\n background-color: var(--bui-bg-neutral-on-surface-3);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-3-hover);\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-3-pressed);\n }\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n color: var(--bui-fg-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='tertiary'] {\n background-color: transparent;\n color: var(--bui-fg-primary);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-0-hover);\n transition: background-color 200ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-0-pressed);\n }\n\n &[data-on-surface='1'] {\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-1-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-1-pressed);\n }\n }\n\n &[data-on-surface='2'] {\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-2-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-2-pressed);\n }\n }\n\n &[data-on-surface='3'] {\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-3-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-3-pressed);\n }\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n background-color: transparent;\n color: var(--bui-fg-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-size='small'] {\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-size='medium'] {\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .Button-module_bui-ButtonContent__2x-bP {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n transition: opacity var(--loading-duration) ease-out;\n\n .Button-module_bui-Button__1BvMm[data-loading='true'] & {\n opacity: 0;\n }\n }\n\n .Button-module_bui-ButtonSpinner__1MWbK {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n opacity: 0;\n transition: opacity var(--loading-duration) ease-in;\n\n .Button-module_bui-Button__1BvMm[data-loading='true'] & {\n opacity: 1;\n }\n\n & svg {\n animation: Button-module_bui-spin__yALtH 1s linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .Button-module_bui-Button__1BvMm {\n transition-duration: 50ms;\n }\n\n .Button-module_bui-ButtonContent__2x-bP {\n transition-duration: 50ms;\n }\n\n .Button-module_bui-ButtonSpinner__1MWbK {\n transition-duration: 50ms;\n }\n\n .Button-module_bui-ButtonSpinner__1MWbK svg {\n animation: none;\n }\n }\n\n @keyframes Button-module_bui-spin__yALtH {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
4
|
var stylesButton = {"bui-Button":"Button-module_bui-Button__1BvMm","bui-ButtonContent":"Button-module_bui-ButtonContent__2x-bP","bui-ButtonSpinner":"Button-module_bui-ButtonSpinner__1MWbK","bui-spin":"Button-module_bui-spin__yALtH"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { ToggleButton as ToggleButton$1 } from 'react-aria-components';
|
|
5
|
+
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
6
|
+
import { ToggleButtonDefinition } from './definition.esm.js';
|
|
7
|
+
import styles from './ToggleButton.module.css.esm.js';
|
|
8
|
+
import { useSurface } from '../../hooks/useSurface.esm.js';
|
|
9
|
+
|
|
10
|
+
const ToggleButton = forwardRef(
|
|
11
|
+
(props, ref) => {
|
|
12
|
+
const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
13
|
+
ToggleButtonDefinition,
|
|
14
|
+
{
|
|
15
|
+
size: "small",
|
|
16
|
+
...props
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
const { children, className, iconStart, iconEnd, onSurface, ...rest } = cleanedProps;
|
|
20
|
+
const { surface } = useSurface({ onSurface });
|
|
21
|
+
return /* @__PURE__ */ jsx(
|
|
22
|
+
ToggleButton$1,
|
|
23
|
+
{
|
|
24
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
25
|
+
ref,
|
|
26
|
+
...dataAttributes,
|
|
27
|
+
...typeof surface === "string" ? { "data-on-surface": surface } : {},
|
|
28
|
+
...rest,
|
|
29
|
+
children: (renderProps) => {
|
|
30
|
+
const renderedChildren = typeof children === "function" ? children(renderProps) : children;
|
|
31
|
+
return /* @__PURE__ */ jsxs(
|
|
32
|
+
"span",
|
|
33
|
+
{
|
|
34
|
+
className: clsx(classNames.content, styles[classNames.content]),
|
|
35
|
+
"data-slot": "content",
|
|
36
|
+
children: [
|
|
37
|
+
iconStart,
|
|
38
|
+
renderedChildren,
|
|
39
|
+
iconEnd
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
ToggleButton.displayName = "ToggleButton";
|
|
49
|
+
|
|
50
|
+
export { ToggleButton };
|
|
51
|
+
//# sourceMappingURL=ToggleButton.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleButton.esm.js","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButton as AriaToggleButton } from 'react-aria-components';\nimport type { ToggleButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonDefinition } from './definition';\nimport styles from './ToggleButton.module.css';\nimport { useSurface } from '../../hooks/useSurface';\n\n/** @public */\nexport const ToggleButton = forwardRef(\n (props: ToggleButtonProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n ToggleButtonDefinition,\n {\n size: 'small',\n ...props,\n },\n );\n\n const { children, className, iconStart, iconEnd, onSurface, ...rest } =\n cleanedProps;\n\n const { surface } = useSurface({ onSurface });\n\n return (\n <AriaToggleButton\n className={clsx(classNames.root, styles[classNames.root], className)}\n ref={ref}\n {...dataAttributes}\n {...(typeof surface === 'string' ? { 'data-on-surface': surface } : {})}\n {...rest}\n >\n {renderProps => {\n // If children is a function, call it with render props; otherwise use children as-is\n const renderedChildren =\n typeof children === 'function' ? children(renderProps) : children;\n\n return (\n <span\n className={clsx(classNames.content, styles[classNames.content])}\n data-slot=\"content\"\n >\n {iconStart}\n {renderedChildren}\n {iconEnd}\n </span>\n );\n }}\n </AriaToggleButton>\n );\n },\n);\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["AriaToggleButton"],"mappings":";;;;;;;;;AA0BO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAAgC;AACzD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,sBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,SAAA,EAAW,GAAG,MAAK,GAClE,YAAA;AAEF,IAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,UAAA,CAAW,EAAE,WAAW,CAAA;AAE5C,IAAA,uBACE,GAAA;AAAA,MAACA,cAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAI,OAAO,OAAA,KAAY,QAAA,GAAW,EAAE,iBAAA,EAAmB,OAAA,KAAY,EAAC;AAAA,QACpE,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAA,WAAA,KAAe;AAEd,UAAA,MAAM,mBACJ,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE3D,UAAA,uBACE,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAC9D,WAAA,EAAU,SAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,SAAA;AAAA,gBACA,gBAAA;AAAA,gBACA;AAAA;AAAA;AAAA,WACH;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ToggleButton-module_bui-ToggleButton__1CL1A {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n border: none;\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-surface-1);\n color: var(--bui-fg-primary);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0 var(--bui-space-2);\n cursor: pointer;\n transition: background-color 150ms ease, box-shadow 150ms ease,\n color 150ms ease, transform 100ms ease;\n\n &[data-selected],\n &[data-pressed] {\n background: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n }\n\n &:not([data-selected])[data-hovered] {\n background: var(--bui-bg-surface-2);\n }\n\n &[data-disabled] {\n background: var(--bui-bg-neutral-on-surface-0-disabled);\n color: var(--bui-fg-disabled);\n }\n\n &[data-disabled][data-hovered] {\n background: var(--bui-bg-neutral-on-surface-0-disabled);\n }\n\n &[data-disabled][data-selected] {\n background: var(--bui-bg-solid-disabled);\n color: var(--bui-fg-disabled);\n }\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-focus-visible] {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-disabled] {\n cursor: not-allowed;\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-pressed] {\n transform: scale(0.98);\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-disabled][data-pressed] {\n transform: none;\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-size='small'] {\n height: 2rem;\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .ToggleButton-module_bui-ToggleButton__1CL1A[data-size='medium'] {\n height: 2.5rem;\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .ToggleButton-module_bui-ToggleButtonContent__1Pq3O {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ToggleButton":"ToggleButton-module_bui-ToggleButton__1CL1A","bui-ToggleButtonContent":"ToggleButton-module_bui-ToggleButtonContent__1Pq3O"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { styles as default };
|
|
8
|
+
//# sourceMappingURL=ToggleButton.module.css.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleButton.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const ToggleButtonDefinition = {
|
|
2
|
+
classNames: {
|
|
3
|
+
root: "bui-ToggleButton",
|
|
4
|
+
content: "bui-ToggleButtonContent"
|
|
5
|
+
},
|
|
6
|
+
dataAttributes: {
|
|
7
|
+
size: ["small", "medium"]
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export { ToggleButtonDefinition };
|
|
12
|
+
//# sourceMappingURL=definition.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButton/definition.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 { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ToggleButton\n * @public\n */\nexport const ToggleButtonDefinition = {\n classNames: {\n root: 'bui-ToggleButton',\n content: 'bui-ToggleButtonContent',\n },\n dataAttributes: {\n size: ['small', 'medium'] as const,\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,sBAAA,GAAyB;AAAA,EACpC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { ToggleButtonGroup as ToggleButtonGroup$1 } from 'react-aria-components';
|
|
5
|
+
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
6
|
+
import { ToggleButtonGroupDefinition } from './definition.esm.js';
|
|
7
|
+
import styles from './ToggleButtonGroup.module.css.esm.js';
|
|
8
|
+
|
|
9
|
+
const ToggleButtonGroup = forwardRef(
|
|
10
|
+
(props, ref) => {
|
|
11
|
+
const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
12
|
+
ToggleButtonGroupDefinition,
|
|
13
|
+
{
|
|
14
|
+
...props
|
|
15
|
+
}
|
|
16
|
+
);
|
|
17
|
+
const { className, children, ...rest } = cleanedProps;
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
ToggleButtonGroup$1,
|
|
20
|
+
{
|
|
21
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
22
|
+
ref,
|
|
23
|
+
...dataAttributes,
|
|
24
|
+
...rest,
|
|
25
|
+
children
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
ToggleButtonGroup.displayName = "ToggleButtonGroup";
|
|
31
|
+
|
|
32
|
+
export { ToggleButtonGroup };
|
|
33
|
+
//# sourceMappingURL=ToggleButtonGroup.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleButtonGroup.esm.js","sources":["../../../src/components/ToggleButtonGroup/ToggleButtonGroup.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';\nimport type { ToggleButtonGroupProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonGroupDefinition } from './definition';\nimport styles from './ToggleButtonGroup.module.css';\n\n/** @public */\nexport const ToggleButtonGroup = forwardRef(\n (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n ToggleButtonGroupDefinition,\n {\n ...props,\n },\n );\n\n const { className, children, ...rest } = cleanedProps;\n\n return (\n <AriaToggleButtonGroup\n className={clsx(classNames.root, styles[classNames.root], className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {children}\n </AriaToggleButtonGroup>\n );\n },\n);\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n"],"names":["AriaToggleButtonGroup"],"mappings":";;;;;;;;AAyBO,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,CAAC,OAA+B,GAAA,KAA6B;AAC3D,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,2BAAA;AAAA,MACA;AAAA,QACE,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,IAAA,uBACE,GAAA;AAAA,MAACA,mBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx {\n display: inline-flex;\n align-items: center;\n flex-wrap: nowrap;\n border-radius: var(--bui-radius-2);\n overflow: hidden;\n box-shadow: inset 0 0 0 1px var(--bui-border);\n width: fit-content;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical'] {\n flex-direction: column;\n align-items: stretch;\n width: fit-content;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx > .bui-ToggleButton {\n border-radius: 0;\n margin: 0;\n box-shadow: none;\n border: 0;\n }\n\n /* Horizontal radius rules (default orientation) */\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n > .bui-ToggleButton {\n border-radius: 0;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n > .bui-ToggleButton:first-child {\n border-radius: var(--bui-radius-2) 0 0 var(--bui-radius-2);\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n > .bui-ToggleButton:last-child {\n border-radius: 0 var(--bui-radius-2) var(--bui-radius-2) 0;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n > .bui-ToggleButton:only-child {\n border-radius: var(--bui-radius-2);\n }\n\n /* Horizontal dividers */\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:not([data-orientation='vertical'])\n .bui-ToggleButton\n + .bui-ToggleButton {\n border-left: 1px solid var(--bui-border);\n }\n\n /* Vertical dividers */\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n .bui-ToggleButton {\n width: 100%;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n .bui-ToggleButton\n + .bui-ToggleButton {\n border-top: 1px solid var(--bui-border);\n }\n\n /* Vertical radius rules */\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n > .bui-ToggleButton {\n border-radius: 0;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n > .bui-ToggleButton:first-child {\n border-radius: var(--bui-radius-2) var(--bui-radius-2) 0 0;\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n > .bui-ToggleButton:last-child {\n border-radius: 0 0 var(--bui-radius-2) var(--bui-radius-2);\n }\n\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx[data-orientation='vertical']\n > .bui-ToggleButton:only-child {\n border-radius: var(--bui-radius-2);\n }\n\n /* Focus ring on group surface */\n .ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ToggleButtonGroup":"ToggleButtonGroup-module_bui-ToggleButtonGroup__2tWrx"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { styles as default };
|
|
8
|
+
//# sourceMappingURL=ToggleButtonGroup.module.css.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleButtonGroup.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButtonGroup/definition.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 { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ToggleButtonGroup\n * @public\n */\nexport const ToggleButtonGroupDefinition = {\n classNames: {\n root: 'bui-ToggleButtonGroup',\n },\n dataAttributes: {\n orientation: ['horizontal', 'vertical'] as const,\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,2BAAA,GAA8B;AAAA,EACzC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,WAAA,EAAa,CAAC,YAAA,EAAc,UAAU;AAAA;AAE1C;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactElement, ReactNode, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
|
|
3
|
-
import { ButtonProps as ButtonProps$1, DisclosureProps, HeadingProps, DisclosurePanelProps, DisclosureGroupProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps as TableProps$1, ColumnProps as ColumnProps$1, CellProps as CellProps$1, TableHeaderProps, TableBodyProps, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
|
|
3
|
+
import { ButtonProps as ButtonProps$1, DisclosureProps, HeadingProps, DisclosurePanelProps, DisclosureGroupProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps as TableProps$1, ColumnProps as ColumnProps$1, CellProps as CellProps$1, TableHeaderProps, TableBodyProps, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components';
|
|
4
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
5
|
import { NavigateOptions } from 'react-router-dom';
|
|
6
6
|
import { SortDescriptor as SortDescriptor$1 } from 'react-stately';
|
|
@@ -1592,6 +1592,57 @@ declare const SwitchDefinition: {
|
|
|
1592
1592
|
};
|
|
1593
1593
|
};
|
|
1594
1594
|
|
|
1595
|
+
/**
|
|
1596
|
+
* Properties for {@link ToggleButton}
|
|
1597
|
+
*
|
|
1598
|
+
* @public
|
|
1599
|
+
*/
|
|
1600
|
+
interface ToggleButtonProps extends ToggleButtonProps$1 {
|
|
1601
|
+
size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
|
|
1602
|
+
iconStart?: ReactElement;
|
|
1603
|
+
iconEnd?: ReactElement;
|
|
1604
|
+
/** Surface the toggle button is placed on. Defaults to context surface if available */
|
|
1605
|
+
onSurface?: Responsive<Surface>;
|
|
1606
|
+
}
|
|
1607
|
+
|
|
1608
|
+
/** @public */
|
|
1609
|
+
declare const ToggleButton: react.ForwardRefExoticComponent<ToggleButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1610
|
+
|
|
1611
|
+
/**
|
|
1612
|
+
* Component definition for ToggleButton
|
|
1613
|
+
* @public
|
|
1614
|
+
*/
|
|
1615
|
+
declare const ToggleButtonDefinition: {
|
|
1616
|
+
readonly classNames: {
|
|
1617
|
+
readonly root: "bui-ToggleButton";
|
|
1618
|
+
readonly content: "bui-ToggleButtonContent";
|
|
1619
|
+
};
|
|
1620
|
+
readonly dataAttributes: {
|
|
1621
|
+
readonly size: readonly ["small", "medium"];
|
|
1622
|
+
};
|
|
1623
|
+
};
|
|
1624
|
+
|
|
1625
|
+
/** @public */
|
|
1626
|
+
interface ToggleButtonGroupProps extends Omit<ToggleButtonGroupProps$1, 'orientation'> {
|
|
1627
|
+
orientation?: NonNullable<ToggleButtonGroupProps$1['orientation']>;
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
/** @public */
|
|
1631
|
+
declare const ToggleButtonGroup: react.ForwardRefExoticComponent<ToggleButtonGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
1632
|
+
|
|
1633
|
+
/**
|
|
1634
|
+
* Component definition for ToggleButtonGroup
|
|
1635
|
+
* @public
|
|
1636
|
+
*/
|
|
1637
|
+
declare const ToggleButtonGroupDefinition: {
|
|
1638
|
+
readonly classNames: {
|
|
1639
|
+
readonly root: "bui-ToggleButtonGroup";
|
|
1640
|
+
};
|
|
1641
|
+
readonly dataAttributes: {
|
|
1642
|
+
readonly orientation: readonly ["horizontal", "vertical"];
|
|
1643
|
+
};
|
|
1644
|
+
};
|
|
1645
|
+
|
|
1595
1646
|
/**
|
|
1596
1647
|
* Properties for {@link VisuallyHidden}
|
|
1597
1648
|
*
|
|
@@ -1629,5 +1680,5 @@ declare const useBreakpoint: () => {
|
|
|
1629
1680
|
down: (key: Breakpoint) => boolean;
|
|
1630
1681
|
};
|
|
1631
1682
|
|
|
1632
|
-
export { Accordion, AccordionDefinition, AccordionGroup, AccordionPanel, AccordionTrigger, Avatar, AvatarDefinition, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardDefinition, CardFooter, CardHeader, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogDefinition, DialogFooter, DialogHeader, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, Radio, RadioGroup, RadioGroupDefinition, Row, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, useBreakpoint, useTable };
|
|
1633
|
-
export type { AccordionGroupProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlignItems, AvatarProps, Border, BorderRadius, BoxProps, Breakpoint, ButtonIconProps, ButtonLinkProps, ButtonProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CellProfileProps, CellProps, CellTextProps, CheckboxProps, ClassNamesMap, ColumnConfig, ColumnProps, Columns, ComponentDefinition, ContainerProps, CursorParams, CursorResponse, DataAttributeValues, DataAttributesMap, DialogBodyProps, DialogHeaderProps, DialogProps, DialogTriggerProps, Display, FieldLabelProps, FilterState, FlexDirection, FlexProps, FlexWrap, GridItemProps, GridProps, HeaderPageBreadcrumb, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkProps, MenuAutocompleteListBoxProps, MenuAutocompleteProps, MenuItemProps, MenuListBoxItemProps, MenuListBoxProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PagePagination, PaginationOptions, QueryOptions, RadioGroupProps, RadioProps, Responsive, RowConfig, RowRenderFn, SearchFieldProps, SearchState, SelectProps, SkeletonProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, Surface, SwitchProps, TabListProps, TabMatchStrategy, TabPanelProps, TabProps, TableItem, TablePaginationProps, TablePaginationType, TableProps, TableRootProps, TableSelection, TabsProps, TagGroupProps, TagProps, TextColorStatus, TextColors, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, TooltipProps, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VisuallyHiddenProps };
|
|
1683
|
+
export { Accordion, AccordionDefinition, AccordionGroup, AccordionPanel, AccordionTrigger, Avatar, AvatarDefinition, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardDefinition, CardFooter, CardHeader, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogDefinition, DialogFooter, DialogHeader, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, Radio, RadioGroup, RadioGroupDefinition, Row, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, useBreakpoint, useTable };
|
|
1684
|
+
export type { AccordionGroupProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlignItems, AvatarProps, Border, BorderRadius, BoxProps, Breakpoint, ButtonIconProps, ButtonLinkProps, ButtonProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CellProfileProps, CellProps, CellTextProps, CheckboxProps, ClassNamesMap, ColumnConfig, ColumnProps, Columns, ComponentDefinition, ContainerProps, CursorParams, CursorResponse, DataAttributeValues, DataAttributesMap, DialogBodyProps, DialogHeaderProps, DialogProps, DialogTriggerProps, Display, FieldLabelProps, FilterState, FlexDirection, FlexProps, FlexWrap, GridItemProps, GridProps, HeaderPageBreadcrumb, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkProps, MenuAutocompleteListBoxProps, MenuAutocompleteProps, MenuItemProps, MenuListBoxItemProps, MenuListBoxProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PagePagination, PaginationOptions, QueryOptions, RadioGroupProps, RadioProps, Responsive, RowConfig, RowRenderFn, SearchFieldProps, SearchState, SelectProps, SkeletonProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, Surface, SwitchProps, TabListProps, TabMatchStrategy, TabPanelProps, TabProps, TableItem, TablePaginationProps, TablePaginationType, TableProps, TableRootProps, TableSelection, TabsProps, TagGroupProps, TagProps, TextColorStatus, TextColors, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupProps, ToggleButtonProps, TooltipProps, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VisuallyHiddenProps };
|
package/dist/index.esm.js
CHANGED
|
@@ -65,6 +65,10 @@ export { Skeleton } from './components/Skeleton/Skeleton.esm.js';
|
|
|
65
65
|
export { SkeletonDefinition } from './components/Skeleton/definition.esm.js';
|
|
66
66
|
export { Switch } from './components/Switch/Switch.esm.js';
|
|
67
67
|
export { SwitchDefinition } from './components/Switch/definition.esm.js';
|
|
68
|
+
export { ToggleButton } from './components/ToggleButton/ToggleButton.esm.js';
|
|
69
|
+
export { ToggleButtonDefinition } from './components/ToggleButton/definition.esm.js';
|
|
70
|
+
export { ToggleButtonGroup } from './components/ToggleButtonGroup/ToggleButtonGroup.esm.js';
|
|
71
|
+
export { ToggleButtonGroupDefinition } from './components/ToggleButtonGroup/definition.esm.js';
|
|
68
72
|
export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.esm.js';
|
|
69
73
|
export { VisuallyHiddenDefinition } from './components/VisuallyHidden/definition.esm.js';
|
|
70
74
|
export { useBreakpoint } from './hooks/useBreakpoint.esm.js';
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/ui",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20260114025400",
|
|
4
4
|
"backstage": {
|
|
5
5
|
"role": "web-library"
|
|
6
6
|
},
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"react-aria-components": "^1.13.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@backstage/cli": "0.0.0-nightly-
|
|
50
|
+
"@backstage/cli": "0.0.0-nightly-20260114025400",
|
|
51
51
|
"@types/react": "^18.0.0",
|
|
52
52
|
"@types/react-dom": "^18.0.0",
|
|
53
53
|
"chalk": "^5.4.1",
|