@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

package/src/css/components/skeleton/rules.ts

@@ -0,0 +1,113 @@
+import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from '@sanity/ui/theme'
+
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const skeletonRules: Rules = {
+  'skeleton': {
+    '--color-skeleton-from': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
+    '--color-skeleton-to': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
+
+    'backgroundColor': vars.color.skeleton.from,
+    'backgroundPosition': '100%',
+    'backgroundSize': '200% 100%',
+    'backgroundAttachment': 'fixed',
+    'opacity': 0,
+    'transition': 'opacity 200ms ease-in',
+
+    // @ts-expect-error - TODO: fix this
+    '@keyframes': {
+      'skeleton-pulse': {
+        '0%': {
+          backgroundPosition: '100%',
+        },
+        '100%': {
+          backgroundPosition: '-100%',
+        },
+      },
+    },
+
+    '@nest': {
+      '&[data-animated]': {
+        backgroundImage: [
+          `linear-gradient(to right`,
+          vars.color.skeleton.from,
+          vars.color.skeleton.to,
+          vars.color.skeleton.from,
+          vars.color.skeleton.from,
+          vars.color.skeleton.from,
+          `)`,
+        ].join(', '),
+        animationName: 'skeleton-pulse',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        animationDuration: '2000ms',
+      },
+
+      '&[data-visible]': {
+        opacity: 1,
+      },
+    },
+
+    '@media': {
+      'screen and (prefers-reduced-motion: no-preference)': {
+        backgroundColor: vars.color.skeleton.from,
+      },
+    },
+  },
+
+  'font-skeleton': {
+    height: `calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))`,
+  },
+
+  // ...responsiveRules('text-skeleton-0', {
+  //   '--font-skeleton-line-height': 'var(--font-text-0-line-height)',
+  //   '--font-skeleton-ascender-height': 'var(--font-text-0-ascender-height)',
+  //   '--font-skeleton-descender-height': 'var(--font-text-0-descender-height)',
+  // }),
+
+  ...FONT_CODE_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`code-skeleton-${size}`, {
+        '--font-skeleton-line-height': vars.font.code.sizes[size].lineHeight,
+        '--font-skeleton-ascender-height': vars.font.code.sizes[size].ascenderHeight,
+        '--font-skeleton-descender-height': vars.font.code.sizes[size].descenderHeight,
+      }),
+    }
+  }, {}),
+
+  ...FONT_HEADING_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`heading-skeleton-${size}`, {
+        '--font-skeleton-line-height': vars.font.heading.sizes[size].lineHeight,
+        '--font-skeleton-ascender-height': vars.font.heading.sizes[size].ascenderHeight,
+        '--font-skeleton-descender-height': vars.font.heading.sizes[size].descenderHeight,
+      }),
+    }
+  }, {}),
+
+  ...FONT_LABEL_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`label-skeleton-${size}`, {
+        '--font-skeleton-line-height': vars.font.label.sizes[size].lineHeight,
+        '--font-skeleton-ascender-height': vars.font.label.sizes[size].ascenderHeight,
+        '--font-skeleton-descender-height': vars.font.label.sizes[size].descenderHeight,
+      }),
+    }
+  }, {}),
+
+  ...FONT_TEXT_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`text-skeleton-${size}`, {
+        '--font-skeleton-line-height': vars.font.text.sizes[size].lineHeight,
+        '--font-skeleton-ascender-height': vars.font.text.sizes[size].ascenderHeight,
+        '--font-skeleton-descender-height': vars.font.text.sizes[size].descenderHeight,
+      }),
+    }
+  }, {}),
+}

package/src/css/components/skeleton/skeleton.style.ts

