@sanity/ui 3.0.0-static.8 → 3.0.0

package/src/core/primitives/switch/styles.ts

@@ -0,0 +1,173 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+
+import {rem, ThemeProps} from '../../styles'
+import {focusRingStyle} from '../../styles/internal'
+
+/* Root */
+export function switchBaseStyles(): ReturnType<typeof css> {
+  return css`
+    position: relative;
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `
+}
+
+/* Input */
+export function switchInputStyles(): ReturnType<typeof css> {
+  // Visually hide the input element while keeping it interactive
+  return css`
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    padding: 0;
+    margin: 0;
+
+    /* Place the input element above the representation element */
+    z-index: 1;
+  `
+}
+
+/* Representation */
+export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
+  const {color, input} = getTheme_v2(props.theme)
+
+  return css`
+    --switch-bg-color: ${color.input.default.enabled.border};
+    --switch-fg-color: ${color.input.default.enabled.bg};
+    --switch-box-shadow: none;
+
+    &:not([hidden]) {
+      display: block;
+    }
+    position: relative;
+    width: ${rem(input.switch.width)};
+    height: ${rem(input.switch.height)};
+    border-radius: ${rem(input.switch.height / 2)};
+
+    /* Make sure it’s not possible to interact with the wrapper element */
+    pointer-events: none;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      box-shadow: var(--switch-box-shadow);
+      border-radius: inherit;
+    }
+
+    /* Focus styles */
+    input:focus + && {
+      --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
+    }
+
+    input:focus:not(:focus-visible) + && {
+      --switch-box-shadow: none;
+    }
+
+    input:checked + && {
+      --switch-bg-color: ${color.input.default.enabled.fg};
+      --switch-fg-color: ${color.input.default.enabled.bg};
+    }
+
+    @media (hover: hover) {
+      input:not(:disabled):hover + && {
+        --switch-bg-color: ${color.input.default.hovered.border};
+        --switch-fg-color: ${color.input.default.hovered.bg};
+      }
+
+      input:not(:disabled):checked:hover + && {
+        --switch-bg-color: ${color.input.default.enabled.fg};
+        --switch-fg-color: ${color.input.default.enabled.bg};
+      }
+    }
+
+    input:not([data-read-only]):disabled + && {
+      --switch-bg-color: ${color.input.default.disabled.border};
+      --switch-fg-color: ${color.input.default.disabled.bg};
+    }
+
+    input[data-read-only]:disabled + && {
+      --switch-bg-color: ${color.input.default.readOnly.border};
+      --switch-fg-color: ${color.input.default.readOnly.bg};
+    }
+
+    input:checked[data-read-only]:disabled + && {
+      --switch-bg-color: ${color.input.default.readOnly.fg};
+      --switch-fg-color: ${color.input.default.readOnly.bg};
+    }
+  `
+}
+
+/* Track */
+export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
+  const {input} = getTheme_v2(props.theme)
+
+  return css`
+    &:not([hidden]) {
+      display: block;
+    }
+    background-color: var(--switch-bg-color);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: ${rem(input.switch.width)};
+    height: ${rem(input.switch.height)};
+    border-radius: ${rem(input.switch.height / 2)};
+  `
+}
+
+/* Thumb */
+export function switchThumbStyles(
+  props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
+): ReturnType<typeof css> {
+  const {$indeterminate} = props
+  const {input} = getTheme_v2(props.theme)
+  const trackWidth = input.switch.width
+  const trackHeight = input.switch.height
+  const trackPadding = input.switch.padding
+  const size = trackHeight - input.switch.padding * 2
+  const checkedOffset = trackWidth - trackPadding * 2 - size
+  const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
+  const checked = $indeterminate !== true && props.$checked === true
+
+  return css`
+    &:not([hidden]) {
+      display: block;
+    }
+    position: absolute;
+    left: ${rem(trackPadding)};
+    top: ${rem(trackPadding)};
+    height: ${rem(size)};
+    width: ${rem(size)};
+    border-radius: ${rem(size / 2)};
+    transition-property: transform;
+    transition-duration: ${input.switch.transitionDurationMs}ms;
+    transition-timing-function: ${input.switch.transitionTimingFunction};
+    background: var(--switch-fg-color);
+    transform: translate3d(0, 0, 0);
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
+
+    ${checked &&
+    css`
+      transform: translate3d(${checkedOffset}px, 0, 0);
+    `}
+
+    ${$indeterminate &&
+    css`
+      transform: translate3d(${indeterminateOffset}px, 0, 0);
+    `}
+  `
+}

package/src/core/primitives/switch/switch.tsx

