@sanity-labs/ui-poc 0.0.1-alpha.12 → 0.0.1-alpha.13

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import type {ComponentProps} from 'react'
-import type {ComponentPropsWithRef} from 'react'
-import type {ElementType} from 'react'
+import {ComponentPropsWithRef} from 'react'
+import {ElementType} from 'react'
 import {JSX} from 'react/jsx-runtime'
 import type {SVGProps} from 'react'
 
@@ -177,11 +177,11 @@ declare type FontWeight = (typeof FONT_WEIGHT)[number]
 
 declare type GapProps = {
   /** CSS **gap** property */
-  gap?: Responsive<Space>
+  gap?: Responsive<SpaceInherit>
   /** CSS **row-gap** property */
-  rowGap?: Responsive<Space>
+  rowGap?: Responsive<SpaceInherit>
   /** CSS **column-gap** property */
-  columnGap?: Responsive<Space>
+  columnGap?: Responsive<SpaceInherit>
 }
 
 /** @public */
@@ -263,6 +263,17 @@ declare type HeightProps = {
   maxHeight?: Responsive<string>
 }
 
+/** @public */
+export declare function HStack<T extends ElementType = 'div'>(
+  props: HStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof HStackProps<T>>,
+): JSX.Element
+
+/** @public */
+declare interface HStackProps<T extends React.ElementType> extends Pick<GapProps, 'gap'> {
+  /** Element to render */
+  as?: T
+}
+
 /** @public */
 export declare function Icon({icon: Component, size, ...props}: IconProps): JSX.Element
 
@@ -280,6 +291,21 @@ declare interface IconProps extends ComponentProps<'svg'>, MarginProps, ToneProp
 
 declare type IconSize = (typeof ICON_SIZE)[number]
 
+/** @deprecated Use HStack component instead */
+/** @public */
+export declare function Inline<T extends ElementType = 'div'>(
+  props: InlineProps<T> & Omit<ComponentPropsWithRef<T>, keyof InlineProps<T>>,
+): JSX.Element
+
+/** @deprecated Use HStack component instead */
+/** @public */
+declare interface InlineProps<T extends React.ElementType> extends PaddingProps {
+  /** Element to render */
+  as?: T
+  /** CSS **gap** property */
+  gap?: Responsive<SpaceInherit>
+}
+
 declare const JUSTIFY_CONTENT: readonly [
   'flex-start',
   'flex-end',
@@ -315,21 +341,36 @@ declare interface LayoutProps
     ZIndexProps,
     ShadowProps {}
 
+/** @beta */
+export declare function Link({underlined, ...props}: LinkProps): JSX.Element
+
+/** @beta */
+declare interface LinkProps extends React.ComponentProps<'a'> {
+  /** If true, sets `target="_blank"` and `rel="noopener noreferrer"` */
+  openInNewTab?: boolean
+  /**
+   * If true, sets `text-decoration: underline`
+   *
+   * @defaultValue true
+   */
+  underlined?: boolean
+}
+
 declare type MarginProps = {
   /** CSS **margin** property */
-  margin?: Responsive<SpaceAuto>
+  margin?: Responsive<SpaceAutoNegative>
   /** CSS **margin-left** and **margin-right** properties */
-  marginX?: Responsive<SpaceAuto>
+  marginX?: Responsive<SpaceAutoNegative>
   /** CSS **margin-top** and **margin-bottom** properties */
-  marginY?: Responsive<SpaceAuto>
+  marginY?: Responsive<SpaceAutoNegative>
   /** CSS **margin-top** property */
-  marginTop?: Responsive<SpaceAuto>
+  marginTop?: Responsive<SpaceAutoNegative>
   /** CSS **margin-right** property */
-  marginRight?: Responsive<SpaceAuto>
+  marginRight?: Responsive<SpaceAutoNegative>
   /** CSS **margin-bottom** property */
-  marginBottom?: Responsive<SpaceAuto>
+  marginBottom?: Responsive<SpaceAutoNegative>
   /** CSS **margin-left** property */
-  marginLeft?: Responsive<SpaceAuto>
+  marginLeft?: Responsive<SpaceAutoNegative>
 }
 
 declare const OVERFLOW: readonly ['visible', 'hidden', 'auto', 'scroll', 'clip']
@@ -421,14 +462,60 @@ declare type ShadowProps = {
   shadow?: string
 }
 
+/** @beta */
+export declare function SkipToContent(props: SkipToContentProps): JSX.Element
+
+/** @beta */
+declare interface SkipToContentProps extends React.ComponentProps<'a'> {
+  /**
+   * Anchor hash. The target element should be focusable or have `tabindex="-1"` applied.
+   */
+  hash: string
+  /** Use href instead */
+  href?: never
+  /** Visible/announced label */
+  label: string
+  /** Use label instead */
+  children?: never
+}
+
 declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
 declare type Space = (typeof SPACE)[number]
 
 declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'auto']
 
