@sanity-labs/ui-poc 0.0.1-alpha.0

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@sanity-labs/ui-poc",
+  "version": "0.0.1-alpha.0",
+  "description": "Sanity UI POC",
+  "keywords": [],
+  "homepage": "https://github.com/sanity-labs/ui-poc#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-labs/ui-poc/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sanity-labs/ui-poc.git"
+  },
+  "license": "ISC",
+  "author": "Sanity",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/styles.css"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "pnpm run clean & pnpm run /^build:/",
+    "build:css:components": "postcss src/components/index.css -o dist/components.css",
+    "build:css:index": "postcss src/index.css -o dist/styles.css",
+    "build:css:utilities": "postcss src/css/index.css -o dist/utilities.css",
+    "build:js": "pkg build --strict --check",
+    "clean": "rimraf dist",
+    "dev": "pnpm run --parallel /^dev:/",
+    "dev:css": "postcss src/index.css -o src/styles.css --watch",
+    "dev:js": "pkg watch",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.ts,.tsx",
+    "test": "vitest run",
+    "ts:check": "tsc --noEmit"
+  },
+  "lint-staged": {
+    "*": [
+      "prettier --write --cache --ignore-unknown"
+    ]
+  },
+  "browserslist": "extends @sanity/browserslist-config",
+  "prettier": "@sanity/prettier-config",
+  "dependencies": {
+    "@sanity-labs/design-tokens": "0.0.2-alpha.0",
+    "classnames": "^2.5.1"
+  },
+  "devDependencies": {
+    "@sanity/pkg-utils": "^9.2.3",
+    "@sanity/prettier-config": "^1.0.6",
+    "@sanity/tsconfig": "^1.0.0",
+    "@types/postcss-import": "^14.0.3",
+    "@types/react": "^19.2.14",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "lint-staged": "^15.5.2",
+    "postcss": "^8.5.8",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "prettier": "^3.8.1",
+    "prettier-plugin-packagejson": "^3.0.2",
+    "rimraf": "^6.1.3",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2",
+    "react-dom": "^19.2"
+  },
+  "packageManager": "pnpm@10.17.0",
+  "engines": {
+    "node": ">=20.19 <22 || >=22.12"
+  }
+}

package/src/components/box/Box.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import {type LayoutProps} from '../../props/layout'
+import {type DisplayBlock} from '../../types/Display'
+import {type Responsive} from '../../types/Responsive'
+import {getProps} from '../../utils/getProps'
+import {boxProps} from './box.props'
+
+/** @public */
+export interface BoxProps<T extends React.ElementType> extends LayoutProps {
+  /** Element to render */
+  as?: T
+  /** CSS **display** property */
+  display?: Responsive<DisplayBlock>
+}
+
+/** @public */
+export function Box<T extends React.ElementType = 'div'>(
+  {display = 'block', ...props}: BoxProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof BoxProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps({display, ...props}, boxProps)
+  const Component = as || 'div'
+
+  return (
+    <Component className={classNames('sui-Box', className)} style={style} data-ui="Box" {...rest}>
+      {children}
+    </Component>
+  )
+}

package/src/components/box/box.props.ts

@@ -0,0 +1,15 @@
+import {layoutProps} from '../../props/layout'
+import {DISPLAY_BLOCK} from '../../types/Display'
+import {type PropDef} from '../../types/PropDef'
+
+export const boxProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  display: {
+    type: 'union',
+    className: 'display',
+    values: DISPLAY_BLOCK,
+  },
+  ...layoutProps,
+}

package/src/components/flex/Flex.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import type {FlexParentProps} from '../../props/flexParent'
+import type {GapProps} from '../../props/gap'
+import {type LayoutProps} from '../../props/layout'
+import {type DisplayFlex} from '../../types/Display'
+import {type Responsive} from '../../types/Responsive'
+import {getProps} from '../../utils/getProps'
+import {flexProps} from './flex.props'
+
+export interface FlexProps<T extends React.ElementType>
+  extends FlexParentProps, GapProps, LayoutProps {
+  /** Element to render */
+  as?: T
+  /** CSS **display** property */
+  display?: Responsive<DisplayFlex>
+}
+
+export function Flex<T extends React.ElementType = 'div'>(
+  { display = 'flex', ...props}: FlexProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof FlexProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps({display, ...props}, flexProps)
+  const Component = as || 'div'
+
+  return (
+    <Component className={classNames('sui-Flex', className)} style={style} data-ui="Flex" {...rest}>
+      {children}
+    </Component>
+  )
+}

package/src/components/flex/flex.props.ts

