@sanity/ui 5.0.0-alpha.8 → 5.0.0-alpha.9

package/dist/index.d.ts

@@ -16,6 +16,31 @@ declare const ALIGN_ITEMS: readonly [
 /** @public */
 export declare type AlignItems = (typeof ALIGN_ITEMS)[number];
 
+/** @public */
+export declare function Badge<T extends ElementType = "span">({
+  tone,
+  ...props
+}: BadgeProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof BadgeProps<T>>): JSX.Element;
+
+/** @public */
+export declare interface BadgeProps<
+  T extends React.ElementType = "span",
+> extends ToneProps {
+  /**
+   * HTML element to render.
+   */
+  as?: T;
+  /**
+   * Shows an icon in the start position (left side in left-to-right languages).
+   */
+  iconStart?: React.ElementType | React.ReactNode;
+  /**
+   * Sets Badge's text label. Use instead of children unless you have a special use case.
+   */
+  text?: string;
+}
+
 declare type BorderProps = {
   /** CSS **border** property */
   border?: Responsive<boolean>;

package/dist/index.js

@@ -99,7 +99,7 @@ function getCompositeValue(propValue, propDef, key) {
     compositeValue = mapping?.[propValue];
   return compositeValue;
 }
-const HASH = "ff7a34";
+const HASH = "fd663f";
 function suffixClassName(className) {
   return `${className}-${HASH}`;
 }
@@ -2045,7 +2045,53 @@ function TooltipGroup(props) {
   let t6;
   return $[8] !== Component || $[9] !== children || $[10] !== handleBlur || $[11] !== handleMouseLeave || $[12] !== handleTransitionEnd || $[13] !== rest || $[14] !== t3 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(Component, { className: t3, style: t5, "data-ui": "TooltipGroup", ref, onTransitionEnd: handleTransitionEnd, onMouseLeave: handleMouseLeave, onBlur: handleBlur, ...rest, children }), $[8] = Component, $[9] = children, $[10] = handleBlur, $[11] = handleMouseLeave, $[12] = handleTransitionEnd, $[13] = rest, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
 }
+const badgeProps = {
+  as: {
+    type: "string"
+  },
+  iconStart: {
+    type: "string"
+  },
+  text: {
+    type: "string"
+  },
+  ...toneProps
+}, badgeClassName = suffixClassName("sui-Badge");
+function Badge(t0) {
+  const $ = c(20);
+  let T0, children, t1, t2, t3, t4, t5, text;
+  if ($[0] !== t0) {
+    const {
+      tone: t62,
+      ...props
+    } = t0, tone = t62 === void 0 ? "neutral" : t62, {
+      as,
+      children: t72,
+      className,
+      style,
+      iconStart: IconStart,
+      text: t8,
+      ...rest
+    } = getProps({
+      tone,
+      ...props
+    }, badgeProps);
+    children = t72, text = t8;
+    const Component = as || "span", badgeClasses = clsx(badgeClassName, `${IconStart ? "sui-p1" : "sui-px2 sui-py1"} sui-radius-full sui-display-inline-flex sui-align-items-center sui-gap1`);
+    T0 = Component, t1 = clsx(badgeClasses, className), t2 = style, t3 = "Badge", t4 = rest, t5 = IconStart && (isValidElement(IconStart) ? IconStart : /* @__PURE__ */ jsx(Icon, { icon: IconStart, marginX: -1, marginY: -2, size: 0 })), $[0] = t0, $[1] = T0, $[2] = children, $[3] = t1, $[4] = t2, $[5] = t3, $[6] = t4, $[7] = t5, $[8] = text;
+  } else
+    T0 = $[1], children = $[2], t1 = $[3], t2 = $[4], t3 = $[5], t4 = $[6], t5 = $[7], text = $[8];
+  let t6;
+  $[9] !== text ? (t6 = text && /* @__PURE__ */ jsx(Text, { size: 1, trim: !0, children: text }), $[9] = text, $[10] = t6) : t6 = $[10];
+  let t7;
+  return $[11] !== T0 || $[12] !== children || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsxs(T0, { className: t1, style: t2, "data-ui": t3, ...t4, children: [
+    t5,
+    t6,
+    children
+  ] }), $[11] = T0, $[12] = children, $[13] = t1, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19], t7;
+}
 export {
+  Badge,
   Box,
   Button,
   Card,