@sanity-labs/ui-poc 0.0.1-alpha.1 → 0.0.1-alpha.11

package/dist/_chunks-es/LazyRefractor.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { hasLanguage, Refractor } from "react-refractor";
+function LazyRefractor({ language, value }) {
+  return hasLanguage(language) ? /* @__PURE__ */ jsx(Refractor, { inline: !0, language, value }) : /* @__PURE__ */ jsx("code", { children: value });
+}
+export {
+  LazyRefractor as default
+};
+//# sourceMappingURL=LazyRefractor.js.map

package/dist/_chunks-es/LazyRefractor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyRefractor.js","sources":["../../src/components/code/LazyRefractor.tsx"],"sourcesContent":["import {hasLanguage, Refractor, type RefractorProps} from 'react-refractor'\n\nexport default function LazyRefractor({language, value}: RefractorProps) {\n  if (!hasLanguage(language)) {\n    return <code>{value}</code>\n  }\n\n  return <Refractor inline language={language} value={value} />\n}\n"],"names":[],"mappings":";;AAEA,SAAwB,cAAc,EAAC,UAAU,SAAwB;AACvE,SAAK,YAAY,QAAQ,IAIlB,oBAAC,WAAA,EAAU,QAAM,IAAC,UAAoB,MAAA,CAAc,IAHlD,oBAAC,QAAA,EAAM,UAAA,OAAM;AAIxB;"}

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,109 @@ 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>
+}
+
+/** @public */
+export declare function Code<T extends React.ElementType = 'pre'>({
+  size,
+  ...props
+}: CodeProps & Omit<React.ComponentPropsWithRef<T>, keyof CodeProps>): JSX.Element
+
+declare const CODE_SIZE: readonly [0, 1, 2, 3, 4]
+
+declare const CODE_TAG: readonly ['pre', 'span']
+
+/** @public */
+declare interface CodeProps
+  extends React.ComponentProps<'pre'>, Omit<TypographyProps, 'align' | 'lineClamp' | 'tone'> {
+  /** Element to render */
+  as?: CodeTag
+  /** Refractor language for syntax highlighting */
+  language?: string
+  /** CSS **font-size** property */
+  size?: Responsive<CodeSize>
+}
+
+declare type CodeSize = (typeof CODE_SIZE)[number]
+
+declare type CodeTag = (typeof CODE_TAG)[number]
+
+/** @public */
+export declare function Container<T extends React_2.ElementType = 'div'>({
+  marginX,
+  ...props
+}: ContainerProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof ContainerProps<T>>): JSX.Element
+
+declare const CONTAINER_SIZE: readonly [0, 1, 2, 3, 4, 5]
+
+/** @public */
+declare interface ContainerProps<T extends React.ElementType> extends LayoutProps {
+  /** Element to render */
+  as?: T
+  /** CSS **max-width** property */
+  contentSize?: Responsive<ContainerSize>
+}
+
+declare type ContainerSize = (typeof CONTAINER_SIZE)[number]
+
+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 +133,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 +195,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?: Responsive<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 +249,34 @@ declare type HeightProps = {
   maxHeight?: Responsive<string>
 }
 
+/** @public */
+export declare function Icon({icon: Component, size, ...props}: IconProps): JSX.Element
+
+declare const ICON_SIZE: readonly [0, 1, 2, 3, 4]
+
+/** @public */
+declare interface IconProps extends React_2.ComponentProps<'svg'>, MarginProps, ToneProps {
+  /** Icon to render */
+  icon: React_2.ComponentType<React_2.SVGProps<SVGSVGElement>>
+  /** CSS **font-size** property */
+  size?: Responsive<IconSize>
+  /** CSS **color** property */
+  muted?: TypographyProps['muted']
+}
+
+declare type IconSize = (typeof ICON_SIZE)[number]
+
+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 +288,9 @@ declare interface LayoutProps
     PositionProps,
     OverflowProps,
     FlexChildProps,
-    GridChildProps {}
+    GridChildProps,
+    ZIndexProps,
+    ShadowProps {}
 
 declare type MarginProps = {
   /** CSS **margin** property */
@@ -96,7 +309,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 +339,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 +358,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]
 
@@ -170,9 +383,11 @@ declare type Responsive<T> =
   | ([T | undefined, ...(T | undefined)[]] & {
       length: 6
     })
-  | ([T | undefined, ...(T | undefined)[]] & {
-      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]
 
@@ -182,13 +397,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?: Responsive<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 +459,9 @@ declare type WidthProps = {
   maxWidth?: Responsive<string>
 }
 
+declare type ZIndexProps = {
+  /** CSS z-index property */
+  zIndex?: Responsive<number>
+}
+
 export {}