@@ -0,0 +1,19 @@
+import {flexParentProps} from '../../props/flexParent'
+import {gapProps} from '../../props/gap'
+import {layoutProps} from '../../props/layout'
+import {DISPLAY_FLEX} from '../../types/Display'
+import {type PropDef} from '../../types/PropDef'
+
+export const flexProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  display: {
+    type: 'union',
+    className: 'display',
+    values: DISPLAY_FLEX,
+  },
+  ...flexParentProps,
+  ...gapProps,
+  ...layoutProps,
+}

package/src/components/grid/Grid.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import {type GapProps} from '../../props/gap'
+import {type GridParentProps} from '../../props/gridParent'
+import {type LayoutProps} from '../../props/layout'
+import {type DisplayGrid} from '../../types/Display'
+import {type Responsive} from '../../types/Responsive'
+import {getProps} from '../../utils/getProps'
+import {gridProps} from './grid.props'
+
+export interface FlexProps<T extends React.ElementType>
+  extends GridParentProps, GapProps, LayoutProps {
+  /** Element to render */
+  as?: T
+  /** CSS **display** property */
+  display?: Responsive<DisplayGrid>
+}
+
+export function Grid<T extends React.ElementType = 'div'>(
+  {display = 'grid', ...props}: FlexProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof FlexProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps({display, ...props}, gridProps)
+  const Component = as || 'div'
+
+  return (
+    <Component className={classNames('sui-Grid', className)} style={style} data-ui="Grid" {...rest}>
+      {children}
+    </Component>
+  )
+}

package/src/components/grid/grid.props.ts

@@ -0,0 +1,19 @@
+import {gapProps} from '../../props/gap'
+import {gridParentProps} from '../../props/gridParent'
+import {layoutProps} from '../../props/layout'
+import {DISPLAY_GRID} from '../../types/Display'
+import {type PropDef} from '../../types/PropDef'
+
+export const gridProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  display: {
+    type: 'union',
+    className: 'display',
+    values: DISPLAY_GRID,
+  },
+  ...gridParentProps,
+  ...gapProps,
+  ...layoutProps,
+}

package/src/components/text/Text.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import type {TypographyProps} from '../../props/typography'
+import type {TextSize} from '../../types/Text'
+import {getProps} from '../../utils/getProps'
+import {textProps} from './text.props'
+
+/** @public */
+export interface TextProps<T extends React.ElementType> extends TypographyProps {
+  /** Element to render */
+  as?: T
+  /** CSS **font-size** property */
+  size?: TextSize
+}
+
+/** @public */
+export function Text<T extends React.ElementType = 'p'>({
+  size = 2,
+  ...props
+}: TextProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof TextProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps({size, ...props}, textProps)
+  const Component = as || 'p'
+
+  if (props.lineClamp && props.trim) {
+    return (
+      <Component
+        className={classNames('sui-Text', className?.replace('sui-line-clamp', ''))}
+        style={style}
+        data-ui="Text"
+        {...rest}
+      >
+        <span className="sui-line-clamp">{children}</span>
+      </Component>
+    )
+  }
+
+  return (
+    <Component className={classNames('sui-Text', className)} style={style} data-ui="Text" {...rest}>
+      {children}
+    </Component>
+  )
+}

package/src/components/text/text.props.ts

@@ -0,0 +1,15 @@
+import {typographyProps} from '../../props/typography'
+import {type PropDef} from '../../types/PropDef'
+import {TEXT_SIZE} from '../../types/Text'
+
+export const textProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  size: {
+    type: 'union',
+    className: 'text-body',
+    values: TEXT_SIZE,
+  },
+  ...typographyProps,
+}

package/src/css/global.css

@@ -0,0 +1,103 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-ExtraBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-ExtraBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url('https://studio-static.sanity.io/Inter-BlackItalic.woff2') format('woff2');
+}

package/src/css/index.css

@@ -0,0 +1,6 @@
+@import '@sanity-labs/design-tokens/dist/css/index.css';
+
+@import './global.css';
+@import './utilities/dynamic/index.css';
+@import './utilities/generic/index.css';
+@import './utilities/tokenized/index.css';

package/src/css/utilities/dynamic/flex-child.css

@@ -0,0 +1,5 @@
+@breakpoints {
+  .sui-flex-basis { flex-basis: var(--flex-basis); }
+  .sui-flex-grow { flex-grow: var(--flex-grow); }
+  .sui-flex-shrink { flex-shrink: var(--flex-shrink); }
+}

package/src/css/utilities/dynamic/grid-child.css