@@ -0,0 +1,96 @@
+import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleKeyframes, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const keyframes: StyleKeyframes = {
+  'skeleton-pulse': {
+    '0%': {
+      backgroundPosition: '100%',
+    },
+    '100%': {
+      backgroundPosition: '-100%',
+    },
+  },
+}
+
+const component: StyleRules = {
+  '.skeleton': {
+    '--color-skeleton-from': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
+    '--color-skeleton-to': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
+
+    'backgroundColor': vars.color.skeleton.from,
+    'backgroundPosition': '100%',
+    'backgroundSize': '200% 100%',
+    'backgroundAttachment': 'fixed',
+    'opacity': 0,
+    'transition': 'opacity 200ms ease-in',
+
+    '@nest': {
+      '&[data-animated]': {
+        backgroundImage: [
+          `linear-gradient(to right`,
+          vars.color.skeleton.from,
+          vars.color.skeleton.to,
+          vars.color.skeleton.from,
+          vars.color.skeleton.from,
+          vars.color.skeleton.from,
+          `)`,
+        ].join(', '),
+        animationName: 'skeleton-pulse',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        animationDuration: '2000ms',
+      },
+
+      '&[data-visible]': {
+        opacity: 1,
+      },
+    },
+
+    '@media': {
+      'screen and (prefers-reduced-motion: no-preference)': {
+        backgroundColor: vars.color.skeleton.from,
+      },
+    },
+  },
+
+  '.font-skeleton': {
+    height: `calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))`,
+  },
+}
+
+for (const size of FONT_CODE_SIZE) {
+  _responsiveRule(component, `code-skeleton-${size}`, {
+    '--font-skeleton-line-height': vars.font.code.sizes[size].lineHeight,
+    '--font-skeleton-ascender-height': vars.font.code.sizes[size].ascenderHeight,
+    '--font-skeleton-descender-height': vars.font.code.sizes[size].descenderHeight,
+  })
+}
+
+for (const size of FONT_HEADING_SIZE) {
+  _responsiveRule(component, `heading-skeleton-${size}`, {
+    '--font-skeleton-line-height': vars.font.heading.sizes[size].lineHeight,
+    '--font-skeleton-ascender-height': vars.font.heading.sizes[size].ascenderHeight,
+    '--font-skeleton-descender-height': vars.font.heading.sizes[size].descenderHeight,
+  })
+}
+
+for (const size of FONT_LABEL_SIZE) {
+  _responsiveRule(component, `label-skeleton-${size}`, {
+    '--font-skeleton-line-height': vars.font.label.sizes[size].lineHeight,
+    '--font-skeleton-ascender-height': vars.font.label.sizes[size].ascenderHeight,
+    '--font-skeleton-descender-height': vars.font.label.sizes[size].descenderHeight,
+  })
+}
+
+for (const size of FONT_TEXT_SIZE) {
+  _responsiveRule(component, `text-skeleton-${size}`, {
+    '--font-skeleton-line-height': vars.font.text.sizes[size].lineHeight,
+    '--font-skeleton-ascender-height': vars.font.text.sizes[size].ascenderHeight,
+    '--font-skeleton-descender-height': vars.font.text.sizes[size].descenderHeight,
+  })
+}
+
+export const skeletonStyle: Style = {keyframes, layers: {component}}

package/src/css/components/skeleton/skeleton.ts

@@ -0,0 +1,31 @@
+import {_comp} from '../../_comp'
+import {_resp} from '../../_resp'
+import {radius} from '../../aspects/radius'
+import {
+  CodeSkeletonStyleProps,
+  HeadingSkeletonStyleProps,
+  LabelSkeletonStyleProps,
+  SkeletonStyleProps,
+  TextSkeletonStyleProps,
+} from './types'
+
+/** @beta */
+export function skeleton(props: SkeletonStyleProps): string | undefined {
+  return _comp('skeleton', radius(props))
+}
+
+export function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined {
+  return _comp('font-skeleton', _resp('code-skeleton', props.size))
+}
+
+export function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined {
+  return _comp('font-skeleton', _resp('heading-skeleton', props.size))
+}
+
+export function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined {
+  return _comp('font-skeleton', _resp('label-skeleton', props.size))
+}
+
+export function textSkeleton(props: TextSkeletonStyleProps): string | undefined {
+  return _comp('font-skeleton', _resp('text-skeleton', props.size))
+}

package/src/css/components/skeleton/types.ts

@@ -0,0 +1,26 @@
+import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
+
+import {RadiusStyleProps} from '../../aspects/radius'
+import {ResponsiveProp} from '../../types'
+
+/** @beta */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface SkeletonStyleProps extends RadiusStyleProps {
+  // visible?: boolean
+}
+
+export interface CodeSkeletonStyleProps {
+  size?: ResponsiveProp<FontCodeSize>
+}
+
+export interface HeadingSkeletonStyleProps {
+  size?: ResponsiveProp<FontHeadingSize>
+}
+
+export interface LabelSkeletonStyleProps {
+  size?: ResponsiveProp<FontLabelSize>
+}
+
+export interface TextSkeletonStyleProps {
+  size?: ResponsiveProp<FontTextSize>
+}

package/src/css/components/toast/index.ts

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

package/src/css/components/toast/rules.ts

@@ -0,0 +1,18 @@
+import {Rules} from '../../types'
+
+export const toastRules: Rules = {
+  'toast-layer': {
+    position: 'fixed',
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+    maxWidth: '420px',
+    width: '100%',
+  },
+
+  'toast': {
+    pointerEvents: 'all',
+    // @ts-expect-error - TODO: fix this
+    overflow: ['hidden', 'clip'],
+  },
+}

