@sanity-labs/ui-poc 0.0.1-scoped.0 → 0.0.1-versioned.0

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import type {ComponentProps} from 'react'
 import {ComponentPropsWithRef} from 'react'
 import {ElementType} from 'react'
 import {JSX} from 'react/jsx-runtime'
-import type {PropsWithChildren} from 'react'
 import type {default as React_2} from 'react'
 import type {SVGProps} from 'react'
 
@@ -641,9 +640,6 @@ declare type Responsive<T> =
       length: 6
     })
 
-/** @public */
-export declare function Root(props: PropsWithChildren): JSX.Element
-
 declare const SHADOW: readonly [0, 1, 2, 3, 4, 5]
 
 declare type Shadow = (typeof SHADOW)[number]

package/dist/index.js

@@ -66,6 +66,10 @@ function getCompositeValue(propValue, propDef, key) {
     compositeValue = mapping?.[propValue];
   return compositeValue;
 }
+const version = "alpha17";
+function getVersionedClassname(classname) {
+  return `${classname}-${version}`;
+}
 const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
   border: {
     type: "boolean",
@@ -342,7 +346,16 @@ function Box({
   ...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 });
+  return /* @__PURE__ */ jsx(
+    as || "div",
+    {
+      className: classNames(getVersionedClassname("sui-Box"), className),
+      style,
+      "data-ui": "Box",
+      ...rest,
+      children
+    }
+  );
 }
 const ALIGN_ITEMS = ["baseline", "center", "flex-end", "flex-start", "stretch"], JUSTIFY_CONTENT = [
   "flex-start",
@@ -406,7 +419,16 @@ function 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 });
+  return /* @__PURE__ */ jsx(
+    as || "div",
+    {
+      className: classNames(getVersionedClassname("sui-Flex"), className),
+      style,
+      "data-ui": "Flex",
+      ...rest,
+      children
+    }
+  );
 }
 const FONT_WEIGHT = ["regular", "medium", "semibold", "bold"], TEXT_ALIGN = ["left", "center", "right", "justify"], typographyProps = {
   align: {
@@ -454,7 +476,7 @@ function Icon({ size = 2, ...props }) {
   return /* @__PURE__ */ jsx(
     Component,
     {
-      className: classNames("sui-Icon", className),
+      className: classNames(getVersionedClassname("sui-Icon"), className),
       "data-ui": "Icon",
       style,
       "aria-hidden": props["aria-label"] ? void 0 : !0,
@@ -475,7 +497,7 @@ function Spinner({ size = 2, ...props }) {
     Icon,
     {
       icon: SpinnerIcon,
-      className: classNames("sui-Spinner", className),
+      className: classNames(getVersionedClassname("sui-Spinner"), className),
       style,
       "data-ui": "Spinner",
       role: "status",
@@ -503,13 +525,25 @@ function Text({
   return props.lineClamp && props.trim ? /* @__PURE__ */ jsx(
     Component,
     {
-      className: classNames("sui-Text", className?.replace("sui-line-clamp", "")),
+      className: classNames(
+        getVersionedClassname("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 });
+  ) : /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classNames(getVersionedClassname("sui-Text"), className),
+      style,
+      "data-ui": "Text",
+      ...rest,
+      children
+    }
+  );
 }
 const BUTTON_DENSITY = ["regular", "loose"], BUTTON_LEVEL = ["primary", "secondary", "tertiary"], BUTTON_TONE = ["neutral", "critical"], buttonProps = {
   as: {
@@ -599,7 +633,7 @@ function Button({
     as || "button",
     {
       className: classNames(
-        "sui-Button",
+        getVersionedClassname("sui-Button"),
         "sui-display-inline-flex sui-align-items-center sui-justify-content-center sui-radius2 sui-position-relative sui-overflow-hidden",
         className
       ),
@@ -664,7 +698,7 @@ function Card({
   return /* @__PURE__ */ jsx(
     as || "div",
     {
-      className: classNames("sui-Card sui-border", className),
+      className: classNames(getVersionedClassname("sui-Card"), "sui-border", className),
       style,
       "data-ui": "Card",
       ...rest,
@@ -690,7 +724,8 @@ function Label(props) {
       size: 1,
       muted: disabled,
       className: classNames(
-        "sui-Label sui-display-flex sui-align-items-center sui-gap2",
+        getVersionedClassname("sui-Label"),
+        "sui-display-flex sui-align-items-center sui-gap2",
         error && "sui-error",
         className
       ),
@@ -707,7 +742,7 @@ const visuallyHiddenProps = {
   },
   visibleOnFocus: {
     type: "boolean",
-    className: "VisuallyHidden-Visible"
+    className: "sui-visually-hidden-visible"
   }
 };
 function VisuallyHidden(props) {
@@ -715,7 +750,7 @@ function VisuallyHidden(props) {
   return /* @__PURE__ */ jsx(
     as || "span",
     {
-      className: classNames("sui-VisuallyHidden", className),
+      className: classNames(getVersionedClassname("sui-VisuallyHidden"), className),
       style,
       "data-ui": "VisuallyHidden",
       ...rest,
@@ -745,7 +780,7 @@ function Checkbox(props) {
   }, [indeterminate]), /* @__PURE__ */ jsxs(
     Label,
     {
-      className: classNames("sui-Checkbox", className),
+      className: classNames(getVersionedClassname("sui-Checkbox"), className),
       style,
       "data-ui": "Checkbox",
       disabled,
@@ -756,7 +791,7 @@ function Checkbox(props) {
           {
             as: "input",
             type: "checkbox",
-            className: "sui-CheckboxInput",
+            className: getVersionedClassname("sui-CheckboxInput"),
             ref: inputRef,
             disabled,
             ...rest
@@ -766,7 +801,7 @@ function Checkbox(props) {
           Box,
           {
             as: "span",
-            className: classNames("sui-CheckboxMark", error && "sui-error"),
+            className: classNames(getVersionedClassname("sui-CheckboxMark"), error && "sui-error"),
             position: "relative",
             radius: 2,
             width: "17px",
@@ -802,10 +837,19 @@ function Code({
   ...props
 }) {
   const { as, children, className, language, style, ...rest } = getProps({ size, ...props }, codeProps), Component = as || "pre";
-  return language ? /* @__PURE__ */ jsx(Component, { className: classNames("sui-Code", className), style, "data-ui": "Code", ...rest, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("code", { children }), children: /* @__PURE__ */ jsx(LazyRefractor, { language, value: children }) }) }) : /* @__PURE__ */ jsx(
+  return language ? /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classNames(getVersionedClassname("sui-Code"), className),
+      style,
+      "data-ui": "Code",
+      ...rest,
+      children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("code", { children }), children: /* @__PURE__ */ jsx(LazyRefractor, { language, value: children }) })
+    }
+  ) : /* @__PURE__ */ jsx(
     Component,
     {
-      className: classNames("sui-Code", className),
+      className: classNames(getVersionedClassname("sui-Code"), className),
       style,
       "data-ui": "Code",
       ...rest,
@@ -832,7 +876,7 @@ function Container({
   return /* @__PURE__ */ jsx(
     as || "div",
     {
-      className: classNames("sui-Container", className),
+      className: classNames(getVersionedClassname("sui-Container"), className),
       style,
       "data-ui": "Container",
       ...rest,
@@ -848,7 +892,11 @@ function Divider(props) {
   return /* @__PURE__ */ jsx(
     "hr",
     {
-      className: classNames("sui-Divider sui-border-none sui-border-top", className),
+      className: classNames(
+        getVersionedClassname("sui-Divider"),
+        "sui-border-none sui-border-top",
+        className
+      ),
       style,
       "data-ui": "Divider",
       ...rest
@@ -899,7 +947,16 @@ function 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 });
+  return /* @__PURE__ */ jsx(
+    as || "div",
+    {
+      className: classNames(getVersionedClassname("sui-Grid"), className),
+      style,
+      "data-ui": "Grid",
+      ...rest,
+      children
+    }
+  );
 }
 const hStackProps = {
   as: {
@@ -913,7 +970,7 @@ function HStack(props) {
     Flex,
     {
       as: as || "div",
-      className: classNames("sui-HStack", className),
+      className: classNames(getVersionedClassname("sui-HStack"), className),
       style,
       "data-ui": "HStack",
       display: "inline-flex",
@@ -945,7 +1002,10 @@ function Heading({
   return props.lineClamp && props.trim ? /* @__PURE__ */ jsx(
     Component,
     {
-      className: classNames("sui-Heading", className?.replace("sui-line-clamp", "")),
+      className: classNames(
+        getVersionedClassname("sui-Heading"),
+        className?.replace("sui-line-clamp", "")
+      ),
       style,
       "data-ui": "Heading",
       ...rest,
@@ -954,7 +1014,7 @@ function Heading({
   ) : /* @__PURE__ */ jsx(
     Component,
     {
-      className: classNames("sui-Heading", className),
+      className: classNames(getVersionedClassname("sui-Heading"), className),
       style,
       "data-ui": "Heading",
       ...rest,
@@ -977,7 +1037,7 @@ function IconButton(props) {
     Button,
     {
       as: as || "button",
-      className: classNames("sui-IconButton", className),
+      className: classNames(getVersionedClassname("sui-IconButton"), className),
       style,
       "data-ui": "IconButton",
       ...rest,
@@ -1006,7 +1066,7 @@ function Indicator({
     Box,
     {
       as: Component,
-      className: classNames("sui-Indicator", className),
+      className: classNames(getVersionedClassname("sui-Indicator"), className),
       style,
       "data-ui": "Indicator",
       width: "5px",
@@ -1031,7 +1091,7 @@ function IndicatorStack(props) {
     HStack,
     {
       as: as || "div",
-      className: classNames("sui-IndicatorStack", className),
+      className: classNames(getVersionedClassname("sui-IndicatorStack"), className),
       style,
       "data-ui": "IndicatorStack",
       ...rest,
@@ -1129,7 +1189,7 @@ function Inline(props) {
   return /* @__PURE__ */ jsx(
     Component,
     {
-      className: classNames("sui-Inline", className),
+      className: classNames(getVersionedClassname("sui-Inline"), className),
       style,
       "data-ui": "Inline",
       ...rest,
@@ -1143,7 +1203,7 @@ const linkProps = {
   },
   underlined: {
     type: "boolean",
-    className: "Link-Underlined"
+    className: "underlined"
   }
 };
 function Link({ underlined = !0, ...props }) {
@@ -1154,7 +1214,7 @@ function Link({ underlined = !0, ...props }) {
   return /* @__PURE__ */ jsx(
     "a",
     {
-      className: classNames("sui-Link", className),
+      className: classNames(getVersionedClassname("sui-Link"), className),
       style,
       "data-ui": "Link",
       ...openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {},
@@ -1202,7 +1262,16 @@ const listItemProps = {
 };
 function ListRoot(props) {
   const { as, children, className, style, ...rest } = getProps(props, {});
-  return /* @__PURE__ */ jsx(as || "ul", { className: classNames("sui-List", className), style, "data-ui": "List", ...rest, children });
+  return /* @__PURE__ */ jsx(
+    as || "ul",
+    {
+      className: classNames(getVersionedClassname("sui-List"), className),
+      style,
+      "data-ui": "List",
+      ...rest,
+      children
+    }
+  );
 }
 function ListItem({ density = "regular", ...props }) {
   const { children, className, style, trailing, ...rest } = getProps(
@@ -1213,7 +1282,7 @@ function ListItem({ density = "regular", ...props }) {
     Flex,
     {
       as: "li",
-      className: classNames("sui-ListItem", className),
+      className: classNames(getVersionedClassname("sui-ListItem"), className),
       style,
       "data-ui": "ListItem",
       alignItems: "center",
@@ -1231,7 +1300,7 @@ function ListItemText(props) {
     Flex,
     {
       as: as || "div",
-      className: classNames("sui-ListItemText", className),
+      className: classNames(getVersionedClassname("sui-ListItemText"), className),
       style,
       "data-ui": "ListItemText",
       flexDirection: "column",
@@ -1251,7 +1320,7 @@ function ListItemImage(props) {
   return /* @__PURE__ */ jsx(
     "img",
     {
-      className: classNames("sui-ListItemImage sui-radius2", className),
+      className: classNames(getVersionedClassname("sui-ListItemImage"), "sui-radius2", className),
       style,
       "data-ui": "ListItemImage",
       ...rest
@@ -1263,24 +1332,6 @@ const List = ListRoot;
 ListRoot.Item = ListItem;
 ListRoot.ItemText = ListItemText;
 ListRoot.ItemImage = ListItemImage;
-const pressAreaProps = {
-  as: {
-    type: "string"
-  }
-};
-function PressArea(props) {
-  const { as, children, className, style, ...rest } = getProps(props, pressAreaProps);
-  return /* @__PURE__ */ jsx(
-    as || "button",
-    {
-      className: classNames("sui-PressArea", "sui-width-full", className),
-      style,
-      "data-ui": "PressArea",
-      ...rest,
-      children
-    }
-  );
-}
 const radioProps = {
   error: {
     type: "boolean"
@@ -1295,7 +1346,7 @@ function Radio(props) {
   return /* @__PURE__ */ jsxs(
     Label,
     {
-      className: classNames("sui-Radio", className),
+      className: classNames(getVersionedClassname("sui-Radio"), className),
       style,
       "data-ui": "Radio",
       disabled,
@@ -1306,7 +1357,7 @@ function Radio(props) {
           {
             as: "input",
             type: "radio",
-            className: "sui-RadioInput",
+            className: getVersionedClassname("sui-RadioInput"),
             disabled,
             ...rest
           }
@@ -1315,7 +1366,7 @@ function Radio(props) {
           Box,
           {
             as: "span",
-            className: classNames("sui-RadioMark", error && "sui-error"),
+            className: classNames(getVersionedClassname("sui-RadioMark"), error && "sui-error"),
             position: "relative",
             radius: "full",
             width: "17px",
@@ -1327,10 +1378,6 @@ function Radio(props) {
     }
   );
 }
-const UI_VERSION = "0.0.1-alpha.17";
-function Root(props) {
-  return /* @__PURE__ */ jsx("div", { "data-ui": "Root", "data-sui-version": UI_VERSION, children: props.children });
-}
 const skipToContentProps = {
   hash: {
     type: "string"
@@ -1348,7 +1395,8 @@ function SkipToContent(props) {
       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",
+        getVersionedClassname("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,
@@ -1373,7 +1421,7 @@ function Switch(props) {
   return /* @__PURE__ */ jsxs(
     Label,
     {
-      className: classNames("sui-Switch", className),
+      className: classNames(getVersionedClassname("sui-Switch"), className),
       style,
       "data-ui": "Switch",
       disabled: props.disabled,
@@ -1385,7 +1433,7 @@ function Switch(props) {
             as: "input",
             type: "checkbox",
             role: "switch",
-            className: "sui-SwitchInput",
+            className: getVersionedClassname("sui-SwitchInput"),
             disabled,
             ...rest
           }
@@ -1394,7 +1442,7 @@ function Switch(props) {
           Flex,
           {
             as: "span",
-            className: classNames("sui-SwitchMark", error && "sui-error"),
+            className: classNames(getVersionedClassname("sui-SwitchMark"), error && "sui-error"),
             alignItems: "center",
             radius: 6,
             "aria-hidden": "true"
@@ -1472,7 +1520,11 @@ function Tooltip({ placement = "bottom", ...props }) {
     /* @__PURE__ */ jsx(
       Box,
       {
-        className: classNames("sui-Tooltip", dismissed ? "sui-Tooltip-Dismissed" : "", className),
+        className: classNames(
+          getVersionedClassname("sui-Tooltip"),
+          dismissed ? getVersionedClassname("sui-Tooltip-Dismissed") : "",
+          className
+        ),
         role: "tooltip",
         style: {
           ...style,
@@ -1509,7 +1561,7 @@ function TooltipGroup(props) {
   return /* @__PURE__ */ jsx(
     Component,
     {
-      className: classNames("sui-TooltipGroup", className),
+      className: classNames(getVersionedClassname("sui-TooltipGroup"), className),
       style: {
         ...style,
         ...isActive && {
@@ -1538,7 +1590,7 @@ function VStack(props) {
     Flex,
     {
       as: as || "div",
-      className: classNames("sui-VStack", className),
+      className: classNames(getVersionedClassname("sui-VStack"), className),
       style,
       "data-ui": "VStack",
       flexDirection: "column",
@@ -1547,6 +1599,24 @@ function VStack(props) {
     }
   );
 }
+const pressAreaProps = {
+  as: {
+    type: "string"
+  }
+};
+function PressArea(props) {
+  const { as, children, className, style, ...rest } = getProps(props, pressAreaProps);
+  return /* @__PURE__ */ jsx(
+    as || "button",
+    {
+      className: classNames(getVersionedClassname("sui-PressArea"), "sui-width-full", className),
+      style,
+      "data-ui": "PressArea",
+      ...rest,
+      children
+    }
+  );
+}
 export {
   Box,
   Button,
@@ -1569,7 +1639,6 @@ export {
   List,
   PressArea,
   Radio,
-  Root,
   SkipToContent,
   Spinner,
   Switch,