@react-spectrum/s2/dist/Divider.css.map

Spectrum 2 UI components in React

{"mappings":"AA4CuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/Divider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n  /**\n   * How thick the Divider should be.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * How thick the Divider should be.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /** The static color style to apply. Useful when the Divider appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n  ...staticColor(),\n  alignSelf: 'stretch',\n  backgroundColor: {\n    default: 'gray-200',\n    size: {\n      L: 'gray-800'\n    },\n    isStaticColor: {\n      default: 'transparent-overlay-200',\n      size: {\n        L: 'transparent-overlay-800'\n      }\n    },\n    forcedColors: 'ButtonBorder'\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  margin: 0,\n  flexGrow: 0,\n  flexShrink: 0,\n  height: {\n    orientation: {\n      horizontal: {\n        // These should be px not rems, because we're emulating a border.\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  },\n  width: {\n    orientation: {\n      vertical: {\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACSeparator\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + divider({\n        size: props.size || 'M',\n        orientation: props.orientation || 'horizontal',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor\n      }, props.styles)} />\n  );\n});\n"],"names":[],"version":3,"file":"Divider.css.map"}