@sanity/ui 0.37.3 → 0.37.4

package/src/primitives/grid/grid.tsx

@@ -0,0 +1,43 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
+import {Box, BoxProps} from '../box'
+import {ResponsiveGridProps} from '../types'
+
+/**
+ * @public
+ */
+export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
+
+const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+
+/**
+ * @public
+ */
+export const Grid = forwardRef(function Grid(
+  props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
+    props
+
+  return (
+    <Root
+      data-as={typeof as === 'string' ? as : undefined}
+      data-ui="Grid"
+      {...restProps}
+      $autoRows={autoRows}
+      $autoCols={autoCols}
+      $autoFlow={autoFlow}
+      $columns={columns}
+      $gap={gap}
+      $gapX={gapX}
+      $gapY={gapY}
+      $rows={rows}
+      forwardedAs={as}
+      ref={ref}
+    >
+      {children}
+    </Root>
+  )
+})

package/src/primitives/grid/index.ts

@@ -0,0 +1 @@
+export * from './grid'

package/src/primitives/heading/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/primitives/heading/__workshop__/index.ts

@@ -0,0 +1,15 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/heading', 'Heading', [
+  {
+    name: 'plain',
+    title: 'Plain',
+    component: lazy(() => import('./plain')),
+  },
+  {
+    name: 'optical-alignment',
+    title: 'Optical alignment',
+    component: lazy(() => import('./opticalAlignment')),
+  },
+])

package/src/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -0,0 +1,55 @@
+import {AddCircleIcon} from '@sanity/icons'
+import {Box, Card, Flex, Heading, Stack} from '@sanity/ui'
+import React from 'react'
+
+export default function OpticalAlignment() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack space={1}>
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading size={5}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading size={4}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading size={3}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading size={2}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading size={1}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading size={0}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={2} scheme="dark">
+            <Heading>
+              <AddCircleIcon />
+            </Heading>
+          </Card>
+        </Flex>
+      </Stack>
+    </Box>
+  )
+}

package/src/primitives/heading/__workshop__/plain.tsx

@@ -0,0 +1,32 @@
+import {Flex, Heading} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import React from 'react'
+import {
+  WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
+  WORKSHOP_FONT_WEIGHT_OPTIONS,
+  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const accent = useBoolean('Accent', false, 'Props')
+  const muted = useBoolean('Muted', false, 'Props')
+  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2, 'Props')
+  const textChild = useText('Text', 'Hello, world', 'Props')
+  const textOverflow =
+    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Heading
+        accent={accent}
+        muted={muted}
+        size={size}
+        textOverflow={textOverflow}
+        weight={weight}
+      >
+        {textChild}
+      </Heading>
+    </Flex>
+  )
+}

package/src/primitives/heading/heading.tsx

