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

package/dist/components.css

@@ -1,9 +1,38 @@
 .sui-Box {
-  display: block;
+  /* Box has no tone by default, therefore we set --tone-surface as transparent */
+  --tone-surface: transparent;
+  background-color: var(--tone-surface);
+}
+.sui-Card {
+  /* Card is always used with tone, therefore we can apply background and border colors
+   * by default without setting fallback custom properties.
+   * Note that border width/style is applied by .sui-border, used by default on Card */
+  background-color: var(--tone-surface);
+  border-color: var(--tone-separator);
 }
 .sui-Flex {
-  display: flex;
+  /* Flex has no tone by default, therefore we set --tone-surface as transparent */
+  --tone-surface: transparent;
+  background-color: var(--tone-surface);
 }
 .sui-Grid {
-  display: grid;
+  /* Grid has no tone by default, therefore we set --tone-surface as transparent */
+  --tone-surface: transparent;
+  background-color: var(--tone-surface);
+}
+.sui-Heading {
+  --tone-text-default: light-dark(var(--gray-800), var(--gray-200));
+  color: var(--tone-text, var(--tone-text-default));
+}
+.sui-Heading:where(.sui-text-muted) {
+  --tone-text-muted-default: light-dark(var(--gray-600), var(--gray-400));
+  color: var(--tone-text-muted, var(--tone-text-muted-default));
+}
+.sui-Text {
+  --tone-text-default: light-dark(var(--gray-800), var(--gray-200));
+  color: var(--tone-text, var(--tone-text-default));
+}
+.sui-Text:where(.sui-text-muted) {
+  --tone-text-muted-default: light-dark(var(--gray-600), var(--gray-400));
+  color: var(--tone-text-muted, var(--tone-text-muted-default));
 }

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 import {JSX} from 'react/jsx-runtime'
 import {default as React_2} from 'react'
 
