@multiplatform.one/components 6.6.0 → 7.0.0

package/dist/cjs/Chip/index.cjs

@@ -22,10 +22,365 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var Chip_exports = {};
 __export(Chip_exports, {
-  Chip: () => import_forms.Chip,
-  ChipFrame: () => import_forms.ChipFrame,
-  ChipText: () => import_forms.ChipText,
-  chipIconSize: () => import_forms.chipIconSize
+  Chip: () => Chip,
+  ChipFrame: () => ChipFrame,
+  ChipText: () => ChipText,
+  chipIconSize: () => chipIconSize,
+  chipTone: () => chipTone
 });
 module.exports = __toCommonJS(Chip_exports);
-var import_forms = require("@multiplatform.one/forms");
+var import_platform = require("@multiplatform.one/platform");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime");
+const colorMap = {
+  gray: {
+    tint: "$color4",
+    hoverTint: "$color5",
+    fill: "$color11",
+    fillText: "$color1",
+    text: "$color12",
+    border: "$color7"
+  },
+  red: {
+    tint: "$red4",
+    hoverTint: "$red5",
+    fill: "$red11",
+    fillText: "$color1",
+    text: "$red12",
+    border: "$red7"
+  },
+  green: {
+    tint: "$green4",
+    hoverTint: "$green5",
+    fill: "$green11",
+    fillText: "$color1",
+    text: "$green12",
+    border: "$green7"
+  },
+  blue: {
+    tint: "$blue4",
+    hoverTint: "$blue5",
+    fill: "$blue11",
+    fillText: "$color1",
+    text: "$blue12",
+    border: "$blue7"
+  },
+  yellow: {
+    tint: "$yellow4",
+    hoverTint: "$yellow5",
+    fill: "$yellow11",
+    fillText: "$color1",
+    text: "$yellow12",
+    border: "$yellow7"
+  },
+  orange: {
+    tint: "$orange4",
+    hoverTint: "$orange5",
+    fill: "$orange11",
+    fillText: "$color1",
+    text: "$orange12",
+    border: "$orange7"
+  },
+  purple: {
+    tint: "$purple4",
+    hoverTint: "$purple5",
+    fill: "$purple11",
+    fillText: "$color1",
+    text: "$purple12",
+    border: "$purple7"
+  }
+};
+function chipTone(variant) {
+  switch (variant) {
+    case "filled":
+    case "solid":
+      return "filled";
+    case "outlined":
+    case "outline":
+      return "outlined";
+    default:
+      return "ghost";
+  }
+}
+const CHIP_RECIPE_FAMILY = "controlCompact";
+const CHIP_SIZE_TOKENS = ["$2", "$3", "$4", "$5"];
+function chipFrameGeometry(token) {
+  const recipe = (0, import_theme.sizeRecipeForToken)(token, {
+    family: CHIP_RECIPE_FAMILY
+  });
+  return {
+    paddingHorizontal: recipe.paddingHorizontal,
+    paddingVertical: Math.round(recipe.paddingHorizontal * 0.25),
+    gap: recipe.gap
+  };
+}
+const chipFrameVariants = Object.fromEntries(CHIP_SIZE_TOKENS.map(token => [token, chipFrameGeometry(token)]));
+const chipTextVariants = Object.fromEntries(CHIP_SIZE_TOKENS.map(token => [token, {
+  fontSize: (0, import_theme.sizeRecipeForToken)(token, {
+    family: CHIP_RECIPE_FAMILY
+  }).fontSize
+}]));
+const ChipFrame = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "Chip",
+  flexDirection: "row",
+  alignItems: "center",
+  ...chipFrameVariants.$3,
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  variants: {
+    size: {
+      ...chipFrameVariants,
+      "...size": val => chipFrameGeometry(String(val ?? "$3"))
+    },
+    variant: {
+      solid: {},
+      filled: {},
+      subtle: {},
+      ghost: {},
+      outline: {
+        borderWidth: 1
+      },
+      outlined: {
+        borderWidth: 1
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    size: "$3"
+  }
+});
+const ChipText = (0, import_tamagui.styled)(import_tamagui.Text, {
+  name: "ChipText",
+  fontWeight: "500",
+  numberOfLines: 1,
+  userSelect: "none",
+  flexShrink: 1,
+  minWidth: 0,
+  ...chipTextVariants.$3,
+  variants: {
+    size: {
+      ...chipTextVariants,
+      "...size": val => ({
+        fontSize: (0, import_theme.sizeRecipeForToken)(String(val ?? "$3"), {
+          family: CHIP_RECIPE_FAMILY
+        }).fontSize
+      })
+    }
+  }
+});
+const IconSlot = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ChipIcon",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
+function chipIconSize(size) {
+  return (0, import_theme.sizeRecipeForToken)(size, {
+    family: CHIP_RECIPE_FAMILY
+  }).iconSize;
+}
+const DismissButton = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ChipDismiss",
+  cursor: "pointer",
+  opacity: 0.7,
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1
+  },
+  pressStyle: {
+    opacity: 0.9
+  },
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    opacity: 1,
+    outlineWidth: 0
+  }
+});
+const DismissRing = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ChipDismissRing",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "$0.5",
+  hoverStyle: {
+    backgroundColor: "$color5"
+  }
+});
+function normalizeIcon(icon, size) {
+  if (icon == null || icon === false) return null;
+  if ((0, import_react2.isValidElement)(icon)) {
+    const props = icon.props;
+    return (0, import_react2.cloneElement)(icon, {
+      size: props.size ?? size
+    });
+  }
+  if (typeof icon === "function") {
+    return (0, import_react2.createElement)(icon, {
+      size
+    });
+  }
+  return icon;
+}
+function Chip({
+  children,
+  size,
+  variant = "subtle",
+  color = "gray",
+  icon,
+  selected,
+  onPress,
+  onDismiss,
+  disabled,
+  maxWidth
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps,
+    disabledState
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Chip"
+  });
+  const colors = colorMap[color] ?? colorMap.gray;
+  const tone = chipTone(variant);
+  const resolvedSize = size ?? knobProps.sizeToken;
+  const selectedTint = (0, import_theme.useAccentTintedSurface)();
+  const selectedFill = selectedTint ?? colors.tint;
+  const onSelectedLabel = (0, import_theme.useReadableTextOn)(selectedFill);
+  if (typeof document !== "undefined") (0, import_theme.ensureCompositeFocusRing)();
+  const isSelected = Boolean(selected);
+  const interactive = Boolean(onPress) && !disabled;
+  const showDismiss = Boolean(onDismiss) && !disabled;
+  const iconSize = chipIconSize(resolvedSize);
+  const RING_INSET = 2;
+  const dismissVisual = iconSize + RING_INSET * 2;
+  const dismissOutset = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - dismissVisual) / 2));
+  let backgroundColor = colors.tint;
+  let textColor = colors.text;
+  let borderColor = "transparent";
+  if (isSelected) {
+    backgroundColor = selectedFill;
+    textColor = onSelectedLabel ?? colors.text;
+    borderColor = "transparent";
+  } else if (tone === "filled") {
+    backgroundColor = colors.fill;
+    textColor = colors.fillText;
+    borderColor = "transparent";
+  } else if (tone === "outlined") {
+    backgroundColor = "transparent";
+    textColor = colors.text;
+    borderColor = colors.border;
+  }
+  const hoverBackground = interactive ? isSelected ? selectedFill : tone === "outlined" ? colors.tint : tone === "filled" ? colors.fill : colors.hoverTint : void 0;
+  const leading = icon != null ? normalizeIcon(icon, iconSize) : isSelected ? (0, import_react2.createElement)(import_react.CheckIcon, {
+    size: iconSize,
+    weight: "bold"
+  }) : null;
+  const activate = () => {
+    if (!interactive) return;
+    onPress?.();
+  };
+  const handleKeyDown = e => {
+    if (e.defaultPrevented || e.repeat) return;
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    activate();
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ChipFrame, {
+    size: resolvedSize,
+    variant,
+    backgroundColor,
+    ...knobProps.borderRadius,
+    borderColor,
+    borderWidth: isSelected ? 0 : tone === "outlined" ? Math.max(knobProps.borderRadius.borderWidth, 1) : 0,
+    transition: knobProps.transition,
+    maxWidth,
+    overflow: "visible",
+    cursor: disabled ? "not-allowed" : interactive ? "pointer" : "default",
+    "data-chip": "",
+    "data-selected": isSelected ? "true" : void 0,
+    ...(interactive ? {
+      role: "button",
+      tabIndex: 0,
+      ...(selected != null ? {
+        "aria-pressed": isSelected
+      } : void 0)
+    } : void 0),
+    ...(disabled ? {
+      "aria-disabled": true,
+      ...(isSelected ? disabledState.selectedSurfaceKnobProps : disabledState.surfaceKnobProps),
+      ...disabledState.assemblyKnobProps
+    } : void 0),
+    hoverStyle: hoverBackground != null ? {
+      backgroundColor: hoverBackground
+    } : void 0,
+    pressStyle: interactive ? {
+      backgroundColor: hoverBackground,
+      opacity: 0.92
+    } : void 0,
+    focusVisibleStyle: interactive ? (0, import_theme.ensureFocusVisibleRing)() : {
+      outlineWidth: 0
+    },
+    onPress: interactive ? activate : void 0,
+    ...(interactive && import_platform.isWeb ? {
+      onKeyDown: handleKeyDown
+    } : void 0),
+    children: [leading ?
+    // IconSlot (styled View) has no `color`; Tamagui forwards it to set the
+    // icon's inherited color at runtime (house Record cast).
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(IconSlot, {
+      ...{
+        color: textColor
+      },
+      children: leading
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChipText, {
+      size: resolvedSize,
+      ...knobProps.body,
+      fontWeight: "500",
+      color: textColor,
+      ...(disabled ? disabledState.textKnobProps : void 0),
+      children
+    }), showDismiss ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DismissButton, {
+      role: "button",
+      "aria-label": t("Remove"),
+      tabIndex: 0,
+      className: "mp-chip-dismiss",
+      borderRadius: knobProps.pointy ? 0 : 1e3,
+      ...(0, import_theme.pressTargetStyle)(),
+      marginVertical: -dismissOutset,
+      marginHorizontal: -dismissOutset,
+      hitSlop: (0, import_theme.pressTargetHitSlop)(dismissVisual),
+      onPress: e => {
+        e.stopPropagation?.();
+        onDismiss?.();
+      },
+      onKeyDown: e => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          onDismiss?.();
+        }
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DismissRing, {
+        className: "mp-chip-dismiss-ring",
+        borderRadius: knobProps.pointy ? 0 : 1e3,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+          size: iconSize
+        })
+      })
+    }) : null]
+  });
+}