@instructure/ui-color-picker 8.25.1-snapshot-20

package/src/ColorPreset/index.tsx

@@ -0,0 +1,328 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+import { Component, SyntheticEvent } from 'react'
+
+import { withStyle, jsx } from '@instructure/emotion'
+import { passthroughProps } from '@instructure/ui-react-utils'
+import { testable } from '@instructure/ui-testable'
+import { colorToHex8, colorToRGB } from '@instructure/ui-color-utils'
+
+import { IconButton, Button } from '@instructure/ui-buttons'
+import { View } from '@instructure/ui-view'
+import { Tooltip } from '@instructure/ui-tooltip'
+import { Popover } from '@instructure/ui-popover'
+import { Text } from '@instructure/ui-text'
+import { Drilldown } from '@instructure/ui-drilldown'
+import type { DrilldownOnSelectArgs } from '@instructure/ui-drilldown'
+import { IconAddLine, IconCheckDarkSolid } from '@instructure/ui-icons'
+
+import { ColorIndicator } from '../ColorIndicator'
+import { ColorMixer } from '../ColorMixer'
+import { ColorContrast } from '../ColorContrast'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
+import type { ColorPresetProps, ColorPresetState } from './props'
+import { propTypes, allowedProps } from './props'
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+@withStyle(generateStyle, generateComponentTheme)
+@testable()
+class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
+  static propTypes = propTypes
+  static allowedProps = allowedProps
+  static readonly componentId = 'ColorPreset'
+
+  static defaultProps = {
+    disabled: false
+  }
+
+  constructor(props: ColorPresetProps) {
+    super(props)
+    this.state = {
+      openEditor: false,
+      openAddNew: false,
+      newColor: { r: 51, g: 99, b: 42, a: 1 }
+    }
+  }
+
+  ref: HTMLDivElement | null = null
+
+  handleRef = (el: HTMLDivElement | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  onMenuItemSelected =
+    (color: string) =>
+    (_e: SyntheticEvent<Element, Event>, args: DrilldownOnSelectArgs) => {
+      if (args.value === 'select') {
+        this.props.onSelect(color)
+      }
+      if (args.value === 'remove') {
+        this.props?.colorMixerSettings?.onPresetChange(
+          this.props.colors.filter((clr) => clr !== color)
+        )
+      }
+    }
+
+  renderAddNewPresetButton = () => (
+    <Popover
+      renderTrigger={
+        <div css={this.props?.styles?.addNewPresetButton}>
+          <IconButton
+            disabled={this.props.disabled}
+            screenReaderLabel={
+              this.props.colorMixerSettings!.addNewPresetButtonScreenReaderLabel
+            }
+          >
+            <IconAddLine />
+          </IconButton>
+        </div>
+      }
+      isShowingContent={this.state.openAddNew}
+      onShowContent={() => {
+        if (this.props.disabled) return
+        this.setState({ openAddNew: true })
+      }}
+      onHideContent={() => {
+        this.setState({ openAddNew: false })
+      }}
+      on="click"
+      screenReaderLabel={this.props.popoverScreenReaderLabel}
+      shouldContainFocus
+      shouldReturnFocus
+      shouldCloseOnDocumentClick
+      offsetY={16}
+      mountNode={() => document.getElementById('main')}
+    >
+      <div css={this.props.styles?.popoverContent}>
+        <ColorMixer
+          value={colorToHex8(this.state.newColor)}
+          onChange={(newColor: string) =>
+            this.setState({ newColor: colorToRGB(newColor) })
+          }
+          withAlpha={this.props?.colorMixerSettings?.colorMixer?.withAlpha}
+          rgbRedInputScreenReaderLabel={
+            this.props.colorMixerSettings!.colorMixer
+              .rgbRedInputScreenReaderLabel
+          }
+          rgbGreenInputScreenReaderLabel={
+            this.props.colorMixerSettings!.colorMixer
+              .rgbGreenInputScreenReaderLabel
+          }
+          rgbBlueInputScreenReaderLabel={
+            this.props.colorMixerSettings!.colorMixer
+              .rgbBlueInputScreenReaderLabel
+          }
+          rgbAlphaInputScreenReaderLabel={
+            this.props.colorMixerSettings!.colorMixer
+              .rgbAlphaInputScreenReaderLabel
+          }
+          colorSliderNavigationExplanationScreenReaderLabel={
+            this.props.colorMixerSettings!.colorMixer
+              .colorSliderNavigationExplanationScreenReaderLabel
+          }
+          alphaSliderNavigationExplanationScreenReaderLabel={
+            this.props.colorMixerSettings!.colorMixer
+              .alphaSliderNavigationExplanationScreenReaderLabel
+          }
+          colorPaletteNavigationExplanationScreenReaderLabel={
+            this.props.colorMixerSettings!.colorMixer
+              .colorPaletteNavigationExplanationScreenReaderLabel
+          }
+        />
+        {this.props?.colorMixerSettings?.colorContrast && (
+          <div css={this.props.styles?.popoverContrastBlock}>
+            <ColorContrast
+              firstColor={
+                this.props.colorMixerSettings.colorContrast.firstColor
+              }
+              secondColor={colorToHex8(this.state.newColor)}
+              label={this.props.colorMixerSettings.colorContrast.label}
+              successLabel={
+                this.props.colorMixerSettings.colorContrast.successLabel
+              }
+              failureLabel={
+                this.props.colorMixerSettings.colorContrast.failureLabel
+              }
+              normalTextLabel={
+                this.props.colorMixerSettings.colorContrast.normalTextLabel
+              }
+              largeTextLabel={
+                this.props.colorMixerSettings.colorContrast.largeTextLabel
+              }
+              graphicsTextLabel={
+                this.props.colorMixerSettings.colorContrast.graphicsTextLabel
+              }
+              firstColorLabel={
+                this.props.colorMixerSettings.colorContrast.firstColorLabel
+              }
+              secondColorLabel={
+                this.props.colorMixerSettings.colorContrast.secondColorLabel
+              }
+            />
+          </div>
+        )}
+      </div>
+      <div css={this.props.styles?.popoverFooter}>
+        <Button
+          onClick={() => {
+            this.props?.colorMixerSettings?.onPresetChange([
+              colorToHex8(this.state.newColor),
+              ...this.props.colors
+            ])
+            this.setState({ openAddNew: false })
+          }}
+          color="primary"
+          margin="0 xx-small 0 xx-small"
+        >
+          Add
+        </Button>
+        <Button
+          onClick={() => this.setState({ openAddNew: false })}
+          color="secondary"
+          margin="0 xx-small 0 xx-small"
+        >
+          Close
+        </Button>
+      </div>
+    </Popover>
+  )
+  renderColorIndicator = (color: string, selectOnClick?: boolean) => (
+    <Tooltip renderTip={<div>{color}</div>}>
+      <View
+        disabled={this.props.disabled}
+        position="relative"
+        width="2.375rem"
+        height="2.375rem"
+        background="transparent"
+        margin="xx-small"
+        display="inline-block"
+        borderRadius="medium"
+        borderWidth="0"
+        padding="0"
+        as="button"
+        {...(selectOnClick
+          ? { onClick: () => this.props.onSelect(color) }
+          : {})}
+        {...(this.props.selected === color ? { 'aria-label': 'selected' } : {})}
+        role="presentation"
+      >
+        <div>
+          <ColorIndicator color={color} shape="rectangle" />
+          {this.props.selected === color && (
+            <div css={this.props?.styles?.selectedIndicator}>
+              <IconCheckDarkSolid
+                themeOverride={{ sizeXSmall: '0.8rem' }}
+                size="x-small"
+              />
+            </div>
+          )}
+        </div>
+      </View>
+    </Tooltip>
+  )
+  renderSettingsMenu = (color: string, index: number) => (
+    <Drilldown
+      onSelect={this.onMenuItemSelected(color)}
+      trigger={this.renderColorIndicator(color)}
+      key={`color-preset-color-${index}`}
+      rootPageId="root"
+      width="10rem"
+      offsetY="15rem"
+    >
+      <Drilldown.Page withoutHeaderSeparator id="root" renderTitle={color}>
+        <Drilldown.Option value="select" id="select">
+          Select
+        </Drilldown.Option>
+        <Drilldown.Option value="remove" id="remove">
+          Remove
+        </Drilldown.Option>
+      </Drilldown.Page>
+    </Drilldown>
+  )
+
+  render() {
+    const {
+      disabled,
+      onSelect,
+      selected,
+      styles,
+      label,
+      colorMixerSettings,
+      colors,
+      elementRef,
+      ...props
+    } = this.props
+    return (
+      <div
+        {...passthroughProps(props)}
+        ref={this.handleRef}
+        css={styles?.colorPreset}
+      >
+        {label && (
+          <div css={styles?.label}>
+            <Text weight="bold">{label}</Text>
+          </div>
+        )}
+        {typeof colorMixerSettings?.onPresetChange === 'function' &&
+          this.renderAddNewPresetButton()}
+        {colors.map((color, index) =>
+          typeof colorMixerSettings?.onPresetChange === 'function' ? (
+            this.renderSettingsMenu(color, index)
+          ) : (
+            <div key={`color-preset-color-${index}`}>
+              {this.renderColorIndicator(color, true)}
+            </div>
+          )
+        )}
+      </div>
+    )
+  }
+}
+
+export { ColorPreset }
+export default ColorPreset

