bootstrap-rn 0.3.3 → 0.3.4

package/src/hooks/useBackground.js

@@ -1,110 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-// The assumed background styles are typed as followed:
-//
-// type Position = 'center' | 'left' | 'right' | 'top' | 'bottom';
-// type PositionX = 'center' | 'left' | 'right';
-// type PositionY = 'center' | 'top' | 'bottom';
-//
-// type BackgroundStyles = {
-//   backgroundImage: string,
-//   backgroundSize: 'contain' | 'cover' | string | number,
-//   backgroundPosition: Position,
-//   backgroundPositionX:
-//     | PositionX
-//     | { position: PositionX, offset: string | number },
-//   backgroundPositionY:
-//     | PositionY
-//     | { position: PositionY, offset: string | number },
-// };
-
-const styles = StyleSheet.create({
-  reset: {
-    // Background repeat is not supported on native yet.
-    backgroundRepeat: 'no-repeat',
-  },
-});
-
-const normalizeValue = (value) =>
-  typeof value === 'number' && value !== 0 ? `${value}px` : value;
-
-const resolveBackgroundSize = (style) => {
-  const { backgroundSize } = style;
-
-  if (typeof backgroundSize !== 'object') {
-    return backgroundSize;
-  }
-
-  const { width = 'auto', height = 'auto' } = backgroundSize;
-
-  return `${normalizeValue(width)} ${normalizeValue(height)}`;
-};
-
-const resolveBackgroundPosition = (style) => {
-  const {
-    backgroundPosition,
-    backgroundPositionX,
-    backgroundPositionY,
-  } = style;
-
-  if (!backgroundPosition && !backgroundPositionX && !backgroundPositionY) {
-    return null;
-  }
-
-  const value = {
-    positionX: backgroundPosition || 'left',
-    offsetX: 0,
-    positionY: backgroundPosition || 'top',
-    offsetY: 0,
-  };
-
-  if (backgroundPositionX) {
-    const { position: positionX = 'left', offset: offsetX = 0 } =
-      typeof backgroundPositionX === 'object'
-        ? backgroundPositionX
-        : { position: backgroundPositionX };
-
-    value.positionX = positionX;
-    value.offsetX = normalizeValue(offsetX);
-  }
-
-  if (backgroundPositionY) {
-    const { position: positionY = 'top', offset: offsetY = 0 } =
-      typeof backgroundPositionY === 'object'
-        ? backgroundPositionY
-        : { position: backgroundPositionY };
-
-    value.positionY = positionY;
-    value.offsetY = normalizeValue(offsetY);
-  }
-
-  const valueX = value.offsetX
-    ? `${value.positionX} ${value.offsetX}`
-    : value.positionX;
-  const valueY = value.offsetY
-    ? `${value.positionY} ${value.offsetY}`
-    : value.positionY;
-
-  return `${valueX} ${valueY}`;
-};
-
-export default function useBackground(style) {
-  const flattenedStyle = StyleSheet.flatten(style);
-
-  return {
-    style: [
-      flattenedStyle,
-      styles.reset,
-      {
-        // Transform background size
-        backgroundSize: resolveBackgroundSize(flattenedStyle),
-        // Workaround, because some browsers do not support two-value syntax:
-        // https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x#browser_compatibility
-        backgroundPositionX: null,
-        backgroundPositionY: null,
-        backgroundPosition: resolveBackgroundPosition(flattenedStyle),
-      },
-    ],
-    element: null,
-  };
-}

package/src/hooks/useControlledState.js

@@ -1,30 +0,0 @@
-import { useState } from 'react';
-
-export default function useControlledState(
-  defaultValue,
-  controlledValue,
-  handleChange = () => {},
-) {
-  const [stateValue, setStateValue] = useState(defaultValue);
-
-  const isControlled =
-    controlledValue !== undefined && controlledValue !== null;
-
-  const value = isControlled ? controlledValue : stateValue;
-
-  const setValue = (next) => {
-    const nextValue = typeof next === 'function' ? next(value) : next;
-
-    if (value === nextValue) {
-      return;
-    }
-
-    if (!isControlled) {
-      setStateValue(next);
-    }
-
-    handleChange(nextValue);
-  };
-
-  return [value, setValue];
-}