@@ -0,0 +1,68 @@
+import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+import {styled} from 'styled-components'
+
+import {
+  switchBaseStyles,
+  switchInputStyles,
+  switchRepresentationStyles,
+  switchThumbStyles,
+  switchTrackStyles,
+} from './styles'
+
+/**
+ * @public
+ */
+export interface SwitchProps {
+  indeterminate?: boolean
+}
+
+const StyledSwitch = styled.span(switchBaseStyles)
+const Input = styled.input(switchInputStyles)
+const Representation = styled.span(switchRepresentationStyles)
+const Track = styled.span(switchTrackStyles)
+const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles)
+
+/**
+ * The `Switch` component allows the user to toggle a setting on and off.
+ *
+ * Extends all properties of an `<input type="checkbox" />` element, except type.
+ *
+ * @public
+ */
+export const Switch = forwardRef(function Switch(
+  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps,
+  forwardedRef: React.ForwardedRef<HTMLInputElement>,
+) {
+  const {checked, className, disabled, indeterminate, readOnly, style, ...restProps} = props
+  const ref = useRef<HTMLInputElement | null>(null)
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useEffect(() => {
+    if (ref.current) {
+      // Set the indeterminate state
+      ref.current.indeterminate = indeterminate || false
+    }
+  }, [indeterminate])
+
+  return (
+    <StyledSwitch className={className} data-ui="Switch" style={style}>
+      <Input
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        {...restProps}
+        checked={indeterminate !== true && checked}
+        disabled={disabled || readOnly}
+        type="checkbox"
+        ref={ref}
+      />
+      <Representation aria-hidden data-name="representation">
+        <Track />
+        <Thumb $checked={checked} $indeterminate={indeterminate} />
+      </Representation>
+    </StyledSwitch>
+  )
+})
+Switch.displayName = 'ForwardRef(Switch)'

package/src/core/primitives/text/__workshop__/colored.tsx

@@ -0,0 +1,30 @@
+import {Flex, Text, ThemeProps} from '@sanity/ui'
+import {getTheme_v2, ThemeColorAvatarColorKey, ThemeColorSpotKey} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+import {css, styled} from 'styled-components'
+
+import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
+
+const ColoredText = styled(Text)<{$color?: ThemeColorSpotKey}>((
+  props: {
+    $color?: ThemeColorAvatarColorKey
+  } & ThemeProps,
+) => {
+  const {color} = getTheme_v2(props.theme)
+
+  return css`
+    color: ${color.avatar[props.$color || 'gray'].bg};
+  `
+})
+
+export default function ColoredTextStory() {
+  const color = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <ColoredText align="center" $color={color} size={4} weight="bold">
+        {color}
+      </ColoredText>
+    </Flex>
+  )
+}

package/src/core/primitives/text/__workshop__/example.tsx

@@ -0,0 +1,39 @@
+import {Container, Flex, Text} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+
+import {
+  WORKSHOP_TEXT_ALIGN_OPTIONS,
+  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
+  WORKSHOP_TEXT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_WEIGHT_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function TextStory() {
+  const accent = useBoolean('Accent', false, 'Props')
+  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, '', 'Props') || undefined
+  const muted = useBoolean('Muted', false, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
+  const text = useText('Text', 'Hello, world', 'Props')
+
+  const textOverflow =
+    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, undefined, 'Props') || undefined
+
+  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
+        <Text
+          accent={accent}
+          align={align}
+          muted={muted}
+          size={size}
+          textOverflow={textOverflow}
+          weight={weight}
+        >
+          {text}
+        </Text>
+      </Container>
+    </Flex>
+  )
+}

package/src/core/primitives/text/styles.ts

@@ -0,0 +1,74 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+
+import {ThemeProps} from '../../styles'
+
+export function textBaseStyle(
+  props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
+): ReturnType<typeof css> {
+  const {$accent, $muted} = props
+  const {font} = getTheme_v2(props.theme)
+
+  return css`
+    color: var(--card-fg-color);
+
+    ${$accent &&
+    css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted &&
+    css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${font.code.family};
+      border-radius: 1px;
+      background-color: var(--card-code-bg-color);
+      color: var(--card-code-fg-color);
+    }
+
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+      color: var(--card-link-color);
+      outline: none;
+
+      @media (hover: hover) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      &:focus {
+        box-shadow:
+          0 0 0 1px var(--card-bg-color),
+          0 0 0 3px var(--card-focus-ring-color);
+      }
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+
+    & strong {
+      font-weight: ${font.text.weights.bold};
+    }
+
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+      color: var(--card-icon-color);
+
+      & path {
+        vector-effect: non-scaling-stroke !important;
+      }
+    }
+  `
+}

package/src/core/primitives/text/text.tsx

@@ -0,0 +1,81 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {useArrayProp} from '../../hooks'
+import {
+  ResponsiveFontStyleProps,
+  responsiveTextAlignStyle,
+  responsiveTextFont,
+} from '../../styles/internal'
+import {TextAlign} from '../../types'
+import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
+import {textBaseStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface TextProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  /** When `true` the text color will be muted. */
+  muted?: boolean
+  size?: number | number[]
+  /**
+   * Controls how overflowing text is treated.
+   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
+   * @beta
+   */
+  textOverflow?: 'ellipsis'
+  weight?: ThemeFontWeightKey
+}
+
+const StyledText = styled.div<ResponsiveFontStyleProps>(
+  responsiveTextFont,
+  responsiveTextAlignStyle,
+  textBaseStyle,
+)
+
+/**
+ * The `Text` component is an agile, themed typographic element.
+ *
+ * @public
+ */
+export const Text = forwardRef(function Text(
+  props: TextProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    accent = false,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props
+
+  let children = childrenProp
+
+  if (textOverflow === 'ellipsis') {
+    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
+  }
+
+  return (
+    <StyledText
+      data-ui="Text"
+      {...restProps}
+      $accent={accent}
+      $align={useArrayProp(align)}
+      $muted={muted}
+      ref={ref}
+      $size={useArrayProp(size)}
+      $weight={weight}
+    >
+      <span>{children}</span>
+    </StyledText>
+  )
+})
+Text.displayName = 'ForwardRef(Text)'

