@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

package/src/core/primitives/tooltip/tooltipCard.tsx

@@ -1,115 +0,0 @@
-import {tooltipCard} from '@sanity/ui/css'
-import {motion} from 'framer-motion'
-import {CSSProperties, ForwardedRef, forwardRef, memo, useMemo} from 'react'
-
-import {POPOVER_MOTION_PROPS} from '../../constants'
-import {Placement, Props} from '../../types'
-import {Arrow} from '../../utils'
-import {Card, CardProps} from '../card'
-import {
-  DEFAULT_TOOLTIP_ARROW_HEIGHT,
-  DEFAULT_TOOLTIP_ARROW_RADIUS,
-  DEFAULT_TOOLTIP_ARROW_WIDTH,
-} from './constants'
-
-const MotionCard = motion.create(Card)
-
-/* @internal */
-export interface TooltipCardProps extends CardProps {
-  animate?: boolean
-  arrow: boolean
-  arrowRef: ForwardedRef<HTMLDivElement>
-  arrowX?: number
-  arrowY?: number
-  originX?: number
-  originY?: number
-  placement?: Placement
-}
-
-/**
- * @internal
- */
-export const TooltipCard = memo(
-  forwardRef(function TooltipCard(
-    props: Omit<
-      Props<TooltipCardProps, 'div'>,
-      'onDrag' | 'onDragEnd' | 'onDragStart' | 'onAnimationStart'
-    >,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) {
-    const {
-      animate,
-      arrow,
-      arrowRef,
-      arrowX,
-      arrowY,
-      children,
-      originX,
-      originY,
-      padding,
-      placement,
-      radius,
-      scheme,
-      shadow,
-      style,
-      tone,
-      ...restProps
-    } = props
-
-    const rootStyle: CSSProperties = useMemo(
-      () => ({
-        originX,
-        originY,
-        willChange: animate ? 'transform' : undefined,
-        ...style,
-      }),
-      [animate, originX, originY, style],
-    )
-
-    const arrowStyle: CSSProperties = useMemo(
-      () => ({
-        left: arrowX !== null ? arrowX : undefined,
-        top: arrowY !== null ? arrowY : undefined,
-        right: undefined,
-        bottom: undefined,
-      }),
-      [arrowX, arrowY],
-    )
-
-    return (
-      <MotionCard
-        data-ui="Tooltip__card"
-        {...restProps}
-        data-animate={animate ? '' : undefined}
-        className={tooltipCard()}
-        data-placement={placement}
-        padding={padding}
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-        style={rootStyle}
-        variants={POPOVER_MOTION_PROPS.card}
-        transition={POPOVER_MOTION_PROPS.transition}
-        initial={animate ? ['hidden', 'initial'] : undefined}
-        animate={animate ? ['visible', 'scaleIn'] : undefined}
-        exit={animate ? ['hidden', 'scaleOut'] : undefined}
-        tone={tone}
-      >
-        {children}
-
-        {arrow && (
-          <Arrow
-            ref={arrowRef}
-            style={arrowStyle}
-            width={DEFAULT_TOOLTIP_ARROW_WIDTH}
-            height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
-            radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
-          />
-        )}
-      </MotionCard>
-    )
-  }),
-)
-
-TooltipCard.displayName = 'Memo(ForwardRef(TooltipCard))'

package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx

@@ -1,23 +0,0 @@
-import {ReactNode} from 'react'
-
-/**
- * @internal
- * @deprecated this component will be removed in the next major release
- */
-export function ConditionalWrapper({
-  children,
-  condition,
-  wrapper,
-}: {
-  children: ReactNode
-  condition: boolean
-  wrapper: (children: ReactNode) => ReactNode
-}): ReactNode {
-  if (!condition) {
-    return children
-  }
-
-  return wrapper(children)
-}
-
-ConditionalWrapper.displayName = 'ConditionalWrapper'

package/src/core/utils/conditionalWrapper/index.ts

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

package/src/css/_resp.ts