package/src/hooks/useForcedContext.js

@@ -1,10 +0,0 @@
-import { useContext } from 'react';
-import invariant from 'tiny-invariant';
-
-export default function useForcedContext(Context) {
-  const context = useContext(Context);
-
-  invariant(context, `Failed to get context "${Context.displayName}".`);
-
-  return context;
-}

package/src/hooks/useIdentifier.js

@@ -1,14 +0,0 @@
-import { useContext, useRef } from 'react';
-import Context from '../Context';
-
-export default function useIdentifier(prefix) {
-  const context = useContext(Context);
-
-  const ref = useRef();
-
-  if (!ref.current) {
-    ref.current = context.generateKey(prefix);
-  }
-
-  return ref.current;
-}

package/src/hooks/useInteractionState.js

@@ -1,54 +0,0 @@
-import { useState, useMemo } from 'react';
-import { useFocusRing } from '@react-native-aria/focus';
-
-export default function useInteractionState({
-  onFocus = () => {},
-  onBlur = () => {},
-  onHoverIn = () => {},
-  onHoverOut = () => {},
-  onPressIn = () => {},
-  onPressOut = () => {},
-  autoFocus,
-}) {
-  const [active, setActive] = useState(false);
-  const [hover, setHovered] = useState(false);
-  const {
-    isFocused: focus,
-    isFocusVisible: focusVisible,
-    focusProps,
-  } = useFocusRing({ autoFocus });
-
-  const interactionProps = useMemo(
-    () => ({
-      onHoverIn(event) {
-        setHovered(true);
-        onHoverIn(event);
-      },
-      onHoverOut(event) {
-        setHovered(false);
-        onHoverOut(event);
-      },
-      onFocus(event) {
-        focusProps.onFocus(event);
-        onFocus(event);
-      },
-      onBlur(event) {
-        focusProps.onBlur(event);
-        onBlur(event);
-      },
-      onPressIn(event) {
-        setActive(true);
-        onPressIn(event);
-      },
-      onPressOut(event) {
-        setActive(false);
-        onPressOut(event);
-      },
-    }),
-    [onFocus, onBlur, onHoverIn, onHoverOut, onPressIn, onPressOut],
-  );
-
-  const interaction = { hover, focus, focusVisible, active };
-
-  return { interaction, interactionProps };
-}

package/src/hooks/useModifier.js

@@ -1,17 +0,0 @@
-import Context from '../Context';
-import { concatRefs } from '../utils';
-import useForcedContext from './useForcedContext';
-
-export default function useModifier(name, props, ref) {
-  const context = useForcedContext(Context);
-
-  const useModifierHook = context.modifiers[name];
-
-  if (!useModifier) {
-    return [props, ref];
-  }
-
-  const { ref: modifierRef, ...modifierProps } = useModifierHook(props);
-
-  return [modifierProps, concatRefs(modifierRef, ref)];
-}

package/src/index.js