package/src/ColorPreset/props.ts

@@ -0,0 +1,162 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  OtherHTMLAttributes,
+  PropValidators,
+  ColorPresetTheme
+} from '@instructure/shared-types'
+import type { RGBAType } from '../ColorMixer/props'
+
+type ContrastStrength = 'min' | 'mid' | 'max'
+type MessageType = Array<{
+  type: 'success' | 'hint' | 'error' | 'screenreader-only'
+  text: string
+}>
+
+type ColorPresetOwnProps = {
+  /**
+   * Array of HEX strings which are the preset colors. Supports 8 character HEX (with alpha)
+   */
+  colors: Array<string>
+  /**
+   * Makes the component uninteractable
+   */
+  disabled?: boolean
+  /**
+   * Provides a reference to the component's underlying html element.
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * Label text of the component
+   */
+  label?: string
+
+  /**
+   * If set, a `plus` button will appear for the preset. Those components whose corresponding keys aren't provided (`colorMixer` or `colorContrast`)
+   * will not be rendered.
+   * The `onPresetChange` function gets called when a color gets added or removed from the preset list.
+   * It will be called with the new list of colors
+   */
+  colorMixerSettings?: {
+    /**
+     * screenReaderLabel for the add new preset button
+     */
+    addNewPresetButtonScreenReaderLabel: string
+    maxHeight: string
+    onPresetChange: (colors: ColorPresetOwnProps['colors']) => void
+    colorMixer: {
+      withAlpha: boolean
+      rgbRedInputScreenReaderLabel: string
+      rgbGreenInputScreenReaderLabel: string
+      rgbBlueInputScreenReaderLabel: string
+      rgbAlphaInputScreenReaderLabel: string
+      colorSliderNavigationExplanationScreenReaderLabel: string
+      alphaSliderNavigationExplanationScreenReaderLabel: string
+      colorPaletteNavigationExplanationScreenReaderLabel: string
+    }
+    colorContrast?: {
+      firstColor: string
+      label: string
+      successLabel: string
+      failureLabel: string
+      normalTextLabel: string
+      largeTextLabel: string
+      graphicsTextLabel: string
+      firstColorLabel: string
+      secondColorLabel: string
+    }
+  }
+  /**
+   * The function gets called when a color gets selected
+   */
+  onSelect: (selected: string) => void
+  /**
+   * Sets the ScreenReaderLabel for the popover
+   */
+  popoverScreenReaderLabel?: string
+  /**
+   * The currently selected HEX string
+   */
+  selected: string | null
+}
+
+type ColorPresetState = {
+  openEditor: boolean | string
+  openAddNew: boolean
+  newColor: RGBAType
+}
+
+type PropKeys = keyof ColorPresetOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ColorPresetProps = ColorPresetOwnProps &
+  WithStyleProps<ColorPresetTheme, ColorPresetStyle> &
+  OtherHTMLAttributes<ColorPresetOwnProps>
+
+type ColorPresetStyle = ComponentStyle<
+  | 'colorPreset'
+  | 'addNewPresetButton'
+  | 'selectedIndicator'
+  | 'popoverContent'
+  | 'popoverDivider'
+  | 'popoverFooter'
+  | 'label'
+  | 'popoverContrastBlock'
+>
+
+const propTypes: PropValidators<PropKeys> = {
+  colors: PropTypes.array.isRequired,
+  disabled: PropTypes.bool,
+  elementRef: PropTypes.func,
+  label: PropTypes.string,
+  colorMixerSettings: PropTypes.object,
+  onSelect: PropTypes.func.isRequired,
+  popoverScreenReaderLabel: PropTypes.string,
+  selected: PropTypes.string.isRequired
+}
+
+const allowedProps: AllowedPropKeys = [
+  'colors',
+  'disabled',
+  'elementRef',
+  'label',
+  'colorMixerSettings',
+  'onSelect',
+  'popoverScreenReaderLabel',
+  'selected'
+]
+
+export type {
+  ColorPresetProps,
+  ColorPresetStyle,
+  ColorPresetState,
+  ContrastStrength,
+  MessageType
+}
+export { propTypes, allowedProps }