@@ -1,31 +0,0 @@
-import {ResponsiveProp} from './types'
-
-export function _resp<T>(
-  prefix: string | undefined,
-  prop: ResponsiveProp<T> | undefined,
-): string | undefined {
-  if (prop === undefined || prop === false) {
-    return undefined
-  }
-
-  if (Array.isArray(prop)) {
-    return prop
-      .map((value, index) => {
-        if (value === undefined || (typeof prop === 'boolean' && prop === false)) return undefined
-
-        const className = (typeof value === 'boolean' ? [prefix] : [prefix, value])
-          .filter((s) => s === 0 || Boolean(s))
-          .join('-')
-          .replace(/\./g, '_')
-
-        return index === 0 ? `${className}` : `_${index}:${className}`
-      })
-      .filter(Boolean)
-      .join(' ')
-  }
-
-  return (typeof prop === 'boolean' ? [prefix] : [prefix, prop])
-    .filter((s) => s === 0 || Boolean(s))
-    .join('-')
-    .replace(/\./g, '_')
-}

package/src/css/compile/compilePalette.ts

@@ -1,60 +0,0 @@
-import {HUES, PaletteConfig, TINTS} from '@sanity/ui/theme'
-
-import {compileRule} from './compileRule'
-
-export function compilePalette(config: PaletteConfig): string {
-  const props: Record<string, string> = {
-    '--l-min': `${config.luminosity.min * 100}%`,
-    '--l-max': `${config.luminosity.max * 100}%`,
-    '--l-range': `calc(var(--l-max) - var(--l-min))`,
-
-    '--c-min': `${config.chroma.min}`,
-    '--c-max': `${config.chroma.max}`,
-    '--c-range': `calc(var(--c-max) - var(--c-min))`,
-
-    ...compileHues(config.hues),
-
-    '--black': `oklch(
-      calc(var(--l-min) + 0.0 * var(--l-range))
-      calc(var(--c-min) + 0.0 * var(--gray-c-range))
-      var(--gray-h)
-    )`,
-
-    '--white': `oklch(
-      calc(var(--l-min) + 1.0 * var(--l-range))
-      calc(var(--c-min) + 0.0 * var(--gray-c-range))
-      var(--gray-h)
-    )`,
-  }
-
-  return compileRule(':root', props, {keyframes: {}, media: {}})
-}
-
-function compileHues(hues: PaletteConfig['hues']) {
-  const rules: Record<string, string> = {}
-
-  for (const hue of HUES) {
-    const {c, h} = hues[hue]
-
-    rules[`--${hue}-h`] = `${h}`
-    rules[`--${hue}-c`] = `${c}`
-    rules[`--${hue}-c-max`] = `min(var(--c-max), var(--${hue}-c))`
-    rules[`--${hue}-c-range`] = `calc(var(--${hue}-c-max) - var(--c-min))`
-
-    for (const tint of TINTS) {
-      const l_offset = parseFloat((1 - tint / 1000).toFixed(2))
-      const c_offset_tmp = tint / 500
-      const c_offset = parseFloat((c_offset_tmp < 1 ? c_offset_tmp : 2 - c_offset_tmp).toFixed(1))
-
-      rules[`--${hue}-${tint}`] = [
-        `oklch(`,
-        `calc(var(--l-min) + ${l_offset} * var(--l-range)) `,
-        `calc(var(--c-min) + ${c_offset} * var(--${hue}-c-range)) `,
-        `var(--${hue}-h)`,
-        `)`,
-      ].join('')
-    }
-  }
-
-  return rules
-}

package/src/css/compile/compileRule.ts

