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

package/_internal/Switch2.js

@@ -1,66 +1,320 @@
-import { ComponentProps, MutableRefObject, ChangeEvent } from 'react';
-import { S as SwitchGroupState } from './types27.js';
-import { h as StylingProps } from './styles2.js';
-import { T as Theme } from './colors.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { S as SwitchGroupContext } from './context5.js';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { u as useFocusRing } from './useFocusRing.js';
+import { u as useTheme } from './useTheme.js';
 
 /**
- * Component props.
+ * Component style.
  */
-interface SwitchProps 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 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?: SwitchGroupState): void;
-    /** Theme. */
-    theme?: Theme;
-    /**
-     * Value to pass to the input element.
-     * Required within a group.
-     */
-    value?: HTMLInputElement['value'];
-}
-type StyledSwitchProps = Omit<SwitchProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isSelected' | 'isRequired' | 'size'> & {
-    $isColored: SwitchProps['isColored'];
-    $isDisabled: SwitchProps['isDisabled'];
-    $isInvalid: SwitchProps['isInvalid'];
-    $isFocusVisible: boolean;
-    $isRequired: SwitchProps['isRequired'];
-    $isSelected: SwitchProps['isSelected'];
-    $theme: SwitchProps['theme'];
-};
+const StyledSwitch = styled.label`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  ${baseStyling}
+
+  align-items: center;
+  background: none;
+  border: none;
+  display: inline-flex;
+  margin: 4px;
+
+  input {
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  span.label {
+    ${_ref => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-switch-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-switch-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-switch-text-default);
+          `;
+}}
+
+    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-inline-start: 12px;
+    padding-inline-end: 24px;
+  }
+
+  .redsift-switch__slide {
+    height: 20px;
+    position: relative;
+    min-width: 40px;
+  }
+
+  .redsift-switch-slide__inner {
+    ${_ref2 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $isSelected,
+    $theme
+  } = _ref2;
+  return $isDisabled ? css`
+            background-color: var(
+              --redsift-color-${$theme}-components-switch-background-disabled${$isSelected ? '-active' : ''}
+            );
+          ` : $isInvalid ? css`
+            background-color: var(
+              --redsift-color-${$theme}-components-switch-background-invalid${$isSelected ? '-active' : ''}
+            );
+          ` : css`
+            background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-switch-background-default${$isSelected ? '-active' : ''})` : `var(--redsift-color-${$theme}-components-switch-background-uncolored${$isSelected ? '-active' : ''})`};
+          `;
+}}
+    border-radius: 20px;
+    height: 24px;
+    position: absolute;
+    top: calc(50% - 24px / 2);
+    width: 46px;
+    z-index: 2;
+  }
+
+  .redsift-switch-slide__knob-wrapper {
+    border-radius: 50%;
+    height: 20px;
+    margin-inline-start: ${_ref3 => {
+  let {
+    $isSelected
+  } = _ref3;
+  return !$isSelected ? '2px' : '24px';
+}};
+    position: absolute;
+    top: -6px;
+    width: 20px;
+  }
+
+  .redsift-switch-slide-knob-wrapper__elevation {
+    ${_ref4 => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref4;
+  return $isDisabled ? css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-disabled-hover);
+          ` : $isInvalid ? css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-invalid-hover);
+          ` : css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-default-hover);
+          `;
+}}
+
+    border-radius: 50%;
+    height: 32px;
+    margin-inline-start: ${_ref5 => {
+  let {
+    $isSelected
+  } = _ref5;
+  return !$isSelected ? '-6px' : '-6px';
+}};
+    opacity: 0;
+    position: absolute;
+    width: 32px;
+    z-index: 3;
+  }
+
+  .redsift-switch-slide-knob-wrapper__knob {
+    ${_ref6 => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref6;
+  return $isDisabled ? css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-disabled);
+          ` : $isInvalid ? css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-invalid);
+          ` : css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-default);
+          `;
+}}
+    border-radius: 50%;
+    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
+    height: 20px;
+    position: absolute;
+    top: 6px;
+    width: 20px;
+    z-index: 4;
+  }
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+    cursor: pointer;
+
+    ${_ref7 => {
+  let {
+    $isDisabled
+  } = _ref7;
+  return !$isDisabled ? css`
+            .redsift-switch-slide-knob-wrapper__elevation {
+              opacity: 0.5;
+            }
+          ` : '';
+}}
+  }
+
+  ${_ref8 => {
+  let {
+    $isDisabled,
+    $isFocusVisible
+  } = _ref8;
+  return $isFocusVisible && !$isDisabled ? css`
+          .redsift-switch-slide-knob-wrapper__elevation {
+            opacity: 0.5;
+          }
+        ` : '';
+}}
+`;
+
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
+const COMPONENT_NAME = 'Switch';
+const CLASSNAME = 'redsift-switch';
 
 /**
  * The Switch component.
  * Works both inside a SwitchGroup or as standalone.
  * Can be used as controlled or uncontrolled.
  */
