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

package/dist/components.css

@@ -1,9 +1,4 @@
-.sui-Box {
-  display: block;
-}
-.sui-Flex {
-  display: flex;
-}
-.sui-Grid {
-  display: grid;
+.sui-Card {
+  /* Placeholder for now */
+  color: currentColor;
 }

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,9 +21,10 @@ 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 {
@@ -29,10 +34,51 @@ export declare interface BoxProps<T extends React_2.ElementType> extends LayoutP
   display?: Responsive<DisplayBlock>
 }
 
+/** @public */
+export declare function Card<T extends React_2.ElementType = 'div'>({
+  density,
+  ...props
+}: CardProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof CardProps<T>>): JSX.Element
+
+/** @public */
+declare interface CardProps<T extends React.ElementType> extends MarginProps {
+  /** Element to render */
+  as?: T
+  /** CSS **display** property */
+  display?: Responsive<DisplayBlock>
+  /** 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(): JSX.Element
+
+/** @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 +88,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 */
+export declare interface FlexProps<T extends React_2.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 +150,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 */
+export declare interface GridProps<T extends React_2.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 = 'h1'>({
+  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 +204,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,
@@ -96,7 +245,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 +275,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]
 
@@ -143,9 +292,11 @@ declare type PositionProps = {
   bottom?: Responsive<SpaceAuto>
   /** CSS **left** property */
   left?: Responsive<SpaceAuto>
+  /** CSS **z-index** property */
+  zIndex?: Responsive<number>
 }
 
-declare const RADIUS: (string | number)[]
+declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, 'full']
 
 declare type Radius = (typeof RADIUS)[number]
 
@@ -182,7 +333,38 @@ 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 = 'p'>({
+  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 */
+export declare interface TextProps<T extends React_2.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 [
+  'default',
+  'neutral',
+  'primary',
+  'suggest',
+  'positive',
+  'caution',
+  'critical',
+]
 
 declare type Tone = (typeof TONE)[number]
 
@@ -191,6 +373,19 @@ declare type ToneProps = {
   tone?: Responsive<Tone>
 }
 
+declare interface TypographyProps extends MarginProps {
+  /** 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 = {
   /** CSS **width** property */
   width?: Responsive<string>

package/dist/index.js

@@ -212,8 +212,21 @@ const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
     type: "union",
     className: "left",
     values: SPACE_AUTO
+  },
+  zIndex: {
+    type: "number",
+    className: "z-index",
+    variable: "--z-index"
   }
-}, TONE = ["default", "neutral", "primary", "suggest", "positive", "caution", "critical"], toneProps = {
+}, TONE = [
+  "default",
+  "neutral",
+  "primary",
+  "suggest",
+  "positive",
+  "caution",
+  "critical"
+], toneProps = {
   tone: {
     type: "union",
     className: "tone",
@@ -246,27 +259,29 @@ const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
   ...overflowProps,
   ...flexChildProps,
   ...gridChildProps
-}, DISPLAY_BLOCK = ["block", "inline-block", "none"], PREFIX = "sui", BREAKPOINTS_LENGTH = 7;
-function getProps(allProps, styleProps) {
-  let className = allProps?.className || "", style = allProps?.style || {};
-  for (const key in allProps)
-    if (!(!styleProps?.[key] || !styleProps?.[key].className))
-      if (Array.isArray(allProps[key]))
-        for (let i = 0, len = Math.min(allProps[key].length, BREAKPOINTS_LENGTH); i < len; i++)
-          className = classNames(className, getClassName(allProps[key][i], styleProps[key], i)), style = { ...style, ...getStyle(allProps[key][i], styleProps[key], i) };
-      else
-        className = classNames(className, getClassName(allProps[key], styleProps[key])), style = { ...style, ...getStyle(allProps[key], styleProps[key]) };
-  const propsWithoutStyleProps = {};
-  for (const key in allProps)
-    (!styleProps?.[key] || !styleProps[key].className) && (propsWithoutStyleProps[key] = allProps[key]);
-  return { ...propsWithoutStyleProps, className, style };
+}, DISPLAY_BLOCK = ["block", "inline-block", "none"], DISPLAY_FLEX = ["flex", "inline-flex", "none"], DISPLAY_GRID = ["grid", "inline-grid", "none"], PREFIX = "sui", BREAKPOINTS_LENGTH = 7;
+function getProps(componentProps, propDefs) {
+  let className = componentProps?.className || "", style = componentProps?.style || {};
+  const restProps = {};
+  for (const key in componentProps) {
+    if (!propDefs?.[key] || !("className" in propDefs[key]) && !("composition" in propDefs[key])) {
+      restProps[key] = componentProps[key];
+      continue;
+    }
+    if (Array.isArray(componentProps[key]))
+      for (let i = 0, len = Math.min(componentProps[key].length, BREAKPOINTS_LENGTH); i < len; i++)
+        className = classNames(className, getClassName(componentProps[key][i], propDefs[key], i)), style = { ...style, ...getStyle(componentProps[key][i], propDefs[key], i) };
+    else
+      className = classNames(className, getClassName(componentProps[key], propDefs[key])), style = { ...style, ...getStyle(componentProps[key], propDefs[key]) };
+  }
+  return { ...restProps, className, style };
 }
-function getClassName(prop, styleProp, bp) {
-  return styleProp.type === "union" && styleProp.values?.includes(prop) ? `${PREFIX}-${styleProp.className}${typeof prop == "string" ? `-${prop}` : prop}${bp ? `-bp-${bp}` : ""}` : styleProp.type === "string" || styleProp.type === "number" ? `${PREFIX}-${styleProp.className}${bp ? `-bp-${bp}` : ""}` : styleProp.type === "boolean" ? `${PREFIX}-${prop ? styleProp.className : styleProp.inverse}${bp ? `-bp-${bp}` : ""}` : "";
+function getClassName(prop, propDef, bp) {
+  return propDef.type === "composite" && propDef.composition[prop] ? bp ? propDef.composition[prop].split(" ").map((className) => `${className}-bp-${bp}`).join(" ") : propDef.composition[prop] : propDef.type === "union" && propDef.values?.includes(prop) ? `${PREFIX}-${propDef.className}${typeof prop == "string" ? `-${prop}` : prop}${bp ? `-bp-${bp}` : ""}` : propDef.type === "string" || propDef.type === "number" ? `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ""}` : propDef.type === "boolean" ? `${PREFIX}-${prop ? propDef.className : propDef.inverse}${bp ? `-bp-${bp}` : ""}` : "";
 }
-function getStyle(prop, styleProp, bp) {
-  return styleProp.type === "string" || styleProp.type === "number" ? {
-    [`${styleProp.variable}${bp ? `-bp-${bp}` : ""}`]: prop
+function getStyle(prop, propDef, bp) {
+  return propDef.type === "string" || propDef.type === "number" ? {
+    [`${propDef.variable}${bp ? `-bp-${bp}` : ""}`]: prop
   } : {};
 }
 const boxProps = {
@@ -280,11 +295,257 @@ const boxProps = {
   },
   ...layoutProps
 };
-function Box(props) {
-  const { as, children, className, style, ...rest } = getProps(props, boxProps);
+function Box({
+  display = "block",
+  ...props
+}) {
+  const { as, children, className, style, ...rest } = getProps({ display, ...props }, boxProps);
   return /* @__PURE__ */ jsx(as || "div", { className: classNames("sui-Box", className), style, "data-ui": "Box", ...rest, children });
 }
+const cardProps = {
+  as: {
+    type: "string"
+  },
+  display: {
+    type: "union",
+    className: "display",
+    values: DISPLAY_BLOCK
+  },
+  density: {
+    type: "composite",
+    composition: {
+      compact: "sui-p3 sui-radius2",
+      regular: "sui-p4 sui-radius3",
+      loose: "sui-p5 sui-radius4"
+    }
+  },
+  ...marginProps
+};
+function Card({
+  density = "regular",
+  ...props
+}) {
+  const { as, children, className, style, ...rest } = getProps({ density, ...props }, cardProps);
+  return /* @__PURE__ */ jsx(as || "div", { className: classNames("sui-Card", className), style, "data-ui": "Card", ...rest, children });
+}
+function Divider() {
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      className: "sui-Divider sui-border-bottom-none sui-border-left-none sui-border-right-none sui-border-top",
+      "data-ui": "Divider"
+    }
+  );
+}
+const ALIGN_ITEMS = ["baseline", "center", "flex-end", "flex-start", "stretch"], JUSTIFY_CONTENT = [
+  "flex-start",
+  "flex-end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly"
+], FLEX_DIRECTION = ["row", "row-reverse", "column", "column-reverse"], FLEX_WRAP = ["wrap", "wrap-reverse", "nowrap"], flexParentProps = {
+  alignItems: {
+    type: "union",
+    className: "align-items",
+    values: ALIGN_ITEMS
+  },
+  justifyContent: {
+    type: "union",
+    className: "justify-content",
+    values: JUSTIFY_CONTENT
+  },
+  flexDirection: {
+    type: "union",
+    className: "flex-direction",
+    values: FLEX_DIRECTION
+  },
+  flexWrap: {
+    type: "union",
+    className: "flex-wrap",
+    values: FLEX_WRAP
+  }
+}, gapProps = {
+  gap: {
+    type: "union",
+    className: "gap",
+    values: SPACE
+  },
+  rowGap: {
+    type: "union",
+    className: "row-gap",
+    values: SPACE
+  },
+  columnGap: {
+    type: "union",
+    className: "column-gap",
+    values: SPACE
+  }
+}, flexProps = {
+  as: {
+    type: "string"
+  },
+  display: {
+    type: "union",
+    className: "display",
+    values: DISPLAY_FLEX
+  },
+  ...flexParentProps,
+  ...gapProps,
+  ...layoutProps
+};
+function Flex({
+  display = "flex",
+  ...props
+}) {
+  const { as, children, className, style, ...rest } = getProps({ display, ...props }, flexProps);
+  return /* @__PURE__ */ jsx(as || "div", { className: classNames("sui-Flex", className), style, "data-ui": "Flex", ...rest, children });
+}
+const GRID_AUTO_FLOW = ["row", "column", "row dense", "column dense", "dense"], gridParentProps = {
+  gridAutoFlow: {
+    type: "union",
+    className: "grid-auto-flow",
+    values: GRID_AUTO_FLOW
+  },
+  gridAutoColumns: {
+    type: "string",
+    className: "grid-auto-columns",
+    variable: "--grid-auto-columns"
+  },
+  gridAutoRows: {
+    type: "string",
+    className: "grid-auto-rows",
+    variable: "--grid-auto-rows"
+  },
+  gridTemplateColumns: {
+    type: "string",
+    className: "grid-template-columns",
+    variable: "--grid-template-columns"
+  },
+  gridTemplateRows: {
+    type: "string",
+    className: "grid-template-rows",
+    variable: "--grid-template-rows"
+  }
+}, gridProps = {
+  as: {
+    type: "string"
+  },
+  display: {
+    type: "union",
+    className: "display",
+    values: DISPLAY_GRID
+  },
+  ...gridParentProps,
+  ...gapProps,
+  ...layoutProps
+};
+function Grid({
+  display = "grid",
+  ...props
+}) {
+  const { as, children, className, style, ...rest } = getProps({ display, ...props }, gridProps);
+  return /* @__PURE__ */ jsx(as || "div", { className: classNames("sui-Grid", className), style, "data-ui": "Grid", ...rest, children });
+}
+const FONT_WEIGHT = ["regular", "medium", "semibold", "bold"], TEXT_ALIGN = ["left", "center", "right", "justify"], typographyProps = {
+  align: {
+    type: "union",
+    className: "text",
+    values: TEXT_ALIGN
+  },
+  lineClamp: {
+    type: "number",
+    className: "line-clamp",
+    variable: "--line-clamp"
+  },
+  muted: {
+    type: "boolean",
+    className: "text-muted",
+    inverse: "text-default"
+  },
+  trim: {
+    type: "boolean",
+    className: "text-trim",
+    inverse: "text-trim-none"
+  },
+  weight: {
+    type: "union",
+    className: "weight",
+    values: FONT_WEIGHT
+  },
+  ...marginProps
+}, HEADING_TAG = ["h1", "h2", "h3", "h4", "h5", "h6"], HEADING_SIZE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], headingProps = {
+  as: {
+    type: "union",
+    values: HEADING_TAG
+  },
+  size: {
+    type: "union",
+    className: "text-heading",
+    values: HEADING_SIZE
+  },
+  ...typographyProps
+};
+function Heading({
+  size = 2,
+  weight = "bold",
+  ...props
+}) {
+  const { as, children, className, style, ...rest } = getProps({ size, weight, ...props }, headingProps), Component = as || "h1";
+  return props.lineClamp && props.trim ? /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classNames("sui-Heading", className?.replace("sui-line-clamp", "")),
+      style,
+      "data-ui": "Heading",
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { className: "sui-line-clamp", children })
+    }
+  ) : /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classNames("sui-Heading", className),
+      style,
+      "data-ui": "Heading",
+      ...rest,
+      children
+    }
+  );
+}
+const TEXT_SIZE = [0, 1, 2, 3, 4], textProps = {
+  as: {
+    type: "string"
+  },
+  size: {
+    type: "union",
+    className: "text-body",
+    values: TEXT_SIZE
+  },
+  ...typographyProps
+};
+function Text({
+  size = 2,
+  ...props
+}) {
+  const { as, children, className, style, ...rest } = getProps({ size, ...props }, textProps), Component = as || "p";
+  return props.lineClamp && props.trim ? /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classNames("sui-Text", className?.replace("sui-line-clamp", "")),
+      style,
+      "data-ui": "Text",
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { className: "sui-line-clamp", children })
+    }
+  ) : /* @__PURE__ */ jsx(Component, { className: classNames("sui-Text", className), style, "data-ui": "Text", ...rest, children });
+}
 export {
-  Box
+  Box,
+  Card,
+  Divider,
+  Flex,
+  Grid,
+  Heading,
+  Text
 };
 //# sourceMappingURL=index.js.map