@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.6

package/_internal/ButtonLink.js

@@ -1,20 +1,16 @@
-import { b as ButtonProps } from './types4.js';
-import { L as LinkProps } from './types18.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledGradientBorder } from './gradient-border.js';
+import { B as ButtonVariant, S as StyledButton } from './styles.js';
+import { u as useTheme } from './useTheme.js';
+import { B as ButtonsColorPalette } from './colors.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper.js';
+import { a as Icon } from './Icon2.js';
 
-/**
- * Component props.
- */
-interface ButtonLinkProps extends Omit<LinkProps, 'color'>, Pick<ButtonProps, 'color' | 'isActive' | 'isDisabled' | 'isHovered' | 'leftIcon' | 'leftIconProps' | 'rightIconProps' | 'rightIcon' | 'variant' | 'theme'> {
-}
-type StyledButtonLinkProps = ButtonLinkProps & {
-    $isActive: ButtonLinkProps['isActive'];
-    $isDisabled: ButtonLinkProps['isDisabled'];
-    $isHovered: ButtonLinkProps['isHovered'];
-    $variant: ButtonLinkProps['variant'];
-    $theme: ButtonLinkProps['theme'];
-    $color: ButtonLinkProps['color'];
-};
+const _excluded = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "isHovered", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "target", "theme", "variant"];
+const COMPONENT_NAME = 'ButtonLink';
+const CLASSNAME = 'redsift-button-link';
 
 /**
  * The ButtonLink is a semantic link that looks like a button.
@@ -23,6 +19,66 @@ type StyledButtonLinkProps = ButtonLinkProps & {
  * For a semantic link that looks like a link, please use the Link component.
  * For a semantic button that looks like a link, please use the LinkButton component.
  */
-declare const ButtonLink: Comp<ButtonLinkProps, HTMLAnchorElement>;
+const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      color: propsColor,
+      href,
+      isActive,
+      isDisabled,
+      isHovered,
+      leftIcon,
+      leftIconProps,
+      rightIcon,
+      rightIconProps,
+      target,
+      theme: propsTheme,
+      variant: propsVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const variant = Object.values(ButtonVariant).includes(propsVariant) ? propsVariant : 'primary';
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient && variant === ButtonVariant.secondary,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledButton, _extends({
+    as: as || 'a',
+    role: "link",
+    tabIndex: !isDisabled ? 0 : undefined
+  }, forwardedProps, {
+    $color: color,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isHovered: isHovered,
+    $isGradient: isGradient,
+    $theme: theme,
+    $variant: variant,
+    className: classNames(ButtonLink.className, className),
+    href: !isDisabled ? href : undefined,
+    ref: ref,
+    target: target
+  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: leftIcon,
+    "aria-hidden": "true",
+    className: "left"
+  }, leftIconProps)) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: rightIcon,
+    "aria-hidden": "true",
+    className: "right"
+  }, rightIconProps)) : null));
+});
+ButtonLink.className = CLASSNAME;
+ButtonLink.displayName = COMPONENT_NAME;
 
-export { ButtonLinkProps as B, StyledButtonLinkProps as S, ButtonLink as a };
+export { ButtonLink as B };
+//# sourceMappingURL=ButtonLink.js.map

package/_internal/Card.d2.ts

