@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.
Files changed (143) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +962 -962
  2. package/es/components/Card/Card.d.ts +48 -0
  3. package/es/components/Card/Card.js +148 -0
  4. package/es/components/Card/Card.types.d.ts +88 -0
  5. package/es/components/Card/CardAction.d.ts +37 -0
  6. package/es/components/Card/CardAction.js +32 -0
  7. package/es/components/Card/CardActions.d.ts +30 -0
  8. package/es/components/Card/CardActions.js +93 -0
  9. package/es/components/Card/CardBody.d.ts +11 -0
  10. package/es/components/Card/CardBody.js +34 -0
  11. package/es/components/Card/CardContext.d.ts +17 -0
  12. package/es/components/Card/CardContext.js +31 -0
  13. package/es/components/Card/CardFooter.d.ts +11 -0
  14. package/es/components/Card/CardFooter.js +34 -0
  15. package/es/components/Card/CardHeader.d.ts +11 -0
  16. package/es/components/Card/CardHeader.js +44 -0
  17. package/es/components/Card/CardHeaderMedia.d.ts +21 -0
  18. package/es/components/Card/CardHeaderMedia.js +24 -0
  19. package/es/components/Card/CardMedia.d.ts +35 -0
  20. package/es/components/Card/CardMedia.js +42 -0
  21. package/es/components/Card/CardTitle.d.ts +72 -0
  22. package/es/components/Card/CardTitle.js +86 -0
  23. package/es/components/Card/CardTitleMedia.d.ts +23 -0
  24. package/es/components/Card/CardTitleMedia.js +36 -0
  25. package/es/components/Card/_story-assets/data.d.ts +6 -0
  26. package/es/components/Card/_story-assets/options.d.ts +47 -0
  27. package/es/components/Card/index.d.ts +8 -0
  28. package/es/components/Card/index.js +33 -0
  29. package/es/components/Checkbox/Checkbox.js +1 -1
  30. package/es/components/CheckboxGroup/CheckboxGroup.js +1 -1
  31. package/es/components/ComboBox/ComboBox.js +2 -2
  32. package/es/components/ComboButton/index.js +1 -1
  33. package/es/components/ComposedModal/ComposedModal.js +1 -1
  34. package/es/components/DatePicker/DatePicker.d.ts +10 -0
  35. package/es/components/DatePicker/DatePicker.js +7 -6
  36. package/es/components/DatePicker/next/components/Calendar.d.ts +40 -0
  37. package/es/components/DatePicker/next/components/Calendar.js +181 -0
  38. package/es/components/DatePicker/next/components/DatePicker.d.ts +86 -0
  39. package/es/components/DatePicker/next/components/DatePicker.js +147 -0
  40. package/es/components/DatePicker/next/components/DatePickerInput.d.ts +143 -0
  41. package/es/components/DatePicker/next/components/DatePickerInput.js +124 -0
  42. package/es/components/DatePicker/next/components/DatePickerSkeleton.d.ts +22 -0
  43. package/es/components/DatePicker/next/components/DatePickerSkeleton.js +32 -0
  44. package/es/components/DatePicker/next/hooks/useDatePicker.d.ts +144 -0
  45. package/es/components/DatePicker/next/hooks/useDatePicker.js +286 -0
  46. package/es/components/DatePicker/next/index.d.ts +12 -0
  47. package/es/components/DatePicker/next/index.js +19 -0
  48. package/es/components/DatePickerInput/DatePickerInput.js +1 -1
  49. package/es/components/Dropdown/Dropdown.js +2 -2
  50. package/es/components/ExpandableSearch/ExpandableSearch.js +1 -1
  51. package/es/components/MenuButton/index.js +1 -1
  52. package/es/components/MultiSelect/FilterableMultiSelect.js +2 -2
  53. package/es/components/MultiSelect/MultiSelect.js +2 -2
  54. package/es/components/NumberInput/NumberInput.js +2 -2
  55. package/es/components/OverflowMenu/next/index.js +1 -1
  56. package/es/components/RadioButton/RadioButton.js +1 -1
  57. package/es/components/RadioButtonGroup/RadioButtonGroup.js +1 -1
  58. package/es/components/Select/Select.js +1 -1
  59. package/es/components/Tag/SelectableTag.js +1 -1
  60. package/es/components/TextArea/TextArea.js +1 -1
  61. package/es/components/TextInput/TextInput.js +1 -1
  62. package/es/index.d.ts +2 -0
  63. package/es/index.js +7 -5
  64. package/es/internal/checkForOverflow.d.ts +5 -0
  65. package/es/internal/useFocus.d.ts +23 -0
  66. package/es/internal/usePrefersReducedMotion.d.ts +11 -0
  67. package/es/internal/useSidePanelPresence.d.ts +21 -0
  68. package/lib/components/Card/Card.d.ts +48 -0
  69. package/lib/components/Card/Card.js +161 -0
  70. package/lib/components/Card/Card.types.d.ts +88 -0
  71. package/lib/components/Card/CardAction.d.ts +37 -0
  72. package/lib/components/Card/CardAction.js +41 -0
  73. package/lib/components/Card/CardActions.d.ts +30 -0
  74. package/lib/components/Card/CardActions.js +96 -0
  75. package/lib/components/Card/CardBody.d.ts +11 -0
  76. package/lib/components/Card/CardBody.js +37 -0
  77. package/lib/components/Card/CardContext.d.ts +17 -0
  78. package/lib/components/Card/CardContext.js +32 -0
  79. package/lib/components/Card/CardFooter.d.ts +11 -0
  80. package/lib/components/Card/CardFooter.js +37 -0
  81. package/lib/components/Card/CardHeader.d.ts +11 -0
  82. package/lib/components/Card/CardHeader.js +47 -0
  83. package/lib/components/Card/CardHeaderMedia.d.ts +21 -0
  84. package/lib/components/Card/CardHeaderMedia.js +33 -0
  85. package/lib/components/Card/CardMedia.d.ts +35 -0
  86. package/lib/components/Card/CardMedia.js +51 -0
  87. package/lib/components/Card/CardTitle.d.ts +72 -0
  88. package/lib/components/Card/CardTitle.js +89 -0
  89. package/lib/components/Card/CardTitleMedia.d.ts +23 -0
  90. package/lib/components/Card/CardTitleMedia.js +39 -0
  91. package/lib/components/Card/_story-assets/data.d.ts +6 -0
  92. package/lib/components/Card/_story-assets/options.d.ts +47 -0
  93. package/lib/components/Card/index.d.ts +8 -0
  94. package/lib/components/Card/index.js +48 -0
  95. package/lib/components/Checkbox/Checkbox.js +1 -1
  96. package/lib/components/CheckboxGroup/CheckboxGroup.js +1 -1
  97. package/lib/components/ComboBox/ComboBox.js +2 -2
  98. package/lib/components/ComboButton/index.js +1 -1
  99. package/lib/components/ComposedModal/ComposedModal.js +1 -1
  100. package/lib/components/DatePicker/DatePicker.d.ts +10 -0
  101. package/lib/components/DatePicker/DatePicker.js +7 -6
  102. package/lib/components/DatePicker/next/components/Calendar.d.ts +40 -0
  103. package/lib/components/DatePicker/next/components/Calendar.js +184 -0
  104. package/lib/components/DatePicker/next/components/DatePicker.d.ts +86 -0
  105. package/lib/components/DatePicker/next/components/DatePicker.js +150 -0
  106. package/lib/components/DatePicker/next/components/DatePickerInput.d.ts +143 -0
  107. package/lib/components/DatePicker/next/components/DatePickerInput.js +127 -0
  108. package/lib/components/DatePicker/next/components/DatePickerSkeleton.d.ts +22 -0
  109. package/lib/components/DatePicker/next/components/DatePickerSkeleton.js +41 -0
  110. package/lib/components/DatePicker/next/hooks/useDatePicker.d.ts +144 -0
  111. package/lib/components/DatePicker/next/hooks/useDatePicker.js +286 -0
  112. package/lib/components/DatePicker/next/index.d.ts +12 -0
  113. package/lib/components/DatePicker/next/index.js +27 -0
  114. package/lib/components/DatePickerInput/DatePickerInput.js +1 -1
  115. package/lib/components/Dropdown/Dropdown.js +2 -2
  116. package/lib/components/ExpandableSearch/ExpandableSearch.js +1 -1
  117. package/lib/components/MenuButton/index.js +1 -1
  118. package/lib/components/MultiSelect/FilterableMultiSelect.js +2 -2
  119. package/lib/components/MultiSelect/MultiSelect.js +2 -2
  120. package/lib/components/NumberInput/NumberInput.js +2 -2
  121. package/lib/components/OverflowMenu/next/index.js +1 -1
  122. package/lib/components/RadioButton/RadioButton.js +1 -1
  123. package/lib/components/RadioButtonGroup/RadioButtonGroup.js +1 -1
  124. package/lib/components/Select/Select.js +1 -1
  125. package/lib/components/Tag/SelectableTag.js +1 -1
  126. package/lib/components/TextArea/TextArea.js +1 -1
  127. package/lib/components/TextInput/TextInput.js +1 -1
  128. package/lib/index.d.ts +2 -0
  129. package/lib/index.js +59 -45
  130. package/lib/internal/checkForOverflow.d.ts +5 -0
  131. package/lib/internal/useFocus.d.ts +23 -0
  132. package/lib/internal/usePrefersReducedMotion.d.ts +11 -0
  133. package/lib/internal/useSidePanelPresence.d.ts +21 -0
  134. package/package.json +11 -11
  135. package/scss/components/action-set/_action-set.scss +9 -0
  136. package/scss/components/action-set/_index.scss +9 -0
  137. package/scss/components/resizer/_index.scss +9 -0
  138. package/scss/components/resizer/_resizer.scss +9 -0
  139. package/scss/components/side-panel/_index.scss +9 -0
  140. package/scss/components/side-panel/_side-panel.scss +9 -0
  141. package/scss/components/truncated-text/_index.scss +9 -0
  142. package/scss/components/truncated-text/_truncated-text.scss +9 -0
  143. 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,5 @@
1
+ /**
2
+ * used to calculate if a element is overflowing the width or height of an area
3
+ */
4
+ export declare const checkWidthOverflow: (el: HTMLElement | null) => boolean;
5
+ export declare const checkHeightOverflow: (el: HTMLElement | null) => boolean;
@@ -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
+ };