@redsift/design-system 11.5.0 → 11.6.0-muiv5-alpha.1

package/components/button/styles.js

@@ -0,0 +1,219 @@
+import styled, { css } from 'styled-components';
+import { ButtonVariant } from './types.js';
+import { baseStyling, focusRing } from '../shared/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledButton = styled.button`
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  display: inline-flex;
+  font-family: var(--redsift-typography-button-font-family);
+  font-size: var(--redsift-typography-button-font-size);
+  font-weight: var(--redsift-typography-button-font-weight);
+  gap: 8px;
+  height: fit-content;
+  justify-content: center;
+  line-height: var(--redsift-typography-button-line-height);
+  text-decoration: none;
+  text-transform: var(--redsift-typography-button-text-transform);
+  vertical-align: middle;
+  -webkit-font-smoothing: antialiased;
+  ${baseStyling}
+
+  ${_ref => {
+  let {
+    $isLoading
+  } = _ref;
+  return $isLoading ? css`
+          & > span {
+            opacity: 0;
+          }
+
+          & > .redsift-shield {
+            position: absolute;
+          }
+        ` : '';
+}}
+
+  ${_ref2 => {
+  let {
+    $variant,
+    $color,
+    $isActive,
+    $isDisabled,
+    $isGradient,
+    $isHovered,
+    $theme
+  } = _ref2;
+  return css`
+    padding: ${$variant !== ButtonVariant.secondary || $variant === ButtonVariant.secondary && $isGradient && !$isDisabled ? '9px 16px' : '8px 15px'};
+
+    ${!$isGradient ? css`
+          background-color: var(
+            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+          );
+          &,
+          .redsift-icon:not(.colored) {
+            color: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
+          }
+        ` : css`
+          background: var(
+            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+          );
+
+          ${$variant === ButtonVariant.primary || $isDisabled ? css`
+                &,
+                .redsift-icon:not(.colored) {
+                  color: var(
+                    --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+                  );
+                }
+              ` : ''}
+
+          ${$variant !== ButtonVariant.primary && !$isDisabled ? css`
+                path {
+                  fill: url(#${$color}-gradient-${$isActive ? 'active' : $isHovered ? 'hover' : 'default'});
+                }
+              ` : ''}
+
+          span {
+            background: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
+            background-clip: text;
+            color: transparent;
+          }
+        `}
+
+    ${$variant === ButtonVariant.secondary ? css`
+          border: 1px solid
+            var(
+              --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
+        ` : ''}
+  `;
+}};
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $variant,
+    $color,
+    $isDisabled,
+    $isGradient,
+    $theme
+  } = _ref3;
+  return css`
+      cursor: ${$isDisabled ? 'default' : 'pointer'};
+
+      ${!$isGradient ? css`
+            background-color: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : 'hover'}
+            );
+            &,
+            .redsift-icon:not(.colored) {
+              color: var(
+                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}
+              );
+            }
+
+            ${$variant === ButtonVariant.secondary ? css`
+                  border: 1px solid
+                    var(
+                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}
+                    );
+                ` : ''}
+          ` : css`
+            background: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : 'hover'}
+            );
+
+            ${$variant !== ButtonVariant.primary && !$isDisabled ? css`
+                  path {
+                    fill: url(#${$color}-gradient-hover);
+                  }
+                ` : ''}
+          `}
+    `;
+}};
+  }
+
+  &:active {
+    outline: none;
+
+    ${_ref4 => {
+  let {
+    $variant,
+    $color,
+    $isGradient,
+    $isHovered,
+    $isDisabled,
+    $theme
+  } = _ref4;
+  return css`
+      ${!$isGradient ? css`
+            background-color: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+            );
+            &,
+            .redsift-icon:not(.colored) {
+              color: var(
+                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+              );
+            }
+
+            ${$variant === ButtonVariant.secondary ? css`
+                  border: 1px solid
+                    var(
+                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+                    );
+                ` : ''}
+          ` : css`
+            background: var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+            );
+
+            ${$variant !== ButtonVariant.primary && !$isDisabled ? css`
+                  path {
+                    fill: url(#${$color}-gradient-active);
+                  }
+                ` : ''}
+          `}
+    `;
+}};
+  }
+
+  ${_ref5 => {
+  let {
+    $fullWidth
+  } = _ref5;
+  return $fullWidth ? `
+        width: 100%;
+        flex-grow: 1;
+      ` : '';
+}}
+
+  .redsift-icon.left {
+    margin-right: unset;
+    align-items: center;
+  }
+
+  .redsift-icon.right {
+    margin-left: unset;
+    align-items: center;
+  }
+
+  ${focusRing}
+`;
+
+export { StyledButton };
+//# sourceMappingURL=styles.js.map

package/components/button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/button/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling, focusRing } from '../shared';\nimport { StyledButtonProps, ButtonVariant } from './types';\n\n/**\n * Component style.\n */\nexport const StyledButton = styled.button<StyledButtonProps>`\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  display: inline-flex;\n  font-family: var(--redsift-typography-button-font-family);\n  font-size: var(--redsift-typography-button-font-size);\n  font-weight: var(--redsift-typography-button-font-weight);\n  gap: 8px;\n  height: fit-content;\n  justify-content: center;\n  line-height: var(--redsift-typography-button-line-height);\n  text-decoration: none;\n  text-transform: var(--redsift-typography-button-text-transform);\n  vertical-align: middle;\n  -webkit-font-smoothing: antialiased;\n  ${baseStyling}\n\n  ${({ $isLoading }) =>\n    $isLoading\n      ? css`\n          & > span {\n            opacity: 0;\n          }\n\n          & > .redsift-shield {\n            position: absolute;\n          }\n        `\n      : ''}\n\n  ${({ $variant, $color, $isActive, $isDisabled, $isGradient, $isHovered, $theme }) => css`\n    padding: ${$variant !== ButtonVariant.secondary ||\n    ($variant === ButtonVariant.secondary && $isGradient && !$isDisabled)\n      ? '9px 16px'\n      : '8px 15px'};\n\n    ${!$isGradient\n      ? css`\n          background-color: var(\n            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                ? 'disabled'\n                : $isActive\n                ? 'active'\n                : $isHovered\n                ? 'hover'\n                : 'default'}\n          );\n          &,\n          .redsift-icon:not(.colored) {\n            color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                  ? 'disabled'\n                  : $isActive\n                  ? 'active'\n                  : $isHovered\n                  ? 'hover'\n                  : 'default'}\n            );\n          }\n        `\n      : css`\n          background: var(\n            --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                ? 'disabled'\n                : $isActive\n                ? 'active'\n                : $isHovered\n                ? 'hover'\n                : 'default'}\n          );\n\n          ${$variant === ButtonVariant.primary || $isDisabled\n            ? css`\n                &,\n                .redsift-icon:not(.colored) {\n                  color: var(\n                    --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                        ? 'disabled'\n                        : $isActive\n                        ? 'active'\n                        : $isHovered\n                        ? 'hover'\n                        : 'default'}\n                  );\n                }\n              `\n            : ''}\n\n          ${$variant !== ButtonVariant.primary && !$isDisabled\n            ? css`\n                path {\n                  fill: url(#${$color}-gradient-${$isActive ? 'active' : $isHovered ? 'hover' : 'default'});\n                }\n              `\n            : ''}\n\n          span {\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                  ? 'disabled'\n                  : $isActive\n                  ? 'active'\n                  : $isHovered\n                  ? 'hover'\n                  : 'default'}\n            );\n            background-clip: text;\n            color: transparent;\n          }\n        `}\n\n    ${$variant === ButtonVariant.secondary\n      ? css`\n          border: 1px solid\n            var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}\n            );\n        `\n      : ''}\n  `};\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n\n    ${({ $variant, $color, $isDisabled, $isGradient, $theme }) => css`\n      cursor: ${$isDisabled ? 'default' : 'pointer'};\n\n      ${!$isGradient\n        ? css`\n            background-color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : 'hover'}\n            );\n            &,\n            .redsift-icon:not(.colored) {\n              color: var(\n                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                    ? 'disabled'\n                    : 'hover'}\n              );\n            }\n\n            ${$variant === ButtonVariant.secondary\n              ? css`\n                  border: 1px solid\n                    var(\n                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}\n                    );\n                `\n              : ''}\n          `\n        : css`\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : 'hover'}\n            );\n\n            ${$variant !== ButtonVariant.primary && !$isDisabled\n              ? css`\n                  path {\n                    fill: url(#${$color}-gradient-hover);\n                  }\n                `\n              : ''}\n          `}\n    `};\n  }\n\n  &:active {\n    outline: none;\n\n    ${({ $variant, $color, $isGradient, $isHovered, $isDisabled, $theme }) => css`\n      ${!$isGradient\n        ? css`\n            background-color: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : $isHovered\n                  ? 'hover'\n                  : 'active'}\n            );\n            &,\n            .redsift-icon:not(.colored) {\n              color: var(\n                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled\n                    ? 'disabled'\n                    : $isHovered\n                    ? 'hover'\n                    : 'active'}\n              );\n            }\n\n            ${$variant === ButtonVariant.secondary\n              ? css`\n                  border: 1px solid\n                    var(\n                      --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}\n                    );\n                `\n              : ''}\n          `\n        : css`\n            background: var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled\n                  ? 'disabled'\n                  : $isHovered\n                  ? 'hover'\n                  : 'active'}\n            );\n\n            ${$variant !== ButtonVariant.primary && !$isDisabled\n              ? css`\n                  path {\n                    fill: url(#${$color}-gradient-active);\n                  }\n                `\n              : ''}\n          `}\n    `};\n  }\n\n  ${({ $fullWidth }) =>\n    $fullWidth\n      ? `\n        width: 100%;\n        flex-grow: 1;\n      `\n      : ''}\n\n  .redsift-icon.left {\n    margin-right: unset;\n    align-items: center;\n  }\n\n  .redsift-icon.right {\n    margin-left: unset;\n    align-items: center;\n  }\n\n  ${focusRing}\n`;\n"],"names":["StyledButton","styled","button","baseStyling","_ref","$isLoading","css","_ref2","$variant","$color","$isActive","$isDisabled","$isGradient","$isHovered","$theme","ButtonVariant","secondary","primary","_ref3","_ref4","_ref5","$fullWidth","focusRing"],"mappings":"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"}

package/components/button/types.d.ts

@@ -0,0 +1,67 @@
+import { ComponentProps } from 'react';
+import { ValueOf } from '../../types/helpers.js';
+import { ButtonsColorPalette, Theme } from '../../types/colors.js';
+import { StylingProps } from '../../types/styles.js';
+import { IconProps } from '../icon/types.js';
+
+/**
+ * Component variant.
+ */
+declare const ButtonVariant: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly unstyled: "unstyled";
+};
+type ButtonVariant = ValueOf<typeof ButtonVariant>;
+/**
+ * Component color.
+ */
+type ButtonColor = ButtonsColorPalette;
+/**
+ * Component props.
+ */
+interface ButtonProps extends ComponentProps<'button'>, StylingProps {
+    /** Color variant. */
+    color?: ButtonColor;
+    /** Whether the component take the full width or not. */
+    fullWidth?: boolean;
+    /** Whether the component is active or not. */
+    isActive?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is hovered or not. */
+    isHovered?: boolean;
+    /** Whether the component is in a loading state or not. */
+    isLoading?: boolean;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    leftIcon?: IconProps['icon'];
+    /** Props to add to the left icon. */
+    leftIconProps?: Omit<IconProps, 'icon' | 'ref'>;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    rightIcon?: IconProps['icon'];
+    /** Props to add to the right icon. */
+    rightIconProps?: Omit<IconProps, 'icon' | 'ref'>;
+    /** Theme. */
+    theme?: Theme;
+    /** Button variant. */
+    variant?: ButtonVariant;
+}
+type StyledButtonProps = ButtonProps & {
+    $color: ButtonProps['color'];
+    $fullWidth?: ButtonProps['fullWidth'];
+    $isActive: ButtonProps['isActive'];
+    $isDisabled: ButtonProps['isDisabled'];
+    $isGradient: boolean;
+    $isHovered: ButtonProps['isHovered'];
+    $isLoading: ButtonProps['isLoading'];
+    $theme: ButtonProps['theme'];
+    $variant: ButtonProps['variant'];
+};
+
+export { ButtonColor, ButtonProps, ButtonVariant, StyledButtonProps };

package/components/button/types.js

@@ -0,0 +1,19 @@
+/**
+ * Component variant.
+ */
+const ButtonVariant = {
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
+export { ButtonVariant };
+//# sourceMappingURL=types.js.map

package/components/button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/button/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ButtonsColorPalette, StylingProps, Theme, ValueOf } from '../../types';\nimport { IconProps } from '../icon';\n\n/**\n * Component variant.\n */\nexport const ButtonVariant = {\n  primary: 'primary',\n  secondary: 'secondary',\n  unstyled: 'unstyled',\n} as const;\nexport type ButtonVariant = ValueOf<typeof ButtonVariant>;\n\n/**\n * Component color.\n */\nexport type ButtonColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface ButtonProps extends ComponentProps<'button'>, StylingProps {\n  /** Color variant. */\n  color?: ButtonColor;\n  /** Whether the component take the full width or not. */\n  fullWidth?: boolean;\n  /** Whether the component is active or not. */\n  isActive?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is hovered or not. */\n  isHovered?: boolean;\n  /** Whether the component is in a loading state or not. */\n  isLoading?: boolean;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  leftIcon?: IconProps['icon'];\n  /** Props to add to the left icon. */\n  leftIconProps?: Omit<IconProps, 'icon' | 'ref'>;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  rightIcon?: IconProps['icon'];\n  /** Props to add to the right icon. */\n  rightIconProps?: Omit<IconProps, 'icon' | 'ref'>;\n  /** Theme. */\n  theme?: Theme;\n  /** Button variant. */\n  variant?: ButtonVariant;\n}\n\nexport type StyledButtonProps = ButtonProps & {\n  $color: ButtonProps['color'];\n  $fullWidth?: ButtonProps['fullWidth'];\n  $isActive: ButtonProps['isActive'];\n  $isDisabled: ButtonProps['isDisabled'];\n  $isGradient: boolean;\n  $isHovered: ButtonProps['isHovered'];\n  $isLoading: ButtonProps['isLoading'];\n  $theme: ButtonProps['theme'];\n  $variant: ButtonProps['variant'];\n};\n"],"names":["ButtonVariant","primary","secondary","unstyled"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;AAGA;AACA;AACA;;;;"}

package/components/button-group/ButtonGroup.d.ts

@@ -0,0 +1,9 @@
+import { ButtonGroupProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The ButtonGroup component.
+ */
+declare const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement>;
+
+export { ButtonGroup };

package/components/button-group/ButtonGroup.js

@@ -0,0 +1,67 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledButtonGroup } from './styles.js';
+import { ButtonGroupVariant } from './types.js';
+import { isComponent } from '../../utils/isComponent.js';
+import { useTheme } from '../theme/useTheme.js';
+import { ButtonsColorPalette } from '../../types/colors.js';
+import { filterComponents } from '../../utils/filterComponents.js';
+
+const _excluded = ["children", "className", "color", "theme", "variant"];
+const COMPONENT_NAME = 'ButtonGroup';
+const CLASSNAME = 'redsift-button-group';
+
+/**
+ * The ButtonGroup component.
+ */
+const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      color: propsColor,
+      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(ButtonGroupVariant).includes(propsVariant) ? propsVariant : 'primary';
+
+  /**
+   * Create an array containing only valid children being either Button, IconButton, ButtonLink, MenuButton or Select.
+   */
+  const childArray = filterComponents(['Button', 'IconButton', 'ButtonLink', 'MenuButton', 'Select', 'Dialog', 'Popover', 'Tooltip'])(children);
+  const buttons = childArray.map((child, index) => {
+    var _key;
+    if (isComponent('MenuButton')(child) || isComponent('Select')(child) || isComponent('Dialog')(child) || isComponent('Popover')(child) || isComponent('Tooltip')(child)) {
+      var _child$key;
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        color,
+        theme,
+        variant,
+        key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
+        triggerClassName: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button'
+      });
+    }
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      color,
+      theme,
+      variant,
+      key: (_key = child.key) !== null && _key !== void 0 ? _key : index,
+      className: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button'
+    });
+  });
+  return /*#__PURE__*/React__default.createElement(StyledButtonGroup, _extends({}, forwardedProps, {
+    className: classNames(ButtonGroup.className, className),
+    ref: ref,
+    $color: color,
+    $variant: variant,
+    $theme: theme
+  }), buttons);
+});
+ButtonGroup.className = CLASSNAME;
+ButtonGroup.displayName = COMPONENT_NAME;
+
+export { ButtonGroup };
+//# sourceMappingURL=ButtonGroup.js.map

package/components/button-group/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../src/components/button-group/ButtonGroup.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { StyledButtonGroup } from './styles';\nimport { ButtonGroupProps, ButtonGroupVariant } from './types';\nimport { filterComponents, isComponent } from '../../utils';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'ButtonGroup';\nconst CLASSNAME = 'redsift-button-group';\n\n/**\n * The ButtonGroup component.\n */\nexport const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, color: propsColor, theme: propsTheme, variant: propsVariant, ...forwardedProps } = props;\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n  const variant = Object.values(ButtonGroupVariant).includes(propsVariant!) ? propsVariant : 'primary';\n\n  /**\n   * Create an array containing only valid children being either Button, IconButton, ButtonLink, MenuButton or Select.\n   */\n  const childArray = filterComponents([\n    'Button',\n    'IconButton',\n    'ButtonLink',\n    'MenuButton',\n    'Select',\n    'Dialog',\n    'Popover',\n    'Tooltip',\n  ])(children);\n  const buttons = childArray.map((child, index) => {\n    if (\n      isComponent('MenuButton')(child) ||\n      isComponent('Select')(child) ||\n      isComponent('Dialog')(child) ||\n      isComponent('Popover')(child) ||\n      isComponent('Tooltip')(child)\n    ) {\n      return React.cloneElement(child, {\n        color,\n        theme,\n        variant,\n        key: child.key ?? index,\n        triggerClassName:\n          index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button',\n      });\n    }\n    return React.cloneElement(child, {\n      color,\n      theme,\n      variant,\n      key: (child as React.ReactElement<any, string | React.JSXElementConstructor<any>>).key ?? index,\n      className: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button',\n    });\n  });\n\n  return (\n    <StyledButtonGroup\n      {...forwardedProps}\n      className={classNames(ButtonGroup.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $color={color}\n      $variant={variant}\n      $theme={theme}\n    >\n      {buttons}\n    </StyledButtonGroup>\n  );\n});\nButtonGroup.className = CLASSNAME;\nButtonGroup.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","ButtonGroup","forwardRef","props","ref","children","className","color","propsColor","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","ButtonGroupVariant","childArray","filterComponents","buttons","map","child","index","_key","isComponent","_child$key","React","cloneElement","key","triggerClassName","length","createElement","StyledButtonGroup","_extends","classNames","$color","$variant","$theme","displayName"],"mappings":"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"}

package/components/button-group/styles.js

@@ -0,0 +1,103 @@
+import styled, { css } from 'styled-components';
+import { ButtonGroupVariant } from './types.js';
+import { baseStyling, baseFlexbox } from '../shared/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledButtonGroup = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-flex' : 'flex';
+}};
+
+  ${baseStyling}
+  ${baseFlexbox}
+
+  ${_ref2 => {
+  let {
+    $color,
+    $variant,
+    $theme
+  } = _ref2;
+  return css`
+    ${$variant === ButtonGroupVariant.secondary ? css`
+          .first-button {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-color: transparent;
+          }
+
+          .middle-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            margin-left: -1px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-color: transparent;
+          }
+
+          .last-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            margin-left: -1px;
+          }
+        ` : $variant === ButtonGroupVariant.unstyled ? css`
+          .first-button {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid rgba(0, 0, 0, 0.23);
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default
+            )`};
+          }
+
+          .middle-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid rgba(0, 0, 0, 0.23);
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default
+            )`};
+          }
+
+          .last-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        ` : css`
+          .first-button {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid #bdbdbd;
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover
+            )`};
+          }
+
+          .middle-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid #bdbdbd;
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover
+            )`};
+          }
+
+          .last-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        `}
+  `;
+}};
+`;
+
+export { StyledButtonGroup };
+//# sourceMappingURL=styles.js.map

