@carbon/react 1.113.0 → 1.114.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 +962 -962
- package/es/components/Card/Card.d.ts +48 -0
- package/es/components/Card/Card.js +148 -0
- package/es/components/Card/Card.types.d.ts +88 -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 +11 -0
- package/es/components/Card/CardBody.js +34 -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 +11 -0
- package/es/components/Card/CardFooter.js +34 -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 +10 -0
- package/es/components/DatePicker/DatePicker.js +7 -6
- package/es/components/DatePicker/next/components/Calendar.d.ts +40 -0
- package/es/components/DatePicker/next/components/Calendar.js +181 -0
- package/es/components/DatePicker/next/components/DatePicker.d.ts +86 -0
- package/es/components/DatePicker/next/components/DatePicker.js +147 -0
- package/es/components/DatePicker/next/components/DatePickerInput.d.ts +143 -0
- package/es/components/DatePicker/next/components/DatePickerInput.js +124 -0
- package/es/components/DatePicker/next/components/DatePickerSkeleton.d.ts +22 -0
- package/es/components/DatePicker/next/components/DatePickerSkeleton.js +32 -0
- package/es/components/DatePicker/next/hooks/useDatePicker.d.ts +144 -0
- package/es/components/DatePicker/next/hooks/useDatePicker.js +286 -0
- package/es/components/DatePicker/next/index.d.ts +12 -0
- package/es/components/DatePicker/next/index.js +19 -0
- 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/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/Tag/SelectableTag.js +1 -1
- package/es/components/TextArea/TextArea.js +1 -1
- package/es/components/TextInput/TextInput.js +1 -1
- package/es/index.d.ts +2 -0
- package/es/index.js +7 -5
- package/es/internal/checkForOverflow.d.ts +5 -0
- package/es/internal/useFocus.d.ts +23 -0
- package/es/internal/usePrefersReducedMotion.d.ts +11 -0
- package/es/internal/useSidePanelPresence.d.ts +21 -0
- package/lib/components/Card/Card.d.ts +48 -0
- package/lib/components/Card/Card.js +161 -0
- package/lib/components/Card/Card.types.d.ts +88 -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 +11 -0
- package/lib/components/Card/CardBody.js +37 -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 +11 -0
- package/lib/components/Card/CardFooter.js +37 -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 +10 -0
- package/lib/components/DatePicker/DatePicker.js +7 -6
- package/lib/components/DatePicker/next/components/Calendar.d.ts +40 -0
- package/lib/components/DatePicker/next/components/Calendar.js +184 -0
- package/lib/components/DatePicker/next/components/DatePicker.d.ts +86 -0
- package/lib/components/DatePicker/next/components/DatePicker.js +150 -0
- package/lib/components/DatePicker/next/components/DatePickerInput.d.ts +143 -0
- package/lib/components/DatePicker/next/components/DatePickerInput.js +127 -0
- package/lib/components/DatePicker/next/components/DatePickerSkeleton.d.ts +22 -0
- package/lib/components/DatePicker/next/components/DatePickerSkeleton.js +41 -0
- package/lib/components/DatePicker/next/hooks/useDatePicker.d.ts +144 -0
- package/lib/components/DatePicker/next/hooks/useDatePicker.js +286 -0
- package/lib/components/DatePicker/next/index.d.ts +12 -0
- package/lib/components/DatePicker/next/index.js +27 -0
- 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/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/Tag/SelectableTag.js +1 -1
- package/lib/components/TextArea/TextArea.js +1 -1
- package/lib/components/TextInput/TextInput.js +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +59 -45
- package/lib/internal/checkForOverflow.d.ts +5 -0
- package/lib/internal/useFocus.d.ts +23 -0
- package/lib/internal/usePrefersReducedMotion.d.ts +11 -0
- package/lib/internal/useSidePanelPresence.d.ts +21 -0
- package/package.json +11 -11
- package/scss/components/action-set/_action-set.scss +9 -0
- package/scss/components/action-set/_index.scss +9 -0
- package/scss/components/resizer/_index.scss +9 -0
- package/scss/components/resizer/_resizer.scss +9 -0
- package/scss/components/side-panel/_index.scss +9 -0
- package/scss/components/side-panel/_side-panel.scss +9 -0
- package/scss/components/truncated-text/_index.scss +9 -0
- package/scss/components/truncated-text/_truncated-text.scss +9 -0
- package/telemetry.yml +57 -1
|
@@ -10,9 +10,9 @@ import { Text } from "../Text/Text.js";
|
|
|
10
10
|
import { deprecate } from "../../prop-types/deprecate.js";
|
|
11
11
|
import { isComponentElement } from "../../internal/utils.js";
|
|
12
12
|
import { useMergedRefs } from "../../internal/useMergedRefs.js";
|
|
13
|
+
import { AILabel } from "../AILabel/index.js";
|
|
13
14
|
import { hasHelperText } from "../../internal/hasHelperText.js";
|
|
14
15
|
import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
|
|
15
|
-
import { AILabel } from "../AILabel/index.js";
|
|
16
16
|
import { FormContext } from "../FluidForm/FormContext.js";
|
|
17
17
|
import { getTextInputProps } from "./util.js";
|
|
18
18
|
import { getAnnouncement } from "../../internal/getAnnouncement.js";
|
package/es/index.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ export * from './components/AspectRatio';
|
|
|
12
12
|
export * from './components/Breadcrumb';
|
|
13
13
|
export * from './components/Button';
|
|
14
14
|
export * from './components/ButtonSet';
|
|
15
|
+
export * as preview__Card from './components/Card';
|
|
15
16
|
export * from './components/Checkbox';
|
|
16
17
|
export * from './components/CheckboxGroup';
|
|
17
18
|
export * from './components/ClassPrefix';
|
|
@@ -29,6 +30,7 @@ export * from './components/DataTable';
|
|
|
29
30
|
export * from './components/DataTableSkeleton';
|
|
30
31
|
export * from './components/DatePicker';
|
|
31
32
|
export * from './components/DatePickerInput';
|
|
33
|
+
export * as preview__DatePicker from './components/DatePicker/next';
|
|
32
34
|
export * from './components/Dropdown';
|
|
33
35
|
export * from './components/ErrorBoundary';
|
|
34
36
|
export * from './components/ExpandableSearch';
|
package/es/index.js
CHANGED
|
@@ -30,6 +30,11 @@ import { ButtonSkeleton } from "./components/Button/Button.Skeleton.js";
|
|
|
30
30
|
import ButtonSet from "./components/ButtonSet/ButtonSet.js";
|
|
31
31
|
import { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from "./components/Toggletip/index.js";
|
|
32
32
|
import { AILabel, AILabelActions, AILabelContent } from "./components/AILabel/index.js";
|
|
33
|
+
import { LayoutDirection } from "./components/LayoutDirection/LayoutDirection.js";
|
|
34
|
+
import { useLayoutDirection } from "./components/LayoutDirection/useLayoutDirection.js";
|
|
35
|
+
import { Menu } from "./components/Menu/Menu.js";
|
|
36
|
+
import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from "./components/Menu/MenuItem.js";
|
|
37
|
+
import { Card_exports } from "./components/Card/index.js";
|
|
33
38
|
import Checkbox from "./components/Checkbox/Checkbox.js";
|
|
34
39
|
import { CheckboxSkeleton } from "./components/Checkbox/Checkbox.Skeleton.js";
|
|
35
40
|
import CheckboxGroup from "./components/CheckboxGroup/CheckboxGroup.js";
|
|
@@ -43,10 +48,6 @@ import Form from "./components/Form/Form.js";
|
|
|
43
48
|
import { FormContext } from "./components/FluidForm/FormContext.js";
|
|
44
49
|
import FluidForm from "./components/FluidForm/FluidForm.js";
|
|
45
50
|
import ComboBox from "./components/ComboBox/ComboBox.js";
|
|
46
|
-
import { LayoutDirection } from "./components/LayoutDirection/LayoutDirection.js";
|
|
47
|
-
import { useLayoutDirection } from "./components/LayoutDirection/useLayoutDirection.js";
|
|
48
|
-
import { Menu } from "./components/Menu/Menu.js";
|
|
49
|
-
import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from "./components/Menu/MenuItem.js";
|
|
50
51
|
import { ComboButton } from "./components/ComboButton/index.js";
|
|
51
52
|
import { Layer, useLayer } from "./components/Layer/index.js";
|
|
52
53
|
import { ModalHeader } from "./components/ComposedModal/ModalHeader.js";
|
|
@@ -98,6 +99,7 @@ import DataTableSkeleton from "./components/DataTableSkeleton/DataTableSkeleton.
|
|
|
98
99
|
import DatePickerInput from "./components/DatePickerInput/DatePickerInput.js";
|
|
99
100
|
import DatePicker from "./components/DatePicker/DatePicker.js";
|
|
100
101
|
import { DatePickerSkeleton } from "./components/DatePicker/DatePicker.Skeleton.js";
|
|
102
|
+
import { next_exports } from "./components/DatePicker/next/index.js";
|
|
101
103
|
import Dropdown from "./components/Dropdown/Dropdown.js";
|
|
102
104
|
import { DropdownSkeleton } from "./components/Dropdown/Dropdown.Skeleton.js";
|
|
103
105
|
import { ErrorBoundaryContext } from "./components/ErrorBoundary/ErrorBoundaryContext.js";
|
|
@@ -250,4 +252,4 @@ import { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from
|
|
|
250
252
|
* LICENSE file in the root directory of this source tree.
|
|
251
253
|
*/
|
|
252
254
|
//#endregion
|
|
253
|
-
export { AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHangComponent as ColumnHang, ComboBox, ComboButton, ComposedModal, ComposedModalPresence, ContainedList, ContainedListItem_default as ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FeatureFlags, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGridComponent as FlexGrid, FluidComboBox, FluidComboBoxSkeleton, FluidDatePicker, FluidDatePickerInput, FluidDatePickerSkeleton, FluidDropdown, FluidDropdownSkeleton, FluidForm, FluidMultiSelect, FluidMultiSelectSkeleton, FluidNumberInput, FluidNumberInputSkeleton, FluidPasswordInput, FluidSearch, FluidSearchSkeleton, FluidSelect, FluidSelectSkeleton, FluidTextArea, FluidTextAreaSkeleton, FluidTextInput, FluidTextInputSkeleton, FluidTimePicker, FluidTimePickerSelect, FluidTimePickerSkeleton, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, GridAsGridComponent as Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineCheckbox, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalPresence, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, FeatureFlags as preview_FeatureFlags, Layout as preview_Layout, LayoutDirection as preview_LayoutDirection, OverflowMenuV2 as preview_OverflowMenuV2, PageSelector as preview_PageSelector, Pagination$1 as preview_Pagination, Text as preview_Text, TextDirection as preview_TextDirection, AISkeletonIcon as preview__AiSkeletonIcon, AISkeletonPlaceholder as preview__AiSkeletonPlaceholder, AISkeletonText as preview__AiSkeletonText, ChatButton as preview__ChatButton, ChatButtonSkeleton as preview__ChatButtonSkeleton, Dialog_exports as preview__Dialog, FluidComboBox as preview__FluidComboBox, FluidComboBoxSkeleton as preview__FluidComboBoxSkeleton, FluidDatePicker as preview__FluidDatePicker, FluidDatePickerInput as preview__FluidDatePickerInput, FluidDatePickerSkeleton as preview__FluidDatePickerSkeleton, FluidDropdown as preview__FluidDropdown, FluidDropdownSkeleton as preview__FluidDropdownSkeleton, FluidMultiSelect as preview__FluidMultiSelect, FluidMultiSelectSkeleton as preview__FluidMultiSelectSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSelect as preview__FluidTimePickerSelect, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, IconIndicator as preview__IconIndicator, PageHeader_exports as preview__PageHeader, ShapeIndicator as preview__ShapeIndicator, AILabel as preview__Slug, AILabelActions as preview__SlugActions, AILabelContent as preview__SlugContent, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, useLayoutDirection as preview_useLayoutDirection, FeatureFlags as unstable_FeatureFlags, Layout as unstable_Layout, LayoutDirection as unstable_LayoutDirection, OverflowMenuV2 as unstable_OverflowMenuV2, PageSelector as unstable_PageSelector, Pagination$1 as unstable_Pagination, Text as unstable_Text, TextDirection as unstable_TextDirection, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, AISkeletonText as unstable__AiSkeletonText, ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerInput as unstable__FluidDatePickerInput, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, IconIndicator as unstable__IconIndicator, PageHeader_exports as unstable__PageHeader, ShapeIndicator as unstable__ShapeIndicator, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useLayoutDirection as unstable_useLayoutDirection, useContextMenu, useFeatureFlag, useFeatureFlags, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme, validateNumberSeparators, withComposedModalPresence, withModalPresence };
|
|
255
|
+
export { AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHangComponent as ColumnHang, ComboBox, ComboButton, ComposedModal, ComposedModalPresence, ContainedList, ContainedListItem_default as ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FeatureFlags, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGridComponent as FlexGrid, FluidComboBox, FluidComboBoxSkeleton, FluidDatePicker, FluidDatePickerInput, FluidDatePickerSkeleton, FluidDropdown, FluidDropdownSkeleton, FluidForm, FluidMultiSelect, FluidMultiSelectSkeleton, FluidNumberInput, FluidNumberInputSkeleton, FluidPasswordInput, FluidSearch, FluidSearchSkeleton, FluidSelect, FluidSelectSkeleton, FluidTextArea, FluidTextAreaSkeleton, FluidTextInput, FluidTextInputSkeleton, FluidTimePicker, FluidTimePickerSelect, FluidTimePickerSkeleton, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, GridAsGridComponent as Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineCheckbox, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalPresence, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, FeatureFlags as preview_FeatureFlags, Layout as preview_Layout, LayoutDirection as preview_LayoutDirection, OverflowMenuV2 as preview_OverflowMenuV2, PageSelector as preview_PageSelector, Pagination$1 as preview_Pagination, Text as preview_Text, TextDirection as preview_TextDirection, AISkeletonIcon as preview__AiSkeletonIcon, AISkeletonPlaceholder as preview__AiSkeletonPlaceholder, AISkeletonText as preview__AiSkeletonText, Card_exports as preview__Card, ChatButton as preview__ChatButton, ChatButtonSkeleton as preview__ChatButtonSkeleton, next_exports as preview__DatePicker, Dialog_exports as preview__Dialog, FluidComboBox as preview__FluidComboBox, FluidComboBoxSkeleton as preview__FluidComboBoxSkeleton, FluidDatePicker as preview__FluidDatePicker, FluidDatePickerInput as preview__FluidDatePickerInput, FluidDatePickerSkeleton as preview__FluidDatePickerSkeleton, FluidDropdown as preview__FluidDropdown, FluidDropdownSkeleton as preview__FluidDropdownSkeleton, FluidMultiSelect as preview__FluidMultiSelect, FluidMultiSelectSkeleton as preview__FluidMultiSelectSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSelect as preview__FluidTimePickerSelect, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, IconIndicator as preview__IconIndicator, PageHeader_exports as preview__PageHeader, ShapeIndicator as preview__ShapeIndicator, AILabel as preview__Slug, AILabelActions as preview__SlugActions, AILabelContent as preview__SlugContent, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, useLayoutDirection as preview_useLayoutDirection, FeatureFlags as unstable_FeatureFlags, Layout as unstable_Layout, LayoutDirection as unstable_LayoutDirection, OverflowMenuV2 as unstable_OverflowMenuV2, PageSelector as unstable_PageSelector, Pagination$1 as unstable_Pagination, Text as unstable_Text, TextDirection as unstable_TextDirection, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, AISkeletonText as unstable__AiSkeletonText, ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerInput as unstable__FluidDatePickerInput, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, IconIndicator as unstable__IconIndicator, PageHeader_exports as unstable__PageHeader, ShapeIndicator as unstable__ShapeIndicator, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useLayoutDirection as unstable_useLayoutDirection, useContextMenu, useFeatureFlag, useFeatureFlags, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme, validateNumberSeparators, withComposedModalPresence, withModalPresence };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2021, 2025
|
|
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 { RefObject } from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* Returns the first element matching `selector` within `container`, or null.
|
|
10
|
+
TO DO: This hook will be removed https://github.com/carbon-design-system/ibm-products/issues/7731
|
|
11
|
+
*/
|
|
12
|
+
export declare const getSpecificElement: (container: HTMLElement | null, selector: string) => HTMLElement | null;
|
|
13
|
+
/**
|
|
14
|
+
* Provides focus-trap helpers for a panel/modal container.
|
|
15
|
+
*
|
|
16
|
+
* - `firstElement` – the first tabbable element inside the container.
|
|
17
|
+
* - `keyDownListener` – an `onKeyDown` handler that cycles focus between the
|
|
18
|
+
* first and last tabbable elements (Tab / Shift+Tab wrap-around).
|
|
19
|
+
*/
|
|
20
|
+
export declare const useFocus: (ref: RefObject<HTMLElement | null>) => {
|
|
21
|
+
firstElement: HTMLElement | null;
|
|
22
|
+
keyDownListener: (event: React.KeyboardEvent | KeyboardEvent) => void;
|
|
23
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2021, 2025
|
|
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
|
+
* Returns `true` when the user has requested reduced motion via the
|
|
9
|
+
* `prefers-reduced-motion: reduce` media query.
|
|
10
|
+
*/
|
|
11
|
+
export declare const usePrefersReducedMotion: () => boolean;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2021, 2025
|
|
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 { RefObject } from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* Controls the presence (mount/unmount) of a panel element, waiting for a
|
|
10
|
+
* named CSS exit animation to finish before removing it from the DOM.
|
|
11
|
+
*
|
|
12
|
+
* Signature mirrors the `usePresence` hook from `@carbon/ibm-products`:
|
|
13
|
+
* `usePresence(open, ref, exitAnimationName)` → `{ shouldRender }`
|
|
14
|
+
*
|
|
15
|
+
* @param open - Whether the panel is currently open.
|
|
16
|
+
* @param ref - Ref to the panel's root DOM element.
|
|
17
|
+
* @param exitAnimationName - The CSS `animation-name` value used on exit.
|
|
18
|
+
*/
|
|
19
|
+
export declare const useSidePanelPresence: (open: boolean, ref: RefObject<HTMLElement | null>, exitAnimationName: string) => {
|
|
20
|
+
shouldRender: boolean;
|
|
21
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
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 { CardProps } from './Card.types';
|
|
9
|
+
import { CardHeader } from './CardHeader';
|
|
10
|
+
import { CardBody } from './CardBody';
|
|
11
|
+
import { CardFooter } from './CardFooter';
|
|
12
|
+
import { CardHeaderMedia } from './CardHeaderMedia';
|
|
13
|
+
import { CardMedia } from './CardMedia';
|
|
14
|
+
import { CardTitle } from './CardTitle';
|
|
15
|
+
import { CardTitleMedia } from './CardTitleMedia';
|
|
16
|
+
import { CardActions } from './CardActions';
|
|
17
|
+
import { CardAction } from './CardAction';
|
|
18
|
+
export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
|
|
19
|
+
Header: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
Body: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
Footer: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
HeaderMedia: {
|
|
23
|
+
({ children, className, ...rest }: import("./CardHeaderMedia").CardHeaderMediaProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
displayName: string;
|
|
25
|
+
};
|
|
26
|
+
Media: {
|
|
27
|
+
({ children, className, ratio, mediaWidth, ...rest }: import("./CardMedia").CardMediaProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
displayName: string;
|
|
29
|
+
};
|
|
30
|
+
Title: React.ForwardRefExoticComponent<import("./CardTitle").CardTitleProps & React.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
TitleMedia: React.ForwardRefExoticComponent<import("./CardTitleMedia").CardTitleMediaProps & React.RefAttributes<HTMLDivElement>>;
|
|
32
|
+
Actions: {
|
|
33
|
+
({ children, className, overflowMenuLabel, ...rest }: import("./CardActions").CardActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
displayName: string;
|
|
35
|
+
};
|
|
36
|
+
Action: {
|
|
37
|
+
({ children, className, ...rest }: import("./CardAction").CardActionProps): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
displayName: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
export { Card as default, CardHeader, CardBody, CardFooter, CardHeaderMedia, CardMedia, CardTitle, CardTitleMedia, CardActions, CardAction, };
|
|
42
|
+
export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, } from './Card.types';
|
|
43
|
+
export type { CardHeaderMediaProps } from './CardHeaderMedia';
|
|
44
|
+
export type { CardMediaProps } from './CardMedia';
|
|
45
|
+
export type { CardTitleProps } from './CardTitle';
|
|
46
|
+
export type { CardTitleMediaProps } from './CardTitleMedia';
|
|
47
|
+
export type { CardActionsProps } from './CardActions';
|
|
48
|
+
export type { CardActionProps } from './CardAction';
|
|
@@ -0,0 +1,161 @@
|
|
|
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_index = require("../AILabel/index.js");
|
|
11
|
+
const require_CardContext = require("./CardContext.js");
|
|
12
|
+
const require_CardHeader = require("./CardHeader.js");
|
|
13
|
+
const require_CardBody = require("./CardBody.js");
|
|
14
|
+
const require_CardFooter = require("./CardFooter.js");
|
|
15
|
+
const require_CardHeaderMedia = require("./CardHeaderMedia.js");
|
|
16
|
+
const require_CardMedia = require("./CardMedia.js");
|
|
17
|
+
const require_CardTitle = require("./CardTitle.js");
|
|
18
|
+
const require_CardTitleMedia = require("./CardTitleMedia.js");
|
|
19
|
+
const require_CardActions = require("./CardActions.js");
|
|
20
|
+
const require_CardAction = require("./CardAction.js");
|
|
21
|
+
let react = require("react");
|
|
22
|
+
react = require_runtime.__toESM(react);
|
|
23
|
+
let classnames = require("classnames");
|
|
24
|
+
classnames = require_runtime.__toESM(classnames);
|
|
25
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
//#region src/components/Card/Card.tsx
|
|
27
|
+
/**
|
|
28
|
+
* Copyright IBM Corp. 2026
|
|
29
|
+
*
|
|
30
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
31
|
+
* LICENSE file in the root directory of this source tree.
|
|
32
|
+
*/
|
|
33
|
+
const componentName = "Card";
|
|
34
|
+
/**
|
|
35
|
+
* Card component - Root container for composable card
|
|
36
|
+
*/
|
|
37
|
+
const CardComponent = (0, react.forwardRef)(({ clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, horizontal = false, className, children, ...rest }, ref) => {
|
|
38
|
+
const blockClass = `${require_usePrefix.usePrefix()}--card`;
|
|
39
|
+
const hasAILabel = (0, react.useMemo)(() => (0, react.isValidElement)(decorator) && decorator.type === require_index.AILabel, [decorator]);
|
|
40
|
+
const contextValue = (0, react.useMemo)(() => ({
|
|
41
|
+
clickable,
|
|
42
|
+
disabled,
|
|
43
|
+
decorator,
|
|
44
|
+
horizontal
|
|
45
|
+
}), [
|
|
46
|
+
clickable,
|
|
47
|
+
disabled,
|
|
48
|
+
decorator,
|
|
49
|
+
horizontal
|
|
50
|
+
]);
|
|
51
|
+
const handleKeyDown = (0, react.useCallback)((event) => {
|
|
52
|
+
if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
|
|
53
|
+
event.preventDefault();
|
|
54
|
+
onClick?.(event);
|
|
55
|
+
}
|
|
56
|
+
onKeyDown?.(event);
|
|
57
|
+
}, [
|
|
58
|
+
clickable,
|
|
59
|
+
disabled,
|
|
60
|
+
onClick,
|
|
61
|
+
onKeyDown
|
|
62
|
+
]);
|
|
63
|
+
const handleClick = (0, react.useCallback)((event) => {
|
|
64
|
+
if (!disabled) onClick?.(event);
|
|
65
|
+
}, [disabled, onClick]);
|
|
66
|
+
const cardClasses = (0, classnames.default)(blockClass, className, {
|
|
67
|
+
[`${blockClass}--clickable`]: clickable && !disabled,
|
|
68
|
+
[`${blockClass}--disabled`]: disabled,
|
|
69
|
+
[`${blockClass}--${density}`]: density,
|
|
70
|
+
[`${blockClass}--has-ai-label`]: hasAILabel,
|
|
71
|
+
[`${blockClass}--horizontal`]: horizontal
|
|
72
|
+
});
|
|
73
|
+
const cardProps = {
|
|
74
|
+
...rest,
|
|
75
|
+
ref,
|
|
76
|
+
className: cardClasses,
|
|
77
|
+
...clickable && {
|
|
78
|
+
role: "button",
|
|
79
|
+
tabIndex: disabled ? -1 : 0,
|
|
80
|
+
onClick: handleClick,
|
|
81
|
+
onKeyDown: handleKeyDown,
|
|
82
|
+
"aria-disabled": disabled
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
const { mediaChildren, contentChildren, mediaIsFirst } = (0, react.useMemo)(() => {
|
|
86
|
+
if (!horizontal) return {
|
|
87
|
+
mediaChildren: [],
|
|
88
|
+
contentChildren: [],
|
|
89
|
+
mediaIsFirst: false
|
|
90
|
+
};
|
|
91
|
+
const childArray = react.default.Children.toArray(children);
|
|
92
|
+
const isMedia = (child) => react.default.isValidElement(child) && child.type === require_CardMedia.CardMedia;
|
|
93
|
+
return {
|
|
94
|
+
mediaChildren: childArray.filter(isMedia),
|
|
95
|
+
contentChildren: childArray.filter((c) => !isMedia(c)),
|
|
96
|
+
mediaIsFirst: childArray.findIndex(isMedia) < childArray.findIndex((c) => !isMedia(c))
|
|
97
|
+
};
|
|
98
|
+
}, [children, horizontal]);
|
|
99
|
+
let renderedChildren = children;
|
|
100
|
+
if (horizontal) {
|
|
101
|
+
const contentWrapper = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
102
|
+
className: `${blockClass}__content`,
|
|
103
|
+
children: contentChildren
|
|
104
|
+
});
|
|
105
|
+
renderedChildren = mediaIsFirst ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [mediaChildren, contentWrapper] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [contentWrapper, mediaChildren] });
|
|
106
|
+
}
|
|
107
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardContext.CardContext.Provider, {
|
|
108
|
+
value: contextValue,
|
|
109
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
110
|
+
...cardProps,
|
|
111
|
+
children: renderedChildren
|
|
112
|
+
})
|
|
113
|
+
});
|
|
114
|
+
});
|
|
115
|
+
CardComponent.displayName = componentName;
|
|
116
|
+
/**
|
|
117
|
+
* -------
|
|
118
|
+
* Exports
|
|
119
|
+
* -------
|
|
120
|
+
*/
|
|
121
|
+
const Header = require_CardHeader.CardHeader;
|
|
122
|
+
Header.displayName = "Card.Header";
|
|
123
|
+
const Body = require_CardBody.CardBody;
|
|
124
|
+
Body.displayName = "Card.Body";
|
|
125
|
+
const Footer = require_CardFooter.CardFooter;
|
|
126
|
+
Footer.displayName = "Card.Footer";
|
|
127
|
+
const HeaderMedia = require_CardHeaderMedia.CardHeaderMedia;
|
|
128
|
+
HeaderMedia.displayName = "Card.HeaderMedia";
|
|
129
|
+
const Media = require_CardMedia.CardMedia;
|
|
130
|
+
Media.displayName = "Card.Media";
|
|
131
|
+
const Title = require_CardTitle.CardTitle;
|
|
132
|
+
Title.displayName = "Card.Title";
|
|
133
|
+
const TitleMedia = require_CardTitleMedia.CardTitleMedia;
|
|
134
|
+
TitleMedia.displayName = "Card.TitleMedia";
|
|
135
|
+
const Actions = require_CardActions.CardActions;
|
|
136
|
+
Actions.displayName = "Card.Actions";
|
|
137
|
+
const Action = require_CardAction.CardAction;
|
|
138
|
+
Action.displayName = "Card.Action";
|
|
139
|
+
const Card = Object.assign(CardComponent, {
|
|
140
|
+
Header,
|
|
141
|
+
Body,
|
|
142
|
+
Footer,
|
|
143
|
+
HeaderMedia,
|
|
144
|
+
Media,
|
|
145
|
+
Title,
|
|
146
|
+
TitleMedia,
|
|
147
|
+
Actions,
|
|
148
|
+
Action
|
|
149
|
+
});
|
|
150
|
+
//#endregion
|
|
151
|
+
exports.Card = Card;
|
|
152
|
+
exports.default = Card;
|
|
153
|
+
exports.CardAction = require_CardAction.CardAction;
|
|
154
|
+
exports.CardActions = require_CardActions.CardActions;
|
|
155
|
+
exports.CardBody = require_CardBody.CardBody;
|
|
156
|
+
exports.CardFooter = require_CardFooter.CardFooter;
|
|
157
|
+
exports.CardHeader = require_CardHeader.CardHeader;
|
|
158
|
+
exports.CardHeaderMedia = require_CardHeaderMedia.CardHeaderMedia;
|
|
159
|
+
exports.CardMedia = require_CardMedia.CardMedia;
|
|
160
|
+
exports.CardTitle = require_CardTitle.CardTitle;
|
|
161
|
+
exports.CardTitleMedia = require_CardTitleMedia.CardTitleMedia;
|
|
@@ -0,0 +1,88 @@
|
|
|
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
|
+
/**
|
|
9
|
+
* Base props shared across card components
|
|
10
|
+
*/
|
|
11
|
+
export interface CardBaseProps {
|
|
12
|
+
/**
|
|
13
|
+
* Additional CSS class names
|
|
14
|
+
*/
|
|
15
|
+
className?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Card content
|
|
18
|
+
*/
|
|
19
|
+
children?: ReactNode;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Props for the Card root component
|
|
23
|
+
*/
|
|
24
|
+
export interface CardProps extends CardBaseProps {
|
|
25
|
+
/**
|
|
26
|
+
* Makes the entire card clickable
|
|
27
|
+
*/
|
|
28
|
+
clickable?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Click handler for clickable cards
|
|
31
|
+
*/
|
|
32
|
+
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
33
|
+
/**
|
|
34
|
+
* Keyboard event handler for clickable cards
|
|
35
|
+
*/
|
|
36
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Disables the card and all interactive elements
|
|
39
|
+
*/
|
|
40
|
+
disabled?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Density variant: productive uses heading-compact-02, expressive uses heading-03
|
|
43
|
+
*/
|
|
44
|
+
density?: 'productive' | 'expressive';
|
|
45
|
+
/**
|
|
46
|
+
* Optional decorator component (typically AILabel from Carbon).
|
|
47
|
+
* Renders in the top-right corner of the card header with a blue gradient border.
|
|
48
|
+
*/
|
|
49
|
+
decorator?: ReactNode;
|
|
50
|
+
/**
|
|
51
|
+
* When true, the card renders in a horizontal layout: media on the left,
|
|
52
|
+
* header/body/footer stacked vertically on the right.
|
|
53
|
+
*/
|
|
54
|
+
horizontal?: boolean;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Props for CardHeader component
|
|
58
|
+
*/
|
|
59
|
+
export type CardHeaderProps = CardBaseProps;
|
|
60
|
+
/**
|
|
61
|
+
* Props for CardBody component
|
|
62
|
+
*/
|
|
63
|
+
export type CardBodyProps = CardBaseProps;
|
|
64
|
+
/**
|
|
65
|
+
* Props for CardFooter component
|
|
66
|
+
*/
|
|
67
|
+
export type CardFooterProps = CardBaseProps;
|
|
68
|
+
/**
|
|
69
|
+
* Context value for Card
|
|
70
|
+
*/
|
|
71
|
+
export interface CardContextValue {
|
|
72
|
+
/**
|
|
73
|
+
* Whether the card is clickable
|
|
74
|
+
*/
|
|
75
|
+
clickable: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Whether the card is disabled
|
|
78
|
+
*/
|
|
79
|
+
disabled: boolean;
|
|
80
|
+
/**
|
|
81
|
+
* Optional decorator component (typically AILabel) to be rendered by CardHeader
|
|
82
|
+
*/
|
|
83
|
+
decorator?: ReactNode;
|
|
84
|
+
/**
|
|
85
|
+
* Whether the card is in horizontal layout mode
|
|
86
|
+
*/
|
|
87
|
+
horizontal?: boolean;
|
|
88
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
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 CardActionProps {
|
|
9
|
+
/**
|
|
10
|
+
* Provide the contents of the CardAction (typically a Button or IconButton).
|
|
11
|
+
* Wrapping content in CardAction opts into action-set layout: no footer
|
|
12
|
+
* padding, automatic top border, and stretch/fixed-width button behavior.
|
|
13
|
+
*/
|
|
14
|
+
children?: ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Provide an optional class to be applied to the containing node.
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Label shown in the overflow menu when this action is hidden.
|
|
21
|
+
* If not provided, CardActions will attempt to read it from the
|
|
22
|
+
* direct child's props (label, iconDescription, or children text).
|
|
23
|
+
*/
|
|
24
|
+
label?: string;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* CardAction is a wrapper for interactive elements in the card footer.
|
|
28
|
+
* Its presence signals action-set layout to the footer (no padding, auto
|
|
29
|
+
* border, stretch behavior).
|
|
30
|
+
*
|
|
31
|
+
* Note: do not use CardAction inside a clickable card — clickable cards
|
|
32
|
+
* should not contain interactive elements (see usage guidelines).
|
|
33
|
+
*/
|
|
34
|
+
export declare const CardAction: {
|
|
35
|
+
({ children, className, ...rest }: CardActionProps): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
displayName: string;
|
|
37
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
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/CardAction.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 = "CardAction";
|
|
23
|
+
/**
|
|
24
|
+
* CardAction is a wrapper for interactive elements in the card footer.
|
|
25
|
+
* Its presence signals action-set layout to the footer (no padding, auto
|
|
26
|
+
* border, stretch behavior).
|
|
27
|
+
*
|
|
28
|
+
* Note: do not use CardAction inside a clickable card — clickable cards
|
|
29
|
+
* should not contain interactive elements (see usage guidelines).
|
|
30
|
+
*/
|
|
31
|
+
const CardAction = ({ children, className, ...rest }) => {
|
|
32
|
+
const prefix = require_usePrefix.usePrefix();
|
|
33
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
34
|
+
...rest,
|
|
35
|
+
className: (0, classnames.default)(`${prefix}--card__action`, className),
|
|
36
|
+
children
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
CardAction.displayName = componentName;
|
|
40
|
+
//#endregion
|
|
41
|
+
exports.CardAction = CardAction;
|
|
@@ -0,0 +1,30 @@
|
|
|
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 CardActionsProps {
|
|
9
|
+
/**
|
|
10
|
+
* Provide the contents of the CardActions (typically CardAction components).
|
|
11
|
+
*/
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Provide an optional class to be applied to the containing node.
|
|
15
|
+
*/
|
|
16
|
+
className?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Aria label for the overflow menu
|
|
19
|
+
*/
|
|
20
|
+
overflowMenuLabel?: string;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* CardActions is a container for action buttons in the card header.
|
|
24
|
+
* Positioned in the top-right corner with 8px gap between actions.
|
|
25
|
+
* When actions exceed 50% of available header space, overflow menu is shown.
|
|
26
|
+
*/
|
|
27
|
+
export declare const CardActions: {
|
|
28
|
+
({ children, className, overflowMenuLabel, ...rest }: CardActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
displayName: string;
|
|
30
|
+
};
|