@sanity-labs/ui-poc 0.0.1-alpha.7 → 0.0.1-alpha.9

package/dist/components.css

@@ -1,56 +1,38 @@
+.sui-Box {
+  /* Box has no tone by default, therefore we set --tone-surface as transparent */
+  --tone-surface: transparent;
+  background-color: var(--tone-surface);
+}
 .sui-Card {
-  background-color: transparent;
-  border-width: 1px;
-  border-style: solid;
-  border-color: transparent;
-}
-
-/** -----------------------------------
-  * TONE: custom properties
-  * ---------------------------------*/
-
-.sui-Card:where(.sui-tone-neutral) {
-  --surface-tone: var(--tone-neutral-normal-surface);
-  --strong-surface-tone: var(--tone-neutral-strong-surface);
-}
-
-.sui-Card:where(.sui-tone-primary) {
-  --surface-tone: var(--tone-primary-normal-surface);
-  --strong-surface-tone: var(--tone-primary-strong-surface);
-}
-
-.sui-Card:where(.sui-tone-positive) {
-  --surface-tone: var(--tone-positive-normal-surface);
-  --strong-surface-tone: var(--tone-positive-strong-surface);
-}
-
-.sui-Card:where(.sui-tone-suggest) {
-  --surface-tone: var(--tone-suggest-normal-surface);
-  --strong-surface-tone: var(--tone-suggest-strong-surface);
-}
-
-.sui-Card:where(.sui-tone-caution) {
-  --surface-tone: var(--tone-caution-normal-surface);
-  --strong-surface-tone: var(--tone-caution-strong-surface);
-}
-
-.sui-Card:where(.sui-tone-critical) {
-  --surface-tone: var(--tone-critical-normal-surface);
-  --strong-surface-tone: var(--tone-critical-strong-surface);
-}
-
-/** -----------------------------------
-  * TONE: application of custom properties by tone level
-  * ---------------------------------*/
-
-.sui-Card:where(.sui-tone-level-muted) {
-  border-color: var(--surface-tone);
-}
-
-.sui-Card:where(.sui-tone-level-normal) {
-  background-color: var(--surface-tone);
-}
-
-.sui-Card:where(.sui-tone-level-strong) {
-  background-color: var(--strong-surface-tone);
+  /* 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 {
+  /* Flex has no tone by default, therefore we set --tone-surface as transparent */
+  --tone-surface: transparent;
+  background-color: var(--tone-surface);
+}
+.sui-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