+declare const ALIGN_ITEMS: readonly ['baseline', 'center', 'flex-end', 'flex-start', 'stretch']
+
+declare type AlignItems = (typeof ALIGN_ITEMS)[number]
+
 declare type BorderProps = {
   /** CSS **border** property */
   border?: Responsive<boolean>
@@ -17,22 +21,66 @@ declare type BorderProps = {
 }
 
 /** @public */
-export declare function Box<T extends React_2.ElementType = 'div'>(
-  props: BoxProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof BoxProps<T>>,
-): JSX.Element
+export declare function Box<T extends React_2.ElementType = 'div'>({
+  display,
+  ...props
+}: BoxProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element
 
 /** @public */
-export declare interface BoxProps<T extends React_2.ElementType> extends LayoutProps {
+declare interface BoxProps<T extends React.ElementType> extends LayoutProps {
   /** Element to render */
   as?: T
   /** CSS **display** property */
   display?: Responsive<DisplayBlock>
 }
 
+/** @public */
+export declare function Card<T extends React_2.ElementType = 'div'>({
+  density,
+  tone,
+  ...props
+}: CardProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof CardProps<T>>): JSX.Element
+
+/** @public */
+declare interface CardProps<T extends React.ElementType> extends MarginProps, ToneProps {
+  /** Element to render */
+  as?: T
+  /** Composite prop for setting padding and border radius */
+  density?: Responsive<Density>
+}
+
+declare const DENSITY: readonly ['compact', 'regular', 'loose']
+
+declare type Density = (typeof DENSITY)[number]
+
 declare const DISPLAY_BLOCK: readonly ['block', 'inline-block', 'none']
 
+declare const DISPLAY_FLEX: readonly ['flex', 'inline-flex', 'none']
+
+declare const DISPLAY_GRID: readonly ['grid', 'inline-grid', 'none']
+
 declare type DisplayBlock = (typeof DISPLAY_BLOCK)[number]
 
+declare type DisplayFlex = (typeof DISPLAY_FLEX)[number]
+
+declare type DisplayGrid = (typeof DISPLAY_GRID)[number]
+
+/** @public */
+export declare function Divider(props: DividerProps): JSX.Element
+
+/** @public */
+declare interface DividerProps extends React.ComponentProps<'hr'>, MarginProps {}
+
+/** @public */
+export declare function Flex<T extends React_2.ElementType = 'div'>({
+  display,
+  ...props
+}: FlexProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element
+
+declare const FLEX_DIRECTION: readonly ['row', 'row-reverse', 'column', 'column-reverse']
+
+declare const FLEX_WRAP: readonly ['wrap', 'wrap-reverse', 'nowrap']
+
 declare type FlexChildProps = {
   /** CSS **flex-basis** property */
   flexBasis?: Responsive<string>
@@ -42,6 +90,53 @@ declare type FlexChildProps = {
   flexShrink?: Responsive<number>
 }
 
+declare type FlexDirection = (typeof FLEX_DIRECTION)[number]
+
+declare type FlexParentProps = {
+  /** CSS **align-items** property */
+  alignItems?: Responsive<AlignItems>
+  /** CSS **justify-content** property */
+  justifyContent?: Responsive<JustifyContent>
+  /** CSS **flex-direction** property */
+  flexDirection?: Responsive<FlexDirection>
+  /** CSS **flex-wrap** property */
+  flexWrap?: Responsive<FlexWrap>
+}
+
+/** @public */
+declare interface FlexProps<T extends React.ElementType>
+  extends FlexParentProps, GapProps, LayoutProps {
+  /** Element to render */
+  as?: T
+  /** CSS **display** property */
+  display?: Responsive<DisplayFlex>
+}
+
+declare type FlexWrap = (typeof FLEX_WRAP)[number]
+
+declare const FONT_WEIGHT: readonly ['regular', 'medium', 'semibold', 'bold']
+
+declare type FontWeight = (typeof FONT_WEIGHT)[number]
+
+declare type GapProps = {
+  /** CSS **gap** property */
+  gap?: Responsive<Space>
+  /** CSS **row-gap** property */
+  rowGap?: Responsive<Space>
+  /** CSS **column-gap** property */
+  columnGap?: Responsive<Space>
+}
+
+/** @public */
+export declare function Grid<T extends React_2.ElementType = 'div'>({
+  display,
+  ...props
+}: GridProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof GridProps<T>>): JSX.Element
+
+declare const GRID_AUTO_FLOW: readonly ['row', 'column', 'row dense', 'column dense', 'dense']
+
+declare type GridAutoFlow = (typeof GRID_AUTO_FLOW)[number]
+
 declare type GridChildProps = {
   /** CSS **grid-column** property */
   gridColumn?: Responsive<string>
@@ -57,6 +152,51 @@ declare type GridChildProps = {
   gridRowEnd?: Responsive<string>
 }
 
+declare type GridParentProps = {
+  /** CSS **grid-auto-flow** property */
+  gridAutoFlow?: Responsive<GridAutoFlow>
+  /** CSS **grid-auto-columns** property */
+  gridAutoColumns?: Responsive<string>
+  /** CSS **grid-auto-row** property */
+  gridAutoRows?: Responsive<string>
+  /** CSS **grid-template-columns** property */
+  gridTemplateColumns?: Responsive<string>
+  /** CSS **grid-template-rows** property */
+  gridTemplateRows?: Responsive<string>
+}
+
+/** @public */
+declare interface GridProps<T extends React.ElementType>
+  extends GridParentProps, GapProps, LayoutProps {
+  /** Element to render */
+  as?: T
+  /** CSS **display** property */
+  display?: Responsive<DisplayGrid>
+}
+
+/** @public */
+export declare function Heading<T extends React_2.ElementType = 'h2'>({
+  size,
+  weight,
+  ...props
+}: HeadingProps & Omit<React_2.ComponentPropsWithRef<T>, keyof HeadingProps>): JSX.Element
+
+declare const HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+declare const HEADING_TAG: readonly ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+
+/** @public */
+declare interface HeadingProps extends TypographyProps {
+  /** Element to render */
+  as?: HeadingTag
+  /** CSS **font-size** property */
+  size?: HeadingSize
+}
+
+declare type HeadingSize = (typeof HEADING_SIZE)[number]
+
+declare type HeadingTag = (typeof HEADING_TAG)[number]
+
 declare type HeightProps = {
   /** CSS **height** property */
   height?: Responsive<string>
@@ -66,6 +206,17 @@ declare type HeightProps = {
   maxHeight?: Responsive<string>
 }
 
+declare const JUSTIFY_CONTENT: readonly [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+]
+
+declare type JustifyContent = (typeof JUSTIFY_CONTENT)[number]
+
 declare interface LayoutProps
   extends
     ToneProps,
@@ -77,7 +228,9 @@ declare interface LayoutProps
     PositionProps,
     OverflowProps,
     FlexChildProps,
-    GridChildProps {}
+    GridChildProps,
+    ZIndexProps,
+    ShadowProps {}
 
 declare type MarginProps = {
   /** CSS **margin** property */
@@ -96,7 +249,7 @@ declare type MarginProps = {
   marginLeft?: Responsive<SpaceAuto>
 }
 
-declare const OVERFLOW: string[]
+declare const OVERFLOW: readonly ['visible', 'hidden', 'auto', 'scroll', 'clip']
 
 declare type Overflow = (typeof OVERFLOW)[number]
 
@@ -126,7 +279,7 @@ declare interface PaddingProps {
   paddingLeft?: Responsive<Space>
 }
 
-declare const POSITION: string[]
+declare const POSITION: readonly ['absolute', 'fixed', 'relative', 'static', 'sticky']
 
 declare type Position = (typeof POSITION)[number]
 
@@ -145,7 +298,7 @@ declare type PositionProps = {
   left?: Responsive<SpaceAuto>
 }
 
-declare const RADIUS: (string | number)[]
+declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, 'full']
 
 declare type Radius = (typeof RADIUS)[number]
 
@@ -174,6 +327,11 @@ declare type Responsive<T> =
       length: 7
     })
 
+declare type ShadowProps = {
+  /** CSS **box-shadow** property */
+  shadow?: string
+}
+
 declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
 declare type Space = (typeof SPACE)[number]
@@ -182,13 +340,57 @@ declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'auto']
 
 declare type SpaceAuto = (typeof SPACE_AUTO)[number]
 
-declare const TONE: string[]
+/** @public */
+declare function Text_2<T extends React_2.ElementType = 'span'>({
+  size,
+  ...props
+}: TextProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof TextProps<T>>): JSX.Element
+export {Text_2 as Text}
+
+declare const TEXT_ALIGN: readonly ['left', 'center', 'right', 'justify']
+
+declare const TEXT_SIZE: readonly [0, 1, 2, 3, 4]
+
+declare type TextAlign = (typeof TEXT_ALIGN)[number]
+
+/** @public */
+declare interface TextProps<T extends React.ElementType> extends TypographyProps {
+  /** Element to render */
+  as?: T
+  /** CSS **font-size** property */
+  size?: TextSize
+}
+
+declare type TextSize = (typeof TEXT_SIZE)[number]
+
+declare const TONE: readonly [
+  'none',
+  'neutral',
+  'primary',
+  'positive',
+  'suggest',
+  'caution',
+  'critical',
+]
 
 declare type Tone = (typeof TONE)[number]
 
 declare type ToneProps = {
   /** CSS **background-color** property */
-  tone?: Responsive<Tone>
+  tone?: Tone
+}
+
+declare interface TypographyProps extends MarginProps, ToneProps {
+  /** CSS **text-align** property */
+  align?: TextAlign
+  /** CSS **-webkit-line-clamp** property */
+  lineClamp?: number
+  /** CSS **color** property */
+  muted?: boolean
+  /** CSS **text-box-trim** property */
+  trim?: boolean
+  /** CSS **font-weight** property */
+  weight?: FontWeight
 }
 
 declare type WidthProps = {
@@ -200,4 +402,9 @@ declare type WidthProps = {
   maxWidth?: Responsive<string>
 }
 
+declare type ZIndexProps = {
+  /** CSS z-index property */
+  zIndex?: Responsive<number>
+}
+
 export {}