package/src/ColorPreset/styles.ts

@@ -0,0 +1,107 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { ColorPresetTheme } from '@instructure/shared-types'
+import type { ColorPresetProps } from './props'
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: ColorPresetTheme,
+  props: ColorPresetProps
+) => {
+  const { colorMixerSettings } = props
+  return {
+    colorPreset: {
+      label: 'colorPreset',
+      display: 'flex',
+      flexWrap: 'wrap',
+      width: '17rem'
+    },
+    addNewPresetButton: {
+      label: 'colorPreset__addNewPresetButton',
+      width: '2.375rem',
+      height: '2.375rem',
+      margin: componentTheme.xxSmallSpacing
+    },
+    selectedIndicator: {
+      label: 'colorPreset__selectedIndicator',
+      width: '1.25rem',
+      height: '1.25rem',
+      borderStyle: 'solid',
+      borderColor: componentTheme.selectedIndicatorBorderColor,
+      borderWidth: componentTheme.smallBorder,
+      borderRadius: '1.25rem',
+      boxSizing: 'border-box',
+      position: 'relative',
+      insetInlineStart: '1.5rem',
+      bottom: '2.75rem',
+      backgroundColor: componentTheme.selectedIndicatorBackgroundColor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    popoverContent: {
+      label: 'colorPreset__popoverContent',
+      padding: componentTheme.smallSpacing,
+      maxHeight: colorMixerSettings?.maxHeight || '100vh',
+      overflow: 'scroll'
+    },
+    popoverDivider: {
+      label: 'colorPreset__popoverDivider',
+      borderTop: 'solid',
+      borderWidth: componentTheme.smallBorder,
+      borderColor: componentTheme.popoverDividerColor,
+      margin: `${componentTheme.smallSpacing} 0 ${componentTheme.smallSpacing} 0`
+    },
+    popoverContrastBlock: {
+      label: 'colorPreset__popoverContrastBlock',
+      borderTop: 'solid',
+      borderWidth: componentTheme.smallBorder,
+      borderColor: componentTheme.popoverDividerColor,
+      margin: `${componentTheme.smallSpacing} 0 ${componentTheme.smallSpacing} 0`
+    },
+    popoverFooter: {
+      label: 'colorPreset__popoverFooter',
+      backgroundColor: componentTheme.popoverFooterColor,
+      display: 'flex',
+      flexDirection: 'row-reverse',
+      padding: componentTheme.smallSpacing
+    },
+    label: {
+      label: 'colorPreset__label',
+      width: '100%',
+      margin: componentTheme.xxSmallSpacing
+    }
+  }
+}
+
+export default generateStyle

package/src/ColorPreset/theme.ts

@@ -0,0 +1,58 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+import { ColorPresetTheme } from '@instructure/shared-types'
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = (theme: Theme): ColorPresetTheme => {
+  const { colors, borders, spacing } = theme
+
+  const componentVariables = {
+    xxSmallSpacing: spacing?.xxSmall,
+    smallSpacing: spacing?.small,
+    selectedIndicatorBackgroundColor: colors.white,
+    selectedIndicatorBorderColor: colors.licorice,
+    popoverDividerColor: colors?.tiara,
+    smallBorder: borders?.widthSmall,
+    popoverFooterColor: colors?.porcelain,
+    checkerboardBackgroundImage: `linear-gradient(45deg, ${colors.tiara} 25%, transparent 25%),
+    linear-gradient(-45deg, ${colors.tiara} 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, ${colors.tiara} 75%),
+    linear-gradient(-45deg, transparent 75%, ${colors.tiara} 75%)`,
+    checkerboardBackgroundSize: '.5rem .5rem',
+    checkerboardBackgroundPosition:
+      '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px'
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme

package/src/index.ts

@@ -0,0 +1,34 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { ColorPicker } from './ColorPicker'
+export { ColorMixer } from './ColorMixer'
+export { ColorPreset } from './ColorPreset'
+export { ColorContrast } from './ColorContrast'
+export { ColorIndicator } from './ColorIndicator'
+
+export type { ColorPickerProps } from './ColorPicker/props'
+export type { ColorMixerProps } from './ColorMixer/props'
+export type { ColorPresetProps } from './ColorPreset/props'
+export type { ColorContrastProps } from './ColorContrast/props'
+export type { ColorIndicatorProps } from './ColorIndicator/props'