@@ -1,134 +0,0 @@
-import { PortalProvider } from '@react-native-aria/overlays';
-import css from './style/css';
-import makeUtilities from './style/makeUtilities';
-import makeTheme from './style/makeTheme';
-import StyleSheet from './style/StyleSheet';
-import Context from './Context';
-import Provider from './Provider';
-// components
-import Alert from './components/alert/Alert';
-import Badge from './components/badge/Badge';
-import Breadcrumb from './components/breadcrumb/Breadcrumb';
-import ButtonGroup from './components/button-group/ButtonGroup';
-import ButtonToolbar from './components/button-group/ButtonToolbar';
-import Button from './components/buttons/Button';
-import Blockquote from './components/type/Blockquote';
-import Body from './components/Body';
-import Card from './components/card/Card';
-import Caret from './components/Caret';
-import CloseButton from './components/close/CloseButton';
-import Collapse from './components/collapse/Collapse';
-import Container from './components/containers/Container';
-import Checkbox from './components/forms/Checkbox';
-import Col from './components/grid/Col';
-import Code from './components/type/Code';
-import Dropdown from './components/dropdown/Dropdown';
-import DisplayHeading from './components/type/DisplayHeading';
-import Feedback from './components/forms/Feedback';
-import FormCheck from './components/forms/FormCheck';
-import FormLabel from './components/forms/FormLabel';
-import FormText from './components/forms/FormText';
-import Heading from './components/Heading';
-import Input from './components/forms/Input';
-import injectPopover from './components/popover/injectPopover';
-import injectTooltip from './components/tooltip/injectTooltip';
-import Image from './components/Image';
-import ImageBackground from './components/ImageBackground';
-import Label from './components/Label';
-import ListGroup from './components/list-group/ListGroup';
-import Link from './components/Link';
-import Modal from './components/modal/Modal';
-import Nav from './components/nav/Nav';
-import Navbar from './components/navbar/Navbar';
-import Offcanvas from './components/offcanvas/Offcanvas';
-import Picker from './components/forms/Picker';
-import Placeholders from './components/placeholders/Placeholders';
-import Popover from './components/popover/Popover';
-import Progress from './components/progress/Progress';
-import Paragraph from './components/type/Paragraph';
-import Pressable from './components/Pressable';
-import Pagination from './components/pagination/Pagination';
-import Radio from './components/forms/Radio';
-import Row from './components/grid/Row';
-import Switch from './components/forms/Switch';
-import Spinner from './components/spinners/Spinner';
-import ScrollView from './components/ScrollView';
-import Tab from './components/nav/Tab';
-import Toast from './components/toasts/Toast';
-import ToastContainer from './components/toasts/ToastContainer';
-import Tooltip from './components/tooltip/Tooltip';
-import Text from './components/Text';
-import TextInput from './components/TextInput';
-import useFixedElement from './hooks/useFixedElement';
-import useMedia from './hooks/useMedia';
-import useStyle from './hooks/useStyle';
-import View from './components/View';
-
-export * from './theme/functions';
-
-export {
-  Alert,
-  Badge,
-  ButtonGroup,
-  ButtonToolbar,
-  Button,
-  Breadcrumb,
-  Blockquote,
-  Body,
-  css,
-  Card,
-  Caret,
-  CloseButton,
-  Collapse,
-  Container,
-  Context,
-  Checkbox,
-  Col,
-  Code,
-  Dropdown,
-  DisplayHeading,
-  Feedback,
-  FormCheck,
-  FormLabel,
-  FormText,
-  Heading,
-  Input,
-  Image,
-  ImageBackground,
-  injectPopover,
-  injectTooltip,
-  Label,
-  ListGroup,
-  Link,
-  Modal,
-  makeUtilities,
-  makeTheme,
-  Nav,
-  Navbar,
-  Offcanvas,
-  PortalProvider,
-  Provider,
-  Picker,
-  Pagination,
-  Placeholders,
-  Popover,
-  Progress,
-  Paragraph,
-  Pressable,
-  Radio,
-  Row,
-  StyleSheet,
-  Switch,
-  Spinner,
-  ScrollView,
-  Tab,
-  Toast,
-  ToastContainer,
-  Tooltip,
-  Text,
-  TextInput,
-  useFixedElement,
-  useMedia,
-  useStyle,
-  View,
-};

package/src/style/TextStyleContext.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const TextStyleContext = React.createContext();
-
-TextStyleContext.displayName = 'TextStyleContext';
-
-export default TextStyleContext;

package/src/style/TextStyleProvider.js