package/src/css/components/toast/toast.style.ts

@@ -0,0 +1,20 @@
+import {Style, StyleRules} from '../../types'
+
+const component: StyleRules = {
+  '.toast-layer': {
+    position: 'fixed',
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+    maxWidth: '420px',
+    width: '100%',
+  },
+
+  '.toast': {
+    pointerEvents: 'all',
+    // @ts-expect-error - TODO: fix this
+    overflow: ['hidden', 'clip'],
+  },
+}
+
+export const toastStyle: Style = {layers: {component}}

package/src/css/components/toast/toast.ts

@@ -0,0 +1,21 @@
+import {_comp} from '../../_comp'
+
+export function toastLayer() {
+  return _comp('toast-layer')
+}
+
+export function toast() {
+  return _comp('toast')
+}
+
+export function toastLoadingBar() {
+  return _comp('toast-loading-bar')
+}
+
+export function toastLoadingBarProgress() {
+  return _comp('toast-loading-bar-progress')
+}
+
+export function toastLoadingBarMask() {
+  return _comp('toast-loading-bar-mask')
+}

package/src/css/components/tree/rules.ts

@@ -1,4 +1,5 @@
 import {Rules} from '../../types'
+import {vars} from '../../vars'
 
 export const treeRules: Rules = {
   'tree-item': {
@@ -8,7 +9,7 @@ export const treeRules: Rules = {
         cursor: 'default',
         borderRadius: '3px',
 
-        backgroundColor: 'var(--card-bg-color)',
+        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
         color: 'var(--treeitem-fg-color)',
       },
 
@@ -24,7 +25,7 @@ export const treeRules: Rules = {
         cursor: 'default',
         borderRadius: '3px',
 
-        backgroundColor: 'var(--card-bg-color)',
+        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
         color: 'var(--treeitem-fg-color)',
       },
 
@@ -50,3 +51,118 @@ export const treeRules: Rules = {
     },
   },
 }
+
+// const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
+
+// const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
+
+// const ToggleArrowText = styled(Text)`
+//   & > svg {
+//     transition: transform 100ms;
+//   }
+// `
+
+// import {getTheme_v2} from '@sanity/ui/theme'
+// import {css} from '../../lib/styled'
+// import {rem, ThemeProps} from '../../styles'
+// import {_cardColorStyle} from '../../styles/card'
+
+// export function treeItemRootStyle(): ReturnType<typeof css> {
+//   return css`
+//     &[role='none'] > [role='treeitem'] {
+//       outline: none;
+//       cursor: default;
+//       border-radius: 3px;
+
+//       background-color: var(--card-bg-color);
+//       color: var(--treeitem-fg-color);
+
+//       &:focus {
+//         position: relative;
+//       }
+//     }
+
+//     &[role='treeitem'] {
+//       outline: none;
+
+//       & > div {
+//         cursor: default;
+//         border-radius: 3px;
+
+//         background-color: var(--card-bg-color);
+//         color: var(--treeitem-fg-color);
+//       }
+
+//       &:focus > div {
+//         position: relative;
+//       }
+//     }
+//   `
+// }
+
+// export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
+//   const $tone = 'default'
+//   const {color} = getTheme_v2(props.theme)
+//   const tone = color.selectable[$tone]
+
+//   return css`
+//     &[role='none'] {
+//       & > [role='treeitem'] {
+//         ${_cardColorStyle(color, tone.enabled)}
+//       }
+
+//       &[data-selected] > [role='treeitem'] {
+//         ${_cardColorStyle(color, tone.pressed)}
+//       }
+
+//       @media (hover: hover) {
+//         &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
+//           ${_cardColorStyle(color, tone.hovered)}
+//         }
+
+//         & > [role='treeitem']:focus {
+//           ${_cardColorStyle(color, tone.selected)}
+//         }
+//       }
+//     }
+
+//     &[role='treeitem'] {
+//       & > [data-ui='TreeItem__box'] {
+//         ${_cardColorStyle(color, tone.enabled)}
+//       }
+
+//       &[data-selected] > [data-ui='TreeItem__box'] {
+//         ${_cardColorStyle(color, tone.pressed)}
+//       }
+
+//       @media (hover: hover) {
+//         &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
+//           ${_cardColorStyle(color, tone.hovered)}
+//         }
+
+//         &:focus > [data-ui='TreeItem__box'] {
+//           ${_cardColorStyle(color, tone.selected)}
+//         }
+//       }
+//     }
+//   `
+// }
+
+// export interface TreeItemBoxStyleProps {
+//   $level: number
+// }
+
+// export function treeItemBoxStyle(
+//   props: TreeItemBoxStyleProps & ThemeProps,
+// ): ReturnType<typeof css> {
+//   const {$level} = props
+//   const {space} = getTheme_v2(props.theme)
+
+//   return css`
+//     padding-left: ${rem(space[2] * $level)};
+
+//     &[data-as='a'] {
+//       text-decoration: none;
+//     }
+//   `
+// }