@@ -0,0 +1,8 @@
+@breakpoints {
+  .sui-grid-column { grid-column: var(--grid-column); }
+  .sui-grid-column-start { grid-column-start: var(--grid-column-start); }
+  .sui-grid-column-end { grid-column-end: var(--grid-column-end); }
+  .sui-grid-row { grid-row: var(--grid-row); }
+  .sui-grid-row-start { grid-row-start: var(--grid-row-start); }
+  .sui-grid-row-end { grid-row-end: var(--grid-row-end); }
+}

package/src/css/utilities/dynamic/grid-parent.css

@@ -0,0 +1,6 @@
+@breakpoints {
+  .sui-grid-auto-columns { grid-auto-columns: var(--grid-auto-columns); }
+  .sui-grid-auto-rows { grid-auto-rows: var(--grid-auto-rows); }
+  .sui-grid-template-columns { grid-template-columns: var(--grid-template-columns); }
+  .sui-grid-template-rows { grid-template-rows: var(--grid-template-rows); }
+}

package/src/css/utilities/dynamic/height.css

@@ -0,0 +1,5 @@
+@breakpoints {
+  .sui-height { height: var(--height); }
+  .sui-min-height { min-height: var(--min-height); }
+  .sui-max-height { max-height: var(--max-height); }
+}

package/src/css/utilities/dynamic/index.css

@@ -0,0 +1,7 @@
+@import './flex-child.css';
+@import './grid-child.css';
+@import './grid-parent.css';
+@import './height.css';
+@import './width.css';
+@import './line-clamp.css';
+@import './z-index.css';

package/src/css/utilities/dynamic/line-clamp.css

@@ -0,0 +1,6 @@
+.sui-line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--line-clamp);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

package/src/css/utilities/dynamic/width.css

@@ -0,0 +1,5 @@
+@breakpoints {
+  .sui-width { width: var(--width); }
+  .sui-min-width { min-width: var(--min-width); }
+  .sui-max-width { max-width: var(--max-width); }
+}

package/src/css/utilities/dynamic/z-index.css

@@ -0,0 +1,3 @@
+@breakpoints {
+  .sui-z-index { z-index: var(--z-index); }
+}

package/src/css/utilities/generic/border.css

@@ -0,0 +1,11 @@
+.sui-border { border: 1px solid var(--border-color, var(--gray-200)) }
+.sui-border-top { border-top: 1px solid var(--border-color, var(--gray-200)) }
+.sui-border-right { border-right: 1px solid var(--border-color, var(--gray-200)) }
+.sui-border-bottom { border-bottom: 1px solid var(--border-color, var(--gray-200)) }
+.sui-border-left { border-left: 1px solid var(--border-color, var(--gray-200)) }
+
+.sui-border-none { border: none; }
+.sui-border-top-none { border-top: none; }
+.sui-border-right-none { border-right: none; }
+.sui-border-bottom-none { border-bottom: none; }
+.sui-border-left-none { border-left: none; }

package/src/css/utilities/generic/display.css

@@ -0,0 +1,13 @@
+@breakpoints {
+  .sui-display-block { display: block; }
+  .sui-display-inline-block { display: inline-block; }
+  .sui-display-inline { display: inline; }
+
+  .sui-display-flex { display: flex; }
+  .sui-display-inline-flex { display: inline-flex; }
+
+  .sui-display-grid { display: grid; }
+  .sui-display-inline-grid { display: inline-grid; }
+
+  .sui-display-none { display: none; }
+}

package/src/css/utilities/generic/flex.css

@@ -0,0 +1,24 @@
+@breakpoints {
+  .sui-align-items-start { align-items: flex-start; }
+  .sui-align-items-center { align-items: center; }
+  .sui-align-items-end { align-items: flex-end; }
+  .sui-align-items-baseline { align-items: baseline; }
+  .sui-align-items-stretch { align-items: stretch; }
+
+  .sui-justify-content-start { justify-content: flex-start; }
+  .sui-justify-content-center { justify-content: center; }
+  .sui-justify-content-end { justify-content: flex-end; }
+  .sui-justify-content-between { justify-content: space-between; }
+  .sui-justify-content-around { justify-content: space-around; }
+  .sui-justify-content-evenly { justify-content: space-evenly; }
+  .sui-justify-content-stretch { justify-content: stretch; }
+
+  .sui-flex-direction-row { flex-direction: row; }
+  .sui-flex-direction-row-reverse { flex-direction: row-reverse; }
+  .sui-flex-direction-column { flex-direction: column; }
+  .sui-flex-direction-column-reverse { flex-direction: column-reverse; }
+
+  .sui-flex-wrap { flex-wrap: wrap; }
+  .sui-flex-nowrap { flex-wrap: nowrap; }
+  .sui-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+}