@@ -1,30 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import TextStyleContext from './TextStyleContext';
-
-const propTypes = {
-  children: PropTypes.node,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
-
-function TextStyleProvider(props) {
-  const { children, style } = props;
-
-  const parentContext = useContext(TextStyleContext);
-
-  return (
-    <TextStyleContext.Provider
-      value={{
-        style: parentContext ? [parentContext.style, style] : style,
-        hasTextAncestor: parentContext && parentContext.hasTextAncestor,
-      }}
-    >
-      {children}
-    </TextStyleContext.Provider>
-  );
-}
-
-TextStyleProvider.propTypes = propTypes;
-
-export default TextStyleProvider;

package/src/style/css.js

@@ -1,17 +0,0 @@
-import parse from './parse';
-import transform from './transform';
-import createStyle from './createStyle';
-
-export default function css(...args) {
-  const ast = parse(...args);
-
-  const result = (theme, key) => {
-    const transformed = transform(ast.children, theme, { key });
-
-    return createStyle(transformed);
-  };
-
-  result.ast = ast;
-
-  return result;
-}

package/src/style/makeTheme.js

@@ -1,19 +0,0 @@
-import transform from './transform';
-import variables from '../theme/variables';
-
-const extractVariables = (source, baseVariables = {}, options) => {
-  if (typeof source !== 'function') {
-    // TODO: Resolve t => ... functions on source object.
-    return { ...source, ...baseVariables };
-  }
-
-  const result = transform(source.ast.children, baseVariables, options);
-
-  return { ...result[0].variables, ...baseVariables };
-};
-
-export default function makeTheme(customVariables) {
-  const customTheme = extractVariables(customVariables);
-
-  return extractVariables(variables, customTheme, { preferTheme: true });
-}

package/src/style/makeUtilities.js

@@ -1,56 +0,0 @@
-import css from './css';
-import { GRID_BREAKPOINTS } from '../theme/proxies';
-import utilities from '../theme/utilities';
-import { each } from '../utils';
-
-export function makeUtility(options) {
-  return each(options.values, (key, value) => {
-    const name = options.class || options.property;
-    const suffix = key === 'null' ? '' : `-${key}`;
-
-    const styles = {
-      [`${name}${suffix}`]: css`
-        ${options.property}: ${value};
-      `,
-    };
-
-    if (!options.responsive) {
-      return styles;
-    }
-
-    return {
-      ...styles,
-      ...each(GRID_BREAKPOINTS, (breakpoint) => {
-        if (breakpoint === 'xs') {
-          return null;
-        }
-
-        return {
-          [`${name}-${breakpoint}${suffix}`]: css`
-            @include media-breakpoint-up(${breakpoint}) {
-              ${options.property}: ${value};
-            }
-          `,
-        };
-      }),
-    };
-  });
-}
-
-export default function makeUtilities(resolve) {
-  const customUtilities =
-    typeof resolve === 'function' ? resolve(utilities) : resolve;
-
-  const definitions = Object.values({
-    ...utilities,
-    ...customUtilities,
-  }).reduce((result, utility) => {
-    if (!utility) {
-      return result;
-    }
-
-    return Object.assign(result, makeUtility(utility));
-  }, {});
-
-  return definitions;
-}

package/src/style/mixins/mediaBreakpointBetween.js

@@ -1,10 +0,0 @@
-const mediaBreakpointUp = {
-  include() {
-    return true;
-  },
-  apply(scope, { media }) {
-    return media.up(scope.args[0]) && media.down(scope.args[1]);
-  },
-};
-
-export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointDown.js

@@ -1,10 +0,0 @@
-const mediaBreakpointUp = {
-  include() {
-    return true;
-  },
-  apply(scope, { media }) {
-    return media.down(scope.args[0]);
-  },
-};
-
-export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointOnly.js

@@ -1,10 +0,0 @@
-const mediaBreakpointUp = {
-  include() {
-    return true;
-  },
-  apply(scope, { media }) {
-    return media.up(scope.args[0]) && media.down(scope.args[0]);
-  },
-};
-
-export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointUp.js

@@ -1,10 +0,0 @@
-const mediaBreakpointUp = {
-  include() {
-    return true;
-  },
-  apply(scope, { media }) {
-    return media.up(scope.args[0]);
-  },
-};
-
-export default mediaBreakpointUp;

package/src/style/parse/isIdent.js

@@ -1,3 +0,0 @@
-export default function isIdent(char) {
-  return /[a-z0-9_-]/i.test(char);
-}

package/src/style/parse/isWhitespace.js

@@ -1,3 +0,0 @@
-export default function isWhitespace(char) {
-  return /\s/.test(char);
-}

package/src/style/types/RgbaValue.js

@@ -1,111 +0,0 @@
-// Copied from https://github.com/styled-components/polished/blob/main/src/color/parseToRgb.js
-const hexRE = /^#[a-fA-F0-9]{6}$/;
-const hexRgbaRE = /^#[a-fA-F0-9]{8}$/;
-const shortHexRE = /^#[a-fA-F0-9]{3}$/;
-const shortRgbaHexRE = /^#[a-fA-F0-9]{4}$/;
-const rgbRE = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
-const rgbaRE = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
-const hslRE = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
-const hslaRE = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
-
-// Copied from https://reactnative.dev/docs/colors
-// prettier-ignore
-const colorNames = { aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000', blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', darkblue: '#00008b', darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9', darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00', darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f', darkslateblue: '#483d8b', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1', darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969', dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22', fuchsia: '#ff00ff', gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', gray: '#808080', green: '#008000', greenyellow: '#adff2f', grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082', ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00', lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080', lightcyan: '#e0ffff', lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3', lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa', lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0', lime: '#00ff00', limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', maroon: '#800000', mediumaquamarine: '#66cdaa', mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371', mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc', mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1', moccasin: '#ffe4b5', navajowhite: '#ffdead', navy: '#000080', oldlace: '#fdf5e6', olive: '#808000', olivedrab: '#6b8e23', orange: '#ffa500', orangered: '#ff4500', orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee', palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb', plum: '#dda0dd', powderblue: '#b0e0e6', purple: '#800080', rebeccapurple: '#663399', red: '#ff0000', rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513', salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee', sienna: '#a0522d', silver: '#c0c0c0', skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', snow: '#fffafa', springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', teal: '#008080', thistle: '#d8bfd8', tomato: '#ff6347', turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3', white: '#ffffff', whitesmoke: '#f5f5f5', yellow: '#ffff00', yellowgreen: '#9acd32' };
-
-const hslToRgb = (h, s, l) => {
-  const a = s * Math.min(l, 1 - l);
-  const f = (n, k = (n + h / 30) % 12) =>
-    l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-  return [f(0), f(8), f(4)];
-};
-
-export default class RgbaValue {
-  red;
-
-  green;
-
-  blue;
-
-  alpha;
-
-  constructor(red, green, blue, alpha = 1) {
-    this.red = red;
-    this.green = green;
-    this.blue = blue;
-    this.alpha = alpha;
-  }
-
-  static parse(value) {
-    if (value instanceof RgbaValue) {
-      return value;
-    }
-
-    const color = colorNames[value] || value;
-
-    // Handle hex value
-    const hexMatch =
-      color.match(hexRE) ||
-      color.match(hexRgbaRE) ||
-      color.match(shortHexRE) ||
-      color.match(shortRgbaHexRE);
-    if (hexMatch) {
-      const params = (hexMatch[0].length <= 4
-        ? hexMatch[0].match(/\w/g).map((x) => `${x}${x}`)
-        : hexMatch[0].match(/\w\w/g)
-      ).map((hex, key) => {
-        const x = parseInt(hex, 16);
-        const alpha = key === 3;
-        return alpha ? (x / 255).toFixed(2) : x;
-      });
-
-      return new RgbaValue(...params);
-    }
-
-    // Handle rgb(a) value
-    const rgbMatch = color.match(rgbRE) || color.match(rgbaRE);
-    if (rgbMatch) {
-      const params = rgbMatch.slice(1).map((x, key) => {
-        const alpha = key === 3;
-        return alpha ? parseFloat(x) : parseInt(x, 10);
-      });
-
-      return new RgbaValue(...params);
-    }
-
-    // Handle hsl(a) value
-    const hslMatch = color.match(hslRE) || color.match(hslaRE);
-    if (hslMatch) {
-      const h = parseInt(hslMatch[1], 10);
-      const s = parseInt(hslMatch[2], 10) / 100;
-      const l = parseInt(hslMatch[3], 10) / 100;
-      const alpha = hslMatch[4] && parseFloat(hslMatch[4]);
-
-      return new RgbaValue(...[...hslToRgb(h, s, l), alpha]);
-    }
-
-    throw new Error(`Unknown color "${value}".`);
-  }
-
-  toRgb() {
-    return [this.red, this.green, this.blue];
-  }
-
-  toRgba() {
-    return [...this.toRgb(), this.alpha];
-  }
-
-  toHex() {
-    const [...values] = this.toRgb();
-
-    if (this.alpha < 1) {
-      values.push(this.alpha);
-    }
-
-    return `#${values
-      .map((x) => {
-        const hex = x.toString(16);
-        return hex.length === 1 ? `0${hex}` : hex;
-      })
-      .join('')}`;
-  }
-}