@@ -27,7 +27,7 @@ export declare function Box<T extends React_2.ElementType = 'div'>({
 }: 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 */
@@ -38,20 +38,17 @@ export declare interface BoxProps<T extends React_2.ElementType> extends LayoutP
 export declare function Card<T extends React_2.ElementType = 'div'>({
   density,
   tone,
-  toneLevel,
   ...props
 }: CardProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof CardProps<T>>): JSX.Element
 
 /** @public */
-declare interface CardProps<T extends React.ElementType> extends MarginProps {
+declare interface CardProps<T extends React.ElementType> extends MarginProps, ToneProps {
   /** Element to render */
   as?: T
   /** CSS **display** property */
   display?: Responsive<DisplayBlock>
   /** Composite prop for setting padding and border radius */
   density?: Responsive<Density>
-  tone?: Tone
-  toneLevel?: ToneLevel
 }
 
 declare const DENSITY: readonly ['compact', 'regular', 'loose']
@@ -71,7 +68,10 @@ declare type DisplayFlex = (typeof DISPLAY_FLEX)[number]
 declare type DisplayGrid = (typeof DISPLAY_GRID)[number]
 
 /** @public */
-export declare function Divider(): JSX.Element
+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'>({
@@ -106,7 +106,7 @@ declare type FlexParentProps = {
 }
 
 /** @public */
-export declare interface FlexProps<T extends React_2.ElementType>
+declare interface FlexProps<T extends React.ElementType>
   extends FlexParentProps, GapProps, LayoutProps {
   /** Element to render */
   as?: T
@@ -168,7 +168,7 @@ declare type GridParentProps = {
 }
 
 /** @public */
-export declare interface GridProps<T extends React_2.ElementType>
+declare interface GridProps<T extends React.ElementType>
   extends GridParentProps, GapProps, LayoutProps {
   /** Element to render */
   as?: T
@@ -177,7 +177,7 @@ export declare interface GridProps<T extends React_2.ElementType>
 }
 
 /** @public */
-export declare function Heading<T extends React_2.ElementType = 'h1'>({
+export declare function Heading<T extends React_2.ElementType = 'h2'>({
   size,
   weight,
   ...props
@@ -230,7 +230,8 @@ declare interface LayoutProps
     PositionProps,
     OverflowProps,
     FlexChildProps,
-    GridChildProps {}
+    GridChildProps,
+    ShadowProps {}
 
 declare type MarginProps = {
   /** CSS **margin** property */
@@ -329,6 +330,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]
@@ -338,7 +344,7 @@ declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'auto']
 declare type SpaceAuto = (typeof SPACE_AUTO)[number]
 
 /** @public */
-declare function Text_2<T extends React_2.ElementType = 'p'>({
+declare function Text_2<T extends React_2.ElementType = 'span'>({
   size,
   ...props
 }: TextProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof TextProps<T>>): JSX.Element
@@ -351,7 +357,7 @@ 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 {
+declare interface TextProps<T extends React.ElementType> extends TypographyProps {
   /** Element to render */
   as?: T
   /** CSS **font-size** property */
@@ -360,21 +366,24 @@ export declare interface TextProps<T extends React_2.ElementType> extends Typogr
 
 declare type TextSize = (typeof TEXT_SIZE)[number]
 
-declare const TONE: readonly ['neutral', 'primary', 'positive', 'suggest', 'caution', 'critical']
+declare const TONE: readonly [
+  'none',
+  'neutral',
+  'primary',
+  'positive',
+  'suggest',
+  'caution',
+  'critical',
+]
 
 declare type Tone = (typeof TONE)[number]
 
-declare const TONE_LEVEL: string[]
-
-declare type ToneLevel = (typeof TONE_LEVEL)[number]
-
 declare type ToneProps = {
   /** CSS **background-color** property */
   tone?: Tone
-  toneLevel?: ToneLevel
 }
 
-declare interface TypographyProps extends MarginProps {
+declare interface TypographyProps extends MarginProps, ToneProps {
   /** CSS **text-align** property */
   align?: TextAlign
   /** CSS **-webkit-line-clamp** property */

package/dist/index.js

@@ -1,5 +1,59 @@
 import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
+const PREFIX = "sui", BREAKPOINTS_LENGTH = 7;
+function getProps(componentProps, propDefs) {
+  const { allComponentProps, allPropDefs } = flattenCompositeProps(componentProps, propDefs), restProps = {};
+  let className = componentProps?.className || "", style = componentProps?.style || {};
+  for (const key in allComponentProps) {
+    const propDef = allPropDefs?.[key], propValue = allComponentProps[key];
+    if (!propDef || !("className" in propDef) || !propDef.className) {
+      restProps[key] = propValue;
+      continue;
+    }
+    if (Array.isArray(propValue))
+      for (let i = 0, len = Math.min(propValue.length, BREAKPOINTS_LENGTH); i < len; i++)
+        className = classNames(className, getClassName(propValue[i], propDef, i)), style = { ...style, ...getStyle(propValue[i], propDef, i) };
+    else
+      className = classNames(className, getClassName(propValue, propDef)), style = { ...style, ...getStyle(propValue, propDef) };
+  }
+  return { ...restProps, className, style };
+}
+function getClassName(propValue, propDef, bp) {
+  return propDef.type === "union" && propDef.values?.includes(propValue) ? `${PREFIX}-${propDef.className}${typeof propValue == "string" ? `-${propValue}` : propValue}${bp ? `-bp-${bp}` : ""}` : propDef.type === "string" || propDef.type === "number" ? `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ""}` : propDef.type === "boolean" ? `${PREFIX}-${propValue ? propDef.className : propDef.inverse}${bp ? `-bp-${bp}` : ""}` : "";
+}
+function getStyle(propValue, propDef, bp) {
+  return propDef.type === "string" || propDef.type === "number" ? {
+    [`${propDef.variable}${bp ? `-bp-${bp}` : ""}`]: propValue
+  } : {};
+}
+function flattenCompositeProps(componentProps, propDefs) {
+  const props = {
+    allComponentProps: {},
+    allPropDefs: {}
+  };
+  for (const key in componentProps)
+    if (propDefs?.[key] && propDefs?.[key].type === "composite")
+      for (const compositeKey in propDefs?.[key].composition) {
+        const compositeValue = getCompositeValue(componentProps[key], propDefs[key], compositeKey);
+        props.allComponentProps[compositeKey] = compositeValue, props.allPropDefs[compositeKey] = propDefs[key].composition[compositeKey]?.propDef;
+      }
+    else
+      props.allComponentProps[key] = componentProps[key], props.allPropDefs[key] = propDefs?.[key];
+  return props;
+}
+function getCompositeValue(propValue, propDef, key) {
+  if (!("composition" in propDef))
+    return;
+  const mapping = propDef.composition[key]?.mapping;
+  let compositeValue;
+  if (Array.isArray(propValue)) {
+    compositeValue = [];
+    for (let i = 0, len = propValue.length; i < len; i++)
+      compositeValue[i] = mapping?.[propValue[i]];
+  } else
+    compositeValue = mapping?.[propValue];
+  return compositeValue;
+}
 const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
   border: {
     type: "boolean",
@@ -218,16 +272,25 @@ const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
     className: "z-index",
     variable: "--z-index"
   }
-}, TONE = ["neutral", "primary", "positive", "suggest", "caution", "critical"], TONE_LEVEL = ["muted", "normal", "strong"], toneProps = {
+}, SHADOW = [0, 1, 2, 3, 4, 5], shadowProps = {
+  shadow: {
+    type: "union",
+    className: "shadow",
+    values: SHADOW
+  }
+}, TONE = [
+  "none",
+  "neutral",
+  "primary",
+  "positive",
+  "suggest",
+  "caution",
+  "critical"
+], toneProps = {
   tone: {
     type: "union",
     className: "tone",
     values: TONE
-  },
-  toneLevel: {
-    type: "union",
-    className: "tone-level",
-    values: TONE_LEVEL
   }
 }, widthProps = {
   width: {
@@ -255,33 +318,9 @@ const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
   ...positionProps,
   ...overflowProps,
   ...flexChildProps,
-  ...gridChildProps
-}, 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, 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, propDef, bp) {
-  return propDef.type === "string" || propDef.type === "number" ? {
-    [`${propDef.variable}${bp ? `-bp-${bp}` : ""}`]: prop
-  } : {};
-}
-const boxProps = {
+  ...gridChildProps,
+  ...shadowProps
+}, DISPLAY_BLOCK = ["block", "inline-block", "none"], DISPLAY_FLEX = ["flex", "inline-flex", "none"], DISPLAY_GRID = ["grid", "inline-grid", "none"], boxProps = {
   as: {
     type: "string"
   },
@@ -299,7 +338,7 @@ function Box({
   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 = {
+const DENSITY = ["compact", "regular", "loose"], cardProps = {
   as: {
     type: "string"
   },
@@ -310,10 +349,24 @@ const cardProps = {
   },
   density: {
     type: "composite",
+    values: DENSITY,
     composition: {
-      compact: "sui-p3 sui-radius2",
-      regular: "sui-p4 sui-radius3",
-      loose: "sui-p5 sui-radius4"
+      padding: {
+        propDef: paddingProps.padding,
+        mapping: {
+          compact: 3,
+          regular: 4,
+          loose: 5
+        }
+      },
+      radius: {
+        propDef: borderProps.radius,
+        mapping: {
+          compact: 2,
+          regular: 3,
+          loose: 4
+        }
+      }
     }
   },
   ...toneProps,
@@ -321,22 +374,33 @@ const cardProps = {
 };
 function Card({
   density = "regular",
-  tone = "neutral",
-  toneLevel = "normal",
+  tone = "none",
   ...props
 }) {
-  const { as, children, className, style, ...rest } = getProps(
-    { density, tone, toneLevel, ...props },
-    cardProps
+  const { as, children, className, style, ...rest } = getProps({ density, tone, ...props }, cardProps);
+  return /* @__PURE__ */ jsx(
+    as || "div",
+    {
+      className: classNames("sui-Card sui-border", className),
+      style,
+      "data-ui": "Card",
+      ...rest,
+      children
+    }
   );
-  return /* @__PURE__ */ jsx(as || "div", { className: classNames("sui-Card", className), style, "data-ui": "Card", ...rest, children });
 }
-function Divider() {
+const dividerProps = {
+  ...marginProps
+};
+function Divider(props) {
+  const { className, style, ...rest } = getProps(props, dividerProps);
   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"
+      className: classNames("sui-Divider sui-border-none sui-border-top", className),
+      style,
+      "data-ui": "Divider",
+      ...rest
     }
   );
 }
@@ -476,7 +540,8 @@ const FONT_WEIGHT = ["regular", "medium", "semibold", "bold"], TEXT_ALIGN = ["le
     className: "weight",
     values: FONT_WEIGHT
   },
-  ...marginProps
+  ...marginProps,
+  ...toneProps
 }, HEADING_TAG = ["h1", "h2", "h3", "h4", "h5", "h6"], HEADING_SIZE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], headingProps = {
   as: {
     type: "union",
@@ -494,7 +559,7 @@ function Heading({
   weight = "bold",
   ...props
 }) {
-  const { as, children, className, style, ...rest } = getProps({ size, weight, ...props }, headingProps), Component = as || "h1";
+  const { as, children, className, style, ...rest } = getProps({ size, weight, ...props }, headingProps), Component = as || "h2";
   return props.lineClamp && props.trim ? /* @__PURE__ */ jsx(
     Component,
     {
@@ -530,7 +595,7 @@ function Text({
   size = 2,
   ...props
 }) {
-  const { as, children, className, style, ...rest } = getProps({ size, ...props }, textProps), Component = as || "p";
+  const { as, children, className, style, ...rest } = getProps({ size, ...props }, textProps), Component = as || "span";
   return props.lineClamp && props.trim ? /* @__PURE__ */ jsx(
     Component,
     {