@redsift/design-system 12.5.3-alpha.4 → 12.5.3-alpha.6

package/_internal/Breadcrumbs2.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
 import styled, { css } from 'styled-components';
 import { i as baseStyling } from './styles5.js';
+import { a as warnOnUnknownChildren } from './warnCompoundMisuse.js';
 import { f as filterComponents } from './filterComponents.js';
 import { B as BreadcrumbItem } from './BreadcrumbItem.js';
 import { f as getStylingTransientProps } from './styles.js';
@@ -43,6 +44,7 @@ const StyledBreadcrumbs = styled.nav`
 `;
 
 const _excluded = ["children", "className", "isDisabled", "theme"];
+const ALLOWED_CHILDREN = new Set(['BreadcrumbItem']);
 const COMPONENT_NAME = 'Breadcrumbs';
 const CLASSNAME = 'redsift-breadcrumbs';
 
@@ -97,6 +99,9 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
     } = otherProps,
     forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   warnIfNoAccessibleLabelFound(props, undefined, 'Breadcrumbs');
+  if (process.env.NODE_ENV !== 'production') {
+    warnOnUnknownChildren(children, 'Breadcrumbs', ALLOWED_CHILDREN);
+  }
   const theme = useTheme(propsTheme);
   const childArray = filterComponents([Breadcrumbs.Item])(children);
   const breadcrumbItems = childArray.map((child, index) => {

package/_internal/Breadcrumbs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs2.js","sources":["../../src/components/breadcrumbs/styles.ts","../../src/components/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledBreadcrumbsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBreadcrumbs = styled.nav<StyledBreadcrumbsProps>`\n  ${baseStyling}\n\n  ol {\n    display: inline-flex;\n    list-style: none;\n    padding: unset;\n  }\n\n  .redsift-breadcrumbs__separator {\n    font-family: var(--redsift-typography-body-font-family);\n    font-size: var(--redsift-typography-body-font-size);\n    font-weight: var(--redsift-typography-body-font-weight);\n    line-height: var(--redsift-typography-body-line-height);\n    margin: 0px 4px;\n\n    ${({ $isDisabled, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-neutral-mid-grey);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-text-primary);\n          `}\n  }\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { BreadcrumbItem } from '../breadcrumb-item';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { StyledBreadcrumbs } from './styles';\nimport { BreadcrumbsProps } from './types';\nimport { filterComponents } from '../../utils';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Breadcrumbs';\nconst CLASSNAME = 'redsift-breadcrumbs';\n\n/**\n * Breadcrumbs display a list of links to parent pages in hierarchical order,\n * helping users understand their location within the application.\n *\n * The last item is automatically marked as the current page and is not clickable.\n * Provide an `aria-label` for accessibility (e.g., \"Breadcrumb navigation\").\n *\n * @example\n * // Basic breadcrumb navigation\n * <Breadcrumbs aria-label=\"Breadcrumb\">\n *   <Breadcrumbs.Item href=\"/\">Home</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"/products\">Products</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Current Page</Breadcrumbs.Item>\n * </Breadcrumbs>\n *\n * @example\n * // With custom router link (React Router, Next.js, etc.)\n * <Breadcrumbs aria-label=\"Breadcrumb\">\n *   <Breadcrumbs.Item as={RouterLink} href=\"/\">Home</Breadcrumbs.Item>\n *   <Breadcrumbs.Item as={RouterLink} href=\"/settings\">Settings</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Profile</Breadcrumbs.Item>\n * </Breadcrumbs>\n *\n * @example\n * // Disabled breadcrumbs (all items disabled)\n * <Breadcrumbs aria-label=\"Breadcrumb\" isDisabled>\n *   <Breadcrumbs.Item href=\"/\">Home</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"/page\">Page</Breadcrumbs.Item>\n * </Breadcrumbs>\n *\n * @example\n * // Individual item disabled\n * <Breadcrumbs aria-label=\"Breadcrumb\">\n *   <Breadcrumbs.Item href=\"/\">Home</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"/restricted\" isDisabled>Restricted</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Current</Breadcrumbs.Item>\n * </Breadcrumbs>\n */\nexport const BaseBreadcrumbs: Comp<BreadcrumbsProps, HTMLElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const { children, className, isDisabled, theme: propsTheme, ...forwardedProps } = otherProps;\n\n  warnIfNoAccessibleLabelFound(props, undefined, 'Breadcrumbs');\n\n  const theme = useTheme(propsTheme);\n\n  const childArray = filterComponents([Breadcrumbs.Item])(children);\n  const breadcrumbItems = childArray.map((child, index) => {\n    const isCurrent = index === childArray.length - 1;\n\n    return (\n      <li key={index}>\n        <Breadcrumbs.Item\n          isDisabled={child.props.isDisabled || isDisabled || undefined}\n          {...child.props}\n          key={child.key ?? index}\n          isCurrent={isCurrent}\n        />\n        {isCurrent === false ? <span className={`${BaseBreadcrumbs.className}__separator`}>{'/'}</span> : null}\n      </li>\n    );\n  });\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledBreadcrumbs\n        {...forwardedProps}\n        {...transientProps}\n        $isDisabled={isDisabled}\n        $theme={theme}\n        className={classNames(BaseBreadcrumbs.className, className)}\n        ref={ref as RefObject<HTMLElement>}\n      >\n        <ol>{breadcrumbItems}</ol>\n      </StyledBreadcrumbs>\n    </ThemeProvider>\n  );\n});\nBaseBreadcrumbs.className = CLASSNAME;\nBaseBreadcrumbs.displayName = COMPONENT_NAME;\n\nexport const Breadcrumbs = Object.assign(BaseBreadcrumbs, {\n  Item: BreadcrumbItem,\n});\n"],"names":["StyledBreadcrumbs","styled","nav","baseStyling","_ref","$isDisabled","$theme","css","COMPONENT_NAME","CLASSNAME","BaseBreadcrumbs","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","children","className","isDisabled","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","warnIfNoAccessibleLabelFound","undefined","useTheme","childArray","filterComponents","Breadcrumbs","Item","breadcrumbItems","map","child","index","_child$key","isCurrent","length","React","createElement","key","_extends","ThemeProvider","value","classNames","displayName","Object","assign","BreadcrumbItem"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs2.js","sources":["../../src/components/breadcrumbs/styles.ts","../../src/components/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledBreadcrumbsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBreadcrumbs = styled.nav<StyledBreadcrumbsProps>`\n  ${baseStyling}\n\n  ol {\n    display: inline-flex;\n    list-style: none;\n    padding: unset;\n  }\n\n  .redsift-breadcrumbs__separator {\n    font-family: var(--redsift-typography-body-font-family);\n    font-size: var(--redsift-typography-body-font-size);\n    font-weight: var(--redsift-typography-body-font-weight);\n    line-height: var(--redsift-typography-body-line-height);\n    margin: 0px 4px;\n\n    ${({ $isDisabled, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-neutral-mid-grey);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-text-primary);\n          `}\n  }\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { BreadcrumbItem } from '../breadcrumb-item';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { StyledBreadcrumbs } from './styles';\nimport { BreadcrumbsProps } from './types';\nimport { filterComponents } from '../../utils';\nimport { warnOnUnknownChildren } from '../../utils/warnCompoundMisuse';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst ALLOWED_CHILDREN = new Set(['BreadcrumbItem']);\n\nconst COMPONENT_NAME = 'Breadcrumbs';\nconst CLASSNAME = 'redsift-breadcrumbs';\n\n/**\n * Breadcrumbs display a list of links to parent pages in hierarchical order,\n * helping users understand their location within the application.\n *\n * The last item is automatically marked as the current page and is not clickable.\n * Provide an `aria-label` for accessibility (e.g., \"Breadcrumb navigation\").\n *\n * @example\n * // Basic breadcrumb navigation\n * <Breadcrumbs aria-label=\"Breadcrumb\">\n *   <Breadcrumbs.Item href=\"/\">Home</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"/products\">Products</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Current Page</Breadcrumbs.Item>\n * </Breadcrumbs>\n *\n * @example\n * // With custom router link (React Router, Next.js, etc.)\n * <Breadcrumbs aria-label=\"Breadcrumb\">\n *   <Breadcrumbs.Item as={RouterLink} href=\"/\">Home</Breadcrumbs.Item>\n *   <Breadcrumbs.Item as={RouterLink} href=\"/settings\">Settings</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Profile</Breadcrumbs.Item>\n * </Breadcrumbs>\n *\n * @example\n * // Disabled breadcrumbs (all items disabled)\n * <Breadcrumbs aria-label=\"Breadcrumb\" isDisabled>\n *   <Breadcrumbs.Item href=\"/\">Home</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"/page\">Page</Breadcrumbs.Item>\n * </Breadcrumbs>\n *\n * @example\n * // Individual item disabled\n * <Breadcrumbs aria-label=\"Breadcrumb\">\n *   <Breadcrumbs.Item href=\"/\">Home</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"/restricted\" isDisabled>Restricted</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Current</Breadcrumbs.Item>\n * </Breadcrumbs>\n */\nexport const BaseBreadcrumbs: Comp<BreadcrumbsProps, HTMLElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const { children, className, isDisabled, theme: propsTheme, ...forwardedProps } = otherProps;\n\n  warnIfNoAccessibleLabelFound(props, undefined, 'Breadcrumbs');\n\n  if (process.env.NODE_ENV !== 'production') {\n    warnOnUnknownChildren(children, 'Breadcrumbs', ALLOWED_CHILDREN);\n  }\n\n  const theme = useTheme(propsTheme);\n\n  const childArray = filterComponents([Breadcrumbs.Item])(children);\n  const breadcrumbItems = childArray.map((child, index) => {\n    const isCurrent = index === childArray.length - 1;\n\n    return (\n      <li key={index}>\n        <Breadcrumbs.Item\n          isDisabled={child.props.isDisabled || isDisabled || undefined}\n          {...child.props}\n          key={child.key ?? index}\n          isCurrent={isCurrent}\n        />\n        {isCurrent === false ? <span className={`${BaseBreadcrumbs.className}__separator`}>{'/'}</span> : null}\n      </li>\n    );\n  });\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledBreadcrumbs\n        {...forwardedProps}\n        {...transientProps}\n        $isDisabled={isDisabled}\n        $theme={theme}\n        className={classNames(BaseBreadcrumbs.className, className)}\n        ref={ref as RefObject<HTMLElement>}\n      >\n        <ol>{breadcrumbItems}</ol>\n      </StyledBreadcrumbs>\n    </ThemeProvider>\n  );\n});\nBaseBreadcrumbs.className = CLASSNAME;\nBaseBreadcrumbs.displayName = COMPONENT_NAME;\n\nexport const Breadcrumbs = Object.assign(BaseBreadcrumbs, {\n  Item: BreadcrumbItem,\n});\n"],"names":["StyledBreadcrumbs","styled","nav","baseStyling","_ref","$isDisabled","$theme","css","ALLOWED_CHILDREN","Set","COMPONENT_NAME","CLASSNAME","BaseBreadcrumbs","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","children","className","isDisabled","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","warnIfNoAccessibleLabelFound","undefined","process","env","NODE_ENV","warnOnUnknownChildren","useTheme","childArray","filterComponents","Breadcrumbs","Item","breadcrumbItems","map","child","index","_child$key","isCurrent","length","React","createElement","key","_extends","ThemeProvider","value","classNames","displayName","Object","assign","BreadcrumbItem"],"mappings":"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"}

