@carbon/react 1.114.0-rc.0 → 1.115.0-rc.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/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +2816 -1339
- package/es/components/BigNumber/BigNumber.d.ts +82 -0
- package/es/components/BigNumber/BigNumberSkeleton.d.ts +16 -0
- package/es/components/BigNumber/constants.d.ts +19 -0
- package/es/components/BigNumber/index.d.ts +9 -0
- package/es/components/Card/Card.d.ts +48 -0
- package/es/components/Card/Card.js +160 -0
- package/es/components/Card/Card.types.d.ts +119 -0
- package/es/components/Card/CardAction.d.ts +37 -0
- package/es/components/Card/CardAction.js +32 -0
- package/es/components/Card/CardActions.d.ts +30 -0
- package/es/components/Card/CardActions.js +93 -0
- package/es/components/Card/CardBody.d.ts +12 -0
- package/es/components/Card/CardBody.js +35 -0
- package/es/components/Card/CardContext.d.ts +17 -0
- package/es/components/Card/CardContext.js +31 -0
- package/es/components/Card/CardFooter.d.ts +15 -0
- package/es/components/Card/CardFooter.js +45 -0
- package/es/components/Card/CardHeader.d.ts +11 -0
- package/es/components/Card/CardHeader.js +44 -0
- package/es/components/Card/CardHeaderMedia.d.ts +21 -0
- package/es/components/Card/CardHeaderMedia.js +24 -0
- package/es/components/Card/CardMedia.d.ts +35 -0
- package/es/components/Card/CardMedia.js +42 -0
- package/es/components/Card/CardTitle.d.ts +72 -0
- package/es/components/Card/CardTitle.js +86 -0
- package/es/components/Card/CardTitleMedia.d.ts +23 -0
- package/es/components/Card/CardTitleMedia.js +36 -0
- package/es/components/Card/_story-assets/data.d.ts +6 -0
- package/es/components/Card/_story-assets/options.d.ts +47 -0
- package/es/components/Card/index.d.ts +8 -0
- package/es/components/Card/index.js +33 -0
- package/es/components/Checkbox/Checkbox.js +1 -1
- package/es/components/CheckboxGroup/CheckboxGroup.js +1 -1
- package/es/components/ComboBox/ComboBox.js +2 -2
- package/es/components/ComboButton/index.js +1 -1
- package/es/components/ComposedModal/ComposedModal.js +1 -1
- package/es/components/DatePicker/DatePicker.d.ts +1 -1
- package/es/components/DatePicker/DatePicker.js +1 -1
- package/es/components/DatePicker/plugins/rangePlugin.d.ts +1 -1
- package/es/components/DatePickerInput/DatePickerInput.js +1 -1
- package/es/components/Dropdown/Dropdown.js +2 -2
- package/es/components/ExpandableSearch/ExpandableSearch.js +1 -1
- package/es/components/FileUploader/FileUploaderDropContainer.js +11 -5
- package/es/components/FormLabel/FormLabel.d.ts +2 -2
- package/es/components/FormLabel/FormLabel.js +1 -1
- package/es/components/MenuButton/index.js +1 -1
- package/es/components/MultiSelect/FilterableMultiSelect.js +2 -2
- package/es/components/MultiSelect/MultiSelect.js +2 -2
- package/es/components/NumberInput/NumberInput.js +2 -2
- package/es/components/OverflowMenu/next/index.js +1 -1
- package/es/components/RadioButton/RadioButton.js +1 -1
- package/es/components/RadioButtonGroup/RadioButtonGroup.js +1 -1
- package/es/components/Select/Select.js +1 -1
- package/es/components/Tabs/Tabs.js +13 -2
- package/es/components/Tag/SelectableTag.js +1 -1
- package/es/components/TextArea/TextArea.js +1 -1
- package/es/components/TextInput/TextInput.js +1 -1
- package/es/components/Tile/Tile.js +1 -1
- package/es/index.d.ts +3 -1
- package/es/index.js +7 -6
- package/es/internal/DisplayBox.d.ts +14 -0
- package/es/internal/getSupportedLocale.d.ts +12 -0
- package/lib/components/BigNumber/BigNumber.d.ts +82 -0
- package/lib/components/BigNumber/BigNumberSkeleton.d.ts +16 -0
- package/lib/components/BigNumber/constants.d.ts +19 -0
- package/lib/components/BigNumber/index.d.ts +9 -0
- package/lib/components/Card/Card.d.ts +48 -0
- package/lib/components/Card/Card.js +173 -0
- package/lib/components/Card/Card.types.d.ts +119 -0
- package/lib/components/Card/CardAction.d.ts +37 -0
- package/lib/components/Card/CardAction.js +41 -0
- package/lib/components/Card/CardActions.d.ts +30 -0
- package/lib/components/Card/CardActions.js +96 -0
- package/lib/components/Card/CardBody.d.ts +12 -0
- package/lib/components/Card/CardBody.js +38 -0
- package/lib/components/Card/CardContext.d.ts +17 -0
- package/lib/components/Card/CardContext.js +32 -0
- package/lib/components/Card/CardFooter.d.ts +15 -0
- package/lib/components/Card/CardFooter.js +48 -0
- package/lib/components/Card/CardHeader.d.ts +11 -0
- package/lib/components/Card/CardHeader.js +47 -0
- package/lib/components/Card/CardHeaderMedia.d.ts +21 -0
- package/lib/components/Card/CardHeaderMedia.js +33 -0
- package/lib/components/Card/CardMedia.d.ts +35 -0
- package/lib/components/Card/CardMedia.js +51 -0
- package/lib/components/Card/CardTitle.d.ts +72 -0
- package/lib/components/Card/CardTitle.js +89 -0
- package/lib/components/Card/CardTitleMedia.d.ts +23 -0
- package/lib/components/Card/CardTitleMedia.js +39 -0
- package/lib/components/Card/_story-assets/data.d.ts +6 -0
- package/lib/components/Card/_story-assets/options.d.ts +47 -0
- package/lib/components/Card/index.d.ts +8 -0
- package/lib/components/Card/index.js +48 -0
- package/lib/components/Checkbox/Checkbox.js +1 -1
- package/lib/components/CheckboxGroup/CheckboxGroup.js +1 -1
- package/lib/components/ComboBox/ComboBox.js +2 -2
- package/lib/components/ComboButton/index.js +1 -1
- package/lib/components/ComposedModal/ComposedModal.js +1 -1
- package/lib/components/DatePicker/DatePicker.d.ts +1 -1
- package/lib/components/DatePicker/DatePicker.js +1 -1
- package/lib/components/DatePicker/plugins/rangePlugin.d.ts +1 -1
- package/lib/components/DatePickerInput/DatePickerInput.js +1 -1
- package/lib/components/Dropdown/Dropdown.js +2 -2
- package/lib/components/ExpandableSearch/ExpandableSearch.js +1 -1
- package/lib/components/FileUploader/FileUploaderDropContainer.js +11 -5
- package/lib/components/FormLabel/FormLabel.d.ts +2 -2
- package/lib/components/FormLabel/FormLabel.js +1 -1
- package/lib/components/MenuButton/index.js +1 -1
- package/lib/components/MultiSelect/FilterableMultiSelect.js +2 -2
- package/lib/components/MultiSelect/MultiSelect.js +2 -2
- package/lib/components/NumberInput/NumberInput.js +2 -2
- package/lib/components/OverflowMenu/next/index.js +1 -1
- package/lib/components/RadioButton/RadioButton.js +1 -1
- package/lib/components/RadioButtonGroup/RadioButtonGroup.js +1 -1
- package/lib/components/Select/Select.js +1 -1
- package/lib/components/Tabs/Tabs.js +13 -2
- package/lib/components/Tag/SelectableTag.js +1 -1
- package/lib/components/TextArea/TextArea.js +1 -1
- package/lib/components/TextInput/TextInput.js +1 -1
- package/lib/components/Tile/Tile.js +1 -1
- package/lib/index.d.ts +3 -1
- package/lib/index.js +55 -48
- package/lib/internal/DisplayBox.d.ts +14 -0
- package/lib/internal/getSupportedLocale.d.ts +12 -0
- package/package.json +20 -20
- package/scss/_border-radius.scss +9 -0
- package/scss/components/OptionsTile/_index.scss +5 -0
- package/scss/components/OptionsTile/_options-tile.scss +5 -0
- package/scss/components/big-number/_big-number.scss +9 -0
- package/scss/components/big-number/_index.scss +9 -0
- package/scss/components/coachmark/_coachmark.scss +5 -0
- package/scss/components/coachmark/_index.scss +5 -0
- package/scss/components/edit-in-place/_edit-in-place.scss +5 -0
- package/scss/components/edit-in-place/_index.scss +5 -0
- package/scss/components/full-page-error/_full-page-error.scss +5 -0
- package/scss/components/full-page-error/_index.scss +5 -0
- package/scss/components/interstitial-screen/_index.scss +6 -0
- package/scss/components/interstitial-screen/_interstitial-screen.scss +12 -0
- package/scss/components/scroll-gradient/_index.scss +9 -0
- package/scss/components/scroll-gradient/_scroll-gradient.scss +9 -0
- package/scss/components/user-avatar/_index.scss +9 -0
- package/scss/components/user-avatar/_user-avatar.scss +9 -0
- package/telemetry.yml +107 -3
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
|
|
9
|
+
const require_usePrefix = require("../../internal/usePrefix.js");
|
|
10
|
+
const require_CardContext = require("./CardContext.js");
|
|
11
|
+
let react = require("react");
|
|
12
|
+
react = require_runtime.__toESM(react);
|
|
13
|
+
let classnames = require("classnames");
|
|
14
|
+
classnames = require_runtime.__toESM(classnames);
|
|
15
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
16
|
+
//#region src/components/Card/CardFooter.tsx
|
|
17
|
+
/**
|
|
18
|
+
* Copyright IBM Corp. 2026
|
|
19
|
+
*
|
|
20
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
21
|
+
* LICENSE file in the root directory of this source tree.
|
|
22
|
+
*/
|
|
23
|
+
const componentName = "CardFooter";
|
|
24
|
+
/**
|
|
25
|
+
* CardFooter component - Footer section of the card.
|
|
26
|
+
*
|
|
27
|
+
* Not supported inside a `clickable` card. A clickable card renders its own
|
|
28
|
+
* built-in footer affordance automatically. Use the `renderFooterIcon` prop on
|
|
29
|
+
* `Card` to customize the icon.
|
|
30
|
+
*/
|
|
31
|
+
const CardFooter = (0, react.forwardRef)(({ className, children, ...rest }, ref) => {
|
|
32
|
+
const prefix = require_usePrefix.usePrefix();
|
|
33
|
+
const { clickable } = require_CardContext.useCardContext();
|
|
34
|
+
if (clickable) {
|
|
35
|
+
console.error("[Card] `Card.Footer` cannot be used inside a `clickable` card. A clickable card renders its own footer affordance automatically. Use the `renderFooterIcon` prop on `Card` to customize the icon.");
|
|
36
|
+
return null;
|
|
37
|
+
}
|
|
38
|
+
const footerClasses = (0, classnames.default)(`${prefix}--card__footer`, className);
|
|
39
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
40
|
+
...rest,
|
|
41
|
+
ref,
|
|
42
|
+
className: footerClasses,
|
|
43
|
+
children
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
CardFooter.displayName = componentName;
|
|
47
|
+
//#endregion
|
|
48
|
+
exports.CardFooter = CardFooter;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* CardHeader — header section of the card.
|
|
10
|
+
*/
|
|
11
|
+
export declare const CardHeader: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
|
|
9
|
+
const require_usePrefix = require("../../internal/usePrefix.js");
|
|
10
|
+
const require_CardContext = require("./CardContext.js");
|
|
11
|
+
let react = require("react");
|
|
12
|
+
react = require_runtime.__toESM(react);
|
|
13
|
+
let classnames = require("classnames");
|
|
14
|
+
classnames = require_runtime.__toESM(classnames);
|
|
15
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
16
|
+
//#region src/components/Card/CardHeader.tsx
|
|
17
|
+
/**
|
|
18
|
+
* Copyright IBM Corp. 2026
|
|
19
|
+
*
|
|
20
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
21
|
+
* LICENSE file in the root directory of this source tree.
|
|
22
|
+
*/
|
|
23
|
+
const componentName = "CardHeader";
|
|
24
|
+
/**
|
|
25
|
+
* CardHeader — header section of the card.
|
|
26
|
+
*/
|
|
27
|
+
const CardHeader = (0, react.forwardRef)(({ className, children, ...rest }, ref) => {
|
|
28
|
+
const blockClass = `${require_usePrefix.usePrefix()}--card`;
|
|
29
|
+
const context = require_CardContext.useCardContext();
|
|
30
|
+
const handleDecoratorClick = (0, react.useCallback)((e) => e.stopPropagation(), []);
|
|
31
|
+
const handleDecoratorKeyDown = (0, react.useCallback)((e) => e.stopPropagation(), []);
|
|
32
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
33
|
+
...rest,
|
|
34
|
+
ref,
|
|
35
|
+
className: (0, classnames.default)(`${blockClass}__header`, className),
|
|
36
|
+
children: [children, context.decorator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
37
|
+
className: `${blockClass}__decorator`,
|
|
38
|
+
role: "presentation",
|
|
39
|
+
onClick: handleDecoratorClick,
|
|
40
|
+
onKeyDown: handleDecoratorKeyDown,
|
|
41
|
+
children: context.decorator
|
|
42
|
+
})]
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
CardHeader.displayName = componentName;
|
|
46
|
+
//#endregion
|
|
47
|
+
exports.CardHeader = CardHeader;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { ReactNode } from 'react';
|
|
8
|
+
export interface CardHeaderMediaProps {
|
|
9
|
+
/**
|
|
10
|
+
* Provide the contents of the CardHeaderMedia.
|
|
11
|
+
*/
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Provide an optional class to be applied to the containing node.
|
|
15
|
+
*/
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const CardHeaderMedia: {
|
|
19
|
+
({ children, className, ...rest }: CardHeaderMediaProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
displayName: string;
|
|
21
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
|
|
9
|
+
const require_usePrefix = require("../../internal/usePrefix.js");
|
|
10
|
+
let react = require("react");
|
|
11
|
+
react = require_runtime.__toESM(react);
|
|
12
|
+
let classnames = require("classnames");
|
|
13
|
+
classnames = require_runtime.__toESM(classnames);
|
|
14
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
15
|
+
//#region src/components/Card/CardHeaderMedia.tsx
|
|
16
|
+
/**
|
|
17
|
+
* Copyright IBM Corp. 2026
|
|
18
|
+
*
|
|
19
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
20
|
+
* LICENSE file in the root directory of this source tree.
|
|
21
|
+
*/
|
|
22
|
+
const componentName = "CardHeaderMedia";
|
|
23
|
+
const CardHeaderMedia = ({ children, className, ...rest }) => {
|
|
24
|
+
const classes = (0, classnames.default)(`${require_usePrefix.usePrefix()}--card__header-media`, className);
|
|
25
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
26
|
+
...rest,
|
|
27
|
+
className: classes,
|
|
28
|
+
children
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
CardHeaderMedia.displayName = componentName;
|
|
32
|
+
//#endregion
|
|
33
|
+
exports.CardHeaderMedia = CardHeaderMedia;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { type AspectRatioProps } from '../AspectRatio/AspectRatio';
|
|
9
|
+
export interface CardMediaProps extends Omit<AspectRatioProps, 'className'> {
|
|
10
|
+
/**
|
|
11
|
+
* Provide the contents of the CardMedia.
|
|
12
|
+
*/
|
|
13
|
+
children?: React.ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Provide an optional class to be applied to the containing node.
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Width of the media column when the card is in horizontal layout.
|
|
20
|
+
* Accepts any valid CSS width value (e.g. '200px', '40%').
|
|
21
|
+
* Defaults to '33.33%'. Has no effect in vertical (default) layout.
|
|
22
|
+
*/
|
|
23
|
+
mediaWidth?: string;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* CardMedia is a media slot component that maintains aspect ratio.
|
|
27
|
+
*
|
|
28
|
+
* In vertical (default) mode it delegates to Carbon's AspectRatio.
|
|
29
|
+
* In horizontal mode it renders a plain div sized to `mediaWidth` (default
|
|
30
|
+
* 33.33%) that stretches to the full card height — no aspect-ratio math needed.
|
|
31
|
+
*/
|
|
32
|
+
export declare const CardMedia: {
|
|
33
|
+
({ children, className, ratio, mediaWidth, ...rest }: CardMediaProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
displayName: string;
|
|
35
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
|
|
9
|
+
const require_usePrefix = require("../../internal/usePrefix.js");
|
|
10
|
+
const require_AspectRatio = require("../AspectRatio/AspectRatio.js");
|
|
11
|
+
const require_CardContext = require("./CardContext.js");
|
|
12
|
+
let react = require("react");
|
|
13
|
+
react = require_runtime.__toESM(react);
|
|
14
|
+
let classnames = require("classnames");
|
|
15
|
+
classnames = require_runtime.__toESM(classnames);
|
|
16
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
17
|
+
//#region src/components/Card/CardMedia.tsx
|
|
18
|
+
/**
|
|
19
|
+
* Copyright IBM Corp. 2026
|
|
20
|
+
*
|
|
21
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
22
|
+
* LICENSE file in the root directory of this source tree.
|
|
23
|
+
*/
|
|
24
|
+
const componentName = "CardMedia";
|
|
25
|
+
/**
|
|
26
|
+
* CardMedia is a media slot component that maintains aspect ratio.
|
|
27
|
+
*
|
|
28
|
+
* In vertical (default) mode it delegates to Carbon's AspectRatio.
|
|
29
|
+
* In horizontal mode it renders a plain div sized to `mediaWidth` (default
|
|
30
|
+
* 33.33%) that stretches to the full card height — no aspect-ratio math needed.
|
|
31
|
+
*/
|
|
32
|
+
const CardMedia = ({ children, className, ratio, mediaWidth = "33.33%", ...rest }) => {
|
|
33
|
+
const prefix = require_usePrefix.usePrefix();
|
|
34
|
+
const blockClass = `${prefix}--card`;
|
|
35
|
+
const { horizontal } = require_CardContext.useCardContext();
|
|
36
|
+
const classes = (0, classnames.default)(`${blockClass}__media`, className);
|
|
37
|
+
if (horizontal) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
38
|
+
className: `${blockClass}__media ${blockClass}__media--horizontal`,
|
|
39
|
+
style: { [`--${prefix}--card--media-width`]: mediaWidth },
|
|
40
|
+
children
|
|
41
|
+
});
|
|
42
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AspectRatio.default, {
|
|
43
|
+
ratio,
|
|
44
|
+
...rest,
|
|
45
|
+
className: classes,
|
|
46
|
+
children
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
CardMedia.displayName = componentName;
|
|
50
|
+
//#endregion
|
|
51
|
+
exports.CardMedia = CardMedia;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, { ReactNode } from 'react';
|
|
8
|
+
export interface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
9
|
+
/**
|
|
10
|
+
* Provide the contents of the CardTitle.
|
|
11
|
+
*/
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Provide an optional class to be applied to the containing node.
|
|
15
|
+
*/
|
|
16
|
+
className?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Enable text truncation with ellipsis on the title text row.
|
|
19
|
+
* - `true`: Single line truncation
|
|
20
|
+
* - `number`: Multi-line truncation (line clamp)
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
titleTruncate?: boolean | number;
|
|
24
|
+
/**
|
|
25
|
+
* Maximum width applied to the title text row when truncation is active.
|
|
26
|
+
* @default '100%'
|
|
27
|
+
*/
|
|
28
|
+
maxWidth?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Optional leading icon or content to display before the title text.
|
|
31
|
+
* - Productive density: 16px icon recommended
|
|
32
|
+
* - Expressive density: 24px icon recommended
|
|
33
|
+
*/
|
|
34
|
+
titleStart?: ReactNode;
|
|
35
|
+
/**
|
|
36
|
+
* Optional trailing icon or content to display after the title text.
|
|
37
|
+
* - Productive density: 16px icon recommended
|
|
38
|
+
* - Expressive density: 24px icon recommended
|
|
39
|
+
*/
|
|
40
|
+
titleEnd?: ReactNode;
|
|
41
|
+
/**
|
|
42
|
+
* Optional label rendered above the title text.
|
|
43
|
+
* Uses $label-01 typography and $text-secondary color.
|
|
44
|
+
*/
|
|
45
|
+
label?: ReactNode;
|
|
46
|
+
/**
|
|
47
|
+
* Enable truncation on the label text.
|
|
48
|
+
* - `true`: Single line truncation
|
|
49
|
+
* - `number`: Multi-line truncation (line clamp)
|
|
50
|
+
* @default false
|
|
51
|
+
*/
|
|
52
|
+
labelTruncate?: boolean | number;
|
|
53
|
+
/**
|
|
54
|
+
* Optional description rendered below the title text.
|
|
55
|
+
* Uses $label-01 typography and $text-secondary color.
|
|
56
|
+
*/
|
|
57
|
+
description?: ReactNode;
|
|
58
|
+
/**
|
|
59
|
+
* Enable truncation on the description text.
|
|
60
|
+
* - `true`: Single line truncation
|
|
61
|
+
* - `number`: Multi-line truncation (line clamp)
|
|
62
|
+
* @default false
|
|
63
|
+
*/
|
|
64
|
+
descriptionTruncate?: boolean | number;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* CardTitle displays the main title text in the card header.
|
|
68
|
+
* Typography is driven by density on the parent Card:
|
|
69
|
+
* - Productive: $heading-compact-02 (16px/22px)
|
|
70
|
+
* - Expressive: $heading-03 (20px/28px)
|
|
71
|
+
*/
|
|
72
|
+
export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
|
|
9
|
+
const require_usePrefix = require("../../internal/usePrefix.js");
|
|
10
|
+
let react = require("react");
|
|
11
|
+
react = require_runtime.__toESM(react);
|
|
12
|
+
let classnames = require("classnames");
|
|
13
|
+
classnames = require_runtime.__toESM(classnames);
|
|
14
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
15
|
+
//#region src/components/Card/CardTitle.tsx
|
|
16
|
+
/**
|
|
17
|
+
* Copyright IBM Corp. 2026
|
|
18
|
+
*
|
|
19
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
20
|
+
* LICENSE file in the root directory of this source tree.
|
|
21
|
+
*/
|
|
22
|
+
const componentName = "CardTitle";
|
|
23
|
+
/**
|
|
24
|
+
* CardTitle displays the main title text in the card header.
|
|
25
|
+
* Typography is driven by density on the parent Card:
|
|
26
|
+
* - Productive: $heading-compact-02 (16px/22px)
|
|
27
|
+
* - Expressive: $heading-03 (20px/28px)
|
|
28
|
+
*/
|
|
29
|
+
const CardTitle = (0, react.forwardRef)(({ children, className, titleTruncate = false, maxWidth = "100%", titleStart, titleEnd, label, labelTruncate = false, description, descriptionTruncate = false, ...rest }, ref) => {
|
|
30
|
+
const prefix = require_usePrefix.usePrefix();
|
|
31
|
+
const blockClass = `${prefix}--card`;
|
|
32
|
+
const isTitleMulti = typeof titleTruncate === "number";
|
|
33
|
+
const isLabelMulti = typeof labelTruncate === "number";
|
|
34
|
+
const isDescMulti = typeof descriptionTruncate === "number";
|
|
35
|
+
const containerClasses = (0, classnames.default)(`${blockClass}__title`, className);
|
|
36
|
+
const textRowClasses = (0, classnames.default)(`${blockClass}__title-text-row`, {
|
|
37
|
+
[`${blockClass}__title-text-row--truncate`]: titleTruncate === true,
|
|
38
|
+
[`${blockClass}__title-text-row--truncate-multi`]: isTitleMulti,
|
|
39
|
+
[`${blockClass}__title-text-row--with-start-icon`]: titleStart,
|
|
40
|
+
[`${blockClass}__title-text-row--with-end-icon`]: titleEnd
|
|
41
|
+
});
|
|
42
|
+
const titleVars = titleTruncate !== false ? {
|
|
43
|
+
[`--${prefix}--card--title-max-width`]: maxWidth,
|
|
44
|
+
...isTitleMulti && { [`--${prefix}--card--title-line-clamp`]: titleTruncate }
|
|
45
|
+
} : void 0;
|
|
46
|
+
const labelVars = isLabelMulti ? { [`--${prefix}--card--label-line-clamp`]: labelTruncate } : void 0;
|
|
47
|
+
const descVars = isDescMulti ? { [`--${prefix}--card--description-line-clamp`]: descriptionTruncate } : void 0;
|
|
48
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
49
|
+
...rest,
|
|
50
|
+
ref,
|
|
51
|
+
className: containerClasses,
|
|
52
|
+
children: [
|
|
53
|
+
label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
54
|
+
className: (0, classnames.default)(`${blockClass}__label`, {
|
|
55
|
+
[`${blockClass}__label--truncate`]: labelTruncate === true,
|
|
56
|
+
[`${blockClass}__label--truncate-multi`]: isLabelMulti
|
|
57
|
+
}),
|
|
58
|
+
style: labelVars,
|
|
59
|
+
children: label
|
|
60
|
+
}),
|
|
61
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
|
|
62
|
+
className: textRowClasses,
|
|
63
|
+
style: titleVars,
|
|
64
|
+
children: [
|
|
65
|
+
titleStart && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
66
|
+
className: `${blockClass}__title-start-icon`,
|
|
67
|
+
children: titleStart
|
|
68
|
+
}),
|
|
69
|
+
children,
|
|
70
|
+
titleEnd && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
71
|
+
className: `${blockClass}__title-end-icon`,
|
|
72
|
+
children: titleEnd
|
|
73
|
+
})
|
|
74
|
+
]
|
|
75
|
+
}),
|
|
76
|
+
description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
77
|
+
className: (0, classnames.default)(`${blockClass}__description`, {
|
|
78
|
+
[`${blockClass}__description--truncate`]: descriptionTruncate === true,
|
|
79
|
+
[`${blockClass}__description--truncate-multi`]: isDescMulti
|
|
80
|
+
}),
|
|
81
|
+
style: descVars,
|
|
82
|
+
children: description
|
|
83
|
+
})
|
|
84
|
+
]
|
|
85
|
+
});
|
|
86
|
+
});
|
|
87
|
+
CardTitle.displayName = componentName;
|
|
88
|
+
//#endregion
|
|
89
|
+
exports.CardTitle = CardTitle;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, { ReactNode } from 'react';
|
|
8
|
+
export interface CardTitleMediaProps {
|
|
9
|
+
/**
|
|
10
|
+
* Content to be rendered in the title media slot (typically an icon or small image)
|
|
11
|
+
*/
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Optional class name for custom styling
|
|
15
|
+
*/
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* CardTitleMedia provides a media slot positioned to the left of the card title.
|
|
20
|
+
* The media slot adapts to the heading area height (min 48px, max 64px) and stays
|
|
21
|
+
* top-aligned when the title wraps to multiple lines.
|
|
22
|
+
*/
|
|
23
|
+
export declare const CardTitleMedia: React.ForwardRefExoticComponent<CardTitleMediaProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
|
|
9
|
+
const require_usePrefix = require("../../internal/usePrefix.js");
|
|
10
|
+
let react = require("react");
|
|
11
|
+
react = require_runtime.__toESM(react);
|
|
12
|
+
let classnames = require("classnames");
|
|
13
|
+
classnames = require_runtime.__toESM(classnames);
|
|
14
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
15
|
+
//#region src/components/Card/CardTitleMedia.tsx
|
|
16
|
+
/**
|
|
17
|
+
* Copyright IBM Corp. 2026
|
|
18
|
+
*
|
|
19
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
20
|
+
* LICENSE file in the root directory of this source tree.
|
|
21
|
+
*/
|
|
22
|
+
const componentName = "CardTitleMedia";
|
|
23
|
+
/**
|
|
24
|
+
* CardTitleMedia provides a media slot positioned to the left of the card title.
|
|
25
|
+
* The media slot adapts to the heading area height (min 48px, max 64px) and stays
|
|
26
|
+
* top-aligned when the title wraps to multiple lines.
|
|
27
|
+
*/
|
|
28
|
+
const CardTitleMedia = (0, react.forwardRef)(({ className, children, ...rest }, ref) => {
|
|
29
|
+
const titleMediaClasses = (0, classnames.default)(`${require_usePrefix.usePrefix()}--card__title-media`, className);
|
|
30
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
31
|
+
...rest,
|
|
32
|
+
ref,
|
|
33
|
+
className: titleMediaClasses,
|
|
34
|
+
children
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
CardTitleMedia.displayName = componentName;
|
|
38
|
+
//#endregion
|
|
39
|
+
exports.CardTitleMedia = CardTitleMedia;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
let height: string;
|
|
3
|
+
namespace grid {
|
|
4
|
+
namespace x {
|
|
5
|
+
let enabled: boolean;
|
|
6
|
+
}
|
|
7
|
+
namespace y {
|
|
8
|
+
let enabled_1: boolean;
|
|
9
|
+
export { enabled_1 as enabled };
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
namespace axes {
|
|
13
|
+
namespace bottom {
|
|
14
|
+
let visible: boolean;
|
|
15
|
+
let title: string;
|
|
16
|
+
let mapsTo: string;
|
|
17
|
+
let scaleType: string;
|
|
18
|
+
}
|
|
19
|
+
namespace left {
|
|
20
|
+
let visible_1: boolean;
|
|
21
|
+
export { visible_1 as visible };
|
|
22
|
+
let mapsTo_1: string;
|
|
23
|
+
export { mapsTo_1 as mapsTo };
|
|
24
|
+
let scaleType_1: string;
|
|
25
|
+
export { scaleType_1 as scaleType };
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
namespace color {
|
|
29
|
+
namespace gradient {
|
|
30
|
+
let enabled_2: boolean;
|
|
31
|
+
export { enabled_2 as enabled };
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
namespace points {
|
|
35
|
+
let enabled_3: boolean;
|
|
36
|
+
export { enabled_3 as enabled };
|
|
37
|
+
}
|
|
38
|
+
namespace legend {
|
|
39
|
+
let enabled_4: boolean;
|
|
40
|
+
export { enabled_4 as enabled };
|
|
41
|
+
}
|
|
42
|
+
namespace toolbar {
|
|
43
|
+
let enabled_5: boolean;
|
|
44
|
+
export { enabled_5 as enabled };
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
export default _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export { Card, CardHeader, CardBody, CardFooter, CardHeaderMedia, CardMedia, CardTitle, CardTitleMedia, CardActions, CardAction, } from './Card';
|
|
8
|
+
export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, CardHeaderMediaProps, CardMediaProps, CardTitleProps, CardTitleMediaProps, CardActionsProps, CardActionProps, } from './Card';
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
|
|
9
|
+
const require_CardHeader = require("./CardHeader.js");
|
|
10
|
+
const require_CardBody = require("./CardBody.js");
|
|
11
|
+
const require_CardFooter = require("./CardFooter.js");
|
|
12
|
+
const require_CardHeaderMedia = require("./CardHeaderMedia.js");
|
|
13
|
+
const require_CardMedia = require("./CardMedia.js");
|
|
14
|
+
const require_CardTitle = require("./CardTitle.js");
|
|
15
|
+
const require_CardTitleMedia = require("./CardTitleMedia.js");
|
|
16
|
+
const require_CardActions = require("./CardActions.js");
|
|
17
|
+
const require_CardAction = require("./CardAction.js");
|
|
18
|
+
const require_Card = require("./Card.js");
|
|
19
|
+
//#region src/components/Card/index.ts
|
|
20
|
+
var Card_exports = /* @__PURE__ */ require_runtime.__exportAll({
|
|
21
|
+
Card: () => require_Card.Card,
|
|
22
|
+
CardAction: () => require_CardAction.CardAction,
|
|
23
|
+
CardActions: () => require_CardActions.CardActions,
|
|
24
|
+
CardBody: () => require_CardBody.CardBody,
|
|
25
|
+
CardFooter: () => require_CardFooter.CardFooter,
|
|
26
|
+
CardHeader: () => require_CardHeader.CardHeader,
|
|
27
|
+
CardHeaderMedia: () => require_CardHeaderMedia.CardHeaderMedia,
|
|
28
|
+
CardMedia: () => require_CardMedia.CardMedia,
|
|
29
|
+
CardTitle: () => require_CardTitle.CardTitle,
|
|
30
|
+
CardTitleMedia: () => require_CardTitleMedia.CardTitleMedia
|
|
31
|
+
});
|
|
32
|
+
//#endregion
|
|
33
|
+
exports.Card = require_Card.Card;
|
|
34
|
+
exports.CardAction = require_CardAction.CardAction;
|
|
35
|
+
exports.CardActions = require_CardActions.CardActions;
|
|
36
|
+
exports.CardBody = require_CardBody.CardBody;
|
|
37
|
+
exports.CardFooter = require_CardFooter.CardFooter;
|
|
38
|
+
exports.CardHeader = require_CardHeader.CardHeader;
|
|
39
|
+
exports.CardHeaderMedia = require_CardHeaderMedia.CardHeaderMedia;
|
|
40
|
+
exports.CardMedia = require_CardMedia.CardMedia;
|
|
41
|
+
exports.CardTitle = require_CardTitle.CardTitle;
|
|
42
|
+
exports.CardTitleMedia = require_CardTitleMedia.CardTitleMedia;
|
|
43
|
+
Object.defineProperty(exports, "Card_exports", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function() {
|
|
46
|
+
return Card_exports;
|
|
47
|
+
}
|
|
48
|
+
});
|
|
@@ -12,9 +12,9 @@ const require_Text = require("../Text/Text.js");
|
|
|
12
12
|
const require_useId = require("../../internal/useId.js");
|
|
13
13
|
const require_deprecate = require("../../prop-types/deprecate.js");
|
|
14
14
|
const require_utils = require("../../internal/utils.js");
|
|
15
|
+
const require_index = require("../AILabel/index.js");
|
|
15
16
|
const require_hasHelperText = require("../../internal/hasHelperText.js");
|
|
16
17
|
const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
|
|
17
|
-
const require_index = require("../AILabel/index.js");
|
|
18
18
|
let react = require("react");
|
|
19
19
|
react = require_runtime.__toESM(react);
|
|
20
20
|
let classnames = require("classnames");
|
|
@@ -10,9 +10,9 @@ const require_usePrefix = require("../../internal/usePrefix.js");
|
|
|
10
10
|
const require_useId = require("../../internal/useId.js");
|
|
11
11
|
const require_deprecate = require("../../prop-types/deprecate.js");
|
|
12
12
|
const require_utils = require("../../internal/utils.js");
|
|
13
|
+
const require_index = require("../AILabel/index.js");
|
|
13
14
|
const require_hasHelperText = require("../../internal/hasHelperText.js");
|
|
14
15
|
const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
|
|
15
|
-
const require_index = require("../AILabel/index.js");
|
|
16
16
|
const require_Checkbox = require("../Checkbox/Checkbox.js");
|
|
17
17
|
let react = require("react");
|
|
18
18
|
react = require_runtime.__toESM(react);
|
|
@@ -16,14 +16,14 @@ const require_defaultItemToString = require("../../internal/defaultItemToString.
|
|
|
16
16
|
const require_isItemDisabled = require("../../internal/isItemDisabled.js");
|
|
17
17
|
const require_utils = require("../../internal/utils.js");
|
|
18
18
|
const require_index = require("../FeatureFlags/index.js");
|
|
19
|
-
const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
|
|
20
19
|
const require_index$1 = require("../AILabel/index.js");
|
|
20
|
+
const require_mergeRefs = require("../../tools/mergeRefs.js");
|
|
21
|
+
const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
|
|
21
22
|
const require_ListBoxPropTypes = require("../ListBox/ListBoxPropTypes.js");
|
|
22
23
|
const require_FormContext = require("../FluidForm/FormContext.js");
|
|
23
24
|
const require_index$2 = require("../ListBox/index.js");
|
|
24
25
|
const require_ListBoxSelection = require("../ListBox/next/ListBoxSelection.js");
|
|
25
26
|
const require_ListBoxTrigger = require("../ListBox/next/ListBoxTrigger.js");
|
|
26
|
-
const require_mergeRefs = require("../../tools/mergeRefs.js");
|
|
27
27
|
let react = require("react");
|
|
28
28
|
react = require_runtime.__toESM(react);
|
|
29
29
|
let classnames = require("classnames");
|
|
@@ -14,8 +14,8 @@ const require_mapPopoverAlign = require("../../tools/mapPopoverAlign.js");
|
|
|
14
14
|
const require_index = require("../FeatureFlags/index.js");
|
|
15
15
|
const require_index$1 = require("../IconButton/index.js");
|
|
16
16
|
const require_index$2 = require("../Button/index.js");
|
|
17
|
-
const require_mergeRefs = require("../../tools/mergeRefs.js");
|
|
18
17
|
const require_Menu = require("../Menu/Menu.js");
|
|
18
|
+
const require_mergeRefs = require("../../tools/mergeRefs.js");
|
|
19
19
|
const require_useAttachedMenu = require("../../internal/useAttachedMenu.js");
|
|
20
20
|
let react = require("react");
|
|
21
21
|
react = require_runtime.__toESM(react);
|
|
@@ -15,9 +15,9 @@ const require_deprecate = require("../../prop-types/deprecate.js");
|
|
|
15
15
|
const require_utils = require("../../internal/utils.js");
|
|
16
16
|
const require_index = require("../FeatureFlags/index.js");
|
|
17
17
|
const require_index$1 = require("../AILabel/index.js");
|
|
18
|
+
const require_mergeRefs = require("../../tools/mergeRefs.js");
|
|
18
19
|
const require_useResizeObserver = require("../../internal/useResizeObserver.js");
|
|
19
20
|
const require_events = require("../../tools/events.js");
|
|
20
|
-
const require_mergeRefs = require("../../tools/mergeRefs.js");
|
|
21
21
|
const require_index$2 = require("../Layer/index.js");
|
|
22
22
|
const require_ComposedModalContext = require("./ComposedModalContext.js");
|
|
23
23
|
const require_ModalHeader = require("./ModalHeader.js");
|