orcs-design-system/es/components/Range/index.js

TeamForm's Design System, aka: ORCS

import React from "react";
import PropTypes from "prop-types";
import styled, { css, ThemeProvider } from "styled-components";
import { space, layout } from "styled-system";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const vars = {
  trackHeight: "4px",
  thumbDiameter: "20px"
};
const thumb = props => `
    margin-top: -8px;
    box-sizing: border-box;
    border: none;
    width: ${vars.thumbDiameter};
    height: ${vars.thumbDiameter};
    border-radius: ${vars.thumbDiameter};
    background: ${themeGet("colors.primary")(props)};
`;
const track = props => `
    box-sizing: border-box;
    border: none;
    width: 100%;
    height: ${vars.trackHeight};
	  background: ${themeGet("colors.greyLight")(props)};
    border-radius: 4px;
`;
const Wrapper = styled.div.withConfig({
  displayName: "Range__Wrapper",
  componentId: "sc-zb0zps-0"
})(["", " ", " position:relative;width:100%;display:flex;flex-wrap:wrap;align-items:center;&:before{content:\"", "\";font-size:10px;font-weight:bold;}&:after{content:\"", "\";font-size:10px;font-weight:bold;}", ""], space, layout, props => props.minValue, props => props.maxValue, props => props.inverted ? css(["&:before,&:after{color:", ";}input{&:focus{background:rgba(255,255,255,0.1);}&::-webkit-slider-runnable-track{background:", ";}&::-moz-range-track{background:", ";}&::-ms-track{background:", ";}}output{color:", ";}"], themeGet("colors.white")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.white")(props)) : css([""]));
const Input = styled.input.attrs({
  type: "range"
}).withConfig({
  displayName: "Range__Input",
  componentId: "sc-zb0zps-1"
})(["flex:1;margin:0;padding:0;width:100%;min-height:", ";background:transparent;cursor:ew-resize;padding:10px 10px;border-radius:25px;transition:", ";&:focus{outline:none;background:rgba(0,0,0,0.05);}&,&::-webkit-slider-thumb{-moz-appearance:none;-webkit-appearance:none;appearance:none;}&::-webkit-slider-runnable-track{", ";}&::-moz-range-track{", ";}&::-ms-track{", ";}&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}&::-ms-thumb{", ";}&::-ms-tooltip{display:none;}"], vars.thumbDiameter, props => themeGet("transition.transitionDefault")(props), track, track, track, thumb, thumb, thumb);
const Output = styled.output.withConfig({
  displayName: "Range__Output",
  componentId: "sc-zb0zps-2"
})(["display:block;user-select:none;font-weight:bold;text-align:center;font-size:14px;pointer-events:none;text-align:center;flex:1 1 100%;order:4;color:", ";"], props => themeGet("colors.greyDarker")(props));
/**
 * Range component is pretty self explanatory, used to select a number out of a range, make sure to set a min, max and default value.
 */
export default function Range(_ref) {
  let {
    min,
    max,
    inverted,
    defaultValue,
    theme,
    ariaLabel,
    ...props
  } = _ref;
  const component = /*#__PURE__*/_jsxs(Wrapper, {
    minValue: min,
    maxValue: max,
    inverted: inverted,
    children: [/*#__PURE__*/_jsx(Input, {
      min: min,
      max: max,
      "aria-label": ariaLabel,
      ...props
    }), /*#__PURE__*/_jsx(Output, {
      "aria-hidden": "true",
      children: defaultValue
    })]
  });
  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
    theme: theme,
    children: component
  }) : component;
}
Range.propTypes = {
  /** Sets the minimum value for the range */
  min: PropTypes.number,
  /** Sets the maximum value for the range */
  max: PropTypes.number,
  /** Sets the default value for the range */
  defaultValue: PropTypes.number,
  /** Sets the aria-label for accessibility */
  ariaLabel: PropTypes.string.isRequired,
  /** Changes appearance to suit dark backgrounds */
  inverted: PropTypes.bool,
  /** Specifies the system design theme. */
  theme: PropTypes.object
};
Range.__docgenInfo = {
  "description": "Range component is pretty self explanatory, used to select a number out of a range, make sure to set a min, max and default value.",
  "methods": [],
  "displayName": "Range",
  "props": {
    "min": {
      "description": "Sets the minimum value for the range",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "max": {
      "description": "Sets the maximum value for the range",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "defaultValue": {
      "description": "Sets the default value for the range",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "ariaLabel": {
      "description": "Sets the aria-label for accessibility",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "inverted": {
      "description": "Changes appearance to suit dark backgrounds",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "theme": {
      "description": "Specifies the system design theme.",
      "type": {
        "name": "object"
      },
      "required": false
    }
  }
};