package/_internal/Card2.js

@@ -7,6 +7,7 @@ import { i as baseStyling } from './styles5.js';
 import { T as Theme } from './colors.js';
 import { p as partitionComponents } from './partitionComponents.js';
 import { i as isComponent } from './isComponent.js';
+import { a as warnOnUnknownChildren } from './warnCompoundMisuse.js';
 import { C as CardHeader } from './CardHeader.js';
 import { C as CardBody } from './CardBody.js';
 import { C as CardActions } from './CardActions.js';
@@ -92,6 +93,7 @@ const StyledCard = styled.div`
 `;
 
 const _excluded = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse", "theme"];
+const ALLOWED_CHILDREN = new Set(['CardHeader', 'CardBody', 'CardActions']);
 const COMPONENT_NAME = 'Card';
 const CLASSNAME = 'redsift-card';
 
@@ -196,6 +198,9 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
       setIsCollapsed(collapsed);
     }
   }, [onCollapse]);
+  if (process.env.NODE_ENV !== 'production') {
+    warnOnUnknownChildren(children, 'Card', ALLOWED_CHILDREN);
+  }
   const [[header], [body], [actions]] = partitionComponents(React__default.Children.toArray(children), [isComponent('CardHeader'), isComponent('CardBody'), isComponent('CardActions')]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     value: {

package/_internal/Card2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card2.js","sources":["../../src/components/card/intl/index.ts","../../src/components/card/styles.ts","../../src/components/card/Card.tsx"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledCardProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledCard = styled.div<StyledCardProps>`\n  ${baseStyling}\n\n  ${({ $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n  `}\n\n  display: flex;\n  flex-direction: column;\n\n  .redsift-card__header {\n    align-items: flex-start;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .redsift-card-header__icon-button {\n    margin-top: 8px;\n    margin-left: auto;\n    margin-right: 8px;\n\n    [dir='rtl'] & {\n      margin-left: 8px;\n      margin-right: auto;\n    }\n  }\n\n  .redsift-card__content {\n    visibility: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n    overflow: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n    height: ${({ $isCollapsed }) => (!$isCollapsed ? 'auto' : '0px')};\n  }\n`;\n","import React, { forwardRef, RefObject, useCallback, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport { mdiChevronDown, mdiChevronUp } from '@redsift/icons';\nimport { IconButton } from '../icon-button';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { StyledCard } from './styles';\nimport { CardProps } from './types';\nimport { partitionComponents } from '../../utils/partitionComponents';\nimport { isComponent } from '../../utils/isComponent';\nimport { CardHeader } from '../card-header';\nimport { CardBody } from '../card-body';\nimport { CardActions } from '../card-actions';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Card';\nconst CLASSNAME = 'redsift-card';\n\n/**\n * Card is a container for grouping related content and actions. Cards can be\n * collapsible and support controlled or uncontrolled state.\n *\n * Cards only accept `Card.Header`, `Card.Body`, and `Card.Actions` as children.\n * The Header has a fixed design; Body and Actions can contain any content.\n *\n * @example\n * // Basic card with header and body\n * <Card>\n *   <Card.Header header=\"Card Title\" />\n *   <Card.Body>\n *     Your content goes here.\n *   </Card.Body>\n * </Card>\n *\n * @example\n * // Card with subheader and icon\n * <Card>\n *   <Card.Header header=\"Settings\" subheader=\"Manage preferences\" icon={mdiCog} />\n *   <Card.Body>Settings content...</Card.Body>\n * </Card>\n *\n * @example\n * // Card with actions\n * <Card>\n *   <Card.Header header=\"Confirm Action\" subheader=\"Please review\" />\n *   <Card.Body>Are you sure you want to proceed?</Card.Body>\n *   <Card.Actions>\n *     <Button variant=\"secondary\">Cancel</Button>\n *     <Button>Confirm</Button>\n *   </Card.Actions>\n * </Card>\n *\n * @example\n * // Card.Actions with space-between layout\n * <Card>\n *   <Card.Header header=\"Form\" />\n *   <Card.Body>Form content...</Card.Body>\n *   <Card.Actions justifyContent=\"space-between\">\n *     <Button variant=\"unstyled\">Reset</Button>\n *     <Flexbox gap=\"8px\">\n *       <Button variant=\"secondary\">Cancel</Button>\n *       <Button>Submit</Button>\n *     </Flexbox>\n *   </Card.Actions>\n * </Card>\n *\n * @example\n * // Collapsible card (uncontrolled - self-managing)\n * <Card isCollapsible>\n *   <Card.Header header=\"Expandable Section\" />\n *   <Card.Body>Content hidden when collapsed</Card.Body>\n * </Card>\n *\n * @example\n * // Collapsible card (controlled)\n * const [collapsed, setCollapsed] = useState(false);\n * <Card isCollapsible isCollapsed={collapsed} onCollapse={setCollapsed}>\n *   <Card.Header header=\"Controlled Collapse\" />\n *   <Card.Body>Controlled content</Card.Body>\n * </Card>\n *\n * @example\n * // Header with custom children (buttons, etc.)\n * <Card>\n *   <Card.Header header=\"List\">\n *     <Button variant=\"secondary\" leftIcon={mdiPlus}>Add Item</Button>\n *   </Card.Header>\n *   <Card.Body>List items...</Card.Body>\n * </Card>\n */\nconst BaseCard: Comp<CardProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    children,\n    className,\n    defaultCollapsed,\n    isCollapsed: propsIsCollapsed,\n    isCollapsible,\n    onCollapse,\n    theme: propsTheme,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n\n  const format = useMessageFormatter(intlMessages);\n\n  const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed ?? defaultCollapsed);\n\n  useEffect(() => {\n    setIsCollapsed(propsIsCollapsed ?? defaultCollapsed);\n  }, [propsIsCollapsed, defaultCollapsed]);\n\n  const handleCollapse = useCallback(\n    (collapsed: boolean) => {\n      if (onCollapse) {\n        onCollapse(collapsed);\n      }\n      if (propsIsCollapsed === undefined || propsIsCollapsed === null) {\n        setIsCollapsed(collapsed);\n      }\n    },\n    [onCollapse]\n  );\n\n  const [[header], [body], [actions]] = partitionComponents(React.Children.toArray(children), [\n    isComponent('CardHeader'),\n    isComponent('CardBody'),\n    isComponent('CardActions'),\n  ]);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledCard\n        {...forwardedProps}\n        {...transientProps}\n        className={classNames(BaseCard.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        $isCollapsed={isCollapsed}\n        $theme={theme}\n      >\n        {header || isCollapsible ? (\n          <div className={`${BaseCard.className}__header`}>\n            {header && isComponent('CardHeader')(header) ? header : null}\n\n            {isCollapsible ? (\n              <IconButton\n                theme={theme}\n                aria-label={format(isCollapsed ? 'expand' : 'collapse')}\n                className={`${BaseCard.className}-header__icon-button`}\n                color=\"grey\"\n                icon={isCollapsed ? mdiChevronDown : mdiChevronUp}\n                onClick={() => handleCollapse(!isCollapsed)}\n              />\n            ) : null}\n          </div>\n        ) : null}\n\n        {body || actions ? (\n          <div className={`${BaseCard.className}__content`}>\n            {body && isComponent('CardBody')(body) ? body : null}\n            {actions && isComponent('CardActions')(actions) ? actions : null}\n          </div>\n        ) : null}\n      </StyledCard>\n    </ThemeProvider>\n  );\n});\nBaseCard.className = CLASSNAME;\nBaseCard.displayName = COMPONENT_NAME;\n\nexport const Card = Object.assign(BaseCard, {\n  Header: CardHeader,\n  Body: CardBody,\n  Actions: CardActions,\n});\n"],"names":["enUS","frFR","StyledCard","styled","div","baseStyling","_ref","$theme","css","Theme","dark","_ref2","$isCollapsed","_ref3","_ref4","COMPONENT_NAME","CLASSNAME","BaseCard","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","children","className","defaultCollapsed","isCollapsed","propsIsCollapsed","isCollapsible","onCollapse","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","format","useMessageFormatter","intlMessages","setIsCollapsed","useState","useEffect","handleCollapse","useCallback","collapsed","undefined","header","body","actions","partitionComponents","React","Children","toArray","isComponent","createElement","ThemeProvider","value","_extends","classNames","IconButton","color","icon","mdiChevronDown","mdiChevronUp","onClick","displayName","Card","Object","assign","Header","CardHeader","Body","CardBody","Actions","CardActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,mBAAe;AACb,EAAA,OAAO,EAAEA,IAAI;AACb,EAAA,OAAO,EAAEC,IAAAA;AACX,CAAC;;ACDD;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,MAAM,CAACC,GAAqB,CAAA;AACtD,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AACxB,uCAAyCD,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AACzF,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAA,EAAkBC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,YAAAA;AAAa,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAM,CAACC,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAA;AAAA,CAAE,CAAA;AAC/E,cAAA,EAAgBC,KAAA,IAAA;EAAA,IAAC;AAAED,IAAAA,YAAAA;AAAa,GAAC,GAAAC,KAAA,CAAA;AAAA,EAAA,OAAM,CAACD,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAA;AAAA,CAAE,CAAA;AAC7E,YAAA,EAAcE,KAAA,IAAA;EAAA,IAAC;AAAEF,IAAAA,YAAAA;AAAa,GAAC,GAAAE,KAAA,CAAA;AAAA,EAAA,OAAM,CAACF,YAAY,GAAG,MAAM,GAAG,KAAK,CAAA;AAAA,CAAE,CAAA;AACrE;AACA,CAAC;;;ACtBD,MAAMG,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAyC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAM;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,wBAAwB,CAACJ,KAAK,CAAC,CAAA;EAEtE,MAAM;MACJK,QAAQ;MACRC,SAAS;MACTC,gBAAgB;AAChBC,MAAAA,WAAW,EAAEC,gBAAgB;MAC7BC,aAAa;MACbC,UAAU;AACVC,MAAAA,KAAK,EAAEC,UAAAA;AAET,KAAC,GAAGV,UAAU;AADTW,IAAAA,cAAc,GAAAC,wBAAA,CACfZ,UAAU,EAAAa,SAAA,CAAA,CAAA;AAEd,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,MAAMK,MAAM,GAAGC,mBAAmB,CAACC,YAAY,CAAC,CAAA;AAEhD,EAAA,MAAM,CAACZ,WAAW,EAAEa,cAAc,CAAC,GAAGC,QAAQ,CAACb,gBAAgB,aAAhBA,gBAAgB,KAAA,KAAA,CAAA,GAAhBA,gBAAgB,GAAIF,gBAAgB,CAAC,CAAA;AAEpFgB,EAAAA,SAAS,CAAC,MAAM;IACdF,cAAc,CAACZ,gBAAgB,KAAhBA,IAAAA,IAAAA,gBAAgB,cAAhBA,gBAAgB,GAAIF,gBAAgB,CAAC,CAAA;AACtD,GAAC,EAAE,CAACE,gBAAgB,EAAEF,gBAAgB,CAAC,CAAC,CAAA;AAExC,EAAA,MAAMiB,cAAc,GAAGC,WAAW,CAC/BC,SAAkB,IAAK;AACtB,IAAA,IAAIf,UAAU,EAAE;MACdA,UAAU,CAACe,SAAS,CAAC,CAAA;AACvB,KAAA;AACA,IAAA,IAAIjB,gBAAgB,KAAKkB,SAAS,IAAIlB,gBAAgB,KAAK,IAAI,EAAE;MAC/DY,cAAc,CAACK,SAAS,CAAC,CAAA;AAC3B,KAAA;AACF,GAAC,EACD,CAACf,UAAU,CACb,CAAC,CAAA;AAED,EAAA,MAAM,CAAC,CAACiB,MAAM,CAAC,EAAE,CAACC,IAAI,CAAC,EAAE,CAACC,OAAO,CAAC,CAAC,GAAGC,mBAAmB,CAACC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAAC7B,QAAQ,CAAC,EAAE,CAC1F8B,WAAW,CAAC,YAAY,CAAC,EACzBA,WAAW,CAAC,UAAU,CAAC,EACvBA,WAAW,CAAC,aAAa,CAAC,CAC3B,CAAC,CAAA;AAEF,EAAA,oBACEH,cAAA,CAAAI,aAAA,CAACC,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAE1B,MAAAA,KAAAA;AAAM,KAAA;GAC5BoB,eAAAA,cAAA,CAAAI,aAAA,CAACrD,UAAU,EAAAwD,QAAA,CAAA,EAAA,EACLzB,cAAc,EACdZ,cAAc,EAAA;IAClBI,SAAS,EAAEkC,UAAU,CAAC1C,QAAQ,CAACQ,SAAS,EAAEA,SAAS,CAAE;AACrDL,IAAAA,GAAG,EAAEA,GAAiC;AACtCR,IAAAA,YAAY,EAAEe,WAAY;AAC1BpB,IAAAA,MAAM,EAAEwB,KAAAA;AAAM,GAAA,CAAA,EAEbgB,MAAM,IAAIlB,aAAa,gBACtBsB,cAAA,CAAAI,aAAA,CAAA,KAAA,EAAA;AAAK9B,IAAAA,SAAS,EAAG,CAAA,EAAER,QAAQ,CAACQ,SAAU,CAAA,QAAA,CAAA;GACnCsB,EAAAA,MAAM,IAAIO,WAAW,CAAC,YAAY,CAAC,CAACP,MAAM,CAAC,GAAGA,MAAM,GAAG,IAAI,EAE3DlB,aAAa,gBACZsB,cAAA,CAAAI,aAAA,CAACK,UAAU,EAAA;AACT7B,IAAAA,KAAK,EAAEA,KAAM;AACb,IAAA,YAAA,EAAYM,MAAM,CAACV,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAE;AACxDF,IAAAA,SAAS,EAAG,CAAA,EAAER,QAAQ,CAACQ,SAAU,CAAsB,oBAAA,CAAA;AACvDoC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,IAAI,EAAEnC,WAAW,GAAGoC,cAAc,GAAGC,YAAa;AAClDC,IAAAA,OAAO,EAAEA,MAAMtB,cAAc,CAAC,CAAChB,WAAW,CAAA;AAAE,GAC7C,CAAC,GACA,IACD,CAAC,GACJ,IAAI,EAEPqB,IAAI,IAAIC,OAAO,gBACdE,cAAA,CAAAI,aAAA,CAAA,KAAA,EAAA;AAAK9B,IAAAA,SAAS,EAAG,CAAA,EAAER,QAAQ,CAACQ,SAAU,CAAA,SAAA,CAAA;AAAW,GAAA,EAC9CuB,IAAI,IAAIM,WAAW,CAAC,UAAU,CAAC,CAACN,IAAI,CAAC,GAAGA,IAAI,GAAG,IAAI,EACnDC,OAAO,IAAIK,WAAW,CAAC,aAAa,CAAC,CAACL,OAAO,CAAC,GAAGA,OAAO,GAAG,IACzD,CAAC,GACJ,IACM,CACC,CAAC,CAAA;AAEpB,CAAC,CAAC,CAAA;AACFhC,QAAQ,CAACQ,SAAS,GAAGT,SAAS,CAAA;AAC9BC,QAAQ,CAACiD,WAAW,GAAGnD,cAAc,CAAA;AAE9B,MAAMoD,IAAI,GAAGC,MAAM,CAACC,MAAM,CAACpD,QAAQ,EAAE;AAC1CqD,EAAAA,MAAM,EAAEC,UAAU;AAClBC,EAAAA,IAAI,EAAEC,QAAQ;AACdC,EAAAA,OAAO,EAAEC,WAAAA;AACX,CAAC;;;;"}
+{"version":3,"file":"Card2.js","sources":["../../src/components/card/intl/index.ts","../../src/components/card/styles.ts","../../src/components/card/Card.tsx"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledCardProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledCard = styled.div<StyledCardProps>`\n  ${baseStyling}\n\n  ${({ $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n  `}\n\n  display: flex;\n  flex-direction: column;\n\n  .redsift-card__header {\n    align-items: flex-start;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .redsift-card-header__icon-button {\n    margin-top: 8px;\n    margin-left: auto;\n    margin-right: 8px;\n\n    [dir='rtl'] & {\n      margin-left: 8px;\n      margin-right: auto;\n    }\n  }\n\n  .redsift-card__content {\n    visibility: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n    overflow: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n    height: ${({ $isCollapsed }) => (!$isCollapsed ? 'auto' : '0px')};\n  }\n`;\n","import React, { forwardRef, RefObject, useCallback, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport { mdiChevronDown, mdiChevronUp } from '@redsift/icons';\nimport { IconButton } from '../icon-button';\nimport { Comp, getStylingTransientProps } from '../../types';\nimport { StyledCard } from './styles';\nimport { CardProps } from './types';\nimport { partitionComponents } from '../../utils/partitionComponents';\nimport { isComponent } from '../../utils/isComponent';\nimport { warnOnUnknownChildren } from '../../utils/warnCompoundMisuse';\nimport { CardHeader } from '../card-header';\nimport { CardBody } from '../card-body';\nimport { CardActions } from '../card-actions';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst ALLOWED_CHILDREN = new Set(['CardHeader', 'CardBody', 'CardActions']);\n\nconst COMPONENT_NAME = 'Card';\nconst CLASSNAME = 'redsift-card';\n\n/**\n * Card is a container for grouping related content and actions. Cards can be\n * collapsible and support controlled or uncontrolled state.\n *\n * Cards only accept `Card.Header`, `Card.Body`, and `Card.Actions` as children.\n * The Header has a fixed design; Body and Actions can contain any content.\n *\n * @example\n * // Basic card with header and body\n * <Card>\n *   <Card.Header header=\"Card Title\" />\n *   <Card.Body>\n *     Your content goes here.\n *   </Card.Body>\n * </Card>\n *\n * @example\n * // Card with subheader and icon\n * <Card>\n *   <Card.Header header=\"Settings\" subheader=\"Manage preferences\" icon={mdiCog} />\n *   <Card.Body>Settings content...</Card.Body>\n * </Card>\n *\n * @example\n * // Card with actions\n * <Card>\n *   <Card.Header header=\"Confirm Action\" subheader=\"Please review\" />\n *   <Card.Body>Are you sure you want to proceed?</Card.Body>\n *   <Card.Actions>\n *     <Button variant=\"secondary\">Cancel</Button>\n *     <Button>Confirm</Button>\n *   </Card.Actions>\n * </Card>\n *\n * @example\n * // Card.Actions with space-between layout\n * <Card>\n *   <Card.Header header=\"Form\" />\n *   <Card.Body>Form content...</Card.Body>\n *   <Card.Actions justifyContent=\"space-between\">\n *     <Button variant=\"unstyled\">Reset</Button>\n *     <Flexbox gap=\"8px\">\n *       <Button variant=\"secondary\">Cancel</Button>\n *       <Button>Submit</Button>\n *     </Flexbox>\n *   </Card.Actions>\n * </Card>\n *\n * @example\n * // Collapsible card (uncontrolled - self-managing)\n * <Card isCollapsible>\n *   <Card.Header header=\"Expandable Section\" />\n *   <Card.Body>Content hidden when collapsed</Card.Body>\n * </Card>\n *\n * @example\n * // Collapsible card (controlled)\n * const [collapsed, setCollapsed] = useState(false);\n * <Card isCollapsible isCollapsed={collapsed} onCollapse={setCollapsed}>\n *   <Card.Header header=\"Controlled Collapse\" />\n *   <Card.Body>Controlled content</Card.Body>\n * </Card>\n *\n * @example\n * // Header with custom children (buttons, etc.)\n * <Card>\n *   <Card.Header header=\"List\">\n *     <Button variant=\"secondary\" leftIcon={mdiPlus}>Add Item</Button>\n *   </Card.Header>\n *   <Card.Body>List items...</Card.Body>\n * </Card>\n */\nconst BaseCard: Comp<CardProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    children,\n    className,\n    defaultCollapsed,\n    isCollapsed: propsIsCollapsed,\n    isCollapsible,\n    onCollapse,\n    theme: propsTheme,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n\n  const format = useMessageFormatter(intlMessages);\n\n  const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed ?? defaultCollapsed);\n\n  useEffect(() => {\n    setIsCollapsed(propsIsCollapsed ?? defaultCollapsed);\n  }, [propsIsCollapsed, defaultCollapsed]);\n\n  const handleCollapse = useCallback(\n    (collapsed: boolean) => {\n      if (onCollapse) {\n        onCollapse(collapsed);\n      }\n      if (propsIsCollapsed === undefined || propsIsCollapsed === null) {\n        setIsCollapsed(collapsed);\n      }\n    },\n    [onCollapse]\n  );\n\n  if (process.env.NODE_ENV !== 'production') {\n    warnOnUnknownChildren(children, 'Card', ALLOWED_CHILDREN);\n  }\n\n  const [[header], [body], [actions]] = partitionComponents(React.Children.toArray(children), [\n    isComponent('CardHeader'),\n    isComponent('CardBody'),\n    isComponent('CardActions'),\n  ]);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledCard\n        {...forwardedProps}\n        {...transientProps}\n        className={classNames(BaseCard.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        $isCollapsed={isCollapsed}\n        $theme={theme}\n      >\n        {header || isCollapsible ? (\n          <div className={`${BaseCard.className}__header`}>\n            {header && isComponent('CardHeader')(header) ? header : null}\n\n            {isCollapsible ? (\n              <IconButton\n                theme={theme}\n                aria-label={format(isCollapsed ? 'expand' : 'collapse')}\n                className={`${BaseCard.className}-header__icon-button`}\n                color=\"grey\"\n                icon={isCollapsed ? mdiChevronDown : mdiChevronUp}\n                onClick={() => handleCollapse(!isCollapsed)}\n              />\n            ) : null}\n          </div>\n        ) : null}\n\n        {body || actions ? (\n          <div className={`${BaseCard.className}__content`}>\n            {body && isComponent('CardBody')(body) ? body : null}\n            {actions && isComponent('CardActions')(actions) ? actions : null}\n          </div>\n        ) : null}\n      </StyledCard>\n    </ThemeProvider>\n  );\n});\nBaseCard.className = CLASSNAME;\nBaseCard.displayName = COMPONENT_NAME;\n\nexport const Card = Object.assign(BaseCard, {\n  Header: CardHeader,\n  Body: CardBody,\n  Actions: CardActions,\n});\n"],"names":["enUS","frFR","StyledCard","styled","div","baseStyling","_ref","$theme","css","Theme","dark","_ref2","$isCollapsed","_ref3","_ref4","ALLOWED_CHILDREN","Set","COMPONENT_NAME","CLASSNAME","BaseCard","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","children","className","defaultCollapsed","isCollapsed","propsIsCollapsed","isCollapsible","onCollapse","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","format","useMessageFormatter","intlMessages","setIsCollapsed","useState","useEffect","handleCollapse","useCallback","collapsed","undefined","process","env","NODE_ENV","warnOnUnknownChildren","header","body","actions","partitionComponents","React","Children","toArray","isComponent","createElement","ThemeProvider","value","_extends","classNames","IconButton","color","icon","mdiChevronDown","mdiChevronUp","onClick","displayName","Card","Object","assign","Header","CardHeader","Body","CardBody","Actions","CardActions"],"mappings":"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"}

package/_internal/DetailedCard.js

@@ -10,6 +10,7 @@ import { D as DetailedCardHeader } from './DetailedCardHeader.js';
 import { D as DetailedCardSection } from './DetailedCardSection.js';
 import { D as DetailedCardSectionItem } from './DetailedCardSectionItem.js';
 import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { a as warnOnUnknownChildren } from './warnCompoundMisuse.js';
 import * as ReactDOM from 'react-dom';
 import { u as useId$1 } from './useId.js';
 import { u as useTheme, a as ThemeProvider } from './useTheme.js';
@@ -6815,6 +6816,7 @@ const _excluded = ["width"],
   _excluded2 = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield", "theme"];
 const COMPONENT_NAME = 'DetailedCard';
 const CLASSNAME = 'redsift-detailed-card';
+const ALLOWED_CONTENT_CHILDREN = new Set(['DetailedCardSection']);
 const hasMultipleCollapsibleChildren = children => {
   const collapsibleChildren = [];
   const processChild = child => {
@@ -6962,6 +6964,9 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, [onCollapseAll]);
   const [[header], content] = partitionComponents(React__default.Children.toArray(children), [isComponent('DetailedCardHeader')]);
+  if (process.env.NODE_ENV !== 'production') {
+    warnOnUnknownChildren(content, 'DetailedCard', ALLOWED_CONTENT_CHILDREN);
+  }
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     value: {
       theme