package/src/core/primitives/textArea/__workshop__/plain.tsx

@@ -0,0 +1,50 @@
+import {Card, Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+
+import {
+  WORKSHOP_CARD_TONE_OPTIONS,
+  WORKSHOP_FONT_WEIGHT_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
+
+  const border = useBoolean('Border', true, 'Props')
+  const customValidity = useText('Custom validity', '', 'Props') || undefined
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const placeholder = useText('Placeholder', '', 'Props') || undefined
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
+  const readOnly = useBoolean('Read only', false, 'Props')
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width={0}>
+        <Card padding={3} tone={tone}>
+          <Stack space={3}>
+            <Text as="label" htmlFor="text-area-example" size={1} weight="medium">
+              TextArea
+            </Text>
+            <TextArea
+              border={border}
+              customValidity={customValidity}
+              disabled={disabled}
+              fontSize={fontSize}
+              id="text-area-example"
+              padding={padding}
+              placeholder={placeholder}
+              radius={radius}
+              readOnly={readOnly}
+              weight={weight}
+            />
+          </Stack>
+        </Card>
+      </Container>
+    </Flex>
+  )
+}

package/src/core/primitives/textArea/textArea.tsx

@@ -0,0 +1,119 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {forwardRef, useImperativeHandle, useRef} from 'react'
+import {styled} from 'styled-components'
+
+import {useArrayProp, useCustomValidity} from '../../hooks'
+import {
+  responsiveInputPaddingStyle,
+  responsiveRadiusStyle,
+  ResponsiveRadiusStyleProps,
+  textInputBaseStyle,
+  textInputFontSizeStyle,
+  TextInputInputStyleProps,
+  textInputRepresentationStyle,
+  TextInputRepresentationStyleProps,
+  TextInputResponsivePaddingStyleProps,
+  textInputRootStyle,
+} from '../../styles/internal'
+import {useRootTheme} from '../../theme'
+import {ResponsiveRadiusProps} from '../types'
+
+/**
+ * @public
+ */
+export interface TextAreaProps extends ResponsiveRadiusProps {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
+  border?: boolean
+  customValidity?: string
+  fontSize?: number | number[]
+  padding?: number | number[]
+  weight?: ThemeFontWeightKey
+}
+
+const StyledTextArea = styled.span(textInputRootStyle)
+
+const InputRoot = styled.span`
+  flex: 1;
+  min-width: 0;
+  display: block;
+  position: relative;
+`
+
+const Input = styled.textarea<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
+  responsiveInputPaddingStyle,
+  textInputBaseStyle,
+  textInputFontSizeStyle,
+)
+
+const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
+  responsiveRadiusStyle,
+  textInputRepresentationStyle,
+)
+
+/**
+ * A multiline text input.
+ *
+
+ * @public
+ */
+export const TextArea = forwardRef(function TextArea(
+  props: TextAreaProps & Omit<React.HTMLProps<HTMLTextAreaElement>, 'as'>,
+  forwardedRef: React.ForwardedRef<HTMLTextAreaElement>,
+) {
+  const {
+    border = true,
+    customValidity,
+    disabled = false,
+    fontSize = 2,
+    padding = 3,
+    radius = 2,
+    weight,
+    __unstable_disableFocusRing,
+    ...restProps
+  } = props
+
+  const ref = useRef<HTMLTextAreaElement | null>(null)
+
+  const rootTheme = useRootTheme()
+
+  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useCustomValidity(ref, customValidity)
+
+  return (
+    <StyledTextArea data-ui="TextArea">
+      <InputRoot>
+        <Input
+          data-as="textarea"
+          data-scheme={rootTheme.scheme}
+          data-tone={rootTheme.tone}
+          {...restProps}
+          $fontSize={useArrayProp(fontSize)}
+          $padding={useArrayProp(padding)}
+          $scheme={rootTheme.scheme}
+          $space={useArrayProp(0)}
+          $tone={rootTheme.tone}
+          $weight={weight}
+          disabled={disabled}
+          ref={ref}
+        />
+        <Presentation
+          $radius={useArrayProp(radius)}
+          $unstableDisableFocusRing={__unstable_disableFocusRing}
+          $scheme={rootTheme.scheme}
+          $tone={rootTheme.tone}
+          data-border={border ? '' : undefined}
+          data-scheme={rootTheme.scheme}
+          data-tone={rootTheme.tone}
+        />
+      </InputRoot>
+    </StyledTextArea>
+  )
+})
+TextArea.displayName = 'ForwardRef(TextArea)'