@@ -0,0 +1,81 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+import {
+  ResponsiveFontStyleProps,
+  responsiveHeadingFont,
+  responsiveTextAlignStyle,
+  ResponsiveTextAlignStyleProps,
+} from '../../styles/internal'
+import {ThemeFontWeightKey} from '../../theme'
+import {TextAlign} from '../../types'
+import {headingBaseStyle} from './styles'
+import {HeadingStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface HeadingProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  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 Root = styled.div<
+  HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
+>(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
+
+const SpanWithTextOverflow = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`
+
+/**
+ * @public
+ */
+export const Heading = forwardRef(function Heading(
+  props: HeadingProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLElement>
+) {
+  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 (
+    <Root
+      data-ui="Heading"
+      {...restProps}
+      $accent={accent}
+      $align={align}
+      $muted={muted}
+      $size={size}
+      $weight={weight}
+      ref={ref}
+    >
+      <span>{children}</span>
+    </Root>
+  )
+})

package/src/primitives/heading/index.ts

@@ -0,0 +1 @@
+export * from './heading'

package/src/primitives/heading/styles.ts

@@ -0,0 +1,51 @@
+import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {ThemeProps} from '../../styles'
+import {HeadingStyleProps} from './types'
+
+export function headingBaseStyle(
+  props: HeadingStyleProps & ThemeProps
+): FlattenSimpleInterpolation {
+  const {$accent, $muted, theme} = props
+
+  return css`
+    ${$accent &&
+    css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted &&
+    css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${theme.sanity.fonts.code.family};
+      border-radius: 1px;
+    }
+
+    & 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;
+      }
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `
+}

package/src/primitives/heading/types.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ */
+export interface HeadingStyleProps {
+  $accent: boolean
+  $muted: boolean
+}

package/src/primitives/helpers.ts

@@ -0,0 +1,11 @@
+import {isElement, isFragment} from 'react-is'
+
+export function childrenToElementArray(
+  children: React.ReactNode
+): Array<React.ReactElement | string> {
+  const childrenArray = Array.isArray(children) ? children : [children]
+
+  return childrenArray.filter(
+    (node) => isElement(node) || isFragment(node) || typeof node === 'string'
+  ) as Array<React.ReactElement | string>
+}

package/src/primitives/index.ts

@@ -0,0 +1,27 @@
+export * from './avatar'
+export * from './badge'
+export * from './box'
+export * from './button'
+export * from './card'
+export * from './checkbox'
+export * from './code'
+export * from './container'
+export * from './flex'
+export * from './grid'
+export * from './heading'
+export * from './inline'
+export * from './kbd'
+export * from './label'
+export * from './popover'
+export * from './radio'
+export * from './select'
+export * from './spinner'
+export * from './stack'
+export * from './switch'
+export * from './text'
+export * from './textArea'
+export * from './textInput'
+export * from './tooltip'
+
+// Types
+export * from './types'

package/src/primitives/inline/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/primitives/inline/__workshop__/index.ts

@@ -0,0 +1,6 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/inline', 'Inline', [
+  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
+])

package/src/primitives/inline/__workshop__/plain.tsx

@@ -0,0 +1,27 @@
+import {Card, Flex, Inline, Text} from '@sanity/ui'
+import {useAction, useSelect} from '@sanity/ui-workshop'
+import React from 'react'
+import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Inline
+        onClick={useAction('onClick')}
+        space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
+      >
+        <Card padding={1} shadow={1}>
+          <Text>Inline item</Text>
+        </Card>
+
+        <Card padding={2} shadow={1}>
+          <Text>Inline item</Text>
+        </Card>
+
+        <Card padding={3} shadow={1}>
+          <Text>Inline item</Text>
+        </Card>
+      </Inline>
+    </Flex>
+  )
+}

package/src/primitives/inline/index.ts

@@ -0,0 +1 @@
+export * from './inline'

package/src/primitives/inline/inline.tsx

@@ -0,0 +1,34 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+import {Box, BoxProps} from '../box'
+import {childrenToElementArray} from '../helpers'
+import {inlineBaseStyle, inlineSpaceStyle} from './styles'
+import {ResponsiveInlineSpaceStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface InlineProps extends Omit<BoxProps, 'display'> {
+  space?: number | number[]
+}
+
+const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
+
+/**
+ * @public
+ */
+export const Inline = forwardRef(function Inline(
+  props: InlineProps & React.HTMLProps<HTMLDivElement>,
+  ref
+) {
+  const {as, children: childrenProp, space, ...restProps} = props
+  const children = childrenToElementArray(childrenProp).filter(Boolean)
+
+  return (
+    <Root data-ui="Inline" {...restProps} $space={space} forwardedAs={as} ref={ref}>
+      {children.map((child, idx) => (
+        <div key={idx}>{child}</div>
+      ))}
+    </Root>
+  )
+})

package/src/primitives/inline/styles.ts

@@ -0,0 +1,31 @@
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {ResponsiveInlineSpaceStyleProps} from './types'
+
+export function inlineBaseStyle(): CSSObject {
+  return {
+    lineHeight: 0,
+
+    '&&:not([hidden])': {
+      display: 'block',
+    },
+
+    '& > div': {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+    },
+  }
+}
+
+export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
+  const {theme} = props
+
+  return responsive(theme.sanity.media, getResponsiveProp(props.$space), (spaceIndex) => {
+    const space = rem(theme.sanity.space[spaceIndex])
+
+    return {
+      margin: `-${space} 0 0 -${space}`,
+      '& > div': {padding: `${space} 0 0 ${space}`},
+    }
+  })
+}

package/src/primitives/inline/types.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export interface ResponsiveInlineSpaceStyleProps {
+  $space?: number | number[]
+}

package/src/primitives/kbd/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/primitives/kbd/__workshop__/index.ts

@@ -0,0 +1,6 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/kbd', 'KBD', [
+  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
+])

package/src/primitives/kbd/__workshop__/plain.tsx

@@ -0,0 +1,10 @@
+import {Flex, KBD} from '@sanity/ui'
+import React from 'react'
+
+export default function PlainStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <KBD style={{verticalAlign: 'top'}}>Ctrl</KBD>
+    </Flex>
+  )
+}

package/src/primitives/kbd/index.tsx

@@ -0,0 +1 @@
+export * from './kbd'

package/src/primitives/kbd/kbd.tsx

@@ -0,0 +1,49 @@
+import React, {forwardRef} from 'react'
+import styled, {css} from 'styled-components'
+import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {Box} from '../box'
+import {Code} from '../code'
+
+/**
+ * @public
+ */
+export interface KBDProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: number | number[]
+}
+
+function kbdStyle() {
+  return css`
+    background: var(--card-bg-color);
+    font: inherit;
+    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `
+}
+
+const Root = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
+
+/**
+ * @public
+ */
+export const KBD = forwardRef(function KBD(
+  props: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {children, fontSize = 1, padding = 1, radius = 2, ...restProps} = props
+
+  return (
+    <Root data-ui="KBD" {...restProps} $radius={radius} ref={ref}>
+      <Box as="span" padding={padding}>
+        <Code as="span" muted size={fontSize}>
+          {children}
+        </Code>
+      </Box>
+    </Root>
+  )
+})

package/src/primitives/label/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/primitives/label/__workshop__/index.ts

@@ -0,0 +1,15 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/label', 'Label', [
+  {
+    name: 'plain',
+    title: 'Plain',
+    component: lazy(() => import('./plain')),
+  },
+  {
+    name: 'optical-alignment',
+    title: 'Optical alignment',
+    component: lazy(() => import('./opticalAlignment')),
+  },
+])

package/src/primitives/label/__workshop__/opticalAlignment.tsx

@@ -0,0 +1,49 @@
+import {AddCircleIcon} from '@sanity/icons'
+import {Box, Card, Flex, Label, Stack} from '@sanity/ui'
+import React from 'react'
+
+export default function OpticalAlignment() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack space={1}>
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Label size={4}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Label size={3}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Label size={2}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Label size={1}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Label size={0}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={2} scheme="dark">
+            <Label>
+              <AddCircleIcon />
+            </Label>
+          </Card>
+        </Flex>
+      </Stack>
+    </Box>
+  )
+}

package/src/primitives/label/__workshop__/plain.tsx

@@ -0,0 +1,24 @@
+import {Flex, Label} from '@sanity/ui'
+import {useSelect, useText} from '@sanity/ui-workshop'
+import React from 'react'
+import {
+  WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
+  WORKSHOP_FONT_WEIGHT_OPTIONS,
+  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
+  const textChild = useText('Text', 'Label text', 'Props')
+  const textOverflow =
+    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Label size={size} textOverflow={textOverflow} weight={weight}>
+        {textChild}
+      </Label>
+    </Flex>
+  )
+}

package/src/primitives/label/index.ts

@@ -0,0 +1 @@
+export * from './label'