package/src/css/components/tree/tree.style.ts

@@ -0,0 +1,55 @@
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const component: StyleRules = {
+  '.tree-item': {
+    '@nest': {
+      '&[role="none"] > [role="treeitem"]': {
+        outline: 'none',
+        cursor: 'default',
+        borderRadius: '3px',
+
+        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
+        color: 'var(--treeitem-fg-color)',
+      },
+
+      '&[role="none"] > [role="treeitem"]:focus': {
+        position: 'relative',
+      },
+
+      '&[role="treeitem"]': {
+        outline: 'none',
+      },
+
+      '&[role="treeitem"] > div': {
+        cursor: 'default',
+        borderRadius: '3px',
+
+        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
+        color: 'var(--treeitem-fg-color)',
+      },
+
+      '&[role="treeitem"]:focus > div': {
+        position: 'relative',
+      },
+
+      // &[role='treeitem'] {
+      //   outline: none;
+
+      //   & > div {
+      //     cursor: default;
+      //     border-radius: 3px;
+
+      //     background-color: var(--card-bg-color);
+      //     color: var(--treeitem-fg-color);
+      //   }
+
+      //   &:focus > div {
+      //     position: relative;
+      //   }
+      // }
+    },
+  },
+}
+
+export const treeStyle: Style = {layers: {component}}

package/src/css/components/tree/tree.ts

@@ -1,5 +1,5 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
 
-export function treeItem(): string {
-  return composeClassNames('tree-item')
+export function treeItem(): string | undefined {
+  return _comp('tree-item')
 }

package/src/css/composeClassNames.ts

@@ -1,3 +1,17 @@
-export function composeClassNames(...classNames: Array<string | false | undefined>): string {
-  return classNames.filter(Boolean).join(' ')
+export function getClassNames(...classNames: Array<string | false | undefined>): string[] {
+  return classNames
+    .map((n) => typeof n === 'string' && n.trim())
+    .filter(Boolean)
+    .join(' ')
+    .split(' ')
+}
+
+export function composeClassNames(
+  ...classNames: Array<string | false | undefined>
+): string | undefined {
+  return unique(getClassNames(...classNames)).join(' ') || undefined
+}
+
+function unique<T>(array: T[]): T[] {
+  return Array.from(new Set(array))
 }

package/src/css/constants.ts

@@ -0,0 +1 @@
+export const PREFIX = 's-'

package/src/css/index.ts

@@ -1,12 +1,17 @@
+export * from './aspects'
+export * from './compile/compilePalette'
 export * from './compile/compileSystem'
 export * from './compile/compileTheme'
-
-export * from './composeClassNames'
-
 export * from './components/breadcrumbs'
 export * from './components/dialog'
+export * from './components/menu'
+export * from './components/skeleton'
+export * from './components/toast'
 export * from './components/tree'
-
+export * from './composeClassNames'
+export * from './primitives/_arrow'
+export * from './primitives/_input'
+export * from './primitives/_selectable'
 export * from './primitives/avatar'
 export * from './primitives/badge'
 export * from './primitives/box'
@@ -21,27 +26,16 @@ export * from './primitives/label'
 export * from './primitives/popover'
 export * from './primitives/radio'
 export * from './primitives/select'
-export * from './primitives/selectable'
 export * from './primitives/spinner'
+export * from './primitives/stack'
 export * from './primitives/switch'
 export * from './primitives/text'
 export * from './primitives/textArea'
 export * from './primitives/textInput'
-// export * from './primitives/token'
 export * from './primitives/tooltip'
-
-export * from './styles/border/types'
-export * from './styles/gap/types'
-export * from './styles/flex/types'
-export * from './styles/flexItem/types'
-export * from './styles/font/types'
-export * from './styles/gridItem/types'
-export * from './styles/margin/types'
-export * from './styles/maxWidth/types'
-export * from './styles/padding/types'
-export * from './styles/pointerEvents/types'
-export * from './styles/position/types'
-export * from './styles/radius/types'
-export * from './styles/width/types'
-
+export * from './scopeClassName'
 export * from './types'
+export * from './util'
+export * from './utils/srOnly'
+export * from './varNames'
+export * from './vars'