@backstage/ui 0.9.0-next.2 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +229 -0
- package/README.md +23 -0
- package/dist/components/Accordion/Accordion.esm.js +110 -0
- package/dist/components/Accordion/Accordion.esm.js.map +1 -0
- package/dist/components/Accordion/Accordion.module.css.esm.js +8 -0
- package/dist/components/Accordion/Accordion.module.css.esm.js.map +1 -0
- package/dist/components/Accordion/definition.esm.js +15 -0
- package/dist/components/Accordion/definition.esm.js.map +1 -0
- package/dist/components/Avatar/Avatar.esm.js +9 -5
- package/dist/components/Avatar/Avatar.esm.js.map +1 -1
- package/dist/components/Avatar/definition.esm.js +13 -0
- package/dist/components/Avatar/definition.esm.js.map +1 -0
- package/dist/components/Box/Box.esm.js +2 -1
- package/dist/components/Box/Box.esm.js.map +1 -1
- package/dist/components/Box/definition.esm.js +32 -0
- package/dist/components/Box/definition.esm.js.map +1 -0
- package/dist/components/Button/Button.esm.js +37 -14
- package/dist/components/Button/Button.esm.js.map +1 -1
- package/dist/components/Button/Button.module.css.esm.js +2 -2
- package/dist/components/Button/definition.esm.js +15 -0
- package/dist/components/Button/definition.esm.js.map +1 -0
- package/dist/components/ButtonIcon/ButtonIcon.esm.js +46 -10
- package/dist/components/ButtonIcon/ButtonIcon.esm.js.map +1 -1
- package/dist/components/ButtonIcon/definition.esm.js +10 -0
- package/dist/components/ButtonIcon/definition.esm.js.map +1 -0
- package/dist/components/ButtonLink/ButtonLink.esm.js +29 -36
- package/dist/components/ButtonLink/ButtonLink.esm.js.map +1 -1
- package/dist/components/ButtonLink/definition.esm.js +8 -0
- package/dist/components/ButtonLink/definition.esm.js.map +1 -0
- package/dist/components/Card/Card.esm.js +5 -4
- package/dist/components/Card/Card.esm.js.map +1 -1
- package/dist/components/Card/definition.esm.js +11 -0
- package/dist/components/Card/definition.esm.js.map +1 -0
- package/dist/components/Checkbox/Checkbox.esm.js +2 -1
- package/dist/components/Checkbox/Checkbox.esm.js.map +1 -1
- package/dist/components/Checkbox/definition.esm.js +12 -0
- package/dist/components/Checkbox/definition.esm.js.map +1 -0
- package/dist/components/Container/Container.esm.js +2 -1
- package/dist/components/Container/Container.esm.js.map +1 -1
- package/dist/components/Container/definition.esm.js +9 -0
- package/dist/components/Container/definition.esm.js.map +1 -0
- package/dist/components/Dialog/Dialog.esm.js +5 -4
- package/dist/components/Dialog/Dialog.esm.js.map +1 -1
- package/dist/components/Dialog/Dialog.module.css.esm.js +1 -1
- package/dist/components/Dialog/definition.esm.js +13 -0
- package/dist/components/Dialog/definition.esm.js.map +1 -0
- package/dist/components/FieldError/FieldError.esm.js +2 -1
- package/dist/components/FieldError/FieldError.esm.js.map +1 -1
- package/dist/components/FieldError/definition.esm.js +8 -0
- package/dist/components/FieldError/definition.esm.js.map +1 -0
- package/dist/components/FieldLabel/FieldLabel.esm.js +2 -1
- package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -1
- package/dist/components/FieldLabel/definition.esm.js +11 -0
- package/dist/components/FieldLabel/definition.esm.js.map +1 -0
- package/dist/components/Flex/Flex.esm.js +2 -1
- package/dist/components/Flex/Flex.esm.js.map +1 -1
- package/dist/components/Flex/definition.esm.js +28 -0
- package/dist/components/Flex/definition.esm.js.map +1 -0
- package/dist/components/Grid/Grid.esm.js +3 -2
- package/dist/components/Grid/Grid.esm.js.map +1 -1
- package/dist/components/Grid/definition.esm.js +32 -0
- package/dist/components/Grid/definition.esm.js.map +1 -0
- package/dist/components/Header/Header.esm.js +2 -1
- package/dist/components/Header/Header.esm.js.map +1 -1
- package/dist/components/Header/HeaderToolbar.esm.js +2 -1
- package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
- package/dist/components/Header/definition.esm.js +14 -0
- package/dist/components/Header/definition.esm.js.map +1 -0
- package/dist/components/HeaderPage/HeaderPage.esm.js +2 -1
- package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
- package/dist/components/HeaderPage/definition.esm.js +12 -0
- package/dist/components/HeaderPage/definition.esm.js.map +1 -0
- package/dist/components/Link/Link.esm.js +10 -6
- package/dist/components/Link/Link.esm.js.map +1 -1
- package/dist/components/Link/definition.esm.js +14 -0
- package/dist/components/Link/definition.esm.js.map +1 -0
- package/dist/components/Menu/Menu.esm.js +10 -9
- package/dist/components/Menu/Menu.esm.js.map +1 -1
- package/dist/components/Menu/Menu.module.css.esm.js +1 -1
- package/dist/components/Menu/definition.esm.js +23 -0
- package/dist/components/Menu/definition.esm.js.map +1 -0
- package/dist/components/Popover/Popover.module.css.esm.js +1 -1
- package/dist/components/Popover/definition.esm.js +8 -0
- package/dist/components/Popover/definition.esm.js.map +1 -0
- package/dist/components/RadioGroup/RadioGroup.esm.js +3 -2
- package/dist/components/RadioGroup/RadioGroup.esm.js.map +1 -1
- package/dist/components/RadioGroup/definition.esm.js +10 -0
- package/dist/components/RadioGroup/definition.esm.js.map +1 -0
- package/dist/components/SearchField/SearchField.esm.js +2 -1
- package/dist/components/SearchField/SearchField.esm.js.map +1 -1
- package/dist/components/SearchField/SearchField.module.css.esm.js +2 -2
- package/dist/components/SearchField/definition.esm.js +16 -0
- package/dist/components/SearchField/definition.esm.js.map +1 -0
- package/dist/components/Select/Select.esm.js +28 -59
- package/dist/components/Select/Select.esm.js.map +1 -1
- package/dist/components/Select/Select.module.css.esm.js +2 -2
- package/dist/components/Select/SelectContent.esm.js +56 -0
- package/dist/components/Select/SelectContent.esm.js.map +1 -0
- package/dist/components/Select/SelectListBox.esm.js +55 -0
- package/dist/components/Select/SelectListBox.esm.js.map +1 -0
- package/dist/components/Select/SelectTrigger.esm.js +24 -0
- package/dist/components/Select/SelectTrigger.esm.js.map +1 -0
- package/dist/components/Select/definition.esm.js +23 -0
- package/dist/components/Select/definition.esm.js.map +1 -0
- package/dist/components/Skeleton/Skeleton.esm.js +2 -1
- package/dist/components/Skeleton/Skeleton.esm.js.map +1 -1
- package/dist/components/Skeleton/definition.esm.js +8 -0
- package/dist/components/Skeleton/definition.esm.js.map +1 -0
- package/dist/components/Switch/Switch.esm.js +2 -1
- package/dist/components/Switch/Switch.esm.js.map +1 -1
- package/dist/components/Switch/definition.esm.js +9 -0
- package/dist/components/Switch/definition.esm.js.map +1 -0
- package/dist/components/Table/components/Cell.esm.js +2 -1
- package/dist/components/Table/components/Cell.esm.js.map +1 -1
- package/dist/components/Table/components/CellProfile.esm.js +5 -7
- package/dist/components/Table/components/CellProfile.esm.js.map +1 -1
- package/dist/components/Table/components/Column.esm.js +2 -4
- package/dist/components/Table/components/Column.esm.js.map +1 -1
- package/dist/components/Table/components/Row.esm.js +4 -4
- package/dist/components/Table/components/Row.esm.js.map +1 -1
- package/dist/components/Table/components/Table.esm.js +2 -4
- package/dist/components/Table/components/Table.esm.js.map +1 -1
- package/dist/components/Table/components/TableBody.esm.js +2 -4
- package/dist/components/Table/components/TableBody.esm.js.map +1 -1
- package/dist/components/Table/components/TableHeader.esm.js +2 -4
- package/dist/components/Table/components/TableHeader.esm.js.map +1 -1
- package/dist/components/Table/definition.esm.js +24 -0
- package/dist/components/Table/definition.esm.js.map +1 -0
- package/dist/components/TablePagination/TablePagination.esm.js +2 -1
- package/dist/components/TablePagination/TablePagination.esm.js.map +1 -1
- package/dist/components/TablePagination/definition.esm.js +11 -0
- package/dist/components/TablePagination/definition.esm.js.map +1 -0
- package/dist/components/Tabs/Tabs.esm.js +5 -4
- package/dist/components/Tabs/Tabs.esm.js.map +1 -1
- package/dist/components/Tabs/TabsIndicators.esm.js +2 -1
- package/dist/components/Tabs/TabsIndicators.esm.js.map +1 -1
- package/dist/components/Tabs/definition.esm.js +14 -0
- package/dist/components/Tabs/definition.esm.js.map +1 -0
- package/dist/components/TagGroup/TagGroup.esm.js +3 -2
- package/dist/components/TagGroup/TagGroup.esm.js.map +1 -1
- package/dist/components/TagGroup/definition.esm.js +12 -0
- package/dist/components/TagGroup/definition.esm.js.map +1 -0
- package/dist/components/Text/Text.esm.js +10 -6
- package/dist/components/Text/Text.esm.js.map +1 -1
- package/dist/components/Text/definition.esm.js +14 -0
- package/dist/components/Text/definition.esm.js.map +1 -0
- package/dist/components/TextField/TextField.esm.js +2 -1
- package/dist/components/TextField/TextField.esm.js.map +1 -1
- package/dist/components/TextField/definition.esm.js +17 -0
- package/dist/components/TextField/definition.esm.js.map +1 -0
- package/dist/components/Tooltip/Tooltip.esm.js +2 -1
- package/dist/components/Tooltip/Tooltip.esm.js.map +1 -1
- package/dist/components/Tooltip/definition.esm.js +9 -0
- package/dist/components/Tooltip/definition.esm.js.map +1 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.esm.js +5 -1
- package/dist/components/VisuallyHidden/VisuallyHidden.esm.js.map +1 -1
- package/dist/components/VisuallyHidden/definition.esm.js +8 -0
- package/dist/components/VisuallyHidden/definition.esm.js.map +1 -0
- package/dist/hooks/useStyles.esm.js +1 -3
- package/dist/hooks/useStyles.esm.js.map +1 -1
- package/dist/index.d.ts +524 -363
- package/dist/index.esm.js +31 -2
- package/dist/index.esm.js.map +1 -1
- package/package.json +2 -3
- package/dist/components/Collapsible/Collapsible.esm.js +0 -55
- package/dist/components/Collapsible/Collapsible.esm.js.map +0 -1
- package/dist/components/Collapsible/Collapsible.module.css.esm.js +0 -8
- package/dist/components/Collapsible/Collapsible.module.css.esm.js.map +0 -1
- package/dist/utils/componentDefinitions.esm.js +0 -388
- package/dist/utils/componentDefinitions.esm.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Button.module.css';\n\n/** @public */\nexport const Button = forwardRef(\n (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
1
|
+
{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ButtonDefinition } from './definition';\nimport styles from './Button.module.css';\n\n/** @public */\nexport const Button = forwardRef(\n (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n ButtonDefinition,\n {\n size: 'small',\n variant: 'primary',\n ...props,\n },\n );\n\n const { children, className, iconStart, iconEnd, loading, ...rest } =\n cleanedProps;\n\n return (\n <RAButton\n className={clsx(classNames.root, styles[classNames.root], className)}\n ref={ref}\n isPending={loading}\n {...dataAttributes}\n {...rest}\n >\n {({ isPending }) => (\n <>\n <span\n className={clsx(classNames.content, styles[classNames.content])}\n >\n {iconStart}\n {children}\n {iconEnd}\n </span>\n\n {isPending && (\n <ProgressBar\n aria-label=\"Loading\"\n isIndeterminate\n className={clsx(classNames.spinner, styles[classNames.spinner])}\n >\n <RiLoader4Line aria-hidden=\"true\" />\n </ProgressBar>\n )}\n </>\n )}\n </RAButton>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton","styles"],"mappings":";;;;;;;;;AA0BO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,gBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,OAAA,EAAS,SAAA;AAAA,QACT,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,OAAA,EAAS,GAAG,MAAK,GAChE,YAAA;AAEF,IAAA,uBACE,GAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMC,aAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACA,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,SAAA,EAAU,qBACZ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAASA,YAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE7D,QAAA,EAAA;AAAA,gBAAA,SAAA;AAAA,gBACA,QAAA;AAAA,gBACA;AAAA;AAAA;AAAA,WACH;AAAA,UAEC,SAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,SAAA;AAAA,cACX,eAAA,EAAe,IAAA;AAAA,cACf,WAAW,IAAA,CAAK,UAAA,CAAW,SAASA,YAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE9D,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AACpC,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
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
|
|
4
|
-
var stylesButton = {"bui-Button":"Button-module_bui-Button__1BvMm"};
|
|
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\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 background-color: var(--bui-bg-surface-1);\n box-shadow: inset 0 0 0 1px var(--bui-border);\n color: var(--bui-fg-primary);\n\n &:hover {\n box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n transition: box-shadow 150ms ease;\n }\n\n &:active {\n box-shadow: inset 0 0 0 1px var(--bui-border-pressed);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n box-shadow: inset 0 0 0 1px var(--bui-border-disabled);\n color: var(--bui-fg-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='tertiary'] {\n background-color: transparent;\n color: var(--bui-fg-primary);\n\n &:hover {\n background-color: var(--bui-bg-surface-1);\n transition: background-color 200ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-surface-2);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'],\n &[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
|
+
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
|
|
|
7
7
|
export { stylesButton as default };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
const ButtonDefinition = {
|
|
2
|
+
classNames: {
|
|
3
|
+
root: "bui-Button",
|
|
4
|
+
content: "bui-ButtonContent",
|
|
5
|
+
spinner: "bui-ButtonSpinner"
|
|
6
|
+
},
|
|
7
|
+
dataAttributes: {
|
|
8
|
+
size: ["small", "medium", "large"],
|
|
9
|
+
variant: ["primary", "secondary", "tertiary"],
|
|
10
|
+
loading: [true, false]
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { ButtonDefinition };
|
|
15
|
+
//# sourceMappingURL=definition.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Button/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Button\n * @public\n */\nexport const ButtonDefinition = {\n classNames: {\n root: 'bui-Button',\n content: 'bui-ButtonContent',\n spinner: 'bui-ButtonSpinner',\n },\n dataAttributes: {\n size: ['small', 'medium', 'large'] as const,\n variant: ['primary', 'secondary', 'tertiary'] as const,\n loading: [true, false] as const,\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAA,EAAU,OAAO,CAAA;AAAA,IACjC,OAAA,EAAS,CAAC,SAAA,EAAW,WAAA,EAAa,UAAU,CAAA;AAAA,IAC5C,OAAA,EAAS,CAAC,IAAA,EAAM,KAAK;AAAA;AAEzB;;;;"}
|
|
@@ -1,20 +1,26 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import { Button } from 'react-aria-components';
|
|
4
|
+
import { Button, ProgressBar } from 'react-aria-components';
|
|
5
|
+
import { RiLoader4Line } from '@remixicon/react';
|
|
5
6
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
7
|
+
import { ButtonDefinition } from '../Button/definition.esm.js';
|
|
8
|
+
import { ButtonIconDefinition } from './definition.esm.js';
|
|
6
9
|
import stylesButtonIcon from './ButtonIcon.module.css.esm.js';
|
|
7
10
|
import stylesButton from '../Button/Button.module.css.esm.js';
|
|
8
11
|
|
|
9
12
|
const ButtonIcon = forwardRef(
|
|
10
13
|
(props, ref) => {
|
|
11
|
-
const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
15
|
+
ButtonDefinition,
|
|
16
|
+
{
|
|
17
|
+
size: "small",
|
|
18
|
+
variant: "primary",
|
|
19
|
+
...props
|
|
20
|
+
}
|
|
21
|
+
);
|
|
22
|
+
const { classNames: classNamesButtonIcon } = useStyles(ButtonIconDefinition);
|
|
23
|
+
const { className, icon, loading, ...rest } = cleanedProps;
|
|
18
24
|
return /* @__PURE__ */ jsx(
|
|
19
25
|
Button,
|
|
20
26
|
{
|
|
@@ -26,9 +32,39 @@ const ButtonIcon = forwardRef(
|
|
|
26
32
|
className
|
|
27
33
|
),
|
|
28
34
|
ref,
|
|
35
|
+
isPending: loading,
|
|
29
36
|
...dataAttributes,
|
|
30
37
|
...rest,
|
|
31
|
-
children:
|
|
38
|
+
children: ({ isPending }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
39
|
+
/* @__PURE__ */ jsx(
|
|
40
|
+
"span",
|
|
41
|
+
{
|
|
42
|
+
className: clsx(
|
|
43
|
+
classNames.content,
|
|
44
|
+
classNamesButtonIcon.content,
|
|
45
|
+
stylesButton[classNames.content],
|
|
46
|
+
stylesButtonIcon[classNamesButtonIcon.content],
|
|
47
|
+
className
|
|
48
|
+
),
|
|
49
|
+
children: icon
|
|
50
|
+
}
|
|
51
|
+
),
|
|
52
|
+
isPending && /* @__PURE__ */ jsx(
|
|
53
|
+
ProgressBar,
|
|
54
|
+
{
|
|
55
|
+
"aria-label": "Loading",
|
|
56
|
+
isIndeterminate: true,
|
|
57
|
+
className: clsx(
|
|
58
|
+
classNames.spinner,
|
|
59
|
+
classNamesButtonIcon.spinner,
|
|
60
|
+
stylesButton[classNames.spinner],
|
|
61
|
+
stylesButtonIcon[classNamesButtonIcon.spinner],
|
|
62
|
+
className
|
|
63
|
+
),
|
|
64
|
+
children: /* @__PURE__ */ jsx(RiLoader4Line, { "aria-hidden": "true" })
|
|
65
|
+
}
|
|
66
|
+
)
|
|
67
|
+
] })
|
|
32
68
|
}
|
|
33
69
|
);
|
|
34
70
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport stylesButtonIcon from './ButtonIcon.module.css';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
1
|
+
{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ButtonDefinition } from '../Button/definition';\nimport { ButtonIconDefinition } from './definition';\nimport stylesButtonIcon from './ButtonIcon.module.css';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n ButtonDefinition,\n {\n size: 'small',\n variant: 'primary',\n ...props,\n },\n );\n\n const { classNames: classNamesButtonIcon } =\n useStyles(ButtonIconDefinition);\n\n const { className, icon, loading, ...rest } = cleanedProps;\n\n return (\n <RAButton\n className={clsx(\n classNames.root,\n classNamesButtonIcon.root,\n stylesButton[classNames.root],\n stylesButtonIcon[classNamesButtonIcon.root],\n className,\n )}\n ref={ref}\n isPending={loading}\n {...dataAttributes}\n {...rest}\n >\n {({ isPending }) => (\n <>\n <span\n className={clsx(\n classNames.content,\n classNamesButtonIcon.content,\n stylesButton[classNames.content],\n stylesButtonIcon[classNamesButtonIcon.content],\n className,\n )}\n >\n {icon}\n </span>\n\n {isPending && (\n <ProgressBar\n aria-label=\"Loading\"\n isIndeterminate\n className={clsx(\n classNames.spinner,\n classNamesButtonIcon.spinner,\n stylesButton[classNames.spinner],\n stylesButtonIcon[classNamesButtonIcon.spinner],\n className,\n )}\n >\n <RiLoader4Line aria-hidden=\"true\" />\n </ProgressBar>\n )}\n </>\n )}\n </RAButton>\n );\n },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;;;;;;AA4BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,gBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,OAAA,EAAS,SAAA;AAAA,QACT,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GACvC,UAAU,oBAAoB,CAAA;AAEhC,IAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAE9C,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B,gBAAA,CAAiB,qBAAqB,IAAI,CAAA;AAAA,UAC1C;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,SAAA,EAAU,qBACZ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,OAAA;AAAA,gBACX,oBAAA,CAAqB,OAAA;AAAA,gBACrB,YAAA,CAAa,WAAW,OAAO,CAAA;AAAA,gBAC/B,gBAAA,CAAiB,qBAAqB,OAAO,CAAA;AAAA,gBAC7C;AAAA,eACF;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAEC,SAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,SAAA;AAAA,cACX,eAAA,EAAe,IAAA;AAAA,cACf,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,OAAA;AAAA,gBACX,oBAAA,CAAqB,OAAA;AAAA,gBACrB,YAAA,CAAa,WAAW,OAAO,CAAA;AAAA,gBAC/B,gBAAA,CAAiB,qBAAqB,OAAO,CAAA;AAAA,gBAC7C;AAAA,eACF;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AACpC,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonIcon/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ButtonIcon\n * @public\n */\nexport const ButtonIconDefinition = {\n classNames: {\n root: 'bui-ButtonIcon',\n content: 'bui-ButtonIconContent',\n spinner: 'bui-ButtonIconSpinner',\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,oBAAA,GAAuB;AAAA,EAClC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS,uBAAA;AAAA,IACT,OAAA,EAAS;AAAA;AAEb;;;;"}
|
|
@@ -1,46 +1,29 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { Link, RouterProvider } from 'react-aria-components';
|
|
5
5
|
import { useNavigate, useHref } from 'react-router-dom';
|
|
6
6
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
7
|
+
import { ButtonDefinition } from '../Button/definition.esm.js';
|
|
8
|
+
import { ButtonLinkDefinition } from './definition.esm.js';
|
|
7
9
|
import { isExternalLink } from '../../utils/isExternalLink.esm.js';
|
|
8
10
|
import stylesButton from '../Button/Button.module.css.esm.js';
|
|
9
11
|
|
|
10
12
|
const ButtonLink = forwardRef(
|
|
11
13
|
(props, ref) => {
|
|
12
14
|
const navigate = useNavigate();
|
|
13
|
-
const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
16
|
+
ButtonDefinition,
|
|
17
|
+
{
|
|
18
|
+
size: "small",
|
|
19
|
+
variant: "primary",
|
|
20
|
+
...props
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
const { classNames: classNamesButtonLink } = useStyles(ButtonLinkDefinition);
|
|
19
24
|
const { children, className, iconStart, iconEnd, href, ...rest } = cleanedProps;
|
|
20
25
|
const isExternal = isExternalLink(href);
|
|
21
|
-
|
|
22
|
-
return /* @__PURE__ */ jsxs(
|
|
23
|
-
Link,
|
|
24
|
-
{
|
|
25
|
-
className: clsx(
|
|
26
|
-
classNames.root,
|
|
27
|
-
classNamesButtonLink.root,
|
|
28
|
-
stylesButton[classNames.root],
|
|
29
|
-
className
|
|
30
|
-
),
|
|
31
|
-
ref,
|
|
32
|
-
...dataAttributes,
|
|
33
|
-
href,
|
|
34
|
-
...rest,
|
|
35
|
-
children: [
|
|
36
|
-
iconStart,
|
|
37
|
-
children,
|
|
38
|
-
iconEnd
|
|
39
|
-
]
|
|
40
|
-
}
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsxs(
|
|
26
|
+
const linkButton = /* @__PURE__ */ jsx(
|
|
44
27
|
Link,
|
|
45
28
|
{
|
|
46
29
|
className: clsx(
|
|
@@ -53,13 +36,23 @@ const ButtonLink = forwardRef(
|
|
|
53
36
|
...dataAttributes,
|
|
54
37
|
href,
|
|
55
38
|
...rest,
|
|
56
|
-
children:
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
39
|
+
children: /* @__PURE__ */ jsxs(
|
|
40
|
+
"span",
|
|
41
|
+
{
|
|
42
|
+
className: clsx(classNames.content, stylesButton[classNames.content]),
|
|
43
|
+
children: [
|
|
44
|
+
iconStart,
|
|
45
|
+
children,
|
|
46
|
+
iconEnd
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
)
|
|
61
50
|
}
|
|
62
|
-
)
|
|
51
|
+
);
|
|
52
|
+
if (isExternal) {
|
|
53
|
+
return linkButton;
|
|
54
|
+
}
|
|
55
|
+
return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: linkButton });
|
|
63
56
|
}
|
|
64
57
|
);
|
|
65
58
|
ButtonLink.displayName = "ButtonLink";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink, RouterProvider } from 'react-aria-components';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n const navigate = useNavigate();\n\n const { classNames, dataAttributes, cleanedProps } = useStyles(
|
|
1
|
+
{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink, RouterProvider } from 'react-aria-components';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ButtonDefinition } from '../Button/definition';\nimport { ButtonLinkDefinition } from './definition';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n const navigate = useNavigate();\n\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n ButtonDefinition,\n {\n size: 'small',\n variant: 'primary',\n ...props,\n },\n );\n\n const { classNames: classNamesButtonLink } =\n useStyles(ButtonLinkDefinition);\n\n const { children, className, iconStart, iconEnd, href, ...rest } =\n cleanedProps;\n\n const isExternal = isExternalLink(href);\n\n const linkButton = (\n <RALink\n className={clsx(\n classNames.root,\n classNamesButtonLink.root,\n stylesButton[classNames.root],\n className,\n )}\n ref={ref}\n {...dataAttributes}\n href={href}\n {...rest}\n >\n <span\n className={clsx(classNames.content, stylesButton[classNames.content])}\n >\n {iconStart}\n {children}\n {iconEnd}\n </span>\n </RALink>\n );\n\n // If it's an external link, render RALink without RouterProvider\n if (isExternal) {\n return linkButton;\n }\n\n // For internal links, use RouterProvider\n return (\n <RouterProvider navigate={navigate} useHref={useHref}>\n {linkButton}\n </RouterProvider>\n );\n },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;;;;;AA4BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,gBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,OAAA,EAAS,SAAA;AAAA,QACT,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GACvC,UAAU,oBAAoB,CAAA;AAEhC,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,IAAA,EAAM,GAAG,MAAK,GAC7D,YAAA;AAEF,IAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,IAAA,MAAM,UAAA,mBACJ,GAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,YAAA,CAAa,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,YAEnE,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,cACA,QAAA;AAAA,cACA;AAAA;AAAA;AAAA;AACH;AAAA,KACF;AAIF,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,OAAO,UAAA;AAAA,IACT;AAGA,IAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,UAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonLink/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ButtonLink\n * @public\n */\nexport const ButtonLinkDefinition = {\n classNames: {\n root: 'bui-ButtonLink',\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,oBAAA,GAAuB;AAAA,EAClC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA;AAEV;;;;"}
|
|
@@ -2,10 +2,11 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
5
|
+
import { CardDefinition } from './definition.esm.js';
|
|
5
6
|
import styles from './Card.module.css.esm.js';
|
|
6
7
|
|
|
7
8
|
const Card = forwardRef((props, ref) => {
|
|
8
|
-
const { classNames, cleanedProps } = useStyles(
|
|
9
|
+
const { classNames, cleanedProps } = useStyles(CardDefinition, props);
|
|
9
10
|
const { className, ...rest } = cleanedProps;
|
|
10
11
|
return /* @__PURE__ */ jsx(
|
|
11
12
|
"div",
|
|
@@ -18,7 +19,7 @@ const Card = forwardRef((props, ref) => {
|
|
|
18
19
|
});
|
|
19
20
|
const CardHeader = forwardRef(
|
|
20
21
|
(props, ref) => {
|
|
21
|
-
const { classNames, cleanedProps } = useStyles(
|
|
22
|
+
const { classNames, cleanedProps } = useStyles(CardDefinition, props);
|
|
22
23
|
const { className, ...rest } = cleanedProps;
|
|
23
24
|
return /* @__PURE__ */ jsx(
|
|
24
25
|
"div",
|
|
@@ -36,7 +37,7 @@ const CardHeader = forwardRef(
|
|
|
36
37
|
);
|
|
37
38
|
const CardBody = forwardRef(
|
|
38
39
|
(props, ref) => {
|
|
39
|
-
const { classNames, cleanedProps } = useStyles(
|
|
40
|
+
const { classNames, cleanedProps } = useStyles(CardDefinition, props);
|
|
40
41
|
const { className, ...rest } = cleanedProps;
|
|
41
42
|
return /* @__PURE__ */ jsx(
|
|
42
43
|
"div",
|
|
@@ -50,7 +51,7 @@ const CardBody = forwardRef(
|
|
|
50
51
|
);
|
|
51
52
|
const CardFooter = forwardRef(
|
|
52
53
|
(props, ref) => {
|
|
53
|
-
const { classNames, cleanedProps } = useStyles(
|
|
54
|
+
const { classNames, cleanedProps } = useStyles(CardDefinition, props);
|
|
54
55
|
const { className, ...rest } = cleanedProps;
|
|
55
56
|
return /* @__PURE__ */ jsx(
|
|
56
57
|
"div",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.esm.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type {\n CardProps,\n CardHeaderProps,\n CardBodyProps,\n CardFooterProps,\n} from './types';\nimport styles from './Card.module.css';\n\n/**\n * Card component.\n *\n * @public\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n const { classNames, cleanedProps } = useStyles(
|
|
1
|
+
{"version":3,"file":"Card.esm.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { CardDefinition } from './definition';\nimport type {\n CardProps,\n CardHeaderProps,\n CardBodyProps,\n CardFooterProps,\n} from './types';\nimport styles from './Card.module.css';\n\n/**\n * Card component.\n *\n * @public\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n const { classNames, cleanedProps } = useStyles(CardDefinition, props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <div\n ref={ref}\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...rest}\n />\n );\n});\n\n/**\n * CardHeader component.\n *\n * @public\n */\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles(CardDefinition, props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <div\n ref={ref}\n className={clsx(\n classNames.header,\n styles[classNames.header],\n className,\n )}\n {...rest}\n />\n );\n },\n);\n\n/**\n * CardBody component.\n *\n * @public\n */\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles(CardDefinition, props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <div\n ref={ref}\n className={clsx(classNames.body, styles[classNames.body], className)}\n {...rest}\n />\n );\n },\n);\n\n/**\n * CardFooter component.\n *\n * @public\n */\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles(CardDefinition, props);\n const { className, ...rest } = cleanedProps;\n\n return (\n <div\n ref={ref}\n className={clsx(\n classNames.footer,\n styles[classNames.footer],\n className,\n )}\n {...rest}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;AAiCO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AAOM,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,MAAA;AAAA,UACX,MAAA,CAAO,WAAW,MAAM,CAAA;AAAA,UACxB;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAOO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAOO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,MAAA;AAAA,UACX,MAAA,CAAO,WAAW,MAAM,CAAA;AAAA,UACxB;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Card/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Card\n * @public\n */\nexport const CardDefinition = {\n classNames: {\n root: 'bui-Card',\n header: 'bui-CardHeader',\n body: 'bui-CardBody',\n footer: 'bui-CardFooter',\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,UAAA;AAAA,IACN,MAAA,EAAQ,gBAAA;AAAA,IACR,IAAA,EAAM,cAAA;AAAA,IACN,MAAA,EAAQ;AAAA;AAEZ;;;;"}
|
|
@@ -2,13 +2,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { Checkbox as Checkbox$1 } from 'react-aria-components';
|
|
4
4
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
5
|
+
import { CheckboxDefinition } from './definition.esm.js';
|
|
5
6
|
import clsx from 'clsx';
|
|
6
7
|
import styles from './Checkbox.module.css.esm.js';
|
|
7
8
|
import { RiCheckLine } from '@remixicon/react';
|
|
8
9
|
|
|
9
10
|
const Checkbox = forwardRef(
|
|
10
11
|
(props, ref) => {
|
|
11
|
-
const { classNames } = useStyles(
|
|
12
|
+
const { classNames } = useStyles(CheckboxDefinition);
|
|
12
13
|
const { className, children, ...rest } = props;
|
|
13
14
|
return /* @__PURE__ */ jsxs(
|
|
14
15
|
Checkbox$1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Checkbox as RACheckbox } from 'react-aria-components';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport clsx from 'clsx';\nimport styles from './Checkbox.module.css';\nimport { RiCheckLine } from '@remixicon/react';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (props, ref) => {\n const { classNames } = useStyles(
|
|
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 RACheckbox } from 'react-aria-components';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { CheckboxDefinition } from './definition';\nimport clsx from 'clsx';\nimport styles from './Checkbox.module.css';\nimport { RiCheckLine } from '@remixicon/react';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (props, ref) => {\n const { classNames } = useStyles(CheckboxDefinition);\n const { className, children, ...rest } = props;\n\n return (\n <RACheckbox\n ref={ref}\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...rest}\n >\n <div\n className={clsx(classNames.indicator, styles[classNames.indicator])}\n >\n <RiCheckLine size={12} />\n </div>\n {children}\n </RACheckbox>\n );\n },\n);\n"],"names":["RACheckbox"],"mappings":";;;;;;;;;AA0BO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,kBAAkB,CAAA;AACnD,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAEzC,IAAA,uBACE,IAAA;AAAA,MAACA,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,WAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC,CAAA;AAAA,cAElE,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA,WACzB;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Checkbox/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Checkbox\n * @public\n */\nexport const CheckboxDefinition = {\n classNames: {\n root: 'bui-Checkbox',\n indicator: 'bui-CheckboxIndicator',\n },\n dataAttributes: {\n selected: [true, false] as const,\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,cAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK;AAAA;AAE1B;;;;"}
|
|
@@ -2,12 +2,13 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
5
|
+
import { ContainerDefinition } from './definition.esm.js';
|
|
5
6
|
import styles from './Container.module.css.esm.js';
|
|
6
7
|
|
|
7
8
|
const Container = forwardRef(
|
|
8
9
|
(props, ref) => {
|
|
9
10
|
const { classNames, utilityClasses, style, cleanedProps } = useStyles(
|
|
10
|
-
|
|
11
|
+
ContainerDefinition,
|
|
11
12
|
props
|
|
12
13
|
);
|
|
13
14
|
const { className, ...rest } = cleanedProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.esm.js","sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { ContainerProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Container.module.css';\n\n/** @public */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n (props, ref) => {\n const { classNames, utilityClasses, style, cleanedProps } = useStyles(\n
|
|
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 { forwardRef } from 'react';\nimport { ContainerProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ContainerDefinition } from './definition';\nimport styles from './Container.module.css';\n\n/** @public */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n (props, ref) => {\n const { classNames, utilityClasses, style, cleanedProps } = useStyles(\n ContainerDefinition,\n props,\n );\n\n const { className, ...rest } = cleanedProps;\n\n return (\n <div\n ref={ref}\n className={clsx(\n classNames.root,\n utilityClasses,\n styles[classNames.root],\n className,\n )}\n style={style}\n {...rest}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;AAwBO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,MAC1D,mBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,cAAA;AAAA,UACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,UACtB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Container/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Container\n * @public\n */\nexport const ContainerDefinition = {\n classNames: {\n root: 'bui-Container',\n },\n utilityProps: ['my', 'mt', 'mb', 'py', 'pt', 'pb', 'display'],\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,mBAAA,GAAsB;AAAA,EACjC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc,CAAC,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,SAAS;AAC9D;;;;"}
|
|
@@ -5,6 +5,7 @@ import clsx from 'clsx';
|
|
|
5
5
|
import { RiCloseLine } from '@remixicon/react';
|
|
6
6
|
import { Button } from '../Button/Button.esm.js';
|
|
7
7
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
8
|
+
import { DialogDefinition } from './definition.esm.js';
|
|
8
9
|
import { Flex } from '../Flex/Flex.esm.js';
|
|
9
10
|
import styles from './Dialog.module.css.esm.js';
|
|
10
11
|
|
|
@@ -13,7 +14,7 @@ const DialogTrigger = (props) => {
|
|
|
13
14
|
};
|
|
14
15
|
const Dialog = forwardRef(
|
|
15
16
|
(props, ref) => {
|
|
16
|
-
const { classNames, cleanedProps } = useStyles(
|
|
17
|
+
const { classNames, cleanedProps } = useStyles(DialogDefinition, props);
|
|
17
18
|
const { className, children, width, height, style, ...rest } = cleanedProps;
|
|
18
19
|
return /* @__PURE__ */ jsx(
|
|
19
20
|
Modal,
|
|
@@ -45,7 +46,7 @@ const Dialog = forwardRef(
|
|
|
45
46
|
);
|
|
46
47
|
Dialog.displayName = "Dialog";
|
|
47
48
|
const DialogHeader = forwardRef((props, ref) => {
|
|
48
|
-
const { classNames, cleanedProps } = useStyles(
|
|
49
|
+
const { classNames, cleanedProps } = useStyles(DialogDefinition, props);
|
|
49
50
|
const { className, children, ...rest } = cleanedProps;
|
|
50
51
|
return /* @__PURE__ */ jsxs(
|
|
51
52
|
Flex,
|
|
@@ -70,7 +71,7 @@ const DialogHeader = forwardRef((props, ref) => {
|
|
|
70
71
|
DialogHeader.displayName = "DialogHeader";
|
|
71
72
|
const DialogBody = forwardRef(
|
|
72
73
|
(props, ref) => {
|
|
73
|
-
const { classNames, cleanedProps } = useStyles(
|
|
74
|
+
const { classNames, cleanedProps } = useStyles(DialogDefinition, props);
|
|
74
75
|
const { className, children, ...rest } = cleanedProps;
|
|
75
76
|
return /* @__PURE__ */ jsx(
|
|
76
77
|
"div",
|
|
@@ -85,7 +86,7 @@ const DialogBody = forwardRef(
|
|
|
85
86
|
);
|
|
86
87
|
DialogBody.displayName = "DialogBody";
|
|
87
88
|
const DialogFooter = forwardRef((props, ref) => {
|
|
88
|
-
const { classNames, cleanedProps } = useStyles(
|
|
89
|
+
const { classNames, cleanedProps } = useStyles(DialogDefinition, props);
|
|
89
90
|
const { className, children, ...rest } = cleanedProps;
|
|
90
91
|
return /* @__PURE__ */ jsx(
|
|
91
92
|
"div",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.esm.js","sources":["../../../src/components/Dialog/Dialog.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 Dialog as RADialog,\n DialogTrigger as RADialogTrigger,\n Modal,\n Heading,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport type {\n DialogTriggerProps,\n DialogHeaderProps,\n DialogProps,\n DialogBodyProps,\n} from './types';\nimport { RiCloseLine } from '@remixicon/react';\nimport { Button } from '../Button';\nimport { useStyles } from '../../hooks/useStyles';\nimport { Flex } from '../Flex';\nimport styles from './Dialog.module.css';\n\n/** @public */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n return <RADialogTrigger {...props} />;\n};\n\n/** @public */\nexport const Dialog = forwardRef<React.ElementRef<typeof Modal>, DialogProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles(
|
|
1
|
+
{"version":3,"file":"Dialog.esm.js","sources":["../../../src/components/Dialog/Dialog.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 Dialog as RADialog,\n DialogTrigger as RADialogTrigger,\n Modal,\n Heading,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport type {\n DialogTriggerProps,\n DialogHeaderProps,\n DialogProps,\n DialogBodyProps,\n} from './types';\nimport { RiCloseLine } from '@remixicon/react';\nimport { Button } from '../Button';\nimport { useStyles } from '../../hooks/useStyles';\nimport { DialogDefinition } from './definition';\nimport { Flex } from '../Flex';\nimport styles from './Dialog.module.css';\n\n/** @public */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n return <RADialogTrigger {...props} />;\n};\n\n/** @public */\nexport const Dialog = forwardRef<React.ElementRef<typeof Modal>, DialogProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles(DialogDefinition, props);\n const { className, children, width, height, style, ...rest } = cleanedProps;\n\n return (\n <Modal\n ref={ref}\n className={clsx(classNames.overlay, styles[classNames.overlay])}\n isDismissable\n isKeyboardDismissDisabled={false}\n {...rest}\n >\n <RADialog\n className={clsx(\n classNames.dialog,\n styles[classNames.dialog],\n className,\n )}\n style={{\n ['--bui-dialog-min-width' as keyof React.CSSProperties]:\n typeof width === 'number' ? `${width}px` : width || '400px',\n ['--bui-dialog-min-height' as keyof React.CSSProperties]: height\n ? typeof height === 'number'\n ? `${height}px`\n : height\n : 'auto',\n ...style,\n }}\n >\n {children}\n </RADialog>\n </Modal>\n );\n },\n);\n\nDialog.displayName = 'Dialog';\n\n/** @public */\nexport const DialogHeader = forwardRef<\n React.ElementRef<'div'>,\n DialogHeaderProps\n>((props, ref) => {\n const { classNames, cleanedProps } = useStyles(DialogDefinition, props);\n const { className, children, ...rest } = cleanedProps;\n\n return (\n <Flex\n ref={ref}\n className={clsx(classNames.header, styles[classNames.header], className)}\n {...rest}\n >\n <Heading\n slot=\"title\"\n className={clsx(classNames.headerTitle, styles[classNames.headerTitle])}\n >\n {children}\n </Heading>\n <Button name=\"close\" aria-label=\"Close\" variant=\"tertiary\" slot=\"close\">\n <RiCloseLine />\n </Button>\n </Flex>\n );\n});\nDialogHeader.displayName = 'DialogHeader';\n\n/** @public */\nexport const DialogBody = forwardRef<React.ElementRef<'div'>, DialogBodyProps>(\n (props, ref) => {\n const { classNames, cleanedProps } = useStyles(DialogDefinition, props);\n const { className, children, ...rest } = cleanedProps;\n\n return (\n <div\n className={clsx(classNames.body, styles[classNames.body], className)}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n\nDialogBody.displayName = 'DialogBody';\n\n/** @public */\nexport const DialogFooter = forwardRef<\n React.ElementRef<'div'>,\n React.ComponentPropsWithoutRef<'div'>\n>((props, ref) => {\n const { classNames, cleanedProps } = useStyles(DialogDefinition, props);\n const { className, children, ...rest } = cleanedProps;\n\n return (\n <div\n ref={ref}\n className={clsx(classNames.footer, styles[classNames.footer], className)}\n {...rest}\n >\n {children}\n </div>\n );\n});\nDialogFooter.displayName = 'DialogFooter';\n"],"names":["RADialogTrigger","RADialog"],"mappings":";;;;;;;;;;;AAsCO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,uBAAO,GAAA,CAACA,eAAA,EAAA,EAAiB,GAAG,KAAA,EAAO,CAAA;AACrC;AAGO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,kBAAkB,KAAK,CAAA;AACtE,IAAA,MAAM,EAAE,WAAW,QAAA,EAAU,KAAA,EAAO,QAAQ,KAAA,EAAO,GAAG,MAAK,GAAI,YAAA;AAE/D,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,QAC9D,aAAA,EAAa,IAAA;AAAA,QACb,yBAAA,EAA2B,KAAA;AAAA,QAC1B,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAACC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,MAAA;AAAA,cACX,MAAA,CAAO,WAAW,MAAM,CAAA;AAAA,cACxB;AAAA,aACF;AAAA,YACA,KAAA,EAAO;AAAA,cACL,CAAC,wBAAqD,GACpD,OAAO,UAAU,QAAA,GAAW,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,GAAO,KAAA,IAAS,OAAA;AAAA,cACtD,CAAC,yBAAsD,GAAG,MAAA,GACtD,OAAO,WAAW,QAAA,GAChB,CAAA,EAAG,MAAM,CAAA,EAAA,CAAA,GACT,MAAA,GACF,MAAA;AAAA,cACJ,GAAG;AAAA,aACL;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;AAGd,MAAM,YAAA,GAAe,UAAA,CAG1B,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,kBAAkB,KAAK,CAAA;AACtE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,MAAA,EAAQ,OAAO,UAAA,CAAW,MAAM,GAAG,SAAS,CAAA;AAAA,MACtE,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,OAAA;AAAA,YACL,WAAW,IAAA,CAAK,UAAA,CAAW,aAAa,MAAA,CAAO,UAAA,CAAW,WAAW,CAAC,CAAA;AAAA,YAErE;AAAA;AAAA,SACH;AAAA,wBACA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,YAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,UAAA,EAAW,IAAA,EAAK,OAAA,EAC9D,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA,EACf;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AACD,YAAA,CAAa,WAAA,GAAc,cAAA;AAGpB,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,kBAAkB,KAAK,CAAA;AACtE,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAGlB,MAAM,YAAA,GAAe,UAAA,CAG1B,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,kBAAkB,KAAK,CAAA;AACtE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,MAAA,EAAQ,OAAO,UAAA,CAAW,MAAM,GAAG,SAAS,CAAA;AAAA,MACtE,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;AACD,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}
|