-declare const Switch: Comp<SwitchProps, HTMLLabelElement>;
+const Switch = /*#__PURE__*/forwardRef((props, ref) => {
+  var _isDisabled, _isReadOnly, _ref;
+  const groupState = useContext(SwitchGroupContext);
+  let {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      autoFocus,
+      children,
+      className,
+      defaultSelected,
+      inputProps,
+      inputRef,
+      isColored = true,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isSelected: propsIsSelected,
+      name,
+      onChange,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing({
+    autoFocus
+  });
+  isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
+  isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
+  const [isSelected, setSelected] = useState(Boolean((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value)));
+  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;
+  useEffect(() => {
+    setSelected(Boolean(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected));
+  }, [propsIsSelected, defaultSelected]);
+  useEffect(() => {
+    if (groupState) {
+      setSelected(groupState.value.includes(value));
+    }
+  }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
+  warnIfNoAccessibleLabelFound(props, [children], 'Switch');
+  if (groupState) {
+    if (propsIsSelected != null) {
+      console.warn('isSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead.');
+    }
+    if (defaultSelected != null) {
+      console.warn('defaultSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead.');
+    }
+    if (props.value == null) {
+      console.warn('A <Switch> element within a <SwitchGroup> requires a `value` property unless the <Switch> is controlled.');
+    }
+  }
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (groupState) {
+      if (!groupState.value.includes(value)) {
+        groupState.addValue(value);
+      } else {
+        groupState.removeValue(value);
+      }
+    }
+    if (isControlled) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(!propsIsSelected, value, name, event, groupState);
+    } else {
+      setSelected(!isSelected);
+      onChange === null || onChange === void 0 ? void 0 : onChange(!isSelected, value, name, event, groupState);
+    }
+  }, [onChange, groupState, isSelected, propsIsSelected]);
+  return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends({}, forwardedProps, {
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
+    $isRequired: isRequired,
+    $isSelected: isSelected || isControlled && propsIsSelected,
+    $theme: theme,
+    className: classNames(Switch.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}__slide`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide__inner`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide__knob-wrapper`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide-knob-wrapper__elevation`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide-knob-wrapper__knob`
+  }))), children ? /*#__PURE__*/React__default.createElement("span", {
+    className: "label"
+  }, children) : null, /*#__PURE__*/React__default.createElement("input", _extends({}, inputProps, focusProps, {
+    "aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : 'false',
+    "aria-disabled": isDisabled,
+    "aria-invalid": isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-readonly": isReadOnly,
+    "aria-required": isRequired,
+    autoFocus: autoFocus,
+    checked: isSelected || isControlled && propsIsSelected ? true : false,
+    disabled: isDisabled,
+    name: name,
+    onChange: handleChange,
+    ref: inputRef,
+    role: "switch",
+    type: "checkbox",
+    value: value
+  })));
+});
+Switch.className = CLASSNAME;
+Switch.displayName = COMPONENT_NAME;
 
-export { SwitchProps as S, StyledSwitchProps as a, Switch as b };
+export { Switch as S };
+//# sourceMappingURL=Switch2.js.map

package/_internal/SwitchGroup.js

@@ -1,10 +1,188 @@
-import { b as SwitchGroupProps } from './types27.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { S as SwitchGroupContext } from './context5.js';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { C as ColorPalette } from './colors.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component orientation.
+ */
+const SwitchGroupOrientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledSwitchGroup = styled.div`
+  ${baseStyling}
+
+  display: flex;
+  flex-direction: column;
+
+  ${_ref => {
+  let {
+    $orientation
+  } = _ref;
+  return $orientation === SwitchGroupOrientation.vertical ? `
+    div.redsift-switch-group-switches {
+      display: flex;
+      flex-direction: column;
+    }
+  ` : `
+    div.redsift-switch-group-switches {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  `;
+}}
+
+  span.redsift-switch-group-label {
+    font-family: var(--redsift-typography-body-font-family);
+    font-weight: var(--redsift-typography-body-font-weight);
+    font-size: var(--redsift-typography-body-font-size);
+    line-height: var(--redsift-typography-body-line-height);
+
+    ${_ref2 => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref2;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
+}}
+  }
+
+  span.redsift-switch-group-description {
+    font-family: var(--redsift-typography-helper-font-family);
+    font-weight: var(--redsift-typography-helper-font-weight);
+    font-size: var(--redsift-typography-helper-font-size);
+    line-height: var(--redsift-typography-helper-line-height);
+
+    ${_ref3 => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref3;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
+}}
+  }
+`;
+
+const _excluded = ["children", "className", "color", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
+const COMPONENT_NAME = 'SwitchGroup';
+const CLASSNAME = 'redsift-switch-group';
 
 /**
  * The SwitchGroup component.
  * Can be used as controlled or uncontrolled.
  */
-declare const SwitchGroup: Comp<SwitchGroupProps, HTMLDivElement>;
+const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      color = ColorPalette.primary,
+      defaultValues,
+      description,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      onChange,
+      orientation = SwitchGroupOrientation.vertical,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const [selectedValues, setValue] = useState(value || defaultValues || []);
+  useEffect(() => {
+    if (value) {
+      state.setValue(value);
+    }
+  }, [value]);
+  const state = {
+    value: selectedValues,
+    isDisabled: isDisabled || false,
+    isReadOnly: isReadOnly || false,
+    setValue(values) {
+      if (isReadOnly || isDisabled) {
+        return;
+      }
+      setValue(values);
+    },
+    addValue(value) {
+      if (!selectedValues.includes(value)) {
+        setValue(selectedValues.concat(value));
+        if (onChange) {
+          onChange(selectedValues.concat(value));
+        }
+      }
+    },
+    removeValue(value) {
+      if (selectedValues.includes(value)) {
+        setValue(selectedValues.filter(existingValue => existingValue !== value));
+        if (onChange) {
+          onChange(selectedValues.filter(existingValue => existingValue !== value));
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledSwitchGroup, _extends({
+    color: color
+  }, forwardedProps, {
+    $isDisabled: isDisabled,
+    $isInvalid: isInvalid || isRequired && selectedValues.length === 0,
+    $isReadOnly: isReadOnly,
+    $orientation: orientation,
+    $theme: theme,
+    "aria-disabled": isDisabled,
+    className: classNames(SwitchGroup.className, className),
+    ref: ref,
+    role: "group"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: `${SwitchGroup.className}-label`
+  }, label, isRequired ? ' *' : null), /*#__PURE__*/React__default.createElement("div", {
+    className: `${SwitchGroup.className}-switches`
+  }, /*#__PURE__*/React__default.createElement(SwitchGroupContext.Provider, {
+    value: state
+  }, children)), /*#__PURE__*/React__default.createElement("span", {
+    className: `${SwitchGroup.className}-description`
+  }, description)));
+});
+SwitchGroup.className = CLASSNAME;
+SwitchGroup.displayName = COMPONENT_NAME;
 
-export { SwitchGroup as S };
+export { SwitchGroupOrientation as S, SwitchGroup as a };
+//# sourceMappingURL=SwitchGroup.js.map

package/_internal/Text2.js

@@ -1,9 +1,51 @@
-import { b as TextProps } from './types28.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 { S as StyledText } from './styles5.js';
+import { F as FontFamily } from './fonts.js';
+import { u as useTheme } from './useTheme.js';
+
+const _excluded = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "theme", "variant"];
+const COMPONENT_NAME = 'Text';
+const CLASSNAME = 'redsift-text';
 
 /**
  * The Text component.
  */
-declare const Text: Comp<TextProps, HTMLDivElement>;
+const Text = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      color,
+      fontFamily = FontFamily.poppins,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      noWrap,
+      theme: propsTheme,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledText, _extends({
+    as: as
+  }, forwardedProps, {
+    className: classNames(Text.className, className),
+    ref: ref,
+    $as: as,
+    $color: color,
+    $fontFamily: fontFamily,
+    $fontSize: fontSize,
+    $fontWeight: fontWeight,
+    $lineHeight: lineHeight,
+    $noWrap: noWrap,
+    $theme: theme,
+    $variant: variant
+  }), children);
+});
+Text.className = CLASSNAME;
+Text.displayName = COMPONENT_NAME;
 
 export { Text as T };
+//# sourceMappingURL=Text2.js.map