package/components/button-group/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/button-group/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseFlexbox, baseStyling } from '../shared';\nimport { ButtonGroupVariant, StyledButtonGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledButtonGroup = styled.div<StyledButtonGroupProps>`\n  display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};\n\n  ${baseStyling}\n  ${baseFlexbox}\n\n  ${({ $color, $variant, $theme }) => css`\n    ${$variant === ButtonGroupVariant.secondary\n      ? css`\n          .first-button {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-color: transparent;\n          }\n\n          .middle-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            margin-left: -1px;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-color: transparent;\n          }\n\n          .last-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            margin-left: -1px;\n          }\n        `\n      : $variant === ButtonGroupVariant.unstyled\n      ? css`\n          .first-button {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid rgba(0, 0, 0, 0.23);\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default\n            )`};\n          }\n\n          .middle-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid rgba(0, 0, 0, 0.23);\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default\n            )`};\n          }\n\n          .last-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n        `\n      : css`\n          .first-button {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid #bdbdbd;\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover\n            )`};\n          }\n\n          .middle-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right: 1px solid #bdbdbd;\n            border-color: ${`var(\n              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover\n            )`};\n          }\n\n          .last-button {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n        `}\n  `};\n`;\n"],"names":["StyledButtonGroup","styled","div","_ref","inline","baseStyling","baseFlexbox","_ref2","$color","$variant","$theme","css","ButtonGroupVariant","secondary","unstyled"],"mappings":";;;;AAIA;AACA;AACA;AACaA,MAAAA,iBAAiB,GAAGC,MAAM,CAACC,GAA4B,CAAA;AACpE,WAAA,EAAaC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAMC,MAAM,GAAG,aAAa,GAAG,MAAM,CAAA;AAAA,CAAE,CAAA;AAC/D;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,QAAQ;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAH,KAAA,CAAA;AAAA,EAAA,OAAKI,GAAI,CAAA;AAC1C,IAAA,EAAMF,QAAQ,KAAKG,kBAAkB,CAACC,SAAS,GACvCF,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACDF,QAAQ,KAAKG,kBAAkB,CAACE,QAAQ,GACxCH,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA,0BAA6B,EAAA,CAAA;AAC7B,8BAAA,EAAgCD,MAAO,CAAA,oBAAA,EAAsBD,QAAS,CAAA,QAAA,EAAUD,MAAO,CAAA;AACvF,aAAe,CAAA,CAAA;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA6B,EAAA,CAAA;AAC7B,8BAAA,EAAgCE,MAAO,CAAA,oBAAA,EAAsBD,QAAS,CAAA,QAAA,EAAUD,MAAO,CAAA;AACvF,aAAe,CAAA,CAAA;AACf;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACDG,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA,0BAA6B,EAAA,CAAA;AAC7B,8BAAA,EAAgCD,MAAO,CAAA,oBAAA,EAAsBD,QAAS,CAAA,QAAA,EAAUD,MAAO,CAAA;AACvF,aAAe,CAAA,CAAA;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA6B,EAAA,CAAA;AAC7B,8BAAA,EAAgCE,MAAO,CAAA,oBAAA,EAAsBD,QAAS,CAAA,QAAA,EAAUD,MAAO,CAAA;AACvF,aAAe,CAAA,CAAA;AACf;AACA;AACA;AACA;AACA;AACA;AACA,QAAU,CAAA,CAAA;AACV,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;;;;"}