+declare const SPACE_AUTO_NEGATIVE: readonly [
+  -9,
+  -8,
+  -7,
+  -6,
+  -5,
+  -4,
+  -3,
+  -2,
+  -1,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  'auto',
+]
+
+declare const SPACE_INHERIT: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'inherit']
+
 declare type SpaceAuto = (typeof SPACE_AUTO)[number]
 
+declare type SpaceAutoNegative = (typeof SPACE_AUTO_NEGATIVE)[number]
+
+declare type SpaceInherit = (typeof SPACE_INHERIT)[number]
+
 /** @beta */
 export declare function Switch(props: SwitchProps): JSX.Element
 
@@ -463,15 +550,7 @@ declare interface TextProps<T extends React.ElementType> extends TypographyProps
 
 declare type TextSize = (typeof TEXT_SIZE)[number]
 
-declare const TONE: readonly [
-  'none',
-  'neutral',
-  'primary',
-  'positive',
-  'suggest',
-  'caution',
-  'critical',
-]
+declare const TONE: readonly ['neutral', 'positive', 'suggest', 'caution', 'critical']
 
 declare type Tone = (typeof TONE)[number]
 
@@ -502,6 +581,19 @@ export declare function VisuallyHidden<T extends ElementType = 'span'>(
 declare interface VisuallyHiddenProps<T extends React.ElementType> {
   /** Element to render */
   as?: T
+  /** If true, element is visible on :focus-visible */
+  visibleOnFocus?: boolean
+}
+
+/** @public */
+export declare function VStack<T extends ElementType = 'div'>(
+  props: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>,
+): JSX.Element
+
+/** @public */
+declare interface VStackProps<T extends React.ElementType> extends Pick<GapProps, 'gap'> {
+  /** Element to render */
+  as?: T
 }
 
 declare type WidthProps = {

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import { RemoveIcon, CheckmarkIcon } from "@sanity/icons";
-import { useRef, useEffect, lazy, Suspense } from "react";
+import { useRef, useEffect, lazy, Suspense, useMemo, Children } from "react";
 const PREFIX = "sui", BREAKPOINTS_LENGTH = 6;
 function getProps(componentProps, propDefs) {
   const { allComponentProps, allPropDefs } = flattenCompositeProps(componentProps, propDefs), restProps = {};
@@ -21,7 +21,17 @@ function getProps(componentProps, propDefs) {
   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.inverseClassName}${bp ? `-bp-${bp}` : ""}` : "";
+  if (propDef.type === "union" && propDef.values?.includes(propValue))
+    return `${PREFIX}-${propDef.className}${typeof propValue == "string" ? `-${propValue}` : propValue}${bp ? `-bp-${bp}` : ""}`;
+  if (propDef.type === "string" || propDef.type === "number")
+    return `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ""}`;
+  if (propDef.type === "boolean") {
+    if (propValue)
+      return `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ""}`;
+    if (!propValue && propDef.inverseClassName)
+      return `${PREFIX}-${propDef.inverseClassName}${bp ? `-bp-${bp}` : ""}`;
+  }
+  return "";
 }
 function getStyle(propValue, propDef, bp) {
   return propDef.type === "string" || propDef.type === "number" ? {
@@ -150,41 +160,41 @@ const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
     className: "max-height",
     variable: "--max-height"
   }
-}, SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], SPACE_AUTO = [...SPACE, "auto"], marginProps = {
+}, SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], SPACE_AUTO = [...SPACE, "auto"], SPACE_INHERIT = [...SPACE, "inherit"], SPACE_AUTO_NEGATIVE = [-9, -8, -7, -6, -5, -4, -3, -2, -1, ...SPACE, "auto"], marginProps = {
   margin: {
     type: "union",
     className: "m",
-    values: SPACE_AUTO
+    values: SPACE_AUTO_NEGATIVE
   },
   marginX: {
     type: "union",
     className: "mx",
-    values: SPACE_AUTO
+    values: SPACE_AUTO_NEGATIVE
   },
   marginY: {
     type: "union",
     className: "my",
-    values: SPACE_AUTO
+    values: SPACE_AUTO_NEGATIVE
   },
   marginTop: {
     type: "union",
     className: "mt",
-    values: SPACE_AUTO
+    values: SPACE_AUTO_NEGATIVE
   },
   marginRight: {
     type: "union",
     className: "mr",
-    values: SPACE_AUTO
+    values: SPACE_AUTO_NEGATIVE
   },
   marginBottom: {
     type: "union",
     className: "mb",
-    values: SPACE_AUTO
+    values: SPACE_AUTO_NEGATIVE
   },
   marginLeft: {
     type: "union",
     className: "ml",
-    values: SPACE_AUTO
+    values: SPACE_AUTO_NEGATIVE
   }
 }, OVERFLOW = ["visible", "hidden", "auto", "scroll", "clip"], overflowProps = {
   overflow: {
@@ -275,15 +285,7 @@ const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
     className: "shadow",
     values: SHADOW
   }
-}, TONE = [
-  "none",
-  "neutral",
-  "primary",
-  "positive",
-  "suggest",
-  "caution",
-  "critical"
-], toneProps = {
+}, TONE = ["neutral", "positive", "suggest", "caution", "critical"], toneProps = {
   tone: {
     type: "union",
     className: "tone",
@@ -342,7 +344,23 @@ 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 DENSITY = ["compact", "regular", "loose"], cardProps = {
+const gapProps = {
+  gap: {
+    type: "union",
+    className: "gap",
+    values: SPACE_INHERIT
+  },
+  rowGap: {
+    type: "union",
+    className: "row-gap",
+    values: SPACE_INHERIT
+  },
+  columnGap: {
+    type: "union",
+    className: "column-gap",
+    values: SPACE_INHERIT
+  }
+}, DENSITY = ["compact", "regular", "loose"], cardProps = {
   as: {
     type: "string"
   },
@@ -350,6 +368,14 @@ const DENSITY = ["compact", "regular", "loose"], cardProps = {
     type: "composite",
     values: DENSITY,
     composition: {
+      gap: {
+        propDef: gapProps.gap,
+        mapping: {
+          compact: 2,
+          regular: 3,
+          loose: 4
+        }
+      },
       padding: {
         propDef: paddingProps.padding,
         mapping: {
@@ -373,7 +399,7 @@ const DENSITY = ["compact", "regular", "loose"], cardProps = {
 };
 function Card({
   density = "regular",
-  tone = "none",
+  tone = "neutral",
   ...props
 }) {
   const { as, children, className, style, ...rest } = getProps({ density, tone, ...props }, cardProps);
@@ -471,6 +497,10 @@ function Label(props) {
 const visuallyHiddenProps = {
   as: {
     type: "string"
+  },
+  visibleOnFocus: {
+    type: "boolean",
+    className: "VisuallyHidden-Visible"
   }
 };
 function VisuallyHidden(props) {
@@ -521,7 +551,7 @@ function Checkbox(props) {
           Box,
           {
             as: "span",
-            className: "sui-CheckboxMark",
+            className: "sui-CheckboxMark sui-tone-neutral",
             position: "relative",
             radius: 2,
             width: "17px",
@@ -635,25 +665,9 @@ const ALIGN_ITEMS = ["baseline", "center", "flex-end", "flex-start", "stretch"],
   },
   flexWrap: {
     type: "union",
-    className: "flex-wrap",
+    className: "flex",
     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"
@@ -720,6 +734,29 @@ function Grid({
   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 hStackProps = {
+  as: {
+    type: "string"
+  },
+  gap: gapProps.gap
+};
+function HStack(props) {
+  const { as, children, className, style, ...rest } = getProps(props, hStackProps);
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      as: as || "div",
+      className: classNames("sui-HStack", className),
+      style,
+      "data-ui": "HStack",
+      display: "inline-flex",
+      alignItems: "center",
+      flexWrap: "wrap",
+      ...rest,
+      children
+    }
+  );
+}
 const HEADING_TAG = ["h1", "h2", "h3", "h4", "h5", "h6"], HEADING_SIZE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], headingProps = {
   as: {
     type: "union",
@@ -780,6 +817,130 @@ function Icon({ icon: Component, size = 2, ...props }) {
     }
   );
 }
+const inlineProps = {
+  as: {
+    type: "string"
+  },
+  gap: {
+    type: "composite",
+    values: SPACE,
+    composition: {
+      marginTop: {
+        propDef: marginProps.marginTop,
+        mapping: {
+          0: 0,
+          1: -1,
+          2: -2,
+          3: -3,
+          4: -4,
+          5: -5,
+          6: -6,
+          7: -7,
+          8: -8,
+          9: -9
+        }
+      },
+      marginLeft: {
+        propDef: marginProps.marginLeft,
+        mapping: {
+          0: 0,
+          1: -1,
+          2: -2,
+          3: -3,
+          4: -4,
+          5: -5,
+          6: -6,
+          7: -7,
+          8: -8,
+          9: -9
+        }
+      }
+    }
+  },
+  ...paddingProps
+}, inlineChildrenProps = {
+  gap: {
+    type: "composite",
+    values: SPACE,
+    composition: {
+      paddingTop: {
+        propDef: paddingProps.paddingTop,
+        mapping: {
+          0: 0,
+          1: 1,
+          2: 2,
+          3: 3,
+          4: 4,
+          5: 5,
+          6: 6,
+          7: 7,
+          8: 8,
+          9: 9
+        }
+      },
+      paddingLeft: {
+        propDef: paddingProps.paddingLeft,
+        mapping: {
+          0: 0,
+          1: 1,
+          2: 2,
+          3: 3,
+          4: 4,
+          5: 5,
+          6: 6,
+          7: 7,
+          8: 8,
+          9: 9
+        }
+      }
+    }
+  }
+};
+function Inline(props) {
+  const { as, children: childrenProp, className, style, ...rest } = getProps(props, inlineProps), { className: childrenClassName } = getProps(props, inlineChildrenProps), Component = as || "div", children = useMemo(
+    () => Children.map(
+      childrenProp,
+      (child) => child && /* @__PURE__ */ jsx("div", { className: childrenClassName, children: child })
+    ),
+    [childrenProp]
+  );
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classNames("sui-Inline", className),
+      style,
+      "data-ui": "Inline",
+      ...rest,
+      children
+    }
+  );
+}
+const linkProps = {
+  openInNewTab: {
+    type: "boolean"
+  },
+  underlined: {
+    type: "boolean",
+    className: "Link-Underlined"
+  }
+};
+function Link({ underlined = !0, ...props }) {
+  const { children, className, style, openInNewTab, ...rest } = getProps(
+    { underlined, ...props },
+    linkProps
+  );
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: classNames("sui-Link", className),
+      style,
+      "data-ui": "Link",
+      ...openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      ...rest,
+      children
+    }
+  );
+}
 const radioProps = {
   label: {
     type: "string"
@@ -801,7 +962,7 @@ function Radio(props) {
           Box,
           {
             as: "span",
-            className: "sui-RadioMark",
+            className: "sui-RadioMark sui-tone-neutral",
             position: "relative",
             radius: "full",
             width: "17px",
@@ -813,6 +974,34 @@ function Radio(props) {
     }
   );
 }
+const skipToContentProps = {
+  hash: {
+    type: "string"
+  },
+  label: {
+    type: "string"
+  }
+};
+function SkipToContent(props) {
+  const { className, hash, label, style, ...rest } = getProps(props, skipToContentProps);
+  return /* @__PURE__ */ jsx(
+    VisuallyHidden,
+    {
+      as: Link,
+      href: hash,
+      underlined: !1,
+      className: classNames(
+        "sui-SkipToContent sui-position-absolute sui-top2 sui-left2 sui-display-inline-block sui-z-index sui-py2 sui-px3 sui-radius2 sui-text-body1",
+        className
+      ),
+      style,
+      "data-ui": "SkipToContent",
+      visibleOnFocus: !0,
+      ...rest,
+      children: /* @__PURE__ */ jsx(Text, { size: 1, children: label })
+    }
+  );
+}
 const switchProps = {
   label: {
     type: "string"
@@ -849,7 +1038,7 @@ function Switch(props) {
           Box,
           {
             as: "span",
-            className: "sui-SwitchMark",
+            className: "sui-SwitchMark sui-tone-neutral",
             position: "relative",
             radius: 6,
             width: "25px",
@@ -862,6 +1051,27 @@ function Switch(props) {
     }
   );
 }
+const vStackProps = {
+  as: {
+    type: "string"
+  },
+  gap: gapProps.gap
+};
+function VStack(props) {
+  const { as, children, className, style, ...rest } = getProps(props, vStackProps);
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      as: as || "div",
+      className: classNames("sui-VStack", className),
+      style,
+      "data-ui": "VStack",
+      flexDirection: "column",
+      ...rest,
+      children
+    }
+  );
+}
 export {
   Box,
   Card,
@@ -871,12 +1081,17 @@ export {
   Divider,
   Flex,
   Grid,
+  HStack,
   Heading,
   Icon,
+  Inline,
   Label,
+  Link,
   Radio,
+  SkipToContent,
   Switch,
   Text,
+  VStack,
   VisuallyHidden
 };
 //# sourceMappingURL=index.js.map