package/src/css/utilities/generic/grid.css

@@ -0,0 +1,7 @@
+@breakpoints {
+  .sui-flow-row { grid-auto-flow: row; }
+  .sui-flow-row-dense { grid-auto-flow: row dense; }
+  .sui-flow-column { grid-auto-flow: column; }
+  .sui-flow-column-dense { grid-auto-flow: column dense; }
+  .sui-flow-dense { grid-auto-flow: dense; }
+}

package/src/css/utilities/generic/index.css

@@ -0,0 +1,10 @@
+@import './border.css';
+@import './display.css';
+@import './flex.css';
+@import './grid.css';
+@import './overflow.css';
+@import './position.css';
+@import './text-align.css';
+@import './text-muted.css';
+@import './text-trim.css';
+@import './tone.css';

package/src/css/utilities/generic/overflow.css

@@ -0,0 +1,19 @@
+@breakpoints {
+  .sui-overflow-visible { overflow: visible; }
+  .sui-overflow-scroll { overflow: scroll; }
+  .sui-overflow-clip { overflow: clip; }
+  .sui-overflow-hidden { overflow: hidden; }
+  .sui-overflow-auto { overflow: auto; }
+
+  .sui-overflow-x-visible { overflow-x: visible; }
+  .sui-overflow-x-scroll { overflow-x: scroll; }
+  .sui-overflow-x-clip { overflow-x: clip; }
+  .sui-overflow-x-hidden { overflow-x: hidden; }
+  .sui-overflow-x-auto { overflow-x: auto; }
+
+  .sui-overflow-y-visible { overflow-y: visible; }
+  .sui-overflow-y-scroll { overflow-y: scroll; }
+  .sui-overflow-y-clip { overflow-y: clip; }
+  .sui-overflow-y-hidden { overflow-y: hidden; }
+  .sui-overflow-y-auto { overflow-y: auto; }
+}

package/src/css/utilities/generic/position.css

@@ -0,0 +1,7 @@
+@breakpoints {
+  .sui-position-static { position: static; }
+  .sui-position-relative { position: relative; }
+  .sui-position-absolute { position: absolute; }
+  .sui-position-fixed { position: fixed; }
+  .sui-position-sticky { position: sticky; }
+}

package/src/css/utilities/generic/text-align.css

@@ -0,0 +1,5 @@
+@breakpoints {
+  .sui-text-left { text-align: left; }
+  .sui-text-center { text-align: center; }
+  .sui-text-right { text-align: right; }
+}

package/src/css/utilities/generic/text-muted.css

@@ -0,0 +1,2 @@
+.sui-text-muted { color: var(--gray-600) }
+.sui-text-default { color: var(--gray-800) }

package/src/css/utilities/generic/text-trim.css

@@ -0,0 +1,38 @@
+.sui-text-trim:before,
+.sui-text-trim:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+}
+
+.sui-text-trim:before {
+  margin-bottom: var(--trim);
+}
+
+.sui-text-trim:after {
+  margin-top: var(--trim);
+}
+
+.sui-text-trim-none:before,
+.sui-text-trim-none:after {
+  content: none;
+}
+
+@breakpoints {
+  .sui-text-body0 {
+    --trim: -4px;
+  }
+  .sui-text-body1 {
+    --trim: -5px;
+  }
+  .sui-text-body2 {
+    --trim: -6px;
+  }
+  .sui-text-body3 {
+    --trim: -7px;
+  }
+  .sui-text-body4 {
+    --trim: -8px;
+  }
+}

package/src/css/utilities/generic/tone.css

@@ -0,0 +1,34 @@
+.sui-tone-default {
+  background: var(--white);
+  border-color: var(--blue-100);
+}
+
+.sui-tone-neutral {
+  background: var(--gray-50);
+  border-color: var(--gray-100);
+}
+
+.sui-tone-primary {
+  background: var(--blue-50);
+  border-color: var(--blue-100);
+}
+
+.sui-tone-suggest {
+  background: var(--purple-50);
+  border-color: var(--purple-100);
+}
+
+.sui-tone-positive {
+  background: var(--green-50);
+  border-color: var(--green-100);
+}
+
+.sui-tone-caution {
+  background: var(--yellow-50);
+  border-color: var(--yellow-100);
+}
+
+.sui-tone-critical {
+  background: var(--red-50);
+  border-color: var(--red-100);
+}