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

package/dist/index.d.ts

@@ -1,5 +1,8 @@
+import type {ComponentProps} from 'react'
+import type {ComponentPropsWithRef} from 'react'
+import type {ElementType} from 'react'
 import {JSX} from 'react/jsx-runtime'
-import {default as React_2} from 'react'
+import type {SVGProps} from 'react'
 
 declare const ALIGN_ITEMS: readonly ['baseline', 'center', 'flex-end', 'flex-start', 'stretch']
 
@@ -21,10 +24,10 @@ declare type BorderProps = {
 }
 
 /** @public */
-export declare function Box<T extends React_2.ElementType = 'div'>({
+export declare function Box<T extends ElementType = 'div'>({
   display,
   ...props
-}: BoxProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element
+}: BoxProps<T> & Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element
 
 /** @public */
 declare interface BoxProps<T extends React.ElementType> extends LayoutProps {
@@ -35,11 +38,11 @@ declare interface BoxProps<T extends React.ElementType> extends LayoutProps {
 }
 
 /** @public */
-export declare function Card<T extends React_2.ElementType = 'div'>({
+export declare function Card<T extends ElementType = 'div'>({
   density,
   tone,
   ...props
-}: CardProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof CardProps<T>>): JSX.Element
+}: CardProps<T> & Omit<ComponentPropsWithRef<T>, keyof CardProps<T>>): JSX.Element
 
 /** @public */
 declare interface CardProps<T extends React.ElementType> extends MarginProps, ToneProps {
@@ -49,6 +52,17 @@ declare interface CardProps<T extends React.ElementType> extends MarginProps, To
   density?: Responsive<Density>
 }
 
+/** @beta */
+export declare function Checkbox(props: CheckboxProps): JSX.Element
+
+/** @beta */
+declare interface CheckboxProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Input label */
+  label: React.ReactNode
+  /** Indeterminate state */
+  indeterminate?: boolean
+}
+
 /** @public */
 export declare function Code<T extends React.ElementType = 'pre'>({
   size,
@@ -75,10 +89,10 @@ 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'>({
+export declare function Container<T extends ElementType = 'div'>({
   marginX,
   ...props
-}: ContainerProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof ContainerProps<T>>): JSX.Element
+}: ContainerProps<T> & Omit<ComponentPropsWithRef<T>, keyof ContainerProps<T>>): JSX.Element
 
 declare const CONTAINER_SIZE: readonly [0, 1, 2, 3, 4, 5]
 
@@ -115,10 +129,10 @@ export declare function Divider(props: DividerProps): JSX.Element
 declare interface DividerProps extends React.ComponentProps<'hr'>, MarginProps {}
 
 /** @public */
-export declare function Flex<T extends React_2.ElementType = 'div'>({
+export declare function Flex<T extends ElementType = 'div'>({
   display,
   ...props
-}: FlexProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element
+}: FlexProps<T> & Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element
 
 declare const FLEX_DIRECTION: readonly ['row', 'row-reverse', 'column', 'column-reverse']
 
@@ -171,10 +185,10 @@ declare type GapProps = {
 }
 
 /** @public */
-export declare function Grid<T extends React_2.ElementType = 'div'>({
+export declare function Grid<T extends ElementType = 'div'>({
   display,
   ...props
-}: GridProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof GridProps<T>>): JSX.Element
+}: GridProps<T> & Omit<ComponentPropsWithRef<T>, keyof GridProps<T>>): JSX.Element
 
 declare const GRID_AUTO_FLOW: readonly ['row', 'column', 'row dense', 'column dense', 'dense']
 
@@ -218,11 +232,11 @@ declare interface GridProps<T extends React.ElementType>
 }
 
 /** @public */
-export declare function Heading<T extends React_2.ElementType = 'h2'>({
+export declare function Heading<T extends ElementType = 'h2'>({
   size,
   weight,
   ...props
-}: HeadingProps & Omit<React_2.ComponentPropsWithRef<T>, keyof HeadingProps>): JSX.Element
+}: HeadingProps & Omit<ComponentPropsWithRef<T>, keyof HeadingProps>): JSX.Element
 
 declare const HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
@@ -255,9 +269,9 @@ export declare function Icon({icon: Component, size, ...props}: IconProps): JSX.
 declare const ICON_SIZE: readonly [0, 1, 2, 3, 4]
 
 /** @public */
-declare interface IconProps extends React_2.ComponentProps<'svg'>, MarginProps, ToneProps {
+declare interface IconProps extends ComponentProps<'svg'>, MarginProps, ToneProps {
   /** Icon to render */
-  icon: React_2.ComponentType<React_2.SVGProps<SVGSVGElement>>
+  icon: React.ComponentType<SVGProps<SVGSVGElement>>
   /** CSS **font-size** property */
   size?: Responsive<IconSize>
   /** CSS **color** property */
@@ -277,6 +291,15 @@ declare const JUSTIFY_CONTENT: readonly [
 
 declare type JustifyContent = (typeof JUSTIFY_CONTENT)[number]
 
+/** @beta */
+export declare function Label(props: LabelProps): JSX.Element
+
+/** @beta */
+declare interface LabelProps extends React.ComponentProps<'label'>, MarginProps {
+  /** Element to render */
+  disabled?: boolean
+}
+
 declare interface LayoutProps
   extends
     ToneProps,
@@ -358,6 +381,15 @@ declare type PositionProps = {
   left?: Responsive<SpaceAuto>
 }
 
+/** @beta */
+export declare function Radio(props: RadioProps): JSX.Element
+
+/** @beta */
+declare interface RadioProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Input label */
+  label: React.ReactNode
+}
+
 declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, 'full']
 
 declare type Radius = (typeof RADIUS)[number]
@@ -397,11 +429,22 @@ declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'auto']
 
 declare type SpaceAuto = (typeof SPACE_AUTO)[number]
 
+/** @beta */
+export declare function Switch(props: SwitchProps): JSX.Element
+
+/** @beta */
+declare interface SwitchProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Input label */
+  label: React.ReactNode
+  /** Indeterminate state */
+  indeterminate?: boolean
+}
+
 /** @public */
-declare function Text_2<T extends React_2.ElementType = 'span'>({
+declare function Text_2<T extends ElementType = 'span'>({
   size,
   ...props
-}: TextProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof TextProps<T>>): JSX.Element
+}: TextProps<T> & Omit<ComponentPropsWithRef<T>, keyof TextProps<T>>): JSX.Element
 export {Text_2 as Text}
 
 declare const TEXT_ALIGN: readonly ['left', 'center', 'right', 'justify']
@@ -450,6 +493,17 @@ declare interface TypographyProps extends MarginProps, ToneProps {
   weight?: FontWeight
 }
 
+/** @public */
+export declare function VisuallyHidden<T extends ElementType = 'span'>(
+  props: VisuallyHiddenProps<T> & Omit<ComponentPropsWithRef<T>, keyof VisuallyHiddenProps<T>>,
+): JSX.Element
+
+/** @public */
+declare interface VisuallyHiddenProps<T extends React.ElementType> {
+  /** Element to render */
+  as?: T
+}
+
 declare type WidthProps = {
   /** CSS **width** property */
   width?: Responsive<string>

package/dist/index.js

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { lazy, Suspense } from "react";
+import { RemoveIcon, CheckmarkIcon } from "@sanity/icons";
+import { useRef, useEffect, lazy, Suspense } from "react";
 const PREFIX = "sui", BREAKPOINTS_LENGTH = 6;
 function getProps(componentProps, propDefs) {
   const { allComponentProps, allPropDefs } = flattenCompositeProps(componentProps, propDefs), restProps = {};
@@ -415,7 +416,125 @@ const FONT_WEIGHT = ["regular", "medium", "semibold", "bold"], TEXT_ALIGN = ["le
   },
   ...marginProps,
   ...toneProps
-}, CODE_TAG = ["pre", "span"], CODE_SIZE = [0, 1, 2, 3, 4], codeProps = {
+}, 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 || "span";
+  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 });
+}
+const labelProps = {
+  disabled: {
+    type: "boolean"
+  },
+  ...marginProps
+};
+function Label(props) {
+  const { children, className, style, disabled, ...rest } = getProps(props, labelProps);
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "label",
+      size: 1,
+      muted: disabled,
+      className: classNames(
+        "sui-Label sui-display-flex sui-align-items-center sui-gap2",
+        className
+      ),
+      style,
+      "data-ui": "Label",
+      ...rest,
+      children
+    }
+  );
+}
+const visuallyHiddenProps = {
+  as: {
+    type: "string"
+  }
+};
+function VisuallyHidden(props) {
+  const { as, children, className, style, ...rest } = getProps(props, visuallyHiddenProps);
+  return /* @__PURE__ */ jsx(
+    as || "span",
+    {
+      className: classNames("sui-VisuallyHidden", className),
+      style,
+      "data-ui": "VisuallyHidden",
+      ...rest,
+      children
+    }
+  );
+}
+const checkboxProps = {
+  label: {
+    type: "string"
+  },
+  indeterminate: {
+    type: "boolean"
+  },
+  ...marginProps
+};
+function Checkbox(props) {
+  const inputRef = useRef(null), { className, style, label, indeterminate, ...rest } = getProps(props, checkboxProps);
+  return useEffect(() => {
+    inputRef.current && (inputRef.current.indeterminate = indeterminate);
+  }, [indeterminate]), /* @__PURE__ */ jsxs(
+    Label,
+    {
+      className: classNames("sui-Checkbox", className),
+      style,
+      "data-ui": "Checkbox",
+      disabled: props.disabled,
+      children: [
+        /* @__PURE__ */ jsx(
+          VisuallyHidden,
+          {
+            as: "input",
+            type: "checkbox",
+            className: "sui-CheckboxInput",
+            ref: inputRef,
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "span",
+            className: "sui-CheckboxMark",
+            position: "relative",
+            radius: 2,
+            width: "17px",
+            height: "17px",
+            children: indeterminate ? /* @__PURE__ */ jsx(RemoveIcon, {}) : /* @__PURE__ */ jsx(CheckmarkIcon, {})
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+const CODE_TAG = ["pre", "span"], CODE_SIZE = [0, 1, 2, 3, 4], codeProps = {
   as: {
     type: "union",
     values: CODE_TAG
@@ -661,36 +780,92 @@ function Icon({ icon: Component, size = 2, ...props }) {
     }
   );
 }
-const TEXT_SIZE = [0, 1, 2, 3, 4], textProps = {
-  as: {
+const radioProps = {
+  label: {
     type: "string"
   },
-  size: {
-    type: "union",
-    className: "text-body",
-    values: TEXT_SIZE
+  ...marginProps
+};
+function Radio(props) {
+  const { className, style, label, ...rest } = getProps(props, radioProps);
+  return /* @__PURE__ */ jsxs(
+    Label,
+    {
+      className: classNames("sui-Radio", className),
+      style,
+      "data-ui": "Radio",
+      disabled: props.disabled,
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "radio", className: "sui-RadioInput", ...rest }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "span",
+            className: "sui-RadioMark",
+            position: "relative",
+            radius: "full",
+            width: "17px",
+            height: "17px"
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+const switchProps = {
+  label: {
+    type: "string"
   },
-  ...typographyProps
+  indeterminate: {
+    type: "boolean"
+  },
+  ...marginProps
 };
-function Text({
-  size = 2,
-  ...props
-}) {
-  const { as, children, className, style, ...rest } = getProps({ size, ...props }, textProps), Component = as || "span";
-  return props.lineClamp && props.trim ? /* @__PURE__ */ jsx(
-    Component,
+function Switch(props) {
+  const inputRef = useRef(null), { className, style, label, indeterminate, ...rest } = getProps(props, switchProps);
+  return useEffect(() => {
+    inputRef.current && (inputRef.current.indeterminate = indeterminate);
+  }, [indeterminate]), /* @__PURE__ */ jsxs(
+    Label,
     {
-      className: classNames("sui-Text", className?.replace("sui-line-clamp", "")),
+      className: classNames("sui-Switch", className),
       style,
-      "data-ui": "Text",
-      ...rest,
-      children: /* @__PURE__ */ jsx("span", { className: "sui-line-clamp", children })
+      "data-ui": "Switch",
+      disabled: props.disabled,
+      children: [
+        /* @__PURE__ */ jsx(
+          VisuallyHidden,
+          {
+            as: "input",
+            type: "checkbox",
+            role: "switch",
+            className: "sui-SwitchInput",
+            ref: inputRef,
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "span",
+            className: "sui-SwitchMark",
+            position: "relative",
+            radius: 6,
+            width: "25px",
+            height: "17px",
+            "aria-hidden": "true"
+          }
+        ),
+        label
+      ]
     }
-  ) : /* @__PURE__ */ jsx(Component, { className: classNames("sui-Text", className), style, "data-ui": "Text", ...rest, children });
+  );
 }
 export {
   Box,
   Card,
+  Checkbox,
   Code,
   Container,
   Divider,
@@ -698,6 +873,10 @@ export {
   Grid,
   Heading,
   Icon,
-  Text
+  Label,
+  Radio,
+  Switch,
+  Text,
+  VisuallyHidden
 };
 //# sourceMappingURL=index.js.map