package/components/button-group/types.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps } from 'react';
+import { StylingProps, FlexLayoutProps } from '../../types/styles.js';
+import { ValueOf } from '../../types/helpers.js';
+import { ButtonsColorPalette, Theme } from '../../types/colors.js';
+
+/**
+ * Component variant.
+ */
+declare const ButtonGroupVariant: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly unstyled: "unstyled";
+};
+type ButtonGroupVariant = ValueOf<typeof ButtonGroupVariant>;
+/**
+ * Component color.
+ */
+type ButtonGroupColor = ButtonsColorPalette;
+/**
+ * Component props.
+ */
+interface ButtonGroupProps extends ComponentProps<'div'>, StylingProps, FlexLayoutProps {
+    /** Button color. */
+    color?: ButtonGroupColor;
+    /** Button variant. */
+    variant?: ButtonGroupVariant;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledButtonGroupProps = ButtonGroupProps & {
+    $color: ButtonGroupProps['color'];
+    $variant: ButtonGroupProps['variant'];
+    $theme: ButtonGroupProps['theme'];
+};
+
+export { ButtonGroupColor, ButtonGroupProps, ButtonGroupVariant, StyledButtonGroupProps };

package/components/button-group/types.js

@@ -0,0 +1,19 @@
+/**
+ * Component variant.
+ */
+const ButtonGroupVariant = {
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
+export { ButtonGroupVariant };
+//# sourceMappingURL=types.js.map

package/components/button-group/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/button-group/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { FlexLayoutProps, ButtonsColorPalette, StylingProps, Theme, ValueOf } from '../../types';\n\n/**\n * Component variant.\n */\nexport const ButtonGroupVariant = {\n  primary: 'primary',\n  secondary: 'secondary',\n  unstyled: 'unstyled',\n} as const;\nexport type ButtonGroupVariant = ValueOf<typeof ButtonGroupVariant>;\n\n/**\n * Component color.\n */\nexport type ButtonGroupColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface ButtonGroupProps extends ComponentProps<'div'>, StylingProps, FlexLayoutProps {\n  /** Button color. */\n  color?: ButtonGroupColor;\n  /** Button variant. */\n  variant?: ButtonGroupVariant;\n  /** Theme. */\n  theme?: Theme;\n}\n\nexport type StyledButtonGroupProps = ButtonGroupProps & {\n  $color: ButtonGroupProps['color'];\n  $variant: ButtonGroupProps['variant'];\n  $theme: ButtonGroupProps['theme'];\n};\n"],"names":["ButtonGroupVariant","primary","secondary","unstyled"],"mappings":"AAGA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAG;AAChCC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;AAGA;AACA;AACA;;;;"}

package/components/button-link/ButtonLink.d.ts

@@ -0,0 +1,13 @@
+import { ButtonLinkProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The ButtonLink is a semantic link that looks like a button.
+ *
+ * For a semantic button that looks like a button, please use the Button component.
+ * 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>;
+
+export { ButtonLink };