@@ -0,0 +1,35 @@
+import { C as CardActionsProps } from './types.d5.ts';
+import { C as CardBodyProps } from './types.d6.ts';
+import { C as CardHeaderProps } from './types.d7.ts';
+import { ComponentProps } from 'react';
+import { h as StylingProps } from './styles.d2.ts';
+import { T as Theme } from './colors.js';
+import { C as Comp } from './helpers.js';
+
+/**
+ * Component props.
+ */
+interface CardProps extends ComponentProps<'div'>, StylingProps {
+    /** Default collapse status. Used for uncontrolled version. */
+    defaultCollapsed?: boolean;
+    /** Whether the component is collapsed or not. Used for controlled version. */
+    isCollapsed?: boolean;
+    /** Whether the component can be collapse or not. */
+    isCollapsible?: boolean;
+    /** Method to handle component change. */
+    onCollapse?(isCollapsed: boolean): void;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledCardProps = Omit<CardProps, 'isCollapsed'> & {
+    $isCollapsed: CardProps['isCollapsed'];
+    $theme: CardProps['theme'];
+};
+
+declare const Card: Comp<CardProps, HTMLDivElement> & {
+    Header: Comp<CardHeaderProps, HTMLDivElement>;
+    Body: Comp<CardBodyProps, HTMLDivElement>;
+    Actions: Comp<CardActionsProps, HTMLDivElement>;
+};
+
+export { CardProps as C, StyledCardProps as S, Card as a };

package/_internal/Card2.js

@@ -1,35 +1,157 @@
-import { C as CardActionsProps } from './types5.js';
-import { C as CardBodyProps } from './types6.js';
-import { C as CardHeaderProps } from './types7.js';
-import { ComponentProps } from 'react';
-import { h as StylingProps } from './styles2.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { mdiChevronDown, mdiChevronUp } from '@redsift/icons';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
 import { T as Theme } from './colors.js';
-import { C as Comp } from './helpers.js';
+import { p as partitionComponents } from './partitionComponents.js';
+import { i as isComponent } from './isComponent.js';
+import { C as CardHeader } from './CardHeader.js';
+import { C as CardBody } from './CardBody.js';
+import { C as CardActions } from './CardActions.js';
+import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
+import { I as IconButton } from './IconButton.js';
 
-/**
- * Component props.
- */
-interface CardProps extends ComponentProps<'div'>, StylingProps {
-    /** Default collapse status. Used for uncontrolled version. */
-    defaultCollapsed?: boolean;
-    /** Whether the component is collapsed or not. Used for controlled version. */
-    isCollapsed?: boolean;
-    /** Whether the component can be collapse or not. */
-    isCollapsible?: boolean;
-    /** Method to handle component change. */
-    onCollapse?(isCollapsed: boolean): void;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledCardProps = Omit<CardProps, 'isCollapsed'> & {
-    $isCollapsed: CardProps['isCollapsed'];
-    $theme: CardProps['theme'];
+var collapse$1 = "Collapse";
+var expand$1 = "Expand";
+var enUS = {
+	collapse: collapse$1,
+	expand: expand$1
 };
 
-declare const Card: Comp<CardProps, HTMLDivElement> & {
-    Header: Comp<CardHeaderProps, HTMLDivElement>;
-    Body: Comp<CardBodyProps, HTMLDivElement>;
-    Actions: Comp<CardActionsProps, HTMLDivElement>;
+var collapse = "Réduire";
+var expand = "Développer";
+var frFR = {
+	collapse: collapse,
+	expand: expand
 };
 
-export { CardProps as C, StyledCardProps as S, Card as a };
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+/**
+ * Component style.
+ */
+const StyledCard = styled.div`
+  ${baseStyling}
+
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+  `;
+}}
+
+  display: flex;
+  flex-direction: column;
+
+  .redsift-card__header {
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .redsift-card-header__icon-button {
+    margin-top: 8px;
+    margin-left: auto;
+    margin-right: 8px;
+
+    [dir='rtl'] & {
+      margin-left: 8px;
+      margin-right: auto;
+    }
+  }
+
+  .redsift-card__content {
+    visibility: ${_ref2 => {
+  let {
+    $isCollapsed
+  } = _ref2;
+  return !$isCollapsed ? 'visible' : 'hidden';
+}};
+    overflow: ${_ref3 => {
+  let {
+    $isCollapsed
+  } = _ref3;
+  return !$isCollapsed ? 'visible' : 'hidden';
+}};
+    height: ${_ref4 => {
+  let {
+    $isCollapsed
+  } = _ref4;
+  return !$isCollapsed ? 'auto' : '0px';
+}};
+  }
+`;
+
+const _excluded = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse", "theme"];
+const COMPONENT_NAME = 'Card';
+const CLASSNAME = 'redsift-card';
+
+/**
+ * The Card component.
+ */
+const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultCollapsed,
+      isCollapsed: propsIsCollapsed,
+      isCollapsible,
+      onCollapse,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const format = useMessageFormatter(intlMessages);
+  const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
+  useEffect(() => {
+    setIsCollapsed(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
+  }, [propsIsCollapsed, defaultCollapsed]);
+  const handleCollapse = useCallback(collapsed => {
+    if (onCollapse) {
+      onCollapse(collapsed);
+    }
+    if (propsIsCollapsed === undefined || propsIsCollapsed === null) {
+      setIsCollapsed(collapsed);
+    }
+  }, [onCollapse]);
+  const [[header], [body], [actions]] = partitionComponents(React__default.Children.toArray(children), [isComponent('CardHeader'), isComponent('CardBody'), isComponent('CardActions')]);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledCard, _extends({}, forwardedProps, {
+    className: classNames(BaseCard.className, className),
+    ref: ref,
+    $isCollapsed: isCollapsed,
+    $theme: theme
+  }), header || isCollapsible ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${BaseCard.className}__header`
+  }, header && isComponent('CardHeader')(header) ? header : null, isCollapsible ? /*#__PURE__*/React__default.createElement(IconButton, {
+    theme: theme,
+    "aria-label": format(isCollapsed ? 'expand' : 'collapse'),
+    className: `${BaseCard.className}-header__icon-button`,
+    color: "grey",
+    icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
+    onClick: () => handleCollapse(!isCollapsed)
+  }) : null) : null, body || actions ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${BaseCard.className}__content`
+  }, body && isComponent('CardBody')(body) ? body : null, actions && isComponent('CardActions')(actions) ? actions : null) : null));
+});
+BaseCard.className = CLASSNAME;
+BaseCard.displayName = COMPONENT_NAME;
+const Card = Object.assign(BaseCard, {
+  Header: CardHeader,
+  Body: CardBody,
+  Actions: CardActions
+});
+
+export { Card as C };
+//# sourceMappingURL=Card2.js.map

package/_internal/CardActions.d.ts

@@ -0,0 +1,9 @@
+import { C as CardActionsProps } from './types.d5.ts';
+import { C as Comp } from './helpers.js';
+
+/**
+ * The CardActions component.
+ */
+declare const CardActions: Comp<CardActionsProps, HTMLDivElement>;
+
+export { CardActions as C };

package/_internal/CardActions.js

@@ -1,9 +1,44 @@
-import { C as CardActionsProps } from './types5.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { j as baseContainer } from './styles4.js';
+
+/**
+ * Component style.
+ */
+const StyledCardActions = styled.div`
+  ${baseContainer}
+
+  margin-top: 8px;
+  margin-bottom: 8px;
+`;
+
+const _excluded = ["children", "className", "display", "flexDirection"];
+const COMPONENT_NAME = 'CardActions';
+const CLASSNAME = 'redsift-card-actions';
 
 /**
  * The CardActions component.
  */
-declare const CardActions: Comp<CardActionsProps, HTMLDivElement>;
+const CardActions = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      display = 'flex',
+      flexDirection = 'row'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledCardActions, _extends({
+    display: display,
+    flexDirection: flexDirection
+  }, forwardedProps, {
+    className: classNames(CardActions.className, className),
+    ref: ref
+  }), children);
+});
+CardActions.className = CLASSNAME;
+CardActions.displayName = COMPONENT_NAME;
 
 export { CardActions as C };
+//# sourceMappingURL=CardActions.js.map

package/_internal/CardBody.d.ts

@@ -0,0 +1,9 @@
+import { C as CardBodyProps } from './types.d6.ts';
+import { C as Comp } from './helpers.js';
+
+/**
+ * The CardBody component.
+ */
+declare const CardBody: Comp<CardBodyProps, HTMLDivElement>;
+
+export { CardBody as C };

package/_internal/CardBody.js

@@ -1,9 +1,42 @@
-import { C as CardBodyProps } from './types6.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { j as baseContainer } from './styles4.js';
+
+/**
+ * Component style.
+ */
+const StyledCardBody = styled.div`
+  ${baseContainer}
+
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+  padding: 16px 0px;
+`;
+
+const _excluded = ["children", "className"];
+const COMPONENT_NAME = 'CardBody';
+const CLASSNAME = 'redsift-card-body';
 
 /**
  * The CardBody component.
  */
-declare const CardBody: Comp<CardBodyProps, HTMLDivElement>;
+const CardBody = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledCardBody, _extends({}, forwardedProps, {
+    className: classNames(CardBody.className, className),
+    ref: ref
+  }), children);
+});
+CardBody.className = CLASSNAME;
+CardBody.displayName = COMPONENT_NAME;
 
 export { CardBody as C };
+//# sourceMappingURL=CardBody.js.map

package/_internal/CardHeader.d.ts

@@ -0,0 +1,9 @@
+import { C as CardHeaderProps } from './types.d7.ts';
+import { C as Comp } from './helpers.js';
+
+/**
+ * The CardHeader component.
+ */
+declare const CardHeader: Comp<CardHeaderProps, HTMLDivElement>;
+
+export { CardHeader as C };

package/_internal/CardHeader.js

@@ -1,9 +1,83 @@
-import { C as CardHeaderProps } from './types7.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { i as baseStyling, g as baseFlexbox } from './styles4.js';
+import { S as Skeleton } from './Skeleton2.js';
+import { H as Heading } from './Heading2.js';
+import { a as Icon } from './Icon2.js';
+
+/**
+ * Component style.
+ */
+const StyledCardHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  ${baseStyling}
+  ${baseFlexbox}
+
+  .redsift-card-header__header {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    padding: 10px 0px;
+    margin: 0px;
+  }
+
+  .redsift-card-header__subheader {
+    font-family: var(--redsift-typography-body-font-family);
+    font-size: var(--redsift-typography-body-font-size);
+    font-weight: var(--redsift-typography-body-font-weight);
+    line-height: var(--redsift-typography-body-line-height);
+  }
+`;
+
+const _excluded = ["children", "className", "header", "headingProps", "icon", "iconProps", "isLoading", "subheader"];
+const COMPONENT_NAME = 'CardHeader';
+const CLASSNAME = 'redsift-card-header';
 
 /**
  * The CardHeader component.
  */
-declare const CardHeader: Comp<CardHeaderProps, HTMLDivElement>;
+const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      header,
+      headingProps,
+      icon,
+      iconProps,
+      isLoading,
+      subheader
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends({}, forwardedProps, {
+    className: classNames(CardHeader.className, className),
+    ref: ref
+  }), subheader ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "body",
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${CardHeader.className}__subheader`
+  }, subheader)) : null, header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: (headingProps === null || headingProps === void 0 ? void 0 : headingProps.variant) || 'h2',
+    isLoaded: !isLoading,
+    marginTop: "10px",
+    marginBottom: "10px"
+  }, /*#__PURE__*/React__default.createElement(Heading, _extends({
+    as: "h2",
+    color: "black",
+    className: `${CardHeader.className}__header`,
+    variant: "h2"
+  }, headingProps), icon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: icon,
+    "aria-hidden": "true",
+    size: "large"
+  }, iconProps)) : null, header)) : null, children);
+});
+CardHeader.className = CLASSNAME;
+CardHeader.displayName = COMPONENT_NAME;
 
 export { CardHeader as C };
+//# sourceMappingURL=CardHeader.js.map

package/_internal/Checkbox.d2.ts

@@ -0,0 +1,68 @@
+import { ComponentProps, MutableRefObject, ChangeEvent } from 'react';
+import { C as CheckboxGroupState } from './types.d8.ts';
+import { h as StylingProps } from './styles.d2.ts';
+import { T as Theme } from './colors.js';
+import { C as Comp } from './helpers.js';
+
+/**
+ * Component props.
+ */
+interface CheckboxProps extends Omit<ComponentProps<'label'>, 'onChange'>, StylingProps {
+    /** Whether the component can be autofocused. */
+    autoFocus?: boolean;
+    /**
+     * Default select status.
+     * Used for uncontrolled version.
+     */
+    defaultSelected?: boolean;
+    /** Custom props to pass to the input element. */
+    inputProps?: ComponentProps<'input'>;
+    /** Custom ref object to pass to the input element. */
+    inputRef?: MutableRefObject<HTMLInputElement>;
+    /** Whether the component should use the product colors or shades of grey. */
+    isColored?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the checkbox status is indeterminate or not. */
+    isIndeterminate?: boolean;
+    /** Whether the component is invalid or not. */
+    isInvalid?: boolean;
+    /** Whether the component is read only or not. */
+    isReadOnly?: boolean;
+    /** Whether the component is required or not. */
+    isRequired?: boolean;
+    /**
+     * Whether the component is selected or not.
+     * Used for controlled version.
+     */
+    isSelected?: boolean;
+    /** Name to pass to the input element. */
+    name?: HTMLInputElement['name'];
+    /** Method to handle component change. */
+    onChange?(isChecked: boolean, value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>, state?: CheckboxGroupState): void;
+    /** Theme. */
+    theme?: Theme;
+    /**
+     * Value to pass to the input element.
+     * Required within a group.
+     */
+    value?: HTMLInputElement['value'];
+}
+type StyledCheckboxProps = Omit<CheckboxProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isSelected' | 'isRequired'> & {
+    $isColored: CheckboxProps['isColored'];
+    $isDisabled: CheckboxProps['isDisabled'];
+    $isInvalid: CheckboxProps['isInvalid'];
+    $isFocusVisible: boolean;
+    $isRequired: CheckboxProps['isRequired'];
+    $isSelected: CheckboxProps['isSelected'];
+    $theme: CheckboxProps['theme'];
+};
+
+/**
+ * The Checkbox component.
+ * Works both inside a CheckboxGroup or as standalone.
+ * Can be used as controlled or uncontrolled.
+ */
+declare const Checkbox: Comp<CheckboxProps, HTMLLabelElement>;
+
+export { CheckboxProps as C, StyledCheckboxProps as S, Checkbox as a };