@@ -1,90 +0,0 @@
-import {type Properties} from '../types'
-import {CompileRulesContext} from './types'
-
-export function compileRule(
-  selector: string,
-  props: Properties,
-  context: CompileRulesContext,
-): string {
-  let css = compileProperties(selector, props)
-
-  if (props['@nest']) {
-    css += compileNestedRules(selector, props['@nest'], context)
-  }
-
-  if (props['@keyframes']) {
-    for (const name in props['@keyframes']) {
-      context.keyframes[name] = props['@keyframes'][name]
-    }
-  }
-
-  if (props['@media']) {
-    for (const key in props['@media']) {
-      if (!context.media[key]) {
-        context.media[key] = {}
-      }
-
-      context.media[key][selector] = props['@media'][key]
-    }
-  }
-
-  return css
-}
-
-function compileProperties(selector: string, props: Properties) {
-  let css = '{'
-
-  for (const key in props) {
-    if (key === '@keyframes') continue // ignore
-    if (key === '@media') continue // ignore
-    if (key === '@nest') continue // ignore
-
-    const value = (props as Record<string, string>)[key]
-
-    const valueArr = Array.isArray(value) ? value : [value]
-
-    for (const v of valueArr) {
-      css += toSnakeCase(key) + ':' + v + ';'
-    }
-  }
-
-  if (css === '{') return ''
-
-  return selector + css + '}'
-}
-
-function compileNestedRules(
-  selector: string,
-  props: Record<string, Properties>,
-  context: CompileRulesContext,
-) {
-  if (!props) return ''
-
-  let css = ''
-
-  for (const [_selector, _props] of Object.entries(props)) {
-    css += '\n' + compileRule(_selector.replace(/&/g, selector), _props, context)
-  }
-
-  return css
-}
-
-export function compileMediaQueryRule(query: string, rules: Record<string, Properties>): string {
-  let css = `@media ${query}{`
-
-  for (const [selector, props] of Object.entries(rules)) {
-    // console.log('compileMediaQueryRule', {selector, props})
-
-    css += '\n  ' + compileProperties(selector, props)
-
-    if (props['@nest']) {
-      css += compileNestedRules(selector, props['@nest'], {keyframes: {}, media: {}})
-    }
-  }
-
-  return css + '\n}'
-}
-
-function toSnakeCase(value: string) {
-  return value.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase())
-}

package/src/css/compile/compileRules.test.ts

@@ -1,35 +0,0 @@
-import {responsiveRules} from '../responsiveRules'
-import {Rules} from '../types'
-import {compileRules} from './compileRules'
-
-it('should compile deeply nested rules', () => {
-  const rules: Rules = {
-    card: {
-      '@nest': {
-        '&:is(a)': {
-          '@media': {
-            '(hover: hover)': {
-              background: 'red',
-            },
-          },
-        },
-      },
-    },
-  }
-
-  // eslint-disable-next-line no-console
-  console.log(compileRules(rules))
-})
-
-it.only('should compile responsive rules', () => {
-  const rules = responsiveRules('block', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-  })
-
-  // eslint-disable-next-line no-console
-  console.log(compileRules(rules))
-})

package/src/css/compile/compileRules.ts

@@ -1,40 +0,0 @@
-import {type Rules} from '../types'
-import {compileMediaQueryRule, compileRule} from './compileRule'
-import {CompileRulesContext} from './types'
-
-/** @public */
-export function compileRules(rules: Rules): string {
-  let css = ''
-
-  const context: CompileRulesContext = {
-    keyframes: {},
-    media: {},
-  }
-
-  for (const [className, props] of Object.entries(rules)) {
-    const ruleCss = compileRule(`.${className}`.replace(/:/g, '\\:'), props, context)
-
-    css += ruleCss ? `${ruleCss}\n` : ''
-  }
-
-  // console.log('context', context)
-
-  for (const [name, value] of Object.entries(context.keyframes)) {
-    let keyframesCss = `@keyframes ${name} {\n`
-
-    for (const [key, props] of Object.entries(value)) {
-      keyframesCss += `  ${key}`
-      keyframesCss += compileRule('', props, context).replace(/\n/g, '\n    ') + '\n'
-    }
-
-    keyframesCss += `\n}\n`
-
-    css += keyframesCss
-  }
-
-  for (const [query, queryRules] of Object.entries(context.media)) {
-    css += compileMediaQueryRule(query, queryRules) + '\n'
-  }
-
-  return css.replace(/\n{2,}/g, '\n').trimStart()
-}

package/src/css/compile/compileSystem.ts

@@ -1,7 +0,0 @@
-import {rules} from '../rules'
-import {compileRules} from './compileRules'
-
-/** @public */
-export function compileSystem(): string {
-  return compileRules(rules)
-}

package/src/css/compile/compileTheme.ts

@@ -1,15 +0,0 @@
-import {type RootTheme} from '@sanity/ui/theme'
-
-import {compileTheme_v3} from './compileTheme_v3'
-
-export function compileTheme(theme: RootTheme): string {
-  if (theme.v3) {
-    return compileTheme_v3(theme.v3)
-  }
-
-  if (theme.v2) {
-    return `/* v2 - not supported */\n`
-  }
-
-  return `/* v0 - not supported */\n`
-}